/* --- Layout Styles --- */

*, *::before, *::after {
    box-sizing: border-box;
}

/* Ensure the html and body take full height */
html, body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

/* The main container of the site should be able to stretch if there are full-width elements inside */
#page.site {
    width: 100%;
    max-width: 100%; /* Ensures it does not limit full-width elements */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* The Header is fixed and takes the full width */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 20;
    background-color: var(--site-branding-bg-color);
    padding: 0 20px;
    /* border-bottom: 1px solid var(--site-color-text-dark-safe); */
    box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

/* Branding and navigation */
.site-branding {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 0.5em;
    flex-wrap: wrap;
    color: var(--site-branding-text-color, var(--site-color-text));
    position: relative;
    /* On définit une zone de découpe : 
       0% en haut, 100% à droite, 100% en bas, 0% à gauche.
       Tout ce qui sort du cadre en haut sera invisible. */
    clip-path: inset(0px -100% -100% -100%);
}

/* Logo alignment helpers: allow logo to appear at right by reversing flex order */
.site-branding.logo-align-left {
    /* Place the entire branding block flush to the left of the header */
    justify-content: flex-start;
    flex-direction: row;
}
.site-branding.logo-align-left .site-title-description-wrapper {
    text-align: left;
    align-items: flex-start;
}
.site-branding.logo-align-right {
    /* Place the entire branding block flush to the right of the header */
    justify-content: flex-end;
    flex-direction: row;
}
.site-branding.logo-align-right .site-title-description-wrapper {
    /* Align text inside the branding block to the right when the block is on the right */
    text-align: right;
    align-items: flex-end;
}
.site-branding.logo-align-center {
    /* Explicit center mode: ensure block is centered and items stack/align centered */
    justify-content: center;
    flex-direction: row;
}
.site-branding.logo-align-center .site-title-description-wrapper {
    text-align: center;
    align-items: center;
}

/* Logo */
/*bloque l'espace pour le logo et évite clignotement au chargement de la page */
.custom-logo-link {
    display: inline-block;
    max-width: 150px; 
    /* width: 100%; */
    /* L'aspect-ratio sera injecté par le PHP */
}

