*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --marron:       #97774a;
      --marron-dark:  #7a5f38;
      --marron-light: #c4a47a;
      --beige:        #f5f0e8;
      --beige-dark:   #ede5d5;
      --cream:        #faf8f4;
      --text:         #3a2e1e;
      --text-light:   #7a6a55;
      --white:        #ffffff;
      --font-head:    'Cormorant Garamond', Georgia, serif;
      --font-body:    'Raleway', sans-serif;
      --nav-h:        70px;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: var(--font-body);
      font-size: 16px;
      line-height: 1.75;
      color: var(--text);
      background: var(--cream);
    }

    img { display: block; max-width: 100%; height: auto; }
    a   { color: inherit; text-decoration: none; }

    /* ─── HEADER ─────────────────────────────── */
    header {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      height: var(--nav-h);
      background: rgba(250,248,244,0.97);
      backdrop-filter: blur(6px);
      border-bottom: 1px solid var(--beige-dark);
      display: flex;
      align-items: center;
    }

    .header-inner {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 1.5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
h3 {
	font-family: 'MonteCarlo', cursive;
	color: #000;
	font-size: 3em;
	font-weight: 100;
}
    .logo {
      font-family: var(--font-head);
      font-size: 1.4rem;
      font-weight: 600;
      letter-spacing: .12em;
      color: var(--marron);
      text-transform: uppercase;
      line-height: 1.2;
    }

    nav ul {
      list-style: none;
      display: flex;
      gap: 2rem;
    }

    nav a {
      font-size: .8rem;
      font-weight: 500;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--text-light);
      transition: color .2s;
      position: relative;
      padding-bottom: 3px;
    }

    nav a::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0;
      width: 0; height: 1px;
      background: var(--marron);
      transition: width .2s;
    }

    nav a:hover { color: var(--marron); }
    nav a:hover::after { width: 100%; }

    /* hamburger */
    .burger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: 4px;
      background: none;
      border: none;
    }
    .burger span {
      display: block;
      width: 24px; height: 2px;
      background: var(--marron);
      border-radius: 2px;
      transition: transform .3s, opacity .3s;
    }
    .burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .burger.open span:nth-child(2) { opacity: 0; }
    .burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* mobile nav drawer */
    .nav-drawer {
      display: none;
      position: fixed;
      top: var(--nav-h); left: 0; right: 0;
      background: var(--cream);
      border-bottom: 1px solid var(--beige-dark);
      z-index: 99;
      padding: 1.5rem;
    }
    .nav-drawer.open { display: block; }
    .nav-drawer ul { flex-direction: column; gap: 0; }
    .nav-drawer li { border-bottom: 1px solid var(--beige-dark); }
    .nav-drawer a {
      display: block;
      padding: .9rem 0;
      font-size: .9rem;
      color: var(--text);
    }

    /* ─── CAROUSEL ───────────────────────────── */
    .carousel-section {
  margin-top: var(--nav-h);
  position: relative;
  height: calc(100vh - var(--nav-h));
  min-height: 420px;
  overflow: hidden;
}

/* Tablette */
@media (max-width: 900px) {
  .carousel-section {
    height: 60vw;
    min-height: 320px;
  }
}

/* Mobile */
@media (max-width: 680px) {
  .carousel-section {
    height: 70vw;
    min-height: 260px;
  }
  .slide-content h1 {
    font-size: 2rem;
  }
  .slide-content h2 {
    font-size: .65rem;
    letter-spacing: .2em;
  }
}

