@charset "UTF-8";
@import url(main.css);
/******************************** NAVBAR ********************************/
#navigation-bar-hide { opacity: 1 !important; top: 0 !important; }

/* ---------- Barre ---------- */
.navbar { border-bottom: 1px solid rgba(238, 202, 155, 0.18); transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease; font-family: 'Montserrat', sans-serif; }

nav.navbar { box-shadow: rgba(32, 22, 13, 0.35) 0 25px 20px -20px; }

/* Au scroll : brun translucide + flou */
.navbar.scrolled { background-color: rgba(32, 22, 13, 0.72) !important; border-bottom-color: rgba(238, 202, 155, 0.25); backdrop-filter: blur(1rem); -webkit-backdrop-filter: blur(1rem); }

/* ---------- Logo ---------- */
.navbar-brand { height: 11vh !important; width: 11vw !important; }

.logo_nav { height: 10vh !important; }

/* ---------- Liens du menu ---------- */
.navbar .nav-link, .navbar .plain-link { font-family: 'Montserrat', sans-serif; }

.navbar .nav-link { color: var(--kz-cream); transition: color .3s ease; }

.navbar .nav-link:hover, .navbar .nav-link:focus-visible, .navbar .nav-link.active { color: var(--kz-sand); }

/* Soulignement animé des liens */
.animated-border-button:after { background-color: var(--kz-sand); }

/* ---------- Menu déroulant "Nos prestations" ---------- */
.navbar .dropdown-menu { min-width: 250px; margin-top: 12px; padding: 10px 0; background-color: var(--kz-brown) !important; border: 1px solid rgba(238, 202, 155, 0.22); border-radius: 2px; box-shadow: 0 12px 30px rgba(32, 22, 13, 0.35); font-family: 'Montserrat', sans-serif; }

.navbar .dropdown-menu li { width: 100%; }

.navbar .dropdown-menu a { display: inline-block; color: var(--kz-cream) !important; white-space: nowrap; text-decoration: none; font-family: 'Montserrat', sans-serif; }

.navbar .dropdown-menu a:hover, .navbar .dropdown-menu a:focus-visible { color: var(--kz-sand) !important; }

/* ---------- Chevron ---------- */
.navbar .dropdown-chevron { color: var(--kz-sand); font-size: .8em; transition: transform .25s ease; }

.navbar .dropdown > [aria-expanded="true"] .dropdown-chevron { transform: rotate(180deg); }

/* ---------- Bouton téléphone ---------- */
.navbar .button-header-telephone { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px !important; border: 1px solid var(--kz-sand); border-radius: 2px !important; background-color: transparent; color: var(--kz-cream) !important; letter-spacing: .04em; white-space: nowrap; transition: background-color .3s ease, color .3s ease, border-color .3s ease; font-family: 'Montserrat', sans-serif; }

.navbar .button-header-telephone i { color: var(--kz-sand); transition: color .3s ease; }

.navbar .button-header-telephone:hover, .navbar .button-header-telephone:focus-visible { background-color: var(--kz-sand); color: var(--kz-brown) !important; text-decoration: none; }

.navbar .button-header-telephone:hover i, .navbar .button-header-telephone:focus-visible i { color: var(--kz-brown); }

.navbar .button-header-telephone:focus-visible { outline: 2px solid var(--kz-sand); outline-offset: 3px; }

/* ---------- Responsive mobile ---------- */
@media (max-width: 991.98px) { .navbar { background-color: rgba(32, 22, 13, 0.85) !important; backdrop-filter: blur(1rem); -webkit-backdrop-filter: blur(1rem); } .navbar .dropdown { width: 100%; text-align: center; } /* Centre NOS PRESTATIONS + le chevron */ .navbar .dropdown > a { display: flex !important; align-items: center; justify-content: center; width: 100%; text-align: center; } .navbar .dropdown-menu { position: static !important; transform: none !important; width: 100%; min-width: 250px; margin-top: 10px; padding: 10px 0; background-color: rgba(32, 22, 13, 0.45) !important; border: 1px solid rgba(238, 202, 155, 0.22); border-radius: 2px; box-shadow: none; text-align: center; } /* Centre les éléments du dropdown */ .navbar .dropdown-menu li { width: 100%; text-align: center; } .navbar .dropdown-menu a { display: block; width: 100%; white-space: normal; text-align: center; } /* Centre également le bouton téléphone sur mobile */ .navbar .button-header-telephone { justify-content: center; text-align: center; } }

/* ---------- Réduction des animations ---------- */
@media (prefers-reduced-motion: reduce) { .navbar, .navbar .nav-link, .navbar .button-header-telephone, .navbar .button-header-telephone i, .navbar .dropdown-chevron { transition: none; } }

/* ---------- Menu "Recherches fréquentes" ---------- À ajouter à la fin de la section NAVBAR. HTML inchangé : ce menu est repéré par sa structure (li.dropdown qui contient directement un .d-flex). */
/* Lien "Recherches fréquentes" : même police, majuscules, toujours sur 2 lignes */
.navbar .navbar-nav > li.dropdown:has(> .d-flex) .nav-link { position: relative; padding-top: 0 !important; padding-bottom: 0 !important; color: var(--kz-cream); font-family: 'Montserrat', sans-serif; line-height: 1.25; text-transform: uppercase; white-space: nowrap; /* le <br> garde les 2 lignes, sans coupure en plus */ }

.navbar .navbar-nav > li.dropdown:has(> .d-flex) .nav-link:hover, .navbar .navbar-nav > li.dropdown:has(> .d-flex) .nav-link:focus-visible { color: var(--kz-sand); }

/* ---------- Soulignement au survol (comme les autres liens du menu) ---------- Le ::after servait au triangle Bootstrap : il est réutilisé pour le soulignement. */
.navbar .navbar-nav > li.dropdown:has(> .d-flex) .nav-link:not([aria-hidden="true"])::after { content: "" !important; position: absolute; left: 0; right: 0; bottom: -6px; display: block !important; width: 100%; height: 2px; margin: 0 !important; border: 0 !important; background-color: var(--kz-sand); transform: scaleX(0); transform-origin: left center; transition: transform .3s ease; vertical-align: baseline; }

.navbar .navbar-nav > li.dropdown:has(> .d-flex) .nav-link:not([aria-hidden="true"]):hover::after, .navbar .navbar-nav > li.dropdown:has(> .d-flex) .nav-link:not([aria-hidden="true"]):focus-visible::after, .navbar .navbar-nav > li.dropdown:has(.dropdown-menu.show) .nav-link:not([aria-hidden="true"])::after { transform: scaleX(1); }

/* Le lien du chevron n'a ni triangle ni soulignement */
.navbar .navbar-nav > li.dropdown:has(> .d-flex) .nav-link[aria-hidden="true"]::after { display: none !important; }

/* Chevron : même couleur et même rotation que "Nos prestations" */
.navbar .navbar-nav > li.dropdown:has(> .d-flex) .bi-chevron-down { display: inline-block; margin: 0 0 0 8px !important; color: var(--kz-sand); font-size: .8em; transition: transform .25s ease; }

.navbar .navbar-nav > li.dropdown:has(.dropdown-menu.show) .bi-chevron-down { transform: rotate(180deg); }

/* ---------- Menu déroulant : même style que "Nos prestations" ---------- */
/* Les fonds sable écrits dans le HTML sont neutralisés */
.navbar .navbar-nav > li.dropdown:has(> .d-flex) .dropdown-menu { background-color: var(--kz-brown) !important; }

.navbar .navbar-nav > li.dropdown:has(> .d-flex) .dropdown-item { position: relative; display: inline-block; width: auto; padding: 8px 24px; background-color: transparent !important; color: var(--kz-cream) !important; font-family: 'Montserrat', sans-serif; font-weight: inherit !important; text-transform: uppercase; white-space: nowrap; transition: color .3s ease; }

.navbar .navbar-nav > li.dropdown:has(> .d-flex) .dropdown-item:hover, .navbar .navbar-nav > li.dropdown:has(> .d-flex) .dropdown-item:focus-visible, .navbar .navbar-nav > li.dropdown:has(> .d-flex) .dropdown-item:active { background-color: transparent !important; color: var(--kz-sand) !important; }

/* Soulignement des liens du menu déroulant : sous le texte, pas sous les marges */
.navbar .navbar-nav > li.dropdown:has(> .d-flex) .dropdown-item::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 4px; height: 2px; background-color: var(--kz-sand); transform: scaleX(0); transform-origin: left center; transition: transform .3s ease; }

.navbar .navbar-nav > li.dropdown:has(> .d-flex) .dropdown-item:hover::after, .navbar .navbar-nav > li.dropdown:has(> .d-flex) .dropdown-item:focus-visible::after { transform: scaleX(1); }

/* Chevron de "Voir plus" en sable */
.navbar .navbar-nav > li.dropdown:has(> .d-flex) .dropdown-item .bi-chevron-right { margin-left: 6px; color: var(--kz-sand); }

/* Séparateur fin, couleur du fil */
.navbar .navbar-nav > li.dropdown:has(> .d-flex) .dropdown-divider { margin: 8px 24px; border-top-color: rgba(238, 202, 155, 0.22); opacity: 1; }

/* ---------- Mobile ---------- */
@media (max-width: 991.98px) { /* Texte et chevron sur la même ligne, menu en dessous */ .navbar .navbar-nav > li.dropdown:has(> .d-flex) > .d-flex { flex-direction: row !important; flex-wrap: wrap; justify-content: center; } .navbar .navbar-nav > li.dropdown:has(> .d-flex) .dropdown-menu { flex-basis: 100%; background-color: rgba(32, 22, 13, 0.45) !important; } .navbar .navbar-nav > li.dropdown:has(> .d-flex) .dropdown-menu li { text-align: center; } .navbar .navbar-nav > li.dropdown:has(> .d-flex) .dropdown-item { white-space: normal; text-align: center; } }

@media (prefers-reduced-motion: reduce) { .navbar .navbar-nav > li.dropdown:has(> .d-flex) .bi-chevron-down, .navbar .navbar-nav > li.dropdown:has(> .d-flex) .dropdown-item, .navbar .navbar-nav > li.dropdown:has(> .d-flex) .nav-link::after, .navbar .navbar-nav > li.dropdown:has(> .d-flex) .dropdown-item::after { transition: none; } }

/**************************************************** 1. VARIABLES ****************************************************/
:root { --kz-cream: #FEF6EC; --kz-cream-light: #F5E8D8; /* description du hero */ --kz-cream-soft: #EADDCB; /* textes secondaires sur fond foncé */ --kz-sand: #EECA9B; --kz-gold: #B07C42; --kz-brown: #412E1C; --kz-ink: #20160D; --kz-ease: cubic-bezier(.22, .61, .36, 1); }

/**************************************************** 2. COMMUN ****************************************************/
/* ---------- Conteneurs ---------- */
.kz-hero__inner, .kz-about__inner, .kz-svc__inner, .kz-steps__inner, .kz-ba__inner, .kz-partners__inner { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 48px; }

@media (max-width: 1199.98px) { .kz-hero__inner, .kz-about__inner, .kz-svc__inner, .kz-steps__inner, .kz-ba__inner, .kz-partners__inner { padding: 0 32px; } }

@media (max-width: 767.98px) { .kz-hero__inner, .kz-about__inner, .kz-svc__inner, .kz-steps__inner, .kz-ba__inner, .kz-partners__inner { padding: 0 20px; } }

/* ---------- Calques plein cadre (fonds, voiles) ---------- */
.kz-hero__media, .kz-hero__overlay, .kz-about__bg, .kz-about__veil, .kz-svc__link::before, .kz-svc__link::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

/* ---------- Fil Kizuna au scroll (Prestations, Fournisseurs) ---------- */
.kz-svc__thread, .kz-partners__thread { position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }

.kz-svc__thread-glow, .kz-svc__thread-line, .kz-partners__thread-line { fill: none; stroke-linecap: round; stroke-linejoin: round; }

.kz-svc__thread-tip, .kz-partners__thread-tip { opacity: 0; transition: opacity .3s ease; }

/* ---------- Accroches et titres de section ---------- */
.kz-svc__kicker, .kz-steps__kicker, .kz-ba__kicker, .kz-partners__kicker { margin-bottom: 16px; letter-spacing: .14em; }

.kz-about__title, .kz-svc__title, .kz-steps__title, .kz-ba__title, .kz-partners__title { line-height: 1.15; text-wrap: balance; }

/* ---------- Contenu Liquid enveloppé (h2, h3, p…) : on harmonise ---------- */
.kz-about__kicker > *, .kz-about__title > *, .kz-about__desc > *, .kz-about__box > *, .kz-svc__kicker > *, .kz-svc__title > *, .kz-svc__intro > *, .kz-svc__name > *, .kz-svc__text > *, .kz-steps__kicker > *, .kz-steps__title > *, .kz-steps__name > *, .kz-ba__kicker > *, .kz-ba__title > *, .kz-ba__intro > *, .kz-ba__caption > *, .kz-ba__btn > *, .kz-partners__kicker > *, .kz-partners__title > *, .kz-partners__intro > *, .kz-partners__name > *, .kz-partners__desc > *, .kz-partners__others-label > * { margin: 0; color: inherit; }

/* ---------- Apparition au chargement (classes ajoutées par JS) ---------- */
.kz-about--js [data-kz-reveal], .kz-svc--js [data-kz-svc-reveal], .kz-steps--js [data-kz-steps-reveal], .kz-ba--js [data-kz-ba-reveal], .kz-partners--js [data-kz-partners-reveal] { opacity: 0; }

.kz-svc--js.is-visible [data-kz-svc-reveal], .kz-steps--js.is-visible [data-kz-steps-reveal], .kz-ba--js.is-visible [data-kz-ba-reveal], .kz-partners--js.is-visible [data-kz-partners-reveal] { animation: kzUp 0.9s var(--kz-ease) both; }

/* ---------- Animations ---------- */
@keyframes kzUp { from { opacity: 0;
    transform: translateY(24px); }
  to { opacity: 1;
    transform: translateY(0); } }

@keyframes kzFadeUp { from { opacity: 0;
    transform: translateY(28px); }
  to { opacity: 1;
    transform: translateY(0); } }

@keyframes kzFade { from { opacity: 0; }
  to { opacity: 1; } }

@keyframes kzScaleX { from { transform: scaleX(0); }
  to { transform: scaleX(1); } }

@keyframes kzScaleY { from { transform: scaleY(0); }
  to { transform: scaleY(1); } }

@keyframes kzZoom { from { transform: scale(1.12); }
  to { transform: scale(1); } }

@keyframes kzZoomSoft { from { transform: scale(1.1); }
  to { transform: scale(1); } }

@keyframes kzClip { from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); } }

