/* ==========================================================
   PCL sarl — feuille de style principale
   Palette inspirée du chantier réel : terre latérite du Katanga,
   gilets de sécurité verts, casques blancs, ciel et béton.
   Motif signature : le triangle du logo PCL, décliné en coins
   coupés et séparateurs diagonaux.
   ========================================================== */

:root{
  --noir-plan: #17181A;        /* charbon / plan d'architecte */
  --noir-plan-2: #221F1C;
  --beton: #EDEBE5;            /* fond clair, béton coulé */
  --beton-fonce: #DAD5C9;
  --latérite: #B54A22;         /* terre rouge du Katanga */
  --latérite-fonce: #8E3A19;
  --vert-securite: #4C9A2A;    /* gilet de chantier PCL */
  --vert-securite-fonce: #397420;
  --acier: #45566B;            /* ciel / structure métal */
  --blanc: #FFFFFF;
  --gris-texte: #55574F;

  --police-affiche: "Barlow Condensed", "Arial Narrow", sans-serif;
  --police-texte: "Work Sans", "Segoe UI", Arial, sans-serif;
  --police-donnee: "IBM Plex Mono", "Courier New", monospace;

  --coupe: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
  --coupe-inv: polygon(28px 0, 100% 0, 100% 100%, 0 100%, 0 28px);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--police-texte);
  color: var(--noir-plan);
  background: var(--beton);
  line-height: 1.6;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family: var(--police-affiche);
  text-transform: uppercase;
  letter-spacing: .02em;
  margin: 0 0 .5em;
  line-height: 1.05;
  font-weight: 700;
}
.container{
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}
.eyebrow{
  font-family: var(--police-donnee);
  text-transform: uppercase;
  font-size: .78rem;
  letter-spacing: .18em;
  color: var(--latérite);
  display:flex;
  align-items:center;
  gap:.6em;
  margin-bottom: .8em;
}
.eyebrow::before{
  content:"";
  width: 14px; height:14px;
  background: var(--latérite);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-family: var(--police-affiche);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight:700;
  font-size:1.02rem;
  padding: .85em 1.6em;
  border: none;
  cursor:pointer;
  clip-path: var(--coupe);
}
.btn-primaire{ background: var(--latérite); color: var(--blanc); }
.btn-primaire:hover{ background: var(--latérite-fonce); }
.btn-secondaire{ background: var(--vert-securite); color: var(--blanc); }
.btn-secondaire:hover{ background: var(--vert-securite-fonce); }
.btn-outline{ background: transparent; color: var(--beton); border: 2px solid var(--beton); clip-path:none; }
.btn-outline:hover{ background: var(--beton); color: var(--noir-plan); }

/* ---------- Bandeau supérieur (coordonnées) ---------- */
.topbar{
  background: var(--noir-plan);
  color: #C7C4BA;
  font-family: var(--police-donnee);
  font-size: .8rem;
}
.topbar .container{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:8px; padding-bottom:8px; flex-wrap:wrap; gap:6px;
}
.topbar a{ color:#C7C4BA; }
.topbar a:hover{ color: var(--vert-securite); }
.topbar-links{ display:flex; gap:18px; flex-wrap:wrap; }

/* ---------- Navigation ---------- */
.navbar{
  background: var(--beton);
  border-bottom: 3px solid var(--noir-plan);
  position: sticky; top:0; z-index: 50;
}
.navbar .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:12px; padding-bottom:12px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:46px; width:auto; }
.brand-text{ font-family: var(--police-affiche); line-height:1; }
.brand-text strong{ display:block; font-size:1.15rem; letter-spacing:.03em; }
.brand-text span{ display:block; font-size:.68rem; letter-spacing:.15em; color:var(--gris-texte); font-family:var(--police-donnee); text-transform:uppercase; }
.nav-links{ display:flex; gap:28px; align-items:center; }
.nav-links a{
  font-family: var(--police-affiche);
  text-transform:uppercase; font-weight:600; letter-spacing:.04em;
  font-size:1rem; padding: 6px 2px; border-bottom:3px solid transparent;
}
.nav-links a:hover, .nav-links a.actif{ border-color: var(--latérite); }
.nav-cta{
  font-family: var(--police-affiche) !important;
  text-transform:uppercase; font-weight:700 !important; letter-spacing:.04em;
  background: var(--latérite); color: var(--blanc) !important;
  padding: 10px 22px !important; border-bottom:none !important;
  border-radius: 2px;
}
.nav-cta:hover{ background: var(--latérite-fonce); border-bottom:none !important; }
.nav-cta.actif{ background: var(--noir-plan); }
.nav-toggle{ display:none; }

