/* ============================================== FICHES MODERNISÉES — fiche_modern.css À inclure APRÈS css_2.css dans le Garde la palette orange/blanc/gris existante. ============================================== */ /* Import d'une police plus moderne mais neutre */ @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap'); /* ----------------------------------------------- Conteneur principal de la fiche ----------------------------------------------- */ .fiche_wrap { font-family: 'Nunito', Verdana, sans-serif; max-width: 960px; margin: 0 auto; padding: 0 10px 30px; } /* ----------------------------------------------- Titre principal (h1) ----------------------------------------------- */ .fiche_titre_principal { font-size: 26px; font-weight: 700; color: #CC6600; margin: 14px 0 18px; padding: 10px 14px; border-left: 5px solid #FF9933; background: linear-gradient(to right, #fff8f0, #ffffff); border-radius: 0 6px 6px 0; text-shadow: 1px 1px 0 rgba(255,180,80,0.3); line-height: 1.2; } /* ----------------------------------------------- Navigation précédent / suivant ----------------------------------------------- */ .fiche_nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; margin-top: 14px; gap: 8px; } .fiche_nav_btn { display: inline-block; padding: 6px 14px; font-size: 13px; font-weight: 600; border-radius: 20px; text-decoration: none; transition: background 0.2s, color 0.2s, transform 0.1s; border: 2px solid #FF9933; color: #FF9933; background: #ffffff; } .fiche_nav_btn:hover { background: #FF9933; color: #ffffff; transform: scale(1.03); } .fiche_nav_disabled { border-color: #ddd; color: #bbb; cursor: default; } .fiche_nav_disabled:hover { background: #ffffff; color: #bbb; transform: none; } /* ----------------------------------------------- Hero layout : grande photo | infos | artwork ----------------------------------------------- */ .fiche_hero { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 24px; } /* Grande photo à gauche (issue de photo_fiches/) */ .fiche_hero_img { flex: 0 0 auto; text-align: center; } .fiche_hero_photo { max-width: 300px; max-height: 400px; width: auto; height: auto; border-radius: 10px; border: 2px solid #e0d8ce; box-shadow: 0 6px 24px rgba(0,0,0,0.18); display: block; transition: transform 0.2s, box-shadow 0.2s; } .fiche_hero_photo:hover { transform: scale(1.02); box-shadow: 0 10px 32px rgba(200,100,0,0.2); } .fiche_hero_noimg { width: 200px; height: 220px; display: flex; align-items: center; justify-content: center; background: #f0ede8; border-radius: 10px; color: #aaa; font-size: 13px; border: 2px dashed #ddd; } /* Colonne infos (milieu) — largeur normale */ .fiche_col_info { flex: 1 1 260px; min-width: 230px; display: flex; flex-direction: column; gap: 14px; } /* .fiche_col_info_narrow supprimé — artwork déplacé en bas */ /* Artwork en bas de page, centré */ .fiche_artwork_bottom { text-align: center; margin: 40px auto 8px; display: flex; justify-content: center; } .fiche_artwork_bottom_img { max-width: 860px; width: auto; height: auto; border-radius: 10px; border: 2px solid #e0d8ce; box-shadow: 0 6px 24px rgba(0,0,0,0.15); display: block; margin: 0 auto; transition: transform 0.2s, box-shadow 0.2s; } .fiche_artwork_bottom_img:hover { transform: scale(1.01); box-shadow: 0 10px 32px rgba(200,100,0,0.2); } /* Nav en bas de page */ .fiche_nav_bottom { margin-top: 20px; padding-top: 16px; border-top: 1px solid #e8e0d8; } /* Bloc achat en ligne (card style) */ .fiche_achat_body { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 12px 16px; } .fiche_achat_btn { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 6px; font-size: 13px; font-weight: 700; text-decoration: none; border: 2px solid #e0d8ce; background: #fafafa; color: #333; transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s; } .fiche_achat_btn:hover { border-color: #FF9933; box-shadow: 0 2px 8px rgba(255,153,0,0.15); transform: scale(1.02); background: #fff; } .fiche_achat_logo { height: 28px; width: auto; display: block; object-fit: contain; } .fiche_achat_btn span { color: #CC6600; font-weight: 700; } /* ----------------------------------------------- Cards (blocs d'infos) ----------------------------------------------- */ .fiche_card { border-radius: 8px; overflow: hidden; border: 1px solid #e8e0d8; box-shadow: 0 2px 8px rgba(0,0,0,0.07); background: #ffffff; } .fiche_card_header { background: linear-gradient(135deg, #f3f2f2 0%, #ede8e0 100%); color: #CC6600; font-size: 14px; font-weight: 700; padding: 9px 14px; border-bottom: 2px solid #FF9933; text-transform: uppercase; letter-spacing: 0.04em; text-shadow: 1px 1px 0 rgba(255,255,255,0.8); } .fiche_card_body { padding: 14px 16px; } /* ----------------------------------------------- Liste de définitions (dt/dd) ----------------------------------------------- */ .fiche_dl { margin: 0; padding: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 14px; } .fiche_dl dt { font-weight: 700; color: #555; white-space: nowrap; padding: 3px 0; } .fiche_dl dd { margin: 0; color: #222; padding: 3px 0; border-bottom: 1px dotted #f0ebe3; } .fiche_dl dd a { color: #CC6600; text-decoration: none; } .fiche_dl dd a:hover { text-decoration: underline; } /* Badge "Voir aussi" */ .fiche_tag_voir { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 10px; background: #FF9933; color: #fff !important; margin-left: 5px; text-decoration: none !important; vertical-align: middle; } /* Résumé */ .fiche_resume { margin-top: 12px; padding: 10px 12px; background: #fffdf8; border-left: 3px solid #FF9933; border-radius: 0 4px 4px 0; font-size: 13px; color: #333; } .fiche_resume strong { display: block; margin-bottom: 4px; color: #CC6600; } .fiche_resume p { margin: 0; line-height: 1.6; } /* Liens de recherche */ .fiche_search_links { margin-top: 12px; font-size: 13px; color: #777; } .fiche_search_links a { color: #CC6600; text-decoration: none; margin: 0 3px; } .fiche_search_links a:hover { text-decoration: underline; } /* Bouton voir article */ .fiche_btn_article { display: inline-block; margin-bottom: 12px; padding: 5px 14px; font-size: 13px; font-weight: 700; border-radius: 5px; border: 2px solid #CC6600; color: #CC6600; background: #fff8f0; text-decoration: none; transition: background 0.2s, color 0.2s; } .fiche_btn_article:hover { background: #CC6600; color: #fff; } /* Bouton vidéo */ .fiche_btn_video { display: inline-block; margin-top: 10px; padding: 5px 14px; font-size: 13px; font-weight: 700; border-radius: 5px; background: #FF9933; color: #fff; text-decoration: none; transition: background 0.2s; } .fiche_btn_video:hover { background: #CC6600; } /* ----------------------------------------------- Colonne droite : vignettes ----------------------------------------------- */ .fiche_card_achat .fiche_card_body { text-align: center; } .fiche_shop_logo { display: block; margin: 6px auto; } .fiche_vignettes_side { display: flex; flex-direction: column; align-items: center; gap: 10px; } .fiche_vignette_img { max-width: 155px; height: auto; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 2px 6px rgba(0,0,0,0.12); transition: transform 0.2s, box-shadow 0.2s; display: block; } .fiche_vignette_img:hover { transform: scale(1.04); box-shadow: 0 4px 14px rgba(0,0,0,0.2); } /* ----------------------------------------------- Galeries photos (pleine largeur sous le corps) ----------------------------------------------- */ .fiche_galerie_section { margin-top: 24px; margin-bottom: 8px; border-radius: 8px; overflow: hidden; border: 1px solid #e8e0d8; box-shadow: 0 2px 8px rgba(0,0,0,0.07); background: #fff; } .fiche_galerie_section:last-of-type { margin-bottom: 32px; } .fiche_galerie_grid { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px; } .fiche_galerie_item { display: block; line-height: 0; } .fiche_galerie_thumb { height: 140px; /* ← 140px au lieu de 80px */ width: auto; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,0.1); transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s; } .fiche_galerie_thumb:hover { transform: scale(1.06); box-shadow: 0 4px 14px rgba(200,100,0,0.25); border-color: #FF9933; } .fiche_navig_help { font-size: 12px; color: #999; padding: 4px 14px 0; } .fiche_source_photos { font-size: 12px; color: #999; padding: 6px 14px 10px; text-align: right; } /* Légende sous vignette côté */ .fiche_clique { font-size: 11px; color: #aaa; text-align: center; } /* ----------------------------------------------- Responsive : mobile (<600px) ----------------------------------------------- */ @media (max-width: 700px) { .fiche_hero { flex-direction: column; align-items: center; } .fiche_hero_img, .fiche_col_artwork { width: 100%; text-align: center; } .fiche_hero_photo, .fiche_artwork_photo { max-width: 100%; } .fiche_col_artwork { order: 3; /* artwork en dernier sur mobile */ } .fiche_titre_principal { font-size: 20px; } .fiche_galerie_thumb { height: 90px; } .fiche_achat_bar { justify-content: center; } } /* ============================================== MODALE "VOIR AUSSI" — remplace Highslide iframe ============================================== */ .voiraussi-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 9998; backdrop-filter: blur(2px); } .voiraussi-overlay.open { display: flex; align-items: center; justify-content: center; } .voiraussi-modal { background: #fff; border-radius: 10px; box-shadow: 0 8px 40px rgba(0,0,0,0.3); width: 90%; max-width: 700px; max-height: 80vh; display: flex; flex-direction: column; overflow: hidden; border: 2px solid #FF9933; } .voiraussi-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; background: linear-gradient(135deg, #f3f2f2, #ede8e0); border-bottom: 2px solid #FF9933; font-weight: 700; font-size: 14px; color: #CC6600; text-transform: uppercase; letter-spacing: 0.04em; } .voiraussi-close { cursor: pointer; font-size: 20px; color: #CC6600; line-height: 1; border: none; background: none; padding: 0 4px; transition: color 0.2s; } .voiraussi-close:hover { color: #333; } .voiraussi-modal iframe { flex: 1; border: none; width: 100%; height: 60vh; }