/*
Theme Name: ÉpissAntre Blog
Theme URI: https://www.epissantre.fr/
Author: Thème sur mesure
Author URI: https://www.epissantre.fr/
Description: Thème WordPress sur mesure pour le blog de l'épissAntre — séjours uniques en site troglodytique (vallée de la Loire). Reprend l'identité graphique du site : logo, palette de teintes « tuffeau / terre / Loire » et typographies éditoriales. La page principale du blog affiche uniquement l'en-tête, la liste des articles publiés et le pied de page. Menu de navigation sur une seule ligne.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: epissantre
Tags: blog, custom-logo, custom-menu, one-column, translation-ready, organic
*/

/* =========================================================================
   1. Variables de design — TOUT se règle ici
   Pour coller exactement à la charte du site, ajustez ces valeurs.
   ========================================================================= */
:root {
    /* — Palette « tuffeau / terre / Loire » — */
    --color-bg:        #f6f1e7; /* fond crème (pierre de tuffeau)            */
    --color-surface:   #fbf8f1; /* surfaces / cartes                         */
    --color-ink:       #2b2420; /* texte principal (brun « antre » profond)  */
    --color-ink-soft:  #5c5046; /* texte secondaire                          */
    --color-accent:    #b3522f; /* accent terre cuite                        */
    --color-accent-d:  #8f3f22; /* accent terre cuite — survol               */
    --color-moss:      #6f7a52; /* vert sourd (coteaux de Loire)             */
    --color-line:      #e4dccd; /* filets / séparateurs                      */
    --color-stone:     #d8cdb8; /* pierre claire                             */

    /* — Typographies — */
    --font-display: "Fraunces", Georgia, "Times New Roman", serif;
    --font-body:    "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* — Rythme & mise en page — */
    --container:    1180px;
    --container-narrow: 760px;
    --radius:       4px;
    --radius-lg:    10px;
    --shadow:       0 1px 2px rgba(43, 36, 32, .04), 0 14px 40px -24px rgba(43, 36, 32, .35);
    --transition:   .28s cubic-bezier(.2, .7, .2, 1);
}

/* =========================================================================
   2. Réinitialisation douce
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    background-color: var(--color-bg);
    /* texture papier/pierre très discrète */
    background-image:
        radial-gradient(circle at 18% -10%, rgba(179, 82, 47, .05), transparent 42%),
        radial-gradient(circle at 100% 0%, rgba(111, 122, 82, .06), transparent 38%);
    background-attachment: fixed;
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-accent); text-decoration: none; transition: color var(--transition); }
a:hover, a:focus { color: var(--color-accent-d); }
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.01em;
    color: var(--color-ink);
    margin: 0 0 .6em;
    font-optical-sizing: auto;
}
p { margin: 0 0 1.3em; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 2px; }

/* Accessibilité : lien d'évitement */
.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 999;
    background: var(--color-ink); color: #fff; padding: .7rem 1.1rem; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; color: #fff; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.5rem); }

/* =========================================================================
   3. En-tête du site + navigation sur une seule ligne
   ========================================================================= */
.site-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(251, 248, 241, .88);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--color-line);
}
.site-header__inner {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.4rem);
    min-height: 84px;
    padding-block: .55rem;
}

/* — Logo — */
.site-branding { flex: 0 0 auto; display: flex; align-items: center; }
.site-branding a { display: inline-flex; align-items: center; }
.site-logo img,
.custom-logo {
    height: clamp(46px, 6vw, 62px);
    width: auto;
    display: block;
}
.site-title-text {
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 600;
    color: var(--color-ink);
    letter-spacing: -.01em;
}
.site-title-text b { color: var(--color-accent); font-weight: 600; }

/* — Navigation : tous les éléments sur UNE SEULE LIGNE — */
.site-nav { flex: 1 1 auto; min-width: 0; }
.site-nav .menu,
.site-nav ul {
    display: flex;
    flex-wrap: nowrap;          /* jamais de retour à la ligne */
    align-items: center;
    justify-content: flex-end;
    gap: clamp(.45rem, 1.3vw, 1.55rem);
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: auto;           /* défilement horizontal si l'espace manque */
    scrollbar-width: thin;
    scrollbar-color: var(--color-stone) transparent;
    -webkit-overflow-scrolling: touch;
}
.site-nav .menu::-webkit-scrollbar { height: 6px; }
.site-nav .menu::-webkit-scrollbar-thumb { background: var(--color-stone); border-radius: 99px; }
.site-nav li { flex: 0 0 auto; }
.site-nav a {
    display: inline-block;
    white-space: nowrap;        /* chaque libellé reste sur une ligne */
    color: var(--color-ink-soft);
    font-weight: 600;
    font-size: clamp(.82rem, .95vw, .95rem);
    letter-spacing: .005em;
    padding: .35rem .15rem;
    position: relative;
}
.site-nav a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
    height: 2px; background: var(--color-accent);
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--transition);
}
.site-nav a:hover, .site-nav a:focus,
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a {
    color: var(--color-ink);
}
.site-nav a:hover::after, .site-nav a:focus::after,
.site-nav .current-menu-item > a::after,
.site-nav .current_page_item > a::after { transform: scaleX(1); }

