/* Surcharges Lmakla — chargé en dernier, après le CSS du template (main.css).
   Regrouper ici toutes les retouches propres au site plutôt que de modifier main.css. */

/* Le template fixe ce fond à 5 % d'opacité : imperceptible sur fond blanc. */
.bg-theme-opacity5 {
    background-color: rgba(255, 82, 0, 0.10) !important;
}

/* Classe utilisée par les vues (badges, tags, catégories) mais absente du template.
   Rend le texte foncé, y compris dans les .badge Bootstrap (blancs par défaut). */
.text-title {
    color: var(--black2) !important;
}

/* Les badges/tags sur fond très clair doivent avoir un texte lisible même sans .text-title. */
.badge.bg-theme-opacity5 {
    color: var(--black2);
}

/* ---- Vignettes des cartes (recettes, challenges) ----
   Le template ne contraint pas la hauteur : les images uploadées ayant des tailles
   arbitraires, les cartes devenaient inégales. On impose un ratio 4:3 recadré. */
.restaurant-card .thumb {
    overflow: hidden;
}
.restaurant-card .thumb img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Avatars : toujours ronds et non déformés, même si l'image source n'est pas carrée. */
img.rounded-circle {
    object-fit: cover;
}

/* Couverture de la page recette : hauteur bornée, recadrage propre. */
.recipe-cover {
    max-height: 480px;
    object-fit: cover;
}

/* Carte + pied additionnel (votes d'un défi, statut de « mes recettes »…) :
   la carte est en h-100, donc seule dans sa colonne elle prendrait toute la
   hauteur et pousserait le pied sous la rangée suivante. Ce wrapper laisse
   la carte grandir et garde le pied visible en bas, à hauteurs égales. */
.card-with-footer {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.card-with-footer > .restaurant-card {
    height: auto !important;
    flex-grow: 1;
}

/* ---- Zones de dépôt de fichiers (composant x-drop-zone) ---- */
.dropzone-area {
    border: 2px dashed var(--border);
    background: var(--white);
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}
.dropzone-area:hover,
.dropzone-area.is-dragover {
    border-color: var(--theme);
    background: rgba(255, 82, 0, 0.05);
}
.dropzone-thumb {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
}
.dropzone-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.dropzone-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 0;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 13px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.dropzone-remove:hover {
    background: var(--theme3);
}

/* ---- Menu latéral (offcanvas) ----
   Le template ne style que les liens de sous-menu (en serif) : on harmonise
   tout le menu avec la typographie du site (Outfit). */
.menu-style-offcanvas > li > a {
    font-family: "Outfit", sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--black2);
    transition: color 0.2s;
}
.menu-style-offcanvas > li > a:hover {
    color: var(--theme);
}
.menu-style-offcanvas .has-toggle .submenu li,
.menu-style-offcanvas .has-toggle .submenu a {
    font-family: "Outfit", sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: var(--text);
}
.menu-style-offcanvas .has-toggle .submenu a:hover {
    color: var(--theme);
}
.menu-style-offcanvas .submenu li {
    padding: 4px 0;
}

/* Flèche des sous-menus : rotation quand le sous-menu est ouvert (classe posée en JS). */
.menu-style-offcanvas .has-toggle .clickAble i {
    transition: transform 0.2s;
}
.menu-style-offcanvas .has-toggle.open .clickAble i {
    transform: rotate(180deg);
}

/* Icônes sociales du menu : le template ne les style que dans sa propre
   structure .offcanvas__wrapper, absente ici. */
.offcanvas-body .social-icon {
    gap: 10px;
}
.offcanvas-body .social-icon a {
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--black2);
    font-size: 15px;
    transition: all 0.2s;
}
.offcanvas-body .social-icon a:hover {
    background-color: var(--theme);
    border-color: var(--theme);
    color: var(--white);
}