/* ==========================================================
   Bluby SARL — feuille de style partagée
   Palette : #023859 (marine) · #26658C (bleu) · #7ec8d4 (ciel)
             #A7EBF2 (pâle) · #F4F7F9 (fond) · #DCE8EF (bordures)
   ========================================================== */

*{box-sizing:border-box;}
body{
  margin:0;
  background:#F4F7F9;
  color:#1A2535;
  font-family:'DM Sans',sans-serif;
  overflow-x:hidden;
}
a{color:#26658C;text-decoration:none;}
a:hover{color:#1E6A8C;}
input,textarea,select,button{font-family:'DM Sans',sans-serif;}
::placeholder{color:#9DB2BE;}
img{max-width:100%;}

@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes floatY2{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}}

/* ---------- reveal-on-scroll ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease;}
.reveal.visible{opacity:1;transform:none;}

/* ---------- gradient wordmark logo (no image needed) ---------- */
.wordmark{
  font-family:'Playfair Display',serif;font-weight:600;letter-spacing:3px;
  background:linear-gradient(135deg,#26658C,#7ec8d4);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  display:inline-block;
}
.wordmark-sub{font-size:9px;letter-spacing:3px;text-transform:uppercase;color:#8AA0B0;margin-top:1px;}

/* ---------- ambient orbs ---------- */
.hero-orb{position:absolute;border-radius:50%;pointer-events:none;filter:blur(60px);opacity:.25;}
@keyframes orbFloat{0%,100%{transform:translate(0,0);}50%{transform:translate(30px,-20px);}}

/* ---------- animated Bluby mascot (inline SVG, no external asset needed) ---------- */
.bluby-float{animation:drift 7s ease-in-out infinite;display:inline-block;}
@keyframes drift{
  0%,100%{transform:translate(0,0) rotate(0deg);}
  15%{transform:translate(4px,-5px) rotate(.8deg);}
  30%{transform:translate(-4px,-9px) rotate(-.8deg);}
  50%{transform:translate(5px,-7px) rotate(1deg);}
  70%{transform:translate(-4px,-10px) rotate(-.6deg);}
  85%{transform:translate(3px,-6px) rotate(.5deg);}
}
.eye-g{animation:blinkEye 4.5s ease-in-out infinite;transform-origin:center;transform-box:fill-box;}
.eye-g.r{animation-delay:.06s;}
@keyframes blinkEye{0%,85%,100%{transform:scaleY(1);}90%{transform:scaleY(.07);}}
.pupil{animation:lookAround 7s ease-in-out infinite;transform-origin:center;transform-box:fill-box;}
.pupil.r{animation-delay:.1s;}
@keyframes lookAround{0%,100%{transform:translate(0,0);}20%{transform:translate(1.5px,-1px);}45%{transform:translate(-1.5px,1px);}70%{transform:translate(1px,1px);}}
.smile{animation:smileBreathe 4s ease-in-out infinite;transform-origin:center;transform-box:fill-box;}
@keyframes smileBreathe{0%,100%{transform:scaleX(1);}50%{transform:scaleX(1.05);}}
.arm-l{animation:waveL 5.5s ease-in-out infinite;transform-origin:right center;transform-box:fill-box;}
.arm-r{animation:waveR 5.5s ease-in-out infinite 1.2s;transform-origin:left center;transform-box:fill-box;}
@keyframes waveL{0%,100%{transform:rotate(0deg);}30%{transform:rotate(-18deg);}65%{transform:rotate(7deg);}}
@keyframes waveR{0%,100%{transform:rotate(0deg);}30%{transform:rotate(18deg);}65%{transform:rotate(-7deg);}}
.hero-bubble-caption{background:rgba(255,255,255,.85);border:1px solid #DCE8EF;border-radius:16px 16px 16px 4px;padding:8px 16px;font-size:13px;color:#26658C;font-weight:500;backdrop-filter:blur(8px);box-shadow:0 4px 16px rgba(38,101,140,.1);display:inline-block;}

/* ---------- interactive phone / theme demo (page Bluby One) ---------- */
.demo-wrapper{display:flex;gap:48px;align-items:flex-start;flex-wrap:wrap;}
.demo-controls{flex:1;min-width:240px;}
.demo-screen{flex:1;min-width:260px;display:flex;justify-content:center;}
.ctrl-group-label{font-size:9px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:#8AA0B0;margin-bottom:8px;}
.ctrl-group{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;}
.ctrl-btn{border-radius:10px;padding:8px 16px;font-size:12px;font-weight:600;cursor:pointer;border:1.5px solid #DCE8EF;background:#fff;color:#4A6070;transition:all .25s;}
.ctrl-btn:hover{border-color:#7ec8d4;color:#26658C;}
.ctrl-btn.active{border-color:#26658C;color:#26658C;background:rgba(38,101,140,.08);}
.ctrl-btn.palette-douceur.active{border-color:#C890A8;color:#8A5070;background:rgba(200,144,168,.08);}
.ctrl-btn.palette-nature.active{border-color:#7AAA88;color:#4A7858;background:rgba(122,170,136,.08);}
.mode-btns{display:flex;gap:8px;margin-bottom:28px;}
.demo-hint{font-size:12px;color:#4A6070;line-height:1.6;border-left:2px solid #DCE8EF;padding-left:14px;}
.demo-hint strong{color:#1A2535;display:block;margin-bottom:4px;}

.phone{width:230px;height:480px;border-radius:38px;border:2px solid #C8D8E4;overflow:hidden;box-shadow:0 20px 60px rgba(38,101,140,.2);position:relative;}
.phone-notch{width:70px;height:18px;border-radius:0 0 12px 12px;margin:0 auto;position:relative;z-index:10;}
.phone.dark .phone-notch{background:#0a0e16;}
.phone.light .phone-notch{background:#dce6ec;}
.wp-canvas{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;}
.overlay-ui{position:relative;z-index:5;display:flex;flex-direction:column;height:calc(100% - 18px);padding:0 0 14px;justify-content:space-between;}
.ui-top{padding:10px 14px 0;}
.ui-date{font-family:'Playfair Display',serif;font-size:28px;font-weight:600;line-height:1;}
.ui-time{font-size:10px;font-weight:500;letter-spacing:1px;opacity:.7;margin-top:3px;}
.phone.dark .ui-date{color:rgba(255,255,255,.9);}
.phone.dark .ui-time{color:rgba(255,255,255,.6);}
.phone.light .ui-date{color:rgba(1,28,64,.85);}
.phone.light .ui-time{color:rgba(1,28,64,.55);}
.ui-bottom{padding:0 12px;}
.ui-card{border-radius:16px;padding:10px 14px;display:flex;align-items:center;gap:10px;backdrop-filter:blur(12px);}
.phone.dark .ui-card{background:rgba(10,14,22,.6);border:1px solid rgba(255,255,255,.07);}
.phone.light .ui-card{background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.8);}
.ui-card-icon{font-size:18px;}
.ui-card-title{font-size:10px;font-weight:700;}
.ui-card-sub{font-size:8px;opacity:.6;margin-top:1px;}
.phone.dark .ui-card-title{color:rgba(255,255,255,.9);}
.phone.dark .ui-card-sub{color:rgba(255,255,255,.6);}
.phone.light .ui-card-title{color:rgba(1,28,64,.85);}
.phone.light .ui-card-sub{color:rgba(1,28,64,.55);}

body[data-palette="luna"][data-mode="dark"]{--wp-bg:#0D1A28;--bubble-color:rgba(84,172,191,.5);--star-color:#A7EBF2;--leaf-color:#26658C;--leaf-color2:#54ACBF;--particle-color:rgba(167,235,242,.5);--acc:#54ACBF;--acc2:#A7EBF2;--acc3:rgba(2,56,89,.6);}
body[data-palette="luna"][data-mode="light"]{--wp-bg:#D8EFF5;--bubble-color:rgba(38,101,140,.25);--star-color:#26658C;--leaf-color:#26658C;--leaf-color2:#54ACBF;--particle-color:rgba(38,101,140,.4);--acc:#26658C;--acc2:#54ACBF;--acc3:rgba(167,235,242,.6);}
body[data-palette="douceur"][data-mode="dark"]{--wp-bg:#1E0F18;--bubble-color:rgba(200,144,168,.5);--star-color:#F8EEF4;--leaf-color:#A06080;--leaf-color2:#C890A8;--particle-color:rgba(248,238,244,.5);--acc:#C890A8;--acc2:#F8EEF4;--acc3:rgba(138,80,112,.6);}
body[data-palette="douceur"][data-mode="light"]{--wp-bg:#F2DCE8;--bubble-color:rgba(138,80,112,.25);--star-color:#8A5070;--leaf-color:#A06080;--leaf-color2:#C890A8;--particle-color:rgba(160,96,128,.4);--acc:#A06080;--acc2:#C890A8;--acc3:rgba(248,238,244,.6);}
body[data-palette="nature"][data-mode="dark"]{--wp-bg:#0D1810;--bubble-color:rgba(122,170,136,.5);--star-color:#C8DCC8;--leaf-color:#4A7858;--leaf-color2:#7AAA88;--particle-color:rgba(200,220,200,.5);--acc:#7AAA88;--acc2:#C8DCC8;--acc3:rgba(42,74,56,.6);}
body[data-palette="nature"][data-mode="light"]{--wp-bg:#D8EDD8;--bubble-color:rgba(74,120,88,.25);--star-color:#2A4A38;--leaf-color:#4A7858;--leaf-color2:#7AAA88;--particle-color:rgba(74,120,88,.4);--acc:#4A7858;--acc2:#7AAA88;--acc3:rgba(200,220,200,.6);}

.wp-bulle{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.6),var(--bubble-color) 60%,transparent);border:1px solid rgba(255,255,255,.2);animation:floatBulle var(--dur) ease-in-out infinite var(--delay);opacity:var(--op);}
@keyframes floatBulle{0%,100%{transform:translate(0,0) scale(1);}33%{transform:translate(var(--dx),calc(var(--dy)*-1)) scale(1.04);}66%{transform:translate(calc(var(--dx)*-0.5),var(--dy)) scale(.97);}}
.wp-etoile{position:absolute;border-radius:50%;background:var(--star-color);animation:twinkle var(--dur) ease-in-out infinite var(--delay);}
@keyframes twinkle{0%,100%{opacity:var(--op);transform:scale(1);}50%{opacity:calc(var(--op)*0.2);transform:scale(.5);}}
.wp-feuille{position:absolute;animation:leafFloat var(--dur) ease-in-out infinite var(--delay);opacity:var(--op);}
.wp-feuille svg{width:var(--sz);height:var(--sz);}
@keyframes leafFloat{0%,100%{transform:translate(0,0) rotate(var(--rot));}25%{transform:translate(var(--dx),calc(var(--dy)*-0.8)) rotate(calc(var(--rot) + 15deg));}75%{transform:translate(calc(var(--dx)*-0.3),calc(var(--dy)*-0.5)) rotate(calc(var(--rot) + 20deg));}}
.wp-particule{position:absolute;border-radius:50%;animation:particuleFloat var(--dur) ease-in-out infinite var(--delay);opacity:var(--op);}
@keyframes particuleFloat{0%,100%{transform:translateY(0) scale(1);opacity:var(--op);}50%{transform:translateY(-10px) scale(1.1);opacity:calc(var(--op)*1.5);}}

/* ---------- header / nav ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(244,247,249,0.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid #DCE8EF;
}
.header-inner{
  max-width:1240px;margin:0 auto;padding:14px 20px;
  display:flex;align-items:center;gap:18px;
}
.nav-desktop{display:none;align-items:center;gap:4px;margin-left:auto;justify-content:flex-end;}
.nav-link{
  border:none;background:none;font-size:15px;font-weight:600;color:#1A2535;
  padding:10px 12px;border-radius:10px;white-space:nowrap;
}
.nav-link:hover{background:#EAF3F6;color:#26658C;}
.nav-link-active{background:#EAF3F6;color:#26658C;}
.nav-link-outline{
  border:1px solid #C6DAE3;background:#fff;color:#26658C;font-weight:700;
  padding:11px 18px;border-radius:999px;margin-left:8px;
}
.nav-link-outline:hover{border-color:#26658C;background:#EAF3F6;}
.nav-link-cta{
  border:none;background:#023859;color:#fff !important;font-weight:700;
  padding:13px 22px;border-radius:999px;margin-left:8px;
}
.nav-link-cta:hover{background:#26658C;}

.nav-mobile-bar{margin-left:auto;display:flex;align-items:center;gap:8px;}
.btn-mobile-support{
  border:none;background:#023859;color:#fff;font-size:14px;font-weight:700;
  padding:12px 18px;border-radius:999px;white-space:nowrap;min-height:44px;
  display:inline-flex;align-items:center;
}
.btn-mobile-support:hover{background:#26658C;color:#fff;}
.burger{
  border:1px solid #C6DAE3;background:#fff;border-radius:14px;width:48px;height:48px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  cursor:pointer;flex:none;
}
.burger:hover{border-color:#26658C;}
.burger span{width:20px;height:2px;background:#023859;border-radius:2px;display:block;}

.nav-mobile-panel{
  display:none;flex-direction:column;
  border-top:1px solid #DCE8EF;background:#fff;padding:10px 20px 18px;
}
.nav-mobile-panel.open{display:flex;}
.nav-link-mobile{
  border:none;background:none;font-size:17px;font-weight:600;color:#1A2535;
  padding:14px 4px;border-radius:10px;text-align:left;min-height:48px;display:block;
}
.nav-link-mobile:hover{color:#26658C;}
.nav-link-mobile-accent{font-weight:700;color:#26658C;}

@media (min-width:1060px){
  .nav-desktop{display:flex;}
  .nav-mobile-bar{display:none;}
  .nav-mobile-panel{display:none !important;}
}

/* ---------- footer ---------- */
.site-footer{background:#0E141C;color:#7AAABB;}
.footer-grid{
  max-width:1240px;margin:0 auto;padding:clamp(48px,5vw,72px) 20px 32px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:36px;
}
.footer-col{display:flex;flex-direction:column;gap:10px;align-items:flex-start;}
.footer-heading{font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:#54ACBF;}
.footer-link{border:none;background:none;color:#B9D4DE;font-size:15px;padding:6px 0;text-align:left;}
.footer-link:hover{color:#A7EBF2;}
.footer-social{color:#B9D4DE;font-size:15px;padding:6px 0;display:flex;align-items:center;gap:10px;}
.footer-social:hover{color:#fff;}
.footer-social-icon{
  width:28px;height:28px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;flex:none;color:#fff;
}
.footer-bottom{
  max-width:1240px;margin:0 auto;padding:24px 20px 40px;border-top:1px solid #1E2A34;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:13px;color:#8FAEBB;
}