/*
Theme Name:   Lire et Partage
Theme URI:    https://www.lireetpartagemoulon.fr
Description:  Thème enfant GeneratePress pour la Bibliothèque Associative de Moulon.
              Responsive, accessible, identité visuelle "bibliothèque chaleureuse".
Author:       Nicolas (webmaster)
Template:     generatepress
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  lireetpartage
*/

/* ============================================================
   PALETTE DE COULEURS — Lire et Partage
   Bleu bibliothèque + crème chaleureux + accents orangés
   ============================================================

   --lep-bleu-fonce  : #1a3a5c  Navigation, titres forts
   --lep-bleu        : #2b5f8e  Liens, boutons principaux
   --lep-bleu-clair  : #e8f0f8  Fonds sections, hover menu
   --lep-creme       : #faf7f2  Fond général du site
   --lep-brun-clair  : #f0e8d8  Fond sidebar, header
   --lep-orange      : #c96b1a  Accent, CTA, mise en avant
   --lep-texte       : #2c2c2c  Corps de texte
   --lep-gris        : #666666  Méta, dates, secondaire

   ============================================================ */

/* ── Variables globales ─────────────────────────────────────────────────── */
:root {
    --lep-bleu-fonce : #1a3a5c;
    --lep-bleu       : #2b5f8e;
    --lep-bleu-clair : #e8f0f8;
    --lep-creme      : #faf7f2;
    --lep-brun-clair : #f0e8d8;
    --lep-orange     : #c96b1a;
    --lep-texte      : #2c2c2c;
    --lep-gris       : #666666;
    --lep-bordure    : #d4c9b8;
    --lep-radius     : 6px;
    --lep-shadow     : 0 2px 8px rgba(0,0,0,.08);
    --lep-transition : .2s ease;

    /* Accessibilité — mode contraste élevé (activé via JS) */
    --a11y-bg        : #ffffff;
    --a11y-text      : #000000;
    --a11y-link      : #0000cc;
    --a11y-size      : 1rem;
}

/* ── Fond général ───────────────────────────────────────────────────────── */
body {
    background-color: var(--lep-creme);
    color: var(--lep-texte);
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: var(--a11y-size);
    line-height: 1.75;
}

/* ── HEADER ─────────────────────────────────────────────────────────────── */
.site-header {
    background: #35689b !important;
    border-bottom: 3px solid var(--lep-orange);
    padding: 0 !important;
}

.site-header .header-inner {
    padding: .75rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
}

/* Logo / titre du site */
.site-title a,
.site-title a:visited {
    color: #ffffff !important;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: .02em;
}
.site-title a:hover { color: var(--lep-brun-clair) !important; }

.site-description {
    color: rgba(255,255,255,.65) !important;
    font-size: .82rem;
    font-style: italic;
    margin: 0;
}
/* ── NAVIGATION : Galets affinés ────────── */

/* 1. Reset bandeau */
.main-navigation {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.main-navigation .inside-navigation {
    display: flex !important;
    justify-content: center !important;
    padding-top: 15px !important; /* Réduit un peu le haut */
    padding-bottom: 10px !important;
}

/* 2. Style des galets : Padding réduit pour moins d'épaisseur */
.main-navigation .main-nav > ul > li > a,
.main-navigation ul ul li a {
    background-color: #ffffe0 !important;
    color: #6666ff !important;
    border: 2px solid #6666ff !important;
    border-radius: 60px 20px !important;
    
    font-family: "Open Sans", sans-serif !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    font-size: 13px !important; /* Taille légèrement plus petite pour accompagner */
    
    padding: 8px 16px !important; /* <--- C'est ici que l'épaisseur diminue */
    margin: 4px !important;
    transition: all 0.3s ease;
    display: block !important;
}

/* 3. Effet survol */
.main-navigation .main-nav > ul > li > a:hover,
.main-navigation ul ul li a:hover {
    background-color: #6666ff !important;
    color: #ffffe0 !important;
}

/* 4. Dropdown : Ajustement de la largeur */
.main-navigation ul ul {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 200px !important; /* Réduit la largeur du sous-menu */
    padding-top: 5px !important;
}
/* ── BARRE D'ACCESSIBILITÉ ──────────────────────────────────────────────── */
#lep-a11y-bar {
    background: var(--lep-bleu-fonce);
    border-bottom: 1px solid rgba(255,255,255,.15);
    padding: .3rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    font-size: .78rem;
}

