:root {
    /* Palette actualisée pour un design plus doux (vert sauge et orange doux) */
    --primary-color: #6FA85E; /* vert sauge */
    --secondary-color: #E3A05B; /* orange doux */
    --background-color: #F9F9F9;
    --text-color: #333333;
}
body {
    font-family: Arial, sans-serif;
    color: var(--text-color);
    background-color: var(--background-color);
    margin: 0;
    line-height: 1.6;
}
header {
    background-color: #ffffff;
    border-bottom: 1px solid #e0e0e0;
    padding: 20px;
    text-align: center;
}
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
nav ul li {
    margin: 5px 10px;
}
nav ul li a {
    text-decoration: none;
    color: var(--primary-color);
    font-weight: 600;
}
nav ul li a:hover {
    color: var(--secondary-color);
}
section {
    padding: 60px 20px;
    max-width: 1200px;
    margin: auto;
}
#hero {
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
    color: #ffffff;
    border-radius: 8px;
    padding: 80px 20px;
    text-align: center;
    margin-bottom: 40px;
}
#hero h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}
#hero p {
    font-size: 1.2rem;
    max-width: 800px;
    margin: auto;
}
/* Affichage des produits du Top 10 (hors top 3). Un produit par ligne pour une meilleure lisibilité. */
.product-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
/* Carte produit standard pour les positions 4 à 10 */
.product-card {
    position: relative;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    /* espace interne uniforme : le numéro est positionné en absolu, donc pas besoin de marge supplémentaire */
    padding: 20px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Image à l'intérieur des cartes produits standard */
.product-card img {
    width: 100%;
    /* Hauteur fixe pour éviter que l’image n’étire la carte ; la largeur s’adapte automatiquement */
    height: auto;
    border-radius: 8px;
    margin-bottom: 12px;
    object-fit: contain;
}
/* Numéro de classement pour les cartes produits standard */
.product-card .ranking {
    position: absolute;
    top: 12px;
    left: 12px;
    background-color: var(--primary-color);
    color: #ffffff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.9rem;
}
/* Effet au survol des cartes produit */
.product-link:hover .product-card {
    transform: translateY(-4px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Style de l’ancre enveloppant chaque produit pour qu’elle ne change pas l’apparence du contenu */
.product-link {
    text-decoration: none;
    color: inherit;
    display: block;
}
/* Titre des produits standard : encadré pour attirer l’attention */
.product-card h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.1rem;
    background-color: #fefdfa;
    border: 1px solid var(--primary-color);
    border-left-width: 4px;
    padding: 8px 12px;
    border-radius: 4px;
    display: inline-block;
    width: auto;
}
.product-card p {
    margin: 5px 0;
    font-size: 0.9rem;
}

/* Description longue pour les produits */
.description-long {
    margin: 8px 0;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--text-color);
}
.stars {
    color: var(--secondary-color);
    font-size: 1rem;
}
.feature-list {
    list-style: none;
    padding-left: 0;
}
.feature-list li {
    padding-left: 20px;
    position: relative;
    margin-bottom: 6px;
}
.feature-list li::before {
    content: "✔";
    position: absolute;
    left: 0;
    color: var(--primary-color);
}

/* Prix stylé pour attirer l'œil et faciliter la comparaison */
.price {
    color: var(--primary-color);
    font-weight: 600;
    margin-top: 8px;
    font-size: 0.95rem;
}
.table-container {
    overflow-x: auto;
}
table {
    /* pleine largeur et espacement entre les cellules */
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.9rem;
}
th,
td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
}
thead th {
    /* en-tête avec couleur principale pour meilleure lisibilité */
    background-color: var(--primary-color);
    color: #ffffff;
    font-weight: 600;
}

tbody tr:nth-child(even) {
    /* bandes alternées pour aider la lecture */
    background-color: #f8f8f8;
}

tbody tr:nth-child(-n+3) {
    /* surligner les trois premières lignes du tableau comparatif */
    background-color: #f4fff4;
    font-weight: 600;
}

tbody td:last-child {
    /* mettre en avant la colonne des prix */
    font-weight: 600;
    color: var(--primary-color);
}
footer {
    background-color: #ffffff;
    border-top: 1px solid #e0e0e0;
    text-align: center;
    padding: 20px;
    font-size: 0.9rem;
}
.button-primary {
    display: inline-block;
    padding: 12px 24px;
    background-color: var(--primary-color);
    color: #ffffff;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 20px;
}
.button-primary:hover {
    background-color: var(--secondary-color);
}

/* Bouton secondaire pour les liens Amazon des top 3 */
.button-secondary {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--secondary-color);
    color: #ffffff;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 12px;
}
.button-secondary:hover {
    background-color: var(--primary-color);
}

/* Conteneur pour les trois meilleurs produits. Utilisation d'une grille pour aligner
   les éléments : le top 1 est centré et légèrement plus haut que les deux autres. */
.top-products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

/* Positionnement spécifique des cartes du top 3. Le premier élément (top 1) est
   placé au milieu et légèrement surélevé. Les second et troisième éléments
   apparaissent de part et d'autre en dessous. */
.top-products .top-card:nth-child(1) {
    grid-column: 2;
    grid-row: 1;
    /* léger déplacement vers le haut pour mettre en valeur le premier */
    transform: translateY(-20px);
}
.top-products .top-card:nth-child(2) {
    grid-column: 1;
    grid-row: 1;
}
.top-products .top-card:nth-child(3) {
    grid-column: 3;
    grid-row: 1;
}

/* Carte dédiée aux trois meilleurs produits. */
.top-card {
    position: relative;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    padding: 20px;
    /* largeur et flexibilité prises en charge par la grille parente : on laisse
       le navigateur gérer la largeur. */
    flex: 1 1 auto;
    max-width: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.top-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.top-card img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 12px;
    object-fit: cover;
}

/* Lien englobant l’image dans les top 3 : occupe toute la largeur pour
   permettre au clic de couvrir toute l’image. */
.top-card a {
    display: block;
    text-decoration: none;
}

/* L’image dans un lien doit également s’étendre à la largeur du conteneur */
.top-card a img {
    width: 100%;
    height: auto;
}
.top-card .ranking {
    position: absolute;
    top: 12px;
    left: 12px;
    background-color: var(--primary-color);
    color: #ffffff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.9rem;
}
.top-card h3 {
    margin: 8px 0;
    font-size: 1.2rem;
    background-color: #fefdfa;
    border: 1px solid var(--primary-color);
    border-left-width: 4px;
    padding: 8px 12px;
    border-radius: 4px;
    display: inline-block;
}
.top-card .description-long {
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 8px 0;
    color: var(--text-color);
}
.top-card .stars {
    color: var(--secondary-color);
    font-size: 1rem;
    margin: 4px 0;
}
.top-card .price {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 1rem;
    margin-top: 4px;
}
/* Réorganisation des top cards en vue mobile :
   lorsque la largeur est inférieure à 900 px, on repasse en colonne et on
   réinitialise la translation pour éviter le décalage vertical. */
@media (max-width: 900px) {
    .top-products {
        display: flex;
        flex-direction: column;
    }
    .top-products .top-card {
        flex: 1 1 100%;
        max-width: 100%;
        transform: none;
    }
}
@media (max-width: 600px) {
    nav ul {
        flex-direction: column;
        align-items: center;
    }
}