/* Zone des tags */
.tech-tags{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  align-items:center;
  padding: 10px 0 20px;
}

/* Tag (pilule) */
.tech-tag{
  display:inline-flex;
  align-items:center;
  gap:10px;

  padding:10px 14px;
  border-radius:9999px;

  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(148, 163, 184, 0.14);

  color:#0f172a;
  font-weight:600;
  font-size:14px;
  line-height:1;

  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  transition: transform .15s ease, box-shadow .15s ease;
}

/* Pastille ronde colorée */
.tech-tag::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:9999px;
  background: var(--dot, #22c55e);
  flex:0 0 10px;
}

/* Hover */
.tech-tag:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.12);
}

/* Centre le bloc sur la page */
.tech-wrap{
  width: 100%;
  max-width: 980px;   /* ajuste si tu veux plus large/plus étroit */
  margin: 0 auto;     /* centre horizontalement */
  padding: 0 12px;    /* respirations */
}

/* Zone des tags */
.tech-tags{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center; /* centre les tags */
  align-items:center;
}


/* Couleurs (cycle automatique) */
.tech-tag:nth-child(6n+1){ --dot:#22c55e; background: rgba(34,197,94,.12);  border-color: rgba(34,197,94,.22); }
.tech-tag:nth-child(6n+2){ --dot:#3b82f6; background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.22); }
.tech-tag:nth-child(6n+3){ --dot:#a855f7; background: rgba(168,85,247,.12); border-color: rgba(168,85,247,.22); }
.tech-tag:nth-child(6n+4){ --dot:#f59e0b; background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.24); }
.tech-tag:nth-child(6n+5){ --dot:#ef4444; background: rgba(239,68,68,.12);  border-color: rgba(239,68,68,.22); }
.tech-tag:nth-child(6n){   --dot:#14b8a6; background: rgba(20,184,166,.12); border-color: rgba(20,184,166,.22); }

/* Centre global de la page */
.tech-page{
  max-width: var(--site-max-width, calc(100vw - 1rem));
  margin: 0 auto;
  text-align: center;
}

.tech-page .tech-wrap{
  width: 100%;
}

/* Bouton de retour */
.tech-back-btn.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  padding:10px 18px;
  border-radius:9999px;
  border:1px solid rgba(15, 23, 42, 0.18);
  background:#ffffff;

  color:#0f172a;
  font-weight:600;
  text-decoration:none;

  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}

.tech-back-btn.btn:hover,
.tech-back-btn.btn:focus{
  background:#f1f5f9;
  border-color: rgba(15, 23, 42, 0.28);
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.12);
  transform: translateY(-2px);
  text-decoration:none;
}