/*
Theme Name: Atypik
Theme URI: https://ville-renouvelee.fr
Author: mediapilote.com
Description: Thème WordPress sur-mesure pour le programme immobilier Atypik (Quartier de l'Union, Roubaix). Header, homepage et footer balisés, lots gérés en CPT + ACF.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: atypik
*/

:root{
  --turquoise:#169499; --vert1:#97b360; --vert2:#6e8f30;
  --violet1:#8868af; --violet2:#603195; --orange1:#f98653; --orange2:#e36630;
  --blanc:#fff; --gris-clair:#f0f0f0; --gris-fonce:#d1d1d1; --noir:#434b5c; --rouge:#c71521;
  --maxw:1440px;
  --gut:250px;   /* gouttière contenu (desktop) */
  --gut-lg:100px;/* gouttière large */
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Roboto',sans-serif;color:var(--noir);background:#e6e7e8;-webkit-font-smoothing:antialiased}
.page{width:100%;max-width:var(--maxw);margin:0 auto;background:#fff;overflow:hidden;box-shadow:0 4px 40px rgba(0,0,0,.15);position:relative}
h1,h2,h3{font-family:'Roboto Slab',serif;font-weight:700;line-height:1.12}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
.pad250{padding-left:var(--gut);padding-right:var(--gut);width:100%}
.pad100{padding-left:var(--gut-lg);padding-right:var(--gut-lg);width:100%}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:7px 20px;border-radius:50px;
  font-weight:700;font-size:15px;cursor:pointer;border:none;line-height:normal;white-space:nowrap;
  transition:transform .15s,box-shadow .15s,filter .15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.12);filter:brightness(1.04)}
