/* ╔═══════════════════╗
   ║  VARIABLES CSS    ║
   ╚═══════════════════╝ */
:root{
  --core-bg   : #971a0c;
  --core-bd   : #7c1c12;
  --core-tx   : #fbe3d1;

  --branch-bg : #f97b2d;
  --branch-bd : #a84709;
  --branch-tx : #fdf1e5;
}

/* ╔═══════════════════╗
   ║  MISE EN PAGE     ║
   ╚═══════════════════╝ */
html, body{
  height:100%;
  margin:0;
  font-family:"Inter", Arial, sans-serif;
  background:#dddddd;    /* scroll vertical si besoin */
  overflow-x: hidden;    /* pas de scroll horizontal parasite */
}

.gears-container{
  position:relative;      /* contexte pour #particles-js en absolute */
  z-index:1;              /* UI au-dessus du canvas */
  pointer-events:auto;
  display:flex;
  justify-content:center;
  align-items:center;

  /* Mobile-first : occupe l’écran, sans débordement horizontal */
  min-height:100dvh;
  padding:clamp(8px, 3vw, 24px);
  box-sizing:border-box;
}

/* Canvas des particules : s’étire juste dans .gears-container */
#particles-js{
  position:absolute;      /* ← au lieu de fixed (contenu au conteneur) */
  inset:0;
  z-index:0;              /* sous l’UI */
  pointer-events:auto;    /* interactivité hover/repulse conservée */
}

#particles-js > canvas{
  width: 100% !important;
  height: 100% !important;
  display: block;
  /* tactile : priorité au scroll vertical dans le conteneur */
  touch-action: pan-y;
}

/* Zone visible (responsive), la stage sera centrée et scalée dedans */
.gear-visuel{
  position:relative;
  pointer-events:none;   /* laisse passer vers le canvas dans les creux */
  width:  clamp(340px, 80vw, 880px);
  height: clamp(340px, 80vh, 880px);
  margin:auto;
  overflow:visible;
  will-change: transform;
}

/* Stage interne en taille de référence, centrée et scalable via JS */
.gear-stage{
  position:absolute;
  top:50%;
  left:50%;
  width:600px;   /* taille de référence */
  height:600px;  /* taille de référence */
  transform:translate(-50%, -50%) scale(1);
  transform-origin:center center;
  pointer-events:none;   /* laisse passer vers le canvas */
  font-size:16px;
}

/* ╔═══════════════════╗
   ║  ENGRENAGES       ║
   ╚═══════════════════╝ */
.gear{
  position:absolute;
  display:flex;
  justify-content:center;
  align-items:center;
  background:transparent;
  border:none;
  cursor:pointer;
  transform-origin:center;
  padding:0;
  pointer-events:none;  /* laisse passer dans les creux */
}

/* Désactiver l’outline clavier par défaut */
.gear:focus { outline: none; }
.gear:focus-visible { outline: none; box-shadow: none; }

/* Focus discret et circulaire (optionnel) */
.gear:focus-visible .engrenage {
  box-shadow: 0 0 0 3px rgba(255,255,255,.4);
  border-radius: 50%;
}

/* Effet visuel quand le SVG est survolé (pas le rect. du bouton) */
.gear.is-hover .engrenage svg {
  transform: scale(1.05);
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.25));
  transition: transform .18s ease, filter .18s ease;
}

/* Label un peu plus lisible au survol du SVG */
.gear.is-hover .label {
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}

/* Masquage */
.gear.collapsed { display: none !important; }

/* Rotor (reçoit les events) */
.engrenage{
  position:absolute;
  inset:0;
  pointer-events:auto;  /* hover/clic sur l’engrenage */
}

/* SVG dans l’engrenage */
.gear svg{
  width:100%;
  height:100%;
  fill:currentColor;
  pointer-events:none;  /* le SVG ne bloque pas le canvas, seul le wrapper bloque */
  display:block;
  transform-origin:center;
}

/* Labels (cliquables) */
.label{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  transform-origin:center center;
  writing-mode:horizontal-tb;
  z-index:2;

  color:inherit;
  font-weight:600;
  line-height:1.25;
  text-align:center;
  padding:0.5rem;
  max-width:85%;
  white-space:normal;
  overflow-wrap:break-word;
  text-shadow:0 1px 2px rgba(0,0,0,0.4);

  pointer-events:auto; /* clic autorisé */
  cursor: pointer;
  backface-visibility:hidden;
  will-change:transform;
}

/* ——— Core ——— */
.gear--core{ color:var(--core-tx); pointer-events:auto; }
.gear--core svg{ fill:var(--core-bg); }
.gear--core .label{ font-size:18px; text-align:center; }

/* ——— Branches ——— */
.gear--branch{ color:var(--branch-tx); }
.gear--branch svg{ fill:var(--branch-bg); }
.gear--branch .label{ font-size:12px; text-align:center; }

/* ╔═══════════════════╗
   ║  ANIMATIONS       ║
   ╚═══════════════════╝ */
@keyframes spin-cw  { to { transform: rotate(360deg);  } }
@keyframes spin-ccw { to { transform: rotate(-360deg); } }

.spin-cw  { animation: spin-cw  10s linear infinite; }
.spin-ccw { animation: spin-ccw  8s  linear infinite; }

/* Compteur non bloquant (si utilisé) */
.count-particles{
  position:absolute;
  inset:0;
  z-index:0;             /* même plan que le canvas */
  pointer-events:none;   /* ne bloque rien */
  color:transparent;     /* invisible si non utilisé */
}

/* ╔═══════════════════╗
   ║  MEDIA QUERIES    ║
   ╚══════════════════╝ */
@media (max-width: 480px){
  .gear-visuel{
    width: clamp(320px, 92vw, 420px);
    height: clamp(320px, 92vh, 420px);
  }
}

/* Donne la priorité au scroll vertical sur écrans tactiles */
@media (pointer: coarse){
  #particles-js, #particles-js > canvas{
    touch-action: pan-y;  /* geste vertical = scroll, pas “drag canvas” */
  }
}

/* ==========================================================
   ✅ Option d’accessibilité : réduction manuelle des animations
========================================================== */
body.reduce-motion .spin-cw,
body.reduce-motion .spin-ccw {
  animation: none !important;
}