/* alicog-home.css · ALICOG · NovaSiteWeb · 2026 */


/* ══════════════════════════════════════════════════════════
   HOMEPAGE ALICOG — MOBILE FIRST
   Base = 320px → 640px → 1024px → 1280px
   ══════════════════════════════════════════════════════════ */

.hp { all: unset; display: block; }
.hp *, .hp *::before, .hp *::after { box-sizing: border-box; margin: 0; padding: 0; }
.hp {
  /* Variables sémantiques (mode sombre par défaut) — doivent être ici aussi car .hp n'hérite pas de .pg */
  --c-bg:#080C14; --c-bg-2:#0A0F1C; --c-bg-soft:#0F1520;
  --c-surface:#0F1520; --c-surface-soft:#111A2B;
  --c-border:#1A2540; --c-border-soft:#1A2540;
  --c-text:#FFFFFF; --c-text-inv:#FFFFFF; --c-text-2:#C6D3E6;
  --c-text-muted:#A4B5CE; --c-text-soft:#A4B5CE;
  --c-on-dark:#C6D3E6; --c-on-dark-2:#A4B5CE;
  --ink:   var(--c-bg); --deep:  var(--c-surface); --slate: var(--c-border);
  --steel: var(--c-text-muted); --muted: var(--c-text-soft);
  --blue:  #1B72BE; --gold:  #1B72BE; --teal:  #1B72BE;
  --sand:  var(--c-bg-soft); --sand2: var(--c-border-soft); --white: var(--c-text-inv);
  --f-d: 'Montserrat', sans-serif;
  --f-t: 'Montserrat', sans-serif;
  --f-b: 'Montserrat', sans-serif;
}

/* ── HERO ─────────────────────────────────────────────── */
.hp__hero {
  background: var(--ink);
  padding: 56px 20px 48px;
  border-bottom: 1px solid var(--slate);
  position: relative; overflow: hidden;
}
.hp__hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 80% 20%, rgba(27,114,190,.06) 0%, transparent 70%);
}
.hp__hero-inner { position: relative; z-index: 1; }

.hp__tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-b); font-size: .65rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 20px;
}
.hp__tag::before{display:none}

.hp__h1 {
  font-family: var(--f-d);
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  font-weight: 800; line-height: 1.02; letter-spacing: -.025em;
  color: var(--c-text); margin-bottom: 6px;
}
.hp__h1b {
  font-family: var(--f-d);
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  font-weight: 800; line-height: 1.05; letter-spacing: -.025em;
  color: var(--blue); margin-bottom: 24px;
}
.hp__sub {
  font-family: var(--f-b); font-size: .96rem;
  color: var(--c-text-2); line-height: 1.8; font-weight: 400;
  margin-bottom: 28px;
}
.hp__sub strong { color: var(--c-text); font-weight: 600; }

.hp__btns { display: flex; flex-direction: column; gap: 10px; margin-bottom: 36px; }
.hp-bp {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--blue); color: var(--c-text); border: none;
  padding: 14px 20px; border-radius: 3px;
  font-family: var(--f-t); font-size: .88rem; font-weight: 700;
  text-decoration: none; transition: all .2s;
}
.hp-bp:hover { background: var(--c-text-inv); color: #0F1B2D; }
.hp-bg {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: transparent; color: var(--c-text);
  border: 1px solid var(--slate); padding: 14px 20px; border-radius: 3px;
  font-family: var(--f-b); font-size: .88rem;
  text-decoration: none; transition: all .2s;
}
.hp-bg:hover { border-color: rgba(255,255,255,.3); }

/* Stats — 2 col mobile */
.hp__stats {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--slate);
  border-left: 1px solid var(--slate);
}
.hp__stat {
  padding: 16px 14px;
  border-right: 1px solid var(--slate);
  border-bottom: 1px solid var(--slate);
}
.hp__stat-v {
  font-family: var(--f-t); font-size: 1.6rem; font-weight: 800;
  color: var(--c-text); line-height: 1; letter-spacing: -.04em;
}
.hp__stat-v span { color: var(--blue); }
.hp__stat-l { font-family: var(--f-b); font-size: .66rem; color: var(--muted); margin-top: 4px; line-height: 1.4; }

/* Hero visual — caché mobile */
.hp__hero-visual { display: none; }

