/* ===================================================================
   G-IMMO SCORE - PREMIUM VISUAL STYLES
   Design moderne avec gradients, glassmorphism et animations
   =================================================================== */

/* Variables CSS */
:root {
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --gradient-warning: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --gradient-danger: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    --gradient-info: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);

    /* Pilier-specific gradients */
    --gradient-pilier-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    /* Blue-Violet - Accessibilité */
    --gradient-pilier-2: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
    /* Teal - Santé */
    --gradient-pilier-3: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    /* Orange - Commerce */
    --gradient-pilier-4: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
    /* Pink - Culture */
    --gradient-pilier-5: linear-gradient(135deg, #10b981 0%, #059669 100%);
    /* Green - Nature */

    /* Pilier solid colors (for accents) */
    --color-pilier-1: #667eea;
    --color-pilier-2: #14b8a6;
    --color-pilier-3: #f59e0b;
    --color-pilier-4: #ec4899;
    --color-pilier-5: #10b981;

    --color-text: #1f2937;
    --color-text-light: #6b7280;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.15);
    --radius: 16px;
    --radius-sm: 8px;
}

/* Container principal */
.gipm-score-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: var(--color-text);
    /* Enable 3D transforms for parallax effect */
    perspective: 1200px;
    perspective-origin: center center;
}

/* Enable 3D transforms for all animated elements */
.gipm-accordion-item,
.gipm-hero-card,
.gipm-swot-card {
    transform-style: preserve-3d;
    will-change: transform, opacity;
    transition: transform 0.15s ease-out, opacity 0.15s ease-out;
}

/* Titres de sections */
.gipm-section-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 2rem;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: center;
}

/* Animations d'apparition */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
    opacity: 0;
}

/* Section Hero */
.gipm-hero {
    margin-bottom: 60px;
}

.gipm-hero-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.gipm-hero-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.8));
    backdrop-filter: blur(10px);
    padding: 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gipm-hero-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(102, 126, 234, 0.2);
}

.gipm-icon {
    font-size: 3rem;
    margin-bottom: 20px;
    display: inline-block;
    animation: bounce 2s infinite;
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.gipm-hero-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--color-text);
}

.gipm-hero-card p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text-light);
}

/* Section SWOT */
.gipm-swot {
    margin-bottom: 60px;
}

.gipm-swot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

.gipm-swot-card {
    padding: 30px;
    border-radius: var(--radius);
    color: white;
    box-shadow: var(--shadow-md);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.gipm-swot-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gipm-swot-card:hover::before {
    opacity: 1;
}

.gipm-swot-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--shadow-lg);
}

