/*
Theme Name: Netclic
Theme URI: https://agence-netclic.com/
Author: Netclic
Description: Starter theme WordPress classique, léger et orienté ACF Pro, SEO, accessibilité et performances.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: netclic
*/

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

:root {
  --color-bg: #FBFAF6;
  --color-bg2: #F3EFE6;
  --color-dark-bg: #111B18;
  --color-text: #737D77;
  --color-text-white: #BBBEBD;
  --color-primary: #1D2C27;
  --color-title: #18211D;
  --color-border: #D2D0C8;
  --color-secondary: #C97850;

}


/* START CSS général */
* {font-family: "DM Sans", sans-serif;}
a {transition: .3s;}
h1, h2, h3, h4, h5 {font-family: 'DM Sans'; line-height: 1.06 !important; font-weight: 600; letter-spacing: -.035em; margin: 0; color: var(--color-primary);}
h2 {font-size: clamp(36px, 4vw, 58px);}
h3 {font-size: 24px;}
p, li, span {color: var(--color-text);}
a:hover {color: var(--color-primary);}
.txt-gray p, .txt-gray li, .txt-gray span, .txt-gray {color: var(--color-text-gray);}
.sect-pad {padding: 60px 0;}
.bg-color {background: var(--color-bg);}
.dark-bg {background: var(--color-title);}
.maxwidth900 {max-width: 900px;}
.maxwidth750 {max-width: 750px;}
.disp-flex {display: flex;}
.flex-wrap {flex-wrap: wrap;}
.gap40 {gap: 40px;}
.gap50 {gap: 50px;}
.gap100 {gap: 100px;}
.colflex {flex: 1;}
.btn-link {text-transform: uppercase; font-size: 13px; letter-spacing: 4px; text-decoration: none; border-bottom: solid 1px; width: fit-content;}
.btn-primary {color: var(--color-primary);}
.btn-link {display: flex; align-items: center; gap: 10px; background: none; border-top: none; border-left: none; border-right: none;}
.btn-link svg {height: 16px; fill: currentColor;}
.big-p p, .big-p, .big-p li, .big-p span, .big-p b, .big-p strong {font-size: 18px; font-family: 'Lora';}
.btn-right {margin: 0 0 0 auto;}
.btn-center {margin: auto;}
.btn-icon svg {height: 16px; fill: currentcolor;}
input:focus, textarea:focus, input:focus-visible, textarea:focus-visible {outline: none !important; border-top: none !important; border-left: none !important; border-right: none !important; border-color: var(--color-primary) !important;}
::selection {background: var(--color-title); color: var(--color-bg);}
.dark-bg ::selection {background: var(--color-bg); color: var(--color-title);}
blockquote {border-left: solid 2px var(--color-primary); margin-left: 0; padding-left: 30px;}
h1 span {color: var(--color-secondary); font-family: 'Oswald';}
.hero-page-breadcrumb {margin-bottom: 20px;}
.hero-page-breadcrumb span {font-size: 14px; padding-bottom: 20px; color: var(--color-text-white);}
.hero-page-breadcrumb a {color: var(--color-text-white); font-weight: 600; text-decoration: none !important;}
/* END CSS général */



