/*
Theme Name: Vasque Tilleul
Template: generatepress
Version: 1.0.0
Description: Habillage sur mesure pour Perle à perle
*/

/* ---------------------------------------------------------------------------
   Jetons de couleur et de forme (palette berry-vivid, rayon 0, ombre medium)
   --------------------------------------------------------------------------- */
:root {
    --pg-primary:    #7C3AED;
    --pg-primary-d:  #6D28D9;
    --pg-secondary:  #A78BFA;
    --pg-accent:     #8B5CF6;
    --pg-warm:       #F0ECF8;
    --pg-surface:    #F5F3FF;
    --pg-bg:         #FFFFFF;
    --pg-text:       #1E1B4B;
    --pg-text-2:     #6B7280;
    --pg-border:     #E9E5F5;
    --pg-radius:     0px;
    --pg-shadow:     0 4px 14px rgba(30, 27, 75, 0.12);
    --pg-shadow-up:  0 8px 24px rgba(30, 27, 75, 0.18);
    --pg-gap:        2rem;
    --pg-block-gap:  1rem;
}

/* En-tête mobile GP Menu Plus : la barre doit avoir une hauteur propre.
   Le hamburger est sorti du flux (voir plus bas) et le logo n'a pas de
   contrainte de taille par défaut, donc .inside-navigation s'effondrerait
   à 10px et le hamburger déborderait de la boîte de l'en-tête. */
@media (max-width: 1024px) {
  #mobile-header .inside-navigation {
    min-height: 58px;
    align-items: center;
  }
  #mobile-header .site-logo.mobile-header-logo {
    display: flex;
    align-items: center;
  }
  #mobile-header .site-logo.mobile-header-logo img {
    display: block;
    width: auto;
    height: 34px;
    max-height: 34px;
    max-width: 190px;
  }
  .inside-navigation { position: relative; }
  .inside-navigation button.menu-toggle {
    position: absolute;
    right: 0 !important;
    top: 50%;
    transform: translateY(-50%);
  }
}

/* Cohérence signature mobile */
@media (max-width: 767px) {
  .inside-navigation::before {
    content: "Des bijoux faits à la main, portés avec plaisir";
    font-style: italic;
    position: absolute;
    left: 72px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--pg-text);
    max-width: 58%;
    line-height: 1.25;
  }
}

/* Bouton d'envoi des formulaires — doit rester sur le primaire de la palette
   (contrôlé par contact-form-render.cjs : form_button_palette_match) */
body button.wpforms-submit,
body .wpcf7-submit,
body .ff-btn-submit {
  background-color: #7C3AED !important;
  color: #ffffff !important;
  border-radius: var(--pg-radius) !important;
}
body button.wpforms-submit:hover,
body .wpcf7-submit:hover,
body .ff-btn-submit:hover {
  filter: brightness(0.88) !important;
}

/* ---------------------------------------------------------------------------
   Titre H1 de la page d'accueil — bandeau compact (jeton homepage_hero)
   --------------------------------------------------------------------------- */
.site-tagline-heading {
    display: block;
    text-align: center;
    padding: 0.5rem 1rem;
    font-size: 1.1rem;
    color: inherit;
    margin: 0;
}

.pg-bandeau {
    background: var(--pg-warm);
    border-bottom: 1px solid var(--pg-border);
    padding: 1.4rem 1rem 1.2rem;
    margin: 0 0 var(--pg-gap);
    text-align: center;
}
.pg-bandeau .site-tagline-heading {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.55rem;
    line-height: 1.22;
    letter-spacing: -0.01em;
    color: var(--pg-text);
    padding: 0;
}
.pg-bandeau .pg-bandeau-sous {
    font-size: 0.95rem;
    font-style: italic;
    color: var(--pg-text-2);
    margin: 0.5rem auto 0;
    max-width: 44rem;
}
@media (max-width: 767px) {
    .pg-bandeau .site-tagline-heading { font-size: 1.25rem; }
}

/* ---------------------------------------------------------------------------
   Accueil — une (hero) + grille « En ce moment »
   --------------------------------------------------------------------------- */