@keyframes kzDraw { to { stroke-dashoffset: 0; } }

@keyframes kzScrollLine { 0% { transform: translateY(-100%); }
  60% { transform: translateY(0); }
  100% { transform: translateY(100%); } }

/**************************************************** 3. PAGE PRINCIPALE ****************************************************/
/******************************** HERO ********************************/
.kz-hero { position: relative; display: flex; align-items: center; min-height: 100vh; min-height: 100svh; padding: 120px 0 140px; overflow: hidden; isolation: isolate; background-color: var(--kz-ink); color: var(--kz-cream); }

/* ---------- Fond ---------- */
.kz-hero__media { z-index: -3; overflow: hidden; }

.kz-hero__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* Voile renforcé plus loin à droite, le texte étant plus large */
.kz-hero__overlay { z-index: -2; background: linear-gradient(0deg, rgba(32, 22, 13, 0.65) 0%, rgba(32, 22, 13, 0) 35%), linear-gradient(90deg, rgba(32, 22, 13, 0.88) 0%, rgba(32, 22, 13, 0.76) 65%, rgba(32, 22, 13, 0.45) 100%); }

/* ---------- Fil Kizuna ---------- */
.kz-hero__thread { position: absolute; top: 0; right: 0; z-index: -1; width: 30%; height: 100%; pointer-events: none; }

.kz-hero__thread path { fill: none; stroke: url(#kzThreadGrad); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }

.kz-hero__thread path + path { stroke-width: 1; opacity: .55; }

/* ---------- Contenu ---------- */
.kz-hero__inner { position: relative; }

.kz-hero__content { position: relative; max-width: 920px; padding-left: 72px; }

/* Sceau 絆 relié au contenu par un fil vertical */
.kz-hero__mark { position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 1px solid rgba(238, 202, 155, 0.6); color: var(--kz-sand); line-height: 1; }

.kz-hero__content::before { content: ""; position: absolute; top: 58px; bottom: 0; left: 23px; width: 1px; background: linear-gradient(180deg, var(--kz-sand) 0%, rgba(238, 202, 155, 0) 100%); transform-origin: top center; }

.kz-hero__title { margin-bottom: 20px; color: var(--kz-cream); line-height: 1.1; text-wrap: balance; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25); }

.kz-hero__desc { max-width: 780px; color: var(--kz-cream-light); line-height: 1.7; }

.kz-hero__title > *, .kz-hero__desc > *, .kz-hero__scroll-text > * { color: inherit; }

.kz-hero__title > *:last-child, .kz-hero__desc > *:last-child { margin-bottom: 0; }

.kz-hero__title > *:first-child, .kz-hero__desc > *:first-child { margin-top: 0; }

.kz-hero__scroll-text > * { margin: 0; }

/* ---------- Incitation au scroll ---------- */
.kz-hero__scroll-wrap { position: absolute; left: 0; right: 0; bottom: 20px; display: flex; justify-content: center; }

.kz-hero__scroll { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 8px 14px; border: 0; background: none; color: var(--kz-cream); letter-spacing: .08em; cursor: pointer; transition: color 0.3s var(--kz-ease); }

.kz-hero__scroll:hover { color: var(--kz-sand); }

.kz-hero__scroll:focus-visible { outline: 2px solid var(--kz-sand); outline-offset: 4px; }

.kz-hero__scroll-line { position: relative; display: block; width: 1px; height: 56px; overflow: hidden; background-color: rgba(254, 246, 236, 0.25); }

.kz-hero__scroll-line::after { content: ""; position: absolute; top: 0; left: 0; width: 1px; height: 100%; background: linear-gradient(180deg, rgba(238, 202, 155, 0) 0%, var(--kz-sand) 100%); transform: translateY(-100%); animation: kzScrollLine 2.2s var(--kz-ease) infinite; }

/* ---------- Animations d'apparition ---------- */
.kz-hero--js .kz-hero__img { transform: scale(1.12); }

.kz-hero--js [data-kz-anim], .kz-hero--js .kz-hero__mark, .kz-hero--js .kz-hero__scroll-wrap { opacity: 0; }

.kz-hero--js .kz-hero__content::before { transform: scaleY(0); }

.kz-hero--js .kz-hero__thread path { stroke-dashoffset: 1; }

.kz-hero--js.is-visible .kz-hero__img { animation: kzZoom 2.6s var(--kz-ease) both; }

.kz-hero--js.is-visible .kz-hero__mark { animation: kzFade 1s var(--kz-ease) 0.2s both; }

.kz-hero--js.is-visible .kz-hero__content::before { animation: kzScaleY 1.4s var(--kz-ease) 0.45s both; }

.kz-hero--js.is-visible .kz-hero__title { animation: kzFadeUp 1s var(--kz-ease) 0.4s both; }

.kz-hero--js.is-visible .kz-hero__desc { animation: kzFadeUp 1s var(--kz-ease) 0.6s both; }

.kz-hero--js.is-visible .kz-hero__thread path { animation: kzDraw 3s var(--kz-ease) 0.6s forwards; }

.kz-hero--js.is-visible .kz-hero__thread path + path { animation-delay: .9s; }

.kz-hero--js.is-visible .kz-hero__scroll-wrap { animation: kzFade 1s var(--kz-ease) 1.3s both; }

/* ---------- Responsive ---------- */
/* Écrans d'ordinateur peu hauts (portables 13-14") */
@media (min-width: 992px) and (max-height: 820px) { .kz-hero { padding: 100px 0 120px; } .kz-hero__scroll-line { height: 40px; } }

@media (max-width: 991.98px) { .kz-hero { padding: 120px 0 140px; } .kz-hero__overlay { background: linear-gradient(180deg, rgba(32, 22, 13, 0.72) 0%, rgba(32, 22, 13, 0.78) 60%, rgba(32, 22, 13, 0.9) 100%); } .kz-hero__thread { width: 40%; opacity: .5; } }

@media (max-width: 767.98px) { .kz-hero__thread { display: none; } .kz-hero__content { padding-left: 52px; } .kz-hero__mark { width: 36px; height: 36px; } .kz-hero__content::before { top: 46px; left: 18px; } .kz-hero__scroll-line { height: 44px; } }

@media (max-width: 575.98px) { .kz-hero { padding: 100px 0 120px; } .kz-hero__content { padding-left: 0; padding-top: 52px; } .kz-hero__content::before { display: none; } }

/* Écrans très peu hauts (mobile paysage) */
@media (max-height: 560px) { .kz-hero { padding: 90px 0 50px; } .kz-hero__scroll-wrap { display: none; } }

/******************************** PRESENTATION ENTREPRISE ********************************/
.kz-about { --kz-offset: 24px; --kz-box: 40px; --kz-ratio: 5 / 4; position: relative; padding: 96px 0; overflow: hidden; isolation: isolate; background-color: var(--kz-cream); color: var(--kz-brown); }

/* ---------- Fond ---------- */
.kz-about__bg { z-index: -2; background-position: center; background-size: cover; background-repeat: no-repeat; }

/* Voile allégé côté photo, plus dense sous le texte (contraste AA) */
.kz-about__veil { z-index: -1; background: linear-gradient(90deg, rgba(254, 246, 236, 0.84) 0%, rgba(254, 246, 236, 0.74) 48%, rgba(254, 246, 236, 0.3) 100%); }

/* ---------- Grille ---------- */
.kz-about__inner { display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 88px; }

/* ---------- Texte ---------- */
.kz-about__text { max-width: 580px; }

.kz-about__kicker { margin-bottom: 14px; color: var(--kz-brown); }

.kz-about__title { margin-bottom: 28px; color: var(--kz-brown); }

.kz-about__desc { color: var(--kz-brown); line-height: 1.7; }

/* Trait fin entre les paragraphes */
.kz-about__desc > * + * { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(65, 46, 28, 0.18); }

/* ---------- Visuel ---------- */
/* Marges réservées au cadre (haut / droite) et au carré (bas / gauche) */
.kz-about__visual { position: relative; margin: var(--kz-offset) var(--kz-offset) var(--kz-box) var(--kz-box); }

/* Cadre décalé en haut à droite, derrière la photo */
.kz-about__frame { position: absolute; top: calc(var(--kz-offset) * -1); left: var(--kz-offset); z-index: 0; width: 100%; aspect-ratio: var(--kz-ratio); pointer-events: none; }

.kz-about__edge { position: absolute; display: block; background-color: var(--kz-brown); }

.kz-about__edge--top { top: 0; left: 0; width: 100%; height: 2px; transform-origin: left center; }

.kz-about__edge--right { top: 0; right: 0; width: 2px; height: 100%; transform-origin: center top; }

.kz-about__edge--bottom { bottom: 0; right: 0; width: 100%; height: 2px; transform-origin: right center; }

.kz-about__edge--left { bottom: 0; left: 0; width: 2px; height: 100%; transform-origin: center bottom; }

.kz-about__photo { position: relative; z-index: 1; aspect-ratio: var(--kz-ratio); overflow: hidden; background-color: var(--kz-sand); }

.kz-about__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* ---------- Carré brun ---------- */
/* À cheval sur l'angle bas gauche : il répond en diagonale au cadre décalé */
.kz-about__box { position: absolute; left: calc(var(--kz-box) * -1); bottom: calc(var(--kz-box) * -1); z-index: 2; width: 52%; padding: 32px 36px 34px; background-color: var(--kz-brown); color: var(--kz-cream); line-height: 1.35; box-shadow: 0 24px 48px -24px rgba(32, 22, 13, 0.45); }

/* Petit fil sable en tête du carré */
.kz-about__box::before { content: ""; display: block; width: 36px; height: 2px; margin-bottom: 18px; background-color: var(--kz-sand); }

/* ---------- Animations d'apparition ---------- */
.kz-about--js .kz-about__box { opacity: 0; }

.kz-about--js .kz-about__photo { clip-path: inset(0 100% 0 0); }

.kz-about--js .kz-about__photo img { transform: scale(1.1); }

.kz-about--js .kz-about__edge--top, .kz-about--js .kz-about__edge--bottom { transform: scaleX(0); }

.kz-about--js .kz-about__edge--right, .kz-about--js .kz-about__edge--left { transform: scaleY(0); }

.kz-about--js.is-visible .kz-about__kicker { animation: kzUp 0.9s var(--kz-ease) 0.1s both; }

.kz-about--js.is-visible .kz-about__title { animation: kzUp 0.9s var(--kz-ease) 0.2s both; }

.kz-about--js.is-visible .kz-about__desc { animation: kzUp 0.9s var(--kz-ease) 0.35s both; }

.kz-about--js.is-visible .kz-about__photo { animation: kzClip 1.2s var(--kz-ease) 0.2s both; }

.kz-about--js.is-visible .kz-about__photo img { animation: kzZoomSoft 1.8s var(--kz-ease) 0.2s both; }

.kz-about--js.is-visible .kz-about__box { animation: kzUp 0.9s var(--kz-ease) 0.8s both; }

/* Le cadre se trace côté après côté */
.kz-about--js.is-visible .kz-about__edge--top { animation: kzScaleX 0.5s var(--kz-ease) 1s both; }

.kz-about--js.is-visible .kz-about__edge--right { animation: kzScaleY 0.5s var(--kz-ease) 1.35s both; }

.kz-about--js.is-visible .kz-about__edge--bottom { animation: kzScaleX 0.5s var(--kz-ease) 1.7s both; }

.kz-about--js.is-visible .kz-about__edge--left { animation: kzScaleY 0.5s var(--kz-ease) 2.05s both; }

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) { .kz-about__inner { gap: 64px; } .kz-about__box { width: 60%; padding: 26px 28px 28px; } }

