/* =====================================================================
   FOODZ Algeria — Feuille de styles personnalisée
   Reproduction fidèle de la maquette « home-web-page.pdf »
   ===================================================================== */

:root {
    /* Charte graphique */
    --brand-orange: #ff4900;
    --brand-orange-hover: #e64200;
    --brand-dark: #0d0d0d;
    --text-light: #ffffff;

    /* Typographie */
    --font-ui: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-brush: "Permanent Marker", "Jost", cursive;

    /* Rythme */
    --radius-pill: 999px;
    --radius-card: 22px;
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, .35);
    --page-gutter: clamp(1.25rem, 4vw, 4.5rem);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

body {
    font-family: var(--font-ui);
    color: var(--text-light);
    background-color: var(--brand-dark);
    overflow-x: hidden;
}

a { text-decoration: none; }

img { max-width: 100%; height: auto; }

.container-fluid {
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
}

/* =====================================================================
   HERO
   ===================================================================== */
.hero {
    position: relative;
    min-height: 100vh;
    background: url("../images/hero-bg.webp") center/cover no-repeat;
    background-color: #14161c;
    display: flex;
    flex-direction: column;
}

/* Voile léger en haut : lisibilité du logo et de la navigation
   (le corps de l'accroche est porté par la bannière .hero__panel) */
.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .15) 20%, rgba(0, 0, 0, 0) 40%);
    pointer-events: none;
}

.hero__inner {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: clamp(1.5rem, 2.5vw, 2.75rem);
    padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

/* ---------- Barre supérieure ---------- */
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
}

.topbar__logo img {
    width: clamp(190px, 20vw, 360px);
    height: auto;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45));
}

.topbar__controls {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .9rem;
    padding-top: .4rem;
}

/* Sélecteur de langue */
.lang-switch {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    letter-spacing: .04em;
    font-size: clamp(.9rem, 1.1vw, 1.15rem);
}

.lang-switch__item {
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    line-height: 1;
    color: var(--text-light);
    cursor: pointer;
    transition: color .2s ease;
}

.lang-switch__item.is-active,
.lang-switch__item:hover { color: var(--brand-orange); }

.lang-switch__sep { opacity: .8; }

/* Boutons pilule (barre supérieure) */
.topbar__buttons {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .75rem;
}

.btn-pill {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem 1.4rem;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: clamp(.9rem, 1vw, 1.05rem);
    line-height: 1.1;
    white-space: nowrap;
    transition: transform .18s ease, background-color .2s ease, color .2s ease;
}

.btn-pill i { font-size: 1.15em; }

