:root {
    --blue:       #1E9FD9;
    --blue-dark:  #1280B0;
    --green:      #3DAF4E;
    --green-dark: #2A8C3A;
    --yellow:     #F5C518;
    --red:        #E53935;
    --dark:       #141414;
    --dark2:      #1E2A1F;
    --white:      #FFFFFF;
    --offwhite:   #F7F9F7;
    --gray:       #5A6A5C;
    --light:      #E8F5E9;
  }

  * { margin:0; padding:0; box-sizing:border-box; }
  html { scroll-behavior:smooth; }

  body {
    font-family:'DM Sans', sans-serif;
    background: var(--offwhite);
    color: var(--dark);
    overflow-x: hidden;
  }

  /* ─── LOGO (suppression fond blanc) ─── */
  .logo-img {
    mix-blend-mode: multiply;
    /* Sur fond sombre, on inverse */
  }
  .logo-img-dark {
    filter: brightness(0) invert(1);
    opacity: 0.95;
  }
  .logo-img-nav {
    /* Sur fond vert foncé : on retire le blanc via multiply */
    mix-blend-mode: screen;
    height: 48px;
    width: auto;
  }

  /* ─── NAV ─── */
  nav {
    position: fixed;
    top:0; left:0; right:0;
    z-index:100;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0.8rem 3rem;
    background: var(--dark2);
    border-bottom: 3px solid var(--green);
    backdrop-filter: blur(12px);
  }

  .nav-logo { display:flex; align-items:center; }

  nav ul {
    list-style:none;
    display:flex;
    gap:2.2rem;
    align-items:center;
  }
  nav ul a {
    color: rgba(255,255,255,0.82);
    text-decoration:none;
    font-size:0.82rem;
    font-weight:500;
    letter-spacing:0.09em;
    text-transform:uppercase;
    transition:color 0.25s;
    padding-bottom:3px;
    border-bottom:2px solid transparent;
  }
  nav ul a:hover {
    color: var(--yellow);
    border-bottom-color: var(--yellow);
  }
  .nav-btn {
    background: var(--green);
    color: white !important;
    padding:0.45rem 1.2rem !important;
    border-radius:2px;
    border-bottom:none !important;
    transition: background 0.25s !important;
  }
  .nav-btn:hover { background: var(--blue) !important; color:white !important; }

  /* ─── HERO ─── */
  .hero {
    min-height:100vh;
    display:grid;
    grid-template-columns:1fr 1fr;
    overflow:hidden;
    background: var(--dark2);
    position:relative;
  }

  /* Bande diagonale décorative */
  .hero::after {
    content:'';
    position:absolute;
    inset:0;
    background: linear-gradient(125deg,
      rgba(30,159,217,0.06) 0%,
      transparent 45%,
      rgba(61,175,78,0.07) 100%);
    pointer-events:none;
  }

  /* Accent couleurs logo sur bord gauche */
  .hero-accent {
    position:absolute;
    top:0; left:0;
    width:5px;
    height:100%;
    background: linear-gradient(to bottom,
      var(--blue) 0%,
      var(--green) 40%,
      var(--yellow) 70%,
      var(--red) 100%);
  }

  .hero-left {
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:9rem 4rem 5rem 5.5rem;
    position:relative;
    z-index:2;
  }

  .hero-tagline {
    display:inline-flex;
    align-items:center;
    gap:0.6rem;
    font-size:0.72rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color: var(--yellow);
    margin-bottom:2rem;
    font-weight:600;
    animation: fadeUp 0.7s ease both;
  }
  .hero-tagline::before {
    content:'';
    width:28px; height:2px;
    background: var(--yellow);
    display:inline-block;
  }

  .hero h1 {
    font-family:'Playfair Display', serif;
    font-size:clamp(2.8rem, 4.5vw, 4.6rem);
    font-weight:900;
    line-height:1.08;
    color:white;
    margin-bottom:1.6rem;
    animation: fadeUp 0.7s ease 0.12s both;
  }
  .hero h1 .accent-blue { color: var(--blue); }
  .hero h1 .accent-green { color: var(--green); }

  .hero-desc {
    font-size:1rem;
    font-weight:300;
    line-height:1.85;
    color:rgba(255,255,255,0.65);
    max-width:460px;
    margin-bottom:2.5rem;
    animation: fadeUp 0.7s ease 0.24s both;
  }

  .hero-cta {
    display:flex;
    gap:1rem;
    flex-wrap:wrap;
    animation: fadeUp 0.7s ease 0.36s both;
  }

  .btn-green {
    background: var(--green);
    color:white;
    padding:0.85rem 2rem;
    border:none;
    font-family:'DM Sans',sans-serif;
    font-size:0.88rem;
    font-weight:600;
    letter-spacing:0.06em;
    text-decoration:none;
    cursor:pointer;
    transition:background 0.25s, transform 0.2s;
    display:inline-block;
  }
  .btn-green:hover { background:var(--green-dark); transform:translateY(-2px); }

  .btn-blue {
    background:transparent;
    color:var(--blue);
    padding:0.85rem 2rem;
    border:1.5px solid var(--blue);
    font-family:'DM Sans',sans-serif;
    font-size:0.88rem;
    font-weight:600;
    letter-spacing:0.06em;
    text-decoration:none;
    cursor:pointer;
    transition:background 0.25s, color 0.25s;
    display:inline-block;
  }
  .btn-blue:hover { background:var(--blue); color:white; }

  /* Hero stats */
  .hero-stats {
    display:flex;
    gap:2.5rem;
    margin-top:3rem;
    padding-top:2rem;
    border-top:1px solid rgba(255,255,255,0.1);
    animation: fadeUp 0.7s ease 0.48s both;
  }
  .hero-stat .num {
    font-family:'Playfair Display',serif;
    font-size:2rem;
    font-weight:900;
    display:block;
    line-height:1;
  }
  .hero-stat:nth-child(1) .num { color:var(--blue); }
  .hero-stat:nth-child(2) .num { color:var(--green); }
  .hero-stat:nth-child(3) .num { color:var(--yellow); }
  .hero-stat .label {
    font-size:0.7rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:rgba(255,255,255,0.45);
    margin-top:0.3rem;
    display:block;
  }

  /* Hero right - logo showcase */
  .hero-right {
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    z-index:2;
    overflow:hidden;
  }

  .hero-logo-frame {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  /* Cercles décoratifs */
  .ring {
    position:absolute;
    border-radius:50%;
    border:1px solid;
    animation: rotateSlow linear infinite;
  }
  .ring-1 {
    width:380px; height:380px;
    border-color:rgba(30,159,217,0.2);
    animation-duration:25s;
  }
  .ring-2 {
    width:300px; height:300px;
    border-color:rgba(61,175,78,0.25);
    animation-duration:18s;
    animation-direction:reverse;
  }
  .ring-3 {
    width:220px; height:220px;
    border-color:rgba(245,197,24,0.2);
    animation-duration:12s;
    border-style: dashed;
  }

  /* Points colorés sur les cercles */
  .ring-dot {
    position:absolute;
    width:10px; height:10px;
    border-radius:50%;
    top:-5px; left:50%;
    transform:translateX(-50%);
  }

  .logo-center {
    width:210px;
    height:210px;
    border-radius:50%;
    background:white;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow: 0 0 60px rgba(61,175,78,0.25), 0 0 120px rgba(30,159,217,0.12);
    position:relative;
    z-index:2;
  }
  .logo-center img {
    width:170px;
    height:auto;
  }

  /* Année badge */
  .year-badge {
    position:absolute;
    bottom:-1rem;
    right:-1rem;
    background:var(--green);
    color:white;
    padding:0.7rem 1.2rem;
    font-size:0.72rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    font-weight:600;
    z-index:3;
  }

  /* ─── SECTION BASE ─── */
  section { padding:6rem 5rem; }

  .section-label {
    font-size:0.7rem;
    letter-spacing:0.22em;
    text-transform:uppercase;
    font-weight:600;
    margin-bottom:0.8rem;
  }
  .section-title {
    font-family:'Playfair Display',serif;
    font-size:clamp(1.9rem,3vw,2.8rem);
    font-weight:700;
    line-height:1.15;
    margin-bottom:1.2rem;
  }

  /* ─── À PROPOS ─── */
  #about {
    background: var(--dark2);
    color:white;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5rem;
    align-items:center;
    position:relative;
    overflow:hidden;
  }
  #about::before {
    content:'';
    position:absolute;
    top:0; right:0;
    width:300px; height:300px;
    background:radial-gradient(circle, rgba(30,159,217,0.08) 0%, transparent 70%);
    pointer-events:none;
  }
  #about .section-label { color:var(--blue); }
  #about .section-title { color:white; }

  .about-text {
    font-size:0.97rem;
    line-height:1.9;
    color:rgba(255,255,255,0.65);
    font-weight:300;
  }
  .about-text p + p { margin-top:1.1rem; }
  .about-text strong { color:var(--yellow); font-weight:600; }

  .about-cards { display:flex; flex-direction:column; gap:1.2rem; }

  .about-card {
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    border-left:3px solid;
    padding:1.6rem 1.8rem;
    transition:background 0.3s, transform 0.3s;
  }
  .about-card:hover { background:rgba(255,255,255,0.07); transform:translateX(6px); }
  .about-card:nth-child(1) { border-left-color:var(--blue); }
  .about-card:nth-child(2) { border-left-color:var(--green); }
  .about-card:nth-child(3) { border-left-color:var(--yellow); }

  .about-card h4 {
    font-family:'Playfair Display',serif;
    font-size:1rem;
    margin-bottom:0.5rem;
  }
  .about-card:nth-child(1) h4 { color:var(--blue); }
  .about-card:nth-child(2) h4 { color:var(--green); }
  .about-card:nth-child(3) h4 { color:var(--yellow); }

  .about-card p {
    font-size:0.85rem;
    color:rgba(255,255,255,0.55);
    line-height:1.7;
  }

  /* ─── MISSIONS ─── */
  #missions { background:var(--offwhite); }
  #missions .section-label { color:var(--green); }

  .missions-intro {
    text-align:center;
    max-width:580px;
    margin:0 auto 4rem;
  }
  .missions-intro p {
    color:var(--gray);
    line-height:1.8;
    font-size:0.97rem;
  }

  .missions-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1.5rem;
  }

  .mission-card {
    background:white;
    padding:2.2rem 1.8rem;
    border-top:4px solid;
    box-shadow:0 2px 20px rgba(0,0,0,0.05);
    transition:box-shadow 0.3s, transform 0.3s;
    position:relative;
    overflow:hidden;
  }
  .mission-card::after {
    content:'';
    position:absolute;
    bottom:-30px; right:-30px;
    width:80px; height:80px;
    border-radius:50%;
    opacity:0.06;
  }
  .mission-card:nth-child(1) { border-top-color:var(--blue); }
  .mission-card:nth-child(1)::after { background:var(--blue); }
  .mission-card:nth-child(2) { border-top-color:var(--green); }
  .mission-card:nth-child(2)::after { background:var(--green); }
  .mission-card:nth-child(3) { border-top-color:var(--yellow); }
  .mission-card:nth-child(3)::after { background:var(--yellow); }
  .mission-card:nth-child(4) { border-top-color:var(--red); }
  .mission-card:nth-child(4)::after { background:var(--red); }

  .mission-card:hover {
    box-shadow:0 12px 40px rgba(0,0,0,0.1);
    transform:translateY(-5px);
  }

  .mission-icon { font-size:2.2rem; margin-bottom:1.2rem; display:block; }

  .mission-card h3 {
    font-family:'Playfair Display',serif;
    font-size:1.1rem;
    font-weight:700;
    margin-bottom:0.7rem;
    color:var(--dark);
  }
  .mission-card p { font-size:0.85rem; line-height:1.7; color:var(--gray); }

  /* ─── PROJETS ─── */
  #projects { background:var(--dark2); }
  #projects .section-label { color:var(--yellow); }
  #projects .section-title { color:white; }

  .projects-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.5rem;
    margin-top:3.5rem;
  }

  .project-card {
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    padding:2rem;
    position:relative;
    overflow:hidden;
    transition:background 0.3s, transform 0.3s;
  }
  .project-card:hover { background:rgba(255,255,255,0.08); transform:translateY(-4px); }

  .project-stripe {
    position:absolute;
    top:0; left:0; right:0;
    height:3px;
  }
  .project-card:nth-child(1) .project-stripe { background:var(--blue); }
  .project-card:nth-child(2) .project-stripe { background:var(--green); }
  .project-card:nth-child(3) .project-stripe { background:var(--yellow); }
  .project-card:nth-child(4) .project-stripe { background:var(--red); }
  .project-card:nth-child(5) .project-stripe { background:var(--blue); }
  .project-card:nth-child(6) .project-stripe { background:var(--green); }

  .project-org {
    display:inline-block;
    font-size:0.65rem;
    letter-spacing:0.15em;
    text-transform:uppercase;
    font-weight:600;
    padding:0.2rem 0.7rem;
    border-radius:2px;
    margin-bottom:1.2rem;
  }
  .project-card:nth-child(1) .project-org { background:rgba(30,159,217,0.15); color:var(--blue); }
  .project-card:nth-child(2) .project-org { background:rgba(61,175,78,0.15); color:var(--green); }
  .project-card:nth-child(3) .project-org { background:rgba(245,197,24,0.15); color:var(--yellow); }
  .project-card:nth-child(4) .project-org { background:rgba(229,57,53,0.15); color:#ef9a9a; }
  .project-card:nth-child(5) .project-org { background:rgba(30,159,217,0.15); color:var(--blue); }
  .project-card:nth-child(6) .project-org { background:rgba(61,175,78,0.15); color:var(--green); }

  .project-card h3 {
    font-family:'Playfair Display',serif;
    font-size:1.1rem;
    color:white;
    margin-bottom:0.8rem;
    line-height:1.3;
  }
  .project-card p { font-size:0.84rem; line-height:1.7; color:rgba(255,255,255,0.5); }

  /* ─── PARTENAIRES ─── */
  #partners { background:var(--light); }
  #partners .section-label { color:var(--green-dark); }

  .partners-intro {
    max-width:540px;
    font-size:0.97rem;
    line-height:1.8;
    color:var(--gray);
    margin-bottom:3.5rem;
  }

  .partners-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1px;
    background:#d0e8d4;
  }

  .partner-item {
    background:white;
    padding:1.6rem 1.2rem;
    text-align:center;
    transition:background 0.25s;
    cursor:default;
  }
  .partner-item:hover { background:#f0faf2; }

  .partner-name {
    display:block;
    font-weight:600;
    font-size:0.85rem;
    color:var(--dark);
    margin-bottom:0.25rem;
  }
  .partner-type { font-size:0.72rem; color:var(--gray); }

  /* ─── ODD ─── */
  #sdg {
    background: linear-gradient(135deg, var(--blue-dark) 0%, var(--dark2) 60%, var(--green-dark) 100%);
    color:white;
    text-align:center;
  }
  #sdg .section-label { color:var(--yellow); }
  #sdg .section-title { color:white; }

  .sdg-grid {
    display:flex;
    justify-content:center;
    gap:1.5rem;
    flex-wrap:wrap;
    margin-top:3rem;
  }

  .sdg-badge {
    width:140px;
    padding:2rem 1rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0.8rem;
    border:1px solid rgba(255,255,255,0.12);
    background:rgba(255,255,255,0.05);
    transition:background 0.3s, transform 0.3s, border-color 0.3s;
    cursor:default;
  }
  .sdg-badge:hover { transform:translateY(-6px); }
  .sdg-badge:nth-child(1):hover { background:rgba(30,159,217,0.2); border-color:var(--blue); }
  .sdg-badge:nth-child(2):hover { background:rgba(61,175,78,0.2); border-color:var(--green); }
  .sdg-badge:nth-child(3):hover { background:rgba(245,197,24,0.2); border-color:var(--yellow); }
  .sdg-badge:nth-child(4):hover { background:rgba(229,57,53,0.2); border-color:var(--red); }

  .sdg-num {
    font-family:'Playfair Display',serif;
    font-size:1.8rem;
    font-weight:900;
  }
  .sdg-badge:nth-child(1) .sdg-num { color:var(--blue); }
  .sdg-badge:nth-child(2) .sdg-num { color:var(--green); }
  .sdg-badge:nth-child(3) .sdg-num { color:var(--yellow); }
  .sdg-badge:nth-child(4) .sdg-num { color:#ef9a9a; }

  .sdg-name { font-size:0.75rem; letter-spacing:0.06em; text-transform:uppercase; color:rgba(255,255,255,0.65); }

  /* ─── CONTACT ─── */
  #contact {
    background:var(--offwhite);
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5rem;
    align-items:center;
  }
  #contact .section-label { color:var(--green-dark); }

  .contact-info { display:flex; flex-direction:column; gap:1.3rem; margin-top:2rem; }

  .contact-item {
    display:flex;
    align-items:center;
    gap:1rem;
    font-size:0.93rem;
    color:var(--gray);
  }
  .contact-icon {
    width:40px; height:40px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1rem;
    flex-shrink:0;
  }
  .contact-item:nth-child(1) .contact-icon { background:rgba(30,159,217,0.12); }
  .contact-item:nth-child(2) .contact-icon { background:rgba(61,175,78,0.12); }
  .contact-item:nth-child(3) .contact-icon { background:rgba(245,197,24,0.12); }

  .contact-form { display:flex; flex-direction:column; gap:1rem; }

  .contact-form input,
  .contact-form textarea {
    background:white;
    border:1.5px solid #d8e8da;
    padding:0.9rem 1.1rem;
    color:var(--dark);
    font-family:'DM Sans',sans-serif;
    font-size:0.9rem;
    outline:none;
    transition:border-color 0.25s;
    width:100%;
    resize:vertical;
  }
  .contact-form input:focus,
  .contact-form textarea:focus { border-color:var(--green); }

  .contact-form button {
    background:var(--green);
    color:white;
    padding:1rem;
    border:none;
    font-family:'DM Sans',sans-serif;
    font-size:0.88rem;
    font-weight:600;
    letter-spacing:0.08em;
    text-transform:uppercase;
    cursor:pointer;
    transition:background 0.25s;
  }
  .contact-form button:hover { background:var(--green-dark); }

  /* ─── FOOTER ─── */
  footer {
    background:var(--dark2);
    border-top:3px solid var(--green);
    padding:2rem 5rem;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:1rem;
  }
  .footer-right { font-size:0.78rem; color:rgba(255,255,255,0.35); }

  /* Bande couleurs logo en bas */
  .color-strip {
    height:4px;
    background:linear-gradient(to right,
      var(--blue) 0%,
      var(--blue) 25%,
      var(--green) 25%,
      var(--green) 50%,
      var(--yellow) 50%,
      var(--yellow) 75%,
      var(--red) 75%,
      var(--red) 100%);
  }

  /* ─── PROJET VEDETTE ─── */
  .project-card-featured {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, rgba(30,159,217,0.12) 0%, rgba(61,175,78,0.08) 100%);
    border:1px solid rgba(30,159,217,0.3);
    border-top: 4px solid var(--blue);
    padding:0;
    display:grid;
    grid-template-columns: 420px 1fr;
    overflow:hidden;
    position:relative;
    transition: transform 0.3s, box-shadow 0.3s;
  }
  .project-card-featured:hover {
    transform:translateY(-4px);
    box-shadow:0 20px 50px rgba(30,159,217,0.2);
  }
  .featured-img {
    width:100%;
    height:100%;
    object-fit:cover;
    min-height:240px;
    display:block;
  }
  .featured-content {
    padding:2.5rem;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:1rem;
  }
  .featured-badge-row { display:flex; gap:0.7rem; flex-wrap:wrap; align-items:center; }
  .badge-new {
    background:var(--blue); color:white; font-size:0.62rem; font-weight:700;
    letter-spacing:0.15em; text-transform:uppercase; padding:0.3rem 0.8rem;
    animation: pulse 2s ease infinite;
  }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.65} }
  .badge-fef {
    background:rgba(245,197,24,0.15); color:var(--yellow); font-size:0.62rem;
    font-weight:600; letter-spacing:0.1em; text-transform:uppercase;
    padding:0.3rem 0.8rem; border:1px solid rgba(245,197,24,0.3);
  }
  .badge-lieu {
    background:rgba(61,175,78,0.12); color:var(--green); font-size:0.62rem;
    font-weight:600; padding:0.3rem 0.8rem; border:1px solid rgba(61,175,78,0.25);
  }
  .featured-title {
    font-family:"Playfair Display",serif; font-size:1.55rem; font-weight:900;
    color:white; line-height:1.2;
  }
  .featured-title span { color:var(--blue); }
  .featured-desc { font-size:0.9rem; line-height:1.78; color:rgba(255,255,255,0.6); }
  .featured-partners {
    display:flex; align-items:center; gap:0.8rem; flex-wrap:wrap;
    padding-top:0.8rem; border-top:1px solid rgba(255,255,255,0.08);
  }
  .featured-partners > span { font-size:0.7rem; color:rgba(255,255,255,0.38); letter-spacing:0.06em; text-transform:uppercase; }
  .fp-tag {
    background:rgba(255,255,255,0.07); color:rgba(255,255,255,0.7);
    font-size:0.74rem; font-weight:500; padding:0.25rem 0.7rem;
    border:1px solid rgba(255,255,255,0.12);
  }

  /* ─── ANIMATIONS ─── */
  @keyframes fadeUp {
    from { opacity:0; transform:translateY(24px); }
    to { opacity:1; transform:translateY(0); }
  }
  @keyframes rotateSlow {
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
  }

  .reveal {
    opacity:0;
    transform:translateY(28px);
    transition:opacity 0.65s ease, transform 0.65s ease;
  }
  .reveal.visible { opacity:1; transform:translateY(0); }

  /* ─── RESPONSIVE ─── */
  @media(max-width:900px) {
    nav { padding:0.8rem 1.5rem; }
    nav ul { gap:1rem; }
    nav ul li:last-child { display:none; }
    .hero { grid-template-columns:1fr; }
    .hero-left { padding:7rem 2rem 3rem; }
    .hero-right { display:none; }
    section { padding:4rem 2rem; }
    #about,#contact { grid-template-columns:1fr; gap:2.5rem; }
    .missions-grid,.projects-grid { grid-template-columns:1fr 1fr; }
    .partners-grid { grid-template-columns:1fr 1fr; }
    footer { padding:1.5rem 2rem; flex-direction:column; text-align:center; }
  }