/* =========================================================
   DJOULDEGROUP — DG.CSS (VERSION FINALE PRO)
   - Compatible max (pas de CSS Grid, pas de 1fr, pas de variables)
   - Look institutionnel (Bleu #0B3A75 / Vert #2FA84F / Jaune #F4C400)
   - Responsive + cartes "Nos pôles" style proche de ton visuel
   ========================================================= */

/* Base */
html, body { margin:0; padding:0; }
body{
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#2B2B2B;
  background:#FFFFFF;
}
h1,h2,h3,h4,.dg-h{
  font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Helpers */
.dg-wrap{ max-width:1180px; margin:0 auto; padding:0 20px; }
.dg-section{ padding:84px 0; }
.dg-soft{ background:#F4F6F8; }
.dg-center{ text-align:center; }

.dg-kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:#0B3A75; font-size:12px;
}
.dg-dot{
  width:9px; height:9px; border-radius:999px;
  background:#2FA84F; display:inline-block;
}
.dg-h1{
  font-size:56px;
  line-height:1.05;
  margin:12px 0 16px;
  color:#0B3A75;
  font-weight:900;
}
.dg-lead{
  font-size:18px; line-height:1.75; color:#6B7280;
  max-width:78ch; margin:0 auto;
}

/* Buttons */
.dg-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:22px;
  justify-content:center;
}
.dg-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 18px; border-radius:14px;
  font-weight:800; text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
  gap:10px;
}
.dg-btn-primary{
  background:#2FA84F; color:#fff;
  box-shadow:0 16px 40px rgba(47,168,79,.25);
}
.dg-btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 22px 55px rgba(47,168,79,.28);
}
.dg-btn-ghost{
  background:rgba(11,58,117,.07);
  color:#0B3A75;
}
.dg-btn-ghost:hover{
  background:rgba(11,58,117,.10);
  transform:translateY(-1px);
}
.dg-btn-accent{
  background:rgba(244,196,0,.14);
  color:#0B3A75;
}
.dg-btn-accent:hover{
  background:rgba(244,196,0,.22);
  transform:translateY(-1px);
}

/* ==============================
   PAGE “NOS PÔLES” (PRO)
   ============================== */

.dg-poles-hero{
  position:relative;
  padding:120px 0 70px;
  color:#fff;
  overflow:hidden;

  background:
    radial-gradient(900px 380px at 20% 20%, rgba(47,168,79,.26), transparent 60%),
    radial-gradient(900px 380px at 80% 10%, rgba(244,196,0,.16), transparent 60%),
    linear-gradient(135deg, #071A33 0%, #0B3A75 55%, #06305F 100%);
}

/* Petites particules */
.dg-poles-hero:before{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 25% 35%, rgba(255,255,255,.14) 0 1px, transparent 1px),
    radial-gradient(circle at 75% 55%, rgba(255,255,255,.12) 0 1px, transparent 1px);
  background-size:34px 34px, 42px 42px;
  opacity:.45;
  pointer-events:none;
}

/* Image de fond (optionnelle) */
.dg-poles-bg{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  opacity:.18;
  filter:saturate(1.1) contrast(1.05);
  transform:scale(1.02);
}

/* Overlay pour lisibilité */
.dg-poles-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(7,26,51,.55), rgba(7,26,51,.65));
}

.dg-poles-hero-inner{
  position:relative;
  text-align:center;
}

.dg-brandline{
  display:inline-flex; align-items:center; gap:12px;
  margin-bottom:10px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  padding:10px 14px; border-radius:999px;
}
.dg-brandline__mark{
  width:38px; height:38px; border-radius:12px;
  background:linear-gradient(180deg, rgba(47,168,79,.95), rgba(10,107,74,.95));
  box-shadow:0 18px 55px rgba(0,0,0,.20);
}
.dg-brandline__name{
  font-family:"Inter", sans-serif;
  font-weight:900;
  letter-spacing:.02em;
  font-size:18px;
}
.dg-brandline__name span{ color:#2FA84F; }

.dg-poles-hero-title{
  font-family:"Inter", sans-serif;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-size:64px;
  margin:14px 0 0;
  text-shadow:0 18px 60px rgba(0,0,0,.40);
}

/* Layout cartes (FLEX = compatibilité max) */
.dg-poles-cards{
  margin-top:34px;
  display:flex;
  gap:18px;
  justify-content:center;
  align-items:stretch;
  flex-wrap:wrap;
  max-width:1100px;
  margin-left:auto;
  margin-right:auto;
}

.dg-pole{
  width:calc(33.333% - 12px);
  min-width:260px;

  border-radius:22px;
  overflow:hidden;
  box-shadow:0 18px 55px rgba(11,58,117,.18);
  border:1px solid rgba(255,255,255,.14);
  position:relative;
  transform:translateY(0);
  transition:transform .18s ease, box-shadow .18s ease;
}
.dg-pole:hover{
  transform:translateY(-4px);
  box-shadow:0 26px 70px rgba(0,0,0,.28);
}

.dg-pole__top{
  padding:22px 18px;
  min-height:210px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:14px;
}

.dg-pole__icon{
  width:86px; height:86px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.16);
}
.dg-pole__icon svg{
  width:54px; height:54px;
  fill:#fff;
  opacity:.95;
}

.dg-pole__badge{
  font-family:"Inter", sans-serif;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
  padding:14px 16px;
  border-radius:16px;
  width:calc(100% - 26px);
  margin:0 auto 18px;
  color:#fff;
  border:1px solid rgba(0,0,0,.10);
  text-align:center;
}

.dg-pole__desc{
  background:rgba(255,255,255,.08);
  padding:16px 18px 22px;
  color:rgba(255,255,255,.85);
  line-height:1.65;
  text-align:center;
}

/* Couleurs (fidèles au logo) */
.dg-pole--green .dg-pole__top{
  background:linear-gradient(180deg, rgba(47,168,79,.95), rgba(10,107,74,.92));
}
.dg-pole--green .dg-pole__badge{ background:rgba(10,107,74,.82); }

.dg-pole--yellow .dg-pole__top{
  background:linear-gradient(180deg, rgba(244,196,0,.95), rgba(163,124,0,.92));
}
.dg-pole--yellow .dg-pole__badge{ background:rgba(163,124,0,.78); }

.dg-pole--blue .dg-pole__top{
  background:linear-gradient(180deg, rgba(11,58,117,.95), rgba(6,48,95,.92));
}
.dg-pole--blue .dg-pole__badge{ background:rgba(6,48,95,.80); }

/* Animation légère */
@keyframes dgFadeUp{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}
.dg-animate{ animation:dgFadeUp .55s ease both; }
.dg-delay-1{ animation-delay:.05s; }
.dg-delay-2{ animation-delay:.12s; }
.dg-delay-3{ animation-delay:.18s; }

/* Responsive */
@media (max-width: 980px){
  .dg-poles-hero{ padding:90px 0 56px; }
  .dg-poles-hero-title{ font-size:44px; }
  .dg-h1{ font-size:42px; }
  .dg-pole{ width:100%; }
  .dg-pole__top{ min-height:190px; }
}

@media (max-width: 520px){
  .dg-poles-hero-title{ font-size:36px; }
  .dg-brandline__name{ font-size:16px; }
}