/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Cause:wght@100..900&display=swap');




@font-face {
    font-family: 'Puffin Display';
    src: url('fonts/PuffinDisplay-Black.eot');
    src: url('fonts/PuffinDisplay-Black.eot?#iefix') format('embedded-opentype'),
        url('fonts/PuffinDisplay-Black.woff2') format('woff2'),
        url('fonts/PuffinDisplay-Black.woff') format('woff'),
        url('fonts/PuffinDisplay-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

  
/* ---------- Variables ---------- */
:root {
  --burgundy-dark:   #171310;
  --burgundy:        #f7a81c;
  --burgundy-hover:  #8A4B00;
  --hero-bg:         #100d0a;
  --histoire-bg:     #1c1712;
  --cream:           #F8F5F1;
  --dark:            #1a1a1a;
  --text-muted:      #777777;
  --text-soft:       #444444;
  --text-faint:      #999999;
  --gold:            #F7A81C;
  --pink-label:      #F2B96B;
  --it-green:        #F7A81C;
  --it-red:          #171310;
  --orange:          #F7A81C;

  --font-display: "Puffin Display", sans-serif;
  --font-body: 'Cause', sans-serif;
}
.alert {
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 25px;
    font-weight: 500;
    max-width: 700px;
    margin: 0 auto 30px;
    width: 100%;
}

.alert-success {
    background: #e8f7ed;
    color: #1f7a3d;
    border: 1px solid #b7e4c7;
}

.menuimg {
    display: flex;
    flex-direction: column;
    gap: 30px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 40px 80px !important;
    align-content: center;
}

.menuimg img{width:800px;max-width:100%;        border-radius: 18px;}

.alert-error {
    background: #fdecec;
    color: #b42318;
    border: 1px solid #f5c2c7;
}
/* ---------- Reset ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--dark);
  background: #ffffff;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
button { font-family: inherit; border: none; background: none; cursor: pointer; }
input { font-family: inherit; }

.container {
  width: 100%;
  max-width: 90%;
  margin: 0 auto;
  padding: 0 24px;
}
.container--wide  { max-width: 1300px; }
.container--mid   {    max-width: 100%;
    padding: 0 80px; }

/* =========================================================
   NAVBAR
   ========================================================= */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    transition: all .3s ease;
    background: transparent;
    border-bottom: 1px solid #86868652;border-radius: 0 0 20px 0;width:calc(100% - 20px)
}
.navbar.is-scrolled {
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, .15);width:100%;border-radius:0
}
.navbar__inner {
  margin: 0 auto;
  padding: 0 10px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 10px;
  height: 64px;
}
.navbar__logo { justify-self: center; }
.navbar__logo img { height: 36px; width: auto; }

.navbar__links {
  display: none;
  align-items: center;
  gap: 28px;
}
.navbar__links a {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .05em;
  color: white;
  transition: color .2s;font-family: var(--font-display);
}
.navbar__links a:hover { color: #d55f2d; }

.navbar__cta {
  display: none;
  align-items: center;
  gap: 8px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  border: 0px solid rgba(255,255,255,.3);
  backdrop-filter: blur(4px);
  transition: all .25s;    background: var(--orange);
    color: #fff;
    padding: 18px 38px;
    clip-path: url(#brushClip);
}

.navbar .navbar__cta:hover { background: #d55f2d; }

.navbar__toggle {
  justify-self: start;
  display: flex;
  padding: 8px;
  color: #fff;width:50px
}

.blaga{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
}
.navbar__toggle svg { width: 24px; height: 24px; }

/* Bouton "panier / commander" mobile, à droite de la navbar */
.navbar__cart {
    justify-self: end;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    padding: 4px 2px;
    color: #fff;
    background: #f7a81c;
    color: #fff;
    padding: 1px 0px 1px 14px;
    /* clip-path: url(#brushClip); */
    border-radius: 8px;
    font-family: var(--font-display);    animation: 2.6s ease-in-out 0s infinite normal none running waPulse;
}
   @keyframes waPulse {
                0%,100% {
box-shadow: 0 10px 18px rgb(247 168 28 / 35%);                }

                50% {
    box-shadow: 0 10px 14px rgb(247 168 28 / 42%), 0 0 0 9px rgb(247 168 28 / 17%);                }
            }
			
			
			
			.navbar__cart .wave-text {
    display: inline-flex;
}
.navbar__cart .wave-wrap {
    position: relative;
    display: inline-block;
    height: 1em;
    overflow: hidden;
    width: 50px;
    text-align: center;
}

.wave-text {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-flex;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-15px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;    padding-top: 4px;
}

.wave-text.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.wave-text.is-exiting {
    opacity: 0;
    transform: translateX(15px);
}

.wave-letter {
    display: inline-block;
    animation: wave-bounce 1.2s ease-in-out infinite;
}

@keyframes wave-bounce {
    0%   { transform: translateY(0); }
    30%  { transform: translateY(-3px); }
    60%  { transform: translateY(0); }
}

.navbar__cart img {
    width: 32px;
    margin-top: -8px;
    margin-bottom: -8px;
    margin-left: 6px;margin-right:-5px
}

.navbar__cart span.wave-text {
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0em;
    line-height: 1;
}

/* =========================================================
   MENU MOBILE — OFFCANVAS plein écran
   ========================================================= */
.navbar__mobile {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(90%, 420px);
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: rgb(16 13 10);
    background: url(../images/menuback.webp) no-repeat bottom right var(--orange);
    backdrop-filter: blur(10px);
    padding: 28px 32px 32px;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform .45s cubic-bezier(.65,0,.35,1);
    overflow-y: auto;
    border-radius: 0 20px 20px 0;
    background-size: contain;
}

.navbar__mobile .wave-wrap{    width: auto;
    position: relative;}
.navbar__mobile .wave-text {
    position: relative;
    opacity: 1;    transform: translateX(-0px);
}
   .navbar__mobile .wave-letter{color: white;
    opacity: 1;}

.navbar__mobile.is-open { transform: translateX(0); }

.navbar__mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity .55s ease;
  z-index: 99;    height: 100vh;   opacity:0;
}
.navbar__mobile-overlay.is-open { opacity: 1; visibility: visible;  opacity:1; }

.navbar__mobile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.navbar__mobile-logo img { height: 54px;
    width: auto;
    filter: brightness(0.1);}
.navbar__mobile-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #000000;
    background: #ffffffdb;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 50%;
    flex-shrink: 0;
}
.navbar__mobile-close svg { width: 18px; height: 18px; }

.navbar__mobile-links {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.navbar__mobile a {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-family: var(--font-display);
  opacity: 0;
  transform: translateX(24px);
  transition: opacity .4s ease, transform .4s ease;
}
.navbar__mobile.is-open a {
  opacity: 1;
  transform: translateX(0);
}
.navbar__mobile.is-open a:nth-child(1) { transition-delay: .12s; }
.navbar__mobile.is-open a:nth-child(2) { transition-delay: .17s; }
.navbar__mobile.is-open a:nth-child(3) { transition-delay: .22s; }
.navbar__mobile.is-open a:nth-child(4) { transition-delay: .27s; }
.navbar__mobile.is-open a:nth-child(5) { transition-delay: .32s; }
.navbar__mobile.is-open a:nth-child(6) { transition-delay: .37s; }

.navbar__mobile a:last-child { border-bottom: 0; }

.navbar__mobile .navbar__cta {
    display: inline-flex;
    justify-content: center;
    margin-top: 14px;
    background: #000000;
    padding: 14px 30px;
    font-size: 14px;
}

.navbar__mobile-bottom {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding-top: 20px;
}
.navbar__mobile-social {
  display: flex;
  gap: 14px;
}
.navbar__mobile-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgb(255 255 255 / 65%);
    color: #000000;
    transition: background .2s;
}
.navbar__mobile-social a:hover { background: white; }
.navbar__mobile-social svg { width: 18px; height: 18px; fill: currentColor; }

body.navbar-open { overflow: hidden; }

@media (min-width: 1024px) {
  .navbar__inner {
    display: flex;
    justify-content: space-between;
    padding: 0 40px;
    height: 85px;
  }
  .navbar__logo { justify-self: auto; }
  .navbar__logo img { height: 53px; }
  .navbar__links { display: flex; }
  .navbar__cta { display: flex; }
  .navbar__toggle { display: none; }
.navbar__cart .wave-wrap {
    height: 20px;
    width: 100px;
}
.navbar__cart {
    padding: 4px 0px 4px 20px;

}
.navbar__cart span.wave-text {
    font-size: 14px;
}
  .navbar__mobile, .navbar__mobile-overlay { display: none; }
}

.hero .btn--ghost img {
    width: 37px;
    margin-top: -9px;
    margin-bottom: -10px;
}

.hero .btn--primary img{
    width: 34px;
    margin-top: -9px;
    margin-bottom: -10px;
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    background: var(--hero-bg);
    height: calc(100vh - 55px);    border-radius: 0 0 20px 0;
    overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__overlay {
  position: absolute;
  inset: 0;
   background:linear-gradient(355deg, rgb(0 0 0 / 66%) 0%, rgb(0 0 0 / 5%) 45%, rgb(247 168 28 / 22%) 100%);opacity:0
}
.hero__content {
    position: relative;
    z-index: 10;
    max-width: 1300px;
    margin: 0 auto;
    width: 100%;
    padding: 44px 24px 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100% - 55px);
    top: 0;
}

/* Conteneur principal */
.halal-badge-container {
    position: absolute;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
  bottom: 200px;
    right: 9px;animation: pulseBadge 1.5s ease-in-out infinite;
}@keyframes pulseBadge {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1); /* Augmente la taille de 10% au milieu de l'animation */
  }
  100% {
    transform: scale(1);
  }
}

