/* FILE: team.css */
/* Équipe — fond bois premium + glow cuivre subtil */
.section-offset{
  scroll-margin-top: 110px;
  /* 🔥 DÉSACTIVÉ - Padding géré par mobile-spacing-fix.css
  padding-top: clamp(160px, 18vh, 200px); */
  padding-bottom: clamp(70px, 10vh, 120px);
}

/* FULL SCREEN WRAPPER */
#team {
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  width: 100% !important;
  overflow: hidden !important;
  padding-top: 180px !important;
}

/* Mobile : padding encore plus généreux */
@media (max-width: 768px) {
  #team {
    padding-top: 180px !important;
  }
  
  .section-offset {
    padding-top: 180px !important;
  }
}

.team--wood{ position: relative; isolation:isolate; }
.team--wood::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(120% 80% at 50% 10%, rgba(0,0,0,.40), transparent 60%),
    url("assets/wood-premium.jpg") center/cover no-repeat;
  filter: saturate(1.05) contrast(1.04) brightness(.88);
  transform: scale(1);
  animation: woodDrift 26s ease-in-out infinite alternate;
  will-change: transform, filter;
}
.team--wood::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.18) 32%, rgba(0,0,0,.28) 100%);
}
.team--wood .container,
.team--wood .section-head,
.team--wood .team__grid{ position: relative; z-index: 1; }

.team--wood .section-head h2{
  font-family: "InterVariable", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight:800; letter-spacing:-0.01em;
  color:#F5F5F5; text-shadow: 0 8px 30px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.05);
  font-size: clamp(2rem, 4.6vw, 3rem); margin: 0 0 .35rem;
}
.team--wood .section-head p{
  color: rgba(245,245,245,.92);
  text-shadow: 0 4px 18px rgba(0,0,0,.5);
  margin: 0 auto 2.4rem;
}

/* Cards */
.team .team__grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:28px; }
@media (max-width: 900px){ .team .team__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 600px){ .team .team__grid{ grid-template-columns:1fr; } }

.team--wood .person{
  position: relative;
  background: rgba(18,18,18,.86);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
  overflow: hidden; padding: 16px;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease !important;
}
.team--wood .person::before{
  content:""; position:absolute; inset:-35% -12% auto -12%; height:56%;
  background: radial-gradient(60% 60% at 50% 50%, rgba(200,168,107,.32), transparent 70%);
  opacity:.0; transform: translateY(-30%) scale(1.15);
  transition: opacity .45s ease, transform .45s ease;
  pointer-events:none;
}
.team--wood .person:hover{
  transform: translateY(-8px) !important;
  border-color: rgba(200,168,107,.45) !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.60), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.team--wood .person:hover::before{ opacity:.75; transform: translateY(-8%) scale(1.02); }

.team--wood .person img{
  border-radius: 16px; display:block; width:100%;
  filter: contrast(1.02) saturate(1.02) brightness(.98);
  transform: translateZ(0) scale(1.005);
  transition: transform .5s ease, filter .4s ease;
  will-change: transform;
}
.team--wood .person:hover img{ transform: scale(1.015); filter: contrast(1.05) saturate(1.04); }

.team--wood .person h3{ color:#F5F5F5; font-weight:800; font-size:1.15rem; margin:.8rem 0 .2rem; }
.team--wood .person .role{ color:rgba(245,245,245,.75); font-weight:700; font-size:.9rem; margin:0 0 .6rem; }
.team--wood .person .bio{ color:rgba(245,245,245,.88); line-height:1.6; margin:0; }

@keyframes woodDrift{
  0% { transform: scale(1) translate3d(0,0,0); }
  100%{ transform: scale(1.06) translate3d(0,-8px,0); }
}

@media (prefers-reduced-motion: reduce){
  .team--wood::before{ animation:none; }
  .team--wood .person img{ transition:none; transform:none; }
}
/* --- Team tweaks (append) --- */

/* Container width helper if you use .container elsewhere */
.team .container{ max-width:1200px; margin:0 auto; padding:0 clamp(20px,4vw,32px); display: flex !important; flex-direction: column !important; justify-content: center !important; width: 100% !important; min-height: 100vh !important; }

/* Subtitle align/size */
.team .section-head .section-sub{
  max-width: 740px;
  margin-left:auto; margin-right:auto;
  font-size: clamp(0.98rem, 1.2vw, 1.05rem);
  opacity:.95;
}

/* Image aspect & object-fit for consistent cards */
.person .person__img{
  width:100%; height:auto; display:block;
  aspect-ratio: 4 / 5;       /* keeps portraits consistent */
  object-fit: cover;          /* crop nicely if needed */
  border-radius: 16px;
}

/* Roles a tad more “label” */
.team--wood .person .role{
  text-transform: none; letter-spacing: .01em;
  opacity: .85;
}

/* Minimal links (no button look, just luxe text) */
.person__links{
  display:flex; gap:14px; flex-wrap:wrap; margin-top:.65rem;
}
.link-ghost{
  text-decoration:none;
  color: color-mix(in oklab, var(--copper) 82%, var(--offwhite));
  border-bottom: 1px solid transparent;
  transition: border-color .18s ease, opacity .18s ease;
  opacity:.96;
}
.link-ghost:hover{ border-color: currentColor; opacity:1; }

/* If you want no underline anywhere inside the card even on hover */
.person a{ text-decoration:none; }

/* Slightly stronger card hover depth (keeping it tasteful) */
.team--wood .person:hover{
  box-shadow: 0 24px 68px rgba(0,0,0,.50), inset 0 1px 0 rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.10);
}

