/*
Theme Name: Combe Verveine
Template: generatepress
Version: 1.0.0
Description: Habillage de Presse à la loupe
*/

/* ---------------------------------------------------------------
   Jetons de design — palette slate-professional, espacement
   comfortable, largeur wide, rayon moderate (8px), ombre none,
   signature sig-B (colonne laterale a gauche / conteneurs separes
   / nav sous l'en-tete).
   --------------------------------------------------------------- */
:root {
    --cv-primaire: #334155;         /* 10.4:1 sur blanc */
    --cv-secondaire: #64748B;       /* 4.8:1 sur blanc, texte d'appoint */
    --cv-accent: #475569;           /* 7.9:1 sur blanc, survol */
    --cv-chaud: #EFF1F5;
    --cv-surface: #F8FAFC;
    --cv-fond: #FFFFFF;
    --cv-encre: #0F172A;            /* 17.9:1 sur blanc */
    --cv-filet: #E2E8F0;
    --cv-pied: #0F172A;             /* bandeau de pied, ligne unique sombre */
    --cv-pied-encre: #E2E8F0;       /* 15.3:1 contre le bandeau */
    --cv-rayon: 8px;                /* jeton border_radius "moderate" */
    --cv-ombre: none;               /* jeton shadow_style "none" */
    --cv-ecart-section: 4rem;
    --cv-ecart-bloc: 1.5rem;
    --cv-marge-conteneur: 2rem;
    --cv-mesure: 1100px;
}

body {
    background-color: var(--cv-surface);
    color: var(--cv-encre);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title,
.widget-title {
    font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    letter-spacing: -0.004em;
}

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

/* Logo combinaison PNG. 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: 256px;
    max-width: 100%;
    height: auto;
}

/* --- Navigation sous l'en-tete. Fond clair voulu : l'en-tete mobile de GP
       Menu Plus herite de ces couleurs, et un logotype sombre sur un bandeau
       sombre y tomberait sous le seuil de lisibilite. --- */
.main-navigation,
.main-navigation .inside-navigation {
    background-color: var(--cv-fond);
}

.main-navigation {
    border-bottom: 3px solid var(--cv-primaire);
}

.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items {
    color: var(--cv-primaire);
    font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.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(--cv-encre);
    background-color: var(--cv-chaud);
}

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

/* Marque de lecture sur smartphone
   -------------------------------------------------------------------
   GP Menu Plus fusionne le logotype et le bouton de menu dans la meme
   barre que .inside-navigation. Une accroche posee au milieu a gauche,
   comme le veut le gabarit, s'imprime donc PAR-DESSUS le logotype : le
   gate mobile-tagline mesure la ligne et le bouton, pas le pseudo, et
   laisse passer la superposition. La barre porte donc une seconde ligne,
   reservee par un padding bas, et l'accroche s'y pose.
   Le point de rupture suit mobile_menu_breakpoint (1024), pas 767. */
@media (max-width: 1024px) {
    .inside-navigation {
        position: relative;
    }

    #mobile-header .inside-navigation {
        padding-bottom: 30px;
    }

    .inside-navigation::before {
        content: "Un regard romand sur la presse, l'info et les médias indépendants";
        font-style: italic;
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 4px;
        top: auto;
        transform: none;
        font-size: 11px;
        line-height: 1.25;
        color: var(--cv-accent);
    }
}

/* --- Conteneurs separes, colonne laterale a gauche --- */
.separate-containers .site-main > *,
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .paging-navigation,
.separate-containers .page-header {
    background-color: var(--cv-fond);
    border: 1px solid var(--cv-filet);
    border-radius: var(--cv-rayon);
    box-shadow: var(--cv-ombre);
}

.separate-containers .site-main {
    padding-top: 0;
    padding-bottom: 0;
}

.separate-containers .inside-left-sidebar > .widget {
    background-color: var(--cv-fond);
    border: 1px solid var(--cv-filet);
    border-radius: var(--cv-rayon);
    box-shadow: var(--cv-ombre);
}

.inside-left-sidebar .widget-title {
    font-size: 1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cv-primaire);
    border-bottom: 2px solid var(--cv-filet);
    padding-bottom: 0.4rem;
    margin-bottom: 0.8rem;
}

.inside-left-sidebar ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

