/* =======================================================
   SINGLE RECOMENDACIONES - STRUCTURE DESKTOP (CORRIGÉ)
   ======================================================= */

/* 1. LA CARTE ET LE FOND (Inchangé) */
body.pf-reco-minimal-body {
    margin: 0; padding: 0;
    overflow: hidden !important;
    background-color: var(--bg-card);
    height: 100vh;
}

.reco-fullscreen-bg {
    width: 100vw; height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 20px; box-sizing: border-box; overflow: hidden;
}

.reco-app-card {
    background-color: var(--color-creme);
    width: 90%;
    max-width: 850px; 
    height: 550px;
    border-radius: 24px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.3);
    display: flex !important;
    flex-direction: row !important;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

/* 2. COLONNE GAUCHE ET BOUTON RETOUR */
.reco-back-floating {
    position: absolute; top: 30px; left: 30px;
    display: flex; align-items: center; gap: 8px;
    color: var(--color-accent-yellow) !important;
    font-family: var(--font-main); font-weight: 700;
    text-transform: uppercase; font-size: 13px;
    text-decoration: none; z-index: 9999;
}

.reco-app-left {
    flex: 0 0 320px !important;
    width: 320px !important;
    background-color: rgba(0,0,0,0.02);
    padding: 30px;
    display: flex; flex-direction: column;
    border-right: 1px solid rgba(0,0,0,0.05);
    box-sizing: border-box;
}

/* 2. LE TEXTE (Prix, Adresse, Tel) */
/* On cible le span du prix ET le texte des liens */
.info-row > span, 
.info-row .link-text {
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-terracotta);
    line-height: 1.4;
    padding-top: 6px; /* Aligne le texte avec le milieu de la bulle */
    white-space: normal; 
    word-break: break-word;
    display: inline-block;
}

/* =======================================================
   3. ALIGNEMENT DES INFOS (PRIX, ADRESSE, TEL) - ACTUALISÉ
   ======================================================= */

.reco-app-quick-info {
    margin-top: 20px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 18px; /* Espace vertical entre les lignes */
}

.info-row {
    display: flex;
    align-items: center !important; /* 🌟 On centre verticalement */
    margin-left: 15px;      
    width: calc(100% - 15px);
    margin-bottom: 5px;
}

/* 🌟 LOGOS (BULLES ORANGES) : Ciblage universel (Prix + Liens) */
.info-row svg.main-icon,
.info-row > svg:first-child,
.info-row .reco-full-link svg:first-child {
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
    padding: 8px !important;
    background-color: var(--color-terracotta) !important;
    color: var(--color-creme) !important;
    border-radius: 50% !important;
    margin-right: 15px !important; /* Espace fixe après la bulle */
    box-sizing: border-box;
    display: block;
}

/* 🌟 LE TEXTE : On cible le Prix (span) ET les liens (link-text) */
.info-row > span:not(.reco-app-badge), 
.link-text {
    font-family: var(--font-main);
    font-size: 16px !important;
    font-weight: 700;
    color: var(--color-terracotta);
    line-height: 1.3;
    padding-top: 0 !important; /* 🌟 ZÉRO padding, Flexbox gère le centre */
    white-space: normal; 
    word-break: break-word;
    display: inline-block;
}

.reco-full-link {
    display: flex;
    align-items: center !important;
    text-decoration: none;
    color: inherit;
    flex: 1;
    min-width: 0;
    /* 🌟 Reset button */
    appearance: none !important;
    -webkit-appearance: none !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    font: inherit !important;
}

/* 🌟 ICÔNES D'ACTION (COPIER / OUVRIR) */
.action-icon {
    width: 14px !important;
    height: 14px !important;
    margin-left: 8px !important; 
    margin-top: 0 !important; /* 🌟 ZÉRO marge en haut */
    color: var(--color-terracotta);
    opacity: 0.5;
    flex-shrink: 0;
    background: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    display: inline-block;
}

/* --- EFFETS AU SURVOL --- */
@media (hover: hover) {
    /* Le texte et la bulle passent au bleu */
    .reco-full-link:hover .link-text {
        color: var(--color-primary);
    }
    .reco-full-link:hover svg.main-icon,
    .reco-full-link:hover svg:first-child {
        background-color: var(--color-primary) !important;
    }
    /* La petite icône s'illumine et glisse */
    .reco-full-link:hover .action-icon {
        opacity: 1;
        color: var(--color-primary);
        transform: translateX(3px);
    }
}

/* --- BOUTON VOLVER (RETOUR) --- */

.reco-back-floating {
    /* 🌟 On le fixe par rapport à la fenêtre pour qu'il ne bouge jamais */
    position: absolute; 
    top: 40px;
    left: 40px;
    
    display: flex;
    align-items: center;
    gap: 10px;
    
    /* 🌟 Style & Visibilité */
    color: var(--color-accent-yellow) !important;
    font-family: var(--font-main);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 15px;
    letter-spacing: 1.5px;
    text-decoration: none;
    
    /* 🌟 Priorité maximale */
    z-index: 9999 !important; 
    transition: all 0.3s ease;
}

/* Alignement parfait de la flèche */
.reco-back-floating svg {
    width: 20px;
    height: 20px;
    stroke-width: 3px; /* On épaissit un peu le trait */
    stroke: var(--color-accent-yellow);
    transition: transform 0.3s ease;
}