#lep-a11y-bar span {
    color: rgba(255,255,255,.6);
    font-size: .75rem;
}

.lep-a11y-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,.35);
    color: rgba(255,255,255,.8);
    border-radius: 3px;
    padding: .15rem .5rem;
    cursor: pointer;
    font-size: .75rem;
    font-family: inherit;
    transition: all var(--lep-transition);
    line-height: 1.4;
}

.lep-a11y-btn:hover,
.lep-a11y-btn.active {
    background: var(--lep-orange);
    border-color: var(--lep-orange);
    color: #fff;
}

/* ── MODE CONTRASTE ÉLEVÉ ───────────────────────────────────────────────── */
body.lep-high-contrast {
    --lep-creme  : #ffffff;
    --lep-texte  : #000000;
    --lep-bleu   : #0000cc;
    --lep-orange : #884400;
}

body.lep-high-contrast * {
    text-shadow: none !important;
    box-shadow: none !important;
}

body.lep-high-contrast a { color: #0000cc !important; text-decoration: underline !important; }
body.lep-high-contrast a:visited { color: #551a8b !important; }

body.lep-high-contrast .site-header,
body.lep-high-contrast .main-navigation,
body.lep-high-contrast #lep-a11y-bar {
    background: #000000 !important;
    border-color: #ffffff !important;
}

body.lep-high-contrast .entry-content,
body.lep-high-contrast .widget,
body.lep-high-contrast .site-content {
    background: #ffffff !important;
    color: #000000 !important;
}

/* ── MODE GRANDE POLICE ─────────────────────────────────────────────────── */
body.lep-large-text { --a11y-size: 1.2rem; }
body.lep-large-text * { line-height: 1.85 !important; }

body.lep-xlarge-text { --a11y-size: 1.45rem; }
body.lep-xlarge-text * { line-height: 2 !important; }

/* ── CONTENU PRINCIPAL ──────────────────────────────────────────────────── */
.site-content {
    background: var(--lep-creme);
    padding: 1.5rem 0;
}

.entry-title,
.entry-title a {
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--lep-bleu-fonce) !important;
    font-weight: 700;
    line-height: 1.3;
}
.entry-title a:hover { color: var(--lep-orange) !important; }

.entry-header {
    border-bottom: 2px solid var(--lep-brun-clair);
    padding-bottom: .5rem;
    margin-bottom: 1rem;
}

/* Méta articles */
.entry-meta,
.entry-meta a {
    color: var(--lep-gris) !important;
    font-size: .82rem;
}

/* Corps */
.entry-content {
    color: var(--lep-texte);
}

.entry-content h2,
.entry-content h3 {
    font-family: 'Playfair Display', serif;
    color: var(--lep-bleu-fonce);
}

.entry-content a {
    color: var(--lep-bleu);
    text-decoration: underline;
    text-decoration-color: rgba(43,95,142,.3);
    text-underline-offset: 3px;
    transition: color var(--lep-transition), text-decoration-color var(--lep-transition);
}
.entry-content a:hover {
    color: var(--lep-orange);
    text-decoration-color: var(--lep-orange);
}

/* ── SIDEBAR ────────────────────────────────────────────────────────────── */
.widget-area {
    background: var(--lep-brun-clair);
    border-radius: var(--lep-radius);
    padding: 1.25rem;
    border: 1px solid var(--lep-bordure);
}

.widget-title {
    font-family: 'Playfair Display', serif;
    color: var(--lep-bleu-fonce) !important;
    font-size: 1rem;
    border-bottom: 2px solid var(--lep-orange);
    padding-bottom: .4rem;
    margin-bottom: .85rem;
}

.widget ul li {
    border-bottom: 1px solid var(--lep-bordure);
    padding: .35rem 0;
    font-size: .88rem;
}
.widget ul li:last-child { border-bottom: none; }

.widget a { color: var(--lep-bleu) !important; }
.widget a:hover { color: var(--lep-orange) !important; }

/* ── SLIDER D'ARTICLES (page d'accueil) ─────────────────────────────────── */
.lep-slider {
    background: var(--lep-bleu-fonce);
    border-radius: var(--lep-radius);
    overflow: hidden;
    margin-bottom: 1.5rem;
    position: relative;
}

