/* ============================================== 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; 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; } /* ----------------------------------------------- Layout principal : 2 colonnes ----------------------------------------------- */ .fiche_body { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; } .fiche_col_info { flex: 1 1 0; min-width: 280px; display: flex; flex-direction: column; gap: 16px; } .fiche_col_side { flex: 0 0 175px; min-width: 155px; display: flex; flex-direction: column; gap: 14px; } /* ----------------------------------------------- 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; border-radius: 8px; overflow: hidden; border: 1px solid #e8e0d8; box-shadow: 0 2px 8px rgba(0,0,0,0.07); background: #fff; } .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: 620px) { .fiche_body { flex-direction: column-reverse; /* vignette en haut sur mobile */ } .fiche_col_side { flex-direction: row; flex-wrap: wrap; justify-content: center; width: 100%; } .fiche_titre_principal { font-size: 20px; } .fiche_galerie_thumb { height: 90px; } } /* ============================================== HOMOGÉNÉISATION DES COINS ARRONDIS Appliqué au cadre général du site ============================================== */ div#container { border-radius: 0 0 10px 10px; /* coins bas arrondis (le haut est sous le header) */ border-top: none; /* le header colle au dessus, pas de double bordure */ overflow: hidden; } div#bottom { border-radius: 0 0 10px 10px; overflow: hidden; } /* Le header nav colle au container sans espace */ header { border-radius: 0; } /* ============================================== 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; }