/* =========================================================
   NADA'S MOMIX
   STYLE PRINCIPAL
========================================================= */

/* Polices (typographie harmonisée) :
   - Lora : grands titres, titres de pages et de sections (chaleureux,
     élégant, sans faire "luxe").
   - Poppins : tout le reste — textes, boutons, menus, badges,
     navigation, noms et infos des recettes (moderne, très lisible
     sur mobile).
   Chargées une seule fois ici pour toutes les pages qui utilisent
   style.css ("display=swap" : le texte s'affiche tout de suite). */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Poppins:wght@400;500;600;700&display=swap');

/* =========================================================
   SYSTÈME DE THÈME
   -----------------------------------------------------------
   Toutes les couleurs de l'application partent d'ici. Ce sont
   ces variables que le sélecteur de thème (page Profil, voir
   theme.js) modifie pour changer l'identité visuelle du site —
   aucune couleur ne doit être écrite "en dur" dans les autres
   fichiers CSS : on utilise toujours var(--color-...).

   Les anciennes variables (--green, --cream, --text, ...) sont
   conservées ci-dessous pour ne rien casser dans le CSS existant :
   elles "pointent" simplement vers les nouvelles.
========================================================= */
:root {
    /* Le site n'a qu'une identité visuelle claire (aucun thème "sombre"
       n'existe, même parmi les palettes personnalisables — voir
       theme.js). Sans cette ligne, un téléphone/navigateur réglé en
       mode sombre force malgré tout ses propres couleurs par défaut
       sur les éléments natifs non explicitement stylés (champs de
       formulaire, menus déroulants, cases à cocher...), ce qui rend
       certains textes invisibles (texte sombre sur fond sombre imposé
       par le système). Cette ligne indique au navigateur de toujours
       utiliser son rendu clair, quel que soit le réglage de l'appareil. */
    color-scheme: light;

    /* --- Couleurs de thème (personnalisables, voir theme.js) --- */
    --color-primary: #2E7D6B;
    --color-primary-dark: #225E51;
    --color-primary-light: #E3F1EC;
    --color-primary-ultra-light: #F3FAF8;

    --color-secondary: #F48BA8;
    --color-secondary-dark: #D96686;
    --color-secondary-light: #FDE7ED;

    --color-background: #FFF7EE;
    --color-surface: #FFFFFF;

    --color-text: #33342E;
    --color-text-secondary: #767468;

    --color-border: #E8E5E1;

    /* Couleur de texte à utiliser SUR un fond --color-primary ou
       --color-secondary (bouton plein, avatar, badge actif...) —
       recalculée par theme.js selon le contraste (point 9). */
    --color-on-primary: #FFFFFF;
    --color-on-secondary: #FFFFFF;

    --color-success: #4CAF7D;
    --color-warning: #F0B429;

    /* Couleurs fixes (ne changent pas avec le thème choisi) */
    --color-rating: #F2C230;
    --favorite: #E0435C;

    /* --- Anciennes variables (compatibilité avec le CSS existant) --- */
    --green: var(--color-primary);
    --green-dark: var(--color-primary-dark);
    --green-light: var(--color-primary-light);
    --cream: var(--color-background);
    --white: var(--color-surface);
    --text: var(--color-text);
    --muted: var(--color-text-secondary);
    --border: var(--color-border);
    --yellow: var(--color-rating);

    /* POLICES — les 2 variables à modifier pour changer la
       typographie de toute l'application :
       --font-display : police des TITRES (Lora).
       --font-body    : police PRINCIPALE, tout le reste (Poppins).
       --font-heading : éléments d'interface affirmés (boutons,
                        badges, étiquettes) — suit automatiquement la
                        police principale. */
    --font-display: 'Lora', Georgia, 'Times New Roman', serif;
    --font-body: 'Poppins', Arial, Helvetica, sans-serif;
    --font-heading: var(--font-body);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background: var(--cream);
    color: var(--text);
    padding-bottom: 112px;
}

/* Hiérarchie typographique :
   - h1, h2 (titres de pages et de sections) : Lora semi-gras,
     bien visible, chaleureux et élégant.
   - h3 (sous-titres, titres de cartes) : Poppins semi-gras, pour
     bien se distinguer des titres tout en restant très lisible.
   S'applique aussi aux titres définis dans le <style> propre à chaque
   page, sauf s'ils précisent eux-mêmes une autre police. */
h1, h2 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0;
    overflow-wrap: break-word;
}

h3 {
    font-family: var(--font-heading);
    font-weight: 600;
}

button,
input,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

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


/* =========================================================
   HEADER
========================================================= */

.top-header {
    position: relative;

    max-width: 760px;
    margin: auto;
    padding: 24px 24px 28px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.home-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    height: 72px;
    width: auto;
}

.main-menu-button {
    font-size: 20px;
    color: var(--text);
}

.header-profile-block {
    display: flex;
    align-items: center;
    gap: 10px;
}

.home-avatar {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--green);
    color: var(--color-on-primary, white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    padding: 0;
    overflow: hidden;
}

.home-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.daily-greeting {
    max-width: 760px;
    margin: auto;
    padding: 10px 24px 0;

    display: flex;
    flex-direction: column;
    gap: 3px;
}

.daily-greeting .greeting-hello {
    font-family: var(--font-display);
    font-size: 23px;
    font-weight: 600;
    color: var(--green);
    line-height: 1.25;
}

.daily-greeting .greeting-question {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--muted);
    line-height: 1.3;
}

.icon-button {
    width: 42px;
    height: 42px;

    border: none;
    background: transparent;

    font-size: 29px;
    color: var(--text);
}


/* =========================================================
   RECHERCHE
========================================================= */

.search-section {
    max-width: 760px;
    margin: auto;
    padding: 12px 20px;
}

.search-box {
    height: 44px;

    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 24px;

    display: flex;
    align-items: center;

    padding: 0 15px;

    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.04);
}

.search-icon {
    font-size: 23px;
    margin-right: 9px;
}

.search-box input {
    flex: 1;

    border: none;
    outline: none;

    background: transparent;

    /* 13px : pour que le texte d'aide
       ("Rechercher une recette, un ingrédient...") tient en entier
       sur mobile. */
    font-size: 13px;
    color: var(--text);
}

.search-box input::placeholder {
    color: var(--color-text-secondary);
}


/* =========================================================
   CATÉGORIES
========================================================= */

.categories-section {
    max-width: 760px;
    margin: auto;
    padding: 18px 0;
}

.categories {
    display: flex;
    gap: 10px;

    overflow-x: auto;

    padding: 5px 20px 10px;

    justify-content: center;

    scrollbar-width: none;
}

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

.category {
    flex: 0 0 auto;

    border: none;
    background: transparent;

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

    gap: 7px;

    min-width: 68px;

    /* Sans cette ligne, le <button> (élément de formulaire) ignore la
       couleur de texte du site et prend la couleur "par défaut" du
       navigateur/téléphone pour un bouton non stylé — d'où le texte
       tantôt bleu, tantôt orangé selon l'appareil, qui ne suivait pas
       le thème choisi. */
    color: var(--color-text);
}

.category-icon {
    width: 68px;
    height: 68px;

    border-radius: 50%;
    overflow: hidden;

    background: var(--white);
    border: 1px solid var(--border);

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

    font-size: 28px;

    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.03);
}

.category-icon img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/* Icône horloge utilisée à côté d'un temps de préparation
   ("◷ 45 min", etc.) */
.clock-icon {
    width: 12px;
    height: 12px;
    object-fit: contain;
    display: inline-block;
    vertical-align: -1px;
}

.category.active .category-icon {
    background: var(--green);
    border-color: var(--green);
    color: var(--color-on-primary, white);
}

.category span:last-child {
    font-size: 13px;
}


/* =========================================================
   IDÉES REPAS
========================================================= */

.meal-banner {
    max-width: 720px;

    margin: 10px auto 30px;

    min-height: 150px;

    border-radius: 20px;

    overflow: hidden;

    display: grid;

    grid-template-columns: 48% 52%;

    background: var(--green-light);
}

