/* ===== BASE EQUIPEMENT ===== */
.equip {
  box-sizing: border-box;
}

/* ===== ESPACE VIDE (type non renseigné) ===== */
.eq-empty {
  background: repeating-linear-gradient(
    45deg,
    #d1d5db 0px,
    #d1d5db 4px,
    #f3f4f6 4px,
    #f3f4f6 10px
  );
  opacity: 0.6;
  border: 1px dashed #9ca3af;
}

/* ===== SWITCH ===== */
.eq-switch {
  width: 250px;
  height: 20px;
  background: #d1d5db;           /* gris clair */
  border: 1px solid #9ca3af;
  border-radius: 6px;
  position: absolute;
}

/* ===== LED POE ===== */
.eq-switch.poe::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 4px;
  height: 4px;
  background: #22c55e;           /* vert */
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(34,197,94,.9);
}

/* ===== ZONE PORTS ===== */
/* ===== SWITCH (paramètres) ===== */
.eq-switch {
  /* Géométrie de la zone ports */
  --ports-zone-right: 8px;
  --ports-zone-top: 15%;
  --ports-zone-width: 40%;
  --ports-zone-height: 20px;
  
  /* Layout ports */
  --ports-per-row: 12;          /* 12 => switch 24 ports (2x12) ; 24 => switch 48 ports (2x24) */
  --row-height: 8px;            /* hauteur d'une rangée (doit >= portH) */
  --portW: 8px;                 /* largeur du port (noir) */
  --portH: 4px;                 /* hauteur du port (noir) */
  --gapW: 2px;                  /* espace après le port dans la "cellule" */
  
  /* LEDs (dans le port) */
  --ledR: 1.5px;                /* rayon plein */
  --ledFade: 1px;               /* fin de transition */
  --ledY: 1px;                  /* position Y dans le port */
  --ledXLeft: 1px;              /* position X LED gauche */
  --ledXRight: calc(var(--portW) - 1px); /* LED droite dans le port */
  
  /* Couleurs */
  --portColor: #111;
  --ledOrange: #f59e0b;
  --ledGreen: #22c55e;
}

/* ===== ZONE PORTS (2 lignes) ===== */
.eq-switch::after {
  content: "";
  position: absolute;
  right: var(--ports-zone-right);
  top: var(--ports-zone-top);
  width: var(--ports-zone-width);
  height: var(--ports-zone-height);
  pointer-events: none;
  
  /* "cellule" = port + gap ; et N cellules par ligne */
  background:
  /* ===== LIGNE HAUTE ===== */
  radial-gradient(circle at var(--ledXLeft) var(--ledY), var(--ledOrange) var(--ledR), transparent var(--ledFade))
  top left / calc(100% / var(--ports-per-row)) var(--row-height) repeat-x,
  
  radial-gradient(circle at var(--ledXRight) var(--ledY), var(--ledGreen) var(--ledR), transparent var(--ledFade))
  top left / calc(100% / var(--ports-per-row)) var(--row-height) repeat-x,
  
  linear-gradient(to right,
  var(--portColor) 0 var(--portW),
  transparent var(--portW) calc(var(--portW) + var(--gapW))
  )
  top left / calc(100% / var(--ports-per-row)) var(--row-height) repeat-x,
  
  /* ===== LIGNE BASSE ===== */
  radial-gradient(circle at var(--ledXLeft) var(--ledY), var(--ledOrange) var(--ledR), transparent var(--ledFade))
  bottom left / calc(100% / var(--ports-per-row)) var(--row-height) repeat-x,
  
  radial-gradient(circle at var(--ledXRight) var(--ledY), var(--ledGreen) var(--ledR), transparent var(--ledFade))
  bottom left / calc(100% / var(--ports-per-row)) var(--row-height) repeat-x,
  
  linear-gradient(to right,
  var(--portColor) 0 var(--portW),
  transparent var(--portW) calc(var(--portW) + var(--gapW))
  )
  bottom left / calc(100% / var(--ports-per-row)) var(--row-height) repeat-x;
}

