/*
Theme Name: Lueur Fougère
Theme URI: https://limoges-autisme87.fr
Description: Habillage enfant GeneratePress pour Comme on respire — palette forest-canopy, Inter/Bitter, colonne latérale à droite, conteneur unique.
Author: Comme on respire
Template: generatepress
Version: 1.0.0
Text Domain: lueur-fougere
*/

/* ---------------------------------------------------------------------------
   Variables — forest-canopy, rayon 0, ombre medium, rythme compact (§10)
   --------------------------------------------------------------------------- */
:root {
    --lf-primaire:       #006D77;
    --lf-primaire-sombre:#00545C;
    --lf-second:         #83C5BE;
    --lf-accent:         #2D9F93;
    --lf-accent-chaud:   #F5EDE3;
    --lf-surface:        #EDF6F9;
    --lf-fond:           #FFFFFF;
    --lf-encre:          #001219;
    --lf-encre-douce:    #4A5568;
    --lf-liseré:         #D1E7E4;
    --lf-rayon:          0px;
    --lf-ombre:          0 4px 12px rgba(0, 0, 0, 0.1);
    --lf-pas-section:    2rem;
    --lf-pas-bloc:       1rem;
    --lf-marge-interne:  1rem;
}

/* ---------------------------------------------------------------------------
   Fontes auto-hébergées — Inter (texte courant) / Bitter (titres)
   --------------------------------------------------------------------------- */
@font-face {
    font-family: 'Inter';
    src: url('assets/fonts/Inter-Regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('assets/fonts/Inter-Italic.woff2') format('woff2');
    font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('assets/fonts/Inter-Bold.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Bitter';
    src: url('assets/fonts/Bitter-Regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Bitter';
    src: url('assets/fonts/Bitter-Bold.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------------------------------------------------------------------------
   Angles vifs — jeton border_radius = none
   --------------------------------------------------------------------------- */
button,
input,
select,
textarea,
img,
.button,
.wp-block-button__link,
.lf-rubrique,
.lf-billet,
.page-header,
.site-main .post {
    border-radius: var(--lf-rayon);
}

/* ---------------------------------------------------------------------------
   Titre de niveau 1 de la page d'accueil — §10 Homepage H1.
   Visible, jamais masqué pour lecteur d'écran (porte SEO C1 / h1-visible.cjs).
   --------------------------------------------------------------------------- */
.site-tagline-heading {
    display: block;
    text-align: left;
    padding: 0 0 0.35rem;
    margin: 0 0 var(--lf-pas-bloc);
    font-family: 'Bitter', Georgia, serif;
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1.25;
    color: var(--lf-encre);
    border-bottom: 2px solid var(--lf-second);
}

/* Chapeau d'accueil sous le H1 */
.lf-chapeau {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--lf-encre-douce);
    margin: 0 0 var(--lf-pas-section);
    max-width: 44rem;
}

/* ---------------------------------------------------------------------------
   Intertitres de section d'accueil
   --------------------------------------------------------------------------- */
.lf-section-titre {
    font-family: 'Bitter', Georgia, serif;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.3;
    color: var(--lf-encre);
    margin: 0 0 var(--lf-pas-bloc);
    padding-left: 0.6rem;
    border-left: 4px solid var(--lf-primaire);
}

/* ---------------------------------------------------------------------------
   Grille des rubriques — composition d'accueil « category-grid » (§10)
   --------------------------------------------------------------------------- */
.lf-rubriques {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--lf-pas-bloc);
    margin: 0 0 var(--lf-pas-section);
}
.lf-rubrique {
    display: flex;
    flex-direction: column;
    background: var(--lf-surface);
    border: 1px solid var(--lf-liseré);
    border-top: 3px solid var(--lf-primaire);
    box-shadow: var(--lf-ombre);
    overflow: hidden;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.lf-rubrique:hover,
.lf-rubrique:focus-within {
    box-shadow: 0 7px 20px rgba(0, 18, 25, 0.16);
    transform: translateY(-2px);
}
.lf-rubrique__image {
    display: block;
    width: 100%;
    height: 155px;
    object-fit: cover;
}
.lf-rubrique__corps {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
    padding: var(--lf-marge-interne);
}
.lf-rubrique__titre {
    font-family: 'Bitter', Georgia, serif;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.3;
    margin: 0;
}
.lf-rubrique__titre a {
    color: var(--lf-encre);
    text-decoration: none;
}
.lf-rubrique__titre a:hover,
.lf-rubrique__titre a:focus {
    color: var(--lf-primaire-sombre);
    text-decoration: underline;
}
.lf-rubrique__resume {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--lf-encre-douce);
    margin: 0;
}
.lf-rubrique__compte {
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--lf-primaire-sombre);
    margin: auto 0 0;
}

/* ---------------------------------------------------------------------------
   Cartes de billets — accueil et sections de liste
   --------------------------------------------------------------------------- */
.lf-billets {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--lf-pas-bloc);
    margin: 0 0 var(--lf-pas-bloc);
}
.lf-billet {
    display: flex;
    flex-direction: column;
    background: var(--lf-fond);
    border: 1px solid var(--lf-liseré);
    box-shadow: var(--lf-ombre);
    overflow: hidden;
    transition: box-shadow 0.18s ease;
}
.lf-billet:hover,
.lf-billet:focus-within {
    box-shadow: 0 7px 20px rgba(0, 18, 25, 0.16);
}
.lf-billet__image {
    display: block;
    width: 100%;
    height: 180px;
    object-fit: cover;
}
.lf-billet__corps {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex: 1;
    padding: var(--lf-marge-interne);
}
.lf-billet__titre {
    font-family: 'Bitter', Georgia, serif;
    font-weight: 700;
    font-size: 1.04rem;
    line-height: 1.32;
    margin: 0;
}
.lf-billet__titre a {
    color: var(--lf-encre);
    text-decoration: none;
}
.lf-billet__titre a:hover,
.lf-billet__titre a:focus {
    color: var(--lf-primaire-sombre);
    text-decoration: underline;
}
.lf-billet__meta {
    font-size: 0.78rem;
    color: var(--lf-encre-douce);
}
.lf-billet__meta a {
    color: var(--lf-primaire-sombre);
    text-decoration: none;
}
.lf-billet__extrait {
    font-size: 0.92rem;
    line-height: 1.62;
    color: var(--lf-encre-douce);
    margin: 0;
}
.lf-billet__lien {
    margin-top: auto;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--lf-primaire);
    text-decoration: none;
}
.lf-billet__lien:hover,
.lf-billet__lien:focus {
    color: var(--lf-primaire-sombre);
    text-decoration: underline;
}