/* L'Image remplit l'espace et gère le look (Design) */
.custom-logo {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.custom-logo-link:hover .custom-logo {
    transform: scale(1.02);
}

.site-title {
    /* margin-top: 2.5em; */
    margin-bottom: 0em;
}

.site-title,
.site-title a {
    display: inline-block;
    font-family: var(--font-site-title);
    /* Use Customizer values when available (fallbacks ensure graceful degradation) */
    font-size: var(--site-title-font-size, 28px);
    color: inherit;
    font-weight: var(--site-title-font-weight, 800);
    text-decoration: none;
    line-height: 1.2;
    letter-spacing: var(--site-title-letter-spacing, -3px);
}

/* Force site title color to use semantic branding title token (preferred title color) */
.site-title,
.site-title a {
    color: var(--site-branding-title-color, var(--site-color-title));
}

.site-description {
    font-family: var(--font-site-description);
    font-size: var(--site-description-font-size, 16px);
    color: inherit;
    margin-top: 0;
    margin-bottom: 0;
    font-weight: var(--site-description-font-weight, 300);
    letter-spacing: var(--site-description-letter-spacing, 0px);
}

/* If there's no logo, center the title and description */
.site-title-description-wrapper.no-logo-center {
    /* Force the wrapper to take the full available width */
    flex-grow: 1; 
    max-width: 100%; 

    /* Center the text inside this wrapper that takes the full width */
    text-align: center;
}
.site-title-description-wrapper {
    text-align: var(--site-description-align, left);
    display: flex;
    flex-direction: column;
    align-items: var(--site-description-align-items, flex-start);
    text-decoration: none;
    color: inherit;
}


.site-title-description-wrapper:focus {
    outline: none; /* visual focus handled on inner elements if desired */
}

/* Ensure the site title/description do not change color on hover like regular links.
   The branding wrapper is an anchor (to preserve link behavior) but should keep the
   same branding color on hover rather than adopting the global link accent color. */
.site-title-description-wrapper,
.site-title-description-wrapper:hover,
.site-title-description-wrapper:focus,
.site-title-description-wrapper:active {
    color: inherit;
    text-decoration: none;
}

/* Signature Image Styling */
.signature-image-wrapper {
    margin-top: -0.25em;
    margin-bottom: 0.5em;
    width: 100%;
    max-width: 100%;
}

.signature-image-wrapper img {
    max-width: 55%;
    height: auto;
    display: block;
    margin: 0; /* reset, alignment controlled by wrapper class */
}

/* Alignment helpers for the signature image inside the title wrapper */
.site-title-description-wrapper.signature-align-left .signature-image-wrapper img {
    margin-left: 0;
    margin-right: auto;
}
.site-title-description-wrapper.signature-align-center .signature-image-wrapper img {
    margin-left: auto;
    margin-right: auto;
}
.site-title-description-wrapper.signature-align-right .signature-image-wrapper img {
    margin-left: auto;
    margin-right: 0;
}

/* Adjust spacing when only the signature image is visible (site title hidden) */
.site-header.only-signature .site-branding {
    /* padding-top: 6px; */
    /* padding-bottom: 6px; */
    gap: 8px; 
}
.site-header.only-signature .signature-image-wrapper {
    margin-top: 0; /* reduce top offset when only signature shown */
    margin-bottom: 0;
}
.site-header.only-signature .signature-image-wrapper img {
    max-width: 50%; 
}

@media (max-width: 900px) {
    .site-header.only-signature .signature-image-wrapper img {
        max-width: 70%; 
    }
}

/* Tighten branding spacing on very large screens so the branding sits
   closer to the navigation bar when there's a lot of horizontal room. */
@media (min-width: 1400px) {
    .site-branding {
        gap: 8px; /* reduce gap between logo/title/signature */
        margin-bottom: 0.15em; /* reduce vertical breathing space */
    }
    .signature-image-wrapper {
        margin-top: 0; /* reduce top offset */
        margin-bottom: 0;
    }
    /* When branding is flush right/left, keep it visually balanced near the nav */
    .site-branding.logo-align-left { margin-left: 22%; }
    .site-branding.logo-align-right { margin-right: 22%; }
}

/* Reduce the top offset of the page content to match the smaller header */
/* .site-header.only-signature + .site-content {
    padding-top: 120px; 
} */


/* .site-title a, .site-description {
    font-family: var(--font-primary);
} */

/* The main content container */
.site-content {     
    padding-top: 160px; /* Space for the fixed header */
    /* padding-bottom: 20px; */
    
    /* Add padding for content that does not fill the entire width */
    padding-left: 20px; 
    padding-right: 20px;
    box-sizing: border-box;
    flex-grow: 1;
}

/* ----------------------------------------------- */
/* Styles for the HOME PAGE (full-width carousel) */
/* ----------------------------------------------- */
/* To make the sections of the home page (including the carousel) take the full width,
   they need to override the default max-width and margin of .site-content */
body.home .site-content,
body.front-page .site-content {
    max-width: 100%; /* Ignore the default max-width of .site-content */
    margin: 0;       /* Ignore the default margin auto of .site-content */
    padding-left: 0; /* Remove the horizontal padding of .site-content for the home page */
    padding-right: 0;
    /* When the front page uses a full-width hero, we keep the content flush with the header.
       JS also adjusts padding dynamically; this CSS fallback ensures no large top gap when
       the hero is present or JS is not executed. */
    padding-top: 0;
    /* Prevent page-level horizontal overflow caused by carousels rendering
       neighbouring slides outside their container. This clips the page so
       mobile browsers do not 'zoom out' to include overflowed content. */
}

/* For the text content inside the sections of the home page (including the carousel) */
.container { 
    max-width: var(--content-width, 1200px); /* Use the standard content width */
    margin: 0 auto; /* Center the inner content */
}

/* ------------------ FOOTER -------------------- */

/* =================== 1. Base =================== */
.site-footer .site-info {
    max-width: var(--content-width, 1450px);
    margin: 0 auto;
}

.site-footer {
    background-color: var(--site-footer-background, var(--accent-secondary-main));
    /* color: var(--site-footer-text, var(--site-color-text)); */
    padding: 0.5em 0.5em;
    text-align: center;
    margin-top: 2em;
    width: 100%;
    box-shadow: var(--shadow-lg);
    font-family: var(--font-footer, var(--font-body));
    font-weight: var(--font-footer-weight, 400);
    letter-spacing: var(--font-footer-letter-spacing, normal);
}

.site-footer a {
    color: var(--site-color-text);
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--accent-text, var(--accent-main));
}

