/* La page Contact — un overlay, comme les temoignages (Figma 1188:7826
   bureau, 1194:30502 mobile ; le calque « Contact overlay » 1194:30855 /
   1194:30857). Composants releves dans docs/COMPOSANTS-CONTACT.md, barre du
   haut dans docs/NAV-VARIANTS.md (1194:28033 bureau, 1194:28064 mobile).

   Le voile est LE voile des temoignages (Overlay-Background 1188:7885 :
   glassy-light/600 + flou 85), l'arrivee est celle mesuree sur la page
   info d'aparelho.studio le 20 aout et rejouee ici a l'identique : le voile
   fond en 300ms, le contenu monte du bas de l'ecran en 600ms sur une seule
   courbe. La fermeture est le meme mouvement a l'envers (Flora, 23 aout :
   « exactement la meme animation et fluidite »). */

.ct-voile {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  background: var(--glassy-light-600, rgba(203, 203, 203, 0.1));
  backdrop-filter: blur(85px);
  -webkit-backdrop-filter: blur(85px);
}
/* L'arrivee, relue sur le GIF d'aparelho image par image (Flora, 23
   aout : « le background blur apparait en fade-in, detache du contenu, et
   ensuite les containers apparaissent fluidement du bas ») :
   - le voile seul d'abord : flou + teinte montent en ~400 ms ;
   - les blocs ensuite, a ~400 ms : ils partent ~55 px plus bas et montent
     en ~300 ms avec une forte deceleration, leur fondu dure un peu plus ;
   - la barre du haut appartient au fond : elle fond avec le voile, sans
     monter.
   La fermeture est la meme chose a l'envers : les blocs redescendent et
   s'effacent, puis le voile s'eteint. */
.ct-voile.est-visible { display: block; animation: ct-voile-in 400ms ease-out both; }
.ct-voile.se-ferme { animation: ct-voile-out 350ms ease-in 120ms both; }
@keyframes ct-voile-in  { from { opacity: 0; } }
@keyframes ct-voile-out { to   { opacity: 0; } }

/* Le verrou, identique a celui des temoignages (testimonials.css) et sous
   la meme classe : les pages sans temoignages (Approach) l'ont quand meme.
   Deux fois la meme regle ne coute rien ; un overlay sans verrou coute un
   iPhone qui defile derriere (PIEGES B1). */
html.tm-fige, html.tm-fige body { overflow: hidden; overscroll-behavior: none; }
html.tm-fige body { position: fixed; left: 0; right: 0; width: 100%; }
html.tm-fige .p27-nav, html.tm-fige .site-nav, html.tm-fige .nav,
html.tm-fige .p27-menu, html.tm-fige .p27-index, html.tm-fige .p27-body,
html.tm-fige .p27-voile { opacity: 0; pointer-events: none; }
html.tm-fige .hero-flou { opacity: 0 !important; }

/* Tout ce qui defile vit dans la scene, enfant direct du voile fixe : la
   seule forme de defilement interne fiable sur iOS (PIEGES B). */
.ct-scene {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

/* ── La barre du haut (1194:28033) ───────────────────────────────────────
   Le nom a gauche, « Contact » allume + la croix a droite. Rien d'autre :
   ni About ni Approach, la page est un overlay. */
.ct-nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-24);
  z-index: 2;
}
.ct-nav-droite { display: flex; gap: 6px; align-items: center; }
.ct-pill, .ct-fermer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-12);
  border: 0;
  border-radius: var(--radius-6);
  background: var(--surface-nav-bg);
  backdrop-filter: blur(var(--blur-8, 4px));
  -webkit-backdrop-filter: blur(var(--blur-8, 4px));
  font-family: var(--font-body);
  font-weight: var(--weight-book);
  font-size: var(--body-14-size, 14px);
  line-height: var(--body-14-line, 20px);
  color: var(--nav-default);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.ct-pill--nom { width: 120px; }
/* State=Active (115:3969) : la page ou l'on est. */
.ct-pill--actif { background: var(--surface-nav-bg-active); color: var(--text-nav-item-active); cursor: default; }
.ct-fermer { width: 32px; height: 32px; padding: 0; }
.ct-pill:not(.ct-pill--actif):hover,
.ct-fermer:hover { background: var(--surface-nav-bg-hover); color: var(--nav-hover); }

/* ── Le corps (Contact-Body 1194:28724) ──────────────────────────────────
   553 de large, centre, 44 sous le haut de l'ecran ; colonne a 32 d'ecart
   entre l'image et le bloc mail+formulaire. */