/* Lien « tout parcourir » en bas de section */
.lf-tout {
    display: inline-block;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--lf-primaire);
    text-decoration: none;
    border-bottom: 2px solid var(--lf-second);
    padding-bottom: 2px;
    margin-bottom: var(--lf-pas-section);
}
.lf-tout:hover,
.lf-tout:focus {
    color: var(--lf-primaire-sombre);
    border-bottom-color: var(--lf-primaire);
}

/* ---------------------------------------------------------------------------
   Carte d'autrice en fin de billet
   --------------------------------------------------------------------------- */
.lf-autrice {
    display: flex;
    gap: 0.95rem;
    align-items: flex-start;
    margin-top: var(--lf-pas-section);
    padding: var(--lf-marge-interne);
    background: var(--lf-surface);
    border-left: 3px solid var(--lf-primaire);
}
.lf-autrice__portrait {
    flex: 0 0 auto;
    width: 68px;
    height: 68px;
    object-fit: cover;
}
.lf-autrice__nom {
    font-family: 'Bitter', Georgia, serif;
    font-weight: 700;
    font-size: 1rem;
    margin: 0 0 0.25rem;
}
.lf-autrice__nom a {
    color: var(--lf-encre);
    text-decoration: none;
}
.lf-autrice__nom a:hover,
.lf-autrice__nom a:focus {
    color: var(--lf-primaire-sombre);
    text-decoration: underline;
}
.lf-autrice__mot {
    font-size: 0.9rem;
    line-height: 1.62;
    color: var(--lf-encre-douce);
    margin: 0;
}

/* ---------------------------------------------------------------------------
   Page « Qui écrit ici » — structure about-centered-above (§10)
   --------------------------------------------------------------------------- */
