/* Nature Graphique — Studio Master Page CSS
   Mettre ce fichier dans: /wp-content/themes/Nature_theme/css/ng-studio-page.css */

body.page .ng-page-master-shell,
body.page .ng-page-master-shell .container,
body.page .ng-page-master-shell .container-fluid,
body.page .ng-page-master-shell .row,
body.page .ng-page-master-shell [class*="col-"] {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  float: none !important;
}

body.page .ng-page-master-shell { background:#050505 !important; overflow:hidden !important; }
body.page .ng-page-master-shell .wp-block-html { margin:0 !important; padding:0 !important; }

.ngstudio {
  background:#050505 !important;
  color:#fff !important;
  font-family: Raleway, "Open Sans", Helvetica, Arial, sans-serif !important;
  overflow:hidden !important;
  text-align:left !important;
}
.ngstudio, .ngstudio * { box-sizing:border-box; }
.ngstudio a { color:inherit; text-decoration:none; }
.ngstudio img, .ngstudio video, .ngstudio iframe { max-width:100%; display:block; }

.ngstudio-wrap { width:calc(100% - 120px); max-width:1360px; margin:0 auto; }
.ngstudio-kicker { display:block; margin:0 0 24px; font-size:10px; line-height:1.4; letter-spacing:4px; text-transform:uppercase; color:#a29a82 !important; }
.ngstudio-xl { margin:0 !important; color:#fff !important; font-size:84px !important; line-height:.96 !important; font-weight:300 !important; letter-spacing:-3px !important; text-transform:none !important; }
.ngstudio-lg { margin:0 !important; font-size:56px !important; line-height:1.06 !important; font-weight:300 !important; letter-spacing:-2px !important; text-transform:none !important; }
.ngstudio-p { margin:0 0 24px !important; font-size:16px !important; line-height:1.9 !important; color:#686868 !important; }
.ngstudio-dark .ngstudio-p, .ngstudio-black .ngstudio-p { color:rgba(255,255,255,.66) !important; }
.ngstudio-link { display:inline-block; padding-bottom:8px; border-bottom:1px solid #a29a82; font-size:10px !important; line-height:1.2 !important; letter-spacing:2.8px !important; text-transform:uppercase !important; color:rgba(255,255,255,.82) !important; transition:color .3s ease,border-color .3s ease,letter-spacing .3s ease; }
.ngstudio-link:hover { color:#fff !important; border-color:#fff !important; letter-spacing:3.3px !important; }
.ngstudio-light .ngstudio-link { color:#555 !important; }
.ngstudio-light .ngstudio-link:hover { color:#111 !important; border-color:#111 !important; }

/* HERO */
.ngstudio-hero { position:relative; min-height:92vh; display:flex; align-items:center; background:#000 !important; overflow:hidden; }
.ngstudio-hero video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.46; filter:saturate(.62) contrast(1.18) brightness(.66); }
.ngstudio-hero:after { content:""; position:absolute; inset:0; z-index:1; background:radial-gradient(circle at 72% 40%,rgba(162,154,130,.16),transparent 34%),linear-gradient(90deg,rgba(0,0,0,.96) 0%,rgba(0,0,0,.72) 42%,rgba(0,0,0,.22) 100%),linear-gradient(0deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,0) 58%); }
.ngstudio-hero-content { position:relative; z-index:2; max-width:900px; padding:130px 0 110px; }
.ngstudio-hero .ngstudio-p { max-width:720px; margin-top:34px !important; color:rgba(255,255,255,.72) !important; font-size:18px !important; line-height:1.85 !important; }
.ngstudio-actions { display:flex; flex-wrap:wrap; gap:28px; margin-top:38px; }
.ngstudio-hero-meta { position:absolute; z-index:2; right:60px; bottom:52px; display:flex; gap:28px; color:rgba(255,255,255,.42); font-size:10px; letter-spacing:2.4px; text-transform:uppercase; }

/* INTRO */
.ngstudio-intro { background:#f3f2ee !important; color:#111 !important; padding:118px 0 112px; }
.ngstudio-intro-grid { display:grid; grid-template-columns:.86fr 1.14fr; gap:92px; align-items:start; }
.ngstudio-portrait { position:relative; min-height:660px; background:#111; overflow:hidden; }
.ngstudio-portrait img { width:100%; height:660px; object-fit:cover; filter:saturate(.78) contrast(1.08) brightness(.78); }
.ngstudio-portrait:after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.78) 0%,transparent 50%),linear-gradient(90deg,rgba(0,0,0,.24),transparent 46%); }
.ngstudio-portrait-caption { position:absolute; z-index:2; left:34px; right:34px; bottom:34px; color:#fff; }
.ngstudio-portrait-caption span { display:block; margin-bottom:12px; color:rgba(255,255,255,.58); font-size:10px; letter-spacing:3px; text-transform:uppercase; }
.ngstudio-portrait-caption strong { display:block; font-size:26px; line-height:1.25; font-weight:300; }
.ngstudio-intro-copy { padding-top:12px; }
.ngstudio-intro-copy .ngstudio-lg { color:#111 !important; }
.ngstudio-lead { margin:42px 0 44px !important; max-width:780px; font-size:22px !important; line-height:1.65 !important; font-weight:300 !important; color:#2a2a2a !important; }
.ngstudio-cols { display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:46px; padding-top:46px; border-top:1px solid rgba(0,0,0,.1); }
.ngstudio-cols p { margin:0 !important; font-size:15px !important; line-height:1.9 !important; color:#575757 !important; }

/* TRIPTYCH */
.ngstudio-triptych { display:grid; grid-template-columns:1.35fr .85fr .85fr; gap:1px; background:#000 !important; }
.ngstudio-triptych-item { position:relative; height:620px; overflow:hidden; background:#111 !important; }
.ngstudio-triptych-item img { width:100%; height:100%; object-fit:cover; filter:saturate(.78) contrast(1.1) brightness(.78); transition:transform .9s ease,filter .9s ease; }
.ngstudio-triptych-item:hover img { transform:scale(1.035); filter:saturate(1) contrast(1.12) brightness(.9); }
.ngstudio-triptych-item:after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.74),transparent 58%); }
.ngstudio-triptych-caption { position:absolute; z-index:2; left:38px; right:38px; bottom:36px; }
.ngstudio-triptych-caption span { display:block; margin-bottom:12px; color:rgba(255,255,255,.55); font-size:10px; letter-spacing:3px; text-transform:uppercase; }
.ngstudio-triptych-caption strong { display:block; max-width:520px; color:#fff; font-size:26px; line-height:1.22; font-weight:300; }

/* DOMAINS */
.ngstudio-domains { background:#f3f2ee !important; color:#111 !important; padding:110px 0 120px; }
.ngstudio-domain-head { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; align-items:end; margin-bottom:66px; }
.ngstudio-domain-head .ngstudio-p { max-width:680px; }
.ngstudio-domain-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(0,0,0,.08); }
.ngstudio-card { background:#f3f2ee !important; transition:background .35s ease; }
.ngstudio-card:hover { background:#ebe9e2 !important; }
.ngstudio-card-img { height:360px; overflow:hidden; background:#111; }
.ngstudio-card-img img { width:100%; height:100%; object-fit:cover; filter:saturate(.82) contrast(1.05) brightness(.84); transition:transform .75s ease,filter .75s ease; }
.ngstudio-card:hover .ngstudio-card-img img { transform:scale(1.035); filter:saturate(.72) contrast(1.12) brightness(.7); }
.ngstudio-card-body { padding:42px 42px 50px; min-height:345px; }
.ngstudio-num { display:block; margin-bottom:24px; color:#a29a82; font-size:10px; letter-spacing:3px; text-transform:uppercase; }
.ngstudio-card-body h3 { margin:0 0 20px !important; color:#111 !important; font-size:26px !important; line-height:1.22 !important; font-weight:300 !important; }
.ngstudio-card-body p { margin:0 0 30px !important; color:#696969 !important; font-size:14px !important; line-height:1.85 !important; }

/* DARK SECTIONS */
.ngstudio-philo { background:#080808 !important; color:#fff !important; padding:126px 0; }
.ngstudio-philo-grid { display:grid; grid-template-columns:1.05fr 1fr; gap:96px; }
.ngstudio-statement { margin:0 !important; color:#fff !important; font-size:72px !important; line-height:1.02 !important; font-weight:300 !important; letter-spacing:-2px !important; }
.ngstudio-values { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin-top:50px; background:rgba(255,255,255,.1); }
.ngstudio-value { min-height:150px; padding:34px; background:#111 !important; }
.ngstudio-value span { display:block; margin-bottom:18px; color:#a29a82; font-size:10px; letter-spacing:3px; text-transform:uppercase; }
.ngstudio-value strong { display:block; color:#fff !important; font-size:20px; line-height:1.35; font-weight:300; }

/* METHOD */
.ngstudio-method { background:#fff !important; color:#111 !important; padding:116px 0; }
.ngstudio-method-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:96px; }
.ngstudio-method-list { border-top:1px solid rgba(0,0,0,.1); }
.ngstudio-method-item { display:grid; grid-template-columns:92px 1fr; gap:34px; padding:34px 0; border-bottom:1px solid rgba(0,0,0,.1); }
.ngstudio-method-item span { color:#a29a82; font-size:12px; letter-spacing:2.8px; }
.ngstudio-method-item h3 { margin:0 0 12px !important; color:#111 !important; font-size:26px !important; line-height:1.25 !important; font-weight:300 !important; }
.ngstudio-method-item p { margin:0 !important; color:#606060 !important; font-size:15px !important; line-height:1.85 !important; }

/* REELS */
.ngstudio-reels { background:#050505 !important; color:#fff !important; padding:116px 0 108px; }
.ngstudio-reels .ngstudio-lg { color:#fff !important; }
.ngstudio-reels-head .ngstudio-p { color:rgba(255,255,255,.76) !important; }
.ngstudio-reels .ngstudio-kicker { color:#a29a82 !important; }

.ngstudio-reels-head { display:grid; grid-template-columns:.9fr 1.1fr; gap:90px; align-items:end; margin-bottom:54px; }
.ngstudio-reel { display:grid; grid-template-columns:.82fr 1.38fr; gap:70px; align-items:center; padding:70px 0; border-top:1px solid rgba(255,255,255,.09); background:#050505 !important; }
.ngstudio-reel:last-child { border-bottom:1px solid rgba(255,255,255,.09); }
.ngstudio-reel h3 { margin:0 0 22px !important; color:#fff !important; font-size:40px !important; line-height:1.12 !important; font-weight:300 !important; }
.ngstudio-reel p { margin:0 0 28px !important; color:rgba(255,255,255,.64) !important; font-size:15px !important; line-height:1.85 !important; }
.ngstudio-video { position:relative; width:100%; height:0; padding-bottom:56.25%; background:#000 !important; overflow:hidden; }
.ngstudio-video iframe { position:absolute; inset:0; width:100%; height:100%; }

/* NOTES + LOCATION */
.ngstudio-notes { background:#f3f2ee !important; color:#111 !important; padding:112px 0; }
.ngstudio-note-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; margin-top:62px; background:rgba(0,0,0,.08); }
.ngstudio-note { background:#fff !important; padding:56px; }
.ngstudio-note h3 { margin:0 0 24px !important; color:#111 !important; font-size:30px !important; line-height:1.2 !important; font-weight:300 !important; }
.ngstudio-note p { margin:0 0 20px !important; color:#5f5f5f !important; font-size:15px !important; line-height:1.85 !important; }
.ngstudio-location { background:#fff !important; color:#111 !important; padding:112px 0; }
.ngstudio-location-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(0,0,0,.08); margin-top:54px; }
.ngstudio-location-cell { min-height:280px; padding:52px; background:#fff !important; }
.ngstudio-location-cell span { display:block; margin-bottom:18px; color:#a29a82; font-size:10px; letter-spacing:3px; text-transform:uppercase; }
.ngstudio-location-cell h3 { margin:0 0 18px !important; color:#111 !important; font-size:30px !important; line-height:1.2 !important; font-weight:300 !important; }
.ngstudio-location-cell p { margin:0 !important; color:#626262 !important; font-size:15px !important; line-height:1.85 !important; }

/* CTA */
.ngstudio-cta { position:relative; background:#000 !important; color:#fff !important; padding:140px 0; overflow:hidden; }
.ngstudio-cta:before { content:""; position:absolute; inset:0; background:url("https://www.nature-graphique.com/wp-content/themes/Nature_theme/img/patrimoine-architecture.jpg") center center/cover no-repeat; opacity:.22; filter:saturate(.65) contrast(1.14) brightness(.66); }
.ngstudio-cta:after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 76% 44%,rgba(162,154,130,.16),transparent 34%),linear-gradient(90deg,rgba(0,0,0,.95),rgba(0,0,0,.66)); }
.ngstudio-cta .ngstudio-wrap { position:relative; z-index:2; }
.ngstudio-cta h2 { max-width:920px; margin:0 0 30px !important; color:#fff !important; font-size:72px !important; line-height:.98 !important; font-weight:300 !important; letter-spacing:-2px !important; }
.ngstudio-cta p { max-width:720px; margin:0 0 38px !important; color:rgba(255,255,255,.68) !important; font-size:17px !important; line-height:1.85 !important; }

@media (max-width:1100px){
  .ngstudio-wrap{width:calc(100% - 64px)}
  .ngstudio-xl{font-size:64px !important}.ngstudio-lg,.ngstudio-statement,.ngstudio-cta h2{font-size:48px !important}
  .ngstudio-intro-grid,.ngstudio-domain-head,.ngstudio-philo-grid,.ngstudio-method-grid,.ngstudio-reels-head,.ngstudio-reel{grid-template-columns:1fr;gap:48px}
  .ngstudio-triptych,.ngstudio-domain-grid,.ngstudio-note-grid,.ngstudio-location-grid{grid-template-columns:1fr}
  .ngstudio-triptych-item{height:420px}.ngstudio-card-img{height:300px}
}
@media (max-width:720px){
  .ngstudio-wrap,.ngstudio-hero-content{width:calc(100% - 44px)}
  .ngstudio-hero{min-height:78vh}.ngstudio-xl{font-size:44px !important;letter-spacing:-1px !important}.ngstudio-lg,.ngstudio-statement,.ngstudio-cta h2{font-size:36px !important;letter-spacing:-1px !important}
  .ngstudio-hero-meta{display:none}.ngstudio-intro,.ngstudio-domains,.ngstudio-philo,.ngstudio-method,.ngstudio-reels,.ngstudio-notes,.ngstudio-location,.ngstudio-cta{padding:78px 0}.ngstudio-portrait,.ngstudio-portrait img{min-height:420px;height:420px}.ngstudio-cols,.ngstudio-values{grid-template-columns:1fr}.ngstudio-card-body,.ngstudio-note,.ngstudio-location-cell{padding:38px 30px}.ngstudio-method-item{grid-template-columns:1fr;gap:12px}.ngstudio-reel{padding:54px 0}.ngstudio-reel h3{font-size:30px !important}
}