:root{
  --bg1:#ffffff;
  --bg2:#f7fafc;
  --ink:#0b1520;
  --muted:rgba(11,21,32,.64);
  --line:rgba(11,21,32,.10);

  /* Accent “montagne” */
  --accent:#16a34a;    /* vert moderne */
  --accent2:#0f7a37;   /* vert plus profond */
  --glow:rgba(22,163,74,.12);
}

*{box-sizing:border-box}

html,body{height:100%}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:#E6E6E6;
}

a{color:inherit;text-decoration:none}

/* -----------------------------
   Header
------------------------------ */


.wrap{
  max-width:1100px;
  margin:0 auto;
  padding: 0 22px 80px;
  position:relative;
  z-index:1;
}


/* -----------------------------
   Instagram Follow pill
------------------------------ */
.followInsta{
  margin-top: 10px;
  display:flex;
  justify-content:center;
}

.followInstaLink{
  display:inline-flex;
  align-items:center;
  gap: clamp(10px, 1.4vw, 16px);

  padding: clamp(12px, 1.4vw, 18px) clamp(16px, 2vw, 26px);
  border-radius: 999px;

  font-weight: 900;
  font-size: clamp(14px, 1.4vw, 18px);

  background: rgba(255,255,255);
  border: 1px solid rgba(15,23,42,.10);
  backdrop-filter: blur(12px);

  color: var(--ink);
  box-shadow: 0 20px 70px rgba(11,21,32,.10);
  transition: transform .18s ease, filter .18s ease, opacity .18s ease;
}

.followInstaIcon{
  width: clamp(22px, 2.2vw, 34px);
  height: clamp(22px, 2.2vw, 34px);
  object-fit: contain;
}

.followInstaLink:hover{
  transform: translateY(-2px);
  filter: brightness(1.03);
}

/* -----------------------------
   Hero
------------------------------ */
.hero{ padding: 34px 0 26px; }

.hero h1{
  margin:0;
  font-size: 54px;
  line-height:1.02;
  letter-spacing: -1px;
}

.hero h1 span{
  display:block;
  margin-top:12px;
  color: rgba(11,21,32,.52);
  font-weight:650;
}

.hero p{
  margin: 18px 0 0;
  max-width: 740px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--muted);
}

.liveBtnHero{
  margin-top: 22px;
  display:inline-flex;
  height: 56px;
  padding: 0 26px;
  border-radius: 22px;
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  color:white;
  font-weight:900;
  letter-spacing:.3px;
  align-items:center;
  justify-content:center;
  transition: transform .18s ease, filter .18s ease;
  box-shadow: 0 30px 90px rgba(14,94,168,.22);
}

.liveBtnHero:hover{ transform: translateY(-1px); filter: brightness(1.03); }

/* -----------------------------
   Live Map
------------------------------ */
.liveMapSection{
  max-width: 1100px;
  margin: 0 auto;
  padding: 22px 18px 40px;
}

.mapHeader{
  text-align:center;
  margin-bottom: 16px;
}

.mapTitle{
  font-size: clamp(20px, 2.4vw, 34px);
  margin: 0 0 8px;
  font-weight: 900;
  letter-spacing: -0.6px;
}

.intro_pct{ text-align:left; }

.mapCard{
  position: relative;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.75);
  overflow:hidden;
  box-shadow: 0 25px 80px rgba(11,21,32,.10);
}

.pctMap{
  width: 100%;
  height: clamp(320px, 52vh, 560px);
}

/* legend */
.mapLegend{
  position:absolute;
  left: 14px;
  bottom: 14px;
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(15, 23, 42, .10);
  backdrop-filter: blur(10px);
  font-weight: 800;
  font-size: 12px;
  color: var(--ink);
}

.legendDot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(34,139,102,.18);
}

/* Leaflet live marker */
.liveMarker{ position: relative; }

.liveMarker .pulse{
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(34,139,102,.18);
  border: 2px solid white;
  position: relative;
}

.liveMarker .pulse::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius: 999px;
  border: 2px solid rgba(34,139,102,.32);
  animation: pulse 1.6s infinite;
}

@keyframes pulse{
  0%{ transform: scale(.6); opacity:.9; }
  100%{ transform: scale(1.35); opacity:0; }
}

/* Make PCT line green */
.leaflet-interactive{
  stroke: rgba(34, 139, 102, 0.95);
}

/* Error message on map */
.mapError{
  position:absolute;
  inset:auto 14px 14px 14px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.10);
  font-weight: 800;
  color: var(--ink);
  box-shadow: 0 18px 55px rgba(11,21,32,.10);
  backdrop-filter: blur(10px);
  text-align:center;
}

.mapError small{
  font-weight:700;
  color: var(--muted);
}

/* -----------------------------
   “Portfolio” sections
------------------------------ */
.portfolio{
  margin-top: 34px;
  display:flex;
  flex-direction:column;
  gap: 22px;
}

.portfolio-row{
  display:grid;
  gap: 18px;
  align-items:center;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}

.portfolio-row:last-child{ border-bottom: 1px solid var(--line); }