@media (max-width: 860px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    background: var(--beton);
    flex-direction:column; align-items:flex-start;
    padding: 16px 24px 24px; gap:14px;
    border-bottom: 3px solid var(--noir-plan);
    display:none;
  }
  .nav-links.ouvert{ display:flex; }
  .nav-toggle{
    display:block; background:none; border:2px solid var(--noir-plan);
    padding:8px 12px; font-size:1.3rem; cursor:pointer;
  }
}

/* ---------- Hero (composition scindée : panneau texte + photo) ---------- */
.hero-split{
  display:grid;
  grid-template-columns: minmax(360px, 46%) 1fr;
  min-height: 640px;
}
.hero-split-texte{
  background: var(--noir-plan);
  display:flex; align-items:center;
  position:relative;
  padding: 60px 0;
}
.hero-split-texte::after{
  content:"";
  position:absolute; top:0; right:-1px; bottom:0; width:60px;
  background: var(--noir-plan);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  display:none;
}
.hero-split-contenu{ padding: 0 40px 0 max(24px, calc((100vw - 1180px)/2 + 24px)); color: var(--blanc); max-width:560px; }
.hero-split-contenu h1{
  font-size: clamp(2.3rem, 4.4vw, 3.4rem);
  margin-bottom:.4em;
}
.hero-split-contenu h1 em{ font-style:normal; color: var(--vert-securite); }
.hero-split-contenu p{ font-size:1.08rem; color:#D6D3C9; margin-bottom:1.8em; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.btn-outline-sombre{
  display:inline-flex; align-items:center; gap:.5em;
  font-family: var(--police-affiche); text-transform:uppercase; letter-spacing:.05em; font-weight:700;
  padding: .85em 1.6em; border: 2px solid #57544C; color: var(--beton); background:transparent;
}
.btn-outline-sombre:hover{ border-color: var(--vert-securite); color: var(--vert-securite); }

.hero-split-image{ position:relative; overflow:hidden; clip-path: polygon(6% 0, 100% 0, 100% 100%, 0 100%); }
.hero-split-image img{ width:100%; height:100%; object-fit:cover; min-height:360px; }

@media (max-width: 900px){
  .hero-split{ grid-template-columns: 1fr; }
  .hero-split-texte{ padding: 56px 0 40px; }
  .hero-split-contenu{ padding: 0 24px; max-width:none; }
  .hero-split-image{ clip-path:none; min-height:280px; }
  .hero-split-image img{ min-height:280px; }
}

.stat-bar{
  background: var(--noir-plan-2);
  border-top: 1px solid #3A3733;
}
.stat-bar .container{
  display:grid; grid-template-columns: repeat(4,1fr);
  gap: 0;
}
.stat-item{
  padding: 26px 20px;
  border-right: 1px solid #3A3733;
  color:var(--blanc);
}
.stat-item:last-child{ border-right:none; }
.stat-item .valeur{
  font-family: var(--police-donnee);
  font-size: 2.1rem; color: var(--vert-securite); display:block;
}
.stat-item .libelle{
  font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:#BEBBB2;
}
@media (max-width:760px){
  .stat-bar .container{ grid-template-columns: repeat(2,1fr); }
  .stat-item:nth-child(2){ border-right:none; }
}

/* ---------- Sections génériques ---------- */
.section{ padding: 88px 0; }
.section-tete{ max-width: 700px; margin-bottom: 48px; }
.section-tete h2{ font-size: clamp(2rem, 4vw, 2.9rem); }
.section-sombre{ background: var(--noir-plan); color: var(--beton); }
.section-sombre > .container > h2,
.section-sombre > .container > .section-tete h2,
.section-sombre > .container > .deux-colonnes h2,
.section-sombre > .container > .deux-colonnes h3{ color: var(--blanc); }
.section-sombre .eyebrow{ color: var(--vert-securite); }
.section-sombre .eyebrow::before{ background: var(--vert-securite); }
.section-terre{ background: var(--beton-fonce); }
/* Les cartes gardent toujours un fond clair : leur texte reste sombre,
   même à l'intérieur d'une section-sombre (corrige un bug de lisibilité). */
