/* Pages Conseils et Boutiques — mise en forme de remplacement (site de test).
   Si les fichiers d'origine sont déposés dans assets/extra/ (conseils-contenu.css, avis-boutiques.css),
   ils sont chargés en plus et prennent le dessus. */
.hz-simple {
	--hz-gold: #c09578;
	--hz-ink: #242424;
	--hz-mute: #6f6a66;
	--hz-line: #e7e0da;
	--hz-cream: #f6f1ec;
	--hz-serif: "Cormorant Garamond", Georgia, serif;
	--hz-sans: Montserrat, Arial, Helvetica, sans-serif;
	color: var(--hz-ink);
	font-family: var(--hz-sans);
	font-size: 15px;
	line-height: 1.7;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px 80px;
	box-sizing: border-box;
}
.hz-simple *, .hz-simple *::before, .hz-simple *::after { box-sizing: border-box; }
.hz-simple h2, .hz-simple h3, .hz-simple h4 { font-family: var(--hz-serif); font-weight: 400; color: var(--hz-ink); line-height: 1.2; margin: 0 0 .5em; }
.hz-simple h2 { font-size: clamp(28px, 3.2vw, 40px); }
.hz-simple h3 { font-size: 24px; }
.hz-simple h4 { font-size: 13px; font-family: var(--hz-sans); letter-spacing: 2px; text-transform: uppercase; color: var(--hz-gold); }
.hz-simple p { margin: 0 0 1em; }
.hz-simple a { color: inherit; text-decoration-color: var(--hz-gold); text-underline-offset: 3px; }
.hz-simple img { max-width: 100%; height: auto; display: block; }