@keyframes pulseBadge2 {
  0% {
    transform: scale(1) rotate(-5deg);
  }
  50% {
    transform: scale(1.1) rotate(-5deg); /* Augmente la taille de 10% au milieu de l'animation */
  }
  100% {
    transform: scale(1) rotate(-5deg);
  }
}





/* L'arrière-plan SVG animé */
.badge-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  /* Animation de rotation continue (15 secondes pour un tour complet) */
  animation: rotateBadge 10s linear infinite;
}

/* Le texte par-dessus */
.badge-text {
position: relative;
    z-index: 2;
    color: #ffffff;
    text-align: center;
    font-size: 17px;
    font-weight: bold;
    line-height: 1.2;
    font-family: var(--font-display);    transform: rotate(15deg);
}.halal-badge-container  svg path{
    fill: #d55f2d;
    stroke: white;
    stroke-width: 2px;
    stroke-opacity: 1;
}

/* La clé d'animation (Keyframes) */
@keyframes rotateBadge {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


.hero__main { flex: 1; display: flex; align-items: center;    margin-bottom: 0;    flex-direction: column;    justify-content: space-between;
 }
.hero__text { max-width: 820px; text-align: left; width: 100%;}
.hero__title {
  font-family: var(--font-display);
  color: #fff;
  font-size: 36px;
  font-weight: 600;
  line-height: .88;
  letter-spacing: -.01em;
  animation: heroFadeUp .9s cubic-bezier(.23,1,.32,1) .2s both;    text-shadow: 0 2px 4px black;
}
.hero__subtitle {
    color: #fff;
    font-size: 15px;
    font-weight: 400;
    /* text-transform: uppercase; */
    letter-spacing: .05em;
    margin-top: 3px;
    animation: heroFadeUp .9s cubic-bezier(.23,1,.32,1) .5s both;
    margin-bottom: 20px;
}
.hero__subtitle span{
    background: #d55f2d;
    color: #fff;
    padding: 10px 32px;
    clip-path: url(#brushClip);
    display: inline-block;
    font-weight: 600;
    font-size: 20px;
	}
.hero__flag {
  display: flex;
  margin-top: 12px;
  animation: heroFadeUp .9s cubic-bezier(.23,1,.32,1) .5s both;
}
.hero__flag span { width: 28px; height: 4px; }
.hero__flag span:nth-child(1) { background: var(--it-green); }
.hero__flag span:nth-child(2) { background: #fff; }
.hero__flag span:nth-child(3) { background: var(--it-red); }

.hero__ctas {
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  animation: heroFadeUp .9s cubic-bezier(.23,1,.32,1) .8s both;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 15px 18px;
  border-radius: 28px;
  transition: all .2s;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);    font-family: var(--font-display);
}
.btn--primary {
  background: rgb(23 19 16 / 86%);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.1);
  color: #fff;
}
.btn--primary:hover { background: var(--burgundy); }
.btn--ghost {
    background: rgb(255 255 255);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.25);
    color: #000;
}
.btn--ghost:hover { background: rgba(255,255,255,.2); }

@media (min-width: 640px) {
  .hero__title { font-size: 54px; }
  .hero__ctas { flex-direction: row; gap: 10px; }
}
@media (min-width: 1024px) {
.hero__content {
    padding: 112px 40px 80px;
    height: auto;
    align-items: flex-start;
    max-width: 90%;
}
  .hero__title { font-size: 68px; }
  .hero__overlay {      }
  .hero__subtitle { font-size: 23px;
        margin-top: 7px;
        margin-bottom: 48px; }
  .hero__flag span { width: 32px; height: 5px; }
  .btn {    font-size: 13px;
    padding: 16px 28px; }
	.hero {
    height: 100vh;
}
}
@media (min-width: 1280px) {
  .hero__title { font-size: 76px;      width: 100%;}

.hero .halal-badge-container {
    width: 130px;
    height: 130px;
    bottom: 27px;
    right: 31px;
}}
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   SECTION TITLES (shared)
   ========================================================= */
.section-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3em;
  color: #d55f2d;
  margin-bottom: 8px;
}
.section-title {
  font-family: var(--font-display);
  color: #1a1a1a;
  font-size: 21px;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1;
}
@media (min-width: 640px)  { .section-title { font-size: 34px; } }
@media (min-width: 1024px) { .section-title { font-size: 44px; } .section-eyebrow { font-size: 11px; }   #devenir-franchise .section-title {
        font-size: 31px;
    } }

/* =========================================================
   PRODUITS
   ========================================================= */
.section-produits {     background: url(../images/bg-grey.webp);
    padding: 40px 0 60px;
    background-size: 25%; }
	
	.section-offres {
    padding: 0px 0 0px;    background: white;
}

@media (min-width: 1024px) { .section-produits { padding: 60px 0 65px; } }

.produits__header { text-align: center; margin-bottom: 16px; }
@media (min-width: 1024px) { .produits__header { margin-bottom: 24px; } }


.produits__grid {
    gap: 24px;
    display: grid;
    grid-template-columns: 1fr 1fr ;display:none
}
@media (min-width: 1024px) {
.produits__grid {
    gap: 24px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}}
.produits__scroll {
  display: flex;  
  gap: 20px;
  overflow-x: auto;
  padding: 0 24px;
  margin: 0 -24px;
  scrollbar-width: none;
}
.produits__scroll::-webkit-scrollbar { display: none; }

.section-offres .produit-card .halal-badge-container {
    width: 83px;
    height: 83px;top:20px;right:7px
}


