/* ============================================================
   À PROPOS
   ============================================================ */

.about-hero{ min-height:100vh; display:flex; align-items:center; padding: clamp(8rem,14vw,11rem) 0 5rem; background: linear-gradient(155deg, var(--creme) 0%, var(--sage-light) 60%, var(--sage) 100%); position:relative; overflow:hidden; }
.about-hero .container{ position:relative; z-index:2; }
.about-hero h1{ font-size: clamp(2.4rem, 5.8vw, 5rem); font-weight:800; line-height:1.04; margin:.6rem 0 0; max-width:100%; letter-spacing:-.02em; }
.about-hero p{ font-size: var(--fs-lead); color: rgba(60,60,59,.65); max-width:75%; margin-top:1.4rem; }

/* ---------- ÉQUIPE : rectangles N&B portrait qui se chevauchent ---------- */
.team{ background: var(--noir); padding: clamp(5rem,9vw,8rem) 0; overflow:hidden; }
.team .section-head h2{ color:#fff; }
.team .section-head h2 em{ color: var(--sage-light); font-style:normal; }
.team .section-head p{ color: rgba(247,246,242,.6); margin-top:1rem; font-size: var(--fs-lead); }
.team .tag{ color: var(--sage-light); }
.team .tag::before{ background: var(--sage-light); }

.team-row{ display:flex; justify-content:center; align-items:flex-start; padding: 1rem 6vw 0; }
.team-card{
  position:relative; flex: 0 0 320px; width:320px; height: 480px;
  overflow:hidden; border-radius: 20px;
  border: 3px solid var(--noir);
  margin-left:-70px;
  z-index:1;
  transition: transform .5s var(--ease), filter .15s ease-out, flex-basis .5s var(--ease), width .5s var(--ease);
  background-size:cover; background-position: center;
  filter: grayscale(1) contrast(1.05) brightness(.92);
}
.team-card:first-child{ margin-left:0; }
.team-card:hover{
  transform: translateY(-10px);
  filter:none;
  z-index:5;
  flex: 0 0 360px; width:360px;
}
.team-card.active{ filter:none; z-index:5; }
.team-card::before{
  content:''; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(22,22,21,0) 38%, rgba(22,22,21,.96) 100%);
}
.team-info{
  position:absolute; left:1.4rem; right:1.4rem; bottom:1.6rem; z-index:2; color:#fff;
}
.team-info .role{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color: var(--sage-light); font-weight:700; }
.team-info h3{ font-size:1.25rem; font-weight:700; margin:.4rem 0 .7rem; }
.team-info .words{ display:flex; gap:.4rem; flex-wrap:wrap; }
.team-info .words span{
  font-size:.68rem; padding:.3rem .65rem; border-radius:100px; background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2); white-space:nowrap;
}


/* ---------- HISTOIRE ---------- */
.story{ background: var(--creme); padding: clamp(5rem,9vw,8rem) 0; }
.story-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap: 4rem; }
.story-left{ /* grid cell stretches by default to match story-text height */ }
.story-num{ font-size: clamp(6rem,14vw,11rem); font-weight:800; color: var(--sage); line-height:.8; opacity:.5; position:sticky; top:50vh; transform: translateY(-50%); text-align:center; }
.story-text h2{ font-size: var(--fs-h2); font-weight:800; line-height:1.05; margin:.6rem 0 1rem; letter-spacing:-.01em; }
.story-subtitle{ font-size:1rem; font-weight:700; color: var(--sage-dark); letter-spacing:.01em; margin-bottom:1.8rem; }
.story-text p{ font-size:1.05rem; line-height:1.8; color: rgba(60,60,59,.78); margin-bottom:1.2rem; }
.story-text p.story-subhead{ font-size:1.2rem; font-weight:800; color: var(--anthracite); margin-top:1.8rem; }

@media (max-width: 860px){
  .story-grid{ grid-template-columns:1fr; gap:1.5rem; }
  .story-num{ position:static; transform:none; }
}
@media (max-width: 640px){
  .about-hero h1{ font-size: clamp(1.9rem, 7vw, 2.6rem); }
  .about-hero p{ max-width: 100%; }
  .story-num{ font-size: clamp(3.5rem, 14vw, 6rem); }
  .story-text h2{ font-size: clamp(1.7rem, 6vw, 2.4rem); }
  .story-text p{ font-size:.98rem; }
  .team-info h3{ font-size:1.1rem; }
  .team-row{ flex-wrap:nowrap; gap:0; padding:0 4vw; justify-content:center; overflow:visible; }
  .team-card{ flex: 0 0 155px; width:155px; height:300px; margin-left:-40px; border-radius:16px; }
  .team-card:first-child{ margin-left:0; }
  .team-card:hover{ flex: 0 0 175px; width:175px; transform: translateY(-8px); filter:none; }
  .team-info{ left:.9rem; right:.9rem; bottom:1rem; }
  .team-info .role{ font-size:.56rem; letter-spacing:.08em; }
  .team-info h3{ font-size:.88rem; margin:.25rem 0 .45rem; }
  .team-info .words{ gap:.25rem; }
  .team-info .words span{ font-size:.54rem; padding:.18rem .36rem; }
  .values-stack{ height: 250px; }
  .values .section-head{ margin-bottom:.6rem; }
  .values-360{ gap:.6rem; padding:.3rem 0; }
  .vision-card h3{ font-size: clamp(1.1rem, 3.5vw, 1.5rem); }
  .about-hero{ padding: clamp(6rem,12vw,9rem) 0 3rem; }
  .about-hero h1{ font-size: clamp(1.7rem, 7vw, 2.4rem); }
  .team{ padding: clamp(2.5rem, 6vw, 4rem) 0; }
  .story{ padding: clamp(2.5rem, 6vw, 4rem) 0; }
  .story-text h2{ font-size: clamp(1.4rem, 5.5vw, 2rem); }
  .story-text p{ font-size:.9rem; line-height:1.7; margin-bottom:.9rem; }
  .values{ padding: clamp(1.8rem, 4vw, 2.8rem) 0; }
  .vision{ padding: clamp(2.5rem, 6vw, 4rem) 0; }
  .vision-grid{ gap:1.8rem; }
  .vision-card p{ font-size:.9rem; }
}

