/*
Theme Name: VW Gardening Landscaping Child
Theme URI: https://www.arrosagedujardin.fr/
Description: Thème enfant de VW Gardening Landscaping. Optimisations performance + lisibilité + options d'affichage.
Author: arrosagedujardin.fr
Author URI: https://www.arrosagedujardin.fr/
Template: vw-gardening-landscaping
Version: 2.9.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: vw-gardening-landscaping-child
*/

/* ============================================================
   LISIBILITÉ — Couleur, taille, interlignage

   Stratégie chirurgicale (v2.6) :
   - On NE touche PAS au body globalement (sauf la couleur de défaut),
     pour ne pas casser les rapports de tailles utilisés par le menu,
     le logo, le header, le footer.
   - On cible UNIQUEMENT les zones de lecture : corps d'article,
     aperçus de listing, items de sidebar.
   - On NE touche PAS aux liens (héritent de leurs propres règles
     parent : couleur d'accent, fonte d'interface, etc.).

   Le parent fixe body { color: #a9a9a9 } (illisible sur fond blanc),
   on remplace par #222 — sans toucher aux autres propriétés du body.
   ============================================================ */

/* Couleur de défaut (héritée par les paragraphes, listes, etc.) */
body {
    color: #222;
}

/* Corps d'article : titre, paragraphes, listes, citations.
   On augmente la taille à 18px et l'interlignage à 1.65 UNIQUEMENT ici. */
.single-post .entry-content,
.single-post .entry-content p,
.single-post .entry-content li,
.single-post .entry-content blockquote {
    color: #222;
    font-size: 18px;
    line-height: 1.65;
    letter-spacing: 0.3px;
}

/* Aperçus de listing (home blog, archives, recherche) :
   on cible le PARAGRAPHE seulement, pas les liens ni les boutons. */
.new-text > p,
.post-main-box > p,
.entry-content > p {
    color: #222;
    line-height: 1.65;
    letter-spacing: 0.3px;
}

/* post-info (sous le titre) : gris foncé lisible. */
.post-info,
.post-info span,
.post-info .entry-date,
.post-info .entry-author,
.post-info .entry-comments,
.post-info .entry-time {
    color: #333;
}

/* ============================================================
   IMAGE MISE EN AVANT — espace sous l'image
   Le parent ne met aucune marge sur .feature-box, l'image est
   collée au paragraphe qui suit. On corrige sur tous les écrans.
   ============================================================ */
.single-post .feature-box {
    margin-bottom: 1.75rem; /* ~28px */
}

/* ============================================================
   SIDEBAR — Listes (Articles récents, Catégories, Archives, Méta)
   Le parent met #a9a9a9 partout : illisible.
   ============================================================ */
#sidebar ul li,
#sidebar ul li a,
#sidebar .tagcloud a,
#sidebar .widget li,
#sidebar .widget li a,
#sidebar .wp-block-latest-posts li,
#sidebar .wp-block-latest-posts li a,
#sidebar .wp-block-latest-posts__post-title,
#sidebar a.wp-block-latest-posts__post-title,
#sidebar .wp-block-latest-comments li,
#sidebar .wp-block-archives li,
#sidebar .wp-block-archives li a,
#sidebar .wp-block-categories li,
#sidebar .wp-block-categories li a {
    color: #222;
}

/* ============================================================
   FOOTER — Cacher le lien VWThemes (le texte "By Arrosage Du Jardin"
   est mis en place par le filtre PHP côté child).

   Le footer.php du parent affiche :
     <a href="...vwthemes.com...">Gardening WordPress Theme</a> By VWThemes
   On a remplacé "By VWThemes" par "By Arrosage Du Jardin" via filtre
   theme_mod, et on cache le lien <a> généré par la fonction
   vw_gardening_landscaping_credit() via CSS.
   ============================================================ */
.copyright p a[href*="vwthemes.com"] {
    display: none !important;
}