.meal-content {
    padding: 16px 18px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.small-title {

    color: var(--green-dark);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1px;

    margin-bottom: 5px;
}

/* "Suggestion du jour" : même badge blanc arrondi que "Concours du
   mois" (.contest-badge, voir plus bas), avec la même police, pour
   que les deux bannières se ressemblent. Ciblé uniquement à
   l'intérieur de .meal-content pour ne pas changer l'étiquette
   "ESPACE PRIVÉ" (fenêtre de connexion), qui réutilise aussi
   .small-title. */
.meal-content .small-title {
    display: inline-block;
    align-self: flex-start;

    background: var(--color-surface);

    padding: 5px 12px;
    border-radius: 30px;

    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.meal-content h1 {
    font-family: var(--font-display);

    font-size: 22px;

    color: var(--green);

    margin-bottom: 6px;
    line-height: 1.15;
}

.meal-content p {
    font-size: 13px;
    line-height: 1.35;

    margin-bottom: 12px;
}

.primary-button {
    align-self: flex-start;

    border: none;

    background: var(--color-primary);
    color: var(--color-on-primary, white);

    padding: 8px 15px;

    border-radius: 30px;

    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 13px;

    display: flex;
    align-items: center;
    gap: 8px;

    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.primary-button:hover {
    background: var(--color-primary-dark);
}

/* Bouton secondaire (contour) : même usage que .primary-button mais
   pour une action moins prioritaire — fond transparent, contour et
   texte dans la couleur du thème. */
.secondary-button {
    align-self: flex-start;

    border: 1.5px solid var(--color-primary);
    background: var(--color-surface);
    color: var(--color-primary);

    padding: 8px 15px;

    border-radius: 30px;

    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 13px;

    display: flex;
    align-items: center;
    gap: 8px;

    transition: background 0.15s ease;
}

.secondary-button:hover {
    background: var(--color-primary-ultra-light);
}

/* Ton HTML utilise actuellement .Chorba */

/* La photo (Suggestion du jour comme Concours du mois, voir plus bas)
   est présentée dans un carré, inséré avec une marge à l'intérieur de
   sa colonne — plutôt que de remplir toute la colonne en rectangle
   large — pour matcher la maquette validée. La hauteur de la bannière
   suit désormais celle du carré (largeur de la colonne), au lieu
   d'être fixée à min-height. */
.Chorba,
.meal-image {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 14px 14px 14px 0;

    background: var(--green-light);
}

.Chorba img,
.meal-image img {
    width: 100%;
    aspect-ratio: 1 / 1;

    object-fit: cover;
    border-radius: 16px;

    display: block;
}

.food-placeholder {
    font-size: 95px;
}


/* =========================================================
   CONCOURS DU MOIS
   -----------------------------------------------------------
   Bannière affichée sur l'accueil, sous "Recettes du moment",
   avec exactement le même gabarit que la bannière "Suggestion
   du jour" ci-dessus (.meal-banner) — contenu entièrement
   paramétrable depuis l'espace administrateur (voir admin.html,
   page "Concours du mois", document Firestore settings/contest).
   Reste masquée (home.html, loadContestBanner) tant qu'aucun
   concours n'est actuellement activé.
========================================================= */

.contest-banner {
    max-width: 720px;

    margin: 10px auto 30px;

    min-height: 150px;

    border-radius: 20px;

    overflow: hidden;

    display: grid;

    grid-template-columns: 48% 52%;

    background: var(--green-light);
}

.contest-content {
    padding: 16px 18px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contest-badge {
    align-self: flex-start;

    background: var(--color-surface);
    color: var(--green-dark);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;

    padding: 5px 12px;
    border-radius: 30px;

    margin-bottom: 8px;
}

.contest-content .contest-title {
    font-family: var(--font-display);
    font-weight: 600;

    font-size: 20px;

    color: var(--green);

    margin: 0 0 6px;
    line-height: 1.15;
}

.contest-content .contest-description {
    font-size: 13px;
    line-height: 1.35;

    margin-bottom: 10px;
}

.contest-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;

    margin-bottom: 12px;
}

.contest-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;

    font-size: 12.5px;
    color: var(--green-dark);
}

.contest-meta-row .contest-meta-icon {
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
}

.contest-meta-row a {
    color: var(--green-dark);
    text-decoration: underline;
}

.contest-photo {
    position: relative;

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

    padding: 14px 14px 14px 0;
}

.contest-photo img {
    width: 100%;
    aspect-ratio: 1 / 1;

    object-fit: cover;
    border-radius: 16px;

    display: block;
}

.contest-photo-tag {
    position: absolute;
    left: -6px;
    bottom: 6px;

    max-width: 78%;

    background: var(--color-surface);
    color: var(--green-dark);

    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;

    padding: 6px 10px;
    border-radius: 12px;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}


/* =========================================================
   SECTIONS
========================================================= */

.content-section {
    max-width: 760px;

    margin: 0 auto 38px;

    padding: 0 20px;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 18px;
}

.section-header h2 {
    font-size: 25px;
}

.section-header a {
    color: var(--green);

    font-weight: 600;

    white-space: nowrap;
}


/* =========================================================
   CARTES RECETTES
========================================================= */

.recipe-scroll {
    display: flex;

    gap: 10px;

    overflow-x: auto;

    padding-bottom: 5px;

    scrollbar-width: none;
}

.recipe-scroll::-webkit-scrollbar {
    display: none;
}

.recipe-card {
    flex: 0 0 108px;

    display: flex;
    flex-direction: column;

    background: var(--color-surface);

    border: 1px solid var(--color-border);

    border-radius: 16px;

    overflow: hidden;

    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.04);

    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.recipe-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}

.recipe-photo {
    height: 112px;

    position: relative;

    overflow: hidden;

    background: var(--color-primary-light);
}

/* Badge catégorie, affiché en haut à gauche de la photo (le bouton
   favori occupant déjà le haut à droite). */
.recipe-category-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;

    max-width: calc(100% - 16px);

    padding: 3px 9px;

    background: var(--color-secondary-light);
    color: var(--color-secondary-dark);

    border-radius: 20px;

    font-family: var(--font-body);
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1.4;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recipe-photo img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}

.favorite-button {
    position: absolute;

    top: 8px;
    right: 8px;

    width: 30px;
    height: 30px;

    border: none;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.92);

    font-size: 18px;
}

.recipe-info {
    display: flex;
    flex-direction: column;
    flex: 1;

    padding: 10px;
}

.recipe-info h3 {
    flex: 1;

    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 13px;
    line-height: 1.3;

    min-height: 37px;
}

.recipe-meta {
    display: flex;

    justify-content: space-between;
    align-items: center;

    margin-top: 8px;

    color: var(--muted);

    font-size: 11px;
}

.rating {
    color: var(--text);

    font-weight: 700;
}

.rating .rating-icon {
    color: var(--yellow);
}


/* =========================================================
   REPRENDRE
========================================================= */

.continue-card {
    background: white;

    border: 1px solid var(--border);

    border-radius: 20px;

    overflow: hidden;

    display: flex;
    align-items: stretch;

    gap: 14px;

    position: relative;
}

.continue-close-button {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;

    width: 24px;
    height: 24px;

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

    border: none;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.85);
    color: var(--text);

    font-size: 16px;
    line-height: 1;
    cursor: pointer;

    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.continue-image {
    width: 100px;

    flex-shrink: 0;

    background: #80543d;
}

.continue-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}

