/*
Theme Name:  Sogol Mirzaei
Theme URI:   https://sogolmirzaei.com
Description: Thème Sogol Mirzaei — Musicienne Târ & Sétâr
Author:      Alice Reveilliez
Author URI:  https://revalice.fr
Template:    revalice
Version:     1.0.0
Text Domain: revalice-sogol
*/

/* ── Police IranNastaliq ────────────────────────────────────── */
@font-face {
    font-family : 'IranNastaliq';
    src         : url('assets/fonts/IranNastaliq-Regular.ttf') format('truetype');
    font-weight : normal;
    font-style  : normal;
    font-display: swap;
}

/* ══════════════════════════════════════════════════════════════
   1. VARIABLES
   ══════════════════════════════════════════════════════════════ */
:root {
    --sogol-terracotta : #A0453A;
    --sogol-beige      : #F5F0E8;
    --sogol-bronze     : #98632a;
    --sogol-nav        : #4e3215;
    --sogol-fonce      : #99642A;
    --sogol-creme      : rgba(245,240,232,0.92);
    --sogol-sable	   : #F9EFDD;
    --container-width  : 1140px;
    --container-pad    : 30px;
}

/* ══════════════════════════════════════════════════════════════
   2. POLICES — Kage
   ══════════════════════════════════════════════════════════════ */
@font-face {
    font-family : 'Kage';
    src         : url('assets/fonts/Kage-Regular.otf') format('opentype'),
                  url('assets/fonts/Kage-Normal.otf') format('opentype'),
                  url('assets/fonts/Kage.otf') format('opentype');
    font-weight : 400;
    font-style  : normal;
    font-display: swap;
}
@font-face {
    font-family : 'Kage';
    src         : url('assets/fonts/Kage-Light.otf') format('opentype'),
                  url('assets/fonts/Kage-ExtraLight.otf') format('opentype'),
                  url('assets/fonts/Kage-UltraLight.otf') format('opentype');
    font-weight : 100 300;
    font-style  : normal;
    font-display: swap;
}
@font-face {
    font-family : 'Kage';
    src         : url('assets/fonts/Kage-Medium.otf') format('opentype');
    font-weight : 500;
    font-style  : normal;
    font-display: swap;
}
@font-face {
    font-family : 'Kage';
    src         : url('assets/fonts/Kage-Bold.otf') format('opentype');
    font-weight : 700;
    font-style  : normal;
    font-display: swap;
}

/* ── Police persane — Vazirmatn (Google Fonts) ───────────── */
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400&display=swap');

/* ══════════════════════════════════════════════════════════════
   3. BASE GLOBALE
   ══════════════════════════════════════════════════════════════ */
html { scroll-behavior: smooth; }

body {
    font-family    : 'Lato', sans-serif !important;
    font-weight    : 400 !important;
    font-size      : 17px !important;
    line-height    : 1.65 !important;
    color          : var(--sogol-fonce) !important;
    background     : var(--sogol-beige) !important;
    -webkit-font-smoothing: antialiased;
}

/* Titres — Kage */
h1, h2, h3, h4, h5, h6, .alt-font {
    font-family   : 'Kage', serif !important;
    font-weight   : 400 !important;
    line-height   : 1.15 !important;
    color         : var(--sogol-fonce);
    letter-spacing: 0 !important;
    margin-top    : 0 !important;
}

h1 { font-size: clamp(3rem,   6vw,   5.5rem) !important; }
h2 { font-size: clamp(2rem,   4.5vw, 3.5rem) !important; }
h3 { font-size: clamp(1.5rem, 3vw,   2.4rem) !important; }
h4 { font-size: clamp(1.2rem, 2vw,   2rem)   !important; }

/* Titres et textes blancs sur fonds colorés/sombres */
.bloc-hero-accueil h1, .bloc-hero-accueil h2, .bloc-hero-accueil p,
.bloc-bandeau-titre h1, .bloc-bandeau-titre h2,
.bg-sogol-terracotta h1, .bg-sogol-terracotta h2,
.bg-sogol-terracotta h3, .bg-sogol-terracotta h4,
.bg-sogol-terracotta p,  .bg-sogol-terracotta li, .bg-sogol-terracotta span,
.bg-sogol-bronze h1, .bg-sogol-bronze h2, .bg-sogol-bronze h3, .bg-sogol-bronze p,
.bg-sogol-or h1, .bg-sogol-or h2, .bg-sogol-or h3, .bg-sogol-or p,
.bg-sogol-nav h1, .bg-sogol-nav h2, .bg-sogol-nav h3, .bg-sogol-nav p { color: var(--sogol-beige) !important; }

a { color: var(--sogol-terracotta); transition: color 0.3s ease; }
a:hover { color: var(--sogol-bronze); }

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

/* ══════════════════════════════════════════════════════════════
   4. CONTAINER — Alignement maquette
   ══════════════════════════════════════════════════════════════ */
.container {
    max-width     : var(--container-width) !important;
    padding-left  : var(--container-pad) !important;
    padding-right : var(--container-pad) !important;
}

.bloc-hero-accueil,
.bloc-projets-galerie,
.bloc-albums-slider .swiper-outer {
    width: 100%;
}

/* ══════════════════════════════════════════════════════════════
   5. COULEURS DE FOND
   ══════════════════════════════════════════════════════════════ */
.bg-sogol-terracotta { background-color: var(--sogol-terracotta); }
.bg-sogol-beige      { background-color: var(--sogol-beige); }
.bg-sogol-bronze     { background-color: var(--sogol-bronze); }
.bg-sogol-or         { background-color: var(--sogol-bronze); }
.bg-sogol-nav        { background-color: var(--sogol-nav); }
.bg-sogol-sable 	 { background-color:  var(--sogol-sable)}

.bg-sogol-terracotta a:hover { color: rgba(255,255,255,0.75) !important; }
.bg-sogol-nav * { color: var(--sogol-beige) !important; }
.bg-black *, .bg-extra-dark-gray * { color: rgba(255,255,255,0.88) !important; }

