/*
Theme Name: Granit Roz V2 (Zeen Child)
Theme URI: https://www.granit-roz.fr
Description: Thème enfant sur mesure développé pour l'architecture SaaS et Média de Granit Roz.
Template: zeen
Version: 5.4.0
Text Domain: zeen-child
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');

:root {
    --grz-color-primary: #111111;
    --grz-color-secondary: #111111;
    --grz-color-accent: #BFA15F;
    --grz-color-text: #333333;
    --grz-color-light: #FAFAFA;
    --grz-color-border: #EAEAEA;
    
    --grz-font-headings: 'Playfair Display', serif;
    --grz-font-body: 'Inter', sans-serif;
    
    --grz-radius: 4px;
    --grz-shadow: 0 15px 45px rgba(0,0,0,0.05);
    --grz-transition: all 0.4s ease;
}

/* ----------------------------------------------------------------------------------
 * 1. TYPOGRAPHIE & RESET GLOBAL
 * ---------------------------------------------------------------------------------- */
body { font-family: var(--grz-font-body); color: var(--grz-color-text); line-height: 1.8; }
h1, h2, h3, h4, h5, h6 { font-family: var(--grz-font-headings); color: var(--grz-color-secondary); line-height: 1.15; letter-spacing: -0.02em; }

.grz-directory-wrap { background-color: #ffffff; width: 100%; }
.grz-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ----------------------------------------------------------------------------------
 * 2. FICHE PRO : HERO SECTION
 * ---------------------------------------------------------------------------------- */
.grz-hero-section { width: 100%; height: 60vh; min-height: 450px; background-size: cover; background-position: center; display: flex; align-items: flex-end; padding-bottom: 70px; position: relative; }
.grz-hero-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, rgba(17,17,17,0.1) 0%, rgba(17,17,17,0.8) 100%); z-index: 1; }
.grz-hero-content { max-width: 1200px; margin: 0 auto; padding: 0 20px; width: 100%; color: #ffffff; position: relative; z-index: 2; }
.grz-hero-category { font-family: var(--grz-font-body); background-color: transparent; color: var(--grz-color-accent); padding: 0; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 20px; display: inline-block; border-bottom: 1px solid var(--grz-color-accent); }
.grz-hero-title { font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 700; margin: 0; color: #ffffff; }

.grz-hero-location-block { margin-top: 15px; display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }
.grz-hero-address { font-family: var(--grz-font-body); font-size: 1.1rem; color: var(--grz-color-light); font-weight: 400; }
.grz-hero-maps-link { background: transparent; color: #ffffff; border: 1px solid var(--grz-color-accent); padding: 4px 12px; border-radius: 50px; font-size: 0.85rem; font-weight: 700; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; transition: var(--grz-transition); }
.grz-hero-maps-link:hover { background: var(--grz-color-accent); color: var(--grz-color-primary); }
.grz-hero-price-badge { background: var(--grz-color-accent); color: var(--grz-color-primary); padding: 4px 12px; border-radius: 50px; font-size: 0.85rem; font-weight: 700; letter-spacing: 1px; }

/* ----------------------------------------------------------------------------------
 * 3. FICHE PRO : MAIN GRID & CONTENU
 * ---------------------------------------------------------------------------------- */
.grz-main-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 60px; padding-top: 80px; padding-bottom: 100px; }
.grz-section-title { font-size: 2.2rem; color: var(--grz-color-secondary); margin-bottom: 30px; padding-bottom: 15px; position: relative; }
.grz-section-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 60px; height: 2px; background-color: var(--grz-color-accent); }
.grz-text-format { font-family: var(--grz-font-body); font-size: 1.15rem; color: var(--grz-color-text); line-height: 1.8; }
.grz-text-format p { margin-bottom: 20px; }

.grz-pro-gallery { margin-top: 50px; }
.grz-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; }
.grz-gallery-img { width: 100%; height: 200px; object-fit: cover; border-radius: var(--grz-radius); transition: var(--grz-transition); }
.grz-gallery-img:hover { transform: scale(1.02); }

