#vc-popup-overlay {
display: none;
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(10,10,8,0.82);
z-index: 99999;
align-items: center;
justify-content: center;
font-family: ‘Inter’, sans-serif;
}
#vc-popup-overlay.show {
display: flex;
}
#vc-popup-box {
background: #1A1A18;
border: 1px solid #3a3830;
max-width: 480px;
width: 90%;
padding: 48px 40px 40px;
position: relative;
text-align: center;
animation: vcFadeIn 0.5s ease;
}
@keyframes vcFadeIn {
from { opacity:0; transform:translateY(20px); }
to { opacity:1; transform:translateY(0); }
}
#vc-popup-close {
position: absolute;
top: 14px; right: 18px;
color: #6B6B60;
font-size: 1.4rem;
cursor: pointer;
background: none;
border: none;
line-height: 1;
transition: color 0.2s;
}
#vc-popup-close:hover { color: #c8b89a; }
#vc-popup-eyebrow {
color: #c8b89a;
font-size: 0.65rem;
letter-spacing: 0.25em;
text-transform: uppercase;
margin-bottom: 14px;
}
#vc-popup-title {
color: #ffffff;
font-size: clamp(1.4rem, 3vw, 2rem);
font-weight: 300;
line-height: 1.2;
letter-spacing: -0.02em;
margin-bottom: 12px;
}
#vc-popup-subtitle {
color: #a09880;
font-size: 0.875rem;
line-height: 1.7;
margin-bottom: 28px;
}
#vc-popup-list {
list-style: none;
padding: 0; margin: 0 0 28px;
text-align: left;
display: inline-block;
}
#vc-popup-list li {
color: #e8e0d4;
font-size: 0.82rem;
line-height: 2;
padding-left: 20px;
position: relative;
}
#vc-popup-list li::before {
content: ‘—’;
position: absolute;
left: 0;
color: #c8b89a;
}
#vc-popup-divider {
border: none;
border-top: 1px solid #2e2e2a;
margin: 0 0 24px;
}
#vc-popup-form {
display: flex;
flex-direction: column;
gap: 12px;
}
#vc-popup-form input {
background: #2C2C2A;
border: 1px solid #3a3830;
color: #ffffff;
padding: 12px 16px;
font-size: 0.875rem;
font-family: ‘Inter’, sans-serif;
outline: none;
border-radius: 0;
transition: border-color 0.2s;
}
#vc-popup-form input::placeholder { color: #6B6B60; }
#vc-popup-form input:focus { border-color: #c8b89a; }
#vc-popup-btn {
background: #c8b89a;
color: #1A1A18;
border: none;
padding: 14px 24px;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
cursor: pointer;
font-family: ‘Inter’, sans-serif;
transition: background 0.2s, color 0.2s;
}
#vc-popup-btn:hover { background: #ffffff; }
#vc-popup-note {
color: #6B6B60;
font-size: 0.7rem;
margin-top: 10px;
line-height: 1.5;
}
#vc-popup-success {
display: none;
color: #c8b89a;
font-size: 1rem;
font-weight: 300;
line-height: 1.7;
padding: 12px 0;
}
#vc-popup-skip {
color: #6B6B60;
font-size: 0.7rem;
background: none;
border: none;
cursor: pointer;
margin-top: 16px;
text-decoration: underline;
font-family: ‘Inter’, sans-serif;
display: block;
width: 100%;
text-align: center;
transition: color 0.2s;
}
#vc-popup-skip:hover { color: #a09880; }
(function(){
var COOKIE = ‘vc_popup_seen’;
function getCookie(n){ var v=’; ‘+document.cookie,p=v.split(‘; ‘+n+’=’); if(p.length===2) return p.pop().split(‘;’).shift(); }
function setCookie(n,v,d){ var e=new Date(); e.setTime(e.getTime()+(d*24*60*60*1000)); document.cookie=n+’=’+v+’;expires=’+e.toUTCString()+’;path=/’; }
function vcPopupShow(){
if(getCookie(COOKIE)) return;
var overlay = document.getElementById(‘vc-popup-overlay’);
if(overlay) overlay.classList.add(‘show’);
}
window.vcPopupClose = function(){
var overlay = document.getElementById(‘vc-popup-overlay’);
if(overlay) overlay.classList.remove(‘show’);
setCookie(COOKIE,’1′,7);
};
window.vcPopupSubmit = function(e){
e.preventDefault();
var prenom = document.getElementById(‘vc-popup-prenom’).value;
var email = document.getElementById(‘vc-popup-email’).value;
// Envoi via mailto (fallback simple)
var subject = encodeURIComponent(‘[Vue Claire] Guide Repose tes yeux – ‘ + prenom);
var body = encodeURIComponent(‘Prénom : ‘ + prenom + ‘\nEmail : ‘ + email + ‘\n\nMerci de m\’envoyer le guide PDF.’);
window.open(‘mailto:vueclaire.optique@gmail.com?subject=’+subject+’&body=’+body);
document.getElementById(‘vc-popup-form-wrapper’).style.display = ‘none’;
document.getElementById(‘vc-popup-success’).style.display = ‘block’;
setCookie(COOKIE,’1′,30);
setTimeout(vcPopupClose, 3000);
};
// Fermeture en cliquant sur l overlay
document.addEventListener(‘DOMContentLoaded’, function(){
var overlay = document.getElementById(‘vc-popup-overlay’);
var btn = document.getElementById(‘vc-popup-close’);
if(overlay) overlay.addEventListener(‘click’, function(e){ if(e.target===overlay) vcPopupClose(); });
if(btn) btn.addEventListener(‘click’, vcPopupClose);
// Apparition apres 5 secondes
setTimeout(vcPopupShow, 5000);
});
})();
Vue Claire, opticien indépendant au 46 rue de Clichy Paris 9ème. 