/*
Theme Name: De Rhone en Vigne
Theme URI: https://wordpress.org/themes/twentytwentyfour/
Author: HARVEST
Author URI: https://wordpress.org
Description:
Requires at least: 6.4
Tested up to: 6.4
Requires PHP: 7.0
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Text Domain: twentytwentyfive
Template: twentytwentyfive
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, accessibility-ready, blog, portfolio, news
*/
/* -------------------------------------------------------------------------- */
/* 0) Imports & resets */
/* -------------------------------------------------------------------------- */
/* Kits Typekit chargés désormais via tout en haut du
(functions.php -> drev_typekit_preload) plutôt que par @import ici :
l'@import était découvert tard (après téléchargement+parsing de style.css),
donc Korolev arrivait après le premier rendu -> le menu s'affichait en repli
puis « sautait » au swap. Le + preconnect le charge bien plus tôt. */
/* Repli aux métriques ajustées pour Korolev (utilisé par le menu, police
condensée). Tant que le webfont Typekit n'est pas chargé, on affiche une
police condensée proche (mêmes largeur/hauteur) pour éviter le saut du menu
justifié à droite. Fallbacks par plateforme : Arial Narrow (Win/Mac),
Roboto Condensed (Android), sinon Arial ; size-adjust cale la largeur. */
@font-face {
font-family: "korolev-fallback";
src: local("Arial Narrow"), local("Roboto Condensed"), local("Arial");
size-adjust: 96%;
}
:root {
--wp--preset--font-family--korolev: "korolev", "korolev-fallback", sans-serif;
}
/* Le navigateur garde le scroll vertical natif, on gère l'horizontal */
.slider-viewport {
touch-action: pan-y;
overscroll-behavior: contain; /* évite le rebond iOS/Android dans la section pin */
-webkit-overflow-scrolling: touch;
}
html,
body {
min-height: 100vh;
width: 100% !important;
overflow-x: hidden !important;
/* x: none (pas de swipe horizontal parasite) mais y: auto obligatoire —
'none' vertical sur html/body tue le scroll tactile du document (Chrome/Android) */
overscroll-behavior: none auto;
/* cursor: none; */
}
a,
a:focus,
a:active {
outline: 0 !important;
/* cursor: none; */
}
/* Liens WP + liens généraux */
.wp-block-navigation a:where(:not(.wp-element-button)):focus,
.wp-block-post-title a:where(:not(.wp-element-button)):focus,
.wp-block-site-title a:where(:not(.wp-element-button)):focus,
a:where(:not(.wp-element-button)):focus,
a {
text-decoration: none !important;
}
/* Admin bar */
.admin-bar .wp-site-blocks {
margin-top: 32px;
}
@media (max-width: 600px) {
.has-xx-large-font-size{
font-size: 1.5rem !important;
}
h2{
font-size: 2rem !important;
}
}
/* -------------------------------------------------------------------------- */
/* 1) États init / préchargement */
/* -------------------------------------------------------------------------- */
.wp-block-navigation__responsive-container-open:focus,
.wp-block-navigation__responsive-container-open:focus-visible,
.wp-block-navigation__responsive-container-open:active {
outline: none !important;
box-shadow: none !important;
background-color: transparent !important; /* Au cas où il y ait aussi un fond au clic */
}
/* La loading ne doit JAMAIS intercepter les clics une fois cachée */
.loading[hidden],
.loading.is-gone {
display: none !important;
}
/* Quand l’overlay est à 0 d’opacité, on n’intercepte plus les clics */
.loading:not([data-active="1"]) {
pointer-events: none !important;
}
.smooth-content {
visibility: hidden;
}
.hw-product-cat-content{
padding-bottom: 3vh;
}
.loading {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
background-color: rgb(26, 26, 26);
overflow: hidden;
z-index: 999999;
opacity: 0;
backdrop-filter: blur(2px);
transition: opacity 0.3s ease; /* sécurité si JS en panne */
}
/* Ajustements single product */
.product .smooth-content:before {
content: "";
background-color: #fff;
width: 100%;
height: 30vh;
display: block;
position: absolute;
top: 0;
z-index: 1;
}
main .wp-block-group {
z-index: 2;
}
/* -------------------------------------------------------------------------- */
/* 2) Header / navigation */
/* -------------------------------------------------------------------------- */
/* Anti-flicker logo pendant l'init */
html.is-prep header .heading .wp-block-site-logo,
html.is-prep header .heading .wp-block-site-logo img {
transition: none !important;
}
/* Coup de pouce rendu (WebKit) */
header .heading .wp-block-site-logo {
will-change: transform, opacity;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
header {
position: fixed;
top: 0;
width: 100%;
z-index: 9999999;
background-color: transparent;
transition: 0.6s all ease-in-out;
}
header .main-menu, header .main-menu .wp-block-group > .wp-block-group, header .main-menu .wp-block-site-logo{
transition: 0.7s all cubic-bezier(0.43, 0.195, 0.02, 1);
}
/* Hauteur explicite (= hauteur naturelle) de l'état non-scrollé pour que la
réduction du header au scroll s'ANIME sur la durée de transition. Sans ça,
l'état scrollé passe de height:auto à 53px : une transition depuis `auto`
ne s'anime pas -> la hauteur « claque » d'un coup (réduction perçue trop
rapide). Desktop uniquement (le menu mobile fonctionne différemment).
⚠️ On cible UNIQUEMENT la rangée externe (enfant direct : logo + nav) via
`>` : le sélecteur large matchait aussi les groupes internes imbriqués
(wrapper du logo, wrapper du menu) et les forçait à 106px -> logo décalé
en haut, plus centré. Les wrappers internes restent en height:auto. */
@media (min-width: 600px) {
header .main-menu > .wp-block-group > .wp-block-group {
height: 106px;
}
}
header.scrolled .main-menu .wp-block-group > .wp-block-group{
padding: 0 !important;
height: 53px !important;
align-items: center;
display: flex;
}
header.scrolled .main-menu .wp-block-site-logo{
scale: 0.6;
}
header.scrolled.down .main-menu{
padding-top: 0 !important;
}
@media (min-width: 600px) {
.nav-mob{
display: none !important;
}
.wp-block-navigation-item__content {
background: #e7f3f1;
padding: 5px 10px;
transition: 0.4s all cubic-bezier(0.43, 0.195, 0.02, 1);
}
.wp-block-navigation-item__content:hover {
background: var(--wp--preset--color--contrast);
color: #ffffff !important;
scale: 1.1;
}
.current-menu-item .wp-block-navigation-item__content{
background: var(--wp--preset--color--contrast);
color: #ffffff !important;
}
}
@media (max-width: 600px) {
.wp-block-navigation__container{
--navigation-layout-justify: flex-start !important;
--navigation-layout-justification-setting: flex-start !important;
}
.wp-block-navigation__responsive-container-content{
color: white;
align-items: flex-start !important;
}
.wp-block-navigation__responsive-container-content .wp-block-button{
border: white 10px solid;
}
.wp-block-navigation__responsive-container-content .wp-block-button a{
color: white;
font-size: large;
}
.wp-block-navigation__responsive-container-close{
color: white !important;
}
.wp-block-navigation__responsive-container.is-menu-open.is-menu-open{
background: var(--wp--preset--color--contrast) !important;
}
.wp-block-navigation-item__label{
font-size: larger;
}
}
header .mainMenu {
background-color: transparent !important;
transition: 0.4s all cubic-bezier(0.5, 0, 0.58, 1);
}
/* -------------------------------------------------------------------------- */
/* 3) Footer */
/* -------------------------------------------------------------------------- */
.dispositionn-top{
z-index: 20;
position: relative;
}
footer .wp-block-column{
position: relative;
}
footer .wp-block-column::after {
content: "";
background-image: url(/wp-content/uploads/2026/07/trame-blanche-4.svg);
height: 300px;
width: 500px;
position: absolute;
TOP: 0;
background-repeat: no-repeat;
right: 0;
opacity: 0.7;
}
@media (max-width: 600px) {
footer .wp-block-column {
padding: 80px 40px !important;
}
footer .wp-block-column .wp-block-group {
padding: 0 !important;
}
.tel{
font-size: 1.5rem !important;
}
}
/* -------------------------------------------------------------------------- */
/* 4) Divers */
/* -------------------------------------------------------------------------- */
.trame-verte::before {
content: "";
background: url(/wp-content/uploads/2026/07/trame_verte-1.svg);
height: 100%;
width: 100%;
position: absolute;
background-size: cover;
left: 0;
}
.pswp__bg{
opacity: 0.7 !important;
background: #5FBFAA !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.pswp__top-bar.pswp__hide-on-close {
TOP: 90%;
}
.pswp--open{
backdrop-filter: blur(10px) !important;
}
.territoire-cols .wp-block-columns{
z-index: 9999 !important;
}
.territoire-cols{
position: relative;
}
.territoire-cols::before{
content: "";
background-image: url(/wp-content/uploads/2026/07/trame-blanche-1.svg);
height: 400px;
width: 60% !important;
position: absolute;
bottom: 0;
background-repeat: no-repeat;
background-size: cover;
left: 0;
pointer-events: none;
opacity: 0.7;
}
span.breadcrumb_last {
font-weight: 700;
}
.wp-block-button{
transition: 0.3s all ease-in-out;
}
.wp-block-button:hover{
background-color: var(--wp--preset--color--contrast) !important;
}
.wp-block-button:hover a{
color: var(--wp--preset--color--base) !important;
}
.wp-block-button.bleu:hover{
background-color: var(--wp--preset--color--accent-1) !important;
}
.wp-block-button.blanc:hover a{
color: var(--wp--preset--color--accent-1) !important;
}
.wp-block-button.blanc:hover{
background-color: #ffffff !important;
}
/* Cible spécifiquement cette image via son ID WordPress */
.partenaires-logos img {
mix-blend-mode: multiply;
}
.wp-block-accordion-heading__toggle-icon {
color: var(--wp--preset--color--contrast);
z-index: 2;
position: relative !important;
display: inline-block;
}
.wp-block-accordion-heading__toggle-icon::before {
background-color: white;
position: absolute;
content: "";
height: 20px;
width: 20px;
z-index: -1;
top: 12%;
left: 20%;
transform: translateX(-50%);
}
.banner-actus{
position: relative;
overflow: hidden;
}
.banner-actus::before{
content: "";
background-image: url(/wp-content/uploads/2026/07/trame-blanche-5.svg);
height: 60%;
width: 40%;
position: absolute;
TOP: 0;
background-repeat: no-repeat;
left: 0;
Z-INDEX: 1;
background-size: contain;
opacity: 0.7;
}
.banner-actus::after{
content: "";
background-image: url(/wp-content/uploads/2026/07/trame-blanche-4.svg);
height: 80%;
width: 40%;
position: absolute;
TOP: 0;
background-repeat: no-repeat;
right: 0;
background-size: contain;
opacity: 0.7;
}
.block-actus, .actus .wp-block-tiptip-hyperlink-group-block .wp-block-group .wp-block-group, .wp-block-accordion-item{
transition: 0.3s all ease-in-out;
}
.block-actus:hover, .actus .wp-block-tiptip-hyperlink-group-block:hover .wp-block-group .wp-block-group, .wp-block-accordion-item:hover{
transform: scale(1.05);
}
.fond-3{
position: relative;
}
.fond-3::after{
content: "";
background-image: url(/wp-content/uploads/2026/07/trame-blanche-2.svg);
height: 300px;
width: 500px;
transform: scaleY(-1);
position: absolute;
bottom: 0;
background-repeat: no-repeat;
right: 0;
background-size: cover;
z-index: 0;
}
.fond-3 .wp-block-column{
z-index: 99999;
}
.partenaires-logos img {
max-height: 100px !important;
width: 100% !important;
object-fit: contain !important;
object-position: center;
}
@media (max-width: 600px) {
.partenaires {
gap: 0.5rem !important;
}
.actus .wp-block-post .wp-block-group{
max-width: 100% !important;
}
.mob-height{
padding-top: 150px !important;
}
.btn-loupe a {
margin: 0px !important;
}
.carte-home{
min-height: 380px !important;
}
}