@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Fredoka:wght@300..700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Oswald:wght@200..700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

@font-face {
 font-family: 'Acorn';
 src: url('/wp-content/themes/moncv-child/fonts/Acorn-SemiBold.woff2') format('woff2');
 font-weight: 600;
 font-style: normal;
 font-display: swap;
}


:root {
    --bg-color: #F7F5F2;
    --bg-color-white: #EEE9E2;
    --title-color: #0E4B4F;
    --title2-color: #0E4B4F;
    --icon-color: #7BA69A;
    --profil-icon-color: #7BA69A;
    --txt-color: #2B2B2B;
    --btn-bg: #FF6B57;
    --rating-bg: #f3cdc2;
    --rating-color: #FF6B57;
    --title-font: 'Acorn', sans-serif;
    --text-font: 'Jakarta', sans-serif;
}
.theme-color-2 {
  --bg-color: #F6F3ED;
  --bg-color-white: #EFEAE1;
  --title-color: #0F3D5C;
  --title2-color: #0F3D5C;
  --icon-color: #98A4AD;
  --profil-icon-color: #98A4AD;
  --txt-color: #2A2A2A;
  --btn-bg: #0F84A9;
  --rating-bg: #cecfcd;
  --rating-color: #0F84A9;
}
.theme-color-3 {
    --bg-color: #ECE6DD;
    --bg-color-white: #f2ede6;
    --title-color: #18594E;
    --title2-color: #4C6763;
    --icon-color: #bac5bc;
    --profil-icon-color: #18594E;
    --txt-color: #3c3c3c;
    --btn-bg: #18594E;
    --rating-bg: #bac5bc;
    --rating-color: #18594E;
}
.theme-color-4 {
    --bg-color: #F5F7FA;
    --bg-color-white: #E9EDF4;
    --title-color: #283593;
    --title2-color: #283593;
    --icon-color: #90A4AE;
    --profil-icon-color: #90A4AE;
    --txt-color: #22252A;
    --btn-bg: #3F51B5;
    --rating-bg: #bec7ec;
    --rating-color: #1538c5;
}
.theme-color-5 {
    --bg-color: #FAF6F2;
    --bg-color-white: #F1EBE5;
    --title-color: #8B3A2D;
    --title2-color: #8B3A2D;
    --icon-color: #A07C73;
    --profil-icon-color: #A07C73;
    --txt-color: #3B3B3B;
    --btn-bg: #C65D48;
    --rating-bg: #e9cdc5;
    --rating-color: #C65D48;
}


.font-title-lobster {
  --title-font: 'Lobster', sans-serif;
}
.font-title-roboto {
  --title-font: 'Roboto', sans-serif;
}
.font-title-gothic {
  --title-font: 'Gothic', sans-serif;
}
.font-title-oswald {
  --title-font: 'Oswald', sans-serif;
}
.font-title-playfair {
  --title-font: 'Playfair Display', sans-serif;
}
.font-title-abril {
  --title-font: 'Abril Fatface', sans-serif;
}
.font-title-poppins {
  --title-font: 'Poppins', sans-serif;
}
.font-title-raleway {
  --title-font: 'Raleway', sans-serif;
}
.font-title-montserrat {
  --title-font: 'Montserrat', sans-serif;
}
.font-title-fredoka {
  --title-font: 'Fredoka', sans-serif;
}
.font-title-acorn {
  --title-font: 'Acorn
      ', sans-serif;
}



.font-text-jakarta {
  --text-font: 'Jakarta', sans-serif;
}
.font-text-opensans {
  --text-font: 'Open Sans', sans-serif;
}
.font-text-georgia {
  --text-font: 'Georgia', serif;
}
.font-text-poppins {
  --text-font: 'Poppins', sans-serif;
}
.font-text-raleway {
  --text-font: 'Raleway', sans-serif;
}
.font-text-montserrat {
  --text-font: 'Montserrat', serif;
}
.font-text-roboto {
  --text-font: 'Roboto', serif;
}