/* ── 6 EXPERTISES ─────────────────────────────────────── */
.hp__exp {
  background: var(--sand);
  padding: 56px 20px;
  border-bottom: 1px solid var(--sand2);
}
.hp__exp-hdr { margin-bottom: 32px; }
.hp__ey {
  display: flex; align-items: center; gap:0;
  font-family: var(--f-b); font-size: .65rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; margin-bottom: 10px;
}
.hp__ey-line{display:none}
.hp__ey-g { color: var(--gold); }
.hp__ey-b { color: var(--blue); }
.hp__h2 {
  font-family: var(--f-d);
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  font-weight: 800; line-height: 1.1; letter-spacing: -.015em;
}
.hp__h2-l { color: var(--c-text); }
.hp__h2-d { color: var(--c-text); }

.hp__appr-intro {
  font-family: var(--f-b); font-size: .9rem;
  color: var(--steel); line-height: 1.7; font-weight: 300;
  max-width: 640px; margin-top: 14px; margin-bottom: 32px;
}

.hp__h2 em { font-style: normal; font-weight: 800; color: var(--blue); }
.hp__sec-lnk {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-b); font-size: .82rem; font-weight: 500;
  color: var(--blue); text-decoration: none; margin-top: 12px;
  transition: gap .2s;
}
.hp__sec-lnk:hover { gap: 10px; }
.hp__sec-lnk svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }

/* Grid expertises — 1 col mobile */
.hp__grid6 { display: flex; flex-direction: column; gap: 1px; background: var(--sand2); border: 1px solid var(--sand2); border-radius: 4px; overflow: hidden; margin-bottom: 28px; }
.hp__card {
  background: var(--c-bg-2); padding: 22px 20px;
  transition: background .2s; position: relative;
}
.hp__card:hover { background: var(--sand); }
.hp__card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .3s;
}
.hp__card:hover::before { transform: scaleX(1); }
.hp__card-ico {
  width: 44px; height: 44px; border-radius: 9px;
  background: rgba(27,114,190,.08); border: 1px solid rgba(27,114,190,.15);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px; color: var(--blue);
}
.hp__card-ico svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.5; fill: none; }
.hp__card-title { font-family: var(--f-t); font-size: .8rem; font-weight: 800; color: var(--c-text); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .03em; line-height: 1.3; }
.hp__card-desc { font-family: var(--f-b); font-size: .76rem; color: var(--c-text-soft); line-height: 1.65; }

/* Bandeau tagline */
.hp__band {
  background: var(--ink); border-radius: 4px;
  padding: 22px 20px; display: flex; flex-direction: column; gap: 16px;
}
.hp__band-text { font-family: var(--f-d); font-size: 1.1rem; font-style: italic; color: var(--c-text); line-height: 1.3; }
.hp__band-text em { color: var(--gold); font-style: normal; }
.hp__band-sub { font-family: var(--f-b); font-size: .78rem; color: var(--steel); margin-top: 4px; }
.hp__band-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--blue); color: var(--c-text); border: none;
  padding: 12px 18px; border-radius: 3px;
  font-family: var(--f-t); font-size: .82rem; font-weight: 700;
  text-decoration: none; transition: all .2s; align-self: flex-start;
}
.hp__band-btn:hover { background: var(--c-text-inv); color: #0F1B2D; }

/* ── APPROCHE ─────────────────────────────────────────── */
.hp__appr {
  background: var(--ink);
  padding: 56px 20px;
  border-top: 1px solid var(--slate);
  border-bottom: 1px solid var(--slate);
}
/* Steps — 1 col mobile */
.hp__steps { display: flex; flex-direction: column; gap: 16px; margin-top: 36px; }
.hp__step { text-align: center; }
.hp__step-num {
  width: 48px; height: 48px; border-radius: 50%;
  border: 2px solid var(--blue); display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px; font-family: var(--f-t); font-size: .88rem; font-weight: 800;
  color: var(--blue); background: var(--ink); transition: all .3s;
}
.hp__step:hover .hp__step-num { background: var(--blue); color: var(--white); }
.hp__step-ico {
  width: 48px; height: 48px; border-radius: 9px;
  background: rgba(27,114,190,.06); border: 1px solid rgba(27,114,190,.15);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px; color: var(--blue);
}
.hp__step-ico svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.5; fill: none; }
.hp__step-title { font-family: var(--f-t); font-size: .8rem; font-weight: 800; color: var(--c-text); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .05em; }
.hp__step-desc { font-family: var(--f-b); font-size: .76rem; color: var(--steel); line-height: 1.65; }