.lf-portrait-centre {
    display: block;
    width: 190px;
    max-width: 55%;
    margin: 0 auto var(--lf-pas-bloc);
    text-align: center;
}
.lf-portrait-centre img {
    display: block;
    width: 100%;
    height: auto;
    box-shadow: var(--lf-ombre);
}
.lf-portrait-centre figcaption {
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--lf-encre-douce);
    padding-top: 0.4rem;
}

/* ---------------------------------------------------------------------------
   Colonne latérale droite (sig-D) — titres de widgets §10
   --------------------------------------------------------------------------- */
.sidebar .widget {
    background: var(--lf-surface);
    border: 1px solid var(--lf-liseré);
    padding: var(--lf-marge-interne);
    margin-bottom: var(--lf-pas-bloc);
}
.sidebar .widget .widget-title {
    font-family: 'Bitter', Georgia, serif;
    font-weight: 700;
    font-size: 0.98rem;
    margin: 0 0 0.6rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--lf-second);
    color: var(--lf-encre);
}
.sidebar .widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sidebar .widget li {
    padding: 0.22rem 0;
    font-size: 0.9rem;
    border-bottom: 1px dotted var(--lf-liseré);
}
.sidebar .widget li:last-child {
    border-bottom: none;
}
.sidebar .widget a {
    color: var(--lf-primaire-sombre);
    text-decoration: none;
}
.sidebar .widget a:hover,
.sidebar .widget a:focus {
    text-decoration: underline;
}
.sidebar .search-field,
.sidebar input[type="search"] {
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--lf-liseré);
    background: var(--lf-fond);
    color: var(--lf-encre);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.92rem;
}

/* ---------------------------------------------------------------------------
   Pied de page clair sur deux colonnes — jeton footer_type = 2-col-light
   --------------------------------------------------------------------------- */
.site-footer {
    background: var(--lf-surface);
    border-top: 3px solid var(--lf-primaire);
    color: var(--lf-encre);
}
.site-footer .footer-widgets {
    padding-top: var(--lf-pas-section);
    padding-bottom: var(--lf-pas-bloc);
}
.site-footer .widget-title {
    font-family: 'Bitter', Georgia, serif;
    font-weight: 700;
    font-size: 1rem;
    margin: 0 0 0.6rem;
    color: var(--lf-encre);
}
.site-footer .widget {
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--lf-encre-douce);
}
.site-footer .widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-footer .widget li {
    padding: 0.18rem 0;
}
.site-footer a {
    color: var(--lf-primaire-sombre);
    text-decoration: none;
}
.site-footer a:hover,
.site-footer a:focus {
    text-decoration: underline;
}
.site-info {
    background: var(--lf-surface);
    border-top: 1px solid var(--lf-liseré);
    font-size: 0.82rem;
    color: var(--lf-encre-douce);
}

/* ---------------------------------------------------------------------------
   Page 404 — intitulé et corps du §10
   --------------------------------------------------------------------------- */
.lf-404 {
    max-width: 38rem;
}
.lf-404 p {
    line-height: 1.7;
}
.lf-404__liens {
    list-style: none;
    margin: var(--lf-pas-bloc) 0 0;
    padding: 0;
}
.lf-404__liens li {
    padding: 0.2rem 0;
}

/* ---------------------------------------------------------------------------
   Formulaire de contact — bordures, marges, bouton à la palette
   (porte contact-form-render.cjs form_button_palette_match)
   --------------------------------------------------------------------------- */
.wpcf7-form p {
    margin-bottom: var(--lf-pas-bloc);
}
.wpcf7-form label {
    display: block;
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 0.3rem;
    color: var(--lf-encre);
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
    width: 100%;
    padding: 0.62rem 0.7rem;
    border: 1px solid var(--lf-second);
    background: var(--lf-fond);
    color: var(--lf-encre);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.95rem;
}
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form textarea:focus {
    border-color: var(--lf-primaire);
    outline: 2px solid var(--lf-second);
}
body button.wpforms-submit,
body .wpcf7-submit,
body .ff-btn-submit {
    background-color: #006D77 !important;
    color: #ffffff !important;
    border: none;
    padding: 0.72rem 1.45rem;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: var(--lf-ombre);
}
body button.wpforms-submit:hover,
body .wpcf7-submit:hover,
body .ff-btn-submit:hover {
    filter: brightness(0.88) !important;
}

/* ---------------------------------------------------------------------------
   Divers — logo, archives, liens de contenu
   --------------------------------------------------------------------------- */
