/* ===========================================================
   TechHome — Motifs dérivés du circuit imprimé du logo
   Tous en CSS pur (gradients répétés) : aucune image à charger,
   tout se recolore avec les tokens. Trois familles :
     .th-grid   — trame de pistes orthogonales (fonds de section)
     .th-nodes  — constellation de nœuds (héros, cartes)
     .th-trace  — piste unique, angle 45°, en séparateur
   =========================================================== */
:root{
  --pattern-line:#2A446359;
  --pattern-node:#2EC4B640;
  --pattern-size:56px;
}

/* Trame de circuit : lignes fines + points aux intersections */
.th-grid{
  background-image:
    linear-gradient(to right,var(--pattern-line) 1px,transparent 1px),
    linear-gradient(to bottom,var(--pattern-line) 1px,transparent 1px);
  background-size:var(--pattern-size) var(--pattern-size);
}
.th-grid-fade{position:relative}
.th-grid-fade::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(80% 70% at 50% 0%,transparent 0%,var(--bg-page) 78%)}

/* Pistes coudées : évoque les traces du PCB, 45° */
.th-traces{
  background-image:
    repeating-linear-gradient(45deg,var(--pattern-line) 0 1px,transparent 1px 26px),
    repeating-linear-gradient(-45deg,var(--pattern-line) 0 1px,transparent 1px 52px);
}

/* Constellation : nœuds du réseau, densité irrégulière */
.th-nodes{
  background-image:
    radial-gradient(2px 2px at 12% 22%,var(--signal-cyan) 50%,transparent 51%),
    radial-gradient(2px 2px at 34% 8%,var(--mauve) 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 58% 30%,var(--signal-cyan) 50%,transparent 51%),
    radial-gradient(2px 2px at 78% 14%,var(--signal-magenta) 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 91% 40%,var(--signal-cyan) 50%,transparent 51%),
    radial-gradient(2px 2px at 22% 62%,var(--mauve) 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 47% 78%,var(--signal-cyan) 50%,transparent 51%),
    radial-gradient(2px 2px at 69% 88%,var(--signal-cyan) 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 86% 70%,var(--signal-magenta) 50%,transparent 51%);
  background-repeat:no-repeat;
}

/* Halo de signal derrière un logo ou un titre de héros */
.th-halo{position:relative;isolation:isolate}
.th-halo::before{content:"";position:absolute;inset:-20%;z-index:-1;background:var(--glow-signal);pointer-events:none}

/* Filet accent : la règle de 3px sous les titres de section */
.th-rule{width:56px;height:var(--bw-rule);background:var(--grad-signal);border-radius:2px}
.th-rule-spectrum{width:100%;height:var(--bw-rule);background:var(--grad-spectrum)}

/* Bande de couleur du recto de carte de visite — signature imprimée */
.th-flag{display:flex;height:8px;width:180px}
.th-flag>i{flex:1}
.th-flag>i:nth-child(1){background:var(--coral)}
.th-flag>i:nth-child(2){background:var(--mustard)}
.th-flag>i:nth-child(3){background:var(--teal)}
.th-flag>i:nth-child(4){background:var(--mauve)}