/* ── POURQUOI ─────────────────────────────────────────── */
.hp__why { background: var(--sand); padding: 56px 20px; border-bottom: 1px solid var(--sand2); }
.hp__reasons { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
.hp__reason {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; background: var(--c-bg-2);
  border: 1px solid var(--sand2); border-radius: 4px; transition: all .2s;
}
.hp__reason:hover { border-color: var(--blue); transform: translateX(3px); }
.hp__reason-ico {
  width: 32px; height: 32px; border-radius: 6px;
  background: rgba(27,114,190,.08); border: 1px solid rgba(27,114,190,.15);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--blue);
}
.hp__reason-ico svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.5; fill: none; }
.hp__reason-text { font-family: var(--f-b); font-size: .82rem; color: var(--c-text-muted); line-height: 1.55; }
.hp__reason-text strong { color: var(--c-text); font-weight: 600; }

/* Fondateur */
.hp__founder { margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--sand2); }
.hp__why-quote {
  font-family: var(--f-d); font-size: 1.1rem; font-style: italic;
  color: var(--c-text); line-height: 1.45; margin-bottom: 20px;
  padding-left: 16px; border-left: 3px solid var(--blue);
}
.hp__why-quote em { color: var(--blue); font-style: normal; }
.hp__founder-name { font-family: var(--f-d); font-size: 1.6rem; font-weight: 400; line-height: 1.1; color: var(--c-text); margin-bottom: 5px; }
.hp__founder-name span { color: var(--blue); font-style: italic; }
.hp__founder-sub { font-family: var(--f-b); font-size: .8rem; color: var(--c-text-soft); line-height: 1.65; margin-bottom: 16px; }
.hp__founder-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-b); font-size: .82rem; font-weight: 600;
  color: var(--blue); text-decoration: none; transition: gap .2s;
}
.hp__founder-link:hover { gap: 11px; }
.hp__founder-link svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 2; fill: none; }