/* Petit effet sympa au survol */
@media (hover: hover) {
    .reco-back-floating:hover {
        opacity: 1;
        transform: translateX(-5px);
    }
    .reco-back-floating:hover svg {
        transform: scale(1.1);
    }
}

/* --- FIX IMAGE (CARRÉ PARFAIT SANS COUPURE) --- */
.reco-app-img {
    width: 100%;
    /* On fixe la hauteur : 320px (colonne) - 60px (padding) = 260px */
    height: 260px !important; 
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    margin-bottom: 25px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    flex-shrink: 0; /* Empêche absolument l'image de se tasser */
    background-color: #eee; /* Fond d'attente si l'image charge mal */
}

/* --- FIX CARROUSEL & GLISSEMENT --- */
.reco-slider {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    overflow-x: auto !important; 
    scroll-snap-type: x mandatory !important; 
    scrollbar-width: none !important; 
    -webkit-overflow-scrolling: touch !important;
}

.reco-slider::-webkit-scrollbar { 
    display: none !important; 
}

.reco-slide {
    flex: 0 0 100% !important;
    height: 100% !important;
    width: 100% !important;
    scroll-snap-align: center !important; 
    position: relative !important;
}

.reco-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; 
    object-position: center center !important; 
    display: block !important;
}

/* --- LES FLÈCHES DU CARROUSEL --- */
.reco-slider-btn {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 999 !important; /* Sort de derrière l'image */
    background: var(--color-primary) !important;
    color: white !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important; /* 🌟 C'est ÇA qui fait le rond ! */
    border: none !important; /* 🌟 C'est ÇA qui enlève toute bordure */
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
    transition: all 0.3s ease !important;
}

.reco-slider-btn.prev { left: 15px !important; }
.reco-slider-btn.next { right: 15px !important; }

@media (hover: hover) {
    /* Le fond du bouton passe en jaune et il grossit */
    .reco-slider-btn:hover {
        background: var(--color-accent-yellow) !important;
        transform: translateY(-50%) scale(1.1) !important;
    }
    
    /* 🌟 La flèche (SVG) passe en bleu (primary) au survol */
    .reco-slider-btn:hover svg {
        stroke: var(--color-primary) !important;
    }
}

.reco-slider-btn svg { 
    width: 22px !important; 
    height: 22px !important;
    stroke: white !important; 
    fill: none !important;
}

/* Les petits points (dots) en bas de l'image */
.reco-slider-dots {
    position: absolute !important;
    bottom: 10px !important;
    left: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    gap: 6px !important;
    z-index: 10 !important;
}

.reco-slider-dots .dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.5) !important;
    transition: 0.3s !important;
}

.reco-slider-dots .dot.active {
    background: white !important;
    transform: scale(1.3) !important;
}

/* --- LE BADGE (HOSPEDAJE / CATEGORIE) --- */

.reco-app-badge {
    position: absolute;
    top: 15px; /* Décalage du haut */
    left: 15px; /* Décalage de la gauche */
    
    background-color: var(--color-jungle) !important; /* Ton vert pour Hospedaje */
    color: var(--color-creme) !important;
    
    padding: 6px 12px;
    border-radius: 6px;
    
    font-family: var(--font-main);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    
    /* 🌟 CRUCIAL : Doit être au-dessus du slider */
    z-index: 50 !important; 
    
    pointer-events: none; /* Laisse passer les clics vers les flèches du slider si besoin */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* =======================================================
   COLONNE DROITE (Contenu & Scroll)
   ======================================================= */

.reco-app-right {
    flex: 1; /* 🌟 Prend tout l'espace à côté des 300px de gauche */
    display: flex;
    flex-direction: column;
    padding: 40px;
    height: 100%;
    box-sizing: border-box;
    position: relative; /* Prépare le terrain pour la modale coms */
    overflow: hidden;
    background-color: var(--color-creme);
}

/* Le Titre */
.reco-app-title {
    font-family: var(--font-main);
    font-size: 36px;
    font-weight: 800;
    color: var(--color-primary);
    margin: 0 0 20px 0;
    text-transform: uppercase;
    line-height: 1.1;
    flex-shrink: 0; /* Bloque le titre en haut */
}

/* 🌟 ZONE DE SCROLL INTERNE 🌟 */
.reco-app-scroll-area {
    flex: 1;
    overflow-y: auto;
    padding-right: 15px;
    margin-bottom: 20px; /* Espace avant la barre d'action */
}

/* Petite Scrollbar élégante */
.reco-app-scroll-area::-webkit-scrollbar { width: 6px; }
.reco-app-scroll-area::-webkit-scrollbar-thumb { 
    background-color: rgba(0,0,0,0.1); 
    border-radius: 10px; 
}

/* La description (le texte de l'article) */
.reco-app-desc p {
    font-family: var(--font-main);
    font-size: 15px;
    line-height: 1.7;
    color: #555;
    margin-top: 0;
    margin-bottom: 20px;
}

/* --- LES "PROS" (LO QUE ME GUSTÓ) --- */
.reco-app-pros h4 {
    margin: 25px 0 15px 0;
    font-family: var(--font-main);
    font-size: 13px;
    text-transform: uppercase;
    color: var(--color-terracotta);
    letter-spacing: 1px;
}

.pros-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 25px;
}

.pros-tags span {
    background: #fff;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}

.pros-tags svg { 
    width: 14px; height: 14px; 
    color: var(--color-jungle); 
    stroke-width: 3;
}

/* --- LE BLOC DE DÉTAILS PRATIQUES --- */
.reco-app-details {
    display: flex;
    flex-direction: column;
    gap: 15px;
    background: #fff;
    padding: 25px;
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.02);
    border: 1px solid rgba(0,0,0,0.03);
}