@media(min-width:900px){
  .portfolio-row{ grid-template-columns: 1fr 1fr; }
  .portfolio-row.reverse .rowText{ order:2; }
  .portfolio-row.reverse .rowArt{ order:1; }
}


.kicker{
  font-size: 12px;
  letter-spacing: 2.4px;
  font-weight: 900;
  color: rgba(11,21,32,.35);
}

.rowText h2{
  margin: 10px 0 0;
  font-size: 30px;
  letter-spacing: -.5px;
}

.rowText p{
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75;
  max-width: 520px;
}

.meta{
  margin-top: 12px;
  font-size: 13px;
  color: rgba(11,21,32,.48);
}

.rowArt{
  display:flex;
  justify-content:flex-end;
}

.imgSection{
  max-width: 100%;
  height: auto;
  border-radius: 28px;
  border: 1px solid rgba(11,21,32,.09);
  background: rgba(255,255,255,.7);
  box-shadow: 0 24px 70px rgba(11,21,32,.10);
}

/* -----------------------------
   Footer
------------------------------ */
.footer{
  padding: clamp(20px, 2.5vw, 34px) 18px;
  background: rgba(34, 139, 102, 0.55);
  border-top: 1px solid rgba(15,23,42,.10);
  backdrop-filter: blur(12px);
}

.footerInner{
  width: min(1150px, 100%);
  margin: 0 auto;
  padding: 0 22px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;

  font-size: clamp(12px, 1.1vw, 14px);
  color: var(--muted);
}

@media (max-width: 640px){
  .footerInner{
    flex-direction: column;
    text-align:center;
    justify-content:center;
    gap: 10px;
  }
}

.footerLinks a{ font-weight:850; }
.footerLinks a:hover{ color: rgba(11,21,32,.85); }


/* =============================
   Responsive (mobile-first)
   ============================= */

/* Better tap + no overflow */
img, svg, video{ max-width:100%; height:auto; }
.pctMap, #pctMap, #map{ width:100%; }
*{ -webkit-tap-highlight-color: transparent; }
body{ overflow-x:hidden; }

/* Global type scaling */
.hero h1{
  font-size: clamp(30px, 8vw, 54px);
}
.hero p{
  font-size: clamp(14px, 4.2vw, 17px);
}


/* Hero spacing on small screens */
@media (max-width: 760px){
  .wrap{ padding: 0 14px 60px; }
  .hero{ padding: 22px 0 18px; }
  .liveBtnHero{
    width: 100%;
    height: 52px;
    border-radius: 18px;
  }
}

/* Map: keep legend readable */
@media (max-width: 760px){
  .liveMapSection{ padding: 16px 14px 26px; }
  .mapCard{ border-radius: 18px; }
  .pctMap{ height: min(62vh, 520px); }
  .mapLegend{
    left: 10px; bottom: 10px;
    padding: 8px 10px;
    font-size: 11px;
  }
}

/* Portfolio sections: stack */
@media (max-width: 900px){
  .rowArt{ justify-content: flex-start; }
}

@media (max-width: 760px){
  .portfolio{ gap: 18px; margin-top: 26px; }
  .portfolio-row{
  display:grid;
  gap: 18px;
  align-items:center;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  }

  .rowText h2{
    font-size: clamp(20px, 5.8vw, 28px);
    line-height: 1.15;
  }
  .rowText p{
    font-size: 14px;
    line-height: 1.7;
  }
  .meta{ font-size: 12px; }
  .imgSection{
    border-radius: 18px;
  }
}

/* Footer stack */
@media (max-width: 760px){
  .footer{ padding: 18px 12px; }
  .footerInner{ padding: 0 12px; }
}






/* reset */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ✅ header vert */
.site-header{
  background: rgba(34, 139, 102, 0.55);
}

/* ✅ plus haut en PC */
.header-row{
  height: 140px;
}

/* ✅ Titre en noir + très gros PC */
.header-title{
  color: #000;           /* ✅ noir */
  font-weight: 900;
  font-size: 3.2rem;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ✅ vignette blanche */
.logo-box{
  background: #fff;
  border-radius: 18px;
  height: 110px;
  width: 110px;

  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* ✅ logo gauche TRÈS gros en PC */
.logo-left{
  height: 92px;
  width: auto;
  display: block;
}

/* ✅ logo insta TRÈS gros en PC */
.logo-right{
  height: 90px;
  width: auto;
  display: block;
}

/* Tablette */
@media (max-width: 992px){
  .header-row{ height: 105px; }

  .header-title{ font-size: 2.1rem; }

  .logo-box{
    height: 78px;
    width: 78px;
    border-radius: 16px;
  }

  .logo-left{ height: 62px; }
  .logo-right{ height: 60px; }
}

/* Mobile */
@media (max-width: 576px){
  .header-row{ height: 68px; }

  .header-title{ font-size: 1.0rem; }

  .logo-box{
    height: 44px;
    width: 44px;
    border-radius: 12px;
  }

  .logo-left{ height: 34px; }
  .logo-right{ height: 32px; }
}