intermediaire.
On cible donc le wrapper interne pour le flex layout, et le wrapper externe est neutre. --- */
.default-cards.articles,
.default-cards.articles .articles {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}
.default-cards.articles .article {
flex: 0 1 calc((100% - 40px) / 3);
cursor: pointer;
display: flex;
flex-direction: column;
border-radius: 10px;
overflow: hidden;
box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
background-color: #fff;
transition: transform var(--transition), box-shadow var(--transition);
text-decoration: none;
color: inherit;
}
.default-cards.articles .article:hover {
transform: translateY(-3px);
box-shadow: rgba(149, 157, 165, 0.4) 0 16px 40px;
}
.default-cards.articles .article:hover .article-image img { transform: scale(1.05); }
.default-cards.articles .article:hover .article-container .title { color: var(--color-main-1); }
.default-cards.articles .article:hover .read-more { border-color: var(--color-main-1); }
.default-cards.articles .article-image {
display: block;
width: 100%;
aspect-ratio: 16/9;
overflow: hidden;
text-decoration: none;
}
.default-cards.articles .article-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform var(--transition);
}
.default-cards.articles .article-container {
display: flex;
flex-direction: column;
padding: 20px;
flex-grow: 1;
gap: 12px;
}
.default-cards.articles .article-container .article-wrapper {
display: flex;
flex-direction: column;
gap: 12px;
flex-grow: 1;
}
.default-cards.articles .article-container .title {
text-decoration: none;
font-size: clamp(20px, 2vw, 26px);
color: var(--color-text);
line-height: 1.3;
margin: 0;
transition: color var(--transition);
}
.default-cards.articles .article-container .title h2 {
margin: 0;
font-size: inherit;
color: inherit;
line-height: inherit;
font-weight: 600;
}
.default-cards.articles .article-container .excerpt {
font-size: 15px;
line-height: 1.6;
color: var(--color-text);
margin: 0;
flex-grow: 1;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.default-cards.articles .article-container .read-more {
align-self: flex-start;
color: var(--color-main-1);
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.03em;
text-decoration: none;
border-bottom: 2px solid transparent;
padding-bottom: 2px;
transition: border-color var(--transition);
}
/* Variante V1 (sans wrapper .articles intermediaire) : badge categorie */
.default-cards.articles .article-container .category-badge {
display: inline-block;
width: fit-content;
padding: 5px 12px;
background-color: var(--color-main-1);
color: #fff;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
border-radius: 4px;
}
@media (max-width: 900px) {
.default-cards.articles,
.default-cards.articles .articles { justify-content: flex-start; }
}
@media (max-width: 600px) {
.default-cards.articles .article { flex: 0 1 100%; }
}
/* ---- default-double-col : texte + image cote-a-cote (applique via primary_class sur block-text-image) ---- */
.default-double-col .content-wrapper,
.block-text-image .content-wrapper {
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: 50px;
row-gap: 30px;
}
.default-double-col .media-container,
.default-double-col .text-container,
.block-text-image .media-container,
.block-text-image .text-container {
flex-grow: 1;
flex-basis: 450px;
}
.default-double-col .media-container,
.block-text-image .media-container {
transition: transform var(--transition), box-shadow var(--transition);
box-shadow: var(--shadow-card);
overflow: hidden;
border-radius: var(--radius);
border: 1px solid var(--color-border);
}
.default-double-col .media-container:hover,
.block-text-image .media-container:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.default-double-col .media-container img,
.block-text-image .media-container img {
width: 100%; height: 100%;
object-fit: cover; object-position: center;
aspect-ratio: 4 / 3;
transition: transform var(--transition);
}
.default-double-col .media-container:hover img,
.block-text-image .media-container:hover img { transform: scale(1.05); }
.block-text-image.position-left .content-wrapper,
.default-double-col.position-left .content-wrapper { flex-direction: row-reverse; }
/* Bouton du double-col : largeur au contenu, sur sa propre ligne.
align-self/fit-content -> si le .text-container ou .content est en flex,
le bouton ne s'etire plus pleine largeur jusqu'aux bords. */
.default-double-col .text-container .link {
display: inline-block;
width: fit-content;
max-width: 100%;
align-self: flex-start;
}
/* ============================================================ */
/* 7. Header */
/* Design fidele au Template actuel V1 : */
/* - top-bar fond clair, items boutons verts, social a droite */
/* - menu wrapper blanc, logo gauche, menu centre, hamburger droite (mobile) */
/* - sticky au scroll */
/* - desktop (>=1201px) : sub-menus en hover overlay vert */
/* - mobile (<=1200px) : panel vert slide depuis le haut */
/* ============================================================ */
.site-header {
display: flex;
flex-direction: column;
position: relative;
}
/* ---- Top bar ---- */
.site-header .top-bar {
background-color: #f8f9fa;
border-bottom: 1px solid #e9ecef;
position: relative;
z-index: 15;
}
.site-header .top-bar-container {
width: var(--width-content);
max-width: 95%;
margin-inline: auto;
padding-block: 8px;
display: flex;
align-items: center;
justify-content: flex-end;
column-gap: 20px;
}
.site-header .top-bar #menu-menu-topbar {
display: flex;
gap: 5px;
list-style: none;
margin: 0;
padding: 0;
}
.site-header .top-bar .menu-item { list-style: none; }
.site-header .top-bar .menu-item a {
display: block;
text-decoration: none;
background-color: var(--color-main-1);
color: #fff;
padding: 2px 10px;
border-radius: 3px;
border: 1px solid var(--color-main-1);
transition: background-color var(--transition), color var(--transition);
font-size: var(--fs-small);
}
.site-header .top-bar .menu-item a:hover {
background-color: transparent;
color: var(--color-main-1);
}
.site-header .top-bar .social-links {
display: flex;
align-items: center;
gap: 12px;
}
.site-header .top-bar .social-network-icon {
display: flex;
align-items: center;
transition: transform var(--transition);
}
.site-header .top-bar .social-network-icon img {
width: 20px;
height: 20px;
filter: var(--svg-main-1);
transition: filter var(--transition);
}
.site-header .top-bar .social-network-icon:hover { transform: translateY(-2px); }
@media (max-width: 768px) {
.site-header .top-bar-container { justify-content: center; }
.site-header .top-bar .social-links { display: none; }
}
/* ---- Menu wrapper (logo + menu) ---- */
.site-header .menu-wrapper {
position: relative;
background-color: var(--color-bg);
transition: background-color var(--transition);
z-index: 50;
}
.site-header .menu-wrapper-container {
width: var(--width-content);
max-width: 95%;
margin-inline: auto;
padding-block: 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
.site-header .logo-site img {
display: block;
max-width: 110px;
height: auto;
}
.site-header .menu-header {
display: flex;
align-items: center;
gap: 20px;
}
.site-header .menu-header .site-navigation { display: flex; }
.site-header .menu-header ul {
display: flex;
gap: 20px;
list-style: none;
margin: 0;
padding: 0;
font-size: var(--fs-body);
}
.site-header .menu-header a {
font-family: var(--font-base);
text-decoration: none;
color: var(--color-text);
transition: color var(--transition);
}
.site-header .menu-header .menu-item.cta {
padding: 13px 35px;
background-color: var(--color-main-1);
border-radius: 5px;
}
.site-header .menu-header .menu-item.cta a { color: #fff; }
.site-header .menu-header .menu-item-has-children > a {
display: flex;
align-items: center;
gap: 8px;
position: relative;
}
.site-header .menu-header .menu-chevron {
display: inline-flex;
align-items: center;
}
.site-header .menu-header .menu-chevron svg {
width: 16px; height: 16px;
color: var(--color-text);
transition: transform var(--transition);
}
/* ---- Sticky variant (au scroll) ---- */
.site-header .menu-wrapper.sticky {
position: fixed;
top: 0; left: 0; right: 0;
width: 100%;
background-color: var(--color-bg);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 50;
animation: ntwSlideDown 0.3s ease-out forwards;
}
body.admin-bar .site-header .menu-wrapper.sticky { top: 32px; }
@media (max-width: 782px) {
body.admin-bar .site-header .menu-wrapper.sticky { top: 46px; }
}
@media (max-width: 600px) {
body.admin-bar .site-header .menu-wrapper.sticky { top: 0; }
}
/* Filet de securite : si pour une raison X le bump WP n'est pas injecte, on decale nous-memes */
html.admin-bar-fallback,
body.admin-bar-fallback { margin-top: 32px; }
@media screen and (max-width: 782px) {
html.admin-bar-fallback,
body.admin-bar-fallback { margin-top: 46px; }
}
@keyframes ntwSlideDown {
from { opacity: 0; transform: translateY(-100%); }
to { opacity: 1; transform: translateY(0); }
}
/* ---- Overlay derriere les sub-menus desktop ---- */
.overlay-menu {
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
inset: 0;
z-index: 5;
backdrop-filter: blur(4px);
visibility: hidden;
opacity: 0;
transition: visibility var(--transition), opacity var(--transition);
}
.overlay-menu.active { visibility: visible; opacity: 1; }
/* ============================================================ */
/* Desktop (>= 1201px) : sub-menus en hover */
/* ============================================================ */
@media (min-width: 1201px) {
.site-header .menu-header ul {
align-items: center;
}
.site-header .menu-header .sub-menu {
display: none;
list-style: none;
background-color: var(--color-main-1);
border-radius: 10px;
padding: 0;
margin: 0;
}
.site-header .menu-header .menu-item { position: static; }
.site-header .menu-header .menu-item:hover { position: relative; }
.site-header .menu-header .menu-item:hover > a { color: var(--color-main-1); }
.site-header .menu-header .menu-item:hover .sub-menu {
display: block;
width: max-content;
min-width: 220px;
position: absolute;
top: 61px;
left: 50%;
transform: translateX(-50%);
z-index: 60;
}
/* zone "buffer" pour ne pas perdre le hover entre item et sub-menu */
.site-header .menu-header .menu-item-has-children > a::after {
content: "";
position: absolute;
top: 100%; left: 0;
width: 100%; height: 60px;
display: block;
}
.site-header .menu-header .menu-item-has-children:hover .menu-chevron svg {
transform: rotate(180deg);
color: var(--color-main-1);
}
.site-header .menu-header .sub-menu .menu-item {
border-bottom: 1px solid rgba(229, 229, 229, 0.2);
}
.site-header .menu-header .sub-menu .menu-item:last-child { border-bottom: none; }
.site-header .menu-header .sub-menu a {
display: block;
padding: 13px 16px 11px;
font-size: 15px;
color: #fff;
transition: transform var(--transition);
}
.site-header .menu-header .sub-menu a:hover {
transform: translateX(3px);
color: #fff;
}
/* overlay s'active automatiquement quand un sub-menu est hover */
.site-header:has(.menu-item-has-children:hover) ~ .overlay-menu,
.site-header:has(.menu-item-has-children:hover) .overlay-menu {
visibility: visible;
opacity: 1;
}
.hamburger { display: none; }
/* Header interne du drawer (logo + close) : mobile only */
.site-navigation .mobile-drawer-header { display: none; }
}
/* ============================================================ */
/* Mobile (<= 1200px) : drawer full 100dvh fond blanc + hamburger */
/* - Slide depuis le haut, couvre tout le viewport */
/* - Header interne avec logo + bouton close */
/* - Items modernes (light, hairline separators, no uppercase) */
/* ============================================================ */
@media (max-width: 1200px) {
.site-header { z-index: 15; }
.site-header .menu-header { position: relative; }
/* Drawer : full viewport, fond blanc, slide depuis le haut */
.site-header .menu-header .site-navigation {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100dvh;
max-height: 100dvh;
background-color: var(--color-bg);
border-radius: 0;
box-shadow: none;
z-index: 100;
transform: translateY(-100%);
opacity: 1;
visibility: hidden;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s;
overflow-y: auto;
padding: 0;
display: flex;
flex-direction: column;
}
.site-header .menu-header .site-navigation.menu-active {
transform: translateY(0);
visibility: visible;
}
/* Compensation admin bar WP (logged-in) */
body.admin-bar .site-header .menu-header .site-navigation {
top: 32px;
height: calc(100dvh - 32px);
max-height: calc(100dvh - 32px);
}
/* Header interne du drawer (logo + close) */
.site-navigation .mobile-drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 20px;
background-color: var(--color-bg);
border-bottom: 1px solid var(--color-bg-muted);
position: sticky;
top: 0;
z-index: 5;
flex-shrink: 0;
}
.site-navigation .mobile-drawer-logo img {
display: block;
max-width: 100px;
height: auto;
}
.site-navigation .mobile-drawer-close {
background: transparent;
border: 0;
padding: 6px;
color: var(--color-text);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background var(--transition-fast), color var(--transition-fast);
}
.site-navigation .mobile-drawer-close:hover,
.site-navigation .mobile-drawer-close:focus-visible {
background: var(--color-bg-soft);
color: var(--color-main-1);
}
/* Liste des items du menu : flow vertical, hairline separators */
.site-header .menu-header ul {
flex-direction: column;
gap: 0;
padding: 8px 0 24px;
margin: 0;
list-style: none;
}
.site-header .menu-header > .site-navigation > div > ul > li,
.site-header .menu-header .site-navigation > ul > li {
padding: 0;
margin: 0;
gap: 0;
display: flex;
flex-direction: column;
border-bottom: 1px solid var(--color-bg-muted);
width: 100%;
}
.site-header .menu-header .site-navigation > div > ul > li:last-child,
.site-header .menu-header .site-navigation > ul > li:last-child {
border-bottom: none;
}
/* Lien d'item de menu : grande zone de tap, dark text, no uppercase */
.site-header .menu-header a {
color: var(--color-text);
text-transform: none;
font-size: 17px;
font-weight: 500;
display: block;
padding: 18px 20px;
line-height: 1.3;
transition: color var(--transition-fast), background var(--transition-fast);
}
.site-header .menu-header a:hover,
.site-header .menu-header a:focus-visible {
color: var(--color-main-1);
background: var(--color-bg-soft);
}
/* CTA (si present dans le menu) : en bouton vert plein largeur */
.site-header .menu-header .menu-item.cta {
margin: 12px 20px 0;
border: none;
border-radius: 999px;
overflow: hidden;
}
.site-header .menu-header .menu-item.cta a {
padding: 14px 24px;
text-align: center;
background: var(--color-main-1);
color: #fff;
}
.site-header .menu-header .menu-item.cta a:hover {
background: var(--color-main-1-hover);
color: #fff;
}
.site-header .menu-header .menu-chevron { display: none; }
/* Sub-menu WP natif (items avec enfants standards, hors mega) */
.site-header .menu-header .sub-menu {
display: flex;
flex-direction: column;
gap: 0;
list-style: none;
padding: 0 0 8px;
margin: 0;
}
.site-header .menu-header .sub-menu a {
font-size: 15px;
color: var(--color-text-soft);
opacity: 1;
text-transform: none;
padding: 12px 20px 12px 36px;
transition: color var(--transition-fast), background var(--transition-fast);
}
.site-header .menu-header .sub-menu a:hover {
color: var(--color-main-1);
background: var(--color-bg-soft);
}
/* Sticky variant : pas d'effet sur le drawer mobile (il est position:fixed top:0) */
.site-header .menu-wrapper.sticky .menu-header .site-navigation { top: 0; }
body.admin-bar .site-header .menu-wrapper.sticky .menu-header .site-navigation { top: 32px; }
body.body-fixed { overflow: hidden; }
/* Hamburger (style spin) */
.hamburger {
display: inline-block;
cursor: pointer;
background-color: transparent;
border: 0;
margin: 0;
padding: 0;
overflow: visible;
transition: opacity 0.15s, filter 0.15s;
}
.hamburger-box {
width: 30px;
height: 30px;
display: block;
position: relative;
z-index: 30;
}
.hamburger-inner {
display: block;
top: 50%;
margin-top: 0;
}
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
position: absolute;
width: 30px;
height: 2px;
background-color: var(--color-main-1);
border-radius: 10px;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease;
z-index: 30;
}
.hamburger-inner::before { content: ""; display: block; top: -9px; }
.hamburger-inner::after { content: ""; display: block; bottom: -9px; }
.hamburger--spin .hamburger-inner {
transition-duration: 0.22s;
transition-timing-function: cubic-bezier(.55,.055,.675,.19);
}
.hamburger--spin .hamburger-inner::before {
transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
}
.hamburger--spin .hamburger-inner::after {
transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(.55,.055,.675,.19);
}
.hamburger.burger-active .hamburger-inner {
transform: rotate(225deg);
transition-delay: 0.12s;
transition-timing-function: cubic-bezier(.215,.61,.355,1);
}
.hamburger.burger-active .hamburger-inner::before {
top: 0;
opacity: 0;
transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
}
.hamburger.burger-active .hamburger-inner::after {
bottom: 0;
transform: rotate(-90deg);
transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(.215,.61,.355,1);
}
}
/* ============================================================ */
/* 7bis. Mega Menu (hybride V2 + V4) */
/* - Active via classe CSS "mega-menu" sur un item du menu */
/* principal pointant vers un terme product_category Niv 2 */
/* - Largeur = .menu-wrapper-container (1200px, 95% max) */
/* - Desktop : hover ; Mobile : accordion dans le drawer */
/* ============================================================ */
/* Tokens additionnels (uniquement utilises par le mega menu) */
:root {
--color-text-soft: #5b585a;
--color-main-1-soft: #e6f5ee;
--shadow-mega: 0 30px 60px -20px rgba(15, 17, 16, .18), 0 8px 24px -8px rgba(15, 17, 16, .08);
}
/* Positionnement : le panel se cale sur .menu-wrapper-container */
.site-header .menu-wrapper-container { position: relative; }
.site-header .menu-header > li.mega-menu,
.site-header .menu-header > li.mega-menu:hover { position: static; }
.site-header .menu-header > li.mega-menu > a {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
position: relative;
}
/* Buffer invisible sous le trigger pour traverser les 10px de gap sans perdre le hover (desktop) */
@media (min-width: 1201px) {
.site-header .menu-header > li.mega-menu > a::after {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 14px;
display: block;
}
}
/* Le panel lui-meme : flottant 10px sous le header, border-radius complet */
.mega-panel {
position: absolute;
top: calc(100% + 10px);
left: 0;
right: 0;
width: 100%;
background: var(--color-bg);
box-shadow: var(--shadow-mega);
border-radius: var(--radius);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-8px);
transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
z-index: 60;
}
.mega-panel.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
/* Layout interne : 2 colonnes desktop */
.mega-panel .mega-inner {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 28px;
padding: 36px 32px 40px;
min-height: 380px;
}
/* ---- Panel gauche : titre + description + grille profils ---- */
.mega-panel .panel-left { min-width: 0; }
.mega-panel .mega-title {
font-family: var(--font-base);
font-size: 30px;
font-weight: 600;
line-height: 1.1;
letter-spacing: -.01em;
margin: 0 0 10px;
color: var(--color-text);
text-transform: none;
}
.mega-panel .mega-sub {
color: var(--color-text-soft);
font-size: 14px;
line-height: 1.55;
margin: 0 0 26px;
}
/* Grille profils : 2 colonnes, scroll interne au-dela de 2 rows */
.mega-panel .profile-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
max-height: 300px;
overflow-y: auto;
/* padding genereux pour ne pas couper le hover (translateY + box-shadow) */
padding: 6px 8px 14px 2px;
scrollbar-width: thin;
scrollbar-color: var(--color-border) transparent;
}
.mega-panel .profile-grid::-webkit-scrollbar { width: 6px; }
.mega-panel .profile-grid::-webkit-scrollbar-track { background: transparent; margin-block: 4px; }
.mega-panel .profile-grid::-webkit-scrollbar-thumb {
background: var(--color-border);
border-radius: 3px;
transition: background var(--transition-fast);
}
.mega-panel .profile-grid::-webkit-scrollbar-thumb:hover { background: var(--color-text-soft); }
/* Carte profil */
/* IMPORTANT : selecteur prefixe .site-header .menu-header pour battre la specificite
de la regle starter ".site-header .menu-header a { transition: color var(--transition) }"
qui sinon REMPLACE notre transition (la propriete transition n'est PAS additive en CSS). */
.site-header .menu-header .mega-panel .profile-card {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
border: 1px solid var(--color-border);
border-radius: 12px;
background: var(--color-bg);
text-decoration: none;
color: inherit;
text-transform: none;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.site-header .menu-header .mega-panel .profile-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px -8px rgba(15, 17, 16, .16);
border-color: #c8c8c8;
}
.site-header .menu-header .mega-panel .profile-card:hover .profile-card-name { color: var(--color-main-1); }
.mega-panel .profile-ico {
flex-shrink: 0;
width: 100px;
height: 50px;
object-fit: contain;
/* Force le rendu en noir : brightness(0) annule les couleurs et garde la transparence,
parfait pour PNG ou SVG monochromes uploades dans n'importe quelle couleur. */
filter: brightness(0);
}
.mega-panel .profile-card-meta {
display: flex;
flex-direction: column;
line-height: 1.25;
min-width: 0;
}
.mega-panel .profile-card-name {
font-size: 15px;
font-weight: 600;
color: var(--color-text);
transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.mega-panel .profile-card-dim {
font-size: 12px;
color: var(--color-text-soft);
margin-top: 3px;
}
.mega-panel .profile-card-desc {
font-size: 12px;
color: var(--color-text-soft);
margin-top: 4px;
line-height: 1.4;
}
/* ---- Panel droit : carte image entierement cliquable ---- */
.mega-panel a.panel-right {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
border-radius: 14px;
overflow: hidden;
background-color: #0f1110;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
color: #fff;
min-height: 340px;
text-decoration: none;
text-transform: none;
transition: transform var(--transition), box-shadow var(--transition);
}
.mega-panel a.panel-right:hover {
transform: translateY(-2px);
box-shadow: 0 18px 40px -12px rgba(15, 17, 16, .35);
}
.mega-panel a.panel-right::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(15, 17, 16, .05) 35%, rgba(15, 17, 16, .85) 100%);
}
.mega-panel .panel-right-content {
position: relative;
z-index: 1;
padding: 26px 28px;
display: block;
}
.mega-panel a.panel-right .panel-right-title {
display: block;
font-size: 26px;
font-weight: 600;
line-height: 1.1;
margin: 0 0 8px;
color: #fff;
}
.mega-panel a.panel-right .panel-right-sub {
display: block;
margin: 0 0 14px;
font-size: 14px;
color: rgba(255, 255, 255, .85);
max-width: none;
line-height: 1.5;
text-align: justify;
}
/* CTA "Decouvrir la collection" : effet bouton ghost (border blanche, fond transparent) */
.mega-panel a.panel-right .arrow {
display: inline-flex;
align-items: center;
padding: 9px 18px;
border: 1px solid #fff;
border-radius: 3px;
background: transparent;
font-size: 13px;
font-weight: 500;
color: #fff;
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mega-panel a.panel-right:hover .arrow {
background: #fff;
color: var(--color-text);
}
/* Overlay sombre quand un mega est ouvert.
Trois selecteurs : :has() pour les navigateurs modernes, .has-mega-open pose par JS
en fallback, et .overlay-menu-active deja pose par menuSlide() (compat). */
.site-header:has(.mega-panel.is-open) ~ .overlay-menu,
.site-header:has(.mega-panel.is-open) .overlay-menu,
body.has-mega-open .overlay-menu {
visibility: visible;
opacity: 1;
}
/* Chevron : rotation quand le mega est ouvert (desktop) */
@media (min-width: 1201px) {
.site-header .menu-header > li.mega-menu.is-active .menu-chevron svg,
.site-header .menu-header > li.mega-menu:has(.mega-panel.is-open) .menu-chevron svg {
transform: rotate(180deg);
color: var(--color-main-1);
}
}
/* ============================================================ */
/* Mega Menu — Mobile (<= 1200px) : integration dans le drawer */
/* Drawer est blanc (cf section au-dessus) -> palette claire */
/* ============================================================ */
@media (max-width: 1200px) {
/* Trigger mega : reutilise le style item + chevron a droite */
.site-header .menu-header > li.mega-menu > a {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
gap: 12px;
}
.site-header .menu-header > li.mega-menu .menu-chevron { display: inline-flex; }
.site-header .menu-header > li.mega-menu .menu-chevron svg {
color: var(--color-text-soft);
width: 18px;
height: 18px;
transition: transform var(--transition-fast), color var(--transition-fast);
}
.site-header .menu-header > li.mega-menu.is-active .menu-chevron svg {
transform: rotate(180deg);
color: var(--color-main-1);
}
.site-header .menu-header > li.mega-menu.is-active > a {
color: var(--color-main-1);
background: var(--color-bg-soft);
}
.mega-panel {
position: static;
opacity: 1;
visibility: visible;
transform: none;
pointer-events: auto;
box-shadow: none;
border-top: none;
border-radius: 0;
background: var(--color-bg-soft);
z-index: auto;
max-height: 0;
overflow: hidden;
transition: max-height var(--transition);
margin-top: 0;
}
.mega-panel.is-open {
max-height: 3000px;
}
.mega-panel .mega-inner {
display: flex;
flex-direction: column;
gap: 16px;
padding: 20px 20px 24px;
min-height: 0;
}
/* Image en haut sur mobile (avant le titre + profils) */
.mega-panel a.panel-right {
order: -1;
min-height: 220px;
border-radius: 12px;
}
.mega-panel .panel-right-content { padding: 22px; }
.mega-panel a.panel-right .panel-right-title { font-size: 22px; }
.mega-panel a.panel-right .panel-right-sub { font-size: 12.5px; }
/* Titre + description masques sur mobile (deja redondants avec le trigger + l'image) */
.mega-panel .mega-title,
.mega-panel .mega-sub { display: none; }
/* Grille profils : 2 cols puis 1 col plus bas, pas de scroll interne */
.mega-panel .profile-grid {
grid-template-columns: 1fr 1fr;
max-height: none;
overflow: visible;
padding: 0;
gap: 10px;
}
.mega-panel .profile-grid::-webkit-scrollbar { display: none; }
.mega-panel .profile-card {
background: var(--color-bg);
border-color: var(--color-border);
}
.mega-panel .profile-card:hover {
background: var(--color-bg);
border-color: var(--color-border);
transform: none;
box-shadow: 0 4px 12px -2px rgba(15, 17, 16, .08);
}
.mega-panel .profile-card-name { color: var(--color-text); }
.mega-panel .profile-card-dim,
.mega-panel .profile-card-desc { color: var(--color-text-soft); }
/* Override : neutralise les regles globales du menu mobile (.menu-header a)
sur les liens INSIDE le mega panel (padding, font, color, background). */
.site-header .menu-header .mega-panel a,
.site-header .menu-header .mega-panel a:hover {
padding: 0;
background: transparent;
text-transform: none;
font-size: inherit;
color: inherit;
display: flex;
}
.site-header .menu-header .mega-panel .profile-card {
padding: 14px 16px;
}
.site-header .menu-header .mega-panel .profile-card:hover {
background: var(--color-bg);
}
.site-header .menu-header .mega-panel a.panel-right { color: #fff; }
}
@media (max-width: 560px) {
.mega-panel .profile-grid { grid-template-columns: 1fr; }
}
/* ============================================================ */
/* Footer (style V1 fidele) */
/* ============================================================ */
.site-footer {
font-family: var(--font-base);
font-size: var(--fs-small);
background-color: var(--color-text);
color: #fff;
padding: var(--space-2) var(--space-1) var(--space-1);
}
.site-footer a { color: inherit; text-decoration: none; }
.site-footer .footer-container {
max-width: var(--width-content);
margin-inline: auto;
}
/* ---- Footer-top : 2 colonnes (logo+contact / menu) ---- */
.site-footer .footer-top {
display: flex;
column-gap: 50px;
}
.site-footer .footer-top .footer-col-left {
display: flex;
flex-direction: column;
gap: 55px;
}
.site-footer .footer-top .footer-col-left .logo-footer { width: 200px; }
.site-footer .footer-top .footer-col-left .logo-footer img {
display: block;
width: 100%;
height: auto;
}
.site-footer .contact-footer { font-size: 12px; }
.site-footer .contact-footer h3 {
font-size: 12px;
margin: 0;
padding-bottom: 10px;
text-transform: uppercase;
font-weight: normal;
}
.site-footer .contact-footer h3:last-of-type { padding-top: 10px; }
.site-footer .contact-footer a {
display: flex;
align-items: center;
column-gap: 10px;
row-gap: 3px;
width: max-content;
margin-bottom: 5px;
transition: transform var(--transition);
}
.site-footer .contact-footer a img {
width: 22px;
height: auto;
filter: var(--svg-white);
}
.site-footer .contact-footer a:hover { transform: translateX(3px); }
.site-footer .contact-footer a.infos-address { align-items: flex-start; }
.site-footer .contact-footer a.infos-tel { margin-bottom: 10px; }
.site-footer .contact-footer .address {
display: flex;
flex-direction: column;
gap: 5px;
}
.site-footer .footer-top .footer-col-right { width: 100%; }
.site-footer .menu-footer .site-navigation > div > ul,
.site-footer .menu-footer .site-navigation > ul,
.site-footer nav.menu-footer > div > ul,
.site-footer nav.menu-footer > ul {
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
row-gap: 30px;
column-gap: 20px;
margin: 0;
padding: 0;
}
.site-footer .menu-footer .menu-item-has-children,
.site-footer .menu-footer > ul > li.solo { padding-inline: 0; }
.site-footer .menu-footer .menu-item-has-children > a,
.site-footer .menu-footer > ul > li.solo > a,
.site-footer .menu-footer .site-navigation > div > ul > li > a,
.site-footer nav.menu-footer > div > ul > li > a {
display: flex;
align-items: center;
padding-bottom: 20px;
font-size: 12px;
color: #fff;
text-transform: uppercase;
text-decoration: none;
}
.site-footer .menu-footer .menu-item-has-children > a::after,
.site-footer .menu-footer .site-navigation > div > ul > li > a::after,
.site-footer nav.menu-footer > div > ul > li > a::after {
content: "";
height: 1px;
background-color: var(--color-main-1);
flex: 1 1 0;
margin-left: 10px;
}
.site-footer .menu-footer .sub-menu {
list-style: none;
display: flex;
flex-direction: column;
padding: 0;
margin: 0;
}
.site-footer .menu-footer .sub-menu .menu-item > a {
display: block;
color: #fff;
text-decoration: none;
transition: transform var(--transition), color var(--transition);
}
.site-footer .menu-footer .sub-menu .menu-item > a:hover {
color: var(--color-main-1);
transform: translateX(3px);
}
.site-footer .menu-footer li { list-style: none; }
/* ---- Footer-bottom : copyright + legal ---- */
.site-footer .footer-bottom {
display: flex;
flex-direction: column;
align-items: flex-start;
row-gap: 8px;
margin-top: 50px;
padding-top: 25px;
border-top: 1px solid rgba(255, 255, 255, 0.2);
color: #fff;
font-size: 12px;
}
.site-footer .footer-bottom .footer-col-left { width: 100%; }
.site-footer .footer-bottom .footer-col-left p { margin: 0; }
.site-footer .footer-bottom .nature-digitale-link,
.site-footer .footer-bottom .legal-infos a {
color: #fff;
transition: color var(--transition);
}
.site-footer .footer-bottom .nature-digitale-link:hover,
.site-footer .footer-bottom .legal-infos a:hover {
color: var(--color-main-1);
}
.site-footer .footer-bottom .legal-infos {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 5px;
}
@media (max-width: 834px) {
.site-footer .footer-top { flex-direction: column; row-gap: 50px; }
.site-footer .footer-top .footer-col-left { flex-direction: row; }
}
@media (max-width: 580px) {
.site-footer .footer-top .footer-col-left { flex-direction: column; row-gap: 25px; }
}
/* ============================================================ */
/* 8. Blocs */
/* ============================================================ */
/* ---- BLOC: banniere ---- */
.block-ban-container {
position: relative;
background-color: rgba(0, 0, 0, 0.2);
overflow: hidden;
}
/* Overlay degrade : assombrit l'image pour garder le texte blanc lisible
quelle que soit la luminosite du visuel. Plus dense cote texte (gauche).
Exclut .quote-ban qui a deja son propre traitement (::before). */
.block-ban-container:not(.quote-ban)::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(90deg, rgba(34, 31, 33, 0.78) 0%, rgba(34, 31, 33, 0.35) 60%, rgba(34, 31, 33, 0.15) 100%);
}
.block-ban-container .content {
width: var(--width-content);
max-width: 90%;
margin-inline: auto;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
padding-block: 20px;
position: relative;
z-index: 1;
}
.block-ban-container .content .title { color: #fff; margin-bottom: 20px; }
.block-ban-container .content .subtitle { font-size: clamp(22px, 2vw, 26px); font-weight: 300; color: #fff; margin: 0 0 20px; }
.block-ban-container .content .text { color: #fff; margin-bottom: 20px; }
.block-ban-container .btn { margin-top: 10px; align-self: flex-start; }
.block-ban-container .image {
position: absolute; inset: 0; z-index: 0;
width: 100%; height: 100%;
object-fit: cover; object-position: center;
}
/* Hero : hauteur mini + contenu centre verticalement (via flex sur .content).
Pages internes : 450px. Page d'accueil (body.home) : 750px. */
.block-ban-container.full-height {
min-height: 450px;
display: flex;
}
body.home .block-ban-container.full-height {
min-height: 750px;
}
/* En min-height, .content { height:100% } ne s'etire plus : on bascule sur flex
pour que le bloc contenu remplisse la hauteur et garde le centrage vertical. */
.block-ban-container.full-height .content {
height: auto;
}
/* ---- BLOC: title ---- */
.block-title-container.center { text-align: center; }
/* ---- BLOC: cards ----
PAS de styling sur .block-cards-container .card pour eviter d'ecraser
les variants .default-cards.{categorie|key-numbers|cta|articles} (V1 approach).
Le wrapper .block-cards-container sert juste de selector pour cibler le bloc HTML. */
/* ---- BLOC: btns ---- */
.block-btn-container .btn-container {
display: flex; flex-wrap: wrap; gap: 12px;
}
.block-btn-container.center .btn-container { justify-content: center; }
/* ---- BLOC: faqs (calque V1 : markup avec h3 dans .question, text-wrapper dans .answer) ---- */
.single .block-faqs.faq { padding-left: 0; }
.block-faqs.faq .faq-item {
margin-bottom: 20px;
border-radius: 10px;
overflow: hidden;
background-color: var(--color-bg-soft);
border: 1px solid var(--color-border);
}
.block-faqs.faq .question {
padding: 20px 50px 20px 20px;
cursor: pointer;
position: relative;
transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
.block-faqs.faq .question h3 {
font-size: 16px;
font-weight: 600;
margin: 0;
line-height: 1.4;
}
.block-faqs.faq .question::before {
content: "";
position: absolute;
right: 18px;
top: 50%;
width: 25px;
height: 25px;
background-image: url("assets/images/chevronDown.svg");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
transform: translateY(-50%) rotate(-90deg);
transition: transform 0.15s ease-in-out, filter 0.15s ease-in-out;
filter: var(--svg-main-1);
}
.block-faqs.faq .question:hover,
.block-faqs.faq .faq-item.expanded .question {
background-color: var(--color-main-1);
color: #fff;
}
.block-faqs.faq .question:hover::before,
.block-faqs.faq .faq-item.expanded .question::before {
filter: var(--svg-white);
}
.block-faqs.faq .faq-item.expanded .question::before {
transform: translateY(-50%) rotate(0deg);
}
.block-faqs.faq .answer {
height: 0;
overflow: hidden;
transition: height 0.2s ease-out;
}
.block-faqs.faq .faq-item.expanded .answer {
transition: height 0.5s ease-out;
}
.block-faqs.faq .answer .text-wrapper {
padding: 20px;
}
.block-faqs.faq .answer .text-wrapper p {
line-height: 1.6;
padding-bottom: 15px;
margin: 0;
}
.block-faqs.faq .answer .text-wrapper p:last-of-type {
padding-bottom: 0;
}
/* ---- BLOC: shortcode ---- */
.block-text-container { /* utilise par block-shortcode.php */ }
/* ---- BLOC: texte_image ---- */
.block-text-image .text-container .title { color: var(--color-text); margin-bottom: 24px; }
.block-text-image .text-container .text { line-height: 1.8; }
.block-text-image .text-container .text p { margin-bottom: 16px; }
.block-text-image .text-container .text a,
.block-text-image .text-container .text strong { color: var(--color-main-1); font-weight: 700; }
.block-text-image .text-container .text a { text-decoration: none; }
.block-text-image .text-container .text ul { padding-left: 18px; }
.block-text-image .text-container .text ul li::marker { color: var(--color-main-1); }
.block-text-image .text-container .link { margin-top: 24px; }
/* ---- BLOC: slider_images (calque V1 a l'identique, selecteurs 4 niveaux pour battre Swiper bundle) ---- */
.block-images-container {
width: 100%;
overflow: hidden;
}
.block-images-container .slider-images-swiper {
width: 100%;
padding: 20px 10px 50px;
}
.block-images-container .slider-images-swiper .swiper {
width: 100%;
overflow: visible;
}
.block-images-container .slider-images-swiper .swiper .swiper-wrapper {
display: flex;
}
.block-images-container .slider-images-swiper .swiper .swiper-slide {
width: auto;
height: auto;
border-radius: 10px;
overflow: hidden;
box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.block-images-container .slider-images-swiper .swiper .swiper-slide:hover {
transform: translateY(-5px);
box-shadow: rgba(149, 157, 165, 0.4) 0 16px 40px;
}
.block-images-container .slider-images-swiper .swiper .swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
aspect-ratio: 16/9;
}
.block-images-container .slider-images-swiper .swiper .swiper-pagination {
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
gap: 8px;
width: auto;
z-index: 10;
}
.block-images-container .slider-images-swiper .swiper .swiper-pagination .swiper-pagination-bullet {
width: 10px;
height: 10px;
background-color: #d1d5db;
border-radius: 50%;
opacity: 1;
margin: 0;
transition: all 0.3s ease;
cursor: pointer;
}
.block-images-container .slider-images-swiper .swiper .swiper-pagination .swiper-pagination-bullet:hover {
background-color: #9ca3af;
}
.block-images-container .slider-images-swiper .swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
background-color: var(--color-main-1);
width: 30px;
border-radius: 5px;
}
/* Anti-FOUC : avant que Swiper ait initialise, on impose un layout grille pour eviter l'image enorme */
.block-images-container .slider-images-swiper .swiper:not(.swiper-initialized) {
overflow: hidden;
}
.block-images-container .slider-images-swiper .swiper:not(.swiper-initialized) .swiper-wrapper {
flex-wrap: nowrap;
gap: 20px;
}
.block-images-container .slider-images-swiper .swiper:not(.swiper-initialized) .swiper-slide {
flex: 0 0 calc((100% - 4 * 20px) / 5);
}
.block-images-container .slider-images-swiper .swiper:not(.swiper-initialized) .swiper-pagination {
display: none;
}
@media (max-width: 1279px) {
.block-images-container .slider-images-swiper .swiper:not(.swiper-initialized) .swiper-slide {
flex: 0 0 calc((100% - 3 * 20px) / 4);
}
}
@media (max-width: 1023px) {
.block-images-container .slider-images-swiper .swiper:not(.swiper-initialized) .swiper-slide {
flex: 0 0 calc((100% - 2 * 20px) / 3);
}
}
@media (max-width: 767px) {
.block-images-container .slider-images-swiper .swiper:not(.swiper-initialized) .swiper-slide {
flex: 0 0 calc((100% - 1 * 20px) / 2);
}
}
@media (max-width: 479px) {
.block-images-container .slider-images-swiper .swiper:not(.swiper-initialized) .swiper-slide {
flex: 0 0 calc(100% / 1.2);
}
}
/* ============================================================ */
/* 9. Responsive */
/* ============================================================ */
@media (max-width: 1200px) {
.block-ban-container .content { width: 100%; }
/* CTA card : la gouttiere responsive de section-* doit rester une marge
EXTERNE. Sinon le padding-inline se loge dans la carte (fond + image
absolue) et l'overlay .text-container ne couvre plus toute l'image. */
.block-cards-container.default-cards.cta {
padding-inline: 0;
width: calc(100% - var(--space-1) * 2);
}
}
@media (max-width: 900px) {
.default-cards.key-numbers { grid-template-columns: repeat(2, 1fr); }
.block-cards-container { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@media (max-width: 768px) {
:root {
--space-1: 20px;
--space-2: 40px;
--space-3: 60px;
}
.block-text-image .content-wrapper { text-align: center; }
.surtitle { margin-inline: auto; }
.block-ban-container .content { text-align: center; align-items: center; }
/* le btn a align-self:flex-start : on le recentre quand le contenu passe centre */
.block-ban-container .btn { align-self: center; }
/* texte centre sur mobile : overlay vertical homogene au lieu du degrade lateral */
.block-ban-container:not(.quote-ban)::after {
background: linear-gradient(180deg, rgba(34, 31, 33, 0.55) 0%, rgba(34, 31, 33, 0.65) 100%);
}
}
@media (max-width: 600px) {
.default-cards.categorie,
.default-cards.key-numbers { grid-template-columns: 1fr; }
}
@media (max-width: 500px) {
.block-btn-container .btn-container { flex-direction: column; }
.block-btn-container .btn-container a { width: 100%; text-align: center; }
}
/* ============================================================ */
/* Fiche produit (single-ntw_product) */
/* Reutilise les variables CSS du theme, charte NewTechWood. */
/* ============================================================ */
.site-main.ntw-product {
padding: var(--space-2) var(--space-1) var(--space-3);
background-color: var(--color-bg);
}
.site-main.ntw-product > * {
max-width: var(--width-content);
margin-inline: auto;
}
/* ---- Breadcrumb ---- */
.ntw-product-breadcrumb {
margin-bottom: var(--space-1);
font-size: 13px;
color: rgba(34, 31, 33, 0.6);
}
.ntw-product-breadcrumb ol {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.ntw-product-breadcrumb li {
display: flex;
align-items: center;
gap: 8px;
}
.ntw-product-breadcrumb li:not(:last-child)::after {
content: "›";
color: var(--color-main-1);
font-weight: 600;
}
.ntw-product-breadcrumb a {
color: inherit;
text-decoration: none;
transition: color var(--transition);
}
.ntw-product-breadcrumb a:hover { color: var(--color-main-1); }
.ntw-product-breadcrumb li:last-child span {
color: var(--color-text);
font-weight: 600;
}
/* ---- Header produit ---- */
.ntw-product-header {
margin-bottom: var(--space-2);
padding-bottom: var(--space-1);
border-bottom: 1px solid var(--color-border);
}
.ntw-product-header h1 {
font-size: clamp(28px, 4vw, 42px);
line-height: 1.2;
margin: 0 0 16px;
color: var(--color-text);
text-transform: none;
}
.ntw-product-ref {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: rgba(34, 31, 33, 0.7);
margin: 0 16px 12px 0;
vertical-align: middle;
}
.ntw-product-ref strong { color: var(--color-text); font-weight: 600; }
.ntw-product-tags {
display: inline-flex;
flex-wrap: wrap;
gap: 8px;
margin: 0;
vertical-align: middle;
}
.ntw-product-tags span {
background-color: var(--color-main-1);
color: #fff;
padding: 4px 12px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
}
/* ---- Layout principal : image + actions ---- */
.ntw-product-main {
display: grid;
grid-template-columns: minmax(0, 1fr) 350px;
gap: 50px;
margin-bottom: var(--space-3);
align-items: start;
}
@media (max-width: 900px) {
.ntw-product-main { grid-template-columns: 1fr; gap: 30px; }
}
/* ---- Galerie ---- */
.ntw-product-gallery {
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-card);
background-color: var(--color-bg-soft);
border: 1px solid var(--color-border);
}
.ntw-product-gallery img {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
object-position: center;
transition: transform var(--transition);
}
.ntw-product-gallery:hover img { transform: scale(1.02); }
.ntw-product-gallery > p {
padding: 60px 20px;
text-align: center;
color: rgba(34, 31, 33, 0.5);
margin: 0;
background-color: var(--color-bg-soft);
}
/* ---- Panneau actions (echantillon CTA) ---- */
.ntw-product-actions {
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 24px;
background-color: var(--color-bg);
height: max-content;
position: sticky;
top: 100px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.ntw-sample-cart-btn {
width: 100%;
padding: 14px 20px;
background-color: var(--color-main-1);
color: #fff;
border: 0;
border-radius: 5px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background-color var(--transition), transform var(--transition);
font-family: var(--font-base);
}
.ntw-sample-cart-btn:hover:not(:disabled) {
background-color: var(--color-main-1-hover);
transform: translateY(-2px);
}
.ntw-sample-cart-btn:disabled {
background-color: #d1d5db;
color: #6b7280;
cursor: not-allowed;
}
.ntw-product-actions-note {
margin: 12px 0 0;
font-size: 13px;
color: rgba(34, 31, 33, 0.55);
font-style: italic;
text-align: center;
line-height: 1.4;
}
/* ---- Section Caracteristiques ---- */
.ntw-product-specs {
padding-top: var(--space-2);
border-top: 1px solid var(--color-border);
}
.ntw-product-specs > h2 {
font-size: clamp(26px, 3vw, 36px);
margin: 0 0 var(--space-2);
text-align: center;
color: var(--color-text);
}
.ntw-product-spec-group {
margin-bottom: var(--space-2);
}
.ntw-product-spec-group:last-child {
margin-bottom: 0;
}
.ntw-product-spec-group h3 {
font-size: 20px;
color: var(--color-main-1);
margin: 0 0 16px;
padding-bottom: 8px;
border-bottom: 2px solid var(--color-main-1);
display: inline-block;
}
/* ---- Tableau de specs ---- */
.ntw-product-spec-table {
width: 100%;
border-collapse: collapse;
background-color: var(--color-bg);
border-radius: var(--radius);
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
border: 1px solid var(--color-border);
}
.ntw-product-spec-table tr {
transition: background-color var(--transition-fast);
}
.ntw-product-spec-table tr:nth-child(even) {
background-color: var(--color-bg-soft);
}
.ntw-product-spec-table tr:hover {
background-color: rgba(0, 154, 79, 0.05);
}
.ntw-product-spec-table th,
.ntw-product-spec-table td {
text-align: left;
padding: 12px 16px;
font-size: 14px;
line-height: 1.5;
vertical-align: top;
}
.ntw-product-spec-table th {
width: 40%;
font-weight: 600;
color: var(--color-text);
border-right: 1px solid var(--color-border);
}
.ntw-product-spec-table td {
color: rgba(34, 31, 33, 0.85);
}
/* ---- Responsive specs table ---- */
@media (max-width: 600px) {
.ntw-product-spec-table th,
.ntw-product-spec-table td {
padding: 10px 12px;
font-size: 13px;
}
.ntw-product-spec-table th { width: 45%; }
.ntw-product-spec-group h3 { font-size: 18px; }
}
/* ============================================================ */
/* Fiche produit V2 (PDP - Product Detail Page) - Design 2026 */
/* Sélecteurs .ntw-pdp-* (single-ntw_product.php) */
/* ============================================================ */
.site-main.ntw-pdp {
background: linear-gradient(180deg, #fafafa 0%, var(--color-bg) 280px);
padding-bottom: var(--space-3);
}
.site-main.ntw-pdp > * {
max-width: var(--width-content);
margin-inline: auto;
/* padding-inline injecte seulement < 1200 (cf media query plus bas, pattern aligne front) */
}
/* ---- Breadcrumb ---- */
.ntw-pdp-breadcrumb-wrap {
padding-top: 24px;
padding-bottom: 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.ntw-cat-count {
flex-shrink: 0;
font-size: 13px;
color: rgba(34, 31, 33, 0.6);
font-weight: 600;
padding: 5px 12px;
background-color: var(--color-bg-soft);
border: 1px solid var(--color-border);
border-radius: 999px;
}
.ntw-pdp-breadcrumb { font-size: 13px; color: rgba(34,31,33,0.55); }
.ntw-pdp-breadcrumb ol {
list-style: none; padding: 0; margin: 0;
display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.ntw-pdp-breadcrumb li { display: flex; align-items: center; gap: 8px; }
.ntw-pdp-breadcrumb li:not(:last-child)::after {
content: "›"; color: var(--color-main-1); font-weight: 700;
}
.ntw-pdp-breadcrumb a { color: inherit; text-decoration: none; transition: color var(--transition); }
.ntw-pdp-breadcrumb a:hover { color: var(--color-main-1); }
.ntw-pdp-breadcrumb li:last-child span {
color: var(--color-text); font-weight: 600;
max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ---- Hero PDP : layout 2 colonnes egales (galerie + buy panel meme width) ---- */
.ntw-pdp-hero {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
padding-top: 24px;
}
@media (max-width: 1100px) {
.ntw-pdp-hero { grid-template-columns: 1fr; gap: 40px; }
}
/* ---- Galerie ---- */
.ntw-pdp-gallery { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ntw-pdp-gallery-main {
position: relative;
border-radius: 16px;
overflow: hidden;
background-color: #f1f1f1;
box-shadow: 0 10px 40px -10px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.04);
aspect-ratio: 1 / 1;
}
.ntw-pdp-gallery-main .swiper,
.ntw-pdp-gallery-main .swiper-wrapper,
.ntw-pdp-gallery-main .swiper-slide { width: 100%; height: 100%; }
.ntw-pdp-gallery-main img {
width: 100%; height: 100%;
object-fit: cover; object-position: center;
display: block;
}
.ntw-pdp-gallery-zoom {
position: absolute; top: 16px; right: 16px;
z-index: 5;
width: 44px; height: 44px;
background: rgba(255,255,255,0.95);
border: 0; border-radius: 50%;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
color: var(--color-text);
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
transition: transform var(--transition), background var(--transition);
}
.ntw-pdp-gallery-zoom:hover { transform: scale(1.08); background: var(--color-main-1); color: #fff; }
.ntw-pdp-gallery-zoom svg { width: 20px; height: 20px; }
.ntw-pdp-gallery-empty {
display: flex; flex-direction: column; justify-content: center; align-items: center;
gap: 8px; color: rgba(34,31,33,0.4);
}
.ntw-pdp-gallery-empty span { font-size: 16px; font-weight: 500; }
.ntw-pdp-gallery-empty small { font-size: 13px; }
/* ---- Swiper main : flèches + pagination custom ---- */
.ntw-pdp-swiper .swiper-button-prev,
.ntw-pdp-swiper .swiper-button-next {
width: 44px; height: 44px;
background: rgba(255,255,255,0.95);
border-radius: 50%;
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
color: var(--color-text);
transition: background var(--transition), color var(--transition), transform var(--transition);
margin-top: -22px;
border: 0;
}
.ntw-pdp-swiper .swiper-button-prev::after,
.ntw-pdp-swiper .swiper-button-next::after {
font-size: 16px; font-weight: 800;
}
.ntw-pdp-swiper .swiper-button-prev:hover,
.ntw-pdp-swiper .swiper-button-next:hover {
background: var(--color-main-1);
color: #fff;
transform: scale(1.06);
}
.ntw-pdp-swiper .swiper-button-prev { left: 16px; }
.ntw-pdp-swiper .swiper-button-next { right: 16px; }
.ntw-pdp-swiper .swiper-pagination {
bottom: 14px;
display: flex; justify-content: center; gap: 6px;
}
.ntw-pdp-swiper .swiper-pagination-bullet {
width: 8px; height: 8px;
background: rgba(255,255,255,0.6);
opacity: 1;
transition: width var(--transition), background var(--transition);
margin: 0 !important;
}
.ntw-pdp-swiper .swiper-pagination-bullet-active {
background: #fff;
width: 24px;
border-radius: 4px;
}
/* ---- Swiper thumbs ---- */
.ntw-pdp-swiper-thumbs {
width: 100%;
}
.ntw-pdp-swiper-thumbs .swiper-slide {
width: 78px !important;
height: 78px;
border-radius: 10px;
overflow: hidden;
cursor: pointer;
border: 2px solid transparent;
background: #f1f1f1;
transition: border-color var(--transition), transform var(--transition);
opacity: 0.6;
}
.ntw-pdp-swiper-thumbs .swiper-slide:hover { transform: translateY(-2px); opacity: 0.85; }
.ntw-pdp-swiper-thumbs .swiper-slide-thumb-active {
border-color: var(--color-main-1);
opacity: 1;
}
.ntw-pdp-swiper-thumbs .swiper-slide img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
/* ---- Lightbox galerie ---- */
.ntw-pdp-lightbox {
position: fixed;
inset: 0;
z-index: 9999;
background-color: rgba(0, 0, 0, 0.92);
backdrop-filter: blur(8px);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
padding: 60px 40px;
}
.ntw-pdp-lightbox.is-open {
opacity: 1;
visibility: visible;
}
.ntw-pdp-lightbox-inner {
width: 100%;
max-width: 1200px;
max-height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.ntw-pdp-lightbox-close {
position: absolute;
top: 20px;
right: 20px;
width: 48px;
height: 48px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background var(--transition), transform var(--transition);
z-index: 10;
}
.ntw-pdp-lightbox-close:hover {
background: var(--color-main-1);
border-color: var(--color-main-1);
transform: rotate(90deg);
}
.ntw-pdp-lightbox-close svg { width: 20px; height: 20px; }
.ntw-pdp-lightbox-swiper {
width: 100%;
height: 100%;
max-height: calc(100vh - 120px);
}
.ntw-pdp-lightbox-swiper .swiper-wrapper { align-items: center; }
.ntw-pdp-lightbox-swiper .swiper-slide {
display: flex;
align-items: center;
justify-content: center;
}
.ntw-pdp-lightbox-swiper .swiper-slide img {
max-width: 100%;
max-height: calc(100vh - 120px);
width: auto;
height: auto;
object-fit: contain;
border-radius: 8px;
box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
}
/* Lightbox navigation */
.ntw-pdp-lightbox-swiper .swiper-button-prev,
.ntw-pdp-lightbox-swiper .swiper-button-next {
width: 52px; height: 52px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
color: #fff;
margin-top: -26px;
transition: background var(--transition), transform var(--transition);
}
.ntw-pdp-lightbox-swiper .swiper-button-prev::after,
.ntw-pdp-lightbox-swiper .swiper-button-next::after {
font-size: 18px;
font-weight: 700;
}
.ntw-pdp-lightbox-swiper .swiper-button-prev:hover,
.ntw-pdp-lightbox-swiper .swiper-button-next:hover {
background: var(--color-main-1);
border-color: var(--color-main-1);
transform: scale(1.08);
}
.ntw-pdp-lightbox-swiper .swiper-button-prev { left: 20px; }
.ntw-pdp-lightbox-swiper .swiper-button-next { right: 20px; }
/* Lightbox pagination (dots blancs) */
.ntw-pdp-lightbox-swiper .swiper-pagination {
bottom: -40px;
display: flex;
justify-content: center;
gap: 8px;
}
.ntw-pdp-lightbox-swiper .swiper-pagination-bullet {
width: 8px; height: 8px;
background: rgba(255, 255, 255, 0.4);
opacity: 1;
margin: 0 !important;
transition: width var(--transition), background var(--transition);
}
.ntw-pdp-lightbox-swiper .swiper-pagination-bullet-active {
background: var(--color-main-1);
width: 28px;
border-radius: 4px;
}
/* Empeche le scroll arriere-plan quand lightbox ouverte */
body.ntw-pdp-no-scroll { overflow: hidden; }
@media (max-width: 600px) {
.ntw-pdp-lightbox { padding: 50px 12px; }
.ntw-pdp-lightbox-close { top: 12px; right: 12px; width: 40px; height: 40px; }
.ntw-pdp-lightbox-swiper .swiper-button-prev,
.ntw-pdp-lightbox-swiper .swiper-button-next { width: 40px; height: 40px; margin-top: -20px; }
.ntw-pdp-lightbox-swiper .swiper-button-prev { left: 6px; }
.ntw-pdp-lightbox-swiper .swiper-button-next { right: 6px; }
}
/* ---- Panneau commande sticky ---- */
.ntw-pdp-buy { position: sticky; top: 120px; align-self: start; }
@media (max-width: 1100px) { .ntw-pdp-buy { position: static; } }
.ntw-pdp-buy-inner {
background-color: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 16px;
padding: 20px;
box-shadow: 0 10px 40px -15px rgba(0,0,0,0.08);
}
.ntw-pdp-category {
display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-main-1);
font-weight: 700;
margin-bottom: 12px;
}
.ntw-pdp-category .dot { color: rgba(0,154,79,0.4); }
.ntw-pdp-title {
font-size: clamp(17px, 1.4vw, 21px);
line-height: 1.3;
margin: 0 0 12px;
color: var(--color-text);
font-weight: 700;
text-transform: none;
letter-spacing: -0.005em;
}
.ntw-pdp-ref {
font-size: 13px;
color: rgba(34,31,33,0.6);
margin: 0 0 24px;
}
.ntw-pdp-ref strong { color: var(--color-text); font-weight: 600; }
.ntw-pdp-usps {
list-style: none; padding: 0; margin: 0 0 24px;
display: flex; flex-direction: column; gap: 10px;
}
.ntw-pdp-usps li {
display: flex; align-items: center; gap: 10px;
font-size: 14px; color: var(--color-text);
}
.ntw-pdp-usps svg {
width: 18px; height: 18px;
color: var(--color-main-1);
flex-shrink: 0;
}
/* ---- Bloc echantillon - version sobre (lien discret, sans prix) ---- */
.ntw-pdp-sample {
margin-top: 4px;
padding-top: 18px;
border-top: 1px solid var(--color-border);
}
/* Le lien reutilise .ntw-pdp-cta (hook JS du panier) mais neutralise son look bouton. */
.ntw-pdp-cta.ntw-pdp-sample-link {
width: auto;
padding: 0;
background: transparent;
color: var(--color-main-1);
border: 0;
border-radius: 0;
box-shadow: none;
font-size: 14.5px;
font-weight: 600;
gap: 8px;
justify-content: flex-start;
transition: color var(--transition-fast);
}
.ntw-pdp-cta.ntw-pdp-sample-link:hover:not(:disabled) {
background: transparent;
color: var(--color-main-1-hover);
transform: none;
box-shadow: none;
}
.ntw-pdp-cta.ntw-pdp-sample-link:disabled {
background: transparent;
color: rgba(34,31,33,0.4);
box-shadow: none;
cursor: default;
}
.ntw-pdp-cta.ntw-pdp-sample-link .ntw-pdp-sample-icon { width: 18px; height: 18px; flex-shrink: 0; }
.ntw-pdp-cta.ntw-pdp-sample-link .ntw-pdp-sample-arrow { width: 15px; height: 15px; transition: transform var(--transition-fast); }
.ntw-pdp-cta.ntw-pdp-sample-link:hover:not(:disabled) .ntw-pdp-sample-arrow { transform: translateX(3px); }
.ntw-pdp-sample-sub {
margin: 8px 0 0;
font-size: 12.5px;
color: rgba(34,31,33,0.6);
line-height: 1.5;
}
.ntw-pdp-cta {
width: 100%;
padding: 16px 20px;
background-color: var(--color-main-1);
color: #fff;
border: 0; border-radius: 10px;
font-size: 15px; font-weight: 700;
letter-spacing: 0.02em;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
transition: background-color var(--transition), transform var(--transition), box-shadow var(--transition);
font-family: var(--font-base);
box-shadow: 0 4px 16px -4px rgba(0,154,79,0.4);
}
.ntw-pdp-cta svg { width: 20px; height: 20px; }
.ntw-pdp-cta:hover:not(:disabled) {
background-color: var(--color-main-1-hover);
transform: translateY(-2px);
box-shadow: 0 8px 24px -4px rgba(0,154,79,0.5);
}
.ntw-pdp-cta:disabled {
background-color: #d1d5db;
color: #6b7280;
cursor: not-allowed;
box-shadow: none;
}
.ntw-pdp-sample-note {
margin: 10px 0 0;
font-size: 12px; color: rgba(34,31,33,0.55);
font-style: italic; text-align: center;
}
/* ---- Features bandeau full-width fond blanc ---- */
/* Override la limitation max-width 1200 du wrapper parent pour s'etendre */
.site-main.ntw-pdp > .ntw-pdp-features-band {
position: relative;
overflow: hidden;
max-width: none;
margin-inline: 0;
background: #16241a url('assets/images/pdp-features-bg.webp') center/cover;
padding-block: var(--space-3);
margin-block: var(--space-3);
}
.ntw-pdp-features-band::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(100deg, rgba(8,20,12,0.92) 0%, rgba(10,40,22,0.78) 55%, rgba(0,80,40,0.55) 100%);
}
.ntw-pdp-features-band {
background-color: var(--color-bg-soft);
padding-block: var(--space-3);
margin-block: var(--space-3);
border-block: 1px solid var(--color-border);
}
.ntw-pdp-features-inner {
position: relative;
z-index: 2;
max-width: var(--width-content);
margin-inline: auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
/* Padding-inline injecte uniquement sous 1200px (memes regles que .section-* du front) */
@media (max-width: 1200px) {
.site-main.ntw-pdp > *:not(.ntw-pdp-features-band),
.ntw-pdp-features-inner {
padding-inline: var(--space-1);
}
}
.ntw-pdp-feature {
display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
padding: 4px;
}
.ntw-pdp-feature-icon {
/* Badges colores type "tampon" sur fond clair : la pastille blanche fait ressortir
le badge sur le fond sombre du bandeau (filter brightness/invert retire, inutile). */
width: 90px; height: 90px;
flex-shrink: 0;
background: #fff;
border-radius: 50%;
padding: 6px;
box-sizing: content-box;
display: block;
object-fit: contain;
}
.ntw-pdp-feature strong {
display: block;
font-size: 15px; font-weight: 700;
color: #fff; margin-bottom: 4px;
}
.ntw-pdp-feature p { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.72); }
@media (max-width: 900px) {
.ntw-pdp-features-inner { grid-template-columns: repeat(2, 1fr); }
.ntw-pdp-features-band { padding-block: 40px; }
}
@media (max-width: 500px) {
.ntw-pdp-features-inner { grid-template-columns: 1fr; }
}
/* ---- Onglets PDP supprimes (2026-05) : remplaces par des sections empilees.
Styles dans assets/css/ntw-pdp.css (.ntw-pdp-section / .ntw-pdp-hero-banner
/ .ntw-pdp-generic-band). ---- */
/* ---- Spec groups ---- */
.ntw-pdp-spec-group { margin-bottom: var(--space-2); }
.ntw-pdp-spec-group:last-child { margin-bottom: 0; }
.ntw-pdp-spec-group h3 {
font-size: 20px; font-weight: 700;
color: var(--color-text);
margin: 0 0 20px;
position: relative;
padding-left: 16px;
}
.ntw-pdp-spec-group h3::before {
content: ""; position: absolute;
left: 0; top: 50%; transform: translateY(-50%);
width: 4px; height: 24px;
background: var(--color-main-1);
border-radius: 2px;
}
.ntw-pdp-spec-list {
margin: 0; padding: 0;
display: grid; grid-template-columns: 1fr 1fr;
gap: 0;
border: 1px solid var(--color-border);
border-radius: 12px;
overflow: hidden;
background: var(--color-bg);
}
.ntw-pdp-spec-row {
display: contents;
}
.ntw-pdp-spec-row dt,
.ntw-pdp-spec-row dd {
padding: 14px 18px;
font-size: 14px; line-height: 1.5;
border-top: 1px solid var(--color-border);
}
.ntw-pdp-spec-row:first-child dt,
.ntw-pdp-spec-row:first-child dd { border-top: 0; }
.ntw-pdp-spec-row dt {
font-weight: 600;
color: rgba(34,31,33,0.7);
background: #fafafa;
border-right: 1px solid var(--color-border);
}
.ntw-pdp-spec-row dd {
color: var(--color-text);
margin: 0;
}
.ntw-pdp-spec-row:hover dt,
.ntw-pdp-spec-row:hover dd { background: rgba(0,154,79,0.04); }
/* Mise en forme du contenu HTML wysiwyg dans les
(ul, p, strong, a, em) */
.ntw-pdp-spec-row dd > *:first-child { margin-top: 0; }
.ntw-pdp-spec-row dd > *:last-child { margin-bottom: 0; }
.ntw-pdp-spec-row dd p {
margin: 0 0 10px;
line-height: 1.6;
}
.ntw-pdp-spec-row dd ul,
.ntw-pdp-spec-row dd ol {
margin: 0 0 10px;
padding-left: 20px;
line-height: 1.6;
}
.ntw-pdp-spec-row dd ul { list-style: none; padding-left: 0; }
.ntw-pdp-spec-row dd ul li {
position: relative;
padding-left: 18px;
margin-bottom: 6px;
}
.ntw-pdp-spec-row dd ul li::before {
content: "";
position: absolute;
left: 0; top: 0.65em;
width: 6px; height: 6px;
border-radius: 50%;
background-color: var(--color-main-1);
}
.ntw-pdp-spec-row dd ol li { margin-bottom: 6px; }
.ntw-pdp-spec-row dd strong {
font-weight: 700;
color: var(--color-text);
}
.ntw-pdp-spec-row dd em { font-style: italic; }
.ntw-pdp-spec-row dd a {
color: var(--color-main-1);
text-decoration: underline;
text-underline-offset: 2px;
transition: color var(--transition-fast);
}
.ntw-pdp-spec-row dd a:hover { color: var(--color-main-1-hover); }
.ntw-pdp-spec-row dd br + br { display: none; } /* compresse doubles sauts */
@media (max-width: 600px) {
.ntw-pdp-spec-list { grid-template-columns: 1fr; }
.ntw-pdp-spec-row dt {
padding-bottom: 4px; border-right: 0; background: transparent;
font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em;
}
.ntw-pdp-spec-row dd { padding-top: 4px; border-top: 0; }
.ntw-pdp-spec-row:not(:first-child) dt { border-top: 1px solid var(--color-border); }
}
/* ---- Documents ---- */
.ntw-pdp-docs {
list-style: none; padding: 0; margin: 0;
display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 12px;
}
.ntw-pdp-doc {
display: flex; align-items: center; gap: 14px;
padding: 16px;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius);
box-shadow: var(--shadow-card);
text-decoration: none;
color: var(--color-text);
transition: transform var(--transition), box-shadow var(--transition);
}
.ntw-pdp-doc:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-card-hover);
}
.ntw-pdp-doc-icon {
width: 44px; height: 44px;
border-radius: 10px;
background: linear-gradient(135deg, var(--color-main-1), var(--color-main-2));
color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
flex-shrink: 0;
}
.ntw-pdp-doc-meta { flex-grow: 1; min-width: 0; }
.ntw-pdp-doc-meta strong { display: block; font-size: 14px; line-height: 1.3; }
.ntw-pdp-doc-meta small { font-size: 12px; color: rgba(34,31,33,0.55); }
.ntw-pdp-doc-arrow {
width: 18px; height: 18px;
color: rgba(34,31,33,0.4);
transition: color var(--transition), transform var(--transition);
flex-shrink: 0;
}
.ntw-pdp-doc:hover .ntw-pdp-doc-arrow { color: var(--color-main-1); transform: translateY(2px); }
/* ---- Produits similaires (le titre utilise .default-title.center du front) ---- */
.ntw-pdp-related {
padding-block: var(--space-3);
}
.ntw-pdp-related-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
@media (max-width: 900px) {
.ntw-pdp-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
.ntw-pdp-related-grid { grid-template-columns: 1fr; }
}
/* Card produit : zone image carree 1:1 (image entiere, sans recadrage, fond clair)
+ bloc texte dessous sur fond blanc. */
.ntw-product-card {
position: relative;
display: flex;
flex-direction: column;
border-radius: var(--radius);
overflow: hidden;
background-color: #fff;
box-shadow: var(--shadow-card);
text-decoration: none;
color: var(--color-text);
transition: transform var(--transition), box-shadow var(--transition);
}
.ntw-product-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-card-hover);
}
.ntw-product-card:hover .ntw-product-card-img img { transform: scale(1.04); }
.ntw-product-card:hover .ntw-product-card-arrow {
background: var(--color-main-1);
color: #fff;
}
.ntw-product-card-img {
position: relative;
aspect-ratio: 1 / 1;
background-color: #f5f5f5;
overflow: hidden;
}
.ntw-product-card-img img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
transition: transform var(--transition);
display: block;
}
.ntw-product-card-noimg {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
color: #b5b5b5;
font-size: 13px;
}
.ntw-product-card-meta {
display: flex;
flex-direction: column;
gap: 6px;
padding: 16px;
color: var(--color-text);
}
.ntw-product-card-category {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-main-1);
font-weight: 700;
}
.ntw-product-card-meta strong {
font-size: 15px;
font-weight: 700;
line-height: 1.3;
color: var(--color-text);
/* Limiter a 2 lignes max */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ntw-product-card-meta small {
font-size: 12px;
color: #9a9a9a;
}
.ntw-product-card-length {
font-size: 12px;
font-weight: 600;
color: #6b6b6b;
}
.ntw-product-card-arrow {
position: absolute;
top: 12px; right: 12px;
z-index: 4;
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(255,255,255,0.95);
color: var(--color-text);
display: flex; align-items: center; justify-content: center;
box-shadow: 0 3px 10px rgba(0,0,0,0.12);
transition: background var(--transition), color var(--transition);
}
.ntw-product-card-arrow svg { width: 16px; height: 16px; }
/* ---- FAQ section (titre via .default-title.center, body reutilise .block-faqs) ---- */
.ntw-pdp-faq {
/* pas de padding-block : l'espace vient des sections voisines */
}
/* ---- CTA bottom ---- */
.ntw-pdp-bottom-cta {
padding-top: var(--space-3);
}
.ntw-pdp-bottom-cta-inner {
background: linear-gradient(135deg, var(--color-text), #2d2a2c);
border-radius: 16px;
padding: 48px 40px;
color: #fff;
display: grid;
grid-template-columns: 1fr auto;
gap: 40px;
align-items: center;
box-shadow: 0 20px 60px -20px rgba(0,0,0,0.3);
}
.ntw-pdp-bottom-cta-inner h2 {
font-size: clamp(22px, 2.5vw, 28px);
margin: 0 0 8px;
color: #fff;
}
.ntw-pdp-bottom-cta-inner p {
margin: 0;
color: rgba(255,255,255,0.75);
line-height: 1.55;
max-width: 540px;
}
.ntw-pdp-bottom-cta-actions {
display: flex; flex-direction: column; gap: 12px;
align-items: flex-end;
}
.ntw-pdp-bottom-cta-actions .btn {
background-color: var(--color-main-1);
color: #fff;
padding: 14px 28px;
border-radius: 10px;
font-weight: 700;
text-decoration: none;
transition: background var(--transition), transform var(--transition);
display: inline-block;
}
.ntw-pdp-bottom-cta-actions .btn:hover {
background-color: var(--color-main-1-hover);
transform: translateY(-2px);
}
.ntw-pdp-bottom-cta-phone {
display: inline-flex; align-items: center; gap: 8px;
color: rgba(255,255,255,0.85);
font-size: 14px;
text-decoration: none;
transition: color var(--transition);
}
.ntw-pdp-bottom-cta-phone:hover { color: #fff; }
.ntw-pdp-bottom-cta-phone svg { width: 16px; height: 16px; }
@media (max-width: 700px) {
.ntw-pdp-bottom-cta-inner {
grid-template-columns: 1fr;
text-align: center;
padding: 36px 24px;
}
.ntw-pdp-bottom-cta-actions { align-items: stretch; }
.ntw-pdp-bottom-cta-actions .btn { text-align: center; }
.ntw-pdp-bottom-cta-phone { justify-content: center; }
}
/* ---- Empty state ---- */
.ntw-pdp-empty {
max-width: 500px; margin: var(--space-3) auto;
padding: var(--space-2) var(--space-1);
text-align: center;
}
.ntw-pdp-empty h1 { font-size: 32px; margin-bottom: 12px; }
.ntw-pdp-empty p { color: rgba(34,31,33,0.6); margin-bottom: 24px; }
/* ============================================================ */
/* Archive catalogue (.site-main.ntw-cat) */
/* Reutilise les .ntw-product-card du PDP pour la grille */
/* ============================================================ */
.site-main.ntw-cat {
background: linear-gradient(180deg, #fafafa 0%, var(--color-bg) 280px);
padding-bottom: var(--space-3);
}
.site-main.ntw-cat > * {
max-width: var(--width-content);
margin-inline: auto;
}
@media (max-width: 1200px) {
.site-main.ntw-cat > * {
padding-inline: var(--space-1);
}
}
/* ---- Hero pleine largeur des pages niveau-2 (Terrasse / Bardage) ---- */
/* Annule le cap .site-main.ntw-cat > * (max-width 1200 + margin auto). */
.site-main.ntw-cat > .ntw-cat-hero {
max-width: none;
margin-inline: 0;
margin-top: 0;
margin-bottom: var(--space-2);
}
/* Fond de repli quand la categorie n'a pas de product_cat_picture. */
.ntw-cat-hero--noimg {
background-color: var(--color-main-1, #221f21);
}
@media (max-width: 1200px) {
.site-main.ntw-cat > .ntw-cat-hero {
padding-inline: 0;
}
}
/* Grille de sous-categories : 4 colonnes fixes sur les pages niveau-2. */
.site-main.ntw-cat > .ntw-cat-products .ntw-cat-grid {
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) {
.site-main.ntw-cat > .ntw-cat-products .ntw-cat-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.site-main.ntw-cat > .ntw-cat-products .ntw-cat-grid {
grid-template-columns: 1fr;
}
}
.ntw-cat-description {
max-width: 760px;
margin: 8px auto 0;
padding-bottom: var(--space-1);
text-align: center;
color: rgba(34, 31, 33, 0.7);
line-height: 1.6;
font-size: 15px;
}
.ntw-cat-description p { margin: 0 0 10px; }
.ntw-cat-description p:last-child { margin-bottom: 0; }
/* ---- Slider chips de categories ---- */
.ntw-cat-chips-bar {
display: flex;
gap: 8px;
overflow-x: auto;
scrollbar-width: none;
margin-bottom: var(--space-1);
padding-bottom: 4px;
}
.ntw-cat-chips-bar::-webkit-scrollbar { display: none; }
.ntw-cat-chip {
flex-shrink: 0;
padding: 8px 16px;
border-radius: 999px;
border: 1px solid var(--color-border);
background: var(--color-bg);
color: var(--color-text);
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: background var(--transition), color var(--transition), border-color var(--transition);
white-space: nowrap;
}
.ntw-cat-chip:hover {
border-color: var(--color-main-1);
color: var(--color-main-1);
}
.ntw-cat-chip.is-active {
background: var(--color-main-1);
border-color: var(--color-main-1);
color: #fff;
}
.ntw-cat-chip.lvl-3 { font-size: 12px; opacity: 0.9; }
/* ---- Layout aside + main ---- */
.ntw-cat-layout {
display: grid;
grid-template-columns: 250px 1fr;
gap: 30px;
align-items: start;
}
@media (max-width: 900px) {
.ntw-cat-layout { grid-template-columns: 1fr; gap: 0; }
}
.ntw-cat-main { min-width: 0; }
/* ---- Aside filtres (sidebar desktop / drawer mobile) ---- */
.ntw-cat-aside {
background-color: var(--color-bg-soft);
border: 1px solid var(--color-border);
border-radius: 10px;
padding: 20px 15px;
position: sticky;
top: 130px;
}
.ntw-cat-aside-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
padding-bottom: 14px;
border-bottom: 1px solid var(--color-border);
}
.ntw-cat-aside-head h3 {
margin: 0;
font-size: 16px;
font-weight: 700;
color: var(--color-text);
display: inline-flex;
align-items: center;
gap: 8px;
}
.ntw-cat-aside-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 6px;
background: var(--color-main-1);
color: #fff;
border-radius: 999px;
font-size: 12px;
}
.ntw-cat-aside-close {
display: none; /* visible uniquement en drawer mobile */
background: transparent;
border: 0;
cursor: pointer;
color: var(--color-text);
padding: 4px;
transition: color var(--transition);
}
.ntw-cat-aside-close:hover { color: var(--color-main-1); }
.ntw-cat-aside-close svg { width: 22px; height: 22px; }
/* Filtres en colonne dans l'aside */
.ntw-cat-filters {
display: flex;
flex-direction: column;
gap: 0;
}
/* Fallback scroll desktop si toutes les sections sont ouvertes */
@media (min-width: 901px) {
.ntw-cat-filters {
max-height: calc(100vh - 220px);
overflow-y: auto;
scrollbar-width: thin;
scrollbar-gutter: stable;
padding-right: 8px;
margin-right: -8px;
}
}
/* ---- Filter group en dropdown (/) ---- */
details.ntw-cat-filter-group {
display: block;
border-bottom: 1px solid var(--color-border);
padding: 14px 0;
gap: 0;
}
details.ntw-cat-filter-group > .ntw-cat-filter-head {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
padding: 0;
color: var(--color-text);
user-select: none;
}
details.ntw-cat-filter-group > .ntw-cat-filter-head::-webkit-details-marker { display: none; }
details.ntw-cat-filter-group > .ntw-cat-filter-head::marker { content: ""; }
details.ntw-cat-filter-group > .ntw-cat-filter-head .ntw-cat-filter-grouplabel-text {
flex: 1;
min-width: 0;
font-size: 12px;
font-weight: 700;
color: rgba(34, 31, 33, 0.65);
text-transform: uppercase;
letter-spacing: 0.06em;
}
details.ntw-cat-filter-group.has-value > .ntw-cat-filter-head .ntw-cat-filter-grouplabel-text {
color: var(--color-main-1);
}
.ntw-cat-filter-chevron {
width: 14px;
height: 14px;
flex-shrink: 0;
transition: transform var(--transition);
color: rgba(34, 31, 33, 0.55);
}
details.ntw-cat-filter-group[open] > .ntw-cat-filter-head .ntw-cat-filter-chevron {
transform: rotate(180deg);
color: var(--color-text);
}
.ntw-cat-filter-body {
padding: 10px 2px 2px;
}
/* Checkboxes multi-select (Coloris, Essence, Finition, Profil) */
.ntw-cat-filter-checks {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.ntw-cat-filter-check {
position: relative;
display: flex;
align-items: center;
gap: 10px;
padding: 7px 10px;
border-radius: 6px;
color: var(--color-text);
font-size: 13px;
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast);
}
.ntw-cat-filter-check:hover {
background: var(--color-bg);
color: var(--color-main-1);
}
.ntw-cat-filter-check input[type="checkbox"] {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
.ntw-cat-filter-check-box {
flex-shrink: 0;
width: 18px;
height: 18px;
background: var(--color-bg);
border: 1.5px solid var(--color-border);
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
transition: background var(--transition-fast), border-color var(--transition-fast);
}
.ntw-cat-filter-check-box svg {
width: 12px;
height: 12px;
opacity: 0;
transition: opacity var(--transition-fast);
}
.ntw-cat-filter-check input[type="checkbox"]:checked + .ntw-cat-filter-check-box {
background: var(--color-main-1);
border-color: var(--color-main-1);
}
.ntw-cat-filter-check input[type="checkbox"]:checked + .ntw-cat-filter-check-box svg { opacity: 1; }
.ntw-cat-filter-check input[type="checkbox"]:focus-visible + .ntw-cat-filter-check-box {
outline: 0;
box-shadow: 0 0 0 3px rgba(0, 154, 79, 0.2);
}
.ntw-cat-filter-check.is-checked {
color: var(--color-main-1);
font-weight: 600;
}
.ntw-cat-filter-check-label {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ntw-cat-filter-check-count {
font-size: 11px;
color: rgba(34, 31, 33, 0.5);
font-weight: 600;
flex-shrink: 0;
}
/* Navigation hierarchique des categories (dans l'aside) */
.ntw-cat-nav-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.ntw-cat-nav-list > li { margin: 0; }
.ntw-cat-nav-item-all { padding-bottom: 6px; border-bottom: 1px solid var(--color-border); margin-bottom: 4px; }
.ntw-cat-nav-link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 7px 10px;
border-radius: 6px;
color: var(--color-text);
text-decoration: none;
font-size: 13px;
transition: background var(--transition-fast), color var(--transition-fast);
}
.ntw-cat-nav-link:hover {
background: var(--color-bg);
color: var(--color-main-1);
}
.ntw-cat-nav-link.is-active {
background: var(--color-main-1);
color: #fff;
font-weight: 700;
}
.ntw-cat-nav-link.is-active .ntw-cat-nav-count {
color: rgba(255, 255, 255, 0.85);
}
.ntw-cat-nav-link-lvl2 { font-weight: 600; }
.ntw-cat-nav-link-lvl3 {
font-size: 12px;
color: rgba(34, 31, 33, 0.75);
padding-left: 18px;
}
.ntw-cat-nav-count {
font-size: 11px;
color: rgba(34, 31, 33, 0.5);
font-weight: 600;
flex-shrink: 0;
}
.ntw-cat-nav-sublist {
list-style: none;
margin: 2px 0 4px;
padding: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.ntw-cat-filter-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.ntw-cat-filter-submit {
margin-top: 8px;
padding: 10px 16px;
background: var(--color-main-1);
color: #fff;
border: 0;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background var(--transition);
width: 100%;
}
.ntw-cat-filter-submit:hover { background: var(--color-main-1-hover); }
/* ---- Chips actifs (en haut de l'aside) ---- */
.ntw-cat-active-filters {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid var(--color-border);
}
.ntw-cat-active-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 6px 3px 10px;
background: var(--color-main-1);
color: #fff;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
text-decoration: none;
transition: background var(--transition);
}
.ntw-cat-active-chip:hover { background: var(--color-main-1-hover); }
.ntw-cat-active-chip::after {
content: "×";
font-size: 15px;
line-height: 1;
padding: 0 3px;
opacity: 0.85;
}
.ntw-cat-reset {
flex-basis: 100%;
margin-top: 4px;
color: var(--color-main-1);
font-size: 12px;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
transition: color var(--transition-fast);
}
.ntw-cat-reset:hover { color: var(--color-main-1-hover); }
/* ---- Bouton toggle drawer (mobile only) ---- */
.ntw-cat-filter-toggle {
display: none;
align-items: center;
gap: 8px;
padding: 10px 16px;
margin-bottom: 16px;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 10px;
color: var(--color-text);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: border-color var(--transition), background var(--transition);
}
.ntw-cat-filter-toggle:hover {
border-color: var(--color-main-1);
color: var(--color-main-1);
}
.ntw-cat-filter-toggle svg { width: 18px; height: 18px; }
.ntw-cat-filter-toggle-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
background: var(--color-main-1);
color: #fff;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
}
/* ---- Backdrop drawer mobile ---- */
.ntw-cat-aside-backdrop {
display: none;
position: fixed;
inset: 0;
z-index: 998;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
opacity: 0;
transition: opacity 0.3s ease;
}
.ntw-cat-aside-backdrop.is-open {
display: block;
opacity: 1;
}
/* ---- Mode mobile : drawer slide depuis la droite ---- */
@media (max-width: 900px) {
.ntw-cat-aside {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 90%;
max-width: 380px;
margin: 0;
z-index: 999;
border-radius: 0;
border: 0;
border-left: 1px solid var(--color-border);
overflow-y: auto;
transform: translateX(100%);
transition: transform 0.3s cubic-bezier(.16,1,.3,1);
padding: 20px 20px 80px;
}
.ntw-cat-aside.is-open {
transform: translateX(0);
}
.ntw-cat-aside-close { display: inline-flex; }
body.ntw-aside-open { overflow: hidden; }
.ntw-cat-filter-toggle { display: inline-flex; }
}
/* Empty state */
.ntw-cat-empty {
text-align: center;
padding: var(--space-2) 0;
}
.ntw-cat-empty p {
color: rgba(34,31,33,0.6);
margin-bottom: 24px;
}
.ntw-cat-empty .btn {
display: inline-block;
padding: 12px 24px;
background-color: var(--color-main-1);
color: #fff;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: background var(--transition), transform var(--transition);
}
.ntw-cat-empty .btn:hover {
background-color: var(--color-main-1-hover);
transform: translateY(-2px);
}
/* Grille produits (auto-fill : s'adapte automatiquement a la largeur disponible) */
.ntw-cat-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 20px;
}
.ntw-cat-grid > li { list-style: none; margin: 0; padding: 0; }
@media (max-width: 480px) {
.ntw-cat-grid { grid-template-columns: 1fr; }
}
/* Pagination */
.ntw-cat-pagination {
margin-top: var(--space-2);
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
}
.ntw-cat-pagination-item,
.ntw-cat-pagination-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 14px;
border-radius: 10px;
border: 1px solid var(--color-border);
background-color: var(--color-bg);
color: var(--color-text);
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.ntw-cat-pagination-arrow { padding: 0 10px; }
.ntw-cat-pagination-arrow svg { width: 16px; height: 16px; }
.ntw-cat-pagination-item:hover,
.ntw-cat-pagination-arrow:hover {
border-color: var(--color-main-1);
color: var(--color-main-1);
transform: translateY(-1px);
}
.ntw-cat-pagination-item.is-current {
background-color: var(--color-main-1);
border-color: var(--color-main-1);
color: #fff;
cursor: default;
pointer-events: none;
}
/* ============================================================ */
/* Phase 6 - Panier echantillons + tunnel Stripe */
/* ============================================================ */
/* ---- Mini-widget panier (header) ---- */
.site-header .ntw-cart-link {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
margin-left: 14px;
border-radius: 50%;
color: var(--color-text);
text-decoration: none;
transition: background var(--transition-fast), color var(--transition-fast);
}
.site-header .ntw-cart-link:hover {
background-color: var(--color-bg-muted);
color: var(--color-main-1);
}
.site-header .ntw-cart-link svg {
width: 24px;
height: 24px;
flex-shrink: 0;
}
.site-header .ntw-cart-badge {
position: absolute;
top: 2px;
right: 2px;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 9px;
background-color: var(--color-main-1);
color: #fff;
font-size: 11px;
font-weight: 700;
line-height: 18px;
text-align: center;
transform: scale(0);
transition: transform var(--transition-fast);
}
.site-header .ntw-cart-badge.has-items {
transform: scale(1);
}
/* ---- Page panier ---- */
.ntw-cart-page {
padding: 40px 20px 80px;
background-color: var(--color-bg-soft);
min-height: 60vh;
}
.ntw-cart-container {
max-width: var(--width-content);
margin: 0 auto;
}
.ntw-cart-header {
text-align: center;
margin-bottom: 40px;
}
.ntw-cart-title {
font-size: clamp(28px, 4vw, 40px);
font-weight: 700;
color: var(--color-text);
margin-bottom: 12px;
}
.ntw-cart-intro {
font-size: var(--fs-body);
color: rgba(34, 31, 33, 0.7);
max-width: 640px;
margin: 0 auto;
}
.ntw-cart-grid {
display: grid;
grid-template-columns: 1fr 360px;
gap: 30px;
margin-bottom: 40px;
align-items: start;
}
@media (max-width: 900px) {
.ntw-cart-grid { grid-template-columns: 1fr; }
}
.ntw-cart-items {
background-color: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 20px;
}
.ntw-cart-loading,
.ntw-cart-empty {
text-align: center;
padding: 30px 10px;
color: rgba(34, 31, 33, 0.6);
}
.ntw-cart-empty .ntw-cart-browse-link {
display: inline-block;
margin-top: 10px;
padding: 10px 20px;
background-color: var(--color-main-1);
color: #fff;
border-radius: var(--radius);
text-decoration: none;
font-weight: 600;
transition: background var(--transition-fast);
}
.ntw-cart-empty .ntw-cart-browse-link:hover { background-color: var(--color-main-1-hover); }
.ntw-cart-items-list {
list-style: none;
margin: 0;
padding: 0;
}
.ntw-cart-item {
display: grid;
grid-template-columns: 70px 1fr auto auto;
gap: 16px;
align-items: center;
padding: 14px 0;
border-bottom: 1px solid var(--color-border);
}
.ntw-cart-item:last-child { border-bottom: 0; padding-bottom: 0; }
.ntw-cart-item:first-child { padding-top: 0; }
.ntw-cart-item-image {
width: 70px;
height: 70px;
background-color: var(--color-bg-muted);
border-radius: 8px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.ntw-cart-item-image img { width: 100%; height: 100%; object-fit: cover; }
.ntw-cart-item-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ntw-cart-item-title {
font-size: 14px;
font-weight: 600;
color: var(--color-text);
text-decoration: none;
line-height: 1.3;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.ntw-cart-item-title:hover { color: var(--color-main-1); }
.ntw-cart-item-ref { font-size: 12px; color: rgba(34,31,33,0.55); }
.ntw-cart-item-qty {
font-size: 13px;
font-weight: 600;
color: var(--color-text);
background-color: var(--color-bg-muted);
padding: 6px 10px;
border-radius: 6px;
white-space: nowrap;
}
.ntw-cart-item-remove {
width: 28px; height: 28px;
background: transparent;
border: 1px solid var(--color-border);
border-radius: 50%;
font-size: 18px;
line-height: 1;
color: rgba(34,31,33,0.5);
cursor: pointer;
transition: all var(--transition-fast);
}
.ntw-cart-item-remove:hover {
background-color: #ef4444;
border-color: #ef4444;
color: #fff;
}
/* ---- Summary aside ---- */
.ntw-cart-summary {
background-color: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 24px;
position: sticky;
top: 100px;
}
.ntw-cart-summary-title {
font-size: 18px;
font-weight: 700;
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid var(--color-border);
}
.ntw-cart-summary-rows { margin: 0; padding: 0; }
.ntw-cart-summary-row {
display: flex;
justify-content: space-between;
padding: 10px 0;
font-size: 14px;
color: rgba(34,31,33,0.75);
}
.ntw-cart-summary-row dt, .ntw-cart-summary-row dd { margin: 0; }
.ntw-cart-summary-row.ntw-cart-summary-total {
margin-top: 8px;
padding-top: 16px;
border-top: 1px solid var(--color-border);
font-size: 18px;
font-weight: 700;
color: var(--color-text);
}
.ntw-cart-summary-note {
margin: 16px 0 0;
padding: 10px 12px;
background-color: var(--color-bg-soft);
border-radius: 8px;
font-size: 12px;
color: rgba(34,31,33,0.6);
line-height: 1.4;
min-height: 38px;
}
/* ---- Form ---- */
.ntw-cart-form {
background-color: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 30px;
transition: opacity var(--transition);
}
.ntw-cart-fieldset {
border: 0;
padding: 0;
margin: 0 0 24px;
}
.ntw-cart-fieldset legend {
font-size: 16px;
font-weight: 700;
color: var(--color-text);
padding: 0;
margin-bottom: 14px;
}
.ntw-cart-row-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
@media (max-width: 600px) {
.ntw-cart-row-2 { grid-template-columns: 1fr; }
}
.ntw-cart-form label {
display: block;
margin-bottom: 12px;
}
.ntw-cart-form label > span {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--color-text);
margin-bottom: 4px;
}
.ntw-cart-form input[type="text"],
.ntw-cart-form input[type="email"],
.ntw-cart-form input[type="tel"],
.ntw-cart-form input[type="number"],
.ntw-cart-form select {
width: 100%;
padding: 10px 14px;
background-color: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 8px;
font-family: var(--font-base);
font-size: 14px;
color: var(--color-text);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.ntw-cart-form input:focus,
.ntw-cart-form select:focus {
outline: 0;
border-color: var(--color-main-1);
box-shadow: 0 0 0 3px rgba(0, 154, 79, 0.12);
}
/* Radio Pro/Particulier */
.ntw-cart-customer-type {
display: flex;
gap: 0;
background-color: var(--color-bg-muted);
padding: 4px;
border-radius: 10px;
margin-bottom: 28px;
}
.ntw-cart-customer-type legend { display: none; }
.ntw-cart-radio {
flex: 1;
margin: 0;
cursor: pointer;
text-align: center;
padding: 10px 16px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
color: rgba(34,31,33,0.6);
transition: all var(--transition-fast);
}
.ntw-cart-radio input { display: none; }
.ntw-cart-radio:has(input:checked) {
background-color: var(--color-bg);
color: var(--color-main-1);
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
/* Toggle livraison + CGV */
.ntw-cart-toggle-delivery,
.ntw-cart-cgv {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 0;
cursor: pointer;
font-size: 14px;
}
.ntw-cart-toggle-delivery input,
.ntw-cart-cgv input {
margin: 3px 0 0;
accent-color: var(--color-main-1);
cursor: pointer;
}
.ntw-cart-cgv { padding-top: 16px; border-top: 1px solid var(--color-border); margin-top: 16px; }
.ntw-cart-cgv a { color: var(--color-main-1); text-decoration: underline; }
/* Shipping feedback */
.ntw-cart-shipping-feedback {
margin: 12px 0 0;
padding: 10px 12px;
background-color: rgba(0, 154, 79, 0.08);
border-radius: 8px;
font-size: 13px;
color: var(--color-main-1);
font-weight: 600;
min-height: 18px;
}
.ntw-cart-shipping-feedback:empty { display: none; }
.ntw-cart-shipping-feedback.is-error {
background-color: rgba(239, 68, 68, 0.08);
color: #b91c1c;
}
/* Submit + erreurs */
.ntw-cart-actions { margin-top: 28px; }
.ntw-cart-submit {
width: 100%;
padding: 16px 20px;
background-color: var(--color-main-1);
color: #fff;
border: 0;
border-radius: var(--radius);
font-family: var(--font-base);
font-size: 16px;
font-weight: 700;
letter-spacing: 0.5px;
cursor: pointer;
transition: all var(--transition-fast);
box-shadow: 0 4px 16px -4px rgba(0,154,79,0.4);
}
.ntw-cart-submit:hover:not(:disabled) {
background-color: var(--color-main-1-hover);
transform: translateY(-2px);
box-shadow: 0 8px 24px -4px rgba(0,154,79,0.5);
}
.ntw-cart-submit:disabled {
background-color: #d1d5db;
color: #6b7280;
cursor: not-allowed;
box-shadow: none;
transform: none;
}
.ntw-cart-error {
margin-top: 16px;
padding: 12px 16px;
background-color: rgba(239, 68, 68, 0.08);
border: 1px solid rgba(239, 68, 68, 0.25);
border-radius: 8px;
color: #b91c1c;
font-size: 14px;
}
.ntw-cart-field-errors {
margin: 12px 0 0;
padding: 12px 16px 12px 32px;
background-color: rgba(239, 68, 68, 0.05);
border-radius: 8px;
color: #b91c1c;
font-size: 13px;
}
.ntw-cart-field-errors li { margin: 2px 0; }
/* ---- Page confirmation ---- */
.ntw-confirmation-page {
padding: 60px 20px 80px;
background-color: var(--color-bg-soft);
min-height: 60vh;
}
.ntw-confirmation-container {
max-width: 720px;
margin: 0 auto;
}
.ntw-confirmation-header {
text-align: center;
background-color: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 40px 30px 30px;
margin-bottom: 24px;
position: relative;
}
.ntw-confirmation-header::before {
content: "";
display: block;
width: 64px;
height: 64px;
margin: 0 auto 18px;
background-color: var(--color-main-1);
border-radius: 50%;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 32px;
}
.ntw-confirmation-title {
font-size: clamp(24px, 3.5vw, 34px);
font-weight: 700;
color: var(--color-text);
margin-bottom: 8px;
}
.ntw-confirmation-ref {
font-size: 14px;
color: rgba(34,31,33,0.65);
margin-bottom: 16px;
}
.ntw-confirmation-ref code {
background-color: var(--color-bg-muted);
padding: 2px 8px;
border-radius: 4px;
font-size: 13px;
color: var(--color-main-1);
}
.ntw-confirmation-note {
max-width: 480px;
margin: 0 auto;
color: rgba(34,31,33,0.7);
line-height: 1.5;
}
.ntw-confirmation-recap {
background-color: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 30px;
margin-bottom: 24px;
}
.ntw-confirmation-recap h2 {
font-size: 18px;
font-weight: 700;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid var(--color-border);
}
.ntw-confirmation-items {
list-style: none;
padding: 0;
margin: 0 0 24px;
}
.ntw-confirmation-items li {
display: flex;
flex-direction: column;
gap: 4px;
padding: 14px 0;
border-bottom: 1px solid var(--color-border);
font-size: 14px;
}
.ntw-confirmation-items li:last-child { border-bottom: 0; }
.ntw-confirmation-items strong {
font-size: 15px;
color: var(--color-text);
font-weight: 600;
}
.ntw-confirmation-items span { color: rgba(34,31,33,0.6); font-size: 13px; }
.ntw-confirmation-amounts {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
padding-top: 20px;
border-top: 1px solid var(--color-border);
}
@media (max-width: 600px) {
.ntw-confirmation-amounts { grid-template-columns: 1fr; gap: 8px; }
}
.ntw-confirmation-amounts > div {
background-color: var(--color-bg-soft);
border-radius: 8px;
padding: 14px;
text-align: center;
}
.ntw-confirmation-amounts dt {
font-size: 12px;
color: rgba(34,31,33,0.6);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 6px;
}
.ntw-confirmation-amounts dd {
margin: 0;
font-size: 18px;
font-weight: 700;
color: var(--color-text);
}
.ntw-confirmation-sellsy {
margin: 20px 0 0;
padding: 12px 16px;
background-color: rgba(0, 154, 79, 0.06);
border-radius: 8px;
color: var(--color-main-1);
font-size: 13px;
font-weight: 600;
}
.ntw-confirmation-back {
text-align: center;
margin-top: 24px;
}
.ntw-confirmation-back a {
display: inline-block;
padding: 12px 28px;
background-color: var(--color-main-1);
color: #fff;
border-radius: var(--radius);
text-decoration: none;
font-weight: 600;
transition: background var(--transition-fast);
}
.ntw-confirmation-back a:hover { background-color: var(--color-main-1-hover); }
.ntw-confirmation-warning {
text-align: center;
background-color: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 50px 30px;
}
.ntw-confirmation-warning h1 { font-size: 24px; margin-bottom: 16px; }
.ntw-confirmation-warning p { color: rgba(34,31,33,0.7); margin-bottom: 12px; }
/* ---- Toast feedback ---- */
.ntw-toast {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 9999;
padding: 14px 20px;
background-color: var(--color-text);
color: #fff;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
box-shadow: 0 10px 40px -10px rgba(0,0,0,0.4);
transform: translateX(120%);
opacity: 0;
transition: transform 0.35s ease, opacity 0.35s ease;
max-width: 360px;
}
.ntw-toast.is-visible {
transform: translateX(0);
opacity: 1;
}
.ntw-toast--success { background-color: var(--color-main-1); }
.ntw-toast--error { background-color: #ef4444; }
@media (max-width: 600px) {
.ntw-toast { left: 16px; right: 16px; max-width: none; }
}
/* ============================================================ */
/* Page Ultrashield Naturale - blocs & variants ajoutes (05/2026) */
/* ============================================================ */
/* ---- BLOC: texte (variant default-text : paragraphes simples, sobre) ---- */
.block-text-container.default-text {
color: rgba(34, 31, 33, 0.78);
}
.block-text-container.default-text p {
line-height: 1.7;
font-size: 17px;
margin: 0 0 14px;
}
.block-text-container.default-text p:last-child { margin-bottom: 0; }
.block-text-container.default-text.center { text-align: center; }
.block-text-container.default-text a,
.block-text-container.default-text strong { color: var(--color-main-1); font-weight: 600; }
.block-text-container.default-text a { text-decoration: none; }
.block-text-container.default-text ul { padding-left: 18px; line-height: 1.7; }
.block-text-container.default-text ul li::marker { color: var(--color-main-1); }
/* ---- BLOC: texte (variant default-quote : citation prominente) ---- */
.block-text-container.default-quote {
text-align: center;
position: relative;
padding-block: var(--space-1);
}
.block-text-container.default-quote::before {
content: "\201C";
font-family: Georgia, "Times New Roman", serif;
font-size: 140px;
color: var(--color-main-1);
opacity: 0.18;
position: absolute;
top: -5px;
left: 50%;
transform: translateX(-50%);
line-height: 1;
pointer-events: none;
}
.block-text-container.default-quote blockquote,
.block-text-container.default-quote p:first-child {
position: relative;
z-index: 1;
margin: 0 auto;
max-width: 760px;
font-size: clamp(20px, 2.2vw, 26px);
line-height: 1.55;
font-weight: 400;
font-style: italic;
color: var(--color-text);
padding: 30px 0 14px;
}
.block-text-container.default-quote blockquote::before,
.block-text-container.default-quote > *:first-child::before {
content: "";
display: block;
width: 60px;
height: 3px;
background: var(--color-main-1);
margin: 0 auto 26px;
}
.block-text-container.default-quote cite {
display: inline-block;
font-style: normal;
font-size: 13px;
color: var(--color-main-1);
text-transform: uppercase;
letter-spacing: 1.5px;
font-weight: 700;
}
/* ---- BLOC: cards (variant default-cards.features : grille 3xN icone+texte) ---- */
.default-cards.features { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .default-cards.features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .default-cards.features { grid-template-columns: 1fr; } }
.default-cards.features .card {
background-color: var(--color-bg-soft);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 32px 26px 28px;
text-align: center;
transition: transform var(--transition), box-shadow var(--transition);
box-shadow: rgba(149, 157, 165, 0.15) 0 4px 20px;
}
.default-cards.features .card:hover {
transform: translateY(-5px);
box-shadow: rgba(149, 157, 165, 0.3) 0 8px 30px;
}
.default-cards.features .card .image-container {
width: auto;
height: 90px;
margin: 0 auto 18px;
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: auto;
}
.default-cards.features .card .image-container picture {
display: inline-flex;
width: 90px;
height: 90px;
}
.default-cards.features .card .image-container img {
width: 90px;
height: 90px;
object-fit: contain;
/* Pas de filter : les pictos features sont des badges noirs en couleur native
(cf series picto-* sur la page Ultrashield Naturale). L'ancien filtre
svg-main-1 etait fait pour des silhouettes SVG monochromes. */
}
.default-cards.features .card .text-container { padding: 0; }
.default-cards.features .card .inner-text-container { display: block; }
.default-cards.features .card h2 {
font-size: 18px;
font-weight: 700;
color: var(--color-text);
margin: 0 0 10px;
line-height: 1.3;
}
.default-cards.features .card .text-container > div,
.default-cards.features .card .inner-text-container > div {
color: rgba(34, 31, 33, 0.7);
font-size: 14px;
line-height: 1.6;
}
.default-cards.features .card .inner-text-container > div p { margin: 0; }
/* ---- BLOC: slider_images (variant .colors : swatchs coloris au lieu d'images 16:9) ---- */
.block-images-container.colors .slider-images-swiper .swiper .swiper-slide {
width: 220px;
background-color: var(--color-bg);
border-radius: var(--radius);
aspect-ratio: auto;
}
.block-images-container.colors .slider-images-swiper .swiper .swiper-slide picture {
display: block;
overflow: hidden;
}
.block-images-container.colors .slider-images-swiper .swiper .swiper-slide img {
aspect-ratio: 1;
object-fit: cover;
height: auto;
transform: scale(1.5);
}
.block-images-container.colors .slider-images-swiper .swiper .swiper-slide .swatch-label {
display: block;
padding: 12px 14px;
text-align: center;
font-size: 14px;
font-weight: 600;
color: var(--color-text);
background-color: var(--color-bg);
}
.block-images-container.colors .slider-images-swiper .swiper .swiper-slide .swatch-label small {
display: block;
color: var(--color-main-1);
font-weight: 500;
font-size: 11px;
margin-top: 2px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.block-images-container.colors .slider-images-swiper .swiper .swiper-pagination {
bottom: -30px;
}
/* ---- slider_images variante .colors mode GRID (3 par ligne strictes) ----
Active quand le champ ACF `colors_display` vaut `grid`. CSS Grid 3 colonnes
cappees a 260px : garantit "3 par row max, jamais plus" peu importe la largeur
du conteneur parent (section-article 1000px sur bardage, section-normal 1200px
sur terrasse, ou full bleed). La derniere row est centree par
justify-content:center si le nombre de swatches n'est pas multiple de 3. */
.block-images-container.colors .swatches-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 260px));
justify-content: center;
gap: 24px;
}
.block-images-container.colors .swatches-grid > .swatch {
background-color: var(--color-bg);
border-radius: 10px;
overflow: hidden;
box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.block-images-container.colors .swatches-grid > .swatch:hover {
transform: translateY(-4px);
box-shadow: rgba(149, 157, 165, 0.35) 0 14px 32px;
}
.block-images-container.colors .swatches-grid > .swatch picture {
display: block;
overflow: hidden;
}
.block-images-container.colors .swatches-grid > .swatch img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
height: auto;
transform: scale(1.5);
}
.block-images-container.colors .swatches-grid > .swatch .swatch-label {
display: block;
padding: 12px 14px;
text-align: center;
font-size: 14px;
font-weight: 600;
color: var(--color-text);
background-color: var(--color-bg);
}
/* Mobile : 2 par row sous 600px, 1 par row sous 400px */
@media (max-width: 600px) {
.block-images-container.colors .swatches-grid {
grid-template-columns: repeat(2, minmax(0, 260px));
}
}
@media (max-width: 400px) {
.block-images-container.colors .swatches-grid {
grid-template-columns: minmax(0, 280px);
}
}
/* ---- slider_images variante .categories : mise en avant des categories produits NTW ----
Chaque slide = image de fond de la categorie + nom en overlay, lien vers la page categorie. */
.block-images-container.categories .slider-images-swiper .swiper .swiper-slide img {
aspect-ratio: auto;
}
.block-images-container.categories .category-slide {
display: block;
position: relative;
aspect-ratio: 16 / 9;
background-color: var(--color-main-1);
}
.block-images-container.categories .category-slide picture,
.block-images-container.categories .category-slide img {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
}
.block-images-container.categories .category-slide img {
object-fit: cover;
object-position: center;
}
.block-images-container.categories .category-slide::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(to top, rgba(34, 31, 33, 0.85) 0%, rgba(34, 31, 33, 0.15) 55%, rgba(34, 31, 33, 0) 100%);
}
.block-images-container.categories .category-slide-label {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
padding: 20px 18px;
color: #fff;
text-align: left;
}
.block-images-container.categories .category-slide-parent {
display: block;
margin-bottom: 3px;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.6px;
color: #44da91;
}
.block-images-container.categories .category-slide-name {
display: block;
font-size: 20px;
font-weight: 700;
line-height: 1.25;
}
/* ---- Variant quote-ban : citation sur image de fond avec overlay renforce ---- */
.block-ban-container.quote-ban::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(135deg, rgba(34, 31, 33, 0.8), rgba(0, 154, 79, 0.45));
}
.block-ban-container.quote-ban .content {
z-index: 2;
text-align: center;
align-items: center;
max-width: var(--width-narrow);
}
.block-ban-container.quote-ban .text {
margin-bottom: 0;
}
.block-ban-container.quote-ban .text p:first-child {
font-size: clamp(22px, 2.6vw, 34px);
font-weight: 300;
font-style: italic;
line-height: 1.5;
max-width: 820px;
margin: 0 auto 24px;
}
.block-ban-container.quote-ban .text p:last-child { margin-bottom: 0; }
.block-ban-container.quote-ban .text strong {
display: inline-block;
font-size: 14px;
font-weight: 700;
font-style: normal;
text-transform: uppercase;
letter-spacing: 2px;
color: #fff;
}
.block-ban-container.quote-ban .text strong::before {
content: "";
display: block;
width: 50px;
height: 2px;
background: var(--color-main-1);
margin: 0 auto 14px;
}
/* ---- NEW BLOC: hotspots (image interactive + dots cliquables) ---- */
.block-hotspots-container { width: 100%; }
.block-hotspots-container.default-hotspots .content-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 50px;
row-gap: 30px;
align-items: center;
}
@media (max-width: 900px) {
.block-hotspots-container.default-hotspots .content-wrapper {
grid-template-columns: 1fr;
}
}
.block-hotspots-container .hotspots-image {
position: relative;
border-radius: var(--radius);
overflow: hidden;
background-color: var(--color-bg-soft);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-card);
}
.block-hotspots-container .hotspots-image img {
width: 100%;
height: auto;
display: block;
}
.block-hotspots-container .hotspot-dot {
position: absolute;
width: 38px;
height: 38px;
border-radius: 50%;
background-color: var(--color-main-1);
border: 3px solid #fff;
color: #fff;
font-weight: 700;
font-size: 15px;
display: inline-flex;
align-items: center;
justify-content: center;
transform: translate(-50%, -50%);
cursor: pointer;
transition: transform var(--transition), background-color var(--transition);
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
z-index: 2;
padding: 0;
font-family: var(--font-base);
}
.block-hotspots-container .hotspot-dot::before {
content: "";
position: absolute;
inset: -8px;
border-radius: 50%;
background-color: var(--color-main-1);
opacity: 0.4;
z-index: -1;
animation: ntwHotspotPulse 2s ease-in-out infinite;
}
@keyframes ntwHotspotPulse {
0%, 100% { transform: scale(1); opacity: 0.4; }
50% { transform: scale(1.4); opacity: 0; }
}
.block-hotspots-container .hotspot-dot:hover,
.block-hotspots-container .hotspot-dot.is-active {
background-color: var(--color-main-1-hover);
transform: translate(-50%, -50%) scale(1.12);
}
.block-hotspots-container .hotspot-dot.is-active::before { animation: none; opacity: 0; }
.block-hotspots-container .hotspots-content { position: relative; min-height: 240px; }
.block-hotspots-container .hotspot-panel {
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s;
}
.block-hotspots-container .hotspot-panel.is-active {
position: relative;
opacity: 1;
visibility: visible;
}
.block-hotspots-container .hotspot-panel .surtitle { margin-bottom: 16px; }
.block-hotspots-container .hotspot-panel .surtitle .num {
width: 22px;
height: 22px;
border-radius: 50%;
background: #fff;
color: var(--color-main-1);
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 12px;
}
.block-hotspots-container .hotspot-panel h2 {
font-size: clamp(24px, 2.6vw, 32px);
margin-bottom: 14px;
color: var(--color-text);
}
.block-hotspots-container .hotspot-panel p {
color: rgba(34, 31, 33, 0.78);
font-size: 16px;
line-height: 1.7;
margin: 0 0 14px;
}
.block-hotspots-container .hotspot-panel p:last-child { margin-bottom: 0; }
/* ---- NEW BLOC: tabbed_compare (tabs + slider avant/apres) ---- */
.block-tabbed-compare-container { width: 100%; }
.block-tabbed-compare-container .tc-tabs-nav {
display: flex;
justify-content: center;
gap: 4px;
margin-bottom: 30px;
flex-wrap: wrap;
}
.block-tabbed-compare-container .tc-tab-btn {
background: transparent;
border: 0;
padding: 14px 22px;
font-size: 15px;
font-weight: 600;
color: rgba(34, 31, 33, 0.6);
border-bottom: 3px solid transparent;
margin-bottom: -1px;
transition: color var(--transition-fast), border-color var(--transition-fast);
font-family: var(--font-base);
cursor: pointer;
}
.block-tabbed-compare-container .tc-tab-btn:hover { color: var(--color-main-1); }
.block-tabbed-compare-container .tc-tab-btn.is-active {
color: var(--color-main-1);
border-bottom-color: var(--color-main-1);
}
.block-tabbed-compare-container .tc-tab-panel { display: none; }
.block-tabbed-compare-container .tc-tab-panel.is-active { display: block; }
.block-tabbed-compare-container .tc-slider {
position: relative;
width: 100%;
max-width: 900px;
margin: 0 auto;
aspect-ratio: 16/9;
overflow: hidden;
border-radius: var(--radius);
box-shadow: var(--shadow-card);
user-select: none;
cursor: ew-resize;
background-color: var(--color-bg-muted);
touch-action: none;
}
.block-tabbed-compare-container .tc-slider img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
display: block;
}
.block-tabbed-compare-container .tc-slider .tc-before { z-index: 1; }
.block-tabbed-compare-container .tc-slider .tc-after {
z-index: 2;
clip-path: inset(0 0 0 50%);
}
.block-tabbed-compare-container .tc-slider .tc-label {
position: absolute;
top: 18px;
padding: 6px 14px;
background-color: rgba(34, 31, 33, 0.85);
color: #fff;
border-radius: 30px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
z-index: 3;
pointer-events: none;
}
.block-tabbed-compare-container .tc-slider .tc-label.is-before { left: 18px; }
.block-tabbed-compare-container .tc-slider .tc-label.is-after { right: 18px; background-color: var(--color-main-1); }
.block-tabbed-compare-container .tc-slider .tc-handle {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 3px;
background-color: #fff;
transform: translateX(-50%);
z-index: 4;
pointer-events: none;
box-shadow: 0 0 12px rgba(0,0,0,0.4);
}
.block-tabbed-compare-container .tc-slider .tc-handle::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 44px;
height: 44px;
border-radius: 50%;
background: #fff;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.block-tabbed-compare-container .tc-slider .tc-handle::before {
content: "\2194";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 22px;
font-weight: 700;
color: var(--color-main-1);
z-index: 1;
}
.block-tabbed-compare-container .tc-caption {
text-align: center;
margin-top: 18px;
font-size: 14px;
color: rgba(34, 31, 33, 0.6);
font-style: italic;
}
/* ============================================================ */
/* Page Respect de la nature — blocs & variants ajoutes (05/2026) */
/* ============================================================ */
/* ---- BLOC: cards (modificateur cols-3 pour key-numbers : 3 colonnes au lieu de 4) ---- */
.default-cards.key-numbers.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .default-cards.key-numbers.cols-3 { grid-template-columns: 1fr; } }
/* ---- BLOC: cards (variant key-numbers.light : cartes claires, icone vert, chiffre sombre) ----
La version de base .key-numbers (cartes vertes) reste utilisee par Ultrashield.
Ajouter "light" en secondary_class pour la version claire (Respect de la nature). */
.default-cards.key-numbers.light .card {
background-color: var(--color-bg-soft);
border: 1px solid var(--color-border);
padding: 30px 24px 26px;
box-shadow: none;
}
.default-cards.key-numbers.light .card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card);
}
.default-cards.key-numbers.light .card .image-container img {
filter: var(--svg-main-1);
width: 40px;
height: 40px;
}
.default-cards.key-numbers.light .card h2 {
font-size: clamp(40px, 4.5vw, 54px);
color: var(--color-text);
margin-bottom: 8px;
font-variant-numeric: tabular-nums;
}
.default-cards.key-numbers.light .card .text-container > div p {
color: rgba(34, 31, 33, 0.7);
font-size: 15px;
}
/* ---- NEW BLOC: loop (anneau economie circulaire anime + 4 noeuds cliquables) ---- */
.block-loop-container { width: 100%; }
.block-loop-container .content-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
column-gap: 60px;
row-gap: 40px;
}
@media (max-width: 900px) {
.block-loop-container .content-wrapper { grid-template-columns: 1fr; justify-items: center; }
}
/* --- L'anneau --- */
.block-loop-container .loop-ring {
--loop-d: 320px;
--loop-r: 126px;
--loop-dot: 62px;
position: relative;
width: var(--loop-d);
height: var(--loop-d);
margin-inline: auto;
flex-shrink: 0;
}
.block-loop-container .loop-ring-svg {
position: absolute; inset: 0;
width: 100%; height: 100%;
transform: rotate(-90deg);
}
.block-loop-container .loop-ring-track {
fill: none;
stroke: var(--color-border);
stroke-width: 3;
}
.block-loop-container .loop-ring-flow {
fill: none;
stroke: var(--color-main-1);
stroke-width: 4;
stroke-linecap: round;
stroke-dasharray: 70 426;
animation: ntwLoopFlow 5s linear infinite;
}
@keyframes ntwLoopFlow {
to { stroke-dashoffset: -496; }
}
/* --- Disque central fixe --- */
.block-loop-container .loop-center {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 150px; height: 150px;
border-radius: 50%;
background: var(--color-bg);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-card);
display: flex; flex-direction: column;
align-items: center; justify-content: center;
text-align: center;
}
.block-loop-container .loop-center strong {
font-size: 34px; font-weight: 700;
color: var(--color-main-1); line-height: 1;
}
.block-loop-container .loop-center span {
font-size: 12px; font-weight: 500;
color: rgba(34, 31, 33, 0.6);
text-transform: uppercase; letter-spacing: 1px;
margin-top: 4px;
}
/* --- Les noeuds autour de l'anneau --- */
.block-loop-container .loop-node {
--a: 0deg;
position: absolute;
top: 50%; left: 50%;
width: var(--loop-dot); height: var(--loop-dot);
padding: 0; border: 0; background: transparent;
transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(-1 * var(--loop-r))) rotate(calc(-1 * var(--a)));
font-family: var(--font-base);
z-index: 2;
cursor: pointer;
}
.block-loop-container .loop-node[data-pos="top"] { --a: 0deg; }
.block-loop-container .loop-node[data-pos="right"] { --a: 90deg; }
.block-loop-container .loop-node[data-pos="bottom"] { --a: 180deg; }
.block-loop-container .loop-node[data-pos="left"] { --a: 270deg; }
.block-loop-container .loop-node-dot {
position: relative;
width: 100%; height: 100%;
border-radius: 50%;
background: var(--color-bg);
border: 2px solid var(--color-border);
color: rgba(34, 31, 33, 0.55);
display: flex; align-items: center; justify-content: center;
transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}
.block-loop-container .loop-node-dot img,
.block-loop-container .loop-node-dot svg {
width: 26px; height: 26px;
filter: var(--svg-main-1);
transition: filter var(--transition);
}
.block-loop-container .loop-node-num {
position: absolute;
top: -5px; right: -5px;
width: 22px; height: 22px;
border-radius: 50%;
background: var(--color-text);
color: #fff;
font-size: 12px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
transition: background var(--transition);
}
.block-loop-container .loop-node-label {
position: absolute;
white-space: nowrap;
font-size: 13px; font-weight: 600;
color: rgba(34, 31, 33, 0.6);
pointer-events: none;
transition: color var(--transition);
}
.block-loop-container .loop-node[data-pos="top"] .loop-node-label { bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); }
.block-loop-container .loop-node[data-pos="bottom"] .loop-node-label { top: calc(100% + 8px); left: 50%; transform: translateX(-50%); }
.block-loop-container .loop-node[data-pos="right"] .loop-node-label { left: calc(100% + 12px); top: 50%; transform: translateY(-50%); }
.block-loop-container .loop-node[data-pos="left"] .loop-node-label { right: calc(100% + 12px); top: 50%; transform: translateY(-50%); }
.block-loop-container .loop-node:hover .loop-node-dot {
border-color: var(--color-main-1);
color: var(--color-main-1);
transform: scale(1.06);
}
.block-loop-container .loop-node.is-active .loop-node-dot {
background: var(--color-main-1);
border-color: var(--color-main-1);
color: #fff;
transform: scale(1.12);
animation: ntwLoopPulse 2.2s ease-out infinite;
}
.block-loop-container .loop-node.is-active .loop-node-dot img,
.block-loop-container .loop-node.is-active .loop-node-dot svg {
filter: var(--svg-white);
}
.block-loop-container .loop-node.is-active .loop-node-label { color: var(--color-main-1); }
@keyframes ntwLoopPulse {
0% { box-shadow: 0 0 0 0 rgba(0, 154, 79, 0.45); }
70% { box-shadow: 0 0 0 16px rgba(0, 154, 79, 0); }
100% { box-shadow: 0 0 0 0 rgba(0, 154, 79, 0); }
}
/* --- Panneau de detail de l'etape active --- */
.block-loop-container .loop-detail {
position: relative;
min-height: 230px;
}
.block-loop-container .loop-panel {
position: absolute; inset: 0;
opacity: 0; visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s;
}
.block-loop-container .loop-panel.is-active {
position: relative;
opacity: 1; visibility: visible;
}
.block-loop-container .loop-panel .surtitle .num {
width: 20px; height: 20px;
border-radius: 50%;
background: #fff;
color: var(--color-main-1);
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 11px;
}
.block-loop-container .loop-panel h3 {
font-size: clamp(22px, 2.6vw, 30px);
margin-bottom: 14px;
color: var(--color-text);
}
.block-loop-container .loop-panel p {
color: rgba(34, 31, 33, 0.78);
font-size: 16px; line-height: 1.75;
margin: 0;
}
.block-loop-container .loop-hint {
margin-top: 22px;
font-size: 13px;
color: rgba(34, 31, 33, 0.5);
font-style: italic;
}
@media (max-width: 600px) {
.block-loop-container .loop-ring {
--loop-d: 280px;
--loop-r: 110px;
--loop-dot: 56px;
}
.block-loop-container .loop-node-label { display: none; }
.block-loop-container .loop-center { width: 130px; height: 130px; }
.block-loop-container .loop-center strong { font-size: 30px; }
.block-loop-container .loop-detail { min-height: 0; text-align: center; }
.block-loop-container .loop-panel .surtitle { margin-inline: auto; }
}
/* ---- BLOC: slider_images (variant certifications : cartes cliquables vers PDF / page) ---- */
.block-images-container.certifications .slider-images-swiper .swiper .swiper-slide {
width: 240px;
height: auto;
background: transparent;
/* override default-slider (carte produit) qui pose ombre + radius + hover sur chaque slide */
border-radius: 0;
overflow: visible;
box-shadow: none;
}
.block-images-container.certifications .slider-images-swiper .swiper .swiper-slide:hover {
transform: none;
box-shadow: none;
}
/* l'icone cert est carree (200x200 contain), pas 16/9 cover comme un visuel produit */
.block-images-container.certifications .slider-images-swiper .swiper .swiper-slide img.cert-icon {
aspect-ratio: auto;
width: 200px; height: 200px;
object-fit: contain;
}
.block-images-container.certifications .cert-card {
display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 12px;
height: 300px;
padding: 10px;
text-align: center; text-decoration: none;
background: none;
border: 0;
transition: transform var(--transition);
}
.block-images-container.certifications .cert-card:hover {
transform: translateY(-4px);
}
.block-images-container.certifications .cert-icon {
width: 200px; height: 200px;
object-fit: contain;
flex-shrink: 0;
display: block;
}
.block-images-container.certifications .cert-name {
width: 100%;
font-size: 16px; font-weight: 600;
color: var(--color-text);
line-height: 1.3;
white-space: normal;
overflow-wrap: break-word;
hyphens: auto;
}
/* ---- BLOC: video (default-video) ---- */
.block-video-container { width: 100%; }
.block-video-container .lab-video {
width: 100%;
height: auto;
aspect-ratio: 16/9;
display: block;
border-radius: var(--radius);
box-shadow: var(--shadow-card);
border: 1px solid var(--color-border);
background-color: var(--color-bg-soft);
object-fit: cover;
}
/* ---- BLOC: lab_tests (default-lab-tests) ----
Master-detail interactif : liste verticale a gauche + panneau sticky a droite.
Mobile : la nav passe en stack au-dessus du panneau, le panneau perd son sticky. */
.block-lab-tests-container { width: 100%; }
.block-lab-tests-container .content-wrapper {
display: grid;
grid-template-columns: minmax(280px, 380px) 1fr;
column-gap: 40px;
row-gap: 24px;
align-items: start;
}
.block-lab-tests-container .lab-tests-nav {
display: flex;
flex-direction: column;
gap: 8px;
position: sticky;
top: 120px;
}
.block-lab-tests-container .lab-test-btn {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
column-gap: 14px;
padding: 16px 18px;
background: var(--color-bg-soft);
border: 1px solid var(--color-border);
border-radius: var(--radius);
text-align: left;
font-family: var(--font-base);
color: var(--color-text);
cursor: pointer;
transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition-fast);
}
.block-lab-tests-container .lab-test-btn:hover { transform: translateX(3px); }
.block-lab-tests-container .lab-test-btn .lab-test-num {
width: 34px; height: 34px;
border-radius: 50%;
background: var(--color-bg-muted);
color: rgba(34, 31, 33, 0.5);
display: flex; align-items: center; justify-content: center;
font-weight: 700;
font-size: 13px;
font-variant-numeric: tabular-nums;
flex-shrink: 0;
transition: background var(--transition), color var(--transition);
}
.block-lab-tests-container .lab-test-btn .lab-test-info {
min-width: 0;
display: flex; flex-direction: column;
}
.block-lab-tests-container .lab-test-btn .lab-test-name {
font-weight: 600;
font-size: 15px;
line-height: 1.3;
}
.block-lab-tests-container .lab-test-btn .lab-test-meta {
font-size: 12px;
color: rgba(34, 31, 33, 0.55);
margin-top: 2px;
}
.block-lab-tests-container .lab-test-btn .lab-test-arrow {
width: 18px; height: 18px;
color: rgba(34, 31, 33, 0.35);
flex-shrink: 0;
transition: transform var(--transition), color var(--transition);
}
.block-lab-tests-container .lab-test-btn.is-active {
background: var(--color-main-1);
color: #fff;
border-color: var(--color-main-1);
transform: none;
}
.block-lab-tests-container .lab-test-btn.is-active .lab-test-num { background: #fff; color: var(--color-main-1); }
.block-lab-tests-container .lab-test-btn.is-active .lab-test-meta { color: rgba(255, 255, 255, 0.8); }
.block-lab-tests-container .lab-test-btn.is-active .lab-test-arrow { color: #fff; transform: translateX(3px); }
.block-lab-tests-container .lab-test-detail {
position: sticky;
top: 120px;
min-height: 480px;
}
.block-lab-tests-container .lab-test-panel {
display: none;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-card);
}
.block-lab-tests-container .lab-test-panel.is-active {
display: block;
animation: ntwLabFade 0.4s ease both;
}
@keyframes ntwLabFade {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.block-lab-tests-container .lab-test-visual {
position: relative;
aspect-ratio: 16/10;
background-color: var(--color-bg-soft);
border-bottom: 1px solid var(--color-border);
overflow: hidden;
}
.block-lab-tests-container .lab-test-visual img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.block-lab-tests-container .lab-test-body { padding: 28px 28px 30px; }
.block-lab-tests-container .lab-test-body h3 {
font-size: clamp(22px, 2.4vw, 28px);
margin-bottom: 14px;
color: var(--color-text);
}
.block-lab-tests-container .lab-test-body .lab-test-desc {
color: rgba(34, 31, 33, 0.78);
line-height: 1.75;
font-size: 16px;
margin-bottom: 24px;
}
.block-lab-tests-container .lab-test-body .lab-test-desc p { margin: 0 0 12px; }
.block-lab-tests-container .lab-test-body .lab-test-desc p:last-child { margin-bottom: 0; }
.block-lab-tests-container .lab-test-body .lab-test-desc strong { color: var(--color-main-1); font-weight: 700; }
.block-lab-tests-container .lab-test-specs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 14px;
margin: 0;
padding-top: 22px;
border-top: 1px solid var(--color-border);
}
.block-lab-tests-container .lab-test-spec {
display: flex; flex-direction: column;
gap: 4px;
background: var(--color-bg-soft);
padding: 14px 16px;
border-radius: 8px;
border: 1px solid var(--color-border);
}
.block-lab-tests-container .lab-test-spec dt {
font-size: 11px;
color: rgba(34, 31, 33, 0.55);
text-transform: uppercase;
letter-spacing: 0.8px;
font-weight: 600;
margin: 0;
}
.block-lab-tests-container .lab-test-spec dd {
margin: 0;
font-size: 16px;
font-weight: 700;
color: var(--color-text);
font-variant-numeric: tabular-nums;
}
.block-lab-tests-container .lab-test-spec dd .unit {
font-size: 13px;
font-weight: 500;
color: var(--color-main-1);
margin-left: 2px;
}
@media (max-width: 900px) {
.block-lab-tests-container .content-wrapper { grid-template-columns: 1fr; }
.block-lab-tests-container .lab-test-detail { position: static; min-height: 0; order: 2; }
.block-lab-tests-container .lab-tests-nav { position: static; order: 1; }
.block-lab-tests-container .lab-test-btn { padding: 14px 16px; }
}
@media (max-width: 600px) {
.block-lab-tests-container .lab-test-specs { grid-template-columns: 1fr; }
.block-lab-tests-container .lab-test-body { padding: 22px; }
}
/* ---- BLOC: faqs_groupees (FAQ master-detail) ----
Nav verticale sticky a gauche (themes) + panneau Q/R a droite (theme actif).
Les items Q/R reutilisent le markup .block-faqs.faq : style + JS faqPages() partages.
Mobile (<=900px) : la nav passe en stack au-dessus du panneau, perd son sticky. */
.block-faqs-groupes { width: 100%; }
.block-faqs-groupes .content-wrapper {
display: grid;
grid-template-columns: minmax(240px, 320px) 1fr;
column-gap: 40px;
row-gap: 24px;
align-items: start;
}
.block-faqs-groupes .faq-groups-nav {
display: flex;
flex-direction: column;
gap: 8px;
position: sticky;
top: 120px;
}
.block-faqs-groupes .faq-group-btn {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
column-gap: 14px;
padding: 16px 18px;
background: var(--color-bg-soft);
border: 1px solid var(--color-border);
border-radius: var(--radius);
text-align: left;
font-family: var(--font-base);
color: var(--color-text);
cursor: pointer;
transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition-fast);
}
.block-faqs-groupes .faq-group-btn:hover { transform: translateX(3px); }
.block-faqs-groupes .faq-group-name {
font-weight: 600;
font-size: 15px;
line-height: 1.3;
}
.block-faqs-groupes .faq-group-arrow {
width: 18px; height: 18px;
color: rgba(34, 31, 33, 0.35);
flex-shrink: 0;
transition: transform var(--transition), color var(--transition);
}
.block-faqs-groupes .faq-group-btn.is-active {
background: var(--color-main-1);
color: #fff;
border-color: var(--color-main-1);
transform: none;
}
.block-faqs-groupes .faq-group-btn.is-active .faq-group-arrow { color: #fff; transform: translateX(3px); }
.block-faqs-groupes .faq-group-panel { display: none; }
.block-faqs-groupes .faq-group-panel.is-active {
display: block;
animation: ntwFaqFade 0.4s ease both;
}
@keyframes ntwFaqFade {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* Les .faq-item heritent du style .block-faqs.faq ; on neutralise juste la
marge basse du dernier item pour qu'il colle au bas du panneau. */
.block-faqs-groupes .faq-group-panel .block-faqs.faq .faq-item:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
.block-faqs-groupes .content-wrapper { grid-template-columns: 1fr; }
.block-faqs-groupes .faq-groups-nav { position: static; }
.block-faqs-groupes .faq-group-btn { padding: 14px 16px; }
}
/* ---- Page À propos : cartes "chiffres cles" sur fond vert (section-ntw-apropos-003) ---- */
#section-ntw-apropos-003 .default-cards.key-numbers .card {
background-color: var(--color-main-1);
border-color: var(--color-main-1);
}
#section-ntw-apropos-003 .default-cards.key-numbers .card h2 {
color: #fff;
}
#section-ntw-apropos-003 .default-cards.key-numbers .card .text-container > div p {
color: rgba(255, 255, 255, 0.85);
}
/* ============================================================ */
/* Page Contact : formulaire B2B (Contact Form 7) */
/* Hooks : .section-form (class_supp section) + .default-form */
/* (primary_class bloc shortcode) + .ntw-contact-form (markup */
/* CF7). Specifiques a la page Contact, pas de fuite globale. */
/* ============================================================ */
/* Section : fond doux pour detacher la carte blanche du formulaire */
.section-form { background-color: var(--color-bg-soft); }
.section-form .default-form {
display: flex;
justify-content: center;
}
/* Carte du formulaire */
.ntw-contact-form {
width: 100%;
max-width: 760px;
background-color: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius);
box-shadow: var(--shadow-card);
padding: 40px clamp(20px, 4vw, 48px);
}
.ntw-contact-intro {
font-size: var(--fs-body);
line-height: 1.6;
color: rgba(34, 31, 33, 0.7);
margin: 0 0 28px;
padding-bottom: 24px;
border-bottom: 1px solid var(--color-border);
}
/* Lignes a 2 colonnes */
.ntw-form-row-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 18px;
}
/* Champ + label */
.ntw-form-field {
display: block;
margin-bottom: 18px;
}
.ntw-form-label {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--color-text);
margin-bottom: 7px;
}
.ntw-form-label abbr {
color: var(--color-main-1);
text-decoration: none;
border: 0;
font-weight: 700;
}
/* Inputs / select / textarea */
.ntw-contact-form input[type="text"],
.ntw-contact-form input[type="email"],
.ntw-contact-form input[type="tel"],
.ntw-contact-form select,
.ntw-contact-form textarea {
width: 100%;
padding: 12px 14px;
background-color: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 8px;
font-family: var(--font-base);
font-size: 15px;
color: var(--color-text);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.ntw-contact-form textarea {
resize: vertical;
min-height: 140px;
line-height: 1.6;
}
.ntw-contact-form input::placeholder,
.ntw-contact-form textarea::placeholder { color: rgba(34, 31, 33, 0.4); }
.ntw-contact-form input:focus,
.ntw-contact-form select:focus,
.ntw-contact-form textarea:focus {
outline: 0;
border-color: var(--color-main-1);
box-shadow: 0 0 0 3px rgba(0, 154, 79, 0.12);
}
/* CF7 enveloppe chaque champ dans un span : il doit rester block pleine largeur */
.ntw-contact-form .wpcf7-form-control-wrap { display: block; }
/* Select : fleche custom (suppression du style natif) */
.ntw-contact-form select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23221f21' d='M6 8 0 2l1.4-1.4L6 5.2 10.6.6 12 2z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 38px;
cursor: pointer;
}
/* Encart consentement RGPD */
.ntw-form-consent {
margin: 6px 0 4px;
padding: 16px 18px;
background-color: var(--color-bg-muted);
border-radius: 8px;
}
.ntw-form-consent .wpcf7-list-item { margin: 0; }
.ntw-form-consent .wpcf7-list-item label {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 0;
cursor: pointer;
}
.ntw-form-consent input[type="checkbox"] {
width: 18px;
height: 18px;
margin: 1px 0 0;
accent-color: var(--color-main-1);
flex-shrink: 0;
cursor: pointer;
}
.ntw-form-consent .wpcf7-list-item-label {
font-size: 13px;
line-height: 1.55;
color: rgba(34, 31, 33, 0.75);
}
.ntw-form-consent a {
color: var(--color-main-1);
text-decoration: underline;
}
/* Mention champs obligatoires */
.ntw-form-required-note {
font-size: 12px;
color: rgba(34, 31, 33, 0.5);
margin: 14px 0 22px;
}
.ntw-form-required-note abbr {
color: var(--color-main-1);
text-decoration: none;
font-weight: 700;
}
/* Bouton d'envoi (reprend .btn du theme, en pleine largeur) */
.ntw-form-submit { margin: 0; }
.ntw-contact-form .ntw-contact-submit {
cursor: pointer;
display: block;
width: 100%;
background-color: var(--color-main-1);
color: #fff;
border: 0;
border-radius: 5px;
padding: 15px 28px;
font-family: var(--font-base);
font-size: var(--fs-body);
font-weight: 400;
transition: background-color var(--transition), transform var(--transition);
}
.ntw-contact-form .ntw-contact-submit:hover {
background-color: var(--color-main-1-hover);
transform: translateY(-2px);
}
.ntw-contact-form .ntw-contact-submit:active { transform: translateY(0); }
/* Spinner CF7 pendant l'envoi */
.ntw-contact-form .wpcf7-spinner {
margin: 14px auto 0;
display: block;
}
/* Etats de validation par champ (CF7) */
.ntw-contact-form .wpcf7-not-valid {
border-color: #d93025 !important;
box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.1) !important;
}
.ntw-contact-form .wpcf7-not-valid-tip {
display: block;
color: #d93025;
font-size: 12px;
font-weight: 600;
margin-top: 5px;
}
/* Bandeau de reponse global (succes / erreur) */
.section-form .wpcf7-response-output {
margin: 22px 0 0 !important;
padding: 13px 16px !important;
border-radius: 8px;
border-width: 1px;
font-size: 14px;
line-height: 1.5;
}
.section-form form.sent .wpcf7-response-output {
border-color: var(--color-main-1) !important;
background-color: rgba(0, 154, 79, 0.08);
color: var(--color-main-1);
}
.section-form form.invalid .wpcf7-response-output,
.section-form form.failed .wpcf7-response-output,
.section-form form.spam .wpcf7-response-output {
border-color: #d93025 !important;
background-color: rgba(217, 48, 37, 0.07);
color: #d93025;
}
/* Responsive */
@media (max-width: 600px) {
.ntw-form-row-2 { grid-template-columns: 1fr; }
.ntw-contact-form { padding: 28px 20px; }
}
/*========================================================================
* Bloc ACF anchor_nav (ex assets/css/ntw-anchor-nav.css)
* Bandeau d'ancres de navigation, pose juste sous le hero.
*
* Variantes :
* .default-anchor-nav -> fond noir (#0f172a), texte blanc (defaut)
* .default-anchor-nav.grey -> fond gris clair, texte fonce
* .default-anchor-nav.sticky -> position sticky en haut au scroll
*
* Comportement d'ancre global (active des que ce CSS est charge sur la page) :
* - scroll fluide vers les ancres (respect des preferences reduced-motion)
* - offset de 100px sous l'arrivee pour eviter que la cible passe sous le header
*========================================================================*/
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
/* scroll-padding-top sur html ET body : selon le theme, le scroll container
peut etre l'un ou l'autre (overflow:hidden sur html laisse body comme conteneur). */
html,
body {
scroll-padding-top: 100px;
}
/* Plus fiable que scroll-padding-top : poser scroll-margin-top directement sur
chaque cible d'ancre. :where() = specificite 0 (n'overrride rien d'existant).
Couvre toutes les sections et tous les id_block du page builder ACF. */
:where([id]) {
scroll-margin-top: 100px;
}
.block-anchor-nav-container {
width: 100%;
background: #0f172a; /* noir anthracite / slate fonce */
border-bottom: none;
z-index: 50;
}
.block-anchor-nav-container.grey {
background: #f8fafc;
}
.block-anchor-nav-container.sticky {
position: sticky;
top: 0;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
}
.anchor-nav-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 8px 24px;
list-style: none;
margin: 0;
padding: 14px 20px;
max-width: 1200px;
margin-inline: auto;
}
.anchor-nav-item {
margin: 0;
padding: 0;
}
.anchor-nav-link {
display: inline-block;
padding: 8px 4px;
font-size: 0.95rem;
font-weight: 500;
color: #f8fafc; /* texte blanc sur fond noir */
text-decoration: none;
border-bottom: 2px solid transparent;
transition: color 160ms ease, border-color 160ms ease;
line-height: 1.2;
}
.anchor-nav-link:hover,
.anchor-nav-link:focus-visible {
color: #4ade80; /* vert clair pour bon contraste sur noir */
border-bottom-color: #4ade80;
}
/* Variante .grey : ancrage classique sur fond clair (rebascule texte fonce) */
.block-anchor-nav-container.grey .anchor-nav-link {
color: #334155;
}
.block-anchor-nav-container.grey .anchor-nav-link:hover,
.block-anchor-nav-container.grey .anchor-nav-link:focus-visible {
color: #009a4f;
border-bottom-color: #009a4f;
}
@media (max-width: 600px) {
.anchor-nav-list {
gap: 6px 12px;
padding: 10px 14px;
justify-content: flex-start;
overflow-x: auto;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
}
.anchor-nav-link {
font-size: 0.9rem;
white-space: nowrap;
}
}
/*========================================================================
* Bloc ACF product_profile (ex assets/css/ntw-product-profile.css)
* Grille de fiches profils produits (pages Lame de terrasse / Bardage composite).
*
* Variantes :
* .default-product-profile.cols-2 -> grille 2 colonnes >=1024px, 1 col mobile (defaut)
* .default-product-profile.cols-1 -> 1 carte pleine largeur (mode feature)
*========================================================================*/
.block-product-profile-container {
width: 100%;
}
.block-product-profile-container .product-profile-grid {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
}
/* >= 1024px : 2 colonnes par defaut (cols-2 ou pas de modifier) */
@media (min-width: 1024px) {
.block-product-profile-container.cols-2 .product-profile-grid,
.block-product-profile-container:not(.cols-1):not(.cols-3):not(.cols-4) .product-profile-grid {
grid-template-columns: 1fr 1fr;
gap: 40px;
}
}
/* cols-1 : reste 1 colonne quelle que soit la largeur (mode feature pleine largeur) */
.block-product-profile-container.cols-1 .product-profile-grid {
grid-template-columns: 1fr;
}
/* cols-3 / cols-4 : passe a 2 cols >=720px (transition intermediaire) */
@media (min-width: 720px) {
.block-product-profile-container.cols-3 .product-profile-grid,
.block-product-profile-container.cols-4 .product-profile-grid {
grid-template-columns: 1fr 1fr;
gap: 24px;
}
}
/* cols-3 : 3 colonnes >=1024px */
@media (min-width: 1024px) {
.block-product-profile-container.cols-3 .product-profile-grid {
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
}
/* cols-4 : forcee a 2 colonnes >=1024px (decision UX : 4 cartes etait trop dense). */
@media (min-width: 1024px) {
.block-product-profile-container.cols-4 .product-profile-grid {
grid-template-columns: 1fr 1fr;
gap: 40px;
}
}
/* Override page Lame de terrasse composite : grille en 3 colonnes desktop,
2 colonnes en transition (>=720px), 1 colonne en mobile.
Active des que le body porte la classe `terrasse-composite` (ACF page_class). */
@media (min-width: 720px) {
body.terrasse-composite .block-product-profile-container .product-profile-grid {
grid-template-columns: 1fr 1fr;
gap: 24px;
}
}
@media (min-width: 1024px) {
body.terrasse-composite .block-product-profile-container .product-profile-grid {
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
}
/* ---------------- CARTE (fond noir, image carree en haut, body en dessous) ---------------- */
.product-profile-card {
position: relative;
display: flex;
flex-direction: column;
background: #0a0a0a;
border-radius: 18px;
overflow: hidden;
color: #fff;
box-shadow: 0 24px 60px -20px rgba(0,0,0,.45), 0 8px 24px -8px rgba(0,0,0,.25);
isolation: isolate;
}
/* ---------------- IMAGE AMBIANCE (carree 1/1 en haut de carte) ---------------- */
.product-profile-image {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: #1f2937;
}
.product-profile-image picture,
.product-profile-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 700ms cubic-bezier(.2,.7,.2,1);
}
.product-profile-card:hover .product-profile-image img {
transform: scale(1.06);
}
.product-profile-image-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}
/* ---------------- ICONE REASSURANCE (top-left, image seule) ----------------
* Image posee telle quelle (pas de background, pas de pill) en haut a gauche de
* la card. Taille fixe 100x100px. Affichee uniquement si l'icone est renseignee
* cote ACF (`profile_reassurance_icon`). */
.product-profile-reassurance {
position: absolute;
top: 10px;
left: 10px;
z-index: 3;
width: 80px;
height: 80px;
object-fit: contain;
pointer-events: none;
}
/* ---------------- MASQUE BAS DE L'IMAGE (fade vers le noir de la card) ---------------- */
.product-profile-mask {
position: absolute; inset: 0;
background: linear-gradient(
to bottom,
rgba(10,10,10,0) 50%,
rgba(10,10,10,0.55) 80%,
#0a0a0a 100%
);
pointer-events: none;
}
/* ---------------- CORPS DE CARTE (sous l'image, sur le fond noir) ---------------- */
.product-profile-body {
position: relative;
padding: 24px 24px 28px;
display: flex; flex-direction: column;
gap: 14px;
}
.product-profile-eyebrow {
margin: 0 0 -4px;
color: #4ade80;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
text-align: center;
line-height: 1.2;
}
.product-profile-name {
margin: 0;
font-size: clamp(22px, 2.4vw, 28px);
font-weight: 700;
letter-spacing: -0.015em;
line-height: 1.15;
text-align: center;
color: #fff;
}
.product-profile-description {
margin: 0;
font-size: 14px;
line-height: 1.55;
color: rgba(255,255,255,0.85);
text-align: center;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.product-profile-description > *:first-child { margin-top: 0; }
.product-profile-description > *:last-child { margin-bottom: 0; }
/* ---------------- COUPE TECHNIQUE (PNG transparent colorise en blanc) ---------------- */
.product-profile-section {
display: block;
width: 100%;
height: 56px;
margin: 4px 0 2px;
object-fit: contain;
/* PNG anthracite -> blanc pur (lisible sur le voile noir). */
filter: brightness(0) invert(1);
opacity: 0.92;
}
/* ---------------- CTA (bouton pleine largeur sous la coupe) ---------------- */
.product-profile-ctas {
margin-top: 6px;
display: flex;
flex-direction: column;
}
.product-profile-cta {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 15px 22px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
line-height: 1.2;
}
.product-profile-cta--primary {
background: #fff;
color: #0a0a0a;
}
.product-profile-cta--primary:hover,
.product-profile-cta--primary:focus-visible {
background: #009a4f;
color: #fff;
transform: translateY(-2px);
}
/* ---------------- Responsive < 600px ---------------- */
@media (max-width: 600px) {
.product-profile-body {
padding: 22px 20px 24px;
gap: 12px;
}
.product-profile-name {
font-size: 21px;
}
.product-profile-section {
height: 46px;
}
.product-profile-cta {
padding: 13px 18px;
}
}
/* ---------------- BOUTON GLOBAL SOUS LA GRILLE ---------------- */
.product-profile-global-cta {
display: flex;
justify-content: center;
margin-top: 32px;
}
.product-profile-global-link {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 32px;
background: #009a4f;
color: #fff;
border: 1.5px solid #009a4f;
border-radius: 6px;
font-size: 15px;
font-weight: 600;
text-decoration: none;
transition: background-color 180ms ease, border-color 180ms ease;
line-height: 1.2;
min-height: 48px;
}
.product-profile-global-link:hover,
.product-profile-global-link:focus-visible {
background: #007a3f;
border-color: #007a3f;
color: #fff;
}
@media (max-width: 600px) {
.product-profile-global-cta {
margin-top: 24px;
}
.product-profile-global-link {
width: 100%;
max-width: 360px;
}
}
/* ============================================================
* NEW BLOC : ultrashield_panel (cf. blocks/block-ultrashield_panel.php)
* Panneau Ultrashield Naturale 360 : 2 colonnes (texte/atouts/CTA + schema/pictos).
* ============================================================ */
.block-ultrashield-panel-container .us-grid {
display: grid;
grid-template-columns: 1fr 1.05fr;
gap: 50px;
align-items: start;
font-family: var(--font-base);
color: var(--color-text);
}
.block-ultrashield-panel-container .us-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--color-main-1);
text-transform: uppercase;
background: rgba(0, 154, 79, 0.08);
padding: 6px 14px;
border-radius: 999px;
margin-bottom: 18px;
}
.block-ultrashield-panel-container .us-eyebrow svg { width: 14px; height: 14px; }
.block-ultrashield-panel-container .us-title {
font-size: clamp(24px, 2.4vw, 34px);
line-height: 1.2;
font-weight: 700;
margin: 0 0 14px;
letter-spacing: -0.005em;
}
.block-ultrashield-panel-container .us-title .us-mark {
color: var(--color-main-1);
font-style: normal;
}
.block-ultrashield-panel-container .us-intro-para {
font-size: 15px;
line-height: 1.7;
color: var(--color-text-soft);
margin: 0 0 28px;
max-width: 560px;
}
.block-ultrashield-panel-container .us-strengths-title {
font-size: 18px;
font-weight: 700;
margin: 0 0 14px;
letter-spacing: -0.005em;
}
.block-ultrashield-panel-container .us-strengths {
list-style: none;
padding: 0;
margin: 0 0 28px;
display: flex;
flex-direction: column;
gap: 11px;
}
.block-ultrashield-panel-container .us-strengths li {
display: flex;
align-items: center;
gap: 12px;
font-size: 13.5px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--color-text);
text-transform: uppercase;
padding: 11px 14px;
background: var(--color-bg-soft);
border-radius: 8px;
}
.block-ultrashield-panel-container .us-strengths li svg {
width: 18px;
height: 18px;
color: var(--color-main-1);
flex-shrink: 0;
}
.block-ultrashield-panel-container .us-cta {
display: flex;
width: 100%;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 24px;
background: var(--color-main-1);
color: #fff;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
letter-spacing: 0.02em;
transition: background 0.2s ease;
}
.block-ultrashield-panel-container .us-cta:hover,
.block-ultrashield-panel-container .us-cta:focus-visible {
background: var(--color-main-1-hover);
color: #fff;
}
.block-ultrashield-panel-container .us-cta svg { width: 16px; height: 16px; }
.block-ultrashield-panel-container .us-schema {
position: relative;
background: var(--color-bg-soft);
border-radius: 14px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.block-ultrashield-panel-container .us-schema img {
display: block;
max-width: 100%;
height: auto;
}
.block-ultrashield-panel-container .us-pictos {
display: flex;
align-items: flex-start;
justify-content: space-around;
gap: 24px;
margin-top: 24px;
padding: 8px 4px 0;
flex-wrap: wrap;
}
.block-ultrashield-panel-container .us-picto {
width: 84px;
height: 84px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.block-ultrashield-panel-container .us-picto img {
width: 100%;
height: 100%;
object-fit: contain;
}
@media (max-width: 900px) {
.block-ultrashield-panel-container .us-grid {
grid-template-columns: 1fr;
gap: 32px;
}
.block-ultrashield-panel-container .us-intro-para,
.block-ultrashield-panel-container .us-strengths {
max-width: none;
}
.block-ultrashield-panel-container .us-pictos {
gap: 14px;
}
.block-ultrashield-panel-container .us-picto {
width: 72px;
height: 72px;
}
}
/* Variante : header au-dessus de la grille (cas schema plus large que haut, ex terrasse) */
.block-ultrashield-panel-container.header-top .us-header {
margin-bottom: 36px;
max-width: 780px;
}
.block-ultrashield-panel-container.header-top .us-header .us-eyebrow {
margin-bottom: 18px;
}
.block-ultrashield-panel-container.header-top .us-header .us-intro-para {
margin-bottom: 0;
max-width: 720px;
}
.block-ultrashield-panel-container.header-top .us-grid {
grid-template-columns: 1fr 1.15fr;
align-items: start;
}
@media (max-width: 900px) {
.block-ultrashield-panel-container.header-top .us-header {
margin-bottom: 24px;
}
.block-ultrashield-panel-container.header-top .us-grid {
grid-template-columns: 1fr;
}
}
/* ============================================================
* NEW BLOCS : ultrashield_coex / ultrashield_core / ultrashield_alt
* Page Technologie UltraShield Naturale (refonte 29/05/2026).
* Tons bois / charbon. Le vert reste limite a la pastille .surtitle (charte).
* ============================================================ */
/* Fond sombre de section (bande "coeur composite") */
.block-section.background-dark { background-color: #1b1a17; }
/* Header commun centre */
.block-ultrashield-coex-container .ustc-head,
.block-ultrashield-core-container .ustcore-head,
.block-ultrashield-alt-container .ustalt-head {
text-align: center;
max-width: 760px;
margin: 0 auto 40px;
}
.block-ultrashield-coex-container .ustc-h2,
.block-ultrashield-core-container .ustcore-h2,
.block-ultrashield-alt-container .ustalt-h2 {
font-size: var(--fs-h2);
line-height: 1.18;
font-weight: 700;
margin: 0;
color: var(--color-text);
}
/* ---- coex : 2 colonnes ---- */
.block-ultrashield-coex-container .ustc-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 54px;
align-items: center;
}
.block-ultrashield-coex-container .ustc-intro {
font-size: 15.5px;
line-height: 1.75;
color: var(--color-text-soft);
margin: 0;
}
.block-ultrashield-coex-container .ustc-brand {
display: flex;
gap: 36px;
flex-wrap: wrap;
margin-top: 30px;
align-items: flex-start;
}
.block-ultrashield-coex-container .ustc-bb { flex: 1 1 190px; max-width: 230px; }
.block-ultrashield-coex-container .ustc-bb .imgwrap { height: 62px; display: flex; align-items: center; }
.block-ultrashield-coex-container .ustc-bb .imgwrap img { max-height: 58px; width: auto; max-width: 210px; }
.block-ultrashield-coex-container .ustc-bb .cap { font-size: 12.5px; color: var(--color-text-soft); margin-top: 14px; line-height: 1.45; }
.block-ultrashield-coex-container .ustc-visual-frame {
position: relative;
border-radius: 16px;
overflow: hidden;
background: #eceae6;
max-height: 540px;
}
.block-ultrashield-coex-container .ustc-visual-frame img.main { width: 100%; height: 100%; object-fit: cover; display: block; }
.block-ultrashield-coex-container .ustc-visual-frame img.badge360 {
position: absolute;
top: 16px;
right: 16px;
width: 70px;
height: 70px;
object-fit: contain;
}
/* ---- core : bande sombre ---- */
.block-ultrashield-core-container { color: #f1ece4; }
.block-ultrashield-core-container .ustcore-h2 { color: #fff; }
/* titre coeur sur une seule ligne : zone plus large que le header commun (760px) */
.block-ultrashield-core-container .ustcore-head { max-width: 1100px; }
.block-ultrashield-core-container .ustcore-grid {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: 60px;
align-items: center;
}
.block-ultrashield-core-container .ustcore-num {
font-size: clamp(60px, 8.5vw, 104px);
font-weight: 900;
line-height: 0.86;
color: #fff;
letter-spacing: -0.02em;
}
.block-ultrashield-core-container .ustcore-num small {
display: block;
font-size: 16px;
font-weight: 600;
color: #c98a4b;
margin-top: 10px;
letter-spacing: normal;
}
.block-ultrashield-core-container .ustcore-sub { display: flex; gap: 26px; margin-top: 28px; flex-wrap: wrap; }
.block-ultrashield-core-container .ustcore-sub div { font-size: 13px; color: rgba(241, 236, 228, 0.82); }
.block-ultrashield-core-container .ustcore-sub b { display: block; font-size: 20px; font-weight: 700; color: #fff; }
.block-ultrashield-core-container .ustcore-bar { display: flex; height: 15px; border-radius: 8px; overflow: hidden; }
.block-ultrashield-core-container .ustcore-bar i { display: block; }
.block-ultrashield-core-container .ustcore-bar i:nth-child(1) { background: #8a5a32; }
.block-ultrashield-core-container .ustcore-bar i:nth-child(2) { background: #c2a079; }
.block-ultrashield-core-container .ustcore-bar i:nth-child(3) { background: #3f3f3f; }
.block-ultrashield-core-container .ustcore-legend { list-style: none; margin: 18px 0 0; padding: 0; }
.block-ultrashield-core-container .ustcore-legend li { display: flex; align-items: baseline; gap: 10px; font-size: 13.5px; margin-bottom: 9px; color: rgba(241, 236, 228, 0.8); }
.block-ultrashield-core-container .ustcore-legend .pc { font-weight: 700; font-size: 15px; min-width: 42px; color: #fff; }
.block-ultrashield-core-container .ustcore-legend .dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; position: relative; top: 2px; }
.block-ultrashield-core-container .ustcore-legend li:nth-child(1) .dot { background: #8a5a32; }
.block-ultrashield-core-container .ustcore-legend li:nth-child(2) .dot { background: #c2a079; }
.block-ultrashield-core-container .ustcore-legend li:nth-child(3) .dot { background: #3f3f3f; }
.block-ultrashield-core-container .ustcore-cap { font-size: 13px; color: rgba(241, 236, 228, 0.6); margin: 18px 0 0; font-style: italic; }
/* ---- alt : chapo + grille atouts + ambiances ---- */
.block-ultrashield-alt-container .ustalt-lead { font-size: 15.5px; line-height: 1.75; color: var(--color-text-soft); margin: 14px 0 0; }
.block-ultrashield-alt-container .ustalt-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 28px 40px;
margin-top: 6px;
}
.block-ultrashield-alt-container .ustalt-feat h4 { font-size: 14px; font-weight: 700; margin: 0 0 6px; text-transform: uppercase; letter-spacing: 0.04em; }
.block-ultrashield-alt-container .ustalt-feat p { font-size: 13.5px; color: var(--color-text-soft); margin: 0; line-height: 1.6; }
.block-ultrashield-alt-container .ustalt-amb { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 34px; }
.block-ultrashield-alt-container .ustalt-amb img { border-radius: 14px; height: 300px; object-fit: cover; width: 100%; }
@media (max-width: 860px) {
.block-ultrashield-coex-container .ustc-grid,
.block-ultrashield-core-container .ustcore-grid,
.block-ultrashield-alt-container .ustalt-grid,
.block-ultrashield-alt-container .ustalt-amb { grid-template-columns: 1fr; }
/* core : infos centrees une fois la grille empilee.
Legende laissee alignee a gauche (li en flex flex-start). */
.block-ultrashield-core-container .ustcore-left,
.block-ultrashield-core-container .ustcore-comp { text-align: center; }
.block-ultrashield-core-container .ustcore-sub { justify-content: center; }
.block-ultrashield-core-container .ustcore-legend { text-align: left; }
}
/* ============================================================ */
/* BLOG : single article + listings (blog index, archives, */
/* categorie, recherche). */
/* La refonte avait perdu le CSS single/archive : on le */
/* restitue ici dans le systeme de variables du theme. Les */
/* listings reprennent le design carte Phase 5 */
/* (.default-cards.articles), scope par classe body pour ne */
/* jamais toucher la home (qui a son propre rendu). */
/* ============================================================ */
/* --- Single : en-tete carte editoriale.
Image a la une en premier (categorie en pastille dans un coin),
titre + meta dessous, puis trait de separation avant le contenu.
Langage des pages internes : pill vert, --radius, ombre carte. --- */
.header-content {
width: 100%;
max-width: var(--width-narrow);
margin-inline: auto;
}
/* Image a la une : hero arrondie + ombre, support de la pastille categorie */
.post-thumbnail {
position: relative;
margin: 0;
}
.post-thumbnail img {
display: block;
width: 100%;
max-height: 480px;
object-fit: cover;
border-radius: var(--radius);
box-shadow: var(--shadow-card);
}
/* Categorie en overlay dans le coin haut-gauche de l'image (pill vert) */
.post-thumbnail .categories-links {
position: absolute;
top: 16px;
left: 16px;
z-index: 2;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.post-thumbnail .categories-links a {
display: inline-flex;
align-items: center;
background-color: var(--color-main-1);
color: #fff;
padding: 7px 16px;
border-radius: 30px;
font-size: var(--fs-small);
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
text-decoration: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
transition: background-color var(--transition), transform var(--transition);
}
.post-thumbnail .categories-links a:hover {
background-color: var(--color-main-1-hover);
transform: translateY(-2px);
}
/* Titre + meta sous l'image, separes du contenu par un trait */
.post-informations {
margin-top: 28px;
padding-bottom: var(--space-1);
margin-bottom: var(--space-1);
border-bottom: 1px solid var(--color-border);
}
.post-informations .title {
font-size: var(--fs-h1);
line-height: 1.1;
letter-spacing: -0.01em;
color: var(--color-text);
margin: 0 0 16px;
}
/* Meta : auteur / date / temps de lecture, separes par une puce */
.post-details-wrapper {
display: flex;
flex-wrap: wrap;
align-items: center;
font-size: var(--fs-small);
color: rgba(34, 31, 33, 0.6);
}
.post-details-wrapper span { display: inline-flex; align-items: center; }
.post-details-wrapper span:not(:first-child)::before {
content: "";
width: 4px;
height: 4px;
border-radius: 50%;
background-color: currentColor;
opacity: 0.55;
margin: 0 12px;
}
/* Mobile : meta empilee (les puces inline cassent mal a la ligne) */
@media (max-width: 600px) {
.post-details-wrapper {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.post-details-wrapper span:not(:first-child)::before { display: none; }
.post-details-wrapper span {
padding-left: 16px;
position: relative;
}
.post-details-wrapper span::after {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 6px;
border-radius: 50%;
background-color: var(--color-main-1);
}
}
/* --- Single : typographie du contenu d'article ---
IMPORTANT : on cible UNIQUEMENT les enfants DIRECTS de .page-content (> )
car les blocs injectes en fin d'article (.block-share-article,
.block-faq-article) sont aussi des enfants directs : leur contenu
(p.title, li de FAQ...) ne doit PAS heriter de cette typo editoriale. */
.page-content { color: var(--color-text); }
.page-content > p {
font-size: var(--fs-body);
line-height: 1.75;
margin: 0 0 1.3em;
}
.page-content > *:first-child { margin-top: 0; }
/* Titres dans le corps de l'article */
.page-content > h2,
.page-content > h3,
.page-content > h4 {
color: var(--color-text);
line-height: 1.25;
}
.page-content > h2 {
font-size: clamp(24px, 3vw, 32px);
font-weight: 700;
margin: 1.8em 0 0.6em;
}
.page-content > h3 {
font-size: 22px;
font-weight: 600;
margin: 1.6em 0 0.5em;
}
.page-content > h4 {
font-size: 18px;
font-weight: 600;
margin: 1.4em 0 0.5em;
}
/* Liens dans le corps de texte */
.page-content > p a,
.page-content > ul a,
.page-content > ol a {
color: var(--color-main-1);
text-decoration: underline;
text-underline-offset: 2px;
transition: color var(--transition);
}
.page-content > p a:hover,
.page-content > ul a:hover,
.page-content > ol a:hover { color: var(--color-main-1-hover); }
/* Listes a puces : puce verte custom */
.page-content > ul {
list-style: none;
margin: 0 0 1.3em;
padding-left: 0;
}
.page-content > ul > li {
position: relative;
padding-left: 1.6em;
margin-bottom: 0.6em;
line-height: 1.7;
}
.page-content > ul > li::before {
content: "";
position: absolute;
left: 0;
top: 0.62em;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--color-main-1);
}
/* Listes numerotees : numero vert */
.page-content > ol {
margin: 0 0 1.3em;
padding-left: 1.4em;
}
.page-content > ol > li {
margin-bottom: 0.6em;
line-height: 1.7;
padding-left: 0.3em;
}
.page-content > ol > li::marker {
color: var(--color-main-1);
font-weight: 700;
}
/* Citations */
.page-content > blockquote {
margin: 1.6em 0;
padding: 16px 24px;
border-left: 4px solid var(--color-main-1);
background-color: var(--color-bg-soft);
border-radius: 0 var(--radius) var(--radius) 0;
font-style: italic;
}
.page-content > blockquote p:last-child { margin-bottom: 0; }
/* Medias dans le contenu */
.page-content > figure { margin: 1.6em 0; }
.page-content > img,
.page-content > figure img { border-radius: var(--radius); }
.page-content > figure figcaption {
margin-top: 8px;
font-size: var(--fs-small);
color: rgba(34, 31, 33, 0.6);
text-align: center;
}
/* --- Single : bloc partage article ---
Restyle dans le langage des pages internes : panneau doux arrondi
(cf. .block-faqs.faq .faq-item), pastilles vertes -> blanches au hover
(cf. accent FAQ), CTA en .btn. Rendu via [display_post_share_links]
(functions-global.php), injecte en fin de the_content (.section-article). */
.block-share-article {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-top: var(--space-2);
padding: 24px 28px;
border-radius: var(--radius);
background-color: var(--color-bg-soft);
border: 1px solid var(--color-border);
}
.block-share-article .share-article-wrapper {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
}
.block-share-article .share-article-wrapper .title {
margin: 0;
font-size: var(--fs-body);
font-weight: 600;
color: var(--color-text);
}
.block-share-article .links {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.block-share-article .announce-share-link {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background-color: var(--color-bg);
border: 1px solid var(--color-border);
transition: background-color var(--transition), border-color var(--transition), transform var(--transition);
}
.block-share-article .announce-share-link img {
width: 20px;
height: 20px;
filter: var(--svg-main-1);
transition: filter var(--transition);
}
.block-share-article .links a:hover .announce-share-link {
background-color: var(--color-main-1);
border-color: var(--color-main-1);
transform: translateY(-3px);
}
.block-share-article .links a:hover .announce-share-link img {
filter: var(--svg-white);
}
.block-share-article .more-articles {
cursor: pointer;
display: inline-block;
background-color: var(--color-main-1);
padding: 10px 20px;
text-decoration: none;
font-weight: 300;
color: #fff;
font-size: var(--fs-body);
border-radius: 5px;
transition: background-color var(--transition), transform var(--transition);
}
.block-share-article .more-articles:hover {
background-color: var(--color-main-1-hover);
transform: translateY(-3px);
}
@media (max-width: 600px) {
.block-share-article {
flex-direction: column;
align-items: center;
text-align: center;
}
.block-share-article .share-article-wrapper {
flex-direction: column;
align-items: center;
}
.block-share-article .links { justify-content: center; }
}
/* --- Single : bloc "dernieres actualites" --- */
.block-last-posts { margin-top: var(--space-2); }
.block-last-posts > .title {
font-size: var(--fs-h2);
color: var(--color-text);
text-align: center;
margin-bottom: var(--space-1);
}
/* Filtre categories des listings (category.php / archive.php) : espace
sous les boutons pour ne pas coller a la grille de cartes.
Scope .archive__content -> n'affecte pas la pastille overlay de la single. */
.archive__content .categories-links {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: var(--space-1);
}
/* --- Listings standards : cartes articles ---
Scope body (.blog / .archive / .search-results) : la home utilise
.default-cards.articles et n'est jamais touchee par ces regles. */
.blog .articles,
.archive .articles,
.search-results .articles {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: flex-start;
}
.blog .articles .article,
.archive .articles .article,
.search-results .articles .article {
flex: 0 1 calc((100% - 40px) / 3);
display: flex;
flex-direction: column;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-card);
background-color: var(--color-bg);
transition: transform var(--transition), box-shadow var(--transition);
text-decoration: none;
color: inherit;
}
.blog .articles .article:hover,
.archive .articles .article:hover,
.search-results .articles .article:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-card-hover);
}
.blog .article-image,
.archive .article-image,
.search-results .article-image {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.blog .article-image img,
.archive .article-image img,
.search-results .article-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition);
}
.blog .articles .article:hover .article-image img,
.archive .articles .article:hover .article-image img,
.search-results .articles .article:hover .article-image img { transform: scale(1.05); }
.blog .article-container,
.archive .article-container,
.search-results .article-container {
display: flex;
flex-direction: column;
flex-grow: 1;
gap: 12px;
padding: 20px;
}
.blog .article-wrapper,
.archive .article-wrapper,
.search-results .article-wrapper {
display: flex;
flex-direction: column;
gap: 10px;
flex-grow: 1;
}
.blog .article .title,
.archive .article .title,
.search-results .article .title { display: block; text-decoration: none; }
.blog .article .title h2,
.archive .article .title h2,
.search-results .article .title h2 {
font-size: clamp(20px, 2vw, 24px);
font-weight: 600;
line-height: 1.3;
color: var(--color-text);
margin: 0;
transition: color var(--transition);
}
.blog .articles .article:hover .title h2,
.archive .articles .article:hover .title h2,
.search-results .articles .article:hover .title h2 { color: var(--color-main-1); }
.blog .article .excerpt,
.archive .article .excerpt,
.search-results .article .excerpt {
font-size: 15px;
line-height: 1.6;
color: var(--color-text);
margin: 0;
flex-grow: 1;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.blog .article .read-more,
.archive .article .read-more,
.search-results .article .read-more {
align-self: flex-start;
color: var(--color-main-1);
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.03em;
text-decoration: none;
border-bottom: 2px solid transparent;
padding-bottom: 2px;
transition: border-color var(--transition);
}
.blog .articles .article:hover .read-more,
.archive .articles .article:hover .read-more,
.search-results .articles .article:hover .read-more { border-color: var(--color-main-1); }
@media (max-width: 1200px) {
.header-content { padding-inline: var(--space-1); }
}
@media (max-width: 900px) {
.blog .articles .article,
.archive .articles .article,
.search-results .articles .article { flex: 0 1 calc((100% - 20px) / 2); }
}
@media (max-width: 600px) {
.blog .articles .article,
.archive .articles .article,
.search-results .articles .article { flex: 0 1 100%; }
}