/* ===== BENTO BOX LAYOUT ===== */
    /* Le :not(.diag-grid--home) est indispensable : ces regles portent
       !important et arrivent APRES bundle.min.css dans le document, donc
       aucune feuille externe ne pouvait les rattraper. La version bornee
       de l'accueil est simplement exclue, et sa grille 3x2 vit dans
       assets/css/home/sections.css. */
    @media (min-width: 768px) {
        .diag-grid--services:not(.diag-grid--home) {
            display: grid !important;
            grid-template-columns: repeat(2, 1fr) !important;
            gap: var(--space-md, 24px) !important;
            grid-auto-flow: dense !important;
        }

        .diag-grid--services:not(.diag-grid--home) > article:nth-child(1) {
            grid-column: span 2 !important;
            min-height: 100% !important;
        }

        .diag-grid--services:not(.diag-grid--home) > article:nth-child(7) {
            grid-column: span 2 !important;
        }
    }

    @media (min-width: 1024px) {
        .diag-grid--services:not(.diag-grid--home) {
            grid-template-columns: repeat(4, 1fr) !important;
        }
        .diag-grid--services:not(.diag-grid--home) > article:nth-child(1) {
            grid-column: span 2 !important;
            grid-row: span 2 !important;
        }
    }

    /* Styling spécifique à la carte à la une (Featured Bento) */
    .diag-card--featured {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background: linear-gradient(135deg, rgba(151, 166, 208, 0.05) 0%, rgba(13, 17, 31, 0.8) 100%) !important;
        border: 1px solid rgba(151, 166, 208, 0.25) !important;
        box-shadow: 0 10px 30px -10px rgba(151, 166, 208, 0.15);
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.4s ease, box-shadow 0.4s ease;
    }
    .diag-card--featured:hover {
        transform: translateY(-4px);
        border-color: rgba(151, 166, 208, 0.45) !important;
        box-shadow: 0 16px 45px -10px rgba(151, 166, 208, 0.25) !important;
    }
    .diag-card--featured .diag-card__icon {
        width: 52px;
        height: 52px;
        font-size: 1.5rem;
        background: rgba(151, 166, 208, 0.15);
        color: var(--accent-blue, #97a6d0);
        border: 1px solid rgba(151, 166, 208, 0.3);
    }
    .diag-card--featured .diag-card__title {
        font-size: 1.5rem;
        margin-top: 1rem;
        margin-bottom: 0.5rem;
    }
    .diag-card--featured .diag-card__desc {
        font-size: 1.05rem;
        line-height: 1.6;
        color: var(--text-secondary, #c2cce6);
    }
    .diag-card__featured-body {
        margin-top: 1.5rem;
        padding-top: 1.25rem;
        border-top: 1px dashed rgba(255, 255, 255, 0.1);
    }
    .diag-card__checklist {
        list-style: none;
        padding: 0;
        margin: 0 0 1.5rem 0;
    }
    .diag-card__checklist li {
        font-size: 0.95rem;
        color: #c2cce6;
        margin-bottom: 0.6rem;
        display: flex;
        align-items: center;
    }
    .diag-card__checklist li i {
        color: var(--accent-blue, #97a6d0);
        font-size: 1.1rem;
        margin-right: 10px;
    }
    .diag-card__action .btn {
        pointer-events: auto;
        position: relative;
        z-index: 2;
    }

    /* Le lien du titre couvre toute la carte : on garde l'affordance
       « carte cliquable » sans imbriquer de bouton dans un lien. */
    .diag-card {
        position: relative;
    }

    .diag-card__link {
        color: inherit;
        text-decoration: none;
    }

    .diag-card__link::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
    }

    /* Le bouton de dépliage n'existe qu'en mobile : au-dessus de 767 px la
       description est déjà visible, il n'aurait rien à ouvrir. */
    .diag-card__toggle {
        display: none;
    }

    /* ------------------------------------------------------------------
       MOBILE - on compose AVEC le bundle, pas contre lui.

       Le bundle traite déjà cette section sous 767 px : carte en ligne
       compacte (flex-row, min-height 64px), pastille et badge masqués, et
       surtout « #services .diag-card__desc { display: none } ».

       Ses sélecteurs sont préfixés « #services » (spécificité 1,1,0) : les
       miens, en simple classe, perdaient systématiquement. Tout ce bloc est
       donc préfixé de la même façon.

       On garde la ligne compacte - c'est elle qui limite le défilement - et
       on ajoute le bouton à droite plus la description en dessous.
       ------------------------------------------------------------------ */
    @media (max-width: 767px) {
        .diag-grid--services {
            grid-template-columns: 1fr;
        }

        /* La carte passe à la ligne pour loger la description sous le titre. */
        #services .diag-card {
            flex-wrap: wrap;
            overflow: visible;
            height: auto;
            min-height: 64px;
        }

        /* Bouton rond, collé à droite. « margin-left: auto » le pousse au
           bout de la ligne quelle que soit la longueur du titre. */
        #services .diag-card__toggle {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-left: auto;
            width: 34px;
            height: 34px;
            padding: 0;
            border: 1px solid rgba(151, 166, 208, 0.35);
            border-radius: 50%;
            background: rgba(151, 166, 208, 0.08);
            color: var(--accent-cyan, #97a6d0);
            font-size: 1rem;
            line-height: 1;
            cursor: pointer;
            /* Au-dessus du lien étendu du titre, sinon le clic partirait
               vers la page du service au lieu d'ouvrir. */
            position: relative;
            z-index: 3;
        }

        #services .diag-card__toggle i {
            transition: transform .25s ease;
        }

        #services .diag-card__toggle[aria-expanded="true"] i {
            transform: rotate(180deg);
        }

        #services .diag-card__toggle:focus-visible {
            outline: 2px solid var(--accent-cyan, #97a6d0);
            outline-offset: 2px;
        }

        #services .diag-card__body-expand {
            display: none;
        }

        #services .diag-card.est-ouverte > .diag-card__body-expand {
            display: block !important;
            flex-basis: 100%;
            order: 9;
            margin: 10px 0 2px;
            font-size: .9rem;
            line-height: 1.6;
        }

        #services .diag-card__mobile-actions {
            display: flex;
            position: relative;
            z-index: 4;
        }

        #services .diag-card__mobile-actions .btn {
            position: relative;
            z-index: 5;
            pointer-events: auto;
        }

        /* Le lien étendu du titre est retiré : il recouvrait le bouton, et
           les faire cohabiter ne tenait que sur un empilement z-        /* ===== 12 ANIMATIONS UNIQUES DÉDIÉES PAR CARTE ===== */
        .diag-card[data-service-anim] .diag-card__icon i {
            display: inline-block;
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.3s ease, filter 0.3s ease;
        }

        /* 01. Immédiat - Beam Pulse */
        .diag-card[data-service-anim="0"]:hover .diag-card__icon i {
            transform: scale(1.25) rotate(360deg);
            color: #97a6d0;
            filter: drop-shadow(0 0 12px #97a6d0);
        }

        /* 02. PC Lent - Tachometer Vibrations */
        .diag-card[data-service-anim="1"]:hover .diag-card__icon i {
            animation: anim-vibrate 0.15s infinite alternate;
            color: #6e80b4;
            filter: drop-shadow(0 0 10px #6e80b4);
        }
        @keyframes anim-vibrate {
            0% { transform: rotate(-8deg) scale(1.1); }
            100% { transform: rotate(8deg) scale(1.25); }
        }

        /* 03. Écran bleu - Glitch Skew & Blue Pulse */
        .diag-card[data-service-anim="2"]:hover .diag-card__icon i {
            animation: anim-glitch 0.35s steps(2, start) infinite;
            color: #6e80b4;
            filter: drop-shadow(0 0 15px #6e80b4);
        }
        @keyframes anim-glitch {
            0% { transform: skewX(-20deg) scale(1.1); }
            50% { transform: skewX(20deg) scale(1.25); }
            100% { transform: skewX(0deg) scale(1.15); }
        }

        /* 04. Virus - Shield Flip 180 */
        .diag-card[data-service-anim="3"]:hover .diag-card__icon i {
            transform: rotateY(180deg) scale(1.3);
            color: #ef4444;
            filter: drop-shadow(0 0 12px #ef4444);
        }

        /* 05. Données - Anti-Gravity Float */
        .diag-card[data-service-anim="4"]:hover .diag-card__icon i {
            animation: anim-float 1.2s ease-in-out infinite alternate;
            color: #6e80b4;
            filter: drop-shadow(0 0 12px #6e80b4);
        }
        @keyframes anim-float {
            0% { transform: translateY(0) scale(1.1); }
            100% { transform: translateY(-10px) scale(1.25); }
        }

        /* 06. WiFi - Wave Radar Ping */
        .diag-card[data-service-anim="5"]:hover .diag-card__icon i {
            animation: anim-ping 0.8s cubic-bezier(0, 0, 0.2, 1) infinite;
            color: #97a6d0;
            filter: drop-shadow(0 0 15px #97a6d0);
        }
        @keyframes anim-ping {
            75%, 100% { transform: scale(1.35); opacity: 0.8; }
        }

        /* 07. Apple Mac - Silky Metallic Shimmer */
        .diag-card[data-service-anim="6"]:hover .diag-card__icon i {
            transform: scale(1.2) rotate(-10deg);
            color: #6e80b4;
            filter: drop-shadow(0 0 15px #6e80b4);
        }

        /* 08. PC portable - Clamshell Open Perspective */
        .diag-card[data-service-anim="7"]:hover {
            transform: perspective(1000px) rotateX(10deg) translateY(-6px);
            border-color: rgba(151, 166, 208, 0.4) !important;
        }

        /* 09. PC fixe - Industrial Power Spin */
        .diag-card[data-service-anim="8"]:hover .diag-card__icon i {
            transform: rotate(180deg) scale(1.25);
            color: #97a6d0;
            filter: drop-shadow(0 0 12px #97a6d0);
        }

        /* 10. Installation - Gear Assembly Spin */
        .diag-card[data-service-anim="9"]:hover .diag-card__icon i {
            transform: rotate(-180deg) scale(1.25);
            color: #f97316;
            filter: drop-shadow(0 0 12px #f97316);
        }

        /* 11. Sur Place - GPS Radar Pulse */
        .diag-card[data-service-anim="10"]:hover .diag-card__icon i {
            animation: anim-bounce 0.6s ease infinite alternate;
            color: #84cc16;
            filter: drop-shadow(0 0 12px #84cc16);
        }
        @keyframes anim-bounce {
            0% { transform: translateY(0) scale(1.1); }
            100% { transform: translateY(-8px) scale(1.25); }
        }

        /* 12. Entreprises - Quantum Matrix Grid Glow */
        .diag-card[data-service-anim="11"]:hover {
            transform: translateY(-6px) scale(1.02);
            box-shadow: 0 20px 40px rgba(151, 166, 208, 0.25) !important;
            border-color: rgba(110, 128, 180, 0.5) !important;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        #services .diag-card__toggle i {
            transition: none;
        }
    }