.continue-content {
    flex: 1;

    padding: 14px 14px 14px 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.continue-content h3 {
    font-size: 17px;

    margin-bottom: 5px;
}

.continue-content p {
    color: var(--muted);

    font-size: 14px;
}

.progress-container {
    width: 85%;
    height: 7px;

    background: var(--color-border);

    border-radius: 10px;

    margin-top: 12px;
}

.progress-bar {
    width: 60%;
    height: 100%;

    background: var(--green);

    border-radius: 10px;
}

.progress-text {
    position: absolute;

    right: 45px;
    bottom: 17px;

    font-size: 13px;

    color: var(--muted);
}

.continue-favorite {
    position: absolute;

    right: 14px;
    bottom: 14px;

    border: none;

    background: transparent;

    font-size: 25px;
}


/* =========================================================
   SÉLECTIONS
========================================================= */

.selection-grid {
    display: flex;

    gap: 10px;

    overflow-x: auto;

    scrollbar-width: none;
}

.selection-grid::-webkit-scrollbar {
    display: none;
}

.selection-card {
    flex: 0 0 108px;

    min-height: 192px;

    border-radius: 16px;

    background: var(--green);

    color: var(--color-on-primary, white);

    padding: 14px;

    display: flex;
    flex-direction: column;

    justify-content: space-between;

    position: relative;
    overflow: hidden;
    text-decoration: none;
}

.selection-card.second {
    background: #d5b67c;
}

.selection-card.third {
    background: #668a82;
}

.selection-card span {
    font-size: 24px;
}

.selection-card h3 {
    font-size: 12.5px;
    line-height: 1.3;
    white-space: nowrap;
}

/* ---- Cartes photo (RDV / Bien démarrer / Recettes Guy Demarle) ----
   Vraie balise <img> à l'intérieur de la carte (voir index.html)
   plutôt qu'une image de fond CSS : les 3 photos étaient des PNG de
   1,4 à 2 Mo chacune (bien plus grandes que les 108x192px réellement
   affichés), et un fond CSS ne s'affiche parfois qu'une fois
   ENTIÈREMENT téléchargé — d'où les cartes qui restaient parfois
   bloquées sur leur couleur de secours sans jamais montrer la photo,
   surtout sur connexion lente. Les fichiers ont été recadrés et
   recompressés à la taille réellement affichée (chacun ~30 Ko
   désormais) et une <img> s'affiche de façon fiable au fur et à
   mesure du chargement. */
.selection-card.photo-card {
    padding: 0;
}

.selection-card.photo-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---- Carte FAQ ---- */

.selection-card.faq-card {
    background: linear-gradient(165deg, var(--color-primary-light) 0%, var(--color-primary-dark) 88%);
}

.faq-icon {
    position: relative;
    align-self: flex-start;
    font-size: 22px;
}

.faq-icon-mark {
    position: absolute;
    top: -6px;
    right: -10px;

    width: 15px;
    height: 15px;
    border-radius: 50%;

    background: var(--yellow);
    color: var(--green-dark);

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

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

.selection-card.faq-card h3 {
    color: var(--color-surface);
    font-weight: 700;
}


/* =========================================================
   NAVIGATION BASSE
========================================================= */

.bottom-navigation {
    position: fixed;

    left: 50%;
    bottom: 16px;

    transform: translateX(-50%);

    width: calc(100% - 30px);

    max-width: 720px;

    height: 60px;

    background: rgba(255, 255, 255, 0.97);

    border: 1px solid rgba(220, 220, 220, 0.8);

    border-radius: 28px;

    display: flex;

    justify-content: space-around;
    align-items: center;

    padding: 0 6px;

    z-index: 100;

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.bottom-item {
    height: 50px;

    min-width: 52px;

    border-radius: 20px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 3px;

    font-size: 9px;

    letter-spacing: 0.1px;

    transition: color 0.2s ease, background-color 0.2s ease;
}

/* Couleur du texte des raccourcis de la navigation du bas : volontairement
   fixe (ne suit PAS le thème personnalisé, demande de Nada — comme le
   bandeau du haut) — déclarée aussi via ":link"/":visited" pour être sûr
   qu'elle reste bien celle-ci, même sur des navigateurs mobiles qui
   appliqueraient sinon leur bleu par défaut aux liens non stylés. */
.bottom-item,
.bottom-item:link,
.bottom-item:visited,
.bottom-item span {
    color: #6b6b63;
}

.bottom-icon {
    font-size: 21px;

    line-height: 1;

    transition: transform 0.2s ease;
}

.bottom-icon img {
    width: 21px;
    height: 21px;
    object-fit: contain;
    display: block;
}

/* Avatar de la personne connectée, à la place de l'icône "Profil"
   générique — voir bottom-nav-avatar.js. */
.bottom-nav-avatar-photo {
    width: 21px;
    height: 21px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.bottom-nav-avatar-emoji {
    display: block;
    line-height: 1;
}

/* Onglet "Profil" : plus d'étiquette texte, l'icône/avatar est donc
   agrandi(e) et affiché(e) dans un cercle plein — que ce soit l'icône
   générique, l'emoji choisi ou la vraie photo de profil (voir
   bottom-nav-avatar.js et profile.html, qui reste l'endroit où l'on
   personnalise cet avatar). */
.bottom-item-profile {
    justify-content: center;
}

.bottom-item-profile .bottom-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--green-light);
    font-size: 20px;
}

.bottom-item-profile .bottom-icon img,
.bottom-item-profile .bottom-nav-avatar-photo {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.bottom-item-profile .bottom-nav-avatar-emoji {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    line-height: 1;
}

/* Onglet actif : couleur elle aussi fixe (voir commentaire ci-dessus),
   simplement plus foncée que les onglets inactifs pour rester lisible
   comme indicateur, quel que soit le thème choisi. */
.bottom-item.active,
.bottom-item.active:link,
.bottom-item.active:visited,
.bottom-item.active span {
    color: #222222;
}

.bottom-item.active {
    font-weight: 700;

    background: #f0efe9;
}

.bottom-item.active .bottom-icon {
    transform: translateY(-1px) scale(1.08);
}


/* =========================================================
   FICHE RECETTE
========================================================= */

.recipe-page {
    max-width: 760px;

    margin: 0 auto;

    padding: 15px 20px 120px;
}
.recipe-favorite.is-favorite,
.large-favorite.is-favorite {
    background: var(--color-surface) !important;
    color: var(--favorite) !important;
}

/* PHOTO PRINCIPALE */

.recipe-hero {
    position: relative;

    width: 100%;

    height: 330px;

    border-radius: 24px;

    overflow: hidden;

    margin-bottom: 20px;

    background: var(--cream);

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

/* =========================
   BARRE D'ACTIONS EN HAUT DE PAGE
   (bouton retour + partager, style
   identique sur toutes les pages)
========================= */

.page-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px 0;
}

.page-top-bar .top-icon-group {
    display: flex;
    gap: 10px;
}

.top-icon-button {
    width: 42px;
    height: 42px;
    flex-shrink: 0;

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

    border: none;
    border-radius: 50%;
    background: var(--color-surface);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.10);

    color: var(--text);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.top-icon-button:hover {
    opacity: 0.85;
}

/* Regroupe la cloche de notifications et le bouton radio en direct
   (voir index.html, #radioLiveButton) à l'extrême droite de l'en-tête,
   avec le bouton radio immédiatement à gauche de la cloche. */
.top-header-icons {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.top-icon-button img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: block;
}

.recipe-hero img {
    width: 100%;
    height: 100%;

    /*
       contain = la photo entière est visible
       sans être coupée ni trop zoomée.
    */
    object-fit: contain;

    display: block;
}


/* CONTENU */

.recipe-details {
    padding: 0 5px;
}


/* TITRE */

.recipe-title-row {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;
}

.recipe-title-row h1 {
    margin: 5px 0 0;

    font-family: var(--font-display);

    font-size: 38px;

    color: var(--green);
}

.recipe-title-row .small-title {
    font-size: 11px;

    letter-spacing: 0.5px;

    color: var(--muted);
}

.large-favorite {
    width: 45px;
    height: 45px;

    flex-shrink: 0;

    border: none;

    border-radius: 50%;

    background: var(--green-light);

    color: var(--green);

    font-size: 25px;
}


/* =========================================================
   INFOS RECETTE
========================================================= */

.recipe-info-row {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    margin: 22px 0;

    padding: 17px 0;

    border-top: 1px solid var(--border);

    border-bottom: 1px solid var(--border);
}

.recipe-info-row > div {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 3px;

    border-right: 1px solid var(--border);
}

.recipe-info-row > div:last-child {
    border-right: none;
}

.info-icon {
    font-size: 18px;

    color: var(--green);
}

.info-icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* Étoile de la note en jaune */

.info-icon.rating-star {
    color: var(--yellow) !important;
}

.recipe-info-row strong {
    font-size: 15px;
}

.recipe-info-row small {
    font-size: 11px;

    color: var(--muted);
}


/* =========================================================
   SECTIONS RECETTE
========================================================= */

.recipe-section {
    margin-top: 25px;
}

.recipe-section h2 {
    font-family: var(--font-display);

    font-size: 24px;

    margin: 0;

    color: var(--text);
}

.section-title-row {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 13px;
}


/* =========================================================
   CHOIX DU NOMBRE DE PERSONNES
========================================================= */

.people-selector {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin: 12px 0 15px;

    padding: 10px 0;
}

.people-selector > span {
    font-size: 13px;

    color: var(--muted);
}

.people-buttons {
    display: flex;

    gap: 6px;
}

.people-buttons button {
    width: 34px;
    height: 34px;

    border: 1px solid var(--border);

    border-radius: 50%;

    background: white;

    color: var(--text);

    font-weight: 700;
}

.people-buttons button.active {
    background: var(--green);

    border-color: var(--green);

    color: var(--color-on-primary, white);
}


/* =========================================================
   INGREDIENTS
========================================================= */

.ingredients-list {
    list-style: none;

    padding: 0;
    margin: 0;

    display: flex;

    flex-direction: column;

    gap: 3px;
}

.ingredients-list li {
    min-height: 39px;

    padding: 7px 10px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    border-bottom: 1px solid var(--border);

    font-size: 13px;
}

.ingredient-name {
    display: flex;

    align-items: center;

    gap: 7px;
}

/* Emojis petits */

.ingredient-name::first-letter {
    font-size: 15px;
}

.ingredients-list li strong {
    font-size: 12px;

    color: var(--green);

    white-space: nowrap;
}


/* =========================================================
   BOUTONS RECETTE
========================================================= */

.recipe-actions {
    display: flex;

    flex-direction: column;

    gap: 9px;

    margin-top: 20px;
}

.start-recipe,
.cookidoo-button {
    width: 100%;

    min-height: 50px;

    border-radius: 27px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    font-size: 15px;

    font-weight: 700;

    cursor: pointer;

    text-decoration: none;

    box-sizing: border-box;
}

.start-recipe {
    border: none;

    background: var(--green);

    color: var(--color-on-primary, white);
}

.cookidoo-button {
    background: white;

    color: var(--green);

    border: 1px solid var(--green);
}


/* =========================================================
   PRÉPARATION
========================================================= */

.preparation-section {
    margin-top: 32px;
}

.steps {
    margin-top: 17px;

    display: flex;

    flex-direction: column;

    gap: 18px;
}

.step {
    display: flex;

    align-items: flex-start;

    gap: 13px;
}

.step > span {
    width: 28px;
    height: 28px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--green);

    color: var(--color-on-primary, white);

    font-size: 12px;

    font-weight: 700;
}

.step p {
    margin: 3px 0 0;

    font-size: 14px;

    line-height: 1.55;
}


/* =========================================================
   MODE RECETTE PLEIN ÉCRAN
========================================================= */

.recipe-mode {
    position: fixed;

    inset: 0;

    z-index: 9999;

    display: none;

    flex-direction: column;

    background: var(--cream) url("images/recipe-step-bg.jpg") center top / cover no-repeat;
}

.recipe-mode.active {
    display: flex;
}

/* Étape avec réglages Thermomix (temps / température / vitesse) :
   même décor, mais avec les 3 cercles en plus (voir recipe.html,
   renderStepGauges() et positionStepGaugeOverlays()). */
.recipe-mode.has-step-gauges {
    background-image: url("images/step-gauges-bg.jpg");
}

/* Sur toute recette où les jauges apparaissent (sur au moins une
   étape), le contenu (carte blanche) n'est plus centré
   verticalement : son haut est fixé sous les cercles temps /
   température / vitesse dessinés en haut du fond (pour ne jamais
   les recouvrir), et reste au même niveau d'une étape à l'autre —
   seul le bas de la carte varie, selon la longueur du texte. */
.recipe-mode.is-gauges-recipe .recipe-step-content {
    justify-content: flex-start;

    padding-top: 36vh;
}


/* HEADER */

.recipe-mode-header {
    height: 70px;

    padding: 0 18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background: transparent;

    position: relative;

    z-index: 1;
}

.recipe-mode-header > div {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 3px;
}

.recipe-mode-header strong {
    font-family: var(--font-heading);

    font-size: 19px;

    color: var(--green);

    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.75);
}

.recipe-mode-header span {
    font-size: 11px;

    color: var(--muted);

    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.75);
}