.gipm-swot-force {
    /* Glassmorphism: Use CSS custom properties for configurable colors */
    background: linear-gradient(135deg, var(--gipm-force-color-start, #10b981) 0%, var(--gipm-force-color-end, #059669) 100%);
    border-radius: 24px;
    padding: 0;
    /* Reset padding, will be on inner */
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.gipm-swot-opportunite {
    /* Glassmorphism: Use CSS custom properties for configurable colors */
    background: linear-gradient(135deg, var(--gipm-opp-color-start, #667eea) 0%, var(--gipm-opp-color-end, #764ba2) 100%);
    border-radius: 24px;
    padding: 0;
    /* Reset padding, will be on inner */
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Glassmorphism Inner Content Wrapper */
.gipm-swot-force .gipm-swot-inner,
.gipm-swot-opportunite .gipm-swot-inner {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 16px;
    margin: 20px;
    padding: 25px 30px;
}

@media (max-width: 768px) {

    /* Target parent card directly as inner wrapper is missing */
    .gipm-swot-card.gipm-swot-force,
    .gipm-swot-card.gipm-swot-opportunite {
        padding: 10px !important;
        width: 100% !important;
    }

    /* Override inline styles on UL */
    .gipm-swot-card.gipm-swot-force ul,
    .gipm-swot-card.gipm-swot-opportunite ul {
        padding-left: 0 !important;
        margin: 5px 0 !important;
    }

    /* Adjust list items */
    .gipm-swot-card.gipm-swot-force li,
    .gipm-swot-card.gipm-swot-opportunite li {
        margin-bottom: 5px !important;
        line-height: 1.4;
    }
}

/* Header Styling for Glassmorphism Cards */
.gipm-swot-force .gipm-swot-header,
.gipm-swot-opportunite .gipm-swot-header {
    margin-bottom: 15px;
    text-align: center;
}

.gipm-swot-force .gipm-swot-header h3,
.gipm-swot-opportunite .gipm-swot-header h3 {
    font-size: 1.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.9;
    margin-bottom: 10px;
}

/* Large Value Styling */
.gipm-swot-force .gipm-swot-value,
.gipm-swot-opportunite .gipm-swot-value {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Inner Details Box (the sub-card inside) */
.gipm-swot-force .gipm-swot-details,
.gipm-swot-opportunite .gipm-swot-details {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 18px 22px;
    margin-top: 15px;
}

.gipm-swot-force .gipm-swot-details-label,
.gipm-swot-opportunite .gipm-swot-details-label {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    opacity: 0.85;
    margin-bottom: 5px;
}

.gipm-swot-force .gipm-swot-details-value,
.gipm-swot-opportunite .gipm-swot-details-value {
    font-size: 1.8rem;
    font-weight: 700;
}

/* Keep backward compatibility - if no inner wrapper, apply padding directly */
.gipm-swot-force:not(:has(.gipm-swot-inner)),
.gipm-swot-opportunite:not(:has(.gipm-swot-inner)) {
    padding: 30px;
}

.gipm-swot-menace {
    background: var(--gradient-danger);
}

.gipm-swot-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.gipm-swot-icon {
    font-size: 2rem;
}

.gipm-swot-card h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0;
    color: #ffffff !important;
}

.gipm-swot-card a {
    color: #ffffff !important;
    text-decoration: underline;
    transition: opacity 0.2s ease;
}

.gipm-swot-card a:hover {
    opacity: 0.8;
}

/* CSS Isolation: Force white text in SWOT cards (Forces, Opportunités, Conclusion) to override Elementor/theme styles */
.gipm-swot-card,
.gipm-swot-card * {
    color: #ffffff !important;
}

.gipm-swot-card p,
.gipm-swot-card li,
.gipm-swot-card span,
.gipm-swot-card strong,
.gipm-swot-card em,
.gipm-swot-card div {
    color: #ffffff !important;
}



.gipm-swot-card p {
    font-size: 1.1rem;
    line-height: 1.7;
    opacity: 1;
}

.gipm-swot-card ul {
    margin: 10px 0 0 0;
    padding-left: 20px;
}

.gipm-swot-card li {
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 8px;
    opacity: 1;
}

/* Section Analyse Historique */
.gipm-history {
    margin-bottom: 60px;
}

.gipm-history-content {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(245, 158, 11, 0.1) 100%);
    padding: 50px;
    border-radius: var(--radius);
    border: 2px solid rgba(251, 191, 36, 0.3);
    position: relative;
    overflow: hidden;
}

.gipm-history-content::before {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.2) 0%, transparent 70%);
    border-radius: 50%;
}

.gipm-history-icon {
    font-size: 4rem;
    text-align: center;
    margin-bottom: 25px;
    animation: pulse 3s infinite;
}

.gipm-history-content p {
    font-size: 1.05rem;
    line-height: 1.9;
    color: var(--color-text);
    margin: 0;
    text-align: justify;
    position: relative;
    z-index: 1;
}

/* Section Scores */
.gipm-scores {
    margin-bottom: 60px;
}

.gipm-scores-container {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 40px;
    align-items: center;
}

#gipm-radar-chart {
    max-width: 100%;
    height: auto;
}

.gipm-scores-legend {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.gipm-score-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.gipm-score-label {
    flex: 0 0 160px;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--color-text);
}

.gipm-score-bar {
    flex: 1;
    height: 12px;
    background: #e5e7eb;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

.gipm-score-fill {
    height: 100%;
    background: var(--gradient-primary);
    border-radius: 20px;
    transition: width 1s ease-out;
    animation: fillBar 1.5s ease-out;
}

@keyframes fillBar {
    from {
        width: 0 !important;
    }
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%) skewX(-15deg);
    }

    100% {
        transform: translateX(100%) skewX(-15deg);
    }
}

.gipm-score-fill {
    height: 100%;
    background: var(--gradient-primary);
    border-radius: 20px;
    transition: width 1s ease-out;
    animation: fillBar 1.5s ease-out;
    position: relative;
    overflow: hidden;
    /* Ensure shimmer stays inside */
}

/* Shimmer Effect */
.gipm-score-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    /* Wider than container for smooth movement */
    height: 100%;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.3) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: translateX(-100%) skewX(-15deg);
    animation: shimmer 2s infinite linear;
}

.gipm-score-value {
    flex: 0 0 auto;
    min-width: 80px;
    /* Increased to ensure space */
    font-weight: 800;
    font-size: 1.3rem;
    color: #667eea;
    text-align: right;
    white-space: nowrap !important;
    display: inline-flex;
    /* Ensure flex behavior */
    align-items: center;
    /* Vertically align text and icon */
    justify-content: flex-end;
    /* Align to the right */
    gap: 6px;
    /* Space between numbers and icon */
}

/* Section Piliers - Accordion ULTRA MODERNE */
.gipm-pillars {
    margin-bottom: 60px;
}

.gipm-accordion {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.gipm-accordion-item {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08),
        0 2px 8px rgba(102, 126, 234, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    position: relative;
}

/* Effet de lumière animé au survol */
.gipm-accordion-item::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(102, 126, 234, 0.15) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
}

