/*
Theme Name: SV Montage 2026
Theme URI: https://svmontage.fr
Author: SV Montage
Description: Thème sur mesure pour SV Montage - constructeur métallique, bardages, serrurerie et fabrication sur mesure en Essonne / Île-de-France.
Version: 2.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: svmontage
*/

/* ==========================================================================
   DESIGN TOKENS
   Direction : atelier de métallerie / plaque de certification acier.
   Fond papier technique, charbon, deux accents (rouge marque + orange
   sécurité) utilisés comme sur une signalétique de chantier réelle.
   ========================================================================== */
:root{
  --charcoal: #15171B;
  --charcoal-2: #1E2126;
  --steel-700: #3B424A;
  --steel-500: #6B737B;
  --steel-300: #A9AFB5;
  --steel-150: #DADCDD;
  --paper: #EDEBE5;
  --paper-2: #F6F5F1;
  --text: #191B1E;
  --text-soft: #5B6167;
  --brand: #C41A1E;       /* rouge de la marque (logo) */
  --brand-dark: #961215;
  --safety: #E8600F;      /* orange sécurité — accent secondaire */
  --line: rgba(21,23,27,0.14);
  --line-light: rgba(255,255,255,0.16);
  --radius: 3px;

  --font-display: "Archivo Black", "Arial Black", sans-serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--paper);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: inherit; text-decoration: none; }
:focus-visible{ outline: 2px solid var(--safety); outline-offset: 2px; }
h1,h2,h3,h4{
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.02;
  margin: 0 0 .4em;
  color: var(--charcoal);
}
h1{ font-size: clamp(2.4rem, 5vw, 4.2rem); }
h2{ font-size: clamp(1.7rem, 3vw, 2.6rem); }
h3{ font-size: 1.25rem; }
p{ margin: 0 0 1em; }
.container{
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 28px;
}

/* -- "plaque" signature element : étiquette style plaque de certification -- */
.plate{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: 5px 10px;
  border: 1px solid currentColor;
  position: relative;
}
.plate::before, .plate::after{
  content:"";
  position:absolute; width:5px; height:5px;
  border: 1px solid currentColor;
  top:-3px;
}
.plate::before{ left:-3px; border-right:none; border-bottom:none; }
.plate::after{ right:-3px; border-left:none; border-bottom:none; }

.eyebrow{
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--safety);
  display:flex;
  align-items:center;
  gap:.7em;
  margin-bottom: 16px;
}
.eyebrow::before{
  content:"";
  width: 30px; height: 2px;
  background: var(--safety);
  display:inline-block;
}

/* -- Buttons -- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 15px 28px;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  transition: background .18s ease, color .18s ease, transform .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn-solid{ background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-solid:hover{ background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-ghost-light{ color: #fff; border-color: rgba(255,255,255,.55); }
.btn-ghost-light:hover{ background: rgba(255,255,255,.1); border-color: #fff; }
.btn-ghost-dark{ color: var(--charcoal); border-color: var(--charcoal); }
.btn-ghost-dark:hover{ background: var(--charcoal); color: #fff; }

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.site-header{
  background: var(--charcoal);
  border-bottom: 3px solid var(--brand);
  position: sticky; top:0; z-index: 200;
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  gap: 24px; padding-top: 14px; padding-bottom: 14px;
}
.brand img{ max-height:52px; width:auto; }

.primary-nav > ul{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap: 6px;
}
.primary-nav > ul > li{ position:relative; }
.primary-nav > ul > li > a{
  display:block; padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 13px; font-weight:600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--steel-150);
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.primary-nav > ul > li > a:hover,
.primary-nav > ul > li.current-menu-item > a,
.primary-nav > ul > li.current-menu-ancestor > a{
  color:#fff; border-color: var(--brand);
}

/* dropdowns */
.primary-nav ul ul{
  list-style:none; margin:0; padding: 8px 0;
  position:absolute; top:100%; left:0; min-width: 240px;
  background: #fff;
  border-top: 2px solid var(--brand);
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
  opacity:0; visibility:hidden; transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
  z-index: 20;
}
.primary-nav li:hover > ul,
.primary-nav li.focus-within > ul{
  opacity:1; visibility:visible; transform: translateY(0);
}
.primary-nav ul ul li{ position:relative; }
.primary-nav ul ul a{
  display:block; padding: 10px 18px;
  font-family: var(--font-body);
  font-size: 14.5px; color: var(--text);
  border-left: 2px solid transparent;
}
.primary-nav ul ul a:hover{ background: var(--paper); border-left-color: var(--brand); color: var(--brand-dark); }
.primary-nav ul ul ul{ top:-8px; left:100%; }
.primary-nav ul ul li.menu-item-has-children > a::after{
  content:"›"; float:right; margin-left:10px; color: var(--steel-500);
}

