/* ============================================================
   EXPERTISES - page liste + page détail d'une expertise
   Chargé sur expertises/index.html et expertises/<slug>.html
   ============================================================ */

/* ============ LISTE ============ */
.exp-layout{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:6rem;align-items:start;
}
.exp-side{position:sticky;top:8.5rem;}
.exp-side h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.6rem, 5vw, 4rem);line-height:1.05;
  color:var(--teal-light);
}
.exp-intro{
  margin-top:1.6rem;
  font-size:1.05rem;font-weight:300;line-height:1.7;
  color:rgba(255,255,255,.8);max-width:44ch;
}
.exp-intro strong{color:#fff;font-weight:400;}

/* Champ « Quel est votre besoin ? » */
.exp-search{
  display:flex;align-items:center;gap:1rem;
  margin-top:3.5rem;padding-bottom:.9rem;
  border-bottom:1px solid rgba(255,255,255,.3);
}
.exp-search input{
  flex:1;min-width:0;background:none;border:none;color:#fff;
  font-family:var(--display);font-weight:300;font-size:1.4rem;
}
.exp-search input:focus{outline:none;}
.exp-search input::placeholder{color:rgba(255,255,255,.45);}
.exp-search svg{width:24px;height:24px;flex-shrink:0;color:rgba(255,255,255,.75);}

/* Liste des expertises et domaines */
.exp-list-label{
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-family:var(--blair);font-weight:300;
  color:rgba(255,255,255,.45);
  margin:2.5rem 0 .5rem;
}
.exp-list-label:first-child{margin-top:0;}
.exp-row{
  display:flex;justify-content:space-between;align-items:center;gap:1.5rem;
  padding:1.35rem 0;
  border-bottom:1px solid rgba(255,255,255,.14);
  transition:padding .35s var(--ease-out), color .25s ease;
}
.exp-row:hover{padding-left:.9rem;color:var(--teal-light);}
.exp-row .name{font-size:1.05rem;font-weight:300;}
.exp-row.is-main .name{font-size:1.3rem;font-weight:400;}
.exp-row .parent{
  flex-shrink:0;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-family:var(--blair);font-weight:300;
  color:rgba(255,255,255,.4);
}
.exp-row[hidden]{display:none;}
.exp-list-label[hidden]{display:none;}
.exp-empty{padding:2rem 0;color:rgba(255,255,255,.6);font-size:.95rem;}
.exp-empty[hidden]{display:none;}

/* ============ DÉTAIL ============ */
.exp-detail-head{margin-bottom:4rem;}
.exp-detail-head .eyebrow{color:rgba(255,255,255,.55);margin-bottom:1rem;}
.exp-detail-head h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.2rem, 4.6vw, 3.6rem);line-height:1.1;
  color:var(--teal-light);max-width:20ch;
}
.exp-detail-grid{
  display:grid;grid-template-columns:220px minmax(0,1fr) 300px;
  gap:4rem;align-items:start;
}

/* Le sommaire latéral (.side-nav) est un composant partagé - voir components.css */

/* Contenu */
.exp-content section{margin-bottom:4rem;scroll-margin-top:8rem;}
.exp-content section:last-child{margin-bottom:0;}
.exp-content h2{
  font-family:var(--serif);font-weight:500;font-size:1.55rem;
  color:#fff;margin-bottom:1.4rem;
}
.exp-content p{
  font-size:1rem;font-weight:300;line-height:1.9;color:rgba(255,255,255,.72);
}
.exp-content p + p{margin-top:1.2rem;}
.exp-content strong{color:#fff;font-weight:400;}
.exp-content em{font-style:italic;color:var(--teal-light);}

.exp-domains{list-style:none;}
.exp-domains li{
  padding:1.05rem 0;
  border-bottom:1px solid rgba(255,255,255,.12);
  font-size:.98rem;font-weight:300;color:rgba(255,255,255,.8);
}
.exp-chips{display:flex;flex-wrap:wrap;gap:.8rem;}

.exp-links{display:flex;flex-direction:column;}
.exp-links a{
  padding:1.1rem 0;border-bottom:1px solid rgba(255,255,255,.12);
  font-size:.98rem;font-weight:300;color:rgba(255,255,255,.8);
  transition:padding .3s var(--ease-out), color .25s ease;
}
.exp-links a:hover{padding-left:.7rem;color:var(--teal-light);}

/* Colonne contacts */
.exp-contacts{
  position:sticky;top:8.5rem;
  border-left:1px solid rgba(255,255,255,.18);
  padding-left:2.5rem;
}
.exp-contacts h2{
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-family:var(--blair);
  color:#fff;margin-bottom:1.8rem;font-weight:300;
}
.exp-contact{display:block;max-width:230px;}
.exp-contact .photo{
  /* height:auto neutralise l'attribut height du <img>, sinon il écrase aspect-ratio */
  display:block;width:100%;height:auto;aspect-ratio:3/4;
  object-fit:cover;object-position:center top;
  clip-path:polygon(18px 0, 100% 0, 100% 100%, 0 100%, 0 18px);
  filter:grayscale(1);
  transition:filter .5s var(--ease-out);
}
.exp-contact:hover .photo{filter:grayscale(0);}
.exp-contact .role{
  margin-top:.7rem;font-size:.8rem;font-weight:300;color:rgba(255,255,255,.6);
}
.exp-contact .name{
  margin-top:.25rem;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;font-family:var(--blair);font-weight:300;
  color:var(--teal-light);transition:opacity .2s;
}
.exp-contact:hover .name{opacity:.7;}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .exp-detail-grid{grid-template-columns:200px minmax(0,1fr);}
  .exp-contacts{
    grid-column:1 / -1;border-left:none;padding-left:0;position:static;
    border-top:1px solid rgba(255,255,255,.18);padding-top:2.5rem;margin-top:1rem;
  }
}
@media (max-width:900px){
  .exp-layout{grid-template-columns:1fr;gap:3rem;}
  .exp-side{position:static;}
  .exp-search{margin-top:2.5rem;}
  .exp-search input{font-size:1.1rem;}
  /* Nom et expertise de rattachement s'empilent : côte à côte, ils
     se réduisent à deux colonnes de texte illisibles. */
  .exp-row{flex-direction:column;align-items:flex-start;gap:.45rem;padding:1.1rem 0;}
  .exp-row .name{font-size:1rem;}
  .exp-row.is-main .name{font-size:1.15rem;}
  .exp-row .parent{font-size:.62rem;}
  .exp-detail-head{margin-bottom:2.5rem;}
  .exp-detail-grid{grid-template-columns:1fr;gap:2.5rem;}
}