.text-sogol-terracotta { color: var(--sogol-terracotta) !important; }
.text-sogol-bronze     { color: var(--sogol-bronze) !important; }

/* ══════════════════════════════════════════════════════════════
   6. NAVIGATION
   ══════════════════════════════════════════════════════════════ */
header.sticky,
header.header-appear { background: rgba(78,50,21,0.97) !important; }


/* Menu toujours visible — annuler hide-on-scroll Litho */
.sticky .header-reverse-scroll,
nav.header-always-fixed-scroll {
    -webkit-transform : none !important;
    transform         : none !important;
    -webkit-transition: none !important;
    transition        : none !important;
}
.wp-child-theme-revalice-sogol .navbar-collapse.show a.nav-link {color:var(--sogol-bronze) !important;}
.sticky .navbar.header-dark .navbar-nav .nav-link, .navbar-dark .navbar-toggler-line {color:var(--sogol-bronze) !important;}
.navbar.navbar-dark .navbar-nav .nav-link.active{text-decoration: underline !important;}


/* Sur home : fond semi-transparent foncé au-dessus du hero, opaque après scroll */
header .navbar.bg-transparent.sticky { background: rgba(78,50,21,0.95) !important; }

/* ── Navbar foncée (pages intérieures, fond #4e3215) ────── */
header nav.bg-sogol-nav {
    background-color : rgba(78, 50, 21, 0.74) !important;
}
header nav.bg-sogol-nav .navbar-nav .nav-link,
header nav.bg-sogol-nav .nav-reseaux a,
header nav.bg-sogol-nav .nav-reseau-icon {
    color : var(--sogol-beige) !important;
}
header nav.bg-sogol-nav .navbar-brand span { color: var(--sogol-beige) !important; }

/* ── Navbar claire (home transparent avant scroll) ──────── */
header nav.bg-transparent .navbar-nav .nav-link,
header nav.bg-transparent .nav-reseaux a,
header nav.bg-transparent .nav-reseau-icon {
    color : var(--sogol-beige) !important;
}

/* ── Home avant scroll — transparent, liens beige ───────── */
body.home header:not(.sticky):not(.header-appear) .revalice-nav {
    background-color : transparent !important;
    box-shadow       : none !important;
}
body.home header:not(.sticky):not(.header-appear) .revalice-nav .navbar-nav .nav-link,
body.home header:not(.sticky):not(.header-appear) .revalice-nav .nav-reseau-icon,
body.home header:not(.sticky):not(.header-appear) .revalice-nav .navbar-brand,
body.home header:not(.sticky):not(.header-appear) .revalice-nav .navbar-brand span {
    color : var(--sogol-beige) !important;
}

/* ── Sticky — fond crème (surcharge Litho #000 et #fff) ─── */
.sticky .revalice-nav.header-dark,
.sticky .revalice-nav.header-light,
.sticky .revalice-nav,
.header-appear .revalice-nav.header-dark,
.header-appear .revalice-nav.header-light,
.header-appear .revalice-nav {
    background-color : var(--sogol-sable) !important;
    box-shadow       : 0 2px 20px rgba(78,50,21,0.12) !important;
}
header.sticky .navbar .nav-reseaux a,
header.sticky .navbar .nav-reseau-icon,
header.header-appear .navbar .nav-reseaux a,
header.header-appear .navbar .nav-reseau-icon {
    color : var(--sogol-bronze) !important;
}
header.sticky .navbar.header-dark .navbar-brand span,
header.header-appear .navbar.header-dark .navbar-brand span {
    color : var(--sogol-bronze) !important;
}

/* ── Active — souligné couleur contextuelle ─────────────── */
/* Fond foncé → soulignement beige */
header nav.bg-sogol-nav .navbar-nav .nav-link.active,
header nav.bg-sogol-nav .navbar-nav li.active > .nav-link,
header nav.bg-transparent .navbar-nav .nav-link.active,
header nav.bg-transparent .navbar-nav li.active > .nav-link {
    color                 : var(--sogol-beige) !important;
    text-decoration       : underline !important;
    text-underline-offset : 4px !important;
    text-decoration-color : var(--sogol-beige) !important;
}
/* Fond clair (sticky pages intérieures) → soulignement bronze */
header.sticky nav.header-light .navbar-nav .nav-link.active,
header.sticky nav.header-light .navbar-nav li.active > .nav-link,
header.header-appear nav.header-light .navbar-nav .nav-link.active,
header.header-appear nav.header-light .navbar-nav li.active > .nav-link {
    color                 : var(--sogol-bronze) !important;
    text-decoration       : underline !important;
    text-underline-offset : 4px !important;
    text-decoration-color : var(--sogol-bronze) !important;
}

/* Nav links — style typo */
.navbar-nav .nav-link {
    font-family    : 'Lato', sans-serif !important;
    font-weight    : 400 !important;
    font-size      : 16px !important;
    letter-spacing : 0.05em !important;
    text-transform : none !important;
}
.navbar-nav .nav-link:hover { opacity: 0.75; }

/* Fond foncé/transparent → liens beige */
header nav.bg-sogol-nav .navbar-nav .nav-link,
header nav.bg-transparent .navbar-nav .nav-link {
    color : var(--sogol-beige) !important;
}
/* Sticky → liens bronze */
header.sticky .navbar .navbar-nav .nav-link,
header.header-appear .navbar .navbar-nav .nav-link,
header.sticky .revalice-nav .navbar-nav .nav-link,
header.header-appear .revalice-nav .navbar-nav .nav-link,
header.sticky .navbar.navbar-dark .navbar-nav .nav-link,
header.header-appear .navbar.navbar-dark .navbar-nav .nav-link,
header.sticky .navbar .navbar-brand,
header.header-appear .navbar .navbar-brand,
header.sticky .navbar .navbar-brand span,
header.header-appear .navbar .navbar-brand span,
header.sticky .navbar.navbar-dark .navbar-brand,
header.header-appear .navbar.navbar-dark .navbar-brand,
header.sticky .navbar.navbar-dark .navbar-brand span,
header.header-appear .navbar.navbar-dark .navbar-brand span,
.sticky .revalice-nav .navbar-nav .nav-link,
.header-appear .revalice-nav .navbar-nav .nav-link {
    color : var(--sogol-bronze) !important;
}