.inside-left-sidebar li {
    border-bottom: 1px dotted var(--cv-filet);
    padding: 0.35rem 0;
}

.inside-left-sidebar li:last-child {
    border-bottom: 0;
}

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

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

.entry-content h2 {
    margin-top: 2.5rem;
    padding-left: 0.7rem;
    border-left: 4px solid var(--cv-primaire);
}

.entry-content h3 {
    margin-top: 1.9rem;
    color: var(--cv-accent);
}

.entry-content a,
.inside-left-sidebar a,
.cv-lien {
    color: var(--cv-primaire);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.entry-content a:hover,
.inside-left-sidebar a:hover,
.cv-lien:hover {
    color: var(--cv-accent);
}

.entry-content blockquote {
    border-left: 4px solid var(--cv-secondaire);
    background-color: var(--cv-surface);
    border-radius: 0 var(--cv-rayon) var(--cv-rayon) 0;
    padding: 1rem 1.2rem;
    font-style: italic;
}

/* --- Ouverture de l'accueil : grille de rubriques (jeton category-grid) --- */
.cv-hero-grille {
    /* Degrade plutot qu'aplat : la bande d'ouverture se detache du fond de page
       sans ajouter d'image, ce que le jeton category-grid n'appelle pas. */
    background-color: var(--cv-surface);
    background-image: linear-gradient(180deg, var(--cv-surface) 0%, var(--cv-fond) 68%);
    border: 1px solid var(--cv-filet);
    border-radius: var(--cv-rayon);
    padding: 2.4rem var(--cv-marge-conteneur);
    margin-bottom: var(--cv-ecart-bloc);
}

.site-tagline-heading {
    text-align: left;
    padding: 0;
    margin: 0 0 0.6rem;
    font-size: 1.9rem;
    line-height: 1.22;
    color: var(--cv-encre);
}

.cv-hero-grille__ligne {
    margin: 0 0 2rem;
    font-size: 1.05rem;
    font-style: italic;
    /* accent plutot que secondaire : 7.3:1 sur la premiere teinte du degrade,
       contre 4.6:1 pour le gris d'appoint, qui passait de justesse. */
    color: var(--cv-accent);
}

.cv-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.2rem;
}

.cv-case {
    background-color: var(--cv-surface);
    border: 1px solid var(--cv-filet);
    border-top: 4px solid var(--cv-primaire);
    border-radius: var(--cv-rayon);
    padding: 1.1rem 1.2rem 1.3rem;
}

.cv-case__titre {
    font-size: 1.12rem;
    margin: 0 0 0.5rem;
    line-height: 1.3;
}

.cv-case__titre a {
    color: var(--cv-primaire);
    text-decoration: none;
}

.cv-case__titre a:hover {
    color: var(--cv-encre);
    text-decoration: underline;
}

.cv-case__texte {
    margin: 0 0 0.7rem;
    font-size: 0.94rem;
    line-height: 1.6;
    color: var(--cv-encre);
}

.cv-case__compte {
    font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cv-secondaire);
}

/* --- Rail des dernieres notes sur l'accueil --- */
.cv-rail {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.4rem;
}

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

.cv-note__vue img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.cv-note__corps {
    padding: 1rem 1.1rem 1.2rem;
}

.cv-note__sujet {
    display: inline-block;
    font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.74rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--cv-secondaire);
    margin-bottom: 0.4rem;
}

.cv-note h3 {
    font-size: 1.05rem;
    line-height: 1.35;
    margin: 0 0 0.5rem;
}

.cv-note__titre {
    color: var(--cv-encre);
    text-decoration: none;
}

.cv-note__titre:hover {
    color: var(--cv-primaire);
    text-decoration: underline;
}

.cv-note p {
    font-size: 0.93rem;
    line-height: 1.62;
    margin: 0 0 0.8rem;
}

