/* ==========================================================================
   STYLE DE LA PAGE ORDINATEURS - FIX COMP SERVICE
   Langue : Français
   ========================================================================== */

/* --- Héro/En-tête de la page --- */
.section-entete-ordinateurs {
    padding: 60px 0;
    background: radial-gradient(circle at 50% 100%, rgba(var(--couleur-accent-jaune-rgb), 0.05) 0%, transparent 60%),
        var(--couleur-fond-claire);
}

/* --- Barre d'Onglets Style Catalogue (Option B) --- */
.nav-onglets-catalogue {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-link-catalogue {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--couleur-texte-secondaire, #6c757d);
    font-family: var(--police-titres);
    font-weight: 700;
    font-size: 0.95rem;
    padding: 10px 15px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: var(--transition-douce);
}

.nav-link-catalogue i {
    font-size: 1.1rem;
    color: var(--couleur-texte-secondaire, #6c757d);
    transition: var(--transition-douce);
}

.nav-link-catalogue:hover {
    color: #000000;
    border-bottom-color: rgba(0, 0, 0, 0.2);
}

.nav-link-catalogue:hover i {
    color: var(--couleur-accent-jaune);
}

.nav-link-catalogue.active {
    color: #000000;
    border-bottom: 2px solid #000000;
}

.nav-link-catalogue.active i {
    color: var(--couleur-accent-jaune);
}

/* --- Grille des produits (Affichage 3 par 3 vertical) --- */
.section-liste-produits {
    background-color: var(--couleur-fond-alternative) !important;
}

.carte-ordinateur {
    background-color: var(--couleur-fond-carte);
    border: 1px solid var(--couleur-bordure);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    transition: var(--transition-douce);
}

.carte-ordinateur:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
    border-color: var(--couleur-accent-jaune);
}

/* Format vertical optimal pour les grilles à 3 colonnes */
.ordinateur-visuel {
    width: 100%;
    min-height: 160px;
    border-right: none;
    border-bottom: 1px solid var(--couleur-bordure);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Infos et spécifications */
.ordinateur-nom {
    font-family: var(--police-titres);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--couleur-texte-principal);
}

.ordinateur-categorie {
    font-size: 0.82rem;
    font-weight: 600;
}

/* Liste des spécifications techniques */
.liste-specs {
    list-style: none;
}

.liste-specs li {
    font-size: 0.88rem;
    color: var(--couleur-texte-secondaire);
    margin-bottom: 8px;
    line-height: 1.4;
}

.liste-specs li strong {
    color: var(--couleur-texte-principal);
    margin-right: 4px;
}

.liste-specs li i {
    color: #cca200;
    /* Jaune à fort contraste pour l'accessibilité */
}

/* Bloc d'achat et prix */
.prix-valeur {
    font-family: var(--police-titres);
    font-weight: 800;
    font-size: 1.35rem;
    color: var(--couleur-texte-principal);
    letter-spacing: -0.5px;
}

.bouton-achat-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #111113;
    color: #ffffff !important;
    font-family: var(--police-titres);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none;
    transition: var(--transition-douce);
    border: 1px solid #111113;
}

/* Le clic sur "Add" affiche temporairement "Added!" (texte plus long) : sans
   largeur réservée, le bouton grossit et pousse/compresse le bloc prix à côté
   (justify-content-between dans .ordinateur-achat), d'où le décalage visible. */
.btn-add-cart.bouton-achat-whatsapp {
    min-width: 108px;
}

.bouton-achat-whatsapp:hover {
    background-color: var(--couleur-accent-jaune);
    color: #000000 !important;
    border-color: var(--couleur-accent-jaune);
    box-shadow: 0 4px 15px rgba(var(--couleur-accent-jaune-rgb), 0.3);
}

