/* ============================================================================
   Webena · shared/css/tokens.css
   Socle commun à toutes les maquettes : polices, reset, échelles, utilitaires.
   Aucun style « décoratif » ici. La direction artistique vit dans chaque projet.
   ============================================================================ */

/* ---------- Polices locales (aucune dépendance réseau) ---------- */
@font-face{
  font-family:'Cormorant Garamond';
  src:url('../assets/fonts/cormorant.ttf') format('truetype-variations'),
      url('../assets/fonts/cormorant.ttf') format('truetype');
  font-weight:300 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Cormorant Garamond';
  src:url('../assets/fonts/cormorant-italic.ttf') format('truetype-variations'),
      url('../assets/fonts/cormorant-italic.ttf') format('truetype');
  font-weight:300 700; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Montserrat';
  src:url('../assets/fonts/montserrat.ttf') format('truetype-variations'),
      url('../assets/fonts/montserrat.ttf') format('truetype');
  font-weight:200 800; font-style:normal; font-display:swap;
}

:root{
  /* Palette corporate Webena (interfaces Webena uniquement) */
  --wb-charbon:#1F1F1F;
  --wb-taupe:#A89F95;
  --wb-blush:#DCC8B7;
  --wb-or:#C8A36A;
  --wb-ivoire:#F7F3EF;

  /* Familles */
  --wb-serif:'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --wb-sans:'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  /* Rythme */
  --wb-ease:cubic-bezier(.22,.8,.3,1);
  --wb-ease-out:cubic-bezier(.16,1,.3,1);
  --wb-gut:clamp(20px, 5vw, 64px);      /* marge latérale */
  --wb-sect:clamp(64px, 11vw, 150px);   /* respiration verticale des sections */
  --wb-max:1240px;

  /* Rayons et traits, surchargeables par thème */
  --wb-r-s:6px; --wb-r-m:14px; --wb-r-l:26px; --wb-r-pill:999px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  font-family:var(--wb-sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;                 /* garde-fou anti débordement horizontal */
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
textarea{resize:vertical}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:2px}
::selection{background:var(--wb-or);color:#fff}
body.wb-locked{overflow:hidden}

/* ---------- Utilitaires ---------- */
.wb-wrap{width:100%;max-width:var(--wb-max);margin-inline:auto;padding-inline:var(--wb-gut)}
.wb-narrow{max-width:760px}
.wb-section{padding-block:var(--wb-sect)}
.wb-center{text-align:center}
.wb-sr{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wb-hp{position:absolute!important;left:-9999px!important;opacity:0;height:0;overflow:hidden}

/* Apparition au scroll : géré par wb-core.js (classe .is-in) */
.wb-reveal{opacity:0;transform:translateY(24px);
  transition:opacity .85s var(--wb-ease-out), transform .85s var(--wb-ease-out)}
.wb-reveal.is-in{opacity:1;transform:none}
.wb-reveal[data-delay="1"]{transition-delay:.10s}
.wb-reveal[data-delay="2"]{transition-delay:.20s}
.wb-reveal[data-delay="3"]{transition-delay:.30s}
.wb-reveal[data-delay="4"]{transition-delay:.40s}
.wb-reveal[data-delay="5"]{transition-delay:.50s}

/* Bandeau « démonstration » commun à toutes les maquettes */
.wb-demobar{
  position:fixed;left:0;right:0;bottom:0;z-index:900;
  display:flex;align-items:center;gap:12px;justify-content:center;flex-wrap:wrap;
  padding:9px 16px calc(9px + env(safe-area-inset-bottom));
  background:rgba(31,31,31,.94);backdrop-filter:blur(10px);
  color:#EDE7E0;font-family:var(--wb-sans);font-size:11px;letter-spacing:.08em;
}
.wb-demobar b{font-weight:600;color:var(--wb-or);letter-spacing:.14em;text-transform:uppercase}
.wb-demobar a{border-bottom:1px solid rgba(200,163,106,.5);padding-bottom:1px}
.wb-demobar a:hover{color:var(--wb-or)}
.wb-demobar .sep{opacity:.35}
@media(max-width:600px){ .wb-demobar{font-size:10px;gap:8px} .wb-demobar .sep{display:none} }
body.has-demobar{padding-bottom:54px}

/* Toast global */
.wb-toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:76px;z-index:1200;
  display:flex;flex-direction:column;gap:10px;width:min(460px,calc(100vw - 32px));pointer-events:none}
.wb-toast{
  pointer-events:auto;background:#1F1F1F;color:#F7F3EF;border:1px solid rgba(200,163,106,.42);
  border-radius:12px;padding:13px 16px;font-family:var(--wb-sans);font-size:13.5px;line-height:1.45;
  box-shadow:0 18px 44px rgba(0,0,0,.3);
  opacity:0;transform:translateY(14px);transition:opacity .35s var(--wb-ease),transform .35s var(--wb-ease)}
.wb-toast.is-in{opacity:1;transform:none}
.wb-toast strong{display:block;font-weight:600;color:var(--wb-or);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:4px}

/* Modale générique */
.wb-modal{position:fixed;inset:0;z-index:1100;display:none;
  align-items:center;justify-content:center;padding:16px}
.wb-modal.is-open{display:flex}
.wb-modal__bd{position:absolute;inset:0;background:rgba(20,18,16,.62);backdrop-filter:blur(6px)}
.wb-modal__box{position:relative;background:#fff;color:#1F1F1F;border-radius:18px;
  width:min(560px,100%);max-height:min(86vh,760px);overflow:auto;-webkit-overflow-scrolling:touch;
  padding:28px 24px 26px;box-shadow:0 34px 90px rgba(0,0,0,.34);
  animation:wbPop .4s var(--wb-ease-out) both}
@keyframes wbPop{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
.wb-modal__x{position:absolute;top:12px;right:14px;width:34px;height:34px;border-radius:50%;
  font-size:20px;line-height:1;color:#6b6259}
.wb-modal__x:hover{background:rgba(0,0,0,.06)}