.gipm-accordion-item:hover::before {
    opacity: 1;
    transform: translate(10%, 10%);
}

.gipm-accordion-item:hover {
    transform: translateY(-4px) scale(1.01);
    border-color: rgba(102, 126, 234, 0.4);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12),
        0 8px 16px rgba(102, 126, 234, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Animation quand l'accordéon est actif */
.gipm-accordion-item.active {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05), rgba(118, 75, 162, 0.05));
    border-color: rgba(102, 126, 234, 0.3);
    box-shadow: 0 12px 40px rgba(102, 126, 234, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.gipm-accordion-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 28px 32px;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(249, 250, 251, 0.8) 100%);
    border: none;
    cursor: pointer;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-text);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

/* Effet de shimmer au hover */
.gipm-accordion-header::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.6) 50%,
            transparent 100%);
    transition: left 0.6s ease;
}

.gipm-accordion-header:hover::after {
    left: 100%;
}

.gipm-accordion-header:hover {
    background: linear-gradient(135deg,
            rgba(102, 126, 234, 0.1) 0%,
            rgba(118, 75, 162, 0.08) 100%);
    color: #667eea;
}

.gipm-accordion-item.active .gipm-accordion-header {
    background: linear-gradient(135deg,
            rgba(102, 126, 234, 0.15) 0%,
            rgba(118, 75, 162, 0.1) 100%);
    color: #667eea;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

.gipm-accordion-icon {
    font-size: 2rem;
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.gipm-accordion-item:hover .gipm-accordion-icon {
    transform: scale(1.15) rotate(5deg);
}

.gipm-accordion-item.active .gipm-accordion-icon {
    transform: scale(1.1);
    filter: drop-shadow(0 4px 8px rgba(102, 126, 234, 0.3));
}

.gipm-accordion-title {
    flex: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

@keyframes pulse-ring {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(2.5);
        box-shadow: 0 0 0 20px rgba(102, 126, 234, 0);
        opacity: 0;
    }
}

.gipm-accordion-toggle {
    font-size: 1.1rem;
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    opacity: 1;
    /* Increased from 0.6 */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    position: relative;
    /* For pseudo-element positioning */
    width: 24px;
    /* Fix width for centering */
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* Pulsating Circle Effect */
.gipm-accordion-toggle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: rgba(102, 126, 234, 0.1);
    transform: translate(-50%, -50%);
    animation: pulse-ring 2s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
    z-index: -1;
    pointer-events: none;
}

.gipm-accordion-header:hover .gipm-accordion-toggle {
    opacity: 1;
    transform: scale(1.2);
}

.gipm-accordion-item.active .gipm-accordion-toggle {
    transform: rotate(180deg) scale(1.1);
    opacity: 1;
    color: #667eea;
}

/* Optional: Stop animation when active or hovered if desired? 
   User said "show that something happens underneath", usually implies prompting action. 
   So animation fits well when inactive. */
.gipm-accordion-item.active .gipm-accordion-toggle::before {
    animation: none;
    /* Stop pulsing when open? Or keep it? Let's keep it subtle or remove. user request implies 'prompt to click' */
    /* Let's keep it running for 'alive' feel, or maybe pause it. */
}

.gipm-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        padding 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s ease;
    padding: 0 32px;
    opacity: 0;
}

.gipm-accordion-item.active .gipm-accordion-content {
    max-height: 100000px;
    padding: 28px 32px;
    opacity: 1;
}

.gipm-pillar-details {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.gipm-detail-row {
    padding: 20px;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.8) 0%,
            rgba(249, 250, 251, 0.6) 100%);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    border-left: 4px solid transparent;
    border-image: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
    border-image-slice: 1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

/* Effet de glow subtil */
.gipm-detail-row::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 0 12px rgba(102, 126, 234, 0.4);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gipm-detail-row:hover::before {
    opacity: 1;
}

.gipm-detail-row:hover {
    transform: translateX(8px);
    background: linear-gradient(135deg,
            rgba(102, 126, 234, 0.08) 0%,
            rgba(118, 75, 162, 0.05) 100%);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.15);
}

