:root {
  --chakra-1:#8B5A2B;   /* Earth / Base */
  --chakra-2:#D32F2F;   /* Root (Rouge) */
  --chakra-3:#F57C00;   /* Sacré (Orange) */
  --chakra-4:#FBC02D;   /* Plexus (Jaune) */
  --chakra-5:#43A047;   /* Cœur (Vert) */
  --chakra-6:#26C6DA;   /* Thymus / Turquoise */
  --chakra-7:#1E88E5;   /* Gorge (Bleu) */
  --chakra-8:#5E35B1;   /* 3e Œil (Indigo) */
  --chakra-9:#8E24AA;   /* Couronne (Violet) */

  --bg: #0b1220;
  --text: #e6e9ee;
  --muted: #a7b1c4;
}

/* Chakra gradient helpers */
.chakra-gradient-1 { background: linear-gradient(90deg,var(--chakra-2),var(--chakra-3)); }
.chakra-gradient-2 { background: linear-gradient(90deg,var(--chakra-4),var(--chakra-5)); }
.chakra-gradient-3 { background: linear-gradient(90deg,var(--chakra-7),var(--chakra-9)); }

/* Override key accents with chakra gradients */
.btn{background:linear-gradient(90deg,var(--chakra-7),var(--chakra-9));border:none;color:white}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.2)}
.badge{background:linear-gradient(90deg,var(--chakra-4),var(--chakra-5));border:none;color:#10131a}
a{color:var(--chakra-7)}
.hero-bg{background:radial-gradient(900px 500px at 70% 10%,color-mix(in oklab,var(--chakra-7) 35%, transparent),transparent),
          radial-gradient(800px 400px at 20% 10%,color-mix(in oklab,var(--chakra-9) 35%, transparent),transparent);opacity:.55}
.toolbox{border-color: color-mix(in oklab,var(--chakra-7) 35%, white);}
.card.featured{box-shadow:0 0 0 1px color-mix(in oklab,var(--chakra-7) 55%, white),0 10px 30px -15px color-mix(in oklab,var(--chakra-7) 35%, transparent)}
input:focus,textarea:focus{border-color:var(--chakra-7);box-shadow:0 0 0 3px color-mix(in oklab,var(--chakra-7) 25%, transparent)}
.nav .btn{background:linear-gradient(90deg,var(--chakra-2),var(--chakra-3));color:white}

/* Reset + base */
*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;color:#e6e9ee;background:#0b1220;line-height:1.5}
h1,h2,h3,h4{margin:0 0 .6rem 0;color:#f4f6fb}
p{margin:.5rem 0 1rem;color:#c5ccda}
a{color:#b7e2ff;text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:0 16px}
.row{display:flex;gap:12px;align-items:center}.between{justify-content:space-between}.center{align-items:center}.gap{gap:12px}.small{font-size:.9rem}
.grid2{display:grid;grid-template-columns:1fr;gap:20px;align-items:center} @media(min-width:860px){.grid2{grid-template-columns:1.1fr .9fr}}
.grid3{display:grid;grid-template-columns:1fr;gap:16px}@media(min-width:860px){.grid3{grid-template-columns:repeat(3,1fr)}}
.grid4{display:grid;grid-template-columns:1fr;gap:16px}@media(min-width:860px){.grid4{grid-template-columns:repeat(4,1fr)}}
.grid5{display:grid;grid-template-columns:1fr;gap:16px}@media(min-width:1040px){.grid5{grid-template-columns:repeat(5,1fr)}}
.grid1 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.section{padding:64px 0}.muted{color:#a7b1c4}.xsmall{font-size:.85rem}
.btn{display:inline-block;background:#7dd3fc;color:#0b1220;padding:10px 16px;border-radius:14px;font-weight:600;border:1px solid #94e1ff;box-shadow:0 0 0 0 rgba(125,211,252,.3);transition:.2s}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 18px -8px rgba(125,211,252,.35)}
.btn.ghost{background:transparent;color:#e6e9ee;border:1px solid rgba(255,255,255,.18)}
.btn.full{display:block;text-align:center}
.badge{background:rgba(56,189,248,.18);color:#9ddff9;border:1px solid rgba(56,189,248,.35);padding:4px 8px;border-radius:999px;font-size:.8rem}

/* Header */
.site-header{position:sticky;top:0;z-index:1000;background:rgba(10,16,30,.6);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
.brand{font-weight:800;letter-spacing:.4px}
.nav{display:none;gap:14px;align-items:center}@media(min-width:860px){.nav{display:flex}}
.nav a{color:#dfe6f6}.nav .btn{margin-left:8px}

/* Hero */
.hero{position:relative;padding:80px 0 64px}
.hero-bg{position:absolute;inset:0;background:radial-gradient(1000px 500px at 70% 10%,rgba(56,189,248,.25),transparent),radial-gradient(800px 400px at 20% 10%,rgba(147,51,234,.25),transparent);opacity:.55;z-index:-1}
h1{font-size:clamp(32px,6vw,56px);font-weight:800}
.grad{background:linear-gradient(90deg,#8fe3ff,#d1b3ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:1.1rem;color:#cbd5e1;margin-top:12px}
.meta{gap:20px;margin-top:10px;color:#9fb0cd}
.hero-card{position:relative;overflow:hidden}
.hero-svg{width:100%;height:auto;display:block}
.toolbox{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-weight:700;color:#f7fbff;border:1px dashed rgba(255,255,255,.2);padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.05)}
.card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:18px}
.card.tall{height:100%}
.avatar{font-size:56px;margin:18px auto}

/* Lists */
.ticks{list-style:none;padding:0;margin:12px 0}
.ticks li{position:relative;padding-left:26px;margin:.4rem 0;color:#c5ccda}
.ticks li:before{content:'✓';position:absolute;left:0;top:0;color:#9ee6ff}

/* FAQ */
.faq{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:10px;margin:10px 0}
.faq summary{cursor:pointer;font-weight:600;color:#e5e9f6}
.faq p{margin:.6rem 0 0}

/* Form */
.form{margin-top:10px}
label{display:block;margin:8px 0 6px;color:#e6e9ee;font-size:.95rem}
input,textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.02);color:#e6e9ee}
input:focus,textarea:focus{outline:none;border-color:#7dd3fc;box-shadow:0 0 0 3px rgba(125,211,252,.15)}
.contact-meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;color:#a7b1c4}

/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,.08);padding:20px 0;margin-top:40px}
footer .links{display:flex;gap:16px;flex-wrap:wrap}

/* --- HERO MEDIA (image) --- */
.hero-media{
  position:relative;
  width:100%;
  aspect-ratio: 4/3;
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:#0d1426;
}
.hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(1.05);
}
.hero-media:before{
  /* subtle chakra overlay */
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.00) 0%, rgba(0,0,0,.20) 100%),
    radial-gradient(60% 60% at 70% 15%, color-mix(in oklab,var(--chakra-7) 25%, transparent), transparent),
    radial-gradient(50% 50% at 25% 20%, color-mix(in oklab,var(--chakra-9) 20%, transparent), transparent);
  pointer-events:none;
}
.hero-media .label{
  position:absolute;left:20px;bottom:20px;
  padding:10px 14px;border-radius:14px;
  backdrop-filter: blur(6px);
  background: color-mix(in oklab, white 10%, rgba(10,16,30,.35));
  border:1px dashed rgba(255,255,255,.25);
  color:#fff;font-weight:800;font-size:1rem;letter-spacing:.3px;
  max-width:75%;
}

/* --- Chakra accents deepened --- */
:root{
  --chakra-1:#8B5A2B; --chakra-2:#D32F2F; --chakra-3:#F57C00;
  --chakra-4:#FBC02D; --chakra-5:#43A047; --chakra-6:#26C6DA;
  --chakra-7:#1E88E5; --chakra-8:#5E35B1; --chakra-9:#8E24AA;
  --bg:#0b1220; --text:#e6e9ee; --muted:#a7b1c4;
}
body{background: radial-gradient(1200px 600px at 80% -10%, rgba(94,53,177,.08), transparent), #0b1220;}
.card{background:rgba(255,255,255,.045)}
.site-header{background:rgba(10,16,30,.55)}
h1 .grad, .brand{}
.btn{background:linear-gradient(90deg,var(--chakra-7),var(--chakra-9));}
.badge{background:linear-gradient(90deg,var(--chakra-4),var(--chakra-5));}
a:hover{opacity:.9}


/* === Neutral theme override === */
:root{
  --bg:#0b1220;
  --text:#e6e9ee;
  --muted:#a7b1c4;
  --accent:#6cb3ff; /* soft blue */
  --accent2:#88a7ff;
}
body{background: radial-gradient(1200px 600px at 80% -10%, rgba(136,167,255,.06), transparent), var(--bg);}
a{color:var(--accent)}
.btn{background:linear-gradient(90deg,var(--accent),var(--accent2));border:none;color:#0b1220}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.18);color:#e6e9ee}
.badge{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#dfe6f6}
.site-header{background:rgba(10,16,30,.55)}
.hero-bg{background: radial-gradient(900px 500px at 70% 10%, rgba(136,167,255,.12), transparent), radial-gradient(800px 400px at 20% 10%, rgba(136,167,255,.08), transparent);opacity:.55}
.card.featured{box-shadow:0 0 0 1px rgba(136,167,255,.25),0 10px 30px -15px rgba(136,167,255,.2)}
input:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(108,179,255,.25)}
/* remove chakra strip if present */
.chakra-strip{display:none}

/* Hide any leftover captions */
.label,.toolbox{display:none !important}


/* ===== Hero Improvements (v3) ===== */
.grid2{align-items:center} /* align hero columns */
.hero-card{padding:16px}
.hero-media{
  position:relative;
  width:100%;
  height: clamp(320px, 48vw, 560px); /* bigger block responsive */
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:#0d1426;
  box-shadow: 0 20px 60px -20px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.05) inset;
}
.hero-media img{
  width:100%;
  height:100%;
  object-fit:contain;       /* keep entire image visible */
  display:block;
}
/* remove any label if remained */
.hero-media .label{display:none!important}

/* ===== Interior blocks polish ===== */
.section .section-title{font-size:1.8rem;margin:0 0 12px;color:#f4f6fb}
.section .section-sub{color:#a7b1c4;margin:0 0 18px}
.cards .card{transition:transform .15s ease, box-shadow .15s ease}
.cards .card:hover{transform:translateY(-2px);box-shadow:0 16px 36px -24px rgba(0,0,0,.6)}
.hero-card {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.hero-media {
  width: 100%;
  height: clamp(320px, 40vw, 480px); /* réduit la hauteur */
  border-radius: 0;
  border: none;
  box-shadow: none;
  background: transparent;
  aspect-ratio: unset;
  overflow: visible;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 0;
  box-shadow: none;
}
.benefit .b-emoji{
  font-size: 28px;
  line-height: 1;
  margin-bottom: 10px;
}
.benefit h3{
  margin: 4px 0 8px;
}
.benefit p{
  margin: 0;
}
<section id="efficience-humaine" class="section">
  <div class="container grid2">
    <div>
      <h2>L’efficience humaine</h2>
      <p>Votre texte explicatif ici.<br>Ajoutez tout le contenu souhaité.</p>
    </div>
    <div>
      <img src="logo.jpg" alt="Logo Human Efficience" style="width:100%;max-width:340px;display:block;margin:auto;">
    </div>
  </div>
</section>
.card.benefit {
  max-width: 420px;
  margin: 0 auto 18px auto;
  padding: 18px 22px;
  border-radius: 18px;
  background: #161d2b;
  display: flex;
  flex-direction: column;
}

.card.benefit .row.center {
  display: flex;
  align-items: center;
}

.card.benefit h3 {
  font-size: 1.15rem;
  margin: 0;
}

.cards.grid3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  justify-content: center;
}

@media (min-width: 700px) {
  .cards.grid3 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 900px;
    margin: 0 auto;
  }
  .card.benefit {
    max-width: 380px;
  }
}

@media (min-width: 1100px) {
  .cards.grid3 {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1200px;
  }
  .card.benefit {
    max-width: 340px;
  }
}
.card.module {
  max-width: 340px;
  margin: 0 auto 18px auto;
  padding: 16px 18px;
  border-radius: 16px;
  background: #161d2b;
  display: flex;
  flex-direction: column;
}

.card.module .row.center {
  display: flex;
  align-items: center;
}

.card.module h3 {
  font-size: 1.08rem;
  margin: 0;
}

.cards.grid1.modules {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: stretch; /* Les cartes prennent toute la largeur */
  max-width: none;      /* Supprime la limite de largeur */
  margin: 0;            /* Supprime le centrage */
}

.card.module {
  width: 100%;          /* Prend toute la largeur disponible */
  max-width: none;      /* Supprime la limite */
  margin: 0 0 18px 0;
  padding: 16px 18px;
  border-radius: 16px;
  background: #161d2b;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  justify-content: flex-start;
  align-items: flex-start;
}

:root {
  --bg: #0b1220;
  --text: #e6e9ee;
}

body {
  margin: 0;
  padding: 0;
  font-family: system-ui, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

h1, h2, h3 {
  margin: 0 0 .6rem 0;
  color: #f4f6fb;
}

p {
  margin: .5rem 0 1rem;
  color: #c5ccda;
}

.btn {
  display: inline-block;
  background: #1E88E5;
  color: #fff;
  padding: 10px 16px;
  border-radius: 14px;
  font-weight: 600;
  border: none;
  transition: .2s;
  text-decoration: none;
}

.btn.ghost {
  background: transparent;
  color: #e6e9ee;
  border: 1px solid #e6e9ee;
}

.section {
  padding: 48px 0;
}

.cards.grid1.modules {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: stretch;
  width: 100%;
  margin: 0;
}

.card.module {
  width: 100%;
  margin: 0 0 18px 0;
  padding: 16px 18px;
  border-radius: 16px;
  background: #161d2b;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  align-items: flex-start;
}

.card.module .row.center {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}

.card.module h3 {
  font-size: 1.08rem;
  margin: 0 0 0 10px;
  font-weight: bold;
}

.card.module p {
  margin: 10px 0 0 0;
  color: #c5ccda;
  text-align: left;
}

.card.module ul {
  margin: 8px 0 0 0;
  padding-left: 22px;
  text-align: left;
}

.card.module ul li {
  margin-bottom: 4px;
  color: #e6e9ee;
  text-align: left;
}

.card.benefit {
  width: 100%;
  margin: 0 0 18px 0;
  padding: 18px 22px;
  border-radius: 18px;
  background: #161d2b;
  display: flex;
  flex-direction: column;
}

.card.benefit .row.center {
  display: flex;
  align-items: center;
}

.card.benefit h3 {
  font-size: 1.15rem;
  margin: 0 0 0 10px;
}

.card.benefit p {
  margin: 0;
  color: #c5ccda;
}