.detail-box {
    font-size: 14px;
    line-height: 1.5;
    color: #444;
}

.detail-box strong {
    color: var(--color-primary);
    margin-right: 5px;
}

/* --- 🌟 BARRE D'ACTION (BAS DE CARTE) --- */

.reco-action-bottom {
    margin-top: auto; /* Sécurité pour rester en bas */
    padding-top: 20px;
    border-top: 1px solid rgba(0,0,0,0.05);
    display: flex;
    justify-content: space-between; /* Social à gauche, Bouton à droite */
    align-items: center;
    flex-shrink: 0; /* Empêche la barre de se ratatiner */
}

/* Conteneur des boutons Like, Com, Share */
.reco-social-actions {
    display: flex;
    gap: 20px;
}

/* Style des boutons sociaux */
.reco-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: var(--color-primary) !important;
    font-family: var(--font-main);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    transition: all 0.3s ease;
    padding: 0;
}

/* On s'assure que ces icônes n'ont PAS de fond orange (contrairement à la gauche) */
.reco-action-btn svg {
    width: 22px;
    height: 22px;
    stroke: var(--color-primary) !important;
    background: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    transition: all 0.3s ease;
}

/* Effets Hover Social */
@media (hover: hover) {
    .reco-action-btn:hover {
        color: var(--color-terracotta) !important;
        transform: translateY(-2px);
    }
    .reco-action-btn:hover svg {
        stroke: var(--color-terracotta) !important;
    }
}

/* États Actifs (si déjà liké ou commenté) */
.reco-action-btn.active {
    color: var(--color-terracotta) !important;
}
.reco-action-btn.active-comment {
    color: var(--color-accent-yellow-hover) !important;
}
.reco-action-btn.active svg { 
    fill: var(--color-terracotta) !important;
    stroke: var(--color-terracotta) !important;}
.reco-action-btn.active-comment svg {
    fill: var(--color-accent-yellow-hover) !important;
    stroke: var(--color-accent-yellow-hover) !important;
}

/* --- 🚀 LE BOUTON PRINCIPAL (VISITAR / VER SITIO) --- */

.reco-app-btn {
    display: inline-block;
    background-color: var(--color-primary);
    color: var(--color-accent-yellow) !important;
    padding: 12px 25px;
    border-radius: 50px;
    font-family: var(--font-main);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 15px rgba(var(--color-primary-rgb), 0.2);
}

@media (hover: hover) {
    .reco-app-btn:hover {
        transform: scale(1.05);
        filter: brightness(1.1);
        box-shadow: 0 6px 20px rgba(var(--color-primary-rgb), 0.3);
    }
}

/* ==========================================================================
   1. COMMENTAIRES : MODE RECOMMANDATION (PANNEAU APP STRICT)
   ========================================================================== */

/* 1. STRUCTURE DU PANNEAU */
.pf-reco-minimal-body .reco-comments-modal {
    position: absolute; 
    bottom: -100%;
    left: 0;
    width: 100%;
    height: auto !important; 
    max-height: calc(100% - 90px) !important; 
    background: var(--color-creme-light) !important;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transition: bottom 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 35px 35px 0 0;
    box-shadow: 0 -20px 60px rgba(0,0,0,0.15);
    overflow: hidden;
}
.pf-reco-minimal-body .reco-comments-modal.is-active { bottom: 0; }