/* =========================================================================
   4. Bandeau de page (titre du blog)
   ========================================================================= */
.page-intro {
    text-align: center;
    padding: clamp(2.8rem, 7vw, 5rem) 0 clamp(1.6rem, 4vw, 2.6rem);
}
.page-intro__eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .22em;
    font-size: .72rem;
    color: var(--color-accent);
    margin-bottom: 1rem;
}
.page-intro__title {
    font-size: clamp(2.4rem, 6vw, 4rem);
    margin: 0 0 .35em;
}
.page-intro__sub {
    max-width: 56ch; margin-inline: auto;
    color: var(--color-ink-soft); font-size: 1.1rem;
}
.page-intro__rule {
    width: 64px; height: 3px; margin: 1.6rem auto 0;
    background: var(--color-accent); border: 0; border-radius: 99px;
}

/* =========================================================================
   5. Liste des articles (page principale du blog)
   ========================================================================= */
main { display: block; }
.posts {
    display: grid;
    gap: clamp(1.4rem, 3vw, 2.2rem);
    padding-bottom: clamp(3rem, 7vw, 5.5rem);
}
@media (min-width: 720px) {
    .posts { grid-template-columns: repeat(2, 1fr); }
    /* Le premier article s'étend sur toute la largeur (article à la une) */
    .posts .post-card:first-child { grid-column: 1 / -1; }
}

