/*
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: 'fraunces';
 src: url('fonts/fraunces-latin-standard-normal.woff2') format('woff2');
 font-weight: 500;
 font-style: normal;
 font-display: swap;
}
@font-face {
 font-family: 'fraunces';
 src: url('fonts/fraunces-latin-standard-italic.woff2') format('woff2');
 font-weight: 500;
 font-style: italic;
 font-display: swap;
}
@font-face {
 font-family: 'fraunces';
 src: url('fonts/fraunces-latin-wght-normal.woff2') format('woff2');
 font-weight: 600;
 font-style: normal;
 font-display: swap;
}
@font-face {
 font-family: 'fraunces';
 src: url('fonts/fraunces-latin-wght-italic.woff2') format('woff2');
 font-weight: 600;
 font-style: italic;
 font-display: swap;
}
@font-face {
 font-family: 'fraunces';
 src: url('fonts/fraunces-latin-wonk-normal.woff2') format('woff2');
 font-weight: 900;
 font-style: normal;
 font-display: swap;
}
@font-face {
 font-family: 'fraunces';
 src: url('fonts/fraunces-latin-wonk-italic.woff2') format('woff2');
 font-weight: 900;
 font-style: italic;
 font-display: swap;
}
@font-face {
 font-family: 'DM-Sans';
 src: url('fonts/dm-sans-latin-opsz-normal.woff2') format('woff2');
 font-weight: 300;
 font-style: normal;
 font-display: swap;
}
@font-face {
 font-family: 'DM-Sans';
 src: url('fonts/dm-sans-latin-opsz-italic.woff2') format('woff2');
 font-weight: 300;
 font-style: italic;
 font-display: swap;
}
@font-face {
 font-family: 'DM-Sans';
 src: url('fonts/dm-sans-latin-standard-normal.woff2') format('woff2');
 font-weight: 500;
 font-style: normal;
 font-display: swap;
}
@font-face {
 font-family: 'DM-Sans';
 src: url('fonts/dm-sans-latin-standard-italic.woff2') format('woff2');
 font-weight: 500;
 font-style: italic;
 font-display: swap;
}
@font-face {
 font-family: 'DM-Sans';
 src: url('fonts/dm-sans-latin-wght-normal.woff2') format('woff2');
 font-weight: 600;
 font-style: normal;
 font-display: swap;
}
@font-face {
 font-family: 'DM-Sans';
 src: url('fonts/dm-sans-latin-wght-italic.woff2') format('woff2');
 font-weight: 600;
 font-style: italic;
 font-display: swap;
}
@font-face {
 font-family: 'Lora';
 src: url('fonts/lora-latin-wght-normal.woff2') format('woff2');
 font-weight: 500;
 font-style: normal;
 font-display: swap;
}
@font-face {
 font-family: 'Georgia';
 src: url('fonts/Georgia-Italic.woff2') format('woff2');
 font-weight: 500;
 font-style: italic;
 font-display: swap;
}


:root {
  --color-bg: #F1ECE3;
  --color-text: #1D1A17;
  --color-text-gray: #8A8278;
  --color-primary: #C83920;
  --color-title: #1D1A17;
  --color-border: #DFDAD3;
}


/* START CSS général */
* {font-family: 'DM-Sans';}
h1, h2, h3, h4, h5 {font-family: 'fraunces'; text-transform: uppercase; line-height: 1 !important;}
h2 {font-size: 90px;}
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;}
.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;}
.btn-link svg {height: 16px; fill: currentColor;}
.big-p p {font-size: 18px; font-family: 'Lora';}
.btn-right {margin: 0 0 0 auto;}
/* END CSS général */

 
/* START HEADER */
.site-main {margin-top: -68px;}
.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 {text-decoration: none !important; color: var(--color-bg); font-family: 'fraunces'; text-transform: uppercase; font-weight: 600; letter-spacing: 4px; font-size: 20px; transition: .3s;}
header .menu-item a {text-decoration: none; text-transform: uppercase; font-size: 14px; letter-spacing: 2px; color: var(--color-bg); 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 */
.hero-home {padding: 160px 0 100px 0; position: relative; overflow: hidden; background: var(--color-title);}
.hero-home > img {object-fit: cover; opacity: 55%; mix-blend-mode: luminosity; position: absolute; top: 0; height: 100%; width: 100%;}
.overlay-hero {height: 100%; width: 100%; position: absolute; top: 0; left: 0; background: color-mix(in srgb, #1A1814 90%, transparent); opacity: .1;}
.hero-home .container {position: relative;}
.hero-home h1 {color: var(--color-bg); font-family: 'DM-Sans' !important; text-transform: uppercase; font-size: 14px; letter-spacing: 2px; font-weight: 300;}
.home-big-title {color: var(--color-bg); text-transform: uppercase; font-family: 'fraunces'; font-size: 140px; font-weight: 900; font-style: italic; max-width: 900px; line-height: 1; margin-bottom: 0 !important;}
.home-hero-list-services {padding: 0; list-style: none; display: flex; gap: 50px; color: var(--color-bg); letter-spacing: 2px; font-size: 14px; opacity: .7;}
.home-hero-list-services li {position: relative; color: var(--color-bg)}
.home-hero-list-services li:not(:first-child):before {content: ""; width: 12px; height: 1px; background: var(--color-border); display: block; position: absolute; left: -33px; top: 12px; opacity: .5;}
.hero-defilement {color: var(--color-bg); text-transform: uppercase; font-size: 10px; letter-spacing: 4px; opacity: .4; rotate: 90deg; position: absolute; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px;}
.hero-defilement::after {content: ""; display: block; width: 7px; height: 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(-45deg); animation: defilement-arrow 1.4s ease-in-out infinite;}

@keyframes defilement-arrow {
    0%,
    100% {transform: translateX(0) rotate(-45deg);}
    50% {transform: translateX(7px) rotate(-45deg);}
}

.sect1-home, .sect2-home, .sect5-home {border-bottom: solid 1px var(--color-border);}

.story-accordion {margin-top: 60px; border-top: 1px solid rgba(0, 0, 0, .15);}
.story-item {border-bottom: 1px solid rgba(0, 0, 0, .15);}
.story-item__trigger {appearance: none; width: 100%; padding: 30px 0; display: grid; grid-template-columns: 80px 1fr auto; grid-template-areas: "roman title right" "roman subtitle right"; align-items: center; column-gap: 0; row-gap: 8px; border: 0; background: transparent; color: inherit; text-align: left; font: inherit; cursor: pointer;}
.story-item__roman {grid-area: roman; align-self: start; color: var(--color-primary); font-family: inherit; font-size: 24px; font-weight: 700; line-height: 1; font-family: 'fraunces'; padding-top: 2px;}
.story-item__title {grid-area: title; margin: 0; padding: 0; font-size: 30px; line-height: 1; text-transform: uppercase;}
.story-item__title-small {grid-area: subtitle; display: block; font-size: 10px; font-weight: 400; line-height: 1.4; letter-spacing: 3px; opacity: .55;}
.story-item__right {grid-area: right; display: flex; align-items: center; justify-content: flex-end; padding-left: 30px;}
.story-item__icon {position: relative; display: block; width: 14px; height: 14px; opacity: .5;}
.story-item__icon::before,
.story-item__icon::after {content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 1px; background: currentColor; transform: translate(-50%, -50%); transition: transform .3s ease, opacity .3s ease;}
.story-item__icon::after {transform: translate(-50%, -50%) rotate(90deg);}
.story-item.is-open .story-item__icon::after {transform: translate(-50%, -50%) rotate(0deg);}
.story-item__content {display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s ease;}
.story-item__content-inner {overflow: hidden; padding-left: 80px;}
.story-item__content p {max-width: 520px; margin: 0; padding: 0 0 30px; font-size: 16px; line-height: 1.7; opacity: .7;}
.story-item.is-open .story-item__content {grid-template-rows: 1fr;}
.story-item__trigger {transition: opacity .25s ease;}
.story-item:not(.is-open) .story-item__trigger:hover {opacity: .65;}
.sect4-home .bloc-sect4-home > .col-sect4-home:first-child {width: 40%; position: relative; overflow: hidden;}
.sect4-home .bloc-sect4-home > .col-sect4-home:first-child img {object-fit: cover; height: 100%; width: 100%; overflow: hidden; position: absolute; transition: .4s; transform: scale(1);}
.sect4-home .bloc-sect4-home > .col-sect4-home:first-child:hover img {transform: scale(1.04);}
.sect4-home .bloc-sect4-home > .col-sect4-home:last-child {width: 60%; padding: 40px; max-width: 700px; position: relative;}
.sect4-home .bloc-sect4-home > .col-sect4-home:last-child em {color: var(--color-bg); font-family: 'Georgia'; font-size: 30px; line-height: 1.5; margin-bottom: 30px; display: block;}
.sect4-home .bloc-sect4-home > .col-sect4-home:last-child .p > * {color: #97928C;}
.sect4-home .bloc-sect4-home .col-sect4-home-list {display: flex; flex-wrap: wrap; gap: 15px; list-style: none; padding: 0; margin-top: 30px;}
.sect4-home .bloc-sect4-home .col-sect4-home-list li {color: #97928C; border: solid 1px #4F4B48; padding: 5px 12px; text-transform: uppercase; font-size: 12px; letter-spacing: 2px;}
.bloc-sect5-home .col-sect5-home {position: relative;}
.bloc-sect5-home .col-sect5-home:first-child:after {content:""; width: 1px; height: 100%; display: block; position: absolute; right: -50px; background: var(--color-border); top: 0;}
.bloc-sect5-home .col-sect5-home:last-child {display: flex; flex-direction: column; gap: 20px;}
.bloc-sect5-home .col-sect5-home:last-child p {margin: 0;}
.bloc-sect5-home .col-sect5-home:last-child .title {font-size: 12px; color: var(--color-primary); letter-spacing: 3px; text-transform: uppercase;}
.bloc-sect5-home .col-sect5-home:last-child p:not(.title) {color: var(--color-text-gray);}
.sect6-home h2 {margin-bottom: 0;}
.list-articles-home {display: flex; flex-direction: column; margin-top: 60px;}
.list-articles-home .bloc-list-article-home {display: flex; gap: 40px; border-top: solid 1px var(--color-border);}
.list-articles-home .bloc-list-article-home .bloc-list-article-home-img {position: relative; overflow: hidden; width: 48%;}
.list-articles-home .bloc-list-article-home .bloc-list-article-home-img img {object-fit: cover; height: 100%; width: 100%; overflow: hidden; position: absolute; transition: .4s; transform: scale(1);}
.list-articles-home .bloc-list-article-home .bloc-list-article-home-content {width: 52%; padding: 25px 0;}
.list-articles-home .bloc-list-article-home:nth-of-type(even) {flex-direction: row-reverse;}
.bloc-list-article-home-content-head {display: flex; gap: 15px;}
.bloc-list-article-home-content-head .category {color: var(--color-bg); background: var(--color-primary); text-transform: uppercase; font-size: 11px; letter-spacing: 2px; padding: 2px 8px;}
.bloc-list-article-home-content-head .date, .bloc-list-article-home-content-head .time {font-size: 12px; letter-spacing: 2px; color: var(--color-text-gray);}
.list-articles-home .bloc-list-article-home a {text-decoration: none !important;}
.list-articles-home .bloc-list-article-home .title {text-transform: initial; line-height: 1.2 !important; font-size: 24px;}



@media (max-width: 767px) {
    .story-accordion {margin-top: 40px;}
    .story-item__trigger { padding: 24px 0; grid-template-columns: 45px 1fr 20px; grid-template-areas:"roman title right""roman subtitle right"; column-gap: 10px;}
    .story-item__roman {font-size: 18px;}
    .story-item__title {font-size: 22px;}
    .story-item__title-small {font-size: 9px; letter-spacing: 1.5px;}
    .story-item__right {padding-left: 0;}
    .story-item__content-inner {padding-left: 55px;}
    .story-item__content p {padding-right: 20px; padding-bottom: 25px; font-size: 14px;}
}

/* END HOME */