.pf-reco-minimal-body .reco-comments-header {
    padding: 25px 30px 15px;
    display: flex; justify-content: space-between; align-items: center;
    background: var(--color-creme-light) !important;
    flex-shrink: 0; z-index: 9999 !important; 
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.pf-reco-minimal-body .reco-comments-header h3 {
    color: var(--color-primary) !important;
    font-family: var(--font-main) !important; font-weight: 900 !important;
    text-transform: uppercase; margin: 0 !important; font-size: 17px !important;
}

.pf-reco-minimal-body .reco-close-comments {
    background: var(--color-primary) !important; color: #ffffff !important;
    border: none !important; width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; cursor: pointer !important;
    transition: all 0.3s ease !important;
}
@media (hover: hover) {
    .pf-reco-minimal-body .reco-close-comments:hover { 
    background: var(--color-terracotta) !important; transform: rotate(90deg);
    }
}

/* 2. ZONE DE SCROLL & TITRE */
.pf-reco-minimal-body .reco-comments-body {
    flex: 1 1 auto; overflow-y: auto; padding: 20px 25px 30px !important;
}

.pf-reco-minimal-body .reco-comments-body #comments { margin-top: 0 !important; padding-top: 0 !important; }
.pf-reco-minimal-body .reco-comments-body .comments-title {
    color: var(--color-primary) !important; font-size: 11px !important; font-weight: 700 !important;
    text-transform: uppercase; margin: 0 0 20px 0 !important; opacity: 0.6;
}

/* Suppression du vide fantôme si liste vide */
.pf-reco-minimal-body .comment-list:empty { display: none !important; margin: 0 !important; padding: 0 !important; }

/* 3. CARTES DES COMMENTAIRES (DATE & ELIMINAR) */
.pf-reco-minimal-body .comment-body {
    background: var(--color-primary) !important; 
    border-radius: 22px !important;
    padding: 30px 25px 25px !important; /* On augmente le padding haut pour le bouton Eliminar */
    margin-bottom: 15px !important; 
    color: var(--color-creme) !important;
    position: relative !important; /* Obligatoire pour le bouton Eliminar */
}

.pf-reco-minimal-body .comment-meta { 
    display: flex !important; 
    flex-direction: column !important; /* 🌟 Date SOUS le nom */
    align-items: flex-start !important; 
    gap: 4px !important;
    margin-bottom: 12px !important; 
}

/* 🌟 BOUTON ELIMINAR (DÉPLACÉ EN HAUT À DROITE) */
.pf-reco-minimal-body a.reco-delete-comment {
    position: absolute !important;
    top: 20px !important;     /* Aligné avec le haut du nom */
    right: 25px !important;   /* 🎯 Angle supérieur droit */
    left: auto !important;    /* 🛠️ Annule le placement à gauche précédent */
    
    font-size: 9px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    color: var(--color-terracotta) !important; 
    background: transparent !important;
    border: none !important;
    opacity: 1;
    transition: all 0.3s ease !important;
    z-index: 5;               /* Pour être sûr qu'il reste au-dessus */
}

@media (hover: hover) {
    .pf-reco-minimal-body .reco-delete-comment:hover   {
    opacity: 1; 
    transform: translateY(-2px) !important; 
    }
}

.pf-reco-minimal-body .says, .pf-reco-minimal-body .avatar, .pf-reco-minimal-body .comment-notes, .pf-reco-minimal-body .logged-in-as { display: none !important; }

/* Nom (Jaune) et Date (Terracotta) */
.pf-reco-minimal-body b.fn { color: var(--color-accent-yellow) !important; font-size: 16px !important; font-weight: 800 !important; }

.pf-reco-minimal-body .comment-metadata { visibility: hidden !important; height: 14px !important; display: inline-block !important; opacity: 1 !important; }
/* 🌟 DATE NON CLIQUABLE */
.pf-reco-minimal-body .comment-metadata a, 
.pf-reco-minimal-body .comment-metadata time {
    visibility: visible !important;
    color: var(--color-terracotta) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    pointer-events: none !important; /* 👈 Désactive le clic */
    cursor: default !important;
}

.pf-reco-minimal-body .comment-content p { color: var(--color-creme) !important; font-size: 16px !important; line-height: 1.6 !important; }

/* 4. BOUTONS ACTIONS (Contestar / Eliminar) */
.pf-reco-minimal-body .reply { display: flex !important; justify-content: flex-end !important; align-items: center !important; gap: 15px !important; margin-top: 20px !important; width: 100% !important; }

.pf-reco-minimal-body .comment-reply-link {
    display: inline-block !important; padding: 7px 20px !important; font-size: 10px !important; border-radius: 50px !important;
    border: 2px solid var(--color-accent-yellow) !important; color: var(--color-accent-yellow) !important; background: transparent !important;
    font-weight: 800 !important; text-transform: uppercase !important; text-decoration: none !important; line-height: 1.2 !important;
}
@media (hover: hover) {
    .pf-reco-minimal-body .comment-reply-link:hover {  background: var(--color-accent-yellow) !important; color: var(--color-primary) !important; }
}

/* =======================================================
   5. FORMULAIRE DE RÉPONSE (VERSION COMPACTE & ÉLÉGANTE)
   ======================================================= */

.pf-reco-minimal-body #respond {
    position: relative !important;
    background: var(--color-primary) !important;
    /* Padding réduit pour un aspect moins massif */
    padding: 45px 25px 30px !important; 
    /* Largeur réduite pour plus de finesse */
    max-width: 440px; 
    margin: 20px auto !important; 
    border-radius: 24px !important;
    text-align: center !important;
}

/* 🌟 TITRE : MAJUSCULES, TAILLE AJUSTÉE ET CENTRÉ */
.pf-reco-minimal-body #reply-title span {
    color: var(--color-creme) !important;
    font-size: 20px !important; /* Réduit de 26px à 20px */
    font-weight: 900 !important;
    text-transform: uppercase !important;
    text-align: center !important;
    margin: 0 auto 20px auto !important; /* Marge basse réduite */
    padding: 0 !important;
    width: 100% !important;
    display: block !important;
    line-height: 1.2;
}

/* Le nom dans "Contestar a XXX" */
.pf-reco-minimal-body #reply-title a:first-of-type {
    color: var(--color-accent-yellow) !important;
    text-decoration: none !important;
    border: none !important;
    pointer-events: none !important;
}

/* 🌟 BOUTON CANCELAR (TERRACOTTA HAUT DROITE) */
.pf-reco-minimal-body a#cancel-comment-reply-link {
    position: absolute !important;
    top: 15px !important; /* Ajusté pour le nouveau padding */
    right: 15px !important;
    color: var(--color-terracotta) !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    pointer-events: auto !important;
    z-index: 9999 !important;
    display: inline-block;
}

/* =======================================================
   6. FORMULAIRE : INPUTS & BOUTON (RÉTABLISSEMENT)
   ======================================================= */

/* --- 🌟 STYLE DES CASES (NOM, EMAIL, MESSAGE) --- */
.pf-reco-minimal-body .comment-form input:not(.submit), 
.pf-reco-minimal-body .comment-form textarea {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: var(--color-creme) !important;
    border-radius: 10px !important;
    padding: 12px 15px !important;
    font-size: 15px !important;
    font-family: var(--font-main) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 10px !important;
    transition: all 0.3s ease;
    
    /* Anti-bleu système */
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
}

