:root{
    --bg:            #FFF4EC;
    --bg-alt:        #FFE7D8;
    --card:          #FFFDF9;
    --coral:         #FF6B47;
    --coral-deep:    #E24A28;
    --coral-soft:    #FFC9B0;
    --teal:          #2E6F68;
    --teal-soft:     #CFE7E2;
    --ink:           #3B2216;
    --ink-soft:      #7A5C4C;

    --display: 'Baloo 2', sans-serif;
    --body:    'Work Sans', sans-serif;
    --mono:    'Space Mono', monospace;

    --radius-lg: 40px;
    --radius-md: 24px;
    --container: 1120px;
  }
  *{box-sizing:border-box; 
    margin:0; 
    padding:0; 
  }
  html{
    scroll-behavior:smooth; 
  }
body{
  background:var(--bg); 
  color:var(--ink); 
  font-family:var(--body); 
  line-height:1.55; 
  overflow-x:hidden; 
  }
body::before{
  content:""; 
  position:fixed; 
  inset:0; 
  pointer-events:none; 
  z-index:9000; 
  opacity:.05; 
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }
a{
  color:inherit; 
  text-decoration:none;
  }
img{
  max-width:100%; 
  display:block;
  }
section{
  position:relative;
  }
.wrap{
  max-width:var(--container); 
  margin:0 auto; 
  padding:0 32px;
  }
h1,h2,h3,h4{
  font-family:var(--display); 
  font-weight:700; 
  line-height:1.08; 
  letter-spacing:-.01em; 
  }
.eyebrow{ 
  font-family:var(--mono); 
  font-size:.72rem; 
  letter-spacing:.14em; 
  text-transform:uppercase; 
  color:var(--coral-deep); 
  font-weight:700; 
  margin-bottom:14px; 
  display:inline-block; 
  }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; 
    animation-iteration-count:1 !important; 
    transition-duration:.001ms !important; 
    scroll-behavior:auto !important; } 
  }

.bubble{
  position:absolute; 
  border-radius:50%; 
  pointer-events:none;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.9), rgba(255,255,255,0) 40%),
    radial-gradient(circle at 68% 72%, rgba(255,255,255,.35), rgba(255,255,255,0) 45%),
    linear-gradient(135deg, rgba(255,107,71,.55), rgba(46,111,104,.35));
  box-shadow: inset 0 0 20px rgba(255,255,255,.4), 0 12px 30px rgba(226,74,40,.12);
  animation: drift 9s ease-in-out infinite;
  }
.bubble.alt{
  background:radial-gradient(circle at 32% 30%, rgba(255,255,255,.95), rgba(255,255,255,0) 38%), linear-gradient(135deg, rgba(255,201,176,.8), rgba(255,107,71,.25));
  }
@keyframes drift{
  0%,100%{ transform:translateY(0) translateX(0) scale(1); } 50%{ transform:translateY(-18px) translateX(10px) scale(1.03); } 
  }

/* navigation */
header{
  position:sticky; 
  top:0; 
  z-index:500; 
  backdrop-filter:blur(10px); 
  background:rgba(255,244,236,.86); 
  border-bottom:1px solid rgba(59,34,22,.08);
  }
nav.wrap{
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  padding-top:16px; 
  padding-bottom:16px; 
  gap:20px; 
  }
.logo{
  font-family:var(--display); 
  font-weight:800; 
  font-size:1.15rem; 
  color:var(--ink); 
  display:flex; 
  align-items:center; 
  gap:10px; 
  }
.logo img{
  width:42px; 
  height:42px; 
  border-radius:50%; 
  object-fit:cover; 
  border:2px solid var(--coral-soft); 
  }
.navlinks{
  display:flex; 
  gap:28px; 
  font-weight:600; 
  font-size:.94rem;
  }
.navlinks a{
  position:relative; 
  padding:4px 0;
  }
.navlinks a::after{ 
  content:"";
  position:absolute;
  left:0; 
  bottom:-2px; 
  width:0; 
  height:2px; 
  background:var(--coral); 
  transition:width .25s ease; 
  }
.navlinks a:hover::after, .navlinks a.active::after{
  width:100%;
  }
.navlinks a.active{ 
  color:var(--coral-deep); 
  }
a:focus-visible, button:focus-visible{ 
  outline:3px solid var(--teal); 
  outline-offset:3px; 
  border-radius:4px; 
  }
.nav-toggle{ 
  display:none;
  }

/* boutons */
.btn{ 
    font-family:var(--body); 
    font-weight:600; 
    font-size:.94rem; 
    padding:13px 24px; 
    border-radius:999px; 
    border:2px solid transparent; 
    display:inline-flex; 
    align-items:center; 
    gap:8px; cursor:pointer; 
    transition:transform .2s ease, 
    box-shadow .2s ease; 
    }
.btn-primary{ 
    background:var(--coral); 
    color:#fff; 
    box-shadow:0 10px 24px rgba(226,74,40,.28); 
    }
