/* Page d'attente (mode construction / maintenance) : frigoriste au chalumeau oxygène-acétylène. Les couleurs suivent le thème du site (themes.css). */
@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 {
  --blue: #2453c9; --blue-dark: #1b3fa0; --navy: #0b1840; --navy-2: #12275f; --ice: #eaf3ff; --cyan: #56ccf2;
  --od1: #c3d0ee; --od3: #9fb0d6;
  --head: "Space Grotesk", system-ui, sans-serif; --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; min-height: 100dvh; display: grid; place-items: center; font-family: var(--body); color: var(--od1); line-height: 1.6;
  background: radial-gradient(120% 90% at 50% 8%, var(--navy-2), var(--navy)); }
a { color: #fff; }

.wait { width: min(760px, 100%); padding: 2rem 1.2rem 3.4rem; text-align: center; display: grid; justify-items: center; gap: 1rem; }
/* Logo seul, sans fond ni arrondi : passé en blanc (silhouette) pour bien ressortir sur le fond sombre du thème */
.wait__logo { display: inline-flex; }
.wait__logo img { width: min(300px, 70vw, 30vh); min-width: 150px; height: auto; filter: brightness(0) invert(1) drop-shadow(0 6px 18px rgba(0, 0, 0, .35)); }
.wait__badge { margin: .4rem 0 0; padding: .3rem .95rem; border-radius: 999px; font: 700 .8rem var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--navy); background: var(--cyan); }
.mode--construction .wait__badge { background: #ffcc00; color: #111; }
.wait__art { width: auto; max-width: 100%; height: min(340px, 34vh); min-height: 170px; margin: .2rem 0; }   /* la hauteur suit celle de l'écran pour que le titre reste visible */
h1 { margin: 0; font: 700 clamp(2rem, 6.5vw, 3.3rem)/1.08 var(--head); letter-spacing: -.02em; color: #fff; }
.wait__text { max-width: 34rem; margin: 0; font-size: clamp(1.02rem, 2.6vw, 1.2rem); }
.wait__note { margin: 0; padding: .5rem 1.1rem; border-radius: 12px; background: rgba(255, 255, 255, .1); color: #fff; font-weight: 600; }
.wait__contact { margin: .4rem 0 0; font-size: .95rem; color: var(--od3); }

/* Ruban de chantier en bas de page */
.wait__tape { position: fixed; left: 0; right: 0; bottom: 0; height: 14px; background: repeating-linear-gradient(-45deg, var(--cyan) 0 16px, var(--navy) 16px 32px); }
.mode--construction .wait__tape { background: repeating-linear-gradient(-45deg, #ffcc00 0 16px, #111 16px 32px); }

/* ---- Illustration : les classes portent les couleurs (la combinaison suit le thème) ---- */
.shadow { fill: rgba(0, 0, 0, .28); }
.trestle { stroke: #56607d; stroke-width: 10; fill: #56607d; }
.cu1 { stop-color: #f6c79c; } .cu2 { stop-color: #dc8a4a; } .cu3 { stop-color: #a4551f; }
.pipe { fill: url(#cuG); }
.pipe-shine { fill: #fff; opacity: .3; }
.sleeve { fill: #e9a869; stroke: #9c5220; stroke-width: 2; }
.sleeve-ring { fill: #c9772f; }
.hot { fill: url(#hotG); transform-box: fill-box; transform-origin: center; animation: glow 1.1s ease-in-out infinite; }
.cart, .cart-frame { fill: #3a4058; stroke: #3a4058; }
.cart-frame { fill: none; }
.wheel { fill: #171c33; } .hub { fill: #9aa3b8; }
.o2a { stop-color: #2568d6; } .o2b { stop-color: #4c8cf0; } .o2c { stop-color: #1a4aa6; }
.c2a { stop-color: #b2281f; } .c2b { stop-color: #dc4a3c; } .c2c { stop-color: #7d1a14; }
.o2 { fill: url(#o2G); } .c2 { fill: url(#c2G); }
.cyl-collar { fill: #b9c0cf; }
.brass { fill: #d1a84a; stroke: #9b7a2a; stroke-width: 1; }
.gauge { fill: #f4f6fb; stroke: #6b7388; stroke-width: 2; }
.needle { stroke: #d8392b; stroke-width: 1.8; stroke-linecap: round; }
.knob { stroke: #171c33; stroke-width: 1.2; }
.o2k { fill: #4c8cf0; } .c2k { fill: #e0503f; }
.label { fill: #f4f6fb; opacity: .95; }
.lbl { font: 800 15px var(--body); }
.lbl-o2 { fill: #1a4aa6; } .lbl-c2 { fill: #8e1d17; font-size: 11px; }
.chain { stroke: #6b7388; }
.hose { stroke-opacity: .95; }
.hose-o2 { stroke: #2a6fdb; } .hose-c2 { stroke: #d8392b; }
.arm-far { stroke: color-mix(in srgb, var(--blue-dark) 80%, #000); }
.arm-near { stroke: var(--blue); }
.legs { fill: var(--blue-dark); }
.boot { fill: #171c33; }
.torso { fill: var(--blue); }
.stripe { fill: #e8f0ff; opacity: .9; }
.belt { fill: #171c33; }
.cuff { fill: #3a2a20; }
.glove { fill: #6b4630; stroke: #3a2a20; stroke-width: 2; }
.torch-body { stroke: #8a6a22; }
.lance { fill: #b8c0cc; stroke: #7f8899; stroke-width: 1; }
.nozzle { fill: #4a5064; }
.rod { stroke: #dfe5ee; }
.skin { fill: #f1c7a3; } .skin-d { fill: #dfa982; }
.mouth { stroke: #9a5a3a; }
.cap { fill: var(--blue-dark); }
.strap { fill: #171c33; }
.goggle-frame { fill: #171c33; }
.goggle-lens { fill: #bfe9ff; opacity: .65; }
.goggle-shine { stroke: #fff; }

/* flamme : vacille en continu ; fumée de flux et étincelles discrètes */
.flame-out { fill: url(#flameG); } .flame-mid { fill: #ffe27a; opacity: .9; } .flame-cone { fill: url(#coneG); animation: cone .16s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 0 50%; }
.flame { transform-box: fill-box; transform-origin: 0 50%; animation: flame .2s ease-in-out infinite alternate; }
.smoke circle { fill: #e9edf5; opacity: 0; animation: rise 2.8s ease-out infinite; }
.smoke .s2 { animation-delay: .9s; } .smoke .s3 { animation-delay: 1.8s; }
.p { fill: #ffd34d; animation: fly 1.6s ease-out infinite; opacity: 0; }
.p1 { --dx: -10px; --dy: -46px; animation-delay: 0s; } .p3 { --dx: 34px; --dy: -34px; animation-delay: .35s; fill: #ff9a1f; }
.p5 { --dx: 14px; --dy: -58px; animation-delay: .7s; fill: #fff3a8; } .p7 { --dx: -30px; --dy: -30px; animation-delay: 1s; }
.p9 { --dx: 44px; --dy: -14px; animation-delay: 1.3s; fill: #ff9a1f; }
@keyframes fly { 0% { transform: translate(0, 0); opacity: 1; } 70% { opacity: .9; } 100% { transform: translate(var(--dx), calc(var(--dy) + 40px)); opacity: 0; } }
@keyframes flame { from { transform: scale(1, 1); } to { transform: scale(1.1, .88); } }
@keyframes cone { from { transform: scale(1, 1); } to { transform: scale(.88, 1.15); } }
@keyframes glow { 0%, 100% { opacity: .95; transform: scale(1); } 50% { opacity: .65; transform: scale(1.1); } }
@keyframes rise { 0% { transform: translateY(0) scale(.6); opacity: 0; } 20% { opacity: .35; } 100% { transform: translateY(-46px) scale(1.7); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .hot, .flame, .flame-cone, .smoke circle, .p { animation: none; }
  .p { opacity: .8; transform: translate(calc(var(--dx) * .5), calc(var(--dy) * .5)); }
}
@media (max-width: 480px) { .wait { padding-top: 1.2rem; } }