/* État au clic sur les cases */
.pf-reco-minimal-body .comment-form input:focus, 
.pf-reco-minimal-body .comment-form textarea:focus {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: var(--color-accent-yellow) !important;
    box-shadow: none !important; 
    outline: none !important;
}

/* Placeholder (le texte indicatif) */
.pf-reco-minimal-body .comment-form input::placeholder,
.pf-reco-minimal-body .comment-form textarea::placeholder {
    color: var(--color-creme) !important;
    opacity: 0.7 !important;
}

/* =======================================================
   FIX FINAL : BOUTON PUBLICAR (ZÉRO BLEU & PROPRE)
   ======================================================= */

/* On utilise un sélecteur très précis pour écraser le thème */
.pf-reco-minimal-body #respond input[type="submit"].submit {
    /* 1. RESET RADICAL ANTI-BLEU */
    -webkit-tap-highlight-color: transparent !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    outline: none !important;
    box-shadow: none !important;
    background-image: none !important; /* Tue les dégradés bleus du thème */
    
    /* 2. STYLE & PROPORTIONS */
    display: inline-block !important;
    min-width: 180px !important;
    padding: 12px 25px !important;
    font-size: 11px !important;
    font-family: var(--font-main) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px;
    border-radius: 50px !important;
    cursor: pointer !important;
    margin-top: 5px !important;
    
    /* 3. COULEURS PAR DÉFAUT (TRANSPARENT) */
    background-color: transparent !important; 
    border: 2px solid var(--color-accent-yellow) !important;
    color: var(--color-accent-yellow) !important;
    transition: all 0.2s ease-in-out !important;
}

/* 4. ÉTATS : SURVOL, FOCUS ET CLIC (TOUS EN JAUNE, PAS DE BLEU) */
@media (hover: hover) {
    .pf-reco-minimal-body #respond input[type="submit"].submit:hover,
    .pf-reco-minimal-body #respond input[type="submit"].submit:focus,
    .pf-reco-minimal-body #respond input[type="submit"].submit:active {
        /* On force le fond jaune et le texte bleu foncé */
        background-color: var(--color-accent-yellow) !important;
        background-image: none !important; 
        color: var(--color-primary) !important; 
        
        /* On blinde contre le bleu */
        border-color: var(--color-accent-yellow) !important;
        outline: none !important;
        box-shadow: none !important;
    }
}

/* Effet de pression quand on clique */
.pf-reco-minimal-body #respond input[type="submit"].submit:active {
    transform: scale(0.96) !important;
}

/* État désactivé (quand on vient de cliquer) */
.pf-reco-minimal-body #respond input[type="submit"].submit:disabled {
    opacity: 0.5 !important;
    background-color: transparent !important;
    color: var(--color-accent-yellow) !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Placeholder */
.pf-reco-minimal-body .comment-form input::placeholder,
.pf-reco-minimal-body .comment-form textarea::placeholder {
    color: var(--color-creme) !important;
    opacity: 0.7 !important;
}

/* 🌟 NETTOYAGE FINAL */
.pf-reco-minimal-body .comment-notes, 
.pf-reco-minimal-body .logged-in-as, 
.pf-reco-minimal-body .comment-form-cookies-consent {
    display: none !important;
}

/* =======================================================
   7. STYLE DU FORMULAIRE "IMBRIQUÉ" (MODE CONTESTAR)
   ======================================================= */

/* Quand le rectangle bleu descend à l'intérieur d'un commentaire */
.pf-reco-minimal-body .comment-body #respond {
    background: rgba(0, 0, 0, 0.15) !important; /* Plus sombre pour l'effet encastré */
    padding: 25px 20px !important;
    margin-top: 20px !important;
    border-radius: 20px !important;
    max-width: 100% !important; /* Prend toute la largeur du com */
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.2) !important; /* Ombre intérieure */
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* On réduit le titre quand c'est une réponse imbriquée */
.pf-reco-minimal-body .comment-body #respond #reply-title {
    font-size: 15px !important;
    text-transform: uppercase !important;
    margin-bottom: 20px !important;
    text-align: center !important;
    padding-right: 50px !important; /* Place pour le bouton Cancelar */
}

/* On réduit un peu les cases en mode réponse */
.pf-reco-minimal-body .comment-body #respond .comment-form input:not(.submit),
.pf-reco-minimal-body .comment-body #respond .comment-form textarea {
    padding: 12px 15px !important;
    font-size: 16px !important;
    background: rgba(255, 255, 255, 0.04) !important;
}

/* --- NETTOYAGE & BOUTONS --- */

/* Cacher l'inutile */
.pf-reco-minimal-body .avatar, 
.pf-reco-minimal-body .comment-notes, 
.pf-reco-minimal-body .logged-in-as,
.pf-reco-minimal-body .comment-form-cookies-consent { 
    display: none !important; 
}

/* =======================================================
   8. STYLE DES RÉPONSES (FILS DE DISCUSSION)
   ======================================================= */

/* Le trait vertical à gauche */
.pf-reco-minimal-body .children {
    list-style: none !important;
    margin: 0 0 0 15px !important; 
    padding: 0 0 0 20px !important; 
    border-left: 2px solid rgba(255, 255, 255, 0.1) !important; 
}