/* Très petit écran */
@media (max-width: 380px) {
  .carousel-section {
    height: 80vw;
    min-height: 220px;
  }
  }

    .slide {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 1s ease;
      background-size: cover;
      background-position: center;
    }
    .slide.active { opacity: 1; }

    .slide::before {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(40,28,12,.38);
    }

    .slide-content {
      position: relative;
      text-align: center;
      color: var(--white);
      padding: 2rem;
    }

    .slide-content h1 {
      font-family: var(--font-head);
      font-size: clamp(2.8rem, 8vw, 6rem);
      font-weight: 300;
      letter-spacing: .15em;
      line-height: 1.1;
      margin-bottom: .6rem;
    }

    .slide-content h2 {
      font-family: var(--font-body);
      font-size: clamp(.75rem, 2vw, 1rem);
      font-weight: 400;
      letter-spacing: .35em;
      text-transform: uppercase;
      opacity: .88;
    }

     .slide.pict-1 { background-image: url('https://res.cloudinary.com/ddpeetkek/image/upload/v1779802260/salon-coiffure-hairdaujourdhui-isle-sur-sorgue.jpg'); }
    .slide.pict-2 { background-image: url('https://res.cloudinary.com/ddpeetkek/image/upload/v1779802675/coiffeur-hairdaujourdhui-isle-sur-la-sorgue.jpg'); }
    .slide.pict-3 { background-image: url('https://res.cloudinary.com/ddpeetkek/image/upload/v1779802849/coiffeur-hairdaujourdhui-isle-sorgue-home3.jpg'); }
    .slide.pict-4 { background-image: url('https://res.cloudinary.com/ddpeetkek/image/upload/v1779802932/coiffeur-hairdaujourdhui-isle-sorgue-home1.jpg'); }

    .carousel-dots {
      position: absolute;
      bottom: 1.5rem;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 8px;
      z-index: 2;
    }
    .dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: rgba(255,255,255,.45);
      cursor: pointer;
      border: none;
      transition: background .3s, transform .3s;
    }
    .dot.active {
      background: var(--white);
      transform: scale(1.3);
    }

    .arrow-down {
      position: absolute;
      bottom: 2rem;
      right: 2rem;
      z-index: 2;
      color: rgba(255,255,255,.7);
      font-size: 1.6rem;
      animation: bounce 1.8s infinite;
    }
    @keyframes bounce {
      0%, 100% { transform: translateY(0); }
      50%       { transform: translateY(8px); }
    }

    /* ─── PRESENTATION ───────────────────────── */
    .bg-beige { background: var(--beige); }

    .section-pres {
      padding: 5rem 1.5rem;
      max-width: 1100px;
      margin: 0 auto;
    }

    .pres-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
    }

    .pres-col h3 {
      <!--font-family: var(--font-head);-->
	  font-family: 'MonteCarlo', cursive;
      font-size: 2.5rem;
      font-weight: 400;
      color: var(--marron);
      text-align: center;
      margin-bottom: 1.25rem;
      letter-spacing: .03em;
    }

    .pres-col img {
      width: 100%;
      aspect-ratio: 4/3;
      object-fit: cover;
      border: 4px solid var(--white);
      outline: 1px solid var(--marron-light);
      margin-bottom: 1.25rem;
    }

    .pres-col p {
      color: var(--text-light);
      font-size: .93rem;
      text-align: justify;
      margin-bottom: .75rem;
    }

    .divider {
      width: 100%;
      height: 1px;
      background: var(--marron-light);
      border: none;
      margin: 1.5rem 0;
    }

    .bandeau {
      display: block;
      text-align: center;
      font-size: 1.5rem;
      color: var(--marron-light);
    }

    /* ─── IMAGE GRID ─────────────────────────── */
    .photo-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
    }

    .photo-grid img {
      width: 100%;
      aspect-ratio: 1;
      object-fit: cover;
      display: block;
      transition: transform .4s;
    }
    .photo-grid div:hover img { transform: scale(1.04); }
    .photo-grid div { overflow: hidden; }

    /* ─── BANNER ─────────────────────────────── */
    .bg-marron {
      background: var(--marron-dark);
      color: var(--white);
      text-align: center;
      padding: 3.5rem 1.5rem;
    }

    .bg-marron h3 {
      <!--font-family: var(--font-head);-->
	  font-family: 'MonteCarlo', cursive;
      font-size: clamp(1.5rem, 3vw, 2.3rem);
      font-weight: 300;
      letter-spacing: .06em;
      line-height: 1.65;
      max-width: 700px;
      margin: 0 auto;
    }

    /* ─── FOOTER ─────────────────────────────── */
    footer {
      background: var(--text);
      color: rgba(255,255,255,.75);
      padding: 2.5rem 1.5rem;
    }

    .footer-grid {
      max-width: 1100px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 2rem;
      align-items: center;
    }

    footer ul { list-style: none; }
    footer li { margin-bottom: .5rem; font-size: .88rem; }
    footer a { color: rgba(255,255,255,.7); transition: color .2s; }
    footer a:hover { color: var(--marron-light); }
    footer i { margin-right: .4rem; color: var(--marron-light); }

    .footer-center { text-align: center; font-size: .88rem; }
    .footer-right  { text-align: right; }

    /* ─── RESPONSIVE ─────────────────────────── */
    @media (max-width: 900px) {
      .pres-grid { grid-template-columns: 1fr; gap: 3rem; }
      .photo-grid { grid-template-columns: repeat(2, 1fr); }
      .footer-grid { grid-template-columns: 1fr; text-align: center; }
      .footer-right { text-align: center; }
    }

    @media (max-width: 680px) {
      nav { display: none; }
      .burger { display: flex; }
      .logo { font-size: 1.1rem; }
      .slide-content h1 { font-size: 2.4rem; }
      .photo-grid { grid-template-columns: 1fr 1fr; }
    }

    @media (max-width: 420px) {
      .photo-grid { grid-template-columns: 1fr; }
    }