/* v22 — company-connect : « Bring the AI you already use. »
   Le panneau à trois lignes devient une carte de tags, sur la grammaire exacte du composant
   « Your team » de la home (#collaboration) : carte blanche 48 px, bordure --line, rayon 15,
   étiquette en petites capitales, tags de 26-28 px, filet vertical, ombre en deux couches.
   Tout est scopé par #connect (la classe .company-connect sert aussi à la section templates). */

#connect {
  --cc-ease: cubic-bezier(.2, .7, .2, 1);
  --cc-muted: #687581;              /* 4,72:1 sur blanc */
  --cc-blue-text: #1775ca;          /* 4,74:1 sur blanc, le bleu de lien déjà utilisé sur la page */
  padding: 80px 24px 84px;          /* grille de 8 px */
}

/* ---------- Typographie ---------- */
#connect .company-connect-copy { max-width: 636px; }

#connect .company-eyebrow {
  margin: 0 0 18px;
  color: var(--cc-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .012em;
}

#connect h2 {
  font-size: clamp(2rem, 3.35vw, 3.05rem);
  line-height: 1.07;
  letter-spacing: -.043em;
  text-wrap: balance;
  hanging-punctuation: first last;
  font-variant-ligatures: common-ligatures contextual;
}

#connect .connect-lede {
  margin-top: 20px;
  color: var(--cc-muted);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -.008em;
  text-wrap: balance;
}

/* ---------- La carte « Your plans » ---------- */
#connect .connect-plans {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 10px;
  margin: 34px auto 0;
  padding: 7px 14px 7px 13px;
  min-height: 48px;
  font-size: 15px;
  line-height: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 15px;
  box-shadow:
    0 1px 1px rgba(11, 18, 32, .03),
    0 10px 26px -16px rgba(11, 18, 32, .28);
  transition: box-shadow .38s var(--cc-ease), transform .38s var(--cc-ease), border-color .38s var(--cc-ease);
}

@media (hover: hover) {
  #connect .connect-plans:hover {
    transform: translateY(-1px);
    border-color: rgba(11, 18, 32, .14);
    box-shadow:
      0 1px 1px rgba(11, 18, 32, .03),
      0 16px 34px -18px rgba(11, 18, 32, .34);
  }
}

#connect .connect-plans-label {
  margin: 0;
  font-size: 11px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #6b7681;                   /* 4,6:1 sur blanc, la valeur du composant « Your team » */
  white-space: nowrap;
}

#connect .connect-plans-tags {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ---------- Les tags ---------- */
#connect .connect-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 10px 0 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: #404b57;                   /* 8,7:1 sur blanc */
  font-size: 13.5px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -.006em;
  white-space: nowrap;
  transition: border-color .34s var(--cc-ease), color .34s var(--cc-ease), transform .34s var(--cc-ease);
}

@media (hover: hover) {
  #connect .connect-plans:hover .connect-tag { border-color: rgba(11, 18, 32, .16); transform: translateY(-1px); }
  #connect .connect-plans:hover .connect-tag:nth-child(2) { transition-delay: 55ms; }
  #connect .connect-plans:hover .connect-tag:nth-child(3) { transition-delay: 110ms; }
  #connect .connect-plans:hover .connect-tag:nth-child(4) { transition-delay: 165ms; }
  #connect .connect-plans:hover .connect-tag-icon { color: var(--blue); }
}

/* Les trois marques sont des tuiles d'app pleine boîte : même carré = même taille perçue.
   Codex arrivait dans un PNG macOS 1024 avec 100 px de marge transparente et une ombre
   portée : il est recadré sur son squircle (assets/v22/company-connect/). */
#connect .connect-tag-mark {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  object-fit: contain;
  border-radius: 22.4%;             /* rayon macOS : ne rogne aucune des trois icônes */
  /* drop-shadow suit la silhouette réelle, pas la boîte carrée : un filet tout autour
     (indispensable à la tuile Codex, presque blanche) plus une ombre de contact. */
  filter:
    drop-shadow(0 0 .6px rgba(11, 18, 32, .24))
    drop-shadow(0 1px 1px rgba(11, 18, 32, .14));
}

/* Micro-icône dessinée à la main : la clé d'API. Même trait que les autres micro-icônes du site. */
#connect .connect-tag-icon {
  flex: 0 0 18px;
  color: #6b7681;                   /* 4,6:1, le même gris que l'étiquette */
  transform: translateY(-.5px);
  transition: color .34s var(--cc-ease);
}

/* ---------- Filet et état « Connected » ---------- */
#connect .connect-plans-rule {
  width: 1px;
  height: 20px;
  flex: 0 0 1px;
  background: var(--line);
  border-radius: 1px;
}

