@font-face{
  font-family: 'Roj Chalk Title';
  src: url('/fonts/Parisienne-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: 'Roj Chalk Bod';
  src: url('/fonts/FrederickatheGreat-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* === Bandeau: fond modifiable (couleur OU image) === */
    :root{
      --nav-bg-color: #f0e8dd;
      --nav-bg-image: url('/img/headerBanner/nav-bg-roj-1680x80px.webp');

      /* HERO overlay fine tuning */
      --ol-scale: 1;      /* ex: 1.02 */
      --ol-x: 0px;        /* ex: 6px  */
      --ol-y: 0px;        /* ex: -4px */

      /* Vitre asset */
      --glass-w: 281px;
      --glass-h: 358px;
      --glass-img: url("/img/ui/vitre.webp");
      --glass-pad-top: 37px;   /* ✅ ajuste si tu veux descendre/remonter le début du texte */
      --glass-pad-x: 26px;
      --glass-pad-bottom: 26px;

      /* Typo Assets */
      --chalk-font:"Roj Chalk Title";
      --chalkBod-font:"Roj Chalk Bod";

    }

    .nav-bg{
      background-color: var(--nav-bg-color);
      background-image: var(--nav-bg-image);
      background-size: cover;
      background-position: center;
    }

    /* Scrollbar hidden */
    .hide-scroll::-webkit-scrollbar{display:none}
    .hide-scroll{scrollbar-width:none}

    /* ================= HERO VIDEO ================= */
    .heroStage{
      position:relative;
      height:72vh;
      min-height:520px;
      overflow:hidden;
      background:#000;
    }

    .heroVid{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:center;
      backface-visibility:hidden;
      transform: translateZ(0);
    }

    .heroVid--bg{ z-index:1; }

    .heroShade{
      position:absolute;
      inset:0;
      z-index:2;
      background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.15));
    }

    .heroContent{
      position:relative;
      z-index:3; /* entre bg et overlay */
      height:100%;
      display:flex;
      flex-direction:column;
      justify-content:center;
      padding-left:6vw;
      padding-right:6vw;
      color:#fff;
      max-width:900px;
    }

    .heroContent h1{
      font-size:clamp(32px,4vw,64px);
      font-weight:800;
      line-height:1.05;
      text-shadow:0 12px 30px rgba(0,0,0,.6);
    }
    .heroContent p{
      margin-top:12px;
      font-size:clamp(14px,1.8vw,20px);
      color:rgba(255,255,255,.92);
    }

    .heroVid--ol{
      z-index:4; /* au-dessus du texte */
      transform: translate3d(var(--ol-x), var(--ol-y), 0) scale(var(--ol-scale));
      will-change: transform;
      pointer-events:none;
    }

    @media (max-width: 900px){
      .heroContent{ padding-top:14vh; justify-content:flex-start; }
    }

    /* ================= SECTION PROMESSES (BG image) ================= */
    .benefitsSection{
      position: relative;
      min-height: 100vh;
      background-image: url("/img/rojKebabQuality.webp");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      display:flex;
      align-items:center;
    }

    .benefitsSection::before{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(180deg, rgba(0,0,0,.52), rgba(0,0,0,.26));
      z-index:0;
      pointer-events:none;
    }

    .benefitsInner{
      position: relative;
      z-index: 1;
      width: 100%;
    }

    /* ===== Logo + titre ===== */
    .benefitsLogo{
      width: 150px;
      height: 110px;
      object-fit: contain;
      display: block;
      margin: 0 auto 14px;
      filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
    }

    .benefitsTitle{
      text-align:center;
      font-size: clamp(28px, 4vw, 46px);
      font-weight: 800;
      color: #fff;
      text-shadow: 0 10px 30px rgba(0,0,0,.6);
      margin-bottom: 76px;
      opacity: 0;
      transform: translateY(20px);
      transition: all .6s ease;
    }

    .benefitsSection.is-visible .benefitsTitle{
      opacity:1;
      transform: translateY(0);
    }

    /* ===== Nos 3 Promesses - panneaux ardoise ===== */
    :root{
      --chalkboard-img: url('/img/ui/panneau-ardoise-restaurant.webp');
      --chalk-font: "Roj Chalk Title", "Comic Sans MS", "Trebuchet MS", system-ui, sans-serif;
    }

    .benefitsRail{
      display:grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 34px;
      justify-items: center;
      align-items: stretch;
    }

    .benefitCard{
      position: relative;
      width: min(340px, 90vw);
      min-height: 470px;
      padding: 70px 42px 46px;
      color: #f8f2df;
      overflow: hidden;
      isolation: isolate;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:flex-start;
      text-align:center;
      background:
        linear-gradient(rgba(0,0,0,.08), rgba(0,0,0,.18)),
        var(--chalkboard-img) center center / 100% 100% no-repeat,
        #181818;
      border-radius: 6px;
      box-shadow:
        0 22px 42px rgba(0,0,0,.42),
        0 8px 16px rgba(0,0,0,.22);
      filter: none;
    }

    /* Voile ardoise discret si l'image utilisée est trop contrastée */
    .benefitCard::before{
      content:"";
      position:absolute;
      inset: 24px;
      z-index:-1;
      background:
        radial-gradient(circle at 50% 20%, rgba(255,255,255,.06), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.16));
      border-radius: 2px;
      pointer-events:none;
    }

    /* Fine poussière de craie, sans gêner la lecture */
    .benefitCard::after{
      content:"";
      position:absolute;
      inset: 32px;
      z-index:0;
      pointer-events:none;
      opacity:.18;
      background:
        radial-gradient(circle at 18% 22%, rgba(255,255,255,.42) 0 1px, transparent 1.5px),
        radial-gradient(circle at 72% 36%, rgba(255,255,255,.34) 0 1px, transparent 1.5px),
        radial-gradient(circle at 48% 72%, rgba(255,255,255,.30) 0 1px, transparent 1.5px);
      background-size: 54px 54px, 68px 68px, 78px 78px;
    }

    .benefitIcon,
    .benefitCard h3,
    .benefitCard p{
      position: relative;
      z-index: 1;
    }

    .benefitIcon{
      width: 82px;
      height: 82px;
      object-fit: contain;
      display:block;
      margin: 0 auto 18px;
      filter:
        grayscale(1)
        brightness(2.25)
        contrast(1.18)
        drop-shadow(0 3px 0 rgba(0,0,0,.38));
      opacity: .92;
    }

    .benefitCard h3{
      margin: 0 0 16px;
      color: #fffaf0;
      font-family: var(--chalk-font);
      font-size: clamp(24px, 2.1vw, 32px);
      line-height: 1.05;
      font-weight: 800;
      letter-spacing: .01em;
      text-align: center;
      text-shadow:
        0 1px 0 rgba(255,255,255,.18),
        0 4px 10px rgba(0,0,0,.55);
      -webkit-font-smoothing: antialiased;
      text-rendering: geometricPrecision;
      overflow-wrap: break-word;
      word-break: normal;
    }

    .benefitCard p{
      margin: 0;
      color: rgba(255,250,235,.88);
      font-family: var(--chalkBod-font);
      font-size: 16px;
      line-height: 1.48;
      font-weight: 500;
      text-align: center;
      text-shadow: 0 3px 8px rgba(0,0,0,.50);
      overflow-wrap: break-word;
      word-break: normal;
    }

    /* ✅ Mobile & tablettes : swipe horizontal propre */
    @media (max-width: 900px){
      .benefitsSection{
        min-height: 70vh;
        align-items: flex-end;
      }

      .benefitsTitle{
        margin-bottom: 38px;
      }

      .benefitsRail{
        display:flex;
        gap: 18px;
        overflow-x:auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px;
        justify-content:flex-start;
        align-items:stretch;
        scrollbar-width:none;
      }

      .benefitsRail::-webkit-scrollbar{
        display:none;
      }

      .benefitCard{
        flex: 0 0 auto;
        width: min(340px, 86vw);
        min-height: 450px;
        padding: 64px 36px 42px;
        scroll-snap-align: start;
      }
    }

    @media (max-width: 520px){
      .benefitCard{
        width: min(320px, 86vw);
        min-height: 430px;
        padding: 58px 30px 38px;
      }

      .benefitIcon{
        width: 72px;
        height: 72px;
        margin-bottom: 14px;
      }

      .benefitCard p{
        font-size: 15px;
        line-height: 1.42;
      }
    }

  /* ============================
   MENU - Cards style "capture"
   ============================ */
  /* =========================
   RAIL HORIZONTAL
   ========================= */

  #menu-rail{
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px;
  }

  #menu-rail::-webkit-scrollbar{
    display:none;
  }


  /* =========================
     CARTE CATEGORIE
     ========================= */

  .catCard{
    min-width: 280px;
    width: 280px;
    min-height: 395px;
    height: 395px;
    border-radius: 22px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,.08);
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
  }


  /* =========================
     BANDEAU HAUT
     ========================= */

  .catTop{
    position: relative;
    height: 170px;
    padding: 18px 18px 14px;
    overflow: hidden;
  }

  /* --- Motif PNG écrêté --- */
  .catTop .catBgPattern{
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('/img/menuResto/graph/cardMenu-bg278x115px.webp');
    background-repeat: repeat;
    background-size: 280px 115px;
    opacity: 0.35;
    mix-blend-mode: screen;
    pointer-events: none;
  }

  /* --- Highlight doux --- */
  .catTop::after{
    content:"";
    position:absolute;
    inset:-20%;
    z-index:1;
    background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.22), transparent 55%);
    pointer-events:none;
  }

  /* --- Titre --- */
  .catTitle{
    position: relative;
    z-index:2;
    color: #ffffff;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
    text-shadow: 0 10px 18px rgba(0,0,0,.25);
    text-align: center;
    width: 100%;
  }

  /* --- Bouton capsule --- */
  .catBtn{
    /* on écrase le style précédent */
    position: relative;
    z-index: 3;
    margin: 12px auto 0;     /* ✅ centré */
    display: inline-flex;
    align-items: center;
    justify-content: center; /* base */
    gap: 10px;
    padding: 12px 18px;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,.65);
    color: #ffffff;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    background: rgba(0,0,0,.06);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    overflow: hidden;
  }

  /* conteneur du texte pour pouvoir le recentrer */
  .catBtn .label{
    display: inline-block;
    transform: translateX(0);
    transition: transform .28s ease, color .28s ease;
    white-space: nowrap;
  }

  /* flèche */
  .catBtn .arrow{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,.65);
    transition: transform .28s ease, opacity .22s ease;
    flex: 0 0 auto;
  }

  /* Hover: fond orange + texte brun */
  .catBtn:hover{
    background: #F28A2F;
    border-color: rgba(242,138,47,.55);
  }

  /* Hover: la flèche part à droite et disparaît */
  .catBtn:hover .arrow{
    transform: translateX(26px);
    opacity: 0;
  }

  /* Hover: le texte prend la place (se recentre) + couleur */
  .catBtn:hover .label{
    color: #ffffff;
    transform: translateX(-14px); /* compense l’espace de la flèche */
  }


  /* =========================
     IMAGE CATEGORIE
     ========================= */

  .catMedia{
    position: relative;
    flex: 1;
  }

  .catImg{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display:block;
  }


  /* =========================
     BLOC ITEMS (GLASS BLUR)
     ========================= */

  .catItems{
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 213px;

    padding: 10px 14px;
    border-radius: 16px;

    background: rgba(255,255,255,.60);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border: 1px solid rgba(255,255,255,.8);
    box-shadow: 0 14px 26px rgba(0,0,0,.18);

    list-style: none;
    margin: 0;
  }

  .catItems li{
    display:flex;
    justify-content: space-between;
    font-size: 14px;
    line-height: 1.3;
    color: rgba(20,20,20,.90);
  }

  .catItems li + li{
    margin-top: 6px;
  }

  .catItems strong{
    white-space: nowrap;
  }

  /* Zone dédiée au bouton en bas */
  .catCta{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    display: flex;
    justify-content: center;
    z-index: 4;
  }

  /* ✅ Mobile: swipe horizontal */
  @media (max-width: 768px){
    .benefitsRail{
      display:flex;
      gap: 14px;
      overflow-x:auto;
      scroll-snap-type:x mandatory;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 10px;
    }
    .benefitCard{
      scroll-snap-align: start;
      width: min(var(--glass-w), 82vw); /* un peu moins large sur mobile */
    }
  }

    /* ✅ Mobile = swipe horizontal */
    @media (max-width: 768px){
      .benefitsSection{
        min-height: 70vh;
        align-items: flex-end;
      }

      .benefitsRail{
        display:flex;
        gap: 14px;
        overflow-x:auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
        justify-items: initial;
      }

      .benefitsRail::-webkit-scrollbar{ display:none; }
      .benefitsRail{ scrollbar-width:none; }

      .benefitCard{
        scroll-snap-align: start;
      }
    }

  /* =========================
     ICONES - 3 PROMESSES
     ========================= */
  .benefitIcon{
    width: 106px;
    height: 106px;
    object-fit: contain;
    display:block;
    margin: 0 auto 8px; /* juste au-dessus du titre */
    filter: drop-shadow(0 10px 18px rgba(0,0,0,.25));
    opacity: .95;
  }

  /* Evite le "lettre par lettre" si la carte est contrainte */
  .benefitCard h3,
  .benefitCard p{
    overflow-wrap: break-word; /* remplace le comportement agressif */
    word-break: normal;
  }

  .benefitCard h3{
    text-align: center;
  }

  /* ✅ Mobile & tablettes : cartes lisibles (défilement horizontal propre) */
  @media (max-width: 900px){
    .benefitsTitle{ margin-bottom: 38px; }

    .benefitsRail{
      display:flex !important;
      gap: 14px;
      overflow-x:auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 10px;
      justify-content: flex-start;
      align-items: center;
    }
    .benefitsRail::-webkit-scrollbar{ display:none; }
    .benefitsRail{ scrollbar-width:none; }

    .benefitCard{
      flex: 0 0 auto;                 /* ✅ empêche le rétrécissement */
      width: min(340px, 86vw);
      height: var(--glass-h);         /* conserve la vitre */
      scroll-snap-align: start;
    }
  }

  /* ===== Logo au-dessus du titre "Nos 3 Promesses" ===== */
  .benefitsLogo{
    width: 150px;
    height: 110px;
    object-fit: contain;
    display: block;
    margin: 0 auto 14px; /* centre + espace sous logo */
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
  }

  /* ===== Bouton Just Eat ===== */

  .justEatBtn{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 12px 20px;
    border-radius: 14px;
    font-weight: 700;
    background: #ffffff;
    color: #261413;
    border: 2px solid #ff7f03;

    transition: background .25s ease, color .25s ease;
    overflow: hidden;
  }

  /* Logos superposés */
  .justEatBtn img{
    height: 26px;
    object-fit: contain;
    transition: opacity .25s ease, transform .25s ease;
  }

  /* Logo normal visible par défaut */
  .justEatLogo{
    opacity: 1;
  }

  /* Logo négatif caché par défaut */
  .justEatLogoHover{
    position: absolute;
    opacity: 0;
    transform: scale(0.85);
  }

  /* Hover */
  .justEatBtn:hover{
    background:#ff7f03;
    color:#ffffff;
  }

  /* Switch logos au hover */
  .justEatBtn:hover .justEatLogo{
    opacity:0;
    transform: scale(0.85);
  }

  .justEatBtn:hover .justEatLogoHover{
    opacity:1;
    transform: scale(1.50);
  }

  .justEatBtn:hover span{
    opacity:0;
  }

  /* ===== Zone boutons menu ===== */
  .menuActions{
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
  }

  /* pousse le second bouton à droite */
  .menuActions .callBtn{
    margin-left: auto; /* ✅ le place tout à droite */
  }

  /* ===== Style bouton "Appeler le restaurant" ===== */
  .callBtn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 22px;
    border-radius: 14px;
    font-weight: 700;
    background: #ffffff;
    color: #733E20;
    border: 2px solid #733E20;
    text-decoration: none;
    transition: background .25s ease, color .25s ease, transform .15s ease;
  }

  /* Hover */
  .callBtn:hover{
    background:#733E20;
    color:#ffffff;
    transform: translateY(-1px);
  }

  @media (max-width:640px){
    .menuActions{
      flex-direction: column;
    }
    .menuActions .callBtn{
      margin-left: 0;
      width: 100%;
    }
  }


    /* Perf: skip rendering below-the-fold until needed */
    .benefitsSection, #menu, footer{
      content-visibility: auto;
      contain-intrinsic-size: 1000px;
    }

    /* Respect reduced motion */
    @media (prefers-reduced-motion: reduce){
      .benefitCard::before{ animation: none !important; }
    }


