/* ==============================================
   PAGE ÉQUIPE — Base & Règles communes
   ============================================== */
.equipe-section{ 
  padding:clamp(40px,8vw,60px) 20px; 
}
.equipe-container{ 
  width:max(280px,min(1200px,92vw)); 
  margin-inline:auto; 
}
.equipe-section img{ 
  max-width:100%; 
  height:auto; 
  display:block; 
}

/* transitions globales */
.equipe-section *{ 
  transition:transform .6s ease, opacity .4s ease, filter .5s ease; 
}
@media (prefers-reduced-motion: reduce){
  .equipe-section *{ 
    transition:none !important; 
    animation:none !important; 
  }
}



/* ==============================================
   HERO
   ============================================== */
.equipe-hero--histoire{
  padding:clamp(2rem,5vw,3rem) 0 1.5rem;
  background:#f9f9f7;
  text-align:center;
}
.equipe-hero--histoire h1{
  color:#264154;
  font-size:clamp(2rem,3vw,3rem);
  margin-inline:1.5rem;
  margin-bottom:.5em;
  font-weight:800;
}
.equipe-hero--histoire .equipe-lead{
  color:#2d3a43;
  margin-inline:1.5rem;
  opacity:.9;
  max-width:700px;
  margin-inline:auto;
}



/* ==============================================
   INTRO — Notre pédagogie
   ============================================== */
.equipe-pedago-intro .equipe-pedago-wrap{
  display:grid;
  gap:clamp(16px,3vw,28px);
  grid-template-columns:1fr;
}

.equipe-pedago-intro .equipe-pedago-text h2{
  color:#264154;
  margin:0 0 8px;
  font-weight:800;
}

.equipe-pedago-intro .equipe-lead{
  color:#334155;
  margin:.25rem 0 1rem;
}

/* Liste avec puces dorées */
.equipe-checklist{
  margin:.75rem 0 0;
  padding:0;
  list-style:none;
  color:#475569;
}
.equipe-checklist li{
  position:relative;
  margin:.4rem 0;
  padding-left:1.4rem;
}
.equipe-checklist li::before{
  content:"";
  position:absolute;
  left:0;
  top:.6em;
  width:7px;
  height:7px;
  border-radius:2px;
  background:#d6a743;
  box-shadow:0 0 0 3px rgba(214,167,67,0.18);
  transform:translateY(-50%);
}

/* Bloc chiffres clés */
.equipe-stats{
  margin-top:1.6rem;
  font-size:.95rem;
}
.equipe-stats-title{
  font-weight:700;
  color:#1e293b;
  margin:0 0 .4rem;
}
.equipe-stats-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid #94a3b8;
  background:#dbeafe;
}
.equipe-stats-item{
  padding:.7rem .75rem;
  border-left:1px solid #94a3b8;
}
.equipe-stats-item:first-child{
  border-left:none;
}
.equipe-stats-value{
  display:block;
  font-weight:800;
  font-size:1.1rem;
  color:#0f172a;
}
.equipe-stats-label{
  display:block;
  margin-top:.15rem;
  color:#1e293b;
}
.equipe-stats-note{
  margin:.35rem 0 0;
  font-size:.8rem;
  color:#64748b;
}

/* Mobile : tableau en 2 lignes */
@media (max-width:768px){
  .equipe-stats-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .equipe-stats-item:last-child{
    grid-column:1 / -1;
  }
}



/* ==============================================
   CARTES ÉQUIPE — Layout desktop (centré + largeur)
   ============================================== */

/* conteneur de toutes les cartes */
.equipe-rows{
  display:flex;
  flex-direction:column;
  gap:1.8rem;
  padding:0 1rem 2rem;
  border-radius:2px;
  background:transparent;
  max-width:980px;            /* bloc profils plus étroit */
  margin-inline:auto;         /* centré dans la page */
}

/* carte individuelle */
.equipe-card{
  position:relative;
  background:#fff;
  border-radius:2px;
  box-shadow:0 10px 28px rgba(15,23,42,0.10);
  overflow:hidden;
}

/* inner : image plus petite + texte */
.equipe-card__inner{
  display:grid;
  grid-template-columns:minmax(0,30%) minmax(0,70%);
  gap:clamp(16px,3vw,24px);
  align-items:flex-start;
  padding:1rem 1.2rem 1.1rem;
}

/* colonne texte */
.equipe-card__content{
  padding:.25rem 0;
}



/* ==============================================
   MÉDIAS — Portraits (image moins grosse desktop)
   ============================================== */
.equipe-card__media{
  overflow:hidden;
  max-width:260px;           /* limite la taille visuelle de l’image */
}
.equipe-media{
  position:relative;
  overflow:hidden;
  aspect-ratio:3/4;          /* format portrait, plus compact */
  background:#e8eff5;
  box-shadow:0 10px 24px rgba(0,0,0,.10);
  isolation:isolate;
}
.equipe-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1);
}

