/*
 * Composants réutilisables — étiquettes mono, boutons, liens flèche, badges,
 * citation, motifs décoratifs. Partagés par l'accueil et les futures pages.
 */

/* Étiquette "voix de labo" : petites capitales interlettrées en Mono (brief §6). */
.bcc-eyebrow {
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sage);
}

.bcc-eyebrow--on-dark { color: var(--sage-light); }

/* Boutons CTA (hero, contact). */
.bcc-btn {
  font-family: var(--mono);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .95rem 2rem;
  border-radius: 3px;
  display: inline-block;
  transition: transform .2s, box-shadow .2s, background .2s, border-color .2s;
}

.bcc-btn--solid {
  background: #fff;
  color: var(--teal);
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
}
.bcc-btn--solid:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 38px rgba(0,0,0,0.3);
  color: var(--teal);
}

.bcc-btn--outline {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.42);
}
.bcc-btn--outline:hover {
  background: rgba(255,255,255,0.1);
  border-color: #fff;
  color: #fff;
}

/* Lien "Découvrir X" / "Lire notre histoire" avec chevron qui s'écarte au survol. */
.bcc-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: gap .2s;
}
.bcc-link-arrow:hover { gap: .85rem; }

.bcc-link-arrow--teal   { color: var(--teal); }
.bcc-link-arrow--sage   { color: #5f7a6e; }
.bcc-link-arrow--ice    { color: #9FC4CE; }
.bcc-link-arrow--beige  { color: var(--beige); }

/* Badges (tags) — bloc Entreprise et Preuves & chiffres. */
.bcc-badge {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal);
  background: rgba(47,85,98,0.06);
  border: 1px solid rgba(47,85,98,0.14);
  padding: .4rem .8rem;
  border-radius: 2px;
}

.bcc-cert {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal);
  background: var(--cream);
  border: 1px solid var(--cream-dark);
  padding: .5rem .9rem;
}

/* Citation "le mot de la fondatrice". */
.bcc-quote {
  position: relative;
  border: 1px solid rgba(47,85,98,0.16);
  background: var(--cream);
  padding: 2.4rem 2.2rem;
}
.bcc-quote__label {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 1.2rem;
}
.bcc-quote__text {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 1.3rem;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 1.4rem;
}
.bcc-quote__cite {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-style: normal;
}

@media (max-width: 480px) {
  .bcc-quote { padding: 1.8rem 1.5rem; }
  .bcc-quote__text { font-size: 1.14rem; }
}

/* Motifs "graine" décoratifs en filigrane (brief §8). Le SVG lui-même (viewBox,
   path, fill/stroke) reste inline ; ces classes ne portent que le positionnement. */
.bcc-motif {
  position: absolute;
  pointer-events: none;
}
.bcc-motif--tl     { top: 10%; right: 5.5%; width: 46px; height: auto; opacity: .4; color: var(--teal); }
.bcc-motif--br     { bottom: 10%; left: 5%; width: 44px; height: auto; opacity: .4; color: var(--teal); transform: rotate(180deg); }
.bcc-motif--corner { left: -9%; bottom: -12%; width: min(46vw, 560px); height: auto; }
.bcc-motif--center { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(78vw, 820px); height: auto; }

/* La section Entreprise (2 colonnes en desktop) empile son contenu sous
   700px et devient bien plus haute : on resserre les graines de coin pour
   qu'elles restent un filigrane discret plutôt qu'un motif qui déborde sur
   le texte ou les badges. */
@media (max-width: 700px) {
  .bcc-motif--tl { width: 32px; top: 4%; right: 5%; }
  .bcc-motif--br { width: 32px; bottom: 4%; left: 4%; }
}

/* Lien social (footer). */
.bcc-social-link {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .7rem 1.15rem;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  transition: background .2s, border-color .2s;
}
.bcc-social-link:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--sage);
  color: #fff;
}