/* =========================================================
   TARDY — Rénovation Globale — theme stylesheet
   Ported from the original tardy-site build, same visual design.
   Fix vs. the original: .frame-photo blocks now use aspect-ratio
   instead of a fixed pixel height, so image blocks scale down
   properly on tablet/mobile instead of leaving huge empty gaps.
   ========================================================= */
:root{
  --navy: #14213d;
  --navy-2: #1b2c50;
  --navy-darker: #0b1226;
  --blue: #5b78cc;
  --blue-dark: #4a63b0;
  --blue-light: #8497d8;
  --orange: #eaa356;
  --text-dark: #16213e;
  --text-gray: #64708a;
  --text-gray-light: #8993ab;
  --border-light: #e3e6ee;
  --bg-section: #f8f9fb;
  --radius: 6px;
  --maxw: 1240px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter', sans-serif;
  color:var(--text-dark);
  background:#fff;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{text-decoration:none; color:inherit;}
ul{list-style:none;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
section{position:relative;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 30px; border-radius:30px; font-weight:700; font-size:13px;
  letter-spacing:0.5px; text-transform:uppercase; cursor:pointer; border:2px solid transparent;
  transition:all .2s ease; white-space:nowrap;
}
.btn-primary{ background:var(--blue); color:#fff; }
.btn-primary:hover{ background:var(--blue-dark); }
.btn-outline-dark{ border-color:rgba(255,255,255,0.5); color:#fff; }
.btn-outline-dark:hover{ border-color:#fff; background:rgba(255,255,255,0.08); }
.btn-outline-navy{ border-color:var(--navy); color:var(--navy); }
.btn-outline-navy:hover{ background:var(--navy); color:#fff; }
.btn-small{ padding:12px 22px; font-size:12px; border-radius:24px; }

/* ---------- Header ---------- */
header{
  position:sticky; top:0; z-index:1000;
  background:var(--navy);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.nav-inner{
  max-width:var(--maxw); margin:0 auto; padding:14px 32px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.logo-box{
  border:1px solid rgba(255,255,255,0.35); border-radius:3px;
  padding:5px 10px; display:inline-flex; flex-direction:column; align-items:flex-start;
  line-height:1.15;
}
.logo-name{
  font-family:'Poppins',sans-serif; font-weight:800; font-style:italic; font-size:19px;
  color:#fff; letter-spacing:0.5px;
}
.logo-name span{ color:var(--blue-light); }
.logo-sub{ font-size:8px; letter-spacing:1px; color:var(--blue-light); font-weight:600; margin-top:1px;}
.logo-phone{ font-size:7px; color:rgba(255,255,255,0.55); margin-top:1px; letter-spacing:0.3px;}

nav.main-nav{ display:flex; gap:36px; }
nav.main-nav a{
  color:#fff; font-weight:700; font-size:13px; letter-spacing:1px;
  padding:6px 0; position:relative; text-transform:uppercase;
}
nav.main-nav a:hover, nav.main-nav a.active{ color:var(--blue-light); }

.nav-right{ display:flex; align-items:center; gap:22px; }
.lang-switch{ display:flex; gap:6px; }
.lang-switch a{
  background:transparent; color:rgba(255,255,255,0.55);
  font-weight:700; font-size:12px; padding:6px 9px; border-radius:4px; cursor:pointer;
  letter-spacing:0.5px; display:inline-block;
}
.lang-switch a:hover{ color:#fff; }
.lang-switch a.active{ background:var(--blue); color:#fff; }

.hamburger{ display:none; background:none; border:none; cursor:pointer; padding:6px;}
.hamburger span{ display:block; width:24px; height:2px; background:#fff; margin:5px 0; }

/* ---------- Hero ---------- */
.hero{ background:linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%); padding:90px 0 110px; overflow:hidden;}
.hero .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.hero-label{ color:rgba(255,255,255,0.55); font-weight:700; letter-spacing:2px; font-size:13px; margin-bottom:18px; text-transform:uppercase;}
.hero h1{
  font-family:'Poppins', sans-serif; font-weight:800; font-style:italic;
  font-size:clamp(38px, 5.5vw, 64px); line-height:1.05; color:var(--blue-light); margin-bottom:24px;
}
.hero h1 em{ font-style:italic; color:var(--orange); }
.hero-underline{ width:70px; height:3px; background:var(--orange); margin-bottom:22px; }
.hero p.desc{ color:rgba(255,255,255,0.85); font-size:17px; max-width:480px; margin-bottom:34px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }
.hero-media{ position:relative; }

/* ---------- Photo frames (fixed: aspect-ratio, not fixed px height) ---------- */
.frame-photo{
  position:relative; border-radius:4px; overflow:hidden; width:100%;
  background:linear-gradient(135deg,#26365f,#101a33);
  background-size:cover; background-position:center;
}
.frame-photo::before, .frame-photo::after{
  content:''; position:absolute; width:26px; height:26px; z-index:2;
}
.frame-photo.corner-orange::before{ top:-1px; left:-1px; border-top:3px solid var(--orange); border-left:3px solid var(--orange); }
.frame-photo.corner-blue::before{ top:-1px; left:-1px; border-top:3px solid var(--blue-light); border-left:3px solid var(--blue-light); }
.frame-photo.corner-blue::after{ bottom:-1px; right:-1px; border-bottom:3px solid var(--blue-light); border-right:3px solid var(--blue-light); }

.hero-media .frame-photo{ aspect-ratio: 4 / 3; }
.hero-caption{ color:rgba(255,255,255,0.55); font-size:13px; margin-top:14px; }

/* ---------- Section heading patterns ---------- */
.icon-badge{ width:46px; height:46px; margin-bottom:14px; color:var(--blue); }
.icon-badge svg{ width:100%; height:100%; }
.kicker{ color:var(--blue); font-weight:700; letter-spacing:2px; font-size:12px; text-transform:uppercase; margin-bottom:14px; }
.kicker.orange{ color:var(--orange); }
.underline-orange{ width:64px; height:3px; background:var(--orange); margin-bottom:20px; }
.section-title{ font-family:'Inter',sans-serif; font-weight:800; font-size:clamp(30px,4vw,48px); color:var(--text-dark); line-height:1.12; }
.section-title.center{ text-align:center; }
.section-title.blue{ color:var(--blue); }
.wavy{ display:block; width:120px; height:12px; margin:22px auto 0; }
.lead{ color:var(--text-gray); font-size:17px; max-width:600px; }
.lead.center{ margin:20px auto 0; text-align:center; }

/* ---------- Page header banner (used on Projets / Project detail) ---------- */
.page-hero{ background:var(--navy); color:#fff; padding:70px 0 60px; }
.page-hero .kicker{ margin-bottom:10px; }
.page-hero h1{ font-size:clamp(30px,4.5vw,48px); font-weight:800; margin-bottom:14px; }
.page-hero p{ color:rgba(255,255,255,0.75); max-width:600px; font-size:16px; }
.breadcrumb{ font-size:13px; color:rgba(255,255,255,0.5); margin-bottom:18px; }
.breadcrumb a{ color:var(--blue-light); }

/* ---------- Vision ---------- */
.vision{ padding:100px 0; background:#fff; }
.vision .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.vision p{ color:var(--text-gray); margin-bottom:18px; font-size:16px; }
.vision-link{ color:var(--blue); font-weight:700; display:inline-flex; align-items:center; gap:8px; margin-top:8px; border-bottom:2px solid var(--blue); padding-bottom:2px;}
.vision-media .frame-photo{ aspect-ratio: 5 / 4; }

/* ---------- Services intro ---------- */
.services-intro{ padding:100px 0 60px; text-align:center; }
.services-intro .kicker{ text-align:center; }

/* ---------- Service blocks ---------- */
.service-block{ padding:70px 0; border-top:1px solid var(--border-light); }
.service-block .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.service-block.reverse .wrap{ direction:rtl; }
.service-block.reverse .wrap > *{ direction:ltr; }
.service-num{ color:var(--blue); font-weight:700; letter-spacing:2px; font-size:12px; margin-bottom:12px; text-transform:uppercase;}
.service-block h3{ font-size:clamp(28px,3.6vw,42px); font-weight:800; margin-bottom:18px; }
.service-block .desc{ color:var(--text-gray); font-size:16px; max-width:500px; margin-bottom:26px; }
.divider{ height:1px; background:var(--border-light); margin:26px 0; }
.skills-label{ font-weight:700; letter-spacing:1.5px; font-size:12px; color:var(--text-dark); text-transform:uppercase; margin-bottom:16px;}
.skills-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px 40px; }
.skill-item{ display:flex; align-items:flex-start; gap:10px; font-size:15px; color:var(--text-dark); }
.skill-item svg{ flex-shrink:0; width:18px; height:18px; color:var(--blue); margin-top:2px;}
.service-media .frame-photo{ aspect-ratio: 4 / 3; }

.contact-mid{ text-align:center; padding:50px 0; }

/* ---------- Projects (dark, home page teaser) ---------- */
.projects{ background:var(--navy); color:#fff; padding:100px 0; }
.projects-head{ display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:end; margin-bottom:56px; }
.projects-head h2{ font-size:clamp(32px,4.4vw,52px); font-weight:800; line-height:1.1; }
.projects-head .underline-orange{ margin-top:20px; }
.projects-head p{ color:rgba(255,255,255,0.75); font-size:16px; margin-bottom:14px; }
.projects-head a{ color:var(--blue-light); font-weight:700; display:inline-flex; gap:8px; align-items:center;}
.project-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:30px; }
.project-card .frame-photo{ aspect-ratio: 3 / 2; margin-bottom:22px; }
.project-cat{ color:var(--blue-light); font-weight:700; letter-spacing:1.5px; font-size:11px; text-transform:uppercase; margin-bottom:10px;}
.project-card h3{ font-size:22px; font-weight:800; line-height:1.3; margin-bottom:14px; }
.project-card p{ color:rgba(255,255,255,0.65); font-size:14.5px; }
.project-card{ display:block; }
.project-card:hover h3{ text-decoration:underline; }

/* ---------- Projets listing page (light) ---------- */
.projects-page{ background:#fff; padding:80px 0 100px; }
.filter-tabs{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:50px; }
.filter-tabs a{
  padding:10px 20px; border-radius:24px; border:1.5px solid var(--border-light);
  font-weight:700; font-size:12.5px; letter-spacing:0.5px; text-transform:uppercase;
  color:var(--text-gray); transition:.15s;
}
.filter-tabs a:hover{ border-color:var(--blue); color:var(--blue); }
.filter-tabs a.active{ background:var(--navy); border-color:var(--navy); color:#fff; }
.project-grid.light .project-cat{ color:var(--blue); }
.project-grid.light h3{ color:var(--text-dark); }
.project-grid.light p{ color:var(--text-gray); }
.project-grid.light .project-card{
  border:1px solid var(--border-light); border-radius:10px; padding:18px; background:#fff;
}
.project-grid.light .frame-photo{ margin:0 0 20px; border-radius:6px; aspect-ratio: 3 / 2; }
.empty-state{ text-align:center; padding:60px 20px; color:var(--text-gray); }

/* ---------- Project detail page ---------- */
.project-detail{ padding:80px 0 100px; }
.project-detail .wrap{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px; align-items:start; }
.project-detail .frame-photo{ aspect-ratio: 16 / 9; margin-bottom:26px; }
.project-meta{ display:flex; flex-wrap:wrap; gap:28px; margin-bottom:28px; }
.project-meta div{ font-size:14px; }
.project-meta .label{ color:var(--text-gray-light); text-transform:uppercase; letter-spacing:1px; font-size:11px; font-weight:700; margin-bottom:4px; }
.project-meta .value{ font-weight:700; color:var(--text-dark); }
.project-detail h1{ font-size:clamp(28px,3.6vw,42px); font-weight:800; margin-bottom:20px; }
.project-detail .description{ color:var(--text-gray); font-size:16px; }
.project-detail .description p{ margin-bottom:16px; }
.detail-sidebar{
  border:1px solid var(--border-light); border-radius:10px; padding:32px; background:var(--bg-section);
}
.detail-sidebar h4{ font-size:18px; font-weight:800; margin-bottom:12px; }
.detail-sidebar p{ color:var(--text-gray); font-size:14.5px; margin-bottom:20px; }
.back-link{ display:inline-flex; align-items:center; gap:8px; color:var(--blue); font-weight:700; margin-bottom:30px; }

/* ---------- Project "Avant / Après" galleries ---------- */
.project-gallery{ margin-bottom:36px; }
.project-gallery:last-child{ margin-bottom:0; }
.gallery-heading{ font-size:22px; font-weight:800; margin-bottom:18px; color:var(--text-dark); }
.gallery-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:14px; }
.gallery-item{ display:block; aspect-ratio:4/3; border-radius:6px; overflow:hidden; border:1px solid var(--border-light); }
.gallery-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s ease; }
.gallery-item:hover img{ transform:scale(1.06); }

.tardy-lightbox{
  position:fixed; inset:0; z-index:9999; background:rgba(11,18,38,.94);
  display:none; align-items:center; justify-content:center; padding:40px;
}
.tardy-lightbox.open{ display:flex; }
.tardy-lightbox-img{ max-width:90vw; max-height:85vh; border-radius:4px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.tardy-lightbox-close, .tardy-lightbox-prev, .tardy-lightbox-next{
  position:absolute; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); color:#fff;
  cursor:pointer; border-radius:50%; width:44px; height:44px; font-size:24px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.tardy-lightbox-close:hover, .tardy-lightbox-prev:hover, .tardy-lightbox-next:hover{ background:rgba(255,255,255,.22); }
.tardy-lightbox-close{ top:20px; right:20px; }
.tardy-lightbox-prev{ left:20px; top:50%; transform:translateY(-50%); }
.tardy-lightbox-next{ right:20px; top:50%; transform:translateY(-50%); }
@media (max-width:600px){
  .tardy-lightbox{ padding:16px; }
  .tardy-lightbox-prev{ left:6px; } .tardy-lightbox-next{ right:6px; }
}

/* ---------- Team ---------- */
.team{ padding:110px 0; text-align:center; background:#fff; }
.team .icon-badge{ margin:0 auto 14px; }
.team .underline-orange{ margin:0 auto 20px; }
.team .section-title{ margin-bottom:18px; }
.team-grid{ margin-top:70px; display:grid; grid-template-columns:repeat(4, 1fr); gap:36px; text-align:left; }
.team-card .frame-photo{ aspect-ratio: 4 / 5; margin-bottom:22px; }
.team-card h3{ color:var(--blue); font-size:21px; font-weight:800; margin-bottom:6px; }
.team-role{ color:var(--text-gray); font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; }
.team-role .dot{ color:var(--orange); margin:0 6px; }
.team-card p{ color:var(--text-gray); font-size:14.5px; margin-bottom:16px; }
.team-card a{ color:var(--blue); font-weight:700; font-size:14px; border-bottom:1.5px solid var(--blue); padding-bottom:2px;}

/* ---------- Contact ---------- */
.contact{ background:var(--bg-section); padding:100px 0; }
.contact-card{
  max-width:900px; margin:0 auto; background:#fff; border:1px solid var(--border-light);
  border-radius:10px; padding:60px; position:relative;
}
.contact-head{ text-align:center; margin-bottom:44px; }
.contact-head .kicker{ text-align:center; }
.contact-head h2{ font-size:clamp(30px,4vw,44px); font-weight:800; margin-bottom:14px; }
.contact-head p{ color:var(--text-gray); font-size:16px; }
form.tardy-contact-form{ display:grid; grid-template-columns:1fr 1fr; gap:26px 30px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field.full{ grid-column:1 / -1; }
.field label{ font-weight:700; font-size:11px; letter-spacing:1.2px; color:var(--text-dark); text-transform:uppercase; }
.field input, .field select, .field textarea{
  border:1px solid var(--border-light); border-radius:6px; padding:14px 16px; font-size:15px;
  font-family:inherit; color:var(--text-dark); background:#fff; outline:none; transition:border .15s;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--blue); }
.field textarea{ resize:vertical; min-height:110px; }
.form-submit{ grid-column:1 / -1; text-align:center; margin-top:8px; }
.form-note{ text-align:center; margin-top:20px; color:var(--text-gray); font-size:14.5px; display:flex; align-items:center; justify-content:center; gap:8px;}
.form-note svg{ width:16px; height:16px; color:var(--blue); }
.form-alert{ grid-column:1/-1; text-align:center; font-weight:600; padding:14px; border-radius:8px; }
.form-alert.success{ color:var(--blue-dark); background:#eef1fb; }
.form-alert.error{ color:#b3401f; background:#fdeeea; }
.hp-field{ position:absolute; left:-9999px; top:-9999px; }

/* ---------- CTA dark ---------- */
.cta-final{ background:var(--navy); color:#fff; text-align:center; padding:110px 0; }
.cta-final .icon-badge{ margin:0 auto 16px; color:var(--orange); width:34px; height:34px;}
.cta-kicker{ display:flex; align-items:center; justify-content:center; gap:16px; color:var(--orange); font-weight:700; letter-spacing:2px; font-size:12px; text-transform:uppercase; margin-bottom:20px; }
.cta-kicker .line{ width:40px; height:1px; background:rgba(234,163,86,0.5); }
.cta-final h2{ font-family:'Inter',sans-serif; font-weight:800; color:var(--orange); font-size:clamp(34px,5vw,56px); margin-bottom:24px; }
.cta-final p{ color:rgba(255,255,255,0.8); font-size:17px; max-width:560px; margin:0 auto 38px; }
.cta-actions{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-bottom:30px; }
.cta-final .email-link{ color:var(--orange); font-weight:600; display:inline-flex; align-items:center; gap:8px; }
.cta-final .email-link svg{ width:16px; height:16px; }

/* ---------- Footer ---------- */
footer{ background:var(--navy-darker); color:rgba(255,255,255,0.75); padding:70px 0 0; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:50px; }
.footer-logo-box{
  border:1px solid rgba(255,255,255,0.25); border-radius:4px; padding:10px 14px;
  display:inline-flex; flex-direction:column; align-items:flex-start; margin-bottom:20px;
}
.footer-logo-box .logo-name{ font-size:24px; }
.footer-logo-box .logo-sub{ font-size:10px; }
.footer-logo-box .logo-phone{ font-size:9px; }
.footer-tagline{ color:rgba(255,255,255,0.55); font-size:14.5px; max-width:260px; }
footer h4{ color:var(--orange); font-size:13px; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:20px; font-weight:700; }
footer ul li{ margin-bottom:12px; font-size:14.5px; color:rgba(255,255,255,0.65); }
footer ul li a:hover{ color:#fff; }
.social-row{ display:flex; gap:14px; margin-bottom:26px; }
.social-row a{
  width:36px; height:36px; border:1px solid rgba(255,255,255,0.25); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#fff; transition:.2s;
}
.social-row a:hover{ background:var(--blue); border-color:var(--blue); }
.social-row svg{ width:16px; height:16px; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.1); padding:24px 0; display:flex; justify-content:space-between;
  align-items:center; flex-wrap:wrap; gap:12px; font-size:13.5px; color:rgba(255,255,255,0.5);
}
.footer-bottom .links{ display:flex; gap:20px; }
.footer-bottom a:hover{ color:#fff; }

/* ---------- WordPress core alignment / admin-bar helpers ---------- */
.admin-bar header{ top:32px; }
@media screen and (max-width: 782px){
  .admin-bar header{ top:46px; }
}
img.wp-smiley, img.emoji{ display:inline; max-height:1em; }
.screen-reader-text{ position:absolute !important; left:-9999px; }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  nav.main-nav{ display:none; }
  .hamburger{ display:block; }
  .nav-right .btn{ display:none; }
  .hero .wrap, .vision .wrap, .service-block .wrap, .projects-head, .footer-grid, .project-detail .wrap{
    grid-template-columns:1fr;
  }
  .service-block.reverse .wrap{ direction:ltr; }
  .service-block .wrap{ display:flex; flex-direction:column-reverse; }
  .service-block.reverse .wrap{ flex-direction:column-reverse; }
  .project-grid{ grid-template-columns:1fr; }
  .team-grid{ grid-template-columns:1fr 1fr; }
  .contact-card{ padding:36px 24px; }
  form.tardy-contact-form{ grid-template-columns:1fr; }
  .footer-grid{ gap:36px; }
}
@media (max-width: 600px){
  .wrap{ padding:0 20px; }
  .hero{ padding:60px 0 70px; }
  .team-grid{ grid-template-columns:1fr; }
  .cta-actions{ flex-direction:column; align-items:center; }
  .hero-actions{ flex-direction:column; align-items:flex-start; }
}

/* mobile nav drawer */
.mobile-nav{
  display:none; flex-direction:column; background:var(--navy-2); padding:20px 32px 30px;
  border-top:1px solid rgba(255,255,255,0.08);
}
.mobile-nav.open{ display:flex; }
.mobile-nav a{ color:#fff; font-weight:700; padding:12px 0; font-size:14px; letter-spacing:1px; border-bottom:1px solid rgba(255,255,255,0.06); }
.mobile-nav .btn{ margin-top:16px; width:100%; }