/* hover conservé / léger ajustement */
.equipe-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,0) 60%,rgba(0,0,0,.06));
  opacity:.0;
  pointer-events:none;
}
@media (hover:hover) and (pointer:fine){
  .equipe-media:hover img{
    transform:scale(1.035);
    filter:brightness(.98) contrast(1.03);
  }
  .equipe-media:hover::after{
    opacity:.7;
  }
  .equipe-media:hover{
    box-shadow:0 18px 40px rgba(0,0,0,.18);
  }
}


/* ==============================================
   BIO + BOUTON VOIR PLUS
   ============================================== */

.equipe-bio{
  color:#475569;
  margin:0 0 14px;
}

/* conteneur bio + bouton */
.equipe-bio-wrap{
  position:relative;
}

/* bouton Voir plus / Voir moins (masqué par défaut, visible en mobile) */
.equipe-bio-toggle{
  display:none;
  margin-top:.25rem;
  padding:0;
  border:0;
  background:none;
  color:#264154;
  font-weight:600;
  font-size:.85rem;
  cursor:pointer;
  text-decoration:underline;
}


/* ==============================================
   TEXTE & MÉTADONNÉES
   ============================================== */
.equipe-name{
  margin:0 0 4px;
  color:#264154;
  font-weight:800;
  font-size:clamp(1.4rem,2.6vw,1.9rem);
}
.equipe-role{
  margin:0 0 12px;
  color:#334155;
  font-weight:700;
}
.equipe-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 12px;
  padding:0;
  list-style:none;
}
.equipe-tags li{
  display:inline-block;
  padding:6px 12px;
  background:rgba(38,65,84,.08);
  color:#264154;
  font-weight:600;
  font-size:.92rem;
}
/* bio par défaut (desktop) */
.equipe-bio{
  color:#475569;
  margin:0 0 14px;
}

/* clamp à 2 lignes en mobile */
@media (max-width:768px){
  .equipe-bio{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;   /* 2 lignes visibles */
    overflow:hidden;
  }
}

.equipe-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}


/* ==============================================
   BOUTONS UTILITAIRES
   ============================================== */
.equipe-section .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.66rem 1rem;
  font-weight:700;
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
  line-height:1;
}
.equipe-section .btn-primary:hover{
  filter:brightness(1.06);
}
.equipe-section .btn-outline{
  background:#fff;
  color:#264154;
  border-color:rgba(38,65,84,.3);
}
.equipe-section .btn-outline:hover{
  background:rgba(38,65,84,.06);
}


/* ==============================================
   RESPONSIVE > 768px (MAJ légère)
   ============================================== */
@media (max-width:980px){
  .equipe-card__inner{
    grid-template-columns:1fr;
    gap:clamp(14px,3vw,18px);
  }

  .equipe-card__media{
    max-width:none;
  }

  .equipe-media{
    aspect-ratio:4/3;
  }

  .equipe-section{
    padding-inline:16px;
  }
}


/* ==============================================
   Carrousel horizontal des profils (mobile ≤ 768px)
   + scrollbar custom
   ============================================== */
@media (max-width:768px){

  /* rail horizontal */
  .equipe-rows{
    flex-direction:row;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    gap:.85rem;
    padding:0 1rem 1.4rem;
    -webkit-overflow-scrolling:touch;
    background:transparent;      /* en mobile, on laisse respirer */
  }

  /* chaque carte = slide */
  .equipe-card{
    flex:0 0 82%;
    max-width:82%;
    scroll-snap-align:start;
    border-radius:2px;
    box-shadow:0 8px 22px rgba(15,23,42,0.18);
  }

  .equipe-card__inner{
    grid-template-columns:1fr;
    gap:clamp(14px,3vw,18px);
  }

  .equipe-card__media{
    max-width:none;
  }

  .equipe-media{
    aspect-ratio:4/3;
  }
  /* clamp bio à 2 lignes */
  .equipe-bio{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
  }
  .equipe-bio--expanded{
    -webkit-line-clamp:unset;
    display:block;
  }

  /* bouton visible en mobile */
  .equipe-bio-toggle{
    display:inline-block;
  }

  /* scrollbar horizontale custom */
  .equipe-rows::-webkit-scrollbar{
    height:6px;                  /* hauteur de la scrollbar horizontale */
  }
  .equipe-rows::-webkit-scrollbar-track{
    background:rgba(15,23,42,0.04);
    border-radius:999px;
  }
  .equipe-rows::-webkit-scrollbar-thumb{
    background:linear-gradient(90deg,#264154,#d6a743);
    border-radius:999px;
  }
  .equipe-rows::-webkit-scrollbar-thumb:hover{
    background:linear-gradient(90deg,#1b2938,#c79633);
  }
}