:root { --header-h: 0px; }
*{box-sizing:border-box;}
body {
margin: 0;
font-family: 'Poppins', system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
background-color: #3a3326;
color: white;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
background: linear-gradient(90deg, #264f14 0%, #3d7a29 50%, #264f14 100%);
padding: 4px 20px;
position: sticky;
top: 0;
z-index: 100;
}
header .logo } /* augmenté */
nav ul { list-style:none; display:flex; gap:200px; margin:0; padding:0; }
nav a { color:#fff; text-decoration:none; font-weight:600; font-size:0.95rem; }
.hero {
display:flex;
min-height: calc(100vh - var(--header-h));
align-items: stretch;
overflow:hidden;
}
.hero-left {
height:100%;
width:50%;
position:relative;
display:flex;
justify-content:center;
align-items:center;
background: url('assets/cars-background.jpeg') center/cover no-repeat;
}
.hero-left::before {
content:'';
position:absolute;
inset:0;
background:rgba(0,0,0,0.35);
}
.hero-text-wrapper {
position:relative;
max-width:600px;
padding:0 30px;
text-align:center;
}
.main-title {
margin:0;
font-size:clamp(2.6rem, 5vw, 4rem); /* revert à taille précédente */
line-height: 1.08;
font-weight:800;
letter-spacing:0.5px;
text-transform:none;
display:inline-block;
text-shadow:0 4px 12px rgba(0,0,0,0.4);
}
.logo-inline
.subtitle {
margin:60px 0 20px;
font-size:1rem;
font-weight:800;
}
.btn.learn-more {
background-color:#4CAF50;
padding:12px 22px;
font-size:1rem;
cursor:pointer;
font-weight:700;
color:#fff;
border-radius:3px;
transition:filter .2s;
}
.btn.learn-more:hover { filter:brightness(1.1); }
.hero-right {
height:100%;
width:50%;
background-color: rgba(0,0,0,0.7);
display:flex;
flex-direction:column;
justify-content:center;
padding:60px;
border-left:2px solid #333;
background-color: #0f0f10 !important;
}
.form-header {
display:flex;
align-items:center;
gap:12px;
margin-bottom:25px;
}
.car-icon { height:110px; }
.hero-right h2 {
margin:0;
font-size:1.9rem;
font-weight:700;
}
.hero-right form {
display:flex;
flex-direction:column;
gap:14px;
width:85%;
}
.hero-right input, .hero-right select {
padding:14px;
border-radius:4px;
background-color:#1c1c1c;
color:white;
font-size:1rem;
}
.hero-right input:focus, .hero-right select:focus {
border-color:#ffffff;
outline:none;
}
.btn-submit {
background-color:#4CAF50;
padding:15px;
color:white;
cursor:pointer;
font-weight:700;
font-size:1rem;
border-radius:4px;
}
.btn-submit:hover { background-color:#45a049; }
nav ul li { display:inline-block; }
nav ul li { padding: 0 5px; }
/* Ajustement du formulaire pour le centrer davantage */
.form-container {
margin-left: auto;
margin-right: auto;
position: relative;
left: 20px; /* déplace légèrement vers la droite */
}
/* Ajustement du titre */
.form-container h2, .form-container h1, .form-container .form-title {
text-align: center;
margin-left: 20px; /* décale légèrement à droite */
}
/* Ajustement précis du formulaire et du titre */
.form-container {
margin-left: 40px; /* décalage précis */
}
.form-container h2, .form-container h1, .form-container .form-title {
margin-left: 40px; /* aligner le titre avec le formulaire */
}
/* Translation du bloc de droite (section contenant le formulaire) */
.section-droite, .form-section, .form-container-parent {
transform: translateX(40px);
}
/* Ajustement précis du bloc droit (formulaire + titre) */
.hero-right {
height:100%;
margin-left: 40px !important;
}
/* Correction du fond et recentrage du titre */
.hero-right {
height:100%;
background-color: #111; /* même fond que le formulaire */
margin-left: 0 !important;
padding-left: 40px;
}
.hero-right .form-header h2 {
text-align: center;
}
/* Correction de la bande marron clair au milieu */
.hero-section, .main-section, .container {
background-color: #111 !important;
}
/* Centrage complet du formulaire et du titre */
.hero-right {
height:100%;
display: flex;
flex-direction: column;
align-items: center;
background-color: #111;
}
.hero-right form {
width: 90%; /* Ajuste la largeur pour centrer */
}
.hero-right .form-header h2 {
text-align: center;
width: 100%;
}
/* Vidéo de fond dans la section gauche */
.hero-left {
height:100%;
position: relative;
overflow: hidden;
}
.bg-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.4;
z-index: -1;
}
/* Supprime l'image de fond et garde uniquement la vidéo */
.hero-left {
height:100%;
background: none !important;
}
/* Style amélioré pour le texte d'accueil */
.hero-left h1 {
text-align: center;
font-size: 3rem;
line-height: 1.2;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
/* Logo intégré dans le texte */
.
/* Augmentation de la taille du logo inline */
.
/* Augmentation encore plus grande de la taille du logo inline */
.
/* Logo encore plus grand */
.
/* Logo encore plus grand (taille maximale) */
.
/* Style du nouvel icône voiture */
.form-header
/* Agrandir le logo et supprimer l'ancien espace */
.form-header
/* Supprimer toutes les icônes automatiques sur les champs de formulaire */
input, select, textarea {
background-image: none !important;
padding-left: 10px; /* ajuste l'espace s'il y avait une icône */
}
/* Added white glow for voiture.png logo */
img[src*="voiture.png"] {
filter: drop-shadow(0 0 2px white) drop-shadow(0 0 4px white);
}
/* Contour around voiture.png logo */
.
.
/* Ensure intl-tel-input has consistent width with other inputs */
.iti {
width: 100% !important;
}
.iti__selected-flag {
height: 100% !important;
}
/* Fix spacing between flags and dial codes in dropdown */
.iti__country-list .iti__dial-code {
margin-left: 4px !important;
padding-left: 0 !important;
}
.iti__country-list .iti__country-name {
margin-right: 4px !important;
}
/* Ensure input field matches other fields width */
.iti {
width: 100% !important;
display: flex;
}
.iti input[type="tel"] {
width: 100% !important;
}
/* Final fix: uniformize all dropdown text styles */
.iti__country-list .iti__country {
color: #000 !important;
font-weight: normal !important;
opacity: 1 !important;
display: flex;
align-items: center;
}
.iti__flag-box,
.iti__country-name,
.iti__dial-code {
display: inline-block !important;
vertical-align: middle !important;
}
.iti__country-list .iti__highlight {
background-color: #e6e6e6 !important;
color: #000 !important;
}
/* Adjust placeholder alignment globally */
input[type="tel"]::placeholder {
padding-left: 20px !important;
}
/* Preserve homepage styles against Bootstrap overrides */
.hero-section, .hero-section * {
color: white !important;
font-family: inherit !important;
}
.form-container, .form-container * {
color: white !important;
font-family: inherit !important;
}
/* Adjust services section to be more like Wix */
#services .container {
max-width: 80% !important;
}
#services h2 {
font-size: 2.2rem;
font-weight: bold;
}
#services p {
font-size: 1.1rem;
}
#services ul li {
margin-bottom: 10px;
font-size: 1rem;
}
/* Override Bootstrap to keep homepage original style */
body, .hero-section, .hero-section *,
.form-container, .form-container * {
color: white !important;
font-family: 'Arial', sans-serif !important;
}
/* Fix services section layout */
#services .container {
max-width: 70% !important;
margin: 0 auto;
}
#services h2 {
font-size: 2.5rem !important;
font-weight: bold !important;
}
#services p, #services ul li {
font-size: 1.1rem !important;
color: #ffffff !important;
}
#services ul {
padding-left: 0;
list-style: none;
}
/* Services section - uniform green background and better margins */
#services {
background-color: #3b3b2b !important; /* match Wix dark green */
padding-top: 50px !important;
padding-bottom: 50px !important;
}
#services .container {
background-color: transparent !important;
padding: 20px 40px !important;
border-radius: 0 !important;
max-width: 80% !important;
}
#services h2, #services p, #services ul li {
color: #ffffff !important;
}
/* Bold and bigger titles for TRANSPORT and CONVOYAGE */
#services h4 {
font-weight: bold !important;
font-size: 1.8rem !important;
text-transform: uppercase;
margin-bottom: 20px !important;
}
/* Adjust spacing between columns */
#services .row .col-md-6 {
padding-left: 30px !important;
padding-right: 30px !important;
}
/* Increase line spacing for better readability */
#services ul li {
margin-bottom: 15px !important;
}
/* Add vertical space between icons and titles */
#services
/* Services section: fix alignment and width */
#services .container {
max-width: 70% !important;
margin: 0 auto !important;
}
#services .row {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 40px;
}
#services .col-md-6 {
flex: 1;
text-align: center;
}
#services img.rounded-circle {
width: 120px;
height: 110px;
object-fit: cover;
margin-bottom: 20px;
}
/* Specific style for service icons */
.service-icon {
width: 120px;
height: 110px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 20px;
}
/* Fix services section professional layout */
#services .container {
max-width: 80% !important;
margin: 0 auto !important;
}
#services .row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 60px;
}
#services .col-md-6 {
flex: 1;
max-width: 48%;
text-align: center;
}
#services ul {
padding-left: 0;
list-style: none;
}
#services ul li {
margin-bottom: 12px;
}
.service-icon {
width: 120px;
height: 110px;
border-radius: 50%;
object-fit: cover;
}
.navbar-logo {
height: 110px;
width: auto;
}
.logo-formulaire {
height: 110px;
width: auto;
margin-right: 8px;
vertical-align: middle;
}
.service-icon {
width: 120px;
height: 110px;
border-radius: 50%;
border: none;
box-shadow: none;
object-fit: cover;
margin-bottom: 20px;
}
.navbar-logo {
height: 110px;
width: auto;
}
.logo-formulaire {
height: 110px;
width: auto;
margin-right: 8px;
vertical-align: middle;
}
.navbar-logo {
height: 110px;
width: auto;
}
.logo-formulaire {
height: 110px;
width: auto;
margin-right: 8px;
vertical-align: middle;
}
/* Adjust date field text color */
input[type="date"] {
color: #e0e0e0 !important; /* light grey */
}
/* Change date input text color for Flatpickr */
.flatpickr-input {
color: #ccc !important;
}
.flatpickr-input::placeholder {
color: #ccc !important;
}
input[type='date'], .flatpickr-input {
color: #d3d3d3 !important;
}
input[type='date']::placeholder, .flatpickr-input::placeholder {
color: #d3d3d3 !important;
}
/* Taille fixe pour le logo inline dans le titre */
.logo-inline {
height: 110px; /* taille fixe souhaitée */
width: auto; /* conserve le ratio */
vertical-align: middle;
display: inline-block;
}
/* ===== Hotfix: icône voiture dans l'entête du formulaire ===== */
.form-header {
display: flex;
align-items: center;
gap: 12px;
}
.form-header img.logo-formulaire {
width: 52px;
height: auto;
display: inline-block;
}
/* ===== Alignement propre des colonnes Services ===== */
#services .col-md-5 { text-align: left; }
#services .col-md-5 h4 {
text-align: center;
margin-top: 8px;
}
/* Correction centrage des paragraphes italique sous les icônes */
#services .col-md-5 p.fst-italic {
display: block;
max-width: 320px;
margin: 8px auto 20px;
text-align: center;
line-height: 1.5;
}
/* Responsive : 1 colonne sur mobiles/tablettes */
@media (max-width: 991px) {
#services .row {
grid-template-columns: 1fr;
gap: 32px;
}
}
/* === Hotfix: Centrage section Services === */
#services .container {
max-width: 1120px; /* largeur maximale */
margin: 0 auto; /* centre horizontalement */
padding: 0 24px; /* espace intérieur */
text-align: center; /* centre le texte global */
}
#services .row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 56px;
justify-items: center; /* centre les colonnes */
}
/* === Ajustements fins pour coller au rendu de référence (Wix-like) === */
#services { padding: 72px 0 80px; }
#services h2 {
font-size: 3rem; /* ~48px */
font-weight: 800;
letter-spacing: 0.5px;
margin: 0 0 10px;
text-align: center;
}
#services > .container > p {
max-width: 820px;
margin: 0 auto 36px;
text-align: center;
line-height: 1.6;
font-size: 1.06rem;
color: #e9e4cf;
}
#services .service-icon {
width: 150px;
height: 150px;
margin-bottom: 18px;
}
#services .col-md-5 h4 {
font-size: 1.75rem; /* un peu plus présent */
font-weight: 800;
letter-spacing: 0.3px;
margin: 6px 0 14px;
}
/* Correction centrage des paragraphes italique sous les icônes */
#services .col-md-5 p.fst-italic {
display: block;
max-width: 320px;
margin: 8px auto 20px;
text-align: center;
line-height: 1.5;
}
/* Listes : checks plus grands et mieux alignés */
#services ul { max-width: 420px; }
#services ul li {
padding-left: 40px; /* plus d'espace pour la coche agrandie */
margin: 12px 0;
font-size: 1.02rem;
}
#services ul li::before {
width: 26px; /* coche agrandie */
height: 26px;
top: 0px;
}
/* Centrage columns inchangé, mais on renforce la symétrie visuelle */
#services .row {
grid-template-columns: 1fr 1fr;
column-gap: 80px;
justify-items: center;
}
/* Correction centrage des paragraphes italique sous les icônes */
/* Correction centrage des paragraphes italique sous les icônes */
#services .col-md-5 p.fst-italic {
display: block;
max-width: 320px;
margin: 8px auto 20px;
text-align: center;
line-height: 1.5;
}
/* Réduction hauteur header et taille logo navbar */
header {
padding: 2px 16px;
}
header .navbar-logo {
max-height: 46px; /* réduit la hauteur max du logo */
height: auto;
width: auto;
}
/* HEADER PLUS HAUT + LOGO PLUS GRAND */
header {
height: 92px; /* Ajuste ici si tu veux encore plus grand */
display: flex;
align-items: center;
padding: 0 20px;
}
/* Agrandissement du logo */
header .logo img {
height: 64px; /* Tu peux monter à 68px max si tu veux vraiment proche de Wix */
max-height: none;
}
/* Centrage vertical du menu */
header nav ul {
display: flex;
align-items: center;
height: 100%;
margin: 0;
padding: 0;
}
/* Grossir le logo sans augmenter la hauteur de la navbar */
header .logo img {
height: 80px; /* Ajuster selon la taille souhaitée */
width: auto;
}
/* ===============================
Animations "Services" (pro propres)
- Hover image: zoom léger + ombre douce
- Hover "carte": légère élévation
- Apparition progressive (stagger) au chargement
=============================== */
/* Cartes Services = colonnes */
#services .col-md-5 { text-align: left; }
#services .row .col-md-5:nth-child(1) { animation-delay: 90ms; }
#services .row .col-md-5:nth-child(2) { animation-delay: 220ms; }
/* Hover carte : très subtil pour garder un rendu pro */
/* Images rondes : zoom + ombre au hover */
#services .service-icon {
transition: transform 0.4s ease, box-shadow 0.4s ease;
will-change: transform, box-shadow;
}
#services .service-icon:hover {
transform: scale(1.06);
box-shadow: 0 10px 26px rgba(0,0,0,0.25);
}
/* Keyframes d'apparition */
@keyframes riseFade {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
/* Accessibilité : réduire/retirer les animations si l'utilisateur a réduit les mouvements */
@media (prefers-reduced-motion: reduce) {
#services .col-md-5,
#services .service-icon {
transition: none !important;
animation: none !important;
transform: none !important;
}
}
/* ===== Services: animation UNIQUEMENT sur les images, pas sur les textes/cartes ===== */
#services .service-icon {
transition: transform 0.4s ease, box-shadow 0.4s ease !important;
will-change: transform, box-shadow;
}
#services .service-icon:hover {
transform: scale(1.06);
box-shadow: 0 10px 26px rgba(0,0,0,0.25);
}
/* Neutralisation explicite de toute ombre/animation sur les colonnes */
#services .col-md-5 {
box-shadow: none !important;
transform: none !important;
transition: none !important;
animation: none !important;
opacity: 1 !important;
}
/* ======== SERVICES – WIX PIXEL MATCH ======== */
/* Container centré et largeur contrôlée */
#services { padding: 68px 0 80px; background-color:#3b3b2b; }
#services .container { max-width: 1120px; margin: 0 auto; padding: 0 24px; text-align:center; }
/* Titre principal "Services" */
#services h2 {
font-size: 3rem; /* 48px */
font-weight: 800;
letter-spacing: .5px;
margin: 0 0 12px;
color: #ffffff; /* crème douce */
}
/* Paragraphe d'intro (les 2 lignes sous le titre) */
#services > .container > p {
max-width: 820px;
margin: 0 auto 34px;
line-height: 1.6;
font-size: 1.06rem;
color: #e9e4cf;
}
/* Grille 2 colonnes avec écart central marqué */
#services .row {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 80px;
justify-items: center;
align-items: start;
}
/* Images rondes – taille fixe et zéro déformation */
#services .service-icon,
#services img.rounded-circle {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
object-position: center;
display: block;
margin: 0 auto 18px;
image-rendering: auto;
box-shadow: none; /* pas d'ombre globale */
transition: transform .35s ease, box-shadow .35s ease;
}
/* Hover uniquement sur l'image */
#services .service-icon:hover,
#services img.rounded-circle:hover {
transform: scale(1.06);
box-shadow: 0 10px 26px rgba(0,0,0,.25);
}
/* Titres TRANSPORT / CONVOYAGE */
#services h4 {
font-size: 1.75rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .3px;
margin: 6px 0 14px;
color: #ffffff;
text-align: center;
}
/* Paragraphe italic sous le titre */
#services .col-md-5 p.fst-italic {
display:block;
max-width: 360px; /* largeur plus généreuse comme Wix */
margin: 6px auto 18px;
text-align: center;
font-size: 1.02rem;
line-height: 1.52;
color: #e9e4cf;
}
/* Listes + coches 3D */
#services ul {
list-style: none;
margin: 0;
padding: 0;
max-width: 430px; /* même largeur dans chaque colonne */
}
#services ul li {
position: relative;
padding-left: 40px;
margin: 12px 0;
line-height: 1.5;
font-size: 1.02rem;
color: #ffffff;
}
#services ul li::before {
content: "";
position: absolute;
left: 0;
top: 2px; /* aligne la coche avec la 1ère ligne */
width: 26px;
height: 26px;
background: url('assets/icons/check.png') no-repeat center / contain;
}
/* Neutraliser toute ombre/élévation sur les colonnes – texte immobile */
#services .col-md-5 {
text-align: left;
box-shadow: none !important;
transform: none !important;
transition: none !important;
animation: none !important;
opacity: 1 !important;
}
/* Responsive : 1 colonne */
@media (max-width: 991px) {
#services .row { grid-template-columns: 1fr; column-gap: 0; row-gap: 32px; }
#services .col-md-5 { text-align: left; }
}
/* ======== /SERVICES – WIX PIXEL MATCH ======== */
/* ======= SERVICES — Pixel match exact + lisibilité ======= */
/* Titre "Services" gras + léger relief (comme Wix) */
#services h2{
font-weight:800 !important;
letter-spacing:.5px;
text-shadow: 0 2px 0 rgba(0,0,0,.25), 0 10px 26px rgba(0,0,0,.30);
color:#ffffff;
margin-bottom:14px;
}
/* Intro plus lisible, largeur calée */
#services > .container > p{
max-width: 820px;
margin: 0 auto 32px;
line-height: 1.6;
color:#e9e4cf;
}
/* Grille: colonnes plus larges pour éviter les retours à la ligne trop tôt */
#services .row{
display:grid;
grid-template-columns: repeat(2, minmax(520px, 1fr)); /* largeur mini par colonne */
column-gap: 80px;
justify-items:center;
align-items:start;
}
/* Images rondes — taille et animation (image seule) */
#services .service-icon,
#services img.rounded-circle{
width:150px; height:150px; border-radius:50%;
object-fit:cover; object-position:center;
display:block; margin:0 auto 18px;
box-shadow:none;
transition: transform .35s ease, box-shadow .35s ease;
}
#services .service-icon:hover,
#services img.rounded-circle:hover{
transform: scale(1.06);
box-shadow:0 10px 26px rgba(0,0,0,.25);
}
/* Titres colonnes */
#services h4{
font-size:1.75rem;
font-weight:800;
text-transform:uppercase;
letter-spacing:.3px;
color:#ffffff;
margin:6px 0 14px;
text-align:center;
}
/* Paragraphe italic sous le titre */
#services .col-md-5 p.fst-italic{
max-width: 420px; /* un peu plus large que précédemment */
margin: 6px auto 18px;
text-align:center;
line-height:1.55;
color:#e9e4cf;
}
/* Listes — largeur, lisibilité et coche alignée */
#services ul{
list-style:none;
padding:0;
margin:0;
max-width: 520px; /* largeur confortable comme sur Wix */
}
#services ul li{
position:relative;
padding-left:40px;
margin: 12px 0;
font-size:1.02rem;
line-height:1.55;
color:#ffffff;
text-align:left;
word-break: normal;
overflow-wrap: normal; /* évite les césures bizarres */
}
#services ul li::before{
content:"";
position:absolute;
left:0; top:2px;
width:26px; height:26px;
background:url('assets/icons/check.png') no-repeat center / contain;
}
/* Neutralise toute ombre/animation sur les colonnes (texte) */
#services .col-md-5{
box-shadow:none !important;
transform:none !important;
transition:none !important;
animation:none !important;
opacity:1 !important;
}
/* Responsive: repasser en 1 colonne quand l'espace est trop petit */
@media (max-width: 1140px){
#services .row{ grid-template-columns: 1fr; column-gap:0; row-gap:32px; }
#services ul, #services .col-md-5 p.fst-italic{ max-width: 640px; }
}
/* ============================================================
SERVICES — OVERRIDE FINAL (Wix-like, au pixel près)
- Conteneur centré et largeur fixe
- Grille 2 colonnes larges (plus de texte "en colonne")
- Titres/italics/listes calés
- Animation uniquement sur les images
============================================================ */
/* Conteneur + fond */
#services {
background-color: #3b3b2b !important;
padding: 70px 0 80px !important;
}
#services .container {
max-width: 1120px !important; /* 520 + 80 + 520 */
margin: 0 auto !important;
padding: 0 24px !important;
text-align: center !important;
}
/* Titre principal */
#services h2 {
font-size: 3rem !important; /* ~48px */
font-weight: 800 !important;
letter-spacing: .5px !important;
margin: 0 0 12px !important;
color: #ffffff !important;
text-shadow: 0 2px 0 rgba(0,0,0,.25), 0 10px 26px rgba(0,0,0,.30) !important;
}
/* Paragraphe d'intro */
#services > .container > p {
max-width: 820px !important;
margin: 0 auto 34px !important;
line-height: 1.6 !important;
font-size: 1.06rem !important;
color: #e9e4cf !important;
}
/* Grille 2 colonnes — largeur réelle */
#services .row {
display: grid !important;
grid-template-columns: repeat(2, minmax(520px, 1fr)) !important;
column-gap: 80px !important;
justify-items: center !important;
align-items: start !important;
}
/* Colonnes (texte aligné gauche) */
#services .col-md-6, #services .col-md-5 {
width: 100% !important;
max-width: none !important;
text-align: left !important;
}
/* Images rondes (150px) + animation images seulement */
#services .service-icon,
#services img.rounded-circle {
width: 150px !important;
height: 150px !important;
border-radius: 50% !important;
object-fit: cover !important;
object-position: center !important;
display: block !important;
margin: 0 auto 18px !important;
box-shadow: none !important;
transition: transform .35s ease, box-shadow .35s ease !important;
}
#services .service-icon:hover,
#services img.rounded-circle:hover {
transform: scale(1.06) !important;
box-shadow: 0 10px 26px rgba(0,0,0,.25) !important;
}
/* Titres colonnes */
#services h4 {
font-size: 1.75rem !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: .3px !important;
margin: 6px 0 14px !important;
color: #ffffff !important;
text-align: center !important;
}
/* Italic sous le titre */
#services .col-md-5 p.fst-italic {
max-width: 420px !important;
margin: 6px auto 18px !important;
text-align: center !important;
line-height: 1.55 !important;
color: #e9e4cf !important;
font-size: 1.02rem !important;
}
/* Listes + coches */
#services ul {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
max-width: 520px !important; /* même largeur que la colonne */
}
#services ul li {
position: relative !important;
padding-left: 40px !important;
margin: 12px 0 !important;
font-size: 1.02rem !important;
line-height: 1.56 !important;
color: #ffffff !important;
text-align: left !important;
word-break: keep-all !important;
overflow-wrap: normal !important;
}
#services ul li::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
top: 2px !important;
width: 26px !important;
height: 26px !important;
background: url('assets/icons/check.png') no-repeat center / contain !important;
}
/* Neutraliser toute ombre/animation sur les colonnes (texte fixe) */
#services .col-md-5 {
box-shadow: none !important;
transform: none !important;
transition: none !important;
animation: none !important;
opacity: 1 !important;
}
/* Responsive */
@media (max-width: 1140px) {
#services .row { grid-template-columns: 1fr !important; column-gap: 0 !important; row-gap: 32px !important; }
#services ul, #services .col-md-5 p.fst-italic { max-width: 640px !important; }
}
/* Titres TRANSPORT et CONVOYAGE */
#services h4.fw-bold {
color: #fff; /* texte blanc */
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6); /* ombre légère */
}
/* Sous-titres en italique */
#services p.fst-italic {
color: #fff; /* texte blanc */
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* ombre légère */
}
/* Force white text for service section titles and descriptions */
.services-section h2,
.service h3,
.service p {
color: #ffffff !important;
}
/* === Smart Navbar (fade on scroll) === */
header { transition: opacity .4s ease; }
.navbar-visible { opacity: 1; pointer-events: auto; }
.navbar-hidden { opacity: 0; pointer-events: none; }
/* Slow anchor scroll is JS-driven; disable native behavior */
html { scroll-behavior: auto; }
/* ===== CTA WhatsApp ===== */
#cta-help {
background: #0f1511; /* noir/vert profond comme sur Wix */
padding: clamp(64px, 9vw, 120px) 0;
text-align: center;
color: #fff;
}
#cta-help .cta-wrap {
width: min(1100px, 92%);
margin: 0 auto;
}
#cta-help .cta-mark {
width: clamp(68px, 9vw, 110px);
height: auto;
display: block;
margin: 0 auto clamp(18px, 2.4vw, 28px);
filter: drop-shadow(0 6px 18px rgba(0, 255, 114, 0.25));
}
#cta-help .cta-title {
margin: 0 0 clamp(14px, 2.4vw, 24px);
font-weight: 800;
line-height: 1.15;
font-size: clamp(28px, 4.6vw, 56px); /* “Services” vibe */
letter-spacing: .3px;
background: linear-gradient(180deg, #33d266 0%, #19a94b 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 8px 26px rgba(0, 0, 0, .35);
}
#cta-help .cta-subtitle {
margin: 0 0 clamp(22px, 3.2vw, 36px);
font-size: clamp(18px, 2.2vw, 32px);
font-weight: 800;
line-height: 1.35;
color: #ffffff;
text-shadow: 0 2px 6px rgba(0,0,0,.35);
}
/* Bouton WhatsApp rond/blanc */
#cta-help .wa-btn {
--size: clamp(64px, 8.5vw, 88px);
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--size);
height: var(--size);
border-radius: 999px;
background: #ffffff;
box-shadow: 0 10px 28px rgba(0,0,0,.35), 0 0 0 0 rgba(51,210,102,.35);
transition: transform .18s ease, box-shadow .18s ease;
}
#cta-help .wa-btn:hover {
transform: translateY(-2px) scale(1.04);
box-shadow: 0 14px 36px rgba(0,0,0,.45), 0 0 0 10px rgba(51,210,102,.10);
}
#cta-help .wa-btn:active { transform: translateY(0) scale(0.98); }
#cta-help .wa-icon img {
width: calc(var(--size) * .45);
height: calc(var(--size) * .45);
display: block;
}
/* Responsive resserré */
@media (max-width: 520px) {
#cta-help .cta-title br { display: none; } /* une seule ligne si très étroit */
}
/* Fullscreen sections with header offset */
.hero,
#services,
#cta-help {
min-height: calc(100vh - var(--header-h));
}
html, body {
scroll-behavior: auto;
scroll-snap-type: y proximity;
}
.hero, #services, #cta-help {
scroll-snap-align: start;
scroll-snap-stop: always;
scroll-margin-top: var(--header-h);
}
/* === FINAL OVERRIDES: Fullscreen sections WITHOUT header offset + hero video cover === */
/* Reset any previous header height logic */
:root { --header-h: 0px !important; }
/* Force real viewport height, ignoring any calc(100vh - header) done above */
.hero,
#services,
#cta-help {
min-height: 100svh !important; /* mobile-friendly viewport */
min-height: 100dvh !important; /* modern viewport unit */
min-height: 100vh !important; /* fallback */
padding-top: 0 !important;
padding-bottom: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
scroll-margin-top: 0 !important;
scroll-snap-align: start;
scroll-snap-stop: always;
}
/* Avoid extra space caused by large margins on headings/paragraphs */
.hero h1, .hero h2, .hero p,
#services h2, #services p,
#cta-help h2, #cta-help p {
margin-top: clamp(6px, 1vh, 14px) !important;
margin-bottom: clamp(6px, 1.4vh, 18px) !important;
}
/* Limit container width and add internal breathing */
.hero > .container,
#services .services-wrap,
#cta-help .cta-wrap {
width: min(1120px, 92%) !important;
margin: 0 auto !important;
padding: clamp(24px, 4vh, 64px) 16px !important;
}
/* Ensure left and right hero columns stretch the full height */
.hero-left,
.hero-right { height: 100% !important; }
/* Background video/image must cover entirely */
.hero-left { position: relative !important; overflow: hidden !important; }
.hero-left video,
.hero-left .bg-video,
.hero-left img.bg-cover {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
z-index: -1 !important;
}
/* Slightly larger main title for balance on large screens */
.main-title {
font-size: clamp(2.6rem, 5vw, 4rem) !important;
line-height: 1.08;
}
/* Smooth scrolling and section snapping (optional but nice) */
html, body { scroll-behavior: auto; scroll-snap-type: y proximity; }
/* === Adjustments: smaller hero title + form bg fix === */
/* Reduce hero title size */
.main-title {
font-size: clamp(2.6rem, 5vw, 4rem) !important;
line-height: 1.08;
}
/* Ensure subtitle adjusts proportionally */
.subtitle {
font-size: clamp(1rem, 1.4vw, 1.2rem) !important;
}
/* Change background color behind the form to match the form's dark background */
.hero-right {
background-color: #111 !important; /* same as form's background */
}
/* Ensure form card/inputs sit on the same dark background */
.form-card, .form-wrapper { background: transparent !important; }
/* ===== FINAL HERO POLISH ===== */
/* 1) Titre moins grand et plus compact */
.main-title{
font-size: clamp(2.2rem, 4.6vw, 3.6rem) !important;
line-height: 1.06 !important;
letter-spacing: -0.015em !important;
margin-bottom: clamp(8px, 1.4vh, 14px) !important;
}
/* 2) Colonne droite sur fond sombre uniforme (pas de marron) */
.hero-right{
background-color: #0f0f10 !important;
position: relative !important;
}
/* Supprime tout overlay/pseudo-élément hérité qui colorerait en marron */
.hero-right::before,
.hero-right::after{
content: none !important;
}
/* 3) Le wrapper du formulaire ne doit pas réintroduire de fond */
.form-card,
.form-wrapper,
.form-panel{
background: transparent !important;
box-shadow: none !important;
border: none !important;
}
/* 4) Paddings raisonnables pour éviter que le bloc dépasse en hauteur */
.hero-right{
padding: clamp(20px, 3.5vh, 40px) clamp(16px, 2.5vw, 32px) !important;
}
/* 5) Vidéo de fond vraiment en cover sur toute la colonne gauche */
.hero-left{ position: relative !important; overflow: hidden !important; }
.hero-left video,
.hero-left .bg-video,
.hero-left img.bg-cover{
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
z-index: -1 !important;
}
/* 6) Sécurité: neutraliser un éventuel fond marron posé sur la section .hero */
.hero{
background: transparent !important;
}
/* ===== HARD OVERRIDE: hero full dark bg + smaller H1 ===== */
.hero{
background-color: #0f0f10 !important; /* même teinte que le panneau formulaire */
overflow: hidden !important;
position: relative !important;
min-height: 100svh !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.hero::before,
.hero::after{ content: none !important; background: none !important; }
/* colonne droite : laisser transparaître le fond de .hero (pas de marron) */
.hero-right{
background: transparent !important;
}
/* La vidéo recouvre totalement la colonne gauche */
.hero-left{ position: relative !important; overflow: hidden !important; }
.hero-left video,
.hero-left .bg-video,
.hero-left img.bg-cover{
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
z-index: -1 !important;
}
/* Titre un cran plus petit */
.main-title{
font-size: clamp(2rem, 4.2vw, 3.2rem) !important;
line-height: 1.06 !important;
}
/* ===== HERO RESTORE (split video left / dark panel right, pixel-like) ===== */
/* Section hero sur toute la hauteur visible, sans fond marron global */
.hero{
min-height: 100vh !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
align-items: stretch !important; /* étire les colonnes */
background: transparent !important; /* pas de fond marron/noir global */
}
/* Colonnes pleine hauteur */
.hero-left,
.hero-right{ height: 100% !important; }
/* Vidéo couvrante sur toute la colonne gauche */
.hero-left{ position: relative !important; background: transparent !important; overflow: hidden !important; }
.hero-left video,
.hero-left .bg-video,
.hero-left img.bg-cover{
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
z-index: -1 !important;
}
/* Légère couche pour lisibilité du texte (comme avant) */
.hero-left::after{
content: "" !important;
position: absolute !important;
inset: 0 !important;
background: rgba(0,0,0,.28) !important;
pointer-events: none !important;
}
/* Panneau formulaire sur fond sombre uniforme uniquement à droite */
.hero-right{
background: #0f0f10 !important;
position: relative !important;
padding: clamp(20px,3.5vh,40px) clamp(16px,2.5vw,32px) !important;
}
.hero-right::before,
.hero-right::after{ content: none !important; background: none !important; }
/* Les wrappers du formulaire ne remettent pas de fond */
.form-card, .form-wrapper, .form-panel{
background: transparent !important;
box-shadow: none !important;
border: none !important;
}
/* Titre de la hero: un cran plus petit et compact */
.main-title{
font-size: clamp(2.3rem, 4.4vw, 3.4rem) !important;
line-height: 1.08 !important;
letter-spacing: -0.01em !important;
margin-bottom: clamp(8px, 1.4vh, 14px) !important;
}
/* Evite que des containers internes réintroduisent un fond */
.hero > .container{ background: transparent !important; }
/* === HERO FINAL ALIGNMENT === */
/* 1) Hauteurs identiques gauche/droite, pas de bande marron */
.hero {
min-height: 100vh !important;
padding: 0 !important;
align-items: stretch !important;
background: transparent !important;
}
.hero-left,
.hero-right { height: 100% !important; }
/* 2) Vidéo FULL cover sur toute la colonne gauche */
.hero-left { position: relative !important; overflow: hidden !important; }
.hero-left video,
.hero-left .bg-video,
.hero-left img.bg-cover {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
z-index: -1 !important;
}
/* 3) Contenu texte à gauche CENTRÉ verticalement */
.hero-left > .container,
.hero-left .content,
.hero-left .copy,
.hero-left .inner {
min-height: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
padding: clamp(24px, 5vh, 56px) clamp(16px, 3vw, 40px) !important;
}
/* 4) Texte bien BLANC (pas gris) sur la vidéo */
.hero-left :where(h1,h2,h3,p,li,small,span,strong,em) {
color: #ffffff !important;
text-shadow: 0 2px 8px rgba(0,0,0,.35);
}
/* 5) Taille et position du H1 équilibrées */
.main-title {
font-size: clamp(2.4rem, 4.8vw, 3.8rem) !important;
line-height: 1.08 !important;
margin: 0 0 clamp(12px, 2vh, 18px) !important;
}
/* 6) Panneau formulaire : fond sombre à droite uniquement */
.hero-right {
background: #0f0f10 !important;
padding: clamp(20px, 3.5vh, 40px) clamp(16px, 2.5vw, 32px) !important;
}
.hero-right::before,
.hero-right::after { content: none !important; background: none !important; }
/* 7) Aucun wrapper du formulaire ne remet un fond marron */
.form-card, .form-wrapper, .form-panel, .quote-form, .form-container {
background: transparent !important;
box-shadow: none !important;
border: none !important;
}
/* === PATCH HERO (gauche = vidéo plein, droite = panneau noir) === */
/* 1) La section hero occupe tout l'écran et étire ses deux colonnes */
.hero{
display: flex !important;
align-items: stretch !important;
min-height: 100vh !important;
padding: 0 !important;
background: transparent !important; /* pas de fond global */
}
/* 2) Colonnes gauche/droite de même hauteur, 50/50 */
.hero-left, .hero-right{
flex: 1 0 50% !important;
position: relative !important;
height: auto !important;
min-height: 100vh !important;
}
/* 3) AUCUN padding sur le conteneur vidéo,
on met le padding uniquement sur le contenu texte interne */
.hero-left{ padding: 0 !important; overflow: hidden !important; }
.hero-left > .container{
min-height: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
padding: clamp(24px, 5vh, 56px) clamp(16px, 3vw, 40px) !important;
background: transparent !important;
}
/* 4) Vidéo/fond couvrant 100% de la colonne gauche (peu importe la balise) */
.hero-left video,
.hero-left .bg-video,
.hero-left picture img,
.hero-left img.bg-cover{
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
z-index: -1 !important;
}
/* 5) Liseré de lisibilité léger sur la vidéo (comme avant) */
.hero-left::after{
content: "" !important;
position: absolute !important;
inset: 0 !important;
background: rgba(0,0,0,.28) !important;
pointer-events: none !important;
}
/* 6) Panneau formulaire noir uniquement à droite */
.hero-right{
background: #0f0f10 !important;
padding: clamp(20px, 3.5vh, 40px) clamp(16px, 2.5vw, 32px) !important;
}
.hero-right::before,
.hero-right::after{ content: none !important; }
/* 7) Aucun wrapper du formulaire ne remet un fond brun */
.form-card, .form-wrapper, .form-panel, .quote-form, .form-container{
background: transparent !important;
box-shadow: none !important;
border: none !important;
}
/* 8) Texte bien BLANC à gauche + recentrage vertical du H1 */
.hero-left :where(h1,h2,h3,p,li,small,span,strong,em){
color: #fff !important;
opacity: 1 !important;
text-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.main-title{
font-size: clamp(2.4rem, 4.8vw, 3.8rem) !important;
line-height: 1.08 !important;
margin: 0 0 clamp(12px, 2vh, 18px) !important;
}
/* === Forcer le titre principal en blanc pur sans filtre === */
.hero-left h1,
.hero-left .main-title {
color: #ffffff !important; /* blanc pur */
opacity: 1 !important; /* aucune transparence */
filter: none !important; /* retire tout filtre gris */
text-shadow: 0 2px 8px rgba(0,0,0,0.35); /* lisibilité */
}
/* === HERO Z-INDEX FIX: texte au-dessus du filtre, vidéo en dessous === */
.hero-left { position: relative !important; }
/* Vidéo / image de fond : toujours en dessous */
.hero-left video,
.hero-left .bg-video,
.hero-left picture img,
.hero-left img.bg-cover {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
z-index: -1 !important; /* sous tout */
}
/* Overlay (filtre gris) : AU-DESSUS de la vidéo mais SOUS le texte */
.hero-left::before,
.hero-left::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
background: rgba(0,0,0,.28) !important; /* lisibilité */
z-index: 1 !important; /* sous le texte */
pointer-events: none !important;
}
/* Texte et CTA : tout au-dessus du filtre */
.hero-text-wrapper,
.hero-left h1,
.hero-left .main-title,
.hero-left .subtitle,
.hero-left .btn,
.hero-left p {
position: relative !important;
z-index: 2 !important; /* au-dessus du filtre */
color: #ffffff !important; /* blanc pur */
opacity: 1 !important;
filter: none !important;
text-shadow: 0 2px 8px rgba(0,0,0,.35);
}
/* ===== WhatsApp CTA: assets + spacing like Wix ===== */
#cta-help .cta-wrap{
display:flex;
flex-direction:column;
align-items:center;
gap: clamp(14px, 2.8vh, 26px);
}
/* Question mark w/ glow */
#cta-help .cta-mark{
width: clamp(90px, 11vw, 140px);
height:auto;
filter: drop-shadow(0 0 20px rgba(34,197,94,.35))
drop-shadow(0 10px 28px rgba(0,0,0,.35));
margin-bottom: clamp(6px, 1.4vh, 12px);
}
/* More breathing between title and subtitle */
#cta-help .cta-title{
margin-top: clamp(4px, 1vh, 8px);
margin-bottom: clamp(10px, 2vh, 16px);
}
#cta-help .cta-subtitle{
margin-top: clamp(2px, .6vh, 6px);
margin-bottom: clamp(16px, 2.6vh, 22px);
}
/* Pill button (white) with centered WhatsApp icon */
#cta-help .wa-btn{
--w: clamp(120px, 18vw, 190px);
--h: clamp(48px, 6.4vw, 58px);
width: var(--w);
height: var(--h);
border-radius: 999px;
background:#fff;
display:inline-flex;
align-items:center;
justify-content:center;
box-shadow: 0 12px 34px rgba(0,0,0,.35), inset 0 -2px 0 rgba(0,0,0,.06);
transition: transform .2s ease, box-shadow .2s ease;
padding: 0; /* only icon */
}
#cta-help .wa-btn:hover{
transform: translateY(-2px);
box-shadow: 0 18px 44px rgba(0,0,0,.45), inset 0 -2px 0 rgba(0,0,0,.06);
}
#cta-help .wa-icon img{
width: clamp(22px, 3vw, 28px);
height: auto;
display:block;
}
/* Descendre un peu le bouton */
.whatsapp-section .whatsapp-btn {
margin-top: 30px; /* augmente la valeur si tu veux encore plus bas */
}
/* Agrandir juste le logo WhatsApp dans le bouton */
.whatsapp-section .whatsapp-btn img {
width: 28px; /* Taille de l'icône, augmente si besoin (ex: 30px ou 32px) */
height: 28px;
}
.whatsapp-btn img {
width: 35px !important; /* Ajuste ici la taille du logo */
height: 35px !important;
}
.whatsapp-btn {
margin-top: 40px !important; /* Augmente la valeur si besoin */
}
/* === CTA WhatsApp — overrides finaux === */
/* Descendre un peu le bouton (espace sous le sous-titre) */
#cta-help .wa-btn{
margin-top: 42px !important; /* ajuste: 32–56px selon ton goût */
width: var(--w) !important; /* force la version "pilule" */
height: var(--h) !important;
border-radius: 999px !important;
padding: 0 !important;
}
/* Agrandir uniquement le logo vert dans la pilule */
#cta-help .wa-icon img{
width: clamp(30px, 4vw, 50px) !important; /* augmente si tu veux encore plus gros */
height: auto !important;
display: block !important;
}
/* === CTA Help – Animations & Glow === */
/* 1) ? qui flotte en continu (léger, fluide) */
@keyframes floatY {
0% { transform: translateY(0); }
50% { transform: translateY(-18px); }
100% { transform: translateY(0); }
}
#cta-help .cta-mark{
animation: floatY 2s ease-in-out infinite;
will-change: transform;
}
/* 2) Glow pro sur la pilule + icône WhatsApp */
#cta-help .wa-btn{
/* halo blanc doux autour de la pilule */
box-shadow:
0 12px 34px rgba(0,0,0,.35),
0 0 18px rgba(255,255,255,.16);
}
/* halo vert pulsé sur l’icône */
@keyframes waPulse {
0% { filter: drop-shadow(0 0 4px rgba(34,197,94,.35)); }
50% { filter: drop-shadow(0 0 12px rgba(34,197,94,.85)); }
100% { filter: drop-shadow(0 0 4px rgba(34,197,94,.35)); }
}
#cta-help .wa-icon img{
animation: waPulse 2.8s ease-in-out infinite;
will-change: filter;
}
/* Respecte l’accessibilité : on coupe les anims si l’utilisateur préfère réduire */
@media (prefers-reduced-motion: reduce) {
#cta-help .cta-mark,
#cta-help .wa-icon img { animation: none; }
}
/* === FINAL OVERRIDE: taille du logo "?" (glow) === */
#cta-help .cta-mark{
width: clamp(120px, 12vw, 190px) !important; /* agrandit nettement le logo */
height: auto !important;
}
/* === GALLERY SECTION === */
#gallery.gallery-section{
background-color:#0f1a13;
color:#fff;
padding: 80px 0;
min-height: 100vh;
}
#gallery .gallery-title{
font-weight:800;
font-size:clamp(2.2rem, 4vw, 3rem);
letter-spacing:1px;
margin: 0 0 10px;
text-transform: uppercase;
}
#gallery .gallery-desc{
font-weight:700;
font-size:1.05rem;
max-width: 900px;
margin: 0 auto 40px;
line-height:1.6;
color:#f1eedc;
}
#gallery .gallery-grid{
display:grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
width: min(1200px, 94%);
margin: 0 auto;
}
#gallery .gallery-item{
position: relative;
display: block;
overflow: hidden;
border-radius: 8px;
background:#1c1c1c;
box-shadow:0 8px 20px rgba(0,0,0,.35);
}
#gallery .gallery-item img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition: transform .35s ease, filter .35s ease;
aspect-ratio: 4/3;
filter: contrast(1.06) saturate(1.02);
}
#gallery .gallery-item:hover img{
transform: scale(1.03);
filter:brightness(1.05);
}
/* Responsive */
@media (max-width: 1024px){
#gallery .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
#gallery .gallery-grid{ grid-template-columns: 1fr; }
}
/* === Lightbox minimal === */
.lightbox-backdrop[hidden]{ display:none; }
.lightbox-backdrop{
position:fixed;
inset:0;
display:flex;
align-items:center;
justify-content:center;
background: rgba(0,0,0,.82);
z-index: 9999;
padding: 30px;
}
.lightbox-backdrop .lightbox-image{
max-width: 92vw;
max-height: 86vh;
border-radius:10px;
box-shadow:0 12px 40px rgba(0,0,0,.6);
}
.lightbox-backdrop .lightbox-close{
position: absolute;
top: 20px;
right: 24px;
background: rgba(255,255,255,.12);
color: #fff;
border: none;
font-size: 32px;
line-height: 1;
padding: 6px 12px;
border-radius: 8px;
cursor: pointer;
}
.lightbox-backdrop .lightbox-close:hover{ background: rgba(255,255,255,.2); }
/* === OVERRIDES: Section ex-galerie renommée === */
#gallery.gallery-section{
background-color:#0f1d14 !important;
color:#ffffff !important;
}
#gallery .gallery-title{
color:#ffffff !important;
font-weight:800 !important;
font-size:clamp(2.8rem, 5.2vw, 4rem) !important;
text-transform:uppercase !important;
margin-bottom:18px !important;
}
#gallery .gallery-desc{
color:#ffffff !important;
font-weight:800 !important;
}
/* === GALLERY fixes v2 === */
#gallery.gallery-section{
background-color:#0f1d14 !important;
color:#ffffff !important;
padding: 110px 0 90px !important;
}
#gallery .gallery-title{
color:#ffffff !important;
font-weight:800 !important;
font-size:clamp(2.6rem, 5vw, 3.4rem) !important;
margin: 0 0 14px !important;
text-transform: uppercase;
text-align:center;
}
#gallery .gallery-desc{
color:#ffffff !important;
font-weight:800 !important;
font-size:1.05rem !important;
text-align:center;
max-width: 980px;
margin: 0 auto 26px !important;
line-height:1.5;
}
/* The black panel wraps ONLY the photos */
#gallery .gallery-panel{
background:#0b0b0b;
border-radius:12px;
width: min(1280px, 94%);
padding: 18px;
margin: 26px auto 0;
}
/* Grid inside the panel */
#gallery .gallery-grid{
display:grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
width: 100%;
margin: 0 auto;
}
#gallery .gallery-item{
border-radius:8px;
overflow:hidden;
background:#0d0d0d;
}
#gallery .gallery-item img{
width:100%; height:100%;
object-fit:cover;
display:block;
transition: transform .25s ease, filter .25s ease;
aspect-ratio: 4/3;
}
#gallery .gallery-item:hover img{ transform: scale(1.01); filter:brightness(1.03); }
@media (max-width: 1024px){
#gallery .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
#gallery .gallery-grid{ grid-template-columns: 1fr; }
}
/* === Galerie: vignettes carrées & légende === */
#gallery .gallery-item img{
aspect-ratio: 1 / 1;
object-fit: cover;
}
.lightbox-backdrop .lightbox-caption{
margin-top: 12px;
color: #fff;
font-weight: 700;
font-size: 0.95rem;
text-align: center;
max-width: 92vw;
}
/* Retirer le grand fond sombre sur le container de la galerie */
#gallery.gallery-section > .container{
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
max-width: 1280px !important;
}
/* === Galerie: slider en pages 3x2 (sans fetch) === */
#gallery .gallery-panel{ position:relative; }
#gallery .gallery-viewport{
position: relative;
overflow: hidden;
border-radius: 12px;
background: #0b0b0b;
padding: 18px;
}
#gallery .gallery-track{
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
#gallery .gallery-track::-webkit-scrollbar{ display:none; }
#gallery .gallery-page{
flex: 0 0 100%;
scroll-snap-align: start;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1fr;
gap: 20px;
padding: 4px;
}
#gallery .gallery-item{ background:#0d0d0d; border-radius:10px; overflow:hidden; }
#gallery .gallery-item img{
display:block;
width:100%; height:100%;
aspect-ratio: 1 / 1;
object-fit: cover;
background:#0d0d0d;
}
/* Flèches */
#gallery .gallery-nav{
position: absolute;
top: 50%;
transform: translateY(-50%);
border: 0;
background: rgba(255,255,255,.12);
color:#fff;
width: 44px; height: 44px;
border-radius: 999px;
cursor: pointer;
display:flex; align-items:center; justify-content:center;
font-size: 26px; line-height: 1;
z-index: 5;
}
#gallery .gallery-nav:hover{ background: rgba(255,255,255,.2); }
#gallery .gallery-nav.prev{ left: 10px; }
#gallery .gallery-nav.next{ right: 10px; }
/* Responsive: 2 colonnes tablette, 1 colonne mobile */
@media (max-width: 1024px){
#gallery .gallery-page{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
#gallery .gallery-page{ grid-template-columns: 1fr; }
}
#gallery .gallery-item.placeholder{visibility:hidden;pointer-events:none;}
/* === Correctif visibilité galerie (images carrées) === */
#gallery .gallery-page{ grid-auto-rows: auto !important; }
#gallery .gallery-item img{
height: auto !important;
width: 100% !important;
aspect-ratio: 1 / 1 !important;
object-fit: cover !important;
display: block;
}
/* ensure rule */
#gallery .gallery-item.placeholder{visibility:hidden;pointer-events:none;}
/* === Légende "carte" élégante dans la lightbox === */
.lightbox-caption{
position: absolute;
left: 20px; bottom: 20px;
z-index: 10;
max-width: min(520px, 90vw);
pointer-events: none;
}
.cap-card{
pointer-events: auto;
padding: 14px 16px;
border-radius: 14px;
background: rgba(10,10,10,.72);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
box-shadow: 0 8px 24px rgba(0,0,0,.35);
color: #fff;
animation: capfade .28s ease-out both;
}
.cap-badge{
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 700;
letter-spacing: .3px;
padding: 6px 10px;
border-radius: 999px;
background: rgba(255,255,255,.10);
margin-bottom: 8px;
font-size: 13px;
}
.cap-badge .icon{ font-size: 16px; }
.cap-sub{ font-size: 13px; opacity: .9; margin-bottom: 10px; }
.cap-rows{ display: grid; gap: 6px; font-size: 14px; }
.cap-row{
display: grid;
grid-template-columns: 20px 1fr;
align-items: start;
gap: 8px;
}
.cap-row .dot{
margin: 7px 0 0 0; width: 8px; height: 8px; border-radius: 50%;
background:#8bc34a;
}
.cap-row .dot.arr{ background:#ffca28; }
.cap-row strong{ font-weight: 700; }
.cap-row .city{ opacity: .95; }
@keyframes capfade{ from{ transform: translateY(6px); opacity: 0; } to{ transform: translateY(0); opacity: 1; } }
/* === Légende : position bas-centre + taille augmentée === */
.lightbox-caption{
left: 50% !important;
bottom: 32px !important;
transform: translateX(-50%);
max-width: min(860px, 95vw);
}
.cap-card{
padding: 20px 26px;
border-radius: 16px;
text-align: left;
}
.cap-badge{
font-size: 18px;
padding: 8px 14px;
gap: 10px;
}
.cap-badge .icon{ font-size: 20px; }
.cap-sub{ font-size: 16px; margin-bottom: 12px; }
.cap-rows{ font-size: 18px; gap: 8px; }
.cap-row .dot{ width: 10px; height: 10px; margin-top: 8px; }
@media (max-width: 640px){
.lightbox-caption{ max-width: 92vw; bottom: 20px; }
.cap-badge{ font-size: 16px; }
.cap-sub{ font-size: 14px; }
.cap-rows{ font-size: 16px; }
}
/* === Lightbox: flèches de navigation visibles === */
.lightbox-backdrop .lb-nav{ transition: background var(--t-fast) var(--ease-app), transform var(--t-fast) var(--ease-app);
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 56px;
height: 56px;
border-radius: 999px;
background: rgba(0,0,0,0.55);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
cursor: pointer;
z-index: 30;
border: 1px solid rgba(255,255,255,.2);
transition: background .15s ease, transform .15s ease;
user-select: none;
}
.lightbox-backdrop .lb-nav:hover{ background: rgba(0,0,0,0.7); transform: translateY(-50%) scale(1.05); }
.lightbox-backdrop .lb-nav.prev{ left: 24px; }
.lightbox-backdrop .lb-nav.next{ right: 24px; }
@media (max-width: 640px){
.lightbox-backdrop .lb-nav{ transition: background var(--t-fast) var(--ease-app), transform var(--t-fast) var(--ease-app); width: 46px; height: 46px; font-size: 22px; }
.lightbox-backdrop .lb-nav.prev{ left: 12px; }
.lightbox-backdrop .lb-nav.next{ right: 12px; }
}
/* === Motion system tokens === */
:root{
--ease-app: cubic-bezier(.2,.8,.2,1);
--t-fast: 160ms;
--t-med: 220ms;
--t-slow: 280ms;
}
*{ transition-timing-function: var(--ease-app); }
@media (prefers-reduced-motion: reduce){
*{ transition-duration: 0ms !important; animation: none !important; }
}
/* === Lightbox UI auto-hide === */
html:not(.lb-ui) .lightbox-caption,
html:not(.lb-ui) .lb-nav{
opacity: 0;
pointer-events: none;
transition: opacity var(--t-med) var(--ease-app);
}
html.lb-ui .lightbox-caption,
html.lb-ui .lb-nav{
opacity: 1;
transition: opacity var(--t-med) var(--ease-app);
}
/* === Badge color schemes === */
.cap-badge.convoyage{ background: rgba(33,150,243,.16); } /* blue tint */
.cap-badge.transport{ background: rgba(255,193,7,.18); } /* amber tint */
/* === Gallery hover polish === */
#gallery .gallery-item{
transition: transform var(--t-fast) var(--ease-app), box-shadow var(--t-fast) var(--ease-app);
box-shadow: 0 0 0 rgba(0,0,0,0);
}
#gallery .gallery-item:hover{
transform: translateY(-2px) scale(1.01);
box-shadow: 0 10px 24px rgba(0,0,0,.28);
}
/* === PRO PACK: motion tokens & reduced motion === */
:root{
--ease-app: cubic-bezier(.2,.8,.2,1);
--t-fast: 160ms;
--t-med: 220ms;
--t-slow: 280ms;
}
*{ transition-timing-function: var(--ease-app); }
@media (prefers-reduced-motion: reduce){
*{ transition-duration: 0ms !important; animation: none !important; }
}
/* === PRO PACK: focus visible (accessibilité) === */
:where(a,button,[role="button"],input,select,textarea):focus-visible{
outline: 2px solid #8bc34a;
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(139,195,74,.25);
}
/* === PRO PACK: smooth scroll === */
html{ scroll-behavior: auto; }
/* === PRO PACK: reveal-on-scroll === */
[data-animate]{ opacity: 0; transform: translateY(12px); }
[data-animate].in{ opacity: 1; transform: none; transition: opacity var(--t-med), transform var(--t-med); }
/* === PRO PACK: gallery hover polish === */
#gallery .gallery-item{
transition: transform var(--t-fast) var(--ease-app), box-shadow var(--t-fast) var(--ease-app);
box-shadow: 0 0 0 rgba(0,0,0,0);
}
#gallery .gallery-item:hover{
transform: translateY(-2px) scale(1.01);
box-shadow: 0 10px 24px rgba(0,0,0,.28);
}
/* === PRO PACK: lightbox UI + dots + close === */
html:not(.lb-ui) .lightbox-caption,
html:not(.lb-ui) .lb-nav,
html:not(.lb-ui) .lb-close,
html:not(.lb-ui) .lb-dots{ opacity: 0; pointer-events: none; transition: opacity var(--t-med) var(--ease-app); }
html.lb-ui .lightbox-caption,
html.lb-ui .lb-nav,
html.lb-ui .lb-close,
html.lb-ui .lb-dots{ opacity: 1; }
.lb-close{
position:absolute; top:18px; right:18px;
width:40px; height:40px; border-radius:999px;
background: rgba(0,0,0,.55); color:#fff; border:1px solid rgba(255,255,255,.22);
display:flex; align-items:center; justify-content:center;
font-size:20px; cursor:pointer; z-index:35;
transition: background var(--t-fast) var(--ease-app), transform var(--t-fast) var(--ease-app);
}
.lb-close:hover{ background: rgba(0,0,0,.72); transform: scale(1.05); }
.lb-dots{
position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
display:flex; gap:8px; z-index:28; pointer-events:none;
}
.lb-dots .dot{
width:8px; height:8px; border-radius:999px; background: rgba(255,255,255,.35);
box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.lb-dots .dot.active{ background:#fff; }
/* === PRO PACK: magnetic buttons (light) === */
.btn, .button, .cta{
position: relative;
transition: transform var(--t-fast) var(--ease-app), box-shadow var(--t-fast) var(--ease-app);
will-change: transform;
}
.btn:hover, .button:hover, .cta:hover{ transform: translateY(-1px); }
/* Responsive grid */
@media (max-width: 1024px){ #contact .contact-cards{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ #contact .contact-cards{ grid-template-columns: 1fr; } }
/* Outer panel that wraps banner + cards */
#contact .contact-panel{
background: rgba(0,0,0,.35);
border:1px solid rgba(255,255,255,.10);
border-radius: 18px;
padding: 16px;
box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
/* Green banner */
#contact .contact-banner{
display:flex; align-items:center; justify-content:space-between; gap:16px;
background: linear-gradient(180deg, #2F8E41 0%, #2A7C3A 100%);
color:#fff;
border-radius: 12px;
padding: 12px 16px;
border-top:1px solid rgba(0,0,0,.5);
box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 24px rgba(0,0,0,.28);
margin-bottom: 16px;
}
#contact .contact-banner h2{ margin:0; font-size: clamp(24px,3.2vw,34px); letter-spacing:.4px; }
#contact .contact-banner .contact-sub{ margin:0; opacity:.95; font-size: 14px; }
/* Cards grid */
#contact .contact-grid{ display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 18px; align-items:stretch; }
#contact .card{
background: rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.12);
border-radius:16px;
padding:16px 18px;
box-shadow: 0 12px 28px rgba(0,0,0,.25);
transition: transform 160ms cubic-bezier(.2,.8,.2,1), box-shadow 160ms cubic-bezier(.2,.8,.2,1);
}
#contact .card:hover{ transform: translateY(-2px); box-shadow: 0 16px 34px rgba(0,0,0,.32); }
/* Titles now full white for contrast */
#contact .card-title,
#contact .card-label{ color:#fff; }
#contact .card-title{ margin:2px 0 10px; font-size:18px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; }
#contact .card-label{ margin:2px 0 10px; font-size:15px; text-transform:uppercase; letter-spacing:.5px; opacity:.9; }
#contact .list{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
#contact .phone{ margin:0; font-size:16px; }
#contact a{ color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.24); padding-bottom:1px; }
#contact a:hover{ border-bottom-color:#fff; }
/* Responsive */
@media (max-width:1024px){
#contact .contact-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width:640px){
#contact .contact-grid{ grid-template-columns: 1fr; }
#contact .contact-banner{ flex-direction:column; align-items:flex-start; gap:8px; }
}
/* === CONTACT enhanced (scoped) === */
#contact.contact-section{ padding: 100px 0; background:#0E1A16; color:#fff; }
#contact .container{ max-width: 1180px; margin:0 auto; padding:0 20px; }
#contact .contact-panel{
background: rgba(0,0,0,.35);
border:1px solid rgba(255,255,255,.10);
border-radius: 18px;
padding: 16px;
box-shadow: 0 18px 40px rgba(0,0,0,.35);
position: relative;
overflow: hidden;
}
/* Banner + tiny parallax feel via transform, driven in JS */
#contact .contact-banner{
display:flex; align-items:center; justify-content:space-between; gap:16px;
background: linear-gradient(180deg, #2F8E41 0%, #2A7C3A 100%);
color:#fff; border-radius: 12px; padding: 12px 16px;
border-top:1px solid rgba(0,0,0,.5);
box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 24px rgba(0,0,0,.28);
margin-bottom: 16px;
will-change: transform;
}
#contact .contact-banner h2{ margin:0; font-size: clamp(24px,3.2vw,34px); letter-spacing:.4px; }
#contact .contact-banner .contact-sub{ margin:0; opacity:.95; font-size: 14px; }
/* Grid */
#contact .contact-grid{ display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 18px; align-items:stretch; }
#contact .card{
position:relative;
background: rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.12);
border-radius:16px;
padding:16px 18px;
box-shadow: 0 12px 28px rgba(0,0,0,.25);
transition: transform 160ms cubic-bezier(.2,.8,.2,1), box-shadow 160ms cubic-bezier(.2,.8,.2,1);
overflow:hidden;
}
#contact .card:hover{ transform: translateY(-2px); box-shadow: 0 16px 34px rgba(0,0,0,.32); }
/* Gloss on hover */
#contact .card::after{
content:""; position:absolute; inset:0; pointer-events:none;
background: linear-gradient(60deg, transparent 30%, rgba(255,255,255,.10) 45%, transparent 60%);
transform: translateX(-120%);
}
#contact .card:hover::after{ animation: contact-gloss 600ms ease-out forwards; }
@keyframes contact-gloss{ to{ transform: translateX(120%); } }
#contact .card-title,
#contact .card-label{ color:#fff; }
#contact .card-title{ margin:2px 0 10px; font-size:18px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; }
#contact .card-label{ margin:2px 0 10px; font-size:15px; text-transform:uppercase; letter-spacing:.5px; opacity:.95; }
#contact .list{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
#contact .phone{ margin:0; font-size:16px; }
#contact a{ color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.24); padding-bottom:1px; }
#contact a:hover{ border-bottom-color:#fff; }
/* Reveal (scoped) */
@media (prefers-reduced-motion:no-preference){
#contact [data-animate] .card, #contact .contact-grid .card{ opacity:0; transform: translateY(12px); }
#contact .card.is-inview{ opacity:1; transform:none; transition: transform 220ms cubic-bezier(.2,.8,.2,1), opacity 220ms cubic-bezier(.2,.8,.2,1); }
}
/* Address popover */
#contact .addr-popover{ position:relative; display:inline-block; }
#contact .addr-popover .popover{
position:absolute; left:0; top:110%; background:#0f1a15; border:1px solid rgba(255,255,255,.15); border-radius:10px;
padding:8px; display:none; box-shadow:0 12px 28px rgba(0,0,0,.32); z-index:10;
}
#contact .addr-popover .popover a{ display:block; padding:6px 8px; border:0; }
#contact .addr-popover.show .popover{ display:block; }
/* Toast */
#contact #contact-toast{
position:fixed; left:50%; bottom:20px; transform:translateX(-50%) translateY(20px);
background: rgba(0,0,0,.85); color:#fff; padding:10px 14px; border-radius:12px; opacity:0;
box-shadow:0 10px 24px rgba(0,0,0,.35); pointer-events:none; transition: opacity 160ms, transform 160ms;
font-size:14px; z-index:1000;
}
#contact #contact-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
/* WhatsApp sticky (mobile only) */
#contact .wa-sticky{
position:fixed; right:16px; bottom:56px; display:flex; align-items:center; gap:8px;
padding:10px 14px; border-radius:999px; background:#1e1e1e; border:1px solid rgba(255,255,255,.16);
color:#fff; text-decoration:none; box-shadow:0 10px 28px rgba(0,0,0,.35); opacity:0; transform: translateY(12px);
transition: opacity 180ms, transform 180ms; z-index:999; pointer-events:none;
}
#contact .wa-sticky .wa-close{ border:0; background:transparent; color:#fff; font-size:16px; cursor:pointer; opacity:.8; }
#contact .wa-sticky.show{ opacity:1; transform:none; pointer-events:auto; }
#contact .wa-sticky .wa-ico{ font-size:16px; }
#contact .wa-sticky .wa-txt{ font-size:14px; }
@media (min-width: 801px){ #contact .wa-sticky{ display:none; } }
/* Responsive */
@media (max-width:1024px){
#contact .contact-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width:640px){
#contact .contact-grid{ grid-template-columns: 1fr; }
#contact .contact-banner{ flex-direction:column; align-items:flex-start; gap:8px; }
}
/* Reveal */
@media (prefers-reduced-motion:no-preference){
#services .svc-card{ opacity:0; transform: translateY(12px); }
#services .svc-card.is-inview{ opacity:1; transform:none; transition: transform 220ms cubic-bezier(.2,.8,.2,1), opacity 220ms cubic-bezier(.2,.8,.2,1); }
}
/* Mouse tilt (applied in JS for desktop only) */
#services .svc-card[data-tilt]{ will-change: transform; }
/* Responsive */
@media (max-width: 900px){
#services .services-grid{ grid-template-columns: 1fr; }
}
/* === SERVICES clean (cards + hover zoom, no CTAs) === */
#services.services-section{ background:#3b3b2b; color:#f5f5dc; padding: 96px 0; }
#services .container{ max-width: 1100px; margin:0 auto; padding: 0 20px; }
#services .section-title{ text-align:center; color:#fff; margin:0 0 12px; font-size: clamp(28px,3.6vw,38px); }
#services .section-sub{ text-align:center; margin:0 0 26px; opacity:.95; }
#services .services-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 24px; }
#services .svc-card{
position:relative; background: rgba(0,0,0,.28);
border:1px solid rgba(255,255,255,.12);
border-radius: 18px; padding: 22px 22px 18px; color:#fff;
box-shadow: 0 12px 28px rgba(0,0,0,.25);
transition: transform 160ms cubic-bezier(.2,.8,.2,1), box-shadow 160ms cubic-bezier(.2,.8,.2,1);
overflow: hidden;
}
#services .svc-card:hover{ transform: translateY(-2px); box-shadow: 0 16px 34px rgba(0,0,0,.32); }
#services .svc-icon{ width:124px; height:124px; margin:0 auto 8px; position:relative; }
#services .svc-icon img{ width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; transition: transform 200ms ease; }
#services .svc-card:hover .svc-icon img{ transform: scale(1.06); }
}
#services h3{ text-align:center; margin:8px 0 6px; letter-spacing:.6px; }
#services .svc-lead{ text-align:center; opacity:.95; margin-bottom: 12px; }
#services .svc-list{ list-style:none; margin: 0; padding:0; display:grid; gap:9px; max-width:560px; margin-inline:auto; color:#f5f5dc; }
#services .svc-list li{ position:relative; padding-left:28px; }
#services .svc-list li::before{
content:""; position:absolute; left:0; top:8px; width:16px; height:16px; border-radius:50%;
background: #2F8E41; box-shadow: 0 0 0 2px rgba(0,0,0,.25) inset, 0 0 12px rgba(47,142,65,.5);
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center/14px;
mask: url('data:image/svg+xml;utf8,') no-repeat center/14px;
}
/* Reveal */
@media (prefers-reduced-motion:no-preference){
#services .svc-card{ opacity:0; transform: translateY(12px); }
#services .svc-card.is-inview{ opacity:1; transform:none; transition: transform 220ms cubic-bezier(.2,.8,.2,1), opacity 220ms cubic-bezier(.2,.8,.2,1); }
}
/* Responsive */
@media (max-width: 900px){
#services .services-grid{ grid-template-columns: 1fr; }
}
/* === SERVICES icon cleanup === */
#services .svc-icon img{ border:0 !important; box-shadow:none !important; outline:0 !important; }
/* --- Global focus visible --- */
:focus-visible{ outline:2px solid #2F8E41; outline-offset:2px; border-radius:10px; }
@media (prefers-reduced-motion: reduce){
*{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}
/* --- Header breathing --- */
header{ transition: padding .18s ease, box-shadow .18s ease, backdrop-filter .18s ease; }
header.scrolled{ box-shadow: 0 8px 20px rgba(0,0,0,.18); backdrop-filter: blur(6px); }
@supports not ((backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px))) {
header.scrolled{ background: rgba(0,0,0,.25); }
}
/* --- Back to top --- */
#btn-top{
position:fixed; right:18px; bottom:22px; width:42px; height:42px; border-radius:999px;
border:1px solid rgba(255,255,255,.16); background:#141414; color:#fff; display:flex; align-items:center; justify-content:center;
box-shadow:0 10px 24px rgba(0,0,0,.25); opacity:0; transform: translateY(12px); pointer-events:none; transition: opacity .18s ease, transform .18s ease;
z-index: 999;
}
#btn-top.show{ opacity:1; transform: translateY(0); pointer-events:auto; }
#btn-top svg{ width:18px; height:18px; }
/* --- Gallery blur-up --- */
.gallery-item img{ filter: none; opacity:1; }
.gallery-item img.is-loaded{ filter: none; opacity:1; transition: opacity .25s ease, transform .35s ease; }
/* snap-off for programmatic anchor scroll */
html.snap-off, body.snap-off{ scroll-snap-type: none !important; }
/* === Added UX polish === */
/* Active link indicator */
nav a{ position:relative; transition:color .18s ease }
nav a.is-active{ color:#E8FDEB; }
nav a::after{
content:""; position:absolute; left:50%; bottom:-6px; width:0; height:2px;
background:linear-gradient(90deg,#3fb26b,#85d79b);
transform:translateX(-50%); transition:width .18s ease;
}
nav a.is-active::after{ width:60%; }
/* Soft fade-in */
[data-fade]{ opacity:0; transform:translateY(8px); transition:opacity .24s ease, transform .24s ease; }
[data-fade].in{ opacity:1; transform:none; }
[data-fade][data-delay="1"]{ transition-delay:.06s }
[data-fade][data-delay="2"]{ transition-delay:.12s }
[data-fade][data-delay="3"]{ transition-delay:.18s }
/* Card micro-elevation */
.card{ transition: transform .18s ease, box-shadow .18s ease; will-change:transform }
.card:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.22) }
/* Elegant underline on hover */
.link-ux{
background-image:linear-gradient(currentColor,currentColor);
background-repeat:no-repeat; background-size:0 2px; background-position:0 100%;
transition:background-size .18s ease;
}
.link-ux:hover{ background-size:100% 2px; }
/* Button micro interactions */
button, .btn{ transition: transform .12s ease, box-shadow .12s ease }
button:hover, .btn:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.18) }
button:active, .btn:active{ transform:translateY(0) scale(.98) }
/* Reading progress bar */
#progress{ position:fixed; left:0; top:0; height:3px; width:0%;
background:linear-gradient(90deg,#3fb26b,#8be0a5); z-index:9999; transition:width .1s linear }
/* Navbar underline expands on hover */
nav a:hover::after, nav a:focus-visible::after{ width:100%; }
/* Nav visibility tweaks: bigger text & spacing without changing bar height */
header nav a{
font-size: 1.06rem; /* +6% approx */
letter-spacing: .2px;
margin: 0 18px; /* spacing between items */
line-height: 1.1; /* keep height stable */
}
@media (max-width: 768px){
header nav a{ margin: 0 12px; font-size: 1.0rem; }
}
/* === FIX: Contraste placeholder Flatpickr sur champ date ===
On cible l'input généré par Flatpickr (altInput) qui est un
immédiatement après #date. On force :
- Placeholder en gris (même teinte que les autres champs)
- Texte saisi en clair
*/
#transportForm #date + input.flatpickr-input::placeholder,
#transportForm input.flatpickr-input[readonly]::placeholder {
color: #9ca3af !important; /* gris lisible */
opacity: 1 !important;
}
#transportForm #date + input.flatpickr-input,
#transportForm input.flatpickr-input[readonly] {
color: #e5e7eb !important; /* texte du champ (quand une date est choisie) */
}
/* Vendor prefixes pour compatibilité */
#transportForm #date + input.flatpickr-input::-webkit-input-placeholder,
#transportForm input.flatpickr-input[readonly]::-webkit-input-placeholder { color: #9ca3af !important; opacity: 1 !important; }
#transportForm #date + input.flatpickr-input::-moz-placeholder,
#transportForm input.flatpickr-input[readonly]::-moz-placeholder { color: #9ca3af !important; opacity: 1 !important; }
#transportForm #date + input.flatpickr-input:-ms-input-placeholder,
#transportForm input.flatpickr-input[readonly]:-ms-input-placeholder { color: #9ca3af !important; opacity: 1 !important; }
/* ===== FINAL OVERRIDE: Placeholder & text color for Flatpickr alt input (sibling of #date) ===== */
#transportForm #date + input::placeholder {
color: #9ca3af !important; /* gris comme le reste */
opacity: 1 !important;
}
#transportForm #date + input {
color: #e5e7eb !important; /* texte saisi */
}
/* Vendor prefixes */
#transportForm #date + input::-webkit-input-placeholder { color:#9ca3af !important; opacity:1 !important; }
#transportForm #date + input::-moz-placeholder { color:#9ca3af !important; opacity:1 !important; }
#transportForm #date + input:-ms-input-placeholder { color:#9ca3af !important; opacity:1 !important; }
/* Safety net: many Flatpickr alt inputs are readonly */
#transportForm input[readonly]::placeholder { color:#9ca3af !important; opacity:1 !important; }
#transportForm input[readonly] { color:#e5e7eb !important; }
/* ==== minimal polish patch (non-intrusive) ==== */
/* 1) Harmoniser les selects "État du véhicule" et "Prestation souhaitée" */
.select-clean {
font-weight: 600; /* léger gras pour le placeholder et la valeur */
}
/* 2) Micro-animations navbar: soulignement fluide au survol */
.navbar a, nav a {
position: relative;
transition: color .15s ease;
}
.navbar a::after, nav a::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -4px;
height: 2px;
transform: scaleX(0);
transform-origin: left;
transition: transform .2s ease;
background: currentColor;
opacity: .7;
}
.navbar a:hover::after, nav a:hover::after { transform: scaleX(1); }
/* 3) Focus states des inputs: liseré doux et accessible */
input[type="text"], input[type="email"], input[type="tel"], select, .flatpickr-input {
transition: box-shadow .15s ease, border-color .15s ease;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, select:focus, .flatpickr-input:focus {
box-shadow: 0 0 0 3px rgba(72,187,120,.25);
border-color: #48BB78; /* vert discret */
outline: none;
}
/* 4) Titre de section (form) : apparition douce */
#transportFormTitle, .form-title, .hero-title {
animation: titleFade .4s ease both;
}
@keyframes titleFade {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
/* 5) Bouton d’envoi: micro-elevation au hover */
.btn-submit {
transition: transform .08s ease, box-shadow .08s ease, filter .08s ease;
}
.btn-submit:hover {
transform: translateY(-1px);
box-shadow: 0 6px 14px rgba(0,0,0,.25);
filter: brightness(1.03);
}
.btn-submit:active { transform: translateY(0); box-shadow: none; }
/* Respecte la réduction des animations si l’utilisateur le demande */
@media (prefers-reduced-motion: reduce) {
.navbar a::after, nav a::after,
.btn-submit, #transportFormTitle, .form-title, .hero-title {
animation: none !important;
transition: none !important;
}
}
/* ==== end patch ==== */
/* ===== Address autocomplete UI ===== */
.ac-list {
background: #1f2937;
border: 1px solid #374151;
border-radius: 8px;
box-shadow: 0 10px 25px rgba(0,0,0,.25);
max-height: 260px;
overflow-y: auto;
padding: 6px 0;
}
.ac-item {
padding: 10px 12px;
font-size: 14px;
line-height: 1.35;
color: #e5e7eb;
cursor: pointer;
}
.ac-item.is-active,
.ac-item:hover { background: #111827; }
/* === Fix largeur autocomplete sous champ === */
.ac-wrap{
position: relative;
display: block;
width: 100%;
flex: 1 1 auto; /* si parent est en flex */
}
.ac-wrap > input[type="text"],
.ac-wrap > input[type="tel"],
.ac-wrap > input[type="email"]{
width: 100% !important;
display: block;
margin: 0; /* les marges sont portées par .ac-wrap */
}
/* Assure que la liste respecte la largeur du champ */
.ac-wrap > .ac-list{
left: 0;
right: 0;
width: auto;
}
/* removed old fix */
.gallery-item img {
opacity: 1 !important;
filter: none !important;
transition: opacity .25s ease, transform .35s ease;
}
.gallery-item img.is-loaded {
opacity: 1 !important;
filter: none !important;
}
.gallery-item::before,
.gallery-item::after {
background: transparent !important;
}
/* --- FIX Galerie (scopé) : vignettes visibles sans impacter la lightbox --- */
#gallery .gallery-grid .gallery-item img{
opacity: 1 !important;
filter: none !important;
transition: opacity .25s ease, transform .35s ease;
}
#gallery .gallery-grid .gallery-item img.is-loaded{
opacity: 1 !important;
filter: none !important;
}
/* Assurer que la carte de légende passe au-dessus */
.lightbox-backdrop .lightbox-caption{ z-index: 40; }
.lightbox-backdrop .cap-card{ z-index: 41; }
/* --- FIN FIX Galerie (scopé) --- */
/* --- HARD FIX galerie : forcer l'affichage des vignettes et neutraliser tout overlay --- */
#gallery .gallery-grid .gallery-item img{
opacity: 1 !important;
filter: none !important;
transform: none !important;
visibility: visible !important;
}
#gallery .gallery-grid .gallery-item,
#gallery .gallery-grid .gallery-item *{
will-change: auto !important;
}
#gallery .gallery-grid .gallery-item .overlay,
#gallery .gallery-grid .gallery-item .skeleton,
#gallery .gallery-grid .gallery-item .placeholder{
opacity: 0 !important;
background: transparent !important;
visibility: hidden !important;
pointer-events: none !important;
}
#gallery .gallery-grid .gallery-item.loaded img,
#gallery .gallery-grid .gallery-item:not(.loaded) img,
#gallery .gallery-grid .gallery-item .is-loaded{
opacity: 1 !important;
filter: none !important;
}
/* Conserver la lightbox au-dessus */
.lightbox-backdrop,
.lightbox-backdrop *{
opacity: initial;
filter: none;
}
.lightbox-backdrop .lightbox-caption,
.lightbox-backdrop .cap-card{ z-index: 100 !important; }
/* --- FIN HARD FIX galerie --- */
/* Forcer les flèches de lightbox visibles en permanence */
.lightbox-backdrop .lb-nav {
display: flex !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
/* Section Collaborateurs */
.collaborateurs {
background: #111;
color: #fff;
padding: 80px 20px;
text-align: center;
}
.collaborateurs h2 {
font-size: 2.5em;
margin-bottom: 10px;
color: #28a745;
}
.collaborateurs .subtitle {
margin-bottom: 40px;
font-size: 1.2em;
color: #aaa;
}
.collaborateurs .logos {
display: flex;
justify-content: center;
gap: 40px;
flex-wrap: wrap;
}
.collaborateurs .logos img {
max-height: 60px;
transition: transform 0.3s ease;
}
.collaborateurs .logos img:hover {
transform: scale(1.1);
}
/* Correction Navbar et logos */
nav ul {
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: nowrap; /* éviter retour ligne */
}
.collaborateurs .logos img {
max-height: 120px; /* logos agrandis */
margin: 0 30px;
}
/* Correction finale logos et titre */
.collaborateurs .logos img {
max-height: 360px; /* logos encore plus gros */
margin: 0 40px;
}
.collaborateurs h2 {
font-weight: bold;
color: #00ff00; /* vert bien visible */
}
/* Correction finale pour collaborateurs */
.collaborateurs .logos {
display: flex;
justify-content: space-between; /* aligner gauche - centre - droite */
align-items: center;
width: 100%;
}
.collaborateurs .logos img {
max-height: 360px; /* taille XXL */
flex: 1;
object-fit: contain;
}
/* Correction finale Collaborateurs */
.collaborateurs .logos {
display: flex;
justify-content: space-between; /* gauche - centre - droite */
align-items: center;
gap: 40px;
flex-wrap: nowrap; /* empêcher retour ligne */
}
.collaborateurs .logos img {
max-height: 360px; /* taille XXL */
flex: 1;
object-fit: contain;
}