/* Section Team */
.team{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:clamp(60px,10vh,120px) clamp(24px,5vw,80px);
  position:relative;
  overflow:hidden;
  gap:clamp(48px,7vh,80px);
}

/* Halo fond */
.team::before{
  content:'';
  position:absolute;
  width:900px;
  height:900px;
  background:radial-gradient(circle,rgba(212,168,67,.05) 0%,transparent 65%);
  border-radius:50%;pointer-events:none;
  animation:breathe 8s ease-in-out infinite;
}

/* Header section */
.team-header{text-align:center;position:relative;z-index:2;}


/* Grille profils */

/* ── Profils — layout horizontal ancré ── */
.profiles {
  display: flex;
  flex-direction: column;
  gap: 80px;
  width: 100%;
}

.profile {
  display: flex;
  align-items: center;
  gap: 64px;
}

.profile:nth-child(2) {
  flex-direction: row-reverse;
}

/* ── Image — plus grande ── */
.profile-canvas-wrap {
  position: relative;
  flex: 0 0 420px;
  width: 420px;
  height: 420px; /* ← doit être identique à width */
  flex-shrink: 0;
  overflow: visible;
  aspect-ratio: 1 / 1; /* ← garde carré même si flex joue */
}

/* ── Texte — aligné à gauche, pas centré ── */
.profile-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;  /* ← retire le centrage */
  text-align: left;         /* ← texte à gauche */
  gap: 14px;
}

.profile-name {
  text-align: left;
}

.profile .sub-title {
  text-align: left;
  max-width: 100%;
}

.profile .text {
  text-align: left;
  max-width: 480px;
}

/* ── Boutons — style sobre premium ── */
.wrap-btn-links {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.btn-links {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid rgba(212,168,67,0.35);
  border-radius: 4px;
  color: rgba(212,168,67,0.75);
  font-family: sans-serif;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color .3s, color .3s, background .3s;
}

.btn-links:hover {
  border-color: rgba(212,168,67,0.9);
  color: #D4A843;
  background: rgba(212,168,67,0.06);
}

.btn-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ── Benjamin — texte à gauche aussi côté miroir ── */
.profile:nth-child(2) .profile-info {
  align-items: flex-start;
  text-align: left;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .profile-canvas-wrap {
    flex: 0 0 300px;
    width: 300px;
    height: 300px;
  }
}

@media (max-width: 680px) {
  .profile,
  .profile:nth-child(2) {
    flex-direction: column;
    align-items: flex-start;
  }

  .profile-canvas-wrap {
    flex: 0 0 auto;
    width: clamp(240px, 70vw, 300px);
    height: clamp(240px, 70vw, 300px);
    margin: 0 auto;
  }

  .profile-info {
    align-items: flex-start;
    padding: 0 8px;
  }
}

/* Anneau rotatif derrière */
/* ── Anneau rotatif — override Elementor ── */
.profile-ring {
  position: absolute !important;
  inset: -18px !important;
  width: unset !important;
  height: unset !important;
  border: 1px solid rgba(212,168,67,.08) !important;
  border-radius: 50% !important;
  animation: rotSlow 40s linear infinite !important;
}

.profile-ring::before {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(212,168,67,.04);
  border-radius: 50%;
}

.profile-ring::after {
  content: '';
  position: absolute;
  top: -3px; left: 50%;
  width: 5px; height: 5px;
  background: #8B6408;
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 8px #D4A843;
}

/* Franck */
.profile:nth-child(1) .profile-ring {
  animation-duration: 40s !important;
  animation-direction: normal !important;
}

/* Benjamin */
.profile:nth-child(2) .profile-ring {
  animation-duration: 28s !important;
  animation-direction: reverse !important;
}

/* Mobile */
@media (max-width: 680px) {
  .profile-ring {
    inset: -12px !important;
  }
}


/* Halo individuel */
.profile-halo{
  position:absolute;
  background:radial-gradient(circle,rgba(212,168,67,.07) 0%,transparent 65%);
  border-radius:50%;
  pointer-events:none;
  animation:breathe 6s ease-in-out infinite;
  inset: -40px;
}

/* Canvas particle */
.profile-canvas{
  position:absolute;
  border-radius:50%;
  z-index:0;
  inset: -5px;
  width: calc(100% + 10px);
  height: calc(100% + 10px);
}

/* Photo cachée (révélée par canvas) */
.profile-photo{
  position:absolute;
  inset:0;
  border-radius:50% !important;
  object-fit:cover;
  z-index:1;
  opacity:0;
  transition: opacity .6s ease;
  padding:10px;
}

/* Info sous l'image */
.profile-info{
  display:flex;flex-direction:column;
  align-items:center;
  gap:clamp(8px,1.2vh,14px);
  text-align:center;
  width:100%;
}

.profile-name{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;font-weight:300;
  font-size:clamp(26px,3.5vw,40px);
  line-height:1;
  background:linear-gradient(135deg,#8B6408,#D4A843,#FFE566,#D4A843);
  background-size:200% 200%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:goldFlow 5s ease-in-out infinite;
}

.profile .sub-title {
	max-width:400px
}

.profile-bio{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(14px,1.5vw,17px);
  font-weight:300;
  line-height:1.8;
  color: var(--text);
  max-width:300px;
}

/* Franck — sens horaire, vitesse normale (déjà par défaut) */
.profile:nth-child(1) .profile-ring {
  animation-duration: 40s;
  animation-direction: normal;
}

/* Benjamin — sens antihoraire, vitesse différente */
.profile:nth-child(2) .profile-ring {
  animation-duration: 40s;
  animation-direction: reverse;
}


@media(max-width:680px){
  .profiles{grid-template-columns:1fr;}
  .profile-canvas-wrap{width:clamp(200px,70vw,280px);height:clamp(200px,70vw,280px);}
}