@media (min-width: 768px) {
	
	  .section-offres  .produits__scroll {
        display: flex;
    }
.section-offres	.produits__scroll .produit-card {
    width: calc(33.33% - 6px);
    flex-shrink: 0;
}


	.item.is-selected .item-check{opacity:0 !important}
	
  .produits__grid { display: grid;         padding: 30px 0 15px;}
  .produits__scroll {   display: none;   }
}
.produit-card {       text-align: center;
    background: white;
    box-shadow: 0 0 17px #0000001c;
    padding: 0;
    border-radius: 25px;
    overflow: hidden;     position: relative;    border-bottom: 5px solid #00000026;}
	.bento{    position: absolute;
    bottom: 0;
    text-align: left;
    color: white;
    padding: 30px;
    left: 0;
    width: 100%;}
	.bento.rai {top:0}
.produits__scroll .produit-card { width: 160px; flex-shrink: 0; }
.produit-card__img {
    width: 100%;
    height: auto;
    object-fit: cover;
    margin: 0;
    aspect-ratio: 1/1.4;
}

.produit-card .halal-badge-container {
    top: 0;
    right: 0;
}
.produit-card .badge-text {
    font-size: 14px;
}
.produit-card  .halal-badge-container  svg path {
fill: #d55f2d;
    stroke: white;
    stroke-width: 2px;
    stroke-opacity: 1;
}
@media (min-width: 1024px) { .produit-card__img {         width: 100%;
        height: auto;
        margin-bottom: 16px;aspect-ratio: 1;    margin: 0; } }
.produit-card__title {
    font-weight: 400;  font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0;
    color: #fff;
    margin-bottom: 4px;        font-family: var(--font-display);      color: #ffffff;    text-shadow: 0 2px 4px #00000073;
}
.produit-card__desc {    font-size: 10px;
    color: #ffffff;
    line-height: 1.5;
    margin-top: 0;
    font-weight: 600;}
@media (min-width: 1024px) {
  .produit-card__title { font-size: 22px; margin-bottom: 0px; }
  .produit-card__desc { font-size: 13px; }
}

.produits__cta { text-align: center; margin-top: 24px; }
@media (min-width: 1024px) { .produits__cta { margin-top: 32px; } }

.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0px solid var(--burgundy);
    color: var(--burgundy);
    padding: 15px 40px;
    font-size: 14px;
    font-weight: 400;
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0;
    border-radius: 32px;
    transition: all .2s;
    font-family: var(--font-display);
    background: #1a1a1a;
    color: #fff;
    padding: 18px 38px;
    clip-path: url(#brushClip);
    border-radius: 0;
}
.btn-outline:hover { background: var(--burgundy); color: #fff; }
.btn-outline--white { border-color: #fff; color: #fff; }
.btn-outline--white:hover { background: #fff; color: var(--burgundy-dark); }
.btn-outline--disabled { background: #555; color: #aaa; cursor: not-allowed; pointer-events: none; opacity: .6; }
.btn-outline--disabled:hover { background: #555; color: #aaa; }
@media (min-width: 1024px) { .btn-outline { font-size: 14px; } }

/* Bouton "Voir le Menu" en version badge / coup de pinceau — uniquement dans la section Produits */
.section-produits .produits__cta .btn-outline, .section-avis .produits__cta .btn-outline, .section-emporter .btn-outline {
  border: none;
  border-radius: 0;
  background: #1a1a1a;
  color: #fff;
  padding: 18px 38px;
  clip-path: url(#brushClip);
}
.section-produits .produits__cta .btn-outline:hover, .section-avis .produits__cta .btn-outline:hover, .section-emporter .btn-outline:hover {
  background: var(--burgundy);
  color: #fff;
}
.adresse-card__cta .btn-outline {
        background: rgb(247 168 28);
    }

.section-histoire .btn-outline {
border: none;
    border-radius: 0;
    background: #1a1a1a;
    color: #ffffff;
    padding: 18px 38px;
    clip-path: url(#brushClip);
    font-family: var(--font-display);
}

.histoire__title span{position:relative}
.histoire__title span:before {
    content: 'Nous !';
    background: #f5a623;
    position: absolute;
    padding: 13px;
    clip-path: url(#brushClip);
    font-size: 77%;
    transform: rotate(-5deg);
    left: 14px;
    top: 19px;
    color: #fff;    width: 115px;
}

.section-emporter .produits__cta .btn-outline {
  border: none;
  border-radius: 0;
  background: var(--burgundy);
  color: #fff;
  padding: 18px 48px;
  clip-path: url(#brushClip);
}


.hero .btn--primary {
    color: #fff;
    padding: 24px 38px;
    background: none;
    border: none;
    backdrop-filter: blur(0px);
    box-shadow: none;
    overflow: visible;
    position: relative;

}
.hero .btn--primary:before {
       content: "";
    position: absolute;
    inset: 0;
    clip-path: url(#brushClip);
    background: var(--orange);
    border-radius: inherit;
    z-index: -1;
}
.hero .btn--primary::after {
     content: "";
    position: absolute;
    inset: 0;
    background: url(../images/soleil.png) center;
    border-radius: inherit;
    z-index: -1;
    width: 47px;
    height: auto;
    aspect-ratio: 36/31;
    top: -13px;
    background-size: 100% 100%;
    left: -20px;
    border-radius: 0;
}
.hero  .btn--ghost {
    background: rgb(255 255 255);
    backdrop-filter: blur(6px);
    border: 0px solid rgba(255, 255, 255, .25);
    color: #000;padding: 24px 38px;
  clip-path: url(#brushClip);
}


/* =========================================================
   AVIS CLIENTS
   ========================================================= */
.section-avis { background: #fff; padding:  60px 0 60px;  position:relative;  overflow: hidden;     background: var(--cream);    background: url(../images/backg.webp);
    background-size: cover;}.section-avis:before{    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #fffcfabf;
    top: 0;}
.section-avis .container{ padding-right:  0;z-index: 2;
    position: relative; }
@media (min-width: 1024px) { .section-avis { padding: 48px 0 48px; } }
.avis__header { text-align: center; margin-bottom: 32px;    padding-right: 30px; }
@media (min-width: 1024px) { .avis__header { margin-bottom: 40px; } }

.avis__grid { display: none; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.avis__scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 0 24px;
  margin: 0 -24px;
  scrollbar-width: none;
}
.avis__scroll::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
  .avis__grid { display: grid; }
  .avis__scroll { display: none; }
}

.avis-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 50px;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.avis__scroll .avis-card { width: 280px; flex-shrink: 0; padding: 30px; }
.avis-card__stars { display: flex; gap: 2px; margin-bottom: 12px; }
.avis-card__stars svg {    width: 17px;
    height: 17px;
    fill: #ffffff;
    color: #ffffff;
    background: #d55f2d;
    padding: 2px;
    border-radius: 2px;
	}
.avis-card__text { font-size: 12px; color: var(--text-soft); line-height: 1.7; flex: 1; }
.avis-card__footer { margin-top: 16px; }
.avis-card__name { font-weight: 700; font-size: 11px; color: #1a1a1a;     font-family: var(--font-display);}
.avis-card__date { font-size: 10px; color: var(--text-faint); margin-left: 8px; }
@media (min-width: 1024px) { .avis-card__text { font-size: 13px; } }

/* =========================================================
   HISTOIRE (UNIVERS)
   ========================================================= */
   
   
   
   .histoire__banner {
  position: relative;
  overflow: hidden; /* important pour ne pas casser le layout avec la rotation */
}

.histoire__marquee {
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: 70px;
  width: 110%;
  transform: rotate(4deg);
  background-color: #d55f2dc7;
  overflow: hidden;
  padding: 12px 0;
  z-index: 5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.histoire__marquee2 {    left: -5%;
    right: inherit;
    top: 40px;
    bottom: inherit;
    transform: rotate(353deg);}
.histoire__marquee-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  width: max-content;
  animation: marquee-scroll 18s linear infinite;
}

.histoire__marquee-item {
  font-family: var(--font-title, inherit);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  color: #fff;
  padding: 0 20px;
}

.histoire__marquee-dot {
    width: 29px;
    height: auto;
    aspect-ratio: 1;
    background-color: #f5a623;
    flex-shrink: 0;
    background: url(../images/fourchette-white.webp);
    background-size: cover;
    margin-top: -8px;
    margin-bottom: -8px;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.atout__icon svg path{stroke-width: 1;}

.section-histoire { position: relative; overflow: hidden; }
.histoire__banner {
  position: relative;
  width: 100%;
  min-height: 72vh;
  display: flex;
  align-items: center;
}
.histoire__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;    object-position
: left; }
.histoire__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(16,13,10,.92), rgba(16,13,10,.75), rgba(16,13,10,.45));    opacity: 0.1;
}
.histoire__content {
  position: relative;
  z-index: 10;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  padding: 56px 24px;
}
.histoire__text {     text-align: center; }
.histoire__eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: #f7a81c;
  margin-bottom: 4px;
}
.histoire__title {
  font-family: var(--font-display);
  color: #000;
  font-size: 33px;
  font-weight: 400;  font-weight: 600;
  text-transform: uppercase;
  line-height: .92;
  margin-top: 4px;
}
.histoire__desc {
    color: #000;
    font-size: 15px;
    line-height: 1.7;
    margin-top: 41px;
    width: 100%;
    font-weight: 500;
}
.histoire__cta { margin-top: 28px; }
@media (min-width: 640px)  { .histoire__title { font-size: 30px; } }
@media (min-width: 1024px) {
  .histoire__banner { min-height: 85vh; }
  .histoire__content {         padding: 80px 24px;
    width: 600px;
    background: white;
    border-radius: 20px;
    padding: 52px;
    color: black;
    max-width: 80%; }
  .histoire__eyebrow { font-size: 10px; letter-spacing: .3em; }
  .histoire__title { font-size: 40px; margin-top: 8px; }
}
@media (min-width: 1280px) { .histoire__title { font-size: 43px; } }


/* =========================================================
   banniere (UNIVERS)
   ========================================================= */
.section-banniere { position: relative; overflow: hidden;     border-radius: 0 0 20px 0;}
.banniere__banner {
    position: relative;
    width: 100%;
    min-height: 300px;
    display: flex;
    align-items: center;
    padding-top: 80px;
}
.banniere__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banniere__overlay {
  position: absolute;
  inset: 0;
  background:linear-gradient(to right, rgb(0 0 0 / 7%), rgb(0 0 0 / 0%), #00000033);
}

body#menu .banniere__overlay {
    background: linear-gradient(to right, rgb(0 0 0 / 7%), rgb(0 0 0 / 28%), #00000033);
}


.banniere__content {
  position: relative;
  z-index: 10;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  padding: 56px 24px;
}
.banniere__text {     text-align: center; }
.banniere__eyebrow {
  display: inline-block;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--pink-label);
  margin-bottom: 4px;
}
.banniere__title {
  font-family: var(--font-display);
  color: #fff;
  font-size: 27px;
  font-weight: 400;  font-weight: 600;
  text-transform: uppercase;
  line-height: .92;
  margin-top: 4px;text-shadow: 0 2px 4px black;
}
.banniere__desc {
  color: #fff;
  font-size: 12px;
  line-height: 1.7;
  margin-top: 16px;
  max-width: 100%;
}
.banniere__cta { margin-top: 28px; }
@media (min-width: 640px)  { .banniere__title { font-size: 30px; } }
@media (min-width: 1024px) {
  .banniere__banner { min-height: 420px; }
  .banniere__content { padding: 80px 40px; }
  .banniere__eyebrow { font-size: 10px; letter-spacing: .3em; }
  .banniere__title { font-size: 40px; margin-top: 8px; }
}
@media (min-width: 1280px) { .banniere__title { font-size: 48px; } }


.section-emporter .container--wide {
    max-width: 1300px;
    max-width: 90%;
    margin: 0 auto;
    padding: 0 24px;
}
/* =========================================================
   EMPORTER (Commander en ligne)
   ========================================================= */
.section-emporter { background: var(--cream); padding: 50px 0; }
@media (min-width: 1024px) { .section-emporter { padding: 60px 0; } }
.emporter__row {
  display: flex;
    align-items: center;
    gap: 30px;
    flex-direction: column-reverse;

}
@media (min-width: 1024px) { .emporter__row { gap: 32px;         flex-direction: row;} }
.emporter__text { flex: 1;     text-align: center;}
.emporter__eyebrow {
  display: inline-block;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: #d55f2d;
  margin-bottom: 4px;
}
.emporter__title {
  font-family: var(--font-display);
  color: #1a1a1a;
  font-size: 26px;
  font-weight: 400;  font-weight: 600;
  text-transform: uppercase;
  line-height: .92;
  margin-top: 4px;
}
.emporter__cta { margin-top: 30px; }
.emporter__image { position: relative;        flex: 1; }
.emporter__image img { width: 100%; max-width:80%;    margin: 0 auto; border-radius: 24px; box-shadow: 0 20px 40px rgba(0,0,0,.18); }
@media (min-width: 640px)  { .emporter__image img { width: 180px; } .emporter__title { font-size: 30px; } }
@media (min-width: 768px)  { .emporter__image img { width: 100%; }
.section-emporter .btn-outline svg{display:none}
.histoire__overlay {
    opacity: 0.1;
}
 }
@media (min-width: 1024px) { .emporter__image img { width: 100%; } .emporter__title { font-size: 40px; } .emporter__eyebrow { font-size: 10px; letter-spacing: .3em; }.emporter__text { flex: 1;     text-align: left;} }
@media (min-width: 1280px) { .emporter__title { font-size: 48px; } }
.hours-cover .btn {
        background: #1a1a1a;
        color: #fff;
        padding: 18px 38px;
        clip-path: url(#brushClip);border-radius: 0;
    }
	
.hours-cover .btn:hover {	background:var(--burgundy)    }
	
/* =========================================================
   CONTACT / NEWSLETTER BAR
   ========================================================= */
.section-contact { background: var(--burgundy-dark); padding: 32px 0;         display: none;}
@media (min-width: 1024px) { .section-contact { padding: 40px 0; } }
.contact__row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
@media (min-width: 640px) {
  .contact__row { flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (max-width: 1024px) {
.contact__row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
    justify-content: center;
    align-content: center;
}
}

.contact__title {
  color: #fff;
  font-size: 11px;
  font-weight: 700;  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .15em;
  margin-bottom: 6px;
}
.contact__desc { color: rgba(255,255,255,.6); font-size: 10px; margin-bottom: 12px; line-height: 1.6; }
.contact__form { display: flex; max-width: 320px;    position: relative; }
.contact__form input {
    flex: 1;
    background: transparent;
    border: 1px solid rgb(255 255 255);
    color: #fff;
    padding: 15px 18px;
    font-size: 11px;
    border-radius: 29px;
}
.contact__form input::placeholder { color: rgba(255,255,255,.4); }
.contact__form input:focus { outline: none; border-color: rgba(255,255,255,.5); }
.contact__form button {
    background: #fff;
    color: var(--burgundy);
    padding: 8px 9px;
    flex-shrink: 0;
    transition: background .2s;
    position: absolute;
    right: 8px;
    border-radius: 50%;
    top: 6px;
}
.contact__form button:hover { background: rgba(255,255,255,.9); }
.contact__form button svg { width: 14px; height: 14px; }

.social__title {
  color: #fff;
  font-size: 11px;
  font-weight: 700;  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .15em;
  margin-bottom: 12px;
}
.social__links { display: flex; gap: 12px;     justify-content: center;}
.social__links a {
    width: 64px;
    height: 64px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg transform='translate(0, 13)'%3E%3Cpath d='M100,10 C112,10 119,18 128,22 C137,26 149,24 156,31 C163,38 161,50 165,59 C169,68 177,75 177,87 C177,99 169,106 165,115 C161,124 163,136 156,143 C149,150 137,148 128,152 C119,156 112,164 100,164 C88,164 81,156 72,152 C63,148 51,150 44,143 C37,136 39,124 35,115 C31,106 23,99 23,87 C23,75 31,68 35,59 C39,50 37,38 44,31 C51,24 63,26 72,22 C81,18 88,10 100,10 Z' fill='%23d55f2d'/%3E%3C/g%3E%3C/svg%3E");    border-radius: 50%;
   background-size: contain;
    background-repeat: no-repeat;
    background-position: center; display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
}
.social__links a:hover { background: rgb(245 166 35); }
.social__links svg { width: 23px; height: 23px; fill: #fff; }

/* =========================================================
   FOOTER
   ========================================================= */
   
   .footer__apps{
    display:flex;
    gap:15px;
    align-items:center;
    flex-wrap:wrap;
}

.footer__apps a{
    transition:.3s ease;
}

.footer__apps{
    display:flex;
    gap:15px;
    align-items:center;
    flex-wrap:wrap;
}

.footer__apps a{
    transition:.3s ease;
}

.footer__apps a:hover{
    transform:translateY(-3px);
}

.footer__apps img{
      height: 45px;
    width: auto;
    display: block;
    border-radius: 11px;
}



.site-footer { background: var(--dark); color: #fff; }
.footer__main {margin: 0 auto;
    padding: 80px;}
.footer__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (min-width: 1024px) { .footer__grid { grid-template-columns: repeat(4, 1fr); gap: 40px; } }

.footer__logo img { height: 60px; width: auto; margin-bottom: 16px; }
.footer__tagline { color: white; font-size: 15px; line-height: 1.6; }

.footer__heading {
    font-size: 21px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
    font-family: var(--font-display);
}
.footer__list li { color: white; font-size: 14px; margin-bottom: 4px; }
.footer__list li.spacer { padding-top: 6px; }
.footer__list a { transition: color .2s; }
.footer__list a:hover { color: #fff; }

.footer__nav li { margin-bottom: 10px; }
.footer__nav a { color: white; font-size: 14px; transition: color .2s; }
.footer__nav a:hover { color: #fff; }

.footer__order li { margin-bottom: 8px; }
.footer__order a {
      display: inline-block;
    color: rgba(255,255,255,.6);
    font-size: 10px;
    transition: all .2s;
}




.horaires {
    position: relative;
    padding-left: 80px !important;
}
.clock-svg {
--size: 40px;
    --color: #f5a623;
    --spin-duration: 1200ms;
    height: var(--size);
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.circle,
.line-minutes,
.line-hours {
  fill: none;
  stroke: var(--color);
  stroke-width: 5px;
}

.circle {
  stroke-miterlimit: 10;
}

.line-minutes,
.line-hours {
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-origin: 50% 50%;
}

.line-minutes {
  animation: Spin var(--spin-duration) linear infinite;
}
.line-hours {
  opacity: 0.47;
  transform: rotate(90deg);
  animation: Spin calc(var(--spin-duration) * 9) linear infinite;
}

@keyframes Spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.line-hours {
  fill: none;
  stroke: var(--color);
  stroke-width: 5px;
}

.circle {
  stroke-miterlimit: 10;
}

.line-minutes,
.line-hours {
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-origin: 50% 50%;
}

.line-minutes {
  animation: Spin var(--spin-duration) linear infinite;
}
.line-hours {
  opacity: 0.47;
  transform: rotate(90deg);
  animation: Spin calc(var(--spin-duration) * 9) linear infinite;
}

@keyframes Spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}




.footer__order a:hover { color: #fff; border-color: rgba(255,255,255,.6); }

.footer__bottom {
    border-top: 0px solid rgba(255, 255, 255, .1);
    margin-top: 32px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    background: #161616;
    border-radius: 14px;
}
@media (min-width: 640px) { .footer__bottom { flex-direction: row; justify-content: space-between; text-align: left; } }
.footer__copy { color: rgba(255,255,255,.3); font-size: 10px; }
.footer__legal { display: flex; gap: 12px; }
.footer__legal a { color: rgba(255,255,255,.3); font-size: 10px; transition: color .2s; }
.footer__legal a:hover { color: rgba(255,255,255,.6); }
.footer__legal span { color: rgba(255,255,255,.2); font-size: 10px; }

/* =========================================================
   SCROLL REVEAL ANIMATIONS
   ========================================================= */
.scroll-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.23,1,.32,1), transform .7s cubic-bezier(.23,1,.32,1);
}
.scroll-reveal.revealed { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .scroll-reveal { opacity: 1; transform: none; transition: none; }
  .hero__title, .hero__subtitle, .hero__flag, .hero__ctas { animation: none; opacity: 1; transform: none; }
}


.contact-page{padding:30px 30px}
.contact-form-page{display:grid;gap:16px;max-width:700px;margin:30px auto}
.contact-form-page input,.contact-form-page textarea{padding:14px 25px;border:1px solid #ddd;border-radius:8px;font-size:16px;    background: #fff;
    border: 1px solid #efefef;
    border-radius: 20px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .05);}
.contact-form-page textarea{min-height:180px;    font-family: var(--font-body);}

  .menu-page{  background: url(../images/bg-grey.webp);
    background-size: 25%;}


/* =========================================================
   NOS ATOUTS
   ========================================================= */
.section-atouts {
    background: white;
    padding: 48px 50px;
    position: relative;
    z-index: 2;
}

.section-atouts .container--wide {
    max-width: 100%;
    padding: 0;
}

.atouts__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px 16px;
}

.atout__title2{ font-size: 26px;
    font-weight: 400;
    letter-spacing: 0;  font-weight: 600;
    text-transform: uppercase;
    color: var(--dark);
    margin-bottom: 30px;
    font-family: var(--font-display);    text-align: center;}
@media (min-width: 1024px) {
  .atouts__grid { grid-template-columns: repeat(4, 1fr);         gap: 25px 35px;}
}
.atout {
  position: relative;
  padding: 28px;
  text-align: center;    background: #fff;
    border: 1px solid #efefef;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .05);
}
@media (min-width: 1024px) {
  .atout:not(:first-child)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: rgb(239 239 239);
  }
}
.atout__icon {     width: 60px;
    height: 60px;
    margin: 0 auto 16px; }
.atout__icon svg { width: 100%; height: 100%; display: block; }
.atout__title {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0;  font-weight: 600;
    text-transform: uppercase;
    color: var(--dark);
    margin-bottom: 5px;
    font-family: var(--font-display);
}
.atout__desc {
  font-size: 10.5px;
  line-height: 1.5;
  color: black;
}

/* =========================================================
   RESEAUX SOCIAUX
   ========================================================= */
.section-social { padding: 64px 0 56px; overflow: hidden; }

.social__header { text-align: center; margin-bottom: 28px; padding: 0 24px; }
.social__header .social__links { margin-top: 18px; }

.social__carousel {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  cursor: grab;
}
.social__carousel::-webkit-scrollbar { display: none; height: 0; }
.social__carousel.is-dragging { cursor: grabbing; scroll-snap-type: none; }

.social__track {
  display: flex;
  gap: 14px;
  width: max-content;
  padding: 4px 24px 4px 50px;
}

.social__item:before{      background: url(../images/link-square-02.svg) no-repeat center;
    content: "";
    width: 30px;
    height: auto;
    aspect-ratio: 1;
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 2;background-size:28px}
	
	@media (max-width: 768px) { .social__item:before{     
    width: 20px;
    height: auto;background-size:18px   ; bottom: 12px;
    right:12px;
   }
   
  #menu  .banneree::after {
    width: 38px;
    height: auto;
    aspect-ratio: 124 / 144;
    top: -17px;
    background-size: cover;
    left: -21px;
}

   .profil-item__title {
    font-size: 14px !important;

}
}
		
		
@media (min-width: 1024px) { .social__track { gap: 18px; padding: 4px 80px 4px 100px; } }

.social__item {
  position: relative;
  flex: 0 0 auto;
  width: 143px;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  overflow: hidden;
  background: #111;
  scroll-snap-align: start;
}

.social__carousel,
.social__track,
.social__item,
.social__item img,
.social__item video {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

@media (min-width: 640px)  { .social__item { width: 200px; border-radius: 16px; } }
@media (min-width: 1024px) { .social__item {         width: 20vw; } }

.social__carousel { scroll-padding-left: 30px; }
@media (min-width: 1024px) { .social__carousel { scroll-padding-left: 60px; } }

.social__item img,
.social__item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;  

}

/* =========================================================
   MODAL COMMANDER
   ========================================================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
}
.modal-overlay.is-open { display: flex; }

.modal {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--cream);
  border-radius: 16px;
  padding: 44px 32px 54px;
  text-align: center;
  transform: translateY(20px);
  opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
}
.modal-overlay.is-open .modal {
  transform: translateY(0);
  opacity: 1;
}

.modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--text-soft);
  cursor: pointer;
  transition: background .2s, color .2s;
}
.modal__close svg { width: 18px; height: 18px; }
.modal__close:hover { background: rgba(0,0,0,.06); color: var(--burgundy); }

.modal__title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #000000;
  margin-bottom: 28px;
}

.modal__apps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.modal__apps a { display: block; transition: transform .3s ease; }
.modal__apps a:hover { transform: translateY(-3px); }
.modal__apps img {
  height: 64px;
  width: auto;
  display: block;
  border-radius: 16px;
}

body.modal-open { overflow: hidden; }

@media (max-width: 480px) {
  .modal { padding: 36px 22px 30px; }
  .modal__title { font-size: 24px; }
  .modal__apps img { height: 49px; }
}

/* =========================================================
   ORDER PICKER — sélecteur de restaurant réutilisable
   (Étape 1 : liste des restaurants / Étape 2 : icônes plateformes)
   Utilisé dans la modal "Commander" et dans le footer.
   ========================================================= */

/* IMPORTANT : .modal__apps / .footer__apps / .order-picker__list sont en
   display:flex, ce qui écrase l'attribut [hidden] par défaut du navigateur.
   On force donc explicitement le masquage ici. */
.order-picker [hidden] {
  display: none !important;
}

.order-picker__list {
display: flex;
    flex-direction: row;
    gap: 10px;
    flex-wrap: wrap;    justify-content: center;
}

.order-picker__btn {
  display: block;
  width: 100%;
  padding: 14px 18px;
  border: 1.5px solid rgba(0,0,0,.12);
  border-radius: 10px;
  background: #fff;
  font-size: 16px;
  letter-spacing: .5px;
  color: var(--dark);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.order-picker__btn:hover,
.order-picker__btn:focus-visible {
  border-color: var(--orange);
  background: var(--orange);
  color: #fff;
}

.order-picker__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 22px;
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  color: var(--text-soft);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.order-picker__back:hover { color: var(--burgundy); }

.order-picker__empty {
  font-size: 13px;
  color: var(--text-soft);
  margin: 0;
}

/* --- Variante footer (fond sombre) --- */
.order-picker--footer {
}
.order-picker--footer .order-picker__btn {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
  color: #fff;
  font-size: 13px;
  font-family: inherit;
  text-transform: none;
  letter-spacing: normal;
  text-align: center;
  padding: 10px 14px;
  border-radius: 8px;    width: auto;
}
.order-picker--footer .order-picker__btn:hover,
.order-picker--footer .order-picker__btn:focus-visible {
  background: var(--orange);
  border-color: var(--orange);
  color: #1a1a1a;
}
.order-picker--footer .order-picker__back {
  color: rgba(255,255,255,.6);
  margin-top: 14px;
}
.order-picker--footer .order-picker__back:hover { color: #fff; }
.order-picker--footer .order-picker__empty { color: rgba(255,255,255,.6); }
.order-picker--footer .footer__apps { margin-top: 2px; }




	body {
    padding-top:0px;
}
	body#index {
    padding-top: 0px;
}

body .navbar{
    background: rgb(255 255 255);
    box-shadow: 0 10px 25px rgba(0, 0, 0, .15);    border-bottom: 4px solid #f7a81c;
}

body#mentions-legales .section-produits, body#politique-confidentialite .section-produits  { 
    padding: 150px 0 65px !important;
}

   body#mentions-legales  .section-eyebrow,  body#politique-confidentialite  .section-eyebrow {
        text-align: center;    width: 100%;
    }
	
.uber2{    filter: grayscale(1);    pointer-events: none;    cursor: not-allowed;}
.deliveroo2{    filter: grayscale(1);    pointer-events: none;    cursor: not-allowed;}

@media (min-width: 1024px) {
.navbar__links a {
    margin-bottom: 0px;        color: black;        font-size: 15px;
        letter-spacing: 0;
}
}

@media (max-width: 1024px) {
	.produit-card__title {
    font-size: 21px;
    line-height: 1;
}
	body {
    padding-top: 0px;
}
	body#index {
    padding-top: 0px;
}

	.menu-page {
    padding: 2px 0px;
}

	.footer__main {
    margin: 0 auto;
    padding: 40px;
}
.footer__apps {
    align-items: center;
    justify-content: center;
}
.footer__grid {
    grid-template-columns: repeat(1, 1fr);text-align: center;gap: 35px;
}
.footer__logo img {
    height: 60px;
    width: auto;
    margin-bottom: 12px;
    margin: 0 auto 20px;
}

.footer__heading {
    letter-spacing: .5px;
}
	
.footer__list li {
    font-size: 12px;
}

body .menuimg img{
border-radius:8px
}

.contact-page .container--mid {
    max-width: 100%;
    padding: 0;
}
body .container--mid.menuimg{
           padding: 30px 30px 0 !important;
        gap: 12px;
}
.section-produits {     
    background-size: 50%; }
.section-produits .container{padding:0}

.produits__scroll .produit-card {
    width: 70vw;
    flex-shrink: 0;
    background: white;
    box-shadow: 0 0 17px #0000001c;
    padding: 0px;
    margin: 17px 0;
    border-radius: 20px;
}
.produits__scroll {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding: 0 30px;
    margin: 0 -18px;
    scrollbar-width: none;
}
    .section-produits {
        overflow: hidden;
    }
	.section-atouts {
    padding: 48px 30px;

}
.atout__icon {
    margin: 0 auto 11px;width: 50px;
        height: 50px;
}
.atouts__grid {
    gap: 25px 16px;
}
.atout {
    position: relative;
    padding: 20px;
    text-align: center;
}
.atout__title {
font-size: 12px;
        letter-spacing: 0;
}

#avis .produits__cta{
    padding-right: 20px;
}
body#mentions-legales .section-produits, body#politique-confidentialite .section-produits  { 
        overflow: hidden;
        padding: 96px 50px 60px !important;
        text-align: center;
}
}
.restaurant-info .container {
    padding: 0 35px;
}
#nos-restaurants .restaurant-info{    background: url(../images/bg-grey.webp);
    background-size: 25%;}
.restaurant-info,.restaurant-gallery{background:#fff;padding:80px 0;text-align: center;  }
.hours-cover{        background: url(../images/slide07.webp) center/cover no-repeat;
    padding: 119px 35px;}
.hours-card{    max-width: 600px;
    margin: auto;
    background: #fff;
    padding: 40px;
    text-align: center;
    border-radius: 30px;}
	
 .restaurant-gallery .section-title{margin-bottom:40px}
		.hours-card .section-title{margin-bottom:15px}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.gallery-grid img,.gallery-scroll img{    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    display: block;
    border-radius: 18px;}

.ccc {
    position: relative;
    left: inherit;
    top: inherit;
    transform: translate(0px, 0px);    width: 100%;
}


.restaurant-info p{padding:10px 0;}
.restaurant-info p a{
    border: none;font-weight:600;
    border-radius: 0;
    background: var(--orange);
    color: #fff;
    padding: 18px 38px;
    clip-path: url(#brushClip);    display: inline-block;}
	
	.col-une a {
    transition: color .2s;
    display: flex;
    align-items: center;
    align-content: center;
    gap: 7px;
}
	.col-une a svg{
    width: 20px;
}
.horaires {
    background: #232323;
    display: inline-block;
    padding: 17px 39px;
    margin-top: 20px;
    border-radius: 13px;
    font-weight: 800;
    font-size: 14px;
    border-bottom: 3px solid #f5a623;
    text-align: center;
    color: #ffffff;
}
.cook2{
    width: 80px;
}
.strategie .section-title {
    margin-bottom: 0;
}

#nos-restaurants .adresse-card .modal__apps img {
    height: 32px;
    width: auto;
    display: block;
    border-radius: 6px;
}
#nos-restaurants .adresse-card .modal__apps {
    gap: 9px;
}


#restaurant-drancy .restaurant-info .modal__apps img, #restaurant-saint-ouen .restaurant-info .modal__apps img, #restaurant-ivry-sur-seine .restaurant-info .modal__apps img {
    height: 45px;
    width: auto;
    display: block;
    border-radius: 9px;
}
#restaurant-drancy .restaurant-info .modal__apps, #restaurant-saint-ouen .restaurant-info .modal__apps, #restaurant-ivry-sur-seine .restaurant-info .modal__apps {
    gap: 9px;margin-top:25px;margin-bottom:10px
}




@media(max-width:768px){
	#nos-restaurants .adresse-card .modal__apps {
    margin-top:5px
}


#restaurant-drancy .restaurant-info .modal__apps, #restaurant-saint-ouen .restaurant-info .modal__apps, #restaurant-ivry-sur-seine .restaurant-info .modal__apps {
    margin-top:5px
}



	
		.fod {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-direction: row-reverse;
}
.adresse-card__dept {
    margin-bottom: 0 !important;
}
#nos-restaurants .adresse-card {
    padding: 23px 26px;
}
.btn-outline {
    padding: 7px 30px;
    font-size: 13px;
}
.adresse-card__dept {
        width: 29px !important;
        height: 29px !important;
        font-size: 11px !important;
}
#nos-restaurants .restaurant-info .section-title{display:none}
.adresse-card__ville {
    margin-bottom: 0 !important;    font-size: 22px !important; 
    line-height: 1;
    display: flex;
    align-items: center;
} 
#nos-restaurants .restaurant-info p {
    padding: 10px 0 0;
}

	.hero__subtitle span{
    background: #d55f2d;
    color: #fff;
    padding: 10px 18px;
    clip-path: url(#brushClip);
    display: inline-block;
    font-weight: 600;
    font-size: 14px;
}

	.cook2{
    width: 49px;
}
	.section-social {
    padding: 20px 0 36px;
}

	.avis__header h2{text-align: center;
        width: 100%;
        display: inline-block;
        margin-bottom: 0;}
	.atout__title2 {
    font-size: 21px;
}
	.histoire__content {
    position: relative;
    z-index: 10;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 56px 24px;
    background: white;
    border-radius: 20px;
    padding: 22px 30px;
    max-width: 80%;        margin-bottom: 40px;
}

#devenir-franchise .histoire__content {
    margin-bottom: 0;
}
#devenir-franchise .histoire__banner {
    min-height: 58vh;
}

	.histoire__title {
    font-size: 21px;
}