.recipe-back {
    width: 40px;
    height: 40px;

    border: none;

    border-radius: 50%;

    background: var(--green-light);

    color: var(--green);

    font-size: 24px;
}


/* ÉTAPE PLEIN ÉCRAN */

.recipe-step-content {
    flex: 1;

    display: flex;

    flex-direction: column;

    justify-content: center;

    width: min(680px, 100%);

    margin: 0 auto;

    padding: 30px;
}

/* Carte blanche autour du numéro/texte de l'étape, comme sur la
   page de la recette (le fond décoratif reste visible tout autour,
   derrière l'en-tête, les jauges et la navigation). */
.step-content-card {
    background: #fff;

    border-radius: 22px;

    padding: 28px 24px;

    box-shadow: 0 10px 26px rgba(0, 0, 0, .12);
}

/* Numéro dans le fil du texte ("1. Mixer...") : s'il y a un retour
   à la ligne, il se fait au ras du numéro (comme du texte normal),
   pas indenté sous le début de la phrase. */
.step-number {
    margin-right: 4px;

    color: var(--green);

    font-family: var(--font-heading);

    font-size: 15px;

    font-weight: 700;
}

.recipe-step-content h1 {
    margin: 0 0 15px;

    font-family: var(--font-display);

    font-size: 30px;

    color: var(--green);
}

.recipe-step-content p {
    margin: 0;

    font-size: 20px;

    line-height: 1.65;
}


/* NAVIGATION DES ÉTAPES */

.recipe-mode-navigation {
    display: flex;

    gap: 10px;

    padding: 15px 18px 20px;

    background: transparent;

    position: relative;

    z-index: 1;
}

.recipe-mode-navigation button {
    flex: 1;

    min-height: 50px;

    border-radius: 26px;

    border: 1px solid var(--border);

    background: white;

    font-size: 14px;

    font-weight: 700;
}

.recipe-mode-navigation button:last-child {
    background: var(--green);

    border-color: var(--green);

    color: var(--color-on-primary, white);
}

.recipe-mode-navigation button:disabled {
    opacity: 0.35;

    cursor: default;
}


/* =========================================================
   COMPTEURS THERMOMIX (texte incrusté sur l'image)
   -----------------------------------------------------------
   Actif dès qu'une recette contient au moins un réglage
   Thermomix détecté quelque part dans ses étapes (voir
   recipeHasAnyGaugeSettings() dans recipe.html). Pour les
   recettes qui n'en contiennent jamais, #stepGauges reste
   "hidden" et cette section ne change donc rien à leur affichage.

   Les 3 cercles (temps / température / vitesse) sont dessinés
   dans l'image images/step-gauges-bg.jpg elle-même (voir la
   classe .recipe-mode.has-step-gauges plus haut) : ici, on ne
   stylise que le TEXTE des valeurs, positionné en pixels par
   recipe.html (positionStepGaugeOverlays()) pour tomber pile
   sur les cercles blancs quelle que soit la taille de l'écran.
========================================================= */

.step-gauges {
    position: absolute;
    inset: 0;

    /* Ne doit jamais intercepter les clics/taps destinés au
       reste de l'écran (bouton retour, navigation...). */
    pointer-events: none;
}

/* Un rôle d'auteur type "display:" gagne toujours sur [hidden] de
   l'UA, quelle que soit la spécificité : cette règle est donc
   obligatoire (même schéma que .onboarding-action[hidden]). */
.step-gauges[hidden] {
    display: none;
}

.step-gauge-value {
    position: absolute;

    /* left/top/font-size/width sont posés en JS (pixels) : les
       valeurs par défaut ci-dessous ne servent qu'avant le tout
       premier calcul, pour éviter un flash mal placé. */
    transform: translate(-50%, -50%);

    font-family: var(--font-heading);
    font-weight: 800;
    line-height: 1.05;
    text-align: center;
}

.step-gauge-value--time,
.step-gauge-value--temp,
.step-gauge-value--vitesse {
    color: #111;
}


/* =========================================================
   AVIS
========================================================= */

.recipe-reviews {
    margin-top: 40px;

    padding-top: 30px;

    border-top: 1px solid var(--border);
}


/* TITRE AVIS */

.reviews-header {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    margin-bottom: 25px;
}

.reviews-header h2 {
    margin: 5px 0 0;

    font-family: var(--font-display);

    font-size: 24px;
}

.average-rating {
    display: flex;

    align-items: center;

    gap: 5px;
}

.average-rating strong {
    font-size: 22px;
}

.average-rating span {
    color: var(--yellow);

    font-size: 20px;
}

.average-rating small {
    color: var(--muted);

    font-size: 11px;
}


/* =========================================================
   FORMULAIRE NOTE
========================================================= */

.rating-form {
    padding: 20px;

    background: var(--green-light);

    border-radius: 18px;

    margin-bottom: 35px;
}

.rating-form p {
    margin: 0 0 12px;

    font-size: 14px;

    font-weight: 600;
}


/* ÉTOILES */

.star-rating {
    display: flex;

    gap: 4px;

    margin-bottom: 18px;
}

.star-rating button {
    border: none;

    background: transparent;

    padding: 0;

    font-size: 31px;

    line-height: 1;

    color: var(--color-border);
}

.star-rating button.active {
    color: var(--yellow);
}


/* COMMENTAIRE */