.pg-une {
    display: block;
    background: var(--pg-surface);
    border: 1px solid var(--pg-border);
    border-radius: var(--pg-radius);
    box-shadow: var(--pg-shadow);
    margin-bottom: var(--pg-gap);
    overflow: hidden;
    text-decoration: none;
    color: var(--pg-text);
}
.pg-une__media { display: block; line-height: 0; }
.pg-une__media img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
}
.pg-une__corps { padding: 1.35rem 1.5rem 1.6rem; }
.pg-une__etiquette {
    display: inline-block;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pg-primary-d);
    margin-bottom: 0.6rem;
}
.pg-une__titre {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 1.7rem;
    line-height: 1.22;
    margin: 0 0 0.6rem;
    color: var(--pg-text);
}
.pg-une__extrait {
    margin: 0 0 0.9rem;
    color: var(--pg-text);
    font-size: 1rem;
    line-height: 1.65;
}
.pg-une__lien {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--pg-primary-d);
}
.pg-une:hover { box-shadow: var(--pg-shadow-up); }
.pg-une:hover .pg-une__titre { color: var(--pg-primary-d); }
@media (max-width: 767px) {
    .pg-une__media img { height: 230px; }
    .pg-une__titre { font-size: 1.3rem; }
}

.pg-section-titre {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 1.15rem;
    letter-spacing: 0.02em;
    margin: 0 0 1rem;
    padding-bottom: 0.45rem;
    border-bottom: 2px solid var(--pg-primary);
    display: inline-block;
}

.pg-grille {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--pg-block-gap);
    margin-bottom: var(--pg-gap);
}
@media (max-width: 767px) {
    .pg-grille { grid-template-columns: 1fr; }
}
.pg-carte {
    background: var(--pg-bg);
    border: 1px solid var(--pg-border);
    border-radius: var(--pg-radius);
    box-shadow: var(--pg-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.pg-carte:hover { box-shadow: var(--pg-shadow-up); transform: translateY(-2px); }
.pg-carte__media img {
    width: 100%;
    height: 168px;
    object-fit: cover;
    display: block;
}
.pg-carte__corps { padding: 0.9rem 1rem 1.1rem; }
.pg-carte__meta {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pg-text-2);
    margin-bottom: 0.4rem;
}
.pg-carte__titre {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 1.02rem;
    line-height: 1.3;
    margin: 0 0 0.45rem;
}
.pg-carte__titre a { color: var(--pg-text); text-decoration: none; }
.pg-carte__titre a:hover { color: var(--pg-primary-d); }
.pg-carte__extrait {
    margin: 0 0 0.6rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--pg-text);
}
.pg-carte__lien {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--pg-primary-d);
}

.pg-toutes {
    margin: 0 0 var(--pg-gap);
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 700;
}
.pg-toutes a { color: var(--pg-primary-d); }

/* ---------------------------------------------------------------------------
   Signature auteur sous l'article + carte auteur en pied d'article
   --------------------------------------------------------------------------- */
.pg-signature {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.88rem;
    color: var(--pg-text-2);
    margin: 0.2rem 0 1.1rem;
    font-family: 'Space Grotesk', system-ui, sans-serif;
}
.pg-signature img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 38px;
}
.pg-signature a { color: var(--pg-primary-d); font-weight: 700; }

.pg-auteur {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: var(--pg-surface);
    border-top: 2px solid var(--pg-primary);
    border-radius: var(--pg-radius);
    padding: 1.1rem 1.2rem;
    margin-top: var(--pg-gap);
}
.pg-auteur img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 72px;
}
.pg-auteur__nom {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 700;
    margin: 0 0 0.3rem;
    font-size: 1rem;
}
.pg-auteur__nom a { color: var(--pg-text); }
.pg-auteur p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--pg-text); }

/* Portrait centré de la page « Qui écrit ici ? » (jeton about-centered-above) */
.avatar-centered { margin-left: auto; margin-right: auto; }
.avatar-centered img { border-radius: 50%; object-fit: cover; }

/* ---------------------------------------------------------------------------
   Cartes d'archive / recherche (même traitement que l'accueil)
   --------------------------------------------------------------------------- */
