:root{
  --turquoise:#40E0D0;
  --ink:#1F1F1F;
  --bg:#FAF7F5;
  --paper:#FFFFFF;
  --accent:#C4A46A;
  --shadow:0 4px 20px rgba(31,31,31,.08);
}
*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}
img{max-width:100%;height:auto;display:block}
.container{width:min(1200px,92%);margin:auto}
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:0;top:0;width:auto;height:auto;z-index:100;background:#000;color:#fff;padding:.5rem}

/* HEADER */
.site-header{background:#fff;border-bottom:1px solid #eee;position:sticky;top:0;z-index:10}
.header-inner{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0}
.logo{height:40px}

/* NAV */
.nav-toggle{display:none;background:#fff;border:1px solid #ccc;padding:.5rem .75rem;border-radius:.5rem;cursor:pointer}
.gn-menu{display:flex;gap:1rem;list-style:none;margin:0;padding:0}
.gn-menu a{text-decoration:none;color:var(--ink);padding:.5rem .75rem}
.gn-menu a:hover{color:var(--turquoise)}

/* HERO */
.hero{padding:3rem 0 0;background:#fff}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
.cocci-hero{position:absolute;top:1rem;left:20rem;height:26px;animation:bounce 6s infinite ease-in-out}
.hero-text{position:relative}
.hero-text h1{font-size:clamp(2rem, 2.2vw + 1rem, 3.2rem);margin:0 0 .25rem}
.lead{font-size:1.15rem;margin:0 0 1rem}
.hero-visual img{border-radius:1rem 1rem 0 0;box-shadow:var(--shadow)}
.cta-row{display:flex;gap:1rem;flex-wrap:wrap;margin-top:.25rem}
.btn{padding:.75rem 1rem;border-radius:.5rem;text-decoration:none;font-weight:600;display:inline-block}
.btn-primary{background:var(--ink);color:#fff}
.btn-secondary{border:2px solid var(--ink);color:var(--ink);background:transparent}

/* LIGNE TURQUOISE */
.line-turquoise{height:6px;background:linear-gradient(90deg,var(--turquoise),transparent);animation:flow 8s linear infinite}
@keyframes flow{from{background-position:0 0}to{background-position:200% 0}}

/* ADN */
.adn{padding:2.5rem 0}
.section-intro{max-width:720px}
.adn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem;list-style:none;padding:0;margin:1.25rem 0 0}
.adn-item{background:#fff;border-radius:1rem;box-shadow:var(--shadow);padding:1rem;text-align:center}
.adn-item img{width:80px;height:auto;margin:auto}
.adn-item h3{margin:.5rem 0 .25rem}

/* HISTOIRE */
.histoire{padding:2.5rem 0;background:#fff}
.timeline-figure img{border-radius:1rem;box-shadow:var(--shadow)}

/* ENTITÉS */
.entities{padding:2.5rem 0}
.grille-figure img{border-radius:1rem;box-shadow:var(--shadow)}
.entity-links{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;list-style:none;margin:1rem 0 0;padding:0}
.entity-links a{text-decoration:none;color:var(--ink);font-weight:600}
.entity-links a:hover{color:var(--turquoise)}

/* ENGAGEMENT */
.engagement {
  position: relative;
  aspect-ratio: 16/9; /* garde un ratio harmonieux */
  overflow: hidden;
  margin: 2rem 0;
  background: #000;
}

.engagement-bg {
  position: absolute;
  inset: 0; /* équivaut à top:0; right:0; bottom:0; left:0 */
  margin: 0; /* supprime les marges par défaut */
  padding: 0;
  width: 100%;
  height: 100%;
}

.engagement-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.engagement-content {
  position: relative;
  z-index: 1;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
  padding: 2rem;
}
.engagement-content h2{margin:0 0 .5rem}
.engagement-content ul{margin:0;padding-left:1.25rem}
.engagement-content li{margin:.25rem 0}

/* CONTACT */
.contact{padding:2.5rem 0;background:#fff}
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem}
.contact-form input,.contact-form textarea{width:100%;padding:.75rem;border-radius:.5rem;border:1px solid #e5e5e5;background:#fff}
.contact-form button{margin-top:.5rem}

/* FOOTER */
.site-footer{background:#fff;border-top:1px solid #eee;margin-top:2rem}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;padding:2rem 0}
.footer-bottom{border-top:1px solid #eee;padding:1rem 0;text-align:center;color:#666;font-size:.9rem}
.site-footer a, .site-footer a:link, .site-footer a:visited{color:var(--ink) !important;text-decoration:none;font-weight:500;transition:color .2s ease, text-decoration .2s ease}
.site-footer a:hover, .site-footer a:focus{color:var(--turquoise) !important;text-decoration:underline}

@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes flow{from{background-position:0 0}to{background-position:200% 0}}

/* RESPONSIVE */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .nav-toggle{display:inline-block}
  .gn-menu{display:none;position:absolute;right:1rem;top:64px;background:#fff;flex-direction:column;padding:.5rem;border-radius:.75rem;box-shadow:var(--shadow);width:min(260px,86vw);z-index:20}
  .gn-menu.is-open{display:flex}
  .engagement-content{margin-top:0}
  .contact-grid{grid-template-columns:1fr}
}