/* Modèle « Nuit » : repris de l'ancienne preprod.moncv.com (templates/cv-4, template-04.css).
   Couleurs : .theme-color-N (choix de l'éditeur) ; polices : --title-font et --text-font (Render\\Cv::style). */
:root {
    --bg-color: #0F0F0F;
    --secondary-color: #7d99d3;
    --rating-bg: #495670;
    --button-color: white;
    --title-color: white;
    --txt-color: #d9d9d9;
    --bloc-bg: rgb(40 40 40 / 55%);
    --bloc-border: #3b3b3b;
    --title-font: 'Jakarta', sans-serif;
    --text-font: 'Jakarta', sans-serif;
    --opacity-bulle: .7;
}
.theme-color-2 {
    --bg-color: #0F0F0F;
    --secondary-color: #CC192A;
    --rating-bg: #681b24;
    --button-color: white;
    --title-color: white;
    --txt-color: #d9d9d9;
    --bloc-bg: rgb(40 40 40 / 55%);
    --opacity-bulle: .7;
}
.theme-color-3 {
    --bg-color: #0F0F0F;
    --secondary-color: #DEFF00;
    --rating-bg: #5b6622;
    --button-color: black;
    --title-color: white;
    --txt-color: #d9d9d9;
    --bloc-bg: rgb(40 40 40 / 55%);
    --opacity-bulle: .7;
}
.theme-color-4 {
    --bg-color: #0F0F0F;
    --secondary-color: #8748E1;
    --rating-bg: #492e71;
    --button-color: white;
    --title-color: white;
    --txt-color: #d9d9d9;
    --bloc-bg: rgb(40 40 40 / 55%);
    --opacity-bulle: .7;
}
.theme-color-5 {
    --bg-color: #fafbf6;
    --secondary-color: #6E6CEC;
    --rating-bg: #bfc0e7;
    --button-color: white;
    --title-color: black;
    --txt-color: #535353;
    --bloc-bg: rgb(0 0 0 / 8%);
    --bloc-border: #d2d2d2;
    --opacity-bulle: .2;
}

