:root {
    --primary-color: #FFFFFF;
    --secondary-color: #000000;
    --dark-color: #0E1115;
    --title-color: black;
    --text-color: #777;
    --line-color: #d7d7d7;
    --btn-bg-color: black;
    --btn-txt-color: #FFFFFF;
    --light-bg : #F9F9F9;
}
.theme-color-2 {
    --primary-color: #FFFFFF;
    --secondary-color: #0F172A;
    --dark-color: #0B1120;
    --title-color: #0F172A;
    --text-color: #475569;
    --line-color: #E2E8F0;
    --btn-bg-color: #2563EB;
    --btn-txt-color: #FFFFFF;
    --light-bg: #F8FAFC;
}
.theme-color-3 {
    --primary-color: #FFFFFF;
    --secondary-color: #2E2A27;
    --dark-color: #1F1B18;
    --title-color: #2E2A27;
    --text-color: #6B645F;
    --line-color: #E7E3DF;
    --btn-bg-color: #D4A373;
    --btn-txt-color: #FFFFFF;
    --light-bg: #F5F3F1;
}
.theme-color-4 {
    --primary-color: #FFFFFF;
    --secondary-color: #1F2933;
    --dark-color: #111827;
    --title-color: #1F2933;
    --text-color: #52606D;
    --line-color: #E4E7EB;
    --btn-bg-color: #3A7D6D;
    --btn-txt-color: #FFFFFF;
    --light-bg: #F3F7F5;
}
.theme-color-5 {
    --primary-color: #FFFFFF;
    --secondary-color: #1C1C1C;
    --dark-color: #111111;
    --title-color: #1C1C1C;
    --text-color: #5C5C5C;
    --line-color: #E5E5E5;
    --btn-bg-color: #C25E3D;
    --btn-txt-color: #FFFFFF;
    --light-bg: #FAFAFA;
}

.select-color-theme button.active {
    border: solid 2px black;
}
.select-color-theme button {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: solid 1px #d3d3d3;
    transform: rotate(45deg);
    cursor: pointer;
}