/* =================== 2. Layout =================== */
.footer-columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    font-size: 100%;
}

.footer-column {
    flex: 1;
    min-width: 280px;
    padding: 0 10px;
}

.footer-column p {
    margin: 1em 0;
}

/* Column ordering for desktop/tablet/mobile breakpoints */
.footer-column-1 { order: 1; align-items: flex-start; }
.footer-column-2 { order: 2; text-align: center; max-width: fit-content; }
.footer-column-3 { order: 3; text-align: right; }

/* =================== 3. Composants : Adresse / Contact =================== */
/* Logique d'adresse : garder CP+Ville unis, gérer le wrapping selon breakpoint */
.contact-address-block { display: flex !important; flex-wrap: wrap !important; }
.contact-street { flex: 1 0 100%; }
.contact-address-block .contact-street p { margin-top: 0; margin-bottom: 0; }
.contact-postal { display: inline-block !important; white-space: nowrap !important; vertical-align: middle; }

/* Reset italics on <address> (user agent styles make it italic by default) */
address.contact-address-block { font-style: normal !important; }

/* Info line : icône + texte */
.footer-info-line {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    column-gap: 0.45rem;
    row-gap: 0.25rem;
    align-items: center !important;
    /* font-size: 0.95em; */
    line-height: 1.2;
    margin-bottom: 0.25rem;
}
.footer-info-line .footer-address-link,
.footer-info-line .footer-delivery,
.footer-info-line .footer-custom-detail { grid-column: 2; }
/* .footer-custom-detail { font-size: 0.9em; } */

/* L'icône */
.footer-tagline-icon {
    grid-column: 1;
    color: var(--accent-main, var(--accent-text));
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 1.5rem;
    font-size: 1em;
    line-height: 1;
    flex-shrink: 0;
}

/* =================== 4. Composants : Tagline / Brand / Logo =================== */
.footer-tagline {
    display: grid;
    grid-template-columns: max-content 1fr; 
    grid-template-rows: auto auto;
    column-gap: 1.5rem; 
    row-gap: 0.5rem;
    margin: 5px 0;
    /* C'EST ICI : Aligne verticalement le contenu des cellules A2 et B2 sur le même axe central */
    align-items: center; 
}

/* CELLULE FUSIONNÉE (A1 + B1) */
.footer-brand {
    display: contents; 
}

.footer-site-title {
    grid-column: 1 / span 2; 
    grid-row: 1;
    text-align: start;
    width: 100%;
    align-self: center; 
    font-weight: bold;
}

/* CELLULE A2 : Le Logo */
.footer-logo-wrapper {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    display: flex; /* Aide à l'alignement interne */
    align-items: center;
}

.footer-logo-wrapper img {
    max-width: var(--footer-logo-max, 120px);
    height: auto;
    display: block;
}

/* CELLULE B2 : Les Infos */
.footer-tagline-body {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center; /* Centre le contenu verticalement si la cellule est haute */
    text-align: left;
}