/* ============================================================
   COMPARATEUR — TENUE DU TABLEAU, SURTOUT SUR TÉLÉPHONE

   ------------------------------------------------------------
   LE BOGUE CORRIGÉ ICI
   ------------------------------------------------------------
   Ce bloc visait auparavant « #compareModal ». Or la fenêtre
   s'appelle « #fenetreComparaison » dans la vue : aucune de ces
   règles ne s'appliquait donc, et le tableau s'affichait sans
   aucun ajustement mobile. Les textes longs — références de
   processeur, cartes graphiques — sortaient de leur colonne.

   ------------------------------------------------------------
   POURQUOI table-layout: fixed, ET POURQUOI ÇA NE SUFFIT PAS
   ------------------------------------------------------------
   « fixed » donne la même largeur à chaque produit : c'est ce
   qui rend la comparaison lisible, colonne par colonne. Mais il
   fige aussi la largeur des cellules, et un mot trop long la
   déborde au lieu de la faire grandir.

   D'où overflow-wrap: anywhere, qui autorise la coupure d'un mot
   à n'importe quel caractère. « RTX 4060 Laptop GPU » passe alors
   à la ligne au lieu de sortir du cadre.

   On garde volontairement les trois colonnes côte à côte plutôt
   que de faire défiler horizontalement : comparer suppose de voir
   les produits en même temps.
   ============================================================ */

#fenetreComparaison .table {
    table-layout: fixed;
    width: 100%;
    margin-bottom: 0;
}

#fenetreComparaison th,
#fenetreComparaison td {
    overflow-wrap: anywhere;   /* coupe un mot trop long */
    word-break: break-word;    /* même idée, pour les navigateurs anciens */
    vertical-align: middle;
}

/* La première colonne ne porte que les libellés (Price,
   Processor…) : elle n'a pas besoin d'autant de place que les
   produits. On la réduit pour rendre le reste aux colonnes qui
   comptent. */
#fenetreComparaison thead th:first-child,
#fenetreComparaison tbody th {
    width: 22%;
    text-align: left;
    white-space: normal;
}

/* Le nom du produit sert d'en-tête de colonne : il doit rester
   lisible même sur deux ou trois lignes. */
#fenetreComparaison thead th {
    line-height: 1.25;
}


/* ------------------------------------------------------------
   TÉLÉPHONE — quatre colonnes dans 360 pixels

   À cette largeur, chaque produit dispose d'environ 80 pixels.
   On réduit donc le texte et les marges intérieures : mieux vaut
   un texte petit mais entier qu'un texte tronqué.
   ------------------------------------------------------------ */
@media (max-width: 768px) {

    #fenetreComparaison .modal-body {
        padding: 0.75rem 0.5rem;
    }

    #fenetreComparaison .table {
        font-size: 0.72rem;
    }

    #fenetreComparaison th,
    #fenetreComparaison td {
        padding: 0.4rem 0.25rem;
    }

    #fenetreComparaison thead th:first-child,
    #fenetreComparaison tbody th {
        width: 26%;
        font-size: 0.68rem;
    }
}

/* ============================================================
   PRODUIT ARRIVANT DE LA RECHERCHE
   Le visiteur clique sur un résultat : on encadre la carte en
   jaune quelques secondes pour qu'il la repère immédiatement.
   ============================================================ */
.produit-surligne {
    outline: 3px solid #ffd200;
    outline-offset: 4px;
    border-radius: 12px;
    animation: pulsation-produit 1.2s ease-in-out 3;
}

@keyframes pulsation-produit {
    0%,
    100% { box-shadow: 0 0 0 0 rgba(255, 210, 0, 0.6); }
    50%  { box-shadow: 0 0 0 14px rgba(255, 210, 0, 0); }
}

/* ============================================================
   ONGLETS DE CATÉGORIES
   Ces onglets sont des liens (<a>) et non des boutons : cliquer
   recharge la page avec la catégorie choisie dans l'adresse.
   Le navigateur souligne les liens par défaut, ce qu'on retire
   ici pour retrouver l'aspect d'un onglet.
   ============================================================ */
.nav-link-catalogue {
    text-decoration: none;
}

.nav-link-catalogue:hover {
    text-decoration: none;
}