.gipm-detail-row strong {
    display: block;
    margin-bottom: 10px;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.35rem;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.gipm-detail-row p {
    margin: 0;
    color: var(--color-text-light);
    line-height: 1.7;
    font-size: 1.5rem;
}

/* Section Restaurants */
.gipm-restaurants {
    margin-bottom: 60px;
}

/* Styles pour les images des piliers en accordéon (Legacy - Removed) */
.gipm-accordion-wrapper {
    width: 100%;
}

/* Responsive pour les images d'accordéon */
@media (max-width: 900px) {
    /* Legacy wrapper styles removed */


    /* Sub-criteria images responsive */
    .gipm-detail-row-wrapper {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .gipm-detail-img {
        width: 100% !important;
        flex: none !important;
        display: flex !important;
        /* Added for centering */
        justify-content: center !important;
        /* Added for centering */
    }

    .gipm-detail-img img {
        height: auto !important;
        max-height: 200px;
        width: 40% !important;
        max-width: 40% !important;
        /* Added safety */
        /* Reduced from 100% to 40% */
        margin: 0 auto !important;
        /* Safety for centering */
    }
}

.gipm-restaurant-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.gipm-restaurant-card {
    background: white;
    padding: 30px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    border: 2px solid transparent;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.gipm-restaurant-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.gipm-restaurant-card:hover::before {
    transform: scaleX(1);
}

.gipm-restaurant-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: #667eea;
}

.gipm-restaurant-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    gap: 15px;
}

.gipm-restaurant-header h3 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}

.gipm-restaurant-badge {
    background: var(--gradient-warning);
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.gipm-restaurant-justif {
    font-size: 0.95rem;
    color: var(--color-text);
    margin-bottom: 15px;
    line-height: 1.6;
}

.gipm-restaurant-narrative {
    font-size: 0.9rem;
    color: var(--color-text-light);
    font-style: italic;
    line-height: 1.7;
}

/* Section Musées */
.gipm-museums {
    margin-bottom: 60px;
}

.gipm-museum-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

.gipm-museum-card {
    background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
    padding: 30px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border: 2px solid #e5e7eb;
    transition: all 0.3s ease;
    text-align: center;
}

.gipm-museum-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: var(--shadow-md);
    border-color: #667eea;
}

.gipm-museum-icon {
    font-size: 3rem;
    margin-bottom: 15px;
    display: inline-block;
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

.gipm-museum-card h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 15px;
}

.gipm-museum-card p {
    font-size: 0.9rem;
    color: var(--color-text-light);
    line-height: 1.6;
}

/* Section Conclusion */
.gipm-conclusion {
    margin-bottom: 60px;
}

.gipm-conclusion-content {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    padding: 50px;
    border-radius: var(--radius);
    border: 2px solid rgba(102, 126, 234, 0.2);
    position: relative;
    overflow: hidden;
}

.gipm-conclusion-content::before {
    content: '✨';
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 4rem;
    opacity: 0.2;
}

.gipm-conclusion-content p {
    font-size: 1.1rem;
    line-height: 1.9;
    color: var(--color-text);
    margin: 0;
    text-align: justify;
}

/* Messages d'erreur et pas de données */
.gipm-no-data,
.gipm-error {
    padding: 40px;
    text-align: center;
    background: #f9fafb;
    border-radius: var(--radius);
    border: 2px dashed #d1d5db;
    margin: 40px auto;
}

.gipm-no-data p,
.gipm-error p {
    font-size: 1.1rem;
    color: var(--color-text-light);
    margin: 0;
}

.gipm-error {
    border-color: #ef4444;
    background: #fef2f2;
}

.gipm-error p {
    color: #dc2626;
}

/* Responsive */
@media (max-width: 768px) {
    .gipm-section-title {
        font-size: 1.5rem;
    }

    .gipm-hero-card,
    .gipm-swot-card,
    .gipm-restaurant-card,
    .gipm-museum-card {
        padding: 25px;
    }

    .gipm-history-content {
        padding: 30px;
    }

    .gipm-history-content p {
        font-size: 1rem;
    }

    .gipm-score-label {
        flex: 0 0 120px;
        font-size: 0.8rem;
    }

    .gipm-scores-container {
        grid-template-columns: 1fr;
    }

    .gipm-conclusion-content p {
        font-size: 1rem;
    }

    /* Hide Accordion Icons on Mobile */
    .gipm-accordion-icon {
        display: none !important;
    }
}

/* --- Updates for Buttons and Larger Titles --- */

.gipm-subtitle-large {
    display: block;
    margin-bottom: 8px;
    color: #667eea;
    font-size: 1.35rem;
    /* Increased from 1.2rem */
    font-weight: 700;
}

.gipm-btn-small {
    display: inline-block;
    margin-top: 12px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 20px;
    border: 1px solid #d1d5db;
    transition: all 0.2s ease;
}


.gipm-btn-small:hover {
    background: var(--gradient-primary);
    color: white;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(102, 126, 234, 0.25);
}

.gipm-detail-content {
    margin-top: 5px;
    color: var(--color-text-light);
    line-height: 1.6;
    font-size: 1.2rem;
    /* Increased slightly from 0.85rem */
}

/* Section Culture - Style "Restaurant" Jaune */
.gipm-culture-card {
    background: white;
    padding: 30px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    border: 2px solid transparent;
    /* Bordure transparente par défaut */
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.gipm-culture-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-warning);
    /* Gradient Jaune */
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.gipm-culture-card:hover::before {
    transform: scaleX(1);
}

