/*
Theme Name: Gradin Myrtille
Template: generatepress
Version: 1.0.0
Description: Custom theme for Mes pieds me parlent
*/

/* ---------------------------------------------------------------
   Palette tokens (berry-vivid) + geometry (rounded / subtle / comfortable)
   --------------------------------------------------------------- */
:root {
    --gm-primary: #7C3AED;
    --gm-secondary: #A78BFA;
    --gm-accent: #8B5CF6;
    --gm-accent-warm: #F0ECF8;
    --gm-surface: #F5F3FF;
    --gm-bg: #FFFFFF;
    --gm-text: #1E1B4B;
    --gm-text-2: #6B7280;
    --gm-border: #E9E5F5;
    --gm-radius: 16px;
    --gm-radius-sm: 10px;
    --gm-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    --gm-gap-section: 4rem;
    --gm-gap-block: 1.5rem;
    --gm-pad-container: 2rem;
}

/* Trame éditoriale visible en mobile */
@media (max-width: 767px) {
    .inside-navigation::before {
        content: "Ce que j’ai appris sur mes pieds — et que personne ne m’avait dit.";
        font-style: italic;
        position: absolute;
        left: 214px;
        top: 50%;
        transform: translateY(-50%);
        max-width: 26%;
        font-size: 8.5px;
        line-height: 1.25;
        color: var(--gm-text-2);
    }
    .inside-navigation { position: relative; }
}

/* ---------------------------------------------------------------
   Logo — 2x PNG render of the wordmark, 1485 x 158.
   (The SVG build of the same mark painted at ~27% inside the GP
   page on Chrome, legible only when zoomed; the PNG carries real
   intrinsic dimensions and is also what APPENDIX-A prescribes for
   this niche.)
   --------------------------------------------------------------- */
.site-logo img,
.site-header .site-logo img,
#mobile-header .site-logo img {
    width: 366px;
    max-width: 100%;
    height: auto;
}

/* ---------------------------------------------------------------
   Mobile header — GP Menu Plus merges logo + nav into one bar that
   inherits navigation_background_color and takes its height from the
   menu item, so the bar is pinned open and the logo re-sized here.
   --------------------------------------------------------------- */
@media (max-width: 1024px) {
    #mobile-header .site-logo img { width: 192px; height: auto; }
    #mobile-header,
    #mobile-header .inside-navigation {
        background-color: var(--gm-bg);
        border-bottom: 1px solid var(--gm-border);
    }
    #mobile-header .inside-navigation,
    #mobile-header .menu-toggle {
        min-height: 60px;
        display: flex;
        align-items: center;
    }
    #mobile-header .menu-toggle,
    #mobile-header .menu-toggle:hover,
    #mobile-header .menu-toggle:focus {
        background-color: transparent;
        color: var(--gm-text);
    }
    /* GP renders the nav search toggle over the hamburger hit area */
    #mobile-header .menu-toggle { position: relative; z-index: 3; }
}

/* ---------------------------------------------------------------
   Front-page H1 band (hero: compact-tagline)
   --------------------------------------------------------------- */
.site-tagline-heading {
    display: block;
    text-align: left;
    padding: 0;
    margin: 0 0 0.7rem;
    font-size: 1.85rem;
    line-height: 1.22;
    color: var(--gm-text);
}

.gm-hero {
    background-color: var(--gm-surface);
    border: 1px solid var(--gm-border);
    border-radius: var(--gm-radius);
    padding: 1.9rem 2rem;
    margin-bottom: var(--gm-gap-section);
}

.gm-hero__tagline {
    font-style: italic;
    /* darker than --gm-text-2: 6B7280 on the surface tint is 4.41:1, under AA */
    color: #4B5563;
    margin: 0 0 1rem;
    font-size: 1.02rem;
}

.gm-hero__body { margin: 0 0 1.1rem; }

.gm-hero__portrait {
    float: left;
    margin: 0 1.3rem 0.6rem 0;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--gm-bg);
    box-shadow: var(--gm-shadow);
}