.rating-form textarea {
    width: 100%;

    min-height: 95px;

    resize: vertical;

    border: 1px solid var(--border);

    border-radius: 13px;

    padding: 13px;

    font-family: var(--font-body);

    font-size: 13px;

    line-height: 1.5;

    background: white;

    outline: none;
}

.rating-form textarea:focus {
    border-color: var(--green);
}


/* PUBLIER */

.publish-review {
    width: 100%;

    margin-top: 10px;

    min-height: 48px;

    border: none;

    border-radius: 25px;

    background: var(--green);

    color: var(--color-on-primary, white);

    font-size: 14px;

    font-weight: 700;
}


/* =========================================================
   LISTE DES AVIS
========================================================= */

.reviews-list-header {
    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 15px;
}

.reviews-list-header h2 {
    margin: 0;

    font-family: var(--font-display);

    font-size: 23px;
}

.reviews-list-header span {
    color: var(--muted);

    font-size: 12px;
}

.reviews-list {
    display: flex;

    flex-direction: column;

    gap: 12px;
}


/* CARTE */

.review-card {
    padding: 17px;

    background: white;

    border: 1px solid var(--border);

    border-radius: 17px;
}

.review-top {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 15px;

    margin-bottom: 10px;
}

.review-user {
    display: flex;

    align-items: center;

    gap: 10px;
}

.review-avatar {
    width: 34px;
    height: 34px;

    flex-shrink: 0;

    border-radius: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    background: var(--green-light);

    color: var(--green);

    font-weight: 700;
}

.review-user div:last-child {
    display: flex;

    flex-direction: column;

    gap: 2px;
}

.review-user strong {
    font-size: 13px;
}

.review-user small {
    color: var(--muted);

    font-size: 10px;
}

.review-stars {
    color: var(--yellow);

    font-size: 13px;

    letter-spacing: 1px;

    white-space: nowrap;
}

.review-card p {
    margin: 0;

    font-size: 13px;

    line-height: 1.55;

    color: var(--text);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    body {
        padding-bottom: 97px;
    }

    /* HEADER */

    .home-logo {
        height: 58px;
    }

    .top-header {
        padding: 20px 16px 24px;
    }

    .daily-greeting {
        padding: 8px 16px 0;
    }

    .daily-greeting .greeting-hello {
        font-size: 18px;
    }

    .daily-greeting .greeting-question {
        font-size: 11.5px;
    }


    /* CATÉGORIES */

    .categories {
        gap: 4px;
        padding: 5px 12px 10px;
    }

    .category {
        flex: 0 0 64px;
        width: 64px;
        min-width: 0;
    }

    .category-icon {
        width: 61px;
        height: 61px;
    }

    .category span:last-child {
        font-size: 11px;
        line-height: 1.2;
        text-align: center;
    }


    /* BANNIÈRE */

    .meal-banner {
        margin-left: 15px;
        margin-right: 15px;

        grid-template-columns: 52% 48%;

        min-height: 140px;
    }

    .meal-content {
        padding: 14px 16px;
    }

    .meal-content h1 {
        font-size: 20px;
    }

    .meal-content p {
        font-size: 12px;
        margin-bottom: 10px;
    }


    /* CONCOURS DU MOIS (même gabarit que la bannière ci-dessus) */

    .contest-banner {
        margin-left: 15px;
        margin-right: 15px;

        grid-template-columns: 52% 48%;

        min-height: 140px;
    }

    .contest-content {
        padding: 14px 16px;
    }

    .contest-content .contest-title {
        font-size: 18px;
    }

    .contest-content .contest-description {
        font-size: 12px;
        margin-bottom: 8px;
    }


    /* SECTIONS */

    .section-header h2 {
        font-size: 21px;
    }


    /* CARTES */

    .recipe-card {
        flex-basis: 104px;
    }

    .selection-card {
        flex-basis: 104px;
    }


    /* FICHE RECETTE */

    .recipe-page {
        padding: 10px 15px 110px;
    }

    .recipe-hero {
        height: 245px;

        border-radius: 20px;
    }

    .recipe-title-row h1 {
        font-size: 32px;
    }

    .recipe-info-row {
        margin: 18px 0;

        padding: 14px 0;
    }

    .recipe-info-row strong {
        font-size: 14px;
    }

    .recipe-info-row small {
        font-size: 10px;
    }

    .recipe-section h2 {
        font-size: 22px;
    }


    /* PERSONNES */

    .people-selector {
        align-items: center;
    }

    .people-selector > span {
        font-size: 12px;
    }


    /* INGREDIENTS */

    .ingredients-list li {
        min-height: 37px;

        font-size: 12px;
    }

    .ingredients-list li strong {
        font-size: 11px;
    }


    /* ÉTAPES */

    .step p {
        font-size: 13px;
    }

    .recipe-step-content {
        padding: 25px 22px;
    }

    .recipe-step-content h1 {
        font-size: 27px;
    }

    .recipe-step-content p {
        font-size: 18px;
    }

    .recipe-mode-navigation {
        padding: 12px 14px 18px;
    }


    /* AVIS */

    .reviews-header {
        align-items: flex-start;
    }

    .reviews-header h2 {
        font-size: 21px;
    }

    .average-rating {
        flex-wrap: wrap;

        justify-content: flex-end;
    }

    .rating-form {
        padding: 17px;
    }

    .star-rating button {
        font-size: 28px;
    }

    .review-top {
        align-items: flex-start;
    }

    .review-stars {
        font-size: 11px;
    }

    .review-card {
        padding: 15px;
    }
}


/* =========================================================
   GRAND ÉCRAN
========================================================= */

@media (min-width: 900px) {

    .bottom-navigation {
        max-width: 760px;
    }
}/* =========================================
   CORRECTION VISUEL FICHE RECETTE
========================================= */

.recipe-page {
    max-width: 430px;
    margin: 0 auto;
    padding: 0 20px 110px;
}

/* PHOTO RECETTE */

.recipe-hero {
    width: 100%;
    height: 270px;
    overflow: hidden;
    border-radius: 24px;
    margin: 8px 0 22px;
}

.recipe-hero img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 24px;
}


/* TITRE */

.recipe-title-row {
    margin-bottom: 0;
}

.recipe-title-row h1 {
    margin: 4px 0 0;
    font-size: 32px;
    line-height: 1.1;
}


/* COEUR FAVORIS */

.large-favorite {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-size: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}


/* INFORMATIONS */

.recipe-info-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    margin: 5px 0 24px;
    padding: 16px 0;
}