.section-sombre .carte-service,
.section-sombre .carte-realisation,
.section-sombre .carte-actu,
.section-sombre .carte-partenaire{ color: var(--noir-plan); }
.section-sombre .carte-service h3,
.section-sombre .carte-realisation h3,
.section-sombre .carte-actu h3,
.section-sombre .carte-service p{ color: var(--noir-plan); }
.section-sombre .carte-realisation .meta{ color: var(--gris-texte); }

/* ---------- Cartes services ---------- */
.grille-services{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
}
@media (max-width:900px){ .grille-services{ grid-template-columns: repeat(2,1fr);} }
@media (max-width:600px){ .grille-services{ grid-template-columns: 1fr;} }

.carte-service{
  background: var(--blanc);
  clip-path: var(--coupe);
  padding: 34px 30px;
  border-top: 4px solid var(--latérite);
  transition: transform .2s ease;
}
.carte-service:hover{ transform: translateY(-6px); }
.carte-service .icone{
  width:52px; height:52px; margin-bottom:18px;
  background: var(--noir-plan);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  display:flex; align-items:center; justify-content:center;
}
.carte-service .icone svg{ width:24px; height:24px; margin-top:8px; stroke:var(--vert-securite); }
.carte-service h3{ font-size:1.35rem; margin-bottom:.4em; }
.carte-service p{ color: var(--gris-texte); font-size:.96rem; }

/* ---------- Réalisations ---------- */
.filtres{
  display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 36px;
}
.filtre{
  font-family: var(--police-donnee); font-size:.82rem; text-transform:uppercase;
  letter-spacing:.08em; padding: 8px 16px; border:1px solid var(--noir-plan);
  background:transparent; cursor:pointer;
}
.filtre:hover, .filtre.actif{ background: var(--noir-plan); color:var(--blanc); }

.grille-realisations{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
}
@media (max-width:940px){ .grille-realisations{ grid-template-columns: repeat(2,1fr);} }
@media (max-width:620px){ .grille-realisations{ grid-template-columns: 1fr;} }