/* ---------- VALEURS 360° (carrousel empilé) ---------- */
.values{ background: var(--anthracite); color:#fff; padding: clamp(6rem,10vw,9rem) 0; position:relative; overflow:hidden; }
.values .tag{ color: var(--sage-light); }
.values .tag::before{ background: var(--sage-light); }
.values .section-head h2{ color:#fff; }
.values .section-head h2 em{ color: var(--sage-light); font-style:normal; }

.values-360{ display:flex; flex-direction:column; align-items:center; gap:2.2rem; padding: 1.5rem 0; }
.values-stack{
  position:relative; width: calc(100% + 12vw); margin: 0 -6vw; height: 360px;
  perspective: 1200px;
}
.v-card{
  position:absolute; top:50%; left:50%; width: min(28vw, 360px); max-width:360px; min-height:230px;
  border-radius: 26px;
  background: var(--noir); border:1px solid rgba(255,255,255,.12);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding: 2rem;
  transition: transform .6s var(--ease), opacity .6s var(--ease), filter .6s var(--ease);
  cursor:pointer;
}
.v-card h4{ font-size:1.5rem; margin:0 0 .8rem; }
.v-card p{ font-size:.92rem; color: rgba(247,246,242,.65); line-height:1.6; margin:0; max-width:340px; }

/* position relative au centre : 0 = devant, ±1/±2 = empilées derrière.
   Dégressivité symétrique du centre vers les côtés, étalée sur quasiment
   toute la largeur de la page : la carte centrale reste la plus grande. */
.v-card[data-pos="0"]{ transform: translate(-50%,-50%) scale(1.15); opacity:1; z-index:6; filter:none; }
.v-card[data-pos="1"]{ transform: translate(-50%,-50%) translate(23vw,-10px) scale(.8); opacity:.5; z-index:5; filter: blur(.3px); }
.v-card[data-pos="-1"]{ transform: translate(-50%,-50%) translate(-23vw,-10px) scale(.8); opacity:.5; z-index:5; filter: blur(.3px); }
.v-card[data-pos="2"]{ transform: translate(-50%,-50%) translate(40vw,-20px) scale(.58); opacity:.28; z-index:4; filter: blur(.6px); }
.v-card[data-pos="-2"]{ transform: translate(-50%,-50%) translate(-40vw,-20px) scale(.58); opacity:.28; z-index:4; filter: blur(.6px); }
.v-card[data-pos="hidden"]{ transform: translate(-50%,-50%) translateY(-30px) scale(.7); opacity:0; z-index:1; pointer-events:none; }

.values-nav{ display:flex; align-items:center; gap:1.6rem; }
.values-nav button{
  width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
  background:transparent; color:#fff; display:flex; align-items:center; justify-content:center;
  transition: all .35s var(--ease);
}
.values-nav button:hover{ background: var(--sage); border-color: var(--sage); color: var(--anthracite); }
.values-nav button svg{ width:18px; height:18px; }
.values-dots{ display:flex; gap:.5rem; }
.values-dots span{ width:7px; height:7px; border-radius:50%; background: rgba(255,255,255,.25); transition: all .4s var(--ease); }
.values-dots span.active{ background: var(--sage-light); width:20px; border-radius:4px; }

/* ≤ 1100px : une seule carte centrée, les autres masquées */
@media (max-width: 1100px){
  .values-stack{ height: 320px; width: 100%; margin: 0; }
  .v-card{ width: min(86vw, 500px); max-width: 500px; min-height: 0; filter: none; }
  .v-card[data-pos="0"]{ opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }
  .v-card[data-pos="1"]{ opacity: 0; pointer-events: none; transform: translate(-50%, -50%); }
  .v-card[data-pos="-1"]{ opacity: 0; pointer-events: none; transform: translate(-50%, -50%); }
  .v-card[data-pos="2"]{ opacity: 0; pointer-events: none; transform: translate(-50%, -50%); }
  .v-card[data-pos="-2"]{ opacity: 0; pointer-events: none; transform: translate(-50%, -50%); }
  .v-card[data-pos="hidden"]{ opacity: 0; pointer-events: none; transform: translate(-50%, -50%); }
}

@media (max-width: 560px){
  .v-card{ padding: 1.2rem; }
  .v-card h4{ font-size: 1rem; }
  .v-card p{ font-size: .82rem; }
  .values-stack{ height: 240px; }
}
@media (max-width: 420px){
  .values-stack{ height: 260px; }
  .v-card{ padding: 1.1rem; }
  .v-card h4{ font-size: .95rem; }
  .v-card p{ font-size: .8rem; }
}

/* ---------- VISION / MISSION ---------- */
.vision{ background: var(--sage); color: var(--anthracite); padding: clamp(5rem,9vw,8rem) 0; }
.vision-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 3rem; }
.vision-card h3{ font-size: var(--fs-h3); font-weight:800; margin:0 0 1rem; }
.vision-card p{ font-size:1.02rem; line-height:1.75; color: rgba(22,22,21,.75); }
@media (max-width: 760px){ .vision-grid{ grid-template-columns:1fr; gap:2.4rem; } }