@media (max-width: 991.98px) { .kz-about { --kz-ratio: 16 / 11; padding: 80px 0; } .kz-about__inner { grid-template-columns: 1fr; gap: 48px; } .kz-about__text { max-width: 680px; } .kz-about__visual { width: calc(100% - var(--kz-offset) - var(--kz-box)); max-width: 640px; } .kz-about__box { width: 50%; } .kz-about__veil { background: rgba(254, 246, 236, 0.8); } }

@media (max-width: 767.98px) { .kz-about { --kz-offset: 14px; --kz-box: 0px; --kz-ratio: 4 / 3; padding: 64px 0; } .kz-about__inner { gap: 40px; } .kz-about__visual { width: calc(100% - 14px); } /* Sur mobile, le carré passe sous la photo en la chevauchant */ .kz-about__box { position: relative; left: auto; bottom: auto; width: 88%; margin-top: -40px; padding: 22px 24px 24px; } .kz-about__box::before { margin-bottom: 14px; } }

/******************************** PRESTATIONS ********************************/
.kz-svc { position: relative; padding: 120px 0; overflow: hidden; isolation: isolate; background-color: var(--kz-brown); background-image: radial-gradient(ellipse at 15% 0%, #4C3622 0%, #36261A 45%, #20160D 100%); color: var(--kz-cream); }

/* ---------- Fil (marge droite) ---------- */
.kz-svc__thread-glow { stroke: var(--kz-sand); stroke-width: 5; opacity: .1; }

.kz-svc__thread-line { stroke: var(--kz-sand); stroke-width: 1.4; opacity: .6; }

.kz-svc__thread-tip { fill: var(--kz-sand); }

/* ---------- Contenu ---------- */
.kz-svc__inner { position: relative; z-index: 1; }

.kz-svc__head { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 80px; }

.kz-svc__kicker { color: var(--kz-sand); }

.kz-svc__title { color: var(--kz-cream); }

.kz-svc__intro { max-width: 560px; color: var(--kz-cream-soft); line-height: 1.75; }

.kz-svc__intro > * + *, .kz-svc__text > * + * { margin-top: 1em; }

/* Trait horizontal : se trace au scroll */
.kz-svc__rule { display: block; height: 1px; margin: 64px 0 56px; background-color: rgba(238, 202, 155, 0.35); transform: scaleX(var(--kz-rule, 1)); transform-origin: left center; }

/* ---------- Cartes photo ---------- */
.kz-svc__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 0; padding: 0; list-style: none; }

.kz-svc__item { position: relative; display: flex; }

/* Toute la carte est cliquable */
.kz-svc__link { position: relative; display: flex; align-items: flex-end; width: 100%; min-height: 500px; overflow: hidden; background-color: var(--kz-ink); color: var(--kz-cream); text-decoration: none; }

.kz-svc__link:hover, .kz-svc__link:focus { color: var(--kz-cream); text-decoration: none; }

.kz-svc__link:focus-visible { outline: 2px solid var(--kz-sand); outline-offset: 4px; }

.kz-svc__photo { position: absolute; top: 0; left: 0; z-index: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 1s var(--kz-ease); }

/* Dégradé sombre en bas de carte : contraste AA pour le texte */
.kz-svc__link::after { content: ""; z-index: 1; background: linear-gradient(180deg, rgba(32, 22, 13, 0.1) 0%, rgba(32, 22, 13, 0.35) 30%, rgba(32, 22, 13, 0.78) 50%, rgba(32, 22, 13, 0.95) 100%); transition: opacity 0.6s var(--kz-ease); }

/* Liseré sable qui apparaît au survol */
.kz-svc__link::before { content: ""; z-index: 3; border: 1px solid rgba(238, 202, 155, 0); transition: border-color 0.5s var(--kz-ease); pointer-events: none; }

/* Flèche en haut à droite */
.kz-svc__arrow { position: absolute; top: 24px; right: 24px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid rgba(254, 246, 236, 0.55); border-radius: 50%; background-color: rgba(32, 22, 13, 0.35); color: var(--kz-cream); transition: background-color 0.45s var(--kz-ease), border-color 0.45s var(--kz-ease), color 0.45s var(--kz-ease), transform 0.45s var(--kz-ease); }

.kz-svc__arrow i { transition: transform 0.45s var(--kz-ease); }

.kz-svc__body { position: relative; z-index: 2; padding: 36px 32px 34px; transition: transform 0.5s var(--kz-ease); }

/* Petit fil sable au-dessus du titre de carte */
.kz-svc__body::before { content: ""; display: block; width: 36px; height: 2px; margin-bottom: 18px; background-color: var(--kz-sand); transition: width 0.5s var(--kz-ease); }

.kz-svc__name { margin-bottom: 12px; color: var(--kz-cream); }

.kz-svc__text { color: var(--kz-cream-soft); line-height: 1.65; }

/* ---------- Survol / focus clavier ---------- */
.kz-svc__link:hover .kz-svc__photo, .kz-svc__link:focus-visible .kz-svc__photo { transform: scale(1.06); }

.kz-svc__link:hover::before, .kz-svc__link:focus-visible::before { border-color: rgba(238, 202, 155, 0.6); }

.kz-svc__link:hover .kz-svc__body, .kz-svc__link:focus-visible .kz-svc__body { transform: translateY(-6px); }

.kz-svc__link:hover .kz-svc__body::before, .kz-svc__link:focus-visible .kz-svc__body::before { width: 72px; }

.kz-svc__link:hover .kz-svc__arrow, .kz-svc__link:focus-visible .kz-svc__arrow { background-color: var(--kz-sand); border-color: var(--kz-sand); color: var(--kz-brown); }

.kz-svc__link:hover .kz-svc__arrow i, .kz-svc__link:focus-visible .kz-svc__arrow i { transform: rotate(45deg); }

/* ---------- Délais d'apparition ---------- */
.kz-svc--js.is-visible .kz-svc__title { animation-delay: .1s; }

.kz-svc--js.is-visible .kz-svc__intro { animation-delay: .2s; }

.kz-svc--js.is-visible .kz-svc__item:nth-child(1) { animation-delay: .35s; }

.kz-svc--js.is-visible .kz-svc__item:nth-child(2) { animation-delay: .5s; }

.kz-svc--js.is-visible .kz-svc__item:nth-child(3) { animation-delay: .65s; }

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) { .kz-svc__head { gap: 56px; } .kz-svc__list { gap: 16px; } .kz-svc__link { min-height: 460px; } .kz-svc__body { padding: 28px 24px 26px; } }

@media (max-width: 991.98px) { .kz-svc { padding: 96px 0; } .kz-svc__head { grid-template-columns: 1fr; gap: 24px; } .kz-svc__rule { margin: 48px 0 40px; } .kz-svc__list { grid-template-columns: 1fr; } .kz-svc__link { min-height: 340px; } .kz-svc__link::after { background: linear-gradient(180deg, rgba(32, 22, 13, 0.1) 0%, rgba(32, 22, 13, 0.5) 35%, rgba(32, 22, 13, 0.82) 55%, rgba(32, 22, 13, 0.95) 100%); } }

@media (max-width: 767.98px) { .kz-svc { padding: 72px 0; } .kz-svc__rule { margin: 40px 0 32px; } .kz-svc__link { min-height: 380px; } .kz-svc__arrow { top: 18px; right: 18px; width: 42px; height: 42px; } .kz-svc__body { padding: 24px 22px 22px; } .kz-svc__thread-line { opacity: .45; } }

/* ---------- Sceau 技 (savoir-faire) ---------- Inverse du sceau du hero : la ligne descend jusqu'au sceau, placé en bas à gauche, à côté de l'accroche et du titre. */
.kz-svc__heading { position: relative; padding-left: 72px; }

/* La ligne : du haut de l'en-tête jusqu'au sceau */
.kz-svc__heading::before { content: ""; position: absolute; top: 0; bottom: 58px; left: 23px; width: 1px; background: linear-gradient(180deg, rgba(238, 202, 155, 0) 0%, var(--kz-sand) 100%); transform-origin: center top; }

/* Le sceau, aligné sur le bas du titre */
.kz-svc__mark { position: absolute; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 1px solid rgba(238, 202, 155, 0.6); color: var(--kz-sand); line-height: 1; }

/* ---------- Apparition : la ligne descend, puis le sceau apparaît ---------- */
.kz-svc--js .kz-svc__heading::before { transform: scaleY(0); }

.kz-svc--js .kz-svc__mark { opacity: 0; }

.kz-svc--js.is-visible .kz-svc__heading::before { animation: kzScaleY 1.2s var(--kz-ease) 0.1s both; }

.kz-svc--js.is-visible .kz-svc__mark { animation: kzFade 0.8s var(--kz-ease) 1s both; }

/* ---------- Responsive ---------- */
@media (max-width: 767.98px) { .kz-svc__heading { padding-left: 52px; } .kz-svc__heading::before { bottom: 46px; left: 18px; } .kz-svc__mark { width: 36px; height: 36px; } }

/* Petit mobile : comme le hero, le sceau passe au-dessus et la ligne disparaît */
@media (max-width: 575.98px) { .kz-svc__heading { padding-left: 0; padding-top: 52px; } .kz-svc__heading::before { display: none; } .kz-svc__mark { top: 0; bottom: auto; } }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) { .kz-svc--js .kz-svc__heading::before { transform: none; } .kz-svc--js .kz-svc__mark { opacity: 1; } }

/******************************** TIMELINE ********************************/
.kz-steps { --kz-node: 56px; position: relative; padding: 110px 0; overflow: hidden; background-color: var(--kz-cream); color: var(--kz-brown); }

/* ---------- En-tête, encadré par le torii ---------- */
.kz-steps__head { --kz-torii-w: 900px; position: relative; max-width: 760px; margin: 0 auto 80px; padding-top: 156px; /* hauteur des linteaux du torii + respiration */ text-align: center; }

/* Accroche et titre tiennent entre les deux piliers */
.kz-steps__kicker, .kz-steps__title { position: relative; z-index: 1; max-width: 540px; margin-left: auto; margin-right: auto; }

/* ---------- Torii ---------- */
.kz-steps__torii { position: absolute; top: 0; left: 50%; bottom: -48px; z-index: 0; width: var(--kz-torii-w); max-width: calc(100vw - 40px); transform: translateX(-50%); pointer-events: none; }

/* Linteaux : trait brun, remplissage crème pour masquer les piliers derrière */
.kz-steps__torii-top { position: relative; z-index: 1; display: block; width: 100%; height: auto; }

.kz-steps__torii-top path { fill: var(--kz-cream); stroke: rgba(65, 46, 28, 0.4); stroke-width: 1.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* Piliers (deux traits chacun), qui s'effacent vers le bas */
.kz-steps__torii::before, .kz-steps__torii::after { content: ""; position: absolute; top: 0; bottom: 0; width: 2.22%; border-left: 1px solid rgba(65, 46, 28, 0.4); border-right: 1px solid rgba(65, 46, 28, 0.4); -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); }

.kz-steps__torii::before { left: 14.44%; }

.kz-steps__torii::after { left: 83.33%; }

/* Zone calquée sur le dessin : positionne le kanji dans la plaque */
.kz-steps__torii-plaque { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; aspect-ratio: 900 / 130; }

.kz-steps__torii-kanji { position: absolute; top: 64%; left: 50%; color: var(--kz-gold); line-height: 1; transform: translate(-50%, -50%); }

/* Apparition du torii en fondu (opacité seule : son centrage repose sur transform) */
.kz-steps--js .kz-steps__torii { opacity: 0; }

.kz-steps--js.is-visible .kz-steps__torii { animation: kzFade 1.4s var(--kz-ease) both; }

@media (prefers-reduced-motion: reduce) { .kz-steps--js .kz-steps__torii { opacity: 1; } }

.kz-steps__kicker, .kz-steps__title { color: var(--kz-brown); }

/* ---------- Timeline (horizontale sur desktop) ---------- */
.kz-steps__timeline { position: relative; }

/* Ligne de base : du centre du premier rond au centre du dernier (5 colonnes égales → centres à 10 % et 90 %) */
.kz-steps__track { position: absolute; top: calc(var(--kz-node) / 2); left: 10%; right: 10%; height: 1px; background-color: rgba(65, 46, 28, 0.18); }

/* Partie tracée au scroll */
.kz-steps__fill { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background-color: var(--kz-gold); transform: scaleX(var(--kz-p, 1)); transform-origin: left center; }

/* Perle en tête du fil */
.kz-steps__bead { position: absolute; top: 0; left: calc(var(--kz-p, 1) * 100%); width: 9px; height: 9px; margin: -4px 0 0 -4px; border-radius: 50%; background-color: var(--kz-gold); box-shadow: 0 0 0 4px rgba(176, 124, 66, 0.18); }

.kz-steps__list { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 0; list-style: none; }

.kz-steps__item { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 16px; text-align: center; }

/* Ronds numérotés */
.kz-steps__node { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: var(--kz-node); height: var(--kz-node); margin-bottom: 24px; border: 1px solid rgba(65, 46, 28, 0.3); border-radius: 50%; background-color: var(--kz-cream); color: var(--kz-brown); letter-spacing: .04em; transition: background-color 0.5s var(--kz-ease), border-color 0.5s var(--kz-ease), color 0.5s var(--kz-ease), transform 0.5s var(--kz-ease); }

