/* Styles externes – Vitrine pastel (rose & jaune crème) Place ce fichier à côté de index.php et garde le lien dans le . */ :root{ --rose: #E7D9CD; /* creme */ --jaune: #235347; /* vert */ --creme: #fff7ea; /* fond global crème */ --ink: #2b2b2b; /* texte principal */ --muted: #6b6b6b; /* texte secondaire */ --white: #ffffff; --radius: 20px; --shadow: 0 8px 24px rgba(0,0,0,.08); } /* Base */ html,body{color:var(--ink); background:var(--creme); font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif} .app-body{} .app-nav{} .app-footer{color:var(--muted)} /* Hero */ /*.hero{ background: radial-gradient(1200px 600px at 10% 10%, var(--rose), transparent 60%), radial-gradient(900px 500px at 90% 30%, var(--jaune), transparent 60%), var(--creme); min-height: 70vh; display:flex;align-items:center; }*/ .hero-card{ background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(1.25rem, 2vw, 2rem); } /* 1) Fixer une hauteur raisonnable au bloc hero/carousel */ .hero-wrap { position: relative; height: clamp(320px, 60vh, 720px); /* mobile → desktop */ overflow: hidden; /* masque le surplus d'image */ } /* 2) Le carousel et ses images occupent 100% de cette hauteur */ .hero-wrap .carousel-inner, .hero-wrap .carousel-item { height: 100%; } /* chaque slide occupe toute la hauteur */ .hero-slide { width: 100%; height: 100%; display: flex; } /* chaque "moitié" prend 50% de largeur */ .hero-slide .half { flex: 1; height: 100%; overflow: hidden; } /* les images remplissent leur moitié sans se déformer */ .hero-slide .half img { width: 100%; height: 100%; object-fit: cover; /* crop si nécessaire */ object-position: center; display: block; } /*-------------------------------------------------------*/ #carouselExample::after { content: ""; position: absolute; inset: 0; /* top:0; left:0; bottom:0; right:0 */ background: rgba(0,0,0,0.2); /* opacité ajustable */ z-index: 2; /* au-dessus des images */ } .carousel-item img { width: 900px; height: 700px; object-fit: contain; /* remplit sans déformer (recadrage possible) */ object-position: center; background: #000; /* optionnel, pour remplir les bandes */ display: flex; justify-content: center; align-items: center; } .carousel-item img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; /* garde toujours l'image entière */ } /* 3) Le contenu hero est un overlay à l’intérieur du wrap uniquement */ .hero { position: absolute; inset: 0; /* top/right/bottom/left: 0 */ display: flex; align-items: center; justify-content: center; padding: 2rem; z-index: 10; } /* (optionnel) laisser les boutons cliquables si tu mets pointer-events */ .hero { pointer-events: none; } .hero .btn, .hero a, .hero button { pointer-events: auto; } .carousel-inner img { width: 100%; /* pleine hauteur de l'écran */ height: auto; /* couvre toute la zone */ } /* Articles en quinconce */ .zigzag{ gap: 1.5rem; padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--radius); box-shadow: var(--shadow); } .zigzag.rose{ background: var(--rose); } .zigzag.jaune{ background: var(--jaune); color:var(--rose); } .zigzag-img{ width:100%; height:auto; border-radius: calc(var(--radius) - 6px); } /* Double H1 */ /*.double-h1 .bloc{ padding: clamp(1.25rem, 2.5vw, 2rem); border-radius: var(--radius); box-shadow: var(--shadow); display:flex; align-items:center; justify-content:center; min-height: 160px; text-align:center; }*/ .double-h1 .gauche{ background: var(--rose); } .double-h1 .droite{ background: var(--jaune); color:var(--rose); } /* CTA */ .btn-soft{ --bs-btn-color:#2b2b2b; --bs-btn-bg:#fff; --bs-btn-border-color:#fff; --bs-btn-hover-bg:#f3f3f3; --bs-btn-hover-border-color:#f3f3f3; border-radius: 999px; padding:.75rem 1.25rem; box-shadow: var(--shadow); } /* Card simple (contact) */ .card-simple{ background:#fff; border-radius: 1.25rem; padding: 1.25rem; box-shadow: var(--shadow); } .double-h1 .bloc { padding: clamp(1.25rem, 2.5vw, 2rem); border-radius: var(--radius); box-shadow: var(--shadow); display: flex; flex-direction: column; /* ✅ empile le contenu en colonne */ align-items: center; /* centre horizontalement */ justify-content: center; /* centre verticalement */ min-height: 160px; text-align: center; } .py-3 { padding: 0px !important;} /* ==== PATCH RESPONSIVE MINIMAL — À COLLER EN FIN DE style.css ==== */ /* 1) Images du hero en plein conteneur (sans déformation) */ .hero-wrap .carousel-item .half img{ width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center; display: block; } .color-perle { color:var(--rose); } .para-present { padding-right: 10rem !important; padding-left: 10rem !important; margin-bottom: 5rem !important; } .span-para-present { font-style:italic; } /* 2) Hero/carrousel : pile en 1 colonne sur mobile */ @media (max-width: 767.98px){ .hero-wrap{ height: clamp(260px, 56vh, 560px); /* hauteur raisonnable sur mobile */ } .img-mobile{ width: 300px; } .hero-slide{ flex-direction: column !important; gap: 6px !important; padding: 6px !important; } .hero-slide .half{ flex: 1 1 0 !important; /* deux moitiés de hauteur égale */ min-height: 0; /* évite les débordements */ } /* Les flèches ne sont plus nécessaires, le swipe suffit */ .carousel-control-prev, .carousel-control-next{ display: none !important; } } /* 3) Toggler (burger) visible même sans .navbar-light/.navbar-dark */ .navbar .navbar-toggler{ border: none; } .navbar .navbar-toggler-icon{ width: 1.5em; height: 1.5em; background-size: 100% 100%; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,0,0,0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; } /* 4) Images "articles" fluides et propres */ .zigzag-img{ width: 100% !important; height: auto !important; max-width: 100% !important; display: block; object-fit: cover; border-radius: inherit; } /* 5) Overlay hero : cliquable sur les liens/boutons uniquement */ .hero{ pointer-events: none; height: 600px; } .hero .btn, .hero a, .hero button{ pointer-events: auto; } /* 6) Petites tablettes : confort d’espacement */ @media (max-width: 991.98px){ .navbar-nav .nav-link{ padding: .5rem .75rem; } .span-para-present { margin-left:0px; font-style:italic; } .para-present { padding-right: 0rem !important; padding-left: 0rem !important; } } /* 7) Préférence d’accessibilité (réduction des animations) */ @media (prefers-reduced-motion: reduce){ .carousel, .carousel *{ animation: none !important; transition: none !important; } } @media (max-width: 767.98px) { /* Masque la 2ᵉ image */ .hero-slide .half:nth-child(2) { display: none !important; } /* La première image prend toute la largeur */ .hero-slide { flex-direction: row; /* reste en flex, mais une seule image visible */ } .hero-slide .half { flex: 1 1 100% !important; width: 100% !important; } }