.header-cta{ display:flex; align-items:center; gap:18px; }
.header-phone{
  font-family: var(--font-mono); font-size: 14px; font-weight:600;
  letter-spacing: .04em; color:#fff;
}
.header-phone::before{ content:"☎ "; color: var(--safety); }
.menu-toggle{
  display:none; background:none; border:1px solid var(--steel-500);
  color:#fff; font-size:20px; padding:6px 12px; border-radius: var(--radius);
  cursor:pointer;
}

@media (max-width: 980px){
  .header-phone{ display:none; }
  .menu-toggle{ display:block; }
  .primary-nav{
    position:absolute; top:100%; left:0; right:0;
    background: var(--charcoal-2);
    max-height:0; overflow:hidden;
    transition: max-height .25s ease;
  }
  .site-header.nav-open .primary-nav{ max-height: 80vh; overflow-y:auto; }
  .primary-nav > ul{ flex-direction:column; align-items:stretch; padding: 10px 20px 20px; }
  .primary-nav ul ul{
    position:static; box-shadow:none; opacity:1; visibility:visible; transform:none;
    background: rgba(255,255,255,.04); border-top:none; border-left: 2px solid var(--brand);
    padding: 4px 0 4px 14px; display:none;
  }
  .primary-nav li.js-open > ul{ display:block; }
  .primary-nav ul ul a{ color: var(--steel-150); }
  .primary-nav ul ul a:hover{ background:transparent; color:#fff; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  background: var(--charcoal);
  background-image:
    linear-gradient(180deg, rgba(21,23,27,.86), rgba(21,23,27,.94)),
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 26px);
  color:#fff;
  padding: 96px 0 64px;
  overflow:hidden;
}
.hero.has-photo{ background-image: linear-gradient(180deg, rgba(21,23,27,.88), rgba(21,23,27,.94)); background-size:cover; background-position:center; }
.hero .container{ position:relative; max-width: 760px; }
.hero .lede{ color: var(--steel-150); font-size: 1.08rem; max-width:56ch; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-top: 30px; }

.stat-strip{
  background: var(--charcoal-2);
  border-top: 1px solid var(--line-light);
  border-bottom: 3px solid var(--safety);
}
.stat-strip .container{
  display:grid; grid-template-columns: repeat(4, 1fr);
}
.stat{
  padding: 26px 20px; text-align:center;
  border-left: 1px solid var(--line-light);
}
.stat:first-child{ border-left:none; }
.stat .num{
  display:block; font-family: var(--font-display); color:#fff;
  font-size: 2.1rem; line-height:1;
}
.stat .label{
  display:block; margin-top:8px; font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--steel-300);
}
@media (max-width: 700px){
  .stat-strip .container{ grid-template-columns: repeat(2,1fr); }
  .stat:nth-child(3){ border-left:none; }
}

/* ==========================================================================
   SECTIONS GÉNÉRIQUES
   ========================================================================== */