.gipm-culture-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: #f59e0b;
    /* Couleur Jaune de bordure au survol */
}

.gipm-culture-badge {
    background: var(--gradient-primary);
    /* Bleu pour le badge culture pour contraster ou inverser */
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Custom Accordion Header Icon */
.gipm-header-custom-icon {
    width: auto;
    max-width: 100%;
    /* Safety to prevent overflow */
    object-fit: contain;
    vertical-align: middle;
}

/* Pilier-specific accordion styling */
.gipm-accordion-item.gipm-pilier-1 .gipm-detail-row {
    border-image: var(--gradient-pilier-1);
    border-image-slice: 1;
}

.gipm-accordion-item.gipm-pilier-1 .gipm-detail-row::before {
    background: var(--gradient-pilier-1);
    box-shadow: 0 0 12px rgba(102, 126, 234, 0.4);
}

.gipm-accordion-item.gipm-pilier-1 .gipm-detail-row:hover {
    background: linear-gradient(135deg,
            rgba(102, 126, 234, 0.08) 0%,
            rgba(118, 75, 162, 0.05) 100%);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.15);
}

.gipm-accordion-item.gipm-pilier-2 .gipm-detail-row {
    border-image: var(--gradient-pilier-2);
    border-image-slice: 1;
}

.gipm-accordion-item.gipm-pilier-2 .gipm-detail-row::before {
    background: var(--gradient-pilier-2);
    box-shadow: 0 0 12px rgba(20, 184, 166, 0.4);
}

.gipm-accordion-item.gipm-pilier-2 .gipm-detail-row:hover {
    background: linear-gradient(135deg,
            rgba(20, 184, 166, 0.08) 0%,
            rgba(13, 148, 136, 0.05) 100%);
    box-shadow: 0 8px 24px rgba(20, 184, 166, 0.15);
}

.gipm-accordion-item.gipm-pilier-3 .gipm-detail-row {
    border-image: var(--gradient-pilier-3);
    border-image-slice: 1;
}

.gipm-accordion-item.gipm-pilier-3 .gipm-detail-row::before {
    background: var(--gradient-pilier-3);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.4);
}

.gipm-accordion-item.gipm-pilier-3 .gipm-detail-row:hover {
    background: linear-gradient(135deg,
            rgba(245, 158, 11, 0.08) 0%,
            rgba(217, 119, 6, 0.05) 100%);
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.15);
}

.gipm-accordion-item.gipm-pilier-4 .gipm-detail-row {
    border-image: var(--gradient-pilier-4);
    border-image-slice: 1;
}

.gipm-accordion-item.gipm-pilier-4 .gipm-detail-row::before {
    background: var(--gradient-pilier-4);
    box-shadow: 0 0 12px rgba(236, 72, 153, 0.4);
}

.gipm-accordion-item.gipm-pilier-4 .gipm-detail-row:hover {
    background: linear-gradient(135deg,
            rgba(236, 72, 153, 0.08) 0%,
            rgba(219, 39, 119, 0.05) 100%);
    box-shadow: 0 8px 24px rgba(236, 72, 153, 0.15);
}

.gipm-accordion-item.gipm-pilier-5 .gipm-detail-row {
    border-image: var(--gradient-pilier-5);
    border-image-slice: 1;
}

.gipm-accordion-item.gipm-pilier-5 .gipm-detail-row::before {
    background: var(--gradient-pilier-5);
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}

.gipm-accordion-item.gipm-pilier-5 .gipm-detail-row:hover {
    background: linear-gradient(135deg,
            rgba(16, 185, 129, 0.08) 0%,
            rgba(5, 150, 105, 0.05) 100%);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.15);
}

/* Pilier-specific score bar styling */
.gipm-score-fill.gipm-score-pilier-1 {
    background: var(--gradient-pilier-1);
}

.gipm-score-fill.gipm-score-pilier-2 {
    background: var(--gradient-pilier-2);
}

.gipm-score-fill.gipm-score-pilier-3 {
    background: var(--gradient-pilier-3);
}

.gipm-score-fill.gipm-score-pilier-4 {
    background: var(--gradient-pilier-4);
}

.gipm-score-fill.gipm-score-pilier-5 {
    background: var(--gradient-pilier-5);
}

.gipm-score-item.gipm-score-pilier-1 .gipm-score-value {
    color: var(--color-pilier-1);
}

.gipm-score-item.gipm-score-pilier-2 .gipm-score-value {
    color: var(--color-pilier-2);
}

.gipm-score-item.gipm-score-pilier-3 .gipm-score-value {
    color: var(--color-pilier-3);
}

.gipm-score-item.gipm-score-pilier-4 .gipm-score-value {
    color: var(--color-pilier-4);
}

.gipm-score-item.gipm-score-pilier-5 .gipm-score-value {
    color: var(--color-pilier-5);
}

