/*
Theme Name: Talus Genevrier
Template: generatepress
Version: 1.0.0
Description: Habillage de Parole commune
*/

/* ---------------------------------------------------------------
   Jetons de design — palette ember-glow, espacement comfortable,
   largeur wide, rayon none (0px), ombre medium, signature sig-C
   (sans colonne laterale / conteneur unique / nav sous l'en-tete).
   --------------------------------------------------------------- */
:root {
    --tg-primaire: #C17747;
    --tg-primaire-fonce: #9A5A31;   /* 4.78:1 sur la teinte claire, le ton brut est a 3.1 */
    --tg-secondaire: #D4A574;
    --tg-accent: #F39C12;
    --tg-chaud: #E8D5C4;
    --tg-surface: #FDF8F4;
    --tg-fond: #FFFFFF;
    --tg-encre: #2C1810;
    --tg-encre-2: #5D5D5D;
    --tg-filet: #F5E0CC;
    --tg-nav: #2C1810;              /* bandeau de navigation, 14.8:1 contre la creme */
    --tg-nav-encre: #FDF8F4;
    --tg-rayon: 0px;                /* jeton border_radius "none" */
    --tg-ombre: 0 4px 12px rgba(0, 0, 0, 0.1);
    --tg-ecart-section: 4rem;
    --tg-ecart-bloc: 1.5rem;
    --tg-marge-conteneur: 2rem;
    --tg-mesure: 1100px;
}

body {
    background-color: var(--tg-fond);
    color: var(--tg-encre);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title,
.widget-title {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-weight: 700;
    letter-spacing: -0.005em;
}

/* --- En-tete : le logotype porte seul le nom, le titre et la description
       restent masques (regle GP du pool). --- */
.site-header {
    background-color: var(--tg-fond);
    border-bottom: 1px solid var(--tg-filet);
    padding-top: 1.6rem;
    padding-bottom: 1.6rem;
}

/* Logo combinaison PNG, intrinseque 1040 x 147 (rapport 7.07). La largeur est
   fixee pour que la rangee flex ne retrecisse pas l'ancre ; la hauteur suit le
   rapport intrinseque, parce que figer les deux a deja ete mesure comme
   rognant la bande de glyphes. */
.site-logo img,
.site-header .site-logo img {
    width: 268px;
    max-width: 100%;
    height: auto;
}

/* --- Navigation sous l'en-tete --- */
.main-navigation,
.main-navigation .inside-navigation {
    background-color: var(--tg-nav);
}

.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items {
    color: var(--tg-nav-encre);
    font-family: 'Source Sans 3', -apple-system, 'Segoe UI', sans-serif;
    letter-spacing: 0.02em;
    text-transform: none;
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li a:focus,
.main-navigation .main-nav ul li.current-menu-item a {
    color: var(--tg-accent);
    background-color: transparent;
}

.main-navigation .main-nav ul li.current-menu-item > a {
    box-shadow: inset 0 -3px 0 var(--tg-primaire);
}

/* --- Conteneur unique, sans colonne laterale --- */
.site-content .content-area {
    width: 100%;
}

.separate-containers .site-main,
.one-container .site-content {
    padding-top: var(--tg-ecart-section);
    padding-bottom: var(--tg-ecart-section);
}

.inside-article > *:not(:first-child),
.entry-content > * + * {
    margin-top: var(--tg-ecart-bloc);
}

.entry-content p,
.entry-content li {
    line-height: 1.72;
}

.entry-content h2 {
    margin-top: 2.6rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--tg-filet);
}

.entry-content h3 {
    margin-top: 2rem;
}

.entry-content blockquote {
    margin-left: 0;
    padding: 1rem 1.4rem;
    border-left: 4px solid var(--tg-primaire);
    background-color: var(--tg-surface);
    font-style: italic;
}

.entry-content a,
.entry-content a:visited {
    color: var(--tg-primaire-fonce);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.entry-content a:hover,
.entry-content a:focus {
    color: var(--tg-encre);
}

/* --- Titre H1 de la page d'accueil (jeton §10, pose par le theme) --- */
.site-tagline-heading {
    display: block;
    margin: 0 0 0.6rem;
    font-size: 2rem;
    line-height: 1.18;
    color: var(--tg-encre);
}

/* --- Hero "featured-post" : le billet mis en avant ouvre l'accueil.
       Le nom de la classe contient "hero" pour que le controle visuel
       s'execute reellement au lieu d'abandonner. --- */
.tg-hero-une {
    margin-bottom: var(--tg-ecart-section);
    padding: 2rem;
    background-color: var(--tg-surface);
    border: 1px solid var(--tg-filet);
    border-radius: var(--tg-rayon);
    box-shadow: var(--tg-ombre);
}

.tg-hero-une__ligne {
    margin: 0 0 1.6rem;
    font-size: 1.05rem;
    color: var(--tg-encre-2);
}

.tg-hero-une__billet {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 1.8rem;
    align-items: center;
    padding-top: 1.6rem;
    border-top: 2px solid var(--tg-filet);
}

.tg-hero-une__vue img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--tg-rayon);
}