/* Texte "comentó" et "contestó" */
.pf-reco-minimal-body .comment-list > li > .comment-body .fn::after {
    content: " comentó :" !important;
}
.pf-reco-minimal-body .children .fn::after {
    content: " contestó :" !important;
}
.pf-reco-minimal-body .fn::after {
    color: var(--color-creme) !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    opacity: 0.6 !important;
    text-transform: none !important;
    margin-left: 6px !important;
}

/* Ajuste la bulle de réponse */
.pf-reco-minimal-body .children .comment-body { 
    padding: 18px 20px !important; 
    border-radius: 20px !important;
    margin-top: 15px !important; 
}

/* =======================================================
   🛡️ BLINDAGE CONTRE LE CSS NATIF DE WORDPRESS
   ======================================================= */

/* 1. Tuer le bleu des liens DANS les textes de commentaires (Mode Reco) */
.pf-reco-minimal-body .comment-content p a {
    color: var(--color-creme) !important;
    text-decoration: underline !important;
    font-weight: 700 !important;
}

/* 2. Forcer la couleur Jaune sur le bouton CONTESTAR (Mode Reco) */
.pf-reco-minimal-body #comments a.comment-reply-link,
.pf-reco-minimal-body #respond a.comment-reply-link,
.pf-reco-minimal-body a.comment-reply-link {
    color: var(--color-accent-yellow) !important;
    border-color: var(--color-accent-yellow) !important;
}

/* 3. Forcer la couleur Bleue sur le bouton CONTESTAR (Mode Normal) */
body:not(.pf-reco-minimal-body) #comments a.comment-reply-link,
body:not(.pf-reco-minimal-body) #respond a.comment-reply-link,
body:not(.pf-reco-minimal-body) a.comment-reply-link {
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/* =======================================================
   SINGLE RECOMMANDATIONS RESPONSIVE MOBILE PREMIUM (< 768px)
   ======================================================= */
@media (max-width: 768px) {
    /* 1. LIBÉRATION DU SCROLL & FOND */
    body.pf-reco-minimal-body {
        overflow-y: auto !important;
        background-color: var(--color-creme) !important; 
        height: auto !important;
    }

    /* CASSEURS DE PRISON : On annule les contraintes Desktop pour empiler verticalement */
    .reco-fullscreen-bg,
    .reco-app-card,
    .reco-app-right,
    .reco-app-left {
        position: static !important; 
        overflow: visible !important; 
        transform: none !important; 
        display: block !important;
    }

    .reco-fullscreen-bg {
        padding: 0 !important;
        min-height: 100vh !important;
    }

    .reco-app-card {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background-color: var(--color-creme) !important;
    }

    /* 2. BOUTON VOLVER & BADGE (FIXÉS EN HAUT) */
    .reco-back-floating {
    position: fixed !important;
    /* 🌟 On augmente la marge ici (ex: 35px) */
    top: calc(env(safe-area-inset-top, 15px) + 30px) !important; 
    left: 20px !important;
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding: 8px 18px !important;
    border-radius: 50px !important;
    z-index: 9999 !important; 
    color: #fff !important;
    font-size: 11px !important;
    display: flex !important;
    align-items: center;
    gap: 8px;
}
    .reco-back-floating svg { stroke: #fff !important; width: 16px; height: 16px; }

    /* --- LE BADGE DÉFIXÉ (SUIT LE SCROLL DE L'IMAGE) --- */

.reco-app-badge {
    /* 🌟 On passe en absolute : il n'est plus collé à l'écran */
    position: absolute !important; 
    
    /* 🌟 On le place par rapport aux bords de l'IMAGE */
    top: 35px !important; 
    right: 15px !important;
    left: auto !important;
    
    background: var(--color-jungle) !important;
    color: var(--color-creme) !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    font-family: var(--font-main);
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    
    /* 🌟 Un index standard suffit puisqu'il est dans le conteneur image */
    z-index: 10 !important; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    pointer-events: none;
}

    /* 3. IMAGE PAYSAGE IMMERSIVE */
    .reco-app-left {
        width: 100% !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
    }

    .reco-app-img {
        width: 100vw !important; 
        height: 35vh !important;
        border-radius: 0 !important;
        margin-bottom: -10px !important;
        box-shadow: none !important;
    }

/* =======================================================
   FIX INFO-ROW MOBILE - ICÔNES & CENTRAGE
   ======================================================= */

.reco-app-quick-info {
    padding: 0 !important;
    margin: 0 !important;
    background-color: var(--color-creme) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 0 !important;
    width: 100% !important;
    height: auto !important;        /* 🌟 s'adapte au contenu */
    min-height: 80px !important;    /* 🌟 hauteur minimum */
    box-sizing: border-box !important;
    overflow: visible !important;   /* 🌟 laisse le contenu respirer */
}

/* LES COLONNES */
.info-row {
    flex: 1 !important;
    min-width: 0 !important;
    height: auto !important;        /* 🌟 suit le conteneur */
    min-height: 80px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: center !important;
    padding: 20px 6px 0 !important; /* 🌟 bas à 0, le texte prend l'espace qu'il veut */
    gap: 0 !important;
    border-right: 1px solid rgba(0,0,0,0.08) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important; /* 🌟 sécurité si texte très long */
}

/* LE LIEN ET LE BUTTON */
.info-row .reco-full-link {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* 🌟 ancré en haut aussi */
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    gap: 0 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.info-row:last-child {
    border-right: none !important;
}

/* ZONE ICÔNE PRINCIPALE — hauteur fixe */
.info-row svg.main-icon,
.info-row > svg.main-icon,
.info-row .reco-full-link svg.main-icon {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    flex-shrink: 0 !important;
    background-color: transparent !important;
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--color-terracotta) !important;
    stroke: var(--color-terracotta) !important;
    fill: none !important;
    margin: 0 0 6px 0 !important;
    display: block !important;
}

/* TEXTE — prend l'espace central */
.info-row .link-text,
.info-row > span:not(.reco-app-badge):not(.action-icon-placeholder) {
    font-family: var(--font-main) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    color: var(--color-terracotta) !important;
    line-height: 1.3 !important;
    width: 100% !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: break-word !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 1 !important;
}

/* ICÔNE ACTION — hauteur fixe en bas */
.info-row .action-icon {
    display: block !important;
    width: 10px !important;
    height: 10px !important;
    min-width: 10px !important;
    min-height: 10px !important;
    max-width: 10px !important;
    max-height: 10px !important;
    flex-shrink: 0 !important;
    background: none !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    margin: 6px 0 0 0 !important;
    opacity: 0.5 !important;
    color: var(--color-terracotta) !important;
    stroke: var(--color-terracotta) !important;
}

/* ESPACE FANTÔME PRIX */
.action-icon-placeholder {
    display: block !important;
    width: 10px !important;
    height: 10px !important;
    min-height: 10px !important;
    flex-shrink: 0 !important;
    background: none !important;
    margin: 6px 0 0 0 !important;
}

    /* 5. CONTENU DROIT (TITRE & DESCRIPTION) */
    .reco-app-right {
        padding: 10px 24px 140px !important; /* Marge pour la barre fixe */
        background-color: var(--color-creme) !important;
    }

    .reco-app-title {
        font-size: 28px !important;
        margin-bottom: 15px !important;
        line-height: 1.1;
    }

    .reco-app-scroll-area { overflow: visible !important; }

/* 6. BARRE D'ACTIONS FIXE */

/* --- 📱 TAILLES PAR DÉFAUT (TÉLÉPHONES STANDARDS : iPhone 12/13/14, Androids...) --- */
.reco-action-bottom {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    background-color: var(--color-creme) !important;
    border-top: 1px solid rgba(0,0,0,0.08) !important;
    /* Un peu plus d'espace sur les côtés */
    padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 12px) !important; 
    z-index: 9999 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    box-sizing: border-box !important;
    gap: 12px !important; 
}

.reco-social-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: space-evenly !important; 
    flex: 1 !important;
    max-width: 55% !important; /* Laisse un peu plus de place pour respirer */
    gap: 10px !important;
}

.reco-action-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
}