/* Ajustement spécifique pour ton HTML : 
   On s'assure que le wrapper du titre ne force pas le logo à rester avec lui */
.footer-brand {
    display: contents; /* Magique : fait disparaître le conteneur pour la Grid */
}

/* Mais on redonne les styles au titre car display: contents les annule */

/* =================== 5. Navigation, social, crédits, bas de page =================== */
.footer-legal-links .footer-menu-items { list-style: none; padding: 0; margin: 0; }
.footer-legal-links .footer-menu-items li { display: block; margin: 0; }
nav.footer-legal-links { margin: 0.5em 0; }

.footer-social-links { margin: 0.5em 0; }
.footer-social-links a { color: var(--accent-main, var(--accent-text)); margin: 0 0.75em; display: inline-block; transition: color 0.3s ease, transform 0.3s ease; }
.footer-social-links a:hover { color: var(--site-color-text); transform: scale(1.1); }

.footer-credits { font-size: 80%; opacity: 0.95; }
.footer-credits a { color: var(--accent-text, var(--accent-main)); }
.footer-credits a:hover { color: var(--site-color-text) }

.footer-bottom-bar { text-align: center; margin-top: 0.5em; padding-top: 0.5em; border-top: 1px solid var(--site-color-border-medium); font-size: 95%; }
.footer-bottom-bar p { display: block; margin: 0.3em auto; }

/* =================== 6. Responsive (groupées, ordre ascendant) =================== */
@media screen and (min-width: 1201px) {
    .contact-street { flex: 1 0 100%; }
}

@media screen and (min-width: 900px) {
    .footer-info-line { grid-template-columns: 1.2rem 1fr; column-gap: 0.5rem; align-items: start; }
    .footer-has-logo { display: grid;  }
    /* .footer-has-logo .footer-logo-wrapper { flex: 0 0 auto; } */
    /* .footer-has-logo .footer-tagline-body { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; } */
    /* .footer-info-line .footer-tagline-icon { width: auto; text-align: left; margin-right: 0; font-size: 0.85em; align-self: center; } */
    .footer-info-line  { 
        width: auto; 
        text-align: left; 
        /* font-size: 90%;  */
    }
    /* .footer-info-line a, .footer-info-line .footer-delivery, .footer-info-line span { text-align: left; text-decoration: none; } */
}

@media screen and (min-width: 701px) and (max-width: 1200px) {
    .footer-columns { font-size: 97%; }
    .contact-address-block { display: inline !important; }
    .contact-street, .contact-postal, .contact-street p { display: inline !important; }
    .contact-street::after { content: " "; }
    .footer-info-line { width: auto; text-align: left; margin-right: 0; }
}

/* @media screen and (min-width: 701px) and (max-width: 899px) {
    .footer-has-logo { display: flex; flex-direction: row; align-items: center; gap: 0.9rem; }
    .footer-has-logo .footer-logo-wrapper { flex: 0 0 auto; }
    .footer-has-logo .footer-logo-wrapper .custom-logo { max-width: calc(var(--footer-logo-max, 120px) * 0.9); height: auto; display: block; }
    .footer-has-logo .footer-tagline-body { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; }
    .footer-has-logo .footer-tagline-body .footer-info-line { justify-content: flex-start; width: 100%; }
} */

@media screen and (max-width: 1000px) {
    .footer-column-1 { order: 1; min-width: auto; text-align: left; }
    .footer-column-3 { order: 2; min-width: auto; text-align: right; }
    .footer-column-2 { order: 3; flex: 1 0 100%; min-width: 100%; text-align: center; }
}

