/* ============================================================
   BLOC experts — Diptyque sticky (page expertises)
   Sticky gauche : 40% (compteur géant + CTA). Droite : 60% — N cartes
   d'expertise empilées, ligne séparatrice cuivre. Compteur 01→NN sync avec la
   carte au centre du viewport (slot machine). Reveal des cartes au scroll.
   Animation : public/assets/front/js/blocs/experts.js (RAF autonome).
   Port fidèle de la maquette 2026-06-10 (style.css ≈ 2905-3150).
   ============================================================ */
.experts {
  padding: var(--pad-section) 0;
  background: var(--c-bg-cream);
}
.experts__layout {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: clamp(40px, 5vw, 100px);
  align-items: start;
}

/* === Sticky gauche : reste collé pendant tout le scroll de la section === */
.experts__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(20px, 2.5vh, 32px);
  padding: clamp(40px, 8vh, 100px) 0;
}

/* Compteur géant (01 / NN) avec animation slot machine sur le chiffre */
.experts__counter {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: clamp(12px, 2vh, 24px) 0;
  font-family: var(--ff-display);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.85;
  overflow: hidden;
}
.experts__counter-num {
  display: inline-block;
  font-size: clamp(5rem, 12vw, 12rem);
  color: var(--c-copper);
  will-change: transform, opacity;
}
.experts__counter-num.is-changing {
  animation: expertsCounterSlide 0.45s cubic-bezier(0.24, 0.43, 0.15, 0.97);
}
@keyframes expertsCounterSlide {
  0%   { transform: translateY(40%); opacity: 0; }
  100% { transform: translateY(0);   opacity: 1; }
}
.experts__counter-total {
  font-size: clamp(1.5rem, 2.4vw, 2.4rem);
  color: rgba(0, 57, 77, 0.3);
  font-weight: 800;
}

/* Positionnement uniquement — le rendu visuel vient de .btn .btn--primary .btn-shape */
.experts__cta {
  align-self: flex-start;
}

/* === Liste droite : N cartes expertises === */
.experts__list {
  display: flex;
  flex-direction: column;
}

/* Carte expert : avatar icône cuivre + contenu, séparées par ligne cuivre */
.expert-card {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vh, 28px);
  padding: clamp(40px, 7vh, 90px) 0;
  border-bottom: 1px solid rgba(142, 117, 71, 0.25);
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.24, 0.43, 0.15, 0.97),
              transform 0.7s cubic-bezier(0.24, 0.43, 0.15, 0.97);
}
.expert-card:first-child { padding-top: clamp(60px, 12vh, 140px); }
.expert-card:last-child { border-bottom: none; }
.expert-card.is-revealed { opacity: 1; transform: translateY(0); }

.expert-card__head {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.5vw, 36px);
}
/* Avatar icône thématique : fond blanc + forme goutte (= bouton scroll-up), liseré cuivre. */
.expert-card__avatar {
  flex-shrink: 0;
  width: clamp(64px, 6vw, 96px);
  height: clamp(64px, 6vw, 96px);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--c-copper);
  border-radius: 50% 50% 50% 0;
  background: #fff;
  color: var(--c-copper);
}
.expert-card__avatar svg {
  width: 55%;
  height: 55%;
  stroke: var(--c-copper);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.expert-card__field {
  margin: 0;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--c-blue);
}
/* Conteneur des personnes — empile verticalement quand il y en a plusieurs. */
.expert-card__people {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vh, 28px);
  margin: clamp(8px, 1vh, 14px) 0 0;
}
/* Bloc identité d'UNE personne : cercle photo à GAUCHE, nom + société à DROITE. */
.expert-card__person {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(16px, 2vw, 32px);
}
/* Photo passe à gauche (avant le texte dans l'ordre visuel). */
.expert-card__person .expert-card__photo {
  order: -1;
}
.expert-card__person-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(2px, 0.4vh, 6px);
}
/* Photo de la personne (ronde, liseré cuivre) ; placeholder = initiales. */
.expert-card__photo {
  flex-shrink: 0;
  width: clamp(104px, 12vw, 250px);
  height: clamp(104px, 12vw, 250px);
  border-radius: 50%;
  border: 1.5px solid var(--c-copper);
  background: rgba(142, 117, 71, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: var(--ff-mono);
  font-size: clamp(1rem, 1.3vw, 1.4rem);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--c-copper);
}
.expert-card__photo::before {
  content: attr(data-expert-initials);
}
/* Si une vraie photo est chargée (img enfant), masque les initiales. */
.expert-card__photo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.expert-card__photo:has(img)::before { content: none; }

.expert-card__name {
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.1rem, 1.4vw, 1.4rem);
  color: var(--c-copper);
}
/* Société = sous-ligne (titre) sous le nom de la personne. */
.expert-card__company {
  display: block;
  margin: 0;
  font-family: var(--ff-mono);
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(142, 117, 71, 0.7);
}
/* Société avec lien : rendu identique au texte (même couleur héritée), sans
   soulignement bleu du navigateur ; soulignement discret au survol. */
a.expert-card__company { text-decoration: none; transition: opacity 0.2s ease; }
a.expert-card__company:hover { text-decoration: underline; opacity: 0.85; }
.expert-card__desc {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--c-text);
  max-width: 55ch;
}

/* Mobile + tablette : sticky désactivé, stack vertical, compteur masqué.
   Seuil unifié 1024px : tablette = mobile intégral. */
@media (max-width: 1024px) {
  .experts__layout { grid-template-columns: 1fr; gap: 40px; }
  .experts__sticky {
    position: relative;
    height: auto;
    padding: 20px 0 40px;
  }
  .experts__counter { display: none; }
  .expert-card__head { flex-direction: column; align-items: flex-start; gap: 16px; }
}