/* ============================================================
   GRANDS ÉCRANS (≥ 1560px)

   Layout cible :
   - Article + sidebar = un BLOC CENTRÉ dans le container.
   - Article : 1000px fixe, aligné à gauche dans son bloc.
   - Sidebar : 480px fixe (très aérée).
   - Écart article/sidebar : 40px fixe.
   - Bloc total = 1000 + 40 + 480 = 1520px.
   - Marges gauche/droite symétriques (le bloc est centré).

   Activation à 1560px : laisse au moins 20px de marge de chaque
   côté à l'activation. En dessous, on revient au comportement
   Bootstrap natif du parent (col-lg-8 / col-lg-4 fluide), et
   sur tablette/mobile la sidebar tombe naturellement sous l'article
   (toujours géré par le parent).
   ============================================================ */
@media (min-width: 1560px) {

    /* 1. Container global */
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        max-width: 1600px;
    }

    /* 2. Le row qui porte article + sidebar : centré. */
    .middle-align > .row {
        --bs-gutter-x: 0;
        flex-wrap: nowrap;
        align-items: flex-start;
        justify-content: center; /* CENTRE le bloc dans le container */
        gap: 40px;               /* écart article/sidebar */
    }

    /* 3. Article : largeur fixe 1000px, aligné à gauche. */
    .middle-align > .row > #our-services.col-lg-8,
    .middle-align > .row > #our-services.col-lg-9,
    .middle-align > .row > #our-services.services {
        flex: 0 0 1000px;
        max-width: 1000px;
        width: 1000px;
        padding-left: 0;
        padding-right: 0;
    }

    /* 4. Sidebar : largeur fixe 480px (très aérée). */
    .middle-align > .row > #sidebar.col-lg-4,
    .middle-align > .row > #sidebar.col-lg-3 {
        flex: 0 0 480px;
        max-width: 480px;
        width: 480px;
        min-width: 0;
        padding-left: 0;
        padding-right: 0;
    }

    /* 5. Sidebar : un peu de respiration interne. */
    #sidebar .widget {
        padding: 25px;
    }
}

/* Très grands écrans (≥ 1800px) : container un peu plus large.
   Article et sidebar gardent leurs largeurs fixes, donc seules
   les marges latérales s'élargissent — bloc toujours centré. */
@media (min-width: 1800px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        max-width: 1720px;
    }
}

/* ============================================================
   SIDEBAR MASQUÉE (toggle "Afficher la sidebar" dans le customizer)
   Quand body.vwgl-no-sidebar est présent :
   - On cache complètement #sidebar.
   - On étend la colonne #our-services pour qu'elle prenne toute
     la largeur disponible — peu importe la classe Bootstrap
     (col-lg-3 / 6 / 8 / 9) appliquée par le template parent.

   Couvre TOUS les layouts du parent (Right/Left Sidebar,
   Three/Four Columns, Grid Layout, archive.php).
   ============================================================ */
body.vwgl-no-sidebar #sidebar {
    display: none !important;
}

/* Tous écrans : la zone article prend 100% du row,
   les classes Bootstrap col-lg-* / col-md-* sont neutralisées. */
body.vwgl-no-sidebar .middle-align > .row > #our-services,
body.vwgl-no-sidebar .middle-align > .row > #our-services.col-lg-3,
body.vwgl-no-sidebar .middle-align > .row > #our-services.col-lg-6,
body.vwgl-no-sidebar .middle-align > .row > #our-services.col-lg-8,
body.vwgl-no-sidebar .middle-align > .row > #our-services.col-lg-9,
body.vwgl-no-sidebar .middle-align > .row > #our-services.col-md-3,
body.vwgl-no-sidebar .middle-align > .row > #our-services.col-md-6,
body.vwgl-no-sidebar .middle-align > .row > #our-services.col-md-8,
body.vwgl-no-sidebar .middle-align > .row > #our-services.col-md-9 {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}

/* Sur grand écran (≥ 1560px), on garde la lecture confortable :
   l'article reste à 1200px max et est centré dans le container. */
@media (min-width: 1560px) {
    body.vwgl-no-sidebar .middle-align > .row > #our-services,
    body.vwgl-no-sidebar .middle-align > .row > #our-services.col-lg-3,
    body.vwgl-no-sidebar .middle-align > .row > #our-services.col-lg-6,
    body.vwgl-no-sidebar .middle-align > .row > #our-services.col-lg-8,
    body.vwgl-no-sidebar .middle-align > .row > #our-services.col-lg-9 {
        flex: 0 0 1200px;
        max-width: 1200px;
        width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }
}