.grz-pro-amenities { margin-top: 60px; }
.grz-badges-wrapper { display: flex; flex-wrap: wrap; gap: 15px; }
.grz-badge { background: transparent; border: 1px solid var(--grz-color-border); padding: 10px 22px; border-radius: var(--grz-radius); font-size: 0.95rem; font-family: var(--grz-font-body); color: var(--grz-color-text); display: flex; align-items: center; gap: 6px; transition: var(--grz-transition); }
.grz-badge:hover { border-color: var(--grz-color-accent); color: var(--grz-color-primary); }
.grz-badge .grz-icon { color: var(--grz-color-accent); }

/* ----------------------------------------------------------------------------------
 * 4. MODALE DE CONTACT
 * ---------------------------------------------------------------------------------- */
.grz-modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(17, 17, 17, 0.85); z-index: 99999; justify-content: center; align-items: center; backdrop-filter: blur(5px); }
.grz-modal-content { background: #ffffff; padding: 40px; border-radius: var(--grz-radius); max-width: 500px; width: 90%; position: relative; border-top: 4px solid var(--grz-color-accent); box-shadow: var(--grz-shadow); animation: grzFadeIn 0.3s ease; }
@keyframes grzFadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
.grz-modal-close { position: absolute; top: 15px; right: 20px; font-size: 2rem; color: var(--grz-color-text); background: none; border: none; cursor: pointer; transition: var(--grz-transition); }
.grz-modal-close:hover { color: var(--grz-color-primary); }
.grz-form { display: flex; flex-direction: column; gap: 15px; }
.grz-form input[type="text"], .grz-form input[type="email"], .grz-form textarea { width: 100%; box-sizing: border-box; padding: 15px; border: 1px solid var(--grz-color-border); border-radius: var(--grz-radius); font-family: var(--grz-font-body); font-size: 1rem; background: var(--grz-color-light); }
.grz-form input:focus, .grz-form textarea:focus { outline: none; border-color: var(--grz-color-accent); }
.grz-form-checkboxes { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; margin-bottom: 10px; }
.grz-checkbox-label { display: flex; align-items: flex-start; gap: 10px; font-size: 0.85rem; color: var(--grz-color-text); cursor: pointer; line-height: 1.4; }
.grz-checkbox-label input { margin-top: 3px; }
.grz-highlight-optin { background: rgba(191, 161, 95, 0.1); padding: 10px; border-radius: var(--grz-radius); border: 1px solid var(--grz-color-accent); font-weight: bold; }

/* ----------------------------------------------------------------------------------
 * 5. AVIS PREMIUM
 * ---------------------------------------------------------------------------------- */
.grz-pro-reviews { margin-top: 60px; border-top: 2px solid var(--grz-color-border); padding-top: 40px; }
.grz-pro-reviews #comments { font-family: var(--grz-font-headings); color: var(--grz-color-secondary); font-size: 2rem; margin-bottom: 30px;}
.grz-pro-reviews .comment-list { list-style: none; padding: 0; margin-bottom: 40px; }
.grz-pro-reviews .comment-body { background: var(--grz-color-light); padding: 30px; border-radius: var(--grz-radius); margin-bottom: 25px; border: 1px solid var(--grz-color-border); border-left: 4px solid var(--grz-color-accent); box-shadow: var(--grz-shadow); }
.grz-pro-reviews .comment-meta { font-weight: 700; color: var(--grz-color-primary); margin-bottom: 5px; font-size: 1.1rem; display: flex; align-items: center; justify-content: space-between;}
.grz-pro-reviews .comment-metadata { font-size: 0.85rem; color: var(--grz-color-text); font-weight: 400; opacity: 0.8;}
.grz-pro-reviews .comment-content p { margin: 15px 0 0 0; font-family: var(--grz-font-body); font-size: 1.05rem; line-height: 1.7; }

.comment-respond { background: var(--grz-color-light); padding: 30px; border-radius: var(--grz-radius); border: 1px solid var(--grz-color-border); }
.comment-reply-title { font-family: var(--grz-font-headings); font-size: 2.2rem; color: var(--grz-color-primary); margin-bottom: 10px; display: block; border-bottom: 2px solid var(--grz-color-accent); padding-bottom: 5px;}

.grz-rating-field-wrapper { margin-bottom: 10px; display: flex; align-items: center; gap: 10px;}
.grz-rating-label { font-family: var(--grz-font-body) !important; font-weight: 700 !important; color: var(--grz-color-secondary) !important; font-size: 1.2rem !important; margin: 0 !important; line-height: 1 !important; padding: 0 !important;}
.grz-star-rating { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center;}
.grz-star-rating input { display: none !important; }
.grz-star-rating label { font-size: 2.8rem !important; line-height: 1 !important; color: var(--grz-color-border) !important; cursor: pointer; transition: color 0.2s; padding: 0 4px; margin: 0 !important; display: inline-block !important; }
.grz-star-rating input:checked ~ label, .grz-star-rating label:hover, .grz-star-rating label:hover ~ label { color: var(--grz-color-accent) !important; }
.grz-review-stars { margin-bottom: 5px; }
.grz-stars-active { color: var(--grz-color-accent); font-size: 1.2rem; letter-spacing: 2px;}

.comment-form p.comment-form-comment { margin-bottom: 8px !important; margin-top: 0 !important; padding: 0 !important; }
.comment-form textarea, .comment-form input[type="text"], .comment-form input[type="email"] { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; padding: 15px !important; border: 1px solid var(--grz-color-border) !important; border-radius: var(--grz-radius) !important; font-family: var(--grz-font-body) !important; font-size: 1rem !important; background: #ffffff !important; transition: var(--grz-transition) !important; margin: 0 !important;}
.comment-form textarea:focus, .comment-form input:focus { outline: none !important; border-color: var(--grz-color-accent) !important; box-shadow: 0 0 0 3px rgba(191, 161, 95, 0.1) !important;}

.grz-review-inputs-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 5px; width: 100%; box-sizing: border-box; }
.grz-review-inputs-row p { margin: 0 !important; padding: 0 !important; width: 100% !important; }

.grz-review-checkboxes { margin-top: 10px !important; margin-bottom: 15px !important; }

.form-submit { margin: 0 !important; width: 100%; padding: 0 !important; }
.form-submit input[type="submit"] { -webkit-appearance: none; appearance: none; display: block; width: 100% !important; box-sizing: border-box; font-family: var(--grz-font-body); background: var(--grz-color-accent) !important; color: #ffffff !important; border: none; height: 60px !important; line-height: 60px !important; padding: 0 !important; font-weight: bold; text-transform: uppercase; letter-spacing: 2px; font-size: 1.2rem; text-align: center; border-radius: var(--grz-radius); cursor: pointer; transition: var(--grz-transition); box-shadow: var(--grz-shadow); margin: 0 !important;}
.form-submit input[type="submit"]:hover { background: var(--grz-color-primary) !important; color: #ffffff !important; transform: translateY(-2px); }

/* ----------------------------------------------------------------------------------
 * 6. FICHE PRO : SIDEBAR & ACCORDÉON
 * ---------------------------------------------------------------------------------- */
.grz-sidebar-col { position: relative; }
.grz-pro-card { background: var(--grz-color-light); border: none; border-left: 4px solid var(--grz-color-accent); padding: 40px; box-shadow: var(--grz-shadow); position: sticky; top: 40px; }
.grz-pro-header { display: flex; justify-content: space-between; align-items: flex-start; flex-direction: column; margin-bottom: 30px; }
.grz-pro-title { font-size: 1.8rem; margin: 0 0 10px 0; font-style: italic; }

.grz-pro-actions { display: flex; flex-direction: column; gap: 15px; margin-bottom: 35px; }
.grz-btn { box-sizing: border-box; font-family: var(--grz-font-body); text-align: center; padding: 16px 20px; font-weight: 700; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; font-size: 0.9rem; transition: var(--grz-transition); display: block; cursor: pointer; }
.grz-btn-primary { background: var(--grz-color-primary); color: #ffffff !important; border: 1px solid var(--grz-color-primary); }
.grz-btn-primary:hover { background: #ffffff; color: var(--grz-color-primary) !important; }
.grz-btn-secondary { background: transparent; color: var(--grz-color-primary) !important; border: 1px solid var(--grz-color-border); }
.grz-btn-secondary:hover { border-color: var(--grz-color-accent); color: var(--grz-color-accent) !important; }
.grz-btn-outline { background: transparent; color: var(--grz-color-text) !important; border: 1px solid var(--grz-color-border); }
.grz-btn-outline:hover { border-color: var(--grz-color-accent); color: var(--grz-color-primary) !important; }

.grz-pro-hours { margin-bottom: 30px; }
.grz-pro-subtitle { font-family: var(--grz-font-headings); font-size: 1.4rem; margin: 0 0 15px 0; color: var(--grz-color-secondary); display: flex; align-items: center;}
.grz-hours-content { font-size: 1rem; color: var(--grz-color-text); }

.grz-pro-payments { margin-bottom: 30px; }
.grz-premium-accordion { background: transparent; }
.grz-premium-accordion summary { cursor: pointer; list-style: none; }
.grz-premium-accordion summary::-webkit-details-marker { display: none; }
.grz-premium-accordion[open] summary { border-color: var(--grz-color-accent); color: var(--grz-color-primary) !important; background: rgba(191, 161, 95, 0.05); }
.grz-payment-list { list-style: none; padding: 20px; margin: 0; font-size: 0.95rem; border: 1px solid var(--grz-color-border); border-top: none; border-radius: 0 0 var(--grz-radius) var(--grz-radius); background: #ffffff; animation: grzFadeIn 0.3s ease;}
.grz-payment-list li { margin-bottom: 10px; color: var(--grz-color-text); display: flex; align-items: center; }
.grz-payment-list li:last-child { margin-bottom: 0; }

.grz-pro-social { display: flex; gap: 10px; }
.grz-social-btn { flex: 1; text-align: center; background: transparent; border: 1px solid var(--grz-color-border); padding: 12px; text-decoration: none; color: var(--grz-color-primary); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; transition: var(--grz-transition); }
.grz-social-btn:hover { background: var(--grz-color-primary); color: #ffffff; border-color: var(--grz-color-primary); }

/* ----------------------------------------------------------------------------------
 * 7. SOCLE LÉGAL : BANDEAU COOKIES
 * ---------------------------------------------------------------------------------- */
.grz-cookie-banner { position: fixed; bottom: 30px; left: 30px; width: 400px; max-width: calc(100% - 60px); background: #ffffff; border: 1px solid var(--grz-color-border); border-left: 4px solid var(--grz-color-accent); border-radius: var(--grz-radius); box-shadow: var(--grz-shadow); z-index: 999999; display: flex; flex-direction: column; gap: 15px; padding: 25px; animation: grzFadeInUp 0.5s ease forwards; }
@keyframes grzFadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.grz-cookie-title { font-family: var(--grz-font-headings); font-size: 1.4rem; color: var(--grz-color-primary); margin: 0 0 10px 0; }
.grz-cookie-text { font-family: var(--grz-font-body); font-size: 0.95rem; color: var(--grz-color-text); line-height: 1.6; margin: 0; }
.grz-cookie-link { color: var(--grz-color-accent); font-weight: bold; text-decoration: none; }
.grz-cookie-link:hover { text-decoration: underline; }
.grz-cookie-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }

/* ----------------------------------------------------------------------------------
 * 8. OVERRIDES THEME ZEEN (HEADER NAV & SVG FIX)
 * ---------------------------------------------------------------------------------- */
/* Forcer la typographie sur les éléments natifs de Zeen */
body, .zeen-menu, .widget, .post-content {
    font-family: var(--grz-font-body) !important;
}

h1, h2, h3, h4, h5, h6, .site-title, .title, .widget-title, .zeen-menu .megamenu-title {
    font-family: var(--grz-font-headings) !important;
    font-weight: 700;
}

/* Header & Menu Principal Zeen */
#masthead, .site-header {
    border-bottom: 1px solid var(--grz-color-border);
    background-color: #ffffff;
}

.zeen-menu > li > a, .menu > li > a {
    text-transform: uppercase;
    font-size: 0.85rem !important;
    letter-spacing: 2px !important;
    color: var(--grz-color-primary) !important;
    transition: var(--grz-transition);
}

.zeen-menu > li > a:hover, .menu > li > a:hover {
    color: var(--grz-color-accent) !important;
}

/* --- LE BOUTON CTA ESPACE PRO (FORCE OVERRIDE ZEEN) --- */
/* Forcer le conteneur <li> à droite */
#wrap ul.menu li.grz-menu-cta,
ul.menu li.grz-menu-cta {
    float: right !important; /* Si le menu est en block standard */
    margin-left: auto !important; /* Si le menu est en flexbox */
}

/* Cible le <a> et tout <span> à l'intérieur pour écraser Zeen */
#wrap #masthead ul.menu li.grz-menu-cta > a,
#wrap .site-header ul.menu li.grz-menu-cta > a,
ul.menu li.grz-menu-cta > a,
ul.menu li.grz-menu-cta > a > span {
    background-color: var(--grz-color-accent) !important;
    color: #ffffff !important;
    padding: 10px 24px !important;
    border-radius: var(--grz-radius) !important;
    font-family: var(--grz-font-body) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    display: inline-block !important; /* Casse le comportement natif inline */
    line-height: normal !important;
    transition: var(--grz-transition) !important;
    border: none !important;
}

/* Effet Hover */
#wrap #masthead ul.menu li.grz-menu-cta > a:hover,
#wrap .site-header ul.menu li.grz-menu-cta > a:hover,
ul.menu li.grz-menu-cta > a:hover,
ul.menu li.grz-menu-cta > a:hover > span {
    background-color: var(--grz-color-primary) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
}

/* Forcer l'affichage des SVG (Header Zeen & Footer) */
.site-logo img, .grz-svg-logo {
    width: 100%;
    max-width: 220px; 
    height: auto !important;
    display: block;
}

/* ----------------------------------------------------------------------------------
 * 9. FOOTER "DARK-LUXURY" OVERRIDE
 * ---------------------------------------------------------------------------------- */
.footer-wrap, #colophon {
    background-color: var(--grz-color-primary) !important;
    color: var(--grz-color-light) !important;
    padding: 80px 0 40px 0 !important;
    border-top: 1px solid #222222;
    font-family: var(--grz-font-body) !important;
}

.grz-footer-desc {
    font-family: var(--grz-font-body);
    font-size: 0.95rem;
    line-height: 1.8;
    color: #999999;
    margin-bottom: 20px;
}

/* Titres des colonnes */
.grz-footer-title {
    font-family: var(--grz-font-headings) !important;
    font-size: 1.5rem !important;
    color: #ffffff !important;
    margin-bottom: 25px !important;
    position: relative;
    padding-bottom: 10px;
}

.grz-footer-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background-color: var(--grz-color-accent);
}

/* Liste des liens */
.grz-footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.grz-footer-list li {
    margin-bottom: 12px;
}

.grz-footer-list a {
    font-family: var(--grz-font-body);
    font-size: 0.95rem;
    color: #999999 !important;
    text-decoration: none;
    transition: var(--grz-transition);
    display: inline-block;
}

.grz-footer-list a:hover {
    color: var(--grz-color-accent) !important;
    transform: translateX(5px);
}

/* Formulaire Newsletter Premium */
.grz-footer-news-form {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #555555;
    padding-bottom: 5px;
    transition: var(--grz-transition);
}

.grz-footer-news-form:focus-within {
    border-color: var(--grz-color-accent);
}

.grz-footer-news-form input {
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    padding: 10px 0 !important;
    width: 100%;
    font-family: var(--grz-font-body);
    font-size: 1rem;
}

.grz-footer-news-form input:focus {
    outline: none !important;
    box-shadow: none !important;
}

.grz-footer-news-form input::placeholder {
    color: #666666;
}

.grz-footer-news-form button {
    background: transparent !important;
    border: none !important;
    color: var(--grz-color-accent) !important;
    padding: 10px;
    cursor: pointer;
    transition: var(--grz-transition);
}

.grz-footer-news-form button:hover {
    transform: translateX(3px);
}

/* ----------------------------------------------------------------------------------
 * 10. MEDIA QUERIES (MOBILE RESPONSIVE)
 * ---------------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .grz-main-grid { grid-template-columns: 1fr; gap: 40px; }
    .grz-pro-card { position: relative; top: 0; }
    .grz-review-inputs-row { grid-template-columns: 1fr; gap: 15px; } 
    .grz-cookie-banner { bottom: 0; left: 0; width: 100%; max-width: 100%; border-radius: 0; border-left: none; border-top: 4px solid var(--grz-color-accent); }
    
    #wrap ul.menu li.grz-menu-cta, ul.menu li.grz-menu-cta { 
        float: none !important; 
        margin-left: 0 !important; 
        margin-top: 15px !important; 
        display: block !important;
    }
}