/*
Theme Name: GeneratePress Child
Theme URI: https://generatepress.com
Description: Thème enfant GeneratePress — habillage Le Blog ProtegerSonPC, harmonisé avec la boutique PrestaShop (charte AngarThemes personnalisée)
Author: Marc Gueffie — PixFeed
Author URI: https://www.pixfeed.net
Template: generatepress
Version: 1.3
*/

/* ==========================================================================
   CHARTE PROTEGERSONPC.COM
   Sombre #232323 · Vert signature #7fd41d · Fond #f6f6f6 · Poppins auto-hébergée
   ==========================================================================
   Sommaire
   1. Polices (auto-hébergées : /fonts/)
   2. Variables
   3. Base
   4. Header & navigation (desktop + mobile)
   5. Contenu : articles, cartes, typographie
   6. Pagination
   7. Commentaires & formulaires
   8. Sidebar & widgets
   9. Footer
   10. Détails : sélection, focus, accessibilité
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Polices — Poppins servie depuis le thème enfant (RGPD-friendly,
      aucune requête externe). Fichiers attendus dans ./fonts/
   -------------------------------------------------------------------------- */

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/poppins-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/poppins-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/poppins-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/poppins-700.woff2') format('woff2');
}


/* --------------------------------------------------------------------------
   2. Variables
   -------------------------------------------------------------------------- */

:root {
    /* Charte boutique (valeurs mesurées + extraites du thème AngarThemes) */
    --psp-dark: #232323;
    --psp-dark-2: #282828;
    --psp-green: #7fd41d;
    --psp-green-dark: #69b214;   /* hover, liens sur fond clair (meilleur contraste) */
    --psp-red: #ff4c4c;          /* badges/promo, réservé */

    /* Neutres */
    --psp-bg: #f6f6f6;
    --psp-card: #ffffff;
    --psp-border: #d6d4d4;
    --psp-text: #333333;
    --psp-text-soft: #7a7a7a;

    /* Rythme */
    --psp-gap: 30px;
    --psp-font: 'Poppins', Arial, Helvetica, sans-serif;
}


/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

body {
    font-family: var(--psp-font);
    background-color: var(--psp-bg);
    color: var(--psp-text);
    font-size: 15px;
    line-height: 1.7;
}

a {
    color: var(--psp-green-dark);
    transition: color 0.15s ease;
}

a:hover {
    color: var(--psp-green);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--psp-font);
    font-weight: 700;
    line-height: 1.25;
    color: var(--psp-dark);
}

img {
    height: auto;
    max-width: 100%;
}


/* --------------------------------------------------------------------------
   4. Header & navigation — sombre comme la boutique
   -------------------------------------------------------------------------- */

.site-header {
    background-color: var(--psp-dark);
}

.site-header .site-title a,
.site-header .site-description {
    color: #ffffff;
}

.site-header .site-title a:hover {
    color: var(--psp-green);
    text-decoration: none;
}

/* Logo : hauteur contenue pour ne pas déformer le header */
.site-header .header-image,
.site-header .site-logo img {
    max-height: 70px;
    width: auto;
}

.main-navigation {
    background-color: var(--psp-dark);
}

.main-navigation .main-nav ul li a {
    color: #ffffff;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current_page_item > a {
    color: var(--psp-green);
    background-color: var(--psp-dark-2);
}

/* Sous-menus */
.main-navigation .main-nav ul ul {
    background-color: var(--psp-dark-2);
}

.main-navigation .main-nav ul ul li a {
    text-transform: none;
    font-weight: 500;
}

/* Élément de menu "Retour boutique" — ajouter la classe CSS
   `menu-retour-boutique` sur cet élément dans Apparence > Menus */
.main-navigation .main-nav ul li.menu-retour-boutique > a {
    background-color: var(--psp-green);
    color: var(--psp-dark);
}

.main-navigation .main-nav ul li.menu-retour-boutique > a:hover {
    background-color: var(--psp-green-dark);
    color: #ffffff;
}

/* Menu mobile (burger) */
.menu-toggle,
.main-navigation.toggled .menu-toggle {
    background-color: var(--psp-dark);
    color: #ffffff;
}

.menu-toggle:hover,
.menu-toggle:focus {
    color: var(--psp-green);
}

.main-navigation.toggled .main-nav ul li a {
    border-top: 1px solid var(--psp-dark-2);
}


/* --------------------------------------------------------------------------
   5. Contenu — articles en cartes blanches, façon fiches produits
   -------------------------------------------------------------------------- */

/* Mode "conteneurs séparés" de GeneratePress */
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation,
.one-container .container {
    background-color: var(--psp-card);
}