.reco-action-btn svg {
    width: 24px !important; /* Icônes plus grandes */
    height: 24px !important;
    stroke-width: 2px !important;
}

.reco-action-btn span {
    font-size: 12px !important; /* Texte plus lisible */
    font-weight: 900 !important;
    padding-left: 0 !important;
}

.reco-app-btn {
    padding: 14px 20px !important; /* Bouton plus charnu */
    font-size: 13px !important; /* Texte plus grand */
    font-weight: 900 !important;
    border-radius: 50px !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    max-width: none !important; /* On enlève la limite pour laisser le texte s'afficher */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-block !important; 
}

}

/* --- 🤏 OPTIMISATION TRÈS PETITS ÉCRANS (iPhone SE, Mini, < 380px) --- */
@media (max-width: 380px) {
    .reco-action-bottom {
        padding: 10px 12px calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
        gap: 8px !important;
    }
    
    .reco-social-actions {
        max-width: 50% !important; /* On force le rétrécissement */
        gap: 0 !important;
    }
    
    .reco-action-btn svg {
        width: 22px !important;
        height: 22px !important;
        stroke-width: 2.5px !important;
    }
    
    .reco-action-btn span {
        font-size: 11px !important;
    }
    
    .reco-app-btn {
        padding: 11px 16px !important;
        font-size: 11px !important;
        max-width: 45vw !important; /* On tronque si besoin pour éviter que ça casse */
    }
}