.tg-hero-une__etiquette {
    display: inline-block;
    margin-bottom: 0.5rem;
    padding: 0.15rem 0.6rem;
    background-color: var(--tg-primaire);
    color: #FFFFFF;
    font-size: 0.74rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.tg-hero-une__billet h2 {
    margin: 0 0 0.6rem;
    font-size: 1.62rem;
    line-height: 1.22;
}

a.tg-hero-une__titre,
a.tg-hero-une__titre:visited {
    color: var(--tg-encre);
    text-decoration: none;
}

a.tg-hero-une__titre:hover,
a.tg-hero-une__titre:focus {
    color: var(--tg-primaire-fonce);
}

.tg-hero-une__billet p {
    margin: 0 0 0.9rem;
    color: var(--tg-encre-2);
}

a.tg-lien,
a.tg-lien:visited {
    display: inline-block;
    color: var(--tg-primaire-fonce);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid var(--tg-secondaire);
}

a.tg-lien:hover,
a.tg-lien:focus {
    color: var(--tg-encre);
    border-bottom-color: var(--tg-primaire);
}

@media (max-width: 768px) {
    .tg-hero-une__billet {
        grid-template-columns: 1fr;
    }
    .tg-hero-une {
        padding: 1.4rem;
    }
    .site-tagline-heading {
        font-size: 1.5rem;
    }
}

/* --- Sections d'accueil --- */
.tg-section-titre {
    margin: 0 0 1.4rem;
    font-size: 1.5rem;
}

.tg-rail {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    gap: var(--tg-ecart-bloc);
    margin-bottom: var(--tg-ecart-section);
}

.tg-note {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--tg-filet);
    border-radius: var(--tg-rayon);
    background-color: var(--tg-fond);
    overflow: hidden;
}

.tg-note__vue img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

/* Cartes d'archive : l'image est en pleine largeur et en taille « full », ce qui
   étire l'index sur plusieurs milliers de pixels. La hauteur est donc bornée,
   le cadrage reste centré. */
.blog .post-image img,
.archive .post-image img,
.search .post-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 7;
    object-fit: cover;
}

.tg-note__corps {
    padding: 1.1rem;
}

.tg-note__sujet {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tg-primaire-fonce);
}

.tg-note h3 {
    margin: 0 0 0.5rem;
    font-size: 1.14rem;
    line-height: 1.26;
}

a.tg-note__titre,
a.tg-note__titre:visited {
    color: var(--tg-encre);
    text-decoration: none;
}

a.tg-note__titre:hover,
a.tg-note__titre:focus {
    color: var(--tg-primaire-fonce);
}

