/* Thème « Relay » : noir et vert citron, une seule couleur vive.
   Chargé après style.css : il ne change que les couleurs, la typo et quelques surfaces. */
:root, :root[data-theme="dark"], :root:not([data-theme="light"]){
  --green-deep:#060706;
  --green-mid:#0e100d;
  --brass:#c6f432;
  --brass-light:#d8ff63;
  --paper:#0a0b09;
  --paper-warm:#111310;
  --ink:#eef2e6;
  --ink-soft:#a3aa98;
  --brick:#c6f432;
  --line: rgba(238,242,230,0.10);
  --lime-glow: 0 0 24px rgba(198,244,50,0.45);
}
html.relay body, html.relay body *:not(svg):not(svg *){ font-family:'Space Grotesk', 'Work Sans', system-ui, sans-serif; }
html.relay .kicker, html.relay .eyebrow-tag, html.relay .ticker-track span, html.relay .process-num, html.relay .laptop-url{ font-family:'JetBrains Mono', ui-monospace, monospace !important; letter-spacing:0; }
html.relay h1, html.relay h2, html.relay h3{ letter-spacing:-0.03em; font-weight:600; }
html.relay .hero h1 em{ font-style:normal; color:var(--brass); text-shadow:var(--lime-glow); }

/* Surfaces : plus de papier crème, des panneaux sombres bordés d'un filet. */
html.relay nav{ background:rgba(10,11,9,0.96); border-bottom:1px solid var(--line); } /* pas de backdrop-filter : il piège le menu mobile (position fixed) et fait déborder la page */
html.relay .brand-logo{ filter:grayscale(1) brightness(1.6); }
html.relay .nav-cta{ background:var(--brass) !important; color:#0a0b09 !important; }
html.relay .hero{ background:radial-gradient(80% 60% at 70% 30%, #12160c 0%, #060706 70%); }
html.relay .awning{ display:none; }
html.relay .btn-brass{ background:var(--brass); color:#0a0b09; }
html.relay .btn-brass:hover{ background:var(--brass-light); box-shadow:var(--lime-glow); }
html.relay .ticker{ background:#0e100d; color:var(--ink); border-block:1px solid var(--line); }
html.relay .ticker-track span::after{ content:"/"; color:var(--brass); opacity:1; }
html.relay .service-window, html.relay .pillar, html.relay .mock-card, html.relay .process-item{ background:#0f110e; border-color:var(--line); }
html.relay .cta-band{ background:var(--brass); color:#0a0b09; }
html.relay .cta-band h2, html.relay .cta-band p{ color:#0a0b09; }
html.relay .cta-band .btn-brass{ background:#0a0b09; color:var(--brass); }
html.relay footer{ border-top:1px solid var(--line); }

/* Le héros : la carte devient une fenêtre de verre inclinée où une demande client se traite en direct. */
html.relay .shopfront{ perspective:1200px; }
html.relay .shopfront-card{
  background:rgba(20,24,16,0.55); border:1px solid rgba(198,244,50,0.28); border-radius:14px;
  backdrop-filter:blur(14px); box-shadow:0 30px 80px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
  transform:rotateY(-14deg) rotateX(6deg); transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
html.relay .shopfront-card:hover{ transform:rotateY(-6deg) rotateX(2deg); }
html.relay .shopfront-card .sign{ background:none; color:var(--ink); border-bottom:1px solid var(--line); font-family:'JetBrains Mono', monospace !important; }
html.relay .shopfront-row{ border-color:var(--line); color:var(--ink-soft); }
html.relay .status-old{ color:#7d8473; text-decoration:line-through; }
html.relay .status-new{ color:var(--brass); text-shadow:var(--lime-glow); }
html.relay.relay-js .shopfront-row{ opacity:0; transform:translateY(6px); animation:relayRow .5s cubic-bezier(.2,.8,.2,1) forwards; }
html.relay.relay-js .shopfront-row:nth-child(2){ animation-delay:1.3s; } html.relay.relay-js .shopfront-row:nth-child(3){ animation-delay:1.7s; }
html.relay.relay-js .shopfront-row:nth-child(4){ animation-delay:2.1s; } html.relay.relay-js .shopfront-row:nth-child(5){ animation-delay:2.7s; }
@keyframes relayRow{ to{ opacity:1; transform:none; } }

/* Le trait de lumière qui descend tout le long du site. */
.relay-stream{ position:absolute; top:0; left:0; width:100%; pointer-events:none; z-index:5; overflow:visible; }
.relay-stream path{ fill:none; stroke-linecap:round; }
.relay-stream .base{ stroke:rgba(198,244,50,0.10); stroke-width:1.5; }
.relay-stream .lit{ stroke:#c6f432; stroke-width:2; filter:drop-shadow(0 0 6px rgba(198,244,50,0.9)); }
.relay-stream .head{ fill:#e9ffb0; filter:drop-shadow(0 0 10px #c6f432); }

/* L'anneau qui compte l'ouverture de la page puis file vers le logo. */
.relay-intro{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; background:#060706; pointer-events:none; transition:opacity .45s ease .1s; }
.relay-intro svg{ width:120px; height:120px; transition:transform .7s cubic-bezier(.7,0,.2,1); }
.relay-intro circle{ fill:none; stroke-width:3; }
.relay-intro .track{ stroke:rgba(198,244,50,0.12); }
.relay-intro .ring{ stroke:#c6f432; stroke-linecap:round; filter:drop-shadow(0 0 8px rgba(198,244,50,.8)); transform:rotate(-90deg); transform-origin:50% 50%; }
.relay-intro .count{ fill:#eef2e6; font:500 15px 'JetBrains Mono', monospace; text-anchor:middle; dominant-baseline:middle; }
.relay-intro.is-done{ opacity:0; }

/* Les sections arrivent floues et se posent nettes (seulement si le script tourne). */
html.relay-js .relay-in{ opacity:0; filter:blur(10px); transform:translateY(18px) scale(.985); transition:opacity .7s ease, filter .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
html.relay-js .relay-in.is-in{ opacity:1; filter:none; transform:none; }

@media (prefers-reduced-motion: reduce){
  html.relay-js .relay-in{ opacity:1; filter:none; transform:none; transition:none; }
  html.relay.relay-js .shopfront-row{ opacity:1; transform:none; animation:none; }
  .relay-intro{ display:none; }
}

/* style.css écrit le texte des zones sombres en var(--paper) : dans ce thème le papier est noir, donc on rend l'encre claire. */
html.relay .hero, html.relay .hero h1, html.relay .page-hero, html.relay .page-hero h1, html.relay .process, html.relay .process-item h3,
html.relay .btn-ghost, html.relay .btn-dark, html.relay .footer-brand{ color:var(--ink); }
html.relay .hero p.lead{ color:var(--ink-soft); }
html.relay .btn-ghost{ border-color:rgba(238,242,230,0.3); }
html.relay .btn-ghost:hover{ border-color:var(--brass); color:var(--brass); background:transparent; }
html.relay .pd-cookie-btn{ color:#0a0b09; background:var(--brass); border-color:var(--brass); }
html.relay .pd-cookie-btn:hover{ background:var(--brass-light); border-color:var(--brass-light); }
html.relay{ --pd-chat-accent:#c6f432; }
html.relay .pd-chat-launcher, html.relay [class*="pd-chat"][class*="head"]{ color:#0a0b09; }

/* Noël version tech : la guirlande clignote en citron et blanc, les décors dessinés laissent la place au bonhomme 3D. */
html.relay.noel .xm-bulb:nth-child(odd){ --c:#c6f432 !important; }
html.relay.noel .xm-bulb:nth-child(even){ --c:#eef2e6 !important; }
html.relay.noel .xm-tree, html.relay.noel .xm-gifts, html.relay.noel .xm-snowman, html.relay.noel .xm-ground{ display:none; }
html.relay.noel .xm-flake{ background:#eef2e6; box-shadow:0 0 6px rgba(198,244,50,0.6); }
html.relay.noel .xm-badge{ background:transparent; color:var(--brass); border:1px solid rgba(198,244,50,0.4); font-family:'JetBrains Mono', monospace !important; }
html.relay.noel .ticker-track span::after{ content:"❄"; color:var(--brass); }

/* Décors néon de Noël (noeltech.js) : trait citron, trait blanc, ampoules qui clignotent. */
html.relay.noel .cta-band, html.relay.noel .process, html.relay.noel footer, html.relay.noel .page-hero{ position:relative; }
.nt{ position:absolute; pointer-events:none; z-index:3; }
.nt svg{ width:100%; height:auto; display:block; overflow:visible; }
.nt .n{ fill:none; stroke:#c6f432; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 4px rgba(198,244,50,.7)); }
.nt .w{ fill:none; stroke:#eef2e6; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 3px rgba(238,242,230,.6)); }
.nt circle.w{ fill:#eef2e6; }
.nt .f{ fill:#0e100d; }
.nt .g{ fill:#c6f432; filter:drop-shadow(0 0 6px #c6f432); animation:ntBlink 1.6s ease-in-out infinite; }
.nt .g.b2{ fill:#eef2e6; animation-delay:-.5s; } .nt .g.b3{ animation-delay:-1s; }
.nt .g.star{ transform-origin:60px 15px; animation:ntStar 2.4s ease-in-out infinite; }
.nt .g.nose{ animation:ntNose 1.2s ease-in-out infinite; }
@keyframes ntBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
@keyframes ntStar{ 0%,100%{ transform:scale(1) rotate(0); } 50%{ transform:scale(1.18) rotate(12deg); } }
@keyframes ntNose{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }

/* Le traîneau traverse le haut de l'accueil toutes les 18 secondes. */
.nt-sleigh{ top:13%; left:0; width:260px; animation:ntFly 18s linear infinite; }
@keyframes ntFly{ 0%{ transform:translate(-320px, 30px) rotate(-4deg); } 45%{ transform:translate(55vw, -10px) rotate(2deg); } 70%,100%{ transform:translate(115vw, -40px) rotate(-6deg); } }
.nt-gallop{ animation:ntGallop .5s ease-in-out infinite alternate; transform-origin:220px 60px; }
@keyframes ntGallop{ to{ transform:translateY(-4px) rotate(-3deg); } }
.nt-trail circle{ animation:ntBlink .9s ease-in-out infinite; }

/* Le sapin, les cadeaux et un renne dans l'en-tête des pages. */
.nt-tree{ right:6%; bottom:0; width:150px; }
.nt-gifts{ right:calc(6% + 156px); bottom:0; width:150px; }
.nt-reindeer--hero{ right:calc(6% + 316px); bottom:2px; width:170px; }
.nt-hop{ animation:ntHop 2.2s ease-in-out infinite; transform-box:fill-box; transform-origin:bottom; }
.nt-hop.d2{ animation-delay:-.7s; } .nt-hop.d3{ animation-delay:-1.4s; }
@keyframes ntHop{ 0%,80%,100%{ transform:none; } 88%{ transform:translateY(-6px) scaleY(1.04); } }
.nt-bob{ animation:ntBob 3s ease-in-out infinite; }
@keyframes ntBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } }
.nt-head{ animation:ntNod 3.4s ease-in-out infinite; transform-origin:96px 60px; }
@keyframes ntNod{ 0%,60%,100%{ transform:rotate(0); } 70%{ transform:rotate(-8deg); } 80%{ transform:rotate(4deg); } }

/* Le Père Noël salue dans le bandeau d'appel ; une guirlande pend en haut des bandeaux. */
.nt-santa{ right:2%; bottom:0; width:170px; }
html.relay.noel .cta-band .nt .n{ stroke:#0a0b09; filter:none; } /* sur le bandeau citron, le trait passe en noir */
html.relay.noel .cta-band .nt .f{ fill:#c6f432; }
html.relay.noel .cta-band .nt .w{ stroke:#fff; }
.nt-wave{ animation:ntWave 1.4s ease-in-out infinite; transform-origin:88px 98px; }
@keyframes ntWave{ 0%,100%{ transform:rotate(0); } 50%{ transform:rotate(-22deg); } }
.nt-garland{ top:0; left:0; width:100%; height:34px; }
.nt-garland svg{ height:34px; }
html.relay.noel .cta-band .nt-garland .g{ fill:#0a0b09; filter:none; }

/* Au pied de page : un renne passe la tête, des cadeaux et un petit sapin. */
.nt-reindeer--peek{ left:1.5%; bottom:6px; width:84px; }
html.relay.noel footer{ overflow:visible; }
.nt-gifts--foot{ display:none; }
.nt-tree--foot{ right:1.5%; bottom:6px; width:52px; }
/* Un renne marche le long du bandeau défilant de l'accueil. */
html.relay.noel .ticker{ position:relative; overflow:visible; }
.nt-walker{ bottom:100%; left:0; width:120px; animation:ntWalk 26s linear infinite; }
@keyframes ntWalk{ from{ transform:translateX(-140px); } to{ transform:translateX(100vw); } }
.nt-walker .nt-bob{ animation-duration:.6s; }

@media (max-width:760px){
  .nt-sleigh{ width:170px; } .nt-reindeer--hero, .nt-gifts{ display:none; }
  .nt-tree{ width:84px; right:4%; } .nt-santa{ width:96px; opacity:.9; } .nt-walker{ width:84px; }
  .nt-reindeer--peek, .nt-tree--foot{ display:none; }
}
@media (prefers-reduced-motion: reduce){ .nt, .nt *{ animation:none !important; } .nt-sleigh{ transform:translate(60vw, 0); } }