/* ========================================
 * PAGE-RECETTE-ACTIONS-BAR.CSS
 * Barre d'actions style Instagram + Tooltipster
 * ======================================== */

/* Container principal - Aucun background ni shadow */
.recette-actions-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px 4px 6px 4px;
    margin-top: -4px;
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Annuler le style du parent #recette-image-infos pour la barre d'actions */
#recette-image-infos {
    box-shadow: none !important;
    border-radius: 10px 10px 0 0 !important;
}

/* Groupes gauche et droite */
.recette-actions-left,
.recette-actions-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Alignement vertical spécifique pour les icônes de droite */
.recette-actions-right .recette-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

.recette-actions-right .recette-action-btn i {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.5rem;
    line-height: 1;
}

/* Bouton d'action */
.recette-action-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    padding: 8px 6px;
    cursor: pointer;
    color: var(--text-color, #262626);
    font-size: 1rem;
    transition: all 0.2s ease;
    text-decoration: none;
    overflow: visible; /* Important pour le tooltip */
}

.recette-action-btn:hover {
    /* On applique l'opacité uniquement aux éléments internes, pas au tooltip */
}

.recette-action-btn:hover > i,
.recette-action-btn:hover > .action-icon-svg,
.recette-action-btn:hover > .action-count,
.recette-action-btn:hover > .action-count-secondary {
    opacity: 0.7;
}

.recette-action-btn:active {
    transform: scale(0.95);
}

/* Icônes - taille uniforme */
.recette-action-btn i {
    font-size: 1.5rem;
    width: 1.5rem;
    text-align: center;
    transition: all 0.2s ease;
    cursor: pointer;
}

/* SVG personnalisé (nutrition) - même taille que les icônes FA */
.recette-action-btn .action-icon-svg {
    width: 1.8rem;
    height: 1.8rem;
    transition: all 0.2s ease;
    cursor: pointer;
}

/* Animation du cercle nutrition - remplissage de 0 à 75% */
.recette-action-btn .action-icon-svg .nutrition-circle {
    /* Circonférence = 2 * π * 160 = 1005.31 */
    stroke-dasharray: 1005.31;
    stroke-dashoffset: 1005.31; /* 0% visible par défaut */
    transform: rotate(-90deg);
    transform-origin: center;
    animation: fillNutritionCircleRecette 1000ms ease-out 300ms forwards;
}

@keyframes fillNutritionCircleRecette {
    from {
        stroke-dashoffset: 1005.31; /* 0% visible */
    }
    to {
        stroke-dashoffset: 251.33; /* 75% visible */
    }
}

/* Compteur */
.action-count {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color, #262626);
    text-align: left;
}