/* ── Icônes réseaux — cercles ──────────────────────────────── */
.nav-reseau-icon {
    width           : 34px;
    height          : 34px;
    border-radius   : 50%;
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    font-size       : 0.95rem;
    transition      : opacity 0.2s, background 0.2s;
}
.nav-reseau-icon:hover { opacity: 0.85; }

/* Fond foncé / transparent → cercle beige semi-transparent */
header nav.bg-sogol-nav .nav-reseau-icon,
header nav.bg-transparent .nav-reseau-icon {
    background : rgba(245, 240, 232, 0.2) !important;
    color      : var(--sogol-beige) !important;
}

/* Sticky → cercle bronze semi-transparent */
header.sticky .navbar .nav-reseau-icon,
header.header-appear .navbar .nav-reseau-icon {
    background : rgba(152, 99, 42, 0.15) !important;
    color      : var(--sogol-bronze) !important;
}
.header-icon a,
.social-icon a {
    width          : 30px;
    height         : 30px;
    line-height    : 30px;
    border-radius  : 50%;
    background     : rgba(255,255,255,0.15);
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    transition     : background 0.3s ease;
    color          : var(--sogol-beige) !important;
    font-size      : 12px;
}
.header-icon a:hover,
.social-icon a:hover { background: rgba(255,255,255,0.35); }

/* ══════════════════════════════════════════════════════════════
   6b. PAGES INTÉRIEURES — compensation navbar fixe
   ══════════════════════════════════════════════════════════════ */

/* La classe top-space sur la navbar déclenche Litho JS
   mais ce CSS sert de filet immédiat dès le rendu initial */
body:not(.home) {
    padding-top : 80px;
}
@media (max-width: 991px) {
    body:not(.home) { padding-top: 65px; }
}

/* ══════════════════════════════════════════════════════════════
   7. HERO ACCUEIL
   ══════════════════════════════════════════════════════════════ */
.bloc-hero-accueil {
    min-height         : 100vh;
    background-size    : cover;
    background-position: center;
    position           : relative;
}
.bloc-hero-accueil h1 {
    font-family   : 'Kage', serif;
    font-weight   : 400;
    font-size     : clamp(3rem, 6vw, 5.5rem);
    line-height   : 1.05;
    color         : var(--sogol-beige); !important;
    letter-spacing: 1px;
}
.bloc-hero-accueil p {
    font-size      : clamp(0.9rem, 1.8vw, 1.2rem);
    letter-spacing : 3px;
    color          : rgba(255,255,255,0.88) !important;
    font-weight    : 300;
}

/* ══════════════════════════════════════════════════════════════
   8. INTRO TEXTE
   ══════════════════════════════════════════════════════════════ */