.tg-note p {
    margin: 0 0 0.8rem;
    font-size: 0.95rem;
    color: var(--tg-encre-2);
}

.tg-rubriques {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--tg-ecart-bloc);
    margin-bottom: var(--tg-ecart-section);
}

.tg-rubrique {
    padding: 1.2rem;
    background-color: var(--tg-surface);
    border-left: 4px solid var(--tg-secondaire);
}

.tg-rubrique h3 {
    margin: 0 0 0.4rem;
    font-size: 1.1rem;
}

a.tg-rubrique__titre,
a.tg-rubrique__titre:visited {
    color: var(--tg-encre);
    text-decoration: none;
}

a.tg-rubrique__titre:hover,
a.tg-rubrique__titre:focus {
    color: var(--tg-primaire-fonce);
}

.tg-rubrique p {
    margin: 0;
    font-size: 0.93rem;
    color: var(--tg-encre-2);
}

/* --- Signature de billet et carte d'auteur --- */
.tg-signature {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0.4rem 0 1.4rem;
    font-size: 0.93rem;
    color: var(--tg-encre-2);
}

.tg-signature img {
    display: block;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

a.tg-signature__nom,
a.tg-signature__nom:visited {
    color: var(--tg-primaire-fonce);
    font-weight: 700;
    text-decoration: none;
}

.tg-carte-auteur {
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
    margin-top: var(--tg-ecart-section);
    padding: 1.3rem;
    background-color: var(--tg-surface);
    border-top: 3px solid var(--tg-primaire);
}

.tg-carte-auteur img {
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
}

.tg-carte-auteur p {
    margin: 0.3rem 0 0;
    font-size: 0.95rem;
    color: var(--tg-encre-2);
}

a.tg-carte-auteur__nom,
a.tg-carte-auteur__nom:visited {
    color: var(--tg-primaire-fonce);
    text-decoration: none;
}

/* --- Page "Pourquoi ce blog" : portrait flottant a droite (about-right-float) --- */
.tg-portrait-droite {
    float: right;
    width: 208px;
    margin: 0 0 1.2rem 1.6rem;
    border: 6px solid var(--tg-surface);
    box-shadow: var(--tg-ombre);
}

.tg-portrait-droite img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 600px) {
    .tg-portrait-droite {
        float: none;
        width: 160px;
        margin: 0 auto 1.2rem;
    }
}

/* --- Archives et index --- */
.page-header .page-title,
.page-hero .page-title {
    margin-bottom: 0.4rem;
}

.taxonomy-description,
.archive-description {
    margin-bottom: var(--tg-ecart-bloc);
    color: var(--tg-encre-2);
}

.separate-containers .inside-article,
.one-container .inside-article {
    padding-bottom: 1.2rem;
}

.post-image img,
.page-content img,
.entry-content img {
    border-radius: var(--tg-rayon);
}

/* --- Pied de page sur trois colonnes, fond sombre --- */
.footer-widgets,
.site-footer .footer-widgets {
    background-color: var(--tg-nav);
    color: var(--tg-chaud);
    padding-top: 3rem;
    padding-bottom: 2rem;
}

.footer-widgets .widget-title {
    color: var(--tg-secondaire);
    font-size: 1.05rem;
    letter-spacing: 0.01em;
    margin-bottom: 0.8rem;
}

.footer-widgets .widget {
    margin-bottom: 1.4rem;
}

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

.footer-widgets li {
    margin-bottom: 0.42rem;
    border: 0;
    padding: 0;
}

.footer-widgets a,
.footer-widgets a:visited,
.footer-widgets .textwidget {
    color: var(--tg-chaud);
    text-decoration: none;
}

.footer-widgets a:hover,
.footer-widgets a:focus {
    color: var(--tg-accent);
    text-decoration: underline;
}

.site-info,
.site-footer .site-info {
    background-color: #1B0E08;
    color: var(--tg-chaud);
    font-size: 0.88rem;
}