.post-card {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.post-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: var(--color-stone);
}
.post-card__media { display: block; overflow: hidden; background: var(--color-stone); aspect-ratio: 16 / 9; }
.post-card:first-child .post-card__media { aspect-ratio: 21 / 9; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.post-card:hover .post-card__media img { transform: scale(1.045); }

.post-card__body { padding: clamp(1.3rem, 2.6vw, 1.9rem); display: flex; flex-direction: column; flex: 1 1 auto; }
.post-card__meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
    font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    color: var(--color-moss); margin-bottom: .8rem;
}
.post-card__meta .cat { color: var(--color-accent); }
.post-card__meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--color-stone); }
.post-card__title { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: 0 0 .5em; }
.post-card:first-child .post-card__title { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.post-card__title a { color: inherit; }
.post-card__title a:hover { color: var(--color-accent); }
.post-card__excerpt { color: var(--color-ink-soft); margin: 0 0 1.3rem; }
.post-card__more {
    margin-top: auto; align-self: flex-start;
    font-weight: 800; font-size: .9rem; letter-spacing: .01em;
    display: inline-flex; align-items: center; gap: .45rem;
}
.post-card__more svg { transition: transform var(--transition); }
.post-card__more:hover svg { transform: translateX(4px); }

/* État vide */
.no-posts { text-align: center; padding: clamp(2rem, 6vw, 4rem) 0 5rem; }

/* =========================================================================
   6. Pagination
   ========================================================================= */
.pagination { padding-bottom: clamp(3rem, 7vw, 5rem); }
.pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; height: 44px; padding: 0 .6rem;
    border: 1px solid var(--color-line); border-radius: var(--radius);
    color: var(--color-ink-soft); font-weight: 700; background: var(--color-surface);
    transition: all var(--transition);
}
.pagination .page-numbers:hover { border-color: var(--color-accent); color: var(--color-accent); }
.pagination .page-numbers.current { background: var(--color-ink); border-color: var(--color-ink); color: #fff; }

/* =========================================================================
   7. Article seul + pages
   ========================================================================= */
.entry { padding-bottom: clamp(3rem, 7vw, 5rem); }
.entry-header { text-align: center; padding: clamp(2.4rem, 6vw, 4rem) 0 clamp(1.4rem, 3vw, 2.2rem); }
.entry-header .entry-title { font-size: clamp(2rem, 5vw, 3.4rem); margin-bottom: .3em; }
.entry-header .post-card__meta { justify-content: center; }
.entry-featured { margin: 0 auto clamp(1.6rem, 4vw, 2.6rem); max-width: var(--container); border-radius: var(--radius-lg); overflow: hidden; }
.entry-featured img { width: 100%; }

.entry-content { max-width: var(--container-narrow); margin-inline: auto; }
.entry-content > * { margin-bottom: 1.3em; }
.entry-content h2 { font-size: 1.9rem; margin-top: 1.8em; }
.entry-content h3 { font-size: 1.45rem; margin-top: 1.4em; }
.entry-content img, .entry-content figure { border-radius: var(--radius-lg); }
.entry-content blockquote {
    margin: 1.8em 0; padding: .6em 0 .6em 1.4em;
    border-left: 3px solid var(--color-accent);
    font-family: var(--font-display); font-size: 1.3rem; font-style: italic; color: var(--color-ink);
}
.entry-content a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.entry-content ul, .entry-content ol { padding-left: 1.3em; }
.entry-content li { margin-bottom: .5em; }
.entry-content code { background: var(--color-stone); padding: .15em .4em; border-radius: 4px; font-size: .92em; }

.entry-footer { max-width: var(--container-narrow); margin: 2.4rem auto 0; padding-top: 1.6rem; border-top: 1px solid var(--color-line); }
.tags-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.tags-links a { font-size: .8rem; font-weight: 700; border: 1px solid var(--color-line); padding: .25rem .7rem; border-radius: 99px; color: var(--color-ink-soft); }
.tags-links a:hover { border-color: var(--color-accent); color: var(--color-accent); }

.post-nav { max-width: var(--container-narrow); margin: 2.4rem auto 0; display: flex; justify-content: space-between; gap: 1rem; }
.post-nav a { font-weight: 700; }
.post-nav small { display: block; text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; color: var(--color-moss); }

/* =========================================================================
   8. Pied de page
   ========================================================================= */
.site-footer {
    background: var(--color-ink);
    color: #d9d0c4;
    margin-top: auto;
    padding: clamp(2.8rem, 6vw, 4.2rem) 0 clamp(1.6rem, 4vw, 2.2rem);
}
.site-footer a { color: #efe7da; }
.site-footer a:hover { color: #fff; }
.site-footer__grid {
    display: grid; gap: 2rem;
    grid-template-columns: 1fr;
}
@media (min-width: 720px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer__brand .footer-logo { height: 56px; width: auto; margin-bottom: 1rem; filter: brightness(0) invert(1); opacity: .95; }
.site-footer__brand .site-title-text { color: #fff; }
.site-footer__brand p { color: #b9ae9f; max-width: 36ch; }
.footer-col h4 { color: #fff; font-size: 1rem; letter-spacing: .02em; margin-bottom: 1rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer-col .contact-line { display: flex; gap: .6rem; align-items: flex-start; color: #c8bdae; margin-bottom: .6rem; }
.footer-col .contact-line svg { flex: 0 0 auto; margin-top: 3px; color: var(--color-accent); }

.footer-social { display: flex; gap: .7rem; margin-top: 1.2rem; }
.footer-social a {
    width: 40px; height: 40px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,.18); color: #efe7da;
    transition: all var(--transition);
}
.footer-social a:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; transform: translateY(-2px); }

.site-footer__bottom {
    margin-top: clamp(2rem, 5vw, 3rem); padding-top: 1.4rem;
    border-top: 1px solid rgba(255,255,255,.12);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem;
    font-size: .85rem; color: #a99e8e;
}
.site-footer__bottom nav { display: flex; flex-wrap: wrap; gap: .35rem 1rem; }

/* =========================================================================
   9. Divers
   ========================================================================= */
.page-layout { display: flex; flex-direction: column; min-height: 100vh; }
.screen-reader-text {
    position: absolute !important; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden;
}
.btn {
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--color-accent); color: #fff; font-weight: 800;
    padding: .8rem 1.5rem; border-radius: 99px; transition: all var(--transition);
}
.btn:hover { background: var(--color-accent-d); color: #fff; transform: translateY(-2px); }

/* Apparition au chargement */
@media (prefers-reduced-motion: no-preference) {
    .post-card, .page-intro__title, .page-intro__sub { animation: rise .7s both; }
    .post-card:nth-child(2) { animation-delay: .06s; }
    .post-card:nth-child(3) { animation-delay: .12s; }
    .post-card:nth-child(4) { animation-delay: .18s; }
    .post-card:nth-child(5) { animation-delay: .24s; }
    @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
}