.lep-slider-track {
    display: flex;
    transition: transform .5s ease;
}

.lep-slide {
    flex: 0 0 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    min-height: 220px;
}

.lep-slide-img {
    overflow: hidden;
}
.lep-slide-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lep-slide-body {
    padding: 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--lep-bleu-fonce);
}

.lep-slide-title {
    font-family: 'Playfair Display', serif;
    color: #fff;
    font-size: 1.2rem;
    margin: 0 0 .5rem;
    line-height: 1.3;
}

.lep-slide-title a {
    color: #fff !important;
    text-decoration: none;
}
.lep-slide-title a:hover { color: var(--lep-brun-clair) !important; }

.lep-slide-excerpt {
    color: rgba(255,255,255,.75);
    font-size: .85rem;
    line-height: 1.6;
    margin: 0 0 1rem;
}

.lep-slide-link {
    display: inline-block;
    background: var(--lep-orange);
    color: #fff !important;
    text-decoration: none !important;
    padding: .4rem .9rem;
    border-radius: var(--lep-radius);
    font-size: .82rem;
    font-weight: 600;
    align-self: flex-start;
    transition: background var(--lep-transition);
}
.lep-slide-link:hover { background: #a55515 !important; color: #fff !important; }

.lep-slider-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .6rem;
    background: rgba(0,0,0,.2);
}

.lep-slider-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.4);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background var(--lep-transition);
}
.lep-slider-dot.active { background: var(--lep-orange); }

.lep-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,.4);
    border: none;
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--lep-transition);
    z-index: 2;
}
.lep-slider-arrow:hover { background: var(--lep-orange); }
.lep-slider-arrow--prev { left: .5rem; }
.lep-slider-arrow--next { right: .5rem; }

/* ── CARDS D'ARTICLES ───────────────────────────────────────────────────── */
.lep-articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.lep-card {
    background: #fff;
    border: 1px solid var(--lep-bordure);
    border-radius: var(--lep-radius);
    overflow: hidden;
    box-shadow: var(--lep-shadow);
    transition: transform var(--lep-transition), box-shadow var(--lep-transition);
    display: flex;
    flex-direction: column;
}
.lep-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

.lep-card__img {
    aspect-ratio: 16/9;
    overflow: hidden;
}
.lep-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.lep-card:hover .lep-card__img img { transform: scale(1.04); }

.lep-card__body {
    padding: 1rem 1.1rem 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.lep-card__cat {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--lep-orange);
    font-weight: 700;
    margin-bottom: .3rem;
}

.lep-card__title {
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
    color: var(--lep-bleu-fonce);
    margin: 0 0 .5rem;
    line-height: 1.35;
}
.lep-card__title a {
    color: inherit !important;
    text-decoration: none;
}
.lep-card__title a:hover { color: var(--lep-orange) !important; }

.lep-card__excerpt {
    font-size: .85rem;
    color: var(--lep-gris);
    flex: 1;
    line-height: 1.6;
}

.lep-card__meta {
    font-size: .75rem;
    color: var(--lep-gris);
    margin-top: .75rem;
    padding-top: .6rem;
    border-top: 1px solid var(--lep-brun-clair);
}

/* ── BOUTONS GÉNÉRAUX ───────────────────────────────────────────────────── */
.button,
input[type="submit"],
.wp-block-button__link {
    background: var(--lep-bleu) !important;
    color: #fff !important;
    border-radius: var(--lep-radius) !important;
    border: none !important;
    padding: .55rem 1.3rem !important;
    font-family: 'Libre Baskerville', serif !important;
    font-size: .9rem !important;
    cursor: pointer;
    transition: background var(--lep-transition) !important;
}
.button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
    background: var(--lep-bleu-fonce) !important;
}

/* ── PAGINATION ─────────────────────────────────────────────────────────── */
.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--lep-bordure);
    border-radius: var(--lep-radius);
    color: var(--lep-bleu) !important;
    text-decoration: none !important;
    margin: 0 .2rem;
    transition: all var(--lep-transition);
}
.page-numbers:hover,
.page-numbers.current {
    background: var(--lep-bleu);
    border-color: var(--lep-bleu);
    color: #fff !important;
}