@media screen and (max-width: 700px) {
    .footer-columns { flex-direction: column; align-items: center; gap: 0em; font-size: 95%; }
    .footer-column { text-align: center; margin-bottom: 0; padding: 0; }
    .footer-column p { margin-bottom: 0.5em; padding: 0; }
    .footer-column:last-child { margin-bottom: 0; }
    .footer-column-3 { margin-top: 0.3rem !important; }
    .footer-tagline { display: flex; flex-direction: column; align-items: center; }
    .footer-tagline-body { display: flex !important; flex-direction: column; align-items: center; gap: 0.4rem; width: 100%; padding: 0 5px; }
    .footer-info-line { display: flex !important; align-items: center !important; flex-wrap: nowrap; grid-template-columns: none !important; column-gap: 0.3rem !important; }
    .footer-info-line .footer-tagline-icon { justify-self: initial !important; align-self: center !important; display: inline-flex !important; width: auto !important; margin-top: 0 !important; margin-right: 0.4rem !important; }
    .footer-tagline .footer-info-line .contact-address-block,
    .footer-tagline .footer-info-line .contact-street,
    .footer-tagline .footer-info-line .contact-postal,
    .footer-tagline .footer-info-line .contact-street p { display: inline !important; margin: 0 !important; white-space: nowrap !important; }
    .site-footer .footer-tagline .footer-info-line .contact-street, .site-footer .footer-tagline .footer-info-line .contact-street p { margin-right: 0.1rem !important; }
    .site-footer .footer-tagline .footer-info-line .footer-address-link { display: inline !important; text-decoration: none !important; color: inherit !important; }
    .footer-social-links { text-align: center; margin: 0.2em; }
    nav.footer-legal-links { text-align: center; margin: 0.2em 0; }
    .footer-legal-links .footer-menu-items li { display: inline; }
    .footer-legal-links .footer-menu-items li:not(:last-child):after { content: " | "; margin: 0 0.2em; }
    .footer-bottom-bar p { margin: 0.2em auto; }
    .footer-site-title { text-align: center;}
}

@media screen and (max-width: 400px) {
    .footer-column { min-width: 100% !important; }
    .footer-info-line { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 0.2rem !important; text-align: center !important; }
    .footer-info-line .footer-tagline-icon { margin-right: 0 !important; margin-bottom: 0.2rem !important; width: auto !important; align-self: center !important; }
    .site.footer .footer-tagline .footer-info-line .contact-address-block { display: block !important; text-align: center !important; width: 100% !important; white-space: normal !important; }
    .site-footer .footer-tagline .footer-info-line .contact-street, .site-footer .footer-tagline .footer-info-line .contact-postal, .site-footer .footer-tagline .footer-info-line .contact-street p { display: block !important; white-space: normal !important; margin: 0 auto !important; }
    .contact-postal { display: inline-block !important; white-space: nowrap !important; }
    .footer-delivery, .footer-custom-detail { display: block !important; text-align: center !important; }
}



/* Responsive Layout Styles */

@media screen and (max-width: 830px) {
    .site-header {
        border-bottom: none; 
        /* background-color: var(--site-branding-bg-color); */
    }
    .site-branding {
        padding-bottom: 0; 
        gap: 0;
    }
}


@media screen and (max-width: 768px) {
    /* Hide header logo on small screens but keep logos used elsewhere (footer) visible */
    .site-header .custom-logo-link img {
        display: none; /* Hide header logo on small screens */
    }
}

@media screen and (min-width: 701px) and (max-width: 768px) {
    /* .signature-image-wrapper {
        margin-left: 8em;
    } */
    .custom-logo-link img {
        max-width: 100px; /* max-width for smaller screens */
    }
}
@media screen and (max-width: 700px) {
    .site-branding {
        flex-direction: column;
    }
    .site-title-description-wrapper {
        flex-direction: column; /* Stack title and description vertically */
        align-items: center;
        text-align: center;
    }

    /* .signature-image-wrapper {
        margin-left: 4em;
    } */
}

@media screen and (max-width: 450px) {
    .site-title a {
        font-size: 1.8em;        
    }
    /* .signature-image-wrapper {
        max-width: 100px;
        margin-top : 0;
        margin-left: 6.5em; 
    } */
    .site-description {
        font-size: 1.2em;
    }
}