#connect .connect-plans-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-right: 2px;
  color: var(--cc-blue-text);
  font-size: 13px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -.005em;
  white-space: nowrap;
}

#connect .connect-dot {
  position: relative;
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
  animation: cc-dot-breathe 3.6s ease-in-out infinite;
}

/* Le halo respire en transform/opacity seulement, jamais en box-shadow. */
#connect .connect-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--blue);
  opacity: 0;
  animation: cc-dot-halo 3.6s ease-out infinite;
}

@keyframes cc-dot-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: .68; }
}

@keyframes cc-dot-halo {
  0%        { transform: scale(1);   opacity: .22; }
  62%, 100% { transform: scale(2.5); opacity: 0; }
}

/* ---------- Entrée chorégraphiée ---------- */
/* La copy : le parent ne bouge plus, ses trois blocs entrent à 0 / 70 / 140 ms. */
.js #connect .company-connect-copy.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

.js #connect .company-connect-copy.reveal > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s var(--cc-ease), transform .6s var(--cc-ease);
}

.js #connect .company-connect-copy.reveal.is-visible > * { opacity: 1; transform: none; }
.js #connect .company-connect-copy.reveal > :nth-child(2) { transition-delay: .07s; }
.js #connect .company-connect-copy.reveal > :nth-child(3) { transition-delay: .14s; }

/* La carte garde le reveal partagé (le châssis monte), les tags se posent ensuite. */
.js #connect .connect-plans.reveal {
  transform: translateY(12px) scale(.985);
  transition-property: opacity, transform, box-shadow, border-color;
  transition-duration: .62s;
  transition-timing-function: var(--cc-ease);
}
.js #connect .connect-plans.reveal.is-visible { transform: none; }

.js #connect .connect-plans.reveal .connect-tag {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s var(--cc-ease), transform .5s var(--cc-ease), border-color .34s var(--cc-ease), color .34s var(--cc-ease);
}
.js #connect .connect-plans.reveal.is-visible .connect-tag { opacity: 1; transform: none; }
.js #connect .connect-plans.reveal .connect-tag:nth-child(1) { transition-delay: 0ms; }
.js #connect .connect-plans.reveal .connect-tag:nth-child(2) { transition-delay: 70ms; }
.js #connect .connect-plans.reveal .connect-tag:nth-child(3) { transition-delay: 140ms; }
.js #connect .connect-plans.reveal .connect-tag:nth-child(4) { transition-delay: 210ms; }

.js #connect .connect-plans.reveal .connect-plans-rule,
.js #connect .connect-plans.reveal .connect-plans-state {
  opacity: 0;
  transition: opacity .5s var(--cc-ease);
  transition-delay: 280ms;
}
.js #connect .connect-plans.reveal.is-visible .connect-plans-rule,
.js #connect .connect-plans.reveal.is-visible .connect-plans-state { opacity: 1; }

/* ---------- Mobile 390 : étiquette + état sur une ligne, tags en dessous ---------- */
@media (max-width: 760px) {
  #connect { padding: 52px 24px 44px; }
  #connect h2 { font-size: clamp(1.85rem, 7.4vw, 2.6rem); }
  #connect .connect-lede { margin-top: 16px; font-size: 15px; line-height: 1.5; }
  #connect .connect-plans {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 380px;
    margin-top: 28px;
    padding: 10px 12px 12px;
    min-height: 0;
    border-radius: 16px;
  }
  #connect .connect-plans-label { order: 1; margin: 1px 0 2px; }
  #connect .connect-plans-rule { display: none; }
  #connect .connect-plans-state { order: 2; margin-left: auto; margin-top: 1px; font-size: 12.5px; }
  #connect .connect-plans-tags { order: 3; flex-basis: 100%; flex-wrap: wrap; gap: 7px; }
  #connect .connect-tag { height: 27px; font-size: 13px; padding: 0 9px 0 6px; gap: 6px; }
  #connect .connect-tag-mark,
  #connect .connect-tag-icon { flex-basis: 17px; width: 17px; height: 17px; }
}

@media (max-width: 400px) {
  #connect .connect-plans { padding-inline: 10px; }
  #connect .connect-plans-tags { gap: 6px; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .js #connect .company-connect-copy.reveal > *,
  .js #connect .connect-plans.reveal .connect-tag,
  .js #connect .connect-plans.reveal .connect-plans-rule,
  .js #connect .connect-plans.reveal .connect-plans-state { opacity: 1; transform: none; }
  .js #connect .connect-plans.reveal { transform: none; }
  #connect .connect-plans:hover,
  #connect .connect-plans:hover .connect-tag { transform: none; }
  #connect .connect-dot { animation: none; opacity: 1; }
  #connect .connect-dot::after { animation: none; opacity: 0; }
}