.btn-primary:hover{ 
    transform:translateY(-2px); 
    box-shadow:0 14px 28px rgba(226,74,40,.36);
    }
.btn-ghost{ 
    border-color:var(--ink); 
    color:var(--ink); 
    }
.btn-ghost:hover{ 
    transform:translateY(-2px); 
    background:var(--ink); 
    color:var(--bg); 
    }

/* section head */
.section-head{ 
    max-width:640px; 
    margin-bottom:48px; 
    }
.section-head h1, .section-head h2{ 
    font-size:clamp(2rem, 3.8vw, 2.9rem); 
    }
.section-head p{ 
    margin-top:14px; 
    color:var(--ink-soft); 
    font-size:1.05rem; 
    }

/* petit hero (pages secondaires) */
.pagehero{ 
    padding:64px 0 20px; 
    }
.pagehero .eyebrow{ 
    margin-bottom:10px; 
    }
.pagehero h1{ 
    font-size:clamp(2.4rem, 5vw, 3.6rem); 
    }
.pagehero p{ 
    margin-top:14px; 
    max-width:60ch; 
    color:var(--ink-soft); 
    font-size:1.08rem; 
    }

/* divider vague */
.divider{ 
    height:100px; 
    position:relative; 
    }
.divider svg{ 
    position:absolute; 
    inset:0;
     width:100%; 
    height:100%; 
    }

/* footer */
footer.sitefooter{ 
    background:var(--ink); 
    color:rgba(255,244,236,.75); 
    padding:56px 0 32px; 
    margin-top:60px; 
    }
footer.sitefooter .wrap{ 
    display:flex; 
    flex-wrap:wrap; 
    justify-content:space-between; 
    align-items:center; 
    gap:24px; 
    }
footer.sitefooter .footlinks{ 
    display:flex; 
    gap:20px; 
    font-family:var(--mono); 
    font-size:.78rem; 
    }
footer.sitefooter .footlinks a:hover{
     color:#fff; 
    }
footer.sitefooter .social{ 
    display:flex; 
    gap:16px; 
    }
footer.sitefooter .social a{ 
    color:rgba(255,244,236,.7); 
    }
footer.sitefooter .social a:hover{ 
    color:var(--coral-soft); 
    }
footer.sitefooter .copy{ 
    width:100%; 
    text-align:center; 
    font-family:var(--mono); 
    font-size:.72rem; 
    color:rgba(255,244,236,.35); 
    margin-top:24px; 
    }

.reveal{ 
    opacity:0; 
    transform:translateY(26px); 
    transition:opacity .7s ease, transform .7s ease; 
    }
.reveal.in{ 
    opacity:1; 
    transform:translateY(0); 
    }

@media (max-width:900px){
  .navlinks{ display:none; }
}


.hero{ 
    min-height:80vh; 
    display:flex; 
    align-items:center; 
    padding:70px 0 50px; 
    overflow:hidden;
    }
.hero .wrap{ 
    display:grid; 
    grid-template-columns:1.15fr .85fr; 
    gap:40px; 
    align-items:center; 
    }
.hero h1{ 
    font-size:clamp(2.4rem, 5.2vw, 4.2rem); 
    }
.hero h1 em{ 
    font-style:normal; 
    background:linear-gradient(100deg, var(--coral-deep), 
    var(--coral) 60%); 
    -webkit-background-clip:text; 
    background-clip:text; 
    color:transparent; 
    }
.hero p.lead{ 
    margin-top:20px; 
    max-width:46ch; 
    font-size:1.12rem; 
    color:var(--ink-soft); 
    }
.hero-cta{ 
    margin-top:30px; 
    display:flex;
    gap:14px; 
    flex-wrap:wrap; 
    }
.hero-visual{ 
    position:relative; 
    height:360px;
    }

/* petites annonces */
#annonces{ 
    background:var(--bg-alt); 
    padding:80px 0; 
    }
.annonce-grid{ 
    display:grid; 
    grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
    gap:24px; 
    margin-top:8px; 
    }
.annonce-card{ 
    background:var(--card); 
    border-radius:var(--radius-md); 
    padding:28px; 
    border-left:5px solid var(--coral); 
    box-shadow:0 14px 30px rgba(59,34,22,.06); 
    position:relative; 
    }
.annonce-card h3{ 
    font-size:1.15rem; 
    margin-bottom:8px; 
    color:var(--ink); 
    }
.annonce-card p{ 
    color:var(--ink-soft); 
    font-size:.96rem; 
    }
.annonce-card strong{ 
    color:var(--coral-deep); 
    }
.annonce-card.dispo{ 
    border-left-color:var(--teal); 
    }
.annonces-cta{ 
    margin-top:32px; text-align:center; 
    }

/* projets en accueil */
#projets-accueil{ 
    padding:90px 0; 
    }
