/* Styles autonomes : aucune compilation ni bibliothèque CSS. */
@font-face{font-family:Gabarito;font-style:normal;font-weight:400 700;font-display:swap;src:url('../assets/fonts/gabarito-latin.woff2') format('woff2')}
@font-face{font-family:Gabarito;font-style:normal;font-weight:400 700;font-display:swap;src:url('../assets/fonts/gabarito-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
*,*::before,*::after{box-sizing:border-box;border:0 solid}
html{line-height:1.5;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure{margin:0}
h1,h2,h3,h4{font-size:inherit;font-weight:inherit}
a{color:inherit;text-decoration:inherit}
button,input{font:inherit}
button{cursor:pointer}
ul,ol{padding:0;list-style:none}
img,svg{display:block;vertical-align:middle;max-width:100%}
[hidden]{display:none!important}

/* ========== STRINGTUNE CUSTOM PROPERTIES ========== */
@property --progress {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

:root {
  --color-text: #fff0b3;
  --color-bg: #89b7bd;
  --color-bg-dark: #2e2111;
  --color-bg-darker: #1d140a;
  --color-accent-bg: #8a6253;
  --color-accent: #d2a58f;
  --grid-angle: -15deg;

  
  --vh: 1vh;
  --vw: 1vw;
  --easing-function: cubic-bezier(0.86, 0, 0.31, 1);
  --easing-function-2: cubic-bezier(0.35, 0.35, 0, 1);
  --easing-timing: 1.5s;
}

/* ========== NOISE BACKGROUND ANIMATION ========== */
@keyframes bg-animation {
  0% { transform: translate(0,0) }
  10% { transform: translate(-5%,-5%) }
  20% { transform: translate(-10%,5%) }
  30% { transform: translate(5%,-10%) }
  40% { transform: translate(-5%,15%) }
  50% { transform: translate(-10%,5%) }
  60% { transform: translate(15%,0) }
  70% { transform: translate(0,10%) }
  80% { transform: translate(-15%,0) }
  90% { transform: translate(10%,5%) }
  100% { transform: translate(5%,0) }
}

html {
  scroll-behavior: auto;
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: "Gabarito", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Hide scrollbars */
body::-webkit-scrollbar,
html::-webkit-scrollbar {
  display: none;
}

body,
html {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ========== PRELOADER - OPTIMIZED ========== */
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  pointer-events: none;
  will-change: opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.preloader-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
  backface-visibility: hidden;
}

.preloader-circle {
  transform-origin: center center;
  will-change: r;
}

/* ========== MAIN WRAPPER ========== */
.main-wrapper {
  position: relative;
  width: 100%;
}

/* ========== HORIZONTAL SCROLL ========== */
.Horizontal {
  position: relative;
  width: 100%;
  overflow: hidden; /* Changed from visible to hidden for better mobile control */
  touch-action: pan-y; /* Allow vertical scrolling on touch devices */
}

.Horizontal__content {
  display: flex;
  flex-wrap: nowrap;
  will-change: transform;
}

.horizontal-section {
  flex: 0 0 100vw;
  width: 100vw;
  min-width: 100vw; /* Ensure minimum width on mobile */
  max-width: 100vw; /* Prevent overflow on mobile */
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* ========== NAVIGATION ========== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: transform 0.5s ease;
  will-change: transform;
}

.nav--hidden {
  transform: translateY(-100%);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 3rem;
  padding: 1rem 2rem;
}

.nav-logo {
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 700;
  color: #fff0b3;
}

.nav-links {
  display: none;
  gap: 2rem;
}

@media (min-width: 768px) {
  .nav-links {
    display: flex;
  }
}

.nav-link {
  position: relative;
  overflow: hidden;
  padding: 10px 18px;
  text-decoration: none;
}

.nav-link_label {
  position: relative;
  z-index: 2;
  font-size: clamp(16px, 1.6vw, 22px);
  font-weight: 700;
  color: #fff0b3;
  transition: color 0.3s;
}

.nav-link::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background-color: #2e2111;
  transition: height 0.3s ease;
  z-index: 1;
}

.nav-link:hover::before {
  height: 100%;
}

.nav-link:hover .nav-link_label {
  color: #fff0b3;
}

.nav-cta-small {
  margin-left: auto;
  font-size: clamp(14px, 1.4vw, 18px);
  font-weight: 600;
  color: #fff0b3;
  border: 2px solid #fff0b3;
  border-radius: 35px;
  padding: 8px 20px;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
}

/* ========== HERO SECTION ========== */
.hero-section {
  background: transparent;
  overflow: hidden;
}

/* Semi-transparent overlay on hero */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(46,33,17,.28), rgba(46,33,17,.48) 50%, rgba(46,33,17,.28));
  z-index: 5;
  pointer-events: none;
}

/* Animated Grid Background */
.hero-grid {
  position: absolute;
  width: 250vw;
  height: 250vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(var(--grid-angle));
  transform-origin: center center;
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  grid-template-columns: 100%;
  gap: 1rem;
  z-index: 1;
}

.grid-row {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(7, 1fr);
  will-change: transform, filter;
}

.grid-item {
  position: relative;
  aspect-ratio: 4/3;
}

.grid-item-inner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 10px;
}

.grid-item-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: 50% 50%;
  position: absolute;
  top: 0;
  left: 0;
}

