/*
Theme Name: Perron Aubépine
Template: generatepress
Version: 1.0.0
Description: Thème enfant pour Pauline bouge et s'informe
*/

/* ---------------------------------------------------------------------------
   Jetons de couleur et de forme (palette terracotta-warm, rayon « subtle »)
   --------------------------------------------------------------------------- */
:root {
    --pa-primary:   #B45309;
    --pa-secondary: #D97706;
    --pa-accent:    #CA8A04;
    --pa-warm:      #FAF0E6;
    --pa-surface:   #FFFBEB;
    --pa-base:      #FFFFFF;
    --pa-text:      #1C1917;
    --pa-text-2:    #57534E;
    --pa-border:    #F5E6D0;
    --pa-footer-bg: #231A14;
    --pa-footer-tx: #EFE3D2;
    --pa-radius:    4px;
    --pa-gap:       4rem;
    --pa-block-gap: 1.5rem;
}

/* Signature de lecture responsive */
@media (max-width: 1024px) {
    .inside-navigation::before {
        content: "Bouger, comprendre, prendre soin — sans prétendre savoir mieux que personne.";
        font-style: italic;
        position: absolute;
        left: var(--gap-small, 14px);
        right: 66px;
        top: 60px;
        font-size: 11.5px;
        line-height: 1.3;
        color: var(--pa-text-2);
    }
    .inside-navigation { position: relative; }
}

/* ---------------------------------------------------------------------------
   En-tête mobile GP Menu Plus
   La barre fusionne logo + navigation : sans hauteur minimale elle se replie
   sur la hauteur d'un item de menu et rogne le logotype, et la ligne d'accroche
   ci-dessus retombe sur le logo si elle reste centrée verticalement.
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    #mobile-header,
    #mobile-header .inside-navigation { background-color: var(--pa-base); }
    #mobile-header .inside-navigation {
        position: relative;
        display: flex;
        align-items: center;
        min-height: 104px;
        padding-bottom: 28px;
        border-bottom: 1px solid var(--pa-border);
    }
    #mobile-header .site-logo { flex: 0 0 auto; }
    #mobile-header .site-logo a { display: block; width: 180px; }
    #mobile-header .site-logo img {
        width: 180px !important;
        height: 47px !important;
        max-width: none !important;
        max-height: 47px !important;
    }
    #mobile-header .menu-toggle,
    #mobile-header .menu-toggle:hover,
    #mobile-header .menu-toggle:focus {
        position: absolute !important;
        right: 0 !important;
        top: 38px;
        transform: translateY(-50%);
        min-height: 48px;
        background-color: transparent;
        color: var(--pa-text);
    }
    #mobile-header #mobile-menu { margin-top: 32px; }
}

/* ---------------------------------------------------------------------------
   Logo SVG : WordPress n'enregistre aucune dimension pour un SVG, donc le
   navigateur n'a pas de ratio intrinsèque à résoudre dans l'en-tête flex.
   --------------------------------------------------------------------------- */
.site-logo img,
.site-header .site-logo img {
    width: 436px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 893 / 108;
}

/* ---------------------------------------------------------------------------
   Typographie
   --------------------------------------------------------------------------- */
body,
.entry-content {
    font-family: "Crimson Text", Charter, serif;
    font-size: 19px;
    line-height: 1.68;
    color: var(--pa-text);
}
h1, h2, h3, h4, h5, h6,
.site-title, .main-navigation a, .widget-title, .read-more, .button {
    font-family: "Outfit", "Trebuchet MS", sans-serif;
    letter-spacing: -0.01em;
}
h1 { font-weight: 600; line-height: 1.18; }
h2 { font-weight: 600; line-height: 1.24; }
h3 { font-weight: 600; line-height: 1.3; }
.entry-content h2 { margin-top: 2.1em; }
.entry-content h3 { margin-top: 1.5em; }
.entry-content p  { margin-bottom: 1.15em; }
.entry-content a,
.entry-content a:visited { color: var(--pa-primary); text-decoration: underline; text-underline-offset: 2px; }
.entry-content a:hover { color: var(--pa-secondary); }
blockquote {
    border-left: 3px solid var(--pa-accent);
    background: var(--pa-surface);
    padding: 1rem 1.4rem;
    border-radius: var(--pa-radius);
    font-style: italic;
}