.recipe-info-row > div {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.recipe-info-row > div + div {
    border-left: 1px solid var(--color-border);
}

.recipe-info-row strong {
    font-size: 15px;
}

.recipe-info-row small {
    font-size: 10px;
    color: var(--color-text-secondary);
}

.info-icon {
    font-size: 15px;
    margin-bottom: 2px;
}

.rating-star {
    color: var(--color-rating);
}


/* INGREDIENTS */

.recipe-section h2 {
    font-size: 23px;
    margin-bottom: 18px;
}

.people-selector {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 18px;
}

.people-selector > span {
    font-size: 12px;
    color: var(--color-text-secondary);
}

.people-buttons {
    display: flex;
    gap: 7px;
}

.people-buttons button {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: white;
    font-weight: 600;
    cursor: pointer;
}

.people-buttons button.active {
    background: var(--color-primary);
    color: var(--color-on-primary, white);
    border-color: var(--color-primary);
}


/* INGREDIENTS */

.ingredients-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ingredients-list li {
    min-height: 42px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    font-size: 13px;
}

.ingredient-name {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ingredient-name:first-letter {
    font-size: 15px;
}

.ingredients-list .quantity {
    color: var(--color-primary-dark);
    font-size: 12px;
    white-space: nowrap;
}


/* BOUTONS RECETTE */

.recipe-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 25px 0;
}

.start-recipe,
.cookidoo-button {
    width: 100%;
    min-height: 52px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.start-recipe {
    border: none;
    background: var(--color-primary);
    color: var(--color-on-primary, white);
}

.cookidoo-button {
    border: 1px solid var(--color-primary);
    background: white;
    color: var(--color-primary-dark);
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .recipe-page {
        padding-left: 16px;
        padding-right: 16px;
    }

    .recipe-hero {
        height: 285px;
        border-radius: 22px;
    }

    .recipe-hero img {
        border-radius: 22px;
    }

    .recipe-title-row h1 {
        font-size: 30px;
    }

}/* =========================================
   CARTES BLANCHES - FICHE RECETTE
========================================= */

.recipe-page {
    background: var(--color-background);
}

/* Carte informations */
.recipe-info-row {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 22px;
    padding: 20px 12px;
    margin: 8px 0 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

/* Icônes des informations */
.info-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    color: var(--color-primary-dark);
    margin-bottom: 6px;
}

/* Le bouton "Partager" de la fiche recette vit ici, à la place de
   l'icône "Difficulté" (voir recipe.html) : il reprend l'apparence
   ronde de .info-icon ci-dessus, mais reste un vrai <button> cliquable
   — ces quelques règles annulent juste le style par défaut du
   navigateur (bordure, fond blanc, curseur) qui dépasserait sinon. */
.info-icon-button {
    border: none;
    padding: 0;
    margin: 0 auto 6px;
    font: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.info-icon-button:hover {
    opacity: 0.85;
}

.rating-star {
    width: 44px;
    height: 44px;
    font-size: 23px;
}

/* Nombre de personnes */
.recipe-info-row > div:nth-child(3) .info-icon {
    font-size: 23px;
}


/* =========================================
   CARTE INGREDIENTS
========================================= */

.recipe-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 22px;
    padding: 18px 16px;
    margin-top: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.recipe-section h2 {
    margin-top: 0;
}


/* Sélecteur personnes */

.people-selector {
    margin-bottom: 14px;
}

.people-buttons {
    background: var(--color-surface);
}


/* Lignes ingrédients */

.ingredients-list li {
    min-height: 42px;
    border-bottom: 1px solid var(--color-border);
}

.ingredients-list li:last-child {
    border-bottom: none;
}

.ingredient-name {
    font-size: 14px;
}

.ingredient-name:first-letter {
    font-size: 18px;
}

.ingredients-list .quantity {
    color: var(--color-primary-dark);
    font-weight: 600;
}


/* =========================================
   PHOTO
========================================= */

.recipe-hero {
    background: var(--color-surface);
    padding: 10px;
    border-radius: 28px;
    height: 290px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.recipe-hero img {
    border-radius: 20px;
}


/* =========================================
   TITRE
========================================= */

.recipe-details {
    padding-top: 0;
}

.recipe-title-row h1 {
    margin-bottom: 5px;
}


/* =========================================
   FAVORIS
========================================= */

.large-favorite {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: 0 2px 7px rgba(0,0,0,0.08);
    color: var(--color-primary-dark);
}


/* =========================================
   BOUTONS
========================================= */

.recipe-actions {
    margin-top: 18px;
}

.start-recipe,
.cookidoo-button {
    min-height: 58px;
    border-radius: 16px;
}#ratingStars {
    display: flex;
    flex-direction: row;
    direction: ltr;
    gap: 5px;
}

#ratingStars .rating-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border: none;
    background: transparent;

    color: var(--color-border);

    font-size: 30px;

    cursor: pointer;

    pointer-events: auto;
}

#ratingStars .rating-star.active {
    color: var(--color-rating);
}

#publishReviewButton {
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    z-index: 10;
}.top-header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-header .icon-button {
    position: relative;
    z-index: 2;
    /* La bannière du haut reste en noir, même si le reste
       du texte du site est passé en vert. */
    color: #222222;
}/* =========================
   RÉSULTATS DE RECHERCHE
========================= */

.search-results-section {
    margin-top: 24px;
}

.search-results-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.search-results-grid .recipe-card {
    width: 100%;
    min-width: 0;
}

#searchResultsCount {
    font-size: 13px;
    color: var(--color-text-secondary);
}


/* Ordinateur */
@media (min-width: 768px) {

    .search-results-grid {
        grid-template-columns: repeat(3, 260px);
        justify-content: start;
        gap: 12px;
    }

    .search-results-grid .recipe-card {
        width: 260px;
    }

}/* =========================
   ESPACEMENT RÉSULTATS RECHERCHE
========================= */

.search-results-section {
    margin: 28px 12px 30px;
}

.search-results-section .section-header {
    padding: 0 2px;
    margin-bottom: 16px;
    align-items: center;
}

.search-results-section .section-header h2 {
    margin: 0;
}

.search-results-grid {
    padding: 0 2px;
}/* =========================
   FAVORI À CÔTÉ DU TITRE
========================= */

.recipe-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.recipe-title-content {
    flex: 1;
}

.recipe-title-content h1 {
    margin-bottom: 0;
}

.recipe-favorite {
    position: static !important;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    cursor: pointer;
}
/* =========================
   FAVORIS RECETTE
========================= */

.favorite-button.is-favorite {
    background: var(--color-surface) !important;
    color: var(--favorite) !important;
}

.recipe-favorite.is-favorite {
    background: var(--color-surface) !important;
    color: var(--favorite) !important;
}

.continue-favorite.is-favorite {
    color: var(--favorite);
}#todayMealVisual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* =========================
   PHOTOS INGREDIENTS (recettes importées)
========================= */

.ingredient-icon {
    width: 48px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 22px;
    line-height: 1;
}

.ingredient-photo {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* =========================================================
   ONBOARDING DE BIENVENUE (voir onboarding.js)
   Parcours en 6 étapes affiché en plein écran à la toute première
   connexion, et à la demande depuis "Revoir la présentation"
   (profil). Pensé mobile d'abord : image du personnage à droite,
   volontairement petite pour laisser la priorité au texte.
========================================================= */

.onboarding-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.onboarding-overlay[hidden] {
    display: none;
}

.onboarding-overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(30, 40, 34, .45);
    backdrop-filter: blur(3px);
}

.onboarding-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: var(--color-surface, #ffffff);
    border-radius: 26px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .18);
    padding: 26px 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.onboarding-card-close {
    position: absolute;
    top: 10px;
    right: 12px;
    border: 0;
    background: transparent;
    font-size: 27px;
    line-height: 1;
    color: var(--muted);
    cursor: pointer;
    padding: 4px 8px;
    z-index: 1;
}

.onboarding-progress {
    display: flex;
    align-items: center;
    gap: 10px;
}

.onboarding-counter {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    color: var(--color-primary);
    white-space: nowrap;
}

.onboarding-progress-track {
    flex: 1;
    display: flex;
    gap: 5px;
}

.onboarding-progress-seg {
    flex: 1;
    height: 5px;
    border-radius: 999px;
    background: var(--border);
}

.onboarding-progress-seg.is-filled {
    background: var(--color-primary);
}

.onboarding-content {
    display: flex;
    align-items: flex-end;
    gap: 14px;
}

.onboarding-text {
    flex: 1;
    min-width: 0;
}

.onboarding-text h2 {
    font-family: var(--font-display);
    font-size: 21px;
    line-height: 1.25;
    color: var(--text);
    margin-bottom: 10px;
}

.onboarding-body p {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--muted);
    margin: 0 0 8px;
}

.onboarding-body p:last-child {
    margin-bottom: 0;
}

.onboarding-highlight {
    color: var(--color-primary-dark) !important;
    font-weight: 700;
}

.onboarding-image {
    flex-shrink: 0;
    width: 92px;
    height: auto;
    max-height: 180px;
    object-fit: contain;
    object-position: bottom;
}

.onboarding-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid var(--color-primary);
    background: var(--color-surface, #ffffff);
    color: var(--color-primary);
    padding: 12px 14px;
    border-radius: 14px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 13.5px;
    text-decoration: none;
    text-align: center;
}

/* Étape sans bouton d'action (ex. "Tes premiers pas TM7") : sans
   cette règle, le "hidden" posé en JS (renderOnboardingStep) est
   perdu face au "display: flex" ci-dessus, et un cadre vide reste
   visible à la place du bouton. */
.onboarding-action[hidden] {
    display: none;
}

.onboarding-action:hover {
    background: var(--color-primary-ultra-light);
}

.onboarding-community-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.onboarding-community-item {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    padding: 8px;
    border-radius: 12px;
}

.onboarding-community-item:hover {
    background: var(--color-primary-ultra-light);
}

.onboarding-community-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}

.onboarding-community-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.onboarding-community-text strong {
    font-size: 13px;
    color: var(--color-primary-dark);
}

.onboarding-community-text span {
    font-size: 12px;
    color: var(--muted);
}

.onboarding-nav {
    display: flex;
    gap: 10px;
    margin-top: 2px;
}

.onboarding-nav-prev {
    flex: 0 0 auto;
    border: 1.5px solid var(--border);
    background: transparent;
    color: var(--muted);
    border-radius: 14px;
    padding: 13px 16px;
    font-family: var(--font-heading);
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
}

.onboarding-nav-next {
    flex: 1;
    border: none;
    border-radius: 14px;
    padding: 13px 16px;
    background: var(--color-primary);
    color: var(--color-on-primary, white);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14.5px;
    cursor: pointer;
}

