/* ============================================================
   CONTRECHAMP — Feuille de style
   Charte : bleu #0C24D8 · corail #FC5454 · vert #00CC6C · orange #FC9000
   Fond crème #FBF7EE · Poppins (titres) + Inter (corps)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;700;800&family=Inter:wght@400;500;600&display=swap');

:root {
  --blue:   #0F2DDE;
  --blue-2: #0048F0;
  --red:    #FF5E5B;
  --green:  #00CC6C;
  --orange: #FC9000;
  --ink:    #0E1116;
  --cream:  #FBF7EE;
  --cream-2:#F4EEE0;
  --white:  #FFFFFF;

  --font-title: 'Poppins', system-ui, sans-serif;
  --font-body:  'Inter', system-ui, sans-serif;

  --maxw: 1180px;
  --radius: 28px;
  --radius-sm: 16px;
  --shadow: 0 18px 50px -22px rgba(12,36,216,.28);
  --shadow-soft: 0 10px 30px -18px rgba(14,17,22,.35);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,h2,h3 { font-family: var(--font-title); margin: 0; line-height: 1.05; }
h1 { font-weight: 800; font-size: clamp(2.8rem, 6.5vw, 5.6rem); letter-spacing: -.02em; }
h2 { font-weight: 700; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.015em; }
h3 { font-weight: 500; font-size: clamp(1.2rem, 2vw, 1.6rem); }
p { margin: 0 0 1rem; }
a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

/* ---------- accents typographiques ---------- */
.hl-blue   { color: var(--blue); }
.hl-red    { color: var(--red); }
.hl-green  { color: var(--green); }
.hl-orange { color: var(--orange); }

.underline-svg { display:inline-block; position:relative; }
.underline-svg::after{
  content:""; position:absolute; left:-2%; right:-2%; bottom:-.12em; height:.28em;
  background: no-repeat center/100% 100%;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='16' viewBox='0 0 200 16'><path d='M3 11 C60 3 140 3 197 8' stroke='%2300CC6C' stroke-width='5' fill='none' stroke-linecap='round'/></svg>");
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251,247,238,.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(14,17,22,.06);
}
.nav .wrap { display:flex; align-items:center; justify-content:space-between; height:74px; gap:20px; }
.nav__brand { display:flex; align-items:center; gap:12px; font-family:var(--font-title); font-weight:800; font-size:1.35rem; }
.nav__brand svg { width:40px; height:34px; }
.nav__links { display:flex; align-items:center; gap:30px; }
.nav__links a { font-weight:600; font-size:.98rem; position:relative; padding:6px 0; }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--blue); transition:width .28s ease; }
.nav__links a:hover::after{ width:100%; }
.nav__cta {
  background: var(--red); color:#fff; padding:13px 32px; border-radius:999px;
  font-weight:700; font-family:var(--font-title); font-size:.95rem; line-height:1; white-space:nowrap;
  box-shadow: 0 8px 22px -10px rgba(255,94,91,.8); transition: transform .2s ease, box-shadow .2s ease;
}
.nav__cta:hover { transform: translateY(-2px); }
.nav__burger { display:none; background:none; border:0; cursor:pointer; }

/* ============================================================
   HERO
   ============================================================ */
.hero { position:relative; padding: clamp(40px,7vw,90px) 0 clamp(60px,9vw,120px); overflow:visible; }
.hero__grid { display:grid; grid-template-columns: 1.05fr .95fr; gap:48px; align-items:center; }

.hero__blob {
  position:absolute; z-index:0; border-radius:46% 54% 60% 40% / 52% 44% 56% 48%;
}
.hero__blob--blue { width:640px; height:560px; left:-180px; top:-40px; background:var(--blue); opacity:.10; }
.hero__blob--red  { width:420px; height:420px; right:-120px; bottom:-120px; background:var(--red); opacity:.12; }