/* ===== Presets simples ===== */
.eq-switch.p24 { --ports-per-row: 12; }
.eq-switch.p48 { --ports-per-row: 24; --ports-zone-width: 80%; }



/* ===== AUTOCOM ===== */
.eq-autocom {
  width: 250px;
  height: 40px;
  background: #0b0b0b;          /* noir */
  border: 1px solid #000;
  border-radius: 6px;
  position: absolute;
}
/* ===== PORTS AUTOCOM ===== */

.eq-autocom::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 40%;
  height: 36px;
  pointer-events: none;
  
  background:
  /* =========================
  PORTS (4 lignes × 8)
  ========================= */
  linear-gradient(to right, #2563eb 0 4px, transparent 4px)
  top left / calc(100% / 8) 6px repeat-x,
  linear-gradient(to right, #2563eb 0 4px, transparent 4px)
  0 12px / calc(100% / 8) 6px repeat-x,
  linear-gradient(to right, #2563eb 0 4px, transparent 4px)
  0 24px / calc(100% / 8) 6px repeat-x,
  linear-gradient(to right, #2563eb 0 4px, transparent 4px)
  bottom left / calc(100% / 8) 6px repeat-x,
  
  /* =========================
  LISERÉS VERTICAUX (tous les 8 ports)
  ========================= */
  linear-gradient(#9ca3af 0 0)
  calc(100% / 8) 0 / 1px 100% no-repeat,
  linear-gradient(#9ca3af 0 0)
  calc(100% * 2 / 8) 0 / 1px 100% no-repeat,
  linear-gradient(#9ca3af 0 0)
  calc(100% * 3 / 8) 0 / 1px 100% no-repeat,
  linear-gradient(#9ca3af 0 0)
  calc(100% * 4 / 8) 0 / 1px 100% no-repeat,
  linear-gradient(#9ca3af 0 0)
  calc(100% * 5 / 8) 0 / 1px 100% no-repeat,
  linear-gradient(#9ca3af 0 0)
  calc(100% * 6 / 8) 0 / 1px 100% no-repeat,
  linear-gradient(#9ca3af 0 0)
  calc(100% * 7 / 8) 0 / 1px 100% no-repeat,
  
  /* =========================
  LISERÉS HORIZONTAUX (entre lignes)
  ========================= */
  linear-gradient(#9ca3af 0 0)
  0 10px / 100% 1px no-repeat,
  linear-gradient(#9ca3af 0 0)
  0 22px / 100% 1px no-repeat,
  linear-gradient(#9ca3af 0 0)
  0 34px / 100% 1px no-repeat;
}




/* ===== PANNEAU DE BRASSAGE ===== */
.eq-panneau {
  background: #f8fafc;          /* gris très clair / blanc */
  border: 1px solid #9ca3af;
  border-radius: 6px;
  position: absolute;
  
  /* paramètres */
  --ports-per-row: 24;
  --row-height: 8px;
  --portW: 8px;
  --gapW: 2px;
  --portColor: #374151;         /* gris foncé */
}

/* ===== ZONE PORTS ===== */
.eq-panneau::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 80%;
  height: var(--row-height);
  pointer-events: none;
  
  background:
  linear-gradient(
  to right,
  var(--portColor) 0 var(--portW),
  transparent var(--portW) calc(var(--portW) + var(--gapW))
  )
  left center / calc(100% / var(--ports-per-row)) var(--row-height) repeat-x;
}

/* ===== Preset explicite (optionnel) ===== */
.eq-panneau.p24 {
  --ports-per-row: 24;
}


/* ===== TIROIR OPTIQUE ===== */
.eq-tiroir-optique {
  background: #f9fafb;
  border: 1px solid #9ca3af;
  border-radius: 6px;
  position: absolute;
  text-align: center;
}

.eq-tiroir-optique::before{
  content:"";
  position:absolute;
  left:8px;
  top:50%;
  transform:translateY(-50%);
  width:calc((100% - 16px) / 3);   /* 1er tiers */
  height:12px;
  pointer-events:none;
  
  /* 12 ports fixes, PLUS ÉPAIS */
  background:
  linear-gradient(
  to right,
  #86efac 0 8px,              /* port vert x2 */
  transparent 8px 12px        /* pas = port + gap */
  )
  left center / calc(100% / 12) 10px repeat-x;
}


.eq-tiroir-optique::after{
  content:"";
  position:absolute;
  inset:8px;
  pointer-events:none;
  
  background:
  /* ===== 2 fibres jaunes horizontales (2px) ===== */
  linear-gradient(#facc15 0 0)
  calc(100%/3) calc(50% - 6px) / calc(100% - (100%/3)) 2px no-repeat,
  linear-gradient(#facc15 0 0)
  calc(100%/3) calc(50% + 6px) / calc(100% - (100%/3)) 2px no-repeat,
  
  /* ===== Boîtier blanc (fond) sur le dernier tiers ===== */
  linear-gradient(#ffffff 0 0)
  calc(100%*2/3) top / calc(100%/3) 100% no-repeat,
  
  /* ===== Liseré noir autour du boîtier ===== */
  linear-gradient(#000 0 0)
  calc(100%*2/3) top / calc(100%/3) 1px no-repeat,   /* haut */
  linear-gradient(#000 0 0)
  calc(100%*2/3) bottom / calc(100%/3) 1px no-repeat,/* bas */
  linear-gradient(#000 0 0)
  calc(100%*2/3) top / 1px 100% no-repeat,           /* gauche */
  linear-gradient(#000 0 0)
  right top / 1px 100% no-repeat;                    /* droite */
}


/* ===== FIREWALL ===== */
.eq-firewall{
  position:absolute;
  background:transparent;
  border:2px solid #dc2626;      /* liseré rouge */
  border-radius:6px;
  box-sizing:border-box;
}

/* ===== Mur + icônes SUR LA PARTIE DROITE ===== */
.eq-firewall::after{
  content:"🔥🛡️";
  position:absolute;
  top:0;
  right:0;
  width:30%;
  height:100%;
  border-left:2px solid #dc2626;
  border-top-right-radius:4px;
  border-bottom-right-radius:4px;

  /* centrage des icônes */
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;

  font-size:14px;
  line-height:1;
  pointer-events:none;

  /* mur rouge */
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.20) 0 1px,
      transparent 1px 10px
    ),
    repeating-linear-gradient(
      to right,
      rgba(255,255,255,.18) 0 1px,
      transparent 1px 12px
    ),
    linear-gradient(#b91c1c, #7f1d1d);
}

/* ===== STOCKAGE (HDD simple) ===== */
.eq-stockage{
  position:absolute;
  box-sizing:border-box;
  border-radius:6px;
  border:1px solid #3a3a3a;

  /* fond gris + LED verte (en haut à droite) */
  background:
    linear-gradient(#22c55e 0 0) right 0 top 3px / 10px 4px no-repeat,
    #676767;
}

/* ===== DISQUE (à droite) ===== */
.eq-stockage::before{
  content:"";
  position:absolute;
  top:50%;
  right:12px;
  transform:translateY(-50%);
  width:63px;
  height:63px;
  border-radius:50%;
  pointer-events:none;

  background:
    radial-gradient(circle at 50% 50%, #bdbdbd 0 31px, transparent 32px),
    radial-gradient(circle at 50% 50%, transparent 0 7px, rgba(0,0,0,.65) 7px 8px, transparent 8px),
    radial-gradient(circle at 50% 50%, #676767 0 4px, transparent 4.5px);
}

/* ===== AIGUILLE ===== */
.eq-stockage::after{
  content:"";
  position:absolute;
  top:50%;
  right:0;
  width:46px;
  height:14px;
  pointer-events:none;

  background:#000;
  border-radius:999px;
  clip-path: polygon(
    0% 35%,
    76% 35%,
    100% 50%,
    76% 65%,
    0% 65%
  );

  transform-origin: 92% 50%;
  transform: translateY(-50%) translateX(-28px) rotate(28deg);
}


/* ===== NAS (même visuel que stockage) ===== */
.eq-nas{
  position:absolute;
  box-sizing:border-box;
  border-radius:6px;
  border:1px solid #3a3a3a;
  background:
    linear-gradient(#22c55e 0 0) right 0 top 3px / 10px 4px no-repeat,
    #676767;
}
.eq-nas::before{
  content:"";
  position:absolute;
  top:50%;
  right:12px;
  transform:translateY(-50%);
  width:63px;
  height:63px;
  border-radius:50%;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%, #bdbdbd 0 31px, transparent 32px),
    radial-gradient(circle at 50% 50%, transparent 0 7px, rgba(0,0,0,.65) 7px 8px, transparent 8px),
    radial-gradient(circle at 50% 50%, #676767 0 4px, transparent 4.5px);
}
.eq-nas::after{
  content:"";
  position:absolute;
  top:50%;
  right:0;
  width:46px;
  height:14px;
  pointer-events:none;
  background:#000;
  border-radius:999px;
  clip-path: polygon(
    0% 35%,
    76% 35%,
    100% 50%,
    76% 65%,
    0% 65%
  );
  transform-origin: 92% 50%;
  transform: translateY(-50%) translateX(-28px) rotate(28deg);
}

/* ===== PASSERELLE VoIP ===== */
.eq-passerelle-voip{
  position:absolute;
  box-sizing:border-box;
  border-radius:6px;
  border:1px solid #9d174d;
  background: linear-gradient(#f472b6, #be185d);
  overflow:hidden;
}

/* Ports RJ11 */
.eq-passerelle-voip::after{
  content:"";
  position:absolute;
  inset:4px;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.15) 0 5px,
      transparent 5px 10px
    )
    left 0 center / 60% 50% no-repeat;
}

/* ===== BOX INTERNET ===== */
.eq-box{
  position:absolute;
  box-sizing:border-box;
  border-radius:6px;
  text-align: center;
  color: white;
  border:1px solid #1f2933;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.10) 0 1px,
      transparent 1px 5px
    ) left 10px top 10px / 10px calc(100% - 20px) no-repeat,
    linear-gradient(#2b313a, #111827);
}

/* LEDs + petit bouton */
.eq-box::after{
  content:"";
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:70px;
  height:14px;
  pointer-events:none;

  background:
    radial-gradient(circle at 8px 7px, #9ca3af 0 2px, transparent 2.5px),
    radial-gradient(circle at 28px 7px, #22c55e 0 2px, transparent 2.5px),
    radial-gradient(circle at 44px 7px, #facc15 0 2px, transparent 2.5px),
    radial-gradient(circle at 60px 7px, #60a5fa 0 2px, transparent 2.5px);
}

/* petit "logo" discret à gauche */
.eq-box::before{
  content:"";
  position:absolute;
  left:10px;
  bottom:10px;
  width:28px;
  height:3px;
  background:#9ca3af;
  border-radius:2px;
  opacity:.6;
  pointer-events:none;
}


/* ===== SERVEUR RACK ===== */
.eq-serveur{
  position:absolute;
  box-sizing:border-box;
  border-radius:6px;
  border:1px solid #111827;
  background:#111827;
  overflow:hidden;
  color: white;
}

.eq-serveur.s1u{ --tray-rows: 1; }
.eq-serveur.s2u{ --tray-rows: 2; }

/* Grille + disques + LEDs */
.eq-serveur::after{
  content:"";
  position:absolute;
  inset:6px;
  pointer-events:none;

  background:
    radial-gradient(circle at calc(100% - 10px) 10px, #22c55e 0 2px, transparent 3px),
    radial-gradient(circle at calc(100% - 22px) 10px, #facc15 0 2px, transparent 3px),
    radial-gradient(circle at calc(100% - 34px) 10px, #60a5fa 0 2px, transparent 3px),

    repeating-linear-gradient(
      to right,
      #374151 0 10px,
      transparent 10px 13px
    )
    right 0 bottom 0 / 55% calc(12px * var(--tray-rows, 1)) no-repeat,

    linear-gradient(rgba(255,255,255,.10) 0 0)
    right 0 bottom 12px / 55% 1px no-repeat,

    repeating-linear-gradient(
      to right,
      rgba(255,255,255,.15) 0 2px,
      transparent 2px 6px
    )
    left 0 center / 35% 60% no-repeat,

    linear-gradient(#1f2937, #0b1220);
}

/* poignées */
.eq-serveur::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.12) 0 0) left 6px center / 6px 30% no-repeat,
    linear-gradient(rgba(255,255,255,.12) 0 0) right 6px center / 6px 30% no-repeat;
}


/* ===== ONDULEUR (UPS) ===== */
.eq-onduleur{
  position:absolute;
  color: white;
  box-sizing:border-box;
  border-radius:6px;
  border:1px solid #0b0b0b;
  background: linear-gradient(#1b1b1b, #0f0f0f);
  overflow:hidden;
}

/* Face avant : écran + LEDs + ventilation */
.eq-onduleur::after{
  content:"";
  position:absolute;
  inset:6px;
  pointer-events:none;

  background:
    linear-gradient(#0f766e 0 0)
      left 0 top 0 / 44px 18px no-repeat,
    linear-gradient(rgba(255,255,255,.20) 0 0)
      left 4px top 4px / 36px 2px no-repeat,

    radial-gradient(circle at 62px 9px, #22c55e 0 2px, transparent 3px),
    radial-gradient(circle at 76px 9px, #facc15 0 2px, transparent 3px),
    radial-gradient(circle at 90px 9px, #ef4444 0 2px, transparent 3px),

    radial-gradient(circle at calc(100% - 10px) 10px, #9ca3af 0 2px, transparent 3px),

    repeating-linear-gradient(
      to right,
      rgba(255,255,255,.14) 0 2px,
      transparent 2px 6px
    )
    left 0 bottom 0 / 100% 10px no-repeat;
}

/* Poignées */
.eq-onduleur::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.10) 0 0) left 6px center / 6px 35% no-repeat,
    linear-gradient(rgba(255,255,255,.10) 0 0) right 6px center / 6px 35% no-repeat;
}

/* ===== BANDEAU PRISE ELECTRIQUE ===== */
.eq-bandeau{
  background: #555 !important;
  display: flex !important;
  align-items: center;
  justify-content: space-around;
  padding: 2px 6px;
  overflow: hidden;
}

/* Un groupe = 1 prise : disque noir avec 2 trous blancs */
.priseGroup{
  background: #111;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex-shrink: 0;
}

/* Les 2 trous (phase + neutre) */
.priseTrou{
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  background: #fff;
}

/* ===== INTERCONNEXION ===== */
.eq-interconnexion{
  position:absolute;
  box-sizing:border-box;
  border-radius:6px;
  border:1px solid #6366f1;
  background: linear-gradient(135deg, #818cf8, #6366f1);
  color: #fff;
  overflow:hidden;
}

/* Motif lignes de lien */
.eq-interconnexion::after{
  content:"";
  position:absolute;
  inset:4px;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.12) 0 2px,
      transparent 2px 8px
    )
    left 0 center / 100% 40% no-repeat,
    radial-gradient(circle at 12px 50%, rgba(255,255,255,.25) 0 3px, transparent 4px),
    radial-gradient(circle at calc(100% - 12px) 50%, rgba(255,255,255,.25) 0 3px, transparent 4px);
}