/* ==========================================================================
   Agence B-LIGHT — page « Nos engagements » (/engagements/)
   Maquette : Downloads/ENGAGEMENTS/maquettes/A-page-engagements.html, couleurs ramenées aux tokens de css/site.css
   (navy → --dark, olive → --green-2, anis → --green-light, fond → --bg-3). Classes préfixées eg-.
   Règle de contenu : chaque chiffre porte sa source (.eg-src) juste dessous ou en bas de section.
   ========================================================================== */

.eg-src{font-family:var(--mono);font-size:var(--fs-11);line-height:1.5;color:var(--muted);letter-spacing:.02em}
.eg-src a{color:inherit;text-underline-offset:2px}
.eg-src a:hover{color:var(--accent-text)}
.eg-dark .eg-src,.eg-dark .eg-src a{color:rgba(255,255,255,.62)}
.eg-dark .eg-src a:hover{color:#fff}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.eg-hero{background:var(--dark);color:#fff;position:relative;overflow:hidden}
.eg-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 90% at 85% 40%,rgba(165,194,61,.14),transparent 60%)}
.eg-hero__grid{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center;padding-top:72px;padding-bottom:120px}
.eg-hero__text{display:flex;flex-direction:column;gap:22px}
.eg-hero .eyebrow{color:var(--lime);margin:0}
.eg-hero__title{font-family:var(--display);font-weight:800;font-size:clamp(36px,4.4vw,56px);line-height:1.02;letter-spacing:-.025em;text-wrap:balance}
.eg-hero__title span{display:block;color:var(--green-lighter)}
.eg-hero__lead{font-size:var(--fs-18);line-height:1.6;color:rgba(255,255,255,.78);max-width:560px}
.eg-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.eg-hero__media{position:relative;margin:0}
.eg-hero__media img{width:100%;height:520px;object-fit:cover;border-radius:var(--r-card-sm);box-shadow:var(--shadow-media)}
.eg-hero__cap{position:absolute;left:-28px;bottom:28px;max-width:300px;background:var(--bg-3);color:var(--ink);padding:16px 20px;border-radius:var(--r-tag);box-shadow:var(--shadow-media)}
.eg-hero__cap b{display:block;font-family:var(--mono);font-size:var(--fs-11);letter-spacing:.14em;color:var(--green-2);margin-bottom:4px}
.eg-hero__cap span{display:block;font-size:var(--fs-15);font-weight:600;line-height:1.4}
.eg-hero__cap small{display:block;margin-top:6px;font-family:var(--mono);font-size:10.5px;line-height:1.4;color:var(--muted)}

/* --------------------------------------------------------------------------
   Chiffres (cartes qui chevauchent le hero)
   -------------------------------------------------------------------------- */
