/* EXO7 ENERGY — shared design tokens (charte alignée sur ERYX PREFA / groupe ENERGY INVEST) */

:root {
  --exo-cobalt: #0047AB;
  --exo-cobalt-deep: #00337a;
  --exo-cobalt-tint: #e6edf7;
  --exo-steel: #2f6fb0;      /* bleu du logo EXO7 */
  --exo-rose: #F3D9DF;
  --exo-black: #0B0B0B;
  --exo-graphite: #1a1a1c;
  --exo-concrete: #f5f4f0;
  --exo-bone: #faf8f3;
  --exo-line: #d8d4ca;
  --exo-mute: #8b8a85;
}

*, *::before, *::after { box-sizing: border-box; }

img { max-width: 100%; display: block; }

/* Striped placeholder for missing assets */
.placeholder-stripe {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(0,0,0,0.04) 0,
    rgba(0,0,0,0.04) 1px,
    transparent 1px,
    transparent 12px
  );
}

/* ===== Mobile responsive overrides =====
   NOTE: React serializes inline styles to kebab-case in the DOM, so all
   [style*="…"] selectors below MUST use kebab-case property names. */

html, body { max-width: 100%; overflow-x: clip; }

section [style*="grid-template-columns"] > * { min-width: 0; }

@media (max-width: 1024px) {
  section [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  section [style*="grid-column: span 2"] { grid-column: auto !important; }

  section [style*="grid-template-columns"] > *,
  section [style*="display: flex"] > * {
    min-width: 0 !important;
  }

  section [style*="aspect-ratio"] {
    min-height: 0 !important;
  }
  [style*="min-height: 460"] { min-height: 240px !important; }
  [style*="min-height: 480"] { min-height: 260px !important; }

  section article > [style*="background-image"] {
    order: -1 !important;
  }

  section {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  section > div[style*="1440"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  [style*="padding: 80px 64px"] { padding: 36px 22px !important; }
  [style*="padding: 64px 56px"] { padding: 32px 22px !important; }
  [style*="padding: 56px 56px 56px"] { padding: 32px 22px !important; }
  [style*="padding: 56px 56px"] { padding: 32px 22px !important; }
  [style*="padding: 48px"] { padding: 24px !important; }
  [style*="padding: 40px 36px"] { padding: 26px 20px !important; }
  [style*="padding: 40px 32px"] { padding: 24px 20px !important; }
  [style*="padding: 36px 32px"] { padding: 24px 20px !important; }
  [style*="padding: 32px"] { padding: 22px !important; }

  [style*="gap: 100px"] { gap: 28px !important; }
  [style*="gap: 80px"]  { gap: 28px !important; }
  [style*="gap: 64px"]  { gap: 24px !important; }
  [style*="gap: 36px"]  { gap: 20px !important; }

  h1 { font-size: clamp(34px, 8.5vw, 46px) !important; }
  h2 { font-size: clamp(26px, 7vw, 36px) !important; }
  h3 { font-size: clamp(21px, 5.5vw, 26px) !important; }

  [style*="font-size: 96"] { font-size: 52px !important; }
  [style*="font-size: 64"] { font-size: 40px !important; }
  [style*="font-size: 56"] { font-size: 38px !important; }
  [style*="font-size: 40"] { font-size: 30px !important; }

  section [style*="border-right"] { border-right: none !important; }
  section [style*="padding-left: 32"] { padding-left: 0 !important; }
  section [style*="padding-left: 28"] { padding-left: 0 !important; }
  section [style*="padding: 56px 32px 56px 0"] { padding: 28px 0 !important; }
}

@media (max-width: 480px) {
  section {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }
  h1 { font-size: clamp(30px, 9vw, 40px) !important; }
}