.histoire__title span:before {
    content: 'Nous !';
    background: #f7a81c;
    position: absolute;
    padding: 9px;
    clip-path: url(#brushClip);
    font-size: 67%;
    transform: rotate(-5deg);
    left: 7px;
    top: 10px;
    color: #ffffff;
    width: 49px;
    animation: pulseBadge2 1.5s ease-in-out infinite;
}
.histoire__desc {
    color: #000;
    font-size: 13px;
    line-height: 1.3;
    margin-top: 27px;
    width: 100%;
    font-weight: 500;
}.histoire__cta {
    margin-top: 12px;
}
	.footer__grid {
    text-align: center;
    gap: 35px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}
.footer__nav a {
    font-size: 12px;
}
	.col-une, .col-deux{width:calc(50% - 18px)}
	
	  .col-une{  text-align: left;}
			  .col-deux{  text-align: right;}
   .col-une .footer__heading, .col-deux .footer__heading {
        font-size: 13px;
    }
		
	.gallery-grid {
    grid-template-columns: repeat(1, 1fr);
}

.restaurant-info, .restaurant-gallery {
    background: #fff;
    padding: 40px 0;
    text-align: center;

}
.restaurant-info p a {
    font-size: 12px;
}

	}
	
	
	#menu .banniere__eyebrow {
    color: #ffffff;
}


