/* Theme Name: twentytwentyone-child Description: Author: gwladys Template: twentytwentyone Version: 1.0.0 /*header de base */ .site-header { display: flex; justify-content: space-between; align-items: center; background-color: #f3ebe5; border-bottom: 0px solid #ddd; padding: 0 80px; position: fixed; top: 0; width: 100%; z-index: 1000; box-sizing: border-box; margin-top: auto; margin-bottom: auto; max-width: 1600px; height: 100px; overflow: hidden; } header { margin-bottom: 5mm !important; padding-bottom: 0; } @media screen and (max-width: 1024px) { main, .site-content, .page-content, .content, .entry-content { padding-top: 100px !important; /* Essaie aussi 120px si besoin */ } } .nav-left { display: flex; align-items: center; margin-left: 160px; margin-top: 0px; } .nav-left ul { list-style: none; display: flex; gap: 48px; padding: 0; margin: 0; margin-right: 15px; } .nav-left li { display: inline; } .header-link { font-family: "Montserrat", sans-serif; font-weight: 500; font-size: 11.5px; text-transform: uppercase; color: #D4AB5D; text-decoration: none; padding-top: 0px; padding-bottom: 8px; } .header-link:hover { text-decoration: underline; } .logo-container { display: flex; justify-content: center; align-items: center; flex-shrink: 0; margin-left: 0px; margin-top: 0px; } .site-logo { max-height: 50px; width: auto; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 28px; margin-top: 0px; } .nav-right ul { list-style: none; display: flex; gap: 38px; margin: 0; padding: 0; margin-top: 0px; } .nav-right li { display: inline; } .social-icons { display: flex; gap: 5px; margin-top: 0px; } .social-icons img { width: 20px; height: 20px; } /* Par défaut, masquer le menu mobile */ .mobile-menu { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; /* Couvrir toute la hauteur de la page */ background-color: rgba(243, 235, 229, 0.9); /* Fond avec la couleur du header et transparence */ z-index: 1000; /* Assurer que le menu se superpose */ padding: 30px 0; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); overflow-y: auto; /* Permettre le défilement vertical */ } /* Afficher le menu mobile lorsque la classe 'open' est ajoutée */ .mobile-menu.open { display: block; } /* Style du bouton hamburger */ .hamburger-menu { display: none; /* Masqué par défaut */ font-size: 30px; cursor: pointer; position: absolute; top: 20px; right: 20px; /* Positionné à droite de l'écran */ z-index: 1001; /* S'assurer qu'il soit au-dessus du menu */ } /* Afficher le bouton hamburger sur les écrans petits (moins de 1024px) */ @media (max-width: 1024px) { .hamburger-menu { display: block; } /* Masquer la navigation de droite et de gauche sur les petits écrans */ .nav-left, .nav-right { display: none; } /* Menu mobile */ .mobile-menu ul { list-style-type: none; padding: 0; margin: 0; } .mobile-menu li { margin: 10px 0; /* Espacer les éléments */ } .mobile-menu a { text-decoration: none; font-size: 15px; color: #333; padding: 15px; display: block; text-align: center; border-bottom: 0px solid #ddd; } .mobile-menu a:hover { background-color: #D4AB5D; /* Changer la couleur au survol */ color: white; } /* Ajouter du style aux icônes de réseaux sociaux dans le menu mobile */ .social-icons { display: flex; justify-content: center; margin-top: 20px; } .social-icons a { margin: 0 10px; } .social-icons a img { width: 30px; height: 30px; } /* Positionner la croix de fermeture correctement */ .close-menu { font-size: 20px; color: #333; position: absolute; top: 20px; /* Positionner en haut */ left: 20px; /* Laisser un petit espace à gauche */ cursor: pointer; z-index: 1002; /* La croix doit être au-dessus du menu */ } } /* Ajouter cette section pour forcer la conversion au format burger lorsque l'écran devient trop étroit */ @media (max-width: 1024px) { .site-header { display: flex; justify-content: space-between; align-items: center; background-color: #f3ebe5; padding: 0 32px; /* Réduire l'espace horizontal pour les petits écrans */ } /* Navigation à gauche et à droite */ .nav-left, .nav-right { display: none; /* Cacher les éléments de navigation dès que l'écran est trop petit */ } .hamburger-menu { display: block; /* Afficher le menu burger dès que l'espace devient trop petit */ position: absolute; top: 20px; right: 20px; /* Placer le bouton hamburger tout à droite */ } .mobile-menu { display: none; /* Garder le menu mobile masqué par défaut */ } .mobile-menu.open { display: block; /* Lorsque le menu burger est ouvert, afficher le menu */ } } /* Optionnel: Ajustement spécifique pour des écrans plus petits, par exemple sous 767px */ @media (max-width: 767px) { .site-header { padding: 0 15px; /* Réduire davantage l'espace de padding */ } } body { display: flex; flex-direction: column; min-height: 100vh; /* Assure que le body prend au moins la hauteur de l'écran */ margin: 0; } html, body { margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; width: 100vw !important; overflow-x: hidden; } header { position: fixed; top: 0; left: 0; width: 100%; z-index: 10000; } /* Crée un espacement sous le header équivalent à sa hauteur */ body::before { content: ""; display: block; height: 100px; /* ← adapte à la hauteur réelle de ton header */ } body::before, body::after { content: ""; display: block; width: 2mm; height: 100vh; position: fixed; top: 0; background: white; /* ou la couleur du fond du site */ z-index: 9999; } body::before { left: 0; } body::after { right: 0; } /* Image pleine largeur sous le header */ .home-image { margin-top: 80px; margin-bottom: 5px; padding-top: 0; width: 100%; height: 200px; /* Ajuste la hauteur selon tes préférences */ overflow: hidden; } .home-image img { width: 100%; height: 100%; object-fit: cover; /* Permet de garder un bon cadrage sans déformation */ } /* Section Nos Univers */ .nos-univers { margin-top: 30px; margin-left: 30px text-align: left; padding: 20px 20px; } .section-title { font-family: "Minion Pro", serif; font-weight: bold; color: #32473d; font-size: 24px; margin-left: 17%; margin-bottom: 5px; } .univers-row { display: flex; justify-content: center; gap: 20px; } .univers-item img { width: 300px; border-radius: 10px; } .univers-button { text-align: right; margin-top: 0px; margin-right: 16.5% } .btn { display: inline-block; padding: 10px 20px; background-color: #6D8B74; color: white; text-decoration: none; border-radius: 5px; } /* Section Texte + Image */ .texte-image { display: flex; align-items: center; /* Centre verticalement */ padding: 50px 0; /* Supprime le padding latéral */ overflow: hidden; /* Cache la partie de l'image qui dépasse */ position: relative; } .image-texte-left { width: 50%; position: relative; display: flex; justify-content: flex-end; } .image-texte-left img { width: 50%; /* Augmente la taille pour qu'elle dépasse */ max-width: none; object-fit: cover; position: relative; left: -50%; /* Décale vers la gauche pour qu'elle sorte de l'écran */ } .texte-right { width: 50%; padding: 20px; margin-right: 10%; } /* Titre H2 avec Minion Pro Bold */ .texte-right h2 { font-family: 'Minion Pro', serif; font-weight: bold; font-size: 24px; color: #32473d; margin-bottom: 15px; } /* Paragraphe P avec Lato Regular */ .texte-right p { font-family: 'Lato', sans-serif; font-weight: normal; font-size: 12px; margin-bottom: 15px; } /* Bandeau vert */ .bandeau-vert { background-color: #6D8B74; color: white; display: flex; align-items: center; padding: 60px 30px; margin-bottom: 35px; } .texte-gauche { margin-left: 10%; margin-right: 15%; width: 60%; } /* Titre H2 avec Minion Pro Bold */ .texte-gauche h2 { font-family: 'Minion Pro', serif; font-weight: bold; font-size: 24px; margin-bottom: 15px; } /* Paragraphe P avec Lato Regular */ .texte-gauche p { font-family: 'Lato', sans-serif; font-weight: normal; font-size: 12px; margin-bottom: 15px; } .image-droite img { margin-left: 50px; width: 50%; } /* Galerie coulissante */ .galerie-coulissante { text-align: left; margin-left: 13%; margin-bottom: 30px; } /* Modifier le style du titre h2 */ .galerie-coulissante h2 { font-family: 'Minion Pro', serif; /* Remplacez par la police souhaitée */ font-weight: bold; /* Choisissez la graisse que vous préférez (par exemple, bold) */ font-size: 24px; /* Modifiez la taille selon vos préférences */ color: #32473d; /* Changez la couleur du texte selon vos besoins */ margin-bottom: 15px; } .slider { display: flex; overflow-x: auto; gap: 10px; scrollbar-width: none; } .slide img { width: 200px; border-radius: 20px; } /* tableau-des-stats */ .tableau-des-stats { background-color: #dc7350; /* Couleur corail */ color: white; padding: 40px 20px; text-align: center; margin-top: 25px; } .tableau-des-stats h1 { font-family: 'Minion Pro', serif; font-size: 36px; font-weight: bold; margin-bottom: 30px; } /* Section de statistiques */ .stats { display: flex; justify-content: space-around; align-items: center; margin-top: 20px; } .stat { text-align: center; font-family: 'Lato', sans-serif; } .stat p { margin-top: 10px; font-size: 16px; } /* Chiffres qui défilent */ .number { font-size: 40px; font-weight: bold; color: #f1f1f1; display: inline-block; height: 50px; /* Ajuster la hauteur selon la taille des chiffres */ overflow: hidden; line-height: 50px; } /* Animation défilement en rouleau */ @keyframes roll-up { 0% { transform: translateY(100%); } 100% { transform: translateY(0); } } /* Applique l'animation à chaque chiffre */ .number span { display: block; animation: roll-up 2s ease-out forwards; } .suivez-nous { display: flex; align-items: center; justify-content: space-between; padding: 40px 20px; background-color: #f9f9f9; border-top: 4px solid #FF6600; margin-bottom: 25px; } .suivez-text { flex: 1; padding-right: 20px; padding-left: 20px; /* Ajoute de l'espace à gauche */ } .suivez-text h2 { font-family: 'Minion Pro', serif; font-size: 28px; margin-bottom: 20px; line-height: 1.4; margin-left: 15%; color: 32473d; } .suivez-text p { font-family: 'Lato', sans-serif; font-size: 16px; margin-bottom: 20px; line-height: 1.5; margin-left: 15%; color: 32473d; } .social-icons { font-size: 28px; color: #D7AD56; } .social-icons i { margin-right: 15px; cursor: pointer; } .social-icons a { text-decoration: none; /* Enlève le soulignement */ color: inherit; /* Garde la couleur de l'icône */ } .images-galerie { display: flex; gap: 20px; } .images-galerie img { width: 200px; height: 200px; object-fit: cover; border: 5px solid white; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } /* Pour les tablettes (écrans entre 768px et 1024px) */ @media (max-width: 1024px) { .home-image { height: 150px; /* Ajuste la hauteur de l'image */ } .nos-univers { margin-left: 20px; padding: 15px; } .section-title { font-size: 20px; margin-left: 10%; } .univers-row { flex-direction: column; align-items: center; } .univers-item img { width: 250px; } .univers-button { margin-right: 10%; } .texte-image { flex-direction: column; padding: 30px 15px; } .image-texte-left { width: 100%; margin-bottom: 15px; } .image-texte-left img { width: 100%; left: 0; /* Pas de décalage à gauche */ } .texte-right { width: 100%; margin-right: 0; } .bandeau-vert { flex-direction: column; padding: 40px 20px; } .texte-gauche { width: 100%; margin-left: 0; margin-right: 0; } .image-droite img { width: 80%; margin-left: 0; } .slider { gap: 5px; } .slide img { width: 150px; } .bandeau-orange h1 { font-size: 28px; } .stats { flex-direction: column; align-items: center; } .stat { margin-bottom: 20px; } .suivez-text h2 { font-size: 24px; margin-left: 0; } .suivez-text p { font-size: 10px; margin-left: 0; } .social-icons { font-size: 20px; } .images-galerie img { width: 150px; height: 150px; } } /* Pour les tablettes (écrans entre 768px et 1024px) */ @media (max-width: 1024px) { .image-texte-left img { height: 80px; /* Réduit l'image "bol page home.png" sur tablette */ object-fit: cover; } .image-droite img { width: 60%; /* Réduit l'image "deco site slogan.png" sur tablette */ display: block; margin: 0 auto; } .nos-univers .univers-item img { width: 180px; /* Réduit les images "Nos Univers" sur tablette */ } } /* Pour les téléphones (écrans moins de 768px) */ @media (max-width: 768px) { .image-texte-left img { height: 0px; /* Réduit l'image "bol page home.png" encore plus sur téléphone */ object-fit: cover; } .image-droite img { width: 50%; /* Réduit l'image "deco site slogan.png" sur téléphone */ display: block; margin: 0 auto; } .nos-univers .univers-item img { width: 120px; /* Réduit encore les images "Nos Univers" sur téléphone */ } .suivez-nous .images-galerie { display: block; /* Affiche une seule image dans la section "Suivez-nous" sur téléphone */ } .suivez-nous .images-galerie img { width: 100%; /* Affiche une seule image pleine largeur */ margin: 0 auto; } } /* Global */ body { font-family: 'Lato', sans-serif; margin: 0; padding: 0; box-sizing: border-box; margin-top: 100px; /* Espace pour éviter que le header ne cache le contenu */ } /* Container commun */ .container { display: flex; align-items: center; justify-content: space-between; padding: 40px; } /* Section : Notre Histoire */ .notre-histoire .container { display: flex; flex-direction: column; /* empile le contenu verticalement */ align-items: center; /* centre horizontalement tout le contenu */ text-align: center; /* centre le texte à l’intérieur des blocs */ padding-top: 120px; /* pour éviter que le texte soit sous le header fixe */ } .text-section { max-width: 800px; /* largeur max pour que le texte ne soit pas trop large */ } .notre-histoire h2 { font-family: 'Minion Pro', serif; font-weight: bold; font-size: 24px; } .notre-histoire p{ font-family: 'lato', serif; font-weight: Regular; font-size: 16px; line-height: 19px; } /* Conteneur global qui contient l'image et le bandeau */ .bandeau-et-image { display: flex; /* Aligne l'image et le bandeau côte à côte */ width: 100%; /* Prend toute la largeur */ justify-content: flex-end; /* Aligne les éléments à droite */ } /* L'image placée à gauche du bandeau */ .image-miroir { margin-top: 50px; height: 250px; /* Même hauteur que le bandeau */ width: 50%; /* Même largeur que le bandeau */ object-fit: cover; /* Remplit l'espace sans déformation */ } /* Section Bandeau Orange */ .bandeau-orange { margin-top: auto; background-color: #DC7350; height: 250px; /* Hauteur fixe du bandeau */ display: flex; width: 50%; /* Largeur fixe du bandeau */ margin-left: auto; /* Aligné à droite */ } .bandeau-orange .container { width: 100%; display: flex; align-items: center; /* centre verticalement */ justify-content: center; /* centre horizontalement */ padding: 0 15%; } .bandeau-orange .btn, .banner-btn { width: auto; /* tu peux garder 60% si tu veux un bouton large */ text-align: center; /* centre le texte du bouton */ color: white; font-size: 14px; margin-top: 30px; /* pour l'espacement */ } /* Fix alignement image-miroir et bandeau-orange sur desktop */ @media screen and (min-width: 1025px) { .bandeau-et-image { align-items: stretch; } .image-miroir { height: 250px; width: 50%; object-fit: cover; margin: 0; /* supprime marge-top qui crée le décalage */ } .bandeau-orange { height: 250px; width: 50%; margin: 0; /* supprime le margin-top automatique */ } } .banner-text { width: 60%; margin-left: 25%; color: white; font-size: 14px; } .bandeau-orange .banner-text .btn { margin-top: 5px; display: inline-block; padding: 5px 10px; background-color: #32473D; color: white; text-decoration: none; font-weight: bold; border-radius: 5px; margin-left: 10px; } .bandeau-orange .banner-text .btn:hover { background-color: #F7941E; /* Couleur au survol */ color: #32473D; /* Texte au survol */ } /* Section : presentation du design: Nos Boutiques */ .presentation-section { display: flex; align-items: center; justify-content: center; gap: 5%; max-width: 1200px; margin: 0 auto; padding: 40px 20px; } .presentation-image { width: 40%; } .presentation-image img { width: 100%; height: auto; border-radius: 8px; } .presentation-content { width: 40%; font-family: 'Montserrat', sans-serif; font-size: 16px; color: #333; line-height: 1.6; } .presentation-content .btn { display: inline-block; margin-top: 15px; padding: 12px 20px; background-color: #D4AB5D; color: white; text-decoration: none; font-weight: bold; border-radius: 5px; transition: background 0.3s; } .presentation-content .btn:hover { background-color: #d4ab5d; } /*Section explication*/ .presentation-section { display: flex; flex-direction: column; gap: 2rem; max-width: 1200px; margin: auto; padding: 2rem; } .presentation-intro, .presentation-conclusion { text-align: center; max-width: 800px; margin-left: auto; margin-right: auto; } .presentation-main { display: flex; flex-direction: row; align-items: flex-start; gap: 2rem; flex-wrap: nowrap; } .presentation-image { flex: 0 0 45%; max-width: 45%; } .presentation-image img { width: 100%; height: auto; display: block; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); } .presentation-content { flex: 1; max-width: 50%; overflow-wrap: break-word; } .presentation-content ul { padding-left: 1.2rem; margin-top: 0; margin-bottom: 1.2rem; } .presentation-content { font-size: 1rem; /* taille de base */ line-height: 1.5; transition: font-size 0.3s ease; } .presentation-intro, .presentation-conclusion { text-align: center; max-width: 800px; margin-left: auto; margin-right: auto; font-size: 1.1rem; line-height: 1.6; transition: font-size 0.3s ease, line-height 0.3s ease; } @media screen and (max-width: 900px) { .presentation-intro, .presentation-conclusion { font-size: 0.95rem; line-height: 1.4; } } @media screen and (max-width: 600px) { .presentation-intro, .presentation-conclusion { font-size: 0.85rem; line-height: 1.3; } } @media screen and (max-width: 900px) { .presentation-content { font-size: 0.9rem; /* un peu plus petit sur tablettes */ } } @media screen and (max-width: 600px) { .presentation-content { font-size: 0.85rem; /* encore plus petit sur mobiles */ } } .presentation-content { font-size: 1rem; line-height: 1.6; transition: font-size 0.3s ease, line-height 0.3s ease; } @media screen and (max-width: 900px) { .presentation-content { font-size: 0.85rem; line-height: 1.4; } } @media screen and (max-width: 600px) { .presentation-content { font-size: 0.75rem; line-height: 1.3; } } @media screen and (max-width: 900px) { .presentation-main { flex-direction: column; } .presentation-image, .presentation-content { max-width: 100%; } } /* Section : presentation du design: Nos 3 entrepôts */ /* Section des entrepôts */ .entrepots-section { background-color: #2F4136; /* Fond vert */ padding: 60px 10%; text-align: left; } /* Bandeau pour le titre */ .entrepots-title { color: white; font-size: 30px; font-weight: bold; margin-bottom: 15px; } /* Conteneur titre + texte aligné */ .entrepots-content { display: flex; flex-direction: column; align-items: flex-start; /* Aligne à gauche */ max-width: 900px; } .entrepots-text { color: white; font-size: 18px; line-height: 1.6; max-width: 900px; } /* Conteneur des images */ .entrepots-images { display: flex; justify-content: center; gap: 40px; /* Plus d’espace entre les images */ padding-top: 40px; } /* Style des images (plus grandes) */ .entrepot { background-color: white; padding: 15px; border-radius: 8px; text-align: center; width: 320px; /* Taille augmentée */ } .entrepot img { width: 100%; height: 320px; /* Taille augmentée */ object-fit: cover; border-radius: 8px; } /* ========================= RESPONSIVE PERSONNALISÉ ========================= */ @media screen and (max-width: 1020px) { /* 1. Cacher les images superposées dans la section Notre Histoire */ .notre-histoire .image-back, .notre-histoire .image-front { display: none; } /* 2. Image bandeau (image-miroir) : largeur 100%, hauteur réduite */ .image-miroir { width: 100% !important; height: 180px !important; object-fit: cover; } /* 3. Forcer affichage image présentation entrepôt */ .presentation-image { display: block; } /* 4. Section Notre Histoire responsive */ .notre-histoire .container { flex-direction: column; align-items: center; } .notre-histoire .text-section, .notre-histoire .image-section { width: 90%; margin: 0; padding: 10px 0; } .notre-histoire .image-section img { width: 100%; height: auto; margin: 0; } /* 5. Bandeau orange en colonne */ .bandeau-et-image { flex-direction: column; align-items: center; } .bandeau-orange { width: 100%; height: auto; } .bandeau-orange .container { flex-direction: column; padding: 20px; text-align: center; } .bandeau-orange .banner-text, .banner-text { width: 100%; margin-left: 0; } .bandeau-orange .banner-text .btn { margin-left: 0; } /* 6. Présentation : Nos Boutiques */ .presentation-section { flex-direction: column; gap: 20px; padding: 20px; text-align: center; } .presentation-image, .presentation-content { width: 100%; } .presentation-image img { width: 100%; height: 200px; /* même hauteur pour toutes */ object-fit: cover; border-radius: 8px; } /* Centrage texte et bouton */ .presentation-content { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .presentation-content .btn { margin-left: auto; margin-right: auto; } /* 7. Entrepôts : scroll horizontal avec tailles adaptées */ .entrepots-images { flex-wrap: nowrap; overflow-x: auto; gap: 20px; padding-bottom: 20px; } .entrepot { flex: 0 0 280px; min-width: 260px; max-width: 280px; } .entrepot img { width: 100%; height: 200px; } /* Optionnel : masquer scrollbar horizontale */ .entrepots-images::-webkit-scrollbar { display: none; } .entrepots-images { -ms-overflow-style: none; scrollbar-width: none; } } /* Section : Nos Boutiques */ .nos-boutiques { margin-top: 60px; } .boutiques-title { font-family: 'Minion Pro', serif; font-weight: bold; font-size: 24px; margin-left: 10%; margin-bottom: 20px; } .gallery { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 10%; /* Marges extérieures de 10% */ } .gallery-row { display: flex; justify-content: space-between; width: 100%; margin-bottom: 20px; /* Espacement entre les lignes */ } .gallery-row a { flex: 1; max-width: 300px; /* Images max 300px */ margin: 0 10px; /* Espacement entre images */ } .gallery-row a img { width: 100%; height: auto; object-fit: cover; border-radius: 10px; } /* Section : FAQ */ .faq { background-color: #DD9188; padding: 40px; } .faq-title { font-size: 24px; text-align: left; margin-left: 10%; color: white; margin-bottom: 20px; } .questions details { margin: 0 10% 15px 10%; border-bottom: 1px solid white; padding-bottom: 10px; } .questions details summary { font-size: 16px; font-weight: bold; cursor: pointer; color: white; position: relative; padding-right: 20px; /* Espace pour la flèche */ } .questions details summary::after { content: "v"; position: absolute; right: 0; font-size: 18px; color: white; } .questions details p { font-size: 14px; color: white; margin-top: 5px; } /* Styles pour la page "Vous êtes professionnels" */ /* ======= Style professionnel pour page "Vous êtes professionnels" ======= */ .page-professionnel { position: relative !important; z-index: 1 !important; /* Plus bas que le header */ margin-top: 80px; margin-bottom: 40px; max-width: 1000px; margin: 130px auto 80px auto; /* laisse la place au header fixe */ padding: 0 25px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #333; background: #fff; box-shadow: 0 6px 20px rgba(50, 71, 61, 0.1); border-radius: 12px; } /* Header d’intro */ .intro-section { position: relative !important; z-index: 1 !important; /* Plus bas que le header */ margin-top: 80px; margin-bottom: 40px; padding: 40px 30px 50px 30px; border-bottom: 2px solid #DC7350; text-align: center; background: #f7f4f0; border-radius: 12px 12px 0 0; } .intro-section h1 { font-size: 3rem; font-weight: 700; margin-bottom: 25px; color: #32473D; letter-spacing: 1.2px; } .intro-section p { font-size: 1.2rem; line-height: 1.6; margin-bottom: 18px; max-width: 800px; margin-left: auto; margin-right: auto; } /* Points de vente */ .points-vente-section { padding: 40px 40px 40px 40px; max-width: 850px; margin: 0 auto; text-align: center; } .points-vente-section h2 { color: #DC7350; font-size: 2.1rem; margin-bottom: 20px; font-weight: 700; letter-spacing: 1px; } .points-vente-section p { font-size: 1.15rem; color: #555; max-width: 700px; margin: 0 auto; line-height: 1.5; } /* Tarifs */ .tarifs-section { background-color: #32473D; color: #f4f4f4; padding: 35px 40px; max-width: 700px; margin: 50px auto; border-radius: 10px; box-shadow: 0 5px 12px rgba(0,0,0,0.15); text-align: center; } .tarifs-section h2 { font-size: 1.8rem; font-weight: 700; margin-bottom: 20px; color: #D4AB5D; } .tarifs-section ul { list-style-type: none; padding-left: 0; } .tarifs-section ul li { font-size: 1.2rem; margin-bottom: 12px; position: relative; padding-left: 25px; } .tarifs-section ul li::before { content: '✓'; color: #D4AB5D; position: absolute; left: 0; font-weight: bold; font-size: 1.2rem; top: 0; line-height: 1; } /* Section prise de RDV */ .rdv-section { margin-top: 70px; padding: 30px 20px 60px 20px; max-width: 1000px; margin-left: auto; margin-right: auto; text-align: center; } .rdv-section h2 { font-size: 2.2rem; margin-bottom: 25px; color: #32473D; font-weight: 700; } /* Calendrier responsive */ .calendrier-container { position: relative; width: 100%; padding-bottom: 140%; /* ajuster hauteur selon besoin */ height: 0; overflow: hidden; border-radius: 15px; box-shadow: 0 6px 16px rgba(50, 71, 61, 0.2); max-width: 1000px; margin: 0 auto; } .calendrier-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; border-radius: 15px; } /* ====== Responsive ====== */ @media screen and (max-width: 768px) { .page-professionnel { margin: 30px 15px 50px 15px; padding: 0 15px; box-shadow: none; } .intro-section h1 { font-size: 2.2rem; } .intro-section p, .points-vente-section p, .tarifs-section ul li { font-size: 1rem; } .points-vente-section h2, .tarifs-section h2, .rdv-section h2 { font-size: 1.6rem; } .tarifs-section { padding: 25px 20px; max-width: 100%; } .calendrier-container { padding-bottom: 160%; /* hauteur plus grande sur mobile */ } } /* page contact */ .contact-section { background-color: #F4E9E1; padding: 60px 20px; font-family: 'Lato', sans-serif; } .contact-container { max-width: 700px; margin: auto; background: white; border-radius: 8px; padding: 40px; box-shadow: 0 0 10px rgba(0,0,0,0.05); } .contact-container h1 { font-size: 32px; margin-bottom: 25px; color: #32473D; text-align: center; } .contact-form label { display: block; margin-top: 15px; font-weight: bold; color: #32473D; } .contact-form input, .contact-form select, .contact-form textarea { width: 100%; padding: 12px; margin-top: 5px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } .contact-form button { background-color: #DC7350; color: white; font-weight: bold; padding: 14px 24px; border: none; border-radius: 4px; margin-top: 20px; cursor: pointer; width: 100%; } .contact-form button:hover { background-color: #D4AB5D; } .contact-success { background: #D4AB5D; color: white; padding: 15px; border-radius: 4px; margin-bottom: 20px; text-align: center; } .contact-error { background: #DD9188; color: white; padding: 15px; border-radius: 4px; margin-bottom: 20px; text-align: center; } @media screen and (max-width: 768px) { .contact-container { padding: 20px; } } /* Couleurs charte */ :root { --vert-fonce: #32473D; --rose-pale: #F4E9E1; --corail: #DC7350; --ocre: #D4AB5D; --rose-moyen: #DD9188; } body { margin: 30px; margin-bottom: 40px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #fff; color: var(--vert-fonce); line-height: 1.6; } /* Marge obligatoire sur tous les côtés, même sur petits écrans */ body, html { padding-left: 10px; padding-right: 10px; box-sizing: border-box; } .page-header { position: relative !important; z-index: 1 !important; /* Plus bas que le header */ margin-bottom: 40px; margin-top: 80px; text-align: center; padding: 40px 20px 60px 20px; background-color: var(--rose-pale); box-shadow: 0 4px 8px rgba(50, 71, 61, 0.1); } .page-header h1 { margin-top: 40px; font-size: 3rem; margin-bottom: 15px; font-weight: 900; color: var(--vert-fonce); } .page-header p { font-size: 1.3rem; font-style: italic; color: var(--corail); max-width: 650px; margin: 0 auto; } .catalogue { max-width: 1200px; margin: 0 auto 80px; padding: 0 20px; } /* Catégories */ .category { margin-bottom: 80px; padding: 30px 40px; background: var(--rose-pale); border-radius: 16px; box-shadow: 0 6px 18px rgba(50, 71, 61, 0.1); } .category-title { font-size: 2.8rem; color: var(--vert-fonce); font-weight: 900; margin-bottom: 8px; border-bottom: 3px solid var(--corail); padding-bottom: 8px; letter-spacing: 1px; } .category-description { margin-top: 20px; font-size: 1.25rem; font-style: italic; color: var(--rose-moyen); margin-bottom: 30px; max-width: 700px; } /* Produits */ .products-list { display: flex; flex-wrap: wrap; gap: 40px; } .product { background: white; border-radius: 12px; width: calc(33.333% - 26.66px); box-shadow: 0 8px 16px rgba(50, 71, 61, 0.12); overflow: hidden; display: flex; flex-direction: column; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; } .product:hover { transform: translateY(-8px); box-shadow: 0 24px 40px rgba(50, 71, 61, 0.2); } .product img { width: 100%; height: 180px; object-fit: cover; } .product-info { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; } .product-info h3 { font-size: 1.4rem; color: var(--vert-fonce); margin-bottom: 12px; font-weight: 800; } .product-info p { font-size: 1rem; color: #555; line-height: 1.4; } /* Responsive tablette */ @media (max-width: 960px) { .product { width: calc(50% - 20px); } .page-header h1 { font-size: 2.3rem; } .page-header p { font-size: 1.1rem; } .category-title { font-size: 2.2rem; } .category-description { font-size: 1.1rem; } } /* Responsive mobile */ @media (max-width: 600px) { .product { width: 100%; } .category { padding: 20px; } .category-title { font-size: 1.7rem; } .category-description { font-size: 0.95rem; } .page-header { padding: 30px 10px 40px; } .page-header h1 { font-size: 1.9rem; margin-top: 20px; } .page-header p { font-size: 1rem; } .product-info h3 { font-size: 1.2rem; } .product-info p { font-size: 0.95rem; } } /*mention légales*/ /* Appliqué uniquement à la page Mentions Légales */ .page-mentions-legales { position: relative; z-index:1; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f9f8f6; color: #2f3e2e; margin: 0; padding: 0; } /* Conteneur central */ .container {$ position: relative; z-index:1; max-width: 900px; margin: 0 auto; padding: 40px 20px; display: flex; flex-direction: column; align-items: center; } /* === HEADER === */ .header-main { position: relative; z-index:1; background-color: #DC7350; color: #fff; text-align: center; padding: 60px 30px 45px; width: 100%; border-radius: 0 0 20px 20px; box-shadow: 0 6px 12px rgba(220, 115, 80, 0.3); } .header-main h1 { position: relative; z-index:1; font-size: 2.8rem; font-weight: 900; margin-bottom: 10px; letter-spacing: 0.8px; } .header-main .subtitle { font-size: 1.2rem; font-weight: 400; opacity: 0.95; max-width: 700px; margin: 0 auto; } /* === CONTENU PRINCIPAL === */ .main-content { margin-top: 50px; width: 100%; display: flex; flex-direction: column; gap: 30px; } /* Blocs de contenu */ .section-block { background: #fff; border-radius: 15px; border-left: 6px solid #DC7350; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); padding: 35px 40px; width: 100%; transition: transform 0.2s ease; } .section-block:hover { transform: translateY(-4px); } .section-block h2 { font-size: 1.8rem; margin-bottom: 15px; color: #DC7350; text-align: center; } .section-block p { font-size: 1.1rem; color: #444; text-align: justify; line-height: 1.7; margin-bottom: 10px; } /* === FOOTER === */ .footer-main { width: 100%; background-color: #32473D; color: #fff; text-align: center; padding: 25px 15px; margin-top: 60px; border-radius: 15px 15px 0 0; font-size: 0.95rem; } /* === RESPONSIVE === */ @media (max-width: 768px) { .header-main h1 { font-size: 2.2rem; } .header-main .subtitle { font-size: 1rem; } .section-block { padding: 25px 20px; } .section-block h2 { font-size: 1.5rem; } .section-block p { font-size: 1rem; } } /* Footer global */ footer { background-color: #f3ebe5; color: #2e3b30; font-family: 'MinionPro', serif; padding: 10px 10px; text-align: center; margin-top: auto; position: relative; bottom: 0; height: auto; } /* Container principal */ .footer-container { display: flex; align-items: flex-start; justify-content: center; max-width: 900px; margin: 0 auto; gap: 50px; padding: 5px 5px; } /* Colonne Logo */ .logo-footer { flex: 1; text-align: center; margin-left: 20px; margin-right: 20px; } .logo-footer img { width: 100%; height: auto; max-width: 200px; } /* Colonne Liens */ .links-column { flex: 1; text-align: left; display: flex; flex-direction: column; gap: 8px; font-size: 14px; margin-top: 40px; margin-left: 15px; } .links-column a { text-decoration: none; color: #2e3b30; transition: color 0.3s ease; } .links-column a:hover { color: #d4ab5d; text-decoration: underline; } .mentions-legales { margin-top: 25px; font-size: 14px; } /* Colonne Réseaux Sociaux */ .social-column { flex: 1; text-align: center; display: flex; flex-direction: column; align-items: center; margin-top: 40px; } .social-title { font-size: 14px; font-weight: bold; margin-bottom: 0px; } .social-icons { display: flex; justify-content: center; gap: 7px; } .social-icons img { width: 24px; height: 24px; object-fit: contain; } .social-icons a:hover img { transform: scale(1.1); } /* Colonne Contact */ .contact-column { flex: 1; text-align: center; display: flex; flex-direction: column; align-items: center; margin-top: 40px; } .contact-title { font-size: 14px; font-weight: bold; margin-bottom: 8px; } .btn { display: inline-block; margin: 4px; padding: 6px 12px; background-color: #2e3b30; color: #fff; text-decoration: none; border-radius: 5px; font-size: 14px; transition: background-color 0.3s ease; } .btn:hover { background-color: #d4ab5d; } /* Media Queries pour les petits écrans (tablettes et téléphones) */ @media (max-width: 768px) { .footer-container { flex-direction: column; /* Organiser les colonnes verticalement */ align-items: center; /* Centrer tous les éléments */ } /* Supprimer le logo pour les petits écrans */ .logo-footer { display: none; /* Masquer le logo */ } /* Placer le logo et les mentions légales après les autres éléments */ .mentions-legales { order: 3; /* Déplacer les mentions légales en bas */ margin-top: 10px; } /* Réorganiser les colonnes : "Suivez-nous" à gauche et "Notre histoire" à droite */ .social-column { order: 4; /* "Suivez-nous" en dernier */ text-align: left; /* Aligner les éléments à gauche */ } .links-column { order: 2; /* "Notre histoire" et "Nos produits" à droite */ margin-left: 20px; /* Ajouter un peu d'espacement */ text-align: left; } .contact-column { order: 1; /* Placer cette colonne avant les autres */ margin-top: 10px; } /* Assurer un espacement entre les différentes sections */ .social-column, .links-column, .contact-column { margin-top: 10px; } } /* Styles spécifiques à la page-home.php */ /* Modifier l'espacement ou la taille d'éléments sur la page d'accueil */ body.home { padding-top: 120px; /* Espacement supplémentaire sous le header sur la page d'accueil */ } /* Si vous avez un élément spécifique pour la page d'accueil */ .page-home .your-element-class { /* Ajouter ici les styles spécifiques pour cet élément */ } /* Si vous souhaitez un fond différent ou un style spécifique sur la page d'accueil */ body.home { background-color: #f4f4f4; /* Exemple d'un fond spécifique à la page d'accueil */ } /* Ciblage d'un bloc de la page d'accueil pour personnaliser son affichage */ .home .footer-container { background-color: #fff; /* Exemple de fond différent pour le footer sur la page d'accueil */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optionnel : ajouter une ombre légère */ }