/* Hero Text */
.hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
}

.hero-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.hero-text-small {
  font-size: clamp(3.5rem, 7vw, 7rem);
  font-weight: 600;
  color: #fff0b3;
  line-height: 1;
}

.hero-text-large {
  font-size: clamp(7rem, 17vw, 17rem);
  font-weight: 700;
  color: #fff0b3;
  line-height: 0.9;
}

/* Hero text avec StringSplit */


/* ========== CARD SECTIONS ========== */
.card-section {
  padding: 4rem;
}

/* Mobile: Reduce padding to prevent width overflow */
@media (max-width: 767px) {
  .card-section {
    padding: 2rem 1rem;
  }

  .card-title {
    padding: 0.5rem 1rem;
  }

  .card-description {
    padding: 1rem;
  }
}

.card-section-1,
.card-section-2,
.card-section-3,
.card-section-4 {
  background: transparent;
}

.card-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  perspective: 80rem;
}

.service-card {
  min-width: 300px;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
}

@media (max-width: 767px) {
  .service-card {
    min-width: 0;
    width: 100%;
  }
}

@media (min-width: 768px) {
  .service-card {
    min-width: 600px;
  }
}

.card-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  will-change: transform, opacity;
  text-align: center;
}

.card-title {
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 700;
  padding: 0.5rem 1.5rem;
  display: inline-block;
  width: fit-content;
  margin: 0 auto;
  transform: translate(calc(var(--magnetic-x, 0) * 0.5%), calc(var(--magnetic-y, 0) * 0.5%))
             rotateX(calc(var(--magnetic-y, 0) * -0.5deg))
             rotateY(calc(var(--magnetic-x, 0) * 0.5deg));
  transition: transform 0.6s cubic-bezier(0.86, 0, 0.31, 1);
  will-change: transform;
}

.card-title-dark,
.card-title-accent {
  background-color: #2e2111;
  color: #fff0b3;
}

.card-description {
  font-size: clamp(1rem, 1.5vw, 1.5rem);
  font-weight: 500;
  padding: 1rem 2rem;
  line-height: 1.8;
  max-width: 900px;
  margin: 0 auto;
  transform: translate(calc(var(--magnetic-x, 0) * 0.5%), calc(var(--magnetic-y, 0) * 0.5%))
             rotateX(calc(var(--magnetic-y, 0) * -0.5deg))
             rotateY(calc(var(--magnetic-x, 0) * 0.5deg));
  transition: transform 0.6s cubic-bezier(0.86, 0, 0.31, 1);
  will-change: transform;
}

.card-description-dark,
.card-description-accent {
  background-color: #2e2111;
  color: #fff0b3;
}

