/* EY-Voyage International — styles communs (accueil + connexion) */
:root{
  --blanc:#fff;
  --or:#f2c14e;
  --nuit:#07124a;
  --verre:rgba(255,255,255,.13);
  --verre-fort:rgba(255,255,255,.22);
  --filet:rgba(255,255,255,.28);
  --duree:.5s;
  --police:"Roboto",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--nuit);color:var(--blanc);font-family:var(--police);font-size:18px;font-weight:400;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg{display:block}
button,input{font-family:inherit}
[hidden]{display:none!important}

/* ---- Fond : diaporama de photos de voyage sous un voile bleu ---- */
.fond{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:linear-gradient(#07124a,#12308f 45%,#2a5fd6)}
.diapo{position:absolute;inset:-4%;background-size:cover;background-position:center;opacity:0;transition:opacity 1.8s ease-in-out;will-change:opacity,transform}
.diapo.active{opacity:1;animation:approche 9s linear forwards}
@keyframes approche{from{transform:scale(1)}to{transform:scale(1.08)}}
.voile{position:absolute;inset:0;background:
  radial-gradient(70% 60% at 50% 0%,rgba(5,14,66,.55),transparent 70%),
  linear-gradient(rgba(8,24,96,.64),rgba(16,52,160,.5) 50%,rgba(10,30,110,.64))}
.fond canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.8}
.points{position:fixed;left:50%;bottom:70px;z-index:2;transform:translateX(-50%);display:flex;gap:8px}
.points i{width:26px;height:3px;background:rgba(255,255,255,.35);transition:background var(--duree),width var(--duree)}
.points i.active{background:var(--blanc);width:44px}

.page{position:relative;z-index:1;min-height:100svh;display:flex;flex-direction:column;padding-bottom:56px}
.conteneur{width:100%;max-width:1170px;margin:0 auto;padding:0 30px}

/* ---- Logo ---- */
.entete{text-align:center;padding:clamp(16px,3.2vh,36px) 0 0}
.entete img{display:inline-block;width:clamp(150px,min(19vw,23vh),250px);height:auto;filter:drop-shadow(0 10px 30px rgba(3,8,40,.55))}

/* ---- Boutons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;height:58px;padding:0 30px;border:3px solid var(--blanc);background:var(--blanc);color:var(--nuit);font-size:15px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:color var(--duree),background-color var(--duree),border-color var(--duree),box-shadow var(--duree)}
.btn svg{width:22px;height:12px;transition:transform var(--duree)}
.btn:hover,.btn:focus-visible{background:var(--or);border-color:var(--or);outline:none;box-shadow:0 14px 40px rgba(3,8,40,.4)}
.btn:hover svg,.btn:focus-visible svg{transform:translateX(6px)}

/* ---- Accueil ---- */
.centre{flex:1;display:flex;align-items:center;padding:clamp(14px,2.6vh,30px) 0 clamp(20px,4vh,44px)}
.centre .conteneur{display:flex;align-items:center;justify-content:space-between;gap:56px}
.presentation{max-width:680px;text-shadow:0 4px 26px rgba(3,8,40,.4)}
.surtitre{font-size:16px;font-weight:300;letter-spacing:.14em;text-transform:uppercase}
.surtitre b{font-weight:700;color:var(--or)}
.presentation h1{font-size:clamp(34px,min(4.3vw,7.6vh),64px);font-weight:900;line-height:1.02;letter-spacing:-.025em;margin:clamp(8px,1.6vh,14px) 0 clamp(12px,2.6vh,22px)}
.presentation h1 em{font-style:normal;color:var(--or)}
.presentation .texte{max-width:520px;margin-bottom:clamp(18px,3.6vh,32px)}
.presentation .btn{text-shadow:none}
.mention{margin-top:16px;font-size:14px;font-weight:300;opacity:.9}

.panneau{width:440px;max-width:100%;flex:none;border:1px solid var(--filet);background:var(--verre);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 30px 80px rgba(3,8,40,.35)}
.atout{display:grid;grid-template-columns:54px 1fr;gap:18px;align-items:start;padding:clamp(16px,2.8vh,24px) 26px;transition:background var(--duree)}
.atout+.atout{border-top:1px solid var(--filet)}
.atout:hover{background:var(--verre)}
.atout .icone{width:54px;height:54px;display:grid;place-items:center;border:1px solid var(--blanc);border-radius:50%;transition:background var(--duree),color var(--duree),border-color var(--duree)}
.atout:hover .icone{background:var(--or);border-color:var(--or);color:var(--nuit)}
.atout .icone svg{width:24px;height:24px}
.atout h2{font-size:18px;font-weight:700;line-height:1.25;margin-bottom:4px}
.atout p{font-size:15px;font-weight:300;line-height:1.45}

/* ---- Connexion ---- */
.retour-accueil{position:absolute;left:30px;top:30px;z-index:3;display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:500;transition:color var(--duree)}
.retour-accueil svg{width:22px;height:12px;transform:rotate(180deg)}
.retour-accueil:hover{color:var(--or)}
.centre.seul .conteneur{justify-content:center}
.carte{width:440px;max-width:100%;padding:clamp(20px,3.4vh,34px) 34px clamp(18px,3vh,30px);border:1px solid var(--filet);background:var(--verre);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 30px 80px rgba(3,8,40,.4)}
.carte h1{font-size:clamp(26px,4.2vh,34px);font-weight:900;letter-spacing:-.02em;line-height:1.1}
.carte .sous-titre{font-size:15px;font-weight:300;margin:4px 0 clamp(14px,2.6vh,24px)}
.bascule{display:grid;grid-template-columns:1fr 1fr;border:3px solid var(--blanc);margin-bottom:clamp(12px,2.4vh,22px)}
.bascule input{position:absolute;opacity:0;pointer-events:none}
.bascule label{display:grid;place-items:center;height:clamp(36px,5.4vh,44px);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background var(--duree),color var(--duree)}
.bascule label:hover{background:var(--verre)}
.bascule input:checked+label{background:var(--blanc);color:var(--nuit)}
.bascule input:focus-visible+label{outline:2px solid var(--or);outline-offset:3px}
.rang{margin-bottom:clamp(10px,1.8vh,16px)}
.rang label{display:block;font-size:13px;font-weight:300;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
.rang input{width:100%;height:clamp(42px,6.4vh,52px);padding:0 14px;border:3px solid var(--blanc);background:var(--verre);color:var(--blanc);font-size:15px;transition:background var(--duree),box-shadow var(--duree)}
.rang input:focus{outline:none;background:var(--verre-fort);box-shadow:0 0 0 4px rgba(255,255,255,.18)}
.rang input::placeholder{color:rgba(255,255,255,.7)}
.carte .btn{width:100%;margin-top:6px;height:clamp(46px,7vh,58px)}
.message:empty{display:none}
.entete.petit img{width:clamp(100px,min(13vw,15vh),170px)}
.centre.seul{padding-top:clamp(8px,1.6vh,24px)}
body.connexion .points{display:none}
.liens-carte{display:flex;justify-content:space-between;gap:12px;margin-top:16px;font-size:14px}
.liens-carte a{border-bottom:1px solid var(--filet);transition:color var(--duree),border-color var(--duree)}
.liens-carte a:hover{color:var(--or);border-color:var(--or)}
.message{margin-top:12px;font-size:14px;font-weight:500;color:var(--or)}

/* ---- Pied fixe ---- */
.pied{position:fixed;left:0;bottom:0;width:100%;z-index:2;border-top:3px solid rgba(255,255,255,.25);background:rgba(7,18,74,.3);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.pied .conteneur{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:50px}
.pied p{font-size:13px}
.pied .liens{display:flex;align-items:center;gap:6px}
.pied .mail{font-size:13px;margin-right:10px;transition:color var(--duree)}
.pied .mail:hover{color:var(--or)}
.pied .rond{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--blanc);border-radius:50%;transition:color var(--duree),background-color var(--duree),border-color var(--duree)}
.pied .rond svg{width:14px;height:14px}
.pied .rond:focus-visible{outline:none}
.pied .rond.whatsapp:hover,.pied .rond.whatsapp:focus-visible{background:#25d366;border-color:#25d366}
.pied .rond.facebook:hover,.pied .rond.facebook:focus-visible{background:#3b5999;border-color:#3b5999}
.pied .rond.instagram:hover,.pied .rond.instagram:focus-visible{background:#d6336c;border-color:#d6336c}
.pied .rond.tiktok:hover,.pied .rond.tiktok:focus-visible{background:#111;border-color:#111}

/* ---- Entrée en scène ---- */
.entre{opacity:0;transform:translateY(18px);animation:monte .9s cubic-bezier(.2,.7,.2,1) forwards}
.entre.d1{animation-delay:.15s}.entre.d2{animation-delay:.3s}
@keyframes monte{to{opacity:1;transform:none}}

@media (max-width:1024px){
  .centre .conteneur{flex-direction:column;gap:38px}
  .presentation{text-align:center;max-width:640px}
  .presentation .texte{margin-inline:auto}
  .panneau{width:560px}
  .entete{padding-top:28px}
}
@media (max-width:768px){
  .page{padding-bottom:0}
  .pied{position:static}
  .pied .conteneur{flex-direction:column;justify-content:center;padding-block:14px;text-align:center}
  .points{display:none}
  .retour-accueil{left:20px;top:18px}
}
@media (max-width:480px){
  body{font-size:16px}
  .conteneur{padding:0 20px}
  .surtitre{font-size:13px}
  .presentation .btn{width:100%}
  .atout{grid-template-columns:46px 1fr;gap:14px;padding:20px 18px}
  .atout .icone{width:46px;height:46px}
  .carte{padding:26px 20px 24px}
  .pied .liens{flex-wrap:wrap;justify-content:center}
  .pied .mail{flex-basis:100%;margin:0 0 6px}
}
@media (prefers-reduced-motion:reduce){
  .entre{animation:none;opacity:1;transform:none}
  .diapo.active{animation:none}
}