/* Pilier-specific accordion header hover effects */
.gipm-accordion-item.gipm-pilier-1 .gipm-accordion-header:hover {
    background: linear-gradient(135deg,
            rgba(102, 126, 234, 0.1) 0%,
            rgba(118, 75, 162, 0.08) 100%);
    color: #667eea;
}

.gipm-accordion-item.gipm-pilier-1.active .gipm-accordion-header {
    background: linear-gradient(135deg,
            rgba(102, 126, 234, 0.15) 0%,
            rgba(118, 75, 162, 0.1) 100%);
    color: #667eea;
}

.gipm-accordion-item.gipm-pilier-2 .gipm-accordion-header:hover {
    background: linear-gradient(135deg,
            rgba(20, 184, 166, 0.1) 0%,
            rgba(13, 148, 136, 0.08) 100%);
    color: #14b8a6;
}

.gipm-accordion-item.gipm-pilier-2.active .gipm-accordion-header {
    background: linear-gradient(135deg,
            rgba(20, 184, 166, 0.15) 0%,
            rgba(13, 148, 136, 0.1) 100%);
    color: #14b8a6;
}

.gipm-accordion-item.gipm-pilier-3 .gipm-accordion-header:hover {
    background: linear-gradient(135deg,
            rgba(245, 158, 11, 0.1) 0%,
            rgba(217, 119, 6, 0.08) 100%);
    color: #f59e0b;
}

.gipm-accordion-item.gipm-pilier-3.active .gipm-accordion-header {
    background: linear-gradient(135deg,
            rgba(245, 158, 11, 0.15) 0%,
            rgba(217, 119, 6, 0.1) 100%);
    color: #f59e0b;
}

.gipm-accordion-item.gipm-pilier-4 .gipm-accordion-header:hover {
    background: linear-gradient(135deg,
            rgba(236, 72, 153, 0.1) 0%,
            rgba(219, 39, 119, 0.08) 100%);
    color: #ec4899;
}

.gipm-accordion-item.gipm-pilier-4.active .gipm-accordion-header {
    background: linear-gradient(135deg,
            rgba(236, 72, 153, 0.15) 0%,
            rgba(219, 39, 119, 0.1) 100%);
    color: #ec4899;
}

.gipm-accordion-item.gipm-pilier-5 .gipm-accordion-header:hover {
    background: linear-gradient(135deg,
            rgba(16, 185, 129, 0.1) 0%,
            rgba(5, 150, 105, 0.08) 100%);
    color: #10b981;
}

.gipm-accordion-item.gipm-pilier-5.active .gipm-accordion-header {
    background: linear-gradient(135deg,
            rgba(16, 185, 129, 0.15) 0%,
            rgba(5, 150, 105, 0.1) 100%);
    color: #10b981;
}

/* Pilier-specific accordion item border colors on hover and active */
.gipm-accordion-item.gipm-pilier-1:hover {
    border-color: rgba(102, 126, 234, 0.4);
}

.gipm-accordion-item.gipm-pilier-1.active {
    border-color: rgba(102, 126, 234, 0.3);
}

.gipm-accordion-item.gipm-pilier-2:hover {
    border-color: rgba(20, 184, 166, 0.4);
}

.gipm-accordion-item.gipm-pilier-2.active {
    border-color: rgba(20, 184, 166, 0.3);
}

.gipm-accordion-item.gipm-pilier-3:hover {
    border-color: rgba(245, 158, 11, 0.4);
}

.gipm-accordion-item.gipm-pilier-3.active {
    border-color: rgba(245, 158, 11, 0.3);
}

.gipm-accordion-item.gipm-pilier-4:hover {
    border-color: rgba(236, 72, 153, 0.4);
}

.gipm-accordion-item.gipm-pilier-4.active {
    border-color: rgba(236, 72, 153, 0.3);
}

.gipm-accordion-item.gipm-pilier-5:hover {
    border-color: rgba(16, 185, 129, 0.4);
}

.gipm-accordion-item.gipm-pilier-5.active {
    border-color: rgba(16, 185, 129, 0.3);
}

/* Force & Opportunite specific font size update */
.gipm-swot-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gipm-swot-card:hover {
    transform: scale(1.02) translateY(-5px) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    z-index: 10;
}


.gipm-swot-force p,
.gipm-swot-force li,
.gipm-swot-opportunite p,
.gipm-swot-opportunite li {
    font-size: 1.2rem !important;
}