/* ========== PARTNER SECTION ========== */
.partner-section {
  min-height: 100vh;
  background-color: #2e2111;
  padding: 6rem 2rem;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* ========== REVIEWS SECTION ========== */
.reviews-section {
  min-height: 100vh;
  background-color: var(--color-bg-dark);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.reviews-container {
  width: 100%;
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--color-bg-dark);
}

.reviews-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem;
  gap: 3rem;
  min-height: 100vh;
}

.reviews-right {
  background-color: var(--color-bg);
  border-top: 1px solid var(--color-bg-dark);
}

.reviews-title {
  font-size: clamp(2.5rem, 5vw, 5rem);
  font-weight: 700;
  color: var(--color-accent);
  text-align: left;
  margin: 0;
}

.review-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-height: 400px;
}

.review-author {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 600;
  color: var(--color-accent);
  margin: 0;
}

.review-text {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.8;
  color: var(--color-accent);
  margin: 0;
  max-height: 300px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 10;
  -webkit-box-orient: vertical;
}

.progress-bar-container {
  width: 100%;
  height: 2px;
  background-color: rgba(210, 165, 143, 0.2);
  border-radius: 1px;
  overflow: hidden;
  margin-top: auto;
}

.progress-bar {
  height: 100%;
  background-color: var(--color-accent);
  transition: width 0.05s linear;
}

@media (max-width: 1024px) {
  .reviews-container {
    grid-template-columns: 1fr;
  }

  .reviews-right {
    display: none;
  }

  .reviews-left {
    padding: 3rem 2rem;
  }

  .review-content {
    min-height: 350px;
  }
}

/* ========== PARALLAX EFFECT FOR CARD SECTIONS ========== */
.pContent {
  /* Horizontal parallax applied via GSAP */
  will-change: transform;
}

/* ========== LOCATION SECTION ========== */
.location-section {
  min-height: 60vh;
  background-color: #2e2111;
  padding: 6rem 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.location-wrapper {
  max-width: 800px;
  width: 100%;
  text-align: center;
}

.location-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  color: #fff0b3;
  margin-bottom: 3rem;
}

.location-card {
  background-color: transparent;
  padding: 3rem 2rem;
}

.location-address {
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  font-weight: 600;
  color: #fff0b3;
  line-height: 1.8;
  margin: 0;
}

.location-details {
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  font-weight: 400;
  opacity: 0.9;
}

/* ========== FOOTER ========== */
.footer {
  background-color: #1d140a;
  min-height: 100vh;
  padding: 4rem 2rem 2rem;
  color: #fff0b3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to bottom, #2e2111 0%, transparent 100%);
  pointer-events: none;
}

.footer[data-progress]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 8, 4, 0.9) 0%, rgba(13, 8, 4, 0.3) 45%, transparent 100%);
  opacity: calc(1 - var(--progress, 1));
  pointer-events: none;
  transition: opacity 200ms ease-out;
}

.footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  transform: translate3d(0, calc(-12vh + 12vh * var(--progress, 1)), 0);
  will-change: transform;
  transition: transform 220ms ease-out;
}

