/* ============================================
Ferreira Maçonnerie - Style Principal
Charte Graphique: Rouge Brique (#B22222), Blanc (#FFFFFF), Gris (#2C2C2C)
Design moderne avec dégradés et effets visuels élégants
============================================ */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--color-brick: #B22222;
--color-brick-dark: #8B1A1A;
--color-brick-light: #CD5C5C;
--color-white: #FFFFFF;
--color-dark: #2C2C2C;
--color-gray: #6B6B6B;
--color-light-gray: #F5F5F5;
--color-medium-gray: #E0E0E0;
--color-border: #CCCCCC;
--font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
html, body {
height: 100%;
}
body {
font-family: var(--font-family);
color: var(--color-dark);
background-color: var(--color-light-gray);
line-height: 1.6;
padding-top: 90px;
scroll-behavior: smooth;
min-height: 100vh;
}
@media (max-width: 768px) {
body {
padding-top: 75px;
}
}
@media (max-width: 480px) {
body {
padding-top: 70px;
}
}
/* ============================================
HEADER - Navigation
============================================ */
header {
background: linear-gradient(90deg,
rgba(255, 255, 255, 0.98) 0%,
rgba(255, 250, 250, 0.98) 20%,
rgba(255, 240, 240, 0.98) 40%,
rgba(255, 220, 220, 0.98) 60%,
rgba(255, 200, 200, 0.98) 80%,
rgba(178, 34, 34, 0.95) 100%);
backdrop-filter: blur(15px);
border-bottom: 3px solid var(--color-brick);
padding: 10px 20px;
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 1000;
box-shadow: 0 2px 20px rgba(178, 34, 34, 0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
header.scrolled {
box-shadow: 0 4px 30px rgba(178, 34, 34, 0.15);
background: linear-gradient(90deg,
rgba(255, 255, 255, 0.99) 0%,
rgba(255, 250, 250, 0.99) 20%,
rgba(255, 240, 240, 0.99) 40%,
rgba(255, 220, 220, 0.99) 60%,
rgba(255, 200, 200, 0.99) 80%,
rgba(178, 34, 34, 0.97) 100%);
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 5px 20px;
}
.logo {
display: flex;
align-items: center;
text-decoration: none;
color: var(--color-brick);
font-weight: bold;
font-size: 24px;
}
.logo img {
height: 60px;
width: auto;
transition: transform 0.3s ease;
}
.logo:hover img {
transform: scale(1.05);
}
/* Menu Navigation */
nav {
display: flex;
gap: 20px;
align-items: center;
}
/* Menu déroulant Services */
.nav-dropdown {
position: relative;
}
.nav-dropdown-toggle {
display: flex;
align-items: center;
cursor: pointer;
}
.nav-dropdown-toggle svg {
transition: transform 0.3s ease;
transform: rotate(0deg);
}
.nav-dropdown-toggle.active {
color: var(--color-brick) !important;
background: rgba(178, 34, 34, 0.1) !important;
font-weight: 700 !important;
}
/* La flèche tourne seulement quand le menu est ouvert (classe 'open'), pas quand l'onglet est actif */
.nav-dropdown-toggle.open svg {
transform: rotate(180deg);
}
.nav-dropdown-toggle.active::after {
width: 80% !important;
background: var(--color-brick) !important;
}
.nav-dropdown-menu {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
background: var(--color-white);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
min-width: 200px;
opacity: 0;
visibility: hidden;
transform: translateX(-50%) translateY(-10px);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1000;
margin-top: 10px;
border: 1px solid var(--color-medium-gray);
overflow: hidden;
}
.nav-dropdown-menu.active {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.nav-dropdown-menu a {
display: block;
padding: 12px 20px;
color: var(--color-dark);
text-decoration: none;
transition: all 0.3s ease;
border-bottom: 1px solid var(--color-light-gray);
text-transform: uppercase;
font-size: 0.9em;
letter-spacing: 0.5px;
text-shadow: none;
}
.nav-dropdown-menu a:last-child {
border-bottom: none;
}
.nav-dropdown-menu a:hover {
background: rgba(178, 34, 34, 0.1);
color: var(--color-brick);
padding-left: 25px;
}
.nav-dropdown-menu a::after {
display: none;
}
.nav-dropdown-menu a.active {
background: rgba(178, 34, 34, 0.15);
color: var(--color-brick);
font-weight: 700;
border-left: 3px solid var(--color-brick);
}
nav a {
text-decoration: none;
color: var(--color-dark);
font-weight: 600;
transition: all 0.3s ease;
position: relative;
padding: 6px 10px;
border-radius: 6px;
font-size: 0.85em;
text-transform: uppercase;
letter-spacing: 0.3px;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}
nav a:hover {
color: var(--color-white);
background: rgba(255, 255, 255, 0.2);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
nav a::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 3px;
background: linear-gradient(90deg, var(--color-brick) 0%, var(--color-brick-light) 100%);
transition: width 0.3s ease;
border-radius: 2px;
}
nav a:hover::after {
width: 80%;
}
/* État actif des liens de navigation */
nav a.active {
color: var(--color-brick);
background: rgba(178, 34, 34, 0.1);
font-weight: 700;
}
nav a.active::after {
width: 80%;
background: linear-gradient(90deg, var(--color-brick) 0%, var(--color-brick-light) 100%);
}
nav a.active:hover {
color: var(--color-brick);
background: rgba(178, 34, 34, 0.15);
}
/* État actif pour le toggle du menu déroulant Services */
nav .nav-dropdown-toggle.active {
color: var(--color-brick) !important;
background: rgba(178, 34, 34, 0.1) !important;
font-weight: 700 !important;
}
nav .nav-dropdown-toggle.active::after {
width: 80% !important;
background: linear-gradient(90deg, var(--color-brick) 0%, var(--color-brick-light) 100%) !important;
}
/* Bouton Contact dans la navigation */
nav a.nav-contact-btn {
background: linear-gradient(135deg, var(--color-brick) 0%, var(--color-brick-dark) 100%);
color: var(--color-white) !important;
padding: 8px 16px;
border-radius: 50px;
font-weight: 700;
font-size: 0.85em;
text-shadow: none;
box-shadow: 0 4px 15px rgba(178, 34, 34, 0.3);
border: 2px solid var(--color-brick);
margin-left: 10px;
}
nav a.nav-contact-btn::after {
display: none;
}
nav a.nav-contact-btn:hover {
background: linear-gradient(135deg, var(--color-brick-dark) 0%, var(--color-brick) 100%);
color: var(--color-white) !important;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(178, 34, 34, 0.4);
text-shadow: none;
}
nav a.nav-contact-btn.active {
background: linear-gradient(135deg, var(--color-brick-dark) 0%, var(--color-brick) 100%);
box-shadow: 0 6px 20px rgba(178, 34, 34, 0.5);
transform: translateY(-2px);
}
/* Hamburger Menu */
.hamburger {
display: none;
flex-direction: column;
cursor: pointer;
gap: 5px;
z-index: 1000;
position: relative;
}
.hamburger span {
width: 25px;
height: 3px;
background-color: var(--color-dark);
border-radius: 2px;
transition: all 0.3s ease;
display: block;
}
/* ============================================
HERO SECTION - Pleine largeur
============================================ */
/* Hero spécifique pour la page d'accueil */
.page-index .hero-section {
height: 350px;
min-height: 350px;
max-height: 400px;
}
@media (max-width: 768px) {
.page-index .hero-section {
height: 250px;
min-height: 250px;
max-height: 300px;
}
}
@media (max-width: 480px) {
.page-index .hero-section {
height: 200px;
min-height: 200px;
max-height: 250px;
}
}
.hero-section {
position: relative;
width: 100%;
height: 200px;
min-height: 200px;
max-height: 250px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
margin-top: 0;
}
.hero-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.hero-background img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
animation: heroImageZoom 20s ease-in-out infinite;
filter: brightness(1) contrast(1) saturate(1);
}
@keyframes heroImageZoom {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
/* Carrousel Hero */
.hero-carousel-container {
position: relative;
width: 100%;
height: 100%;
}
.hero-carousel-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.hero-carousel-slide.active {
opacity: 1;
z-index: 1;
}
.hero-carousel-slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
animation: heroImageZoom 20s ease-in-out infinite;
filter: brightness(1) contrast(1) saturate(1);
}
.hero-carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
color: var(--color-white);
border: 2px solid rgba(255, 255, 255, 0.5);
font-size: 24px;
padding: 15px 20px;
cursor: pointer;
transition: all 0.3s ease;
z-index: 15;
border-radius: 50%;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
pointer-events: auto;
user-select: none;
}
.hero-carousel-arrow:hover {
background: rgba(255, 255, 255, 0.9);
color: var(--color-brick);
border-color: var(--color-white);
transform: translateY(-50%) scale(1.1);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.hero-carousel-prev {
left: 30px;
}
.hero-carousel-next {
right: 30px;
}
.hero-carousel-dots {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 12px;
z-index: 15;
pointer-events: auto;
}
.hero-carousel-dot {
width: 14px;
height: 14px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid rgba(255, 255, 255, 0.8);
pointer-events: auto;
user-select: none;
}
.hero-carousel-dot:hover {
background-color: rgba(255, 255, 255, 0.9);
transform: scale(1.2);
}
.hero-carousel-dot.active {
background-color: var(--color-white);
border-color: var(--color-white);
box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
transform: scale(1.3);
}
@media (max-width: 768px) {
.hero-carousel-arrow {
width: 50px;
height: 50px;
font-size: 20px;
padding: 12px 15px;
}
.hero-carousel-prev {
left: 15px;
}
.hero-carousel-next {
right: 15px;
}
.hero-carousel-dots {
bottom: 20px;
}
}
@media (max-width: 480px) {
.hero-carousel-arrow {
width: 45px;
height: 45px;
font-size: 18px;
}
.hero-carousel-prev {
left: 10px;
}
.hero-carousel-next {
right: 10px;
}
}
.hero-gradient {
width: 100%;
height: 100%;
background: linear-gradient(135deg,
rgba(44, 44, 44, 0.4) 0%,
rgba(0, 0, 0, 0.5) 50%,
rgba(44, 44, 44, 0.4) 100%);
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg,
rgba(0, 0, 0, 0.3) 0%,
rgba(0, 0, 0, 0.5) 50%,
rgba(0, 0, 0, 0.3) 100%);
z-index: 2;
backdrop-filter: blur(0px);
}
.hero-content {
position: relative;
z-index: 3;
width: 100%;
text-align: center;
padding: 20px 20px;
color: var(--color-white);
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
min-height: 100%;
}
.hero-content .container {
width: 100%;
max-width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.hero-title {
font-size: clamp(1.2em, 4vw, 3em);
font-weight: 800;
margin: 0;
text-transform: uppercase;
letter-spacing: clamp(0.5px, 0.5vw, 2px);
text-shadow:
2px 4px 12px rgba(0, 0, 0, 0.7),
0 0 30px rgba(255, 255, 255, 0.3);
line-height: 1.3;
animation: heroFadeIn 1s ease-out;
color: var(--color-white);
position: relative;
display: block;
padding: 0 15px;
text-align: center;
width: 100%;
max-width: 100%;
word-break: keep-all;
overflow-wrap: normal;
white-space: nowrap;
hyphens: none;
-webkit-hyphens: none;
-ms-hyphens: none;
}
.hero-title::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: clamp(80px, 20vw, 150px);
height: 4px;
background: linear-gradient(90deg,
transparent 0%,
var(--color-white) 50%,
transparent 100%);
border-radius: 2px;
}
.hero-scroll-indicator {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
z-index: 3;
color: var(--color-white);
opacity: 0.8;
animation: bounce 2s infinite;
cursor: pointer;
transition: opacity 0.3s ease;
}
.hero-scroll-indicator:hover {
opacity: 1;
}
@keyframes heroFadeIn {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateX(-50%) translateY(0);
}
40% {
transform: translateX(-50%) translateY(-10px);
}
60% {
transform: translateX(-50%) translateY(-5px);
}
}
/* Responsive Hero */
@media (max-width: 768px) {
.hero-section {
height: 150px;
min-height: 150px;
max-height: 180px;
margin-top: 0;
}
.hero-content {
padding: 20px 15px;
display: flex;
align-items: center;
justify-content: center;
}
.hero-content .container {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.hero-title {
font-size: clamp(0.9em, 3.5vw, 1.8em);
letter-spacing: clamp(0.5px, 0.3vw, 1.5px);
padding: 0 10px;
margin: 0;
text-align: center;
width: 100%;
max-width: 100%;
line-height: 1.2;
word-break: keep-all;
overflow-wrap: normal;
white-space: nowrap;
hyphens: none;
}
.hero-title::after {
width: clamp(60px, 25vw, 120px);
height: 3px;
bottom: -12px;
}
.hero-carousel-arrow {
width: 45px;
height: 45px;
font-size: 18px;
}
.hero-carousel-prev {
left: 10px;
}
.hero-carousel-next {
right: 10px;
}
.hero-carousel-dots {
bottom: 15px;
}
.hero-scroll-indicator {
bottom: 15px;
}
}
@media (max-width: 480px) {
.hero-section {
height: 120px;
min-height: 120px;
max-height: 150px;
}
.hero-content {
padding: 15px 10px;
display: flex;
align-items: center;
justify-content: center;
}
.hero-content .container {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.hero-title {
font-size: clamp(0.7em, 3vw, 1.2em);
letter-spacing: 0.5px;
padding: 0 8px;
margin: 0;
text-align: center;
width: 100%;
max-width: 100%;
line-height: 1.2;
word-break: keep-all;
overflow-wrap: normal;
white-space: nowrap;
hyphens: none;
}
.hero-title::after {
width: clamp(50px, 30vw, 100px);
height: 2px;
bottom: -10px;
}
.hero-carousel-arrow {
width: 40px;
height: 40px;
font-size: 16px;
}
.hero-carousel-prev {
left: 8px;
}
.hero-carousel-next {
right: 8px;
}
.hero-carousel-dots {
bottom: 10px;
gap: 8px;
}
.hero-carousel-dot {
width: 10px;
height: 10px;
}
.hero-scroll-indicator {
bottom: 10px;
opacity: 0.6;
}
}
/* ============================================
SLIDER - Accueil
============================================ */
.slider {
position: relative;
width: 100%;
height: 600px;
overflow: hidden;
background: linear-gradient(135deg, var(--color-light-gray) 0%, var(--color-medium-gray) 100%);
}
.slider-container {
position: relative;
width: 100%;
height: 100%;
}
.slide {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.8s ease-in-out;
display: flex;
align-items: center;
justify-content: center;
}
.slide.active {
opacity: 1;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
image-rendering: high-quality;
-ms-interpolation-mode: nearest-neighbor;
image-rendering: auto;
filter: brightness(1) contrast(1.05) saturate(1);
display: block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slide-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(178, 34, 34, 0.7) 0%, rgba(139, 26, 26, 0.6) 100%);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--color-white);
z-index: 2;
backdrop-filter: blur(2px);
}
.slide-content {
position: relative;
z-index: 3;
}
.slide-content h1 {
font-size: clamp(32px, 5vw, 64px);
margin: 0;
text-shadow: 2px 4px 12px rgba(0, 0, 0, 0.8);
font-weight: 800;
letter-spacing: clamp(1px, 0.3vw, 2px);
text-transform: uppercase;
animation: slideInUp 0.8s ease-out;
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Slider Controls */
.slider-controls {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
z-index: 10;
}
.dot {
width: 14px;
height: 14px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.6);
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid rgba(255, 255, 255, 0.8);
}
.dot:hover {
background-color: rgba(178, 34, 34, 0.5);
transform: scale(1.2);
}
.dot.active {
background-color: var(--color-brick);
border-color: var(--color-white);
box-shadow: 0 0 8px rgba(178, 34, 34, 0.6);
}
.slider-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(178, 34, 34, 0.85);
color: var(--color-white);
border: 2px solid var(--color-white);
font-size: 24px;
padding: 12px 18px;
cursor: pointer;
transition: all 0.3s ease;
z-index: 10;
border-radius: 50%;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.slider-arrow:hover {
background-color: var(--color-brick);
transform: translateY(-50%) scale(1.1);
box-shadow: 0 6px 12px rgba(178, 34, 34, 0.4);
}
.slider-arrow.prev {
left: 20px;
}
.slider-arrow.next {
right: 20px;
}
/* ============================================
MAIN CONTENT
============================================ */
main {
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
min-height: calc(100vh - 200px);
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* ============================================
SECTIONS
============================================ */
section {
margin-bottom: 60px;
}
section h2 {
font-size: 28px;
color: var(--color-brick);
margin-bottom: 30px;
text-align: center;
position: relative;
padding-bottom: 20px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
}
section h2::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, var(--color-brick) 0%, var(--color-brick-light) 100%);
border-radius: 2px;
animation: expandWidth 0.8s ease-out;
}
@keyframes expandWidth {
from {
width: 0;
}
to {
width: 80px;
}
}
section h3 {
font-size: 24px;
color: var(--color-dark);
margin-top: 25px;
margin-bottom: 15px;
}
section p {
font-size: 16px;
color: var(--color-dark);
line-height: 1.8;
margin-bottom: 15px;
text-align: justify;
}
/* ============================================
BUTTONS
============================================ */
.btn {
display: inline-block;
padding: 14px 35px;
background: linear-gradient(135deg, var(--color-brick) 0%, var(--color-brick-dark) 100%);
color: var(--color-white);
text-decoration: none;
border: 2px solid var(--color-brick);
border-radius: 50px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
text-align: center;
box-shadow: 0 6px 20px rgba(178, 34, 34, 0.3);
text-transform: uppercase;
letter-spacing: 0.5px;
position: relative;
overflow: hidden;
}
.btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
transform: translate(-50%, -50%);
transition: width 0.6s ease, height 0.6s ease;
}
.btn:hover::before {
width: 300px;
height: 300px;
}
.btn:hover {
background: linear-gradient(135deg, var(--color-brick-dark) 0%, var(--color-brick) 100%);
transform: translateY(-5px) scale(1.02);
box-shadow: 0 12px 30px rgba(178, 34, 34, 0.5);
border-color: var(--color-brick-dark);
}
.btn span {
position: relative;
z-index: 1;
}
.btn-secondary {
background: linear-gradient(135deg, var(--color-gray) 0%, var(--color-dark) 100%);
border-color: var(--color-dark);
}
.btn-secondary:hover {
background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-gray) 100%);
box-shadow: 0 8px 20px rgba(44, 44, 44, 0.4);
}
.btn-block {
display: block;
width: 100%;
text-align: center;
}
/* ============================================
GALLERY
============================================ */
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin-top: 30px;
}
.gallery-item {
position: relative;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
border: 2px solid var(--color-medium-gray);
}
.gallery-item:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 8px 20px rgba(178, 34, 34, 0.3);
border-color: var(--color-brick);
}
.gallery-item img {
width: 100%;
height: 250px;
object-fit: cover;
display: block;
}
/* ============================================
FORM
============================================ */
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
color: var(--color-dark);
font-weight: 500;
}
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
width: 100%;
padding: 12px;
border: 1px solid var(--color-border);
border-radius: 5px;
font-family: var(--font-family);
font-size: 14px;
transition: border-color 0.3s ease;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
outline: none;
border-color: var(--color-brick);
box-shadow: 0 0 8px rgba(178, 34, 34, 0.3);
background-color: #FFF9F9;
}
textarea {
resize: vertical;
min-height: 150px;
}
.form-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.form-container.full {
grid-template-columns: 1fr;
}
/* ============================================
FOOTER
============================================ */
footer {
background: linear-gradient(135deg, var(--color-dark) 0%, #1a1a1a 100%);
color: var(--color-white);
padding: 50px 20px 20px;
margin-top: 60px;
border-top: 3px solid var(--color-brick);
width: 100%;
box-sizing: border-box;
}
.footer-container {
max-width: 1400px;
margin: 0 auto;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
gap: 30px;
margin-bottom: 30px;
width: 100%;
box-sizing: border-box;
padding: 0 20px;
flex-wrap: nowrap; /* Empêche le retour à la ligne sur desktop */
}
.footer-section {
display: flex;
flex-direction: column;
flex: 1 1 25%; /* Chaque section prend exactement 25% de l'espace */
min-width: 0; /* Permet au contenu de se rétrécir si nécessaire */
box-sizing: border-box;
max-width: 25%; /* Limite la largeur maximale à 25% */
}
.footer-section h3 {
color: var(--color-brick);
margin-bottom: 20px;
font-size: 1.1em;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
border-bottom: 2px solid rgba(178, 34, 34, 0.3);
padding-bottom: 10px;
}
.footer-section p,
.footer-section a {
font-size: 0.9em;
line-height: 1.8;
color: #e0e0e0;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-section a:hover {
color: var(--color-brick);
}
.footer-section ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-section li {
margin-bottom: 10px;
}
.footer-section li a {
display: inline-block;
transition: transform 0.2s ease;
}
.footer-section li a:hover {
transform: translateX(5px);
color: var(--color-brick);
}
.footer-section p {
margin-bottom: 12px;
}
.footer-section p strong {
color: var(--color-white);
font-weight: 600;
}
.footer-bottom {
border-top: 1px solid #555;
padding-top: 15px;
text-align: center;
font-size: 12px;
color: #ccc;
}
.footer-bottom a {
color: var(--color-brick);
text-decoration: none;
}
.footer-bottom a:hover {
text-decoration: underline;
}
.footer-legal-link {
color: var(--color-brick) !important;
text-decoration: none;
}
.footer-legal-link:hover {
text-decoration: underline;
}
/* ============================================
RESPONSIVE DESIGN - Menu Mobile (< 1280px)
============================================ */
@media (max-width: 1280px) {
/* Header Container */
.header-container {
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding: 12px 20px;
position: relative;
}
.logo {
order: 1;
}
/* Hamburger Button - Design amélioré */
.hamburger {
display: flex !important;
flex-direction: column;
justify-content: center;
align-items: center;
width: 48px;
height: 48px;
padding: 10px;
cursor: pointer;
z-index: 10001;
position: relative;
order: 2;
background: transparent;
border: none;
gap: 6px;
border-radius: 12px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hamburger span {
display: block;
width: 28px;
height: 3px;
background: linear-gradient(90deg, #333 0%, #555 100%);
border-radius: 3px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.hamburger:hover {
background: linear-gradient(135deg, rgba(178, 34, 34, 0.1) 0%, rgba(178, 34, 34, 0.15) 100%);
transform: scale(1.05);
}
.hamburger:hover span {
background: linear-gradient(90deg, #b22222 0%, #8b1a1a 100%);
}
.hamburger.active {
background: linear-gradient(135deg, rgba(178, 34, 34, 0.15) 0%, rgba(178, 34, 34, 0.2) 100%);
}
.hamburger.active span:nth-child(1) {
transform: rotate(45deg) translate(8px, 8px);
background: linear-gradient(90deg, #b22222 0%, #8b1a1a 100%);
box-shadow: 0 2px 4px rgba(178, 34, 34, 0.3);
}
.hamburger.active span:nth-child(2) {
opacity: 0;
transform: translateX(-15px) scale(0);
}
.hamburger.active span:nth-child(3) {
transform: rotate(-45deg) translate(8px, -8px);
background: linear-gradient(90deg, #b22222 0%, #8b1a1a 100%);
box-shadow: 0 2px 4px rgba(178, 34, 34, 0.3);
}
/* Menu Mobile - Structure améliorée */
nav#nav-menu {
position: fixed;
top: 0;
left: -100%;
width: 340px;
max-width: 90vw;
height: 100vh;
background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
z-index: 10000;
overflow-y: auto;
overflow-x: hidden;
transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 4px 0 30px rgba(0, 0, 0, 0.2),
0 0 0 1px rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
}
nav#nav-menu.active {
left: 0;
}
/* Menu Header - Design premium */
nav#nav-menu::before {
content: '☰ Menu';
display: flex;
align-items: center;
padding: 24px 28px;
background: linear-gradient(135deg, #b22222 0%, #8b1a1a 50%, #6b1212 100%);
color: #ffffff;
font-size: 1.4em;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 3px;
position: sticky;
top: 0;
z-index: 10;
box-shadow: 0 4px 15px rgba(178, 34, 34, 0.3),
0 2px 5px rgba(0, 0, 0, 0.2);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
/* Menu Links - Design moderne et aligné */
nav#nav-menu > a {
display: flex;
align-items: center;
padding: 18px 28px;
margin: 0;
color: #2c2c2c;
text-decoration: none;
font-size: 1.05em;
font-weight: 500;
border-bottom: 1px solid rgba(232, 232, 232, 0.8);
border-left: 6px solid transparent;
border-right: none;
border-top: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
background: #ffffff;
position: relative;
letter-spacing: 0.3px;
width: 100%;
box-sizing: border-box;
min-height: 56px;
}
nav#nav-menu > a::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0;
background: linear-gradient(90deg, rgba(178, 34, 34, 0.1) 0%, transparent 100%);
transition: width 0.3s ease;
}
nav#nav-menu > a:hover {
background: linear-gradient(90deg, #fff9f9 0%, #ffffff 100%);
color: #b22222;
border-left-color: #b22222;
padding-left: 32px;
transform: translateX(4px);
box-shadow: -2px 0 8px rgba(178, 34, 34, 0.1);
}
nav#nav-menu > a:hover::before {
width: 100%;
}
nav#nav-menu > a.active {
background: linear-gradient(90deg, #fff5f5 0%, #ffffff 100%);
color: #b22222;
border-left-color: #b22222;
font-weight: 700;
padding-left: 32px;
box-shadow: -3px 0 10px rgba(178, 34, 34, 0.15);
}
nav#nav-menu > a.active::before {
width: 100%;
}
/* Contact Button - Aligné avec les autres boutons */
nav#nav-menu > a.nav-contact-btn {
margin: 20px 28px;
padding: 18px 28px;
background: linear-gradient(135deg, #b22222 0%, #8b1a1a 50%, #6b1212 100%);
color: #ffffff;
border-radius: 12px;
text-align: center;
font-weight: 700;
font-size: 1.05em;
border: none;
border-left: none;
border-bottom: none;
box-shadow: 0 6px 20px rgba(178, 34, 34, 0.4),
0 2px 8px rgba(178, 34, 34, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
text-transform: uppercase;
letter-spacing: 1.5px;
position: relative;
overflow: hidden;
width: calc(100% - 56px);
box-sizing: border-box;
min-height: 56px;
justify-content: center;
}
nav#nav-menu > a.nav-contact-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 ease;
}
nav#nav-menu > a.nav-contact-btn:hover {
background: linear-gradient(135deg, #c22a2a 0%, #9a1f1f 50%, #7a1515 100%);
box-shadow: 0 8px 25px rgba(178, 34, 34, 0.5),
0 4px 12px rgba(178, 34, 34, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
transform: translateY(-3px) scale(1.02);
}
nav#nav-menu > a.nav-contact-btn:hover::before {
left: 100%;
}
nav#nav-menu > a.nav-contact-btn.active {
background: linear-gradient(135deg, #8b1a1a 0%, #6b1212 50%, #4a0d0d 100%);
box-shadow: 0 4px 15px rgba(178, 34, 34, 0.4);
}
/* Dropdown Container */
nav#nav-menu > .nav-dropdown {
width: 100%;
}
/* Dropdown Toggle - Aligné avec les autres boutons */
nav#nav-menu .nav-dropdown-toggle {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 28px;
margin: 0;
color: #2c2c2c;
text-decoration: none;
font-size: 1.05em;
font-weight: 500;
border-bottom: 1px solid rgba(232, 232, 232, 0.8);
border-left: 6px solid transparent;
border-right: none;
border-top: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
background: #ffffff;
cursor: pointer;
letter-spacing: 0.3px;
position: relative;
width: 100%;
box-sizing: border-box;
min-height: 56px;
}
nav#nav-menu .nav-dropdown-toggle::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0;
background: linear-gradient(90deg, rgba(178, 34, 34, 0.1) 0%, transparent 100%);
transition: width 0.3s ease;
}
nav#nav-menu .nav-dropdown-toggle svg {
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
margin-left: auto;
width: 16px;
height: 16px;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
flex-shrink: 0;
}
nav#nav-menu .nav-dropdown-toggle:hover {
background: linear-gradient(90deg, #fff9f9 0%, #ffffff 100%);
color: #b22222;
border-left-color: #b22222;
padding-left: 32px;
transform: translateX(4px);
box-shadow: -2px 0 8px rgba(178, 34, 34, 0.1);
}
nav#nav-menu .nav-dropdown-toggle:hover::before {
width: 100%;
}
nav#nav-menu .nav-dropdown-toggle.open,
nav#nav-menu .nav-dropdown-toggle.active {
background: linear-gradient(90deg, #fff5f5 0%, #ffffff 100%);
color: #b22222;
border-left-color: #b22222;
font-weight: 700;
padding-left: 32px;
box-shadow: -3px 0 10px rgba(178, 34, 34, 0.15);
}
nav#nav-menu .nav-dropdown-toggle.open::before,
nav#nav-menu .nav-dropdown-toggle.active::before {
width: 100%;
}
nav#nav-menu .nav-dropdown-toggle.open svg {
transform: rotate(180deg) scale(1.1);
}
/* Dropdown Menu - Aligné avec les autres éléments */
nav#nav-menu .nav-dropdown-menu {
position: static !important;
max-height: 0 !important;
overflow: hidden !important;
background: linear-gradient(180deg, #f9f9f9 0%, #f5f5f5 100%) !important;
transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
border-top: 1px solid rgba(178, 34, 34, 0.1) !important;
width: 100% !important;
display: block !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
border-radius: 0 !important;
box-shadow: none !important;
margin: 0 !important;
border: none !important;
border-top: 1px solid rgba(178, 34, 34, 0.1) !important;
z-index: auto !important;
min-width: auto !important;
}
nav#nav-menu .nav-dropdown-menu.active {
max-height: 500px !important;
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}
nav#nav-menu .nav-dropdown-menu a {
display: flex;
align-items: center;
padding: 16px 28px 16px 56px;
margin: 0;
color: #555;
text-decoration: none;
font-size: 0.98em;
border-bottom: 1px solid rgba(232, 232, 232, 0.6);
border-left: 5px solid transparent;
border-right: none;
border-top: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
background: linear-gradient(180deg, #f9f9f9 0%, #f5f5f5 100%);
position: relative;
letter-spacing: 0.2px;
width: 100%;
box-sizing: border-box;
min-height: 52px;
}
nav#nav-menu .nav-dropdown-menu a::before {
content: '→';
position: absolute;
left: 32px;
opacity: 0;
transform: translateX(-10px);
transition: all 0.3s ease;
color: #b22222;
font-weight: bold;
}
nav#nav-menu .nav-dropdown-menu a:hover {
background: linear-gradient(90deg, #fff9f9 0%, #f5f5f5 100%);
color: #b22222;
border-left-color: #b22222;
padding-left: 60px;
transform: translateX(4px);
}
nav#nav-menu .nav-dropdown-menu a:hover::before {
opacity: 1;
transform: translateX(0);
}
nav#nav-menu .nav-dropdown-menu a.active {
background: linear-gradient(90deg, #fff5f5 0%, #f5f5f5 100%);
color: #b22222;
border-left-color: #b22222;
font-weight: 700;
padding-left: 60px;
box-shadow: -2px 0 8px rgba(178, 34, 34, 0.1);
}
nav#nav-menu .nav-dropdown-menu a.active::before {
opacity: 1;
transform: translateX(0);
}
/* Pas d'overlay modal - le menu glisse simplement */
/* Prevent Scroll */
body.menu-open {
overflow: hidden;
}
/* Remove desktop styles */
nav#nav-menu a::before,
nav#nav-menu a::after {
display: none;
}
/* S'assurer que tous les éléments sont cliquables */
nav#nav-menu a,
nav#nav-menu .nav-dropdown-toggle {
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
}
@media (max-width: 480px) {
nav {
padding: 0;
}
nav::after {
font-size: 1.3em;
top: 18px;
left: 18px;
}
nav a {
padding: 14px 20px;
margin: 0 12px 6px;
width: calc(100% - 24px);
font-size: 1em;
}
nav a.nav-contact-btn {
margin: 15px 12px;
width: calc(100% - 24px);
padding: 16px 20px;
font-size: 1.05em;
}
.nav-dropdown {
width: calc(100% - 24px);
margin: 0 12px 6px;
}
.nav-dropdown-toggle {
padding: 14px 20px;
}
.nav-dropdown-menu a {
padding: 12px 30px;
}
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a.active {
padding-left: 35px;
}
}
@media (max-width: 1024px) {
.slider {
height: 400px;
}
.slide-content h1 {
font-size: clamp(28px, 4.5vw, 40px);
letter-spacing: 1px;
}
main {
padding: 30px 15px;
}
section h2 {
font-size: 28px;
}
section h3 {
font-size: 20px;
}
.gallery {
grid-template-columns: 1fr;
}
.home-images-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.form-container {
grid-template-columns: 1fr;
}
.footer-container {
flex-wrap: wrap;
gap: 30px;
}
.footer-section {
flex: 1 1 calc(50% - 15px); /* 2 colonnes */
min-width: 200px;
}
.footer-section h3 {
font-size: 1em;
margin-bottom: 15px;
}
.footer-section p,
.footer-section a {
font-size: 0.85em;
}
}
/* Desktop - Les 4 sections restent alignées horizontalement */
@media (min-width: 1025px) {
.footer-container {
flex-wrap: nowrap !important;
gap: 30px;
}
.footer-section {
flex: 1 1 25% !important;
max-width: 25% !important;
min-width: 0;
}
}
@media (max-width: 1024px) {
.footer-container {
flex-wrap: wrap;
gap: 25px;
}
.footer-section {
flex: 1 1 calc(50% - 12.5px); /* 2 colonnes sur tablette */
min-width: 200px;
}
}
@media (max-width: 768px) {
footer {
padding: 40px 20px 20px;
}
.footer-container {
flex-wrap: wrap;
gap: 25px;
}
.footer-section {
flex: 1 1 calc(50% - 12.5px); /* 2 colonnes sur mobile */
min-width: 200px;
}
.footer-section h3 {
font-size: 0.95em;
margin-bottom: 12px;
}
.footer-section p,
.footer-section a {
font-size: 0.85em;
}
}
@media (max-width: 480px) {
footer {
padding: 30px 15px 15px;
}
.footer-container {
flex-direction: column;
flex-wrap: nowrap;
gap: 25px;
}
.footer-section {
flex: 1 1 100%; /* 1 colonne sur très petit mobile */
width: 100%;
text-align: center;
}
.footer-section h3 {
text-align: center;
}
.footer-certifications {
align-items: center;
}
.footer-cert-img {
max-width: 100px;
}
.logo img {
height: 55px;
}
header {
padding: 8px 0;
}
.header-container {
padding: 8px 15px;
}
nav {
gap: 10px;
}
.slider {
height: 300px;
}
.slide-content h1 {
font-size: clamp(16px, 4.5vw, 24px);
letter-spacing: 0.5px;
}
.slider-arrow {
background-color: rgba(178, 34, 34, 0.3);
border: 1px solid rgba(255, 255, 255, 0.6);
}
.slider-arrow:hover {
background-color: rgba(178, 34, 34, 0.5);
}
section h2 {
font-size: 22px;
}
section h3 {
font-size: 18px;
}
section p {
font-size: 14px;
}
.btn {
padding: 10px 20px;
font-size: 14px;
}
}
/* ============================================
UTILITIES
============================================ */
.text-center {
text-align: center;
}
.text-brick {
color: var(--color-brick);
}
.bg-light {
background: linear-gradient(135deg, var(--color-light-gray) 0%, var(--color-white) 100%);
padding: 40px 20px;
border-radius: 12px;
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
}
.bg-brick {
background-color: var(--color-brick);
color: var(--color-white);
}
.padding-section {
padding: 40px 20px;
}
.margin-top {
margin-top: 30px;
}
.margin-bottom {
margin-bottom: 30px;
}
.highlight {
background: linear-gradient(135deg, #FFF5F5 0%, #FFE5E5 100%);
padding: 25px;
border-left: 5px solid var(--color-brick);
border-radius: 8px;
margin: 25px 0;
box-shadow: 0 4px 10px rgba(178, 34, 34, 0.1);
border-top: 1px solid rgba(178, 34, 34, 0.1);
border-right: 1px solid rgba(178, 34, 34, 0.1);
border-bottom: 1px solid rgba(178, 34, 34, 0.1);
}
/* ============================================
SERVICES GRID
============================================ */
.services-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
margin-top: 40px;
align-items: stretch; /* Assure que toutes les cartes ont la même hauteur */
}
.service-card {
background: linear-gradient(135deg, var(--color-white) 0%, var(--color-light-gray) 100%);
padding: 40px;
border-radius: 12px;
border-left: 5px solid var(--color-brick);
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
border-top: 1px solid var(--color-medium-gray);
border-right: 1px solid var(--color-medium-gray);
border-bottom: 1px solid var(--color-medium-gray);
display: flex; /* Active flexbox */
flex-direction: column; /* Organise le contenu en colonne */
height: 100%; /* Prend toute la hauteur disponible */
}
.service-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 24px rgba(178, 34, 34, 0.2);
border-left-width: 6px;
background: linear-gradient(135deg, var(--color-white) 0%, #FFF5F5 100%);
}
.service-card h3 {
color: var(--color-brick);
margin-top: 0;
margin-bottom: 15px; /* Espacement cohérent */
}
.service-card p {
font-size: 15px;
margin-bottom: 20px;
flex-grow: 1; /* Prend l'espace disponible */
line-height: 1.7;
}
.service-card .btn {
margin-top: auto; /* Pousse le bouton en bas de la carte */
width: 100%; /* Bouton pleine largeur */
text-align: center;
}
/* ============================================
TESTIMONIALS
============================================ */
.testimonial {
background: linear-gradient(135deg, var(--color-white) 0%, var(--color-light-gray) 100%);
padding: 30px;
border-radius: 10px;
margin-bottom: 25px;
border-left: 5px solid var(--color-brick);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.testimonial:hover {
box-shadow: 0 8px 20px rgba(178, 34, 34, 0.15);
transform: translateX(5px);
}
.testimonial-author {
font-weight: 600;
color: var(--color-brick);
margin-top: 15px;
}
.testimonial-rating {
color: #ffc107;
font-size: 14px;
margin-bottom: 10px;
}
/* ============================================
BREADCRUMB
============================================ */
.breadcrumb {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 30px;
font-size: 14px;
padding: 15px 0;
}
.breadcrumb a {
color: var(--color-brick);
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
padding: 5px 10px;
border-radius: 5px;
}
.breadcrumb a:hover {
color: var(--color-white);
background: var(--color-brick);
text-decoration: none;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(178, 34, 34, 0.3);
}
.breadcrumb span {
color: var(--color-gray);
font-weight: 500;
}
/* ============================================
HOME IMAGES SECTION
============================================ */
.home-images-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
margin-top: 40px;
}
.home-image-item {
position: relative;
overflow: hidden;
border-radius: 16px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
aspect-ratio: 16 / 9;
cursor: pointer;
border: 2px solid transparent;
}
.home-image-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(178, 34, 34, 0) 0%, rgba(178, 34, 34, 0.1) 100%);
opacity: 0;
transition: opacity 0.4s ease;
z-index: 1;
}
.home-image-item:hover::before {
opacity: 1;
}
.home-image-item:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 16px 40px rgba(178, 34, 34, 0.3);
border-color: var(--color-brick-light);
}
.home-image-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.home-image-item:hover img {
transform: scale(1.1);
}
/* ============================================
IMAGE MODAL
============================================ */
.image-modal {
display: none;
position: fixed;
z-index: 10000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
overflow: auto;
animation: fadeIn 0.3s ease;
}
.image-modal.active {
display: flex;
align-items: center;
justify-content: center;
}
.image-modal-content {
position: relative;
max-width: 90%;
max-height: 90%;
margin: auto;
animation: zoomIn 0.3s ease;
}
.image-modal-content img {
width: 100%;
height: auto;
max-height: 90vh;
object-fit: contain;
border-radius: 8px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.image-modal-close {
position: absolute;
top: 20px;
right: 20px;
color: var(--color-white);
font-size: 20px;
font-weight: bold;
cursor: pointer;
z-index: 10001;
transition: all 0.3s ease;
background: rgba(178, 34, 34, 0.9);
width: 45px;
height: 45px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
padding: 0;
margin: 0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.image-modal-close:hover {
color: var(--color-white);
background: var(--color-brick);
transform: scale(1.15);
box-shadow: 0 6px 16px rgba(178, 34, 34, 0.5);
}
/* Navigation dans la modal */
.image-modal-nav {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: none;
align-items: center;
gap: 15px;
z-index: 10002;
background: rgba(0, 0, 0, 0.6);
padding: 10px 20px;
border-radius: 25px;
backdrop-filter: blur(4px);
}
.image-modal-nav button {
background: rgba(255, 255, 255, 0.2);
border: none;
color: white;
font-size: 20px;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.image-modal-nav button:hover {
background: var(--color-brick);
transform: scale(1.1);
}
.image-modal-counter {
color: white;
font-size: 14px;
font-weight: 500;
min-width: 50px;
text-align: center;
}
/* Navigation entre réalisations dans la modal */
.realisation-modal-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
display: none;
justify-content: space-between;
padding: 0 30px;
z-index: 10003;
pointer-events: none;
}
.realisation-modal-nav button {
background: rgba(178, 34, 34, 0.9);
border: 2px solid rgba(255, 255, 255, 0.8);
color: white;
font-size: 24px;
width: 60px;
height: 60px;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
pointer-events: auto;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
backdrop-filter: blur(5px);
}
.realisation-modal-nav button:hover {
background: var(--color-brick);
transform: scale(1.15);
box-shadow: 0 6px 20px rgba(178, 34, 34, 0.6);
}
.realisation-modal-nav .realisation-modal-prev {
left: 30px;
}
.realisation-modal-nav .realisation-modal-next {
right: 30px;
}
@media (max-width: 768px) {
.realisation-modal-nav {
padding: 0 15px;
}
.realisation-modal-nav button {
width: 50px;
height: 50px;
font-size: 20px;
}
}
@media (max-width: 480px) {
.realisation-modal-nav button {
width: 45px;
height: 45px;
font-size: 18px;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes zoomIn {
from {
transform: scale(0.8);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
/* ============================================
FOOTER CERTIFICATIONS
============================================ */
/* ============================================
FOOTER LOGO & SOCIAL
============================================ */
.footer-logo-social {
display: flex;
flex-direction: column;
gap: 10px;
align-items: flex-start;
margin-bottom: 10px;
}
.footer-logo {
max-width: 80px;
height: auto;
filter: brightness(0) invert(1);
opacity: 0.9;
transition: opacity 0.3s ease;
}
.footer-logo:hover {
opacity: 1;
}
/* ============================================
FACEBOOK ICON
============================================ */
.footer-certifications {
display: flex;
flex-direction: column;
gap: 15px;
align-items: flex-start;
}
.footer-cert-img {
max-width: 120px;
width: 100%;
height: auto;
filter: brightness(0.9);
transition: all 0.3s ease;
border-radius: 8px;
}
.footer-cert-img:hover {
filter: brightness(1.1);
transform: scale(1.05);
}
.facebook-link {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 15px;
border-radius: 8px;
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.05);
}
.facebook-link:hover {
background: rgba(24, 119, 242, 0.1);
transform: translateX(5px);
}
.facebook-icon {
width: 20px;
height: 20px;
fill: #e0e0e0;
transition: fill 0.3s ease;
}
.facebook-link:hover .facebook-icon {
fill: #1877F2;
}
/* ============================================
MENTIONS LEGALES PAGE SPECIFIC
============================================ */
.mentions-legales-page section {
margin-bottom: 50px;
padding-bottom: 30px;
border-bottom: 1px solid var(--color-medium-gray);
}
.mentions-legales-page section:last-child {
border-bottom: none;
}
.mentions-legales-page section h2 {
font-size: 28px;
color: var(--color-brick);
margin-top: 0;
margin-bottom: 35px;
text-align: left;
position: relative;
padding: 15px 0 15px 20px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
border-left: 5px solid var(--color-brick);
background: linear-gradient(90deg, rgba(178, 34, 34, 0.05) 0%, transparent 100%);
}
.mentions-legales-page section h2::after {
display: none;
}
.mentions-legales-page section h3 {
font-size: 24px;
color: var(--color-brick);
margin-top: 35px;
margin-bottom: 20px;
font-weight: 600;
border-left: 4px solid var(--color-brick);
padding-left: 15px;
}
.mentions-legales-page section h4 {
font-size: 18px;
color: var(--color-dark);
margin-top: 25px;
margin-bottom: 15px;
font-weight: 600;
}
.mentions-legales-page section p {
font-size: 16px;
color: var(--color-dark);
line-height: 1.9;
margin-bottom: 18px;
text-align: justify;
}
.mentions-legales-page section ul {
margin: 20px 0;
padding-left: 30px;
list-style: none;
}
.mentions-legales-page section ul li {
position: relative;
padding-left: 25px;
margin-bottom: 12px;
line-height: 1.8;
color: var(--color-dark);
font-size: 15px;
}
.mentions-legales-page section ul li::before {
content: '▸';
position: absolute;
left: 0;
color: var(--color-brick);
font-weight: bold;
font-size: 18px;
}
.mentions-legales-page section a {
color: var(--color-brick);
text-decoration: none;
transition: color 0.3s ease;
}
.mentions-legales-page section a:hover {
color: var(--color-brick-dark);
text-decoration: underline;
}
.mentions-legales-page .highlight {
padding: 25px 30px;
line-height: 1.8;
}
.mentions-legales-page .highlight p {
margin-bottom: 12px;
}
.mentions-legales-page .highlight p:last-child {
margin-bottom: 0;
}
/* ============================================
PAGE RÉALISATIONS - GALERIE
============================================ */
.realisations-gallery {
margin-top: 40px;
}
.realisations-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 25px;
}
/* Cartes Réalisations - Même style que cartes Avis */
.realisation-card {
background: var(--color-white);
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
border: 1px solid var(--color-medium-gray);
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
cursor: pointer;
aspect-ratio: 4 / 3;
}
.realisation-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(178, 34, 34, 0.15);
border-color: var(--color-brick-light);
}
.realisation-image {
position: relative;
width: 100%;
height: 100%;
min-height: 300px;
overflow: hidden;
background: var(--color-light-gray);
}
.realisation-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.realisation-card:hover .realisation-image img {
transform: scale(1.05);
}
.realisation-image .image-count {
position: absolute;
bottom: 10px;
right: 10px;
background: rgba(44, 44, 44, 0.85);
color: white;
padding: 4px 10px;
border-radius: 4px;
font-size: 12px;
display: flex;
align-items: center;
gap: 5px;
z-index: 3;
}
.realisation-image .image-count svg {
opacity: 0.9;
}
.realisation-content {
padding: 20px;
}
.realisation-content h3 {
font-size: 15px;
color: var(--color-dark);
margin-bottom: 10px;
font-weight: 600;
line-height: 1.3;
padding-bottom: 10px;
border-bottom: 1px solid var(--color-medium-gray);
}
.realisation-content p {
font-size: 14px;
color: var(--color-gray);
line-height: 1.7;
margin-bottom: 15px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.realisation-date {
font-size: 12px;
color: var(--color-brick);
font-weight: 500;
display: inline-block;
padding: 3px 10px;
background: rgba(178, 34, 34, 0.08);
border-radius: 4px;
}
/* ============================================
LIGHTBOX RÉALISATIONS
============================================ */
.lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.95);
z-index: 10000;
align-items: center;
justify-content: center;
}
.lightbox.active {
display: flex;
}
.lightbox-content {
position: relative;
max-width: 90vw;
max-height: 85vh;
display: flex;
flex-direction: column;
align-items: center;
}
.lightbox-content img {
max-width: 100%;
max-height: 80vh;
object-fit: contain;
border-radius: 4px;
box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
}
.lightbox-close {
position: absolute;
top: 20px;
right: 30px;
font-size: 40px;
color: white;
cursor: pointer;
z-index: 10001;
transition: transform 0.3s ease, color 0.3s ease;
line-height: 1;
}
.lightbox-close:hover {
color: var(--color-brick);
transform: scale(1.2);
}
.lightbox-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.15);
border: none;
color: white;
font-size: 28px;
width: 60px;
height: 60px;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(4px);
}
.lightbox-arrow:hover {
background: var(--color-brick);
transform: translateY(-50%) scale(1.1);
}
.lightbox-prev {
left: 30px;
}
.lightbox-next {
right: 30px;
}
.lightbox-counter {
color: white;
font-size: 14px;
margin-top: 15px;
opacity: 0.8;
letter-spacing: 2px;
}
/* Bouton secondaire */
.btn-secondary {
background: transparent;
border: 2px solid var(--color-brick);
color: var(--color-brick);
}
.btn-secondary:hover {
background: var(--color-brick);
color: white;
}
/* ============================================
RESPONSIVE RÉALISATIONS
============================================ */
@media (max-width: 768px) {
.realisations-grid {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}
.realisation-image {
min-height: 250px;
}
.lightbox-arrow {
width: 45px;
height: 45px;
font-size: 22px;
}
.lightbox-prev {
left: 15px;
}
.lightbox-next {
right: 15px;
}
.lightbox-close {
top: 15px;
right: 20px;
font-size: 32px;
}
}
@media (max-width: 480px) {
.realisations-grid {
grid-template-columns: 1fr;
}
.lightbox-arrow {
width: 40px;
height: 40px;
font-size: 18px;
background: rgba(255, 255, 255, 0.25);
}
.lightbox-prev {
left: 10px;
}
.lightbox-next {
right: 10px;
}
}
/* ============================================
PAGE AVIS CLIENTS
============================================ */
/* Section Statistiques - Style cohérent avec .highlight */
.avis-statistics {
background: linear-gradient(135deg, var(--color-brick) 0%, var(--color-brick-dark) 100%);
border-radius: 16px;
padding: 60px 40px;
margin: 50px 0;
text-align: center;
box-shadow: 0 8px 30px rgba(178, 34, 34, 0.3);
position: relative;
overflow: hidden;
}
.avis-statistics::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
pointer-events: none;
}
.avis-stats-content {
display: flex;
justify-content: center;
align-items: center;
gap: 80px;
flex-wrap: wrap;
position: relative;
z-index: 1;
}
.avis-stat-item {
text-align: center;
padding: 20px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.avis-stat-item:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
.avis-stat-number {
font-size: 3.2em;
font-weight: 800;
color: var(--color-white);
margin-bottom: 12px;
line-height: 1;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.avis-stat-stars {
font-size: 1.6em;
color: #ffd700;
margin-bottom: 12px;
letter-spacing: 4px;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
.avis-stat-label {
color: rgba(255, 255, 255, 0.95);
font-size: 1.05em;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
/* Galerie des avis */
.avis-gallery {
background: linear-gradient(135deg, var(--color-light-gray) 0%, var(--color-white) 100%);
padding: 80px 20px;
margin: 60px 0;
}
.avis-gallery h3,
.avis-breakdown h3,
.review-form-section h3 {
font-size: 2.5em;
color: var(--color-brick);
margin-bottom: 20px;
text-align: center;
position: relative;
padding-bottom: 20px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
}
.avis-gallery h3::after,
.avis-breakdown h3::after,
.review-form-section h3::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;
background: linear-gradient(90deg, var(--color-brick) 0%, var(--color-brick-light) 100%);
border-radius: 2px;
}
.avis-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 25px;
}
/* Lien carte avis */
.avis-card-link {
text-decoration: none;
color: inherit;
display: block;
}
.avis-card {
background: var(--color-white);
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
border: 1px solid var(--color-medium-gray);
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
cursor: pointer;
}
.avis-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(178, 34, 34, 0.15);
border-color: var(--color-brick-light);
}
.avis-image {
position: relative;
width: 100%;
height: 180px;
overflow: hidden;
background: var(--color-light-gray);
}
.avis-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.avis-card:hover .avis-image img {
transform: scale(1.05);
}
.avis-image .image-count {
position: absolute;
bottom: 10px;
right: 10px;
background: rgba(44, 44, 44, 0.85);
color: white;
padding: 4px 10px;
border-radius: 4px;
font-size: 12px;
display: flex;
align-items: center;
gap: 5px;
}
.video-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
background: var(--color-brick);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
transition: transform 0.3s ease, background 0.3s ease;
box-shadow: 0 4px 15px rgba(178, 34, 34, 0.4);
}
.avis-card:hover .video-icon {
transform: translate(-50%, -50%) scale(1.1);
background: var(--color-brick-dark);
}
.avis-content {
padding: 20px;
}
.avis-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px solid var(--color-medium-gray);
}
.avis-header h4 {
font-size: 15px;
color: var(--color-dark);
margin: 0;
font-weight: 600;
}
.avis-stars {
color: var(--color-brick);
font-size: 14px;
letter-spacing: 2px;
}
.avis-text {
font-size: 14px;
color: var(--color-gray);
line-height: 1.7;
margin-bottom: 15px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.avis-date {
font-size: 12px;
color: var(--color-brick);
font-weight: 500;
display: inline-block;
padding: 3px 10px;
background: rgba(178, 34, 34, 0.08);
border-radius: 4px;
}
.actualite-read-more {
color: var(--color-brick);
font-weight: 600;
font-size: 14px;
margin-top: 10px;
display: inline-block;
transition: color 0.3s ease;
}
.avis-card-link:hover .actualite-read-more {
color: var(--color-brick-dark);
}
/* Répartition des avis */
.avis-breakdown {
background: linear-gradient(135deg, var(--color-light-gray) 0%, var(--color-white) 100%);
padding: 80px 20px;
margin: 60px 0;
}
.breakdown-container {
max-width: 450px;
margin: 0 auto;
}
.breakdown-row {
display: flex;
align-items: center;
margin-bottom: 10px;
padding: 8px 12px;
background: var(--color-white);
border-radius: 6px;
border: 1px solid var(--color-medium-gray);
}
.breakdown-star {
width: 45px;
text-align: right;
margin-right: 12px;
color: var(--color-brick);
font-weight: 600;
font-size: 13px;
}
.breakdown-bar {
flex: 1;
height: 10px;
background: var(--color-medium-gray);
border-radius: 5px;
margin-right: 12px;
overflow: hidden;
}
.breakdown-fill {
height: 100%;
background: linear-gradient(90deg, var(--color-brick-light), var(--color-brick));
border-radius: 5px;
transition: width 0.5s ease;
}
.breakdown-count {
color: var(--color-dark);
font-weight: 600;
min-width: 25px;
text-align: center;
font-size: 13px;
}
.breakdown-percent {
color: var(--color-gray);
font-size: 12px;
min-width: 45px;
text-align: right;
}
/* Responsive avis */
@media (max-width: 768px) {
.avis-stats-content {
gap: 50px;
}
.avis-stat-number {
font-size: 2.2em;
}
.avis-grid {
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 20px;
}
.avis-image {
height: 160px;
}
.breakdown-row {
padding: 6px 10px;
}
.breakdown-star {
width: 40px;
font-size: 12px;
}
}
@media (max-width: 480px) {
.avis-statistics {
padding: 20px 15px;
}
.avis-stats-content {
flex-direction: column;
gap: 20px;
}
.avis-grid {
grid-template-columns: 1fr;
}
.avis-header {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.breakdown-percent {
display: none;
}
}
/* ============================================
FORMULAIRE DE SOUMISSION D'AVIS
============================================ */
.review-form-section {
background: linear-gradient(135deg, var(--color-light-gray) 0%, var(--color-white) 100%);
padding: 80px 20px;
margin: 60px 0;
}
.review-form-section .container {
margin-bottom: 40px;
}
.form-intro {
text-align: center;
color: var(--color-gray);
margin-bottom: 30px;
font-size: 1em;
}
.review-form {
max-width: 600px;
margin: 0 auto;
background: var(--color-light-gray);
padding: 40px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: 1px solid var(--color-medium-gray);
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
.form-group {
margin-bottom: 18px;
}
.form-group label {
display: flex;
align-items: center;
margin-bottom: 6px;
font-weight: 600;
color: var(--color-dark);
font-size: 0.95em;
}
.form-group label svg {
color: var(--color-brick);
flex-shrink: 0;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="number"],
.form-group textarea,
.form-group select {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--color-border);
border-radius: 5px;
font-size: 0.95em;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
font-family: inherit;
background: var(--color-white);
}
.form-group select {
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%232C2C2C' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 35px;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
outline: none;
border-color: var(--color-brick);
box-shadow: 0 0 0 2px rgba(178, 34, 34, 0.1);
}
.form-group input[type="file"] {
width: 100%;
padding: 10px;
border: 1px dashed var(--color-border);
border-radius: 5px;
background: var(--color-light-gray);
cursor: pointer;
font-size: 0.9em;
}
.form-group input[type="file"]:hover {
border-color: var(--color-brick);
background: rgba(178, 34, 34, 0.03);
}
.form-group small {
display: block;
margin-top: 6px;
color: var(--color-gray);
font-size: 0.8em;
}
.form-group textarea {
resize: vertical;
min-height: 100px;
}
.char-counter {
text-align: right;
color: var(--color-gray);
font-size: 0.8em;
margin-top: 4px;
}
/* Étoiles de notation */
.rating-stars {
text-align: center;
padding: 12px 0;
background: var(--color-light-gray);
border-radius: 5px;
border: 1px solid var(--color-medium-gray);
}
.rating-stars .star {
font-size: 2em;
color: var(--color-border);
cursor: pointer;
margin: 0 4px;
transition: color 0.2s ease, transform 0.2s ease;
}
.rating-stars .star:hover {
transform: scale(1.1);
color: var(--color-brick);
}
.rating-text {
text-align: center;
color: var(--color-gray);
font-style: italic;
margin-top: 8px;
font-size: 0.9em;
}
/* Bouton de soumission */
.form-submit {
text-align: center;
margin-top: 25px;
}
.form-submit .btn {
padding: 12px 35px;
font-size: 1em;
}
/* Spinner */
.spinner {
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: white;
animation: spin 0.8s linear infinite;
vertical-align: middle;
margin-right: 8px;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Message de retour */
.review-message {
display: none;
margin-top: 20px;
margin-bottom: 20px;
padding: 12px 18px;
border-radius: 5px;
text-align: center;
font-weight: 500;
font-size: 0.95em;
}
.review-message.success {
background: rgba(40, 167, 69, 0.1);
color: #155724;
border-left: 4px solid #28a745;
}
.review-message.error {
background: #f8d7da;
color: #721c24;
border-left: 4px solid #dc3545;
}
/* Section introduction contact */
.contact-intro-section {
background: linear-gradient(135deg, var(--color-light-gray) 0%, var(--color-white) 100%);
padding: 40px;
border-radius: 12px;
margin: 40px 0;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
text-align: center;
}
.contact-intro-section p {
font-size: 1.1em;
color: var(--color-dark);
line-height: 1.8;
margin: 0;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
/* Grille contact */
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
margin-top: 40px;
margin-bottom: 60px;
align-items: stretch; /* Assure que les deux colonnes ont la même hauteur */
}
.contact-grid > div {
display: flex;
flex-direction: column;
}
.contact-grid .review-form-section {
display: flex;
flex-direction: column;
height: 100%; /* Prend toute la hauteur disponible */
min-height: 100%; /* Minimum la hauteur du conteneur parent */
}
/* Section coordonnées contact */
.contact-info-box {
background: var(--color-white);
padding: 30px;
border-radius: 12px;
border: 1px solid var(--color-medium-gray);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.contact-info-item {
margin-bottom: 30px;
padding-bottom: 25px;
border-bottom: 1px solid var(--color-medium-gray);
display: flex;
align-items: flex-start;
gap: 15px;
transition: transform 0.3s ease;
}
.contact-info-item:hover {
transform: translateX(5px);
}
.contact-info-item:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.contact-info-item > div:last-child {
flex: 1;
}
.contact-info-icon {
flex-shrink: 0;
width: 48px;
height: 48px;
background: linear-gradient(135deg, var(--color-brick) 0%, var(--color-brick-dark) 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-white);
box-shadow: 0 4px 12px rgba(178, 34, 34, 0.3);
}
.contact-info-icon svg {
width: 24px;
height: 24px;
}
.contact-info-item h4 {
color: var(--color-brick);
font-size: 1.2em;
margin-bottom: 8px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.contact-info-item p {
color: var(--color-dark);
line-height: 1.8;
margin: 0;
font-size: 1em;
}
.contact-info-item a {
color: var(--color-dark);
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
display: inline-block;
}
.contact-info-item a:hover {
color: var(--color-brick);
transform: translateX(3px);
}
/* Responsive formulaire */
@media (max-width: 768px) {
.contact-intro-section {
padding: 30px 20px;
margin: 30px 0;
}
.contact-intro-section p {
font-size: 1em;
}
.review-form-section {
padding: 20px 15px;
margin: 30px 0 20px;
}
.review-form {
padding: 20px;
}
.form-row {
grid-template-columns: 1fr;
gap: 0;
}
.rating-stars .star {
font-size: 1.8em;
margin: 0 3px;
}
.form-submit .btn {
width: 100%;
padding: 12px 20px;
}
.contact-info-box {
padding: 20px;
}
.contact-info-item {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.contact-info-icon {
width: 40px;
height: 40px;
}
.contact-info-icon svg {
width: 20px;
height: 20px;
}
.contact-grid {
grid-template-columns: 1fr;
gap: 30px;
}
}
/* ============================================
PAGE DÉTAIL AVIS
============================================ */
.avis-detail-page {
background: var(--color-white);
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
border: 1px solid var(--color-medium-gray);
margin-bottom: 40px;
}
.avis-detail-header {
background: var(--color-light-gray);
padding: 25px 30px;
border-bottom: 1px solid var(--color-medium-gray);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 15px;
}
.avis-detail-author h2 {
color: var(--color-dark);
font-size: 1.6em;
margin-bottom: 10px;
}
.avis-detail-stars {
font-size: 1.3em;
color: var(--color-brick);
letter-spacing: 3px;
display: flex;
align-items: center;
gap: 10px;
}
.avis-note-text {
font-size: 0.65em;
color: var(--color-gray);
font-weight: 500;
letter-spacing: 0;
}
.avis-detail-date {
color: var(--color-gray);
font-size: 0.95em;
padding: 6px 14px;
background: var(--color-white);
border-radius: 4px;
border: 1px solid var(--color-medium-gray);
}
.avis-detail-body {
padding: 30px;
}
/* Section Média */
.avis-detail-media {
margin-bottom: 30px;
}
/* Slideshow */
.avis-slideshow {
position: relative;
background: var(--color-dark);
border-radius: 8px;
overflow: hidden;
margin-bottom: 20px;
}
.avis-slides-wrapper {
position: relative;
width: 100%;
min-height: 350px;
}
.avis-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.5s ease;
display: flex;
align-items: center;
justify-content: center;
}
.avis-slide.active {
opacity: 1;
position: relative;
}
.avis-slide img {
max-width: 100%;
max-height: 450px;
object-fit: contain;
}
.avis-slide-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.2);
border: none;
color: white;
font-size: 18px;
width: 45px;
height: 45px;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
}
.avis-slide-nav:hover {
background: var(--color-brick);
}
.avis-slide-nav.prev {
left: 15px;
}
.avis-slide-nav.next {
right: 15px;
}
.avis-slide-counter {
position: absolute;
top: 15px;
right: 15px;
background: rgba(0, 0, 0, 0.6);
color: white;
padding: 5px 12px;
border-radius: 4px;
font-size: 14px;
z-index: 10;
}
.avis-slide-dots {
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 10;
}
.avis-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
cursor: pointer;
transition: all 0.3s ease;
}
.avis-dot.active,
.avis-dot:hover {
background: var(--color-brick);
transform: scale(1.2);
}
/* Vidéo */
.avis-video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.avis-video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Témoignage */
.avis-detail-testimonial {
background: var(--color-light-gray);
padding: 20px 25px;
border-left: 4px solid var(--color-brick);
border-radius: 0 5px 5px 0;
font-size: 1em;
line-height: 1.7;
color: var(--color-dark);
}
/* Actions */
.avis-detail-actions {
padding: 20px 30px;
background: var(--color-light-gray);
border-top: 1px solid var(--color-medium-gray);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 15px;
}
/* Bouton secondaire */
.btn-secondary {
background: transparent;
border: 2px solid var(--color-brick);
color: var(--color-brick);
}
.btn-secondary:hover {
background: var(--color-brick);
color: white;
}
/* Responsive détail avis */
@media (max-width: 768px) {
.avis-detail-header {
padding: 20px;
flex-direction: column;
align-items: flex-start;
}
.avis-detail-author h2 {
font-size: 1.4em;
}
.avis-detail-stars {
font-size: 1.1em;
}
.avis-detail-body {
padding: 20px;
}
.avis-slides-wrapper {
min-height: 280px;
}
.avis-slide img {
max-height: 350px;
}
.avis-slide-nav {
width: 38px;
height: 38px;
font-size: 16px;
}
.avis-detail-testimonial blockquote {
padding: 20px;
font-size: 1em;
}
.avis-detail-actions {
padding: 15px 20px;
}
}
@media (max-width: 480px) {
.avis-slides-wrapper {
min-height: 220px;
}
.avis-slide img {
max-height: 280px;
}
.avis-slide-nav {
width: 35px;
height: 35px;
font-size: 14px;
}
.avis-slide-nav.prev {
left: 10px;
}
.avis-slide-nav.next {
right: 10px;
}
.avis-detail-actions {
flex-direction: column;
}
.avis-detail-actions .btn {
width: 100%;
text-align: center;
}
}
/* ============================================
MODERNISATION - NOUVELLES SECTIONS
============================================ */
/* Section Statistiques */
.stats-section {
background: linear-gradient(135deg, var(--color-brick) 0%, var(--color-brick-dark) 100%);
padding: 80px 20px;
margin: 60px 0;
position: relative;
overflow: hidden;
}
.stats-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 40px;
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.stat-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
padding: 40px 30px;
border-radius: 16px;
text-align: center;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.stat-card:hover {
transform: translateY(-10px) scale(1.05);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
background: rgba(255, 255, 255, 1);
}
.stat-icon {
font-size: 48px;
margin-bottom: 20px;
display: block;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}
.stat-number {
font-size: 3.5em;
font-weight: 800;
color: var(--color-brick);
margin-bottom: 10px;
line-height: 1;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.stat-label {
font-size: 1.1em;
color: var(--color-dark);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}
/* Section Introduction */
.intro-section {
padding: 60px 20px;
}
.intro-content {
max-width: 900px;
margin: 0 auto;
}
.intro-content .lead {
font-size: 1.3em;
line-height: 1.8;
color: var(--color-dark);
margin-bottom: 25px;
font-weight: 500;
}
/* Section Services Showcase */
.services-showcase {
background: linear-gradient(135deg, var(--color-light-gray) 0%, var(--color-white) 100%);
padding: 80px 20px;
margin: 60px 0;
}
.section-title {
font-size: 2.5em;
color: var(--color-brick);
margin-bottom: 20px;
text-align: center;
position: relative;
padding-bottom: 20px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
}
.section-title::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;
background: linear-gradient(90deg, var(--color-brick) 0%, var(--color-brick-light) 100%);
border-radius: 2px;
}
.section-subtitle {
text-align: center;
font-size: 1.2em;
color: var(--color-gray);
margin-bottom: 50px;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.service-card-modern {
background: var(--color-white);
padding: 50px 35px;
border-radius: 20px;
text-align: center;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 2px solid transparent;
position: relative;
overflow: hidden;
display: flex; /* Active flexbox */
flex-direction: column; /* Organise le contenu en colonne */
height: 100%; /* Prend toute la hauteur disponible */
}
.service-card-modern::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, var(--color-brick) 0%, var(--color-brick-light) 100%);
transform: scaleX(0);
transition: transform 0.4s ease;
}
.service-card-modern:hover::before {
transform: scaleX(1);
}
.service-card-modern:hover {
transform: translateY(-15px);
box-shadow: 0 20px 60px rgba(178, 34, 34, 0.25);
border-color: var(--color-brick-light);
}
.service-icon {
margin-bottom: 25px;
display: flex;
align-items: center;
justify-content: center;
filter: drop-shadow(0 4px 12px rgba(178, 34, 34, 0.2));
transition: transform 0.4s ease;
}
.service-icon img {
width: 64px;
height: 64px;
object-fit: contain;
display: block;
}
.service-card-modern:hover .service-icon {
transform: scale(1.1) rotate(5deg);
}
.service-card-modern:hover .service-icon img {
transform: scale(1);
}
.service-card-modern h3 {
font-size: 1.5em;
color: var(--color-dark);
margin-bottom: 20px;
font-weight: 700;
}
.service-card-modern p {
font-size: 1em;
color: var(--color-gray);
line-height: 1.8;
margin-bottom: 30px;
flex-grow: 1; /* Prend l'espace disponible pour pousser le bouton en bas */
}
.btn-service {
display: inline-block;
padding: 12px 30px;
background: linear-gradient(135deg, var(--color-brick) 0%, var(--color-brick-dark) 100%);
color: var(--color-white);
text-decoration: none;
border-radius: 50px;
font-weight: 600;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 0.5px;
font-size: 0.9em;
box-shadow: 0 4px 15px rgba(178, 34, 34, 0.3);
margin-top: auto; /* Pousse le bouton en bas de la carte */
width: fit-content; /* Largeur adaptée au contenu */
margin-left: auto; /* Centre le bouton horizontalement */
margin-right: auto; /* Centre le bouton horizontalement */
}
.btn-service:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(178, 34, 34, 0.4);
background: linear-gradient(135deg, var(--color-brick-dark) 0%, var(--color-brick) 100%);
}
/* Section Pourquoi Nous Choisir */
.why-choose-us {
padding: 80px 20px;
background: linear-gradient(135deg, var(--color-light-gray) 0%, var(--color-white) 100%);
margin: 60px 0;
}
.values-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 50px;
}
.value-card {
background: linear-gradient(135deg, var(--color-white) 0%, var(--color-light-gray) 100%);
padding: 40px 30px;
border-radius: 16px;
text-align: center;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 2px solid transparent;
position: relative;
}
.value-card:hover {
transform: translateY(-10px);
box-shadow: 0 16px 40px rgba(178, 34, 34, 0.15);
border-color: var(--color-brick-light);
background: linear-gradient(135deg, var(--color-white) 0%, #FFF5F5 100%);
}
.value-icon-wrapper {
width: 80px;
height: 80px;
margin: 0 auto 25px;
background: linear-gradient(135deg, var(--color-brick) 0%, var(--color-brick-dark) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 20px rgba(178, 34, 34, 0.3);
transition: all 0.4s ease;
}
.value-card:hover .value-icon-wrapper {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 12px 30px rgba(178, 34, 34, 0.4);
}
.value-icon {
font-size: 36px;
color: var(--color-white);
font-weight: bold;
}
.value-card h3 {
font-size: 1.3em;
color: var(--color-dark);
margin-bottom: 15px;
font-weight: 700;
}
.value-card p {
font-size: 1em;
color: var(--color-gray);
line-height: 1.7;
margin: 0;
}
/* Section CTA */
.cta-section {
background: linear-gradient(135deg, var(--color-dark) 0%, #1a1a1a 100%);
padding: 100px 20px;
margin: 80px 0 0;
text-align: center;
position: relative;
overflow: hidden;
}
.cta-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.5;
}
.cta-content {
position: relative;
z-index: 1;
max-width: 800px;
margin: 0 auto;
}
.cta-content h2 {
font-size: 2.5em;
color: var(--color-white);
margin-bottom: 20px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
}
.cta-content p {
font-size: 1.3em;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 40px;
line-height: 1.8;
}
.btn-large {
padding: 18px 50px;
font-size: 1.1em;
background: linear-gradient(135deg, var(--color-brick) 0%, var(--color-brick-dark) 100%);
color: var(--color-white);
text-decoration: none;
border-radius: 50px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 0 8px 30px rgba(178, 34, 34, 0.4);
transition: all 0.3s ease;
display: inline-block;
}
.btn-large:hover {
transform: translateY(-5px) scale(1.05);
box-shadow: 0 12px 40px rgba(178, 34, 34, 0.5);
background: linear-gradient(135deg, var(--color-brick-dark) 0%, var(--color-brick) 100%);
}
/* Animations */
.fade-in-up {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in-up.visible {
opacity: 1;
transform: translateY(0);
}
.gallery-section {
padding: 60px 20px;
}
/* Responsive pour nouvelles sections */
@media (max-width: 768px) {
.stats-section {
padding: 60px 20px;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.stat-card {
padding: 30px 20px;
}
.stat-number {
font-size: 2.5em;
}
.stat-icon {
font-size: 36px;
}
.services-showcase,
.why-choose-us,
.avis-gallery,
.avis-breakdown,
.review-form-section {
padding: 60px 20px;
}
.section-title {
font-size: 2em;
}
.section-subtitle {
font-size: 1.1em;
}
.service-card-modern {
padding: 40px 25px;
}
.services-grid {
grid-template-columns: 1fr;
gap: 25px;
}
.service-icon {
margin-bottom: 20px;
}
.service-icon img {
width: 48px;
height: 48px;
}
.values-grid {
grid-template-columns: 1fr;
gap: 25px;
}
.cta-section {
padding: 60px 20px;
}
.cta-content h2 {
font-size: 2em;
}
.cta-content p {
font-size: 1.1em;
}
}
@media (max-width: 480px) {
.stats-grid {
grid-template-columns: 1fr;
}
.stat-number {
font-size: 2em;
}
.section-title {
font-size: 1.8em;
}
.cta-content h2 {
font-size: 1.6em;
}
.btn-large {
padding: 15px 35px;
font-size: 1em;
}
}
/* ============================================
ACTUALITÉS
============================================ */
.actualites-gallery {
margin-top: 40px;
margin-bottom: 60px;
}
.actualites-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 25px;
margin-bottom: 50px;
}
.actualite-card {
background: var(--color-white);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
border: 1px solid var(--color-medium-gray);
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
display: flex;
flex-direction: column;
height: 100%;
}
.actualite-link {
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
height: 100%;
}
.actualite-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(178, 34, 34, 0.15);
border-color: var(--color-brick-light);
}
.actualite-image {
position: relative;
width: 100%;
height: 250px;
overflow: hidden;
background: var(--color-light-gray);
}
.actualite-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.actualite-card:hover .actualite-image img {
transform: scale(1.05);
}
.actualite-image .image-count {
position: absolute;
bottom: 10px;
right: 10px;
background: rgba(44, 44, 44, 0.85);
color: white;
padding: 4px 10px;
border-radius: 4px;
font-size: 12px;
display: flex;
align-items: center;
gap: 5px;
z-index: 3;
}
.actualite-image .image-count svg {
opacity: 0.9;
}
.actualite-image .video-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(178, 34, 34, 0.9);
color: white;
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
transition: transform 0.3s ease;
}
.actualite-card:hover .actualite-image .video-icon {
transform: translate(-50%, -50%) scale(1.1);
}
.actualite-image .video-icon svg {
width: 28px;
height: 28px;
}
.actualite-content {
padding: 20px;
flex: 1;
display: flex;
flex-direction: column;
}
.actualite-date {
font-size: 12px;
color: var(--color-brick);
font-weight: 500;
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 12px;
padding: 4px 10px;
background: rgba(178, 34, 34, 0.08);
border-radius: 4px;
width: fit-content;
}
.actualite-date svg {
width: 14px;
height: 14px;
}
.actualite-title {
font-size: 18px;
color: var(--color-dark);
margin-bottom: 12px;
font-weight: 600;
line-height: 1.4;
flex: 1;
}
.actualite-description {
font-size: 14px;
color: var(--color-gray);
line-height: 1.7;
margin-bottom: 15px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.actualite-read-more {
color: var(--color-brick);
font-weight: 600;
font-size: 14px;
margin-top: auto;
transition: color 0.3s ease;
}
.actualite-link:hover .actualite-read-more {
color: var(--color-brick-dark);
}
/* Page détail actualité */
.actualite-detail {
margin-top: 40px;
margin-bottom: 60px;
}
.actualite-detail-content {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
margin-bottom: 40px;
}
.actualite-detail-media {
width: 100%;
}
.actualite-slideshow {
position: relative;
width: 100%;
border-radius: 12px;
overflow: hidden;
background: var(--color-dark);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}
.actualite-slide {
display: none;
width: 100%;
}
.actualite-slide.active {
display: block;
}
.actualite-slide img {
width: 100%;
height: auto;
display: block;
max-height: 600px;
object-fit: contain;
background: var(--color-dark);
}
.actualite-slideshow-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
display: flex;
justify-content: space-between;
padding: 0 20px;
pointer-events: none;
z-index: 10;
}
.actualite-slideshow-button {
background: rgba(255, 255, 255, 0.9);
border: none;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
pointer-events: all;
color: var(--color-dark);
}
.actualite-slideshow-button:hover {
background: var(--color-brick);
color: white;
transform: scale(1.1);
}
.actualite-slideshow-button svg {
width: 24px;
height: 24px;
}
.actualite-slideshow-dots {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
z-index: 10;
}
.actualite-slideshow-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
border: 2px solid white;
cursor: pointer;
transition: all 0.3s ease;
}
.actualite-slideshow-dot.active,
.actualite-slideshow-dot:hover {
background: var(--color-brick);
border-color: var(--color-brick);
transform: scale(1.2);
}
.actualite-video-container {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
overflow: hidden;
border-radius: 12px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}
.actualite-video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
.actualite-detail-info {
width: 100%;
}
.actualite-detail-date {
font-size: 14px;
color: var(--color-brick);
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 20px;
padding: 8px 15px;
background: rgba(178, 34, 34, 0.08);
border-radius: 6px;
width: fit-content;
}
.actualite-detail-date svg {
width: 16px;
height: 16px;
}
.actualite-detail-title {
font-size: 2.2em;
color: var(--color-dark);
margin-bottom: 25px;
font-weight: 700;
line-height: 1.3;
}
.actualite-detail-description,
.actualite-detail-description-detaillee {
font-size: 16px;
color: var(--color-gray);
line-height: 1.8;
margin-bottom: 30px;
}
.actualite-detail-description-detaillee {
color: var(--color-dark);
}
.actualite-detail-description-detaillee p {
margin-bottom: 15px;
}
.actualite-detail-description-detaillee img {
max-width: 100%;
height: auto;
border-radius: 8px;
margin: 20px 0;
}
.actualite-detail-video-section {
margin-top: 40px;
padding-top: 40px;
border-top: 2px solid var(--color-medium-gray);
}
.actualite-detail-video-section h3 {
font-size: 1.8em;
color: var(--color-dark);
margin-bottom: 25px;
font-weight: 600;
}
.actualite-detail-back {
margin-top: 40px;
padding-top: 40px;
border-top: 2px solid var(--color-medium-gray);
}
/* Pagination actualités */
.actualites-pagination {
margin-top: 50px;
padding-top: 30px;
border-top: 2px solid var(--color-medium-gray);
}
.pagination-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-bottom: 30px;
flex-wrap: wrap;
}
.pagination-link {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 15px;
background: var(--color-white);
color: var(--color-dark);
text-decoration: none;
border: 1px solid var(--color-medium-gray);
border-radius: 6px;
font-weight: 500;
transition: all 0.3s ease;
min-width: 40px;
height: 40px;
}
.pagination-link:hover {
background: var(--color-brick);
color: white;
border-color: var(--color-brick);
transform: translateY(-2px);
}
.pagination-link.pagination-current {
background: var(--color-brick);
color: white;
border-color: var(--color-brick);
cursor: default;
}
.pagination-link.pagination-prev,
.pagination-link.pagination-next {
gap: 8px;
}
.pagination-link svg {
width: 16px;
height: 16px;
}
.pagination-numbers {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.pagination-dots {
color: var(--color-gray);
padding: 0 5px;
}
.pagination-per-page {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-size: 14px;
color: var(--color-gray);
}
.pagination-per-page span:first-child {
margin-right: 10px;
}
.per-page-link {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 12px;
background: var(--color-white);
color: var(--color-dark);
text-decoration: none;
border: 1px solid var(--color-medium-gray);
border-radius: 4px;
font-weight: 500;
transition: all 0.3s ease;
min-width: 35px;
}
.per-page-link:hover {
background: var(--color-brick);
color: white;
border-color: var(--color-brick);
}
.per-page-link.per-page-active {
background: var(--color-brick);
color: white;
border-color: var(--color-brick);
cursor: default;
}
.pagination-info {
text-align: center;
margin-top: 20px;
font-size: 14px;
color: var(--color-gray);
padding: 10px 0;
}
/* Message pas d'actualités */
.no-actualites {
margin: 60px 0;
padding: 80px 20px;
text-align: center;
}
.no-actualites-content {
max-width: 500px;
margin: 0 auto;
padding: 60px 40px;
background: var(--color-white);
border: 2px dashed var(--color-medium-gray);
border-radius: 15px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.no-actualites-content svg {
color: var(--color-gray);
margin-bottom: 25px;
}
.no-actualites-content h3 {
color: var(--color-dark);
font-size: 24px;
font-weight: 600;
margin-bottom: 15px;
}
.no-actualites-content p {
color: var(--color-gray);
font-size: 16px;
line-height: 1.5;
margin: 0;
}
/* Responsive actualités */
@media (max-width: 768px) {
.actualites-grid {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}
.actualite-image {
height: 200px;
}
.actualite-detail-content {
grid-template-columns: 1fr;
gap: 30px;
}
.actualite-detail-title {
font-size: 1.8em;
}
.actualite-slideshow-button {
width: 40px;
height: 40px;
}
.actualite-slideshow-button svg {
width: 20px;
height: 20px;
}
.pagination-controls {
gap: 8px;
}
.pagination-link {
padding: 8px 12px;
min-width: 35px;
height: 35px;
font-size: 14px;
}
}
@media (max-width: 480px) {
.actualites-grid {
grid-template-columns: 1fr;
}
.actualite-image {
height: 180px;
}
.actualite-detail-title {
font-size: 1.5em;
}
.pagination-numbers {
gap: 5px;
}
.pagination-link {
padding: 6px 10px;
min-width: 30px;
height: 30px;
font-size: 12px;
}
.pagination-link.pagination-prev,
.pagination-link.pagination-next {
font-size: 12px;
}
.no-actualites-content {
padding: 40px 20px;
}
.no-actualites-content h3 {
font-size: 20px;
}
.no-actualites-content p {
font-size: 14px;
}
}
/* ============================================
ACTUALITE DETAIL PAGE
============================================ */
.actualite-detail {
padding: 40px 0;
}
.actualite-detail-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: start;
}
/* Section Média */
.actualite-media {
position: sticky;
top: 120px;
}
.actualite-slideshow {
position: relative;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
background: var(--color-dark);
cursor: pointer;
}
.actualite-slide {
display: none;
}
.actualite-slide.active {
display: block;
}
.actualite-slide img {
width: 100%;
height: auto;
max-height: 500px;
object-fit: cover;
display: block;
}
.slideshow-nav {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
padding: 0 15px;
pointer-events: none;
}
.slideshow-button {
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
pointer-events: auto;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.slideshow-button:hover {
background: var(--color-brick);
color: white;
transform: scale(1.1);
}
.slideshow-button svg {
width: 24px;
height: 24px;
}
.slideshow-dots {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
}
.slideshow-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
border: 2px solid rgba(255, 255, 255, 0.8);
cursor: pointer;
transition: all 0.3s ease;
}
.slideshow-dot.active,
.slideshow-dot:hover {
background: var(--color-brick);
border-color: white;
transform: scale(1.2);
}
/* Section Vidéo */
.actualite-video-container {
position: relative;
width: 100%;
padding-bottom: 56.25%;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}
.actualite-video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.actualite-video-section {
margin-top: 40px;
}
.actualite-video-section h3 {
margin-bottom: 20px;
}
/* Section Informations */
.actualite-info {
padding: 20px 0;
}
.actualite-date {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, var(--color-brick) 0%, var(--color-brick-dark) 100%);
color: white;
padding: 8px 16px;
border-radius: 50px;
font-size: 14px;
font-weight: 600;
margin-bottom: 20px;
}
.actualite-date svg {
width: 16px;
height: 16px;
}
.actualite-title {
font-size: 2em;
color: var(--color-dark);
margin-bottom: 25px;
line-height: 1.3;
font-weight: 700;
}
.actualite-description,
.actualite-description-detail {
font-size: 1.1em;
line-height: 1.8;
color: var(--color-gray);
}
.actualite-description-detail h2 {
font-size: 1.4em;
color: var(--color-dark);
margin: 30px 0 15px;
padding-bottom: 10px;
border-bottom: 2px solid var(--color-brick);
}
.actualite-description-detail h3 {
font-size: 1.2em;
color: var(--color-dark);
margin: 25px 0 12px;
}
.actualite-description-detail p {
margin-bottom: 15px;
}
.actualite-description-detail ul,
.actualite-description-detail ol {
margin: 15px 0 15px 25px;
}
.actualite-description-detail li {
margin-bottom: 8px;
}
/* Bouton Retour */
.actualite-back {
margin-top: 50px;
padding-top: 30px;
border-top: 2px solid var(--color-medium-gray);
}
.btn-back {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 25px;
background: linear-gradient(135deg, var(--color-brick) 0%, var(--color-brick-dark) 100%);
color: white;
text-decoration: none;
border-radius: 50px;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(178, 34, 34, 0.3);
}
.btn-back:hover {
transform: translateX(-5px);
box-shadow: 0 6px 20px rgba(178, 34, 34, 0.4);
}
.btn-back svg {
width: 20px;
height: 20px;
}
/* Responsive Actualité Détail */
@media (max-width: 992px) {
.actualite-detail-container {
grid-template-columns: 1fr;
gap: 30px;
}
.actualite-media {
position: relative;
top: 0;
}
.actualite-slide img {
max-height: 400px;
}
}
@media (max-width: 768px) {
.actualite-detail {
padding: 30px 0;
}
.actualite-title {
font-size: 1.5em;
}
.actualite-description,
.actualite-description-detail {
font-size: 1em;
}
.actualite-slide img {
max-height: 300px;
}
.slideshow-button {
width: 40px;
height: 40px;
}
.slideshow-button svg {
width: 20px;
height: 20px;
}
.actualite-back {
margin-top: 30px;
padding-top: 20px;
}
}