/* ==========================================================================
   Broken Seal, vitrine de pre-ouverture. Ambiance boutique lofi medievale.
   Design porte depuis le prototype de refonte graphique (fidelite haute).
   ========================================================================== */

:root{
  /* Fonds */
  --bg1:#3a2716; --bg2:#241810; --bg3:#16100a;
  /* Parchemin / carte */
  --parchment:#ece0c6; --card-border:#cbb98d; --dash:#b09a63;
  /* Textes */
  --ink:#33291c; --title:#2a2113; --body:#4a3d29; --muted:#6b5a34; --note:#8a6a34;
  /* Accents */
  --accent-dark:#2a2113; --rust:#a05a1e; --amber:#c9772f; --on-amber:#231a0e; --cta-text:#f0e6cc;
  /* Champs */
  --field-bg:#f6ecd3; --field-border:#9a854e;
  /* Divers */
  --halo:rgba(226,165,82,.5);
  /* Typo */
  --f-display:'Grenze',Georgia,serif;
  --f-body:'Spectral',Georgia,serif;
  --f-mono:'Space Mono',ui-monospace,'JetBrains Mono',monospace;
}

*{box-sizing:border-box;}
html,body{margin:0;}
html{background:var(--bg3);}
body{
  font-family:var(--f-body);
  color:var(--ink);
  min-height:100%;
  padding:44px 24px 80px;
  background:radial-gradient(1100px 640px at 50% -6%, var(--bg1) 0%, var(--bg2) 46%, var(--bg3) 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;}
::selection{background:var(--amber);color:var(--on-amber);}
.bs-pix{image-rendering:pixelated;image-rendering:crisp-edges;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* --- Carte parchemin --------------------------------------------------- */
.card{
  position:relative;
  max-width:1040px;
  margin:0 auto;
  overflow:hidden;
  border-radius:8px;
  background:var(--parchment);
  color:var(--ink);
  background-image:url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22160%22%20height=%22160%22%3E%3Cfilter%20id=%22n%22%3E%3CfeTurbulence%20type=%22fractalNoise%22%20baseFrequency=%220.75%22%20numOctaves=%222%22%20stitchTiles=%22stitch%22/%3E%3CfeColorMatrix%20type=%22saturate%22%20values=%220%22/%3E%3C/filter%3E%3Crect%20width=%22160%22%20height=%22160%22%20filter=%22url(%23n)%22%20opacity=%220.35%22/%3E%3C/svg%3E');
  background-blend-mode:multiply;
  box-shadow:0 50px 110px -34px rgba(0,0,0,.75);
  border:1px solid var(--card-border);
}
.vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 130px rgba(90,55,18,.28);z-index:1;}
.card > *{position:relative;z-index:2;}

/* --- Guirlande --------------------------------------------------------- */
.garland{position:relative;height:56px;background:linear-gradient(#dccaa0,var(--parchment));border-bottom:1px dashed var(--dash);overflow:hidden;}
.garland-string{position:absolute;top:9px;left:-10px;right:-10px;height:2px;background:#8a6a34;}
.garland-flags{position:absolute;top:8px;left:0;right:0;display:flex;justify-content:center;gap:14px;}

/* --- En-tete / marque -------------------------------------------------- */
.site-header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 36px;border-bottom:1px dashed var(--dash);}
.brand{display:flex;align-items:center;gap:14px;}
.brand-seal{height:56px;width:auto;display:block;}
.brand-lockup{display:flex;flex-direction:column;gap:5px;}
.brand-wordmark{height:26px;width:auto;display:block;}
.brand-tagline{font-family:var(--f-mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--rust);}
.header-note{font-family:var(--f-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--note);white-space:nowrap;}

/* --- Hero -------------------------------------------------------------- */
.hero{display:grid;grid-template-columns:1.08fr .92fr;}
.hero-copy{padding:56px 36px 52px;border-right:1px dashed var(--dash);}
.kicker{font-family:var(--f-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--rust);margin:0;}
.hero-title{font-family:var(--f-display);font-weight:700;font-size:clamp(40px,7vw,64px);line-height:.98;margin:16px 0 0;color:var(--title);}
.hero-lead{font-weight:400;font-size:19px;line-height:1.62;margin:22px 0 0;max-width:460px;color:var(--body);}
.hero-note{font-style:italic;font-size:17px;line-height:1.55;margin:14px 0 0;max-width:460px;color:var(--muted);}
.cta{display:inline-block;margin-top:30px;font-family:var(--f-mono);font-size:14px;letter-spacing:.04em;background:var(--accent-dark);color:var(--cta-text);padding:15px 28px;border-radius:4px;box-shadow:0 12px 26px -12px rgba(0,0,0,.6);transition:transform .15s ease,box-shadow .15s ease;}
.cta:hover{transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(0,0,0,.65);}
.cta:focus-visible{outline:2px solid var(--amber);outline-offset:3px;}

/* --- Scene pixel art (comptoir) ---------------------------------------- */
.counter{position:relative;min-height:360px;background:rgba(111,106,52,.10);overflow:hidden;perspective:640px;}
.counter-halo{position:absolute;left:50%;top:46%;width:300px;height:300px;transform:translate(-50%,-50%);background:radial-gradient(circle, var(--halo), transparent 68%);pointer-events:none;}
.counter .star{position:absolute;pointer-events:none;animation:bs-twinkle var(--dur,3s) ease-in-out infinite var(--delay,0s);}
.shelf{position:absolute;left:24px;right:24px;bottom:46px;height:22px;background:linear-gradient(#8a5a2e,#5f3c1c);border-top:3px solid #a06a34;border-radius:2px;box-shadow:0 10px 20px -8px rgba(0,0,0,.5);}
.shelf-shadow{position:absolute;left:24px;right:24px;bottom:38px;height:8px;background:#4a2f18;border-radius:0 0 2px 2px;}
.bs-drag{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;}

/* --- Rayons ------------------------------------------------------------ */
.rayons{display:grid;grid-template-columns:1fr 1fr 1fr;border-top:1px dashed var(--dash);}
.rayon{padding:30px 26px;border-right:1px dashed var(--dash);}
.rayon:last-child{border-right:none;}
.rayon-head{display:flex;align-items:center;gap:12px;}
.rayon-num{font-family:var(--f-mono);font-size:12px;color:var(--rust);letter-spacing:.12em;}
.rayon h3{font-family:var(--f-display);font-weight:600;font-size:23px;margin:14px 0 8px;color:var(--title);}
.rayon p{font-size:16px;line-height:1.55;margin:0;color:var(--body);}

/* --- Bloc inscription -------------------------------------------------- */
.notify{border-top:1px dashed var(--dash);padding:48px 36px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;background:rgba(111,106,52,.08);}
.notify-label{display:flex;align-items:center;gap:12px;margin-bottom:8px;}
.notify-label span{font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--rust);}
.notify h2{font-family:var(--f-display);font-weight:700;font-size:clamp(28px,4.5vw,34px);margin:0 0 8px;line-height:1.04;color:var(--title);}
.notify-copy p{font-size:17px;line-height:1.55;margin:0;color:var(--body);max-width:380px;}
.form-row{display:flex;gap:10px;}
.field{flex:1;min-width:0;font-family:var(--f-mono);font-size:14px;padding:15px;border-radius:4px;border:1px solid var(--field-border);background:var(--field-bg);color:var(--ink);}
.field:focus-visible{outline:2px solid var(--amber);outline-offset:1px;border-color:var(--amber);}
.btn{font-family:var(--f-mono);font-weight:700;font-size:13px;background:var(--amber);color:var(--on-amber);border:none;padding:0 22px;border-radius:4px;cursor:pointer;letter-spacing:.06em;transition:filter .15s ease;}
.btn:hover{filter:brightness(1.06);}
.btn:disabled{opacity:.6;cursor:default;}
.btn:focus-visible{outline:2px solid var(--accent-dark);outline-offset:2px;}
.consent{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:14px;color:var(--muted);line-height:1.5;}
.consent input{margin-top:3px;flex:none;}
.consent a{color:var(--rust);text-decoration:underline;text-underline-offset:2px;}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
.form-msg{font-family:var(--f-mono);font-size:12.5px;line-height:1.5;margin:12px 0 0;min-height:1em;}
.form-msg.ok{color:#3f6b3a;}
.form-msg.err{color:#a6402a;}

/* --- Footer ------------------------------------------------------------ */
.site-footer{border-top:1px dashed var(--dash);padding:26px 36px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px 24px;font-family:var(--f-mono);font-size:13px;letter-spacing:.04em;}
.footer-copy{color:var(--muted);}
.footer-links{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center;}
.footer-links a{border-bottom:1px solid var(--dash);padding-bottom:2px;}
.footer-links a:hover{border-bottom-color:var(--rust);color:var(--rust);}
.footer-sep{opacity:.5;}

/* ==========================================================================
   Pages legales (mentions, confidentialite)
   ========================================================================== */
.legal{max-width:760px;margin:0 auto;background:var(--parchment);color:var(--ink);border:1px solid var(--card-border);border-radius:8px;box-shadow:0 50px 110px -34px rgba(0,0,0,.75);padding:44px 40px 40px;}
.legal .back{display:inline-block;font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;color:var(--rust);margin-bottom:24px;}
.legal .back:hover{text-decoration:underline;}
.legal h1{font-family:var(--f-display);font-weight:700;font-size:clamp(30px,5vw,40px);line-height:1.05;margin:0 0 6px;color:var(--title);}
.legal .updated{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;color:var(--muted);margin:0 0 26px;}
.legal h2{font-family:var(--f-display);font-weight:600;font-size:22px;margin:30px 0 8px;color:var(--title);}
.legal p,.legal li{font-size:16px;line-height:1.62;color:var(--body);}
.legal a{color:var(--rust);text-decoration:underline;text-underline-offset:2px;}
.legal dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:10px 0;}
.legal dt{font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);align-self:center;}
.legal dd{margin:0;font-size:16px;color:var(--ink);}
.legal .foot{margin-top:32px;padding-top:18px;border-top:1px dashed var(--dash);font-family:var(--f-mono);font-size:12.5px;color:var(--muted);}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:860px){
  body{padding:28px 14px 60px;}
  .hero{grid-template-columns:1fr;}
  .hero-copy{border-right:none;padding:44px 28px 40px;}
  .counter{border-top:1px dashed var(--dash);min-height:320px;}
  .notify{grid-template-columns:1fr;gap:28px;padding:40px 28px;}
  .site-header{padding:18px 24px;}
}
@media (max-width:680px){
  .rayons{grid-template-columns:1fr;}
  .rayon{border-right:none;border-top:1px dashed var(--dash);}
  .rayon:first-child{border-top:none;}
}
@media (max-width:520px){
  .site-header{flex-direction:column;align-items:flex-start;gap:12px;}
  .brand-seal{height:48px;}
  .brand-wordmark{height:22px;}
  .hero-copy{padding:36px 22px 34px;}
  .notify,.rayon{padding-left:22px;padding-right:22px;}
  .site-footer{padding:24px 22px;}
  .legal{padding:32px 22px;}
  .legal dl{grid-template-columns:1fr;gap:2px 0;}
  .legal dt{margin-top:8px;}
}

/* ==========================================================================
   Animations (reprises du prototype)
   ========================================================================== */
@keyframes bsflicker{0%,100%{opacity:.85;transform:scale(1);}45%{opacity:1;transform:scale(1.06);}70%{opacity:.78;transform:scale(.97);}}
@keyframes bssway{0%,100%{transform:rotate(-1.2deg);}50%{transform:rotate(1.2deg);}}
@keyframes bs-spin{to{transform:rotateY(360deg);}}
@keyframes bs-wobble{0%,100%{transform:rotate(6deg);}25%{transform:rotate(-8deg);}50%{transform:rotate(12deg);}75%{transform:rotate(2deg);}}
@keyframes bs-bob{0%,100%{transform:translateY(0);}45%{transform:translateY(-16px);}}
@keyframes bs-flick{0%,100%{transform:scale(1);}40%{transform:scale(1.14);}70%{transform:scale(.94);}}
@keyframes bs-cardfly{0%{transform:translateY(0) scale(.6) rotate(0);opacity:0;}25%{opacity:1;}100%{transform:translateY(-96px) scale(1) rotate(10deg);opacity:0;}}
@keyframes bs-burst{0%{transform:translate(0,0) scale(.4);opacity:0;}30%{opacity:1;}100%{transform:translate(0,-46px) scale(1.1);opacity:0;}}
@keyframes bs-twinkle{0%,100%{opacity:.35;}50%{opacity:.9;}}
@keyframes bs-drink{0%{transform:rotate(0);}20%{transform:rotate(0);}55%{transform:rotate(-42deg) translateY(-4px);}80%{transform:rotate(-42deg) translateY(-4px);}100%{transform:rotate(0);}}
@keyframes bs-blow{0%{transform:rotate(0);}30%{transform:rotate(-3deg);}60%{transform:rotate(4deg);}100%{transform:rotate(0);}}
@keyframes bs-smoke{0%{opacity:0;transform:translateY(0) scale(.8);}25%{opacity:.7;}100%{opacity:0;transform:translateY(-38px) scale(1.5);}}
@keyframes bs-cardfly-rare{0%{transform:translateY(0) scale(.5) rotate(0);opacity:0;}14%{opacity:1;}32%{transform:translateY(-104px) scale(1.18) rotate(-4deg);opacity:1;}42%{transform:translateY(-104px) scale(1.18) rotate(4deg);opacity:1;}52%{transform:translateY(-104px) scale(1.18) rotate(-3deg);opacity:1;}80%{transform:translateY(-104px) scale(1.18) rotate(2deg);opacity:1;}100%{transform:translateY(-118px) scale(1.1) rotate(6deg);opacity:0;}}

.bs-spin{animation:bs-spin .7s ease;}
.bs-wobble{animation:bs-wobble .6s ease;}
.bs-bob{animation:bs-bob .7s ease;}
.bs-flick{animation:bs-flick .5s ease;}
.bs-cardfly{animation:bs-cardfly 2.1s ease forwards;}
.bs-burst{animation:bs-burst 1.6s ease forwards;}
.bs-drink{animation:bs-drink 1.5s ease;transform-origin:bottom right;}
.bs-blow{animation:bs-blow .5s ease;transform-origin:bottom center;}
.bs-cardfly-rare{animation:bs-cardfly-rare 3.2s ease forwards;}

@media (prefers-reduced-motion:reduce){
  .counter .star{animation:none;opacity:.7;}
  .cta{transition:none;}
  .cta:hover{transform:none;}
}