.intro-texte-wrap {
    font-style  : italic;
    font-weight : 300;
    line-height : 1.75;
    color       : var(--sogol-fonce);
}
.intro-texte-small  { font-size: 1rem; }
.intro-texte-medium { font-size: clamp(1.2rem, 2.5vw, 1.6rem); }
.intro-texte-large  { font-size: clamp(1.4rem, 3vw,   2rem);   }
.intro-texte-xlarge { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
.intro-texte-wrap p { margin-bottom: 0; }

/* ══════════════════════════════════════════════════════════════
   9. ALBUMS SLIDER
   ══════════════════════════════════════════════════════════════ */
.bloc-albums-slider h2 {
    font-family  : 'Kage', serif;
    font-weight  : 400;
    font-size    : clamp(2rem, 4vw, 3rem);
    text-align   : center;
    margin-bottom: 2.5rem;
}
.revalice-albums-swiper .swiper-slide { text-align: center; }
.revalice-albums-swiper img {
    width        : 100%;
    aspect-ratio : 1;
    object-fit   : cover;
    display      : block;
    transition   : transform 0.4s ease;
}
.revalice-albums-swiper .swiper-slide:hover img { transform: scale(1.03); }
.album-overlay {
    position        : absolute;
    inset           : 0;
    background      : #f9efdde6;
    opacity         : 0;
    transition      : opacity 0.3s ease;
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    align-items     : center;
    text-align      : center;
    padding         : 20px;
}
.album-card:hover .album-overlay { opacity: 1; }
.revalice-albums-swiper {
    padding-bottom : 0 !important;
    height         : auto !important;
    overflow       : visible !important;
}
.albums-swiper-outer {
    position : relative;
}
.albums-pagination {
    margin-top : 16px;
    text-align : center;
}
.album-overlay h3 {
    font-family : 'Lato', sans-serif;
    font-size   : 1.1rem;
    font-weight : 700;
    color       : var(--sogol-bronze);
    margin      : 0 0 6px;
}
.album-overlay span {
    font-family : 'Lato', sans-serif;
    font-size   : 13px;
    color       : #5a4a3a;
}
.swiper-pagination-bullet-active { background: var(--sogol-terracotta) !important; }

/* ══════════════════════════════════════════════════════════════
   10. PROJETS / GALERIE
   ══════════════════════════════════════════════════════════════ */
.bloc-projets-galerie .demi-bloc {
    min-height         : 320px;
    display            : flex;
    align-items        : center;
    justify-content    : center;
    position           : relative;
    overflow           : hidden;
    background-size    : cover;
    background-position: center;
    cursor             : pointer;
    transition         : filter 0.3s ease;
}
.bloc-projets-galerie .demi-bloc:hover { filter: brightness(1.05); }
.bloc-projets-galerie .demi-bloc-inner {
    position  : relative;
    z-index   : 2;
    text-align: center;
    padding   : 2rem;
}
.bloc-projets-galerie h3 {
    font-family  : 'Kage', serif;
    font-size    : clamp(2rem, 3.5vw, 3rem);
    font-weight  : 400;
    color        : var(--sogol-beige); !important;
    margin-bottom: 1.5rem;
}

.btn-sogol-blanc {
    display        : inline-block;
    border         : 2px solid var(--sogol-beige);
    color          : var(--sogol-beige) !important;
    background     : transparent;
    border-radius  : 50px;
    padding        : 14px 42px;
    font-family    : 'Kage', serif;
    font-size      : clamp(1.1rem, 2vw, 1.5rem);
    font-weight    : 400;
    letter-spacing : 0.04em;
    transition     : all 0.3s ease;
    text-decoration: none;
    line-height    : 1.1;
}
.btn-sogol-blanc:hover { background: var(--sogol-beige); color: var(--sogol-terracotta) !important; }

.btn-sogol-solid {
    display        : inline-block;
    background     : var(--sogol-terracotta);
    border         : 2px solid var(--sogol-terracotta);
    color          : var(--sogol-beige); !important;
    border-radius  : 50px;
    padding        : 7px 22px;
    font-family    : 'Menlo', monospace;
    font-size      : 15px;
    font-weight    : 700;
    letter-spacing : 0.05em;
    transition     : all 0.3s ease;
    text-decoration: none;
}
.btn-sogol-solid:hover { background: transparent; color: var(--sogol-terracotta) !important; }

/* ── Projets/Galerie — boutons grande taille typo Kage ────────*/
.bloc-projets-galerie .btn-sogol {
    font-family    : 'Kage', serif !important;
    font-size      : clamp(1.1rem, 2vw, 1.5rem) !important;
    font-weight    : 400 !important;
    letter-spacing : 0.04em !important;
    padding        : 14px 42px !important;
    line-height    : 1.1 !important;
}

/* ══════════════════════════════════════════════════════════════
   11. AGENDA
   ══════════════════════════════════════════════════════════════ */
.agenda-ligne { border-bottom: 1px solid rgba(0,0,0,0.08); }
.agenda-ligne:last-child { border-bottom: none; }

/* ══════════════════════════════════════════════════════════════
   12. EQUIPE CARDS
   ══════════════════════════════════════════════════════════════ */
.bloc-equipe-cards .membre-card { text-align: center; padding: 1rem; }
.bloc-equipe-cards .membre-photo {
    width        : 180px;
    height       : 180px;
    border-radius: 50%;
    object-fit   : cover;
    margin       : 0 auto 1.2rem;
    border       : 4px solid rgba(255,255,255,0.3);
}
.bloc-equipe-cards .membre-nom {
    font-family  : 'Kage', serif;
    font-size    : clamp(1.3rem, 2.5vw, 1.8rem);
    color        : var(--sogol-beige); !important;
    margin-bottom: 0.8rem;
}
.bloc-equipe-cards .membre-texte {
    font-size  : 13px;
    line-height: 1.7;
    color      : rgba(255,255,255,0.8);
}

/* ══════════════════════════════════════════════════════════════
   13. BANDEAU TITRE
   ══════════════════════════════════════════════════════════════ */
/*
.bloc-bandeau-titre {
    padding   : 3rem 0 2rem;
    background: var(--sogol-beige);
}
.bloc-bandeau-titre h1 {
    font-family: 'Kage', serif;
    font-size  : clamp(2rem, 4vw, 3.5rem);
    color      : var(--sogol-terracotta) !important;
    font-weight: 400;
    margin     : 0;
}
*/

/* ══════════════════════════════════════════════════════════════
   14. FOOTER
   ══════════════════════════════════════════════════════════════ */
footer {
    background: var(--sogol-beige);
    padding   : 3rem 0 1.5rem;
    border-top: 1px solid rgba(0,0,0,0.06);
}
footer .footer-menu a,
footer .footer-menu a.nav-link,
footer .footer-nav a,
footer .footer-nav a.nav-link {
    font-family    : 'Menlo', monospace !important;
    font-size      : 13px !important;
    font-weight    : 300 !important;
    color          : var(--sogol-terracotta) !important;
    text-decoration: none !important;
    display        : block !important;
    line-height    : 2 !important;
    transition     : color 0.3s ease !important;
    opacity        : 1 !important;
}
footer .footer-menu a:hover,
footer .footer-menu a.nav-link:hover,
footer .footer-nav a:hover { 
    color     : var(--sogol-bronze) !important;
    opacity   : 1 !important;
}
footer .footer-menu li.active > a,
footer .footer-menu li.active > a.nav-link,
footer .footer-menu li.current-menu-item > a,
footer .footer-menu li.current-menu-item > a.nav-link {
    color           : var(--sogol-terracotta) !important;
    text-decoration : underline !important;
    font-weight     : 600 !important;
    opacity         : 1 !important;
}

.btn-presse-kit {
    display        : inline-block;
    background     : var(--sogol-terracotta);
    color          : var(--sogol-beige) !important;
    border-radius  : 50px;
    padding        : 8px 22px;
    font-size      : 12px;
    font-family    : 'Kage', serif;
    letter-spacing : 0.05em;
    text-decoration: none;
    transition     : all 0.3s ease;
}
.btn-presse-kit:hover { background: var(--sogol-bronze); color: var(--sogol-beige); !important; }

section.half-section {padding: 50px 0 !important;}

footer .footer-social a,
footer .reseau-footer-icon {
    width           : 36px;
    height          : 36px;
    border-radius   : 50%;
    background      : var(--sogol-terracotta);
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    color           : var(--sogol-beige) !important;
    font-size       : 14px;
    transition      : background 0.3s ease, opacity 0.3s ease;
    margin-left     : 6px;
}
footer .footer-social a:hover,
footer .reseau-footer-icon:hover {
    background : var(--sogol-fonce) !important;
    color      : var(--sogol-beige) !important;
}

footer .footer-copy {
    font-size  : 11px;
    color      : #aaa;
    text-align : center;
    margin-top : 2rem;
    border-top : 1px solid rgba(0,0,0,0.06);
    padding-top: 1rem;
}

/* ══════════════════════════════════════════════════════════════
   15. GALERIE VIDÉOS
   ══════════════════════════════════════════════════════════════ */
.video-embed-wrap {
    position     : relative;
    padding-top  : 56.25%;
    border-radius: 3px;
    overflow     : hidden;
}
.video-embed-wrap iframe {
    position: absolute;
    inset   : 0;
    width   : 100%;
    height  : 100%;
    border  : none;
}

/* ══════════════════════════════════════════════════════════════
   16. BLOCS GUTENBERG NATIFS
   ══════════════════════════════════════════════════════════════ */
.entry-content > .wp-block-group,
.entry-content > .wp-block-columns,
.entry-content > .wp-block-cover { margin-left: auto; margin-right: auto; }

.wp-block-group .wp-block-group__inner-container {
    max-width    : var(--container-width);
    margin       : 0 auto;
    padding-left : var(--container-pad);
    padding-right: var(--container-pad);
}

.wp-block-group.alignfull,
.wp-block-cover.alignfull { padding-left: 0; padding-right: 0; }
.wp-block-group.alignfull > .wp-block-group__inner-container {
    max-width    : var(--container-width);
    margin       : 0 auto;
    padding-left : var(--container-pad);
    padding-right: var(--container-pad);
}

.wp-block-heading { font-family: 'Kage', serif; font-weight: 400; line-height: 1.15; }

/* Paragraphes — alignés avec le body */
.wp-block-paragraph {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size  : 17px;
    line-height: 1.65;
}

.wp-block-columns { gap: 2rem; align-items: center; }
.wp-block-column > * + * { margin-top: 1rem; }
.wp-block-column > *:first-child { margin-top: 0; }

.wp-block-gallery { gap: 10px !important; }
.wp-block-gallery .wp-block-image { overflow: hidden; border-radius: 2px; }
.wp-block-gallery .wp-block-image img { transition: transform 0.4s ease; object-fit: cover; }
.wp-block-gallery .wp-block-image:hover img { transform: scale(1.04); }

/* voir section Styles de blocs Gutenberg — Boutons */

/* ══════════════════════════════════════════════════════════════
   STYLES DE BLOCS GUTENBERG — BOUTONS
   Basé sur le système Litho (.btn + modificateurs)
   ══════════════════════════════════════════════════════════════ */

/* Base commune tous boutons */
.wp-block-button .wp-block-button__link {
    font-family    : 'Lato', sans-serif !important;
    font-size      : 12px !important;
    font-weight    : 400 !important;
    letter-spacing : 0.08em !important;
    border-radius  : 50px !important;
    padding        : 10px 32px !important;
    transition     : all 0.3s ease !important;
    text-decoration: none !important;
    display        : inline-block !important;
    border         : 2px solid transparent !important;
}

/* Plein terracotta (défaut) */
.wp-block-button:not([class*="is-style"]) .wp-block-button__link,
.wp-block-button.is-style-sogol-plein-terracotta .wp-block-button__link {
    background  : var(--sogol-terracotta) !important;
    border-color: var(--sogol-terracotta) !important;
    color       : var(--sogol-beige); !important;
}
.wp-block-button:not([class*="is-style"]) .wp-block-button__link:hover,
.wp-block-button.is-style-sogol-plein-terracotta .wp-block-button__link:hover {
    background  : transparent !important;
    color       : var(--sogol-terracotta) !important;
}

/* Contour terracotta */
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-sogol-contour-terracotta .wp-block-button__link {
    background  : transparent !important;
    border-color: var(--sogol-terracotta) !important;
    color       : var(--sogol-terracotta) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-sogol-contour-terracotta .wp-block-button__link:hover {
    background  : var(--sogol-terracotta) !important;
    color       : var(--sogol-beige); !important;
}

/* Plein bronze */
.wp-block-button.is-style-sogol-plein-bronze .wp-block-button__link {
    background  : var(--sogol-bronze) !important;
    border-color: var(--sogol-bronze) !important;
    color       : var(--sogol-beige); !important;
}
.wp-block-button.is-style-sogol-plein-bronze .wp-block-button__link:hover {
    background  : transparent !important;
    color       : var(--sogol-bronze) !important;
}

/* Transparent blanc (pour fonds sombres) */
.wp-block-button.is-style-sogol-transparent-blanc .wp-block-button__link {
    background  : transparent !important;
    border-color: var(--sogol-beige); !important;
    color       : var(--sogol-beige); !important;
}
.wp-block-button.is-style-sogol-transparent-blanc .wp-block-button__link:hover {
    background  : var(--sogol-beige); !important;
    color       : var(--sogol-terracotta) !important;
}

/* Contour blanc automatique sur fonds colorés */
.bg-sogol-terracotta .wp-block-button.is-style-outline .wp-block-button__link,
.bg-sogol-bronze .wp-block-button.is-style-outline .wp-block-button__link,
.bg-sogol-or .wp-block-button.is-style-outline .wp-block-button__link,
.bg-sogol-nav .wp-block-button.is-style-outline .wp-block-button__link {
    border-color: var(--sogol-beige); !important;
    color       : var(--sogol-beige); !important;
    background  : transparent !important;
}
.bg-sogol-terracotta .wp-block-button.is-style-outline .wp-block-button__link:hover,
.bg-sogol-bronze .wp-block-button.is-style-outline .wp-block-button__link:hover,
.bg-sogol-or .wp-block-button.is-style-outline .wp-block-button__link:hover,
.bg-sogol-nav .wp-block-button.is-style-outline .wp-block-button__link:hover {
    background : var(--sogol-beige); !important;
    color      : var(--sogol-terracotta) !important;
}

/* Taille petit — btn-small Litho */
.wp-block-button.is-style-sogol-petit .wp-block-button__link {
    font-size: 11px !important;
    padding  : 8px 22px !important;
}

/* Taille grand — btn-large Litho */
.wp-block-button.is-style-sogol-grand .wp-block-button__link {
    font-size: 13px !important;
    padding  : 12px 32px !important;
}

/* border-radius 50px défini en base */

.wp-block-separator { border-top: 1px solid rgba(0,0,0,0.1); }

.wp-block-quote {
    border-left: 3px solid var(--sogol-terracotta);
    padding    : 0.5rem 0 0.5rem 1.5rem;
    margin     : 1.5rem 0;
}
.wp-block-quote p {
    font-family: 'Kage', serif;
    font-style : italic;
    font-size  : clamp(1.1rem, 2.2vw, 1.5rem);
}

.wp-block-image img { border-radius: 2px; }

.wp-block-group { padding: 5% 0; }
.wp-block-group.padding-petit { padding: 2% 0; }
.wp-block-group.padding-grand { padding: 8% 0; }

.wp-block-group.is-style-sogol-fond-beige      { background: var(--sogol-beige); }
.wp-block-group.is-style-sogol-fond-terracotta { background: var(--sogol-terracotta); }
.wp-block-group.is-style-sogol-fond-terracotta *:not(input):not(textarea):not(select) { color: var(--sogol-beige); }
.wp-block-group.is-style-sogol-fond-bronze     { background: var(--sogol-bronze); }
.wp-block-group.is-style-sogol-fond-bronze *:not(input):not(textarea):not(select)   { color: var(--sogol-beige); }
.wp-block-group.is-style-sogol-fond-fonce      { background: var(--sogol-nav); }
.wp-block-group.is-style-sogol-fond-fonce *:not(input):not(textarea):not(select)    { color: rgba(255,255,255,0.88); }
.wp-block-group.is-style-sogol-espacement-large { padding: 8% 0; }
.wp-block-group.is-style-sogol-espacement-petit { padding: 2% 0; }
.wp-block-columns.is-style-sogol-centre-vertical,
.wp-block-columns.is-style-centre-vertical { align-items: center !important; }

/* ══════════════════════════════════════════════════════════════
   17. LIGHTBOX
   ══════════════════════════════════════════════════════════════ */
.sogol-lightbox-overlay {
    position       : fixed;
    inset          : 0;
    background     : rgba(0,0,0,0.92);
    z-index        : 9999;
    display        : flex;
    align-items    : center;
    justify-content: center;
    animation      : fadeInLb 0.2s ease;
}
.sogol-lightbox-overlay img { max-width: 90vw; max-height: 88vh; object-fit: contain; }
.sogol-lightbox-close {
    position   : absolute;
    top        : 20px;
    right      : 28px;
    color      : var(--sogol-beige);;
    font-size  : 2.5rem;
    cursor     : pointer;
    opacity    : 0.7;
    line-height: 1;
}
.sogol-lightbox-close:hover { opacity: 1; }
.sogol-lightbox-prev,
.sogol-lightbox-next {
    position   : absolute;
    top        : 50%;
    transform  : translateY(-50%);
    color      : var(--sogol-beige);;
    font-size  : 3rem;
    cursor     : pointer;
    opacity    : 0.5;
    padding    : 20px;
    user-select: none;
}
.sogol-lightbox-prev:hover,
.sogol-lightbox-next:hover { opacity: 1; }
.sogol-lightbox-prev { left: 10px; }
.sogol-lightbox-next { right: 10px; }
@keyframes fadeInLb { from { opacity: 0; } to { opacity: 1; } }

/* ══════════════════════════════════════════════════════════════
   18. UTILITAIRES
   ══════════════════════════════════════════════════════════════ */
.text-large  { font-size: clamp(1.1rem, 2vw,   1.4rem) !important; }
.text-xlarge { font-size: clamp(1.3rem, 2.5vw, 1.8rem) !important; }
.text-small  { font-size: 13px !important; line-height: 1.7; }
.text-xsmall { font-size: 11px !important; }

/* ══════════════════════════════════════════════════════════════
   19. RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    .container { --container-pad: 20px; }
    .bloc-projets-galerie .demi-bloc { min-height: 240px; }
}
@media (max-width: 767px) {
    .bloc-hero-accueil h1 { font-size: clamp(2.2rem, 8vw, 3.5rem); }
    .wp-block-columns { flex-direction: column; }
    .wp-block-column  { width: 100% !important; min-width: 100% !important; }
    footer .footer-nav { text-align: center; }
    .sogol-lightbox-prev { left: 2px; padding: 10px; }
    .sogol-lightbox-next { right: 2px; padding: 10px; }
}

/* Fix container dans groupe */
.wp-block-group > .container {
    max-width    : var(--container-width) !important;
    width        : 100% !important;
    margin-left  : auto !important;
    margin-right : auto !important;
}

.alt-font, .alt-font * { font-family: 'Kage', serif !important; }

/* Override Litho media queries sur titres */
@media (min-width: 1200px) {
    h1 { font-size: clamp(3rem,   6vw,   4.5rem) !important; }
    h2 { font-size: clamp(2rem,   4.5vw, 3.7rem) !important; }
    h3 { font-size: clamp(1.5rem, 3vw,   2.5rem) !important; }
    h4 { font-size: clamp(1.2rem, 2vw,   2rem)   !important; }
}
@media (max-width: 1199px) {
    h1 { font-size: clamp(2.5rem, 5.5vw, 4.5rem) !important; }
    h2 { font-size: clamp(1.8rem, 4vw,   3rem)   !important; }
    h3 { font-size: clamp(1.4rem, 3vw,   2.2rem) !important; }
    h4 { font-size: clamp(1.1rem, 2vw,   1.8rem) !important; }
}
@media (max-width: 767px) {
    h1 { font-size: clamp(2.2rem, 8vw, 3.5rem) !important; }
    h2 { font-size: clamp(1.7rem, 6vw, 2.6rem) !important; }
    h3 { font-size: clamp(1.3rem, 5vw, 2rem)   !important; }
    h4 { font-size: clamp(1.1rem, 4vw, 1.6rem) !important; }
}

/* ══════════════════════════════════════════════════════════════
   BLOC BOUTON — Thème (ACF)
   ══════════════════════════════════════════════════════════════ */
.btn-sogol {
    display        : inline-block;
    font-family    : 'Menlo', monospace;
    font-size      : 15px;
    font-weight    : 700;
    letter-spacing : 0.08em;
    text-decoration: none;
    border         : 2px solid transparent;
    transition     : all 0.3s ease;
    cursor         : pointer;
    line-height    : 1;
    padding        : 10px 28px;
}
.btn-sogol.btn-sogol-rounded { border-radius: 50px; }
.btn-sogol.btn-sogol-sm { font-size: 11px; padding: 8px 22px; }
.btn-sogol.btn-sogol-lg { font-size: 13px; padding: 13px 36px; }

/* Plein terracotta */
.btn-sogol.btn-sogol-plein-terracotta { background: var(--sogol-terracotta); border-color: var(--sogol-terracotta); color: var(--sogol-beige);; }
.btn-sogol.btn-sogol-plein-terracotta:hover { background: transparent; color: var(--sogol-terracotta); }

/* Plein bronze */
.btn-sogol.btn-sogol-plein-bronze { background: var(--sogol-bronze); border-color: var(--sogol-bronze); color: var(--sogol-beige);; }
.btn-sogol.btn-sogol-plein-bronze:hover { background: transparent; color: var(--sogol-bronze); }

/* Plein blanc */
.btn-sogol.btn-sogol-plein-blanc { background: var(--sogol-beige);; border-color: var(--sogol-beige);; color: var(--sogol-terracotta); }
.btn-sogol.btn-sogol-plein-blanc:hover { background: transparent; color: var(--sogol-beige);; }

/* Plein noir */
.btn-sogol.btn-sogol-plein-noir { background: #2a2a2a; border-color: #2a2a2a; color: var(--sogol-beige);; }
.btn-sogol.btn-sogol-plein-noir:hover { background: transparent; color: #2a2a2a; }

/* Contour terracotta */
.btn-sogol.btn-sogol-contour-terracotta { background: transparent; border-color: var(--sogol-terracotta); color: var(--sogol-terracotta); }
.btn-sogol.btn-sogol-contour-terracotta:hover { background: var(--sogol-terracotta); color: var(--sogol-beige);; }

/* Contour bronze */
.btn-sogol.btn-sogol-contour-bronze { background: transparent; border-color: var(--sogol-bronze); color: var(--sogol-bronze); }
.btn-sogol.btn-sogol-contour-bronze:hover { background: var(--sogol-bronze); color: var(--sogol-beige);; }

/* Contour blanc */
.btn-sogol.btn-sogol-contour-blanc { background: transparent; border-color: var(--sogol-beige);; color: var(--sogol-beige);; }
.btn-sogol.btn-sogol-contour-blanc:hover { background: var(--sogol-beige);; color: var(--sogol-terracotta); }


/* Plein beige */
.btn-sogol.btn-sogol-plein-beige { background: var(--sogol-sable); border-color: var(--sogol-sable); color: var(--sogol-terracotta) !important; }
.btn-sogol.btn-sogol-plein-beige:hover { background: transparent; color: var(--sogol-sable); }

/* Contour beige */
.btn-sogol.btn-sogol-contour-beige { background: transparent; border-color: var(--sogol-sable); color: var(--sogol-sable); }
.btn-sogol.btn-sogol-contour-beige:hover { background: var(--sogol-sable); color: var(--sogol-terracotta); }
/* Contour noir */
.btn-sogol.btn-sogol-contour-noir { background: transparent; border-color: #2a2a2a; color: #2a2a2a; }
.btn-sogol.btn-sogol-contour-noir:hover { background: #2a2a2a; color: var(--sogol-beige);; }
/* ══════════════════════════════════════════════════════════════
   GALERIE PHOTOS — Maçonnerie
   ══════════════════════════════════════════════════════════════ */
.sogol-masonry-gallery {
    columns        : 3;
    column-gap     : 12px;
}
.sogol-masonry-item {
    break-inside   : avoid;
    margin-bottom  : 12px;
    overflow       : hidden;
    border-radius  : 3px;
    cursor         : pointer;
    display        : block;
}
.sogol-masonry-item a {
    display        : block;
    overflow       : hidden;
    border-radius  : 3px;
}
.sogol-masonry-item img {
    width          : 100%;
    height         : auto;
    display        : block;
    transition     : transform 0.4s ease;
}
.sogol-masonry-item:hover img {
    transform      : scale(1.04);
}
@media (max-width: 991px) { .sogol-masonry-gallery { columns: 2; } }
@media (max-width: 575px)  { .sogol-masonry-gallery { columns: 1; } }
/* ══════════════════════════════════════════════════════════════
   VERS BILINGUE — Fondu FR ↔ persan
   ══════════════════════════════════════════════════════════════ */
.sogol-vers-bilingue {
    position   : relative;
}

/* Tailles des vers selon option du bloc */
.sogol-vers-small  .sogol-vers { font-size: clamp(1rem, 1.8vw, 1.3rem) !important; }
.sogol-vers-medium .sogol-vers { font-size: clamp(1.3rem, 2.2vw, 1.7rem) !important; }
.sogol-vers-large  .sogol-vers { font-size: clamp(1.6rem, 2.8vw, 2.2rem) !important; }
.sogol-vers-xlarge .sogol-vers { font-size: clamp(2rem, 3.5vw, 2.8rem) !important; }

/* Tailles vers selon option du bloc */
.sogol-vers-bilingue.sogol-vers-small  .sogol-vers { font-size: clamp(1rem, 1.8vw, 1.3rem) !important; }
.sogol-vers-bilingue.sogol-vers-medium .sogol-vers { font-size: clamp(1.3rem, 2.2vw, 1.7rem) !important; }
.sogol-vers-bilingue.sogol-vers-large  .sogol-vers { font-size: clamp(1.6rem, 2.8vw, 2.2rem) !important; }
.sogol-vers-bilingue.sogol-vers-xlarge .sogol-vers { font-size: clamp(2rem, 3.5vw, 2.8rem) !important; }

.sogol-vers {
    position   : absolute;
    top        : 0;
    left       : 0;
    right      : 0;
    opacity    : 0;
    transition : opacity 0.9s ease;
    margin     : 0;
    font-style : italic;
    font-weight: 300;
    font-size  : clamp(1.3rem, 2.2vw, 1.7rem); /* défaut medium */
    line-height: 1.8;
    color      : var(--sogol-bronze);
}

.sogol-vers.active { opacity: 1 !important; }
.sogol-vers.sortie { opacity: 0 !important; }

/* Français — Kage italic */
.sogol-vers-fr {
    font-family : 'Kage', serif;
}

/* Persan — Vazirmatn, direction RTL */
.sogol-vers-fa {
    font-family : 'IranNastaliq', 'Vazirmatn', sans-serif;
    font-weight : 300;
    direction   : rtl;
    font-style  : normal;
    line-height : 2.2;
    font-size   : clamp(1.3rem, 2.5vw, 1.9rem);
}

/* ── Inputs globaux — fond beige, texte bronze ─────────────── */
input, textarea, select {
    background : #f5f0e8 !important;
    border     : none !important;
    color      : var(--sogol-bronze) !important;
}
input::placeholder, textarea::placeholder {
    color       : var(--sogol-bronze) !important;
    opacity     : 0.6 !important;
    font-family : 'Menlo', monospace !important;
    font-size   : 0.85em !important;
}

/* ── Boutons bloc colonnes-cta ─────────────────────────────── */
.bloc-colonnes-cta .btn-sogol {
    font-family : 'Kage', serif !important;
    font-size   : 25px !important;
}

/* ── Vers bilingue — interligne ────────────────────────────── */
.sogol-vers,
.sogol-vers-fa {
    line-height : 1.4;
}


/* ── Mobile — navbar transparente sur hero ─────────────────── */
@media (max-width: 991px) {
    body.home header:not(.sticky):not(.header-appear) .revalice-nav {
        background-color : transparent !important;
        box-shadow       : none !important;
    }
}

/* ── Mobile navbar ──────────────────────────────────────────── */
@media (max-width: 991px) {

    /* Padding horizontal navbar */
    .revalice-nav .nav-header-container {
        padding-left  : 1.2rem !important;
        padding-right : 1.8rem !important;
    }


    /* Home — navbar fixe transparente, pas de décalage body */
    body.home {
        padding-top : 0 !important;
    }
    body.home header:not(.sticky):not(.header-appear) .revalice-nav {
        background-color : transparent !important;
        box-shadow       : none !important;
    }

    /* Icônes réseaux — bronze sur fond sable (sticky mobile) */
    header.sticky .nav-reseau-icon,
    header.header-appear .nav-reseau-icon,
    header.sticky .nav-reseaux .nav-reseau-icon,
    header.header-appear .nav-reseaux .nav-reseau-icon {
        color      : var(--sogol-bronze) !important;
        background : rgba(152, 99, 42, 0.15) !important;
    }

    /* Brand toujours visible */
    .navbar-brand-text,
    .navbar-brand img {
        opacity    : 1 !important;
        visibility : visible !important;
    }
    body.home header:not(.sticky) .navbar-brand-text { color: var(--sogol-beige) !important; }
    header.sticky .navbar-brand-text { color: var(--sogol-bronze) !important; }

    /* Menu collapse — fond sable, liens bronze */
    .navbar-collapse.show,
    .navbar-collapse.collapsing {
        background-color : var(--sogol-sable) !important;
        padding          : 1rem 1.5rem !important;
        margin-top       : 0.5rem !important;
        border-radius    : 8px !important;
    }
    .navbar-collapse .navbar-nav .nav-link {
        color   : var(--sogol-bronze) !important;
        padding : 0.6rem 0 !important;
    }

    /* Icônes réseaux — réduire taille sur mobile */
    .nav-reseaux {
        gap          : 6px !important;
        margin-right : 1.8rem !important;
    }
    .nav-reseaux .nav-reseau-icon {
        width     : 26px !important;
        height    : 26px !important;
        font-size : 1.3rem !important;
    }

    /* Hero — moins haut sur mobile */
    .bloc-hero-accueil {
        min-height : 47vh !important;
        height     : 425px !important;
    }

    /* Burger — couleur beige sur fond transparent */
    body.home header:not(.sticky) .navbar-toggler-line {
        background-color : var(--sogol-beige) !important;
    }
    header.sticky .navbar-toggler-line {
        background-color : var(--sogol-bronze) !important;
    }
}

/* ── Blocs fond coloré — texte centré sur mobile ───────────── */
@media (max-width: 767px) {
    .wp-block-group.is-style-sogol-fond-terracotta,
    .wp-block-group.is-style-sogol-fond-bronze,
    .wp-block-group.is-style-sogol-fond-beige,
    .wp-block-group.is-style-sogol-fond-fonce {
        text-align : center !important;
    }
}

/* ── Sticky home — surcharge Litho navbar-dark blanc ───────── */
header.sticky .navbar.navbar-dark .navbar-nav .nav-link,
header.header-appear .navbar.navbar-dark .navbar-nav .nav-link,
header.sticky .navbar.navbar-dark .navbar-brand,
header.sticky .navbar.navbar-dark .navbar-brand span,
header.header-appear .navbar.navbar-dark .navbar-brand,
header.header-appear .navbar.navbar-dark .navbar-brand span {
    color : var(--sogol-bronze) !important;
}

/* ── Colonnes CTA — hauteur min ─────────────────────────────── */
.cta-inner-col {
    min-height : 360px;
}
@media (max-width: 767px) {
    .cta-inner-col {
        min-height : 195px !important;
    }
}

/* ── Sticky nav — forcer bronze sur tous les enfants ───────── */
.sticky .revalice-nav *,
header.sticky .navbar * {
    color : rgb(152 99 42) !important;
}