/* ==========================================================
   GROUPE RESO-CONNECT — Feuille de style principale
   Police : Barlow Semi Condensed
   Couleurs : vert #3D8023 · or #B68A2E
   ========================================================== */

:root{
  --green:#3D8023; --green-dk:#2C5D19; --dark:#1D3D11; --dark-2:#16300C;
  --gold:#B68A2E; --gold-dk:#96701F;
  --ink:#1A2117; --text:#5A6455; --muted:#8E978A;
  --grey:#F4F6F4; --line:#E4E8E1; --white:#fff;
  --font:'Fira Sans','Segoe UI',system-ui,sans-serif;
  --pad:clamp(1rem,4vw,3.5rem);
  --maxw:1300px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --sh:0 10px 30px rgba(26,33,23,.09);
  --sh-lg:0 20px 50px rgba(26,33,23,.14);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:80px; }
body{
  margin:0; background:#fff; color:var(--text);
  font-family:var(--font); font-size:1.0125rem; font-weight:400; line-height:1.72;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
::selection{ background:var(--green); color:#fff; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.skip{ position:absolute; left:-9999px; top:0; z-index:999; background:var(--gold); color:#fff; padding:.8rem 1.25rem; }
.skip:focus{ left:0; }
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

h1,h2,h3,h4{ font-family:var(--font); color:var(--ink); margin:0; line-height:1.14; font-weight:700; }
.t-xl{ font-size:clamp(1.95rem,1.2rem + 3.1vw,3.4rem); text-transform:uppercase; letter-spacing:.012em; }
.t-lg{ font-size:clamp(1.5rem,1.1rem + 1.75vw,2.3rem); text-transform:uppercase; letter-spacing:.015em; }
.t-md{ font-size:1.22rem; text-transform:uppercase; letter-spacing:.02em; }
.t-sm{ font-size:1.1rem; }
p{ margin:0 0 1rem; }
p:last-child{ margin-bottom:0; }

.rule{ width:112px; height:4px; background:var(--gold); border-radius:2px; margin:1.35rem 0 1.6rem; }
.rule--c{ margin-inline:auto; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--font); font-size:.845rem; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; text-decoration:none; padding:.95rem 2.05rem;
  border:2px solid var(--gold); background:var(--gold); color:#fff; cursor:pointer; min-height:50px;
  transition:background .28s var(--ease), border-color .28s var(--ease), color .28s var(--ease);
}
.btn:hover{ background:var(--gold-dk); border-color:var(--gold-dk); }
.btn svg{ width:17px; height:17px; flex:none; }
.btn--green{ background:var(--green); border-color:var(--green); }
.btn--green:hover{ background:var(--green-dk); border-color:var(--green-dk); }
.btn--ghost{ background:transparent; border-color:rgba(255,255,255,.55); color:#fff; }
.btn--ghost:hover{ background:#fff; border-color:#fff; color:var(--dark); }
.btn--line{ background:transparent; border-color:var(--line); color:var(--ink); }
.btn--line:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }
.btn--block{ width:100%; }

.rv{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.rv.in{ opacity:1; transform:none; }

/* ==========================================================
   TOPBAR
   ========================================================== */
.top{ background:var(--dark); color:#BCCBB2; font-size:.855rem; }
.top__in{ max-width:var(--maxw); margin-inline:auto; padding:.5rem var(--pad); display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; }
.top__l{ display:flex; align-items:center; gap:1.75rem; flex-wrap:wrap; }
.top a{ display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; transition:color .25s; }
.top a:hover{ color:#fff; }
.top svg{ width:15px; height:15px; flex:none; }
.top__soc{ display:flex; gap:1rem; }
.top__soc a svg{ width:17px; height:17px; }

/* ==========================================================
   EN-TÊTE
   ========================================================== */
.head{ background:#fff; }
.head__in{ max-width:var(--maxw); margin-inline:auto; padding:1.15rem var(--pad); display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.logo{ display:inline-flex; align-items:center; text-decoration:none; }
.logo__img{ width:auto; height:clamp(46px,4.6vw,62px); display:block; }
.foot__logo .logo__img{ height:clamp(44px,4vw,56px); }

.head__r{ text-align:right; }
.head__r .lbl{ display:inline-flex; align-items:center; gap:.5rem; color:var(--gold); font-weight:600; font-size:.895rem; }
.head__r .lbl svg{ width:19px; height:19px; }
.head__r .tel{ display:block; font-size:1.6rem; font-weight:700; color:var(--ink); text-decoration:none; letter-spacing:.005em; margin-top:.1rem; }
.head__r .tel:hover{ color:var(--green); }

/* ==========================================================
   BARRE DE NAVIGATION
   ========================================================== */
.navbar{ position:sticky; top:0; z-index:80; background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); transition:box-shadow .3s var(--ease); }
.navbar.stuck{ box-shadow:0 5px 20px rgba(26,33,23,.09); }
.navbar__in{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); display:flex; align-items:stretch; gap:1.25rem; }
.menu{ display:flex; align-items:stretch; gap:.35rem; }
.menu a{
  display:inline-flex; align-items:center; gap:.5rem; padding:1.05rem .8rem;
  font-size:.925rem; font-weight:500; letter-spacing:.01em; text-decoration:none; color:var(--ink);
  border-top:3px solid transparent; margin-top:-1px; white-space:nowrap;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.menu a svg{ width:17px; height:17px; color:var(--muted); transition:color .25s var(--ease); }
.menu a:hover,.menu a[aria-current="page"]{ color:var(--gold-dk); border-top-color:var(--gold); }
.menu a:hover svg,.menu a[aria-current="page"] svg{ color:var(--gold); }

.navbar__r{ margin-left:auto; display:flex; align-items:center; gap:1rem; padding-left:1.25rem; border-left:1px solid var(--line); }
.navbar__r .btn{ padding:.7rem 1.35rem; min-height:42px; font-size:.82rem; }
.navbar__tel{ display:none; }

.burger{ display:none; margin-left:auto; width:46px; height:46px; align-self:center; background:var(--grey); border:1px solid var(--line); cursor:pointer; align-items:center; justify-content:center; }
.burger span{ display:block; width:20px; height:2px; background:var(--ink); position:relative; }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:20px; height:2px; background:var(--ink); transition:transform .35s var(--ease), top .25s var(--ease); }
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }
.burger[aria-expanded="true"] span{ background:transparent; }
.burger[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.burger[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

.panelbg{
  position:fixed; inset:0; z-index:94; background:rgba(12,26,7,.55);
  opacity:0; pointer-events:none; transition:opacity .35s var(--ease);
}
.panelbg.open{ opacity:1; pointer-events:auto; }

.panel{
  position:fixed; left:0; top:0; bottom:0; width:min(340px,86vw); z-index:96;
  background:#fff; padding:0; overflow-y:auto; display:flex; flex-direction:column;
  transform:translateX(-100%); transition:transform .4s var(--ease);
  box-shadow:0 0 40px rgba(12,26,7,.28);
}
.panel.open{ transform:none; }

.panel__hd{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.25rem; background:var(--grey); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:2;
}
.panel__hd b{ font-size:1.18rem; font-weight:600; color:var(--ink); }
.panel__x{ width:42px; height:42px; background:none; border:0; cursor:pointer; color:var(--muted); display:grid; place-items:center; }
.panel__x:hover{ color:var(--ink); }
.panel__x svg{ width:22px; height:22px; }

.mnav{ list-style:none; margin:0; padding:0; }
.mnav > li{ border-bottom:1px solid var(--line); }
.mnav__row{ display:flex; align-items:stretch; }
.mnav__a{
  flex:1; display:flex; align-items:center; gap:.9rem; padding:1.05rem 1.25rem;
  text-decoration:none; color:var(--ink); font-size:1.045rem; font-weight:600;
  transition:color .25s var(--ease);
}
.mnav__a svg{ width:21px; height:21px; flex:none; color:var(--muted); transition:color .25s var(--ease); }
.mnav__a:hover,.mnav__a[aria-current="page"]{ color:var(--gold-dk); }
.mnav__a:hover svg,.mnav__a[aria-current="page"] svg{ color:var(--gold); }
.mnav__t{
  width:54px; flex:none; background:none; border:0; border-left:1px solid var(--line);
  cursor:pointer; color:var(--muted); display:grid; place-items:center;
}
.mnav__t svg{ width:18px; height:18px; transition:transform .3s var(--ease); }
.mnav__t[aria-expanded="true"]{ color:var(--gold); }
.mnav__t[aria-expanded="true"] svg{ transform:rotate(180deg); }

.msubmenu{ list-style:none; margin:0; padding:.35rem 0 .9rem; background:#FAFBF9; display:none; }
.msubmenu.open{ display:block; }
.msubmenu a{ display:block; padding:.5rem 1.25rem .5rem 3.4rem; text-decoration:none; color:var(--text); font-size:.965rem; }
.msubmenu a:hover{ color:var(--green); }

.panel__cta{ padding:1.25rem; border-bottom:1px solid var(--line); }
.panel__cta .btn{ width:100%; }
.panel__f{ margin-top:auto; padding:1.35rem 1.25rem 1.75rem; font-size:.945rem; line-height:1.9; background:var(--dark); color:#BCCBB2; }
.panel__f strong{ display:block; color:#fff; text-transform:uppercase; margin-bottom:.35rem; }
.panel__f a{ text-decoration:none; }
.panel__f a:hover{ color:var(--gold); }

/* logo compact affiché dans la barre sur mobile */
.navbar__brand{ display:none; align-items:center; gap:.6rem; text-decoration:none; }
.navbar__brand .logo__img{ height:38px; }


/* ==========================================================
   SLIDER DIAGONAL (accueil)
   ========================================================== */
.hero{ position:relative; background:var(--dark); overflow:hidden; min-height:clamp(460px,68vh,620px); display:flex; align-items:center; }
.hero__bg{ position:absolute; inset:0; }
.hero__bg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1s var(--ease), transform 9s linear; transform:scale(1.05); }
.hero__bg img.on{ opacity:1; transform:scale(1.13); }
.hero__bg::after{ content:""; position:absolute; inset:0; background:rgba(29,61,17,.3); }
.hero__mask{ position:absolute; inset:0; background:var(--dark); clip-path:polygon(0 0, 53% 0, 63% 100%, 0 100%); }
.hero__in{ position:relative; z-index:3; width:100%; max-width:var(--maxw); margin-inline:auto; padding:clamp(3rem,7vw,5rem) var(--pad); }
.hslide{ display:none; max-width:44%; }
.hslide.on{ display:block; }
.hslide h1{ color:#fff; }
.hslide p{ color:rgba(255,255,255,.82); font-size:1.05rem; max-width:34rem; margin-bottom:2rem; }
.hslide.on > *{ animation:up .8s var(--ease) both; }
.hslide.on > *:nth-child(1){ animation-delay:.15s; }
.hslide.on > *:nth-child(2){ animation-delay:.28s; }
.hslide.on > *:nth-child(3){ animation-delay:.41s; }
.hslide.on > *:nth-child(4){ animation-delay:.54s; }
@keyframes up{ from{ opacity:0; transform:translateY(26px);} to{ opacity:1; transform:none;} }

.hero__nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:5; background:none; border:0; cursor:pointer; color:rgba(255,255,255,.65); padding:.5rem; transition:color .25s; }
.hero__nav:hover{ color:#fff; }
.hero__nav svg{ width:30px; height:30px; }
.hero__nav--p{ left:clamp(.35rem,1.4vw,1.5rem); }
.hero__nav--n{ right:clamp(.35rem,1.4vw,1.5rem); }
.hero__dots{ position:absolute; right:clamp(1.25rem,4vw,3.75rem); bottom:1.75rem; z-index:5; display:flex; gap:.6rem; }
.hero__dots button{ width:34px; height:5px; border:0; padding:0; cursor:pointer; background:rgba(255,255,255,.32); }
.hero__dots button[aria-current="true"]{ background:#fff; }

/* ==========================================================
   BANNIÈRE DE PAGE INTÉRIEURE
   ========================================================== */
.phead{
  position:relative; color:#fff; overflow:hidden;
  background:var(--dark) url("../img/header.jpg") center/cover no-repeat;
  min-height:clamp(170px,24vw,350px);
  display:flex; align-items:center;
}
.phead::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(12,26,7,.72) 0%,rgba(12,26,7,.30) 45%,rgba(12,26,7,.15) 70%,rgba(12,26,7,.45) 100%);
}
.phead__in{
  position:relative; z-index:2; width:100%;
  max-width:var(--maxw); margin-inline:auto; padding:clamp(2rem,5vw,3.25rem) var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:1.25rem; flex-wrap:wrap;
}
.phead h1{
  color:#fff; font-size:clamp(1.85rem,1.2rem + 3vw,3.4rem);
  text-transform:uppercase; letter-spacing:.01em; text-shadow:0 2px 14px rgba(0,0,0,.4);
}
.crumb{
  font-size:.85rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#fff; display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  text-shadow:0 2px 10px rgba(0,0,0,.45);
}
.crumb a{ text-decoration:none; }
.crumb a:hover{ color:var(--gold); }
.crumb svg{ width:11px; height:11px; color:var(--gold); }
.crumb span{ opacity:.9; }

/* ==========================================================
   BANDE ATOUTS
   ========================================================== */
.perks{ background:var(--grey); padding-block:clamp(2.75rem,5vw,3.75rem); }
.perks__g{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:2rem; text-align:center; }
.perk__i{ width:74px; height:74px; margin:0 auto 1.1rem; border-radius:50%; background:var(--gold); color:#fff; display:grid; place-items:center; transition:background .3s var(--ease), transform .3s var(--ease); }
.perk:hover .perk__i{ background:var(--green); transform:translateY(-4px); }
.perk__i svg{ width:32px; height:32px; }
.perk h3{ font-size:1.16rem; margin-bottom:.45rem; }
.perk p{ font-size:.96rem; }

/* ==========================================================
   SECTIONS GÉNÉRIQUES
   ========================================================== */
.sec{ padding-block:clamp(3.5rem,7vw,6rem); }
.sec--grey{ background:var(--grey); }
.sec--dark{ background:var(--dark); color:#C4D3BA; }
.sec--dark h2,.sec--dark h3,.sec--dark h4{ color:#fff; }
.hd{ text-align:center; max-width:46rem; margin:0 auto clamp(2.25rem,4vw,3.25rem); }
.hd p{ font-size:1.045rem; }
.hd--l{ text-align:left; margin-inline:0; }
.hd--l .rule{ margin-inline:0; }

/* ---------- bienvenue + onglets ---------- */
.tabs{ display:flex; gap:clamp(1rem,3vw,3rem); border-bottom:1px solid var(--line); margin-bottom:2.5rem; flex-wrap:wrap; }
.tabs button{
  background:none; border:0; cursor:pointer; padding:.5rem 0 1rem;
  font-family:var(--font); font-size:1.15rem; font-weight:600; color:var(--muted);
  border-bottom:3px solid transparent; margin-bottom:-1px; transition:color .25s, border-color .25s;
}
.tabs button[aria-selected="true"]{ color:var(--ink); border-bottom-color:var(--gold); }
.tabs button:hover{ color:var(--ink); }

.welcome{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,340px); gap:clamp(2rem,4vw,3.25rem); align-items:start; }
.tabpanel{ display:none; }
.tabpanel.on{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(1.5rem,3vw,2.5rem); align-items:start; }
.tabpanel img{ width:100%; aspect-ratio:3/4; object-fit:cover; }
.tabpanel .more{ display:inline-flex; align-items:center; gap:.65rem; margin-top:1.25rem; font-weight:600; font-size:.87rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink); text-decoration:none; border-left:3px solid var(--gold); padding-left:.85rem; }
.tabpanel .more:hover{ color:var(--green); }

.quotebox{ align-self:start; }
.quote{
  position:relative; background:var(--grey); padding:2.5rem 2.9rem 2.75rem; text-align:center;
  overflow:hidden;
}
.qslide{ display:none; }
.qslide.on{ display:block; animation:qfade .55s var(--ease) both; }
@keyframes qfade{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

.quote__av{
  width:138px; height:138px; margin:0 auto 1.25rem; border-radius:50%;
  overflow:hidden; background:#fff; border:4px solid #fff; box-shadow:0 8px 22px rgba(26,33,23,.13);
}
.quote__av img{ width:100%; height:100%; object-fit:cover; }
.quote h3{ font-size:1.3rem; }
.quote .role{ font-weight:600; color:var(--gold-dk); margin:.15rem 0 1rem; }
.quote p{ font-size:.985rem; color:var(--text); }
.quote .btn{ margin-top:1.5rem; }

.quote__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:36px; height:36px; background:none; border:0; cursor:pointer; color:#B3BEAB;
  display:grid; place-items:center; transition:color .25s var(--ease), transform .25s var(--ease);
}
.quote__nav:hover{ color:var(--gold); }
.quote__nav svg{ width:22px; height:22px; }
.quote__nav--p{ left:.15rem; }
.quote__nav--n{ right:.15rem; }
.quote__nav--p:hover{ transform:translateY(-50%) translateX(-3px); }
.quote__nav--n:hover{ transform:translateY(-50%) translateX(3px); }

.quote__dots{ display:flex; justify-content:center; gap:.65rem; margin-top:1.2rem; }
.quote__dots button{
  width:10px; height:10px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:#CBD3C5; transition:background .28s var(--ease), transform .28s var(--ease);
}
.quote__dots button:hover{ background:#A9B5A1; }
.quote__dots button[aria-current="true"]{ background:var(--gold); transform:scale(1.3); }

/* ---------- services ---------- */
.svcs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr)); gap:1.5rem; }
.svc{ background:#fff; border:1px solid var(--line); padding:2rem 1.75rem; transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.svc:hover{ transform:translateY(-6px); box-shadow:var(--sh); border-color:transparent; }
.svc__i{ width:64px; height:64px; border-radius:50%; background:var(--grey); color:var(--green); display:grid; place-items:center; margin-bottom:1.25rem; transition:background .35s var(--ease), color .35s var(--ease); }
.svc:hover .svc__i{ background:var(--gold); color:#fff; }
.svc__i svg{ width:30px; height:30px; }
.svc h3{ font-size:1.13rem; margin-bottom:.5rem; }
.svc p{ font-size:.96rem; }

/* ---------- réalisations ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-bottom:2.5rem; }
.filters button{
  font-family:var(--font); font-size:.85rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  padding:.6rem 1.25rem; border:1px solid var(--line); background:#fff; color:var(--ink); cursor:pointer;
  transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.filters button:hover{ border-color:var(--gold); color:var(--gold-dk); }
.filters button[aria-pressed="true"]{ background:var(--gold); border-color:var(--gold); color:#fff; }

.jobs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:1.75rem; }
.job{ background:#fff; border:1px solid var(--line); display:flex; flex-direction:column; transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.job:hover{ transform:translateY(-6px); box-shadow:var(--sh); }
.job.hide{ display:none; }
.job__i{ aspect-ratio:16/10; overflow:hidden; background:var(--grey); }
.job__i img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.job:hover .job__i img{ transform:scale(1.06); }
.job__b{ padding:1.65rem; display:flex; flex-direction:column; flex:1; }
.job__tag{ font-size:.815rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--gold-dk); margin-bottom:.5rem; }
.job dl{ margin:1.15rem 0 0; font-size:.925rem; border-top:1px solid var(--line); padding-top:.85rem; }
.job dl > div{ display:flex; justify-content:space-between; gap:1rem; padding-block:.28rem; }
.job dt{ color:var(--muted); }
.job dd{ margin:0; text-align:right; color:var(--ink); font-weight:600; }
.job__k{ margin-top:auto; padding-top:1.25rem; }
.job__k b{ display:block; font-size:1.75rem; font-weight:700; color:var(--green); line-height:1; }
.job__k span{ display:block; font-size:.815rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-top:.3rem; }

/* ---------- solaire ---------- */
.solar__top{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(2rem,4vw,3.25rem); align-items:center; margin-bottom:clamp(2.25rem,4vw,3.25rem); }
.pdf{ background:var(--dark); color:#C4D3BA; padding:clamp(1.75rem,3vw,2.35rem); }
.pdf__h{ display:flex; align-items:center; gap:1rem; margin-bottom:1rem; }
.pdf__h > span{ width:58px; height:58px; flex:none; background:var(--gold); color:#fff; display:grid; place-items:center; }
.pdf__h svg{ width:28px; height:28px; }
.pdf__h b{ display:block; font-size:.82rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--gold); margin-top:.15rem; }
.pdf__btns{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.6rem; }
.pdf__btns .btn{ padding:.8rem 1.5rem; min-height:46px; font-size:.95rem; }

/* ---------- gamme en zigzag ---------- */
.zz{ display:grid; gap:clamp(3rem,6vw,5.5rem); }
.zz__row{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
.zz__row:nth-child(even) .zz__txt{ order:2; }
.zz__row:nth-child(even) .zz__media{ order:1; }

.zz__hd{ display:flex; gap:1.25rem; align-items:flex-start; margin-bottom:1.4rem; }
.zz__ic{
  width:66px; height:66px; flex:none; border-radius:50%;
  background:var(--gold); color:#fff; display:grid; place-items:center;
  transition:background .45s var(--ease), transform .55s var(--ease);
}
.zz__row:hover .zz__ic{ background:var(--green); transform:rotate(-8deg) scale(1.06); }
.zz__ic svg{ width:31px; height:31px; }
.zz__hd h3{ font-size:clamp(1.3rem,1.05rem + .85vw,1.75rem); margin-bottom:.3rem; }
.zz__sub{ font-weight:600; font-size:1.05rem; color:var(--green-dk); margin:0; line-height:1.35; }
.zz__txt > p{ font-size:1.015rem; }
.zz__txt .btn{ margin-top:1.5rem; }

.zz__media{ position:relative; overflow:hidden; background:var(--grey); }
.zz__media img{
  width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  transition:transform 1.1s var(--ease);
}
.zz__row:hover .zz__media img{ transform:scale(1.055); }
.zz__num{
  position:absolute; top:0; left:0; z-index:2;
  width:52px; height:52px; display:grid; place-items:center;
  background:var(--gold); color:#fff; font-size:1.02rem; font-weight:700;
  transition:background .45s var(--ease);
}
.zz__row:hover .zz__num{ background:var(--green); }

/* arrivée depuis les deux bords */
.rv--fl{ transform:translate(-34px,16px); }
.rv--fr{ transform:translate(34px,16px); }
.rv--fl.in,.rv--fr.in{ transform:none; }

/* ---------- étapes ---------- */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:1.75rem; }
.step{ background:#fff; border:1px solid var(--line); padding:2rem 1.75rem; transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.step:hover{ transform:translateY(-6px); box-shadow:var(--sh); }
.step__n{ width:58px; height:58px; border-radius:50%; background:var(--grey); color:var(--green); display:grid; place-items:center; font-size:1.2rem; font-weight:700; margin-bottom:1.15rem; transition:background .35s var(--ease), color .35s var(--ease); }
.step:hover .step__n{ background:var(--gold); color:#fff; }
.step h3{ font-size:1.13rem; margin-bottom:.5rem; }
.step p{ font-size:.96rem; }

/* ---------- filiales ---------- */
.fillbl{ display:flex; align-items:center; gap:1.15rem; font-size:.9rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-bottom:1.5rem; }
.fillbl::after{ content:""; flex:1; height:1px; background:rgba(255,255,255,.18); }
.subs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:1.35rem; }
.sub{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); padding:2rem 1.5rem; text-align:center; transition:background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease); }
.sub:hover{ background:rgba(255,255,255,.09); border-color:var(--gold); transform:translateY(-5px); }
.sub__i{ width:76px; height:76px; margin:0 auto 1.1rem; display:grid; place-items:center; color:#8FBF6A; transition:color .35s var(--ease); }
.sub:hover .sub__i{ color:var(--gold); }
.sub__i svg{ width:44px; height:44px; }
.sub h3{ font-size:1.1rem; }
.sub .cc{ display:block; font-size:.815rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-top:.2rem; }
.sub p{ font-size:.96rem; margin-top:.7rem; }
.partners{ margin-top:1.35rem; display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; justify-content:space-between; border:1px solid rgba(255,255,255,.14); padding:1.5rem; }
.partners b{ color:#fff; font-size:1.05rem; text-transform:uppercase; letter-spacing:.02em; }
.partners__n{ display:flex; flex-wrap:wrap; gap:.6rem; }
.partners__n span{ border:1px solid rgba(255,255,255,.22); padding:.42rem 1.05rem; font-size:.9rem; font-weight:600; letter-spacing:.06em; color:#fff; }

/* ---------- bande de chiffres ---------- */
.figband{
  position:relative; overflow:hidden;
  background:var(--dark); color:#C4D3BA;
  padding-block:clamp(3rem,5.5vw,4.5rem);
}
.figband::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(70% 130% at 12% 0%, rgba(182,138,46,.22), transparent 58%),
    radial-gradient(60% 120% at 92% 100%, rgba(127,179,95,.16), transparent 60%);
}
.figband::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.35;
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.045) 0 1px,transparent 1px 13px);
}
.figband > .wrap{ position:relative; z-index:2; }
.figband__t{
  text-align:center; margin:0 0 clamp(1.75rem,3vw,2.5rem);
  font-size:.85rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--gold);
}

.figs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); }
.fig{
  text-align:center; padding:.5rem clamp(.75rem,2vw,1.5rem);
  border-right:1px solid rgba(255,255,255,.13);
}
.fig:last-child{ border-right:0; }
.fig__i{
  width:52px; height:52px; margin:0 auto 1rem; border-radius:50%;
  border:1px solid rgba(182,138,46,.55); color:var(--gold);
  display:grid; place-items:center;
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.fig:hover .fig__i{ background:var(--gold); border-color:var(--gold); color:#fff; }
.fig__i svg{ width:24px; height:24px; }
.fig b{
  display:block; font-size:clamp(2.4rem,1.8rem + 2vw,3.4rem); font-weight:700;
  line-height:1; color:#fff; letter-spacing:-.01em;
}
.fig__r{ display:block; width:32px; height:3px; background:var(--gold); border-radius:2px; margin:.85rem auto; }
.fig__l{
  display:block; font-size:.82rem; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:#A9BC9D;
}

/* ---------- deux colonnes texte/image ---------- */
.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,4vw,3.5rem); align-items:center; }
.split img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.ticks{ list-style:none; margin:1.5rem 0 0; padding:0; display:grid; gap:.8rem; }
.ticks li{ display:flex; gap:.85rem; align-items:flex-start; }
.ticks svg{ width:19px; height:19px; flex:none; color:var(--green); margin-top:.3rem; }

/* ---------- carte réseau ---------- */
.map{ background:#fff; border:1px solid var(--line); }
.map__hd{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 1.25rem; border-bottom:1px solid var(--line); }
.map__ttl{ font-weight:600; color:var(--ink); font-size:.985rem; text-transform:uppercase; letter-spacing:.03em; }
.map__live{ display:inline-flex; align-items:center; gap:.5rem; font-size:.8rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--green); }
.map__live i{ width:8px; height:8px; border-radius:50%; background:var(--green); animation:blip 2.4s ease-in-out infinite; }
@keyframes blip{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }
.map svg{ width:100%; height:auto; display:block; background:linear-gradient(170deg,#FBFCFA,#F3F7EF); }
.mgrid{ stroke:#E8EDE2; stroke-width:.7; }
.mtick{ font-family:var(--font); font-size:8.5px; font-weight:600; fill:#AFBAA6; }
.mlnk{ fill:none; stroke:#CFDDC4; stroke-width:1.1; }
.mpulse{ fill:none; stroke:var(--gold); stroke-width:1.8; stroke-linecap:round; stroke-dasharray:10 480; animation:travel 5s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes travel{ from{ stroke-dashoffset:490; } to{ stroke-dashoffset:0; } }
.mnode{ fill:#fff; stroke:var(--green); stroke-width:2; }
.mnode--hq{ stroke:var(--gold); stroke-width:2.6; }
.mhalo{ fill:none; stroke:var(--gold); stroke-width:1.2; opacity:0; animation:halo 3.6s ease-out infinite; }
@keyframes halo{ 0%{ r:6; opacity:.7; } 75%{ r:24; opacity:0; } 100%{ opacity:0; } }
.mlabel{ font-family:var(--font); font-size:10px; font-weight:700; fill:var(--ink); }
.msub{ font-family:var(--font); font-size:8px; font-weight:500; fill:#93A088; }
.map__legend{ display:flex; gap:1.5rem; flex-wrap:wrap; padding:.85rem 1.25rem; border-top:1px solid var(--line); font-size:.85rem; color:var(--muted); }
.map__legend span{ display:inline-flex; align-items:center; gap:.5rem; }
.map__legend i{ width:10px; height:10px; border-radius:50%; border:2px solid var(--green); background:#fff; }
.map__legend i.gold{ border-color:var(--gold); }
.map__legend i.line{ width:18px; height:2px; border-radius:2px; border:0; background:var(--gold); }

.locs{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.locs li{ display:flex; align-items:baseline; gap:1rem; padding:.85rem 0; border-bottom:1px solid var(--line); }
.locs b{ font-weight:600; color:var(--ink); font-size:.985rem; }
.locs em{ font-style:normal; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--gold-dk); min-width:8.5rem; font-size:.79rem; }
.locs span{ margin-left:auto; color:var(--muted); font-size:.875rem; }

/* ==========================================================
   PAGE CONTACT
   ========================================================== */
.contact{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2rem,5vw,4rem); align-items:start; }

.cinfo{ display:grid; gap:2.25rem; }
.cinfo__row{ display:flex; gap:1.5rem; border-left:2px solid var(--line); padding-left:1.5rem; }
.cinfo__ic{ width:44px; flex:none; color:var(--muted); }
.cinfo__ic svg{ width:38px; height:38px; }
.cinfo .k{ display:block; font-size:.95rem; color:var(--muted); line-height:1.4; }
.cinfo .v{ display:block; font-size:1.28rem; font-weight:700; color:var(--ink); text-decoration:none; line-height:1.35; }
a.v:hover{ color:var(--green); }

.csoc__t{ font-size:.985rem; color:var(--muted); margin-bottom:.9rem; }
.csoc__l{ display:flex; gap:.7rem; flex-wrap:wrap; }
.csoc__l a{ width:52px; height:52px; border:1px solid var(--line); display:grid; place-items:center; color:var(--ink); transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease); }
.csoc__l a:hover{ background:var(--gold); border-color:var(--gold); color:#fff; }
.csoc__l svg{ width:21px; height:21px; }

.cform{ background:var(--grey); padding:clamp(1.75rem,4vw,2.75rem); }
.cform h2{ margin-bottom:1.75rem; }
.field{ margin-bottom:1.35rem; }
.field label{ display:block; font-size:.95rem; font-weight:500; color:var(--ink); margin-bottom:.45rem; }
.field .req{ color:var(--gold-dk); }
.field input,.field textarea,.field select{
  width:100%; font-family:var(--font); font-size:.985rem; color:var(--ink);
  padding:.8rem 1rem; border:1px solid var(--line); background:#fff;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field textarea{ min-height:150px; resize:vertical; }
.field input:focus,.field textarea:focus,.field select:focus{ outline:0; border-color:var(--gold); box-shadow:0 0 0 3px rgba(182,138,46,.16); }
.check{ display:flex; gap:.75rem; align-items:flex-start; margin-bottom:1.5rem; font-size:.945rem; }
.check input{ width:18px; height:18px; margin-top:.35rem; flex:none; accent-color:var(--green); }
.formnote{ margin-top:1rem; font-size:.895rem; color:var(--muted); }
.formok{ display:none; margin-top:1rem; padding:.9rem 1.15rem; background:#E7F1DF; border-left:4px solid var(--green); color:var(--green-dk); font-weight:600; }
.formok.show{ display:block; }
.formerr{ display:none; margin-top:1rem; padding:.9rem 1.15rem; background:#FBEDE9; border-left:4px solid #B4442A; color:#8E2F19; font-weight:600; }
.formerr.show{ display:block; }

/* carte pleine largeur, collée au pied de page */
.mapfull{ line-height:0; border-top:1px solid var(--line); }
.mapfull iframe{ width:100%; height:clamp(300px,38vw,460px); border:0; display:block; filter:saturate(.9); }

/* ==========================================================
   TEXTE LONG (pages légales)
   ========================================================== */
.prose{ max-width:52rem; }
.prose h2{ font-size:1.35rem; text-transform:uppercase; margin:2.5rem 0 .9rem; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-size:1.12rem; margin:1.75rem 0 .6rem; }
.prose ul{ padding-left:1.25rem; margin:0 0 1rem; }
.prose li{ margin-bottom:.4rem; }
.prose a{ color:var(--green-dk); }

/* ==========================================================
   PIED DE PAGE
   ========================================================== */
.foot{ background:var(--dark-2); color:#9DAE92; padding-top:clamp(3rem,5vw,4.25rem); font-size:.955rem; }
.foot__g{ display:grid; grid-template-columns:1.15fr 1fr 1fr 1.15fr; gap:clamp(1.75rem,3.5vw,3rem); }
.foot h4{ color:#fff; font-size:1.09rem; letter-spacing:.025em; text-transform:uppercase; margin-bottom:1.35rem; }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.foot a{ text-decoration:none; transition:color .25s; }
.foot a:hover{ color:var(--gold); }
.foot__logo{ margin-bottom:1rem; }
.foot__tag{ color:var(--gold); font-weight:600; font-size:.985rem; }
.finfo{ display:grid; gap:1.1rem; }
.finfo > div{ display:flex; gap:.85rem; }
.finfo svg{ width:19px; height:19px; flex:none; color:#7A8C6E; margin-top:.35rem; }
.finfo .k{ display:block; color:#7A8C6E; font-size:.865rem; }
.finfo .v{ color:#DCE6D5; font-size:.965rem; font-weight:400; }
.nlform{ display:grid; gap:.7rem; }
.nlform input{ font-family:var(--font); font-size:.965rem; padding:.85rem 1rem; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06); color:#fff; }
.nlform input::placeholder{ color:#8A9A7E; }
.nlform input:focus{ outline:2px solid var(--gold); outline-offset:0; }
.fsoc{ display:flex; gap:1.15rem; margin-top:1.35rem; }
.fsoc a svg{ width:21px; height:21px; }
.foot__b{ margin-top:clamp(2.25rem,4vw,3rem); border-top:1px solid rgba(255,255,255,.1); padding-block:1.35rem; display:flex; flex-wrap:wrap; gap:.6rem 2rem; justify-content:space-between; font-size:.885rem; }
.foot__b nav{ display:flex; flex-wrap:wrap; gap:1.5rem; }

/* remonter */
.up{ position:fixed; right:1.25rem; bottom:1.25rem; z-index:70; width:48px; height:48px; border-radius:50%; border:0; cursor:pointer; background:var(--gold); color:#fff; display:grid; place-items:center; opacity:0; pointer-events:none; transform:translateY(12px); transition:opacity .3s var(--ease), transform .3s var(--ease), background .25s; }
.up.show{ opacity:1; pointer-events:auto; transform:none; }
.up:hover{ background:var(--green); }
.up svg{ width:20px; height:20px; }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width:1180px){
  .menu a{ padding-inline:.6rem; font-size:1rem; }
  .welcome{ grid-template-columns:1fr; }
}
@media (max-width:1000px){
  .menu,.navbar__r{ display:none; }
  .burger{ display:flex; }
  .navbar__in{ padding-block:.5rem; }
  .head{ display:none; }
  .navbar{ border-top:0; }
  .navbar__in{ align-items:center; justify-content:space-between; }
  .navbar__brand{ display:flex; }
  .burger{ margin-left:0; order:-1; background:none; border:0; }
  .navbar__tel{ display:grid; place-items:center; width:44px; height:44px; color:var(--ink); }
  .navbar__tel svg{ width:22px; height:22px; }
  .hslide{ max-width:64%; }
  .hero__mask{ clip-path:polygon(0 0, 72% 0, 84% 100%, 0 100%); }
  .solar__top,.contact,.split{ grid-template-columns:1fr; }
  .foot__g{ grid-template-columns:1fr 1fr; }
}
@media (max-width:700px){
  .top__l{ gap:1rem; }
  .top__l a:first-child{ display:none; }
  .hero__mask{ clip-path:none; background:rgba(29,61,17,.9); }
  .hslide{ max-width:100%; }
  .hero__nav{ display:none; }
  .navbar__brand .logo__img{ height:34px; }
  .tabpanel.on{ grid-template-columns:1fr; }
  .tabpanel img{ aspect-ratio:16/10; }
  .zz__row{ grid-template-columns:1fr; gap:1.5rem; }
  .zz__row .zz__media,.zz__row:nth-child(even) .zz__media{ order:1; }
  .zz__row .zz__txt,.zz__row:nth-child(even) .zz__txt{ order:2; }
  .zz__hd{ gap:1rem; }
  .zz__ic{ width:56px; height:56px; }
  .zz__ic svg{ width:27px; height:27px; }
  .tabs button{ font-size:1.18rem; }
  .partners{ flex-direction:column; align-items:flex-start; }
  .figs{ grid-template-columns:1fr 1fr; }
  .fig{ padding-block:1.15rem; border-bottom:1px solid rgba(255,255,255,.13); }
  .fig:nth-child(2n){ border-right:0; }
  .fig:nth-child(n+3){ border-bottom:0; }
  .foot__g{ grid-template-columns:1fr; }
  .phead__in{ flex-direction:column; align-items:flex-start; }
  .locs li{ flex-wrap:wrap; }
  .locs span{ margin-left:0; width:100%; }
  .mapfull iframe{ height:300px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .rv,.rv--fl,.rv--fr{ opacity:1; transform:none; }
  .hero__bg img.on{ transform:none; }
  .mpulse,.mhalo,.map__live i{ display:none; }
}

/* ==========================================================
   APERÇUS DE LA PAGE D'ACCUEIL
   ========================================================== */
.pcards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:1.75rem; }
.pcard{ background:#fff; border:1px solid var(--line); text-decoration:none; display:block; transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.pcard:hover{ transform:translateY(-6px); box-shadow:var(--sh); }
.pcard__i{ aspect-ratio:16/10; overflow:hidden; background:var(--grey); }
.pcard__i img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.pcard:hover .pcard__i img{ transform:scale(1.06); }
.pcard__b{ padding:1.5rem; }
.pcard__tag{ font-size:.815rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--gold-dk); margin-bottom:.4rem; }
.pcard h3{ font-size:1.1rem; }
.pcard__k{ display:flex; align-items:baseline; gap:.6rem; margin-top:1.1rem; padding-top:.9rem; border-top:1px solid var(--line); }
.pcard__k b{ font-size:1.5rem; font-weight:700; color:var(--green); line-height:1; }
.pcard__k span{ font-size:.9rem; color:var(--muted); }

.chips{ display:flex; flex-wrap:wrap; gap:.6rem; margin:1.5rem 0 0; padding:0; list-style:none; }
.chips li{ border:1px solid var(--line); background:#fff; padding:.45rem 1.05rem; font-size:.925rem; font-weight:500; color:var(--ink); }

.ctaband{ text-align:center; }
.ctaband .btns{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; margin-top:1.9rem; }
