/* ==========================================================
   02 — À PROPOS DE MOI
   Maquette Figma : 02_ABOUT ME (1440 × 1000 px)
   ========================================================== */

.a-propos {
  aspect-ratio: 1440 / 1000;
  --hauteur: 1000;
  background-color: var(--creme);
  /* Coupe seulement sur les côtés : les bulles (transparentes en haut)
     et la bande à pois (en bas) peuvent dépasser comme dans Figma. */
  overflow-x: clip;
  overflow-y: visible;
  z-index: 1;
}

/* ---------- Titre « À propos de moi » ---------- */

.a-propos__titre {
  margin: 0;
  /* Dans Figma, la grande lettrine abaisse la ligne du titre :
     ce décalage place « PROPOS DE MOI » à la même hauteur. */
  padding-top: calc(46 * var(--u));
  font-family: var(--police-capitales);
  font-size: calc(96 * var(--u));
  font-weight: 400;
  line-height: normal;
  white-space: nowrap;
}

/* La lettrine occupe la même largeur que le « A » de la maquette,
   pour que « PROPOS DE MOI » commence au même endroit. */
.a-propos__lettrine {
  display: inline-block;
  width: calc(189 * var(--u));
  font-family: var(--police-script);
  font-size: calc(var(--lettrine-echelle) * 1em);
  line-height: 0;
}

/* ---------- Bulles roses ---------- */

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

/* Les bulles sont placées directement dans la section (positions Figma) */
.a-propos__bulle {
  display: contents;
}

.a-propos__bulle-fond {
  pointer-events: none;
}

.a-propos__bulle-fond--miroir {
  transform: scaleX(-1);
}

.a-propos__bulle-texte {
  margin: 0;
  font-family: var(--police-capitales);
  font-size: calc(var(--fs) * var(--u));
  line-height: normal;
  text-align: center;
  white-space: nowrap;
}

.a-propos__bulle-texte--gauche {
  text-align: left;
}

/* ---------- Bulles : apparition, flottement et survol ----------
   L'image et le texte d'une bulle reçoivent les mêmes animations
   (« translate » et « scale », séparés du miroir en « transform »).
   --i, --flottement-duree et l'origine du texte sont posés par js/interactions.js. */

.a-propos__bulle-fond,
.a-propos__bulle-texte {
  transition: scale 0.35s ease;
}

.a-propos__bulle:hover .a-propos__bulle-fond,
.a-propos__bulle:hover .a-propos__bulle-texte {
  scale: 1.05;
}

/* Zone de survol invisible qui couvre la partie rose de la bulle */
.a-propos__bulle-texte::before {
  content: "";
  position: absolute;
  top: calc(var(--zone-y, 0) * var(--u));
  left: calc(var(--zone-x, 0) * var(--u));
  width: calc(293.5 * var(--u));
  height: calc(80 * var(--u));
  border-radius: calc(40 * var(--u));
}

.a-propos[data-apparition] .a-propos__bulle-fond,
.a-propos[data-apparition] .a-propos__bulle-texte {
  opacity: 0;
}

.a-propos[data-apparition="jouee"] .a-propos__bulle-fond,
.a-propos[data-apparition="jouee"] .a-propos__bulle-texte {
  --apparition-delai: calc(var(--i, 0) * 0.225s);
  animation:
    bulle-apparition 0.7s cubic-bezier(0.25, 0.8, 0.35, 1) var(--apparition-delai) both,
    bulle-flottement var(--flottement-duree, 7s) ease-in-out calc(var(--apparition-delai) + 0.7s) infinite;
}

/* Quand on quitte la zone : fondu doux, le flottement continue pendant ce temps */
.a-propos[data-apparition="sortie"] .a-propos__bulle-fond,
.a-propos[data-apparition="sortie"] .a-propos__bulle-texte {
  --apparition-delai: calc(var(--i, 0) * 0.225s);
  animation:
    bulle-disparition 0.45s ease forwards,
    bulle-flottement var(--flottement-duree, 7s) ease-in-out calc(var(--apparition-delai) + 0.7s) infinite;
}

/* Zone invisible observée par js/interactions.js (englobe les six bulles) */
.a-propos__zone-bulles {
  pointer-events: none;
  visibility: hidden;
}

@keyframes bulle-disparition {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes bulle-apparition {
  from {
    opacity: 0;
    translate: 0 calc(30 * var(--u));
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes bulle-flottement {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 calc(-8 * var(--u)); }
}

@media (prefers-reduced-motion: reduce) {
  .a-propos__bulle-fond,
  .a-propos__bulle-texte {
    transition: none;
  }

  .a-propos__bulle:hover .a-propos__bulle-fond,
  .a-propos__bulle:hover .a-propos__bulle-texte {
    scale: none;
  }
}

/* ---------- Polaroid, épingle et cœurs ---------- */

.a-propos__epingle {
  transform: rotate(-22.05deg);
  pointer-events: none;
}

/* Dans Figma, l'image des cœurs dépasse de son cadre (110 % × 108 %) et est coupée */
.a-propos__coeurs {
  overflow: hidden;
  transform: rotate(25.98deg);
}

.a-propos__coeurs img {
  width: 110.32%;
  max-width: none;
  height: 108.19%;
}

/* ---------- Bouton « En savoir plus » ---------- */

/* Dans Figma, le texte n'est pas centré : il commence à 30 px du bord gauche et 7 px du haut */
.a-propos__bouton {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: calc(6 * var(--u)) 0 0 calc(29 * var(--u));
  border: calc(1 * var(--u)) solid var(--noir);
  border-radius: calc(13 * var(--u));
  background-color: var(--vert-olive);
  box-shadow: 0 calc(4 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.25);
  color: var(--creme);
  font-family: var(--police-texte);
  font-size: calc(30 * var(--u));
  /* Même réglage optique que « Tsikify » pour retrouver la largeur du texte Figma */
  font-variation-settings: "opsz" 18;
  line-height: normal;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.a-propos__bouton:hover {
  transform: translateY(calc(-2 * var(--u)));
  box-shadow: 0 calc(6 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.3);
}

.a-propos__bouton:focus-visible {
  outline: 2px solid var(--vert-olive);
  outline-offset: 4px;
}

/* Le curseur pixel est décoratif : les clics passent à travers vers le bouton */
.a-propos__curseur {
  pointer-events: none;
}

/* ---------- Bande à pois (séparation avec Compétences) ---------- */

/* Le séparateur va d'un bord de l'écran à l'autre ; le motif reste calé sur la composition */
.separateur-pois {
  left: 0;
  width: 100%;
  background-image: url("../../images/web/commun/separateur-pois.webp");
  background-position: var(--marge) top;
  background-repeat: repeat;
  background-size: calc(535 * var(--u)) auto;
}