:root{
    --sand:#EDE4D3;
    --sand-deep:#E1D2AE;
    --charcoal:#2B2118;
    --saffron:#E8A93E;
    --saffron-deep:#C98A22;
    --brick:#9C3D2E;
    --indigo:#1B2A4A;
    --indigo-deep:#121D34;
    --indigo-light:#324670;
    --cream-text:#F4EEDD;
    --star:#F4D793;
  }

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

  html{scroll-behavior:smooth;}

  body{
    font-family:'Work Sans', sans-serif;
    background:var(--sand);
    color:var(--charcoal);
    transition:background 1s ease, color 1s ease;
    overflow-x:hidden;
  }

  body.night-mode{
    background:var(--indigo-deep);
    color:var(--cream-text);
  }

  h1,h2,h3{
    font-family:'Fraunces', serif;
    font-weight:600;
    line-height:1.1;
  }

  a{color:inherit;text-decoration:none;}

  .wrap{max-width:1080px;margin:0 auto;padding:0 24px;}

  /* ---------- NAV ---------- */
  nav{
    position:fixed;top:0;left:0;right:0;
    display:flex;justify-content:space-between;align-items:center;
    padding:18px 24px;
    z-index:100;
    background:rgba(237,228,211,0.9);
    backdrop-filter:blur(6px);
    transition:background 1s ease;
  }
  body.night-mode nav{background:rgba(18,29,52,0.85);}
  .logo{font-family:'Fraunces',serif;font-weight:600;font-size:1.3rem;letter-spacing:0.02em;}
  .logo em{color:var(--brick);font-style:italic;}
  body.night-mode .logo em{color:var(--star);}
  .nav-cta{
    background:var(--brick);color:var(--cream-text);
    padding:10px 20px;border-radius:100px;
    font-size:0.85rem;font-weight:600;
    transition:background 0.3s ease, transform 0.2s ease;
  }
  .nav-cta:hover{transform:translateY(-2px);}
  body.night-mode .nav-cta{background:var(--saffron);color:var(--indigo-deep);}

  /* ---------- HERO ---------- */
  .hero{
    min-height:100vh;
    display:flex;flex-direction:column;justify-content:center;
    position:relative;
    padding:120px 24px 60px;
    overflow:hidden;
  }
  .hero::before{
    content:"";
    position:absolute;
    top:-20%;right:-10%;
    width:60vw;height:60vw;
    max-width:600px;max-height:600px;
    border-radius:50%;
    background:radial-gradient(circle at 40% 40%, var(--saffron) 0%, var(--saffron) 40%, transparent 72%);
    opacity:0.35;
    filter:blur(4px);
  }
  .eyebrow{
    font-size:0.8rem;letter-spacing:0.18em;text-transform:uppercase;
    color:var(--brick);font-weight:600;margin-bottom:18px;
  }
  .hero h1{
    font-size:clamp(2.6rem, 7vw, 5rem);
    font-style:italic;
    max-width:11ch;
    margin-bottom:24px;
    position:relative;z-index:2;
  }
  .hero p.lede{
    font-size:1.15rem;max-width:38ch;margin-bottom:36px;
    color:#4A3D2C;
  }
  body.night-mode .hero p.lede{color:#CFC6AE;}
  .hero-ctas{display:flex;gap:14px;flex-wrap:wrap;}
  .btn-primary{
    background:var(--brick);color:var(--cream-text);
    padding:15px 28px;border-radius:100px;font-weight:600;
    display:inline-flex;align-items:center;gap:8px;
    transition:transform 0.2s ease, background 0.3s ease;
  }
  .btn-primary:hover{transform:translateY(-3px);}
  .btn-ghost{
    border:1.5px solid var(--charcoal);color:var(--charcoal);
    padding:15px 28px;border-radius:100px;font-weight:600;
    transition:background 0.3s ease, color 0.3s ease;
  }
  body.night-mode .btn-ghost{border-color:var(--cream-text);color:var(--cream-text);}

  .bowl-illustration{
    margin-top:56px;
    width:100%;height:220px;
    border-radius:24px;
    background:linear-gradient(135deg, var(--saffron) 0%, #F0C36B 45%, var(--sand-deep) 100%);
    position:relative;z-index:2;
    display:flex;align-items:center;justify-content:center;
    font-family:'Fraunces',serif;font-style:italic;color:rgba(43,33,24,0.45);
    font-size:0.95rem;text-align:center;
  }
   .bowl-illustration img {
    width:100%;
    height:220%;
    border-radius:24px;
   }

  /* ---------- SECTION GENERIC ---------- */
  section{padding:90px 0;position:relative;}
  .section-head{max-width:520px;margin-bottom:52px;}
  .section-head .eyebrow{margin-bottom:10px;}
  .section-head h2{font-size:clamp(1.9rem,4vw,2.6rem);font-style:italic;}

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

  /* ---------- HISTOIRE ---------- */
  .histoire{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
  .histoire .portrait{
    aspect-ratio:4/5;border-radius:20px;
    background:linear-gradient(160deg, var(--brick), #6E2A1F);
    display:flex;align-items:center;justify-content:center;
    color:rgba(244,238,221,0.6);font-family:'Fraunces',serif;font-style:italic;
    text-align:center;padding:20px;
  }
  .histoire p{margin-bottom:16px;line-height:1.7;font-size:1.02rem;}

  .portrait-reveal img {
    width: 100%;
    height:500px;
    border-radius:20px; 

  }
  /* ---------- MENU ---------- */
  .menu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;}
  .menu-card{
    background:var(--sand-deep);
    border-radius:18px;
    padding:28px;
    transition:transform 1s ease, background 1s ease;
  }
  body.night-mode .menu-card{background:var(--indigo-light);}
  .menu-card h3{font-size:1.3rem;font-style:italic;margin-bottom:8px;}
  .menu-card .price{
    display:inline-block;margin-top:14px;
    font-family:'Work Sans',sans-serif;font-weight:700;
    color:var(--brick);font-size:1.05rem;
  }
  body.night-mode .menu-card .price{color:var(--star);}
  .menu-card p{font-size:0.92rem;line-height:1.55;opacity:0.85;}

  /* ---------- NUIT / VENDREDI & TAMKHARITE ---------- */
  .nuit-section{
    background:var(--indigo);
    color:var(--cream-text);
    border-radius:0;
    position:relative;
    overflow:hidden;
  }
  .stars{
    position:absolute;inset:0;
    background-image:
      radial-gradient(1.5px 1.5px at 20% 30%, var(--star), transparent),
      radial-gradient(1.5px 1.5px at 65% 15%, var(--star), transparent),
      radial-gradient(1px 1px at 80% 60%, var(--star), transparent),
      radial-gradient(1.5px 1.5px at 40% 80%, var(--star), transparent),
      radial-gradient(1px 1px at 10% 70%, var(--star), transparent),
      radial-gradient(1.5px 1.5px at 90% 35%, var(--star), transparent),
      radial-gradient(1px 1px at 55% 50%, var(--star), transparent);
    opacity:0.7;
    animation:twinkle 4s ease-in-out infinite;
  }
  @keyframes twinkle{
    0%,100%{opacity:0.4;}
    50%{opacity:0.9;}
  }
  .moon-glow{
    position:absolute;top:8%;right:8%;
    width:200px;height:200px;border-radius:50%;
    background:radial-gradient(circle, rgba(244,215,147,0.55) 0%, transparent 70%);
    filter:blur(10px);
  }
  .nuit-content{position:relative;z-index:2;}
  .nuit-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:44px;}
  .nuit-card{
    background:rgba(244,238,221,0.06);
    border:1px solid rgba(244,238,221,0.18);
    border-radius:18px;padding:28px;
  }
  .nuit-card .tag{
    font-size:0.75rem;letter-spacing:0.14em;text-transform:uppercase;
    color:var(--star);font-weight:600;margin-bottom:10px;display:block;
  }
  .nuit-card h3{font-style:italic;font-size:1.4rem;margin-bottom:10px;}
  .nuit-card p{line-height:1.6;font-size:0.95rem;color:#D9D0B8;}

  /* ---------- COMMANDER STEPS ---------- */
  .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px;counter-reset:step;}
  .step{position:relative;padding-left:0;}
  .step .num{
    font-family:'Fraunces',serif;font-style:italic;font-size:2.2rem;
    color:var(--saffron-deep);margin-bottom:10px;display:block;
  }
  body.night-mode .step .num{color:var(--star);}
  .step h3{font-size:1.1rem;margin-bottom:8px;}
  .step p{font-size:0.92rem;line-height:1.5;opacity:0.85;}

  /* ---------- GALERIE ---------- */
  .galerie-grid{
    display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  }
  .galerie-grid div{
    aspect-ratio:1/1;border-radius:14px;
    background:linear-gradient(150deg, var(--sand-deep), var(--saffron));
  }
  .galerie-grid div:nth-child(3n){background:linear-gradient(150deg, var(--brick), #7A2F22);}
  .galerie-grid div:nth-child(4n){background:linear-gradient(150deg, var(--saffron), var(--sand-deep));}

  /* ---------- LIVRAISON ---------- */
  .livraison{display:grid;grid-template-columns:1fr 1fr;gap:50px;}
  .livraison ul{list-style:none;}
  .livraison li{
    padding:14px 0;border-bottom:1px solid rgba(43,33,24,0.15);
    display:flex;justify-content:space-between;font-size:0.98rem;
  }
  body.night-mode .livraison li{border-color:rgba(244,238,221,0.15);}

  /* ---------- AVIS ---------- */
  .avis-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;}
  .avis-card{
    background:var(--sand-deep);border-radius:16px;padding:26px;
    transition:background 1s ease;
  }
  body.night-mode .avis-card{background:var(--indigo-light);}
  .avis-card p{font-size:0.95rem;line-height:1.6;font-style:italic;margin-bottom:14px;}
  .avis-card .who{font-size:0.85rem;font-weight:600;opacity:0.75;}

  /* ---------- FOOTER ---------- */
  footer{
    background:var(--charcoal);color:var(--cream-text);
    padding:60px 0 30px;
  }
  .footer-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px;margin-bottom:40px;}
  footer h3{font-style:italic;font-size:1.6rem;margin-bottom:12px;}
  footer .cols{display:flex;gap:60px;flex-wrap:wrap;}
  footer .col h4{font-size:0.8rem;text-transform:uppercase;letter-spacing:0.12em;margin-bottom:12px;opacity:0.7;}
  footer .col a, footer .col p{display:block;font-size:0.92rem;margin-bottom:8px;opacity:0.9;}
  .footer-bottom{
    border-top:1px solid rgba(244,238,221,0.15);
    padding-top:20px;font-size:0.8rem;opacity:0.55;
  }

  @media(max-width:760px){
    .histoire, .nuit-grid, .livraison{grid-template-columns:1fr;}
    .galerie-grid{grid-template-columns:repeat(2,1fr);}
  }

  .wa-float{
    position:fixed;bottom:22px;right:22px;z-index:200;
    background:#25D366;color:white;width:56px;height:56px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:1.5rem;box-shadow:0 6px 18px rgba(0,0,0,0.25);
    transition:transform 0.2s ease;
  }
  .wa-float:hover{transform:scale(1.08);}


/* Section Savoir-faire*/

.savoir-faire {
    background-color: #0a1128; /* fond bleu marine, à ajuster selon ta charte */
    padding: 80px 60px;
    color: #f5f0e6;
    font-family: 'Georgia', serif;
  }
 
  .section-label {
    letter-spacing: 3px;
    font-size: 13px;
    color: #b23a48; /* rouge/bordeaux discret comme sur ta galerie actuelle */
    margin-bottom: 10px;
    font-family: Arial, sans-serif;
  }
 
  .section-title {
    font-size: 42px;
    font-style: italic;
    margin: 0 0 20px 0;
    color: #ffffff;
  }
 
  .section-intro {
    max-width: 600px;
    line-height: 1.6;
    color: #d8d2c4;
    margin-bottom: 50px;
    font-family: Arial, sans-serif;
  }
 
  .etapes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
  }
 
  .etape {
    background-color: #131b3a;
    border-radius: 16px;
    padding: 30px 25px;
    transition: transform 0.2s ease;
  }
 
  .etape:hover {
    transform: translateY(-6px);
  }
 
  .etape-numero {
    font-size: 28px;
    font-weight: bold;
    color: #e0a638; /* doré, comme le bouton "Commander" */
    margin-bottom: 15px;
    font-family: 'Georgia', serif;
  }
 
  .etape h3 {
    font-size: 20px;
    margin: 0 0 10px 0;
    color: #ffffff;
  }
 
  .etape p {
    font-size: 15px;
    line-height: 1.5;
    color: #c9c3b5;
    font-family: Arial, sans-serif;
    margin: 0;
  }
 
  @media (max-width: 900px) {
    .etapes {
      grid-template-columns: repeat(2, 1fr);
    }
  }
 
  @media (max-width: 550px) {
    .etapes {
      grid-template-columns: 1fr;
    }
    .savoir-faire {
      padding: 60px 25px;
    }
  }

  /*Effet de survol pour les images de thiere */

  .compare-container {
    position: relative;
    max-width: 700px;
    margin: 50px auto;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 16px;
    cursor: ew-resize;
    user-select: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  }
 
  .compare-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
 
  .img-before-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%; /* position initiale du slider */
    height: 100%;
    overflow: hidden;
    z-index: 2;
  }
 
  .img-before-wrapper img {
    width: 700px; /* doit correspondre à la largeur max du container, pour éviter la déformation */
    max-width: none;
  }
 
  .compare-slider {
    position: absolute;
    top: 0;
    left: 50%;
    width: 4px;
    height: 100%;
    background: #e0a638;
    z-index: 3;
    transform: translateX(-50%);
  }
 
  .slider-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    background: #e0a638;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 12px;
    color: #0a1128;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  }
 
  .label {
    position: absolute;
    top: 15px;
    background: rgba(10, 17, 40, 0.75);
    color: #f5f0e6;
    padding: 5px 14px;
    border-radius: 20px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    z-index: 4;
    letter-spacing: 1px;
  }
 
  .label-left { left: 15px; }
  .label-right { right: 15px; }