/*
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
*/

@font-face {
 font-family: 'Oswald';
 src: url('fonts/oswald-v57-latin-regular.woff2') format('woff2');
 font-weight: 500;
 font-style: normal;
 font-display: swap;
}
@font-face {
 font-family: 'Oswald';
 src: url('fonts/oswald-v57-latin-300.woff2') format('woff2');
 font-weight: 300;
 font-style: normal;
 font-display: swap;
}
@font-face {
 font-family: 'Oswald';
 src: url('fonts/oswald-v57-latin-600.woff2') format('woff2');
 font-weight: 600;
 font-style: normal;
 font-display: swap;
}
@font-face {
 font-family: 'Oswald';
 src: url('fonts/oswald-v57-latin-600.woff2') format('woff2');
 font-weight: 600;
 font-style: normal;
 font-display: swap;
}
@font-face {
 font-family: 'Ibm';
 src: url('fonts/ibm-plex-sans-condensed-latin-ext-400-normal.woff2') format('woff2');
 font-weight: 400;
 font-style: normal;
 font-display: swap;
}
@font-face {
 font-family: 'Ibm';
 src: url('fonts/ibm-plex-sans-condensed-latin-ext-600-normal.woff2') format('woff2');
 font-weight: 600;
 font-style: normal;
 font-display: swap;
}




:root {
  --color-bg: #f3f3ec;
  --color-text: #8D8CBD;
  --color-text-white: #C6C6E1;
  --color-primary: #C83920;
  --color-title: #221D8F;
  --color-border: #EAEBF4;
}


/* START CSS général */
* {font-family: 'Ibm';}
a {transition: .3s;}
h1, h2, h3, h4, h5 {font-family: 'Oswald'; text-transform: uppercase; line-height: 1 !important;}
h2 {font-size: 80px;}
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;}
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;}
/* END CSS général */



/* START HEADER */
.site-header {position: sticky; top: 0; z-index: 1000; width: 100%; transition:background-color 0.3s ease,box-shadow 0.3s ease,transform 0.3s ease; border-bottom: none !important;}
.admin-bar .site-header {top: 32px;}
.site-title img {max-height: 80px;}
header .menu-item a {text-decoration: none; color: var(--color-title); transition: .3s;}
.site-header.is-scrolled {background: var(--color-bg); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); border-bottom: 1px solid var(--color-border) !important;}
.site-header.is-scrolled .site-title, .site-header.is-scrolled .menu-item a {color: var(--color-title);}
/* END HEADER */


/* START HOME */