/* ------------------------------------------------------------------
   Prevent the "home logo" replacement from applying to custom menu links
   that point to anchors like "#services" (preprod / absolute URLs).
   Targets anchors in the navigation whose href contains the fragment.
   This is safer than relying on WP menu-item classes when URLs include
   fragments or are built as absolute links to the preprod host.
   ------------------------------------------------------------------ */
.main-navigation a[href*="#services"],
.main-navigation a[href$="#services"] {
    background-image: none !important;
    background-size: initial !important;
    background-position: initial !important;
    text-indent: 0 !important; /* restore visible text */
    width: auto !important;
    height: auto !important;
}
.main-navigation a[href*="#services"] img,
.main-navigation a[href$="#services"] img {
    display: inline-block !important; /* ensure any <img> inside is visible */
    max-width: 120px !important;
    height: auto !important;
}


/* Ensure anchored sections (e.g. #services) are not hidden under the
   fixed header when navigated to via fragment links. We apply a
   scroll-margin-top on the section title so the browser will offset
   the element when scrolling to the anchor. Adjusted for smaller
   headers on mobile. */
#services, 
#contact, 
.section-title, 
.carte-produit {
    /* On ajoute 20px ou 30px de "gap" à la hauteur réelle du header */
    scroll-margin-top: calc(var(--header-height, 100px) + 40px);
}

@media screen and (max-width: 809px) {
    #services, #contact, .section-title, .carte-produit {
        /* En mobile, on peut réduire le gap à 15px */
        scroll-margin-top: calc(var(--header-height, 150px) + 140px);
    }
}


/* ----------------------------------------------- */
/* Layout pour les pages AVEC SIDEBAR */
/* ----------------------------------------------- */
/* Cette règle s'applique UNIQUEMENT quand le body a la classe 'has-sidebar' */
body.has-sidebar .site-content {
    display: flex; 
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    column-gap: 2.5em; /* horizontal spacing between primary and sidebar */
    
    /* Retire le max-width et margin: auto pour laisser Flexbox gérer la largeur */
    max-width: var(--content-width, 1300px);
    margin: 0 auto;
    padding-left: 20px; 
    padding-right: 20px;
}

/* Styles pour le contenu principal quand il y a une sidebar */
body.has-sidebar .site-content #primary { 
    flex: 1 1 80%; 
    max-width: 80%;
    padding: 0 2.5em 1.5em 2.5em; 
    box-sizing: border-box; 
    min-width: 0;
    max-width: 1000px;
}

/* Styles pour la sidebar elle-même */
body.has-sidebar #sidebar { 
    flex: 0 0 20%;
    max-width: 300px;
    box-sizing: border-box;
    /* padding-right: 1em; */
    margin-top: 2em; 
    font-size: 13px;
    line-height: 1.4;
    border-radius: var(--site-image-border-radius, 5px); 
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--site-color-border-light, #eee);
    padding: 1.5em; 
    transition: none;
    overflow: hidden;
}

body.has-sidebar #sidebar a {
        /* Make the stacked sidebar span the full viewport width while keeping
           comfortable inner padding. We offset the container's horizontal
           padding (20px each side) so the block becomes full-bleed. */
        width: calc(100% + 40px);
        margin: 2em -20px 0; /* negate .site-content horizontal padding */
        padding: 1.5em; /* inner spacing */
        position: static;
}