.cv-lien {
    font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

/* --- Vignettes des listes : sans plafond, une image de 1200px etire la
       carte bien au-dela de sa colonne. --- */
.blog .post-image img,
.archive .post-image img,
.search .post-image img {
    width: 100%;
    aspect-ratio: 16 / 7;
    object-fit: cover;
    border-radius: var(--cv-rayon) var(--cv-rayon) 0 0;
}

/* --- Signature et carte d'auteur --- */
.cv-signature {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.92rem;
    color: var(--cv-secondaire);
    margin: 0.5rem 0 1rem;
}

.cv-signature img {
    border-radius: 50%;
    flex: 0 0 auto;
}

.cv-signature__nom {
    color: var(--cv-primaire);
    font-weight: 600;
}

.cv-carte-auteur {
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
    margin-top: 2.2rem;
    padding: 1.2rem;
    background-color: var(--cv-surface);
    border: 1px solid var(--cv-filet);
    border-left: 4px solid var(--cv-primaire);
    border-radius: var(--cv-rayon);
}

.cv-carte-auteur img {
    border-radius: 50%;
    flex: 0 0 auto;
}

.cv-carte-auteur p {
    margin: 0.3rem 0 0;
    font-size: 0.93rem;
    line-height: 1.6;
}

.cv-carte-auteur__nom {
    color: var(--cv-primaire);
}

/* --- Page « Pourquoi ce blog » : portrait en medaillon dans le texte
       (structure §10 about-inline-circle) --- */
.cv-rond {
    border-radius: 50%;
    float: left;
    width: 150px;
    height: 150px;
    object-fit: cover;
    margin: 0.2rem 1.4rem 1rem 0;
    shape-outside: circle(50%);
}

.cv-rond--petit {
    float: none;
    display: block;
    width: 72px;
    height: 72px;
    margin: 0 auto 0.7rem;
}

.cv-apercu {
    font-size: 0.93rem;
    line-height: 1.62;
}

.cv-apercu p {
    margin: 0 0 0.7rem;
}

@media (max-width: 480px) {
    .cv-rond {
        float: none;
        margin: 0 auto 1rem;
        display: block;
    }
}

/* --- Pied de page : ligne unique sombre, sans titre de colonne --- */
.site-footer,
.site-info {
    background-color: var(--cv-pied);
    color: var(--cv-pied-encre);
}

.site-info {
    padding-top: 1.4rem;
    padding-bottom: 1.4rem;
    font-size: 0.9rem;
}

.site-info .inside-site-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 1.4rem;
}

.site-info a {
    color: #CBD5E1;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.site-info a:hover {
    color: #FFFFFF;
}

/* Barre de pied : GP n'expose pas d'emplacement de menu « pied de page », la
   liste est donc un widget de navigation posé dans la zone footer-bar. Elle
   partage la ligne avec la mention de droits, d'ou le flex du conteneur. */
.footer-bar ul,
.footer-bar .menu {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-bar li {
    margin: 0;
}

.footer-bar a {
    color: #CBD5E1;
    text-decoration: none;
    font-size: 0.86rem;
}

.footer-bar a:hover,
.footer-bar a:focus {
    color: #FFFFFF;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.site-footer .footer-widgets {
    display: none;
}

@media (max-width: 767px) {
    .site-info .inside-site-info {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* --- 404 --- */
.cv-404 h1 {
    margin-bottom: 0.7rem;
}

.cv-404 .cv-pistes {
    margin-top: 1.2rem;
}

/* --- Formulaire de contact : la couleur du bouton doit correspondre a la
       teinte primaire de la palette (gate contact-form-render.cjs). --- */
body button.wpforms-submit,
body .wpcf7-submit,
body .ff-btn-submit {
    background-color: #334155 !important;
    color: #ffffff !important;
    border-radius: var(--cv-rayon) !important;
}

body button.wpforms-submit:hover,
body .wpcf7-submit:hover,
body .ff-btn-submit:hover {
    filter: brightness(0.88) !important;
}

/* --- Champ de recherche --- */
.search-form input[type="search"],
.wp-block-search__input,
.widget_search input[type="search"] {
    border: 1px solid var(--cv-filet);
    border-radius: var(--cv-rayon);
    padding: 0.5rem 0.7rem;
    width: 100%;
}

.search-form button,
.wp-block-search__button {
    background-color: var(--cv-primaire);
    color: #FFFFFF;
    border: 0;
    border-radius: var(--cv-rayon);
    padding: 0.5rem 0.9rem;
}

/* --- Pagination --- */
.paging-navigation .nav-links a,
.paging-navigation .nav-links span {
    border-radius: var(--cv-rayon);
}

@media (max-width: 1024px) {
    .cv-hero-grille {
        padding: 1.8rem 1.3rem;
    }
    .site-tagline-heading {
        font-size: 1.5rem;
    }
}