/* =========================================================
   FRANCHISE — Devenir franchisé
   ========================================================= */
.section-franchise-intro { background: #fff; padding: 64px 0; text-align: center;   }
	.section-franchise-intro.strategie { background: url(../images/bg-grey.webp);
    background-size: 25%; }
.franchise-intro__text { max-width: 760px; margin: 16px auto 0; color: var(--text-soft); font-size: 14px; line-height: 1.8; }
.section-atouts .franchise-intro__text {
    width: 1160px;
    margin: 16px auto 30px;
    color: var(--text-soft);
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    max-width: 100%;
}

.franchise-intro__text2 { clip-path: url(#brushClip);
        background: #ffffff;
        padding: 40px;    margin: 0 auto; }
		.strategie img{
    max-width: 760px;
    width: 100%;
    margin: 0 auto;
}
@media (min-width: 1024px) { .section-franchise-intro { padding: 80px 0; } .franchise-intro__text { font-size: 15px; } }

.section-profils { background: white; padding: 56px 0; }
@media (min-width: 1024px) { .section-profils { padding: 80px 0; } }
.profils__header { text-align: center; margin-bottom: 32px; }
@media (min-width: 1024px) { .profils__header { margin-bottom: 48px; } }

.profils__grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
@media (min-width: 1024px) { .profils__grid { grid-template-columns: 1fr 1fr; gap: 56px; } }
.profils__image img { width: 100%; border-radius: 20px; box-shadow: 0 12px 30px rgba(0,0,0,.12); }

.profil-item { margin-bottom: 28px; }
.profil-item:last-child { margin-bottom: 0; }
.profil-item__title {
    font-family: var(--font-display);
    color: #ffffff;
    font-size: 20px;
    font-weight: 400;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    margin-bottom: 8px;
    clip-path: url(#brushClip);
    background: #f7a81c;
    padding: 17px;
    line-height: 1.1;
    display: inline-block;
}
.profil-item__desc { color: var(--text-soft); font-size: 13px; line-height: 1.75; }
@media (min-width: 1024px) { .profil-item__title { font-size: 18px; } .profil-item__desc { font-size: 14px; } }

/* ---- Le local idéal ---- */
.section-locaux { background: #fff; padding: 56px 0; }
@media (min-width: 1024px) { .section-locaux { padding: 80px 0; } }
.locaux__header { text-align: center; margin-bottom: 32px; }
@media (min-width: 1024px) { .locaux__header { margin-bottom: 48px; } }

.locaux__grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 640px) { .locaux__grid { grid-template-columns: 1fr; } }

.locaux-card {
  background: var(--cream);
  border-radius: 20px;
  padding: 40px 32px;
  text-align: center;
}
.locaux-card__icon { width: 56px; height: 56px; margin: 0 auto 18px; }
.locaux-card__icon img { width: 100%; height: 100%; object-fit: contain; }
.locaux-card__title {
  font-family: var(--font-display);
  color: #1a1a1a;
  font-size: 22px;
  font-weight: 400;  font-weight: 600;
  text-transform: uppercase;
  line-height: .95;
  margin-bottom: 4px;
}
.locaux-card__surface {
  font-family: var(--font-display);
  color: var(--burgundy);
  font-size: 15px;
  font-weight: 400;
  margin-bottom: 14px;
}
.locaux-card__desc { color: var(--text-soft); font-size: 13px; line-height: 1.7; }

/* ---- Accompagnement (icon box, reuses .atout look) ---- */
.section-accompagnement {     padding: 56px 0;
    position: relative;
    background: url(../images/bottom.webp) no-repeat center bottom #ece8e4;
    background-size: 100%;}
.section-accompagnement:before {     content: '';
    position: absolute;
    left: 0;
    top: 0;
    background: #00000005;
    width: 100%;
    height: 100%; }

@media (min-width: 1024px) { .section-accompagnement { padding: 80px 0; padding-bottom: 23vw;} }
.accompagnement__header { text-align: center; margin-bottom: 32px; }
@media (min-width: 1024px) { .accompagnement__header { margin-bottom: 48px; } }

.accompagnement__grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 768px) { .accompagnement__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.accomp-card {     background: #fff;
    border-radius: 18px;
    padding: 36px 28px;
    box-shadow: 0 0 17px #0000001c;
    text-align: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    gap: 30px;}

.rid{
    flex: 1;
    text-align: left;
}


.accomp-card__icon { width: 57px; margin-bottom: 18px; color: #d55f2d;     display: inline-block;}
.accomp-card__icon svg { width: 100%; height: 100%; }
.accomp-card__title {

    font-family: var(--font-display);
    color: #ffffff;
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 10px;
    clip-path: url(#brushClip);
    background: #f7a81c;
    padding: 17px;
    line-height: 1.1;
    display: inline-block;
}
.accomp-card__desc { color: var(--text-soft); font-size: 13px; line-height: 1.75; }

/* ---- Investissement (price cards) ---- */
.section-investissement { background: #fff; padding: 56px 0 40px;    background: url(../images/backg.webp);
    background-size: cover;        position: relative;}
.section-investissement:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #fffcfabf;
    top: 0;
}
.section-investissement .container {
    z-index: 2;
    position: relative;
}

@media (min-width: 1024px) { .section-investissement { padding: 80px 0 48px; } }
.investissement__header { text-align: center; margin-bottom: 32px; }
@media (min-width: 1024px) { .investissement__header { margin-bottom: 48px; } }

.prix__grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 640px)  { .prix__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .prix__grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }

.site-footer .order-picker__list {
    justify-content: flex-start;
}

}

.prix-card {
  border-radius: 20px;
  padding: 22px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;    background: #fff;
    border: 1px solid #efefef;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .05);
}
.prix-card__label {
     font-size: 14px;
    font-weight: 700;
    /* text-transform: uppercase; */
    letter-spacing: .05em;
    color: #ffffff;
    margin-bottom: 12px;
    clip-path: url(#brushClip);
    background: #f7a81c;
    padding: 17px;
    line-height: 1.1;
    display: inline-block;
    font-family: var(--font-display);
}


.strategie small{
    font-size: 10px;
    line-height: 1.3;
    margin-top: 30px;
    display: inline-block;
}


.prix-card__value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: #1a1a1a;
  margin-bottom: 14px;
}
.prix-card__desc { font-size: 12px; color: var(--text-soft); line-height: 1.6;  }

.investissement__note { text-align: center; max-width: 640px; margin: 28px auto 0; }
.investissement__note p { font-size: 15px; color: var(--text-soft); line-height: 1.7; margin-bottom: 6px; }
.investissement__note p.fine-print { font-size: 12px; color: var(--text-faint); }

/* ---- FAQ accordion ---- */
.section-faq { background: white; padding: 56px 0; }
@media (min-width: 1024px) { .section-faq { padding: 80px 0; } }
.faq__grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
@media (min-width: 1024px) { .faq__grid { grid-template-columns: 1fr 1fr; gap: 56px; } }
.faq__header { margin-bottom: 24px;    text-align: center; }
 .faq__image img { border-radius: 20px; box-shadow: 0 12px 30px rgba(0,0,0,.12); } 
@media (min-width: 1024px) { .faq__image { display: block; } }

.faq-accordion { }
.faq-item {    background: white;
    margin-bottom: 8px;
    border-radius: 10px;
    padding: 0 14px;background: var(--cream) }
.faq-item__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 4px;
  text-align: left;
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: #1a1a1a;
}
.faq-item__q svg { width: 16px; height: 16px; flex-shrink: 0; stroke: var(--burgundy); transition: transform .25s ease; }
.faq-item.is-open .faq-item__q svg { transform: rotate(180deg); }
.faq-item__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.faq-item__a p { padding: 0 4px 18px; font-size: 13px; color: var(--text-soft); line-height: 1.75; }
.faq-item.is-open .faq-item__a { max-height: 320px; }

/* ---- Formulaire franchise ---- */
.section-franchise-form { background: var(--burgundy-dark); padding: 56px 0; }
@media (min-width: 1024px) { .section-franchise-form { padding: 80px 0; } }
.franchise-form__header { text-align: center; margin-bottom: 32px; }
.franchise-form__header .section-title { color: #fff; }
.franchise-form__header .section-eyebrow { color: var(--pink-label); }

.franchise-form { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 700px; margin: 0 auto; }
@media (min-width: 640px) { .franchise-form { grid-template-columns: 1fr 1fr; } }
.franchise-form .full { grid-column: 1 / -1; }
.franchise-form input,
.franchise-form select,
.franchise-form textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid rgb(39 39 39);
    background: rgb(26 26 26);
    color: #fff;
    border-radius: 10px;
    font-size: 13px;
    font-family: var(--font-body);
}
.franchise-form select option { color: #fff; }
.franchise-form input::placeholder,
.franchise-form textarea::placeholder { color: rgba(255,255,255,.45); }
.franchise-form input:focus,
.franchise-form select:focus,
.franchise-form textarea:focus { outline: none; border-color: rgba(255,255,255,.6); }
.franchise-form textarea { min-height: 140px; resize: vertical; }
.franchise-form .franchise-form__submit { text-align: center; }
.franchise-form .btn--primary {
    border: none;
    border-radius: 0;
    background: rgb(255 255 255);
    color: #000000;
    padding: 16px 42px;
    clip-path: url(#brushClip);
    font-size: 12px;
    width: 100%;
}
.franchise-form .btn--primary:hover { background: rgb(26 69 53); }

@media (max-width: 1024px) {
  .accomp-card { padding: 28px 22px; }
  .prix-card__value { font-size: 18px; }
  .accomp-card__title {
    font-size: 12px;
}
  .section-franchise-intro {
    padding: 55px 0;
}
.section-franchise-intro .container--mid, .section-profils .container--mid, .section-locaux .container--mid, .section-accompagnement .container--mid, .section-investissement .container--mid, .section-faq .container--mid, .section-franchise-form .container--mid {
    padding: 0 30px;
}


	
.section-locaux, .section-accompagnement, .section-investissement {
    padding: 55px 0;
}
.section-accompagnement {
        padding-bottom: 28vw;
    }
.section-faq {
    text-align: center;
}
.faq-item__a p {
    text-align: left;
}

.accomp-card__desc {
    color: var(--text-soft);
    font-size: 12px;
    line-height: 1.35;
}
.accomp-card__icon {
    width: 46px;
    margin-bottom: 0;
    display: inline-block;
}
    .accomp-card {
        text-align: center;
    }
	
	.franchise-intro__text, .profil-item__desc, .locaux-card__desc, .faq-item__a p {
    font-size: 13px;
    line-height: 1.3;
}
.atouts__grid .atout:nth-child(3) {order:4}
.menu-page .section-title {
    text-align: center;
    margin-bottom: 10px;
    margin-top: 0px;
    font-size: 21px;
}

}

.menu-page .section-title {
    text-align: center;
}



.pourcent{  display:inline-block;font-size: 76%;
}


/* =========================================================
   NOS RESTAURANTS — cartes d'adresses
   ========================================================= */
.adresses__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}
@media (min-width: 768px) { .adresses__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.adresse-card {
  background: #fff;
  border: 1px solid #efefef;
  border-radius: 20px;
  padding: 32px 26px;
  text-align: center;
  box-shadow: 0 6px 20px rgb(0 0 0 / 13%);
}
.adresse-card__dept {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg transform='translate(0, 13)'%3E%3Cpath d='M100,10 C112,10 119,18 128,22 C137,26 149,24 156,31 C163,38 161,50 165,59 C169,68 177,75 177,87 C177,99 169,106 165,115 C161,124 163,136 156,143 C149,150 137,148 128,152 C119,156 112,164 100,164 C88,164 81,156 72,152 C63,148 51,150 44,143 C37,136 39,124 35,115 C31,106 23,99 23,87 C23,75 31,68 35,59 C39,50 37,38 44,31 C51,24 63,26 72,22 C81,18 88,10 100,10 Z' fill='%23d55f2d'/%3E%3C/g%3E%3C/svg%3E");
    border-radius: 50%;
    background-size: contain;
    background-repeat: no-repeat;
}
.adresse-card__ville {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--dark);
  margin-bottom: 8px;
}
.adresse-card__rue {
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.6;
}
.adresse-card__cta { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.adresse-card__ville a { color: inherit; text-decoration: none; }
.adresse-card__ville a:hover { color: var(--orange); }

/* =========================================================
   RIDEAU DE TRANSITION (preloader + changement de page)
   ========================================================= */
.preloader {
    position: fixed;
    inset: 0;
    z-index: 49;
    background: #ab4f27;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: opacity;
    background: #f7f2e8;
    background-size: cover;
}

/* Mini loader circulaire jaune, coin bas-droit */
.preloader__spinner {
    position: absolute;
    right: 24px;
    bottom: 24px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid rgb(247 168 28);
    border-top-color: #ecd6be;
    animation: preloader-spin .8s linear infinite;
    z-index: 3;
}

@keyframes preloader-spin {
  to { transform: rotate(360deg); }
}

.preloader:before {content:'';
    content: '';
    position: absolute;
    inset: 0;
    background: #fff5e2;
    background-size: 160px;
    background-repeat: repeat;
    opacity: 0.7;
    /* z-index: 2; */
}


.preloader__inner { display: flex; align-items: center; justify-content: center;   }
.preloader__logo {
    width: 70%;
    height: auto;
    opacity: .95;
    animation: preloader-pulse 1.1s ease-in-out infinite;
    max-height: 80vh;
    object-fit: cover;
    max-width: 229px;
}
@keyframes preloader-pulse {
  0%, 100% { transform: scale(1) rotate(5deg); }
  50%      { transform: scale(1.08);  }
}

@keyframes neon-flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    filter: drop-shadow(0 0 2px #ffffff80)      drop-shadow(0 0 5.5px #ffffff80)      drop-shadow(0 0 9.5px #ffffff80)      drop-shadow(0 0 20px #ffffff80);
  }
  20%, 24%, 55% {
    filter: 
      drop-shadow(0 0 1px #ff765f80)
      drop-shadow(0 0 2px #ff765f80);
  }
}


@media (min-width: 768px) { .preloader__logo { } }

/* Le contenu de page : légère marge de sécurité pour le fixed navbar */
#page-content { min-height: 40vh; }



 :root{
    --orange: #F5A623;
    --orange-dark: #E08E10;
    --ink: #1C1B1A;
    --cream: #FBF6EC;
    --card: #FFFFFF;
    --halal: #F5A623;
    --line: rgba(28,27,26,0.12);
  }
 
  *{box-sizing:border-box; margin:0; padding:0;}
 

  .page{
    width:100%;
    max-width: 640px;
  }
 
  /* ===== HEADER BANNER ===== */
.banneree {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 800px;
  max-width: 100%;
  background: none; /* le fond part sur le wrapper */
  border-radius: 18px 28px 22px 16px;
  padding: 39px 28px;
  gap: 16px;
  overflow: visible;
  animation: 0.6s ease-out 0s 1 normal forwards running dropIn;
}

.banneree::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: url(#brushClip);
  background: var(--orange);
  border-radius: inherit;
  z-index: -1;
}

.banneree::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url('../images/soleil.png');
    border-radius: inherit;
    z-index: -1;
    width: 61px;
    height: auto;
    aspect-ratio: 124 / 144;
    top: -20px;
    background-size: cover;
    left: -38px;
}

.menuimg {
    overflow: hidden;
}
 .menuimg .section{       max-width: 800px;
    width: 100%;
    background: #fff;
    /* border: 1px solid #efefef; */
    border-radius: 20px;
    padding: 32px 35px;
    text-align: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .05);
    margin-top: 4px;position:relative}

  .menuimg .section.garni:before{    content: '';
    background: url('../images/champi.webp');
    width: 82px;
    position: absolute;
    height: auto;
    aspect-ratio: 187 / 188;
    background-size: cover;
    right: -35px;
    top: -33px;
    animation: 1.5s ease-in-out 0s infinite normal none running pulseBadge;}



.menuimg .section.soc:before {
    content: '';
    background: url('../images/basilico.webp');
    width: 93px;
    position: absolute;
    height: auto;
    aspect-ratio: 194 / 262;
    background-size: cover;
    left: -35px;
    top: -53px;
    animation: 1.5s ease-in-out 0s infinite normal none running pulseBadge;z-index: 2;
}
	.menuimg img.cook{
    width: 58px;
    filter: invert(1);
}
	
	
	.banneree h1 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;    align-content: center;
    align-items: center;
}


@media (max-width: 768px) {
	.preloader__logo {
    max-width: 158px;
}

	.menuimg img.cook {
    width: 36px;
    filter: invert(1);
}
.banneree h1 {
    gap: 10px;
}
	.menuimg .section.garni:before {
    width: 57px;
    right: -25px;
    top: -33px;
}
.menuimg .section.soc:before {
    width: 69px;
    left: -29px;
    top: -22px;
}
}
  
  .banneree h1{
  font-family: var(--font-display);
    font-weight:800;
    font-size: clamp(13px, 5vw, 31px);
    color:#fff;
    letter-spacing: 0.5px;
    line-height:1.05;   
  }
 
  .banneree .price{
    text-align:right;
    color:#121212;
    flex-shrink:0;
  }
 
  .banneree .price .label{
    display:block;
    font-size: 12px;
    font-weight:700;
    opacity:0.9;
  }
 
  .banneree .price .amount{
    display:block;
font-family: var(--font-display);
    font-weight:800;
    font-size: clamp(22px, 5vw, 30px);
    line-height:1.1;
  }
 
  /* ===== SECTION TITLES ===== */
  .section{
    margin-top: 46px;
  }
 
  .section-title{
    display:flex;
    align-items:center;
    gap: 35px;
    margin-bottom: 26px;
    opacity:0;
    animation: fadeIn 0.5s ease-out forwards;
    animation-delay: 0.1s;    text-align: center;
    justify-content: center;
  }
 
  .section-title .dash{
    flex: 1;
    height: 13px;
    background-repeat: repeat-x;
    background-size: 22px 10px;
    background: #f5a623;
    opacity: 0.85;
    border-radius: 6px;
    clip-path: url(#brushClip);
  }
 
 .section-title .num {
    width: 40px;
    height: 40px; /* Ratio 1:1 aligné sur le viewBox 200x200 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg transform='translate(0, 13)'%3E%3Cpath d='M100,10 C112,10 119,18 128,22 C137,26 149,24 156,31 C163,38 161,50 165,59 C169,68 177,75 177,87 C177,99 169,106 165,115 C161,124 163,136 156,143 C149,150 137,148 128,152 C119,156 112,164 100,164 C88,164 81,156 72,152 C63,148 51,150 44,143 C37,136 39,124 35,115 C31,106 23,99 23,87 C23,75 31,68 35,59 C39,50 37,38 44,31 C51,24 63,26 72,22 C81,18 88,10 100,10 Z' fill='%23d55f2d'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    color: #fff;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
 
  .section-title h2{
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(20px, 5vw, 28px);
    white-space: nowrap;
    display: flex;
    align-content: center;
    align-items: center;
    gap: 14px;
  }
 
  /* ===== GRIDS ===== */
  .grid{
    display:grid;
    gap: 18px 12px;
  }
 
  .grid.pates{ grid-template-columns: repeat(5, 1fr); }
  .grid.garnitures{ grid-template-columns: repeat(4, 1fr); }
  .grid.sauces{ grid-template-columns: repeat(5, 1fr); }
 
  .item{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap: 8px;
    opacity:1;
    transform: translateY(0px) scale(1);
    transition: opacity 0.55s cubic-bezier(.22,1,.36,1), transform 0.55s cubic-bezier(.22,1,.36,1);
  }
 
  .item.in-view{
    opacity:1;
    transform: translateY(0) scale(1);
  }
 
  .item .thumb{
    width: 100%;
    aspect-ratio: 1/1;
    max-width: 92px;
    border-radius: 50%;
    overflow:hidden;
    background: #fff7e9;
    position:relative;
  }
 
  .item .thumb img{
    width:100%;
    height:100%;
    object-fit: cover;
    display:block;
  }
 
  .item .name{
     font-family: 'Cause', sans-serif;
    font-weight: 400;
    font-size: 12.5px;
    line-height: 1.2;
    color: var(--ink);
    font-family: var(--font-display);
    margin-top: 5px;
  }
 
  .item .halal{
    display:inline-block;
    background: var(--halal);
    color:#fff;
    font-size: 9px;
    font-weight:800;
    text-transform:lowercase;
    padding: 2px 10px;
    border-radius: 20px;
    margin-top: -2px;
  }
 
  /* ===== SÉLECTION D'ITEM (compose ton bol) ===== */
  .item{
    cursor: pointer;
  }

  .item .thumb{
    transition: box-shadow 0.25s ease, outline-color 0.25s ease;
    outline: 3px solid transparent;
    outline-offset: 3px;
  }

  .item:hover .thumb{
    box-shadow: 0 0 0 3px rgba(245,166,35,0.18);
  }

  .item.is-selected .thumb{
    outline-color: var(--orange, #F5A623);
    box-shadow: 0 0 0 3px rgba(245,166,35,0.18);
  }

  .item .item-check{
    position: absolute;
    top: -2px;
    right: -2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--orange, #F5A623);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.2s ease, transform 0.2s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    z-index: 2;
  }

  .item.is-selected .item-check{
    opacity: 1;
    transform: scale(1);
  }

  .item.is-selected .name{
    color: var(--orange-dark, #E08E10);
    font-weight: 700;
  }

  /* ===== MESSAGE FINAL "LA COMPO DU CHEF" ===== */
  .chef-message{
      margin-top: 0;
    padding: 20px 24px;
    border: 1px dashed var(--orange, #F5A623);
    border-radius: 14px;
    background: #fff7e9;
    text-align: center;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    width: 100%;
    max-width: 800px;
  }

  .chef-message[hidden]{
    display: none;
  }

  .chef-message.is-visible{
    opacity: 1;
    transform: translateY(0);
  }

  .chef-message__compo{
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 15px;
    color: var(--ink, #1C1B1A);
    margin-bottom: 6px;
  }

  .chef-message__compo span{
    color: var(--orange-dark, #E08E10);
  }

  .chef-message__quote{
    font-family: var(--font-body);
    font-size: 13.5px;
    font-style: italic;
    color: var(--text-muted, #777);
  }

  /* stagger delays for grid items */
  .item:nth-child(1){ transition-delay: 0.00s; }
  .item:nth-child(2){ transition-delay: 0.06s; }
  .item:nth-child(3){ transition-delay: 0.12s; }
  .item:nth-child(4){ transition-delay: 0.18s; }
  .item:nth-child(5){ transition-delay: 0.24s; }
  .item:nth-child(6){ transition-delay: 0.30s; }
  .item:nth-child(7){ transition-delay: 0.36s; }
  .item:nth-child(8){ transition-delay: 0.42s; }
  .item:nth-child(9){ transition-delay: 0.48s; }
  .item:nth-child(10){ transition-delay: 0.54s; }
 
  @keyframes dropIn{
    from{ opacity:0; transform: translateY(-14px); }
    to{ opacity:1; transform: translateY(0); }
  }
 
  @keyframes fadeIn{
    from{ opacity:0; }
    to{ opacity:1; }
  }
  .ddd{margin-bottom:80px}
 
 .ddd .btn-outline{
    border: none;
    border-radius: 0;
    background: #1a1a1a;
    color: #fff;
    padding: 18px 38px;
    clip-path: url(#brushClip);font-family: var(--font-display);
}

.ddd img {
    width: 37px;
    margin-top: -9px;
    margin-bottom: -10px;
}

  @media (max-width: 480px){
    .grid.pates, .grid.sauces{ grid-template-columns: repeat(3, 1fr); }
    .grid.garnitures{ grid-template-columns: repeat(3, 1fr); }
    .section-title h2{         font-size: 15px;
        gap: 6px;}
		.section-title {
    gap: 17px;
}
.menuimg .section {
    padding: 22px 24px;
}
.section-title .dash {
      height: 5px;
}
.menu-page .section-title {
    margin-bottom: 20px;
}
.section-title .num {
       width: 37px;
    height: 37px;
    font-size: 13px;
}
    .grid.pates, .grid.sauces, .grid.garnitures {
        grid-template-columns: repeat(3, 1fr);
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
	
	.item {
    width: calc(33.33% - 8px);
}
 .item .name {
    font-size: 9.5px;
}
.banneree .price .label {
    display: block;
    font-size: 9px;
    font-weight: 800;
    opacity: 0.9;
}
.banneree .price .amount {
    font-size: clamp(19px, 5vw, 30px);
}
.banneree {
    padding: 15px 28px;
}
  }
 
  @media (prefers-reduced-motion: reduce){
    .item, .banner, .section-title{
      animation: none !important;
      transition: none !important;
      opacity:1 !important;
      transform:none !important;
    }
  }