.onboarding-nav-next:hover {
    background: var(--color-primary-dark);
}

@media (max-width: 380px) {

    .onboarding-card {
        padding: 22px 16px 16px;
        border-radius: 22px;
    }

    .onboarding-image {
        width: 74px;
        max-height: 150px;
    }

    .onboarding-text h2 {
        font-size: 19px;
    }

    .onboarding-body p {
        font-size: 13px;
    }

}

/* =========================================================
   INVITATION AUTOMATIQUE "ON CUISINE ENSEMBLE"
   -----------------------------------------------------------
   Fenêtre proposée à la connexion suivante pour tout nouvel atelier
   collectif ("On cuisine ensemble") pas encore traité — voir
   atelier-invite.js. Jamais pour les ateliers "individuel" (Mise en
   service). Toutes les couleurs viennent des variables du thème
   existant (--color-primary, --color-surface, --muted, --border...),
   comme les cartes ateliers de rdv.html — aucune couleur n'est codée
   en dur ici, pour rester cohérente avec n'importe quelle palette
   personnalisée (voir theme.js).
========================================================= */

.atelier-invite-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.atelier-invite-overlay[hidden] {
    display: none;
}

.atelier-invite-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(30, 40, 34, .45);
    backdrop-filter: blur(3px);
}

.atelier-invite-card {
    position: relative;
    width: 100%;
    max-width: 400px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: var(--color-surface, #ffffff);
    border-radius: 26px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .18);
    padding: 30px 24px 24px;
    text-align: center;
    opacity: 0;
    transform: scale(.94);
    animation: atelierInviteIn .3s ease forwards;
}

@keyframes atelierInviteIn {
    from { opacity: 0; transform: scale(.94); }
    to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .atelier-invite-card {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

.atelier-invite-close {
    position: absolute;
    top: 10px;
    right: 12px;
    border: 0;
    background: transparent;
    font-size: 27px;
    line-height: 1;
    color: var(--muted);
    cursor: pointer;
    padding: 4px 8px;
    z-index: 1;
}

.atelier-invite-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}

.atelier-invite-icon svg {
    width: 26px;
    height: 26px;
}

.atelier-invite-kicker {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 8px;
}

.atelier-invite-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 21px;
    line-height: 1.25;
    color: var(--text);
    margin-bottom: 10px;
}

.atelier-invite-intro {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--muted);
    margin-bottom: 18px;
}

.atelier-invite-event {
    display: flex;
    gap: 12px;
    align-items: center;
    text-align: left;
    background: var(--color-primary-ultra-light, var(--color-primary-light));
    border-radius: 16px;
    padding: 12px;
    margin-bottom: 20px;
}

.atelier-invite-event-image {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 12px;
    object-fit: cover;
    background: var(--color-primary-light);
}

.atelier-invite-event-body {
    flex: 1;
    min-width: 0;
}

.atelier-invite-event-title {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary-dark);
    margin-bottom: 5px;
    line-height: 1.3;
}

.atelier-invite-event-meta {
    font-size: 12px;
    color: var(--muted);
    font-weight: 600;
    margin-bottom: 4px;
}

.atelier-invite-event-recipe {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
}

/* Sans cette règle, le "hidden" posé en JS (voir atelier-invite.js,
   showAtelierInviteOverlay) est perdu face au "display: inline-block"
   ci-dessus — même piège déjà documenté plus haut pour
   ".onboarding-action[hidden]". */
.atelier-invite-event-recipe[hidden] {
    display: none;
}

.atelier-invite-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    border: none;
    border-radius: 16px;
    padding: 15px 16px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    margin-bottom: 10px;
    -webkit-tap-highlight-color: transparent;
}

.atelier-invite-btn:last-of-type {
    margin-bottom: 0;
}

.atelier-invite-btn-primary {
    background: var(--color-primary);
    color: var(--color-on-primary, white);
}

.atelier-invite-btn-primary:disabled {
    opacity: .65;
    cursor: default;
}

.atelier-invite-btn-secondary {
    background: transparent;
    color: var(--muted);
    border: 1.5px solid var(--border);
}

.atelier-invite-footnote {
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 14px;
}

@media (max-width: 380px) {

    .atelier-invite-card {
        padding: 24px 18px 18px;
        border-radius: 22px;
    }

    .atelier-invite-title {
        font-size: 19px;
    }

    .atelier-invite-event-image {
        width: 68px;
        height: 68px;
    }

}

#mealIdeasButton, #offersButton {
    margin-top: 45px;
}

/* =========================================================
   MODE VISITEUR — styles partagés
   (badge, popup RestrictedAccessModal, cartes/vidéos verrouillées)
   N'affecte aucun style existant : nouvelles classes uniquement.
========================================================= */

.visitor-mode-badge {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    z-index: 5000;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 30px;
    background: var(--color-text);
    color: var(--color-surface);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .3px;
    box-shadow: 0 6px 18px rgba(30, 45, 36, .22);
    cursor: pointer;
    user-select: none;
}

.visitor-mode-badge span {
    font-size: 13px;
}

.restricted-access-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(35, 48, 40, .48);
    backdrop-filter: blur(4px);
}

.restricted-access-overlay.active {
    display: flex;
}

.restricted-access-card {
    position: relative;
    width: min(420px, 100%);
    padding: 30px 25px 24px;
    border-radius: 22px;
    background: var(--color-surface);
    text-align: center;
    box-shadow: 0 20px 60px rgba(30, 45, 36, .18);
}

.restricted-access-close {
    position: absolute;
    top: 13px;
    right: 13px;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: var(--color-primary-light);
    color: var(--color-text-secondary);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.restricted-access-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 15px;
    border-radius: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-light);
    font-size: 23px;
}

.restricted-access-small {
    display: block;
    margin-bottom: 7px;
    color: var(--color-text-secondary);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .6px;
}

.restricted-access-title {
    margin: 0 0 10px;
    color: var(--color-text);
    font-size: 18px;
    font-weight: 800;
}

.restricted-access-text {
    margin: 0 0 20px;
    color: var(--color-text-secondary);
    font-size: 13.5px;
    line-height: 1.5;
}

.restricted-access-primary {
    width: 100%;
    justify-content: center;
    align-self: stretch;
    margin-bottom: 10px;
}

.restricted-access-secondary {
    width: 100%;
    border: none;
    background: none;
    color: var(--color-text-secondary);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: underline;
    padding: 6px;
    cursor: pointer;
}

/* Cartes recette / vidéo verrouillées pour le visiteur */
.visitor-locked {
    position: relative;
    cursor: pointer;
}

.visitor-locked .visitor-locked-media,
.visitor-locked > img,
.visitor-locked .search-recipe-image {
    filter: grayscale(45%) brightness(0.85);
    opacity: .75;
}

.visitor-locked-badge {
    /* Cadenas rond en haut à droite retiré à la demande de Nada :
       le bandeau "Réservé à mes clientes" en bas suffit. */
    display: none;
}

.visitor-locked-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 8px;
    background: rgba(35, 48, 40, .72);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .2px;
    text-align: center;
}


/* =========================================================
   TYPOGRAPHIE — HARMONISATION GLOBALE
   -----------------------------------------------------------
   Lora (titres) + Poppins (tout le reste).
   Ces quelques règles garantissent une hiérarchie cohérente sur
   toutes les pages, y compris quand le <style> propre à une page
   demandait autre chose.
========================================================= */

/* Titres en Lora : toujours en semi-gras (600), même si une page
   demandait une autre graisse — bien visibles sans être trop lourds. */
h1,
h2 {
    font-weight: 600 !important;
    line-height: 1.2;
}

/* Petits intitulés en majuscules du profil ("Mon compte", "Mon
   espace", "Contact") : ce sont des étiquettes, pas des titres →
   Poppins, comme le reste des libellés. */
.profile-card > h2 {
    font-family: var(--font-heading);
    font-weight: 600 !important;
}

/* Navigation du bas : Poppins uniquement, lisible en petit. */
.bottom-navigation,
.bottom-item,
.bottom-item span {
    font-family: var(--font-body);
}

/* Badges et étiquettes (Mode visiteur, Réservé à mes clientes,
   catégories) : Poppins. */
.visitor-mode-badge,
.visitor-locked-label,
.recipe-category-badge {
    font-family: var(--font-heading);
}

/* =========================================================
   CADENAS DES CONTENUS RÉSERVÉS (mode visiteur)
   -----------------------------------------------------------
   Cadenas noir centré sur l'image, avec un léger fondu. Il
   s'affiche automatiquement sur toute image qui porte le bandeau
   "Réservé à mes clientes" (recettes, tutos, ateliers, idées
   repas...). Pour changer son apparence, il suffit de modifier
   cette seule règle.
========================================================= */