.footer-top {
  margin-bottom: 4rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.footer-logo {
  margin: 0 auto;
  animation: logoSpin 20s linear infinite;
}

@keyframes logoSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.footer-slogan {
  font-size: clamp(1.2rem, 2vw, 2rem);
  font-weight: 500;
  opacity: 0.8;
}

.footer-cta {
  font-size: clamp(1rem, 1.5vw, 1.5rem);
  font-weight: 700;
  color: #fff0b3;
  border: 2px solid #fff0b3;
  border-radius: 40px;
  padding: 1rem 2.5rem;
  background: transparent;
  transition: all 0.3s ease;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.footer-cta:hover {
  background-color: #fff0b3;
  color: #1d140a;
}

.footer-links {
  margin-bottom: 4rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 480px) {
  .footer-links {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .footer-links {
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
  }
}

.footer-column {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer-subtitle {
  font-size: clamp(0.8rem, 1vw, 1rem);
  font-weight: 700;
  text-transform: uppercase;
  opacity: 0.45;
  letter-spacing: 1px;
}

.footer-link {
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  font-weight: 500;
  color: #fff0b3;
  text-decoration: none;
  position: relative;
  width: fit-content;
  transition: color 0.3s;
}

.footer-link::before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-accent);
  transition: width 0.3s ease;
}

.footer-link:hover::before {
  width: 100%;
}

.footer-link:hover {
  color: var(--color-accent);
}

.footer-bottom {
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 240, 179, 0.2);
}

.footer-copyright {
  text-align: center;
  font-size: clamp(0.8rem, 1vw, 1rem);
  text-transform: uppercase;
  opacity: 0.6;
  letter-spacing: 1px;
}

/* ========== RESPONSIVE GRID ========== */
@media (max-width: 767px) {
  .hero-grid {
    display: grid;
    width: 390vw;
    height: 160svh;
    gap: .65rem;
  }

  .hero-grid .grid-row { gap: .65rem; will-change: auto; }

  .hero-section {
    background: transparent;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .hero-grid {
    width: 300vw;
    height: 300vh;
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  .hero-grid {
    width: 400vw;
    height: 400vh;
  }
}

/* ========== LEGAL PAGES ========== */
.legal-page {
  min-height: 100vh;
  background-color: #f5e6d3;
  padding: 4rem 2rem 0;
  position: relative;
  overflow-x: hidden;
}

.legal-content-wrapper {
  position: relative;
  z-index: 2;
  background-color: #f5e6d3;
  padding-bottom: 4rem;
  will-change: transform;
  transition: transform 120ms ease-out;
}

.legal-page .footer {
  position: relative;
  z-index: 1;
  margin: 0 -2rem;
  width: calc(100% + 4rem);
}

.legal-header {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3rem;
  gap: 2rem;
}

@media (max-width: 768px) {
  .legal-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

.legal-header .footer-link {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  color: rgb(38, 48, 105);
  text-decoration: none;
  font-weight: 500;
  position: relative;
  transition: opacity 0.3s ease;
}

.legal-header .footer-link::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: rgb(38, 48, 105);
  transition: width 0.3s ease;
}

.legal-header .footer-link:hover::after {
  width: 100%;
}

.legal-update-date {
  font-family: "Gabarito", sans-serif;
  font-style: italic;
  font-weight: 500;
  color: rgb(38, 48, 105);
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.5;
  white-space: nowrap;
}

.legal-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 3rem 3rem;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s ease-out forwards;
  will-change: opacity, transform;
}










@keyframes fadeInUpWord {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}







@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .legal-container {
    padding: 0 1.5rem 2rem;
  }
}

.legal-container h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: rgb(38, 48, 105);
  margin-bottom: 2rem;
  line-height: 1.2;
}

.legal-container h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  color: rgb(38, 48, 105);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  line-height: 1.3;
}