.generate-columns .inside-article,
.search-results .inside-article {
    background: var(--pg-bg);
    border: 1px solid var(--pg-border);
    border-radius: var(--pg-radius);
    box-shadow: var(--pg-shadow);
    padding: 0 0 1rem;
    height: 100%;
    transition: box-shadow 0.18s ease;
}
.generate-columns .inside-article:hover,
.search-results .inside-article:hover { box-shadow: var(--pg-shadow-up); }
.generate-columns .inside-article .post-image { margin: 0 0 0.8rem; }
.generate-columns .inside-article .post-image img { height: 180px; object-fit: cover; width: 100%; }
.generate-columns .inside-article .entry-header,
.generate-columns .inside-article .entry-summary,
.generate-columns .inside-article footer.entry-meta { padding: 0 1rem; }
.generate-columns .inside-article .entry-title { font-size: 1.05rem; line-height: 1.3; }

/* ---------------------------------------------------------------------------
   Champ de recherche (widget et bloc)
   --------------------------------------------------------------------------- */
.search-field,
.wp-block-search__input {
  border: 1px solid var(--pg-border);
  border-radius: var(--pg-radius);
  padding: 8px 12px;
  font-family: inherit;
  font-size: 0.95em;
  width: 100%;
  background: var(--pg-bg);
  color: var(--pg-text);
}
.search-submit,
.wp-block-search__button {
  background: var(--pg-primary);
  color: #fff;
  border: none;
  border-radius: var(--pg-radius);
  padding: 8px 16px;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.9em;
  cursor: pointer;
}
.search-submit:hover,
.wp-block-search__button:hover { background: var(--pg-primary-d); }

/* ---------------------------------------------------------------------------
   Barre latérale (sig-D : à droite)
   --------------------------------------------------------------------------- */
.sidebar .widget {
    background: var(--pg-bg);
    border: 1px solid var(--pg-border);
    border-radius: var(--pg-radius);
    padding: 1rem;
    margin-bottom: var(--pg-block-gap);
}
.sidebar .widget .widget-title {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 0.86rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pg-primary-d);
    margin: 0 0 0.7rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--pg-border);
}
.sidebar .widget ul { margin: 0; padding: 0; list-style: none; }
.sidebar .widget li { padding: 0.28rem 0; border-bottom: 1px dotted var(--pg-border); font-size: 0.92rem; }
.sidebar .widget li:last-child { border-bottom: none; }

/* ---------------------------------------------------------------------------
   Pied de page 3 colonnes sombre (jeton 3-col-dark)
   --------------------------------------------------------------------------- */
.site-footer .footer-widgets { background: #1E1B4B; }
.site-footer .footer-widgets .widget-title {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #C4B5FD;
    margin: 0 0 0.75rem;
}
.site-footer .footer-widgets .widget { color: #E9E5F5; font-size: 0.9rem; line-height: 1.65; }
.site-footer .footer-widgets a { color: #E9E5F5; }
.site-footer .footer-widgets a:hover { color: #FFFFFF; text-decoration: underline; }
.site-footer .footer-widgets ul { margin: 0; padding: 0; list-style: none; }
.site-footer .footer-widgets li { padding: 0.2rem 0; }
.site-footer .site-info { background: #15123A; color: #C9C3E4; font-size: 0.82rem; }
.site-footer .site-info a { color: #D7D0F0; }

/* ---------------------------------------------------------------------------
   Divers
   --------------------------------------------------------------------------- */
.entry-content a { text-decoration: underline; text-underline-offset: 2px; }
/* Les cartes de l'accueil sont des blocs cliquables, pas des liens de corps de
   texte : le soulignement du contenu ne doit pas les atteindre. */
.entry-content a.pg-une,
.entry-content a.pg-une:hover,
.entry-content .pg-carte__titre a,
.entry-content .pg-carte__lien,
.entry-content .pg-toutes a { text-decoration: none; }
.entry-content .pg-carte__titre a:hover,
.entry-content .pg-carte__lien:hover,
.entry-content .pg-toutes a:hover { text-decoration: underline; }
blockquote {
    border-left: 3px solid var(--pg-primary);
    background: var(--pg-surface);
    padding: 0.8rem 1.1rem;
    margin: 1.4rem 0;
    font-style: italic;
}
.entry-content figure img { border-radius: var(--pg-radius); }
.entry-content table { border-collapse: collapse; width: 100%; font-size: 0.93rem; }
.entry-content th, .entry-content td { border: 1px solid var(--pg-border); padding: 0.5rem 0.65rem; text-align: left; }
.entry-content th { background: var(--pg-surface); font-family: 'Space Grotesk', system-ui, sans-serif; }

.pg-404 { max-width: 40rem; }
.pg-404 ul { margin-left: 1.2rem; }