/* ===== MENU PAGE (AUTO) ===== */
.noScroll{ overflow:hidden; }

/* Page container */
.menuPage{ padding: 34px 0 70px; }
.menuPageHead{ padding: 26px 0 18px; }
.menuH1{ font-size: clamp(28px, 3.4vw, 44px); font-weight: 900; letter-spacing: -0.02em; color:#111; }
.menuLead{ margin-top: 8px; max-width: 780px; color: rgba(17,17,17,.72); font-size: 15px; line-height: 1.45; }

.menuHeadActions{ margin-top: 14px; display:flex; gap:12px; align-items:center; }
.menuCatsBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 16px;
  border-radius: 999px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 12px;
  background: #261413;
  color: #fff;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 10px 18px rgba(0,0,0,.10);
}
.menuCatsBtn:hover{ opacity:.92; }

/* Sections */
.menuSection{ margin-top: 26px; }
.menuSectionHead{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding: 14px 0; border-bottom: 1px solid rgba(0,0,0,.08); }
.menuH2{ font-size: 22px; font-weight: 900; color:#222; }
.menuTopLink{ font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: rgba(0,0,0,.55); }
.menuTopLink:hover{ text-decoration: underline; }

/* Grid */
.menuGrid{ margin-top: 14px; display:grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 900px){ .menuGrid{ grid-template-columns: 1fr 1fr; gap: 16px; } }

/* Rail horizontal (comme la capture "Incontournables") */
.menuGrid--rail{
  display:flex;
  grid-template-columns: none;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.menuGrid--rail .menuCard{
  flex: 0 0 auto;
  width: min(520px, 86vw);
  scroll-snap-align: start;
}
@media (min-width: 900px){
  .menuGrid--rail .menuCard{ width: 520px; }
}
/* Scrollbar discret */
.menuGrid--rail{ scrollbar-width: thin; }
.menuGrid--rail::-webkit-scrollbar{ height: 10px; }
.menuGrid--rail::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.18); border-radius: 999px; }
.menuGrid--rail::-webkit-scrollbar-track{ background: rgba(0,0,0,.06); border-radius: 999px; }