/* ── CTA ──────────────────────────────────────────────── */
.hp__cta { background: var(--ink); padding: 56px 20px; text-align: center; border-top: 1px solid var(--slate); }
.hp__cta-lbl {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--f-b); font-size: .65rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px;
}
.hp__cta-lbl::before,.hp__cta-lbl::after { content: ""; display: block; width: 22px; height: 1px; background: var(--slate); }
.hp__cta-title {
  font-family: var(--f-d); font-size: clamp(1.7rem, 4.5vw, 3rem);
  font-weight: 800; line-height: 1.05; color: var(--c-text);
  margin-bottom: 14px; letter-spacing: -.025em;
}
.hp__cta-title em { font-style: normal; font-weight: 800; color: var(--blue); }
.hp__cta-sub { font-family: var(--f-b); font-size: .88rem; color: var(--muted); line-height: 1.72; margin-bottom: 28px; font-weight: 300; }
.hp__cta-btns { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.hp-bpd {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--blue); color: var(--c-text); border: none;
  padding: 14px 24px; border-radius: 3px;
  font-family: var(--f-t); font-size: .9rem; font-weight: 700;
  text-decoration: none; transition: all .2s;
}
.hp-bpd:hover { background: var(--c-text-inv); color: #0F1B2D; }
.hp-bgd {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: transparent; color: var(--c-text);
  border: 1px solid var(--slate); padding: 14px 20px; border-radius: 3px;
  font-family: var(--f-b); font-size: .9rem;
  text-decoration: none; transition: all .2s;
}
.hp-bgd:hover { border-color: rgba(255,255,255,.3); }
.hp__contacts { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 1px solid var(--slate); }
.hp__contact { display: flex; align-items: center; gap: 10px; }
.hp__contact-ico {
  width: 32px; height: 32px; border-radius: 6px;
  background: rgba(27,114,190,.08); border: 1px solid rgba(27,114,190,.15);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--blue);
}
.hp__contact-ico svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 1.5; fill: none; }
.hp__contact-lbl { font-family: var(--f-b); font-size: .58rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.hp__contact-val { font-family: var(--f-b); font-size: .82rem; color: var(--c-text); font-weight: 500; text-decoration: none; transition: color .2s; }
.hp__contact-val:hover { color: var(--blue); }

/* ── REVEAL ───────────────────────────────────────────── */
.hp-r { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.hp-r.hp-in { opacity: 1; transform: none; }
.hp-d1 { transition-delay: .08s; } .hp-d2 { transition-delay: .16s; } .hp-d3 { transition-delay: .24s; }

/* ── ≥ 640px TABLETTE ────────────────────────────────── */
@media (min-width: 640px) {
  .hp__hero { padding: 72px 32px 60px; }
  .hp__exp, .hp__appr, .hp__why, .hp__cta, .appr { padding: 72px 32px; }
  .hp__btns { flex-direction: row; flex-wrap: wrap; }
  .hp-bp, .hp-bg { justify-content: flex-start; flex: 0 auto; }
  .hp__cta-btns { flex-direction: row; justify-content: center; flex-wrap: wrap; }
  .hp-bpd, .hp-bgd { justify-content: center; flex: 0 auto; }
  .hp__contacts { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 24px; }
  /* Grid expertises 2 col */
  .hp__grid6 { display: grid; grid-template-columns: 1fr 1fr; }
  /* Steps 2 col */
  .hp__steps { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  /* Bandeau */
  .hp__band { flex-direction: row; align-items: center; justify-content: space-between; padding: 24px 28px; }
  .hp__band-btn { align-self: auto; white-space: nowrap; flex-shrink: 0; }
}

/* ── ≥ 1024px DESKTOP ────────────────────────────────── */
@media (min-width: 1024px) {
  .hp__hero { padding: 100px 72px 80px; min-height: 88vh; display: flex; align-items: center; }
  .hp__hero-inner { max-width: 1200px; margin: 0 auto; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
  .hp__hero-visual { display: flex; align-items: center; justify-content: center; }
  .hp__stats { grid-template-columns: repeat(4,1fr); border: none; }
  .hp__stat { border: none; padding: 0 20px 0 0; border-right: 1px solid var(--slate); margin-right: 20px; }
  .hp__stat:last-child { border-right: none; margin-right: 0; }
  .hp__exp, .hp__why, .hp__cta, .appr { padding: 88px 72px; }
  .hp__exp-hdr { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
  .hp__sec-lnk { margin-top: 0; }
  .hp__grid6 { grid-template-columns: repeat(3,1fr); }
  .hp__exp-inner, .hp__appr-inner, .hp__cta-inner { max-width: 1200px; margin: 0 auto; }
  .hp__why-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
  .hp__founder { margin-top: 0; padding-top: 0; border-top: none; }
  /* Steps 4 col avec ligne */
  .hp__steps { grid-template-columns: repeat(4,1fr); gap: 0; position: relative; margin-top: 52px; }
  .hp__steps::before { content: ""; position: absolute; top: 24px; left: 14%; right: 14%; height: 1px; background: linear-gradient(to right,var(--blue),rgba(27,114,190,.1)); opacity: .3; }
  .hp__step-num { width: 52px; height: 52px; }
}

/* ── ≥ 1280px LARGE DESKTOP ──────────────────────────── */
@media (min-width: 1280px) {
  .hp__hero { padding: 100px 80px 80px; }
  .hp__exp, .hp__why, .hp__cta, .hp__appr, .appr { padding: 96px 80px; }
}

/* === Hero schéma circulaire (orbite) === */
.hp__orbit{filter:drop-shadow(0 0 40px rgba(27,114,190,.15))}
.hp__orbit-ring{animation:hpOrbitSpin 60s linear infinite;transform-origin:280px 280px}
@keyframes hpOrbitSpin{to{transform:rotate(360deg)}}
.hp__orbit-core{animation:hpCorePulse 4s ease-in-out infinite;transform-origin:280px 280px}
@keyframes hpCorePulse{0%,100%{opacity:.8}50%{opacity:.4}}
.hp__node{transition:transform .3s ease;cursor:default;transform-origin:center}
.hp__node circle{transition:stroke-width .3s,filter .3s}
.hp__node:hover circle{stroke-width:2.5;filter:drop-shadow(0 0 8px currentColor)}
.hp__orbit-dot{filter:drop-shadow(0 0 4px #1B72BE)}
@media(prefers-reduced-motion:reduce){
  .hp__orbit-ring,.hp__orbit-core,.hp__orbit-dot{animation:none}
}

/* ═══════════════════════════════════════════════════════════
   SECTION "NOTRE APPROCHE" — Maquette timeline fond sombre
   ═══════════════════════════════════════════════════════════ */
.appr{background:var(--c-bg);padding:56px 20px;position:relative;overflow:hidden}
.appr::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 50% 60% at 75% 60%,rgba(27,114,190,.06),transparent 70%);pointer-events:none}
.appr__wrap{max-width:1200px;margin:0 auto;position:relative;z-index:1;display:flex;flex-direction:column;gap:32px}

/* En-tête */
.appr__ey{font-family:'Montserrat',sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#1B72BE;margin-bottom:14px}
.appr__h2{font-family:'Montserrat',sans-serif;font-size:clamp(1.4rem,3.5vw,2rem);font-weight:800;line-height:1.1;letter-spacing:-.01em;color:var(--c-text-inv);margin-bottom:16px}
.appr__h2 em{font-style:normal;color:#1B72BE;display:block}
.appr__lead{font-family:'Montserrat',sans-serif;font-size:.94rem;line-height:1.75;color:var(--c-on-dark-2);font-weight:400}

/* Timeline */
.appr__timeline{display:grid;grid-template-columns:1fr;gap:32px}
.appr__step{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.appr__step-top{display:flex;align-items:center;width:100%;justify-content:center;position:relative;margin-bottom:20px}
.appr__num{width:48px;height:48px;border-radius:50%;border:2px solid #1B72BE;background:var(--c-bg);display:flex;align-items:center;justify-content:center;font-family:'Montserrat',sans-serif;font-size:1.1rem;font-weight:700;color:var(--c-text-inv);flex-shrink:0;z-index:2;box-shadow:0 0 20px rgba(27,114,190,.25)}
.appr__line{display:none}
.appr__connector{width:1px;height:18px;background:repeating-linear-gradient(to bottom,#1B72BE 0,#1B72BE 3px,transparent 3px,transparent 6px);opacity:.4;margin-bottom:10px}
.appr__box{width:48px;height:48px;border-radius:10px;border:1px solid rgba(27,114,190,.4);background:rgba(27,114,190,.04);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.appr__box svg{width:20px;height:20px}
.appr__step-title{font-family:'Montserrat',sans-serif;font-size:.82rem;font-weight:800;letter-spacing:.06em;color:var(--c-text-inv);margin-bottom:10px}
.appr__step-desc{font-family:'Montserrat',sans-serif;font-size:.84rem;line-height:1.7;color:var(--c-on-dark-2);font-weight:400;max-width:280px}

/* Bande 4 piliers */
.appr__pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:1px solid rgba(27,114,190,.2);border-radius:12px;background:rgba(27,114,190,.03);overflow:hidden}
.appr__pillar{display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 16px;border-right:1px solid rgba(27,114,190,.12);border-bottom:1px solid rgba(27,114,190,.12)}
.appr__pillar:nth-child(2n){border-right:none}
.appr__pillar svg{width:22px;height:22px}
.appr__pillar span{font-family:'Montserrat',sans-serif;font-size:.78rem;font-weight:700;letter-spacing:.08em;color:var(--c-text)}

/* Bande 3 points */
.appr__proof{display:flex;flex-direction:column;gap:20px;padding-top:4px}
.appr__proof-item{display:flex;align-items:center;gap:14px}
.appr__proof-item svg{width:26px;height:26px;flex-shrink:0}
.appr__proof-title{font-family:'Montserrat',sans-serif;font-size:.82rem;font-weight:800;letter-spacing:.04em;color:var(--c-text-inv);margin-bottom:3px}
.appr__proof-desc{font-family:'Montserrat',sans-serif;font-size:.82rem;color:var(--c-on-dark-2);font-weight:400;line-height:1.55}

/* ── Responsive desktop ── */
@media(min-width:768px){
  .appr__pillars{grid-template-columns:repeat(4,1fr)}
  .appr__pillar{border-bottom:none}
  .appr__pillar:nth-child(2n){border-right:1px solid rgba(27,114,190,.12)}
  .appr__pillar:last-child{border-right:none}
  .appr__proof{flex-direction:row;gap:32px}
  .appr__proof-item{flex:1}
}
@media(min-width:1024px){
  .appr__timeline{grid-template-columns:repeat(4,1fr);gap:24px}
  .appr__step-top{justify-content:center}
  /* Ligne horizontale entre les numéros (centrés) */
  .appr__line{display:block;position:absolute;top:50%;left:calc(50% + 40px);right:calc(-50% + 40px);height:2px;background:repeating-linear-gradient(to right,#1B72BE 0,#1B72BE 4px,transparent 4px,transparent 9px);opacity:.4;transform:translateY(-50%)}
  .appr__step:last-child .appr__line{display:none}
  .appr__connector{margin:14px 0 10px;align-self:center}
  .appr__box{align-self:center}
  .appr__step{align-items:center;text-align:center}
  .appr__step-desc{max-width:280px}
}

/* Photo fondateur (cercle) */
.hp__founder-photo{width:72px;height:72px;border-radius:50%;overflow:hidden;margin:0 0 14px;border:2px solid rgba(27,114,190,.35);box-shadow:0 6px 20px rgba(27,114,190,.18);flex-shrink:0}
.hp__founder-photo img{width:100%;height:100%;object-fit:cover;display:block}
@media(min-width:1024px){.hp__founder-photo{width:84px;height:84px}}