.legal-container p {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  font-weight: 400;
  color: rgb(38, 48, 105);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.legal-container ul,
.legal-container ol {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  font-weight: 400;
  color: rgb(38, 48, 105);
  line-height: 1.8;
  margin-bottom: 1.5rem;
  margin-left: 1.5rem;
}

.legal-container li {
  margin-bottom: 0.75rem;
}

.legal-container strong {
  font-weight: 600;
  color: rgb(38, 48, 105);
}

.legal-container a.footer-link {
  color: rgb(38, 48, 105);
  text-decoration: underline;
  font-weight: 500;
  position: relative;
  transition: opacity 0.3s ease;
}

.legal-container a.footer-link:hover {
  opacity: 0.7;
}

/* Raccordements HTML/CSS/JS et affichage sans JavaScript. */
:root {
  /* Photos publiées par Les Petits Bergers sur leur fiche Google. */
  --hero-photo-1: url('../assets/images/hero/chiens-les-petits-bergers.webp');
  --hero-photo-2: url('../assets/images/hero/bergers-en-promenade.webp');
  --hero-photo-3: url('../assets/images/hero/chiens-en-garde.webp');
  --hero-photo-4: url('../assets/images/hero/promenade-dans-la-marne.webp');
}

.hero-text { margin: 0; font-size: inherit; font-weight: inherit; }
.hero-text > span { display: block; }
.Horizontal:not(.is-horizontal) { overflow: visible; }
.Horizontal:not(.is-horizontal) .Horizontal__content { display: block; }
html.has-mobile-vertical { scroll-snap-type: y proximity; scroll-behavior: smooth; }
html.has-mobile-vertical:has(dialog[open]) { scroll-snap-type: none; }
.Horizontal.is-mobile-vertical { height: auto; overflow: visible; touch-action: pan-y pinch-zoom; }
.is-mobile-vertical .Horizontal__content { display: block; width: 100%; overflow: visible; transform: none; will-change: auto; }
.is-mobile-vertical .horizontal-section { flex: none; width: 100%; min-width: 0; min-height: 100svh; height: auto; scroll-snap-align: start; scroll-snap-stop: always; }
.is-mobile-vertical .hero-section { height: 100svh; }
.is-mobile-vertical .card-section { background: var(--color-bg); }
.is-mobile-vertical .card-section-2,.is-mobile-vertical .card-section-4 { background: var(--color-accent-bg); }
.is-mobile-vertical .card-content { max-height: none; overflow: visible; }
.is-mobile-vertical .card-description { overflow: visible; max-height: none; }
.has-mobile-vertical #avis,.has-mobile-vertical .footer { scroll-snap-align: start; }
.service-detail-link { align-self: center; font-size: .85rem; text-decoration: underline; text-underline-offset: 4px; padding: 6px; }
.skip-link { position: fixed; top: 10px; left: 10px; transform: translateY(-200%); padding: 12px 18px; background: var(--color-bg-dark); color: var(--color-text); z-index: 9999; }
.skip-link:focus { transform: none; }
.horizontal-section { min-height: 100svh; height: auto; }
.is-horizontal .horizontal-section { height: var(--panel-height, 100svh); min-height: 0; }
.card-section-2, .card-section-4 { background: var(--color-accent-bg); }
.is-horizontal .card-section { background: transparent; }
.is-horizontal .card-content {
  max-height: calc(var(--panel-height, 100svh) - 8rem);
  overflow: hidden;
  overscroll-behavior: contain;
}
.is-horizontal .card-title, .is-horizontal .card-actions { flex-shrink: 0; }
.is-horizontal .card-description { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.is-horizontal .card-description::-webkit-scrollbar { width: 3px; }
.is-horizontal .card-description::-webkit-scrollbar-thumb { background: var(--color-text); }
.service-card { min-width: 0; }
.noise-bg {
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200vh;
  background: transparent url('../assets/images/noise.png') repeat;
  animation: bg-animation .2s infinite;
  opacity: .9;
  pointer-events: none;
  z-index: 1;
}
.footer { --progress: 1; }
[data-magnetic] {
  transform: translate(var(--magnetic-x, 0px), var(--magnetic-y, 0px));
  transition: transform .6s cubic-bezier(.35,.35,0,1);
}
a:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
button:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.card-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  padding: .2rem .3rem .4rem;
}
.description-audio, .service-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-height: 48px;
  background: var(--color-text);
  color: var(--color-bg-dark);
  border-radius: 999px;
  transition: background-color .2s ease, transform .2s ease;
}
.description-audio { width: 48px; padding: 12px; }
.description-audio svg { width: 24px; height: 24px; }
.description-audio .narration-pause-icon, .description-audio .narration-resume-icon { display: none; }
.description-audio[data-playback="playing"] .narration-listen-icon, .description-audio[data-playback="paused"] .narration-listen-icon { display: none; }
.description-audio[data-playback="playing"] .narration-pause-icon, .description-audio[data-playback="paused"] .narration-resume-icon { display: block; }
.service-cta {
  gap: .7rem;
  padding: .75rem 1.3rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  flex-shrink: 1;
  min-width: 0;
}
.service-cta svg { width: 18px; height: 18px; flex-shrink: 0; }
.service-coming-soon { display: inline-flex; align-items: center; padding: .75rem 1rem; border: 1px solid currentColor; border-radius: 999px; font-size: .95rem; line-height: 1.3; opacity: .75; }
.service-availability-notice { padding: 1rem 1.25rem; margin-bottom: 2rem; background: var(--color-text); color: var(--color-bg-dark); line-height: 1.6; }
.description-audio:hover, .service-cta:hover { background: #fff9e5; transform: translateY(-2px); }
.description-audio[aria-pressed="true"] { background: var(--color-bg-dark); color: var(--color-text); }
.description-audio[aria-pressed="true"] .sound-waves { animation: sound-pulse 1.2s ease-in-out infinite; }
.narration-word { border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-color .14s ease, color .14s ease, opacity .14s ease; }
.narration-word.is-read { opacity: .78; }
.narration-word.is-current { background: var(--color-bg); color: var(--color-bg-dark); box-shadow: 0 0 0 3px var(--color-bg); opacity: 1; }
.description-audio:disabled { opacity: .5; cursor: default; }
@keyframes sound-pulse { 50% { opacity: .35; } }
.legal-container ul { list-style: disc; }
.legal-container ol { list-style: decimal; }
.legal-container { overflow-wrap: anywhere; }
.legal-container :is(h1, h2, p, ul, ol, li, strong, dt, dd, blockquote) { color: var(--color-bg-dark); }
.legal-page, .legal-content-wrapper { background-color: var(--color-bg); }
.legal-container a.footer-link, .legal-header .footer-link, .legal-update-date { color: var(--color-bg-dark); }
.legal-header .footer-link::after { background-color: currentColor; }
.legal-details { margin: 1.5rem 0; }
.legal-details > div { padding: 1rem 0; border-bottom: 1px solid rgba(46, 33, 17, .18); }
.legal-details dt { font-size: .85rem; margin-bottom: .3rem; opacity: .75; }
.legal-details dd { margin: 0; font-size: 1.1rem; line-height: 1.6; }
.legal-notice { margin: 1.5rem 0; padding: 1.25rem; background: var(--color-text); color: var(--color-bg-dark); line-height: 1.8; }
.legal-notice p { margin: .5rem 0 0; }
.footer-identity { margin: 0 0 .8rem; text-align: center; font-size: .85rem; line-height: 1.6; }
.footer-identity a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1100px) {
  .nav-inner { gap: 1rem; }
  .nav-link { padding: 8px; }
  .nav-links { gap: .25rem; }
  .nav-link_label { font-size: 16px; }
}
@media (max-width: 767px) {
  .noise-bg { inset: 0; width: 100%; height: 100%; animation: none; opacity: .18; }
  .nav-inner { padding: 1rem; }
  .nav-logo { font-size: 18px; }
  .nav-cta-small { padding: 8px 12px; font-size: 14px; }
  .is-horizontal .card-content { max-height: calc(var(--panel-height, 100svh) - 7rem); }
  .card-title { font-size: clamp(1.65rem, 6vw, 2rem); }
  .card-description { padding: 1rem; line-height: 1.6; }
  .card-actions { gap: .65rem; }
  .service-cta { padding: .75rem 1rem; font-size: .95rem; }
  .legal-page { padding: 2.5rem 1rem 0; }
  .legal-container { padding: 0 0 2rem; }
  .legal-page .footer { margin: 0 -1rem; width: calc(100% + 2rem); }
}
@media (max-height: 600px) {
  .card-section { padding: 4.5rem 1.5rem 1rem; }
  .card-content, .service-card { gap: 1rem; }
  .card-title { font-size: 1.6rem; padding: .4rem 1rem; }
  .card-description { font-size: 1rem; line-height: 1.5; padding: .8rem 1rem; }
  .is-horizontal .card-content { max-height: calc(var(--panel-height, 100svh) - 6rem); }
}
@media (prefers-reduced-motion: reduce) {
  html.has-mobile-vertical { scroll-behavior: auto; scroll-snap-type: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .preloader { display: none !important; }
  .legal-container { opacity: 1; transform: none; }
  .footer-inner { transform: none; }
}

.service-page, .service-page-header { color: var(--color-bg-dark); }
.service-page-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px clamp(20px, 5vw, 80px); }
.service-page-header > a:first-child { font-size: 20px; font-weight: 700; }
.service-page { width: min(900px, 100%); margin: 50px auto 80px; padding: 0 24px; }
.service-page nav { font-size: 14px; margin-bottom: 30px; }
.service-page h1 { font-size: clamp(36px, 6vw, 68px); line-height: 1.05; letter-spacing: -.04em; margin-bottom: 28px; }
.service-page-lead { font-size: clamp(18px, 2vw, 22px); line-height: 1.7; margin-bottom: 30px; }
.service-page section { margin-top: 56px; }
.service-page h2 { font-size: 28px; font-weight: 600; margin-bottom: 20px; }
.service-page address, .service-page li, .service-page section p { font-size: 18px; font-style: normal; line-height: 1.8; }
.service-page li a, .service-page address a { text-decoration: underline; text-underline-offset: 4px; }
.service-page-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; padding: 24px; background: var(--color-bg-dark); }
@media (max-width: 767px) {
  .noise-bg { inset: 0; width: 100%; height: 100%; animation: none; opacity: .18; }
  .service-page-header { padding: 20px 16px; gap: 12px; }
  .service-page-header > a:first-child { font-size: 16px; }
  .service-page-header .service-cta { font-size: 13px; padding: 10px 14px; }
}