/* Grille WPBakery (lignes / colonnes) */
.hz-simple .vc_row { margin: 0 0 56px; }
.hz-simple .row-container { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.hz-simple .vc_col-sm-12 { flex: 1 1 100%; }
.hz-simple .vc_col-sm-6 { flex: 1 1 calc(50% - 20px); min-width: 280px; }
.hz-simple .wpb_content_element { margin-bottom: 28px; }
.hz-simple .vc_row-full-width { display: none; }
.hz-simple .wpb_map_wraper iframe { width: 100%; height: 380px; border: 0; display: block; }
.hz-simple .vc_single_image-wrapper img { margin: 0 auto; }
.hz-simple .address ul { list-style: none; margin: 0; padding: 0; }
.hz-simple .address li { padding: 8px 0; border-bottom: 1px solid var(--hz-line); }
.hz-simple .address li i { display: none; }
.hz-simple .contact-infor h3 { font-size: 30px; }

/* Bannière vidéo (Conseils) : fond si la vidéo n'est pas encore en ligne */
.hz-simple .hz-cv { background: var(--hz-cream) !important; }
/* Comme sur herzo.fr : la vidéo sort de la colonne et prend toute la largeur de l'écran */
.hz-simple .conseil-full-width {
	width: 100vw; width: 100dvw;
	max-width: none;
	margin-left: calc(50% - 50vw); margin-left: calc(50% - 50dvw);
	margin-right: calc(50% - 50vw); margin-right: calc(50% - 50dvw);
	padding: 0;
}
.hz-simple .conseil-full-width .hz-cv { width: 100%; margin: 0; }

/* ---------- Conseils ---------- */
.hz-cs2 { max-width: 1060px; margin: 0 auto; }
.hz-cs2__sec { padding: 72px 0; border-top: 1px solid var(--hz-line); }
.hz-cs2__sec:first-child { border-top: 0; }
.hz-cs2__kicker { font: 500 11px/1 var(--hz-sans); letter-spacing: 3px; text-transform: uppercase; color: var(--hz-gold); margin-bottom: 16px !important; }
.hz-cs2__intro { max-width: 720px; color: var(--hz-mute); font-size: 16px; }
.hz-cs2__4c { list-style: none; margin: 40px 0 28px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.hz-cs2__4c li { background: var(--hz-cream); padding: 28px 22px; }
.hz-cs2__4c p { font-size: 14px; color: var(--hz-mute); margin: 0; }
.hz-cs2__ico svg { width: 34px; height: 34px; margin-bottom: 14px; stroke: var(--hz-gold); fill: none; }
.hz-cs2__note { font-size: 13px; color: var(--hz-mute); border-left: 2px solid var(--hz-gold); padding-left: 14px; }
.hz-cs2__bagues { list-style: none; margin: 40px 0 24px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.hz-cs2__bagues li.is-match .hz-cs2__anneau { color: var(--hz-gold); transform: scale(1.06); }
.hz-cs2__anneau { position: relative; width: 110px; height: 110px; margin: 0 auto 12px; transition: transform .3s; }
.hz-cs2__anneau svg { width: 100%; height: 100%; stroke: currentColor; fill: none; }
.hz-cs2__num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 400 30px/1 var(--hz-serif); }
.hz-cs2__d { margin: 0 !important; font-weight: 500; }
.hz-cs2__m { margin: 0 !important; font-size: 13px; color: var(--hz-mute); }
.hz-cs2__calc { background: var(--hz-cream); padding: 22px 24px; margin: 0 0 20px; }
.hz-cs2__calc input { width: 80px; padding: 6px 8px; margin: 0 6px; border: 1px solid var(--hz-line); font: inherit; text-align: center; }
.hz-cs2__calc-r { margin: 10px 0 0 !important; font-family: var(--hz-serif); font-size: 22px; }
.hz-cs2__astuce { font-size: 14px; color: var(--hz-mute); }
.hz-cs2__gestes { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 48px; }
.hz-cs2__gestes li { display: flex; gap: 18px; }
.hz-cs2__n { font: 400 34px/1 var(--hz-serif); color: var(--hz-gold); min-width: 46px; }
.hz-cs2__gestes h3 { font-size: 22px; margin-bottom: 6px; }
.hz-cs2__gestes p { font-size: 14px; color: var(--hz-mute); margin: 0; }
.hz-cs2__offrir { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-top: 32px; }
.hz-cs2__offrir figure { margin: 0; background: var(--hz-cream); min-height: 200px; }
.hz-cs2__offrir-txt p { color: var(--hz-mute); }
.hz-cs2__btn { display: inline-block; padding: 14px 28px; background: var(--hz-ink); color: #fff !important; text-decoration: none; font: 500 11px/1 var(--hz-sans); letter-spacing: 2px; text-transform: uppercase; }
.hz-cs2__btn:hover { background: var(--hz-gold); }

/* ---------- Avis clients (Boutiques) ---------- */
.hz-avis { padding: 72px 0 24px; border-top: 1px solid var(--hz-line); }
.hz-avis__head { text-align: center; margin-bottom: 40px; }
.hz-avis__eyebrow { font: 500 11px/1 var(--hz-sans); letter-spacing: 3px; text-transform: uppercase; color: var(--hz-gold); }
.hz-avis__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.hz-avis__item { background: var(--hz-cream); padding: 30px 26px; display: flex; flex-direction: column; }
.hz-avis__stars { display: flex; gap: 3px; margin-bottom: 16px; color: var(--hz-gold); }
.hz-avis__stars svg { width: 15px; height: 15px; fill: currentColor; }
.hz-avis__quote { margin: 0 0 22px; flex: 1; }
.hz-avis__quote p { font-family: var(--hz-serif); font-size: 20px; line-height: 1.45; }
.hz-avis__sign { display: flex; align-items: center; gap: 14px; }
.hz-avis__thumb { width: 64px !important; height: 64px !important; object-fit: cover; }
.hz-avis__who { margin: 0 !important; font-weight: 600; }
.hz-avis__who a { text-decoration: none; }
.hz-avis__what { margin: 0 !important; font-size: 13px; color: var(--hz-mute); }
.hz-avis__source { text-align: center; margin-top: 28px; font-size: 13px; color: var(--hz-mute); }

@media (max-width: 900px) {
	.hz-cs2__4c, .hz-cs2__bagues { grid-template-columns: repeat(2, 1fr); }
	.hz-avis__list, .hz-cs2__gestes, .hz-cs2__offrir { grid-template-columns: 1fr; }
}

/* Onglets en haut des pages Conseils et Boutiques (même style que les autres pages) */
.hz-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 52px; margin: 0 auto 48px; padding: 8px 20px 0; font-family: Montserrat, Arial, Helvetica, sans-serif; }
.hz-tabs a { position: relative; padding: 0 0 14px; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: #8d8680; text-decoration: none; }
.hz-tabs a:hover { color: #242424; }
.hz-tabs a[aria-current="page"] { color: #242424; }
.hz-tabs a[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 58px; height: 1px; margin-left: -29px; background: #c09578; }

/* ---------- Ouverture : la signature qui s'écrit (comme Savoir-faire) ---------- */
body.hz-chrome .hz-simple.hz-simple--conseils,
body.hz-chrome .hz-simple.hz-simple--boutiques {
	padding-top: 0 !important;
}
.hz-sig-ouverture {
	width: min(1180px, 100% - 48px);
	margin: 0 auto;
	padding: clamp(26px, 3.2vw, 46px) 0 clamp(30px, 3.6vw, 50px);
	text-align: center;
}
h1.hz-sig-signature {
	margin: 0 !important;
	padding: 0 !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	line-height: 0 !important;
}
.hz-sig-ouverture .hz-sig-svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}
.hz-sig-ouverture .hz-sig-svg--deux {
	display: none;
}
.hz-sig-svg text {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-style: italic;
	font-weight: 400;
	font-size: 132px;
	fill: rgba(36, 36, 36, 0);
	stroke: #242424;
	stroke-width: 1;
	stroke-dasharray: 1600;
	stroke-dashoffset: 1600;
	animation: hzSigWrite 2.7s cubic-bezier(.55,.1,.35,1) .5s forwards, hzSigFill 1s ease 2.7s forwards;
}
.hz-sig-svg--deux text {
	font-size: 140px;
}
.hz-sig-filet {
	display: block;
	width: 64px;
	height: 1px;
	margin: clamp(18px, 2vw, 26px) auto 0;
	background: #c09578;
	transform: scaleX(0);
	animation: hzSigLine 1.1s cubic-bezier(.22,.61,.36,1) 3s forwards;
}
.hz-sig-lu {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
@keyframes hzSigWrite { to { stroke-dashoffset: 0; } }
@keyframes hzSigFill { to { fill: #242424; stroke-width: 0; } }
@keyframes hzSigLine { to { transform: scaleX(1); } }

@media (max-width: 700px) {
	.hz-sig-ouverture .hz-sig-svg--ligne { display: none; }
	.hz-sig-ouverture .hz-sig-svg--deux { display: block; width: min(100%, 420px); margin: 0 auto; }
	.hz-sig-ouverture { padding-top: 22px; padding-bottom: 26px; }
}
@media (prefers-reduced-motion: reduce) {
	.hz-sig-svg text { animation: none; stroke-dashoffset: 0; fill: #242424; stroke-width: 0; }
	.hz-sig-filet { animation: none; transform: none; }
}

/* <titres-lettres> (12/11, demande du client : « la manière dont les titres s'affichent dans la Maison, Conseils et
   Boutiques, ça fait un peu bizarre… ça reste un peu trop longtemps avec l'écriture vide… prends l'animation qu'il
   y a après le film ») : le titre ne se trace plus au trait (lettres vides pendant 3 s). Il arrive comme la devise
   à la fin du film de l'accueil : lettre par lettre, de gauche à droite, chaque lettre sortant d'un léger flou.
   Tout est écrit en 1,5 s environ (avant : 3,7 s). Même police, même taille, même place.
   Les lettres sont posées par simple.js à partir du titre dessiné (SVG), qui reste dans la page : il revient tout
   seul, plein, si le script ne passe pas. Outil : site TEST/outils/retouches-12-11/poser.py */
.hz-sig-svg text,
.hz-sf__sign-svg text,
.hz-mz__sign-svg text {
  animation: none !important; stroke-dashoffset: 0 !important; stroke-width: 0 !important; fill: #242424 !important;
}
.hz-sig-signature > svg,
.hz-sf__signature > svg,
.hz-mz__signature > svg { opacity: 0; animation: hzTlSecours .4s ease 1.2s forwards; }
@keyframes hzTlSecours { to { opacity: 1; } }
.hz-tl-pret > svg { display: none !important; }

/* la taille suit la largeur du bandeau du titre, exactement comme le titre dessiné (132 px pour 2000 de large) */
.hz-sig-ouverture,
.hz-sf__ouverture,
.hz-mz__ouverture { container-type: inline-size; }
.hz-tl {
  --tl-w: min(1180px, 100vw - 48px);
  display: block; white-space: nowrap;
  font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 400;
  font-size: calc(var(--tl-w) * var(--tl-k1, .066)); line-height: 1.4394;
  letter-spacing: 0; text-transform: none; color: #242424;
}
@supports (width: 1cqw) { .hz-tl { --tl-w: 100cqw; } }
.hz-tl__l { display: inline; }
.hz-tl__m { display: inline-block; white-space: nowrap; }
.hz-tl__c { display: inline-block; opacity: 0; filter: blur(5px); }
.hz-tl-joue .hz-tl__c {
  opacity: 1; filter: blur(0);
  transition: opacity .5s ease var(--d, 0s), filter .6s cubic-bezier(.22,.61,.36,1) var(--d, 0s);
}
/* le filet cuivre suit le titre au lieu d'attendre 3 s */
.hz-sig-filet,
.hz-sf__filet,
.hz-mz__filet { animation-duration: .8s !important; animation-delay: .9s !important; }
@media (max-width: 700px) {
  /* deux lignes ; une ligne un peu plus large que le bandeau déborde autant à gauche qu'à droite (marges du site) */
  .hz-tl { --tl-w: min(420px, 100vw - 48px); font-size: calc(var(--tl-w) * var(--tl-k2, .14)); line-height: 1.1786; margin-inline: -24px; }
  .hz-tl__l { display: block; }
}
@supports (width: 1cqw) { @media (max-width: 700px) { .hz-tl { --tl-w: min(420px, 100cqw); } } }
@media (prefers-reduced-motion: reduce) {
  .hz-tl__c { opacity: 1; filter: none; transition: none; }
  .hz-sig-signature > svg, .hz-sf__signature > svg, .hz-mz__signature > svg { opacity: 1; animation: none; }
}
/* </titres-lettres> */