.btn-turq{background:var(--turquoise);color:#fff}
.btn-blanc{background:#fff;color:var(--turquoise)}

/* HEADER */
.site-header{position:sticky;top:0;z-index:60;background:#fff;padding-bottom:20px;display:flex;flex-direction:column;gap:20px;align-items:center}
.topbar{background:var(--turquoise);display:flex;gap:20px;align-items:center;justify-content:center;padding:10px 16px;width:100%;flex-wrap:wrap}
.topbar p{color:var(--gris-clair);font-weight:700;font-size:16px}
.topbar .btn{background:#fff;color:var(--turquoise)}
.nav{display:flex;gap:60px;align-items:center}
.nav .logo{width:129px;height:41px}
.menu{display:flex;gap:60px;align-items:center;list-style:none}
.menu a{font-family:'Roboto Slab',serif;font-weight:700;font-size:16px;color:var(--vert2);text-transform:uppercase;transition:color .15s}
.menu a:hover{color:var(--vert1)}
.menu .pill a,.menu a.pill{background:var(--vert2);color:#fff;padding:8px 20px;border-radius:20px;display:inline-block}
.menu .pill a:hover,.menu a.pill:hover{color:#fff;filter:brightness(.92)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;font-size:26px;color:var(--vert2)}

.body{display:flex;flex-direction:column;align-items:center;gap:80px;padding-bottom:100px}

/* HERO + badge */
.hero{position:relative;width:100%;display:flex;flex-direction:column;align-items:center}
.hero-photo{width:100%;height:553px;overflow:hidden}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 55%}
.hero-cta{position:relative;margin-top:-56px;width:852px;max-width:calc(100% - 32px);height:113px;background:#fff;border-radius:60px;
  box-shadow:0 14px 40px rgba(0,0,0,.1);display:flex;align-items:center;justify-content:center}
.badge{width:803px;max-width:calc(100% - 24px);height:75px;background:var(--turquoise);border-radius:74.5px;display:flex;align-items:center;
  color:#fff;padding:0 14px 0 28px;gap:24px}
.badge .b-left{display:flex;flex-direction:column;align-items:flex-end;text-align:right;flex-shrink:0}
.badge .b-left .l1{font-family:'Roboto Slab',serif;font-weight:500;font-size:16px;line-height:1.1}
.badge .b-left .l2{font-family:'Roboto Slab',serif;font-weight:700;font-size:30px;line-height:1.05}
.badge .divider{width:1px;align-self:stretch;background:#fff;opacity:.9;margin:10px 0;flex-shrink:0}
.badge .b-mid{font-family:'Roboto Slab',serif;font-weight:700;font-size:24px;line-height:24px;flex:1}
.badge .b-btn{background:#fff;color:var(--turquoise);font-weight:700;font-size:14px;text-align:center;
  border-radius:50px;padding:9px 16px;width:150px;line-height:1.15;flex-shrink:0;cursor:pointer}

/* BLOCS COLORES */
.blocs{display:flex;flex-direction:column;gap:80px;width:100%}
.bloc{display:flex;align-items:center;height:494px;padding:0 100px;position:relative}
.bloc .photo{width:620px;flex-shrink:0;z-index:2;position:relative;display:flex;flex-direction:column;align-items:flex-start}
.bloc .photo .ph{width:100%;height:422px;overflow:hidden}
.bloc .photo .ph img{width:100%;height:100%;object-fit:cover}
.bloc .photo .tab{width:156px;height:72px;background:#fff}
.bloc .panel{flex:1;align-self:stretch;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;
  padding:180px 80px 60px;color:#fff;position:relative;overflow:hidden}
.bloc .panel .wave{position:absolute;left:407px;top:181px;width:299px;height:266px;pointer-events:none}
.bloc .panel .inner{display:flex;flex-direction:column;gap:20px;position:relative;z-index:2;width:100%}
.bloc.left .photo{margin-right:-40px}
.bloc.left .panel .inner{align-items:flex-start;text-align:left}
.bloc.right{flex-direction:row-reverse}
.bloc.right .photo{margin-left:-40px;align-items:flex-end}
.bloc.right .panel{margin-right:-40px}
.bloc.right .panel .inner{align-items:flex-end;text-align:right}
.bloc .quote{font-family:'Roboto Condensed',sans-serif;font-style:italic;font-weight:300;line-height:1.25}
.bloc .quote b{font-weight:700}
.bloc .txt{font-size:16px;line-height:24px}
.bloc .txt b{font-weight:700}
.bloc-vert .panel{background:var(--vert1)} .bloc-vert .quote{font-size:24px}
.bloc-violet .panel{background:var(--violet1)} .bloc-violet .quote{font-size:22px}
.bloc-orange .panel{background:var(--orange1)} .bloc-orange .quote{font-size:22px}
.round-pin{position:absolute;z-index:3;width:148px;height:148px;border-radius:50%;background:var(--gris-fonce);
  transform:rotate(-4.8deg);box-shadow:0 8px 24px rgba(0,0,0,.18);border:3px solid #fff;overflow:hidden}
.round-pin img{width:100%;height:100%;object-fit:cover}
.bloc-vert .round-pin{left:548px;top:-14px}
.bloc-violet .round-pin{right:548px;top:-14px}
.bloc-violet .round-pin.big{width:200px;height:200px;right:600px;top:10px}
.bloc-orange .round-pin{left:548px;top:-40px;width:180px;height:180px}

/* BIENS DISPOS */
.biens{width:100%;background:linear-gradient(to bottom,var(--gris-clair),#fff);display:flex;flex-direction:column;align-items:center;gap:37px;padding:80px 0}
.biens .head{display:flex;flex-direction:column;align-items:center;gap:20px}
.biens .head img{width:129px;height:41px}
.biens .head h2{font-size:28px;color:var(--vert2);text-align:center}
.lots{display:flex;flex-direction:column;gap:20px;align-items:center}
.lots-block{width:100%;display:flex;flex-direction:column;gap:10px}
.hr{height:1px;background:var(--gris-fonce);width:100%;border:0;opacity:.7}
.type-band{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 20px;width:940px;max-width:100%;margin:0 auto;cursor:pointer}
.type-band .left{display:flex;gap:20px;align-items:baseline;flex-wrap:wrap}
.type-band .ttl{font-family:'Roboto Slab',serif;font-weight:700;color:var(--vert2)}
.type-band .ttl .s{font-size:18px}.type-band .ttl .m{font-size:24px}
.type-band .price{font-size:16px;color:var(--vert1)}
.type-band .right{display:flex;gap:10px;align-items:center;color:var(--vert2);font-size:16px}
.chev{width:18px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--vert2);font-size:14px;transition:transform .2s}
.type-band.open .chev{transform:rotate(180deg)}
.lots-list{display:flex;flex-direction:column;gap:10px;width:100%}
.lot-card{background:#fff;border:1px solid var(--gris-clair);border-radius:10px;padding:20px;display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%}
.lot-card .info{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.lot-card .prix{width:150px;color:var(--turquoise)}
.lot-card .prix b{font-weight:700;font-size:24px;display:block;line-height:24px}
.lot-card .prix span{font-size:16px}
.lot-card .desc{width:338px;max-width:100%;color:var(--noir);font-size:16px;line-height:24px}
.vue3d{width:100%}
.vue3d img{width:100%;mix-blend-mode:darken}
.projection{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.projection .titre{color:var(--vert2)}
.projection .titre .sub{font-family:'Roboto Slab',serif;font-weight:300;font-size:24px}
.projection .titre h2{font-size:24px}
.btn-3d{background:var(--turquoise);color:#fff;border-radius:15px;padding:0 36px;height:53px;font-weight:700;font-size:15px;display:inline-flex;align-items:center;gap:14px}
.btn-3d .play{width:30px;height:27px;display:flex;align-items:center}

/* ETRE RAPPELE */
.rappele{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.rappele img{width:239px;height:77px}
.rappele h2{font-size:24px;color:var(--vert2);max-width:780px}

/* BROCHURE */
.brochure-wrap{display:flex;flex-direction:column;align-items:center;width:100%}
.brochure-photo{width:100%;padding:0 40px;height:484px;overflow:hidden;margin-bottom:-100px}
.brochure-photo img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.brochure-cta{width:100%;padding:0 var(--gut);position:relative;z-index:2}
.brochure{background:var(--turquoise);display:flex;gap:50px;align-items:center;justify-content:center;padding:0 50px;color:#fff}
.brochure .left{display:flex;flex-direction:column;align-items:flex-end;gap:20px;width:378px;max-width:100%;text-align:right;padding:34px 0}
.brochure .left h3{font-size:24px;line-height:27px}
.brochure .img{width:300px;height:207px;flex-shrink:0;align-self:flex-end}
.brochure .img img{width:100%;height:100%;object-fit:contain}

/* QUARTIER + PLAN */
.quartier{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%}
.quartier .titre{text-align:center;color:var(--vert2)}
.quartier .titre .sub{font-family:'Roboto Slab',serif;font-weight:300;font-size:24px}
.quartier .titre h2{font-size:24px}
.quartier .map{width:100%;padding:0 40px}
.quartier .map img{width:100%}

/* CONSEILLERS */
.conseillers{background:var(--vert1);display:flex;gap:49px;align-items:center;min-height:214px;padding:30px 250px;width:100%}
.conseillers .photo{width:214px;height:214px;border-radius:50%;overflow:hidden;flex-shrink:0;background:#d9d9d9}
.conseillers .photo img{width:100%;height:100%;object-fit:cover}
.conseillers .content{display:flex;flex-direction:column;gap:16px;max-width:662px}
.conseillers h3{font-size:22px;line-height:27px;color:var(--gris-clair)}
.conseillers p{font-size:16px;line-height:24px;color:#fff}
.conseillers p b{font-weight:700}

/* FOOTER */
.site-footer{background:#fff;padding:40px 100px;display:flex;flex-direction:column;gap:16px;width:100%}
.site-footer .l1{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding-top:20px;border-top:1px solid var(--gris-fonce);flex-wrap:wrap}
.site-footer .logos{display:flex;gap:30px;align-items:flex-end}
.site-footer .logos .g{height:67px;width:auto}
.site-footer .copromo{display:flex;gap:9px;align-items:center}
.site-footer .copromo .lbl{color:var(--rouge);font-size:11px;text-align:right;line-height:11px;width:98px}
.site-footer .actions{display:flex;gap:20px;align-items:flex-end;flex-wrap:wrap}
.site-footer .actions .btns{display:flex;gap:10px;flex-wrap:wrap}
.site-footer .totop{width:44px;height:44px;border-radius:50%;background:var(--vert2);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;text-decoration:none}
.site-footer .pagenum{font-family:'Roboto Slab',serif;font-weight:700;font-size:28px;color:var(--vert2);text-align:right}
.site-footer .legal{display:flex;flex-direction:column;gap:20px;font-size:13px}
.site-footer .legal .l{color:var(--vert2);line-height:16px}
.site-footer .legal .small{color:var(--gris-fonce);line-height:16px}
.site-footer .legal .small p{margin-bottom:0}

/* ============ RESPONSIVE ============ */
@media (max-width:1200px){
  :root{--gut:80px;--gut-lg:60px}
  .bloc{padding:0 60px}
  .conseillers{padding:30px 60px}
  .site-footer{padding:40px 60px}
}
@media (max-width:980px){
  /* nav burger */
  .nav{width:100%;justify-content:space-between;padding:0 24px}
  .nav-toggle{display:block}
  .menu{position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;gap:24px;
    padding:24px;box-shadow:0 12px 24px rgba(0,0,0,.1);display:none}
  .menu.open{display:flex}
  /* badge hero -> empilé */
  .hero-cta{height:auto;border-radius:32px;padding:14px}
  .badge{height:auto;flex-direction:column;align-items:stretch;text-align:center;gap:12px;border-radius:24px;padding:18px 20px}
  .badge .b-left{align-items:center;text-align:center}
  .badge .b-left .l2{font-size:26px}
  .badge .divider{width:auto;height:1px;margin:0}
  .badge .b-mid{text-align:center;font-size:20px}
  .badge .b-btn{width:100%}
  /* blocs colorés -> empilés */
  .bloc,.bloc.right{flex-direction:column;height:auto;padding:0}
  .bloc .photo,.bloc.right .photo{width:100%;margin:0;align-items:center}
  .bloc .photo .ph{height:300px}
  .bloc .photo .tab{display:none}
  .bloc .panel,.bloc.right .panel{margin:0;padding:40px 32px}
  .bloc .panel .inner,.bloc.right .panel .inner{align-items:flex-start;text-align:left}
  .bloc .panel .wave{left:auto;right:10px;top:20px;opacity:.6}
  .round-pin{display:none}
  /* biens */
  .type-band{width:100%}
  .lot-card{flex-direction:column;align-items:flex-start}
  .lot-card .info{flex-direction:column;align-items:flex-start;gap:8px}
  /* brochure */
  .brochure{flex-direction:column;padding:30px}
  .brochure .left{align-items:center;text-align:center;width:100%}
  .brochure-photo{height:320px}
  /* conseillers */
  .conseillers{flex-direction:column;text-align:center;height:auto;padding:40px 40px}
  .conseillers .content{align-items:center}
  /* footer */
  .site-footer .l1{flex-direction:column;align-items:center;text-align:center}
  .site-footer .actions{align-items:center;justify-content:center}
  .site-footer .pagenum{text-align:center}
}
@media (max-width:600px){
  :root{--gut:24px;--gut-lg:24px}
  .hero-photo{height:340px}
  .topbar{flex-direction:column}
  .biens .head h2{font-size:22px}
  .brochure-cta{padding:0 24px}
  .quartier .map,.brochure-photo{padding:0 16px}
}