/* ═════════════════════════════════════════════════════════════════════════════════════════
   MECAFLOW — SOCLE DES SITES VITRINES (5S, Tag, et les suivants)
   Une seule source pour ce qui fait « la même boîte » : palette, typographies, largeur du
   bloc, entête et marque, titres, boutons, cartes, sections. Mesuré et aligné le 11.09.2026
   entre 5s.mecaflow.ch et tag.mecaflow.ch.

   ⚠️ CHARGEMENT : chaque site COPIE ce fichier dans son propre bundle au déploiement
      (`/assets/mf-site.css`) — jamais depuis l'autre domaine : Tag a une CSP `style-src 'self'`
      et bloquerait une feuille externe. Il se charge APRÈS mf-fonts.css et AVANT le <style>
      propre à la page : la page peut affiner, jamais redéfinir ce qui est ici.
   ⚠️ VERSION : bumper `?v=` dans les pages à chaque changement — les assets sont mis en
      cache un an (`immutable`).
   ⛔ Pas de règle propre à un produit ici : ni hero 5S, ni panier Tag. Uniquement le socle.
   ═════════════════════════════════════════════════════════════════════════════════════════ */

:root{
  --ember:#E8930C;--ember2:#ff9d1e;--ember-ink:#A25F00;
  --ok:#1E9E5A;--red:#D5232A;--blue:#22d3ee;
  --bg:#0b0f16;--bg2:#0f1420;--card:#141a26;
  --ink:#eaf0f8;--ink2:#9aa6ba;--ink3:#6b7789;--line:rgba(255,255,255,.11);
  --disp:'Barlow Condensed','Bahnschrift','Arial Narrow','Segoe UI',sans-serif;
  --body:'Barlow','Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --w:1180px;--gutter:22px;--r:14px}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55}
img{max-width:100%}
a{color:var(--ember)}

/* ── Le bloc ───────────────────────────────────────────────────────────────────────────── */
.w{max-width:var(--w);margin:0 auto;padding:0 var(--gutter)}

/* ── L'entête et la marque ────────────────────────────────────────────────────────────── */
.top{position:sticky;top:0;z-index:40;background:rgba(11,15,22,.93);backdrop-filter:blur(9px);border-bottom:1px solid var(--line)}
.top .w{display:flex;align-items:center;gap:16px;padding:13px var(--gutter)}
.mk{font-family:var(--disp);font-weight:700;letter-spacing:.14em;font-size:21px;text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:11px}
.mk em{font-style:normal;color:var(--ember)}
.mk .bar{width:12px;height:22px;background:linear-gradient(var(--ember),var(--ember2));clip-path:polygon(0 0,100% 0,58% 100%,0 100%);box-shadow:0 0 13px rgba(232,147,12,.55)}
.top nav{margin-left:auto;display:flex;gap:20px;align-items:center;font-size:14.5px}
.top nav a{color:var(--ink2);text-decoration:none;white-space:nowrap}
.top nav a:hover{color:var(--ink)}
@media(max-width:820px){.top nav a.h{display:none}}

/* ── Les titres ────────────────────────────────────────────────────────────────────────── */
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--ember)}
h1{font-family:var(--disp);font-size:clamp(36px,6.4vw,62px);line-height:1.03;margin:14px 0 0;text-wrap:balance;text-transform:uppercase}
h2{font-family:var(--disp);font-size:clamp(26px,3.8vw,38px);text-transform:uppercase;letter-spacing:.02em;margin:0 0 8px;text-wrap:balance}
h3{font-family:var(--disp);font-size:18px;letter-spacing:.03em;margin:0 0 7px;text-transform:uppercase}
.sub{color:var(--ink2);font-size:16.5px;max-width:62ch;margin:0 0 30px}

/* ── Les boutons ───────────────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:9px;padding:11px 20px;font-weight:700;font-size:15px;text-decoration:none;border:1px solid transparent;cursor:pointer;font-family:var(--body)}
.btn.p{background:var(--ember);color:#0b0f16}
.btn.p:hover{background:var(--ember2)}
.btn.s{border-color:var(--line);color:var(--ink)}
.btn.s:hover{border-color:var(--ember)}

/* ── Sections et cartes ────────────────────────────────────────────────────────────────── */
section{padding:62px 0;border-top:1px solid var(--line)}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px}

/* ── Le pied de page ───────────────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding:30px 0;color:var(--ink3);font-size:13.5px}
footer a{color:var(--ink2);text-decoration:none}
footer a:hover{color:var(--ember)}

/* ── Made in Switzerland ───────────────────────────────────────────────────────────────── */
.ch{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink2)}
.cross{width:15px;height:15px;border-radius:3px;background:#D52B1E;position:relative;flex:none}
.cross:before,.cross:after{content:'';position:absolute;background:#fff}
.cross:before{left:6px;top:3px;width:3px;height:9px}
.cross:after{left:3px;top:6px;width:9px;height:3px}