.site-logo img,
.site-header .site-logo img,
#mobile-header .site-logo img {
    max-width: 100%;
    height: auto;
}
/* GP applique la typographie « h1 » au sélecteur h1 nu ; les titres d'entrée
   portent .entry-title et retombaient sur la fonte de texte. Le jeton
   inverted-contrast veut Bitter sur tous les titres. */
.page-header .page-title,
.entry-title,
.entry-header .entry-title,
h1.entry-title,
h2.entry-title {
    font-family: 'Bitter', Georgia, serif;
    font-weight: 700;
}
.archive-description {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.95rem;
    line-height: 1.68;
    color: var(--lf-encre-douce);
}
.entry-content a {
    color: var(--lf-primaire);
}
.entry-content a:hover,
.entry-content a:focus {
    color: var(--lf-primaire-sombre);
}
.entry-content h2,
.entry-content h3 {
    font-family: 'Bitter', Georgia, serif;
    margin-top: var(--lf-pas-section);
}
.entry-content blockquote {
    border-left: 3px solid var(--lf-second);
    background: var(--lf-accent-chaud);
    margin: var(--lf-pas-bloc) 0;
    padding: 0.8rem 1rem;
    font-style: italic;
    color: var(--lf-encre-douce);
}
.main-navigation .main-nav ul li a {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* ---------------------------------------------------------------------------
   Identité typographique mobile
   Rappel de l'accroche du site dans la barre de navigation, à gauche du
   bouton d'ouverture du menu. Élément décoratif distinct du slogan
   GeneratePress : hide_tagline reste à 1.
   Vérifié par reports/audit-harness/mobile-tagline.cjs.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .inside-navigation {
        position: relative;
    }
    /* La barre mobile fusionne logo et navigation (GP Menu Plus) : fond clair
       imposé pour que le logotype en encre foncée garde son contraste. */
    #mobile-header,
    #mobile-header .inside-navigation {
        background-color: var(--lf-fond);
        border-bottom: 1px solid var(--lf-liseré);
    }
    #mobile-header .menu-toggle,
    #mobile-header .menu-toggle:hover,
    #mobile-header .menu-toggle:focus {
        background-color: transparent;
        color: var(--lf-encre);
    }
    /* Le logotype est un lien en flux : sans largeur propre il s'étend sur
       toute la barre et recouvre le bouton du menu, positionné en absolu
       ci-dessous. Le clic synthétique du harnais atterrissait alors sur
       l'ancre du logo — menu jamais ouvert. */
    #mobile-header .site-logo {
        flex: 0 0 auto;
        width: 108px;
        max-width: 108px;
    }
    #mobile-header .site-logo img,
    #mobile-header img {
        width: 108px;
        max-width: 108px;
        height: auto;
    }
    .inside-navigation::before {
        content: "Sommeil, émotions, stress : ce que j'apprends en vivant avec tout ça.";
        position: absolute;
        left: 120px;
        top: 50%;
        transform: translateY(-50%);
        max-width: 36%;
        font-family: 'Inter', system-ui, sans-serif;
        font-style: italic;
        font-size: 9.5px;
        line-height: 1.18;
        color: var(--lf-encre-douce);
        pointer-events: none;
    }
    .inside-navigation button.menu-toggle {
        position: absolute;
        right: 0 !important;
        z-index: 6;
    }
    /* La loupe de navigation occupe elle aussi l'extrémité droite de la barre
       et, posée après le bouton dans le document, interceptait le clic sur le
       menu : le panneau ne s'ouvrait jamais. On la décale de la largeur du
       bouton, qui doit rester collé au bord droit (mobile-tagline.cjs). */
    #mobile-header .menu-bar-items {
        margin-right: 112px;
    }
}

/* ---------------------------------------------------------------------------
   Points de rupture — menu bureau à 1024 px (§10)
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .lf-rubriques {
        grid-template-columns: repeat(2, 1fr);
    }
    #mobile-header .site-logo img {
        max-height: 42px;
        width: auto;
    }
}
@media (max-width: 768px) {
    .lf-rubriques,
    .lf-billets {
        grid-template-columns: 1fr;
    }
    .lf-autrice {
        flex-direction: column;
    }
    .site-tagline-heading {
        font-size: 1.35rem;
    }
}