/* =====================================================================
   theme.css — système de design partagé « Phil's Hockey Bundles »
   Héritage hockey québécois · vrai bleu-blanc-rouge du Canadien
   Chargé avec Tailwind (CDN) + DaisyUI sur toutes les pages.
   ===================================================================== */

@font-face{font-family:'Anton';src:url('/fonts/anton.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'Space Grotesk';src:url('/fonts/space-grotesk.woff2') format('woff2');font-weight:300 700;font-display:swap;}
@font-face{font-family:'Inter';src:url('/fonts/inter.woff2') format('woff2');font-weight:100 900;font-display:swap;}

:root{
  --navy:#001e62;   /* bleu Canadien */
  --navy2:#123a9c;
  --navy-deep:#081338;
  --red:#af1e2d;    /* rouge Canadien */
  --red2:#cc2233;
  --sky:#4f8fd0;    /* bleu poudre Nordiques */
  --sky2:#7db4e6;
  --cream:#f6f2e8;  /* le « blanc » chaud */
}

html,body{font-family:'Inter',system-ui,sans-serif;}
body{background:var(--navy);color:#fff;}
.poster{font-family:'Anton',sans-serif;letter-spacing:.01em;}
.grot{font-family:'Space Grotesk',sans-serif;}

/* --- accents identitaires --- */
.tricolore{background:linear-gradient(90deg,var(--navy) 0 33.3%,#fff 33.3% 66.6%,var(--red) 66.6% 100%);
  box-shadow:0 0 0 1px rgba(230,232,240,.55);} /* fine ligne gris pâle : le bleu reste visible sur fond navy */
.fleurs{background-image:url('/img/fleur-white.svg');background-size:52px;background-repeat:repeat;}
.chrome{
  background:linear-gradient(180deg,#fff 0%,#cdf3ff 20%,#5fd3ec 48%,#1194b4 56%,#7fe4f7 76%,#fff 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  -webkit-text-stroke:1px rgba(4,40,52,.5);
  filter:drop-shadow(0 3px 0 #0b5c72) drop-shadow(0 6px 16px rgba(0,0,0,.7));
}
.glow-card{filter:drop-shadow(0 12px 26px rgba(0,0,0,.4));}
.txt-shadow{text-shadow:0 2px 0 rgba(0,0,0,.35),0 5px 18px rgba(0,0,0,.4);}
.glass{background:rgba(0,30,98,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.marquee{animation:slide 26s linear infinite;}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Bande défilante auto-remplie (défile d'exactement une série → boucle sans coupure) */
#marquee-track{animation:marquee-scroll var(--mq-dur,28s) linear infinite;will-change:transform;}
@keyframes marquee-scroll{to{transform:translateX(calc(-1 * var(--mq-gw,50%)));}}
@media (prefers-reduced-motion: reduce){#marquee-track{animation:none;}}

/* --- boutons réutilisables (utilisés par site.js/panier) --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:'Anton',sans-serif;
  letter-spacing:.02em;padding:.7em 1.4em;border-radius:.75rem;cursor:pointer;border:0;transition:.15s;text-decoration:none;line-height:1;}
.btn-red{background:var(--red);color:#fff;}.btn-red:hover{filter:brightness(1.1);}
.btn-navy{background:var(--navy);color:#fff;}.btn-navy:hover{filter:brightness(1.25);}
.btn-outline{border:2px solid rgba(255,255,255,.25);color:#fff;background:transparent;}.btn-outline:hover{background:rgba(255,255,255,.1);}
.btn-block{width:100%;}
.btn-lg{padding:.9em 1.6em;font-size:1.05rem;}

/* --- barre de progression de défilement --- */
#rdp-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--navy),var(--red));z-index:60;transition:transform .1s;}

/* --- icônes SVG (RDP.icon) --- */
.ico{width:1.15em;height:1.15em;display:inline-block;vertical-align:-.15em;flex:none;}

/* --- barre d'annonce --- */
.announce{background:var(--red);color:#fff;text-align:center;font-family:'Space Grotesk',sans-serif;
  font-size:.82rem;padding:7px 12px;}
.announce a{color:#fff;text-decoration:underline;font-weight:700;}

/* =========================== PANIER (tiroir) =========================== */
.overlay{position:fixed;inset:0;background:rgba(0,10,40,.6);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:.25s;z-index:70;}
.overlay.open{opacity:1;visibility:visible;}
.cart-drawer{position:fixed;top:0;right:0;height:100%;width:min(420px,92vw);background:var(--cream);color:var(--navy);
  transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:71;display:flex;flex-direction:column;
  box-shadow:-10px 0 40px rgba(0,0,0,.35);}
.cart-drawer.open{transform:translateX(0);}
.cart-drawer>header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;
  background:var(--navy);color:#fff;font-family:'Anton',sans-serif;font-size:1.1rem;}
.cart-drawer>header .tri{height:4px;}
.cart-drawer .items{flex:1;overflow-y:auto;padding:14px 18px;}
.cart-drawer>footer{padding:16px 18px;border-top:1px solid rgba(0,30,98,.12);background:#fff;}
.cart-line{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;
  padding:12px 0;border-bottom:1px solid rgba(0,30,98,.1);}
.cart-line .thumb{width:56px;height:56px;border-radius:10px;overflow:hidden;background:#e6edf8;
  display:flex;align-items:center;justify-content:center;color:var(--navy);}
.cart-line .thumb img{width:100%;height:100%;object-fit:cover;}
.cart-line .qty{display:inline-flex;align-items:center;border:1px solid rgba(0,30,98,.2);border-radius:8px;overflow:hidden;}
.cart-line .qty button{width:30px;height:32px;border:0;background:#eef2fa;color:var(--navy);font-size:1.1rem;cursor:pointer;}
.cart-line .qty input{border:0;text-align:center;background:#fff;color:var(--navy);height:32px;}
.cart-line .rm{background:none;border:0;color:var(--red);font-size:.78rem;cursor:pointer;font-family:'Space Grotesk';white-space:nowrap;}
.cart-drawer .row{display:flex;justify-content:space-between;padding:3px 0;font-family:'Space Grotesk';}
.cart-drawer .muted{color:rgba(0,30,98,.55);}
.cart-drawer .nudge{padding:10px 14px;border-radius:10px;background:rgba(79,143,208,.14);
  font-family:'Space Grotesk';font-size:.85rem;margin-bottom:12px;color:var(--navy);}

/* --- toast --- */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);background:var(--navy);color:#fff;
  padding:12px 22px;border-radius:12px;font-family:'Space Grotesk';font-weight:600;z-index:90;
  opacity:0;visibility:hidden;transition:.25s;box-shadow:0 10px 30px rgba(0,0,0,.4);border-bottom:3px solid var(--red);}
.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0);}
.toast.err{border-bottom-color:#e11d3a;}

/* --- helpers --- */
.on-cream{background:var(--cream);color:var(--navy);}
.link-sky:hover{color:var(--sky2);}

/* --- Emplacements réservés pour les photos détourées de Phil (PNG transparent, à venir) --- */
.phil-slot{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;
  border:2px dashed currentColor;border-radius:18px;opacity:.6;padding:18px;}
.phil-slot .ps-label{font-family:'Space Grotesk',sans-serif;font-size:.8rem;font-weight:700;line-height:1.35;}
.phil-slot .ico{width:2rem;height:2rem;margin:0 auto .5rem;display:block;}
/* Rendu final d'une photo détourée déposée dans un emplacement */
.phil-photo{display:block;width:100%;height:auto;filter:drop-shadow(0 12px 26px rgba(0,0,0,.45));}

/* =========================== PAGES LÉGALES =========================== */
.legal{color:var(--navy);font-family:'Space Grotesk','Inter',sans-serif;line-height:1.72;font-size:1rem;}
.legal h2{font-family:'Anton',sans-serif;color:var(--navy);font-size:1.35rem;letter-spacing:.01em;
  margin:2.1em 0 .5em;padding-left:.7rem;border-left:4px solid var(--red);line-height:1.15;scroll-margin-top:96px;}
.legal h2:first-of-type{margin-top:.4em;}
.legal p{margin:.7em 0;color:rgba(0,30,98,.9);}
.legal a{color:var(--red);font-weight:600;text-decoration:none;}
.legal a:hover{text-decoration:underline;}
.legal b,.legal strong{color:var(--navy);font-weight:700;}
.legal i{font-style:italic;}
.legal ul{margin:.7em 0;padding-left:0;list-style:none;}
.legal li{position:relative;padding-left:1.6rem;margin:.55em 0;color:rgba(0,30,98,.9);}
.legal li::before{content:"";position:absolute;left:.25rem;top:.62em;width:.5rem;height:.5rem;
  border-radius:2px;background:var(--red);transform:rotate(45deg);}
.legal .updated{color:rgba(0,30,98,.55);font-size:.9rem;margin-top:.2em;}
.legal .small{font-size:.82rem;}
.legal .muted{color:rgba(0,30,98,.55);}

/* encadré d'avertissement */
.legal .warn{display:flex;gap:.7rem;align-items:flex-start;background:rgba(175,30,45,.08);
  border-left:4px solid var(--red);border-radius:12px;padding:14px 18px;margin:1.5em 0;color:var(--navy);}
.legal .warn b{color:var(--red);}
.legal .warn .ico{color:var(--red);flex:none;width:1.3em;height:1.3em;margin-top:.1em;}

/* sommaire (table des matières) */
.legal .toc{background:rgba(79,143,208,.12);border:1px solid rgba(0,30,98,.1);border-radius:14px;
  padding:18px 20px;margin:1.6em 0;display:grid;gap:.3rem;}
.legal .toc b{font-family:'Anton',sans-serif;color:var(--navy);margin-bottom:.45rem;
  letter-spacing:.03em;font-size:1.05rem;}
.legal .toc a{color:var(--navy);font-weight:500;font-size:.92rem;}
.legal .toc a:hover{color:var(--red);text-decoration:underline;}

/* tableau des tarifs de livraison */
.legal .odds-wrap{overflow-x:auto;margin:1.1em 0;border-radius:12px;border:1px solid rgba(0,30,98,.12);}
.legal table.odds{width:100%;border-collapse:collapse;background:#fff;}
.legal table.odds th{background:var(--navy);color:#fff;font-family:'Anton',sans-serif;font-weight:400;
  text-align:left;padding:12px 16px;letter-spacing:.02em;}
.legal table.odds td{padding:12px 16px;border-top:1px solid rgba(0,30,98,.1);vertical-align:top;color:var(--navy);}
.legal table.odds td .small{display:block;margin-top:2px;}