/* Avis réels de la fiche Google : même palette, données et liens attribués. */
.reviews-container {height:auto;min-height:100svh;}
.reviews-left {gap:1.25rem;padding:clamp(2rem,4vw,4rem);}
.reviews-title {color:var(--color-text);}
.reviews-overview {color:var(--color-text);font-size:1rem;display:flex;flex-wrap:wrap;gap:.4em;align-items:baseline;}
.reviews-overview strong {font-size:1.35em;}
.review-content {min-height:0;gap:1rem;margin:.75rem 0;}
.review-byline {display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.review-author {color:var(--color-text);text-underline-offset:4px;}
.review-author:hover,.review-read:hover {text-decoration:underline;}
.review-stars {color:var(--color-text);letter-spacing:.12em;white-space:nowrap;}
.review-date {font-size:.8rem;color:var(--color-accent);}
.review-text {color:var(--color-text);line-height:1.65;white-space:pre-line;max-height:15em;-webkit-line-clamp:8;}
.review-read {color:var(--color-text);font-size:.85rem;text-decoration:underline;text-underline-offset:4px;align-self:flex-start;}
.review-content .progress-bar-container {margin-top:.25rem;}
.reviews-score {display:flex;flex-direction:column;align-items:center;gap:1.5rem;color:var(--color-bg-dark);}
.reviews-score-value {font-size:clamp(7rem,15vw,16rem);font-weight:700;line-height:1;letter-spacing:-.08em;}
.reviews-score-stars {font-size:clamp(2rem,4vw,4rem);letter-spacing:.12em;}
.reviews-score a {text-decoration:underline;text-underline-offset:5px;font-size:1.2rem;}
@media(min-width:1025px){.reviews-right {display:grid;place-items:center;}}
@media(max-width:600px){.reviews-left {padding:2.5rem 1.5rem;gap:1rem;}.review-content {margin:.5rem 0;}.review-text {font-size:1rem;}.reviews-title {font-size:2.8rem;}}

/* Navigation mobile : apparition et disparition par fondu. */
@media (max-width: 767px) {
  .nav { opacity: 1; visibility: visible; will-change: opacity; transition: opacity .2s ease, visibility 0s; }
  .nav.nav--hidden { transform: none; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility 0s linear .2s; }
  html, body { touch-action: pan-x pan-y; }
}
@media (prefers-reduced-motion: reduce) { .nav { transition: none; } }