/* ============================================================
   OVERSE — Composants réutilisables
   Mesures : Figma M54DWfjHctWs4xsMFfsmdJ (géométrie)
             + live overse.ai (tailles de police)
   ============================================================ */

/* ------------------------------------------------------------
   1. Bouton — <a> h 48 · radius 16 · padding 10/20
   Figma : ::after = anneau 2px · Pattern = texture de survol (opacity 0)
   ------------------------------------------------------------ */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-10);
  padding: 10px 20px;
  border-radius: var(--r-card);
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  white-space: nowrap;
  overflow: hidden;
  transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

/* Texture Framer : présente mais invisible au repos, révélée au survol */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../assets/img/btn-pattern.png');
  background-size: 205.5px 47px;
  background-position: top left;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.btn__label { position: relative; z-index: 1; }
.btn__icon {
  position: relative;
  z-index: 1;
  display: flex;
  width: 18px;
  height: 18px;
  transition: transform 0.25s ease;
}
.btn__icon svg { width: 100%; height: 100%; }

/* Variante corail : anneau 2px de la même couleur */
.btn--primary {
  background: var(--c-coral);
  color: var(--c-white);
  box-shadow: inset 0 0 0 2px var(--c-coral);
}
.btn--primary:hover { background: #ef7c58; }

/* Variante blanche : ombre douce, pas d'anneau */
.btn--secondary {
  background: var(--c-white);
  color: var(--c-ink);
  box-shadow: var(--sh-btn-white);
}
.btn--secondary:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07); }

/* Variante blanche sur fond sombre (bloc CTA du footer) : anneau #ECECEC */
.btn--on-dark {
  background: var(--c-white);
  color: var(--c-ink);
  box-shadow: var(--sh-btn-white), inset 0 0 0 1px var(--b-btn-white);
}

/* Variante encre (bouton newsletter) */
.btn--ink {
  background: var(--c-ink);
  color: var(--c-white);
  font-weight: 600;
  line-height: var(--lh-eyebrow);
  letter-spacing: normal;
}

.btn:hover .btn__icon { transform: translateX(3px); }
.btn:hover::after { opacity: 0.06; }

/* ------------------------------------------------------------
   2. Pilule-badge — DEUX variantes distinctes, ne pas fusionner
   ------------------------------------------------------------ */

/* 2a. Standard : radius 100 · padding 5/16 · texte 14
      hero, grille, bento, Feature 04, témoignages */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-10);
  padding: 5px 16px;
  border-radius: var(--r-pill);
  background: var(--c-white);
  box-shadow: inset 0 0 0 1px var(--b-pill); /* inset : n'ajoute pas 2px a la hauteur */
  font-size: var(--fs-pill);
  font-weight: 500;
  line-height: var(--lh-pill);
  letter-spacing: normal;
  color: var(--c-ink);
  white-space: nowrap;
}
/* sur fond blanc, la pilule prend le crème */
.pill--on-white { background: var(--c-cream); }

/* 2b. « Icon Box » : radius 40 · padding 6/16 · texte 16 · icône 15px
      un seul usage — Feature 02 */
.pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  padding: 6px 16px;
  border-radius: var(--r-panel);
  background: var(--c-white);
  box-shadow: inset 0 0 0 1px var(--b-pill);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--c-ink);
  white-space: nowrap;
}
.pill-icon__ic { display: flex; width: 15px; height: 15px; }
.pill-icon__ic svg { width: 100%; height: 100%; }

/* ------------------------------------------------------------
   3. En-tête de section centré (pilule + H2 + sous-titre)
   ------------------------------------------------------------ */
.sec-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-16);
  text-align: center;
  margin-inline: auto;
}
.sec-head .h2 { text-align: center; }

/* ------------------------------------------------------------
   4. Carte de maquette UI — blanche, radius 16, ombre + liseré
   ------------------------------------------------------------ */
.ui-card {
  position: relative;
  background: var(--c-white);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card), inset 0 0 0 1px var(--b-card);
}
.ui-card--soft { box-shadow: var(--sh-card-soft), inset 0 0 0 1px var(--b-card); }