.gm-cta {
    display: inline-block;
    font-family: 'Roboto', system-ui, sans-serif;
    font-weight: 700;
    color: var(--gm-primary);
    text-decoration: none;
    border-bottom: 2px solid var(--gm-secondary);
    padding-bottom: 2px;
}

.gm-cta:hover { color: var(--gm-accent); border-bottom-color: var(--gm-primary); }

/* ---------------------------------------------------------------
   Homepage sections
   --------------------------------------------------------------- */
.gm-section-title {
    font-size: 1.4rem;
    margin: 0 0 1.4rem;
    padding-bottom: 0.55rem;
    border-bottom: 2px solid var(--gm-border);
}

.gm-lead {
    display: block;
    border: 1px solid var(--gm-border);
    border-radius: var(--gm-radius);
    overflow: hidden;
    box-shadow: var(--gm-shadow);
    margin-bottom: var(--gm-gap-block);
    background: var(--gm-bg);
}

.gm-lead img {
    display: block;
    width: 100%;
    height: 320px;
    object-fit: cover;
}

.gm-lead__text { padding: 1.4rem 1.6rem 1.6rem; }
.gm-lead__text h3 { margin: 0 0 0.5rem; font-size: 1.35rem; }
.gm-lead__text h3 a { color: var(--gm-text); text-decoration: none; }
.gm-lead__text h3 a:hover { color: var(--gm-primary); }

.gm-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gm-gap-block);
}

.gm-card {
    border: 1px solid var(--gm-border);
    border-radius: var(--gm-radius);
    overflow: hidden;
    background: var(--gm-bg);
    box-shadow: var(--gm-shadow);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
    display: flex;
    flex-direction: column;
}

.gm-card:hover {
    box-shadow: 0 8px 20px rgba(30, 27, 75, 0.1);
    transform: translateY(-2px);
}

.gm-card img {
    display: block;
    width: 100%;
    height: 184px;
    object-fit: cover;
}

.gm-card__text { padding: 1rem 1.2rem 1.25rem; }
.gm-card__meta {
    display: block;
    font-family: 'Roboto', system-ui, sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gm-primary);
    margin-bottom: 0.4rem;
}
.gm-card__text h3 { margin: 0 0 0.45rem; font-size: 1.07rem; line-height: 1.3; }
.gm-card__text h3 a { color: var(--gm-text); text-decoration: none; }
.gm-card__text h3 a:hover { color: var(--gm-primary); }
.gm-card__text p { margin: 0 0 0.6rem; font-size: 0.93rem; color: var(--gm-text-2); }

.gm-topics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gm-gap-block);
}

.gm-topic {
    border: 1px solid var(--gm-border);
    border-left: 4px solid var(--gm-secondary);
    border-radius: var(--gm-radius-sm);
    padding: 1.1rem 1.2rem;
    background: var(--gm-bg);
}

.gm-topic h3 { margin: 0 0 0.4rem; font-size: 1.04rem; }
.gm-topic h3 a { color: var(--gm-text); text-decoration: none; }
.gm-topic h3 a:hover { color: var(--gm-primary); }
.gm-topic p { margin: 0; font-size: 0.9rem; color: var(--gm-text-2); }

@media (max-width: 768px) {
    .gm-grid, .gm-topics { grid-template-columns: 1fr; }
    .gm-lead img { height: 210px; }
    .site-tagline-heading { font-size: 1.45rem; }
    .gm-hero { padding: 1.3rem 1.2rem; }
    .gm-hero__portrait { width: 82px; height: 82px; margin-right: 1rem; }
}

/* ---------------------------------------------------------------
   Archive / blog index cards — GP excerpt layout
   --------------------------------------------------------------- */
.generate-columns .inside-article,
.blog .inside-article,
.archive .inside-article,
.search-results .inside-article {
    border: 1px solid var(--gm-border);
    border-radius: var(--gm-radius);
    box-shadow: var(--gm-shadow);
    background: var(--gm-bg);
    padding: 1.1rem 1.3rem 1.3rem;
}

.post-image img,
.page-header-image img {
    border-radius: var(--gm-radius-sm);
}

.entry-title a { color: var(--gm-text); text-decoration: none; }
.entry-title a:hover { color: var(--gm-primary); }