.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, #F7F5F2 50%, #FF6B57 50%);
}
.select-color-theme .color2 {
    background: linear-gradient(to right, #F6F3ED 50%, #0F3D5C 50%);
}
.select-color-theme .color3 {
    background: linear-gradient(to right, #ECE6DD 50%, #18594E 50%);
}
.select-color-theme .color4 {
    background: linear-gradient(to right, #F5F7FA 50%, #283593 50%);
}
.select-color-theme .color5 {
    background: linear-gradient(to right, #FAF6F2 50%, #8B3A2D 50%);
}


@font-face {font-family: 'Gothic'; font-style: normal; font-weight: normal; src: url('/wp-content/themes/moncv-child/fonts/SpecialGothicExpandedOne-Regular.woff2') format('woff2'); font-display: swap;}



body {background: var(--bg-color);}
h1, h2, h3, h4 {font-family: var(--title-font); color: var(--title-color); font-weight: bold;}
h2 {font-size: 40px; line-height: 48px; text-transform: capitalize; margin: 0;}
h2 span {display: block; font-family: var(--title-font) !important; font-size: 14px;}
footer, header, .cta-bottom {display: none !important;}

.template-cvel-02 p, .template-cvel-02 li, .template-cvel-02 span, .template-cvel-02 a, .template-cvel-02 input, .template-cvel-02 textarea  {font-family: var(--text-font); font-weight: 400; color: var(--txt-color);}
.cvel-container {max-width: 1400px; margin: auto; padding: 0 25px;}
.cvel-content {padding-top: 75px;}
.cvel-nav {position: fixed; width: 100%; z-index: 99999;}
.cvel-nav.scrolled .cvel-container {max-width: 100%; top: 10px; background: rgb(255 255 255 / 46%); z-index: 99999; backdrop-filter: blur(20px) saturate(1.7); -webkit-backdrop-filter: blur(20px) saturate(1.7); border-radius: 100px;}
.cvel-nav .cvel-container {display: flex; align-items: center; gap: 40px; justify-content: center; padding: 10px 45px; margin: auto; transition: .3s; width: fit-content; top: 0px; position: relative;}
.cvel-nav .cvel-nav-links {display: flex; gap: 18px;}
.cvel-nav .cvel-nav-name > * {font-family: var(--title-font); text-transform: uppercase; text-decoration: none !important; padding: 10px 0; color: var(--title2-color); font-weight: bold;}
.cvel-nav a {text-decoration: none !important; padding: 10px 0; color: var(--title2-color); font-weight: 500;}
.cvel-nav .cvel-nav-name a, .cvel-nav .cvel-nav-name h1 {font-size: 18px; line-height: 25px; color: var(--title-color); margin: 0;}
.content-cvel-profil {display: flex; align-items: center; gap: 40px; padding: 50px 0;}
.content-cvel-profil .col-cvel-profil img {max-height: 100%; object-fit: cover; overflow: hidden; max-width: 100%; border-radius: 20px; margin: auto; display: block;}
.content-cvel-profil .col-cvel-profil:nth-child(1) {width: 40%;}
.content-cvel-profil .col-cvel-profil:nth-child(2) {width: 60%;}
.cvel-name {font-size: 80px; line-height: 90px; margin-bottom: 0; font-family: var(--title-font); color: var(--title-color); font-weight: bold; text-align: center;}
.content-cvel-profil .cvel-job {font-family: var(--title-font); color: var(--title-color); margin-top: 8px; font-weight: bold; font-size: 40px; line-height: 48px; margin-bottom: 20px;}
.cvel-profil-infos {list-style: none; padding: 0; display: flex; flex-wrap: wrap; row-gap: 10px; column-gap: 25px;}
.cvel-profil-infos li {display: flex; align-items: center; gap: 8px; padding: 0;}
.cvel-profil-infos li i {color: var(--profil-icon-color);}
.cvel-download-cv {background: var(--btn-bg); padding: 10px 30px; text-decoration: none !important; color: white; display: flex; align-items: center; gap: 10px; border-radius: 10px;}
.cvel-rs-btn-cv, .cvel-rs {display: flex; gap: 20px; align-items: center;}
.cvel-rs svg {display: block; width: 22px; height: 22px; fill: var(--profil-icon-color);}
.cvel-xp {margin-bottom: 40px;}
.cvel-xp h2 {position: relative; font-size: 40px; line-height: 48px; text-align: center; text-transform: capitalize; padding-bottom: 40px;}
.content-cvel-xp {width: 100%; display: flex; flex-wrap: wrap; gap: 40px; background: var(--bg-color-white); border-radius: 20px; padding: 40px;}
.bloc-content-cvel-xp {width: calc(50% - 20px);}
.bloc-content-cvel-xp p {margin: 2px 0 0 0; color: var(--title-color);}
.xp-num {color: var(--title-color); font-size: 50px; line-height: 60px; font-weight: bold; opacity: .4; margin-bottom: 10px !important; font-family: var(--title-font);}
.dates-cvel {display: flex; gap: 20px;}
.dates-cvel p:nth-child(2):before {content: ""; width: 1px; height: 100%; background: var(--title-color); left: -10.5px; position: absolute;}
.dates-cvel p {font-family: var(--title-font); position: relative; line-height: 16px; margin-bottom: 5px;}
.cvel-txt-xp-job {font-family: var(--title-font) !important; font-weight: bold !important; font-size: 20px; line-height: 26px;}
.cvel-txt-xp-ese {text-transform: uppercase;}
.txt-xp-cvel ul {margin: 10px 0;}
.txt-xp-cvel li {padding: 0;}
.cvel-xp-forma {padding: 50px 0; display: flex; flex-direction: column; gap: 40px;}
.cvel-real {padding: 50px 0;}
.cvel-real h2 {text-align: center; padding-bottom: 40px;}
.cvel-listing-real {display: flex; flex-wrap: wrap; justify-content: center; gap: 40px;}
.cvel-listing-real .cvel-bloc-real {width: calc(33.33% - 27px); position: relative;}
.cvel-listing-real .cvel-bloc-real h3 {font-size: 20px; margin: 0; color: var(--title-color);}
.cvel-listing-real .cvel-bloc-real .cvel-bloc-real-img img {border-radius: 20px; display: block; height: 300px; object-fit: cover; overflow: hidden; width: 100%; display: block; position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.5s ease; z-index: 0;}
.cvel-bloc-real-img {margin-top: auto; position: relative; overflow: hidden; height: 300px; margin-bottom: 30px;}
.cvel-listing-real .cvel-bloc-real .cvel-bloc-real-img img.active {opacity: 1; z-index: 1;}


.cvel-comp {padding: 50px 0;}
.cvel-comp h2 {text-align: center; font-weight: bold; padding-bottom: 40px;}
.cvel-comp-listing {width: 100%; margin-left: auto; display: flex; flex-wrap: wrap; gap: 40px; position: relative;}
.cvel-comp-listing .cvel-comp-bloc {width: calc(50% - 20px); display: flex; align-items: center; gap: 40px; background: var(--bg-color-white); padding: 40px; border-radius: 20px;}
.cvel-comp-listing .cvel-comp-bloc:nth-child(even) {flex-direction: row-reverse;}
.cvel-comp-listing .cvel-comp-bloc h3 {font-size: 20px; line-height: 28px; margin-bottom: 8px; font-weight: bold; color: var(--title-color); margin-top: 0;}
.cvel-comp-listing .cvel-comp-bloc .desc {margin: 4px 0;}
.cvel-comp-content {width: 100%;}
.cvel-bloc-icon {width: 75px; height: 75px; min-width: 75px; min-height: 75px; display: flex; align-items: center; justify-content: center;}
.cvel-bloc-icon i {font-size: 35px; color: var(--icon-color);}
.rating-note {display: block; width: 100%; height: 16px; background: var(--rating-bg); border-radius: 3px; position: relative; margin-top: 15px;}
.rating-note span {display: none;}
.rating-note:before {content: ""; position: absolute; left: 2px; top: 2px; height: 12px; width: 100%; background: var(--rating-color); border-radius: 3px;}
.rating-note[data-value="1"]:before {width: calc(20% - 4px);}
.rating-note[data-value="2"]:before {width: calc(40% - 4px);}
.rating-note[data-value="3"]:before {width: calc(60% - 4px);}
.rating-note[data-value="4"]:before {width: calc(80% - 4px);}
.rating-note[data-value="5"]:before {width: calc(100% - 4px);}
.cvel-tools {padding: 50px 0;}
#tools .cvel-bloc-icon {margin-bottom: 20px;}
.cvel-tools h2 {text-align: center; padding-bottom: 40px;}
.cvel-listing-tools {display: flex; flex-wrap: wrap; gap: 40px; width: 100%;}
.cvel-listing-tools > div {flex: 1 1 calc(33.333% - 40px); box-sizing: border-box; background: var(--bg-color-white); padding: 40px; border-radius: 20px;}
/* Si seulement 2 éléments */
.cvel-listing-tools > div:nth-last-child(2):first-child,
.cvel-listing-tools > div:nth-last-child(2):first-child ~ div {flex: 1 1 calc(50% - 40px);}
/* Si seulement 1 élément */
.cvel-listing-tools > div:only-child {flex: 1 1 100%;}
.bloc-tools h3 {margin-bottom: 4px; font-weight: bold; color: var(--title-color); font-size: 20px; line-height: 28px; margin-top: 0;}
.bloc-tools .desc {margin-top: 4px;}
.cvel-langues h2 {text-align: center; padding-bottom: 40px;}
.bloc-langue {display: flex; align-items: center; gap: 20px;}
.bloc-langue .content-bloc-tools {width: 100%;}
.cvel-loisirs h2 {text-align: center; padding-bottom: 40px;}
.cvel-loisirs .bloc-tools {text-align: center; display: flex; align-items: center; gap: 20px; justify-content: center;}
.cvel-loisirs .bloc-tools .cvel-bloc-icon {width: auto; height: auto; min-height: auto; min-width: auto;}
.cvel-contact {padding: 50px 0;}
.cvel-contact h2 {text-align: center;}
.cvel-contact form {display: flex; flex-wrap: wrap; max-width: 800px; margin: 40px auto 0 auto; gap: 20px;}
.cvel-contact form .form-group {width: calc(50% - 10px);}
.cvel-contact form .form-group input {width: 100% !important; height: 50px; border: none; border-radius: 6px; background: var(--bg-color-white); padding: 8px 15px !important;}
.cvel-contact form .form-group-full {width: 100%;}
.cvel-contact form .form-group-full textarea {background: var(--bg-color-white); border-top: none; border-right: none; border-left: none; border-image: initial; border-bottom: none; max-width: 100%; min-width: 100%; min-height: 50px; padding: 15px; border-radius: 6px;}
.cvel-contact form .btn-submit {background: var(--btn-bg); border: none; font-size: 16px; line-height: 25px; padding: 10px 30px; border-radius: 10px; color: white; margin: auto; cursor: pointer;}

.carousel-arrow {position: absolute; top: 50%; transform: translateY(-50%); border: none; font-size: 18px; cursor: pointer; z-index: 10; border-radius: 5px; background: rgb(255 255 255 / 58%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.3); width: 40px; height: 40px;}
.carousel-arrow i {color: black !important;}
.carousel-arrow.prev {left: 10px;}
.carousel-arrow.next {right: 10px;}
.carousel-dots {text-align: center; margin-top: 10px; position: absolute; top: 260px; display: flex; justify-content: center; align-items: center; width: 100%; gap: 10px; z-index: 2;}
.carousel-dots span {display: inline-block; width: 10px; height: 10px; border-radius: 50px; cursor: pointer; background: rgb(255 255 255 / 77%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.3);}
.carousel-dots span.active {background: #303030;}
#lightbox {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgb(0 0 0 / 54%); display: flex; justify-content: center; align-items: center; z-index: 99999; backdrop-filter: blur(10px);}
#lightbox .lightbox-content {position: relative; max-width: 1200px; max-height: 90vh; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; margin: 0 30px;}
#lightbox img {max-width: 100%; max-height: 100%; display: block; width: auto; height: auto; border-radius: 10px;}
#lightbox .close {position: absolute; top: 20px; right: 30px; color: black; font-size: 25px; cursor: pointer; border-radius: 5px; background: rgb(255 255 255 / 58%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.3); width: 50px; height: 50px; display: flex; justify-content: center; line-height: 35px; z-index: 9999999; align-items: center;}
#lightbox .lightbox-prev, #lightbox .lightbox-next {position: absolute; top: 50%; transform: translateY(-50%); font-size: 22px; color: black; cursor: pointer; border-radius: 5px; background: rgb(255 255 255 / 58%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.3); width: 50px; height: 50px;}
#lightbox .lightbox-prev {left: 10px; }
#lightbox .lightbox-next {right: 10px; }
#lightbox .close i {pointer-events: none; cursor: pointer;}
button, input, select, textarea {appearance: none; -webkit-appearance: none; -moz-appearance: none;}

@media screen and (max-width: 767px) {
    .cvel-nav {display: none;}
    .content-cvel-profil, .cvel-xp, .cvel-comp, .cvel-tools, .cvel-listing-real, .cvel-listing-tools, .cvel-listing-tools, .bloc-content-cvel-xp {flex-direction: column;}
    .bloc-content-cvel-xp {width: 100%;}
    .content-cvel-xp {flex-direction: column;}
    .content-cvel-xp .bloc-content-cvel-xp:last-child .bloc-txt-xp-cvel {padding-bottom: 0;}
    .dates-cvel p {text-align: left;}
    .content-cvel-profil .col-cvel-profil {width: 100% !important;}
    .content-cvel-profil .col-cvel-profil h1 {text-align: left; margin-bottom: 0 !important;}
    .cvel-listing-real .cvel-bloc-real {width: 100% !important;}
    .cvel-content {padding-top: 0;}
    .cvel-xp h2, .cvel-comp h2, .cvel-tools h2, .cvel-langues h2, .cvel-loisirs h2 {background: var(--bg-color); text-align: left;}
    .cvel-real h2, .cvel-contact h2 {text-align: left;}
    .cvel-listing-tools .bloc-tools, .cvel-comp-listing .cvel-comp-bloc, .cvel-contact form .form-group {width: 100%;}
    .cvel-xp-forma {padding: 0px;}
    h2 {font-size:26px !important; line-height: 30px !important;}
    .cvel-txt-xp-job {font-size: 18px;}
    .content-cvel-profil {padding-top: 0;}
    .content-cvel-profil .cvel-job {font-size: 28px; line-height: 36px;}
    .cvel-rs-btn-cv {flex-direction: column; align-items: flex-start;}
    .cvel-comp-listing .cvel-comp-bloc {flex-direction: column-reverse !important; align-items: flex-start;}
    .cvel-listing-tools, .cvel-comp-listing {gap: 20px;}
    .cvel-tools {padding: 25px 0;}
    .cvel-name {font-size: 35px !important; line-height: 42px !important; margin-bottom: 35px !important;}

    
}