@media (max-width: 768px) {
    /* 🌟 7. MODALE COMMENTAIRES (Tiroir) 🌟 */
    .pf-reco-minimal-body .reco-comments-modal {
        position: fixed !important; 
        bottom: -120% !important; 
        left: 0 !important;
        width: 100vw !important;
        height: 85vh !important;    
        max-height: none !important;
        z-index: 100000 !important; 
        border-radius: 30px 30px 0 0 !important;
        box-shadow: 0 -10px 50px rgba(0,0,0,0.5) !important;
        transition: bottom 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
    }

    .pf-reco-minimal-body .reco-comments-modal.is-active {
        bottom: 0 !important; 
    }
    
    /* ==========================================================================
       🌟 AFFINAGE DES COMMENTAIRES POUR MOBILE 🌟
       ========================================================================== */

    /* 1. CARTES DE COMMENTAIRES (Moins de vide, plus compactes) */
    .pf-reco-minimal-body .comment-body {
        padding: 20px 15px 15px !important; /* Marges réduites drastiquement */
        border-radius: 16px !important;
        margin-bottom: 12px !important; 
    }

    /* 2. TYPOGRAPHIE (Plus fine pour la lecture) */
    .pf-reco-minimal-body b.fn { 
        font-size: 14px !important; /* Le nom de l'auteur */
    }
    
    .pf-reco-minimal-body .comment-content p { 
        font-size: 14px !important; /* Le texte : 14px est le standard mobile iOS */
        line-height: 1.45 !important; 
    }

    .pf-reco-minimal-body .comment-metadata a, 
    .pf-reco-minimal-body .comment-metadata time {
        font-size: 9px !important; /* Date très discrète */
    }

    /* Ajustement du bouton "Eliminar" avec les nouvelles marges */
    .pf-reco-minimal-body .reco-delete-comment {
        top: 15px !important; 
        right: 15px !important;
    }

    /* 3. BOUTON "CONTESTAR" */
    .pf-reco-minimal-body .reply { 
        margin-top: 12px !important; 
    }
    
    .pf-reco-minimal-body a.comment-reply-link {
    display: inline-block !important; padding: 7px 20px !important; font-size: 10px !important; border-radius: 50px !important;
    border: 2px solid var(--color-accent-yellow) !important; color: var(--color-accent-yellow) !important; background: transparent !important;
    font-weight: 800 !important; text-transform: uppercase !important; text-decoration: none !important; line-height: 1.2 !important;
}

    /* 4. LE FORMULAIRE DE RÉPONSE (Beaucoup moins massif) */
    .pf-reco-minimal-body #respond {
        padding: 20px 15px 20px !important; /* On divise le vide par deux */
        margin: 15px auto !important;
        border-radius: 16px !important;
    }

    .pf-reco-minimal-body #reply-title {
        font-size: 15px !important; /* Titre moins hurlant */
        margin-bottom: 15px !important;
    }

    /* 🛡️ Sécurité iOS : Les champs doivent faire 16px minimum sinon l'iPhone zoome tout seul, 
       mais on les rend plus fins en hauteur */
    .pf-reco-minimal-body .comment-form input:not(.submit), 
    .pf-reco-minimal-body .comment-form textarea {
        padding: 10px 12px !important;
        font-size: 16px !important; /* NE PAS DESCENDRE SOUS 16px (Règle Safari Mobile) */
        border-radius: 8px !important;
    }

    .pf-reco-minimal-body #respond input[type="submit"].submit {
        min-width: 140px !important;
        padding: 10px 20px !important;
        font-size: 10px !important;
    }

    /* 5. LES RÉPONSES IMBRIQUÉES (Fils de discussion) */
    .pf-reco-minimal-body .children {
        margin: 0 0 0 10px !important; /* Le trait de réponse se rapproche */
        padding: 0 0 0 12px !important; 
    }

    .pf-reco-minimal-body .children .comment-body { 
        padding: 12px 15px !important; /* Bulles de réponses très compactes */
        border-radius: 14px !important;
        margin-top: 10px !important; 
    }

    /* 🌟 FIX : EN-TÊTE ET CROIX DES COMMENTAIRES (MOBILE) 🌟 */
    .pf-reco-minimal-body .reco-comments-header {
        padding: 20px 20px 15px !important; /* On réduit le padding latéral de 30px à 20px */
        gap: 15px !important; /* Ajoute un espace de sécurité entre le titre et la croix */
    }

    .pf-reco-minimal-body .reco-comments-header h3 {
        font-size: 15px !important; /* Titre très légèrement réduit pour faire de la place */
        flex: 1 !important; /* Pousse la croix vers la droite */
        min-width: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important; /* Si le titre est trop long, on met "..." */
    }

    .pf-reco-minimal-body .reco-close-comments {
        flex-shrink: 0 !important; /* 🔥 LA MAGIE EST LÀ : La croix refuse de s'écraser */
        width: 32px !important; 
        height: 32px !important;
    }
    
    .pf-reco-minimal-body .reco-close-comments svg {
        width: 16px !important; /* S'assure que l'icône de la croix reste bien proportionnée */
        height: 16px !important;
    }
    
    /* 🌟 8. MICRO-INTERACTIONS TACTILES (FEEDBACK CLIC) 🌟 */
    .reco-full-link:active {
        opacity: 0.7 !important;
        transform: scale(0.98) !important; /* Le texte s'enfonce très légèrement */
        background: transparent !important;
    }
    
    .reco-full-link:active .action-icon {
        opacity: 1 !important; /* L'icône s'allume au clic */
    }

    .reco-app-btn:active, 
    .reco-action-btn:active, 
    .reco-slider-btn:active {
        transform: scale(0.90) !important; /* Effet enfoncé App */
        opacity: 0.8 !important;
        transition: all 0.1s cubic-bezier(0.25, 1, 0.5, 1) !important;
    }
    
    /* 🌟 EFFET CLIC (TACTILE) SUR LA CROIX DES COMMENTAIRES 🌟 */
    .pf-reco-minimal-body .reco-close-comments:active {
        transform: scale(0.85) !important; /* La croix s'enfonce sous le doigt */
        opacity: 0.8 !important;
        background: var(--color-terracotta) !important; /* Flash Terracotta pour valider l'action */
        transition: all 0.1s cubic-bezier(0.25, 1, 0.5, 1) !important; /* Ultra-rapide pour la réactivité */
    }
    
    /* 🌟 ADAPTATION DES FLÈCHES DU CARROUSEL POUR MOBILE 🌟 */
    .reco-slider-btn {
        width: 32px !important;
        height: 32px !important;
    }
    .reco-slider-btn.prev { left: 10px !important; }
    .reco-slider-btn.next { right: 10px !important; }
    
    .reco-slider-btn svg {
        width: 18px !important;
        height: 18px !important;
    }
}