.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header {
    border: 1px solid var(--psp-border);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.entry-title,
.entry-title a {
    color: var(--psp-dark);
    font-weight: 700;
}

.entry-title a:hover {
    color: var(--psp-green-dark);
    text-decoration: none;
}

.entry-meta {
    color: var(--psp-text-soft);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.entry-meta a {
    color: var(--psp-text-soft);
}

.entry-meta a:hover {
    color: var(--psp-green-dark);
}

/* Lire la suite */
.read-more,
a.read-more {
    color: var(--psp-green-dark);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 13px;
}

/* Image à la une */
.post-image {
    margin-bottom: 1.5em;
}

/* Citations : filet vert signature */
blockquote,
.wp-block-quote {
    border-left: 4px solid var(--psp-green);
    background-color: var(--psp-bg);
    font-style: italic;
    color: var(--psp-text);
    padding: 20px 25px;
    margin: 1.5em 0;
}

/* Tableaux */
table {
    border-collapse: collapse;
    width: 100%;
}

table th {
    background-color: var(--psp-dark);
    color: #ffffff;
    text-transform: uppercase;
    font-size: 13px;
}

table th,
table td {
    border: 1px solid var(--psp-border);
    padding: 10px 14px;
}

table tr:nth-child(even) {
    background-color: var(--psp-bg);
}

/* Code inline */
code {
    background-color: var(--psp-bg);
    border: 1px solid var(--psp-border);
    padding: 2px 6px;
    font-size: 0.9em;
}


/* --------------------------------------------------------------------------
   6. Pagination
   -------------------------------------------------------------------------- */

.paging-navigation .page-numbers,
.post-navigation a {
    display: inline-block;
    background-color: var(--psp-card);
    border: 1px solid var(--psp-border);
    color: var(--psp-text);
    font-weight: 600;
    padding: 8px 14px;
    transition: all 0.15s ease;
}

.paging-navigation .page-numbers:hover,
.post-navigation a:hover {
    background-color: var(--psp-green);
    border-color: var(--psp-green);
    color: var(--psp-dark);
    text-decoration: none;
}

.paging-navigation .page-numbers.current {
    background-color: var(--psp-dark);
    border-color: var(--psp-dark);
    color: #ffffff;
}


/* --------------------------------------------------------------------------
   7. Commentaires & formulaires — boutons façon boutique
   -------------------------------------------------------------------------- */

button,
input[type="submit"],
input[type="button"],
.button,
.wp-block-button__link {
    background-color: var(--psp-green);
    color: var(--psp-dark);
    font-family: var(--psp-font);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border: 0;
    border-radius: 0;
    padding: 12px 24px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

button:hover,
button:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="button"]:hover,
.button:hover,
.wp-block-button__link:hover {
    background-color: var(--psp-green-dark);
    color: #ffffff;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="password"],
textarea,
select {
    background-color: var(--psp-card);
    border: 1px solid var(--psp-border);
    border-radius: 0;
    color: var(--psp-text);
    font-family: var(--psp-font);
    padding: 10px 14px;
    transition: border-color 0.15s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    border-color: var(--psp-green);
    outline: none;
}

.comment-body {
    border-bottom: 1px solid var(--psp-border);
    padding-bottom: 1.5em;
    margin-bottom: 1.5em;
}

.comment-meta .fn,
.comment-author .fn {
    font-weight: 600;
    color: var(--psp-dark);
    font-style: normal;
}


/* --------------------------------------------------------------------------
   8. Sidebar & widgets
   -------------------------------------------------------------------------- */

.sidebar .widget {
    background-color: var(--psp-card);
    border: 1px solid var(--psp-border);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.sidebar .widget .widget-title,
.widget-title {
    color: var(--psp-dark);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid var(--psp-green);
    padding-bottom: 10px;
    margin-bottom: 18px;
}

.widget ul li {
    border-bottom: 1px solid var(--psp-bg);
    padding: 6px 0;
}

.widget ul li a {
    color: var(--psp-text);
}

.widget ul li a:hover {
    color: var(--psp-green-dark);
    text-decoration: none;
}


/* --------------------------------------------------------------------------
   9. Footer — sombre, raccord avec la boutique
   -------------------------------------------------------------------------- */

.footer-widgets {
    background-color: var(--psp-dark);
    color: #cccccc;
}

.footer-widgets .widget-title {
    color: #ffffff;
    border-bottom-color: var(--psp-green);
}

.footer-widgets a {
    color: #ffffff;
}

.footer-widgets a:hover {
    color: var(--psp-green);
}

.footer-widgets .widget ul li {
    border-bottom-color: var(--psp-dark-2);
}

.site-info {
    background-color: var(--psp-dark-2);
    color: #999999;
    font-size: 12px;
}

.site-info a {
    color: #cccccc;
}

.site-info a:hover {
    color: var(--psp-green);
}

/* Bouton retour en haut */
.generate-back-to-top {
    background-color: var(--psp-green);
    color: var(--psp-dark);
    border-radius: 0;
}

.generate-back-to-top:hover,
.generate-back-to-top:focus {
    background-color: var(--psp-green-dark);
    color: #ffffff;
}


/* --------------------------------------------------------------------------
   10. Détails — sélection, focus visible, préférences utilisateur
   -------------------------------------------------------------------------- */

::selection {
    background-color: var(--psp-green);
    color: var(--psp-dark);
}

/* Focus clavier visible (accessibilité) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.main-navigation .main-nav ul li a:focus-visible {
    outline: 2px solid var(--psp-green);
    outline-offset: 2px;
}

/* Respect de la préférence "réduire les animations" */
@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}