.oem-home {--oem-blue: var(--color-title); --oem-cream: var(--color-bg); --oem-lavender: #cdd6ef; --oem-yellow: #f4df74; --oem-mint: #a2ded5; color: var(--oem-blue);}
.oem-home h1, .oem-home h2, .oem-home h3 {text-transform: none; font-weight: 600; line-height: 1.06 !important; letter-spacing: -.035em; margin: 0; color: inherit;}
.oem-home h2 {font-size: clamp(36px, 4vw, 58px);}
.oem-home p {color: inherit;}
.oem-home a {text-decoration: none;}
.oem-home .container {max-width: 1200px;}
.oem-section {padding: 110px 0;}

.oem-kicker {display: inline-flex; align-items: center; gap: 12px; text-transform: uppercase; font-size: 11px; letter-spacing: .22em; font-weight: 600; color: #6379d2;}
.oem-kicker::before {content: ""; width: 24px; height: 2px; background: #e9c94c;}
.oem-eyebrow {display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: .13em; font-weight: 600;}
.oem-eyebrow--light {color: #e3defe; background: #ffffff18; padding: 9px 13px; border-radius: 30px;}

.oem-button {display: inline-flex; align-items: center; justify-content: center; gap: 18px; padding: 13px 21px; border-radius: 40px; font-weight: 600; font-size: 13px; transition: transform .2s, background .2s;}
.oem-button:hover {transform: translateY(-2px);}
.oem-button--white {background: #fff; color: var(--oem-blue);}
.oem-button--outline {color: #fff; border: 1px solid #ffffff80;}
.oem-actions {display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px;}
.oem-text-link {font-size: 13px; font-weight: 600; color: var(--oem-blue); display: inline-flex; gap: 10px; align-items: center;}
.oem-text-link:hover {text-decoration: underline;}

.oem-hero {background: var(--oem-blue); color: white; overflow: hidden; padding: 85px 0 100px;}
.oem-hero__grid {display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;}
.oem-hero h1 {font-size: clamp(54px, 5.6vw, 85px); margin: 23px 0 22px; max-width: 650px;}
.oem-hero h1 em {font-style: normal; color: var(--oem-yellow); text-decoration: underline; text-decoration-color: #7790e6; text-decoration-thickness: 4px; text-underline-offset: 9px;}
.oem-hero__copy > p {max-width: 470px; font-size: 16px; line-height: 1.65; color: #d5d3ee;}
.oem-hero__visual {position: relative; isolation: isolate; max-width: 510px; margin: auto; width: 100%;}
.oem-hero__visual > img {width: 100%; height: 535px; object-fit: cover; border-radius: 45px 45px 45px 110px; position: relative; z-index: 1;}
.oem-orb {position: absolute; border-radius: 50%; width: 88px; height: 88px;}
.oem-orb--yellow {background: var(--oem-yellow); top: -30px; left: -30px;}
.oem-orb--mint {background: var(--oem-mint); right: -30px; bottom: -27px;}
.oem-hero__note {position: absolute; z-index: 2; bottom: -18px; left: -35px; background: white; color: var(--oem-blue); padding: 18px 24px; border-radius: 20px; box-shadow: 0 15px 30px #100d5550; display: grid; grid-template-columns: 30px 1fr; column-gap: 8px; align-items: center;}
.oem-hero__note > span {grid-row: span 2; background: #e3dcff; border-radius: 10px; padding: 7px; font-size: 20px;}
.oem-hero__note strong {font: 600 23px Oswald;}
.oem-hero__note small {font-size: 10px;}

.oem-about {background: var(--oem-cream);}
.oem-about__intro {display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; margin: 15px 0 55px;}
.oem-about__intro p {border-left: 2px solid var(--oem-lavender); padding-left: 30px; font-size: 19px; line-height: 1.65; margin: 0;}
.oem-stats {background: white; border-radius: 30px; box-shadow: 0 15px 35px #211c8710; display: grid; grid-template-columns: repeat(3, 1fr); padding: 34px 20px; text-align: center;}
.oem-stats > div {display: flex; flex-direction: column;}
.oem-stats strong {font: 600 45px Oswald; line-height: 1.1;}
.oem-stats span {font-size: 12px; color: var(--color-text);}

.oem-history {background: var(--oem-lavender);}
.oem-history__grid {display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center;}
.oem-history__visual {position: relative;}
.oem-history__visual img {width: 100%; height: 410px; object-fit: cover; border-radius: 42px 110px 42px 42px;}
.oem-year {position: absolute; right: 15px; bottom: -16px; background: var(--oem-blue); color: white; border-radius: 20px; padding: 12px 20px; display: flex; flex-direction: column;}
.oem-year small {text-transform: uppercase; letter-spacing: .2em; font-size: 10px;}
.oem-year strong {font: 600 32px Oswald;}
.oem-history__copy h2 {margin: 17px 0 24px;}
.oem-history__copy p {font-size: 15px; line-height: 1.75; margin-bottom: 18px;}

.oem-values {background: var(--oem-cream);}
.oem-section-heading--center {text-align: center; max-width: 760px; margin: 0 auto 48px;}
.oem-section-heading h2 {margin: 15px 0;}
.oem-section-heading p {font-size: 15px; color: var(--color-text);}
.oem-values__grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px;}
.oem-value {background: #fff; border-radius: 28px; padding: 30px; min-height: 245px; position: relative;}
.oem-value__icon {display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; font-size: 26px;}
.oem-value__icon--purple {background: #d9d0ff;}
.oem-value__icon--yellow {background: var(--oem-yellow);}
.oem-value__icon--mint {background: var(--oem-mint);}
.oem-value__number {position: absolute; top: 25px; right: 25px; color: #e7e7f1; font: 600 35px Oswald !important;}
.oem-value h3 {font-size: 23px; margin: 24px 0 10px;}
.oem-value p {font-size: 14px; line-height: 1.55; color: var(--color-text);}

.oem-news {background: white;}
.oem-news__heading {display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 38px;}
.oem-news__heading h2 {margin-top: 15px;}
.oem-news__grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;}
.oem-article__image {position: relative; overflow: hidden; border-radius: 26px; margin-bottom: 20px;}
.oem-article__image img {width: 100%; height: 215px; object-fit: cover; transition: transform .3s;}
.oem-article:hover img {transform: scale(1.04);}
.oem-article__image > span {position: absolute; top: 13px; left: 13px; border-radius: 20px; background: #e7e1ff; color: var(--oem-blue); padding: 6px 12px; font-size: 11px; font-weight: 600;}
.oem-article:nth-child(2) .oem-article__image > span {background: var(--oem-yellow);}
.oem-article:nth-child(3) .oem-article__image > span {background: #e6c9ef;}
.oem-article time {display: block; color: var(--color-text); font-size: 12px; margin-bottom: 10px;}
.oem-article h3 {font-size: 24px; line-height: 1.18 !important; margin-bottom: 18px;}

.oem-contact {background: #5488df; padding: 65px 0;}
.oem-contact__panel {background: var(--oem-blue); border-radius: 35px; padding: 48px 65px; display: flex; justify-content: space-between; align-items: center; gap: 35px; position: relative; overflow: hidden; color: white;}
.oem-contact__panel::after {content: ""; position: absolute; right: -35px; top: -60px; width: 180px; height: 180px; border: 28px solid #ffffff20; border-radius: 50%; pointer-events: none;}
.oem-contact h2 {font-size: clamp(30px, 3vw, 43px); margin-top: 15px;}
.oem-contact .oem-button {position: relative; z-index: 1; white-space: nowrap;}

.oem-partners {background: var(--oem-cream); text-align: center; padding: 65px 0;}
.oem-partners__grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; margin: 25px 0;}
.oem-partners__grid > div {background: white; min-height: 75px; border-radius: 13px; display: grid; place-items: center; padding: 12px; font-size: 16px; font-weight: 600; color: var(--color-text);}

.home .site-footer {margin-top: 0;}

@media (max-width: 900px) {
    .oem-section {padding: 75px 0;}
    .oem-hero__grid, .oem-history__grid {gap: 45px;}
    .oem-hero__visual > img {height: 420px;}
    .oem-hero h1 {font-size: 58px;}
    .oem-about__intro {gap: 30px;}
    .oem-history__visual img {height: 360px;}
    .oem-value {padding: 22px;}
    .oem-article__image img {height: 170px;}
}

@media (max-width: 700px) {
    .oem-section {padding: 60px 0;}
    .oem-hero {padding: 55px 0 80px;}
    .oem-hero__grid, .oem-about__intro, .oem-history__grid {grid-template-columns: 1fr;}
    .oem-hero__grid {gap: 55px;}
    .oem-hero h1 {font-size: clamp(48px, 11vw, 68px);}
    .oem-hero__visual {width: calc(100% - 35px);}
    .oem-hero__visual > img {height: 380px;}
    .oem-hero__note {left: -15px;}
    .oem-about__intro {gap: 20px; margin-bottom: 35px;}
    .oem-about__intro p {padding-left: 18px;}
    .oem-stats {padding: 25px 10px; gap: 8px;}
    .oem-stats strong {font-size: 31px;}
    .oem-stats span {font-size: 10px;}
    .oem-history__grid {gap: 45px;}
    .oem-history__visual img {height: 320px;}
    .oem-values__grid {grid-template-columns: 1fr;}
    .oem-value {min-height: 0;}
    .oem-news__grid {grid-template-columns: 1fr;}
    .oem-news__heading {align-items: start; flex-direction: column;}
    .oem-article__image img {height: 240px;}
    .oem-contact__panel {padding: 35px 25px; align-items: start; flex-direction: column;}
    .oem-partners__grid {grid-template-columns: repeat(2, 1fr); gap: 12px;}
    .oem-home h2 {font-size: 40px;}
}

@media (prefers-reduced-motion: reduce) {
    .oem-home * {transition: none !important;}
}

/* END HOME */