/* ==============================
   VFJ Construction — Styles globaux
   ============================== */
   :root{
    --primary:#1E3A8A;
    --accent:#F97316;
    --bg:#F9FAFB;
    --text:#111827;
    --text2:#6B7280;
    --line:#E5E7EB;
    --white:#ffffff;
  
    --radius-sm:6px;
    --radius-md:8px;
    --radius-lg:12px;
    --radius-xl:16px;
  
    --shadow-card:0 6px 16px rgba(0,0,0,.08);
    --shadow-hover:0 10px 25px rgba(0,0,0,.12);
  
    --container:1200px;
  }
  
  *{box-sizing:border-box}
  html,body{
    margin:0;
    padding:0;
    background:var(--bg);
    color:var(--text);
    font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial
  }
  img{max-width:100%;display:block}
  a{color:inherit;text-decoration:none}
  .container{max-width:var(--container);padding:0 24px;margin:0 auto}
  
  /* Utilities */
  .muted{color:var(--text2)}
  .hidden{display:none !important}
  .text-center{text-align:center}
  .mt-0{margin-top:0}
  .mb-0{margin-bottom:0}
  .mt-1{margin-top:4px}
  .mt-2{margin-top:8px}
  .mt-3{margin-top:12px}
  .mt-4{margin-top:16px}
  .mt-6{margin-top:24px}
  .mt-8{margin-top:32px}
  
  /* Buttons */
  .btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:var(--radius-md);border:0;cursor:pointer;font-weight:600;transition:all .3s ease}
  .btn:disabled{opacity:.6;cursor:not-allowed}
  .btn-primary{background:var(--primary);color:#fff}
  .btn-primary:hover{background:#152A6E;transform:translateY(-2px);box-shadow:var(--shadow-hover)}
  .btn-accent{background:var(--accent);color:#fff}
  .btn-accent:hover{background:#E55A0D;transform:translateY(-2px);box-shadow:var(--shadow-hover)}
  .btn-outline{background:transparent;border:1px solid var(--primary);color:var(--primary)}
  .btn-outline:hover{background:var(--primary);color:#fff}

  /* Cards & grid */
  .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);transition:transform .3s ease, box-shadow .3s ease}
  .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
  .grid{display:grid;gap:16px}
  .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  
  /* Tag */
  .tag{display:inline-block;padding:4px 10px;border-radius:999px;background:#EEF2FF;color:#1E3A8A;font-size:12px;font-weight:600}
  
  /* Header / Nav */
  header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line);z-index:50;box-shadow:0 2px 10px rgba(0,0,0,.05)}
  .nav{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
  .nav .left{display:flex;align-items:center;gap:16px}
  .logo{font-weight:800;color:var(--primary);white-space:nowrap;font-size:20px}
  .logo-vfj { height: 8%; width: 8%;}
  .menu{display:flex;gap:16px;flex-wrap:nowrap;}
  .menu a{padding:8px 10px;border-radius:8px;transition:background .3s ease}
  .menu a.active, .menu a:hover{background:#F3F4F6}
  .menu a {white-space:nowrap;flex:0 0 auto; /* empêche le shrink trop fort */}
  .burger{display:none}
  
  /* Views / router de page côté front */
  .views{padding-block:24px}
  .view{display:none;animation:fade .25s ease}
  .view.active{display:block}
  @keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  
  /* Hero */
  .hero{background:linear-gradient(180deg,#EEF2FF,transparent);padding:48px 0}
  .hero .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center}
  .hero h1{font-size:40px;line-height:1.2;margin:0 0 12px}
  .hero p{margin:0 0 20px;color:var(--text2);font-size:18px}
  .hero .img{height:340px;border-radius:16px;background:#CBD5E1;border:1px solid var(--line);overflow:hidden;position:relative}
  .hero .img::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(45deg, rgba(30,58,138,0.1), rgba(249,115,22,0.1))}
  
  /* Catégories */
  .cat .item{padding:16px;cursor:pointer}
  .cat .ph{height:120px;border-radius:12px;background:#E5E7EB;border:1px solid var(--line);margin-bottom:10px;transition:all .3s ease}
  .cat .item:hover .ph{background:#D1D5DB}
  
  /* Carousel (réalisations / similaires) */
  .carousel{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);gap:16px;overflow:auto;padding-bottom:8px;scroll-snap-type:x mandatory}
  .carousel::-webkit-scrollbar{height:8px}
  .carousel::-webkit-scrollbar-thumb{background:#D1D5DB;border-radius:999px}
  .carousel > .shot{scroll-snap-align:start;height:220px;border-radius:16px;background:#E5E7EB;border:1px solid var(--line);position:relative;overflow:hidden}
  .carousel .cap{position:absolute;left:10px;bottom:10px;background:rgba(0,0,0,.6);color:#fff;padding:6px 10px;border-radius:999px;font-size:12px}
  
  /* Arguments / pourquoi nous choisir */
  .why .card{padding:16px}
  
  /* Footer */
  footer{margin-top:32px;background:#fff;border-top:1px solid var(--line)}
  footer .cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:20px 0}
  footer .socials{display:flex;gap:12px;margin-top:12px}
  footer .socials a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#F3F4F6;color:var(--primary);transition:all .3s ease}
  footer .socials a:hover{background:var(--primary);color:#fff}
  
  
  /* ==============================
      Catalogue produits
============================== */

/* Bouton appliquer plus court */
.btn-primary.btn-appliquer {padding: 6px 14px !important;  /* réduit largeur et hauteur */font-size: 14px;max-width: 140px;/* largeur maximale fixe */}

/* Badge produit */
.product .badge {position: absolute;top: 12px;left: 12px;background: var(--accent);color: #fff;padding: 4px 10px;font-size: 12px;font-weight: 700;border-radius: 999px;box-shadow: 0 4px 10px rgba(0,0,0,.15);z-index: 10;}

/* Card produit */
.product {position: relative;overflow: hidden;transition: all .3s ease;display: flex;flex-direction: column;align-items: center;       /* centre horizontal */text-align: center;        /* centre le texte */}

/* Image / placeholder */
.product-img {background: linear-gradient(135deg, #cbd5e1, #e5e7eb);border-radius: 12px;height: 200px;width: 100%;max-width: 220px;border: 1px solid var(--line);transition: transform .4s ease, background .4s ease;}

.product:hover .product-img {transform: scale(1.05);background: linear-gradient(135deg, #9ca3af, #d1d5db);}

/* Boutons actions */
.product-actions {margin-top: 12px;display: flex;gap: 10px;justify-content: center;  /* centre horizontalement les boutons */}

/* Animation hover card */
.product.card:hover {transform: translateY(-6px) scale(1.02);box-shadow: 0 14px 30px rgba(0,0,0,.12);}

/* Animation hover titre */
.product h4 {transition: color .3s ease;}

.product:hover h4 {color: var(--primary);}

/* Animation apparition catalogue */
.grid-3 .product {animation: fadeProduct .6s ease;}

@keyframes fadeProduct {from { opacity: 0; transform: translateY(20px); }to   { opacity: 1; transform: none; }}

/* Filtres */
.filters {border-radius: 14px;box-shadow: var(--shadow-card);padding: 18px !important;}

.filters strong {font-size: 18px;margin-bottom: 12px;display: block;}

/* Boutons */
.btn-primary {background: var(--primary);color: #fff;transition: all .3s ease;}

.btn-primary:hover {background: #152A6E;transform: translateY(-3px);box-shadow: var(--shadow-hover);}

.btn-accent {background: var(--accent);color: #fff;transition: all .3s ease;}

.btn-accent:hover {background: #E55A0D;transform: translateY(-3px);box-shadow: var(--shadow-hover);}

/* Bouton appliquer plus court */
.btn-primary.btn-appliquer {padding: 6px 14px !important;font-size: 14px;}

/* Responsive */
@media (max-width: 1024px) {.product-img { height: 160px; }}

@media (max-width: 680px) {.product-img { height: 140px; }.product .badge { font-size: 10px; padding: 3px 8px; }}

/* Overlay full screen pour zoom */
.zoom-overlay {
    position: fixed;top:0; left:0;width:100%;height:100%;background: rgba(0,0,0,0.8);display:flex;justify-content:center;align-items:center;z-index: 999;opacity: 0;visibility: hidden;transition: opacity .3s ease;}

.zoom-overlay.active {opacity: 1;visibility: visible;}

.zoom-overlay img {max-width: 90%;max-height: 90%;border-radius: 12px;box-shadow: 0 14px 30px rgba(0,0,0,.2);}

/* Bouton retour en haut */
.scroll-top {
    position: fixed;
    bottom: 80px;right: 25px;width: 45px;height: 45px;border-radius: 50%;background: var(--primary);color: #fff;font-size: 22px;border: none;cursor: pointer;display: flex;justify-content: center;align-items: center;box-shadow: 0 6px 18px rgba(0,0,0,0.25);opacity: 0;visibility: hidden;transition: all 0.3s ease;z-index: 9999;}

.scroll-top:hover {transform: translateY(-4px);background: #152A6E;}

/* Quand il apparaît */
.scroll-top.show {opacity: 1;visibility: visible;}



  
  /* Fiche produit */
  .two{display:grid;grid-template-columns:1.1fr .9fr;gap:24px}
  .gallery .hero{height:360px;border-radius:16px;background:#D1D5DB;border:1px solid var(--line)}
  .thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
  .thumbs .t{height:72px;background:#E5E7EB;border:1px solid var(--line);border-radius:10px;cursor:pointer;transition:all .3s ease}
  .thumbs .t:hover{background:#D1D5DB}
  .specs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .specs .cell{padding:12px;background:#F3F4F6;border:1px solid var(--line);border-radius:10px}
  
  /* Contact */
  .contact-grid{display:grid;grid-template-columns:1fr .9fr;gap:24px}
  .field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
  .input{height:44px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff;transition:border .3s ease}
  .input:focus{outline:none;border-color:var(--primary)}
  .textarea{min-height:120px;resize:vertical}
  .map{height:280px;background:#D1D5DB;border:1px solid var(--line);border-radius:12px}
  
  /* About / Timeline / Team */
  .about .team, .about .gal{display:grid;gap:16px}
  .about .team{grid-template-columns:repeat(4,1fr)}
  .about .gal{grid-template-columns:repeat(3,1fr)}
  .ph{height:220px;background:#E5E7EB;border:1px solid var(--line);border-radius:16px}
  .testi{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .testi .card{padding:16px}
  .section-title{font-size:28px;margin-bottom:16px;position:relative;padding-bottom:8px}
  .section-title::after{content:"";position:absolute;bottom:0;left:0;width:60px;height:3px;background:var(--accent)}
  .stats{display:flex;justify-content:space-around;flex-wrap:wrap;margin:32px 0;padding:32px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .stat-item{text-align:center;padding:16px}
  .stat-number{font-size:36px;font-weight:800;color:var(--primary);line-height:1}
  .stat-label{font-size:14px;color:var(--text2);margin-top:8px}
  .process{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:32px 0}
  .process-step{text-align:center;padding:16px}
  .process-number{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--primary);color:#fff;margin:0 auto 12px;font-weight:700}
  .process-title{font-weight:600;margin-bottom:8px}
  .process-desc{font-size:14px;color:var(--text2)}
  .partners{display:flex;justify-content:center;align-items:center;gap:32px;flex-wrap:wrap;margin:32px 0;padding:32px 0;border-top:1px solid var(--line)}
  .partner-logo{height:60px;width:auto;opacity:.6;transition:opacity .3s ease}
  .partner-logo:hover{opacity:1}
  .timeline{position:relative;max-width:800px;margin:32px auto}
  .timeline::before{content:"";position:absolute;left:30px;top:0;bottom:0;width:2px;background:var(--primary)}
  .timeline-item{position:relative;margin-bottom:32px;padding-left:80px}
  .timeline-year{position:absolute;left:0;top:0;width:60px;height:60px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
  .timeline-content{background:#fff;padding:16px;border-radius:var(--radius-lg);border:1px solid var(--line);box-shadow:var(--shadow-card)}
  
  /* WhatsApp floating */
  .wa{position:fixed;right:16px;bottom:16px;background:#25D366;color:#fff;font-weight:700;padding:12px 16px;border-radius:999px;box-shadow:var(--shadow-card);z-index:60;transition:all .3s ease}
  .wa:hover{background:#128C7E;transform:scale(1.05)}
  
  /* Responsive */
  @media (max-width: 1024px){
    .hero .wrap, .two, .contact-grid{grid-template-columns:1fr}
    .layout{grid-template-columns:1fr}
    .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
    .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
    .about .team{grid-template-columns:repeat(2,1fr)}
    .about .gal{grid-template-columns:repeat(2,1fr)}
    .testi{grid-template-columns:1fr}
    footer .cols{grid-template-columns:1fr}
    .process{grid-template-columns:repeat(2,1fr)}
  }
  @media (max-width: 680px){
    .menu{display:none}
    .burger{display:inline-flex;gap:8px;align-items:center;padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:#fff}
    .grid-3, .grid-4{grid-template-columns:1fr}
    .specs{grid-template-columns:1fr}
    .hero h1{font-size:30px}
    .process{grid-template-columns:1fr}
    .stats{flex-direction:column}
    .partner-logo{height:40px}
  }
  
  /* bouton de connexion */
 .btn-connexion {
    background-color: #152A6E;
    color: white !important;
    padding: 8px 16px;
    border-radius: 5px;
    margin-left: 10px;
    transition: all .3s ease; /* Pour animation smooth */
}

.btn-connexion:hover {
  background-color: #0056b3;
}

.menu a.btn-connexion:hover {
    background: #0056b3 !important;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}