/* Animation Conclusion POP */
@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }

    60% {
        opacity: 1;
        transform: scale(1.02) translateY(-5px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.pop-in-effect {
    animation: popIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Pilier-specific accordion subtitle styling */
.gipm-accordion-item.gipm-pilier-1 .gipm-detail-row strong {
    background: var(--gradient-pilier-1);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gipm-accordion-item.gipm-pilier-2 .gipm-detail-row strong {
    background: var(--gradient-pilier-2);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gipm-accordion-item.gipm-pilier-3 .gipm-detail-row strong {
    background: var(--gradient-pilier-3);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gipm-accordion-item.gipm-pilier-4 .gipm-detail-row strong {
    background: var(--gradient-pilier-4);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* Pilier-specific accordion arrow coloring (Default state) */
.gipm-accordion-item.gipm-pilier-1 .gipm-accordion-toggle {
    color: var(--color-pilier-1);
    opacity: 1;
    /* Make it fully visible by default */
}

.gipm-accordion-item.gipm-pilier-2 .gipm-accordion-toggle {
    color: var(--color-pilier-2);
    opacity: 1;
}

.gipm-accordion-item.gipm-pilier-3 .gipm-accordion-toggle {
    color: var(--color-pilier-3);
    opacity: 1;
}

.gipm-accordion-item.gipm-pilier-4 .gipm-accordion-toggle {
    color: var(--color-pilier-4);
    opacity: 1;
}

.gipm-accordion-item.gipm-pilier-5 .gipm-accordion-toggle {
    color: var(--color-pilier-5);
    opacity: 1;
}

/* ===================================================================
   GLOBAL LINK STYLES - ELEMENTOR/THEME OVERRIDE
   Forces black links with soft teal hover in all plugin content
   Uses high specificity + !important to override theme/Elementor styles
   =================================================================== */

/* All links within the plugin container - FORCE BLACK */
.gipm-score-container a,
.gipm-score-container a:link,
.gipm-score-container a:visited,
.gipm-score-container .gipm-section a,
.gipm-score-container .gipm-accordion-content a,
.gipm-score-container .gipm-accordion-content a:link,
.gipm-score-container .gipm-accordion-content a:visited,
body .gipm-score-container a,
body .gipm-score-container a:link,
body .gipm-score-container a:visited {
    color: #1a1a1a !important;
    text-decoration: underline !important;
    transition: color 0.2s ease !important;
}

/* Hover state - soft teal color */
.gipm-score-container a:hover,
.gipm-score-container a:focus,
.gipm-score-container a:active,
.gipm-score-container .gipm-section a:hover,
.gipm-score-container .gipm-accordion-content a:hover,
.gipm-score-container .gipm-accordion-content a:focus,
body .gipm-score-container a:hover,
body .gipm-score-container a:focus {
    color: #0d9488 !important;
    text-decoration: underline !important;
}

/* Exception: SWOT cards keep white links (on colored backgrounds) */
.gipm-score-container .gipm-swot-card a,
.gipm-score-container .gipm-swot-card a:link,
.gipm-score-container .gipm-swot-card a:visited,
body .gipm-swot-card a,
body .gipm-swot-card a:link,
body .gipm-swot-card a:visited {
    color: #ffffff !important;
    text-decoration: underline !important;
}

.gipm-score-container .gipm-swot-card a:hover,
.gipm-score-container .gipm-swot-card a:focus,
body .gipm-swot-card a:hover,
body .gipm-swot-card a:focus {
    color: #e0f2fe !important;
    opacity: 0.9 !important;
}

/* Button links - preserve button styling */
.gipm-score-container a.gipm-restaurant-link,
.gipm-score-container a.gipm-culture-link,
.gipm-score-container .gipm-restaurant-link,
.gipm-score-container .gipm-culture-link {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* ===================================================================
   INFINITE MARQUEE (POINTS FORTS)
   Design: Modern & Premium, Infinite Scroll, Tooltips
   =================================================================== */

.lsi-marquee-wrapper {
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    position: relative;
    z-index: 1;
    padding: 140px 0 20px 0;
    /* Large top padding for tooltips */
    margin-bottom: 30px;
    box-sizing: border-box;
}

/* Fade effect using pseudo-elements (doesn't clip tooltips) */
.lsi-marquee-wrapper::before,
.lsi-marquee-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 10;
    pointer-events: none;
}

.lsi-marquee-wrapper::before {
    left: 0;
    background: linear-gradient(to right, white 0%, transparent 100%);
}

.lsi-marquee-wrapper::after {
    right: 0;
    background: linear-gradient(to left, white 0%, transparent 100%);
}

.lsi-marquee-track {
    display: flex;
    gap: 20px;
    width: max-content;
    animation: lsi-marquee-scroll 60s linear infinite;
    /* Slower for readability */
    padding-left: 20px;
    /* Hardware acceleration */
    will-change: transform;
    transform: translateZ(0);
}

.lsi-marquee-part-1,
.lsi-marquee-part-2 {
    display: contents;
}

/* Pause on hover */
.lsi-marquee-wrapper:hover .lsi-marquee-track {
    animation-play-state: paused;
}

@keyframes lsi-marquee-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.lsi-tag {
    /* Glassmorphism / Modern Chip Style */
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: 50px;
    padding: 8px 20px;
    white-space: nowrap;
    position: relative;
    cursor: default;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02), 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    /* Ensure height */
    height: 40px;
    box-sizing: border-box;
}

/* Icon or Dot decoration (optional, adds premium feel) */
.lsi-tag::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    flex-shrink: 0;
}

.lsi-tag:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 15px rgba(102, 126, 234, 0.15);
    background: #fff;
    border-color: rgba(102, 126, 234, 0.4);
    z-index: 10;
}

/* Tooltip */
.lsi-tooltip {
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: var(--gipm-tooltip-bg, rgba(31, 41, 55, 0.98));
    color: var(--gipm-tooltip-text, #fff);
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: normal;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: max-content;
    max-width: 250px;
    pointer-events: none;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    z-index: 2147483647 !important;
    /* Maximum z-index value */
}

/* Tooltip Arrow */
.lsi-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: var(--gipm-tooltip-bg, rgba(31, 41, 55, 0.95)) transparent transparent transparent;
}

.lsi-tag:hover .lsi-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Auto-hint animation: periodically show a tooltip to guide users */
@keyframes lsi-tooltip-hint {

    0%,
    85%,
    100% {
        opacity: 0;
        visibility: hidden;
        transform: translateX(-50%) translateY(10px);
    }

    90%,
    95% {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }
}

/* Apply hint animation to the 3rd tag's tooltip (appears every ~8 seconds for 1.6s) */
.lsi-marquee-track>.lsi-tag:nth-child(3) .lsi-tooltip {
    animation: lsi-tooltip-hint 8s ease-in-out infinite;
    animation-delay: 3s;
    /* Wait 3s before first hint */
}

/* Stop hint animation when user hovers the wrapper (they've discovered the feature) */
.lsi-marquee-wrapper:hover .lsi-tag:nth-child(3) .lsi-tooltip {
    animation: none;
}

/* Add a subtle pulse to the 3rd tag to draw attention */
@keyframes lsi-tag-pulse {

    0%,
    85%,
    100% {
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02), 0 1px 3px rgba(0, 0, 0, 0.05);
    }

    90%,
    95% {
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.3), 0 4px 15px rgba(102, 126, 234, 0.2);
    }
}

.lsi-marquee-track>.lsi-tag:nth-child(3) {
    animation: lsi-tag-pulse 8s ease-in-out infinite;
    animation-delay: 3s;
}

.lsi-marquee-wrapper:hover .lsi-tag:nth-child(3) {
    animation: none;
}

/* Mobile Utility to Hide Elements */
@media (max-width: 768px) {
    .gipm-hide-mobile {
        display: none !important;
    }

    /* FIX: Prevent horizontal overflow on mobile completely */
    .gipm-score-container {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* Ensure marquee doesn't break layout */
    .lsi-marquee-wrapper {
        width: 100% !important;
        max-width: 100vw !important;
        overflow: hidden !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Tablet & Mobile: Switch Marquee to Vertical Grid (2 items per row) */
/* Vertical Scrolling Animation */
@keyframes lsi-marquee-scroll-vertical {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-50%);
    }
}

/* Tablet & Mobile: Vertical Scrolling Grid (2 columns) */
@media (max-width: 1024px) {
    .lsi-marquee-wrapper {
        height: 280px !important;
        /* Shows approx 4 rows */
        overflow-y: auto !important;
        /* Allow scroll */
        overflow-x: hidden !important;
        padding-top: 10px !important;
        margin-bottom: 20px;
        -webkit-overflow-scrolling: touch;
        /* Smooth iOS scroll */
        scrollbar-width: none;
        /* Firefox hide */
        -ms-overflow-style: none;
        /* IE/Edge hide */
    }

    .lsi-marquee-wrapper::-webkit-scrollbar {
        display: none;
        /* Chrome/Safari hide */
    }

    .lsi-marquee-track {
        display: flex !important;
        /* Stack parts vertically */
        flex-direction: column !important;
        width: 100% !important;
        height: max-content !important;
        /* Allow track to be full height of content */
        animation: none !important;
        /* JS Handles Scroll */
        transform: translateZ(0);
        /* Hardware accel */
        padding-left: 0 !important;
        gap: 0 !important;
    }

    /* Ensure parts are blocks containing grids */
    .lsi-marquee-part-1,
    .lsi-marquee-part-2 {
        display: grid !important;
        grid-template-columns: 1fr;
        /* 1 Item per row */
        gap: 10px;
        width: 100%;
        padding-bottom: 20px;
        /* Gap between the two sets */
    }

    .lsi-tag {
        margin: 0;
        white-space: normal;
        height: auto;
        min-height: 50px;
        /* Consistent height */
        width: 100%;
        box-sizing: border-box;
        font-size: 13px;
        justify-content: center;
        text-align: center;
        display: flex;
        align-items: center;
    }
}