.ct-body {
  width: 553px;
  max-width: calc(100% - 32px);
  /* 24 sous le haut de l'ecran : le haut du corps s'aligne EXACTEMENT sur
     les boutons de la barre et leur marge (Flora, 23 aout), comme sur les
     autres pages. */
  margin: 24px auto 44px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.ct-voile.est-visible .ct-body { animation: ct-arrive 520ms cubic-bezier(0.16, 1, 0.3, 1) 400ms both; }
.ct-voile.se-ferme .ct-body { animation: ct-part 320ms cubic-bezier(0.7, 0, 0.84, 0) both; }
@keyframes ct-arrive { from { opacity: 0; translate: 0 56px; } }
@keyframes ct-part   { to   { opacity: 0; translate: 0 40px; } }

/* La composition (1206:31765) : 553x332, fond glassy-black/200 (noir a
   80 %, remplace le noir a 20 % de la version a image fixe), rayon 8. */
.ct-image {
  height: 332px;
  border-radius: 8px;
  background: var(--glassy-black-200);
  overflow: hidden;
  display: flex;
  align-items: center;
}
/* La piste : deux jeux de cinq cartes, 25 d'ecart (1206:31768), qui glissent
   d'un jeu entier puis rebouclent — 5x180 + 5x25 = 1025. La duree fait la
   vitesse : ~23 px/s, une derive tranquille, jamais un defilement qui
   attire l'oeil plus que le formulaire a cote. */
.ct-piste {
  display: flex;
  gap: 25px;
  padding-left: 25px;
  flex: none;
  will-change: transform;
  animation: ct-derive 45s linear infinite;
}
@keyframes ct-derive { to { transform: translate3d(-1025px, 0, 0); } }
.ct-carte {
  flex: none;
  width: 180px;
  height: 240px;
  object-fit: cover;
  display: block;
}
@media (prefers-reduced-motion: reduce) { .ct-piste { animation: none; } }

/* Email + formulaire (1194:28723) : 16 d'ecart. */
.ct-mail-form { display: flex; flex-direction: column; gap: var(--space-16); }

/* ── La barre « copy to clipboard » (1194:8980) ──────────────────────── */
.ct-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 32px;
  padding: var(--space-6) var(--space-12);
  border: 0;
  border-radius: var(--radius-6);
  background: var(--glassy-white-200);
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--body-14-size);
  line-height: var(--body-14-line);
  color: var(--nav-default);
  cursor: pointer;
  transition: background var(--hover-travel) var(--hover-ease);
}
.ct-copy:hover { background: var(--primary-white); }
/* L'atome (1194:9018) : texte + icone, 12 d'ecart, une couleur pour les
   deux — gris au repos, plus sombre au survol, #2b2b2b une fois copie. */
.ct-copy-droite {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  color: var(--greyscale-500);
  transition: color var(--hover-travel) var(--hover-ease);
}
.ct-copy:hover .ct-copy-droite { color: var(--text-secondary); }
.ct-copy.est-copie .ct-copy-droite,
.ct-copy.est-copie:hover .ct-copy-droite { color: var(--text-project-primary); }
.ct-copy-ico { width: 20px; height: 20px; display: block; }

/* ── « Or write directly a message here » (1194:8249) ───────────────── */
.ct-ou {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-16);
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--body-13-size);
  line-height: var(--body-13-line);
  /* Blanc a 85 % (Flora, 23 aout, reaffirme apres le passage au gris —
     revient donc sur ce gris malgre l'ecart de lisibilite releve plus tot
     sur le voile clair de Contact). */
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}
.ct-ou::before, .ct-ou::after { content: ""; flex: 1 0 0; height: 1px; background: var(--glassy-white-500); }

/* ── Le formulaire (1194:8187) : 6 d'ecart ──────────────────────────── */
.ct-form { display: flex; flex-direction: column; gap: 6px; }
.ct-form-rang { display: flex; gap: 6px; }
.ct-form-rang > * { flex: 1 0 0; min-width: 0; }

/* Input-Contact (1194:8944) : Default / Hover / Active / Typing. */
.ct-input {
  display: block;
  width: 100%;
  height: 32px;
  padding: 0 var(--space-12);
  border: 0;
  border-radius: var(--radius-6);
  background: var(--glassy-white-450);
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--body-14-size);
  line-height: var(--body-14-line);
  color: var(--glassy-black-200);
  caret-color: var(--greyscale-500);
  outline: 1px solid transparent;
  outline-offset: 2px;
  transition: background var(--hover-travel) var(--hover-ease),
              outline-color var(--hover-travel) var(--hover-ease);
}
.ct-input::placeholder { color: var(--greyscale-500); opacity: 1; }
.ct-input:hover { background: var(--glassy-white-300); }
/* Active (1194:8947) : blanc 80 % + le contour blanc de 1 a 2px du bord
   (inset -2, rayon 8) ; Typing (1194:8952) n'en differe que par le texte. */
.ct-input:focus { background: var(--glassy-white-200); outline-color: var(--primary-white); }
textarea.ct-input {
  height: 96px;
  padding: var(--space-6) var(--space-12);
  resize: none;
}
.ct-form .btn-send { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .ct-voile.est-visible, .ct-voile.se-ferme,
  .ct-voile.est-visible .ct-body,
  .ct-voile.se-ferme .ct-body { animation-duration: 0.01ms; animation-delay: 0ms; }
  .ct-input, .ct-copy, .ct-copy-droite { transition: none; }
}

/* ── Telephone (1194:30857 + barre 1194:28064) ───────────────────────── */
@media (max-width: 900px) {
  /* Les codes du voile temoignages : pilules blanc 30 % + flou 20, 36 de
     haut, corps de 16 (1131:49572 tel que construit dans testimonials.css). */
  .ct-pill, .ct-fermer {
    background: var(--glassy-white-450, rgba(255, 255, 255, 0.3));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 8px var(--space-12);
    font-size: 16px;
    line-height: 20px;
  }
  .ct-pill--actif { background: var(--glassy-white-450, rgba(255, 255, 255, 0.3)); color: var(--glassy-dark-200); }
  .ct-fermer { width: 36px; height: 36px; padding: 0; }
  /* Le corps : 361 de large (393 - 2x16), 80 sous le haut = la barre. */
  .ct-body { width: auto; max-width: none; margin: 80px 16px 24px; }
  .ct-image { height: 240px; }
  .ct-form-rang { flex-direction: column; }
  .ct-form-rang > * { flex: none; }
  /* Au repos la barre copie ne montre que l'icone (1194:30896) ; le
     libelle ne revient que pour dire « Copied! » (1194:30921). */
  .ct-copy:not(.est-copie) .ct-copy-libelle { display: none; }
}