/* Le rond s'allume quand le fil l'atteint */
.kz-steps__item.is-active .kz-steps__node { background-color: var(--kz-brown); border-color: var(--kz-brown); color: var(--kz-cream); transform: scale(1.06); }

.kz-steps__name { max-width: 200px; color: var(--kz-brown); line-height: 1.3; text-wrap: balance; }

/* ---------- Délais d'apparition ---------- */
.kz-steps--js.is-visible .kz-steps__title { animation-delay: .1s; }

.kz-steps--js.is-visible .kz-steps__item:nth-child(1) { animation-delay: .25s; }

.kz-steps--js.is-visible .kz-steps__item:nth-child(2) { animation-delay: .35s; }

.kz-steps--js.is-visible .kz-steps__item:nth-child(3) { animation-delay: .45s; }

.kz-steps--js.is-visible .kz-steps__item:nth-child(4) { animation-delay: .55s; }

.kz-steps--js.is-visible .kz-steps__item:nth-child(5) { animation-delay: .65s; }

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) { .kz-steps__item { padding: 0 10px; } }

/* Timeline verticale et centrée sous 992px */
@media (max-width: 991.98px) { .kz-steps { padding: 88px 0; } .kz-steps__head { --kz-torii-w: 680px; margin-bottom: 56px; padding-top: 124px; } .kz-steps__kicker, .kz-steps__title { max-width: 420px; } .kz-steps__torii { bottom: -24px; } .kz-steps__track { top: calc(var(--kz-node) / 2); bottom: 0; left: 50%; right: auto; width: 1px; height: auto; } .kz-steps__fill { width: 1px; height: 100%; transform: scaleY(var(--kz-p, 1)); transform-origin: center top; } .kz-steps__bead { top: calc(var(--kz-p, 1) * 100%); left: 0; } .kz-steps__list { grid-template-columns: 1fr; row-gap: 40px; } .kz-steps__node { margin-bottom: 12px; } /* Fond crème derrière le titre : le fil passe "dessous" */ .kz-steps__name { position: relative; z-index: 1; max-width: 320px; padding: 6px 14px; background-color: var(--kz-cream); } }

@media (max-width: 767.98px) { .kz-steps { --kz-node: 46px; padding: 72px 0; } .kz-steps__head { margin-bottom: 48px; padding-top: calc((100vw - 40px) * .145 + 28px); } .kz-steps__kicker, .kz-steps__title { max-width: none; } .kz-steps__list { row-gap: 32px; } /* Mobile : seuls les linteaux restent, les piliers couperaient le titre */ .kz-steps__torii { bottom: auto; } .kz-steps__torii::before, .kz-steps__torii::after { display: none; } }

/* Petit mobile : la plaque devient trop petite pour le kanji */
@media (max-width: 575.98px) { .kz-steps__torii-kanji { display: none; } }

/******************************** AVANT / APRÈS ********************************/
/******************************** AVANT / APRÈS ********************************/
.kz-ba { position: relative; padding: 120px 0; overflow: hidden; background-color: var(--kz-ink); background-image: radial-gradient(ellipse at 85% 0%, #4C3622 0%, #36261A 45%, #20160D 100%); color: var(--kz-cream); }

/* ---------- En-tête ---------- */
.kz-ba__head { max-width: 780px; margin: 0 auto 64px; text-align: center; }

.kz-ba__kicker { color: var(--kz-sand); }

.kz-ba__title { margin-bottom: 20px; color: var(--kz-cream); /* Les mots trop longs pour l'écran se coupent proprement (avec tiret) */ overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }

.kz-ba__intro { max-width: 640px; margin: 0 auto; color: var(--kz-cream-soft); line-height: 1.75; }

.kz-ba__kicker > *, .kz-ba__title > *, .kz-ba__intro > *, .kz-ba__caption > *, .kz-ba__btn > * { padding: 0; }

/* ---------- Sceau 変 (henka : « la transformation ») ---------- Centré au-dessus de l'accroche, relié par deux fils horizontaux. */
.kz-ba__mark { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 28px; }

.kz-ba__mark::before, .kz-ba__mark::after { content: ""; width: 64px; height: 1px; }

.kz-ba__mark::before { background: linear-gradient(90deg, rgba(238, 202, 155, 0) 0%, var(--kz-sand) 100%); transform-origin: right center; }

.kz-ba__mark::after { background: linear-gradient(90deg, var(--kz-sand) 0%, rgba(238, 202, 155, 0) 100%); transform-origin: left center; }

.kz-ba__mark-kanji { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 1px solid rgba(238, 202, 155, 0.6); color: var(--kz-sand); line-height: 1; }

/* Apparition : le sceau, puis les fils qui s'étirent de part et d'autre */
.kz-ba--js .kz-ba__mark-kanji { opacity: 0; }

.kz-ba--js .kz-ba__mark::before, .kz-ba--js .kz-ba__mark::after { transform: scaleX(0); }

.kz-ba--js.is-visible .kz-ba__mark-kanji { animation: kzFade 0.8s var(--kz-ease) both; }

.kz-ba--js.is-visible .kz-ba__mark::before, .kz-ba--js.is-visible .kz-ba__mark::after { animation: kzScaleX 1s var(--kz-ease) 0.4s both; }

/* ---------- Grille : 1 grand + 2 petits ---------- */
/* Largeur contenue : la grande photo est moins haute et moins recadrée */
.kz-ba__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 32px; max-width: 960px; margin: 0 auto; }

.kz-ba__card { margin: 0; }

.kz-ba__card--featured { grid-column: 1 / -1; }

/* ---------- Comparateur ---------- */
.kz-ba__compare { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background-color: var(--kz-brown); cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; }

/* Format 3:2, proche d'une photo d'appareil : peu de recadrage */
.kz-ba__card--featured .kz-ba__compare { aspect-ratio: 3 / 2; }

.kz-ba__img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; }

/* L'image "après" se découvre à droite du curseur */
.kz-ba__img--after { clip-path: inset(0 0 0 var(--kz-pos, 50%)); }

/* Curseur natif : invisible mais accessible au clavier */
.kz-ba__range { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }

/* ---------- Étiquettes ---------- */
.kz-ba__label { position: absolute; top: 20px; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 7px 14px; letter-spacing: .12em; text-transform: uppercase; line-height: 1.2; pointer-events: none; }

/* Kanji 前 (mae, « avant ») et 後 (ato, « après »), séparés par un fin trait */
.kz-ba__label-kanji { padding-right: 10px; border-right: 1px solid currentColor; letter-spacing: 0; text-transform: none; }

.kz-ba__label--before { left: 20px; background-color: rgba(32, 22, 13, 0.82); color: var(--kz-cream); }

.kz-ba__label--after { right: 20px; background-color: var(--kz-sand); color: var(--kz-brown); }

/* ---------- Séparateur + poignée ---------- */
.kz-ba__divider { position: absolute; top: 0; bottom: 0; left: var(--kz-pos, 50%); z-index: 4; width: 2px; background-color: var(--kz-cream); transform: translateX(-50%); pointer-events: none; }

.kz-ba__handle { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 2px solid var(--kz-cream); border-radius: 50%; background-color: var(--kz-sand); color: var(--kz-brown); transform: translate(-50%, -50%); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); transition: transform 0.35s var(--kz-ease), box-shadow 0.35s var(--kz-ease); }

.kz-ba__handle svg { width: 22px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.kz-ba__compare:hover .kz-ba__handle, .kz-ba__compare.is-dragging .kz-ba__handle { transform: translate(-50%, -50%) scale(1.1); }

/* Focus clavier visible sur la poignée */
.kz-ba__range:focus-visible ~ .kz-ba__divider .kz-ba__handle { box-shadow: 0 0 0 3px var(--kz-ink), 0 0 0 6px var(--kz-sand); }

/* ---------- Légende ---------- */
.kz-ba__caption { display: flex; align-items: center; gap: 14px; margin-top: 18px; color: var(--kz-cream-soft); }

.kz-ba__caption::before { content: ""; flex-shrink: 0; width: 28px; height: 1px; background-color: var(--kz-sand); }

/* ---------- Bouton ---------- */
.kz-ba__actions { margin-top: 64px; text-align: center; }

.kz-ba__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 14px 32px; border: 1px solid var(--kz-sand); border-radius: 2px; background-color: var(--kz-sand); color: var(--kz-brown); line-height: 1.2; letter-spacing: .03em; text-align: center; text-decoration: none; transition: background-color 0.35s var(--kz-ease), border-color 0.35s var(--kz-ease), color 0.35s var(--kz-ease); }

.kz-ba__btn:hover, .kz-ba__btn:focus { text-decoration: none; }

.kz-ba__btn:hover, .kz-ba__btn:focus-visible { background-color: var(--kz-cream); border-color: var(--kz-cream); color: var(--kz-brown); }

.kz-ba__btn:focus-visible { outline: 2px solid var(--kz-sand); outline-offset: 4px; }

/* ---------- Délais d'apparition ---------- */
.kz-ba--js.is-visible .kz-ba__title { animation-delay: .1s; }

.kz-ba--js.is-visible .kz-ba__intro { animation-delay: .2s; }

.kz-ba--js.is-visible .kz-ba__card:nth-child(1) { animation-delay: .3s; }

.kz-ba--js.is-visible .kz-ba__card:nth-child(2) { animation-delay: .45s; }

.kz-ba--js.is-visible .kz-ba__card:nth-child(3) { animation-delay: .55s; }

.kz-ba--js.is-visible .kz-ba__actions { animation-delay: .65s; }

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) { .kz-ba__grid { gap: 32px 24px; } }

@media (max-width: 991.98px) { .kz-ba { padding: 96px 0; } .kz-ba__card--featured .kz-ba__compare { aspect-ratio: 4 / 3; } }

@media (max-width: 767.98px) { .kz-ba { padding: 72px 0; } /* En-tête : accroche moins espacée, titre sans équilibrage forcé */ .kz-ba__head { margin-bottom: 40px; } .kz-ba__mark { margin-bottom: 22px; } .kz-ba__mark::before, .kz-ba__mark::after { width: 40px; } .kz-ba__mark-kanji { width: 40px; height: 40px; } .kz-ba__kicker { margin-bottom: 12px; letter-spacing: .08em; } .kz-ba__title { margin-bottom: 16px; line-height: 1.2; text-wrap: pretty; } .kz-ba__intro { line-height: 1.65; } .kz-ba__grid { grid-template-columns: 1fr; gap: 32px; } .kz-ba__label { top: 14px; gap: 8px; padding: 6px 10px; } .kz-ba__label-kanji { padding-right: 8px; } .kz-ba__label--before { left: 14px; } .kz-ba__label--after { right: 14px; } .kz-ba__handle { width: 44px; height: 44px; } .kz-ba__actions { margin-top: 48px; } }

@media (max-width: 575.98px) { .kz-ba__kicker { letter-spacing: .05em; } }

@media (prefers-reduced-motion: reduce) { .kz-ba--js .kz-ba__mark-kanji { opacity: 1; } .kz-ba--js .kz-ba__mark::before, .kz-ba--js .kz-ba__mark::after { transform: none; } }

/******************************** CTA ********************************/
.cta_banner { padding: 110px 24px !important; overflow: hidden; isolation: isolate; }

.cta_banner .content { max-width: 860px; }

/* ---------- Titre ---------- */
.cta_banner .ctaLinks-title { margin-bottom: 36px !important; }

/* Petit fil bronze au-dessus du titre */
.cta_banner .ctaLinks-title::before { content: ""; display: block; width: 40px; height: 2px; margin: 0 auto 24px; background-color: var(--kz-gold); }

.cta_banner .ctaLinks-title h2 { margin: 0; color: inherit; line-height: 1.15; letter-spacing: .04em; text-wrap: balance; }

/* ---------- Bouton (foncé, pour fond clair) ---------- */
.cta_banner .ctaLinks-button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 56px; margin: 0 !important; padding: 16px 36px !important; border: 1px solid var(--kz-brown); border-radius: 2px; background-color: var(--kz-brown) !important; color: var(--kz-cream) !important; letter-spacing: .08em; line-height: 1.2; text-decoration: none; transition: background-color 0.35s var(--kz-ease), border-color 0.35s var(--kz-ease), color 0.35s var(--kz-ease); }

.cta_banner .ctaLinks-button p { margin: 0 !important; padding: 0; color: inherit; }

/* Petit trait (le "fil") qui s'allonge au survol */
.cta_banner .ctaLinks-button::after { content: ""; flex-shrink: 0; width: 22px; height: 1px; background-color: currentColor; transition: width 0.35s var(--kz-ease), background-color 0.35s var(--kz-ease); }

.cta_banner .ctaLinks-button:hover, .cta_banner .ctaLinks-button:focus-visible { background-color: var(--kz-ink) !important; border-color: var(--kz-ink); color: var(--kz-cream) !important; text-decoration: none; }

.cta_banner .ctaLinks-button:hover::after, .cta_banner .ctaLinks-button:focus-visible::after { width: 38px; background-color: var(--kz-sand); }

.cta_banner .ctaLinks-button:focus-visible { outline: 2px solid var(--kz-brown); outline-offset: 4px; }

