:root {
    --primary-color:#FF6B35;
    --secondary-color:#764BA2;
    --third-color:#45243e;
    --success-color:#27AE60;
    --danger-color:#E74C3C;
    --warning-color:#F39C12;
    --info-color:#9f8bcb;
    --dark-color:#2C3E50;
    --light-bg:#F4F6F9;
    --white:#FFFFFF;
    --text-color:#45243e;
    --border-color:#E0E0E0;

    --trans:transparent;
    --font-main:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --transition:all 0.3s ease;
    --font-weight:400;
    --font-size:clamp(16px, 3vw, 20px);
    --martom:clamp(15px, 3vw, 40px);
    --primary-font:"Boogaloo", sans-serif;
    --secondary-font:"Mouse Memoirs", sans-serif;
    --third-font:"Barlow Condensed", sans-serif;
}

.bg {background-color:#F4F6F9;}
.bgwhite {background-color:white;}
.bgwhite2 {background-color:#fafafa;}
.bg1 {background-color:#FF6B35;}
.bg2 {background-color:#764BA2;}
.bg3 {background-color:#45243e;}

.colorwhite {color:white;}
.color {color:#45243e;}
.color1 {color:#FF6B35;}
.color2 {color:#764BA2;}
.color3 {color:#45243e;}
.borderwhite {border-color:white;}
.border1 {border-color:#FF6B35;}
.border2 {border-color:#764BA2;}
.border3 {border-color:#E0E0E0;}

.gradient {background: linear-gradient(#383b51, #764BA2);}


/* ------------------ 
------- Body --------
------------------ */

body {background: var(--light-bg); color: var(--text-color);}
h1 {color:var(--primary-color);}
h2 {color:var(--secondary-color);}
h3 {color:var(--info-color);}


/* ------------------ 
------ Sidebar ------
------------------ */

.menu-sidebar {background-color: var(--third-color);}
.menu-button {background-color: var(--third-color);}
.menu-content img {margin:auto; width:100%;}
.icon {background-color:var(--trans);}
.icon::before {background-color:var(--white);}
.icon::after {background-color:var(--white);}
.menu a {color:var(--white);}
.menu a.active {color:var(--primary-color);}

/* ------------------ 
------- Header ------
------------------ */
.header {background-color:var(--white); box-shadow:0 2px 10px rgba(0,0,0,0.4);}
.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 0 clamp(10px, 3vw, 20px);}
.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);}
.toggleable_content {border-width: 0 3px 0 0; border-color: var(--primary-color); border-style: solid; margin: 20px clamp(10px, 2.7vw, 35px) 0 0; padding:0 20px 0 0;}

.toggleable_label::after {background-color:var(--primary-color); color:var(--white);}
.content-filter-btn-index.active {background-color: var(--primary-color); color:var(--white);}


/* ------------------ 
----- 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 {}

/* ------------------ 
----- Dropdowns ----
------------------ */
.dropdown-toggle {font-family:"Outfit", sans-serif;}
span.selected-text.widgetcatimg {font-weight:700; font-size:1.4em; color:#333;}
.dropdown-toggle:hover, .dropdown-toggle:focus {background-color:#eee;}
.dropdown-toggle.active, .dropdown.open .dropdown-toggle {background-color:#f5f5f5; outline:0;}
.dropdown-menu {background-color:var(--white);}
.dropdown-menu li button {font-family:"Outfit", sans-serif;}
.dropdown-menu li button:hover, .dropdown-menu li button:focus {color:var(--white); background-color:#ddd;}

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

/* ------------------ 
------ Galerie ------
------------------ */
.page-header-bloc {background-color:var(--secondary-color);}
.page-header-bloc h1 {background-color:var(--trans); color: var(--white);}
.stats {color: var(--info-color);}
.image-card, .ad-card {background-color:var(--white); border:1px solid #eee;}
.image-info h2 {color: var(--secondary-color); background-color: var(--white);}
.image-title {color:var(--primary-color); font-size:30px; font-weight:600; letter-spacing:1px; font-family: var(--secondary-font);}

.image-description {color: var(--color);}
.image-description span {background-color: #383b51; color: #fff;}
.image-description p {background-color: #d9d2ca; color: #383b51;}

.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 ------
------------------ */
.misenpage strong {color:var(--primary-color);}
.misenpage h2 {color:var(--secondary-color); font-size: clamp(1.3em, 3vw, 2.5em); margin-bottom:clamp(1px, 1vw, 20px);}
.misenpage h3 {color:var(--info-color); font-size: clamp(1.2em, 3vw, 2em);}
.misenpage h4 {}
.misenpage a {color:slateblue;}
.bangle {margin:0px auto; position:relative; letter-spacing:1px; text-align:center;}
.border-angle {--s: 20px; padding:3% 5%; 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;}

/* ------------------ 
------ 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 {}
.image-description-detail h2 {}
.profile-name-display h2 {}
.tag-link {background-color: var(--primary-color); color:var(--white);}
.related-content {background-color: var(--white); box-shadow:0 8px 30px rgba(0, 0, 0, 0.12);}
.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 {background-color: var(--white); box-shadow:0 4px 15px rgba(0,0,0,0.1);}*/
.widget .dropdown, .widget h3 {background-color: var(--white); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);}

/* ------------------ 
------ 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-consent h4 {font-family: var(--primary-font); font-size:1.7em;}
.cookie-actions button {font-family:var(--secondary-font); color:var(--white); font-weight:600; font-size:20px; letter-spacing:1px;}
#cookie-accept {background: var(--third-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);}

/* ------------------ 
------ Custom -------
------------------ */
.image-description span {background-color: #383b51; padding: 6px 8px; color: #fff; float: left; margin: 0 10px 2px 0; border-radius: 8px; font-weight: 500;}
.image-description p {background-color: #d9d2ca; padding: 7px 10px; border-radius: 8px; text-align: center; margin: 10px 0 0; display: table; color: #383b51;}

.header-title, .site-name {font-size:clamp(3em, 4vw, 5em); font-weight:bold; text-shadow:1px 1px 1px rgba(0, 0, 0, 1); letter-spacing:1px;}
.header-title span:nth-child(1) {color: #ff6b35;}
.header-title span:nth-child(2) {color: #890670;}
.header-title span:nth-child(3) {color: #fe51cb;}
.header-title span:nth-child(4) {color: #e60440;}
.header-title span:nth-child(5) {color: #fff32a;}
.header-title span:nth-child(6) {color: #002b9a;}
.header-title span:nth-child(7) {color: #5fa37e;}
.header-title span:nth-child(8) {color: #764ba2;}
.header-title span:nth-child(9) {font-size: 0.4em; text-shadow: none; font-weight: 400; letter-spacing: -1px; color: var(--primary-color);}
.header-title span:nth-child(10) {font-size: 0.45em; font-weight: 400; display: block; margin-top:7%; color: #764ba2; text-shadow: none; letter-spacing:0;}
.header-subtitle, .site-tagline {color:var(--secondary-color); font-size:clamp(1em, 3vw, 1.8em);}