.section{ padding: 84px 0; }
.section-alt{ background: var(--charcoal); color:#fff; }
.section-alt h2, .section-alt h3{ color:#fff; }
.section-head{ max-width: 700px; margin-bottom: 46px; }
.section-head p:not(.eyebrow){ color: var(--text-soft); }
.section-alt .section-head p:not(.eyebrow){ color: var(--steel-300); }

/* ==========================================================================
   SERVICES
   ========================================================================== */
.services-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  background: var(--line); border: 1px solid var(--line);
}
.service-card{
  background: var(--paper-2); padding: 34px 28px 30px;
  display:flex; flex-direction:column; gap: 10px;
  transition: background .18s ease;
}
.service-card:hover{ background:#fff; }
.service-card .idx{
  font-family: var(--font-mono); color: var(--safety);
  font-size: 13px; letter-spacing: .1em;
}
.service-card p{ color: var(--text-soft); font-size: .96rem; flex:1; }
.service-card .more{
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing:.06em;
  text-transform:uppercase; color: var(--charcoal);
  border-top: 1px solid var(--line); padding-top: 14px; margin-top: 6px;
}
.service-card:hover .more{ color: var(--brand); }
@media (max-width: 860px){ .services-grid{ grid-template-columns: 1fr; } }

.divider-corrugated{ height: 10px; background: repeating-linear-gradient(90deg, var(--steel-300) 0 3px, var(--paper) 3px 8px); }

/* ==========================================================================
   PROJECTS / PORTFOLIO — cartes maison (page d'accueil)
   ========================================================================== */
.projects-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.project-card{
  position:relative; display:block; overflow:hidden;
  aspect-ratio: 4/5; background: var(--steel-700);
  border: 1px solid var(--line-light);
}
.project-card img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .4s ease;
}
.project-card:hover img{ transform: scale(1.06); }
.project-card::before{
  content:""; position:absolute; inset:10px; border: 1px solid rgba(255,255,255,0);
  transition: border-color .2s ease, inset .2s ease; pointer-events:none;
}
.project-card:hover::before{ border-color: rgba(255,255,255,.55); inset:14px; }
.project-card .overlay{
  position:absolute; left:0; right:0; bottom:0; padding: 18px;
  background: linear-gradient(0deg, rgba(21,23,27,.92), rgba(21,23,27,0));
  color:#fff;
}
.project-card .tag{
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing:.1em;
  text-transform:uppercase; color: var(--safety); display:block; margin-bottom:6px;
}
.project-card h4{ color:#fff; font-size: 1rem; margin:0; text-transform:none; letter-spacing:0; font-family: var(--font-body); font-weight:600; }
@media (max-width: 980px){ .projects-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .projects-grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   TIMELINE / ABOUT
   ========================================================================== */
.about-flex{ display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items:start; }
.timeline{ border-left: 2px solid var(--line); padding-left: 28px; display:flex; flex-direction:column; gap: 30px; }
.timeline-item{ position:relative; }
.timeline-item::before{
  content:""; position:absolute; left:-33px; top:4px; width:9px; height:9px;
  background: var(--brand); border-radius:50%;
}
.timeline-item .year{ font-family: var(--font-mono); color: var(--safety); font-size:13px; font-weight:700; letter-spacing:.08em; }
.timeline-item h4{ margin: 4px 0 6px; }
.timeline-item p{ color: var(--text-soft); margin:0; font-size:.95rem; }
@media (max-width: 860px){ .about-flex{ grid-template-columns: 1fr; } }

/* ==========================================================================
   ZONE D'INTERVENTION
   ========================================================================== */
.zone-box{ display:grid; grid-template-columns: 1.4fr 1fr; gap: 50px; align-items:center; }
.zone-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.zone-list li{
  font-family: var(--font-mono); font-size:13px; letter-spacing:.05em;
  padding: 12px 14px; border: 1px solid var(--line-light); color:#fff;
}
@media (max-width: 860px){ .zone-box{ grid-template-columns: 1fr; } }

/* ==========================================================================
   REVIEWS
   ========================================================================== */
.reviews-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.review-card{ background:#fff; border:1px solid var(--line); padding: 28px 26px; }
.review-card .stars{ color: var(--safety); letter-spacing:2px; margin-bottom:12px; }
.review-card p{ color: var(--text-soft); font-size:.95rem; }
.review-card .name{ font-family: var(--font-mono); font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color: var(--charcoal); margin-top:14px; }
@media (max-width: 860px){ .reviews-grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background: var(--charcoal); color: var(--steel-300); padding: 60px 0 26px; font-size:.92rem; }
.site-footer a:hover{ color:#fff; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--line-light); }
.footer-grid h5{ font-family: var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#fff; margin: 0 0 16px; }
.footer-grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.footer-bottom{ padding-top: 22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.82rem; }
@media (max-width: 860px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   BREADCRUMBS / PAGES INTERNES
   ========================================================================== */
.page-header,
.page-hero{ background: var(--charcoal); color:#fff; padding: 46px 0 40px; position:relative; overflow:hidden; }
.page-hero.corrugated::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:6px;
  background: repeating-linear-gradient(90deg, var(--safety) 0 3px, transparent 3px 8px);
  opacity:.7;
}
.page-header h1,
.page-hero h1{ color:#fff; margin-bottom:10px; }
.page-hero .lede{ color: var(--steel-150); max-width:60ch; margin-top:14px; margin-bottom:0; }
.breadcrumbs{ font-family: var(--font-mono); font-size:12.5px; color: var(--steel-300); letter-spacing:.03em; }
.breadcrumbs a{ color: var(--steel-300); }
.breadcrumbs a:hover{ color:#fff; }
.entry-content{ padding: 56px 0; }
.entry-content .page-links{ margin-top:30px; font-family: var(--font-mono); font-size:13px; }

/* -- Bloc coordonnées, page Contact -- */
.contact-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  padding: 56px 0 0;
}
.contact-card{
  background:#fff; border:1px solid var(--line); padding: 26px 24px;
  text-align:center;
}
.contact-card p:last-child{ margin:0; font-weight:600; }
.contact-card a{ color: var(--brand); }
.contact-card a:hover{ text-decoration:underline; }
@media (max-width: 860px){ .contact-grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   PORTFOLIO — grille + filtre (page Portfolio)
   ========================================================================== */
.portfolio-filter{
  display:flex; flex-wrap:wrap; gap: 6px 8px; list-style:none;
  padding:0; margin: 0 0 40px; justify-content:center;
}
.portfolio-filter button{
  font-family: var(--font-mono); font-size:12.5px; letter-spacing:.06em;
  text-transform:uppercase; padding: 10px 18px; border: 1px solid var(--line);
  background:#fff; color: var(--text); cursor:pointer; transition: background .15s ease, color .15s ease;
}
.portfolio-filter button:hover,
.portfolio-filter button.is-active{
  background: var(--charcoal); border-color: var(--charcoal); color:#fff;
}
.portfolio-grid,
.projects-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.project-card.is-hidden{ display:none; }
@media (max-width: 980px){ .portfolio-grid, .projects-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .portfolio-grid, .projects-grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   FICHE CHANTIER (single-portfolio.php)
   ========================================================================== */
.chantier-layout{ display:grid; grid-template-columns: 1fr 320px; gap: 50px; align-items:start; padding: 56px 0; }
.chantier-tags{ margin: 14px 0 0; display:flex; gap:8px; flex-wrap:wrap; }
.chantier-tags .plate{ color: var(--steel-150); }

.chantier-gallery-main{ aspect-ratio: 16/10; overflow:hidden; background: var(--steel-700); margin-bottom:10px; }
.chantier-gallery-main img{ width:100%; height:100%; object-fit:cover; }
.chantier-gallery-thumbs{ display:flex; gap:8px; flex-wrap:wrap; }
.chantier-thumb{
  width:84px; height:64px; padding:0; border: 2px solid transparent; cursor:pointer;
  overflow:hidden; background:none;
}
.chantier-thumb img{ width:100%; height:100%; object-fit:cover; }
.chantier-thumb.is-active,
.chantier-thumb:hover{ border-color: var(--brand); }
.chantier-description{ margin-top: 32px; color: var(--text-soft); }
.chantier-description p{ font-size:1.02rem; }

.fact-card{ background:#fff; border:1px solid var(--line); padding: 28px 26px; position:sticky; top: 100px; }
.fact-card h3{ margin-bottom: 16px; }
.fact-card dl{ margin:0 0 24px; }
.fact-card dt{ font-family: var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color: var(--steel-500); margin-top:14px; }
.fact-card dt:first-child{ margin-top:0; }
.fact-card dd{ margin:2px 0 0; font-weight:600; }
.fact-card .btn{ width:100%; justify-content:center; }
@media (max-width: 900px){
  .chantier-layout{ grid-template-columns: 1fr; }
  .fact-card{ position:static; }
}

/* ==========================================================================
   WPBAKERY / PORTFOLIO GRID — habillage générique
   Le contenu de la page "Portfolio" est construit avec WPBakery + l'élément
   de grille RadiantThemes. On habille ces classes génériques directement
   pour que la grille garde une allure soignée sans toucher au contenu.
   ========================================================================== */
.wpb_content_element,
.vc_grid-container{ margin-bottom: 0 !important; }

.vc_grid-container .vc_grid-item,
.vc_portfolio .vc_grid-item{
  border: none !important;
}
.vc_grid-container .vc_grid-item .vc_gitem-zone,
.vc_grid-container .isotope-item{
  aspect-ratio: 4/3;
  overflow:hidden;
}
.vc_grid-container img{
  width:100% !important; height:100% !important; object-fit:cover !important;
  transition: transform .4s ease;
}
.vc_grid-container .vc_grid-item:hover img{ transform: scale(1.06); }
.vc_grid-container{
  display:grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px !important;
}
.vc_grid-container .vc_grid-item{ width:auto !important; float:none !important; padding:0 !important; }
@media (max-width: 860px){ .vc_grid-container{ grid-template-columns: repeat(2,1fr) !important; } }
@media (max-width: 560px){ .vc_grid-container{ grid-template-columns: 1fr !important; } }

/* filtres de catégorie (boutons TOUT / CONSTRUCTION / ...) */
.vc_portfolio-filter,
.wpb-js-composer .vc_grid-filter{
  display:flex !important; flex-wrap:wrap; gap: 6px 4px;
  justify-content:center; list-style:none !important; padding:0 !important; margin: 0 0 40px !important;
}
.vc_grid-filter li{ display:inline-flex !important; }
.vc_grid-filter a{
  font-family: var(--font-mono) !important; font-size:12.5px !important;
  letter-spacing:.06em; text-transform:uppercase;
  padding: 10px 18px !important; border: 1px solid var(--line) !important;
  color: var(--text) !important; background:#fff !important;
}
.vc_grid-filter a.vc-active,
.vc_grid-filter a:hover{
  background: var(--charcoal) !important; border-color: var(--charcoal) !important; color:#fff !important;
}

/* ==========================================================================
   RESPONSIVE — HERO
   ========================================================================== */
@media (max-width: 700px){
  .hero{ padding: 70px 0 44px; }
  .section{ padding: 56px 0; }
}