/* ---------- Responsive ---------- */
@media (max-width: 767.98px) { .cta_banner { padding: 80px 20px !important; } .cta_banner .ctaLinks-title { margin-bottom: 28px !important; } .cta_banner .ctaLinks-button { width: 100%; padding: 16px 24px !important; } }

/* background-attachment: fixed ne fonctionne pas sur iOS / tablettes */
@media (hover: none), (max-width: 991.98px) { .cta_banner .background-image-div-opacity { background-attachment: scroll !important; } }

/******************************** FOURNISSEURS ********************************/
.kz-partners { position: relative; padding: 120px 0; overflow: hidden; isolation: isolate; background-color: var(--kz-cream); color: var(--kz-brown); }

/* ---------- Fil (marge gauche) ---------- */
.kz-partners__thread-line { stroke: var(--kz-gold); stroke-width: 1.4; opacity: .7; }

.kz-partners__thread-tip { fill: var(--kz-gold); }

/* ---------- Contenu ---------- */
.kz-partners__inner { position: relative; z-index: 1; }

.kz-partners__grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 96px; }

.kz-partners__text { max-width: 580px; }

.kz-partners__kicker { color: var(--kz-brown); }

.kz-partners__title { margin-bottom: 24px; color: var(--kz-brown); }

.kz-partners__intro { color: var(--kz-brown); line-height: 1.75; }

.kz-partners__intro > * + *, .kz-partners__desc > * + * { margin-top: 1em; }

/* ---------- Partenaire principal ---------- */
.kz-partners__featured { position: relative; padding: 48px 48px 44px; border: 1px solid rgba(65, 46, 28, 0.16); background-color: rgba(255, 255, 255, 0.55); }

/* Fil bronze en haut de la carte */
.kz-partners__featured::before { content: ""; position: absolute; top: -1px; left: 48px; width: 56px; height: 2px; background-color: var(--kz-gold); }

.kz-partners__logo-wrap { display: flex; align-items: center; height: 96px; margin-bottom: 32px; }

.kz-partners__logo { display: block; width: auto; max-width: 240px; max-height: 96px; object-fit: contain; }

.kz-partners__name { margin-bottom: 14px; color: var(--kz-brown); }

.kz-partners__desc { color: var(--kz-brown); line-height: 1.7; }

/* ---------- Autres partenaires ---------- */
.kz-partners__others { margin-top: 88px; padding-top: 40px; border-top: 1px solid rgba(65, 46, 28, 0.16); }

.kz-partners__others-label { margin-bottom: 28px; color: var(--kz-brown); letter-spacing: .08em; }

.kz-partners__logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }

.kz-partners__logo-item { display: flex; align-items: center; justify-content: center; height: 120px; padding: 24px; border: 1px solid rgba(65, 46, 28, 0.12); }

/* Logos harmonisés en niveaux de gris, couleur au survol */
.kz-partners__logo-item img { display: block; width: auto; max-width: 100%; max-height: 64px; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter 0.4s var(--kz-ease), opacity 0.4s var(--kz-ease); }

.kz-partners__logo-item:hover img { filter: grayscale(0); opacity: 1; }

/* ---------- Délais d'apparition ---------- */
.kz-partners--js.is-visible .kz-partners__title { animation-delay: .1s; }

.kz-partners--js.is-visible .kz-partners__intro { animation-delay: .2s; }

.kz-partners--js.is-visible .kz-partners__featured { animation-delay: .35s; }

.kz-partners--js.is-visible .kz-partners__others { animation-delay: .5s; }

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) { .kz-partners__grid { gap: 64px; } .kz-partners__featured { padding: 40px 36px 36px; } .kz-partners__featured::before { left: 36px; } }

@media (max-width: 991.98px) { .kz-partners { padding: 96px 0; } .kz-partners__grid { grid-template-columns: 1fr; gap: 48px; } .kz-partners__text { max-width: 680px; } .kz-partners__others { margin-top: 64px; } }

@media (max-width: 767.98px) { .kz-partners { padding: 72px 0; } .kz-partners__featured { padding: 32px 24px 28px; } .kz-partners__featured::before { left: 24px; } .kz-partners__logo-wrap { height: 80px; margin-bottom: 24px; } .kz-partners__logo { max-height: 80px; max-width: 200px; } .kz-partners__others { margin-top: 48px; padding-top: 32px; } .kz-partners__logos { grid-template-columns: repeat(2, 1fr); gap: 12px; } .kz-partners__logo-item { height: 96px; padding: 18px; } .kz-partners__thread-line { opacity: .5; } }

/******************************** TITRE DE SECTION (ENGAGEMENTS) ********************************/
/* Utilise les variables et l'animation kzScaleY définies dans le CSS global */
.kz-heading { position: relative; padding: 110px 0 56px; background-color: var(--kz-brown); color: var(--kz-cream); text-align: center; }

.kz-heading__inner { max-width: 820px; margin: 0 auto; padding: 0 48px; }

/* Le fil sable qui descend vers le titre */
.kz-heading__thread { display: block; width: 1px; height: 64px; margin: 0 auto 28px; background: linear-gradient(180deg, rgba(238, 202, 155, 0) 0%, var(--kz-sand) 100%); transform-origin: center top; }

.kz-heading__kicker { margin-bottom: 16px; color: var(--kz-sand); letter-spacing: .14em; }

.kz-heading__title { margin-bottom: 20px; color: var(--kz-cream); line-height: 1.15; text-wrap: balance; }

.kz-heading__intro { max-width: 620px; margin: 0 auto; color: var(--kz-cream-soft); line-height: 1.75; }

/* Contenu Liquid enveloppé (h2, p…) */
.kz-heading__kicker > *, .kz-heading__title > *, .kz-heading__intro > * { margin: 0; color: inherit; }

/* ---------- Le fil se trace à l'entrée dans l'écran (CSS seul) ---------- Navigateurs compatibles uniquement ; ailleurs, le fil est simplement affiché. */
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .kz-heading__thread { animation: kzScaleY linear both; animation-timeline: view(); animation-range: entry 10% cover 35%; } } }

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) { .kz-heading__inner { padding: 0 32px; } }

@media (max-width: 767.98px) { .kz-heading { padding: 72px 0 40px; } .kz-heading__inner { padding: 0 20px; } .kz-heading__thread { height: 48px; margin-bottom: 22px; } }

/******************************** ENGAGEMENTS (PICTOS) ********************************/
.picto_card { padding-bottom: 120px; }

/* ---------- Grille : pas d'espace en haut, cartes resserrées ---------- */
.picto_card > .row { --bs-gutter-x: 8px; --bs-gutter-y: 8px; max-width: 1080px; margin-top: 0 !important; margin-bottom: 0 !important; margin-right: auto !important; margin-left: auto !important; }

/* ---------- Cartes ---------- */
.picto_card .svg-picto-card { align-items: center; padding: 16px 12px !important; }

/* ---------- Pictos à 104px (carrés, comme les SVG) ---------- */
.picto_card .svg-picto-card svg { display: block; width: 104px; height: 104px; margin: 0 auto; }

/* ---------- Titres ---------- */
.picto_card .svg-picto-card .text-color-sixth { margin-top: 18px !important; }

.picto_card .svg-picto-card h4 { margin: 0; color: inherit; line-height: 1.3; text-wrap: balance; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) { .picto_card { padding-bottom: 96px; } .picto_card > .row { --bs-gutter-y: 4px; } }

@media (max-width: 767.98px) { .picto_card { padding-bottom: 78px; } .picto_card .svg-picto-card svg { width: 88px; height: 88px; } }

/******************************** ZONE D'INTERVENTION ********************************/
.kz-zone { --kz-offset: 20px; position: relative; padding: 120px 0; overflow: hidden; background-color: var(--kz-cream); color: var(--kz-brown); }

.kz-zone__container { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 88px; width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 48px; }

/* ---------- Carte + cadre décalé (rappel du bloc présentation) ---------- */
.kz-zone__visual { position: relative; margin: 0 var(--kz-offset) var(--kz-offset) 0; }

.kz-zone__visual::before { content: ""; position: absolute; top: var(--kz-offset); left: var(--kz-offset); z-index: 0; width: 100%; height: 100%; border: 2px solid var(--kz-brown); pointer-events: none; }

/* Carte légèrement réchauffée pour s'accorder à la palette, couleurs d'origine au survol */
.kz-zone__map { position: relative; z-index: 1; display: block; width: 100%; height: 480px; border: 0; background-color: var(--kz-sand); filter: sepia(0.2) saturate(0.85); transition: filter 0.5s var(--kz-ease); }

.kz-zone__visual:hover .kz-zone__map { filter: none; }

/* ---------- Texte ---------- */
.kz-zone__text { max-width: 580px; }

.kz-zone__kicker { margin-bottom: 16px; color: var(--kz-brown); letter-spacing: .14em; }

.kz-zone__title { color: var(--kz-brown); line-height: 1.15; text-wrap: balance; }

/* Le fil */
.kz-zone__line { display: block; width: 56px; height: 2px; margin: 24px 0; background-color: var(--kz-gold); }

.kz-zone__description { margin-bottom: 28px; color: var(--kz-brown); line-height: 1.75; }

/* Contenu Liquid enveloppé (h2, p…) */
.kz-zone__kicker > *, .kz-zone__title > *, .kz-zone__description > *, .kz-zone__note-text > *, .kz-zone__button > * { margin: 0 !important; padding: 0 !important; color: inherit; }

.kz-zone__description > * + * { margin-top: 1em !important; }

/* ---------- Communes ---------- */
.kz-zone__cities { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; padding: 0; list-style: none; }

.kz-zone__cities li { padding: 7px 14px; border: 1px solid rgba(65, 46, 28, 0.22); border-radius: 2px; color: var(--kz-brown); line-height: 1.3; }

/* Commune de l'atelier (ajouter class="is-main") */
.kz-zone__cities li.is-main { border-color: var(--kz-brown); background-color: var(--kz-brown); color: var(--kz-cream); }

/* ---------- Encadré ---------- */
.kz-zone__note { display: flex; align-items: center; gap: 14px; margin-bottom: 36px; padding: 16px 20px; border-left: 2px solid var(--kz-gold); background-color: rgba(65, 46, 28, 0.05); }

.kz-zone__note-icon { display: flex; flex: 0 0 auto; color: var(--kz-gold); }

.kz-zone__note-icon svg { display: block; width: 24px; height: 24px; }

.kz-zone__note-text { color: var(--kz-brown); line-height: 1.6; }

/* ---------- Bouton (même style que le CTA) ---------- */
.kz-zone__button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 56px; padding: 16px 36px; border: 1px solid var(--kz-brown); border-radius: 2px; background-color: var(--kz-brown); color: var(--kz-cream); letter-spacing: .08em; line-height: 1.2; text-decoration: none; transition: background-color 0.35s var(--kz-ease), border-color 0.35s var(--kz-ease), color 0.35s var(--kz-ease); }

.kz-zone__button::after { content: ""; flex-shrink: 0; width: 22px; height: 1px; background-color: currentColor; transition: width 0.35s var(--kz-ease), background-color 0.35s var(--kz-ease); }

.kz-zone__button:hover, .kz-zone__button:focus-visible { border-color: var(--kz-ink); background-color: var(--kz-ink); color: var(--kz-cream); text-decoration: none; }

.kz-zone__button:hover::after, .kz-zone__button:focus-visible::after { width: 38px; background-color: var(--kz-sand); }

.kz-zone__button:focus-visible { outline: 2px solid var(--kz-brown); outline-offset: 4px; }

/* ---------- Apparition (activée par JS) ---------- */
.kz-zone--js [data-kz-zone-reveal] { opacity: 0; }

.kz-zone--js.is-visible [data-kz-zone-reveal] { animation: kzUp 0.9s var(--kz-ease) both; }

.kz-zone--js.is-visible .kz-zone__kicker { animation-delay: .1s; }

.kz-zone--js.is-visible .kz-zone__title { animation-delay: .2s; }

.kz-zone--js.is-visible .kz-zone__description { animation-delay: .3s; }

.kz-zone--js.is-visible .kz-zone__cities { animation-delay: .4s; }

.kz-zone--js.is-visible .kz-zone__note { animation-delay: .5s; }

.kz-zone--js.is-visible .kz-zone__text > div:last-child { animation-delay: .6s; }

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) { .kz-zone__container { gap: 56px; padding: 0 32px; } }

@media (max-width: 991.98px) { .kz-zone { padding: 96px 0; } .kz-zone__container { grid-template-columns: 1fr; gap: 56px; } /* Le texte passe avant la carte */ .kz-zone__visual { order: 1; } .kz-zone__text { max-width: 680px; } .kz-zone__map { height: 400px; } }

@media (max-width: 767.98px) { .kz-zone { --kz-offset: 14px; padding: 72px 0; } .kz-zone__container { gap: 48px; padding: 0 20px; } .kz-zone__map { height: 320px; } .kz-zone__note { padding: 14px 16px; } .kz-zone__button { width: 100%; padding: 16px 24px; } }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) { .kz-zone *, .kz-zone *::before, .kz-zone *::after { animation: none !important; transition: none !important; } .kz-zone--js [data-kz-zone-reveal] { opacity: 1; } }