.read-more-container .more-link,
.entry-summary .more-link {
    font-family: 'Roboto', system-ui, sans-serif;
    font-weight: 700;
    color: var(--gm-primary);
    text-decoration: none;
}

.entry-meta { color: var(--gm-text-2); font-size: 0.86rem; }

/* Category archive description */
.taxonomy-description {
    background: var(--gm-surface);
    border-radius: var(--gm-radius-sm);
    padding: 1rem 1.2rem;
    margin-bottom: 1.6rem;
    color: var(--gm-text);
}

/* ---------------------------------------------------------------
   Single post — byline, author card, practical blocks
   --------------------------------------------------------------- */
.gm-byline {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-family: 'Roboto', system-ui, sans-serif;
    font-size: 0.9rem;
    color: var(--gm-text-2);
    margin: 0 0 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--gm-border);
}

.gm-byline img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.gm-byline a { color: var(--gm-primary); text-decoration: none; font-weight: 700; }

.gm-authorcard {
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
    background: var(--gm-surface);
    border: 1px solid var(--gm-border);
    border-radius: var(--gm-radius);
    padding: 1.2rem 1.3rem;
    margin-top: var(--gm-gap-section);
}

.gm-authorcard img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.gm-authorcard p { margin: 0.3rem 0 0; font-size: 0.93rem; color: var(--gm-text-2); }
.gm-authorcard strong a { color: var(--gm-text); text-decoration: none; }
.gm-authorcard strong a:hover { color: var(--gm-primary); }

.gm-note {
    background: var(--gm-accent-warm);
    border-left: 4px solid var(--gm-primary);
    border-radius: var(--gm-radius-sm);
    padding: 0.95rem 1.15rem;
    margin: var(--gm-gap-block) 0;
    font-size: 0.95rem;
}

.gm-note p:last-child { margin-bottom: 0; }

.entry-content table {
    border-collapse: collapse;
    width: 100%;
    margin: var(--gm-gap-block) 0;
    font-size: 0.94rem;
}

.entry-content table th,
.entry-content table td {
    border: 1px solid var(--gm-border);
    padding: 0.55rem 0.7rem;
    text-align: left;
}

.entry-content table th { background: var(--gm-surface); font-family: 'Roboto', system-ui, sans-serif; }

.entry-content h2 { margin-top: 2.2rem; }
.entry-content h3 { margin-top: 1.6rem; }
.entry-content a { color: var(--gm-primary); }
.entry-content a:hover { color: var(--gm-accent); }
.entry-content ul, .entry-content ol { margin-left: 1.3rem; }

/* ---------------------------------------------------------------
   About page — about-left-float
   --------------------------------------------------------------- */
.gm-portrait-left {
    float: left;
    margin: 0.2rem 1.6rem 1rem 0;
    max-width: 230px;
}

.gm-portrait-left img {
    border-radius: var(--gm-radius);
    box-shadow: var(--gm-shadow);
    display: block;
    width: 100%;
    height: auto;
}

.gm-topic-list { list-style: none; margin-left: 0; }
.gm-topic-list li { margin-bottom: 0.55rem; }
.gm-topic-list a { font-weight: 700; }

@media (max-width: 600px) {
    .gm-portrait-left { float: none; margin: 0 auto 1.2rem; max-width: 190px; }
    .gm-authorcard { flex-direction: column; }
}

/* ---------------------------------------------------------------
   Footer — 3-col-light
   --------------------------------------------------------------- */
.site-footer .footer-widgets {
    background-color: var(--gm-surface);
    border-top: 1px solid var(--gm-border);
}

.site-footer .footer-widgets .widget-title {
    font-family: 'Roboto', system-ui, sans-serif;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gm-primary);
    margin-bottom: 0.8rem;
}

.site-footer .footer-widgets,
.site-footer .footer-widgets p,
.site-footer .footer-widgets li { color: var(--gm-text); font-size: 0.93rem; }

.site-footer .footer-widgets a { color: var(--gm-text); text-decoration: none; }
.site-footer .footer-widgets a:hover { color: var(--gm-primary); text-decoration: underline; }