/* Compteur secondaire (nombre d'avis) */
.action-count-secondary {
    font-weight: 400;
    color: var(--text-color-secondary, #666);
    font-size: 0.85rem;
    text-align: left;
}

/* ======================================
 * TOOLTIPS SIMPLES POUR LES BOUTONS D'ACTION
 * Style identique aux tooltips des étapes
 * ====================================== */

.recette-action-btn .tooltip-text {
    position: absolute;
    bottom: calc(100% + 12px);
    left: calc(6px + 0.75rem); /* Padding gauche (6px) + centre de l'icône (0.75rem) */
    transform: translateX(-50%);
    background-color: #2a3334;
    color: #fff;
    padding: 10px 16px;
    border-radius: 8px;
    border: 2px solid var(--savoor-coral, #FF6B6B);
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
    visibility: hidden;
    z-index: 1000;
    pointer-events: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* Flèche du tooltip */
.recette-action-btn .tooltip-text::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: var(--savoor-coral, #FF6B6B);
}

/* Affichage au hover - géré par JavaScript */
.recette-action-btn .tooltip-text {
    visibility: hidden;
}

.recette-action-btn .tooltip-text.visible {
    visibility: visible;
}

/* Mode clair pour les tooltips simples */
body.light-mode .recette-action-btn .tooltip-text {
    background-color: #2c3e50;
}

/* ======================================
 * ÉTATS SPÉCIFIQUES
 * ====================================== */

/* Like actif */
.recette-action-like.liked i {
    color: #ed4956 !important;
}

/* Masquer l'icône du like pendant le chargement */
.recette-action-like.like-loading i {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.recette-action-like:not(.like-loading) i {
    opacity: 1;
}

/* Commentaire actif */
.recette-action-comment.commented i {
    color: #3b82f6;
}

/* Animation du like */
@keyframes likeAnimation {
    0% { transform: scale(1); }
    25% { transform: scale(1.3); }
    50% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

.recette-action-like.animating i {
    animation: likeAnimation 0.4s ease-in-out;
}

/* Garantir la couleur rouge pendant l'animation du like */
.recette-action-like.liked.animating i {
    color: #ed4956 !important;
}

/* Rating - étoile jaune uniquement si pleine */
.recette-action-rating i.fa-solid {
    color: #ffc107;
}

/* Étoile vide = même couleur que les autres icônes */
.recette-action-rating i.fa-light {
    color: inherit;
}

/* Nutrition - icône couleur par défaut */
.recette-action-nutrition i {
    color: inherit;
}

/* Allergènes - icône (neutre par défaut, coloré si conflit) */
.recette-action-allergenes i {
    color: inherit;
    transition: color 0.2s ease;
}

/* Allergènes - icône avec conflit détecté */
.recette-action-allergenes.has-conflict i {
    color: #FF6B6B;
}

/* ======================================
 * BOUTONS CART ET PLANNING - ÉTATS
 * ====================================== */

/* Animation de succès pour cart et planning */
.recette-action-cart.success i,
.recette-action-planning.success i {
    color: #10b981 !important;
}

.recette-action-cart.success,
.recette-action-planning.success {
    animation: actionSuccessPulse 0.5s ease;
}

@keyframes actionSuccessPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* Curseur par défaut après succès */
.recette-action-cart.success,
.recette-action-planning.success {
    cursor: default;
}

/* Désactiver l'effet hover après succès */
.recette-action-cart.success:hover > i,
.recette-action-planning.success:hover > i {
    opacity: 1;
}

/* ======================================
 * CONTENU CACHÉ DES TOOLTIPS
 * ====================================== */
.tooltip-content-hidden {
    display: none;
}

/* ======================================
 * TOOLTIPSTER CUSTOM THEME
 * Style harmonisé avec les tooltips hover (bordure corail + flèche corail)
 * ====================================== */
.tooltipster-sidetip.tooltipster-savoor .tooltipster-box {
    background: var(--card-bg, #2a3334);
    border: 2px solid var(--savoor-coral, #FF6B6B);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.tooltipster-sidetip.tooltipster-savoor .tooltipster-content {
    padding: 0;
    color: var(--text-color, #f0f0f0);
}

/* ======================================
 * FLÈCHE TOOLTIPSTER - STYLES COMPLETS
 * Flèche pleine corail (comme les tooltips hover)
 * ====================================== */

/* Réduire légèrement la flèche pour correspondre aux tooltips hover (8px vs 10px) */
.tooltipster-sidetip.tooltipster-savoor .tooltipster-arrow {
    transform: scale(0.8);
}

/* Ajuster l'origine du scale pour que la flèche reste collée au bord du tooltip */
.tooltipster-sidetip.tooltipster-savoor.tooltipster-top .tooltipster-arrow {
    transform-origin: center bottom;
}

.tooltipster-sidetip.tooltipster-savoor.tooltipster-bottom .tooltipster-arrow {
    transform-origin: center top;
}

/* Masquer la flèche sur les côtés (positionnement problématique) */
.tooltipster-sidetip.tooltipster-savoor.tooltipster-left .tooltipster-arrow,
.tooltipster-sidetip.tooltipster-savoor.tooltipster-right .tooltipster-arrow {
    display: none;
}

/* === POSITION TOP (flèche en bas du tooltip) === */
.tooltipster-sidetip.tooltipster-savoor.tooltipster-top .tooltipster-arrow-border,
.tooltipster-sidetip.tooltipster-savoor.tooltipster-top .tooltipster-arrow-background {
    border-top-color: var(--savoor-coral, #FF6B6B) !important;
}

/* === POSITION BOTTOM (flèche en haut du tooltip) === */
.tooltipster-sidetip.tooltipster-savoor.tooltipster-bottom .tooltipster-arrow-border,
.tooltipster-sidetip.tooltipster-savoor.tooltipster-bottom .tooltipster-arrow-background {
    border-bottom-color: var(--savoor-coral, #FF6B6B) !important;
}

/* === POSITION LEFT (flèche à droite du tooltip) === */
.tooltipster-sidetip.tooltipster-savoor.tooltipster-left .tooltipster-arrow-border,
.tooltipster-sidetip.tooltipster-savoor.tooltipster-left .tooltipster-arrow-background {
    border-left-color: var(--savoor-coral, #FF6B6B) !important;
}

/* === POSITION RIGHT (flèche à gauche du tooltip) === */
.tooltipster-sidetip.tooltipster-savoor.tooltipster-right .tooltipster-arrow-border,
.tooltipster-sidetip.tooltipster-savoor.tooltipster-right .tooltipster-arrow-background {
    border-right-color: var(--savoor-coral, #FF6B6B) !important;
}

/* ======================================
 * TOOLTIP NOTATION
 * ====================================== */
.tooltip-rating-container {
    padding: 20px 24px;
    text-align: center;
    min-width: 220px;
}

.tooltip-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--text-color, #f0f0f0);
}

.tooltip-stars {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
}

.tooltip-star {
    font-size: 2rem;
    color: #555;
    cursor: pointer;
    transition: all 0.15s ease;
}

.tooltip-star:hover,
.tooltip-star.hover {
    color: #ffc107;
    transform: scale(1.15);
}

.tooltip-star.selected {
    color: #ffc107;
}

/* Forcer l'icône creuse par défaut */
.tooltip-star.fa-light {
    font-weight: 300;
}

.tooltip-submit-btn {
    background: var(--primary-color, #ff6b6b);
    color: #fff;
    border: none;
    padding: 10px 28px;
    border-radius: 25px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    touch-action: manipulation; /* Empêche le zoom au double-tap sur mobile */
}

.tooltip-submit-btn:hover {
    background: var(--primary-hover, #ff5252);
    transform: scale(1.02);
}

.tooltip-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Tooltip hover pour cart et planning - se cache quand Tooltipster est ouvert */
.recette-action-btn .tooltip-hover-only {
    pointer-events: none;
}

.recette-action-btn.tooltipster-active .tooltip-hover-only {
    display: none !important;
}

/* Cacher TOUS les tooltips hover quand un Tooltipster est ouvert */
body:has(.tooltipster-base) .tooltip-text {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* ======================================
 * TOOLTIP LISTE DE COURSES
 * ====================================== */
.tooltip-cart-container {
    padding: 20px 24px;
    text-align: center;
    min-width: 240px;
}

.tooltip-cart-servings {
    margin-bottom: 20px;
}

.tooltip-cart-servings label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-color-secondary, #aaa);
    margin-bottom: 10px;
}

.tooltip-servings-control {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.tooltip-servings-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--primary-color, #ff6b6b);
    background: transparent;
    color: var(--primary-color, #ff6b6b);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    touch-action: manipulation; /* Empêche le zoom au double-tap sur mobile */
}

.tooltip-servings-btn:hover {
    background: var(--primary-color, #ff6b6b);
    color: #fff;
}

.tooltip-servings-control input[type="number"] {
    width: 60px;
    height: 40px;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
    border: 2px solid var(--border-color, #444);
    border-radius: 8px;
    background: var(--input-bg, #1a1a1a);
    color: var(--text-color, #f0f0f0);
    -moz-appearance: textfield;
    touch-action: manipulation; /* Empêche le zoom au double-tap sur mobile */
}

.tooltip-servings-control input[type="number"]::-webkit-outer-spin-button,
.tooltip-servings-control input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Select pour le nombre de personnes - sans flèche */
.tooltip-servings-control select {
    width: 60px;
    height: 40px;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
    border: 2px solid var(--border-color, #444);
    border-radius: 8px;
    background: var(--input-bg, #1a1a1a);
    color: var(--text-color, #f0f0f0);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none;
    padding: 0 12px;
}

/* ======================================
 * TOOLTIP PLANNING
 * ====================================== */
.tooltip-planning-container {
    padding: 16px 20px;
    min-width: 300px;
}

/* Responsive - réduire la largeur sur mobile */
@media screen and (max-width: 768px) {
    .tooltip-planning-container {
        min-width: 260px;
        padding: 14px 16px;
    }
}

/* ======================================
 * MODALE PLANNING PLEIN ÉCRAN (MOBILE)
 * ====================================== */
.planning-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.planning-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.planning-modal {
    position: relative;
    width: 100%;
    height: 100%;
    background: var(--card-bg, #2a3334);
    border: none;
    border-radius: 0;
    overflow-y: auto;
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.planning-modal-overlay.active .planning-modal {
    transform: translateY(0);
}

/* Bouton fermer */
.planning-modal-close {
    position: fixed;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: #fff;
    font-size: 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    z-index: 10001;
    touch-action: manipulation; /* Empêche le zoom au double-tap sur mobile */
}

.planning-modal-close:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Contenu de la modale - réutilise les styles du tooltip */
.planning-modal .tooltip-planning-container {
    min-width: unset;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 30px 20px 30px 20px;
}

/* Titre de la modale */
.planning-modal-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    text-align: center;
    margin: 0 0 30px 0;
}

/* Plus d'espace entre les sections dans la modale */
.planning-modal .tooltip-date-wrapper {
    margin-bottom: 40px;
}

.planning-modal .tooltip-planning-field {
    margin-bottom: 40px;
}

.planning-modal .tooltip-planning-servings {
    margin-bottom: 40px;
}

/* Bloquer le scroll quand la modale est ouverte */
body.planning-modal-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
}

/* Mode clair */
:root:not(.dark-mode) .planning-modal,
body:not(.dark-mode) .planning-modal {
    background: #2c3e50;
}

:root:not(.dark-mode) .planning-modal-close,
body:not(.dark-mode) .planning-modal-close {
    color: #fff;
}

/* Wrapper pour le calendrier Flatpickr inline */
.tooltip-date-wrapper {
    position: relative;
    margin-bottom: 16px;
}

/* Cacher l'input date original */
.tooltip-date-wrapper input {
    display: none;
}

/* Calendrier Flatpickr inline dans le tooltip */
.tooltip-date-wrapper .flatpickr-calendar {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 auto;
    box-shadow: none;
    border: none;
    background: transparent;
    width: 100%;
}

/* Forcer la taille du tooltip pour éviter le scroll */
.tooltipster-sidetip.tooltipster-savoor .tooltipster-box {
    max-height: none !important;
    overflow: visible !important;
}

.tooltipster-sidetip.tooltipster-savoor .tooltipster-content {
    max-height: none !important;
    overflow: visible !important;
}

.tooltip-planning-field {
    margin-bottom: 20px;
}

.tooltip-planning-field label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-color-secondary, #aaa);
    margin-bottom: 8px;
}

.tooltip-planning-field label i {
    margin-right: 6px;
}

.tooltip-planning-field select {
    width: 100%;
    padding: 10px 40px 10px 12px;
    border: 2px solid var(--border-color, #444);
    border-radius: 8px;
    background: var(--input-bg, #1a1a1a);
    color: var(--text-color, #f0f0f0);
    font-size: 0.9rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23aaa' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    touch-action: manipulation; /* Empêche le zoom au double-tap sur mobile */
}

.tooltip-planning-field select:focus {
    outline: none;
    border-color: var(--primary-color, #ff6b6b);
}

.tooltip-planning-servings {
    margin-bottom: 20px;
}

.tooltip-planning-servings label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-color-secondary, #aaa);
    margin-bottom: 10px;
}

.tooltip-planning-servings label i {
    margin-right: 6px;
}

.tooltip-planning-container .tooltip-submit-btn {
    width: 100%;
}

/* Mode clair pour cart et planning - inputs avec fond clair */
:root:not(.dark-mode) .tooltip-servings-control input[type="number"],
body:not(.dark-mode) .tooltip-servings-control input[type="number"],
:root:not(.dark-mode) .tooltip-servings-control select,
body:not(.dark-mode) .tooltip-servings-control select,
:root:not(.dark-mode) .tooltip-planning-field select,
body:not(.dark-mode) .tooltip-planning-field select {
    background-color: #f5f5f5;
    border-color: #ddd;
    color: #333;
}

/* Flèche uniquement pour le select Repas (planning), pas pour le nombre de personnes */
:root:not(.dark-mode) .tooltip-planning-field select,
body:not(.dark-mode) .tooltip-planning-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}


/* ======================================
 * TOOLTIP PARTAGE
 * ====================================== */
.tooltip-share-container {
    padding: 16px 20px;
    min-width: 200px;
}

.tooltip-share-container .tooltip-title {
    margin-bottom: 12px;
    font-size: 0.95rem;
}

.tooltip-share-options {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tooltip-share-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--text-color, #f0f0f0);
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.15s ease;
    width: 100%;
    text-align: left;
}

.tooltip-share-option:hover {
    background: rgba(255, 255, 255, 0.1);
}

.tooltip-share-option i {
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

/* Couleurs des icônes de partage */
.tooltip-share-option[data-action="copy"] i { color: #aaa; }
.tooltip-share-option[data-action="email"] i { color: #aaa; }
.tooltip-share-option[data-action="facebook"] i { color: #1877f2; }
.tooltip-share-option[data-action="x"] i { color: #000; }
.tooltip-share-option[data-action="pinterest"] i { color: #e60023; }
.tooltip-share-option[data-action="whatsapp"] i { color: #25d366; }
.tooltip-share-option[data-action="messenger"] i { color: #0084ff; }

/* Icône X en mode sombre = blanc */
.dark-mode .tooltip-share-option[data-action="x"] i { color: #fff; }

/* ======================================
 * MODE CLAIR - Tooltip avec fond sombre, textes clairs
 * ====================================== */
:root:not(.dark-mode) .tooltipster-sidetip.tooltipster-savoor .tooltipster-box,
body:not(.dark-mode) .tooltipster-sidetip.tooltipster-savoor .tooltipster-box {
    background: #2c3e50;
    border: 2px solid var(--savoor-coral, #FF6B6B);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* Textes clairs sur fond sombre en mode clair */
:root:not(.dark-mode) .tooltip-title,
body:not(.dark-mode) .tooltip-title {
    color: #fff;
}

:root:not(.dark-mode) .tooltip-cart-servings label,
body:not(.dark-mode) .tooltip-cart-servings label,
:root:not(.dark-mode) .tooltip-planning-field label,
body:not(.dark-mode) .tooltip-planning-field label,
:root:not(.dark-mode) .tooltip-planning-servings label,
body:not(.dark-mode) .tooltip-planning-servings label {
    color: #aaa;
}

:root:not(.dark-mode) .tooltip-share-option,
body:not(.dark-mode) .tooltip-share-option {
    color: #f0f0f0;
}

:root:not(.dark-mode) .tooltip-share-option:hover,
body:not(.dark-mode) .tooltip-share-option:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* ======================================
 * MODE SOMBRE
 * ====================================== */
.dark-mode .recette-actions-bar {
    background: transparent;
}

.dark-mode .recette-action-btn {
    color: var(--text-color, #f5f5f5);
}

.dark-mode .action-count {
    color: var(--text-color, #f5f5f5);
}

.dark-mode .recette-action-like.liked i {
    color: #ed4956;
}

.dark-mode .recette-action-comment.commented i {
    color: #3b82f6;
}

.dark-mode .recette-action-rating i.fa-solid {
    color: #ffc107;
}

.dark-mode .recette-action-rating i.fa-light {
    color: var(--text-color, #f5f5f5);
}

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

@media screen and (max-width: 768px) {
    .recette-actions-bar {
        padding: 10px 2px;
    }
    
    .recette-actions-left,
    .recette-actions-right {
        gap: 16px;
    }
    
    .recette-action-btn i {
        font-size: 1.4rem;
    }
    
    .recette-action-btn .action-icon-svg {
        width: 1.7rem;
        height: 1.7rem;
    }
    
    .action-count {
        font-size: 0.9rem;
    }
    
    .tooltip-rating-container {
        padding: 16px 20px;
    }
    
    .tooltip-star {
        font-size: 1.75rem;
    }
    
    /* Masquer les tooltips simples sur tablette/mobile */
    .recette-action-btn .tooltip-text {
        display: none;
    }
}

@media screen and (max-width: 480px) {
    .recette-actions-bar {
        padding: 10px 0;
    }
    
    .recette-actions-left,
    .recette-actions-right {
        gap: 10px;
    }
    
    .recette-action-btn {
        gap: 5px;
        padding: 6px 2px;
    }
    
    .recette-action-btn i {
        font-size: 1.3rem;
    }
    
    .recette-action-btn .action-icon-svg {
        width: 1.6rem;
        height: 1.6rem;
    }
    
    .action-count {
        font-size: 0.85rem;
    }
    
    .tooltip-star {
        font-size: 1.6rem;
        gap: 6px;
    }
}

@media screen and (max-width: 320px) {
    .recette-actions-left,
    .recette-actions-right {
        gap: 8px;
    }
    
    .recette-action-btn i {
        font-size: 1.2rem;
    }
    
    .recette-action-btn .action-icon-svg {
        width: 1.5rem;
        height: 1.5rem;
    }
    
    .action-count {
        font-size: 0.8rem;
    }
}