.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, #0F0F0F 50%, #7d99d3 50%);
}
.select-color-theme .color2 {
    background: linear-gradient(to right, #0F0F0F 50%, #CC192A 50%);
}
.select-color-theme .color3 {
    background: linear-gradient(to right, #0F0F0F 50%, #DEFF00 50%);
}
.select-color-theme .color4 {
    background: linear-gradient(to right, #0F0F0F 50%, #8748E1 50%);
}
.select-color-theme .color5 {
    background: linear-gradient(to right, #fafbf6 50%, #6E6CEC 50%);
}

body {background: var(--bg-color);}
h1, h2, h3, h4 {color: var(--title-color); font-family: var(--title-font);}
h2 {font-size: 22px; line-height: 32px; margin: 0 0 20px 0; font-weight: bold;}
footer, header, .cta-bottom {display: none !important;}
p, li, span, a {color: var(--txt-color); font-family: var(--text-font);}
.template-cvel-04 {position: relative; z-index: 1;}
.cvel-bulle1 {position: fixed; display: block; width: 300px; height: 200px; background: var(--secondary-color); left: 66%; top: 21%; border-radius: 1000px; filter: blur(54px); opacity: var(--opacity-bulle); z-index: 0;}
.cvel-bulle2 {position: fixed; display: block; width: 300px; height: 500px; background: var(--secondary-color); left: 16%; top: 68%; border-radius: 1000px; filter: blur(54px); opacity: var(--opacity-bulle); z-index: 0; transform: rotate(332deg);}
.cvel-sect {display: flex; gap: 25px; padding-bottom: 25px;}
.cvel-bloc {background: var(--bloc-bg); border-radius: 20px; overflow: hidden; padding: 25px; border: solid 1px var(--bloc-border); backdrop-filter: blur(10px);}
.cvel-sect-wrap {flex-wrap: wrap;}
.cvel-sect-wrap > div {flex: 1 1 calc(33.333% - 20px);}

/* MENU */
.cvel-container {max-width: 1400px; margin: auto; padding: 0 25px;}
.cvel-content {padding-top: 75px;}
.cvel-nav {position: fixed; width: 100%; background: var(--bg-color); z-index: 99999; transition: .4s;}
.cvel-nav.scrolled {background: var(--bg-color);}
.cvel-nav .cvel-container {display: flex; align-items: center; gap: 40px; padding-top: 15px; padding-bottom: 15px; margin: auto; transition: .3s;}
.cvel-nav .cvel-nav-links {margin-left: auto; display: flex; gap: 25px;}
.cvel-nav a, .cvel-nav h1 {text-decoration: none !important; padding: 10px 0; color: var(--title-color); font-size: 14px;}
.cvel-nav .cvel-nav-name a, .cvel-nav .cvel-nav-name h1 {font-size: 18px; line-height: 25px; font-weight: bold; margin: 0;}

/* PROFIL */
.cvel-profil-txt {flex: 1 1 calc(100% - 400px);}
.cvel-profil-img {flex: 400px;}
.cvel-profil-img img {height: 100%; object-fit: cover; overflow: hidden; border-radius: 20px; margin: auto; display: block;}
.cvel-profil-txt .cvel-profil-infos {padding: 0; list-style: none; display: flex; flex-wrap: wrap; column-gap: 15px; row-gap: 5px;}
.cvel-profil-txt .cvel-profil-infos li {display: flex; align-items: center; gap: 8px; padding: 0;}
.cvel-profil-txt .cvel-profil-infos li i {color: var(--secondary-color);}
.cvel-rs-download {display: flex; gap: 25px; align-items: center;}
.cvel-rs-download .cvel-download-cv {text-decoration: none !important; background: var(--secondary-color); padding: 10px 30px; border-radius: 50px; font-weight: 600; color: var(--button-color); display: flex; align-items: center; column-gap: 10px;}
.cvel-profil-txt .col-cvel-profil:last-child {width: 70%; display: flex; flex-direction: column; justify-content: center;}
.cvel-profil-txt h1, .cvel-name {font-size: 34px; line-height: 44px; margin-bottom: 0; background: linear-gradient(90deg, var(--title-color) 0%, var(--secondary-color) 150%); background: -webkit-linear-gradient(90deg, var(--title-color) 0%, var(--secondary-color) 150%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: bold;}
.cvel-profil-txt .cvel-job {font-size: 22px; color: var(--title-color); margin-top: 0; margin-bottom: 8px;}
.cvel-rs {display: flex; gap: 10px;}
.cvel-rs a {color: black; letter-spacing: 1px; font-size: 14px; position: relative;}
.cvel-rs svg {display: block; width: 22px; height: 22px; fill: var(--title-color);}
.cvel-about p, .cvel-about li {line-height: 26px; font-weight: 300;}

/* EXPERIENCES / FORMATIONS */
.cvel-xp {flex: 1;}
.content-cvel-xp {width: 100%; display: flex; flex-direction: column; gap: 25px;}
.bloc-content-cvel-xp p {margin: 0;}
.dates-cvel {position: relative; min-width: 150px;}
.dates-cvel p {font-size: 14px; font-style: italic;}
.cvel-txt-xp-job {font-size: 18px; line-height: 24px; font-weight: bold; padding-bottom: 5px; color: var(--title-color);}
.cvel-txt-xp-ese {font-size: 16px; line-height: 22px; font-style: italic;}
.txt-xp-cvel {padding-top: 10px;}
.txt-xp-cvel ul {margin: 5px 0;}
.txt-xp-cvel li {padding: 0;}
.dates-cvel {display: flex; gap: 18px;}
.dates-cvel p:nth-child(2):before {content:"-"; position: relative; left: -9px;}
.txt-xp-cvel p, .txt-xp-cvel li {line-height: 22px; font-weight: 300; margin: 0 0 10px 0;}

/* REALISATIONS */
.cvel-real {margin-bottom: 25px;}
.cvel-real h2 {text-align: center;}
.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: 16px; margin: 0; font-weight: bold;}
.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: 20px;}
.cvel-listing-real .cvel-bloc-real .cvel-bloc-real-img img.active {opacity: 1; z-index: 1;}
.cvel-desc-real p {margin: 10px 0;}

/* COMPÉTENCES */
.cvel-comp {flex: 1 1 calc(66.666% - 20px) !important;}
.cvel-comp-listing {width: 100%; position: relative; display: flex; flex-direction: column; gap: 25px;}
.cvel-comp-listing .cvel-comp-bloc {width: 100%; display: flex; flex-direction: column;}
.cvel-comp-listing .cvel-comp-bloc h3 {font-size: 16px; line-height: 24px; margin-bottom: 0px; margin-top: 0; font-weight: 600; color: var(--title-color);}
.cvel-comp-listing .cvel-comp-bloc .desc {margin: 4px 0; font-size: 15px; line-height: 20px;}
.cvel-bloc-icon {width: 75px; height: 75px; min-width: 75px; min-height: 75px; display: flex; align-items: center; justify-content: center; background: #f1f1f1; border-radius: 10px; padding: 8px;}
.cvel-bloc-icon i {font-size: 35px; color: black;}
.cvel-bloc-icon-txt {display: flex; gap: 25px; align-items: center;}
.cvel-bloc-comp-txt {display: flex; flex-direction: column; justify-content: center; width: 100%;}

/* OUTILS */
.cvel-listing-tools {width: 100%; display: flex; flex-direction: column; gap: 25px;}
.cvel-listing-tools .bloc-tools {width: 100%;}
.bloc-tools h3 {font-size: 16px; line-height: 24px; margin-bottom: 0; margin-top: 0; font-weight: 600; color: var(--title-color);}
.bloc-tools .desc {margin: 4px 0; font-size: 15px; line-height: 20px;}
.rating-note span {display: none;}
.rating-note {display: block; width: 100%; max-width: 300px; height: 8px; background: var(--rating-bg); position: relative; margin-top: 10px;}
.rating-note:before {content: ""; position: absolute; left: 0px; top: -4px; height: calc(100% + 8px); width: 100%;  background: var(--secondary-color);}

.rating-note[data-value="1"]:before {width: 10%;}
.rating-note[data-value="2"]:before {width: 20%;}
.rating-note[data-value="3"]:before {width: 30%;}
.rating-note[data-value="4"]:before {width: 40%;}
.rating-note[data-value="5"]:before {width: 50%;}
.rating-note[data-value="6"]:before {width: 60%;}
.rating-note[data-value="7"]:before {width: 70%;}
.rating-note[data-value="8"]:before {width: 80%;}
.rating-note[data-value="9"]:before {width: 90%;}
.rating-note[data-value="10"]:before {width: 100%;}

/* LANGUES */
.bloc-langue .content-bloc-tools {width: 100%;}
.cvel-loisirs .cvel-listing-tools .bloc-tools, .cvel-langues .cvel-listing-tools .bloc-tools {width: 100%; display: flex; align-items: center; gap: 25px;}

/* LOISIRS */

/* CONTACT */
.cvel-contact {margin-bottom: 25px;}
.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, .cvel-contact form .form-group input[type="email"] {width: 100% !important; height: 50px; border: none; border-radius: 10px; background: #f1f1f1; padding: 10px 15px !important;}
.cvel-contact form .form-group-full {width: 100%;}
.cvel-contact form .form-group-full textarea {background: #f1f1f1; border: none !important; max-width: 100%; min-width: 100%; min-height: 50px; border-radius: 10px; padding: 15px !important;}
.cvel-contact form .btn-submit {background: var(--secondary-color); border: none; font-size: 16px; line-height: 25px; padding: 10px 30px; border-radius: 10px; color: var(--button-color); 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 (min-width: 767px) {
    .cvel-comp .rating-note {display: block; width: 70px; height: 70px; border: solid 5px var(--rating-bg); border-radius: 100%; position: relative; margin-top: 10px; margin-left: auto; min-width: 70px; min-height: 70px; background: transparent;}
    .cvel-comp .rating-note:before {content: ""; position: absolute; left: -10px; top: -10px; height: calc(100% + 20px); width: calc(100% + 20px); border-radius: 100%; background: conic-gradient(var(--secondary-color) 0deg 324deg, transparent 324deg 360deg); mask: radial-gradient(circle, #0000 26px, var(--secondary-color) 0); transform: rotate(180deg);}
    
    /* 1/10 = 36° */
    .cvel-comp .rating-note[data-value="1"]:before { background: conic-gradient(var(--secondary-color) 0deg 36deg, transparent 36deg 360deg); }
    /* 2/10 = 72° */
    .cvel-comp .rating-note[data-value="2"]:before { background: conic-gradient(var(--secondary-color) 0deg 72deg, transparent 72deg 360deg); }
    /* 3/10 = 108° */
    .cvel-comp .rating-note[data-value="3"]:before { background: conic-gradient(var(--secondary-color) 0deg 108deg, transparent 108deg 360deg); }
    /* 4/10 = 144° */
    .cvel-comp .rating-note[data-value="4"]:before { background: conic-gradient(var(--secondary-color) 0deg 144deg, transparent 144deg 360deg); }
    /* 5/10 = 180° */
    .cvel-comp .rating-note[data-value="5"]:before { background: conic-gradient(var(--secondary-color) 0deg 180deg, transparent 180deg 360deg); }
    /* 6/10 = 216° */
    .cvel-comp .rating-note[data-value="6"]:before { background: conic-gradient(var(--secondary-color) 0deg 216deg, transparent 216deg 360deg); }
    /* 7/10 = 252° */
    .cvel-comp .rating-note[data-value="7"]:before { background: conic-gradient(var(--secondary-color) 0deg 252deg, transparent 252deg 360deg); }
    /* 8/10 = 288° */
    .cvel-comp .rating-note[data-value="8"]:before { background: conic-gradient(var(--secondary-color) 0deg 288deg, transparent 288deg 360deg); }
    /* 9/10 = 324° */
    .cvel-comp .rating-note[data-value="9"]:before { background: conic-gradient(var(--secondary-color) 0deg 324deg, transparent 324deg 360deg); }
    /* 10/10 = 360° → plein */
    .cvel-comp .rating-note[data-value="10"]:before { background: conic-gradient(var(--secondary-color) 0deg 360deg);}
}
@media screen and (max-width: 767px) {
    .cvel-nav {display: none;}
    .cvel-sect {flex-direction: column;}
    .cvel-sect .cvel-bloc {width: 100%;}
    .cvel-content {padding-top: 25px;}
    .cvel-profil-txt h1 {text-align: left; margin-top: 0; margin-bottom: 5px !important; font-size: 30px !important;}
    .cvel-rs-download {padding-top: 25px; flex-direction: column; align-items: flex-start;}
    .cvel-rs-download .cvel-download-cv {width: 100%; justify-content: center;}
    h2 {font-size: 22px !important; line-height: 30px !important;}
    .cvel-listing-real {flex-direction: column;}
    .cvel-listing-real .cvel-bloc-real {width: 100% !important;}
    .cvel-listing-real .cvel-bloc-real .cvel-bloc-real-img img, .cvel-bloc-real-img {height: 200px;}
    .carousel-dots {top: 160px !important;}
    .cvel-bloc-icon-txt {flex-direction: column; align-items: flex-start; gap: 15px;}
    .cvel-profil-img img {width: 100%;}
    .cvel-bloc-icon-txt > .rating-note {margin-top: 0;}
    .cvel-comp-listing, .cvel-listing-tools {gap: 40px;}
    .cvel-contact form {flex-direction: column;}
    .cvel-contact form .form-group, .cvel-contact form .btn-submit {width: 100%;}
    .cvel-bulle1 {top: 10%;}
    .cvel-bulle2 {width: 200px; height: 300px; left: 0%;}
    
}

/* --- MonCV (moteur) : socle repris du thème de l'ancienne preprod, et éléments que l'ancien modèle n'avait pas --- */
* { font-family: var(--text-font, 'Jakarta'), sans-serif; box-sizing: border-box; }
h1, h2, h3, h4 { font-family: var(--title-font, 'Jakarta'), sans-serif; }
body { margin: 0; font-size: 15px; line-height: 1.6em; }
/* book.css (shared by every CV) sets a white background, Montserrat and #333: the old templates did not have it. */
body.folio-book.folio-cvpage { background: var(--bg-color, var(--secondary-color, #fff)); color: var(--txt-color, #52606d); font: 400 15px/1.6em var(--text-font, 'Jakarta'), sans-serif; }
.template-cvel-04 .cvel-tile, .template-cvel-04 .cvel-initials, .template-cvel-04 .cvel-bloc-icon { color: #111; }
.template-cvel-04 .cvel-initials { background: var(--secondary-color, #7d99d3); }
.template-cvel-01 .cvel-initials { border-radius: 50%; background: var(--secondary-color, #fff); color: var(--primary-color, #1b2233); }
img { max-width: 100%; }
input, textarea, select { font-size: 16px !important; }
.fa-icon { width: 1em; height: 1em; vertical-align: -.125em; flex: none; }
.cvel-initials { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; border-radius: inherit; background: var(--primary-color, var(--btn-bg, var(--title-color, #3c5cff))); color: #fff; font-size: 64px; font-weight: 700; }
.cvel-tile { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-width: 34px; min-height: 34px; font-weight: 700; font-size: 15px; letter-spacing: .02em; }
.cvel-bloc-icon .fa-icon, .cvel-bloc-competence-img .fa-icon { width: 22px; height: 22px; }
.cvel-bloc-competence-content span.cvel-level:before, .cvel-list-competence .cvel-bloc-competence .cvel-bloc-competence-content span.cvel-level:before { width: calc(var(--cvel-level) - 4px) !important; }
.cvel-bloc-real-img img { cursor: zoom-in; }
.cvel-bloc-real-img img:not(.active) { display: none; }
.cvel-video a { position: relative; display: block; }
.cvel-play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(0, 0, 0, .55); }
.cvel-play::after { content: ""; position: absolute; left: 26px; top: 20px; border-style: solid; border-width: 12px 0 12px 18px; border-color: transparent transparent transparent #fff; }
.cvel-bloc-real h3 small { display: block; font-size: .75em; font-weight: 400; opacity: .7; }
.cvel-real-link a { text-decoration: underline; }
.cvel-quotes { display: grid; gap: 16px; }
.cvel-quote { margin: 0; padding: 18px 22px; border-left: 3px solid var(--primary-color, var(--title-color, currentColor)); }
.cvel-quote p { margin: 0 0 8px; font-style: italic; }
.folio-contact__hp { position: absolute; left: -9999px; }
.folio-contact__status { grid-column: 1 / -1; margin: 10px 0 0; }
.folio-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Icons (Font Awesome, inline SVG) and logos chosen in the editor (Render\CvIcons, Render\Logos). */
.cv-ico { display: block; width: 35px; height: 35px; fill: currentColor; }
.cvel-bloc-icon .cv-ico { color: var(--icon-color, #111); }
.cvel-loisirs .cvel-bloc-icon .cv-ico { width: 30px; height: 30px; }
.cvel-bloc-competence-img .cv-ico { width: 38px; height: 38px; color: var(--icon-color, #111); }
.cvel-logo { display: block; width: 100%; height: 100%; max-width: 56px; max-height: 56px; object-fit: contain; }
.cvel-logo--flag { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
/* The author of a testimonial (the old templates hid every <footer>). */
.cvel-quote footer { display: block !important; font-size: .92em; opacity: .85; }