.site-footer .footer-widgets ul { list-style: none; margin-left: 0; }
.site-footer .footer-widgets li { margin-bottom: 0.4rem; }

.site-info {
    background-color: var(--gm-bg);
    color: var(--gm-text-2);
    font-size: 0.86rem;
    border-top: 1px solid var(--gm-border);
}

.site-info a { color: var(--gm-text-2); }
.site-info a:hover { color: var(--gm-primary); }

/* ---------------------------------------------------------------
   Search widget + input styling
   --------------------------------------------------------------- */
.search-field,
.wp-block-search__input {
    border: 1px solid var(--gm-border);
    border-radius: var(--gm-radius-sm);
    padding: 8px 12px;
    font-family: inherit;
    font-size: 0.95em;
    width: 100%;
    background: var(--gm-bg);
    color: var(--gm-text);
}

.search-field:focus,
.wp-block-search__input:focus {
    outline: 2px solid var(--gm-secondary);
    outline-offset: 1px;
}

.search-submit,
.wp-block-search__button {
    background: var(--gm-primary);
    color: #ffffff;
    border: none;
    border-radius: var(--gm-radius-sm);
    padding: 8px 16px;
    font-family: 'Roboto', system-ui, sans-serif;
    font-size: 0.95em;
    cursor: pointer;
}

.search-submit:hover,
.wp-block-search__button:hover { background: var(--gm-accent); }

/* ---------------------------------------------------------------
   Contact form (Contact Form 7) — tokens, not browser defaults
   RESOLVE: palette berry-vivid primary #7C3AED
   --------------------------------------------------------------- */
.wpcf7-form label {
    display: block;
    font-family: 'Roboto', system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.92rem;
    margin-bottom: 1rem;
    color: var(--gm-text);
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea {
    width: 100%;
    border: 1px solid var(--gm-secondary);
    border-radius: var(--gm-radius-sm);
    padding: 9px 12px;
    font-family: inherit;
    font-size: 0.97rem;
    color: var(--gm-text);
    background: var(--gm-bg);
    margin-top: 0.3rem;
}

.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
    outline: 2px solid var(--gm-primary);
    outline-offset: 1px;
    border-color: var(--gm-primary);
}

.wpcf7-form textarea { min-height: 170px; }

body button.wpforms-submit,
body .wpcf7-submit,
body input.wpcf7-submit,
body .ff-btn-submit {
    background-color: #7C3AED !important;
    color: #ffffff !important;
    border: none;
    border-radius: var(--gm-radius-sm);
    padding: 11px 26px;
    font-family: 'Roboto', system-ui, sans-serif;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
}

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

.wpcf7-response-output {
    border-radius: var(--gm-radius-sm);
    border-color: var(--gm-secondary) !important;
    font-size: 0.93rem;
}

.wpcf7-not-valid-tip { color: #B91C1C; font-size: 0.85rem; }

/* ---------------------------------------------------------------
   404 (styled_404)
   --------------------------------------------------------------- */
.gm-404 { padding: 1rem 0 2rem; }
.gm-404 ul { list-style: none; margin-left: 0; }
.gm-404 li { margin-bottom: 0.5rem; }
.gm-404 .search-form { margin-top: 1.4rem; max-width: 420px; }

/* ---------------------------------------------------------------
   Navigation (sig-F — nav-float-right, inline with logo)
   --------------------------------------------------------------- */
.main-navigation .main-nav > ul > li > a {
    font-family: 'Roboto', system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.93rem;
    letter-spacing: 0.01em;
}

.main-navigation .main-nav > ul > li > a:hover,
.main-navigation .main-nav > ul > li.current-menu-item > a {
    color: var(--gm-primary);
}

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

/* Pagination */
.paging-navigation .page-numbers {
    border: 1px solid var(--gm-border);
    border-radius: var(--gm-radius-sm);
    padding: 5px 11px;
    color: var(--gm-text);
    text-decoration: none;
}

.paging-navigation .page-numbers.current,
.paging-navigation .page-numbers:hover {
    background: var(--gm-primary);
    border-color: var(--gm-primary);
    color: #ffffff;
}