/* Optional: reduce background drift intensity on very small screens */
@media (max-width: 560px){
  .team--wood::before{ filter: saturate(1.02) contrast(1.03) brightness(.9); }
}
/* --- Team – premium refinements --- */

/* 1) Section spacing a hair tighter */
.team--wood .section-head h2 { margin-bottom:.25rem; }
.team--wood .section-head p  { margin-bottom:2rem; max-width:58ch; }

/* 2) Card: firmer corners + softer elevation */
.team--wood .person{
  border-radius:20px;
  box-shadow:
    0 18px 50px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.04);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.team--wood .person:hover{
  transform: translateY(-2px);
  box-shadow: 0 24px 60px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.10);
}

/* 3) Image: fixed ratio + gentle gradient at top edge */
.team--wood .person .person__img{
  aspect-ratio: 4 / 5;           /* keeps a portrait ratio */
  object-fit: cover;
  border-radius: 14px;
  position: relative;
}
.team--wood .person .person__img::after { content:none; } /* (guard if any resets) */
.team--wood .person .person__img-wrap{
  position:relative; overflow:hidden; border-radius:14px;
}
.team--wood .person .person__img-wrap::after{
  content:""; position:absolute; inset:0 0 auto 0; height:22%;
  background:linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,0));
  pointer-events:none;
}

/* 4) Micro-parallax on hover */
.team--wood .person .person__img { transform: translateZ(0) scale(1.005); transition: transform .5s ease, filter .4s ease; }
.team--wood .person:hover .person__img{ transform: scale(1.02); }

/* 5) Name/role/bio rhythm */
.team--wood .person h3{ font-size:1.1rem; margin:.7rem 0 .15rem; }
.team--wood .person .role{ font-size:.9rem; opacity:.9; margin:0 0 .55rem; }
.team--wood .person .bio { font-size:.95rem; line-height:1.55; }

