/* ============================================================
   TCR BAT 94 — styles.css
   Palette : anthracite #1F2225 / béton #EDECE8 / orange chantier #F25C05
   ============================================================ */

:root{
  --anthracite:#101830;          /* marine profond */
  --anthracite-2:#182242;
  --beton:#EFF1F5;               /* béton froid */
  --blanc:#FFFFFF;
  --orange:#2450F0;              /* bleu TCRBAT (accent) */
  --orange-2:#2E6BFF;
  --joint:#7C86A0;
  --hachure:repeating-linear-gradient(-45deg,var(--orange) 0 10px,var(--anthracite) 10px 20px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

body{
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--beton);
  color:var(--anthracite);
  line-height:1.55;
}

h1,h2,h3,.display{
  font-family:'Archivo Black','Archivo',system-ui,sans-serif;
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:1.05;
}

a{color:inherit}
img{display:block;max-width:100%}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}

/* ---------- Bande hachurée signature ---------- */
.tape{height:8px;background:var(--hachure)}

/* ---------- Header ---------- */
header{
  background:var(--anthracite);
  color:var(--blanc);
  position:sticky;top:0;z-index:50;
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;max-width:1100px;margin:0 auto;flex-wrap:wrap;gap:10px}
.logo{font-family:'Archivo Black',sans-serif;font-size:1.1rem;text-transform:uppercase;text-decoration:none;display:flex;align-items:center;gap:.5rem;flex-shrink:0;white-space:nowrap}
.logo img{height:38px;width:auto;display:block;flex-shrink:0}
.logo span{color:var(--orange-2)}
@media(max-width:480px){
  .nav{justify-content:center;text-align:center}
  .logo{font-size:1rem}
  .logo img{height:32px}
  .nav ul{gap:14px;flex-wrap:wrap;justify-content:center}
}
.nav ul{display:flex;gap:26px;list-style:none}
.nav ul a{text-decoration:none;font-weight:600;font-size:.95rem;text-transform:uppercase;letter-spacing:.06em;opacity:.85}
.nav ul a:hover,.nav ul a:focus-visible{opacity:1;color:var(--orange)}
.nav ul a.actif{color:var(--orange);opacity:1}
a:focus-visible,button:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

/* ---------- Hero ---------- */
.hero{background:var(--anthracite);color:var(--blanc);padding:72px 0 88px}
.hero .sur{color:var(--orange);font-weight:700;text-transform:uppercase;letter-spacing:.18em;font-size:.85rem;margin-bottom:14px}
.hero h1{font-size:clamp(2.2rem,6vw,4.2rem);max-width:16ch}
.hero p{max-width:52ch;margin-top:18px;font-size:1.08rem;color:#C9CBCE}
.hero .actions{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}

.btn{
  display:inline-block;padding:14px 26px;text-decoration:none;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;font-size:.92rem;border:2px solid var(--orange);
  transition:background .15s,color .15s;
}
.btn.plein{background:var(--orange);color:var(--blanc)}
.btn.plein:hover{background:#1a3ad0}
.btn.vide{color:var(--orange)}
.btn.vide:hover{background:var(--orange);color:var(--blanc)}

/* ---------- Sections ---------- */
section{padding:64px 0}
.titre-section{display:flex;align-items:center;gap:16px;margin-bottom:36px}
.titre-section h2{font-size:clamp(1.5rem,3.4vw,2.2rem)}
.titre-section::after{content:'';flex:1;height:8px;background:var(--hachure);opacity:.9}

/* ---------- Services ---------- */
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2px;background:var(--anthracite)}
.service{background:var(--blanc);padding:28px 24px}
.service h3{font-size:1.05rem;margin-bottom:10px}
.service h3::before{content:'';display:block;width:34px;height:5px;background:var(--orange);margin-bottom:12px}
.service p{font-size:.95rem;color:#4A4E53}

/* ---------- Teaser galerie (accueil) ---------- */
.teaser{background:var(--anthracite-2);color:var(--blanc)}
.teaser-grille{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.teaser-grille figure{position:relative;margin:0}
.teaser-grille img{width:100%;height:320px;object-fit:cover}
.teaser .cta{margin-top:30px;text-align:center}
@media(max-width:640px){.teaser-grille{grid-template-columns:1fr}.teaser-grille img{height:240px}}

/* ---------- Badges étape ---------- */
.badge{
  position:absolute;top:12px;left:12px;padding:5px 12px;font-weight:800;font-size:.75rem;
  text-transform:uppercase;letter-spacing:.1em;color:var(--blanc);font-family:'Archivo Black',sans-serif;
}
.badge.avant{background:var(--anthracite)}
.badge.pendant{background:var(--joint)}
.badge.apres{background:var(--orange)}

/* ---------- Galerie : projets ---------- */
.projet{margin-bottom:72px}
.projet-tete{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.projet-tete h2{font-size:clamp(1.3rem,3vw,1.9rem)}
.projet-tete .num{color:var(--orange);font-family:'Archivo Black',sans-serif;font-size:.95rem}
.projet-desc{color:#4A4E53;max-width:70ch;margin-bottom:22px}

/* Comparateur avant/après */
.compare{position:relative;overflow:hidden;user-select:none;touch-action:none;background:var(--anthracite);cursor:ew-resize;max-width:820px}
.compare img{width:100%;height:auto;pointer-events:none}
.compare .calque{position:absolute;inset:0;overflow:hidden}
.compare .calque img{position:absolute;inset:0;height:100%;width:100%;object-fit:cover}
.compare .poignee{
  position:absolute;top:0;bottom:0;width:4px;background:var(--orange);transform:translateX(-2px);
}
.compare .poignee::after{
  content:'◂ ▸';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background:var(--orange);color:var(--blanc);font-size:.8rem;font-weight:700;
  padding:8px 10px;border-radius:999px;white-space:nowrap;
}
.compare .etiquette{position:absolute;top:12px;padding:5px 12px;font-family:'Archivo Black',sans-serif;font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--blanc)}
.compare .etiquette.g{left:12px;background:var(--anthracite)}
.compare .etiquette.d{right:12px;background:var(--orange)}
.compare-aide{font-size:.85rem;color:var(--joint);margin-top:8px}

/* Grille de photos */
.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:26px}
.photos figure{position:relative;margin:0;background:var(--anthracite)}
.photos img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:opacity .15s;cursor:zoom-in}
.photos img:hover{opacity:.85}
.photos figcaption{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(31,34,37,.85));color:var(--blanc);font-size:.8rem;padding:26px 10px 8px;pointer-events:none}

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed;inset:0;background:rgba(20,22,24,.94);display:none;
  align-items:center;justify-content:center;z-index:100;padding:24px;
}
.lightbox.ouverte{display:flex}
.lightbox img{max-width:100%;max-height:88vh;object-fit:contain}
.lightbox .fermer{
  position:absolute;top:16px;right:16px;background:var(--orange);color:var(--blanc);
  border:none;font-size:1.1rem;font-weight:800;padding:10px 16px;cursor:pointer;font-family:'Archivo Black',sans-serif;
}

/* ---------- Contact / footer ---------- */
.contact{background:var(--anthracite);color:var(--blanc)}
.contact-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:30px}
.contact h3{color:var(--orange);font-size:1rem;margin-bottom:8px}
.contact a{color:var(--blanc)}
footer{background:#17191B;color:#9EA1A5;font-size:.85rem;padding:20px 0;text-align:center}