/* Tablette / Ordinateur portable de taille moyenne (entre 769px et 1024px) */
@media screen and (min-width: 850px) and (max-width: 1024px) {
    .site-content {
        max-width: 950px; 
        margin: 0 auto;
        /* padding: 2em 2em;  */
    }
    
    body.has-sidebar .site-content { 
        display: flex; 
        flex-direction: row; 
        flex-wrap: wrap;
        justify-content: space-between;
        max-width: 950px;
        margin: 0 auto;
        padding: 2em 1em;
    }
    /* body.has-sidebar .site-content #primary { 
        padding-right: 2em; 
    } */
    body.has-sidebar .site-content #primary, 
    body.has-sidebar .site-content #sidebar { 
        flex: 1 1 100%; 
        max-width: 100%;
        justify-content: center;
        padding-top: 1em;
        padding-bottom: 1em;
        /* padding-right: 0; */
        /* padding-left: 0;  */
        box-sizing: border-box;
        margin-left: 0 !important; 
        margin-right: 0 !important;
        min-width: 0; 
    }
    body.tax-famille_service .site-content,
    body.post-type-archive-sandco_service .site-content {
        margin: 0;            /* supprime le centering qui rétrécit */ 
        width: 100%;          /* forcer occuper l'espace disponible */
        flex: 1 1 0%;         /* corrige le shrink-wrap si parent est flex */
        min-width: 0;         /* autorise la réduction interne correcte */
    }

}

/* Mobile (<= 850px) */
@media screen and (max-width: 850px) {   
    .site-content {
        max-width: 100%;
        margin: 0;
        padding: 1.5em 1em; 
        box-sizing: border-box;
    }

   /* Le flex-direction: column s'applique aux pages avec sidebar sur mobile */
    body.has-sidebar .site-content { 
        flex-direction: column; 
        align-items: center; 
        width: 100%; 
        max-width: 100%; 
        margin: 0;
        padding: 1.5em 1em;
    }

    body.has-sidebar .site-content #primary, 
    body.has-sidebar .site-content #sidebar { 
        flex: 1 1 100%; 
        max-width: 100%;
        justify-content: center;
        padding-top: 1em;
        padding-bottom: 1em;
        box-sizing: border-box;
        margin-left: 0 !important; 
        margin-right: 0 !important;
        min-width: 0; 
    }

    body.has-sidebar .site-content #primary {
        padding-bottom: 2em; 
    }

    body.has-sidebar #sidebar {
        width: 90%;
        margin: 2em auto;
        padding: 1.5em; /* restore full padding when stacked for comfortable spacing */
        position: static; 
        /* top: auto; right: auto; left: auto; */
    }

    body.has-sidebar #sidebar ul {
        padding-left: 0; 
    }
}



/* Styles pour la sidebar elle-même (margin-top, etc.) - si elles sont générales */
#sidebar {
    margin-top: 2.5em;
}
@media screen and (min-width: 769px) {
    body.blog #sidebar,
    body.archive #sidebar {
        margin-top: 2.5em; 
    }
}

/* Force sidebar to remain at the right of the main content on large screens
   Prevent wrapping when combined widths would exceed the site container width */
@media screen and (min-width: 1100px) {
    body.has-sidebar .site-content {
        flex-wrap: nowrap; /* keep primary and sidebar on the same row */
        align-items: flex-start;
    }

    /* Increase the horizontal gap specifically on single post pages for better separation */
    body.single.has-sidebar .site-content {
        column-gap: 3.5rem;
    }

    /* Make primary occupy remaining width while leaving a fixed sidebar width */
    body.has-sidebar .site-content #primary {
        flex: 1 1 auto;
        max-width: calc(100% - 340px); /* leave room for sidebar + gaps/padding */
        padding-right: 2.5em;
    }

    body.has-sidebar #sidebar {
        flex: 0 0 320px; /* fixed sidebar width */
        max-width: 320px;
        margin-top: 3.5em; /* keep the same spacing from top like the return button */
    }
}

/* Empiler la sidebar sous 1100px (responsive) */
@media screen and (max-width: 1099px) {
    body.has-sidebar .site-content {
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
    }

    /* Only remove horizontal padding for the primary column; keep sidebar padding
       so stacked sidebar can keep comfortable inner spacing. */
    body.has-sidebar .site-content #primary {
        flex: 1 1 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
    }

    body.has-sidebar #sidebar {
        width: 90%;
        margin: 2em auto;
        padding: 0 1em;
        position: static;
    }
}