/******************************** AVIS GOOGLE ********************************/
/******************************** AVIS GOOGLE ********************************/
/* Bloc natif du CMS : ciblé via .googleReviews-div, HTML inchangé. Le thème applique ses propres styles avec !important (fond sable de la carte, bouton en pilule, coins décoratifs sur les cartes…). Les propriétés concernées sont donc toutes passées en !important ici pour reprendre la main. */
/* ---------- Section ---------- */
.googleReviews-div { padding: 110px 0 !important; margin-bottom: 0 !important; background-color: var(--kz-cream) !important; color: var(--kz-brown); }

/* ---------- Carte de synthèse (note globale) ---------- */
.googleReviews-div > .container { max-width: 1080px; margin-top: 0 !important; margin-bottom: 56px !important; }

/* Sélecteurs volontairement très précis (html body … .card.card) : le thème colore ce bandeau avec une règle plus forte que la précédente. */
html body .googleReviews-div > .container > .card.card { position: relative; overflow: hidden; padding: 8px 24px !important; border: 0 !important; border-radius: 2px !important; background: var(--kz-brown) !important; background-color: var(--kz-brown) !important; background-image: none !important; color: var(--kz-cream) !important; box-shadow: 0 24px 48px -28px rgba(32, 22, 13, 0.55) !important; }

/* Les conteneurs internes ne doivent pas repeindre le bandeau */
html body .googleReviews-div > .container > .card.card div { background: transparent !important; color: inherit; }

/* Fil sable en haut de la carte (remplace les décors du thème) */
html body .googleReviews-div > .container > .card.card::before { content: "" !important; position: absolute !important; top: 0 !important; right: auto !important; bottom: auto !important; left: 32px !important; display: block !important; width: 56px !important; height: 2px !important; border: 0 !important; background: var(--kz-sand) !important; }

html body .googleReviews-div > .container > .card.card::after { display: none !important; }