/* 6) Copper underline link – minimal */
.link-ghost{
  display:inline-block; text-decoration:none; font-weight:600;
  color: color-mix(in oklab, var(--copper) 78%, #fff);
  border-bottom: 1px solid color-mix(in oklab, var(--copper) 45%, #fff);
  padding-bottom: 2px;
  transition: border-color .2s ease, color .2s ease;
}
.link-ghost:hover,
.link-ghost:focus-visible{
  color: color-mix(in oklab, var(--copper) 88%, #fff);
  border-bottom-color: color-mix(in oklab, var(--copper) 75%, #fff);
  outline: none;
}

/* 7) Focus ring for whole card (keyboard) */
.team--wood .person:focus-within{
  box-shadow:
    0 24px 64px rgba(0,0,0,.48),
    0 0 0 2px rgba(255,255,255,.10),
    0 0 0 5px color-mix(in oklab, var(--copper) 35%, #fff 0%);
}

/* 8) Equal heights reliably */
.team .team__grid{ align-items: stretch; }
.team--wood .person{ display:flex; flex-direction:column; }
.team--wood .person .bio{ margin-bottom:.9rem; }
.team--wood .person .person__links{ margin-top:auto; }

/* 9) Mobile polish */
@media (max-width: 900px){
  .team--wood .person{ padding:14px; }
}
/* Team — center content inside each card */
.team--wood .person{
  text-align: center;
}

.team--wood .person .bio{
  max-width: 52ch;
  margin: 0 auto .9rem; /* centers the paragraph block */
}

.team--wood .person .person__links{
  display: flex;
  justify-content: center;  /* centers the link row */
  margin-top: auto;         /* still keeps equal heights */
}
/* Center the Team section heading + subtitle */
.team--wood .section-head{
  text-align: center;
}

.team--wood .section-head h2{
  margin-left: auto;
  margin-right: auto;
}

.team--wood .section-head p{
  margin-left: auto;
  margin-right: auto;
  max-width: 70ch; /* keeps the line length elegant */
}
.team--wood .section-head h2{ margin-bottom:.6rem; }
.team--wood .section-head p{ margin-top:.2rem; margin-bottom:2.2rem; }
.team--wood .person{
  display:flex; flex-direction:column;
}
.team--wood .person .bio{ margin-bottom:1rem; }
.team--wood .person .cta{
  margin-top:auto; /* pousse le bouton en bas */
}
.team--wood .person{ transition: border-color .2s ease, box-shadow .2s ease; }
.team--wood .person:hover{
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 28px 70px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
}
.team--wood .person a.cta{
  color: color-mix(in oklab, var(--copper) 85%, #fff);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition: opacity .18s ease, border-color .18s ease;
}
.team--wood .person a.cta:hover{ opacity:.9; border-color: currentColor; }
/* === TEAM — DÉSACTIVÉ - Padding géré par mobile-spacing-fix.css ===
section#team.section-offset{
  padding-top: clamp(160px, 20vh, 280px);
}

@media (max-width: 640px){
  section#team.section-offset{
    padding-top: 120px;
  }
}

html.panel-open section#team.section-offset{
  padding-top: clamp(180px, 24vh, 320px);
}
*/
/* Titre "Barbiers" en CAPS (section Équipe) */
#team .section-head h2{
  text-transform: uppercase;
  letter-spacing: .08em;     /* un peu d’espace = plus premium */
}

/* Option (si tu préfères des petites capitales) :
#team .section-head h2{
  text-transform: none;
  font-variant-caps: small-caps;
  letter-spacing: .06em;
}
*/
/* Titre "Barbiers" en CORPS + caps */
#team .section-head h2{
  font-family: var(--font-corps) !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700; /* ou 800 si dispo dans ta fonte */
}
/* Titre BARBIERS — INTER + caps + micro-polish */
#team .section-head h2{
  font-family: "InterVariable", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  text-transform: uppercase;
  font-weight: 700;                 /* passe à 600 si la graisse est trop forte */
  letter-spacing: .06em;            /* souffle entre lettres */
  line-height: 1.05;                /* compact, premium */
  font-size: clamp(28px, 4vw, 44px);/* responsive doux */
  margin-top: .25rem;               /* le décoller légèrement du logo */
  margin-bottom: .6rem;             /* un peu d’air avant le sous-titre */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Sous-titre un poil plus calme pour l’équilibre */
#team .section-head .section-sub{
  letter-spacing: .01em;
  opacity: .92;
}

/* Mobile: resserrer un chouïa la chasse pour éviter la casse */
@media (max-width: 480px){
  #team .section-head h2{
    letter-spacing: .055em;
    font-size: clamp(24px, 7vw, 32px);
  }
}
/* === TEAM — layout clean quand il n'y a que 2 cartes ================== */

/* Centre la grille et donne un gap souple */
.team .team__grid{
  display: grid;
  /* cartes centrées, même à 2 items */
  justify-content: center;           /* centre les colonnes */
  align-items: center !important;
  gap: clamp(22px, 4vw, 36px);
  /* colonnes auto, largeur carte contrôlée */
  grid-template-columns: repeat(auto-fit, minmax(300px, 360px));
  min-height: 100% !important;
  width: 100% !important;
}

/* Large écrans: écarter un peu les 2 cartes et limiter la largeur totale */
@media (min-width: 1100px){
  .team .container{ max-width: 920px; }  /* recentre le tout sous le logo */
}

/* Cartes: largeur cohérente, pas d'étirement en pleine largeur */
.team .team__grid .person{
  width: clamp(300px, 32vw, 360px);
  margin: 0;               /* pas de margin parasite */
}

/* Mobile/tablette: repasse en 1 colonne proprement */
@media (max-width: 760px){
  .team .team__grid{
    grid-template-columns: 1fr;
    justify-content: center;
  }
  .team .team__grid .person{
    width: min(92vw, 420px);
    margin-inline: auto;
  }
}

/* (Option) Si un jour il y a 3+ barbiers, on relâche la contrainte de largeur */
@supports(selector(.team__grid:has(.person:nth-child(3)))){
  .team .team__grid:has(.person:nth-child(3)){
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: stretch;
  }
  @media (max-width: 900px){
    .team .team__grid:has(.person:nth-child(3)){
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 600px){
    .team .team__grid:has(.person:nth-child(3)){
      grid-template-columns: 1fr;
    }
  }
}
/* === TEAM — Réserver : hairline cuivre animée (comme Contact) === */
.team--wood .person .link-ghost{
  position: relative;
  display: inline-block;
  color: color-mix(in oklab, var(--copper) 84%, #fff);
  text-decoration: none;
  padding-bottom: 2px;                 /* espace pour la ligne */
  transition: color .18s ease, transform .18s ease, opacity .18s ease;
}

/* la ligne qui “pousse” depuis le centre */
.team--wood .person .link-ghost::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;            /* cuivre */
  transform: scaleX(0);
  transform-origin: 50% 50%;           /* depuis le centre */
  transition: transform .28s ease;
  opacity: .95;
}

/* hover/focus: ligne pleine + micro-lift */
.team--wood .person .link-ghost:hover,
.team--wood .person .link-ghost:focus-visible{
  transform: translateY(-1px);
  outline: none;
}
.team--wood .person .link-ghost:hover::after,
.team--wood .person .link-ghost:focus-visible::after{
  transform: scaleX(1);
}

/* motion safety */
@media (prefers-reduced-motion: reduce){
  .team--wood .person .link-ghost,
  .team--wood .person .link-ghost::after{
    transition: none !important;
    transform: none !important;
  }
}
/* === TEAM — Réserver : hairline cuivre animée (final, overrides) === */
.team--wood .person a.cta,
.team--wood .person .link-ghost{
  position: relative;
  display: inline-block;
  color: color-mix(in oklab, var(--copper) 86%, #fff);
  text-decoration: none !important;
  padding-bottom: 2px;                         /* espace pour la ligne */
  transition: color .2s ease, transform .2s ease, opacity .2s ease;
}

/* Ligne qui se déploie (depuis le centre) */
.team--wood .person a.cta::after,
.team--wood .person .link-ghost::after{
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;                    /* cuivre */
  transform: scaleX(0);
  transform-origin: 50% 50%;                   /* centre → full */
  transition: transform .28s ease;
  opacity: .95;
}

/* Hover/focus : cuivre + micro-lift + ligne pleine */
.team--wood .person a.cta:hover,
.team--wood .person a.cta:focus-visible,
.team--wood .person .link-ghost:hover,
.team--wood .person .link-ghost:focus-visible{
  transform: translateY(-1px);
  outline: none;
}
.team--wood .person a.cta:hover::after,
.team--wood .person a.cta:focus-visible::after,
.team--wood .person .link-ghost:hover::after,
.team--wood .person .link-ghost:focus-visible::after{
  transform: scaleX(1);
}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  .team--wood .person a.cta,
  .team--wood .person .link-ghost,
  .team--wood .person a.cta::after,
  .team--wood .person .link-ghost::after{
    transition: none !important;
    transform: none !important;
  }
}
/* === TEAM — INTER LOCK (append at end of team.css) ================= */

/* 0) S'assure que la variable pointe bien vers Inter variable */
:root{
  --font-body: "InterVariable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* 1) Inter partout dans #team (sauf icônes & code) */
#team,
#team :where(*):not(svg):not(i):not([class*="icon"]):not([class*="fa-"]):not(code):not(kbd):not(pre){
  font-family: var(--font-body) !important;
  font-variant-caps: normal !important;
  font-feature-settings: normal !important;
}

/* 2) Titres & textes — poids propres en Inter */
#team .section-head h2{
  font-weight: 800 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.08;
}

#team .person h3{
  font-weight: 700 !important;
  letter-spacing: .02em;
}

#team .person .role{
  font-weight: 600 !important;
  letter-spacing: .02em;
}

#team .person .bio,
#team .section-head p{
  font-weight: 400 !important;
  letter-spacing: .003em;
  line-height: 1.6;
}

/* 3) Liens “ghost/cta” héritent bien d’Inter */
#team .person a,
#team .link-ghost,
#team .person a.cta{
  font-family: inherit !important;
}

/* 4) Mobile: tracking un peu réduit pour la lisibilité */
@media (max-width:640px){
  #team .section-head h2{ letter-spacing: .05em; }
  #team .person h3{ letter-spacing: .015em; }
}

/* ========================================
   🔥 MOBILE SPACING FIX - FINAL OVERRIDE
   MUST BE LAST IN FILE
   ======================================== */
@media (max-width: 768px) {
  .team,
  #team,
  section.team,
  section#team,
  .section-offset,
  #team.section-offset,
  section#team.section-offset {
    padding-top: 180px !important;
  }
}

@media (max-width: 640px) {
  .team,
  #team,
  section.team,
  section#team,
  .section-offset,
  #team.section-offset,
  section#team.section-offset {
    padding-top: 180px !important;
  }
}