/* =====================================================================
   CBS ATELIER — Page À propos. Préfixe .cbs-ap- (about page).
   Plus narratif et asymétrique que les pages produits.
   ===================================================================== */

/* ---- Hero portrait éditorial ------------------------------------- */
.cbs-ap-hero{position:relative;overflow:hidden;background:var(--tint);
  padding:clamp(60px,7vw,110px) 0 clamp(46px,5.5vw,84px)}
.cbs-ap-hero__in{position:relative;display:grid;grid-template-columns:.78fr 1fr;
  gap:clamp(36px,5vw,76px);align-items:center;z-index:1}
.cbs-ap-hero__photo{position:relative}
.cbs-ap-hero__photo img{width:100%;max-width:380px;display:block;border-radius:var(--r-lg);
  box-shadow:var(--sh);background:var(--tint-2)}
.cbs-ap-hero__photo::after{display:none}
.cbs-ap-hero__name{font-family:var(--ff-display);font-size:clamp(2.2rem,1.4rem + 2.8vw,3.6rem);
  font-weight:800;letter-spacing:-.025em;color:var(--ink);margin:.4em 0 .2em;line-height:1.05}
.cbs-ap-hero__role{font-size:1.04rem;color:var(--muted);margin:0 0 1.4rem}
.cbs-ap-hero__lead{font-size:clamp(1.04rem,.95rem + .4vw,1.18rem);color:var(--body);
  max-width:54ch;margin-bottom:2rem;line-height:1.6}
.cbs-ap-hero__quote{position:relative;background:#fff;border-left:4px solid var(--accent);
  padding:24px 28px;border-radius:0 var(--r) var(--r) 0;box-shadow:var(--sh-sm)}
.cbs-ap-hero__quote p{font-family:var(--ff-body);font-weight:500;font-style:italic;
  font-size:clamp(1.15rem,1rem + .55vw,1.45rem);
  line-height:1.5;color:var(--navy);margin:0 0 .4em}
.cbs-ap-hero__quote span{font-size:.88rem;color:var(--muted);font-weight:600;letter-spacing:.02em}

/* ---- Récit / Timeline narrative ---------------------------------- */
.cbs-ap-story{padding:clamp(64px,8vw,116px) 0;background:var(--paper)}
.cbs-ap-story__in{max-width:920px;margin:0 auto}
.cbs-ap-story__intro{max-width:62ch;margin:0 auto 64px;text-align:center;color:var(--body);font-size:1.08rem}
.cbs-ap-timeline{position:relative;display:grid;gap:36px}
.cbs-ap-timeline::before{content:"";position:absolute;left:11px;top:8px;bottom:8px;
  width:2px;background:linear-gradient(180deg,var(--accent),var(--navy));border-radius:2px;opacity:.35}