/* Micro-badge des maquettes (15h/Semaine, ROI: +180%) */
.ui-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22.94px;
  padding: 5.737px 9.179px;
  border-radius: var(--r-badge);
  background: var(--c-white);
  box-shadow: inset 0 0 0 1px var(--b-badge);
  font-family: var(--f-ui);
  font-size: 10px;
  line-height: 17px;
  letter-spacing: -0.23px;
  color: var(--c-text-ui);
  white-space: nowrap;
}
.ui-badge--coral {
  background: var(--c-coral-soft);
  box-shadow: none;
  color: var(--c-coral-text);
}

/* ------------------------------------------------------------
   5. Carte bento — crème, radius 16, sans ombre
   ------------------------------------------------------------ */
.bento-card {
  background: var(--c-cream);
  border-radius: var(--r-card);
  overflow: hidden;
}

/* ------------------------------------------------------------
   6. Item FAQ — question Anton 20, bouton +/− 36px
   ------------------------------------------------------------ */
.faq-item { position: relative; padding: 25px 0 32px; }
/* Seuls les items 2 et 4 portent un liseré haut ET bas : cela produit
   les 4 séparateurs entre les 5 items (fidèle au Figma).
   Posé en ::after absolu comme sur le site d'origine : un `border` ajouterait
   2 px a chaque item et ferait deriver la hauteur du panneau. */
.faq-item--ruled::after {
  content: '';
  position: absolute;
  inset: 0;
  border-top: 1px solid var(--b-faq);
  border-bottom: 1px solid var(--b-faq);
  pointer-events: none;
}

.faq-q {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  text-align: left;
}
.faq-q__text {
  flex: 1 0 0;
  min-width: 0;
  font-family: var(--f-display);
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: var(--lh-lead);
  letter-spacing: normal;
  color: var(--c-ink);
}

.faq-q__btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;                 /* 10 + 16 + 10 = 36 */
  border-radius: var(--r-faq-btn);
  background: var(--c-white);
  box-shadow: inset 0 0 0 1px var(--b-faq);
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.faq-q__btn svg { width: 16px; height: 16px; }
.faq-item.is-open .faq-q__btn {
  background: var(--c-coral);
  transform: rotate(180deg);
}

.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-item.is-open .faq-a { grid-template-rows: 1fr; padding-top: var(--sp-12); }
.faq-a__inner { overflow: hidden; }
.faq-a__inner p {
  max-width: 846px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--c-ink);          /* encre, pas gris */
}

/* ------------------------------------------------------------
   7. Marquee générique — vitesse et sens par variable
   ------------------------------------------------------------ */
.marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee-left var(--mq-duration, 30s) linear infinite;
}
.marquee--rtl .marquee__track { animation-name: marquee-right; }
/* pas de pause au survol : le défilement reste continu, comme demandé */

@keyframes marquee-left  { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* ------------------------------------------------------------
   8. Motif de hachures diagonales (fonds de Feature 02 et 04)
   ------------------------------------------------------------ */
.hatch {
  background-image: repeating-linear-gradient(
    -45deg,
    var(--b-card) 0 1px,
    transparent 1px 9px
  );
}

/* ------------------------------------------------------------
   9. Bouton flottant Calendly — CSS relevé mot pour mot sur le live
   ------------------------------------------------------------ */
.overse-meeting-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: linear-gradient(135deg, #f28a6b 0%, #ff6b4a 100%);
  color: #fff;
  padding: 18px 30px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  box-shadow: var(--sh-cta);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
  animation: slideInUp 0.5s ease-out;
}
.overse-meeting-btn:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-cta-hover);
}
.overse-meeting-btn .pulse-dot {
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  animation: pulse-dot 1.5s infinite;
}
@keyframes pulse-dot {
  0%   { opacity: 1;   transform: scale(1); }
  50%  { opacity: 0.6; transform: scale(1.2); }
  100% { opacity: 1;   transform: scale(1); }
}
@keyframes slideInUp {
  from { transform: translateY(100px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* ------------------------------------------------------------
   10. Apparition au scroll (IntersectionObserver, cf. js/main.js)
   ------------------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (max-width: 767px) {
  .overse-meeting-btn {
    bottom: 16px;
    right: 16px;
    padding: 14px 20px;
    font-size: 14px;
  }
}