.hero__content { position:relative; z-index:2; }
.hero h1 { margin-bottom:18px; }
.hero__baseline { font-family:var(--font-title); font-weight:700; font-size:clamp(1.2rem,2.2vw,1.6rem); color:var(--blue); margin-bottom:20px; }
.hero__intro { font-size:1.12rem; max-width:34ch; color:#333; margin-bottom:34px; }

.btn {
  display:inline-flex; align-items:center; gap:10px; font-family:var(--font-title); font-weight:700;
  padding:15px 30px; border-radius:999px; font-size:1rem; cursor:pointer; border:0;
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn--primary { background:var(--red); color:#fff; box-shadow:0 12px 30px -12px rgba(252,84,84,.85); }
.btn--primary:hover { transform:translateY(-3px); box-shadow:0 16px 34px -12px rgba(252,84,84,.95); }
.btn--ghost { background:transparent; color:var(--blue); border:2px solid var(--blue); }
.btn--ghost:hover { background:var(--blue); color:#fff; transform:translateY(-3px); }
.hero__ctas { display:flex; flex-wrap:wrap; gap:16px; }

/* visuel hero droite : photo dans forme organique + pastille verte */
.hero__visual { position:relative; z-index:1; min-height:460px; }
.hero__photo {
  position:absolute; inset:0;
  border-radius: 46% 54% 48% 52% / 50% 46% 54% 50%;
  overflow:hidden; box-shadow: var(--shadow);
  border:6px solid var(--blue);
}
.hero__photo img { width:100%; height:100%; object-fit:cover; object-position:center center; display:block; }
.hero__shape-green {
  position:absolute; width:110px; height:110px; left:-28px; top:38px;
  background:var(--green); border-radius:52% 48% 58% 42% / 48% 52% 48% 52%;
  z-index:3; box-shadow:0 14px 34px -16px rgba(0,204,108,.6);
}
/* grand rond corail PLEIN qui déborde du hero sur la section Manifeste */
.hero__overflow {
  position:absolute; z-index:1; right:-70px; bottom:-150px;
  width:340px; height:340px; border-radius:50%;
  background:var(--red);
  box-shadow: 0 30px 70px -30px rgba(255,94,91,.55);
}

/* piliers sous le hero */
.pillars { position:relative; z-index:2; margin-top:clamp(50px,6vw,80px); }
.pillars__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.pillar { display:flex; flex-direction:column; gap:6px; }
.pillar__icon { width:56px; height:56px; border-radius:50%; display:grid; place-items:center; margin-bottom:8px; border:3px solid; }
.pillar__icon svg { width:26px; height:26px; }
.pillar.green .pillar__icon { border-color:var(--green); color:var(--green); }
.pillar.blue  .pillar__icon { border-color:var(--blue);  color:var(--blue); }
.pillar.red   .pillar__icon { border-color:var(--red);   color:var(--red); }
.pillar h3 { font-weight:700; font-size:1.25rem; }
.pillar p { color:#555; margin:0; font-size:1rem; }

/* ============================================================
   SECTIONS
   ============================================================ */
.section { position:relative; padding: clamp(70px,9vw,120px) 0; }
.section--tinted { background:var(--cream-2); }
.section__head { max-width:720px; margin-bottom:clamp(40px,5vw,64px); }
.kicker {
  display:inline-block; font-family:var(--font-title); font-weight:700; font-size:.82rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--blue);
  background:rgba(12,36,216,.08); padding:7px 15px; border-radius:999px; margin-bottom:18px;
}
.section__head h2 { margin-bottom:8px; }

/* MANIFESTE */
.manifest { display:grid; gap:clamp(28px,4vw,44px); }
.mblock { position:relative; padding:clamp(30px,4vw,46px); background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow-soft); overflow:hidden; }
.mblock::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:8px; }
.mblock:nth-child(1)::before{ background:var(--blue); }
.mblock:nth-child(2)::before{ background:var(--red); }
.mblock:nth-child(3)::before{ background:var(--green); }
.mblock h3 { font-size:clamp(1.5rem,2.4vw,2rem); font-weight:700; margin-bottom:14px; }
.mblock:nth-child(1) h3 { color:var(--blue); }
.mblock:nth-child(2) h3 { color:var(--red); }
.mblock:nth-child(3) h3 { color:var(--green); }
.mblock p { color:#333; max-width:70ch; }
.mblock__pull { font-family:var(--font-title); font-weight:500; font-size:1.15rem; font-style:italic; color:var(--ink); margin-top:18px; padding-left:18px; border-left:3px solid currentColor; }
.mblock:nth-child(1) .mblock__pull{ border-color:var(--blue); }
.mblock:nth-child(2) .mblock__pull{ border-color:var(--red); }
.mblock:nth-child(3) .mblock__pull{ border-color:var(--green); }
.mblock__deco { position:absolute; right:-40px; bottom:-40px; width:150px; height:150px; opacity:.08; border-radius:50%; }
.mblock:nth-child(1) .mblock__deco{ background:var(--blue); }
.mblock:nth-child(2) .mblock__deco{ background:var(--red); }
.mblock:nth-child(3) .mblock__deco{ background:var(--green); }

/* ACTIONS */
.actions__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.action {
  background:var(--white); border-radius:var(--radius); padding:32px 28px; box-shadow:var(--shadow-soft);
  transition: transform .25s ease, box-shadow .25s ease; position:relative; overflow:hidden;
}
.action:hover { transform:translateY(-6px); box-shadow:0 24px 48px -22px rgba(14,17,22,.4); }
.action__dot { width:44px; height:44px; border-radius:14px; margin-bottom:18px; }
.action.blue .action__dot{ background:var(--blue); }
.action.red .action__dot{ background:var(--red); }
.action.green .action__dot{ background:var(--green); }
.action.orange .action__dot{ background:var(--orange); }
.action h3 { font-weight:700; font-size:1.25rem; margin-bottom:12px; }
.action p { color:#555; font-size:.98rem; margin:0; }

/* FORMULAIRE */
.formwrap { margin-top:clamp(60px,7vw,90px); background:var(--blue); border-radius:clamp(28px,4vw,44px); padding:clamp(40px,6vw,72px); color:#fff; position:relative; overflow:hidden; }
.formwrap::after{ content:""; position:absolute; right:-80px; top:-80px; width:280px; height:280px; background:var(--blue-2); border-radius:50%; opacity:.5; }
.formwrap__inner { position:relative; z-index:2; display:grid; grid-template-columns: .85fr 1.15fr; gap:48px; align-items:start; }
.formwrap .kicker { background:rgba(255,255,255,.16); color:#fff; }
.formwrap h2 { color:#fff; margin-bottom:16px; }
.formwrap__intro { color:rgba(255,255,255,.9); font-size:1.05rem; }
.form { display:grid; gap:16px; }
.form label { font-weight:600; font-size:.9rem; margin-bottom:6px; display:block; }
.form input, .form select, .form textarea {
  width:100%; padding:14px 16px; border-radius:14px; border:0; font-family:var(--font-body);
  font-size:1rem; background:rgba(255,255,255,.95); color:var(--ink);
}
.form textarea { min-height:110px; resize:vertical; }
.form__row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form__check { display:flex; align-items:flex-start; gap:10px; font-size:.9rem; }
.form__check input { width:auto; margin-top:3px; }
.form .btn--primary { justify-self:start; margin-top:6px; }

/* PERSONNES / ENTREPRISES / PARTENAIRES */
.subhead { margin: clamp(50px,6vw,80px) 0 26px; }
.subhead:first-of-type { margin-top:0; }
.subhead h3 { font-family:var(--font-title); font-weight:700; font-size:clamp(1.4rem,2.4vw,1.9rem); }
.subhead p { color:#555; margin-top:6px; max-width:60ch; }

.cards { display:grid; gap:20px; }
.cards--people { grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); }
.cards--comp   { grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }

.pcard {
  background:var(--white); border-radius:var(--radius-sm); padding:24px 22px; box-shadow:var(--shadow-soft);
  display:flex; flex-direction:column; gap:8px; transition:transform .22s ease, box-shadow .22s ease;
}
.pcard:hover { transform:translateY(-4px); box-shadow:0 18px 40px -20px rgba(14,17,22,.4); }
.pcard__avatar { width:64px; height:64px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-title); font-weight:700; color:#fff; font-size:1.2rem; margin-bottom:6px; overflow:hidden; }
.pcard__avatar--img { background:var(--cream-2); }
.pcard__avatar--img img { width:100%; height:100%; object-fit:cover; }
.pcard__name { font-family:var(--font-title); font-weight:700; font-size:1.1rem; }
.pcard__role { color:#666; font-size:.9rem; }
.pcard__link { color:var(--blue); font-weight:600; font-size:.9rem; margin-top:auto; display:inline-flex; align-items:center; gap:6px; }
.pcard--join {
  background:transparent; border:2px dashed var(--blue); align-items:center; justify-content:center; text-align:center;
  color:var(--blue); font-family:var(--font-title); font-weight:700; font-size:1.15rem; cursor:pointer; min-height:150px;
}
.pcard--join:hover { background:rgba(12,36,216,.05); }

/* PARTENAIRES */
.partners { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:8px; }
.partner {
  background:var(--white); border-radius:var(--radius-sm); padding:34px 22px; text-align:center; box-shadow:var(--shadow-soft);
  font-family:var(--font-title); font-weight:700; font-size:1.25rem; transition:transform .22s ease;
  display:flex; align-items:center; justify-content:center; min-height:110px; position:relative;
}
.partner:nth-child(1){ color:var(--blue); }
.partner:nth-child(2){ color:var(--red); }
.partner:nth-child(3){ color:var(--green); }
.partner:nth-child(4){ color:var(--orange); }
.partner:hover { transform:translateY(-5px); }
.partner--join {
  background:transparent; border:2px dashed var(--blue); color:var(--blue);
  box-shadow:none; cursor:pointer;
}
.partner--join:hover { background:rgba(15,45,222,.05); }

/* gimmicks décoratifs bas de page (section Qui sommes-nous) */
#qui { overflow:hidden; }
#qui::before {
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:260px; height:260px; right:-90px; top:120px;
  background:var(--green); opacity:.10;
  border-radius:58% 42% 48% 52% / 52% 58% 42% 48%;
}
#qui::after {
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:190px; height:190px; left:-80px; bottom:180px;
  background:var(--orange); opacity:.12;
  border-radius:52% 48% 58% 42% / 48% 52% 48% 52%;
}
#qui .wrap { position:relative; z-index:1; }
/* petits éclats “souligne” décoratifs */
.spark { position:absolute; z-index:0; pointer-events:none; }
.spark svg{ display:block; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background:var(--white); color:var(--ink); padding: clamp(70px,8vw,100px) 0 40px; position:relative; overflow:hidden; }
/* vague colorée en haut du footer */
.footer::before{
  content:""; position:absolute; top:0; left:0; right:0; height:10px;
  background: linear-gradient(90deg, var(--blue) 0 30%, var(--red) 30% 60%, var(--orange) 60% 80%, var(--green) 80% 100%);
}
/* formes organiques discrètes dans le footer */
.footer__deco1, .footer__deco2 { position:absolute; z-index:0; pointer-events:none; border-radius:50%; }
.footer__deco1 { width:300px; height:300px; right:-120px; bottom:-140px; background:var(--blue); opacity:.16; }
.footer__deco2 { width:160px; height:160px; right:180px; top:-60px; background:var(--red); opacity:.14; border-radius:58% 42% 48% 52% / 52% 58% 42% 48%; }
.footer .wrap{ position:relative; z-index:1; }
.footer__wave { display:block; width:100%; height:auto; margin-bottom:-6px; }
.footer__grid { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px; align-items:start; }
.footer__brand { display:flex; align-items:center; gap:12px; font-family:var(--font-title); font-weight:800; font-size:1.4rem; margin-bottom:14px; }
.footer__brand svg{ width:226px; height:178px; }
.footer__tag { color:rgba(255,255,255,.7); font-family:var(--font-title); font-weight:500; }
.footer h4 { font-family:var(--font-title); font-weight:700; font-size:1rem; margin:0 0 16px; }
.footer__links { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.footer__links a { color:var(--ink); font-size:.95rem; }
.footer__links a:hover { color:var(--ink); }
.footer__contact a { color:var(--red); font-weight:700; font-size:1.15rem; font-family:var(--font-title); }
.footer__legal { margin-top:44px; padding-top:24px; border-top:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.5); font-size:.85rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px){
  .hero__grid { grid-template-columns:1fr; }
  .hero__visual { min-height:320px; order:-1; }
  .pillars__grid { grid-template-columns:1fr; gap:22px; }
  .actions__grid { grid-template-columns:1fr 1fr; }
  .formwrap__inner { grid-template-columns:1fr; gap:28px; }
  .partners { grid-template-columns:1fr 1fr; }
  .footer__grid { grid-template-columns:1fr; }
  .nav__links { display:none; }
  .nav__links.open {
    display:flex; position:absolute; top:74px; left:0; right:0; flex-direction:column; gap:18px;
    background:var(--cream); padding:24px 28px; box-shadow:var(--shadow-soft);
  }
  .nav__burger { display:block; }
}
@media (max-width: 560px){
  .actions__grid { grid-template-columns:1fr; }
  .form__row { grid-template-columns:1fr; }
  .partners { grid-template-columns:1fr; }
}