.site-info a,
.site-info a:visited {
    color: var(--tg-secondaire);
}

/* --- Formulaire de contact --- */
.ff-el-input--content input[type="text"],
.ff-el-input--content input[type="email"],
.ff-el-input--content textarea,
.ff-el-form-control {
    border: 1px solid var(--tg-filet);
    border-radius: var(--tg-rayon);
}

.ff-btn-submit,
button.ff-btn-submit,
.frm-fluent-form .ff-btn-submit {
    background-color: #C17747 !important;
    border-color: #C17747 !important;
    color: #FFFFFF !important;
    border-radius: var(--tg-rayon) !important;
    font-weight: 700;
}

.ff-btn-submit:hover,
button.ff-btn-submit:hover {
    background-color: var(--tg-primaire-fonce) !important;
    border-color: var(--tg-primaire-fonce) !important;
}

/* --- Retour en haut (jeton scroll_to_top = yes) --- */
.generate-back-to-top {
    background-color: var(--tg-primaire);
    color: #FFFFFF;
    border-radius: var(--tg-rayon);
}

.generate-back-to-top:hover,
.generate-back-to-top:focus {
    background-color: var(--tg-encre);
    color: #FFFFFF;
}

/* --- Page 404 --- */
.tg-404 {
    padding: 1rem 0 2rem;
}

.tg-404 h1 {
    margin-bottom: 0.6rem;
    font-size: 2.1rem;
}

.tg-404 p {
    color: var(--tg-encre-2);
}

.tg-404 .search-form {
    margin-top: 1.4rem;
}

/* --- Bandeau mobile GP Menu Plus ---------------------------------
   #mobile-header herite de la couleur du bandeau de navigation. Le
   logotype est a l'encre sombre : le fond est donc repasse en creme
   sous le point de rupture, sinon le rapport de contraste tombe a 1.2.
   La largeur du logo est figee, la hauteur reste libre.
   ----------------------------------------------------------------- */
@media (max-width: 1024px) {
    #mobile-header {
        background-color: var(--tg-fond);
        border-bottom: 1px solid var(--tg-filet);
    }

    #mobile-header .inside-navigation {
        position: relative;
        background-color: var(--tg-fond);
        min-height: 92px;
        display: flex;
        align-items: flex-start;
        padding-right: 0;
    }

    #mobile-header .menu-toggle,
    #mobile-header .menu-toggle:hover,
    #mobile-header .menu-toggle:focus {
        background-color: transparent;
        color: var(--tg-encre);
        min-height: 58px;
        margin-left: auto;
    }

    #mobile-header .site-logo {
        flex: 0 0 auto;
        display: block;
        margin-top: 15px;
        align-self: flex-start;
    }

    #mobile-header .site-logo a {
        display: block;
        width: 186px;
    }

    #mobile-header .site-logo img {
        width: 186px !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
    }

    /* Le menu ouvert garde les couleurs du bandeau : il est sous la barre. */
    #mobile-header .main-nav ul li a {
        background-color: var(--tg-nav);
        color: var(--tg-nav-encre);
    }
}

/* Repère de carnet responsive */
@media (max-width: 1024px) {
    .inside-navigation {
        position: relative;
    }

    /* La ligne éditoriale occupe sa propre rangée, sous le logotype : mesuré
       plutôt que deviné — le logo de 186 px au rapport 7.07 finit à y≈41 et le
       bouton occupe la bande 0-58 à droite, donc à y=62 la phrase passe sous
       les deux et peut courir sur toute la largeur. */
    .inside-navigation::before {
        content: "Lire, comprendre, débattre — l'écologie sociale vue d'un citoyen ordinaire";
        font-style: italic;
        position: absolute;
        left: 16px;
        right: 16px;
        top: 62px;
        font-size: 10.5px;
        line-height: 1.3;
        color: var(--tg-encre-2);
    }
}