.select-color-theme .color1 {
    background: linear-gradient(to right, #F9F9F9 50%, black 50%);
}
.select-color-theme .color2 {
    background: linear-gradient(to right, #F8FAFC 50%, #2563EB 50%);
}
.select-color-theme .color3 {
    background: linear-gradient(to right, #F5F3F1 50%, #D4A373 50%);
}
.select-color-theme .color4 {
    background: linear-gradient(to right, #F3F7F5 50%, #3A7D6D 50%);
}
.select-color-theme .color5 {
    background: linear-gradient(to right, #FAFAFA 50%, #C25D3E 50%);
}

@font-face {
 font-family: 'Crimson';
 src: url('/wp-content/themes/book-child/fonts/crimson-text-latin-400.woff2') format('woff2');
 font-weight: 400;
 font-style: normal;
 font-display: swap;
}

@font-face {
 font-family: 'Crimson';
 src: url('/wp-content/themes/book-child/fonts/crimson-text-latin-400italic.woff2') format('woff2');
 font-weight: 400;
 font-style: italic;
 font-display: swap;
}

@font-face {
 font-family: 'Crimson';
 src: url('/wp-content/themes/book-child/fonts/crimson-text-latin-600.woff2') format('woff2');
 font-weight: 600;
 font-style: normal;
 font-display: swap;
}

::selection {background: var(--text-color); color: #191C1D;}
html.no-scroll, body.no-scroll {overflow: hidden;}
header, footer {display: none;}
.tb-container {max-width: 1200px; margin: auto !important; padding-left: 25px; padding-right: 25px;}
.tb-flex-column {display: flex; gap: 25px;}


/* START MENU */
.menu-book {background: transparent; display: flex; align-items: center; gap: 25px; padding: 20px 25px; width: 100%; z-index: 99999; position: relative;}
.menu-book .menu-book-name {color: white; font-weight: 600; font-family: Crimson; font-size: 32px;}
.menu-book .menu-book-link {margin-left: auto; display: flex; gap: 25px;}
.menu-book .menu-book-link a {color: white;}
.menu-toggle {display: none; font-size: 28px; background: none; border: none; cursor: pointer;}
.menu-toggle svg {width: 30px; height: 30px; fill: var(--text-color); display: block;}
.menu-toggle svg.icon-btn-close {width: 30px; height: 30px; fill: var(--text-color); display: block;}
/* END MENU */

/* START HOME */
.template-book * {font-family: Montserrat; margin: 0;}
.template-book p, .template-book li, .template-book span, .template-book a {line-height: 1.5;}
.template-book {background-color: var(--primary-color) !important;}
.tb-top {margin-top: -88px; position: relative;}
.tb-top:before {content:""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; z-index: 9; opacity: .8; background: linear-gradient(180deg, var(--dark-color), transparent);}
.slider-smooth {position: relative; overflow: hidden;}
.slider-smooth {height: 70vh;}
.slider-smooth img {position: absolute; inset: 0; width: 100%; height: calc(100vh - 88px); object-fit: cover; opacity: 0; transition: opacity 700ms ease-in-out;}
.slider-smooth img.is-active {opacity: 1;}
.slider-btn {padding: 0 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: -50px; position: relative; z-index: 9; color: white; font-weight: bold; gap: 8px; text-shadow: 0 0 6px var(--line-color);}
.slider-btn:hover, .slider-btn:focus {color: white !important;}
.slider-btn span {display: flex; justify-content: center; align-items: center; background: white; height: 35px; width: 35px; border: solid 1px var(--line-color);}
.slider-btn svg {display: block; height: 24px; fill: var(--btn-bg-color);}
.tb-about {padding-top: 80px; padding-bottom: 80px;}
.tb-about .tb-flex-column {align-items: center;}
.tb-about .tb-flex-column .tb-col1 img {max-width: 150px; position: relative; border-radius: 5px;}
.tb-about h1 {padding-bottom: 0; font-weight: bold; font-size: 36px; color: var(--title-color);}
.tb-about .metier {margin-top: 10px;}
.tb-about .metier span {font-weight: 400; font-family: Crimson; font-style: italic; font-size: 22px; margin-bottom: 8px; color: var(--text-color);}
.tb-about .info {padding-top: 20px;}
.book-author-country:before {display: none !important;}
.book-author-country span {color: var(--text-color); font-size: 16px;}
.tb-home-portfolio {background: var(--light-bg);padding: 50px 0;}
.tb-home-portfolio h2 {padding-bottom: 25px;}
.tb-listing-portfolio {display: flex; gap: 20px;}
.tb-bloc-portfolio {flex: 1; background: white; padding: 15px; position: relative; overflow: hidden;}
.tb-bloc-portfolio .img-tb-bloc-portfolio {height: 300px; display: block; border-radius: 0; object-fit: cover; overflow: hidden; width: 100%; margin-bottom: 15px;}
.tb-bloc-portfolio .title-tb-bloc-portfolio {font-size: 18px; font-weight: 600;}
.tb-bloc-portfolio .number-tb-bloc-portfolio {font-size: 16px; font-style: italic; letter-spacing: 1px; font-family: 'Crimson';}
.list-desc ul {list-style: none; padding: 20px 0 0 0 !important; display: flex; flex-wrap: wrap; gap: 15px;}
.list-desc ul li {background-color: var(--light-bg); padding: 5px 15px;}
.list-desc ul li span {color: var(--title-color);}
.book-rs {display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start; list-style: none; padding: 0;}
.book-rs a {background-color: var(--btn-bg-color); display: block; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 5px;}
.book-rs svg {width: 20px; height: 20px; fill: white; display: block;}
.tb-contact {padding: 50px 0;}
.tb-contact h2 {text-align: center;}
.tb-breadcrumbs {display: flex; gap: 5px; background: var(--dark-color); width: fit-content; margin: 50px auto 0 auto; padding: 5px 10px; align-items: center; max-width: 100%;}
.tb-breadcrumbs a, .tb-breadcrumbs span {color: var(--light-bg);}
.tb-breadcrumbs svg {fill: var(--light-bg); height: 14px; display: block;}
.tb-breadcrumbs .home-icon svg {height: 20px;}
.tb-page-portfolio h1 {text-align: center; padding-bottom: 20px;}
.book-galeries-img {column-gap: 1rem; width: 100%; padding: 10px;}
.book-galeries-img[data-columns="3"] {column-count: 3;}
.book-galeries-img[data-columns="2"] {column-count: 2;}
.book-galeries-img[data-columns="4"] {column-count: 4;}
.book-galeries-img .card {width: 100%; display: block; margin-bottom: 1rem; border-radius: 8px; overflow: hidden; break-inside: avoid; left: auto !important; top: auto !important;}
.book-galeries-img .card img, .book-galeries-img .card {max-width: 100%; height: auto; cursor: pointer;}
.nav-portfolio {margin: 40px 0;}
.nav-portfolio > div {display: flex; align-items: center; gap: 20px;}
.nav-portfolio > div a:last-child {margin-left: auto;}
.nav-portfolio > div a {display: flex; gap: 8px; background: var(--dark-color); padding: 5px 10px; align-items: center; color: var(--light-bg);}
.nav-portfolio > div a:last-child svg {rotate: 180deg;}
.nav-portfolio > div a svg {display: flex; height: 20px; fill: var(--light-bg);}
.nav-portfolio .current {display: none !important;}
.desc-portfolio {padding-bottom: 40px; text-align: center;}
/* END HOME */


/* FORM CONTACT */
.hc_bookBuilder_form_contact_fields {display: flex; flex-wrap: wrap; gap: 12px; width: 100%;}
.hc_bookBuilder_form {max-width: 800px; margin: 20px auto 0 auto;} 
.hc_bookBuilder_form_contact_fields .field_block {width: calc(50% - 6px);}
.hc_bookBuilder_form_contact_fields .field_block input,.hc_bookBuilder_form_contact_fields .field_block textarea {border: solid 1px var(--text-color); background: transparent; padding: 14px 18px; border-radius: 5px; color: var(--text-color);}
.field_block_subject, .field_block_message {width: 100% !important;}
.field_block input::placeholder, .field_block textarea::placeholder {color: var(--text-color) !important; opacity: 0.5;}
.tb-contact .book-form-contact .hc_bookBuilder_contact_submit {background: var(--btn-bg-color) !important; color: var(--btn-txt-color) !important; border: none !important; text-transform: initial !important; padding: 12px 25px !important; line-height: 1.5 !important; border-radius: 5px; font-size: 16px; margin: 25px auto 0 auto !important; text-align: center; display: table; transition: .4s;}
.hc_bookBuilder_contact_submit:hover {background: var(--btn-bg-color) !important; color: var(--btn-txt-color) !important; border: none !important; opacity: .8;}
.field_block textarea {min-height: 150px; max-width: 100%; min-width: 100%;}





	
/* FORM CONTACT */
.template-book-4 .hc_bookBuilder_form_contact_fields {display: flex; flex-wrap: wrap; gap: 12px; width: 100%;}
.template-book-4 .hc_bookBuilder_form {margin: auto !important; max-width: 800px;} 
.template-book-4 .hc_bookBuilder_form_contact_fields .field_block {width: calc(50% - 6px);}
.template-book-4 .hc_bookBuilder_form_contact_fields .field_block input, .template-book-4 .hc_bookBuilder_form_contact_fields .field_block textarea {border: solid 1px var(--text-color); background: transparent; padding: 14px 18px; border-radius: 5px; color: var(--text-color);}
.template-book-4 .field_block_subject, .template-book-4 .field_block_message {width: 100% !important;}
.field_block input::placeholder, .field_block textarea::placeholder {color: var(--text-color) !important; opacity: 0.5;}
.template-book-4 .hc_bookBuilder_contact_submit {background: var(--btn-bg-color) !important; color: var(--btn-txt-color) !important; border: none !important; text-transform: initial !important; padding: 12px 25px !important; line-height: 1.5 !important; border-radius: 5px; font-size: 16px; margin: 25px auto !important; text-align: center; display: table; transition: .4s;}
.template-book-4 .hc_bookBuilder_contact_submit:hover {background: var(--btn-bg-color) !important; color: var(--btn-txt-color) !important; border: none !important; opacity: .8;}



/* START LIGHTBOX */
.lightbox {
    display: none; /* caché par défaut */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    justify-content: center;
    align-items: center;
    z-index: 9999;
    flex-direction: column;
    backdrop-filter: blur(10px);
}

/* ✅ Image affichée */
.lightbox-img {
  max-width: 90%;
  max-height: 80%;
  margin: auto;
  display: block;
  border-radius: 8px;
}

/* ✅ Bouton fermer */
.lightbox .close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 22px;
    color: #2c2c2c;
    cursor: pointer;
    opacity: 1;
    background: #d5d1c8;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ✅ Navigation gauche/droite */
.lightbox .nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    color: #000000;
    cursor: pointer;
    padding: 10px;
    user-select: none;
    background: #d5d1c8;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lightbox .prev {left: 20px;}
.lightbox .next {right: 20px;}
/* END LIGHTBOX */

.cv-preview .template-book-4 .name {font-size: 16px;}
.cv-preview .template-book-4 .profil-background {width: 130px; height: 130px;}
.cv-preview .template-book-4-top, .cv-preview .template-book-4-portfolio, .cv-preview .template-book-4-info, .cv-preview .template-book-4-contact {min-height: auto; padding: 30px 0;}
.cv-preview .template-book-4 h2 {font-size: 16px; padding: 20px 0;}
.cv-preview .template-book-4 .info .list-desc div {padding: 10px 1%;}
.cv-preview .template-book-4 .info {margin: 0 20px; line-height: 6px;}
.cv-preview .template-book-4 .activite {font-size: 10px; line-height: 18px;}
.cv-preview .template-book-4 .book-author-country {padding-top: 10px;}
.cv-preview .template-book-4 .book-author-country:before {font-size: 12px;}

@media screen and (max-width: 1200px) {
  	.template-book-4 .info {margin: 0 40px;}
}

@media (max-width: 1024px) {
  .book-galeries-img[data-columns="3"], .book-galeries-img[data-columns="4"] {column-count: 2;}
}

@media screen and (max-width: 768px) {
  	.template-book-4 .info .list-desc div {width: 100%; margin: 0 0 10px 0; padding-left: 25px;}
  	.template-book-4-top {padding: 50px 20px;}
  	.book-galeries-img {column-count: 1 !important;}
    .menu-toggle {display: block; margin-left: auto; position: relative; z-index: 999;}
    .menu-book .menu-book-link {display: none; flex-direction: column; align-content: center; justify-content: center; background: var(--dark-color); position: absolute; top: 50px; right: 0; width: 200px; padding: 10px;}
    .menu-book.open .menu-book-link {display: flex; width: 100%; height: 100vh; top: 0; padding: 40px;}
    .tb-breadcrumbs {width: 100%; margin-top: 0;}
    .tb-breadcrumbs span {flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
    .tb-page-portfolio h1 {font-size: 26px !important; text-align: left; padding-top: 10px; padding-bottom: 10px;}
    .desc-portfolio {padding-bottom: 25px; text-align: left;}
    .nav-portfolio p {flex-direction: column; gap: 5px;}
    .nav-portfolio p a {width: 100%;}
    .nav-portfolio p a:last-child {justify-content: flex-end;}
}

@media screen and (max-width: 500px) {
    .template-book-4 .profil-background {max-width: 100%; max-height: 100%; width: 240px; height: 240px;}
    .template-book-4 .name {font-size: 30px;}
    .template-book-4 .metier .activite {font-size: 20px;}
    .template-book-4 h2 {font-size: 30px; padding: 30px 0}
    .titre-galeries {font-size: 18px; margin-top: 30px;}
    .book-galeries .album:first-child .titre-galeries {margin-top: 0px;}
    .template-book-4 .info {margin: 0;}
    .template-book-4 .info .list-desc ul {gap: 10px;}
    .template-book-4 .list-desc li {width: 100%;}
    .template-book-4-contact h2 {padding-bottom: 0;}
    .book-rs {padding: 25px 0 30px 0;}
    .book-rs a {width: 30px; height: 30px;}
    .book-rs svg {width: 20px; height: 20px;}
    
}