.eg-figures{position:relative;z-index:2;margin-top:-56px}
.eg-figures__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.eg-figure{background:#fff;border:1px solid var(--line);border-radius:var(--r-card-sm);padding:26px 24px 22px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow-panel)}
.eg-figure__value{font-family:var(--display);font-size:clamp(34px,3.4vw,44px);font-weight:800;color:var(--green-2);line-height:1;letter-spacing:-.02em;white-space:nowrap}
.eg-figure__label{font-size:var(--fs-15);line-height:1.45;color:var(--ink)}
.eg-figure .eg-src{margin-top:auto;padding-top:8px;border-top:1px solid var(--line)}

/* --------------------------------------------------------------------------
   Sections claires communes
   -------------------------------------------------------------------------- */
.eg-section{padding:88px 0 8px}
.eg-section .section-title{max-width:22ch}
.eg-section__foot{margin-top:28px}

/* 4 leviers */
.eg-levers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.eg-lever{border-top:3px solid var(--green-light);padding-top:20px;display:flex;flex-direction:column;gap:10px}
.eg-lever svg{width:36px;height:36px;fill:none;stroke:var(--green-2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.eg-lever h3{font-family:var(--display);font-size:var(--fs-22);font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.eg-lever p{font-size:var(--fs-15);line-height:1.6;color:var(--muted)}

/* Fabricants */
.eg-makers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.eg-maker{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-card)}
.eg-maker__head{background:var(--dark);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 28px;min-height:96px;flex-wrap:wrap}
.eg-maker__logo{height:60px;width:auto;object-fit:contain}
.eg-maker__logo--wide{height:auto;width:150px;max-height:30px}
.eg-maker__badge{font-family:var(--mono);font-size:var(--fs-12);font-weight:700;letter-spacing:.04em;color:var(--green-ink);background:var(--green-light);padding:6px 12px;border-radius:var(--r-tag)}
.eg-maker__body{padding:26px 28px 24px;display:flex;flex-direction:column;gap:16px;flex:1}
.eg-maker__name{font-family:var(--display);font-size:var(--fs-24);font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.eg-maker__text{font-size:var(--fs-15);line-height:1.6;color:var(--muted)}
.eg-maker__proofs{display:flex;flex-direction:column;gap:8px}
.eg-maker__proofs li{position:relative;padding-left:26px;font-size:var(--fs-15);line-height:1.5;color:var(--ink)}
.eg-maker__proofs li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;background:var(--chip-bg);box-shadow:inset 0 0 0 1px var(--chip-line)}
.eg-maker__proofs li::after{content:"";position:absolute;left:5px;top:7px;width:6px;height:4px;border-left:2px solid var(--green-2);border-bottom:2px solid var(--green-2);transform:rotate(-45deg)}
.eg-maker__links{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.eg-maker__links a{font-size:var(--fs-14);font-weight:700;color:var(--accent-text);text-decoration:none}
.eg-maker__links a:hover{text-decoration:underline}

/* --------------------------------------------------------------------------
   Focus « Le mât qui renaît » (fond sombre)
   -------------------------------------------------------------------------- */
.eg-reuse{margin-top:88px;padding:80px 0 72px;background:var(--dark);color:#fff;position:relative;overflow:hidden}
.eg-reuse::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 80% at 10% 0%,rgba(165,194,61,.12),transparent 60%)}
.eg-reuse > .container{position:relative}
.eg-reuse__head{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;align-items:end;margin-bottom:40px}
.eg-reuse__head .eyebrow{color:var(--lime)}
.eg-reuse__head p{font-size:var(--fs-16);line-height:1.65;color:rgba(255,255,255,.78)}
.eg-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;counter-reset:step}
.eg-step{display:flex;flex-direction:column;gap:10px}
.eg-step img{width:100%;height:170px;object-fit:cover;border-radius:var(--r-tag);background:#2a3d55}
.eg-step__n{font-family:var(--mono);font-size:var(--fs-12);color:var(--green-lighter);letter-spacing:.08em;margin-top:4px}
.eg-step h3{font-family:var(--display);font-size:var(--fs-18);font-weight:700;line-height:1.2}
.eg-step p{font-size:var(--fs-14);line-height:1.55;color:rgba(255,255,255,.74)}
.eg-reuse .eg-src{margin-top:32px}

/* --------------------------------------------------------------------------
   Dossier achats responsables
   -------------------------------------------------------------------------- */
.eg-dossier{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;align-items:start}
.eg-dossier__text{display:flex;flex-direction:column;gap:16px}
.eg-dossier__text .eyebrow{margin:0}
.eg-dossier__text p{font-size:var(--fs-16);line-height:1.65;color:var(--muted)}
.eg-dossier__text ul{display:flex;flex-direction:column;gap:6px;margin-top:2px}
.eg-dossier__text li{font-size:var(--fs-15);line-height:1.5;color:var(--ink);padding-left:18px;position:relative}
.eg-dossier__text li::before{content:"";position:absolute;left:2px;top:9px;width:6px;height:6px;border-radius:50%;background:var(--green-light)}
.eg-dossier__img{width:100%;height:220px;object-fit:cover;border-radius:var(--r-card-sm);margin-top:8px}
.eg-docs{background:#fff;border:1px solid var(--line);border-radius:var(--r-card-sm);padding:26px 28px;box-shadow:var(--shadow-panel)}
.eg-docs h3{font-family:var(--display);font-size:var(--fs-18);font-weight:700;margin-bottom:8px}
.eg-docs__group{font-family:var(--mono);font-size:var(--fs-11);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:18px 0 2px}
.eg-docs a{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:13px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:var(--fs-15);line-height:1.4}
.eg-docs a:last-child{border-bottom:0}
.eg-docs a:hover span:first-child{color:var(--accent-text)}
.eg-docs a span:last-child{flex:none;font-family:var(--mono);font-size:var(--fs-12);color:var(--green-2);white-space:nowrap}

/* --------------------------------------------------------------------------
   Événement + appel final
   -------------------------------------------------------------------------- */
.eg-event{background:var(--chip-bg);border:1px solid var(--chip-line);border-radius:var(--r-card-sm);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding:32px 36px}
.eg-event__text{display:flex;flex-direction:column;gap:6px;max-width:760px}
.eg-event__kicker{font-family:var(--mono);font-size:var(--fs-12);letter-spacing:.12em;color:var(--chip-ink);font-weight:600}
.eg-event__title{font-family:var(--display);font-size:var(--fs-24);font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.eg-event__text p{font-size:var(--fs-15);line-height:1.55;color:var(--chip-ink)}

.eg-cta{padding:72px 0 96px}
.eg-cta__panel{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);background:linear-gradient(165deg,#31465f 0%,#20334a 80%);color:#fff;border-radius:var(--r-panel);overflow:hidden}
.eg-cta__text{padding:52px 48px;display:flex;flex-direction:column;gap:16px;justify-content:center}
.eg-cta__text .eyebrow{color:var(--lime);margin:0}
.eg-cta__title{font-family:var(--display);font-size:clamp(28px,3.4vw,40px);font-weight:800;letter-spacing:-.02em;line-height:1.05}
.eg-cta__text p{font-size:var(--fs-16);line-height:1.6;color:rgba(255,255,255,.8);max-width:46ch}
.eg-cta__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.eg-cta__mail{font-family:var(--mono);font-size:var(--fs-13);color:rgba(255,255,255,.75)}
.eg-cta__mail a{color:#fff;text-underline-offset:3px}
.eg-cta__panel img{width:100%;height:100%;min-height:340px;object-fit:cover}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width:1100px){
  .eg-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .eg-figures__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .eg-levers{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .eg-hero__grid{grid-template-columns:minmax(0,1fr);gap:36px;padding-top:48px;padding-bottom:96px}
  .eg-hero__media img{height:380px}
  .eg-hero__cap{left:16px;bottom:16px;right:16px;max-width:none}
  .eg-makers,.eg-dossier,.eg-reuse__head,.eg-cta__panel{grid-template-columns:minmax(0,1fr)}
  .eg-dossier{gap:36px}
  .eg-section{padding-top:64px}
  .eg-reuse{margin-top:64px;padding:64px 0 56px}
  .eg-reuse__head{gap:16px}
  .eg-cta__panel img{display:none}
  .eg-cta__text{padding:40px 28px}
}
@media (max-width:560px){
  .eg-figures__grid,.eg-levers,.eg-steps{grid-template-columns:minmax(0,1fr)}
  .eg-step img{height:200px}
  .eg-hero__actions .btn,.eg-cta__actions .btn{width:100%;justify-content:center}
  .eg-maker__head,.eg-maker__body{padding-left:22px;padding-right:22px}
  .eg-docs{padding:20px 20px}
  .eg-event{padding:26px 22px}
}