/* ==========================================================================
   competences.css — Une grande feuille au centre, les technos autour
   ========================================================================== */
.toolbox-wrap { padding-block: clamp(50px, 8vw, 100px) clamp(20px, 4vw, 50px); }

.toolbox {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(22px, 3.2vw, 44px) clamp(18px, 3vw, 40px);
  align-items: center;
}
/* La feuille occupe le centre (colonnes 2-3, lignes 2-3) ; 8 notes l'entourent */
.toolbox__sheet { grid-column: 2 / 4; grid-row: 2 / 4; }
.toolbox__sheet .paper { padding: clamp(36px, 5vw, 68px) clamp(28px, 4.5vw, 64px); min-height: 380px; display: flex; flex-direction: column; justify-content: center; gap: 1rem; }
.toolbox__sheet .title { font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
.toolbox__sheet p:not(.toolbox__hand) { color: var(--paper-ink-soft); max-width: 32ch; }
.toolbox__hand { font-size: 1.9rem; color: var(--accent-deep); rotate: -2deg; margin-top: 0.4rem; }
.toolbox__star { top: -26px; right: 10%; --rot: 10deg; }

/* Notes : petits papiers de tailles et de niveaux différents */

.tool__paper { padding: 22px 20px 24px; display: flex; flex-direction: column; gap: 0.25rem; }
.tool__name { font-family: var(--font-title); font-weight: 600; font-size: clamp(1.25rem, 2.1vw, 1.7rem); line-height: 1.1; letter-spacing: -0.01em; }
.tool__kind { font-size: 0.88rem; color: var(--sheet-soft); }

/* Décalages pour éviter la grille trop sage (top/left : le translate sert à l'apparition) */
.tool:nth-of-type(2) { top: 14px; }
.tool:nth-of-type(3) { top: -10px; }
.tool:nth-of-type(6) { left: 8px; }
.tool:nth-of-type(7) { left: -6px; top: 12px; }
.tool:hover { rotate: 0deg; }

/* Niveau (optionnel) : ajoute data-level="Avancé" sur un <li class="tool"> */
.tool[data-level]::after {
  content: attr(data-level);
  position: absolute; right: -6px; bottom: -14px; z-index: 3;
  font-family: var(--font-hand); font-size: 1.35rem; color: var(--accent);
  rotate: -5deg;
}

/* Tablette : la feuille passe en haut, les notes dessous en 4 colonnes -> 2 lignes */
@media (max-width: 900px) {
  .toolbox { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toolbox__sheet { grid-column: 1 / -1; grid-row: auto; order: -1; margin-bottom: 14px; }
  .toolbox__sheet .paper { min-height: 0; }
  .tool { top: 0 !important; left: 0 !important; }
}
@media (max-width: 420px) {
  .tool__paper { padding: 18px 14px 20px; }
}