/* about-page.css — À propos page (reuses styles.css tokens & vocabulary) */

/* ---------- compact page hero (shared dot-grid vocabulary) ---------- */
.page-hero{position:relative;padding:120px 0 60px;overflow:hidden;text-align:center}
.page-hero .hero-bg{position:absolute;inset:0;z-index:-1}
.page-hero .hero-bg::before{content:'';position:absolute;top:-300px;left:50%;transform:translateX(-50%);
  width:1000px;height:700px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(107,124,255,.2),rgba(60,80,224,.05) 55%,transparent 72%)}
.page-hero .dots{position:absolute;inset:0;
  background-image:radial-gradient(circle at center,rgba(15,23,41,.07) 1.3px,transparent 1.5px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 0%,#000,transparent 78%);
          mask-image:radial-gradient(ellipse 80% 70% at 50% 0%,#000,transparent 78%)}
.page-hero h1{font-size:clamp(2.2rem,5vw,3.5rem);font-weight:800;letter-spacing:-.035em;max-width:19ch;margin:18px auto}
.page-hero .lead{max-width:640px;margin:0 auto}
.page-hero .grad{background:linear-gradient(110deg,var(--primary),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- notre histoire (two-column) ---------- */
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.story-copy .eyebrow{margin-bottom:14px}
.story-copy h2{margin-bottom:20px}
.story-copy p{font-size:15.5px;color:var(--muted);line-height:1.7;margin-bottom:16px}
.story-copy p b{color:var(--ink);font-weight:700}
.story-copy p:last-child{margin-bottom:0}

/* before / after visual */
.story-visual{position:relative}
.ba{display:flex;flex-direction:column;gap:14px;position:relative;z-index:1}
.ba-card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:22px 22px 20px;
  transition:transform .25s ease,box-shadow .25s ease}
.ba-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.ba-head{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.ba-tag{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:4px 10px;border-radius:999px}
.ba-card.before .ba-tag{background:#fff1f1;color:#e5484d}
.ba-card.after .ba-tag{background:rgba(60,80,224,.1);color:var(--primary)}
.ba-head .ba-line{flex:1;height:1px;background:var(--line)}
.ba-chips{display:flex;flex-wrap:wrap;gap:9px}
.ba-chip{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text);
  background:var(--bg-alt);border:1px solid var(--line);border-radius:10px;padding:9px 12px}
.ba-chip svg{width:16px;height:16px;color:#94a3b8}
.ba-card.before .ba-chip{transform:rotate(var(--r,0deg))}
.ba-card.before .ba-chip:nth-child(1){--r:-1.4deg}
.ba-card.before .ba-chip:nth-child(2){--r:1.2deg}
.ba-card.before .ba-chip:nth-child(3){--r:-.8deg}
.ba-card.before .ba-chip:nth-child(4){--r:1.6deg}
.ba-card.after{background:linear-gradient(165deg,#fff,#f6f8ff);border-color:#dde3f7}
.ba-rows{display:flex;flex-direction:column;gap:8px}
.ba-row{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:10px 12px}
.ba-row .ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:none;
  background:linear-gradient(160deg,#eef1fe,#e3e8fd);color:var(--primary)}
.ba-row .ic svg{width:17px;height:17px}
.ba-row b{font-size:13.5px;font-weight:700;color:var(--ink)}
.ba-row .chk{margin-left:auto;color:#16a34a;display:flex}
.ba-row .chk svg{width:18px;height:18px;stroke-width:2.6}
.ba-arrow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(90deg);z-index:2;
  width:42px;height:42px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;
  box-shadow:0 12px 26px -8px rgba(60,80,224,.7);border:3px solid #fff}
.ba-arrow svg{width:20px;height:20px}

/* ---------- mission ---------- */
.mission-statement{max-width:880px;margin:0 auto 56px;text-align:center}
.mission-statement .eyebrow{margin-bottom:22px}
.mission-statement p{font-size:clamp(1.5rem,3.2vw,2.25rem);font-weight:700;line-height:1.4;letter-spacing:-.02em;
  color:var(--ink);text-wrap:balance}
.mission-statement .mk{color:var(--primary)}
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.value-card{padding:32px 28px;border-radius:var(--radius);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:transform .2s,box-shadow .2s,border-color .2s}
.value-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#d7ddec}
.value-ic{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;margin-bottom:20px;
  background:linear-gradient(150deg,var(--accent),var(--primary));color:#fff;box-shadow:0 12px 28px -10px rgba(60,80,224,.6)}
.value-ic svg{width:26px;height:26px}
.value-card h3{font-size:19px;margin-bottom:9px}
.value-card p{font-size:14.5px;color:var(--muted);line-height:1.6}

/* ---------- stats strip (dark) ---------- */
.stats{background:var(--dark);color:#cbd5e1;padding:84px 0;position:relative;overflow:hidden}
.stats::before{content:'';position:absolute;top:-180px;left:50%;transform:translateX(-50%);width:760px;height:520px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(107,124,255,.28),transparent 70%);filter:blur(16px)}
.stats .wrap{position:relative;z-index:1}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stat-block{text-align:center;padding:0 10px;position:relative}
.stat-block:not(:last-child)::after{content:'';position:absolute;right:-12px;top:14%;bottom:14%;width:1px;background:rgba(255,255,255,.1)}
.stat-num{font-size:clamp(2.4rem,4.5vw,3.4rem);font-weight:800;letter-spacing:-.03em;line-height:1;
  background:linear-gradient(180deg,#fff,#c7d2fe);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-lab{font-size:14px;color:#94a3b8;font-weight:500;margin-top:12px}

/* ---------- trust ---------- */
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.trust-card{padding:32px 28px;border-radius:var(--radius);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:transform .2s,box-shadow .2s,border-color .2s}
.trust-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#d7ddec}
.trust-ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:18px;
  background:linear-gradient(160deg,#eef1fe,#e3e8fd);color:var(--primary)}
.trust-ic svg{width:25px;height:25px}
.trust-card h3{font-size:18px;margin-bottom:9px}
.trust-card p{font-size:14.5px;color:var(--muted);line-height:1.6}

/* ---------- made in morocco band ---------- */
.mim{padding:30px 0 96px}
.mim-band{max-width:720px;margin:0 auto;text-align:center;background:linear-gradient(165deg,#fff,#f6f8ff);
  border:1px solid #dde3f7;border-radius:24px;padding:48px 40px;position:relative;overflow:hidden;box-shadow:var(--shadow-sm)}
.mim-zellige{position:absolute;width:160px;height:160px;opacity:.06;color:var(--primary)}
.mim-zellige.z1{top:-44px;left:-40px;transform:rotate(12deg)}
.mim-zellige.z2{bottom:-50px;right:-44px;transform:rotate(-18deg)}
.mim-star{display:inline-grid;place-items:center;width:60px;height:60px;margin:0 auto 20px;color:var(--primary)}
.mim-band p{font-size:clamp(1.15rem,2.2vw,1.5rem);font-weight:700;color:var(--ink);letter-spacing:-.015em;position:relative;z-index:1;text-wrap:balance}
.mim-band .flag{margin-left:6px}
.mim-sub{font-size:14.5px;color:var(--muted);font-weight:500;margin-top:12px;position:relative;z-index:1}

/* ---------- responsive ---------- */
@media(max-width:920px){
  .story-grid{grid-template-columns:1fr;gap:42px}
  .value-grid,.trust-grid{grid-template-columns:repeat(2,1fr)}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:36px 24px}
  .stat-block:not(:last-child)::after{display:none}
  .stat-block:nth-child(odd)::after{content:'';display:block;right:-12px;top:14%;bottom:14%}
  .page-hero{padding:104px 0 50px}
}
@media(max-width:680px){
  .value-grid,.trust-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto}
  .stats-grid{grid-template-columns:1fr;gap:32px}
  .stat-block::after{display:none!important}
  .mim-band{padding:38px 26px}
}