.cbs-ap-chapter{position:relative;padding-left:54px}
.cbs-ap-chapter::before{content:"";position:absolute;left:0;top:6px;width:24px;height:24px;
  border-radius:50%;background:#fff;border:3px solid var(--accent);box-shadow:0 0 0 4px rgba(232,71,47,.12)}
.cbs-ap-chapter__year{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.cbs-ap-chapter h3{font-size:clamp(1.3rem,1.05rem + .7vw,1.65rem);color:var(--navy);margin:0 0 .55rem;line-height:1.2}
.cbs-ap-chapter p{color:var(--body);font-size:1.02rem;line-height:1.65;margin:0 0 .6rem}
.cbs-ap-chapter p:last-child{margin-bottom:0}

/* ---- Manifeste --------------------------------------------------- */
.cbs-ap-manifesto{padding:clamp(64px,8vw,116px) 0;background:var(--navy);color:#e7ecf6;position:relative;overflow:hidden}
.cbs-ap-manifesto::before{content:"";position:absolute;inset:0;opacity:.4;
  background-image:radial-gradient(rgba(255,255,255,.10) 1.4px,transparent 1.4px);background-size:26px 26px;
  -webkit-mask:radial-gradient(110% 100% at 0% 0%,#000,transparent 65%);
  mask:radial-gradient(110% 100% at 0% 0%,#000,transparent 65%)}
.cbs-ap-manifesto .cbs-wrap{position:relative}
.cbs-ap-manifesto__h{max-width:760px;margin:0 0 56px}
.cbs-ap-manifesto__h .cbs-h2{color:#fff;font-size:clamp(1.9rem,1.2rem + 2.6vw,2.9rem)}
.cbs-ap-manifesto__h p{color:#aebed9;font-size:1.06rem;margin-top:1rem;max-width:60ch}
.cbs-ap-manifesto__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,60px)}
.cbs-ap-mancol h3{display:flex;align-items:center;gap:10px;font-family:var(--ff-display);
  font-size:1.18rem;color:#fff;margin:0 0 1.4rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.cbs-ap-mancol h3 svg{width:22px;height:22px}
.cbs-ap-mancol--pro h3 svg{color:#7fd8e6}
.cbs-ap-mancol--anti h3{color:#ffb8aa}
.cbs-ap-mancol--anti h3 svg{color:var(--accent)}
.cbs-ap-mancol ul{display:grid;gap:14px}
.cbs-ap-mancol li{display:flex;gap:14px;font-size:1.02rem;line-height:1.55;color:#cbd5e6}
.cbs-ap-mancol li::before{content:"";flex:0 0 6px;height:6px;border-radius:50%;background:#7fd8e6;margin-top:11px}
.cbs-ap-mancol--anti li::before{background:var(--accent)}

/* ---- Valeurs ----------------------------------------------------- */
.cbs-ap-values{padding:clamp(64px,8vw,116px) 0;background:var(--tint)}
.cbs-ap-values__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:8px}
.cbs-ap-vcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:38px 34px 36px;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;
  display:flex;flex-direction:column}
.cbs-ap-vcard:hover{transform:translateY(-5px);box-shadow:var(--sh);border-color:transparent}
.cbs-ap-vcard__n{font-family:var(--ff-display);font-size:2.4rem;font-weight:800;color:transparent;
  -webkit-text-stroke:1.5px var(--accent);line-height:1;margin-bottom:1rem}
.cbs-ap-vcard h3{font-size:1.32rem;color:var(--navy);margin:0 0 .6rem}
.cbs-ap-vcard p{color:var(--body);font-size:1rem;line-height:1.6;margin:0}

/* ---- Atelier ----------------------------------------------------- */
.cbs-ap-place{padding:clamp(64px,8vw,116px) 0;background:#fff}
.cbs-ap-place__in{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(38px,5vw,76px);align-items:center}
.cbs-ap-place__photo{position:relative}
.cbs-ap-place__photo .cbs-pp-ph{aspect-ratio:5/4;border-radius:var(--r-lg)}
.cbs-ap-place__photo::after{content:"";position:absolute;bottom:-18px;right:-18px;width:120px;height:120px;
  border:2px solid var(--accent);border-radius:var(--r-lg);z-index:-1;opacity:.7}
.cbs-ap-place__copy h2{font-size:clamp(1.8rem,1.2rem + 2vw,2.7rem);color:var(--navy);margin:0 0 1rem;line-height:1.1}
.cbs-ap-place__copy>p{color:var(--body);font-size:1.06rem;line-height:1.65;margin:0 0 1rem}
.cbs-ap-place__facts{margin:1.6rem 0 0;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.cbs-ap-place__fact{padding:16px 18px;background:var(--tint);border-left:3px solid var(--accent);border-radius:0 var(--r) var(--r) 0}
.cbs-ap-place__fact strong{display:block;font-family:var(--ff-display);font-size:1.32rem;color:var(--navy);margin-bottom:2px}
.cbs-ap-place__fact span{font-size:.88rem;color:var(--muted);font-weight:500;line-height:1.4;display:block}

/* ---- Clients ----------------------------------------------------- */
.cbs-ap-clients{padding:clamp(64px,8vw,116px) 0;background:var(--tint)}
.cbs-ap-clients__intro{text-align:center;max-width:60ch;margin:0 auto 56px;color:var(--body);font-size:1.05rem}
.cbs-ap-clients__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:18px;align-items:center;
  margin-bottom:32px}
.cbs-ap-clients__cell{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:24px 16px;display:grid;place-items:center;height:100px;transition:.25s var(--ease)}
.cbs-ap-clients__cell:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--sh-sm)}
.cbs-ap-clients__cell img{max-height:54px;max-width:100%;width:auto;
  filter:grayscale(1) opacity(.7);transition:.25s var(--ease)}
.cbs-ap-clients__cell:hover img{filter:none}
.cbs-ap-clients__plus{text-align:center;color:var(--muted);font-size:.95rem;font-style:italic}

/* ---- CTA spécifique invitation visite ---------------------------- */
.cbs-ap-cta{padding:clamp(60px,7vw,100px) 0;background:#fff}
.cbs-ap-cta__card{background:linear-gradient(135deg,var(--navy-deep),var(--navy) 55%,var(--navy-2));
  color:#fff;border-radius:var(--r-lg);padding:clamp(40px,5.5vw,72px);text-align:center;position:relative;overflow:hidden;box-shadow:var(--sh)}
.cbs-ap-cta__card::before{content:"";position:absolute;inset:0;opacity:.4;
  background-image:radial-gradient(rgba(255,255,255,.10) 1.4px,transparent 1.4px);background-size:26px 26px;
  -webkit-mask:radial-gradient(120% 100% at 50% 100%,#000,transparent 70%);
  mask:radial-gradient(120% 100% at 50% 100%,#000,transparent 70%)}
.cbs-ap-cta__card>*{position:relative}
.cbs-ap-cta__card h2{font-size:clamp(1.7rem,1.1rem + 2.4vw,2.6rem);color:#fff;margin:0 0 1rem;max-width:24ch;margin-inline:auto}
.cbs-ap-cta__card p{color:#c4cfe4;font-size:1.04rem;max-width:54ch;margin:0 auto 1.6rem}
.cbs-ap-cta__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ====================================================================
   RESPONSIVE
   ==================================================================== */
@media (max-width:980px){
  .cbs-ap-hero__in{grid-template-columns:1fr;gap:30px}
  .cbs-ap-hero__photo{max-width:300px;margin:0 auto}
  .cbs-ap-place__in{grid-template-columns:1fr;gap:30px}
  .cbs-ap-manifesto__grid{grid-template-columns:1fr;gap:34px}
  .cbs-ap-clients__grid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:680px){
  .cbs-ap-values__grid{grid-template-columns:1fr}
  .cbs-ap-place__facts{grid-template-columns:1fr}
  .cbs-ap-clients__grid{grid-template-columns:repeat(3,1fr)}
  .cbs-ap-hero__quote{padding:18px 22px}
}