:has(> .visitor-locked-label)::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 45%;
    z-index: 2;
    width: 22%;
    min-width: 26px;
    max-width: 44px;
    aspect-ratio: 24 / 30;
    transform: translate(-50%, -50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'%3E%3Cpath d='M6.5 13V8.5a5.5 5.5 0 0 1 11 0V13' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'/%3E%3Crect x='2' y='12' width='20' height='17' rx='4' fill='%23000'/%3E%3Ccircle cx='12' cy='19' r='2.3' fill='%23fff'/%3E%3Crect x='11' y='19.5' width='2' height='5.5' rx='1' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: .6;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, .7));
    pointer-events: none;
}

/* Le bouton "lecture" des vidéos verrouillées laisse la place au cadenas. */
:has(> .visitor-locked-label) > .tuto-play,
:has(> .visitor-locked-label) > .tuto-featured-play {
    display: none !important;
}

/* "Suggestion du jour" (petite étiquette au-dessus du plat du jour) :
   en Lora, comme les titres de section, à la demande de Nada. */
.meal-content .small-title {
    font-family: var(--font-display);
}

/* =========================================================
   BARRE DE NAVIGATION DU BAS : ICÔNES SANS FOND
   -----------------------------------------------------------
   Les images d'origine (images/icon-*.png) contiennent un faux
   damier blanc/gris à la place de la transparence. Elles sont
   remplacées ici par les mêmes icônes, détourées (fond vraiment
   transparent), pour qu'elles se fondent dans le décor.
   En mode visiteur, l'icône générique de l'onglet "Profil" est
   ramenée à la même taille que les autres, sans cercle de fond
   (l'avatar des clientes connectées ne change pas).
========================================================= */

.bottom-item-profile .bottom-icon:has(> img[src$="icon-profil.png"]) {
    width: 21px;
    height: 21px;
    background: transparent;
    border-radius: 0;
}

.bottom-item img[src$="icon-accueil.png"] {
    content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAEtElEQVR4AeycS8hNXxjGz//e/37tTyGXkJSUiYhQBmLCyGUgTBi4lVJShNxyKwOXCIkBJQbMKJciMlMGREyUEskld37P+Rz5+j5nXffa+zuWnue8+5y19/u+61lrr7322tv3bS3/a6pAFqipPLVaFigLZFDAUJx7UBbIoIChOPegLJBBAUNx7kFZIIMChuKq9KD/yHMnfAgfwUOwDywdVRBoKCochFPhe/gOToSH4WhYKsoWaDi13wxlJQ6bdWh7EFsqm4wtDWUKNIZab4XqQZhO0Y9f18E5sBS4CxQnzWG42Q/VS77DfgnKrxuFG+F8mBxKIHXQSQQ8Dv+EtlCeq9lZQv2ETQYFThVMFZtHsB3wN+gKjUs61XT8QNeDffdPJdCvJLgALoE+4nBYHcpXV7j1fNPpiSkWClhshDbvyzGL4T8wFD/iQJf/A9j+sFCkEEhXKp1aP0esiQb2Afg7C8fCwlCkQD3JWq08C6vxAxMdEl0xpkf3/NFhUQL1xf8mqPGiKHFwX8fvfK6COoWj1ye6QxIdArfBcVCnAqZw/EuERXAL/B5GQ2yBepDZPjgS/gBT4g+C6VQ7gY2GmALpsnuBzHR7kKrnEK4d1Cgj+OUc1AoBJgwxBPqGFDQ7PoZ1mR2ze2EYjOejUD0Z448YAk0j/BrYHVYFqpdugnVrMiEkKTkKOV5T/xU46A2rCPUkzcNm+yYXItBSgmop4n9sM5RdptWADSShqQDGDb4C6V5oGaE0KGIqD13655Kl8taYyaYdXAXSzFWrfJoda2nULko19lJjKm/N0f62TclFIDnVRExrx7phtI1Rpf2U9wwS2gWtLiq2AmktR/c8U3D8C+zK0BxtPBXYA42wFUgrgKPwphbAtARUH+N4ZCOQzl3NTltClc8qcYNt4420jUCvcXQLdoYH/PgGVh0vSLDRW2Rv8n0hNMJGIDnRgtcdbXykglxmW/OLl9iq4yoJnoJqzItYPSFR/mw2h61ACqB5xGnc3YW7oR7oaUXP2E3Zt2zcI4GZUEOFLvWqD1/NsBVInuRUl3g909Ik8RU/dgVxSLMO5XqbLQ0LGDu4CGTnscX2ChVIU/gWk6R9dbJA7fXo8C1UoA4OHX7Qu0DX2L8ja7XOfnMaO/AbBaECaY7kk4gut0c4UM+0bKn3hTgkLUIFepswXc29EoZrCxUqUJuXFv4MFSjlVUzzmORNUaZArqdMKQt0oQIlb9HUAUMFStmqrj0uipahAul+zDcR1zElNFevPEsJ6pVpSQeFCpSy27v2uCiShgqkxXzfRFzFTTnefapTqECfHLXqRqhAKVvVtcdFabNQgXxvVpW865jSLFf5K4ShQV0rWUglinQaKlDKbl9KY4QKpIeKPuOQKuv6uMh1/887lveENlSgx2RxHbriGQfo+RTGGufZ0zffMxzrBd+AjWD32dCLSVoi1UsBenZv4nOO0Xs6rklf4riV8Ak0xWiUP2XftfAk9EKoQAp6hQ8tm/6F1UvdJvZiv73QB9s5SP+X1RSjUa5XA/UKns8wQKha/uMmdRWafMToQU3cd/2iLJChDbNAWSCDAobi3IOyQAYFDMVfbw8yCNMozgI1lPiC/QAAAP//AB5EKQAAAAZJREFUAwBhuI+RxaZz9gAAAABJRU5ErkJggg==");
    border-radius: 0;
    object-fit: contain;
}

.bottom-item img[src$="icon-recettes.png"] {
    content: url("data:image/png;base64,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");
    border-radius: 0;
    object-fit: contain;
}

.bottom-item img[src$="icon-idees-repas.png"] {
    content: url("data:image/png;base64,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");
    border-radius: 0;
    object-fit: contain;
}

.bottom-item img[src$="icon-favoris.png"] {
    content: url("data:image/png;base64,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");
    border-radius: 0;
    object-fit: contain;
}

.bottom-item img[src$="icon-profil.png"] {
    content: url("data:image/png;base64,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");
    border-radius: 0;
    object-fit: contain;
}

/* =========================================================
   ZONES SYSTÈME (SAFE AREAS) — BARRE DE NAVIGATION DU BAS
   -----------------------------------------------------------
   Sur Android (application TWA et Chrome, navigation gestuelle
   ou à boutons) comme sur iPhone, l'écran peut s'étendre sous la
   zone système du bas. Le navigateur indique la hauteur exacte
   de cette zone via env(safe-area-inset-bottom) (nécessite
   viewport-fit=cover dans la balise <meta name="viewport"> des
   pages). Elle vaut 0 quand il n'y a rien à éviter : le design
   reste alors exactement le même qu'avant.

   - La barre garde son écart de 16px au-dessus du bas de l'écran,
     et monte automatiquement juste au-dessus de la zone système
     quand il y en a une (écart minimal de 8px au-dessus d'elle).
   - Le bas du contenu (body, page Recettes, Idées repas) et la
     bulle WhatsApp montent d'autant, pour que rien ne soit caché
     derrière la barre.
   - En haut, le contenu est décalé de la hauteur de la barre
     d'état uniquement si l'écran s'étend dessous (0 sinon).
========================================================= */

:root {
    --bottom-nav-gap: 16px;
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --bottom-nav-offset: max(var(--bottom-nav-gap), calc(var(--safe-area-bottom) + 8px));
    --bottom-nav-lift: calc(var(--bottom-nav-offset) - var(--bottom-nav-gap));
}

html body {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: calc(112px + var(--bottom-nav-lift));
}

@media (max-width: 600px) {
    html body {
        padding-bottom: calc(97px + var(--bottom-nav-lift));
    }
}

.bottom-navigation {
    bottom: var(--bottom-nav-offset);
    width: calc(100% - 30px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
}

body .search-page,
body .planner-page {
    padding-bottom: calc(110px + var(--bottom-nav-lift));
}

body .wa-chat-bubble {
    bottom: calc(92px + var(--bottom-nav-lift));
}