/* =========================================
   CONTACT — CTA typographique massif
   ========================================= */

.contact-page {
  background: var(--bg);
  position: relative;
  padding: 8rem var(--gutter) 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  justify-content: center;
}

.contact__index {
  position: absolute;
  top: 6rem;
  left: var(--gutter);
  font-size: .8rem;
  letter-spacing: .2em;
  color: var(--ink-soft);
  z-index: 2;
}

.contact__pre {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(.85rem, 1.2vw, 1rem);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-soft);
  margin-bottom: 2rem;
  position: relative;
  z-index: 2;
}

/* =========================================
   SCÈNE "LET'S TALK"
   Mains + fleurs + texte superposés.
   --talk-scale ne s'applique QU'AU texte : les
   fleurs gardent leur taille quelle que soit
   la largeur d'écran.
   ========================================= */

/* Scène plein cadre : les avant-bras doivent pouvoir sortir de l'écran. */
.talk {
  /* Dans le Lottie le mot occupe ~46% de la largeur de la composition ;
     sur la référence il en occupe ~30% de l'écran, d'où ce facteur. */
  --talk-scale: .6;
  /* Largeur de référence de la composition = largeur d'écran.
     Un plancher (max(100vw, 1100px)) a été essayé pour figer la taille des
     fleurs sur mobile, mais il projetait les mains loin hors du cadre dès que
     la fenêtre passait sous 1100px — et les fleurs ne se déclenchent qu'au
     survol, absent sur tactile. Sans plancher, la composition reste
     proportionnelle à toutes les largeurs. */
  --talk-stage: 100vw;
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

/* Les deux couches partagent exactement le même cadre, donc la composition
   d'origine est préservée : seul le texte reçoit --talk-scale en plus. */
/* Le mot n'est pas centré dans la composition : son encre est à 34,9% de la
   hauteur du cadre. Sans ce décalage, la scène se retrouve trop haute dans
   l'écran par rapport à la référence. On descend le cadre de la différence
   pour amener le MOT au centre vertical. */
.talk__flowers,
.talk__text {
  position: absolute;
  top: calc(50% + var(--talk-stage) * .0787 * var(--talk-scale));
  left: 50%;
  width: var(--talk-stage);
  aspect-ratio: 2075 / 1082;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.talk__flowers svg,
.talk__text svg {
  width: 100% !important;
  height: 100% !important;
}

/* Ordre : fleurs au fond, mains par-dessus, texte devant tout */
.talk__flowers { z-index: 1; }

/* Le scale du texte se compose avec le centrage : il s'ajoute au translate,
   sinon l'un annulerait l'autre. */
.talk__text {
  z-index: 3;
  transform: translate(-50%, -50%) scale(var(--talk-scale));
  transform-origin: center center;
}

.talk__hand {
  position: absolute;
  z-index: 2;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* Mains ancrées au centre puis décalées en unités de scène, comme le texte :
   elles gardent ainsi leur position relative quelle que soit la hauteur de
   fenêtre. Les décalages sont calculés à partir de la position des pointes
   dans chaque image — crayon à ~97% de la largeur de hand-left, marqueur à
   ~1% de celle de hand-right — pour les amener près du texte sans le toucher.
   La main gauche est volontairement assez grande et assez basse pour que la
   coupe droite du bras, héritée du cadrage de la photo, sorte de l'écran. */
/* Positions calculées à partir des pointes MESURÉES dans chaque image :
   crayon à (99,9% ; 9,6%) de hand-left, marqueur à (0% ; 30,6%) de
   hand-right. Le mot étant centré verticalement, on amène les deux pointes
   à mi-hauteur d'écran, de part et d'autre du texte et sans le toucher. */
.talk__hand--left {
  width: calc(var(--talk-stage) * .52);
  left: 50%;
  top: 50%;
  transform: translate(calc(var(--talk-stage) * -.70), calc(var(--talk-stage) * -.040));
}

/* Rotation pivotée SUR la pointe du marqueur (0% ; 30,6% de l'image) : la
   pointe reste donc exactement en place pendant que l'avant-bras plonge. */
.talk__hand--right {
  width: calc(var(--talk-stage) * .52);
  left: 50%;
  top: 50%;
  transform-origin: 0% 30.6%;
  transform: translate(calc(var(--talk-stage) * .20), calc(var(--talk-stage) * -.110)) rotate(30deg);
}

/* Zone de survol : simple rectangle autour du mot, avec de la marge — il n'a
   pas à épouser la typo. Les proportions viennent d'une mesure de l'encre du
   Lottie : largeur 48,1% du cadre, hauteur 9,2%, centre à 52,4% / 34,9% —
   d'où le décalage vertical, le mot n'étant pas centré dans la composition. */
.talk__hit {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: calc(var(--talk-stage) * .481 * var(--talk-scale) + 4rem);
  height: calc(var(--talk-stage) * .0923 * var(--talk-scale) + 3rem);
  /* Le mot est centré verticalement : seul le léger décalage horizontal
     (centre de l'encre à 52,4% et non 50%) subsiste. */
  transform: translate(
    calc(-50% + var(--talk-stage) * .024 * var(--talk-scale)),
    -50%
  );
  cursor: pointer;
  pointer-events: auto;
}

/* Contacts qui remplacent "let's talk" au clic : meme place que le mot
   (meme centre que la zone de clic), meme typo, apparition geree par le
   script de contact.html. */
.talk__contacts {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  transform: translate(calc(-50% + var(--talk-stage) * .024 * var(--talk-scale)), -50%);
  display: flex;
  align-items: center;
  /* Meme largeur que le mot "let's talk" : la ligne tient entre les deux
     pointes, sans passer sur le crayon ni le marqueur. */
  gap: calc(var(--talk-stage) * .05 * var(--talk-scale));
  pointer-events: auto;
}

.talk__contacts[hidden] { display: none; }

.talk__contact {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: calc(var(--talk-stage) * .033 * var(--talk-scale));
  font-weight: 700;
  letter-spacing: -0.065em;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  transform-origin: center center;
  transition: color .3s ease;
}

.talk__contact:hover,
.talk__contact:focus-visible { color: var(--accent); }

/* Petite confirmation sous WeChat apres la copie de l'identifiant */
.talk__copied {
  position: absolute;
  left: 50%;
  top: calc(100% + .6rem);
  translate: -50% 4px;
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .02em;
  white-space: nowrap;
  color: var(--ink-soft);
  opacity: 0;
  transition: opacity .25s ease, translate .35s var(--ease-out);
  pointer-events: none;
}

.talk__contact--wechat.is-copied .talk__copied {
  opacity: 1;
  translate: -50% 0;
}

/* Telephone : les trois contacts empiles */
@media (max-width: 720px) {
  .talk__contacts {
    flex-direction: column;
    gap: calc(var(--talk-stage) * .035 * var(--talk-scale));
  }
  .talk__contact { font-size: calc(var(--talk-stage) * .042 * var(--talk-scale)) !important; }
}

/* Seul le texte rétrécit : --talk-stage ne bouge pas, donc les fleurs et les
   mains gardent leur taille et débordent latéralement. */
@media (max-width: 1024px) {
  .talk { --talk-scale: .56; }
}

/* ── Mobile ──
   Le plancher de 1100px sur --talk-stage servait à figer la taille des
   fleurs. Mais les fleurs n'apparaissent qu'au survol, qui n'existe pas sur
   tactile : ce plancher ne rendait aucun service ici, et projetait les mains
   très loin hors du cadre sur un écran de 390px. On repasse donc la scène à
   la largeur d'écran, ce qui ramène les deux poings entièrement dans le
   champ. Toutes les valeurs étant en unités de scène, la composition reste
   proportionnelle quelle que soit la largeur du téléphone. */
/* ── Mobile : composition en diagonale ──
   En portrait, placer les deux mains de part et d'autre du mot ne laisse de
   place ni pour l'un ni pour les autres. On passe donc à une disposition
   verticale : main gauche en haut, crayon vers le bas ; mot en grand au
   centre ; main droite en bas, marqueur vers le haut.

   Chaque main est positionnée PAR SA POINTE : left/top donnent la position
   voulue de la pointe, le translate ramène le coin du visuel, et la rotation
   pivote autour de ce même point — la pointe ne bouge donc pas quand on
   ajuste l'angle. */
@media (max-width: 720px) {
  /* Le mot occupe ~70% de la largeur d'écran, comme sur la référence.
     Son encre valant 48,1% du cadre, il faut un facteur supérieur à 1. */
  .talk {
    --talk-scale: 1.45;
    /* Demi-hauteur de l'encre du mot (9,23% du cadre) et écart voulu entre
       le mot et chaque pointe. Les deux mains s'y réfèrent, ce qui garantit
       des espaces haut et bas rigoureusement identiques. */
    --talk-half: calc(var(--talk-stage) * .04615 * var(--talk-scale));
    --talk-gap: 10vw;
    /* Largeurs des deux visuels, dans le rapport 1,396 mesuré plus bas. */
    --hand-l: min(84vw, 460px);
    --hand-r: min(117vw, 642px);
  }

  /* Cadre décalé pour que l'ENCRE du mot soit centrée sur 50% de l'écran :
     sans ça, le mot est haut dans son cadre et les écarts ne peuvent pas
     être symétriques. */
  .talk__flowers,
  .talk__text {
    top: calc(50% + var(--talk-stage) * .0787 * var(--talk-scale));
  }

  .talk__hit { top: 50%; }

  /* Pas de fleurs sur telephone : la composition, pensee pour un ecran
     large, y est coupee par les bords. */
  .talk__flowers { display: none; }

  /* Les deux photos n'ont pas le même cadrage : à largeur CSS égale, la main
     de droite paraîtrait plus petite. Mesuré sur les images, la hauteur de
     main vaut 43,3% de la largeur à gauche contre 31,0% à droite — il faut
     donc 1,396× plus large à droite pour des mains de taille identique.
     Plafond en pixels dans le même rapport, sinon elles deviennent
     démesurées vers 700px de large.
     Les poignets sortent du cadre, c'est assumé. */
  /* À gauche le crayon pointe vers le bas : la pointe EST le point le plus
     bas du visuel, l'écart se calcule donc directement depuis elle. */
  .talk__hand--left {
    width: var(--hand-l);
    left: 47%;
    top: calc(50% - var(--talk-half) - var(--talk-gap));
    transform-origin: 99.9% 9.6%;
    transform: translate(-99.9%, -9.6%) rotate(69deg);
  }

  /* À droite en revanche, le poing se trouve AU-DESSUS de la pointe du
     marqueur : mesuré, son sommet remonte de 10,1% de la largeur du visuel.
     Sans cette compensation, le poing venait coller le mot alors que la
     pointe, elle, respectait bien l'écart. */
  .talk__hand--right {
    width: var(--hand-r);
    left: 42%;
    top: calc(50% + var(--talk-half) + var(--talk-gap) + var(--hand-r) * .101);
    transform-origin: 0% 30.6%;
    transform: translate(0%, -30.6%) rotate(17deg);
  }
}

.contact__email {
  margin-top: 3rem;
  font-size: 1rem;
  letter-spacing: .1em;
  color: var(--ink-soft);
  position: relative;
  z-index: 2;
}

/* Tout est regroupé dans une colonne centrale unique */
.contact-footer__col--center {
  grid-column: 1 / -1;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}

.contact-footer__social {
  display: flex;
  gap: 1.5rem;
}

/* Mentions secondaires : plus petites et plus pâles que les réseaux, pour
   marquer la hiérarchie. */
.contact-footer__meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .7rem;
  letter-spacing: .08em;
  color: var(--ink-soft);
  opacity: .55;
}

.contact-footer__sep { opacity: .5; }

.contact-footer {
  width: 100%;
  margin-top: auto;
  padding-top: 2rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  font-size: .8rem;
  letter-spacing: .05em;
  color: var(--ink-soft);
  text-align: left;
  position: relative;
  z-index: 2;
}

.contact-footer__col {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

/* (L'ancienne règle flex-direction:row vivait ici ; elle annulait
   l'empilement réseaux / mentions défini plus haut.) */

.contact-footer__col--center a {
  transition: color .3s ease;
}
.contact-footer__col--center a:hover { color: var(--ink); }

/* .contact-footer__col--right n'existe plus dans le HTML. */

.contact-footer__label {
  font-weight: 500;
  color: var(--ink);
}

@media (max-width: 720px) {
  .contact-footer {
    grid-template-columns: 1fr;
    text-align: center;
  }
  /* Sur mobile le bloc reste centré ; seuls les réseaux se resserrent. */
  .contact-footer__social {
    gap: 1rem;
  }
}

.contact-footer__wechat {
  cursor: default;
  position: relative;
}

.contact-footer__wechat::after {
  content: attr(title);
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--bg);
  font-size: .7rem;
  letter-spacing: .05em;
  padding: .3rem .6rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.contact-footer__wechat:hover::after {
  opacity: 1;
}