/* ============ ABOUT (Ayoub) ============ */
.about{position:relative;padding:clamp(4rem,9vw,7rem) 0;background:#fff;overflow:hidden}
.about__wm{position:absolute;right:-2%;top:6%;font-family:var(--font-display);font-weight:900;font-size:clamp(7rem,22vw,20rem);
  color:var(--navy);opacity:.035;line-height:.8;pointer-events:none;letter-spacing:-.03em}
.about__inner{position:relative;max-width:1180px;margin:0 auto;padding:0 clamp(1.2rem,5vw,3rem);
  display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.about__media{position:relative}
.about__media::before{content:'';position:absolute;inset:18px -18px -18px 18px;border:2px solid var(--blue);border-radius:22px;z-index:0;
  opacity:0;transform:translate(14px,14px);transition:.8s var(--ease) .2s}
.about.in .about__media::before{opacity:.9;transform:none}
.about__photo{position:relative;z-index:1;border-radius:20px;overflow:hidden;aspect-ratio:4/5;box-shadow:0 30px 70px -28px rgba(0,0,60,.45);
  clip-path:inset(0 0 100% 0)}
.about.in .about__photo{animation:revealUp 1s var(--ease) .15s forwards}
@keyframes revealUp{to{clip-path:inset(0 0 0 0)}}
.about__photo img{width:100%;height:100%;object-fit:cover}
.about__badge{position:absolute;z-index:2;left:-16px;bottom:26px;background:var(--blue);color:#fff;border-radius:16px;
  padding:12px 18px;box-shadow:0 16px 36px rgba(50,50,255,.35);opacity:0;transform:scale(.8);transition:.5s var(--ease) .7s}
.about.in .about__badge{opacity:1;transform:none}
.about__badge b{display:block;font-family:var(--font-display);font-size:1.5rem;line-height:1}
.about__badge span{font-size:11px;opacity:.85;text-transform:uppercase;letter-spacing:.06em}
.about__caption{position:absolute;z-index:2;right:-10px;top:24px;background:#fff;border-radius:14px;padding:10px 16px;box-shadow:0 14px 34px rgba(0,0,40,.18);opacity:0;transition:.5s var(--ease) .85s}
.about.in .about__caption{opacity:1}
.about__caption b{display:block;font-family:var(--font-display);color:var(--navy);font-size:.95rem}
.about__caption span{font-size:11px;color:var(--muted)}
.about__text>*{opacity:0;transform:translateY(18px);transition:.7s var(--ease)}
.about.in .about__text>*{opacity:1;transform:none}
.about.in .about__text>*:nth-child(1){transition-delay:.15s}
.about.in .about__text>*:nth-child(2){transition-delay:.25s}
.about.in .about__text>*:nth-child(3){transition-delay:.35s}
.about.in .about__text>*:nth-child(4){transition-delay:.45s}
.about.in .about__text>*:nth-child(5){transition-delay:.55s}
.about__eyebrow{font-family:var(--font-serif);font-style:italic;color:var(--blue);font-size:1.05rem;margin-bottom:.4rem}
.about__title{font-size:clamp(2rem,4vw,3rem);color:var(--navy);margin-bottom:1.1rem}
.about__title em{font-style:italic;font-family:var(--font-serif);font-weight:400;color:var(--blue)}
.about__quote{position:relative;font-family:var(--font-serif);font-style:italic;font-size:clamp(1.1rem,1.8vw,1.4rem);
  color:var(--ink);line-height:1.55;padding-left:22px;border-left:3px solid var(--orange);margin-bottom:1.3rem}
.about__bio p{color:var(--muted);margin-bottom:.8rem;max-width:54ch}
.about__bio strong{color:var(--ink)}
.about__facts{display:flex;flex-wrap:wrap;gap:10px;margin:1.4rem 0}
.about__chip{display:inline-flex;align-items:center;gap:7px;background:var(--bg);border:1px solid rgba(0,0,0,.07);
  border-radius:30px;padding:8px 15px;font-size:13px;font-weight:600;color:var(--navy)}
.about__chip::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--blue)}
.about__values{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:1.8rem;border-top:1px solid rgba(0,0,0,.08);padding-top:1.8rem}
.about__val .n{font-family:var(--font-display);font-weight:800;color:var(--orange);font-size:1.15rem;letter-spacing:.05em;margin-bottom:6px}
.about__val h4{font-family:var(--font-display);color:var(--navy);font-size:1.25rem;margin-bottom:6px}
.about__val p{font-size:15px;color:var(--muted);line-height:1.55}
@media(max-width:820px){.about__inner{grid-template-columns:1fr}.about__media{max-width:420px;margin:0 auto}.about__values{grid-template-columns:1fr;gap:12px}}
.about__timeline{display:none;grid-template-columns:repeat(4,1fr);gap:0;margin-top:1.6rem;border-top:1px solid rgba(0,0,0,.08);padding-top:1.6rem}
.tl{position:relative;padding:0 14px 0 0}
.tl::before{content:'';position:absolute;left:0;top:-1.6rem;width:10px;height:10px;border-radius:50%;background:var(--blue);transform:translateY(-50%)}
.tl::after{content:'';position:absolute;left:10px;top:calc(-1.6rem - 1px);right:0;height:2px;background:rgba(0,0,0,.1)}
.tl:last-child::after{display:none}
.tl__y{display:block;font-family:var(--font-display);font-weight:800;color:var(--orange);font-size:.8rem;letter-spacing:.05em;margin-bottom:4px}
.tl__t{font-size:13px;color:var(--ink)}

/* Variante 2 : éditorial */
.about[data-v="editorial"] .about__inner{grid-template-columns:1.25fr .85fr}
.about[data-v="editorial"] .about__media{order:2}
.about[data-v="editorial"] .about__title{font-size:clamp(2.4rem,5vw,4rem)}
.about[data-v="editorial"] .about__caption{display:none}
.about[data-v="editorial"] .about__values{display:none}
.about[data-v="editorial"] .about__facts{display:none}
.about[data-v="editorial"] .about__timeline{display:grid}
.about[data-v="editorial"] .about__media::before{inset:18px 18px -18px -18px;border-color:var(--orange)}
@media(max-width:820px){.about[data-v="editorial"] .about__inner{grid-template-columns:1fr}.about__timeline{grid-template-columns:1fr 1fr;gap:1.4rem 0}}

/* Variante 3 : immersif marine */
.about[data-v="immersive"]{background:linear-gradient(135deg,var(--navy) 0%,#1a1ab0 100%)}
.about[data-v="immersive"] .about__wm{color:#fff;opacity:.06}
.about[data-v="immersive"] .about__eyebrow{color:var(--sky)}
.about[data-v="immersive"] .about__title{color:#fff}
.about[data-v="immersive"] .about__title em{color:var(--sky)}
.about[data-v="immersive"] .about__quote{color:#fff}
.about[data-v="immersive"] .about__bio p{color:rgba(255,255,255,.8)}
.about[data-v="immersive"] .about__bio strong{color:#fff}
.about[data-v="immersive"] .about__media::before{border-color:var(--sky)}
.about[data-v="immersive"] .about__chip{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff}
.about[data-v="immersive"] .about__values{border-top-color:rgba(255,255,255,.15)}
.about[data-v="immersive"] .about__val h4{color:#fff}
.about[data-v="immersive"] .about__val p{color:rgba(255,255,255,.7)}
.about[data-v="immersive"] .about__caption b{color:var(--navy)}