.projects-preview{ 
    display:grid; 
    grid-template-columns:repeat(3,1fr); 
    gap:26px; 
    }
@media (max-width:900px){
    .projects-preview{ grid-template-columns:repeat(2,1fr); } 
    }
@media (max-width:560px){ 
    .projects-preview{ grid-template-columns:1fr; } 
    }
.pp-card{ 
    border-radius:var(--radius-md); 
    overflow:hidden; 
    background:var(--card); 
    box-shadow:0 16px 34px rgba(59,34,22,.08); 
    transition:transform .25s ease; 
    position:relative; 
    }
.pp-card:hover{ 
    transform:translateY(-6px); 
    }
.pp-card .pp-img{ 
    aspect-ratio:4/3; 
    overflow:hidden; 
    position:relative; 
    }
.pp-card .pp-img img{ 
    width:100%;
    height:100%; 
    object-fit:cover; 
    }
.pp-card .pp-body{ 
    padding:18px 20px 22px; 
    }
.pp-card .pp-body span{ 
    font-family:var(--mono); 
    font-size:.7rem; 
    text-transform:uppercase; 
    letter-spacing:.08em; 
    color:var(--coral-deep);
    }
.pp-card .pp-body h3{ 
    font-size:1.1rem; 
    margin-top:6px; 
    }
.projets-cta{ 
    margin-top:40px;
     text-align:center;
    }

/* teaser parcours */
#teaser-parcours{ 
    background:var(--bg-alt); 
    padding:80px 0; 
    }
.parcours-card{ 
    background:var(--card); 
    border-radius:var(--radius-md); 
    padding:40px 44px; 
    border-left:5px solid var(--teal); 
    box-shadow:0 14px 30px rgba(59,34,22,.06); 
    display:flex; 
    flex-wrap:wrap; 
    align-items:center; 
    justify-content:space-between; 
    gap:28px; 
    }
.parcours-card .txt{ 
    max-width:560px; 
    }
.parcours-card h2{ 
    font-size:clamp(1.6rem,3vw,2.2rem); 
    color:var(--ink); 
    }
.parcours-card p{ 
    margin-top:12px;
    color:var(--ink-soft); 
    font-size:1rem; 
    }

@media (max-width:900px){
  .hero .wrap{ grid-template-columns:1fr; }
  .hero-visual{ height:240px; order:-1; }
  .projects-preview{ grid-template-columns:1fr; }
}


/* ============================================================
   BURGER MENU MOBILE
   ============================================================ */
.burger{
  display:none; position:relative; z-index:960;
  flex-direction:column; justify-content:space-between;
  width:28px; height:20px; background:none; border:none; padding:0; cursor:pointer;
}
.burger span{ 
    display:block;
    width:100%; 
    height:2.5px; 
    border-radius:2px; 
    background:var(--ink); 
    transition:transform .25s ease, opacity .25s ease; 
    }
.burger.open span:nth-child(1){
    transform:translateY(8.5px) rotate(45deg); 
    }
.burger.open span:nth-child(2){
    opacity:0; 
    }
.burger.open span:nth-child(3){
    transform:translateY(-8.5px) rotate(-45deg);
    }
.mobile-menu-overlay{
  position:fixed;
  inset:0; 
  background:rgba(59,34,22,.55);
  z-index:900;
  opacity:0;
  pointer-events:none; 
  transition:opacity .25s ease;
    }
.mobile-menu-overlay.open{ 
    opacity:1;
    pointer-events:auto;
    }
.mobile-menu{
  position:fixed;
  top:0; 
  right:0; 
  height:100%; 
  width:min(78vw, 320px);
  background:var(--bg); 
  z-index:950; 
  box-shadow:-14px 0 40px rgba(59,34,22,.18);
  transform:translateX(100%); 
  transition:transform .3s ease;
  display:flex; 
  flex-direction:column; 
  gap:26px; 
  padding:84px 34px 40px;
    }
.mobile-menu.open{ 
    transform:translateX(0); 
    }
.mobile-menu a{
    font-family:var(--display); 
    font-size:1.3rem; 
    font-weight:600; 
    color:var(--ink); 
    padding:4px 0; 
    }
.mobile-menu a.active{ 
    color:var(--coral-deep); 
    }
.mobile-menu-close{
  position:absolute; 
  top:22px; 
  right:22px; 
  background:none; 
  border:none;
  font-size:1.9rem; 
  line-height:1; 
  color:var(--ink); 
  cursor:pointer;
    }
.mobile-menu-close:hover{ 
    color:var(--coral-deep); 
    }

@media (max-width:900px){
  .navlinks{ display:none; }
  .burger{ display:flex; }
    }
@media (min-width:901px){
  .mobile-menu, 
  .mobile-menu-overlay{display:none;
    }
}
/* wrapper resserré sur petit mobile */
@media (max-width:480px){
  .wrap{ padding:0 20px; }
}