.carte-realisation{
  background: var(--blanc);
  display:flex; flex-direction:column;
  clip-path: var(--coupe);
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.carte-realisation .photo{
  aspect-ratio: 4/3; overflow:hidden; background:var(--beton-fonce);
}
.carte-realisation .photo img{ width:100%; height:100%; object-fit:cover; transition: transform .35s ease; }
.carte-realisation:hover .photo img{ transform: scale(1.06); }
.carte-realisation .corps{ padding: 20px 22px 24px; flex:1; display:flex; flex-direction:column; }
.badge{
  display:inline-block; font-family:var(--police-donnee); font-size:.7rem;
  text-transform:uppercase; letter-spacing:.08em; padding:4px 10px;
  background: var(--vert-securite); color:var(--blanc); align-self:flex-start; margin-bottom:10px;
}
.badge.encours{ background: var(--latérite); }
.carte-realisation h3{ font-size:1.15rem; margin-bottom:.3em; }
.carte-realisation .meta{ font-size:.82rem; color:var(--gris-texte); font-family:var(--police-donnee); margin-top:auto; padding-top:12px; }

/* ---------- Partenaires ---------- */
.grille-partenaires{
  display:grid; grid-template-columns: repeat(4,1fr); gap:18px;
}
@media (max-width:760px){ .grille-partenaires{ grid-template-columns: repeat(2,1fr);} }
.carte-partenaire{
  background: var(--blanc); border:1px solid var(--beton-fonce);
  padding: 22px 18px; text-align:center; font-family:var(--police-affiche);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height:110px;
}
.carte-partenaire img{ max-height:48px; width:auto; max-width:100%; object-fit:contain; }
.nom-partenaire{
  text-transform:uppercase; letter-spacing:.03em; font-weight:600; font-size:.9rem; color: var(--gris-texte);
}
.nom-partenaire-seul{ font-size:1.02rem; color: var(--noir-plan); }

/* ---------- Actualités ---------- */
.grille-actualites{ display:grid; grid-template-columns: repeat(3,1fr); gap:26px; }
@media (max-width:900px){ .grille-actualites{ grid-template-columns: 1fr; } }
.carte-actu{ background:var(--blanc); clip-path: var(--coupe); }
.carte-actu img{ aspect-ratio:16/10; object-fit:cover; width:100%; }
.carte-actu .corps{ padding:20px 22px; }
.carte-actu .date{ font-family:var(--police-donnee); font-size:.76rem; color:var(--latérite); text-transform:uppercase; letter-spacing:.08em; }

/* ---------- Formulaire ---------- */
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
@media (max-width:700px){ .form-grid{ grid-template-columns:1fr; } }
.champ{ display:flex; flex-direction:column; gap:6px; margin-bottom:18px; }
.champ label{ font-family:var(--police-donnee); font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--gris-texte); }
.champ input, .champ textarea, .champ select{
  padding: 13px 14px; border:1px solid #C7C2B4; background:var(--blanc);
  font-family: var(--police-texte); font-size:1rem; color:var(--noir-plan);
}
.champ input:focus, .champ textarea:focus, .champ select:focus{
  outline: 2px solid var(--vert-securite); outline-offset:1px; border-color:var(--vert-securite);
}
.alerte{ padding:14px 18px; margin-bottom:22px; font-family:var(--police-donnee); font-size:.9rem; }
.alerte-succes{ background:#E5F1DE; color:var(--vert-securite-fonce); border-left:4px solid var(--vert-securite); }
.alerte-erreur{ background:#F7E4DB; color:var(--latérite-fonce); border-left:4px solid var(--latérite); }

/* ---------- Footer (style lettre à en-tête, comme leurs documents) ---------- */
footer{ background: var(--noir-plan); color:#C7C4BA; }
.footer-haut{ padding: 64px 0 40px; }
.footer-grille{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width:860px){ .footer-grille{ grid-template-columns: 1fr 1fr; } }
@media (max-width:520px){ .footer-grille{ grid-template-columns: 1fr; } }
.footer-grille h4{ color:var(--blanc); font-size:1rem; margin-bottom:1em; }
.footer-grille ul li{ margin-bottom:.6em; font-size:.92rem; }
.footer-grille a:hover{ color: var(--vert-securite); }
.footer-brand{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.footer-brand img{ height:40px; filter: invert(1) brightness(2); }
.footer-legal{
  border-top: 1px solid #3A3733;
  font-family: var(--police-donnee);
  font-size:.74rem;
  padding: 16px 0;
  color:#8B887F;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
}
.footer-credit{
  border-top: 1px solid #3A3733;
  font-family: var(--police-donnee);
  font-size:.72rem;
  padding: 12px 0 20px;
  color:#6E6B62;
  text-align:center;
}
.footer-credit a{ color:#8B887F; text-decoration:underline; }
.footer-credit a:hover{ color: var(--vert-securite); }

/* ---------- Bannière page interne ---------- */
.banniere-page{
  background: var(--noir-plan);
  color: var(--blanc);
  padding: 76px 0 46px;
  clip-path: var(--coupe);
}
.banniere-page h1{ font-size: clamp(2.1rem, 4.5vw, 3.2rem); }
.fil-ariane{ font-family: var(--police-donnee); font-size:.82rem; color:#B7B4AB; }
.fil-ariane a:hover{ color:var(--vert-securite); }

/* ---------- Détail réalisation / actualité ---------- */
.galerie-detail{ display:grid; grid-template-columns: repeat(3,1fr); gap:14px; margin: 30px 0; }
@media (max-width:700px){ .galerie-detail{ grid-template-columns: repeat(2,1fr);} }
.galerie-detail img{ aspect-ratio:4/3; object-fit:cover; }

.fiche-technique{ background:var(--blanc); border:1px solid var(--beton-fonce); padding:24px 26px; }
.fiche-technique dt{ font-family:var(--police-donnee); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--gris-texte); margin-top:14px; }
.fiche-technique dt:first-child{ margin-top:0; }
.fiche-technique dd{ margin:2px 0 0; font-weight:600; }

/* ---------- Divers ---------- */
.deux-colonnes{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items:center; }
.deux-colonnes.deux-colonnes-inverse{ grid-template-columns: .85fr 1.15fr; }
@media (max-width:860px){ .deux-colonnes{ grid-template-columns:1fr; } }
.image-decoupee{ clip-path: var(--coupe); }
.vide{ text-align:center; padding:60px 20px; color:var(--gris-texte); }