/* H1 d'accueil — proposition éditoriale visible */
.site-tagline-heading {
    display: block;
    text-align: left;
    font-size: 1.75rem;
    line-height: 1.2;
    color: var(--pa-text);
    margin: 0 0 1.1rem;
    padding: 0;
}

/* ---------------------------------------------------------------------------
   Accueil — composition magazine (une à la une + une section par rubrique)
   Le conteneur porte « hero » dans sa classe : c'est ce que cherche
   reports/audit-harness/hero-render.cjs.
   --------------------------------------------------------------------------- */
.pa-hero {
    background: var(--pa-surface);
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius);
    padding: 2rem;
    margin-bottom: var(--pa-gap);
}
.pa-hero__media { margin: 0 0 1.4rem; }
.pa-hero__media img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--pa-radius);
    object-fit: cover;
    max-height: 520px;
}
.pa-hero__etiquette {
    display: inline-block;
    font-family: "Outfit", sans-serif;
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pa-primary);
    margin-bottom: 0.5rem;
}
.pa-hero__titre { font-size: 2rem; margin: 0 0 0.6rem; }
.pa-hero__titre a,
.pa-hero__titre a:visited { color: var(--pa-text); text-decoration: none; }
.pa-hero__titre a:hover { color: var(--pa-primary); }
.pa-hero__chapo { color: var(--pa-text-2); margin: 0 0 1.1rem; }
.pa-hero__date { font-family: "Outfit", sans-serif; font-size: 0.82rem; color: var(--pa-text-2); }

a.pa-lien {
    font-family: "Outfit", sans-serif;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--pa-primary);
    text-decoration: none;
    border-bottom: 2px solid var(--pa-border);
    padding-bottom: 2px;
}
a.pa-lien:visited { color: var(--pa-primary); }
a.pa-lien:hover { color: var(--pa-secondary); border-bottom-color: var(--pa-secondary); }

.pa-rubrique { margin-bottom: var(--pa-gap); }
.pa-rubrique--alt {
    background: var(--pa-warm);
    border-radius: var(--pa-radius);
    padding: 1.8rem;
}
.pa-rubrique__entete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.3rem;
}
.pa-rubrique__entete h2 { font-size: 1.45rem; margin: 0; }
.pa-grille {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--pa-block-gap);
}
@media (max-width: 680px) { .pa-grille { grid-template-columns: 1fr; } }

.pa-carte {
    background: var(--pa-base);
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color .18s ease, transform .18s ease;
}
.pa-carte:hover { border-color: var(--pa-secondary); transform: translateY(-2px); }
.pa-carte__media img {
    width: 100%;
    height: 184px;
    object-fit: cover;
    display: block;
}
.pa-carte__corps { padding: 1rem 1.1rem 1.2rem; }
.pa-carte__titre { font-size: 1.07rem; margin: 0 0 0.45rem; line-height: 1.3; }
.pa-carte__titre a,
.pa-carte__titre a:visited { color: var(--pa-text); text-decoration: none; }
.pa-carte__titre a:hover { color: var(--pa-primary); }
.pa-carte__chapo { font-size: 0.95rem; color: var(--pa-text-2); margin: 0 0 0.7rem; }
.pa-carte__meta { font-family: "Outfit", sans-serif; font-size: 0.78rem; color: var(--pa-text-2); }

/* ---------------------------------------------------------------------------
   Archives et cartes d'articles natives GP
   --------------------------------------------------------------------------- */
.generate-columns .inside-article,
.blog .inside-article,
.archive .inside-article,
.search .inside-article {
    background: var(--pa-base);
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius);
    padding: 1.3rem;
}
.post-image img { border-radius: var(--pa-radius); }
.entry-title a,
.entry-title a:visited { color: var(--pa-text); }
.entry-title a:hover { color: var(--pa-primary); }
.read-more a,
a.read-more,
.entry-summary .read-more a { font-family: "Outfit", sans-serif; font-weight: 600; }

/* ---------------------------------------------------------------------------
   Barre latérale droite
   --------------------------------------------------------------------------- */
.widget-area .widget {
    background: var(--pa-surface);
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius);
    padding: 1.1rem 1.2rem;
    margin-bottom: 1.4rem;
}
.widget-area .widget-title {
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    margin-bottom: 0.7rem;
    color: var(--pa-text);
}
.widget-area ul { list-style: none; margin: 0; padding: 0; }
.widget-area li { padding: 0.28rem 0; border-bottom: 1px solid var(--pa-border); }
.widget-area li:last-child { border-bottom: none; }
.widget-area a,
.widget-area a:visited { color: var(--pa-primary); text-decoration: none; }
.widget-area a:hover { color: var(--pa-secondary); text-decoration: underline; }