/* START HEADER */
.site-header{position:absolute;inset:0 0 auto;z-index:1000;color:#fff;border-bottom:1px solid rgba(255,255,255,.22);background:transparent;transition:background .25s}
.site-header.is-scrolled,.site-header.is-menu-open{background:var(--color-primary)}
.site-header__inner{width:min(100% - 48px,1120px);min-height:78px;margin:auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.site-title{display:inline-flex;align-items:center}.site-title img{display:block;width:auto;max-width:150px;max-height:42px}
.site-nav .menu{display:flex;align-items:center;gap:34px;list-style:none;margin:0;padding:0}.site-nav .menu a{font-size:12px;font-weight:600;color:#fff;text-decoration:none}.site-nav .menu a:hover,.site-nav .current-menu-item>a{color:var(--color-secondary)}
.site-header__phone{justify-self:end;display:flex;align-items:center;gap:8px;color:#fff;font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap}.site-header__phone svg{width:15px;height:15px}
.site-menu-toggle{display:none}
body:not(.home) .site-header{position:relative;background:var(--color-primary)}
@media(max-width:900px){.site-header__inner{display:flex;justify-content:space-between;min-height:70px}.site-header__phone{margin-left:auto}.site-menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;padding:10px;background:none;border:1px solid rgba(255,255,255,.5);cursor:pointer;z-index:3}.site-menu-toggle span{display:block;height:2px;background:#fff;width:100%}.site-nav{position:absolute;top:100%;left:0;right:0;background:var(--color-primary);visibility:hidden;opacity:0;pointer-events:none;padding:20px 24px 30px}.site-header.is-menu-open .site-nav{visibility:visible;opacity:1;pointer-events:auto}.site-nav .menu{display:flex;flex-direction:column;align-items:stretch;gap:0}.site-nav .menu li{border-bottom:1px solid rgba(255,255,255,.2)}.site-nav .menu a{display:block;padding:16px 0;font-size:16px}body.broc-menu-open{overflow:hidden}}
@media(max-width:480px){.site-header__inner{width:calc(100% - 32px);gap:12px}.site-title img{max-width:110px}.site-header__phone{font-size:11px}}
/* END HEADER */

/* START HOME */
.broc-home{background:var(--color-bg);color:var(--color-title)}
.broc-home *{box-sizing:border-box}
.broc-home .broc-wrap{width:min(100% - 48px,1120px);margin-inline:auto}
.broc-home .broc-section{padding:100px 0}
.broc-home .broc-kicker{margin:0 0 18px;color:var(--color-secondary);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}

/* ==========================================
   TYPOGRAPHIE - TITRES BROC17
========================================== */

.broc-home h1,
.broc-home h2,
.broc-home h3 {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    letter-spacing: -.045em;
    line-height: 1.08 !important;
}

.broc-home h1 {
    font-size: clamp(48px, 6vw, 88px);
    color: #fff;
}

.broc-home h2 {
    font-size: clamp(36px, 4.4vw, 58px);
    color: var(--color-title);
}

.broc-home h3 {
    font-size: clamp(22px, 2.1vw, 29px);
}

/* Variantes typographiques */

.broc-home h1 em,
.broc-home h2 em,
.broc-home h3 em {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 500;
    letter-spacing: -.055em;
}

.broc-home p{line-height:1.55}
.broc-home .broc-button{display:inline-flex;align-items:center;gap:20px;background:var(--color-secondary);color:#fff;padding:17px 22px;font-weight:700;text-decoration:none;font-size:14px}
.broc-home .broc-button:hover{background:var(--color-primary)}
.broc-home .broc-text-link{display:inline-flex;gap:12px;align-items:center;width:max-content;max-width:100%;border-bottom:1px solid currentColor;padding-bottom:5px;color:inherit;text-decoration:none;font-size:13px;font-weight:700}
.broc-home .broc-text-link--light{color:#fff}
.broc-hero{min-height:650px;position:relative;display:flex;align-items:center;background:var(--color-dark-bg);isolation:isolate}
.broc-hero__image{position:absolute;inset:0;z-index:-1;overflow:hidden}.broc-hero__image:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}
.broc-hero__image img{width:100%;height:100%;object-fit:cover}
.broc-hero__image:after{background:linear-gradient(90deg,rgba(10,20,16,.83) 0%,rgba(10,20,16,.48) 55%,rgba(10,20,16,.24) 100%),linear-gradient(0deg,rgba(10,20,16,.45),transparent 55%)}
.broc-hero__inner{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:30px;padding-block:185px 100px}
.broc-hero__copy{max-width:690px}
.broc-hero__text{max-width:470px;margin:24px 0 28px;color:#fff}
.broc-actions{display:flex;align-items:center;gap:25px;flex-wrap:wrap}
.broc-hero__note{align-self:flex-end;margin:0;color:#fff;text-align:right;font-size:12px}
.broc-benefits{background:var(--color-bg2);border-bottom:1px solid var(--color-border)}
.broc-benefits__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-block:22px}
.broc-benefits__grid>div{display:flex;gap:12px;align-items:center;font-size:13px;font-weight:600}
.broc-benefits__grid span{color:var(--color-secondary)}
.broc-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:55px;margin-bottom:45px}
.broc-section-head>div{max-width:640px}.broc-section-head>p{max-width:330px;margin:0}
.broc-audience__grid{display:grid;grid-template-columns:1fr 1fr}
.broc-audience__card{min-height:390px;padding:42px;display:flex;flex-direction:column;justify-content:space-between}
.broc-audience__card--dark{background:var(--color-primary);color:#fff}.broc-audience__card--sand{background:#e8ddd0;color:var(--color-title)}
.broc-audience__number{align-self:flex-end;font:italic 22px Georgia,serif;opacity:.5}
.broc-audience__card h3{color:inherit;max-width:370px}.broc-audience__card p:not(.broc-kicker){max-width:410px;color:inherit;opacity:.85;margin:12px 0}
.broc-objects{display:grid;grid-template-columns:1fr 1fr;min-height:700px;background:var(--color-bg2)}
.broc-objects__visual{position:relative;min-height:600px;background:var(--color-primary)}
.broc-objects__visual>img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.broc-objects__caption{position:absolute;bottom:26px;left:26px;right:26px;background:var(--color-bg);padding:18px 22px;display:grid;gap:5px}
.broc-objects__caption strong{font:italic 20px Georgia,serif}.broc-objects__caption span{font-size:12px}
.broc-objects__body{padding:clamp(50px,7vw,105px) clamp(28px,7vw,100px);max-width:750px}
.broc-objects__list{list-style:none;padding:0;margin:40px 0 20px}
.broc-objects__list li{display:flex;gap:22px;padding:15px 0;border-bottom:1px solid var(--color-border)}
.broc-objects__index{font-size:12px;color:var(--color-secondary);padding-top:4px}.broc-objects__list h3{font-size:17px;letter-spacing:0}.broc-objects__list p{font-size:12px;margin:4px 0 0}.broc-objects__note{font:italic 13px Georgia,serif}
.broc-process__grid{display:grid;grid-template-columns:repeat(3,1fr);list-style:none;padding:0;margin:0;border-top:1px solid var(--color-border)}
.broc-process__grid li{min-height:205px;padding:28px;border-right:1px solid var(--color-border)}.broc-process__grid li:first-child{padding-left:0}.broc-process__grid li:last-child{border:0}
.broc-process__grid li>span{display:block;color:var(--color-secondary);font:italic 21px Georgia,serif;margin-bottom:40px}.broc-process__grid h3{font-size:20px;letter-spacing:0}.broc-process__grid p{font-size:13px;margin-top:10px}
.broc-contact{background:var(--color-primary);padding:85px 0}.broc-contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:90px}.broc-contact h2{color:#fff}.broc-contact p:not(.broc-kicker){color:var(--color-text-white);max-width:420px;margin-top:22px}
.broc-contact__form :is(input:not([type=submit]),textarea,select){width:100%;background:transparent;border:0;border-bottom:1px solid var(--color-text);border-radius:0;padding:14px 0;color:#fff}
.broc-contact__form :is(input,textarea)::placeholder{color:var(--color-text-white)}.broc-contact__form label{color:#fff}.broc-contact__form input[type=submit],.broc-contact__form button[type=submit]{border:0;background:var(--color-secondary);color:#fff;padding:15px 25px;font-weight:700;cursor:pointer}
@media(max-width:800px){.broc-home .broc-section{padding:65px 0}.broc-hero{min-height:580px}.broc-hero__inner{padding-block:95px 60px}.broc-hero__note{display:none}.broc-benefits__grid{grid-template-columns:repeat(2,1fr)}.broc-section-head{display:block}.broc-section-head>p{margin-top:22px}.broc-audience__card{min-height:320px;padding:28px}.broc-objects{grid-template-columns:1fr}.broc-objects__visual{min-height:460px}.broc-objects__body{max-width:none}.broc-contact__grid{gap:35px}}
@media(max-width:560px){.broc-home .broc-wrap{width:min(100% - 36px,1120px)}.broc-benefits__grid{gap:14px}.broc-benefits__grid>div{font-size:11px}.broc-audience__grid,.broc-process__grid,.broc-contact__grid{grid-template-columns:1fr}.broc-process__grid li,.broc-process__grid li:first-child{padding:25px 0;border-right:0;border-bottom:1px solid var(--color-border);min-height:0}.broc-process__grid li>span{margin-bottom:22px}.broc-hero__image:after{background:rgba(10,20,16,.65)}}
/* END HOME */
/* START FOOTER */
.site-footer{background:var(--color-dark-bg);color:#fff}.site-footer__inner{width:min(100% - 48px,1120px);margin:auto;min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:24px}.site-footer__brand{display:flex;align-items:center;gap:55px}.site-footer__logo img{display:block;max-width:115px;max-height:38px;width:auto}.site-footer__tagline,.site-footer__contact,.site-footer__top{font-size:11px;color:var(--color-text-white)}.site-footer__contact{display:flex;align-items:center;gap:15px}.site-footer a{color:inherit;text-decoration:none}.site-footer a:hover{color:var(--color-secondary)}.site-footer__top{white-space:nowrap}.site-footer__legal{display:flex;gap:14px;padding:0 0 20px;justify-content:center;font-size:11px;color:var(--color-text-white)}
@media(max-width:800px){.site-footer__inner,.site-footer__brand,.site-footer__contact{flex-wrap:wrap;gap:18px}.site-footer__inner{padding-block:28px}.site-footer__top{margin-left:auto}}
/* END FOOTER */