:root {
    --primary-color         :#1b2531;
    --secondary-color       :#464866;
    --success-color         :#27AE60;
    --danger-color          :#E74C3C;
    --warning-color         :#F39C12;
    --info-color            :#c3d0d8;
    --dark-color            :#222430;
    --light-color           :#696c91;
    --light-bg              :#efefef;
    --white                 :#FFFFFF;
    --gradient              :linear-gradient(#383b51, #e2027b);
    --text-color            :#384c64;
    --border-color          :#E0E0E0;
    --trans                 :transparent;
    --font-main             :-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --transition            :all 0.3s ease;
    --gap                   :clamp(15px, 3vw, 40px);
    --martom                :clamp(15px, 3vw, 40px);
    --radius                :clamp(6px, 2vw, 12px);
    --padding               :clamp(10px, 3vw, 20px) clamp(15px, 3vw, 20px);
    --shadow:0 4px 15px rgba(0, 0, 0, 0.1);
    --font-weight:400;
    --font-size:clamp(14px, 2vw, 17px);
    --primary-font:"Outfit", sans-serif;
    --secondary-font:"Outfit", sans-serif;
    --third-font:"Barlow Condensed", sans-serif;
    --mg-gap            : 8px;
    --mg-radius         : 8px;
    --mg-cols           : 4;
    --mg-arrow-size     : 40px;
    --mg-arrow-bg       : #383b51;
    --mg-arrow-color    : #fff;
    --mg-overlay-bg     : rgba(0,0,0,.92);
    --mg-img-radius     : 6px;
    --mg-thumb-size     : 64px;
}

.bg {background-color:#f5f5f5;}
.bgwhite {background-color:white;}
.bgwhite2 {background-color:fafafa;}
.bg1 {background-color:#1b2531;}
.bg2 {background-color:#384c64;}
.bg3 {background-color:#45243e;}

.colorwhite {color:white;}
.color {color:#384c64;}
.color1 {color:#1b2531;}
.color2 {color:#764BA2;}
.color3 {color:#c3d0d8;}
.borderwhite {border-color:white;}
.border1 {border-color:#1b2531;}
.border2 {border-color:#764BA2;}
.border3 {border-color:#E0E0E0;}
.gradient {background: linear-gradient(#383b51, #764BA2);}

.maxsize {width:100%; max-width:1330px; padding:0 clamp(10px, 4vw, 30px);}
.minsize {width:100%; max-width:1158px; padding:0 clamp(10px, 4vw, 30px);}


/* ------------------ 
------- Body --------
------------------ */
body {background: var(--light-bg); color: var(--text-color);}
h1 {color:var(--primary-color);}
h2 {color:var(--primary-color);}
h3 {color:var(--primary-color); font-weight:600; margin:0 0 12px;}

/* ------------------ 
------ Sidebar ------
------------------ */
.menu-button {background-color:var(--white);}
.menu-sidebar {background-color: var(--secondary-color);}
.logo-sidebar {width: clamp(60%, 11vw, 90%);}
.icon {background-color:var(--secondary-color);}
.icon::before {background-color:var(--white);}
.icon::after {background-color:var(--info-color);}
.menu-icon::before, .menu-icon::after {background-color:var(--primary-color);}
.toggle-checkbox:not(:checked) ~ .menu-button .menu-icon {background-color:var(--primary-color);}
.toggle-checkbox:checked ~ .menu-button .menu-icon::before {background-color:var(--primary-color);}
.toggle-checkbox:checked ~ .menu-button .menu-icon::after {background-color:var(--primary-color);}

.menu a {color:var(--info-color);}
.menu a.active {color:var(--white);}
.menu-content img {margin:auto;}

nav a {color:#c3d0d8;}
nav a::before {background-color:var(--light-bg);}

/* ------------------ 
------- Header ------
------------------ */
.header {background-color:var(--primary-color); /*box-shadow:var(--shadow);*/}
.header-logo {display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:20px 0 10px;}
.header-content {margin:0 auto; /*padding: 0 0 40px clamp(10px, 3vw, 20px);*/}
/*.header-content {margin:0 auto; padding:0; min-height:50px; position: relative; background: url(img/back.webp) no-repeat top right / contain;}*/
.nav-header a {color:var(--text-color); }
.nav a::before {background:var(--primary-color);}
.nav-header a:hover {background-color:var(--primary-color); color:var(--white);}
.dropdown-toggle {background: var(--white);}
.dropdown-toggle:hover, .dropdown-toggle:focus {background-color:var(--secondary-color); color:var(--white);}
.dropdown-toggle.active, .dropdown.open .dropdown-toggle {background-color: var(--primary-color); color: var(--white);}
.dropdown-menu {background-color:var(--white);}
.dropdown-menu li button:hover, .dropdown-menu li button:focus {color: var(--white); background-color: var(--secondary-color);}

.toggleable_content {/*border-width:0 3px 0 0; border-style: solid; margin:0 35px 0 0; padding:0 20px 0 0; border-color:var(--primary-color);*/}
.toggleable_label::after {background-color:var(--primary-color); color:var(--white);}
.content-filter-btn-index.active {background-color: var(--primary-color); color:var(--white);}

/* ------ custom LPBDC ------ */
.logo {width: clamp(40%, 28vw, 75%); max-width: 400px; min-width: 200px; margin:auto; padding: 15px 0; /*transition: all 0.3s ease;*/}

/* ------------------ 
----- Breadcrumb ----
------------------ */
.breadcrumb a {color:var(--primary-color);}
.breadcrumb a:hover {color:var(--white); background-color:var(--primary-color);}
.breadcrumb-separator {color:var(--info-color);}
.breadcrumb-current {}

/* ------------------ 
---- Catégories -----
------------------ */
.view-link {color:#bbb;}
.view-link:hover {color:#333;}

/* ------------------ 
------ Galerie ------
------------------ */
.page-header-bloc {border-radius:0; padding:0;}
.page-header-bloc h1 {background-color:var(--trans); padding:5px 15px;}
.image-card, .ad-card {background-color:var(--white);}
.image-info h2 {color: var(--secondary-color); background-color: var(--white);}
.image-description {color: var(--light-color);}
.image-description span {background-color: #383b51; color: #fff;}
.image-description p {background-color: #d9d2ca; color: #383b51;}
span.image-category {color: var(--primary-color);}

.pagination-btn.active {background-color: var(--primary-color); color:var(--white); border-color:#d53a7c;}
.pagination-btn {border: 1px solid #ddd; background-color: var(--white);}
.pagination-btn:hover {background: #dd6196; border-color: #d53a7c; color:white;}
.pagination-dots {color:#999;}

/* ------------------ 
------ Page ------
------------------ */
.page-header-bloc h1 {font-size:clamp(18px, 3vw, 50px); margin:0;}
.misenpage h2 {font-size: clamp(1.7em, 3vw, 2.3em); color:var(--primary-color);}
.misenpage strong {color:var(--primary-color);}
.bangle {margin:0px auto; position:relative; letter-spacing:1px; text-align:center; width: 100%; max-width: 56%; justify-content:center;}
.border-angle {--s: 20px; padding:5% 7%; mask:conic-gradient(at var(--s) var(--s), #0000 75%, #000 0) 0 0 / calc(100% - var(--s)) calc(100% - var(--s)), conic-gradient(#000 0 0) content-box; border-radius:0; background-color: transparent; color: var(--primary-color); font-weight: 600;}
.shortcode-contact {background-color: var(--white); border-radius: var(--radius); padding:40px; width: 100%; max-width: 700px; margin: 0 auto; box-shadow:var(--shadow);}

/* ------------------ 
------ Image ------
------------------ */
.image-section {/*background-color:var(--white); box-shadow:0 8px 30px rgba(0, 0, 0, 0.12); padding: clamp(10px, 2vw, 30px);*/}
.image-section h1 {padding:clamp(10px, 3vw, 30px) 0;}
.image-description-detail {line-height: 1.6;}

/* Compteurs stats / durée */
.content-stats              {background-color:var(--light-bg); border-radius:var(--radius);}
.content-stats svg          {color: var(--primary-color);}
.stat-like                  {background:none; border:none; color:inherit; font-size:inherit;}
.stat-like:hover            {background: rgba(220, 53, 69, .1); color: #dc3545;}
.stat-like.liked            {color: #dc3545;}
.stat-like.liked svg        {fill: #dc3545;}
.stat-views, .stat-duration {opacity:.7;}

.image-description-detail h2 {border-radius:var(--radius); margin-bottom:var(--martom); background-color:var(--secondary-color); color:var(--white); padding:20px 30px;}
.profile-name-display h2 {}
.tag-link {background-color: var(--primary-color); color:var(--white);}
.related-content {}
.related-content h2 {padding: 10px 20px;}
.related-content h3 {color:var(--secondary-color);}
.related-item:hover .related-item-title {color:var(--primary-color);}
.call {background-color: var(--primary-color); color:var(--white);}

@media (max-width:480px) {.image-section {background-color: inherit; box-shadow: none; padding: 0;}}

/* ------------------ 
------ Widgets ------
------------------ */
.widget h3 {padding:0;}
.widget .dropdown, .widget h3 {color: var(--primary-color);}

/* ------------------ 
------ footer ------
------------------ */
.footer-content {background-color: var(--secondary-color);}
.footer-block h3, .footer-block h4, .footer-block h5 {color:var(--primary-color);}
.footer-block a:hover {}
.footer-bottom {background-color: var(--white)}
.footer-copyright {color:var(--info-color);}

/* ------ custom Cookies ------ */
.cookie-consent {background: var(--primary-color); color:var(--white); font-family: var(--font-main);}
.cookie-actions button {font-family:var(--secondary-font); color:var(--white); font-weight:600;}
#cookie-accept {background: var(--success-color);}
#cookie-refuse {background: var(--secondary-color);}

/* ------------------ 
--- scroll to top ---
------------------ */
.scroll-to-top {background-color: rgb(245 155 155 / 85%);}
.scroll-to-top:hover {background-color:rgba(245 155 155 / 100%); color:var(--white);}

/* ------------------ 
---- Responsive -----
------------------ */
@media screen and (max-width: 1025px) {
    .bangle {max-width:100%;}
}