/* Logo rond, sur pastille crème. Le HTML ne pouvant pas changer, le nouveau logo est affiché en image de fond et l'image d'origine est repoussée hors du cadre (object-position). */
html body .googleReviews-div .avatar-google-place { padding: 8px !important; border: 2px solid var(--kz-sand) !important; border-radius: 50% !important; background-color: var(--kz-cream) !important; background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FgTkMHwcIi4R8L27mtCOk7AMDM6t2%2Fimages%2F2_hxbo.webp") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; background-origin: content-box !important; object-position: -9999px 0 !important; box-shadow: none !important; }

html body .googleReviews-div > .container h3 { margin: 0 0 6px !important; color: var(--kz-cream) !important; }

html body .googleReviews-div #place-rating { color: var(--kz-cream-soft) !important; }

html body .googleReviews-div #place-rating .star { margin-left: 2px; color: var(--kz-sand) !important; }

/* Bouton "Voir la fiche" */
.googleReviews-div #maps-url { display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 28px !important; border: 1px solid var(--kz-sand) !important; border-radius: 2px !important; background: var(--kz-sand) !important; color: var(--kz-brown) !important; box-shadow: none !important; letter-spacing: .04em; text-decoration: none !important; transform: none !important; transition: background-color 0.35s var(--kz-ease), border-color 0.35s var(--kz-ease); }

.googleReviews-div #maps-url i { margin: 0 !important; color: inherit !important; }

.googleReviews-div #maps-url:hover, .googleReviews-div #maps-url:focus-visible { border-color: var(--kz-cream) !important; background: var(--kz-cream) !important; color: var(--kz-brown) !important; }

.googleReviews-div #maps-url:focus-visible { outline: 2px solid var(--kz-sand); outline-offset: 4px; }

/* ---------- Carrousel ---------- */
.googleReviews-div #google-reviews-widget { max-width: 1180px; padding: 0 24px; }

/* Cartes de même hauteur : la rangée, chaque item et chaque carte s'étirent */
.googleReviews-div .owl-carousel .owl-stage { display: flex !important; align-items: stretch; }

.googleReviews-div .owl-carousel .owl-item { display: flex !important; float: none; height: auto; }

.googleReviews-div .owl-carousel .owl-item > .card { align-self: stretch; height: auto; }

/* ---------- Cartes d'avis ---------- */
.googleReviews-div #google-reviews-widget .card { position: relative; display: flex; flex-direction: column; flex: 1; margin: 0 10px 24px !important; padding: 20px 6px 8px !important; border: 1px solid rgba(65, 46, 28, 0.14) !important; border-radius: 2px !important; background: rgba(255, 255, 255, 0.7) !important; box-shadow: none !important; color: var(--kz-brown) !important; }

/* Fil bronze en haut de chaque carte (remplace le décor du thème) */
.googleReviews-div #google-reviews-widget .card::before { content: "" !important; position: absolute !important; top: -1px !important; right: auto !important; bottom: auto !important; left: 22px !important; display: block !important; width: 40px !important; height: 2px !important; border: 0 !important; background: var(--kz-gold) !important; }

/* Coin décoratif du thème en haut à droite : supprimé */
.googleReviews-div #google-reviews-widget .card::after { display: none !important; }

/* En-tête de carte : logo + nom + date, alignés à gauche */
.googleReviews-div #google-reviews-widget .card > .d-flex { justify-content: flex-start !important; flex-wrap: nowrap !important; gap: 4px; margin: 0 0 4px !important; padding: 0 16px; }

/* Logo Google : 32px, sans pastille ni déformation */
.googleReviews-div .owl-carousel .owl-item img.avatar-google-reviews { flex: 0 0 auto; width: 32px !important; height: 32px !important; max-width: none; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; object-fit: contain; }

.googleReviews-div #google-reviews-widget .card .mx-2 { color: var(--kz-brown) !important; line-height: 1.35; }

.googleReviews-div .text-muted { color: rgba(65, 46, 28, 0.72) !important; }

/* Corps : étoiles + texte */
.googleReviews-div #google-reviews-widget .card-body { flex: 1 1 auto; padding: 8px 16px 16px !important; }

.googleReviews-div #google-reviews-widget .star { margin-right: 2px; color: var(--kz-gold) !important; }

/* Texte des avis en brun plein : le brun clair du thème manquait de contraste */
.googleReviews-div #google-reviews-widget .card-text { margin: 10px 0 0 !important; color: var(--kz-brown) !important; line-height: 1.65; white-space: pre-line; /* respecte les retours à la ligne des avis */ }

/* Avis sans texte : pas d'espace vide */
.googleReviews-div #google-reviews-widget .card-text:empty { display: none; }

/* ---------- Navigation du carrousel ---------- */
.googleReviews-div .owl-nav:not(.disabled) { display: flex; justify-content: center; gap: 12px; margin-top: 8px; }

.googleReviews-div .owl-nav button.owl-prev, .googleReviews-div .owl-nav button.owl-next { display: flex !important; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 !important; border: 1px solid var(--kz-brown) !important; border-radius: 50% !important; background: transparent !important; color: var(--kz-brown) !important; box-shadow: none !important; line-height: 1; transition: background-color 0.3s var(--kz-ease), color 0.3s var(--kz-ease); }

.googleReviews-div .owl-nav button.owl-prev:hover, .googleReviews-div .owl-nav button.owl-next:hover { background: var(--kz-brown) !important; color: var(--kz-cream) !important; }

.googleReviews-div .owl-dots .owl-dot span { background-color: rgba(65, 46, 28, 0.25) !important; }

.googleReviews-div .owl-dots .owl-dot.active span, .googleReviews-div .owl-dots .owl-dot:hover span { background-color: var(--kz-brown) !important; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) { .googleReviews-div { padding: 88px 0 !important; } .googleReviews-div > .container { margin-bottom: 40px !important; } }

@media (max-width: 767.98px) { .googleReviews-div { padding: 72px 0 !important; } html body .googleReviews-div > .container > .card.card { padding: 8px 16px !important; } html body .googleReviews-div > .container > .card.card::before { left: 50% !important; transform: translateX(-50%); } .googleReviews-div #google-reviews-widget { padding: 0 12px; } }

@media (prefers-reduced-motion: reduce) { .googleReviews-div #maps-url, .googleReviews-div .owl-nav button { transition: none; } }

/******************************** ACTIVITÉS (SEO) ********************************/
/* ---------- Panneau de chaque activité ---------- */
:is(.first-activity-div, .second-activity-div, .third-activity-div) { --kz-offset: 20px; padding: 56px 40px !important; border: 1px solid rgba(65, 46, 28, 0.12); border-radius: 0 !important; background-color: var(--kz-cream) !important; box-shadow: none !important; color: var(--kz-brown) !important; }

/* Motif de fond plus discret */
:is(.first-activity-div, .second-activity-div, .third-activity-div) .background-image-div-opacity { opacity: .08 !important; }

/* ---------- Titre ---------- */
:is(.first-activity-title, .second-activity-title, .third-activity-title) { margin-bottom: 0 !important; color: var(--kz-brown) !important; line-height: 1.15 !important; }

:is(.first-activity-title, .second-activity-title, .third-activity-title) h2 { margin: 0; color: var(--kz-brown); line-height: 1.15; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }

/* Le fil bronze sous le titre */
:is(.first-activity-title, .second-activity-title, .third-activity-title)::after { content: ""; display: block; width: 56px; height: 2px; margin-top: 26px; background-color: var(--kz-gold); }

/* ---------- Texte ---------- */
:is(.first-activity-div, .second-activity-div, .third-activity-div) .lead { margin: 26px 0 0 !important; color: var(--kz-brown); line-height: 1.75; }

:is(.first-activity-div, .second-activity-div, .third-activity-div) .lead p { margin: 0; color: inherit; }

:is(.first-activity-div, .second-activity-div, .third-activity-div) .lead p + p { margin-top: 1em; }

/* ---------- Photo + cadre décalé (comme le bloc présentation) ---------- */
:is(.first-activity-div, .second-activity-div, .third-activity-div) .row > div:has(> .card-cover) { position: relative; margin-bottom: var(--kz-offset) !important; }

/* Cadre brun décalé en bas à droite, derrière la photo */
:is(.first-activity-div, .second-activity-div, .third-activity-div) .row > div:has(> .card-cover)::before { content: ""; position: absolute; top: var(--kz-offset); bottom: calc(var(--kz-offset) * -1); left: calc(var(--bs-gutter-x) * .5 + var(--kz-offset)); right: calc(var(--bs-gutter-x) * .5 - var(--kz-offset)); z-index: 0; border: 2px solid var(--kz-brown); pointer-events: none; }

/* Activité du milieu (photo à gauche) : cadre décalé en bas à gauche, en miroir */
.second-activity-div .row > div:has(> .card-cover)::before { left: calc(var(--bs-gutter-x) * .5 - var(--kz-offset)); right: calc(var(--bs-gutter-x) * .5 + var(--kz-offset)); }

:is(.first-activity-div, .second-activity-div, .third-activity-div) .card-cover { position: relative; z-index: 1; min-height: 380px; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }

/* Voile très léger : la photo reste naturelle */
:is(.first-activity-div, .second-activity-div, .third-activity-div) .black-screen { background: rgba(32, 22, 13, 0.12) !important; }

/* ---------- Titre-lien (h3) centré verticalement dans la photo ---------- Aucun style ajouté au titre : on centre seulement son conteneur et on retire les marges Bootstrap (py-5 my-5) qui le décalaient. */
:is(.first-activity-div, .second-activity-div, .third-activity-div) .card-cover > .d-flex { flex: 1 1 auto; /* occupe toute la hauteur de la photo */ justify-content: center !important; }

:is(.first-activity-div, .second-activity-div, .third-activity-div) .card-cover h3 { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) { :is(.first-activity-div, .second-activity-div, .third-activity-div) { padding: 44px 28px !important; } /* La photo passe sous le texte, centrée */ :is(.first-activity-div, .second-activity-div, .third-activity-div) .row > div:has(> .card-cover) { margin-left: auto; margin-right: auto; } :is(.first-activity-div, .second-activity-div, .third-activity-div) .card-cover { min-height: 320px; } }

@media (max-width: 767.98px) { :is(.first-activity-div, .second-activity-div, .third-activity-div) { --kz-offset: 12px; margin-left: 16px !important; margin-right: 16px !important; padding: 36px 16px !important; } :is(.first-activity-div, .second-activity-div, .third-activity-div) .card-cover { min-height: 260px; } }

/**************************************************** PAGE SECONDAIRES ****************************************************/
/******************************** HERO DES PAGES ********************************/
/* ---------- Hauteur du hero : 90 % de l'écran ---------- Le thème impose sa propre hauteur : on la remplace. L'image suit cette hauteur et reste recadrée proprement. */
#fullHeight.carousel-homepage { height: 90vh !important; height: 90svh !important; /* mobile : tient compte de la barre d'adresse */ min-height: 0 !important; overflow: hidden; }

#fullHeight .carousel-inner-homepage, #fullHeight .carousel-item-homepage { height: 100% !important; min-height: 0 !important; }

#fullHeight .carousel-item-homepage img { height: 100% !important; min-height: 0 !important; object-fit: cover; object-position: center; }

/* ---------- Réglages existants ---------- */
.spacer { display: none; }

.titleText.text-white.text-center.fs-2.mb-4.mt-lg-5.titles { letter-spacing: 0px; }

.carousel-item-homepage img, .first-carousel-img { transform: none !important; transition: none !important; filter: none !important; opacity: 1 !important; }

/* ---------- Voile brun sur chaque image du carrousel ---------- */
.carousel-homepage .carousel-item-homepage::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; /* Voile uniforme, renforcé en bas : contraste AA pour le titre blanc */ background: linear-gradient(0deg, rgba(32, 22, 13, 0.65) 0%, rgba(32, 22, 13, 0) 40%), rgba(32, 22, 13, 0.6); pointer-events: none; }

/* Le titre et l'indicateur de scroll restent au-dessus du voile */
.carousel-homepage .bloc-slider-homepage, .carousel-homepage .lottie-scroll { z-index: 2; }

/* ---------- Titre ---------- */
.carousel-homepage .titleText h1 { margin: 0; color: var(--kz-cream); text-wrap: balance; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25); }

/* Soulignement sable sous le titre, qui se trace au chargement */
.carousel-homepage .titleText::after { content: ""; display: block; width: 64px; height: 2px; margin: 24px auto 0; background-color: var(--kz-sand); transform-origin: center; animation: kzScaleX 1s var(--kz-ease) 0.3s both; }

/* ---------- Responsive ---------- */
@media (max-width: 767.98px) { .carousel-homepage .titleText::after { width: 48px; margin-top: 18px; } }

@media (prefers-reduced-motion: reduce) { .carousel-homepage .titleText::after { animation: none; } }

/******************************** BLOC TEXTE + PHOTOS (phototext) ********************************/
.phototext-section { --kz-offset: 22px; --kz-media-w: 440px; /* largeur de la photo verticale (tablette) */ padding: 110px 0 !important; background-color: var(--kz-cream) !important; color: var(--kz-brown) !important; }

/* Titre principal vide : on le masque pour ne pas laisser d'espace */
.phototext-main-title:has(> p:only-child:empty) { display: none; }

.phototext-main-title p:empty { display: none; }

/* ---------- Titres ---------- */
.phototext-subtitle { margin-bottom: 0 !important; }

/* Accroche (h3) */
.phototext-subtitle h3 { margin: 0 0 14px; color: var(--kz-brown); letter-spacing: .14em; }

/* Titre (h2) */
.phototext-subtitle h2 { margin: 0; color: var(--kz-brown); line-height: 1.15; text-wrap: balance; }

/* Le fil bronze sous le titre */
.phototext-subtitle::after { content: ""; display: block; width: 56px; height: 2px; margin: 26px 0 28px; background-color: var(--kz-gold); }

/* ---------- Texte : trait fin entre les paragraphes ---------- */
.phototext-description { margin-bottom: 0 !important; color: var(--kz-brown); line-height: 1.75; }

.phototext-description p { margin: 0; color: inherit; }

.phototext-description p + p { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(65, 46, 28, 0.18); }

/* ---------- Photos verticales, sans arrondi ---------- Sélecteurs renforcés : le thème du CMS applique ses propres arrondis (rounded-3 + règles plus spécifiques) qui passaient devant. */
.phototext-section .phototext-media-col .phototext-carousel, .phototext-section .phototext-media-col .phototext-carousel.rounded-3, .phototext-section .phototext-media-col .phototext-carousel-inner, .phototext-section .phototext-media-col .phototext-carousel-item, .phototext-section .phototext-media-col .phototext-carousel-image, .phototext-section .phototext-media-col img { border-radius: 0 !important; clip-path: none !important; -webkit-mask-image: none !important; mask-image: none !important; }

.phototext-carousel { position: relative; z-index: 1; background-color: var(--kz-sand); }

/* Format portrait fixe : plus de saut de hauteur entre deux photos */
.phototext-carousel-image { aspect-ratio: 4 / 5; object-fit: cover; object-position: center; }

/* ---------- Cadre décalé derrière la photo (comme le bloc présentation) ---------- */
.phototext-media-col { position: relative; margin-bottom: var(--kz-offset); }

.phototext-media-col::before { content: ""; position: absolute; top: var(--kz-offset); bottom: calc(var(--kz-offset) * -1); left: calc(var(--bs-gutter-x) * .5 + var(--kz-offset)); right: calc(var(--bs-gutter-x) * .5 - var(--kz-offset)); z-index: 0; border: 2px solid var(--kz-brown); pointer-events: none; }

/* ---------- Grand écran : texte et photo nettement espacés ---------- */
@media (min-width: 992px) { .phototext-content-row { --bs-gutter-x: 88px; } /* Colonne de texte élargie (58 %), colonne photo réduite (42 %) */ .phototext-text-col { flex: 0 0 58%; max-width: 58%; } .phototext-media-col { flex: 0 0 42%; max-width: 42%; } /* Texte à largeur de lecture confortable */ .phototext-text-col > * { max-width: 640px; } /* Photo plus étroite, calée à droite : l'espace se crée au milieu */ .phototext-carousel { width: var(--kz-media-w); max-width: 100%; margin-left: auto; } .phototext-media-col::before { left: auto; width: var(--kz-media-w); } }

/* Largeur de la photo selon la largeur disponible dans la colonne */
@media (min-width: 992px) { .phototext-section { --kz-media-w: 320px; } }

@media (min-width: 1200px) { .phototext-section { --kz-media-w: 390px; } }

@media (min-width: 1400px) { .phototext-section { --kz-media-w: 460px; } }

/* ---------- Flèches du carrousel ---------- */
.phototext-carousel .carousel-control-prev, .phototext-carousel .carousel-control-next { top: 50%; bottom: auto; width: 46px; height: 46px; margin: 0 16px; border: 1px solid rgba(254, 246, 236, 0.55); border-radius: 50%; background-color: rgba(32, 22, 13, 0.55); opacity: 1; transform: translateY(-50%); transition: background-color 0.3s var(--kz-ease), border-color 0.3s var(--kz-ease); }

.phototext-carousel .carousel-control-prev-icon, .phototext-carousel .carousel-control-next-icon { width: 18px; height: 18px; }

.phototext-carousel .carousel-control-prev:hover, .phototext-carousel .carousel-control-next:hover, .phototext-carousel .carousel-control-prev:focus-visible, .phototext-carousel .carousel-control-next:focus-visible { border-color: var(--kz-sand); background-color: var(--kz-brown); }

.phototext-carousel .carousel-control-prev:focus-visible, .phototext-carousel .carousel-control-next:focus-visible { outline: 2px solid var(--kz-sand); outline-offset: 3px; }

/* ---------- Tablette : photo centrée, largeur limitée ---------- */
@media (min-width: 768px) and (max-width: 991.98px) { .phototext-section { padding: 88px 0 !important; } .phototext-media-col { margin-top: 48px !important; } .phototext-carousel { width: var(--kz-media-w); max-width: 100%; margin: 0 auto; } .phototext-media-col::before { left: calc(50% - var(--kz-media-w) / 2 + var(--kz-offset)); right: auto; width: var(--kz-media-w); } }

/* ---------- Mobile ---------- */
@media (max-width: 767.98px) { .phototext-section { --kz-offset: 12px; padding: 72px 0 !important; } .phototext-media-col { margin-top: 40px !important; } .phototext-subtitle::after { margin: 22px 0 24px; } .phototext-carousel .carousel-control-prev, .phototext-carousel .carousel-control-next { width: 40px; height: 40px; margin: 0 10px; } }

@media (prefers-reduced-motion: reduce) { .phototext-carousel .carousel-control-prev, .phototext-carousel .carousel-control-next { transition: none; } }

/******************************** PRESTATIONS (CARTES RÉUTILISABLES) ********************************/
/* Utilise les variables et l'animation kzUp définies dans le CSS global */
.kz-presta { position: relative; padding: 0 0 110px; /* pas de marge haute : le fil part du bord de la section */ overflow: hidden; isolation: isolate; background-color: var(--kz-brown); background-image: radial-gradient(ellipse at 15% 0%, #4C3622 0%, #36261A 45%, #20160D 100%); color: var(--kz-cream); }

/* ---------- Fil ondulé dans la marge droite (comme « Mes savoir-faire ») ---------- */
.kz-presta__thread { position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }

.kz-presta__thread-glow, .kz-presta__thread-line { fill: none; stroke-linecap: round; stroke-linejoin: round; }

.kz-presta__thread-glow { stroke: var(--kz-sand); stroke-width: 5; opacity: .1; }

.kz-presta__thread-line { stroke: var(--kz-sand); stroke-width: 1.4; opacity: .6; }

.kz-presta__thread-tip { fill: var(--kz-sand); opacity: 0; transition: opacity .3s ease; }

.kz-presta__inner { position: relative; z-index: 1; width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 48px; }

/* ---------- En-tête centré ---------- */
.kz-presta__head { max-width: 760px; margin: 0 auto 64px; text-align: center; }

/* ---------- Fil au scroll + sceau 木 ---------- */
.kz-presta__mark { display: flex; flex-direction: column; align-items: center; margin-bottom: 28px; }

/* Le fil : descend du bord haut de la section jusqu'au sceau. --kz-line (0 → 1) est mis à jour par le script au scroll. */
.kz-presta__line { display: block; width: 1px; height: 110px; background: linear-gradient(180deg, rgba(238, 202, 155, 0) 0%, var(--kz-sand) 100%); transform: scaleY(var(--kz-line, 1)); transform-origin: center top; }

/* Le sceau s'allume quand le fil l'atteint */
.kz-presta__kanji { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 1px solid rgba(238, 202, 155, 0.6); color: var(--kz-sand); line-height: 1; transition: opacity 0.6s var(--kz-ease), transform 0.6s var(--kz-ease); }

.kz-presta--js .kz-presta__kanji { opacity: 0; transform: scale(0.85); }

.kz-presta--js.is-linked .kz-presta__kanji { opacity: 1; transform: none; }

.kz-presta__kicker { margin-bottom: 16px; color: var(--kz-sand); letter-spacing: .14em; }

.kz-presta__title { color: var(--kz-cream); line-height: 1.15; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }

/* Le fil sable sous le titre */
.kz-presta__title::after { content: ""; display: block; width: 56px; height: 2px; margin: 26px auto 0; background-color: var(--kz-sand); }

/* Contenu Liquid enveloppé (h2, h3, p…) */
.kz-presta__kicker > *, .kz-presta__title > *, .kz-presta__name > *, .kz-presta__text > * { margin: 0; color: inherit; }

.kz-presta__text > * + * { margin-top: 1em; }

/* ---------- Grille adaptative et centrée ---------- La dernière ligne incomplète est toujours centrée. 1 carte → 1 · 2 → 2 · 3 → 3 · 4 → 2×2 · 5 et plus → 3 par ligne */
.kz-presta__list { --kz-gap: 28px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--kz-gap); margin: 0 auto; padding: 0; list-style: none; }

.kz-presta__item { --kz-cols: 3; flex: 0 0 calc((100% - (var(--kz-cols) - 1) * var(--kz-gap)) / var(--kz-cols)); }

.kz-presta__item:first-child:nth-last-child(1) { --kz-cols: 1; max-width: 640px; }

.kz-presta__item:first-child:nth-last-child(2), .kz-presta__item:first-child:nth-last-child(2) ~ .kz-presta__item, .kz-presta__item:first-child:nth-last-child(4), .kz-presta__item:first-child:nth-last-child(4) ~ .kz-presta__item { --kz-cols: 2; }

/* En 2 colonnes, grille moins large pour des cartes équilibrées */
.kz-presta__list:has(> .kz-presta__item:first-child:nth-last-child(2)), .kz-presta__list:has(> .kz-presta__item:first-child:nth-last-child(4)) { max-width: 1040px; }

/* ---------- Carte ---------- */
.kz-presta__item { position: relative; padding: 40px 36px 38px; border: 1px solid rgba(238, 202, 155, 0.18); background-color: rgba(254, 246, 236, 0.04); }

/* Le fil sable en tête de chaque carte */
.kz-presta__item::before { content: ""; position: absolute; top: -1px; left: 36px; width: 44px; height: 2px; background-color: var(--kz-sand); }

/* Picto */
.kz-presta__icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 28px; border: 1px solid rgba(238, 202, 155, 0.45); color: var(--kz-sand); }

.kz-presta__icon svg { display: block; width: 26px; height: 26px; }

.kz-presta__name { margin-bottom: 14px; color: var(--kz-cream); line-height: 1.3; }

.kz-presta__text { color: var(--kz-cream-soft); line-height: 1.7; }

/* ---------- Apparition (activée par JS) ---------- */
.kz-presta--js [data-kz-presta-reveal] { opacity: 0; }

.kz-presta--js.is-visible [data-kz-presta-reveal] { animation: kzUp 0.9s var(--kz-ease) both; }

.kz-presta--js.is-visible .kz-presta__title { animation-delay: .1s; }

/* Les cartes apparaissent l'une après l'autre, quel que soit leur nombre */
.kz-presta--js.is-visible .kz-presta__item { animation-delay: calc(.25s + var(--kz-i, 0) * .1s); }

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) { .kz-presta__inner { padding: 0 32px; } .kz-presta__list { --kz-gap: 24px; } .kz-presta__item { padding: 34px 28px 32px; } .kz-presta__item::before { left: 28px; } }

