/* ==========================================================
   03 — COMPÉTENCES
   Maquette Figma : 03_SKILLS (1440 × 708 px)
   ========================================================== */

.competences {
  aspect-ratio: 1440 / 708;
  --hauteur: 708;
  background-color: var(--rose);
}

/* ---------- Titre « COMPÉTENCES » ---------- */

.competences__titre {
  margin: 0;
  color: var(--vert-olive);
  font-family: var(--police-titre-gras);
  font-size: calc(96 * var(--u));
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- Dossiers ---------- */

.competences__liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Les éléments sont placés directement dans la section (positions Figma) */
.competence {
  display: contents;
}

.competence__dossier {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  isolation: isolate;
  transform-origin: 50% 100%;
  /* Le dossier reste au-dessus des voisins le temps que les logos rentrent */
  transition:
    transform 0.45s cubic-bezier(0.34, 1.4, 0.5, 1),
    filter 0.45s ease,
    z-index 0s linear 0.9s;
}

.competence__dossier[aria-expanded="true"] {
  transform: translateY(calc(-4 * var(--u))) rotate(-2deg) scale(1.03);
  filter: drop-shadow(0 calc(8 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.18));
}

@media (hover: hover) {
  .competence__dossier:hover {
    transform: translateY(calc(-3 * var(--u))) rotate(-1deg);
  }

  .competence__dossier[aria-expanded="true"]:hover {
    transform: translateY(calc(-5 * var(--u))) rotate(-2deg) scale(1.03);
  }
}

.competence__dossier img {
  width: 100%;
  height: 100%;
}

.competence__dossier:focus-visible {
  outline: 2px solid var(--vert-olive);
  outline-offset: 4px;
  border-radius: calc(8 * var(--u));
}

.competence__nom {
  margin: 0;
  color: var(--noir);
  font-family: var(--police-texte);
  font-size: calc(16 * var(--u));
  line-height: normal;
}

/* ---------- Logos rangés dans les dossiers ----------
   Trois couches dans le bouton : le dossier entier, les logos,
   puis une copie de la face avant (coupée à --avant) qui les cache. */

.competence__applis {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Zone invisible au-dessus du dossier ouvert : la souris peut rejoindre
   les logos sans refermer le dossier */
.competence__applis::before {
  content: "";
  position: absolute;
  top: calc((var(--avant) + var(--zone-y)) * var(--u));
  left: calc(var(--zone-x) * var(--u));
  width: calc(var(--zone-w) * var(--u));
  height: calc((22 - var(--zone-y)) * var(--u));
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .competence--ouverte .competence__applis::before {
    pointer-events: auto;
  }
}

.competence__devant {
  position: absolute;
  inset: 0;
  z-index: 2;
  clip-path: inset(calc(var(--avant) * var(--u)) 0 0 0);
  pointer-events: none;
}

/* Le conteneur gère l'écart horizontal, l'image la sortie verticale */
.competence__appli {
  position: absolute;
  top: calc(var(--avant) * var(--u));
  left: calc(var(--w) * var(--u) / 2);
  width: calc(var(--l) * var(--u));
  height: calc(var(--taille) * var(--u));
  margin-left: calc(var(--l) * var(--u) / -2);
  translate: calc(var(--repos-x) * var(--u)) 0;
  /* Fermeture : les logos se resserrent, puis redescendent */
  transition: translate 0.35s ease-in-out var(--delai-fermeture);
}

.competence__dossier .competence__appli img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  opacity: 0;
  transform-origin: 50% 100%;
  translate: 0 calc(8 * var(--u));
  scale: 0.72;
  transition:
    translate 0.45s cubic-bezier(0.55, 0, 0.75, 0.2) calc(var(--delai-fermeture) + 0.1s),
    rotate 0.35s ease var(--delai-fermeture),
    scale 0.45s ease calc(var(--delai-fermeture) + 0.1s),
    opacity 0.1s linear calc(var(--delai-fermeture) + 0.5s);
}

/* Ouverture : chaque logo monte hors du dossier, puis s'écarte en éventail */
.competence--ouverte .competence__dossier {
  z-index: 3;
  transition:
    transform 0.45s cubic-bezier(0.34, 1.4, 0.5, 1),
    filter 0.45s ease,
    z-index 0s;
}

.competence--ouverte .competence__appli {
  translate: calc(var(--dx) * var(--u)) 0;
  transition: translate 0.55s cubic-bezier(0.25, 0.9, 0.35, 1) calc(var(--delai-ouverture) + 0.12s);
}

.competence--ouverte .competence__dossier .competence__appli img {
  opacity: 1;
  translate: 0 calc(var(--dy) * var(--u));
  rotate: var(--r);
  scale: 1;
  transition:
    translate 0.65s cubic-bezier(0.3, 1.35, 0.5, 1) var(--delai-ouverture),
    rotate 0.5s cubic-bezier(0.3, 1.3, 0.5, 1) calc(var(--delai-ouverture) + 0.15s),
    scale 0.5s ease-out var(--delai-ouverture),
    opacity 0.1s linear var(--delai-ouverture);
}

@media (prefers-reduced-motion: reduce) {
  .competence__dossier,
  .competence--ouverte .competence__dossier,
  .competence__appli,
  .competence--ouverte .competence__appli,
  .competence__dossier .competence__appli img,
  .competence--ouverte .competence__dossier .competence__appli img {
    transition: none;
  }

  .competence__dossier:hover,
  .competence__dossier[aria-expanded="true"],
  .competence__dossier[aria-expanded="true"]:hover {
    transform: none;
  }
}