/* Card */
.menuCard{
  background:#fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  overflow:hidden;
  display:flex;
  min-height: 120px;
  box-shadow: 0 10px 18px rgba(0,0,0,.06);
}
.menuCardBody{ flex: 1; padding: 14px 14px; display:flex; flex-direction:column; gap: 8px; }
.menuH3{ font-size: 15px; font-weight: 900; color:#1b1b1b; line-height:1.2; }
.menuDesc{ font-size: 13px; color: rgba(0,0,0,.62); line-height:1.35; margin:0; }
.menuMeta{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap: 10px; }
.menuPrice{ font-weight: 900; color:#261413; }

.menuBadge{
  display:inline-flex;
  align-items:center;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  background: rgba(38,20,19,.08);
  color: #261413;
}
.menuBadge--new{ background: rgba(242,138,47,.16); color:#8a3a00; }

/* Thumb */
.menuThumb{ width: 140px; background: #f6f6f6; border-left: 1px solid rgba(0,0,0,.06); }
.menuThumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ===== Modal Catégories ===== */
.catModalOverlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
/* Important: respecte l'attribut hidden (sinon la modal ne se ferme jamais) */
.catModalOverlay[hidden]{
  display: none !important;
}
.catModalBackdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.35);
}

/* Panel centré quelle que soit la taille */
.catModalPanel{
  position: relative;
  width: min(720px, 92vw);
  max-height: 92vh;
  background:#fff;
  border-radius: 24px;
  overflow:hidden;
  box-shadow: 0 26px 60px rgba(0,0,0,.22);
  display:flex;
  flex-direction:column;
}

/* Sur très petit écran : on maximise l’espace */
@media (max-width: 520px){
  .catModalOverlay{ padding: 10px; }
  .catModalPanel{ width: 100%; max-height: 94vh; border-radius: 18px; }
  .catModalTitle{ font-size: 26px; }
  .catModalItem{ font-size: 22px; }
}

.catModalTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.catModalTitle{ font-size: 32px; font-weight: 900; color:#222; margin:0; }
.catModalClose{
  font-size: 34px;
  line-height: 1;
  border: 0;
  background: transparent;
  padding: 6px 10px;
  cursor:pointer;
  opacity:.75;
}
.catModalClose:hover{ opacity:1; }

.catModalList{ padding: 10px 0; overflow:auto; }
.catModalItem{
  display:block;
  padding: 18px 20px;
  font-size: 28px;
  font-weight: 900;
  color:#333;
  text-decoration:none;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.catModalItem:hover{ background: #f7f7f7; }


/* --- FIX iOS Safari: fermeture modal Catégories --- */
.catModalOverlay{ pointer-events:auto; }
.catModalBackdrop{ z-index:0; }
.catModalPanel{ z-index:1; }
.catModalClose{
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* =========================
   CONTACT PAGE - ROJ KEBAB
   ========================= */
.contactPage{
  background:#efefef;
  padding: 18px 0 90px;
}

.contactHero{
  padding: 24px 16px 10px;
}

.contactHeroInner{
  max-width: 980px;
  margin: 0 auto;
  text-align:center;
}

.contactTitle{
  display:inline-block;
  margin:0;
  padding: 10px 22px;
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 900;
  line-height:1.02;
  letter-spacing:-0.03em;
  color:#111;
}

.contactLead{
  margin: 18px auto 0;
  max-width: 780px;
  font-size: clamp(19px, 2vw, 26px);
  line-height:1.35;
  color:#222;
}

.contactShowcase{
  position:relative;
  margin-top: 34px;
  min-height: 605px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
}

.contactEdge{
  position:absolute;
  top: 168px;
  width: 38vw;
  max-width: 720px;
  min-width: 260px;
  height: 286px;
  background-size: cover;
  background-position:center;
  background-repeat:no-repeat;
}

.contactEdge--left{
  left:0;
  background-image: linear-gradient(rgba(0,0,0,.08), rgba(0,0,0,.08)), url('https://roj-kebab.ch/img/menuResto/food/contactEdgeLeft-rojBg-638x286px.webp');
  background-color:#5f341f;
}

.contactEdge--right{
  right:0;
  background-image: linear-gradient(rgba(0,0,0,.06), rgba(0,0,0,.06)), url('https://roj-kebab.ch/img/menuResto/food/contactEdgeRight-rojBg-638x286px.webp');
  background-color:#ae6d2d;
}

.contactCardWrap{
  position:relative;
  z-index:2;
  width:100%;
  display:flex;
  justify-content:center;
  padding: 0 16px;
}

.contactCard{
  width:min(640px, 100%);
  margin-top: 26px;
  background:#fff;
  border:4px solid #7b4a32;
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
  padding: 30px 36px 34px;
}

.contactInfos{
  display:flex;
  flex-direction:column;
  gap: 22px;
}

.contactInfoLine{
  display:flex;
  align-items:center;
  gap: 16px;
  color:#262626;
  font-size: clamp(18px, 2vw, 23px);
  line-height:1.3;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contactInfoLine:hover{ opacity:.82; }

.contactPhones{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
}

.contactIcon{
  flex: 0 0 34px;
  width:34px;
  text-align:center;
  font-size: 31px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
}

.contactIcon img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.contactForm{
  margin-top: 34px;
}

.contactInput{
  width:100%;
  border:0;
  border-radius:0;
  background:#e9e5df;
  color:#232323;
  padding: 18px 18px;
  font-size: 18px;
  line-height:1.25;
  margin: 0 0 18px;
  outline:none;
}

.contactInput::placeholder{
  color: rgba(60,60,60,.42);
}

.contactInput:focus{
  box-shadow: inset 0 0 0 2px rgba(123,74,50,.32);
}

.contactTextarea{
  min-height: 132px;
  resize: vertical;
}

.contactSubmitWrap{
  display:flex;
  justify-content:center;
  padding-top: 4px;
}

.contactSubmit{
  min-width: 182px;
  border:0;
  border-radius: 999px;
  background:#7b4a32;
  color:#fff;
  font-size: 18px;
  font-weight:700;
  padding: 14px 30px;
  transition: transform .16s ease, opacity .16s ease;
}

.contactSubmit:hover{
  opacity:.92;
  transform: translateY(-1px);
}

.contactMapSection{
  margin-top: 100px;
  padding: 0 16px;
}

.contactMapInner{
  max-width: 1200px;
  margin: 0 auto;
}

.contactMapHead{
  text-align:center;
  margin-bottom: 24px;
}

.contactMapHead h2{
  margin:0;
  font-size: clamp(30px, 4vw, 44px);
  font-weight:900;
  color:#111;
}

.contactMapHead p{
  margin:10px 0 0;
  font-size: 18px;
  color: rgba(17,17,17,.7);
}

.contactMapFrame{
  border:4px solid #7b4a32;
  background:#fff;
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
  overflow:hidden;
}

.contactMapFrame iframe{
  display:block;
  width:100%;
  height: 480px;
  border:0;
}

@media (max-width: 980px){
  .contactEdge{
    width: 33vw;
    height: 240px;
    top: 190px;
  }

  .contactCard{
    margin-top: 150px;
  }
}

@media (max-width: 767px){
  .contactPage{
    padding-top: 10px;
  }

  .contactHero{
    padding-left: 14px;
    padding-right: 14px;
  }

  .contactTitle{
    padding: 10px 16px;
  }

  .contactLead{
    font-size: 17px;
  }

  .contactShowcase{
    min-height: auto;
    margin-top: 24px;
  }

  .contactEdge{
    display:none;
  }

  .contactCard{
    width:100%;
    margin-top: 0;
    padding: 24px 18px 26px;
  }

  .contactPhones{
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .contactInfoLine{
    font-size: 17px;
    gap: 12px;
  }

  .contactIcon{
    flex-basis: 28px;
    width:28px;
    font-size: 25px;
  }

  .contactInput{
    font-size: 16px;
    padding: 16px 14px;
  }

  .contactMapSection{
    margin-top: 100px;
  }

  .contactMapFrame iframe{
    height: 360px;
  }
}


.contactHp{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.contactFlash{
  max-width: 980px;
  margin: 8px auto 0;
  padding: 14px 18px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
}

.contactFlash--success{
  background: #e7f6ea;
  color: #155724;
  border: 1px solid #b7e4c0;
}

.contactFlash--error{
  background: #fdeaea;
  color: #8a1f1f;
  border: 1px solid #f3bcbc;
}


.contactFlashHost{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 16px;
}

/* =========================
   ROJ FOOTER - REUTILISABLE
   ========================= */

.rojFooter{
  position: relative;
  /*margin-top: 56px;*/
  color: #f4f1ed;

  /* Couleur de fond (fallback) */
  background-color: #1c1c1c;

  /* Image au-dessus */
  background-image: url('https://roj-kebab.ch/img/footer/1680x372px-footer-roj-kebab.png');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  border-top: 4px solid #c94b1a;
  border-bottom: 4px solid #c94b1a;
  overflow: hidden;
}

.rojFooter::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.78));
  pointer-events:none;
}

.rojFooter__inner{
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  padding: 34px 42px 18px;
}

.rojFooter__top{
  display: grid;
  grid-template-columns: 280px minmax(520px, 1fr) 280px;
  gap: 42px;
  align-items: start;
}

/* Colonne gauche */
.rojFooter__brand,
.rojFooter__menuCol,
.rojFooter__legalText{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.rojFooter__brand,
.rojFooter__menuCol,
.rojFooter__legalText{
  position: relative;
  z-index: 2;
}

.rojFooter__brand::before,
.rojFooter__menuCol::before,
.rojFooter__legalText::before{
  content:"";
  position:absolute;
  inset: -30px -40px -30px -20px; /* déborde légèrement autour */

  background: radial-gradient(
    ellipse at center,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.35) 40%,
    rgba(0,0,0,0.15) 65%,
    transparent 100%
  );

  filter: blur(18px);
  z-index: -1;
  pointer-events: none;
}

.rojFooter__logoLink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

.rojFooter__logo{
  width: 142px;
  height: auto;
  object-fit: contain;
  display:block;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
}

.rojFooter__brandText{
  margin-top: 8px;
}

.rojFooter__brandTitle{
  font-size: 30px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .02em;
  color:#fff;
  text-transform: uppercase;
}

.rojFooter__brandSub{
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color:#d06132;
  text-transform: uppercase;
}

.rojFooter__socials{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
  margin-top: 28px;
}

.rojFooter__social{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.08);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-weight: 800;
  font-size: 16px;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.rojFooter__social:hover{
  transform: translateY(-1px);
  background: rgba(201,75,26,.22);
  border-color: rgba(255,255,255,.95);
}

/* Centre */
.rojFooter__menus{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;
}

.rojFooter__menuCol{
  min-width:0;
}

.rojFooter__title{
  margin:0 0 14px;
  font-size: 15px;
  font-weight: 900;
  color:#ffffff;
  letter-spacing: .02em;
}

.rojFooter__links{
  display:flex;
  flex-direction:column;
  gap: 9px;
}

.rojFooter__links a{
  color: rgba(255,255,255,.88);
  text-decoration:none;
  font-size: 15px;
  line-height: 1.45;
  transition: color .18s ease, opacity .18s ease;
}

.rojFooter__links a:hover{
  color:#ffffff;
  opacity:.9;
}

/* Colonne droite */
.rojFooter__legalText p{
  margin: 0 0 12px;
  color: rgba(255,255,255,.84);
  font-size: 15px;
  line-height: 1.55;
}

/* Bas */
.rojFooter__bottom{
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.18);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
}

.rojFooter__copyright{
  font-size: 14px;
  color: rgba(255,255,255,.78);
}

.rojFooter__payments{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap: 10px;
}

.rojFooter__pay{
  min-width: 74px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #ffffff;
  color:#1a1a1a;
  font-size: 12px;
  line-height:1;
  font-weight: 900;
  text-align:center;
  box-shadow: 0 4px 10px rgba(0,0,0,.14);
}

/* ===== Responsive ===== */
@media (max-width: 1180px){
  .rojFooter__top{
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .rojFooter__menus{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rojFooter__legalText{
    max-width: 700px;
  }
}

@media (max-width: 767px){
  .rojFooter__inner{
    padding: 28px 18px 16px;
  }

  .rojFooter__brandTitle{
    font-size: 24px;
  }

  .rojFooter__logo{
    width: 110px;
  }

  .rojFooter__menus{
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .rojFooter__bottom{
    flex-direction:column;
    align-items:flex-start;
  }

  .rojFooter__payments{
    justify-content:flex-start;
  }

  .rojFooter__pay{
    min-width: unset;
  }
}

/* =========================
   A EMPORTER PAGE - HERO
   ========================= */

.takeawayPage{
  background:
    radial-gradient(circle at top center, rgba(255,255,255,.75), rgba(255,255,255,0) 38%),
    #ececec;
  padding: 18px 0 90px;
}

.takeawayHeroIntro{
  padding-bottom: 8px;
}

.takeawayHero{
  padding: 10px 18px 0;
}

.takeawayHero__frame{
  position: relative;
  max-width: 1880px;
  min-height: 700px;
  margin: 0 auto;
  overflow: hidden;
  border-top: 4px solid #c9322b;
  border-bottom: 4px solid #c9322b;
  border-radius: 0;
  background:
  linear-gradient(90deg,rgba(39,20,17,0.96) 0%,rgba(39,20,17,0.92) 25%,rgba(39,20,17,0.75) 35%,rgba(39,20,17,0.45) 45%,rgba(39,20,17,0) 80%,rgba(39,20,17,0.05) 90%,rgba(39,20,17,0.00) 100%),
  radial-gradient(circle at 18% 40%, rgba(255,255,255,.06), transparent 32%),
  linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 18%, rgba(0,0,0,.10) 100%),
  url('https://roj-kebab.ch/img/headerBanner/bg-a-emporter-roj-kebab.webp') center right / cover no-repeat;
}

.takeawayHero__frame::before{
  content:"";
  position:absolute;
  left:-5%;
  right:-5%;
  top:-86px;
  height:138px;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,.96) 0%, rgba(255,255,255,.96) 56%, rgba(255,255,255,0) 57%);
  pointer-events:none;
  z-index:1;
}

.takeawayHero__frame::after{
  content:"";
  position:absolute;
  left:-5%;
  right:-5%;
  bottom:-96px;
  height:150px;
  background:
    radial-gradient(120% 100% at 50% 100%, rgba(255,255,255,.94) 0%, rgba(255,255,255,.94) 58%, rgba(255,255,255,0) 59%);
  pointer-events:none;
  z-index:1;
}

.takeawayHero__content{
  position: relative;
  z-index: 2;
  min-height: 700px;
  display:grid;
  grid-template-columns: minmax(360px, 760px) 1fr;
  align-items:center;
}

.takeawayHero__left{
  position: relative;
  padding: 110px 50px 110px 86px;
  color:#fff;
}

.takeawayHero__left::before{
  content:"";
  position:absolute;
  inset: 48px 0 48px -90px;
  background:
    radial-gradient(circle at 55% 50%, rgba(255,255,255,.08), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border-radius: 0 220px 220px 0;
  pointer-events:none;
}

.takeawayHero__badge{
  position: relative;
  z-index: 1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height: 42px;
  padding: 10px 18px;
  margin-bottom: 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.takeawayHero__kicker{
  position: relative;
  z-index: 1;
  margin: 0 0 10px;
  font-size: clamp(22px, 2.2vw, 34px);
  font-weight: 900;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-shadow: 0 8px 20px rgba(0,0,0,.18);
}

.takeawayHero__title{
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: clamp(58px, 9vw, 130px);
  line-height: .88;
  font-weight: 900;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 10px 28px rgba(0,0,0,.18);
}

.takeawayHero__text{
  position: relative;
  z-index: 1;
  max-width: 500px;
  margin: 22px 0 0;
  font-size: clamp(16px, 1.5vw, 22px);
  line-height: 1.45;
  color: rgba(255,255,255,.95);
}

.takeawayHero__actions{
  position: relative;
  z-index: 1;
  display:flex;
  flex-wrap:wrap;
  gap: 14px;
  margin-top: 30px;
}

.takeawayHero__cta{
  min-height: 54px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 14px 24px;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .03em;
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}

.takeawayHero__cta:hover{
  transform: translateY(-1px);
}

.takeawayHero__cta--light{
  background:#fff;
  color:#1f1f1f;
  border: 2px solid #fff;
}

.takeawayHero__cta--ghost{
  background: rgba(255,255,255,.10);
  color:#fff;
  border: 2px solid rgba(255,255,255,.62);
}

.takeawayHero__right{
  position: relative;
  min-height: 700px;
}

.takeawayHero__pizzaWrap{
  position:absolute;
  inset:0;
}

.takeawayHero__pizza{
  position:absolute;
  right: -70px;
  bottom: -40px;
  width: min(1080px, 72vw);
  max-width: none;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 20px 35px rgba(0,0,0,.22));
  pointer-events:none;
}

.takeawayHero__leaf,
.takeawayHero__olive{
  position:absolute;
  display:block;
  pointer-events:none;
}

.takeawayHero__leaf{
  width: 84px;
  height: 40px;
  background: radial-gradient(circle at 35% 35%, #8ddf50 0%, #3f971d 60%, #22670f 100%);
  border-radius: 100% 0 100% 0;
  transform: rotate(-12deg);
  box-shadow: 0 8px 14px rgba(0,0,0,.12);
}

.takeawayHero__leaf::after{
  content:"";
  position:absolute;
  left:50%;
  top:10%;
  bottom:10%;
  width:2px;
  background: rgba(255,255,255,.35);
  transform: translateX(-50%) rotate(14deg);
}

.takeawayHero__leaf--1{ top: 162px; right: 390px; transform: rotate(14deg); }
.takeawayHero__leaf--2{ top: 260px; right: 168px; transform: rotate(-8deg) scale(.82); }
.takeawayHero__leaf--3{ top: 82px; right: 72px; transform: rotate(18deg) scale(.7); }

.takeawayHero__olive{
  width: 42px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3b3b3b 0%, #121212 78%, #000 100%);
  box-shadow: 0 8px 14px rgba(0,0,0,.18);
}

.takeawayHero__olive--1{ top: 96px; right: 520px; transform: rotate(18deg); }
.takeawayHero__olive--2{ top: 130px; right: 255px; transform: rotate(16deg) scale(1.06); }
.takeawayHero__olive--3{ top: 352px; right: 470px; transform: rotate(-12deg) scale(.92); }

.takeawayHero__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index: 3;
  width: 56px;
  height: 56px;
  border:0;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color:#fff;
  font-size: 46px;
  line-height: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:default;
  pointer-events:none;
  text-shadow: 0 4px 10px rgba(0,0,0,.18);
}

.takeawayHero__nav--prev{ left: 18px; }
.takeawayHero__nav--next{ right: 18px; }

.takeawayInfo{
  padding: 28px 18px 0;
}

.takeawayInfo__grid{
  max-width: 1280px;
  margin: 0 auto;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.takeawayInfo__card{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius: 22px;
  padding: 24px 22px;
  box-shadow: 0 10px 24px rgba(0,0,0,.05);
}

.takeawayInfo__card h3{
  margin:0;
  font-size: 22px;
  font-weight: 900;
  color:#111;
}

.takeawayInfo__card p{
  margin: 10px 0 0;
  color: rgba(17,17,17,.72);
  line-height: 1.5;
  font-size: 15px;
}

.takeawayInfo__card a{
  display:inline-flex;
  align-items:center;
  margin-top: 16px;
  font-weight: 800;
  color:#8d1b16;
  text-decoration:none;
}

.takeawayInfo__card a:hover{
  text-decoration: underline;
}

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

  .takeawayHero__right{
    min-height: 430px;
  }

  .takeawayHero__pizza{
    right: -120px;
    bottom: -20px;
    width: min(900px, 92vw);
  }

  .takeawayHero__leaf--1{ top: 56px; right: 280px; }
  .takeawayHero__leaf--2{ top: 110px; right: 120px; }
  .takeawayHero__leaf--3{ top: 24px; right: 16px; }

  .takeawayHero__olive--1{ top: 40px; right: 375px; }
  .takeawayHero__olive--2{ top: 90px; right: 210px; }
  .takeawayHero__olive--3{ top: 210px; right: 325px; }

  .takeawayInfo__grid{
    grid-template-columns: 1fr;
  }
}

/* =========================
   IMAGE DANS CARD (SANS CHANGER LE DESIGN)
   ========================= */

/* =========================
   IMAGE CARD FIX PRO
   ========================= */

.rojCard__media{
  width: 100%;
  margin: 18px 0 18px;
  display:flex;
  justify-content:center;
  position: relative;
  height: auto; /* juste une zone de référence */
}

/* IMAGE */
.rojCard__img{
  width: 100%;
  max-width: 250px;
  height: 140px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow:
    0 10px 24px rgba(0,0,0,.18),
    0 4px 10px rgba(0,0,0,.12);
  transition: transform .25s ease;
}

/* ESPACE DANS LA CARD */
.rojCard__inner{
  padding-top: 90px; /* 👈 laisse la place à l’image */
}

/* HOVER */
.rojCard:hover .rojCard__img{
  transform: translateY(-2px) scale(1.02);
}

/* ===== Image carte commande ===== */


.rojCard{
  display: flex;
  justify-content: center;
}

.rojCard__inner{
  width: 100%;
  max-width: 320px;

  background: #271411; /* ✅ ta couleur */
  border-radius: 26px;

  padding: 28px 22px 26px;

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  position: relative;
  overflow: hidden;
}

/* effet lumineux subtil */
.rojCard__inner::before{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.08), transparent 60%);
  pointer-events:none;
}

/* ===== Cards services - alignement propre ===== */

.takeawayInfo__grid{
  align-items: stretch;
}

.rojCard{
  height: 100%;
  display: flex;
  flex-direction: column;
}

.rojCard__inner{
  flex: 1;
  display: flex;
  flex-direction: column;
}

.rojCard__cta{
  margin-top: auto;
  align-self: center;
}

/* badge type "Special Food" */
.rojCard__badge {
    color: #d8b28a;
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 18px;
    text-transform: uppercase;
    -webkit-font-smoothing: antialiased;
    letter-spacing: 5px;
}

/* titre */
.rojCard__title{
  color: #ffffff;
  font-size: 22px;
  font-weight: 900;
  margin: 0;
}

/* texte */
.rojCard__text{
  margin-top: 12px;
  margin-bottom: auto;
  color: rgba(255,255,255,.85);
  font-size: 15px;
  line-height: 1.5;
}

/* bouton */
.rojCard__cta{
  margin-top: 20px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 12px 20px;
  border-radius: 999px;

  background: #ffffff;
  color: #271411;

  font-weight: 800;
  font-size: 14px;

  text-decoration: none;

  transition: all .25s ease;
}

.rojCard__cta:hover{
  background: #c94b1a;
  color: #ffffff;
  transform: translateY(-2px);
}

@media (max-width: 767px){
  .takeawayPage{
    padding-top: 10px;
  }

  .takeawayHero{
    padding: 8px 10px 0;
  }

  .takeawayHero__frame{
    min-height: auto;
    border-radius: 18px;
  }

  .takeawayHero__frame::before,
  .takeawayHero__frame::after{
    display:none;
  }

  .takeawayHero__content{
    min-height: auto;
  }

  .takeawayHero__left{
    padding: 34px 20px 18px;
  }

  .takeawayHero__left::before{
    inset: 0;
    border-radius: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  }

  .takeawayHero__title{
    font-size: clamp(42px, 17vw, 72px);
  }

  .takeawayHero__text{
    margin-top: 16px;
    font-size: 15px;
  }

  .takeawayHero__actions{
    margin-top: 22px;
    flex-direction: column;
  }

  .takeawayHero__cta{
    width: 100%;
  }

  .takeawayHero__right{
    min-height: 280px;
  }

  .takeawayHero__pizza{
    right: -46px;
    bottom: -8px;
    width: 132%;
    max-width: none;
  }

  .takeawayHero__leaf--1{ top: 16px; right: 114px; transform: rotate(12deg) scale(.72); }
  .takeawayHero__leaf--2{ top: 50px; right: 18px; transform: rotate(-8deg) scale(.56); }
  .takeawayHero__leaf--3{ display:none; }

  .takeawayHero__olive--1{ top: 10px; right: 190px; transform: rotate(18deg) scale(.72); }
  .takeawayHero__olive--2{ top: 34px; right: 74px; transform: rotate(12deg) scale(.74); }
  .takeawayHero__olive--3{ display:none; }

  .takeawayHero__nav{
    display:none;
  }

  .takeawayInfo{
    padding: 18px 10px 0;
  }

  .takeawayInfo__card{
    border-radius: 18px;
    padding: 20px 18px;
  }
}


/* =========================
   FIX MOBILE - PAGE A EMPORTER
   Centrage hero + cartes service
   ========================= */
@media (max-width: 767px){

  .takeawayHero{
    padding: 8px 14px 0;
  }

  .takeawayHero__frame{
    width: 100%;
    max-width: 100%;
    min-height: auto;
    overflow: hidden;
    border-radius: 18px;
    background-position: center center;
  }

  .takeawayHero__content{
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .takeawayHero__left{
    width: 100%;
    max-width: 100%;
    padding: 42px 22px 34px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .takeawayHero__left::before{
    inset: 0;
    border-radius: 0;
  }

  .takeawayHero__kicker,
  .takeawayHero__title,
  .takeawayHero__text{
    max-width: 100%;
    text-align: center;
  }

  .takeawayHero__title{
    font-size: clamp(42px, 14vw, 62px);
    line-height: .92;
    letter-spacing: -.035em;
    overflow-wrap: normal;
    word-break: normal;
  }

  .takeawayHero__text{
    margin: 18px auto 0;
    font-size: 16px;
    line-height: 1.42;
  }

  .takeawayHero__actions{
    width: 100%;
    max-width: 330px;
    margin: 26px auto 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .takeawayHero__cta{
    width: 100%;
    max-width: 100%;
    min-height: 54px;
    padding: 14px 18px;
    white-space: normal;
    text-align: center;
  }

  .takeawayHero__right{
    display: none;
  }

  .takeawayInfo{
    padding: 26px 16px 0;
  }

  .takeawayInfo__grid{
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 26px;
  }

  .rojCard{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .rojCard__inner{
    width: min(100%, 340px);
    max-width: 340px;
    min-height: 560px;
    margin: 0 auto;
  }

  .rojCard__media{
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .rojCard__img{
    width: 100%;
    max-width: 260px;
    height: 150px;
  }
}

@media (max-width: 390px){
  .takeawayHero__title{
    font-size: clamp(38px, 13vw, 54px);
  }

  .rojCard__inner{
    width: min(100%, 320px);
    max-width: 320px;
  }
}