/* Tablette : 2 colonnes (sauf s'il n'y a qu'une carte) */
@media (max-width: 991.98px) { .kz-presta { padding: 0 0 88px; } .kz-presta__line { height: 88px; } .kz-presta__head { margin-bottom: 48px; } .kz-presta__item { --kz-cols: 2; } .kz-presta__item:first-child:nth-last-child(1) { --kz-cols: 1; } }

/* Mobile : 1 colonne */
@media (max-width: 767.98px) { .kz-presta { padding: 0 0 72px; } .kz-presta__line { height: 64px; } .kz-presta__mark { margin-bottom: 22px; } .kz-presta__kanji { width: 40px; height: 40px; } .kz-presta__inner { padding: 0 20px; } .kz-presta__head { margin-bottom: 40px; } .kz-presta__list { --kz-gap: 20px; } .kz-presta__item, .kz-presta__item:first-child:nth-last-child(2), .kz-presta__item:first-child:nth-last-child(2) ~ .kz-presta__item, .kz-presta__item:first-child:nth-last-child(4), .kz-presta__item:first-child:nth-last-child(4) ~ .kz-presta__item { --kz-cols: 1; } .kz-presta__item { padding: 30px 24px 28px; } .kz-presta__thread-line { opacity: .45; } .kz-presta__item::before { left: 24px; } .kz-presta__icon { width: 48px; height: 48px; margin-bottom: 22px; } }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) { .kz-presta *, .kz-presta *::before, .kz-presta *::after { animation: none !important; transition: none !important; } .kz-presta--js [data-kz-presta-reveal] { opacity: 1; } .kz-presta--js .kz-presta__kanji { opacity: 1; transform: none; } }

/************************************************************* SPLIT BANNER *************************************************************/
.split-banner { min-height: 42vh; padding: 110px 5% 60px; position: relative; isolation: isolate; box-shadow: inset 0 120px 60px -20px rgba(0, 0, 0, 0.25); }

.split-banner::before { content: ""; position: absolute; inset: 0; height: 50%; pointer-events: none; z-index: -1; background-image: repeating-linear-gradient(to right, rgba(255, 255, 255, 0.09) 0, rgba(255, 255, 255, 0.09) 1px, transparent 1px, transparent 45px), repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.09) 0, rgba(255, 255, 255, 0.09) 1px, transparent 1px, transparent 45px); -webkit-mask-image: linear-gradient(to bottom, black 0%, rgba(0, 0, 0, 0.7) 55%, transparent 100%); mask-image: linear-gradient(to bottom, black 0%, rgba(0, 0, 0, 0.7) 55%, transparent 100%); }

/* Colonne de l'image : un peu moins de la moitié du bloc */
.split-banner-container > div:first-child { flex: 0 0 44%; max-width: 44%; }

/* Image à gauche : remplit sa colonne en gardant ses proportions */
.split-banner-logo { display: block; width: 100%; height: auto; max-height: 420px; object-fit: contain; }

.split-banner-line { width: 4px; height: 120px; flex-shrink: 0; border-radius: 10px; }

.split-banner-content { flex: 1 1 auto; max-width: 720px; }

.split-banner-content h1 { margin: 0 0 15px; line-height: 1.1; }

.split-banner-content p { margin: 0; max-width: 650px; }

/* Écart entre deux paragraphes */
.split-banner-content p + p { margin-top: 16px; }

@media (max-width: 900px) { .split-banner { min-height: auto; padding: 120px 20px 50px; } .split-banner-container { flex-direction: column; text-align: center; gap: 25px; } .split-banner-line { width: 70px; height: 4px; } /* Mobile : l'image passe au-dessus, centrée, largeur limitée */ .split-banner-container > div:first-child { flex: 0 0 auto; width: 100%; max-width: 320px; } .split-banner-logo { max-height: 260px; } .split-banner-content p { margin: auto; } /* Conserve l'écart entre paragraphes sur mobile */ .split-banner-content p + p { margin-top: 16px; } }

/* -------------------------------------------------------------------------- GALERIE D'IMAGES -------------------------------------------------------------------------- */
.custom-gallery-block { width: 100%; padding: 100px 0 80px; background-color: var(--kz-cream); color: var(--kz-brown); }

.custom-gallery-block *, .custom-gallery-lightbox * { box-sizing: border-box; }

/* ---------- Titre ---------- */
.custom-gallery-heading { max-width: 760px; margin: 0 auto 36px; padding: 0 20px; text-align: center; color: var(--kz-brown); line-height: 1.15; text-wrap: balance; }

.custom-gallery-heading > * { margin: 0; color: inherit; }

/* Le fil bronze sous le titre */
.custom-gallery-heading::after { content: ""; display: block; width: 56px; height: 2px; margin: 24px auto 0; background-color: var(--kz-gold); }

/* ---------- Grille : la dernière ligne incomplète est centrée ---------- */
.custom-gallery-item { height: 400px !important; margin: 12px 0; }

.custom-gallery-card { position: relative; width: 100%; height: 100%; overflow: hidden; background-color: var(--kz-sand); }

.custom-gallery-link { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; text-decoration: none; cursor: zoom-in; }

.custom-gallery-image { display: block; width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform 0.8s var(--kz-ease); }

/* Voile brun au survol */
.custom-gallery-hover { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; background-color: rgba(32, 22, 13, 0.55); opacity: 0; transition: opacity 0.4s var(--kz-ease); }

/* Rond sable avec un "+" */
.custom-gallery-hover-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border: 1px solid var(--kz-sand); border-radius: 50%; color: var(--kz-sand); transform: scale(0.85); transition: transform 0.4s var(--kz-ease); }

.custom-gallery-hover-icon svg { width: 22px; height: 22px; }

.custom-gallery-link:hover .custom-gallery-image, .custom-gallery-link:focus-visible .custom-gallery-image { transform: scale(1.04); }

.custom-gallery-link:hover .custom-gallery-hover, .custom-gallery-link:focus-visible .custom-gallery-hover { opacity: 1; }

.custom-gallery-link:hover .custom-gallery-hover-icon, .custom-gallery-link:focus-visible .custom-gallery-hover-icon { transform: scale(1); }

.custom-gallery-link:focus-visible { outline: 2px solid var(--kz-sand); outline-offset: -6px; }

/* Icônes SVG communes (galerie + lightbox) */
.custom-gallery-block svg, .custom-gallery-lightbox svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* -------------------------------------------------------------------------- LIGHTBOX -------------------------------------------------------------------------- */
.custom-gallery-lightbox { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 30px 80px; background-color: rgba(32, 22, 13, 0.95); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility .3s ease; -webkit-user-select: none; user-select: none; }

.custom-gallery-lightbox.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

.custom-gallery-lightbox__visual { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }

.custom-gallery-lightbox__image { display: block; width: 85%; max-width: 1100px; height: auto; max-height: 88vh; margin: 0; object-fit: contain; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); }

/* -------------------------------------------------------------------------- BOUTONS DE LA LIGHTBOX -------------------------------------------------------------------------- */
.custom-gallery-lightbox__button { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 0; border: none; background: transparent; color: var(--kz-cream); cursor: pointer; transition: color .3s ease, transform .3s ease; }

.custom-gallery-lightbox__button:hover { color: var(--kz-sand); }

.custom-gallery-lightbox__button:focus-visible { outline: 2px solid var(--kz-sand); outline-offset: 5px; }

.custom-gallery-lightbox__previous, .custom-gallery-lightbox__next { top: 50%; width: 55px; height: 80px; transform: translateY(-50%); }

.custom-gallery-lightbox__previous svg, .custom-gallery-lightbox__next svg { width: 36px; height: 36px; }

.custom-gallery-lightbox__previous { left: 20px; }

.custom-gallery-lightbox__next { right: 20px; }

.custom-gallery-lightbox__previous:hover { transform: translate(-4px, -50%); }

.custom-gallery-lightbox__next:hover { transform: translate(4px, -50%); }

.custom-gallery-lightbox__close { top: 15px; right: 15px; width: 55px; height: 55px; }

.custom-gallery-lightbox__close svg { width: 30px; height: 30px; }

.custom-gallery-lightbox__counter { position: absolute; bottom: 18px; left: 50%; color: var(--kz-cream-soft); letter-spacing: .12em; transform: translateX(-50%); }

body.custom-gallery-lightbox-open { overflow: hidden; }

/* ---------- Sceau 作 (saku : « l'œuvre, la réalisation ») ---------- Centré au-dessus du titre de la galerie, entre deux fils bronze. À ajouter à la suite du CSS de la galerie. */
.custom-gallery-mark { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 24px; }

.custom-gallery-mark::before, .custom-gallery-mark::after { content: ""; width: 64px; height: 1px; }

.custom-gallery-mark::before { background: linear-gradient(90deg, rgba(176, 124, 66, 0) 0%, var(--kz-gold) 100%); transform-origin: right center; }

.custom-gallery-mark::after { background: linear-gradient(90deg, var(--kz-gold) 0%, rgba(176, 124, 66, 0) 100%); transform-origin: left center; }

.custom-gallery-mark-kanji { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 1px solid rgba(65, 46, 28, 0.4); color: var(--kz-brown); line-height: 1; }

/* Apparition (activée par le script du bloc) */
.custom-gallery-mark.is-js .custom-gallery-mark-kanji { opacity: 0; }

.custom-gallery-mark.is-js::before, .custom-gallery-mark.is-js::after { transform: scaleX(0); }

.custom-gallery-mark.is-visible .custom-gallery-mark-kanji { animation: kzFade 0.8s var(--kz-ease) both; }

.custom-gallery-mark.is-visible::before, .custom-gallery-mark.is-visible::after { animation: kzScaleX 1s var(--kz-ease) 0.35s both; }

@media (max-width: 767.98px) { .custom-gallery-mark { margin-bottom: 20px; } .custom-gallery-mark::before, .custom-gallery-mark::after { width: 40px; } .custom-gallery-mark-kanji { width: 40px; height: 40px; } }

@media (prefers-reduced-motion: reduce) { .custom-gallery-mark.is-js .custom-gallery-mark-kanji { opacity: 1; } .custom-gallery-mark.is-js::before, .custom-gallery-mark.is-js::after { transform: none; } .custom-gallery-mark.is-visible .custom-gallery-mark-kanji, .custom-gallery-mark.is-visible::before, .custom-gallery-mark.is-visible::after { animation: none; } }

/* -------------------------------------------------------------------------- RESPONSIVE -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) { .custom-gallery-block { padding: 80px 0 64px; } .custom-gallery-item { height: 350px !important; } }

@media screen and (max-width: 767px) { .custom-gallery-block { padding: 64px 0 52px; } .custom-gallery-heading { margin-bottom: 28px; } .custom-gallery-item { height: 300px !important; margin: 8px 0; } .custom-gallery-lightbox { padding: 60px 45px; } .custom-gallery-lightbox__image { width: 100%; max-width: 90vw; max-height: 80vh; } .custom-gallery-lightbox__previous, .custom-gallery-lightbox__next { width: 40px; height: 60px; } .custom-gallery-lightbox__previous svg, .custom-gallery-lightbox__next svg { width: 28px; height: 28px; } .custom-gallery-lightbox__previous { left: 2px; } .custom-gallery-lightbox__next { right: 2px; } .custom-gallery-lightbox__close { top: 5px; right: 5px; width: 45px; height: 45px; } .custom-gallery-lightbox__close svg { width: 26px; height: 26px; } }

@media screen and (max-width: 480px) { .custom-gallery-item { height: 260px !important; } }

@media (prefers-reduced-motion: reduce) { .custom-gallery-block *, .custom-gallery-lightbox, .custom-gallery-lightbox * { transition: none !important; } }

/**************************************************** 4. MOUVEMENT RÉDUIT ****************************************************/
@media (prefers-reduced-motion: reduce) { .kz-hero *, .kz-hero *::before, .kz-hero *::after, .kz-about *, .kz-about *::before, .kz-about *::after, .kz-svc *, .kz-svc *::before, .kz-svc *::after, .kz-steps *, .kz-steps *::before, .kz-steps *::after, .kz-ba *, .kz-ba *::before, .kz-ba *::after, .kz-partners *, .kz-partners *::before, .kz-partners *::after, .cta_banner .ctaLinks-button, .cta_banner .ctaLinks-button::after { animation: none !important; transition: none !important; } /* Tout le contenu est affiché directement */ .kz-hero--js [data-kz-anim], .kz-hero--js .kz-hero__mark, .kz-hero--js .kz-hero__scroll-wrap, .kz-about--js [data-kz-reveal], .kz-about--js .kz-about__box, .kz-svc--js [data-kz-svc-reveal], .kz-steps--js [data-kz-steps-reveal], .kz-ba--js [data-kz-ba-reveal], .kz-partners--js [data-kz-partners-reveal] { opacity: 1; } .kz-hero--js .kz-hero__img, .kz-hero--js .kz-hero__content::before, .kz-hero__scroll-line::after, .kz-about--js .kz-about__photo img, .kz-about--js .kz-about__edge { transform: none; } .kz-hero--js .kz-hero__thread path { stroke-dashoffset: 0; } .kz-about--js .kz-about__photo { clip-path: none; } }

/*# sourceMappingURL=custom.css.map */