:root{
  --bg:#ffffff;
  --card:#f6f8fb;
  --text:#0b1b33;
  --muted:#4a5d78;
  --line:rgba(11,27,51,.14);
  --accent:#0b1b33;
  --max:1120px;
  --radius:18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; background:var(--bg); color:var(--text);}
a{color:inherit;text-decoration:none}
.container{max-width:var(--max); margin:0 auto; padding:0 22px;}
header{position:sticky; top:0; z-index:20; backdrop-filter:saturate(120%) blur(10px); background:rgba(255,255,255,.88); border-bottom:1px solid var(--line);}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0;}
.brand{display:flex; align-items:center; gap:12px; font-weight:650; letter-spacing:.2px;}
.brand img{width:34px; height:34px; border-radius:10px; background:#fff;}
.navlinks{display:flex; gap:18px; flex-wrap:wrap; font-size:14px; color:var(--muted);}
.navlinks a{padding:8px 10px; border-radius:12px; transition:background .15s ease, color .15s ease;}
.navlinks a:hover{background:rgba(11,27,51,.05); color:var(--text);}
.navlinks a.active{background:rgba(11,27,51,.08); color:var(--text);}
.hero{padding:56px 0 30px;}
.kicker{font-size:13px; color:var(--muted); letter-spacing:.14em; text-transform:uppercase; margin:0 0 12px;}
h1{font-size:40px; line-height:1.08; margin:0 0 14px; letter-spacing:-.02em;}
.lead{font-size:18px; line-height:1.55; color:var(--muted); margin:0 0 20px; max-width:78ch;}
.grid3{display:grid; grid-template-columns:repeat(12,1fr); gap:16px; margin:24px 0 10px;}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow: 0 10px 28px rgba(0,0,0,.35);}
.card h3{margin:0 0 8px; font-size:16px;}
.card p{margin:0; color:var(--muted); font-size:14px; line-height:1.5;}
.badges{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px;}
.badge{font-size:12px; color:var(--muted); border:1px solid var(--line); padding:6px 10px; border-radius:999px;}
.section{padding:28px 0;}
.section h2{margin:0 0 10px; font-size:20px; letter-spacing:-.01em;}
.section .sub{margin:0 0 18px; color:var(--muted); line-height:1.6;}
.steps{display:grid; grid-template-columns:repeat(12,1fr); gap:16px;}
.step{grid-column:span 6; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px;}
.step b{display:block; margin-bottom:6px;}
footer{margin-top:36px; border-top:1px solid var(--line); padding:22px 0; color:var(--muted); font-size:13px;}
.small{font-size:12px; color:var(--muted); margin-top:10px;}
/* Réalisations grid */
.tiles{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:18px;}
.tile{position:relative; overflow:hidden; border-radius:var(--radius); border:1px solid var(--line); background:#0b1b33; min-height:180px; display:flex; align-items:flex-end; padding:16px; cursor:default;}
.tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.75); transform:scale(1.02);}
.tile .overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.62));}
.tile .content{position:relative; z-index:2;}
.tile .title{font-weight:650; margin:0 0 6px;}
.tile .cap{margin:0; color:rgba(233,236,241,.82); font-size:13px; line-height:1.35;}
.tile.clickable{cursor:pointer;}
.tile.clickable:hover img{filter:brightness(.68); transform:scale(1.06); transition:all .25s ease;}
/* Modal */
.modal-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.62); display:none; align-items:center; justify-content:center; padding:18px; z-index:50;}
.modal{max-width:860px; width:100%; background:var(--card); border:1px solid var(--line); border-radius:22px; overflow:hidden;}
.modal header{position:relative; backdrop-filter:none; background:transparent; border:0;}
.modal-top{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:18px 18px 10px;}
.modal h3{margin:0; font-size:18px;}
.modal .close{background:transparent; border:1px solid var(--line); color:var(--text); border-radius:12px; padding:8px 10px; cursor:pointer;}
.modal-body{padding:0 18px 18px; color:var(--muted); line-height:1.6; font-size:14px;}
.modal-cols{display:grid; grid-template-columns: 1.2fr .8fr; gap:16px; margin-top:14px;}
.modal-photos{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.modal-photos img{width:100%; height:120px; object-fit:cover; border-radius:14px; border:1px solid var(--line); background:#0b1b33;}
.kv{border:1px solid var(--line); border-radius:18px; padding:14px; background:rgba(255,255,255,.03);}
.kv b{color:var(--text);}
ul{margin:10px 0 0 18px;}
/* Responsive */
@media (max-width: 880px){
  h1{font-size:34px;}
  .tiles{grid-template-columns:repeat(2,1fr);}
  .modal-cols{grid-template-columns:1fr;}
}
@media (max-width: 560px){
  .tiles{grid-template-columns:1fr;}
  .navlinks{gap:6px;}
  .navlinks a{padding:8px 8px;}
  .step{grid-column:span 12;}
}

/* Empilage des cadres sur mobile */
@media (max-width: 560px){

  .grid3,
  .grid2{
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  .grid3 .card,
  .grid2 .card{
    grid-column: auto !important;
  }

}

/* Index hero logo */
.hero-logo-wrap{display:flex; align-items:center; justify-content:center; padding-top:10px; padding-bottom:14px;}
.hero-logo{width:120px; height:auto; max-width:42vw;}
.center{text-align:center;}
.hero .lead.center{margin-left:auto; margin-right:auto;}


/* Large centered logo on home */
.hero.home-hero{overflow:visible;padding:90px 0 34px; min-height:62vh; display:flex; align-items:center;}
.hero.home-hero .container{width:100%;}
.hero-logo-wrap{display:flex; align-items:center; justify-content:center; padding-top:10px; padding-bottom:14px;}
.hero-logo{width:240px; max-width:60vw; height:auto;}
.center{text-align:center;}
.hero .lead.center{margin-left:auto; margin-right:auto;}

/* Progressive "drawing" effect for inline SVG logo */
.logo-draw svg{width:240px; max-width:60vw; height:auto;}
.logo-draw path, .logo-draw line, .logo-draw polyline, .logo-draw circle, .logo-draw rect{
  stroke: var(--text);
  stroke-width: 2;
  fill: transparent;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: draw 1.7s ease forwards;
}
.logo-draw svg{animation: fadeIn 0.9s ease forwards;}
@keyframes draw{to{stroke-dashoffset:0;}}
@keyframes fadeIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

/* Plain text sections (no card) */
.plain p{margin:0 0 10px; color:var(--muted); line-height:1.65; font-size:15px;}
.plain strong{color:var(--text);}

/* Counter */
.counter-wrap{padding:6px 0 36px; text-align:center;}
.counter-number{font-size:44px; letter-spacing:-.02em; margin:0; color:var(--text); font-weight:700;}
.counter-note{margin:6px 0 0; color:var(--muted); font-size:12px;}


/* Fix logo clipping */
.hero-logo-wrap{overflow:visible;}
.logo-draw svg{display:block; width:300px; max-width:70vw; height:auto; overflow:visible;}
/* Make vignette text readable on photos */
.tile .meta, .tile .meta *{color:#ffffff !important;}


/* === VISUEL PREMIUM (Style A renforcé) === */
:root{
  --navy: #0b1b33;
}

body.page-index{
  background: url("bg-index.jpg") center/cover fixed no-repeat;
}
body.page-strategie{
  background: url("bg-strategie.jpg") center/cover fixed no-repeat;
}

/* Voile général pour lisibilité (image plus visible qu'avant) */
body.page-index::before,
body.page-strategie::before{
  content:"";
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(255,255,255,.62) 0%,
    rgba(255,255,255,.52) 28%,
    rgba(255,255,255,.74) 100%);
  pointer-events:none;
  z-index: 0;
}

/* S'assurer que le contenu passe au-dessus */
main, header, footer{ position: relative; z-index: 1; }

/* Hero quasi plein écran */
.hero.home-hero{
  min-height: 88vh;
  display:flex;
  align-items:center;
  padding: 110px 0 52px;
  background: transparent !important;
}
.hero.page-hero{
  padding: 110px 0 42px;
  background: transparent !important;
}

/* Logo transparent */
.hero-logo--transparent{
  width: 520px;
  max-width: 74vw;
  height: auto;
  display:block;
  margin: 0 auto 18px;
  filter: drop-shadow(0 6px 18px rgba(11,27,51,.18));
}

/* Cartes premium */
.card{
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(11,27,51,.10);
  backdrop-filter: blur(6px);
}

/* Barre sous-titre */
h2::after{
  content:"";
  display:block;
  width:56px; height:3px;
  margin-top:10px;
  background: rgba(11,27,51,.85);
  border-radius: 999px;
}


/* === BACKGROUNDS PAR PAGE (mise à jour) === */
body.page-index{ background: url("bg-index.jpg") center/cover fixed no-repeat; }
body.page-strategie{ background: url("bg-strategie.jpg") center/cover fixed no-repeat; }
body.page-contact{ background: url("bg-contact.jpg") center/cover fixed no-repeat; }
body.page-realisations{ background: url("bg-realisations.jpg") center/cover fixed no-repeat; }

/* Voile léger (photo plus visible) */
body.page-index::before,
body.page-strategie::before,
body.page-contact::before,
body.page-realisations::before{
  content:"";
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(255,255,255,.60) 0%,
    rgba(255,255,255,.50) 30%,
    rgba(255,255,255,.76) 100%);
  pointer-events:none;
  z-index: 0;
}
main, header, footer{ position: relative; z-index: 1; }


/* === BACKGROUNDS PER PAGE (patch) === */
body.page-contact{
  background: url("bg-contact.jpg") center/cover fixed no-repeat;
}
body.page-realisations{
  background: url("bg-realisations.jpg") center/cover fixed no-repeat;
}

/* Full height background + avoid white band */
html, body{ min-height: 100%; }
body.page-contact::before,
body.page-realisations::before{
  content:"";
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(255,255,255,.62) 0%,
    rgba(255,255,255,.52) 28%,
    rgba(255,255,255,.74) 100%);
  pointer-events:none;
  z-index: 0;
}
main, header, footer{ position: relative; z-index: 1; }
/* === CONTACT FULL HEIGHT FIX === */
body.page-contact{
  min-height: 100vh;
}
body.page-contact main{
  min-height: calc(100vh - 120px);
}
/* Page Contact – descendre le carré */
.page-contact .grid3{
  margin-top: 10vh;
}
/* Zoom discret sur les vignettes Réalisations */
.tile{
  background-size: cover;
  background-position: center;
  transition: transform 0.6s ease, box-shadow 0.6s ease;
}

.tile:hover{
  transform: scale(1.03);
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}