/* ============================================================
   ABOUT AGENCY — Page Styles 2026
   ============================================================ */

/* ---- Full-bleed hero ---- */
.hero-full{position:relative;min-height:clamp(420px,55vw,680px);display:flex;align-items:center;overflow:hidden}
.hero-full-bg{position:absolute;inset:0;z-index:0}
.hero-full-bg img{width:100%;height:100%;object-fit:cover;object-position:top}
.hero-full-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(6,10,16,0.82) 0%,rgba(6,10,16,0.55) 50%,rgba(6,10,16,0.3) 100%)}
.hero-full-content{position:relative;z-index:2;max-width:55%;padding:var(--section-pad) 0}
.hero-full-content h1{margin-bottom:18px}
.hero-full-content .lead{margin-bottom:24px}
.hero-full-content .hero-actions{display:flex;flex-wrap:wrap;gap:12px}

/* Ambient glow */
.hero-full::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(ellipse 40% 50% at 75% 30%,rgba(142,197,255,0.05),transparent)}

/* ---- Page hero (subpages) ---- */
.page-hero{position:relative;min-height:clamp(360px,45vw,560px);display:flex;align-items:center;overflow:hidden}

/* ---- Media frames ---- */
.media-frame{position:relative;overflow:hidden;border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,0.08);box-shadow:var(--shadow-soft);background:linear-gradient(135deg,rgba(255,255,255,0.03),rgba(255,255,255,0.01))}
.media-frame img{width:100%;height:100%;display:block;object-fit:cover;transition:transform 600ms var(--ease-out)}
.media-frame:hover img{transform:scale(1.03)}

/* Image + floating glass blocks */
.image-with-floats{position:relative;min-height:clamp(300px,40vw,480px);overflow:hidden;border-radius:var(--radius-lg)}
.image-with-floats .iwf-bg{position:absolute;inset:0}
.image-with-floats .iwf-bg img{width:100%;height:100%;object-fit:cover}
.image-with-floats .iwf-overlay{position:absolute;inset:0;background:rgba(6,10,16,.85)}
.image-with-floats .iwf-floats{position:relative;z-index:2;padding:24px;display:flex;flex-direction:column;gap:10px;max-width:50%}
.glass-float{background:rgba(6,10,16,0.72);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.07);border-radius:var(--radius-sm);padding:16px}
.glass-float h4{font-size:0.78rem;color:var(--accent);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:6px;font-weight:600}
.glass-float p{font-size:0.88rem}

.card-grid-auto {
  width: min(1300px, calc(100vw - 48px));
  margin: 0 auto;
}

.ethic-card2 ol li {
  font-size: 1.3rem;
}

.iwf-cards {
  max-width: 680px;
  margin: 0 auto;
}


/* ---- Showcase grid ---- */
.showcase-grid{display:grid;grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr);gap:28px;align-items:stretch}
.showcase-copy,.showcase-media{position:relative;z-index:1}

/* ---- Team ---- */
.team-avatar{overflow:hidden;border-radius:var(--radius-md);border:1px solid rgba(255,255,255,0.08);margin:-4px -4px 16px}
.team-avatar img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 600ms var(--ease-out)}
.team-card:hover .team-avatar img{transform:scale(1.04)}
.team-role{display:inline-block;margin-bottom:10px;color:var(--accent);text-transform:uppercase;letter-spacing:0.18em;font-size:0.73rem;font-weight:500}

/* ---- Note chip ---- */
.note-chip{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border-radius:var(--radius-pill);border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.03);color:var(--text-soft);font-size:0.88rem}
.note-chip-wrap{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}

/* ---- Article body ---- */
.article-body{display:grid;gap:24px}
.article-body h2{margin-top:12px;font-size:clamp(1.3rem,2.5vw,1.8rem)}
.article-body p{font-size:1rem;line-height:1.78;color:var(--text)}
.article-body ol{font-size:0.95rem;line-height:1.72;padding-left:1.4rem;color:var(--text-soft)}
.article-body ol li{margin-bottom:4px}
.article-body strong{color:var(--text)}

[data-page="ressources"] .page-hero h1{text-shadow:0 2px 24px rgba(0,0,0,0.55)}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:1080px){
  .showcase-grid{grid-template-columns:1fr}
  .hero-full-content{max-width:70%}
  .image-with-floats .iwf-floats{max-width:65%}
}
@media(max-width:760px){
  .hero-full{min-height:clamp(360px,70vw,480px)}
  .hero-full-content{max-width:90%}
  .hero-full-overlay{background:linear-gradient(180deg,rgba(6,10,16,0.85) 0%,rgba(6,10,16,0.5) 100%)}
  .image-with-floats .iwf-floats{max-width:100%}
  .image-with-floats{min-height:auto}
}