/*
   WISHLIST.CSS — Styles spécifiques à wishlist.html
 */


/* 
   CONTENU PRINCIPAL
   padding-top pour passer sous le hamburger fixe.
 */
.contenu-wishlist {
    padding-top: 70px;
    padding-bottom: 30px;
}


/* 
   ITEM WISHLIST — conteneur image + détails
   flex-wrap:wrap = sur mobile, image au-dessus, texte en dessous.
   align-items:stretch = les deux colonnes ont la même hauteur.
 */
.wishlist-item {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 50px;
    margin: 50px auto;
    max-width: 1000px;
    padding: 0 40px;
    flex-wrap: wrap;
}


/* ------------------------------------------------------------
   CARTE IMAGE + OVERLAY
   position:relative est REQUIS pour que l'article en
   position:absolute se positionne à l'intérieur de la carte.
   ------------------------------------------------------------ */
.carte {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    min-width: 300px;
    max-width: 400px;
    width: 100%;
    height: 350px;          /* Hauteur fixe pour uniformiser toutes les cartes */
}

.carte img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 15px;
    object-fit: cover;      /* Remplit sans déformer ou couper */
    transition: transform 0.4s ease;
}

/* L'overlay monte depuis le bas au hover */
.carte article {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 10%;
    background: linear-gradient(45deg, #ffffff 40%, transparent);
    transform: translateY(100%); /* Caché sous la carte par défaut */
    transition: transform 0.4s ease;
}

.carte p {
    opacity: 0;
    font-size: 14px;
    margin: 0;
    transition: opacity 0.4s ease;
}

.carte:hover article { transform: translateY(0); }
.carte:hover p       { opacity: 1; }
.carte:hover img     { transform: scale(1.05); }


/* ------------------------------------------------------------
   PANNEAU DE DÉTAILS
   flex:1 = prend tout l'espace restant après la carte.
   min-width empêche le panneau de devenir illisible avant de wrapper.
   ------------------------------------------------------------ */
.details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    flex: 1;
    min-width: 280px;
    background-color: #ffffff;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    text-align: left;
    transition: transform 0.4s ease;
}

.details:hover {
    transform: scale(1.02);
}

.details ul {
    padding-left: 0;
    list-style-position: inside;
    line-height: 1.8;
    margin: 0;
    font-family: var(--font-text);
    font-size: 15px;
    color: #444;
}


/* ------------------------------------------------------------
   TITRE H2
   CORRECTION CONTRASTE : #E6B000 au lieu de #FFC300.
   Le jaune plus foncé passe mieux sur fond blanc.
   text-shadow ajoute un léger relief pour le détacher encore plus.
   ------------------------------------------------------------ */
.details h2 {
    font-family: var(--font-title);
    font-weight: 200;
    font-size: 28px;
    color: #E6B000;            
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); /* Léger relief */
    margin: 0;
}


/* ------------------------------------------------------------
   BADGE PRIX — La pastille visible en dessous du titre
   Sors le prix de la liste pour lui donner de l'importance visuelle.
   Le prix et le bouton sont les éléments les plus importants d'une wishlist.
   ------------------------------------------------------------ */
.badge-prix {
    display: inline-block;
    background-color: #fff8e1; 
    color: #E6B000;
    font-family: var(--font-text);
    font-weight: bold;
    font-size: 18px;
    padding: 6px 16px;
    border-radius: 20px;
    border: 1.5px solid #E6B000;
}


/* 
   TAGS DE CATÉGORIE
   Petites pastilles colorées pour catégoriser chaque item.
   */
.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag {
    display: inline-block;
    background-color: #f4f7f9;
    color: #666;
    font-family: var(--font-text);
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 20px;
}


/*
   DESCRIPTION COURTE
   */
.description-courte {
    font-family: var(--font-text);
    font-size: 14px;
    color: #888;
    font-style: italic;
    margin: 0;
}


/*
   BOUTON LIEN
 */
.btn-lien {
    display: inline-block;
    align-self: flex-start;     /* Ne s'étire pas sur toute la largeur */
    padding: 10px 22px;
    border: 2px solid #E6B000;
    border-radius: 25px;
    color: #E6B000;
    text-decoration: none;
    font-family: var(--font-text);
    font-size: 14px;
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-lien:hover {
    background-color: #E6B000;
    color: white;
}