:root{--bg:rgba(146,186,214,0.25)}
.inner{max-width:1280px;margin:0 auto;padding:0}

/* ── COLOR BAR ── */

/* ── HERO ── */
.hero-qs{
  position:relative;overflow:hidden;
  padding:130px 2.5rem 110px;
  background: url('../images/header-page-qui-sommes-nous.jpg') center/cover no-repeat;
}
.hero-qs-inner{max-width:1280px;margin:0 auto;padding:0;position:relative;z-index:1}
.hero-qs h1{font-size:var(--ty-h1-size);font-weight:800;color:white;line-height:1.1;letter-spacing:-1px;margin-bottom:24px}
.hero-qs h1 span{font-weight:300}
.hero-qs-sub{font-size:var(--ty-lead);color:rgba(255,255,255,.82);line-height:1.75;max-width:580px}

/* ── QUI SOMMES NOUS ── */
.section-qui{background:white;padding:80px 2.5rem}
.section-qui h2{font-size:var(--ty-h2-size);font-weight:800;color:#668CC2;margin-bottom:24px}
.section-qui p{font-size:var(--ty-body);color:#222;line-height:1.8;max-width:820px}
.section-qui p+p{margin-top:16px}

/* ── NOTRE EXPERTISE ── */
.section-expertise{background:var(--bg);padding:80px 2.5rem}
.section-expertise h2{font-size:var(--ty-h2-size);font-weight:800;color:#668CC2;margin-bottom:32px}
.expertise-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.exp-card{background:white;border-radius:17px;padding:28px 30px;display:flex;align-items:flex-start;gap:22px}
.exp-ico{flex-shrink:0;width:72px;height:64px}
.exp-title{font-size:var(--ty-h4-size);font-weight:600;color:#1c1c36;margin-bottom:10px}
.exp-desc{font-size:var(--ty-body);color:#1c1c36;line-height:1.7}

/* ── UN PEU D'HISTOIRE ── */
.section-histoire{background:var(--bg);padding:80px 2.5rem;overflow:hidden;position:relative;min-height:500px}
.section-histoire h2{font-size:var(--ty-h2-size);font-weight:800;color:#668CC2;margin-bottom:24px}
.histoire-left{max-width:1280px;margin:0 auto;padding:0;position:relative;z-index:2}
.histoire-text{font-size:var(--ty-body);color:#222;line-height:1.8;margin-bottom:32px}
.marques-label{font-size:var(--ty-body);font-weight:600;text-transform:uppercase;color:#1c1c36;margin-bottom:16px}
.marques-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.marque-tag a{color:inherit;text-decoration:none;display:block}
.marque-tag{background:white;border-radius:8px;padding:10px 16px;font-size:var(--ty-body);font-weight:800;text-transform:uppercase;color:#1c1c36;letter-spacing:.3px;text-align:center;transition:background .15s,color .15s}
.marque-tag:has(a):hover{background:#1c1c36;color:white}
.marque-tag:has(a):hover a{color:white}
.histoire-bulle{
  position:absolute;right:-120px;top:50%;transform:translateY(-50%);
  width:480px;height:480px;border-radius:50%;overflow:hidden;
  background:linear-gradient(135deg,#B5DCF0 0%,#D6EEF8 100%);
  display:flex;align-items:center;justify-content:center;
}

/* ── L'UNION DE NOS COMPÉTENCES ── */
.section-union{background:white;padding:80px 2.5rem}
.union-inner{max-width:1280px;margin:0 auto;padding:0}
.section-union h2{font-size:var(--ty-h2-size);font-weight:800;color:#668CC2;margin-bottom:40px}
.union-layout{display:block}
.union-body{font-size:var(--ty-body);color:#222;line-height:1.8}
.union-body p+p{margin-top:16px}
.union-quote{margin-top:28px;border-left:3px solid #757baf;padding-left:20px;font-size:var(--ty-lead);font-weight:600;color:#1c1c36;line-height:1.65;font-style:italic}
.union-img-wrap{background:white;padding-bottom:80px}
.union-img-rect{width:68%;aspect-ratio:16/7;border-radius:0 16px 16px 0;background:linear-gradient(135deg,#D6EEF8 0%,#B5DCF0 100%);display:flex;align-items:center;justify-content:center}
.union-img-rect-lbl{font-size:var(--ty-xs);font-weight:600;color:#8CC4D8;letter-spacing:.5px}

/* ── PRÉSENCE NATIONALE ── */
.section-presence{background:white;padding:80px 2.5rem}
.section-presence h2{font-size:var(--ty-h2-size);font-weight:800;color:#668CC2;margin-bottom:16px}
.presence-desc{font-size:var(--ty-body);color:#222;line-height:1.8;max-width:800px;margin-bottom:40px}
/* la carte des pôles elle-même est un composant global : css/carte-poles.css + js/carte-poles.js */

/* ── QUELQUES CHIFFRES (scattered) ── */
.section-chiffres{background:white;padding:80px 2.5rem 100px}
.section-chiffres h2{font-size:var(--ty-h2-size);font-weight:800;color:#668CC2;margin-bottom:48px}
.chiffres-scattered{position:relative;width:100%;min-height:580px}
.chiffres-scattered svg.ribbon{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}
.chiffre-card{position:absolute;border-radius:20px;padding:18px 22px;display:flex;align-items:center;gap:16px}
.chiffre-num{font-size:clamp(40px,5vw,56px);font-weight:800;line-height:1;white-space:nowrap}
.chiffre-lbl{font-size:var(--ty-body);color:#222;font-weight:400;line-height:1.4;max-width:140px}

/* ── POURQUOI ODEALIM (3 cols horizontal) ── */
.section-pourquoi{background:var(--bg);padding:80px 2.5rem}
.pourquoi-kicker{font-size:var(--ty-h3-size);font-weight:600;text-transform:uppercase;color:#1c1c36;margin-bottom:6px}
.section-pourquoi h2{font-size:var(--ty-h2-size);font-weight:800;color:#668CC2;margin-bottom:32px}
.pourquoi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pourquoi-card{background:white;border-radius:17px;padding:24px 28px;display:flex;align-items:flex-start;gap:18px}
.pourquoi-ico{flex-shrink:0;width:40px;height:40px;border-radius:10px;background:var(--bg);display:flex;align-items:center;justify-content:center;margin-top:2px}
.pourquoi-title{font-size:var(--ty-lead);font-weight:600;color:#1c1c36;margin-bottom:4px}
.pourquoi-desc{font-size:var(--ty-body);color:#4A6785}

/* ── CTA ── */
.cta-qs{background:#757baf;padding:80px 2.5rem}
.cta-qs-inner{max-width:1280px;margin:0 auto;padding:0;display:flex;align-items:center;justify-content:space-between;gap:3rem;flex-wrap:wrap}
.cta-qs-h{font-size:var(--ty-h2-size);font-weight:800;color:white;line-height:1.1}
.cta-qs-h-it{font-size:var(--ty-h2-size);font-style:italic;font-weight:400;color:white;line-height:1.1;margin-bottom:16px}
.cta-qs-sub{font-size:var(--ty-body);color:rgba(255,255,255,.85);max-width:440px;line-height:1.7}
.cta-qs-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}

/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVE (2026-10-26) — la page n'avait aucune règle : les grilles 2 / 3 / 4 colonnes restaient telles quelles sur téléphone et la page débordait de 380 à 475 px de large.
   Paliers du site : 1100 (tablette paysage) · 900 (tablette) · 768 (téléphone) · 480 (petit téléphone).
   ════════════════════════════════════════════════════════════════════════════ */
@media(max-width:1100px){
  .marques-grid{grid-template-columns:repeat(3,1fr)}
  .pourquoi-grid{grid-template-columns:1fr 1fr}
  .histoire-bulle{width:380px;height:380px;right:-150px}
}
@media(max-width:900px){
  .expertise-grid,.pourquoi-grid{grid-template-columns:1fr}
  .histoire-bulle{display:none}            /* décorative : elle passerait sous le texte */
  .section-histoire{min-height:0}
  .union-img-rect{width:100%}
}
@media(max-width:768px){
  .section-qui,.section-expertise,.section-histoire,.section-union,.section-presence,.section-pourquoi,.cta-qs{padding:56px 1.25rem}
  .section-chiffres{padding-top:56px;padding-left:1.25rem;padding-right:1.25rem}
  .section-qui h2,.section-expertise h2,.section-histoire h2,.section-union h2,.section-presence h2,.section-chiffres h2,.section-pourquoi h2{margin-bottom:20px}
  .exp-card{padding:20px;gap:16px}
  .exp-ico{width:56px;height:50px}
  .marques-grid{grid-template-columns:1fr 1fr}
  .marque-tag{padding:10px 8px;font-size:var(--ty-xs)}
  .pourquoi-card{padding:20px}
  .union-img-wrap{padding-bottom:56px}
  .cta-qs-inner{gap:1.5rem}
  .cta-qs-btns .btn-white,.cta-qs-btns .btn-ghost,.cta-qs-btns a{flex:1 1 100%;justify-content:center;text-align:center}
}
@media(max-width:480px){
  .marques-grid{grid-template-columns:1fr}
}