/* ── FORUM bbPRESS ──────────────────────────────────────────────────────── */
#bbpress-forums {
    font-family: 'Libre Baskerville', serif;
}

#bbpress-forums li.bbp-header {
    background: var(--lep-bleu-fonce) !important;
    color: #fff;
    border-radius: var(--lep-radius) var(--lep-radius) 0 0;
    padding: .6rem 1rem !important;
}

#bbpress-forums li.bbp-body .bbp-forum,
#bbpress-forums li.bbp-body .bbp-topic {
    border-bottom: 1px solid var(--lep-bordure);
    padding: .6rem 1rem !important;
    background: #fff;
    transition: background var(--lep-transition);
}

#bbpress-forums li.bbp-body .bbp-forum:hover,
#bbpress-forums li.bbp-body .bbp-topic:hover {
    background: var(--lep-bleu-clair);
}

#bbpress-forums .bbp-forum-title a,
#bbpress-forums .bbp-topic-title a {
    color: var(--lep-bleu) !important;
    font-weight: 600;
    text-decoration: none;
}
#bbpress-forums .bbp-forum-title a:hover,
#bbpress-forums .bbp-topic-title a:hover {
    color: var(--lep-orange) !important;
}

#bbpress-forums .bbp-topic-count,
#bbpress-forums .bbp-reply-count {
    color: var(--lep-gris);
    font-size: .82rem;
}

/* Formulaire de réponse bbPress */
#new-post #bbp_reply_content,
#new-topic #bbp_topic_content {
    border: 2px solid var(--lep-bordure);
    border-radius: var(--lep-radius);
    padding: .6rem .8rem;
    width: 100%;
    font-family: inherit;
    transition: border-color var(--lep-transition);
}
#new-post #bbp_reply_content:focus,
#new-topic #bbp_topic_content:focus {
    border-color: var(--lep-bleu);
    outline: none;
}

/* ── FOOTER ─────────────────────────────────────────────────────────────── */
.site-footer {
    background: var(--lep-bleu-fonce) !important;
    color: rgba(255,255,255,.7) !important;
    border-top: 3px solid var(--lep-orange);
    padding: 1.5rem 0 !important;
    margin-top: 2rem;
}

.site-footer a {
    color: rgba(255,255,255,.8) !important;
    text-decoration: underline;
}
.site-footer a:hover { color: var(--lep-brun-clair) !important; }

.site-info {
    text-align: center;
    font-size: .82rem;
}

/* ── FOCUS ACCESSIBILITÉ (WCAG AA) ──────────────────────────────────────── */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
    outline: 3px solid var(--lep-orange) !important;
    outline-offset: 3px !important;
    border-radius: 2px;
}

/* Skip to content */
.skip-link {
    background: var(--lep-orange);
    color: #fff;
    font-weight: 700;
    padding: .5rem 1rem;
    position: absolute;
    left: -9999px;
    top: .5rem;
    z-index: 9999;
    border-radius: var(--lep-radius);
    text-decoration: none;
}
.skip-link:focus { left: .5rem; }

/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .lep-slide {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .lep-slide-img { max-height: 180px; }
    .lep-slide-body { padding: 1rem 1.25rem; }
    .lep-slide-title { font-size: 1rem; }
}

@media (max-width: 768px) {
    .site-title a { font-size: 1.25rem !important; }

    .lep-articles-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .widget-area {
        margin-top: 1.5rem;
    }

    #lep-a11y-bar {
        flex-wrap: wrap;
        justify-content: center;
        gap: .35rem;
        padding: .4rem 1rem;
    }
}

@media (max-width: 480px) {
    :root { --a11y-size: .95rem; }

    .lep-slide-body { padding: .85rem 1rem; }
    .lep-slide-excerpt { display: none; }

    .site-header .header-inner { padding: .6rem 1rem; }
}

/* ── PRINT ──────────────────────────────────────────────────────────────── */
@media print {
    .site-header,
    .main-navigation,
    #lep-a11y-bar,
    .widget-area,
    .site-footer { display: none !important; }

    body { background: #fff; color: #000; font-size: 12pt; }
    a { color: #000 !important; text-decoration: underline; }
    .entry-title { font-size: 16pt; }
}