.btn-pill--light {
    background: var(--text-light);
    color: var(--brand-dark);
}
.btn-pill--light:hover { background: var(--brand-orange); color: #fff; transform: translateY(-2px); }

.btn-pill--glass {
    background: rgba(28, 30, 36, .72);
    color: var(--text-light);
    backdrop-filter: blur(6px);
}
.btn-pill--glass:hover { background: rgba(28, 30, 36, .92); transform: translateY(-2px); }

/* Bouton hamburger */
.menu-toggle {
    border: 0;
    background: transparent;
    color: var(--text-light);
    font-size: 1.9rem;
    line-height: 1;
    padding: .1rem .2rem;
    cursor: pointer;
    transition: color .2s ease;
}
.menu-toggle:hover { color: var(--brand-orange); }

/* ---------- Navigation principale ---------- */
.mainnav {
    margin-top: clamp(1.75rem, 4vw, 3.5rem);
}

.mainnav__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(1rem, 2.4vw, 2.75rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

.mainnav__item { position: relative; }

.mainnav__link {
    display: inline-block;
    color: var(--text-light);
    font-weight: 700;
    font-size: clamp(.85rem, 1vw, 1.05rem);
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .55rem 0;
    transition: color .2s ease;
}

.mainnav__item.has-dropdown > .mainnav__link:hover,
.mainnav__item.has-dropdown:focus-within > .mainnav__link { color: var(--brand-orange); }

/* Variantes pilule */
.mainnav__link--dark,
.mainnav__link--outline {
    padding: .55rem 1.5rem;
    border-radius: var(--radius-pill);
}
.mainnav__link--dark {
    background: var(--brand-dark);
    box-shadow: var(--shadow-soft);
}
.mainnav__link--dark:hover { background: var(--brand-orange); color: #fff; }

.mainnav__link--outline {
    border: 2px solid var(--text-light);
}
.mainnav__link--outline:hover { background: var(--text-light); color: var(--brand-dark); }

/* Menus déroulants */
.mainnav__dropdown {
    position: absolute;
    top: calc(100% + .6rem);
    left: 0;
    min-width: 240px;
    display: flex;
    flex-direction: column;
    background: var(--brand-orange);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
    padding: 1.1rem 1.25rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    z-index: 20;
}

.mainnav__item.has-dropdown:hover > .mainnav__dropdown,
.mainnav__item.has-dropdown:focus-within > .mainnav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mainnav__dropdown a {
    color: var(--text-light);
    font-weight: 500;
    font-size: .98rem;
    padding: .3rem 0;
    transition: opacity .15s ease, padding-left .15s ease;
}
.mainnav__dropdown a:hover { opacity: .8; padding-left: .3rem; }

/* ---------- Contenu central ---------- */
.hero__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: clamp(2rem, 5vw, 4rem) 0;
}

/* Bannière semi-transparente noire portant l'accroche (pleine largeur) */
.hero__panel {
    align-self: stretch;
    margin-inline: calc(-1 * var(--page-gutter));
    padding: clamp(2rem, 4.5vw, 3.5rem) clamp(1.25rem, 6vw, 6rem);
    background: rgba(0, 0, 0, .42);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* La page « Coming soon » n'utilise pas la bannière : on lui rend sa gouttière */
.coming { padding-inline: clamp(1.25rem, 6vw, 4rem); }

.hero__title {
    font-weight: 600;
    font-size: clamp(1.5rem, 3.2vw, 3.15rem);
    margin: 0 0 .35rem;
    text-shadow: 0 3px 14px rgba(0, 0, 0, .5);
}

.hero__tagline {
    font-family: var(--font-brush);
    color: var(--brand-dark);
    font-size: clamp(1.15rem, 2.9vw, 2.9rem);
    line-height: 1.05;
    letter-spacing: .01em;
    margin: 0 0 .35rem;
    max-width: 22ch;
}

/* La ligne d'accroche s'affiche pleine largeur sur grand écran */
@media (min-width: 992px) {
    .hero__tagline { max-width: none; }
}

.hero__date {
    font-weight: 500;
    font-size: clamp(1rem, 2vw, 1.95rem);
    line-height: 1.3;
    max-width: 40ch;
    margin: .2rem 0 clamp(1.75rem, 3.5vw, 2.75rem);
    text-shadow: 0 3px 14px rgba(0, 0, 0, .5);
}

/* La ligne date + lieu peut s'étaler sur toute la largeur en grand écran */
@media (min-width: 992px) {
    .hero__date { max-width: none; }
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(1rem, 2.5vw, 2.25rem);
    width: 100%;
    max-width: 1100px;
}

/* ---------- Boutons d'action (CTA) ---------- */
.btn-cta {
    flex: 1 1 340px;
    max-width: 480px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: clamp(.9rem, 1.4vw, 1.25rem) clamp(1.5rem, 2.5vw, 2.5rem);
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: clamp(1.05rem, 1.7vw, 1.65rem);
    line-height: 1.1;
    transition: transform .18s ease, background-color .2s ease, color .2s ease;
}

.btn-cta i { font-size: 1.1em; }

.btn-cta--orange {
    background: var(--brand-orange);
    color: #fff;
    box-shadow: 0 12px 30px rgba(255, 73, 0, .35);
}
.btn-cta--orange:hover { background: var(--brand-orange-hover); color: #fff; transform: translateY(-3px); }

.btn-cta--outline {
    background: transparent;
    color: #fff;
    border: 3px solid #fff;
}
.btn-cta--outline:hover { background: #fff; color: var(--brand-dark); transform: translateY(-3px); }

.btn-cta--dark {
    background: rgba(13, 13, 13, .92);
    color: #fff;
}
.btn-cta--dark:hover { background: #000; color: #fff; }

.hero__slogan {
    font-family: var(--font-brush);
    font-size: clamp(1.05rem, 2vw, 1.9rem);
    margin: clamp(1.75rem, 3.5vw, 3rem) 0 0;
    text-shadow: 0 3px 12px rgba(0, 0, 0, .55);
}

/* ---------- Réseaux sociaux ---------- */
.social-rail {
    position: absolute;
    top: 50%;
    right: clamp(.6rem, 1.4vw, 1.6rem);
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: .85rem;
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 3;
}

.social-rail a {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 12px;
    color: var(--text-light);
    font-size: 1.35rem;
    background: rgba(20, 20, 24, .35);
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.social-rail a:hover {
    background: var(--brand-orange);
    color: #fff;
    transform: scale(1.08);
}

/* =====================================================================
   MENU OFFCANVAS (mobile)
   ===================================================================== */
.app-offcanvas {
    background: var(--brand-dark);
    color: var(--text-light);
    width: min(360px, 85vw);
}

.app-offcanvas .offcanvas-header {
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.app-offcanvas .offcanvas-header img {
    height: 42px;
    width: auto;
}

.offcanvas-nav {
    list-style: none;
    margin: 0 0 1.75rem;
    padding: 0;
}
.offcanvas-nav li + li { border-top: 1px solid rgba(255, 255, 255, .1); }
.offcanvas-nav a {
    display: block;
    color: var(--text-light);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 1rem;
    padding: .95rem .25rem;
    transition: color .2s ease, padding-left .2s ease;
}
.offcanvas-nav a:hover { color: var(--brand-orange); padding-left: .5rem; }

.offcanvas-actions {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    margin-bottom: 1.75rem;
}
.offcanvas-actions .btn-cta {
    flex: none;
    max-width: none;
    font-size: 1.05rem;
}

.lang-switch--stacked { justify-content: flex-start; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer {
    background: var(--brand-orange);
    color: var(--text-light);
    padding: clamp(2.25rem, 4vw, 3.25rem) 0;
}

.footer__brand {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(1.25rem, 3vw, 3rem);
}
.footer__takaya { height: clamp(28px, 3vw, 44px); width: auto; }
.footer__foodz  { height: clamp(46px, 5vw, 78px); width: auto; }

.footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer__links li { margin-bottom: .45rem; }
.footer__links a {
    color: var(--text-light);
    font-weight: 500;
    font-size: clamp(.9rem, 1.05vw, 1.05rem);
    transition: opacity .2s ease;
}
.footer__links a:hover { opacity: .75; }

.footer__links--upper a {
    text-transform: uppercase;
    letter-spacing: .03em;
    font-weight: 600;
}

.footer__copy {
    margin: 1.75rem 0 0;
    font-size: clamp(.85rem, 1vw, 1rem);
    opacity: .95;
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */

/* Tablette et moins : la nav desktop et les boutons cèdent la place au menu */
@media (max-width: 991.98px) {
    .mainnav,
    .topbar__buttons { display: none; }

    .topbar__controls {
        flex-direction: row;
        align-items: center;
        gap: 1.25rem;
        padding-top: .2rem;
    }

    .social-rail {
        top: auto;
        bottom: clamp(1rem, 4vw, 2rem);
        transform: none;
    }
    .social-rail a { width: 2.1rem; height: 2.1rem; font-size: 1.15rem; }

    .hero__content { padding-top: 3rem; padding-bottom: 3rem; }
}

/* Le menu hamburger n'apparaît que sous 992px */
@media (min-width: 992px) {
    .menu-toggle { display: none; }
}

/* Mobile : empilement des CTA et resserrage des marges */
@media (max-width: 575.98px) {
    .hero__actions { flex-direction: column; align-items: stretch; }
    .btn-cta { flex: none; max-width: none; }

    .lang-switch { font-size: 1rem; }

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

/* =====================================================================
   PAGE COMING SOON
   ===================================================================== */
.hero--compact { min-height: 100vh; }

.coming { gap: .35rem; }

.coming__eyebrow {
    display: inline-block;
    background: var(--brand-orange);
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: clamp(.72rem, 1vw, .9rem);
    padding: .5rem 1.15rem;
    border-radius: var(--radius-pill);
    box-shadow: 0 10px 26px rgba(255, 73, 0, .35);
    margin-bottom: 1.25rem;
}

.coming__title {
    font-family: var(--font-brush);
    font-size: clamp(2.1rem, 6vw, 5rem);
    line-height: 1.02;
    margin: 0 0 1rem;
    text-shadow: 0 4px 18px rgba(0, 0, 0, .5);
}

.coming__text {
    max-width: 60ch;
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    font-weight: 400;
    color: rgba(255, 255, 255, .92);
    margin: 0 auto clamp(2rem, 4vw, 3rem);
    text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}

/* Compte à rebours */
.countdown {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(.6rem, 1.6vw, 1.25rem);
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.countdown__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    min-width: clamp(76px, 12vw, 118px);
    padding: clamp(.9rem, 1.6vw, 1.4rem) .5rem;
    background: rgba(13, 13, 13, .55);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius-card);
    backdrop-filter: blur(6px);
}

.countdown__value {
    font-weight: 800;
    font-size: clamp(1.7rem, 3.4vw, 3rem);
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.countdown__label {
    font-size: clamp(.72rem, 1vw, .95rem);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--brand-orange);
}

.coming__rdv { margin-top: 0; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }

.coming__back { flex: none; max-width: none; }

/* =====================================================================
   SUPPORT RTL (arabe)
   Bootstrap bascule sur sa feuille RTL ; on ajuste ici les composants
   personnalisés qui utilisent des propriétés directionnelles.
   ===================================================================== */
[dir="rtl"] body { font-family: "Cairo", var(--font-ui); }

[dir="rtl"] .hero__tagline,
[dir="rtl"] .hero__slogan,
[dir="rtl"] .coming__title {
    /* Permanent Marker ne couvre pas l'arabe : on repasse sur Cairo */
    font-family: "Cairo", var(--font-brush);
    font-weight: 700;
}

/* Rail social : de la droite vers la gauche */
[dir="rtl"] .social-rail {
    right: auto;
    left: clamp(.6rem, 1.4vw, 1.6rem);
}

/* Menus déroulants : alignés à droite */
[dir="rtl"] .mainnav__dropdown { left: auto; right: 0; }
[dir="rtl"] .mainnav__dropdown a:hover { padding-left: 0; padding-right: .3rem; }

/* Offcanvas mobile : liste alignée à droite */
[dir="rtl"] .offcanvas-nav a:hover { padding-left: 0; padding-right: .5rem; }