/* ==========================================================================
   Maxelik, page L'entreprise (notre histoire)
   ========================================================================== */

/* ---------- HERO CLAIR : diptyque des fondateurs ---------- */
.en-hero{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(125deg,#003f8a 0%,#0058b8 38%,#0070dd 72%,#0083FF 100%);color:#eaf4ff;
  min-height:min(640px,calc(100svh - var(--head-top) - var(--head-bar)));display:flex;align-items:center}
.en-hero::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1.2px);background-size:24px 24px;-webkit-mask-image:linear-gradient(90deg,#000,transparent 60%);mask-image:linear-gradient(90deg,#000,transparent 60%)}
.en-hero::after{content:"";position:absolute;z-index:-1;right:-160px;top:-160px;width:660px;height:660px;border-radius:50%;background:radial-gradient(circle,rgba(0,186,255,.45),transparent 65%)}
.en-hero .houle{z-index:-1}
.en-hero h1{color:#fff}
.en-hero .en-lead{color:#eaf4ff}
.en-hero .en-proofs li{color:#e3f0ff}
.en-hero .en-proofs b{color:#fff}
.en-hero .en-proofs .ico .s,.en-hero .en-proofs .ico .a{stroke:#fff}.en-hero .en-proofs .ico .f{fill:#fff}.en-hero .en-proofs .ico .fs{fill:rgba(255,255,255,.16)}
.en-hero .en-proofs .ico circle[fill="#fff"]{fill:#0064c8}
.en-hero .btn-grad{background:#fff;color:var(--slate);box-shadow:0 14px 28px -14px rgba(0,0,0,.45)}
.en-hero .btn-line{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.en-hero .btn-line:hover{color:#fff;box-shadow:inset 0 0 0 1.5px #fff}
.en-hero .en-ring{filter:brightness(0) invert(1);opacity:.14}
.en-hero .en-p{box-shadow:0 34px 70px -30px rgba(0,20,60,.75)}
.en-hero .wrap{padding-block:clamp(20px,3.4svh,40px) calc(clamp(20px,3.4svh,40px) + 30px)}
.en-hero-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,60px);align-items:center;margin-top:clamp(14px,2.4svh,24px)}
.en-lead{font-size:clamp(1rem,.95rem + .25vw,1.13rem);color:var(--ink-2)}
.en-proofs{list-style:none;margin:clamp(16px,2.6svh,24px) 0 0;padding:0;display:grid;gap:10px}
.en-proofs li{display:flex;align-items:center;gap:12px;color:var(--ink-2);font-size:.97rem}
.en-proofs .ico{width:32px;height:32px;flex:none;color:var(--slate)}
.en-proofs b{color:var(--slate)}
.en-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(18px,3svh,28px)}
.en-duo{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;max-width:520px;justify-self:end;width:100%}
.en-p{position:relative;margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;background:var(--soft-b);box-shadow:0 30px 60px -34px rgba(19,40,60,.6)}
.en-p img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;transition:transform 1s var(--ease)}
.en-p:hover img{transform:scale(1.04)}
.en-p2{margin-top:clamp(28px,6svh,56px)}
.en-p1{margin-bottom:clamp(28px,6svh,56px)}
.en-p figcaption{position:absolute;left:10px;right:10px;bottom:10px;padding:10px 12px;border-radius:var(--r);background:rgba(255,255,255,.94);font-size:.84rem;color:var(--ink-2);line-height:1.35}
.en-p figcaption b{display:block;color:var(--slate);font-size:.98rem}
.en-ring{position:absolute;z-index:-1;left:50%;top:50%;width:440px;aspect-ratio:458/414;translate:-50% -50%;background:url(img/maxelik-symbole.svg) no-repeat center/contain;pointer-events:none;opacity:.12}

/* ---------- PARCOURS : carte et trois étapes ---------- */
.en-route{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px);align-items:center}
.en-map{background:var(--soft);border-radius:var(--r);padding:clamp(12px,2vw,24px)}
.pc-map{width:100%;height:auto}
.pc-reg .r{fill:#fff;stroke:#cfdbe6;stroke-width:.5}
.pc-reg .norm{fill:#dcebfb;stroke:#0083FF;stroke-width:.9}
.pc-route{fill:none;stroke:url(#mxGrad);stroke-width:1.8;stroke-linecap:round;stroke-dasharray:3.5 4.5;animation:mxDash 1.6s linear infinite}
@keyframes mxDash{to{stroke-dashoffset:-16}}
.pc-dot{fill:var(--slate)}
.pc-home .pc-dot{fill:var(--blue)}
.pc-rip{fill:none;stroke:var(--blue);stroke-width:.9;opacity:0;animation:pcRip 3s ease-out infinite}
.pc-rip+.pc-rip{animation-delay:1.5s}
@keyframes pcRip{0%{r:4;opacity:.9}100%{r:24;opacity:0}}
.pc-l{font:900 9.5px "Nunito Sans",sans-serif;fill:var(--slate);paint-order:stroke;stroke:#fff;stroke-width:2.4px;stroke-linejoin:round}
.pc-home .pc-l{fill:var(--blue)}
.pc-s{font:700 6.6px "Nunito Sans",sans-serif;fill:var(--ink-2);paint-order:stroke;stroke:#fff;stroke-width:1.8px;stroke-linejoin:round}
.en-steps{display:grid;gap:4px;position:relative}
.en-steps::before{content:"";position:absolute;left:9px;top:14px;bottom:14px;width:2px;background:linear-gradient(#d6e0e6,var(--blue))}
.en-step{position:relative;padding:14px 0 14px 40px}
.en-step::before{content:"";position:absolute;left:2px;top:20px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 3px #c3d0d8}
.en-step-on::before{background:var(--blue);box-shadow:0 0 0 6px rgba(0,131,255,.15)}
.en-k{display:block;font-weight:900;font-size:1.25rem;color:var(--slate)}
.en-step-on .en-k{color:var(--blue)}
.en-step p{margin-top:6px;color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){.pc-route,.pc-rip{animation:none}}

/* ---------- LES FONDATEURS : portraits et citations ---------- */
.en-founders{background:var(--slate);overflow:hidden;isolation:isolate;padding-bottom:clamp(110px,13vw,170px)}
.en-founders .houle{z-index:0}
.en-founders .wrap{position:relative;z-index:1}
.en-f{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(24px,4vw,60px);align-items:center;padding:clamp(18px,2.5vw,28px);border-radius:var(--r);background:rgba(255,255,255,.04)}
.en-f+.en-f{margin-top:18px}
.en-f-alt{grid-template-columns:minmax(0,1fr) minmax(0,340px)}
.en-f-alt figure{order:2}
.en-f figure{margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:4/4.4}
.en-f img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.en-f h3{color:#fff;font-size:clamp(1.5rem,1.2rem + .9vw,2rem)}
.en-role{margin-top:4px;font-weight:800;color:#7fd3ff}
.en-tags{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.en-tags li{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border-radius:999px;background:rgba(0,186,255,.12);color:#cfeeff;font-size:.86rem;font-weight:700}
.en-tags .ico{width:22px;height:22px}
.en-tags .ico .s{stroke:#e9f0f3}.en-tags .ico .fs{fill:rgba(255,255,255,.1)}
.en-f blockquote{position:relative;margin:22px 0 0;padding-left:46px;color:#e6edf0;font-size:clamp(1.08rem,1rem + .35vw,1.28rem);line-height:1.6;font-weight:600}
.en-f blockquote svg{position:absolute;left:0;top:4px;width:30px;height:30px}
.en-both{margin-top:24px;color:#c3d0d6;font-size:1.05rem;max-width:85%}

/* ---------- CE QUI NOUS DISTINGUE : colonne collante et liste numérotée ---------- */
.en-dist{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,4vw,64px);align-items:start}
.en-dist-side{position:sticky;top:calc(var(--head-bar) + 24px);display:grid;gap:18px}
.en-dist-side>p{color:var(--ink-2);font-size:1.05rem}
.en-addr{display:grid;gap:8px;padding:22px;border-radius:var(--r);background:var(--slate);color:#c8d3d9}
.en-addr .ico{width:44px;height:44px}
.en-addr .ico .s{stroke:#e9f0f3}.en-addr .ico .fs{fill:rgba(255,255,255,.1)}
.en-addr b{display:block;color:#fff;font-size:1.05rem}
.en-addr a{color:#fff;font-weight:800;text-decoration:none}
.en-addr .lnk{color:#7fd3ff}
.en-list{list-style:none;margin:0;padding:0;counter-reset:en;border-top:2px solid var(--slate)}
.en-list li{counter-increment:en;display:grid;grid-template-columns:64px minmax(0,1fr);gap:4px 18px;padding:22px 0;border-bottom:1px solid #dbe4ea}
.en-list li::before{content:counter(en,decimal-leading-zero);grid-row:span 2;font-size:2rem;font-weight:900;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.en-list h3{font-size:1.18rem}
.en-list p{color:var(--ink-2)}

/* ---------- NOS EXPERTISES ---------- */
.en-exps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.en-exp{display:flex;flex-direction:column;gap:10px;padding:26px;border-radius:var(--r);background:var(--soft);color:var(--ink);text-decoration:none;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background-color .35s}
.en-exp:hover{transform:translateY(-4px);background:#fff;box-shadow:var(--shadow)}
.en-exp .ico{width:52px;height:52px;color:var(--slate)}
.en-exp h3{font-size:1.2rem}
.en-exp p{color:var(--ink-2);font-size:.96rem}
.en-exp .lnk{margin-top:auto}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1100px){
  .en-route,.en-dist{grid-template-columns:1fr}
  .en-dist-side{position:static}
  .en-exps{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .en-hero{min-height:0;background:linear-gradient(165deg,#003a80 0%,#0052ad 55%,#0062c4 100%)}
  .en-hero::after{opacity:.5}
  .en-hero-row{grid-template-columns:1fr}
  .en-duo{justify-self:start;max-width:360px;gap:12px}
  .en-p{aspect-ratio:1/1.05}
  .en-p1,.en-p2{margin:0}
  .en-p figcaption{font-size:.76rem;padding:7px 9px}
  .en-p figcaption b{font-size:.86rem}
  .en-proofs{gap:6px}
  .en-proofs li{font-size:.92rem}
  .en-hero .wrap{padding-block:22px 28px}
  .en-acts .btn-line{display:none}
  .en-acts{margin-top:16px}
  .en-f,.en-f-alt{grid-template-columns:1fr}
  .en-f-alt figure{order:0}
  .en-f figure{max-width:320px}
  .en-both{max-width:none}
}
@media (max-width:640px){
  .en-exps{grid-template-columns:1fr}
  .en-ring{display:none}
  .en-list li{grid-template-columns:48px minmax(0,1fr)}
  .en-list li::before{font-size:1.6rem}
}