/* Champs de recherche — classique et bloc */
.search-field,
.wp-block-search__input {
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius);
    padding: 8px 12px;
    font-family: inherit;
    font-size: 0.95em;
    width: 100%;
    background: var(--pa-base);
    color: var(--pa-text);
}
.search-field:focus,
.wp-block-search__input:focus { outline: 2px solid var(--pa-secondary); outline-offset: 1px; }
.search-submit,
.wp-block-search__button {
    background: var(--pa-primary);
    color: #ffffff;
    border: none;
    border-radius: var(--pa-radius);
    padding: 8px 16px;
    font-family: "Outfit", sans-serif;
    font-size: 0.95em;
    cursor: pointer;
}
.search-submit:hover,
.wp-block-search__button:hover { background: var(--pa-secondary); }

/* ---------------------------------------------------------------------------
   Formulaire de contact — bouton d'envoi sur la primaire de la palette
   (gated by contact-form-render.cjs form_button_palette_match)
   --------------------------------------------------------------------------- */
body button.wpforms-submit,
body .wpcf7-submit,
body .ff-btn-submit {
    background-color: #B45309 !important;
    color: #ffffff !important;
    border: none;
    border-radius: var(--pa-radius);
    font-family: "Outfit", sans-serif;
    font-weight: 600;
    padding: 10px 22px;
    cursor: pointer;
}
body button.wpforms-submit:hover,
body .wpcf7-submit:hover,
body .ff-btn-submit:hover { filter: brightness(0.88) !important; }

.wpcf7-form label { display: block; font-family: "Outfit", sans-serif; font-size: 0.9rem; margin-bottom: 1rem; }
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form select,
.wpcf7-form textarea {
    width: 100%;
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius);
    padding: 9px 12px;
    font-family: inherit;
    font-size: 1rem;
    background: var(--pa-base);
    color: var(--pa-text);
    margin-top: 0.3rem;
}
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus { outline: 2px solid var(--pa-secondary); outline-offset: 1px; }

/* ---------------------------------------------------------------------------
   Pied de page — 3 colonnes sombres
   --------------------------------------------------------------------------- */
.site-footer .footer-widgets,
.site-footer .site-info {
    background-color: var(--pa-footer-bg);
    color: var(--pa-footer-tx);
}
.site-footer .footer-widgets { padding-top: 2.4rem; padding-bottom: 2rem; }
.site-footer .widget-title { color: #FFFFFF; font-size: 0.92rem; letter-spacing: 0.04em; margin-bottom: 0.7rem; }
.site-footer .footer-widgets .widget { background: transparent; border: none; padding: 0; margin-bottom: 1.6rem; }
.site-footer p, .site-footer li { color: var(--pa-footer-tx); font-size: 0.95rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { padding: 0.22rem 0; }
.site-footer a,
.site-footer a:visited { color: #F0C089; text-decoration: none; }
.site-footer a:hover { color: #FFFFFF; text-decoration: underline; }
.site-info { font-family: "Outfit", sans-serif; font-size: 0.85rem; padding: 1rem 0; }

/* ---------------------------------------------------------------------------
   Page 404 et portrait de l'autrice
   --------------------------------------------------------------------------- */
.pa-404 { padding: 1rem 0 3rem; }
.pa-404 h1 { font-size: 2rem; margin-bottom: 0.8rem; }
.pa-404 p { color: var(--pa-text-2); max-width: 46ch; }
.pa-404 .search-form { margin: 1.4rem 0; max-width: 420px; }

.avatar-centered img,
figure.avatar-centered img { border-radius: var(--pa-radius); }
.pa-signature {
    border-top: 1px solid var(--pa-border);
    margin-top: 2.4rem;
    padding-top: 1.2rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.pa-signature img { border-radius: 50%; width: 64px; height: 64px; object-fit: cover; flex: 0 0 auto; }
.pa-signature__texte { font-size: 0.95rem; color: var(--pa-text-2); }
.pa-signature__texte strong { font-family: "Outfit", sans-serif; color: var(--pa-text); }
.pa-signature__texte a,
.pa-signature__texte a:visited { color: var(--pa-primary); }