:root{
    --bg:#f6f8fb;
    --dark-blue:#0b2545; /* bleu foncé */
    --green:#0aa678;     /* vert */
    --yellow:#f2c94c;    /* jaune */
    --glass: rgba(255,255,255,0.7);
    --text:#0f1720;
    --accent-contrast:#ffffff;
    --max-width:1100px;
  }

  /* reset simple */
  *{box-sizing:border-box}
  html,body{height: 100%;
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial;
  color: var(--text);

  /* fond avec ton image bg.png */
  background: url('bg.png') no-repeat center center fixed;
  background-size: cover;}

  /* Container for snap scrolling */
  .snap-container{
    height:100vh;
    overflow-y:auto;
    scroll-snap-type:y mandatory;
    scroll-behavior:smooth;
  }

  /* Sections that snap */
  .section{
    min-height:100vh;
    padding:5% 5%; /* contenu décalé de 5% selon votre demande */
    display:flex;
    align-items:center;
    justify-content:center;
    scroll-snap-align:start;
    position:relative;
    transition:background-color .5s ease;
  }

  /* Card-like content area */
  .card{
    width:100%;
    max-width:var(--max-width);
    background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.85));
    border-radius:16px;
    padding:32px;
    box-shadow: 0 8px 30px rgba(11,37,69,0.08);
    backdrop-filter: blur(6px);
  }

  h1,h2,h3{margin:0 0 12px 0}
  p{margin:0 0 12px 0;line-height:1.5}

  /* Intro / hero */
  .hero{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:center}
  .hero .eyebrow{display:inline-block;padding:6px 12px;border-radius:999px;background:var(--green);color:var(--accent-contrast);font-weight:600;margin-bottom:10px}
  .hero h1{color:var(--dark-blue);font-size:28px}
  .hero p.lead{font-size:16px;color:#374151}

  .cta-row{margin-top:18px;display:flex;gap:12px}
  .btn{display:inline-block;padding:10px 16px;border-radius:10px;font-weight:600;text-decoration:none;cursor:pointer}
  .btn-primary{background:var(--dark-blue);color:var(--accent-contrast)}
  .btn-outline{background:transparent;border:2px solid var(--green);color:var(--green)}

  /* Right side card (quick facts) */
  .quick{background:linear-gradient(135deg,var(--dark-blue),#12355a);color:var(--accent-contrast);padding:18px;border-radius:12px}
  .quick ul{list-style:none;padding:0;margin:0}
  .quick li{margin:8px 0}

  /* Photos section */
  .gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
  .gallery img{width:100%;height:160px;object-fit:cover;border-radius:8px;display:block;box-shadow:0 6px 20px rgba(11,37,69,0.08)}

  /* Contact / form link */
  .contact-grid{display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:start}
  .contact-card{padding:18px;border-radius:10px;background:linear-gradient(180deg, rgba(10,166,120,0.08), rgba(255,255,255,0.6));}

  /* Fixed header + dot nav */
  header{position:fixed;left:0;right:0;top:0px;display:flex;justify-content:center;pointer-events:none;z-index:60}
  header .topbar{width:100%;max-width:1200px;padding:8px 14px;background:transparent;display:flex;align-items:center;justify-content:space-between;pointer-events:auto}
  .brand{display:flex;gap:12px;align-items:center}
  .logo{width: 50px;
  height: 50px;
  border-radius: 10px;
  background-color: #7a002b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-contrast);
  font-weight: 700;}
  .imageLogo{width: 110%;height: auto;}
  nav.main a{margin-left:12px;color:var(--dark-blue);text-decoration:none;font-weight:600}

  /* dots nav */
  .dots{position:fixed;right:18px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px;z-index:70}
  .dots a{width:12px;height:12px;border-radius:999px;display:block;box-shadow:0 2px 6px rgba(11,37,69,0.12);border:2px solid rgba(255,255,255,0.6);background:rgba(255,255,255,0.9);text-indent:-9999px}
  .dots a.active{background:linear-gradient(135deg,var(--dark-blue),var(--green));width:14px;height:14px;}

  footer{padding:18px;text-align:center;color:#475569}

  /* Animations between sections (appear when active) */
  .section{opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.2,.9,.2,1), transform .6s cubic-bezier(.2,.9,.2,1)}
  .section.active{opacity:1;transform:none}

  /* Slight color variations per section */
  #presentation{background:linear-gradient(180deg,rgba(11,37,69,0.03),rgba(10,166,120,0.02))}
  #photos{background:linear-gradient(180deg,rgba(10,166,120,0.03),rgba(242,201,76,0.02))}
  #contact{background:linear-gradient(180deg,rgba(242,201,76,0.03),rgba(11,37,69,0.02))}
 
  /* Responsive */
  @media (max-width:900px){
    .hero{grid-template-columns:1fr}
    .contact-grid{grid-template-columns:1fr}
    .quick{display:none}
    .dots{right:2px}
    .section{padding-top: 30%;}
    header{background: #7a002b; padding: 0%;}
    header .main{text-size-adjust: 75%;}
  }

  /* Small visual helpers */
  .kicker{color:var(--green);font-weight:700}
  .muted{color:#6b7280}