/* ===== STYLES POUR LE SHORTCODE DÉTAILS PRESTATIONS ===== */ .prestations-container { max-width: 1200px; margin: 40px auto; padding: 0 20px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; } .prestations-wrapper { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; background: #fff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); overflow: hidden; min-height: 600px; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2); } /* ===== COLONNE DE GAUCHE - ONGLETS ===== */ .prestations-tabs { background: linear-gradient(135deg, #8B4513 0%, #A0522D 100%); padding: 30px 20px; color: white; } .tabs-header h3 { margin: 0 0 30px 0; font-size: 24px; font-weight: bold; text-align: center; color: white; } .tabs-nav { display: flex; flex-direction: column; gap: 15px; } .tab-btn { background: rgba(255,255,255,0.1); border: 2px solid transparent; color: white; padding: 15px 20px; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; font-size: 16px; font-weight: 500; text-align: left; position: relative; overflow: hidden; } .tab-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: left 0.5s; } .tab-btn:hover { background: rgba(255,255,255,0.2); transform: translateX(5px); } .tab-btn:hover::before { left: 100%; } .tab-btn.active { background: white; color: #8B4513; border-color: white; font-weight: bold; } /* ===== COLONNE DE DROITE - CONTENU ===== */ .prestations-content { padding: 30px; position: relative; } .tab-content { display: none; animation: fadeIn 0.5s ease-in-out; } .tab-content.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .prestation-image { margin-bottom: 25px; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } .prestation-image img { width: 100%; height: 300px; object-fit: cover; transition: transform 0.3s ease; } .prestation-image:hover img { transform: scale(1.05); } .prestation-details h4 { font-size: 28px; color: #8B4513; margin: 0 0 15px 0; font-weight: bold; } .prestation-description { font-size: 16px; line-height: 1.6; color: #666; margin-bottom: 25px; } .prestation-features h5 { font-size: 18px; color: #8B4513; margin: 0 0 15px 0; font-weight: bold; } .prestation-features ul { list-style: none; padding: 0; margin: 0 0 25px 0; } .prestation-features li { padding: 8px 0; padding-left: 25px; position: relative; color: #555; font-size: 14px; transition: all 0.2s ease; } .prestation-features li:before { content: "✓"; position: absolute; left: 0; color: #8B4513; font-weight: bold; font-size: 16px; } .prestation-features li:hover { padding-left: 30px; color: #8B4513; } .prestation-cta { text-align: center; margin-top: 30px; } .btn-prestation { display: inline-block; background: linear-gradient(135deg, #8B4513 0%, #A0522D 100%); color: white; padding: 15px 30px; border-radius: 8px; text-decoration: none; font-weight: bold; font-size: 16px; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(139,69,19,0.3); } .btn-prestation:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(139,69,19,0.4); color: white; text-decoration: none; } /* ===== ANIMATIONS D'ENTRÉE ===== */ .prestations-container * { animation-fill-mode: both; } .prestations-container.animate-in .prestations-wrapper { animation: slideUp 0.6s ease-out; } @keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* ===== RESPONSIVE DESIGN ===== */ @media (max-width: 768px) { .prestations-wrapper { grid-template-columns: 1fr; gap: 0; } .prestations-tabs { order: 2; padding: 20px; } .tabs-nav { flex-direction: row; flex-wrap: wrap; gap: 10px; } .tab-btn { flex: 1; min-width: 120px; text-align: center; padding: 10px 15px; font-size: 14px; } .prestations-content { order: 1; padding: 20px; } .prestation-image img { height: 200px; } .prestation-details h4 { font-size: 24px; } } /* ===== AMÉLIORATION POUR TABLETTES ===== */ @media (max-width: 1024px) and (min-width: 769px) { .prestations-wrapper { gap: 30px; } .prestations-tabs { padding: 25px 15px; } .prestations-content { padding: 25px; } .prestation-image img { height: 250px; } } /* ===== ACCESSIBILITÉ ===== */ .tab-btn:focus { outline: 2px solid #fff; outline-offset: 2px; } .btn-prestation:focus { outline: 2px solid #8B4513; outline-offset: 2px; } /* ===== DARK MODE SUPPORT ===== */ @media (prefers-color-scheme: dark) { .prestations-wrapper { background: #2a2a2a; border-color: rgba(255,255,255,0.1); } .prestation-description { color: #ccc; } .prestation-features li { color: #aaa; } } /* ===== IMPRESSION ===== */ @media print { .prestations-container { box-shadow: none; border: 1px solid #ccc; } .prestations-wrapper { display: block; box-shadow: none; } .tab-content { display: block !important; page-break-inside: avoid; margin-bottom: 30px; } .tabs-nav { display: none; } } https://lapoteriedesandra.fr/post-sitemap.xml 2025-06-16T13:54:47+00:00 https://lapoteriedesandra.fr/page-sitemap.xml 2025-06-16T14:28:04+00:00 https://lapoteriedesandra.fr/le_blog-sitemap.xml 2022-12-15T13:47:22+00:00 https://lapoteriedesandra.fr/category-sitemap.xml 2025-06-16T13:54:47+00:00 https://lapoteriedesandra.fr/post_tag-sitemap.xml 2025-06-16T13:54:47+00:00 https://lapoteriedesandra.fr/author-sitemap.xml 2023-05-22T20:40:22+00:00