/* ==========================================================
   Thème — à ajuster librement pour chaque client : couleurs,
   police, marges, arrondis. C'est ce fichier-là qui change d'un
   site à l'autre, jamais structure.css.
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&display=swap');
:root {
  --color-text: #4A4947;
  --color-text-alt: #01666A;
  --color-bg: #F7F4EF;
  --color-bg-alt: #F0ECE6;
  --color-bg-alt2: #FCFAF7;
  --color-accent: #FFA99C;
  --color-muted: #D9D4CB;
  --max-width: 1500px;
  --font-main: "Roboto Serif", serif;
  --font-alt: "Montserrat", sans-serif;
  --header-height: 72px;
  --topbar-height: 32px;
  --burger-breakpoint: 768px;
  --columns-gap: clamp(24px, 3vw, 40px);
  --section-padding: clamp(60px, 3.75rem + 3.76vw, 100px);
  --border-radius: 5px;
}
body {
  font-family: var(--font-main);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  font-size: 16px;
}
h1, h2, h3, h4, h5, h6 {
  color: var(--color-text-alt);
  font-family: var(--font-alt);
  margin-top: 0;
  word-break: break-word;
}
h1, h2, h3 {
  font-weight: 700;
}
h1 {
  font-size: clamp(1.875rem, 1.22rem + 2.82vw, 3.75rem); /* 30px → 60px */
  line-height: 1.1;
}
h2 {
  font-size: clamp(1.625rem, 1.23rem + 1.69vw, 2.75rem); /* 26px → 44px */
  line-height: 1.15;
}
h2 {
  max-width: 800px;
}
h3 {
  font-size: clamp(1.25rem, 1.07rem + 0.75vw, 1.75rem); /* 20px → 28px */
  line-height: 1.25;
}
h4 {
  font-size: clamp(1.125rem, 1.04rem + 0.38vw, 1.375rem); /* 18px → 22px */
  line-height: 1.3;
}
h5, h6 {
  font-size: clamp(1rem, 0.96rem + 0.19vw, 1.125rem); /* 16px → 18px */
  line-height: 1.4;
}
.center {
  text-align: center;
}
.center * {
  margin-left: auto;
  margin-right: auto;
}
.surtitre {
  font-weight: 500;
  font-size: 0.9em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0;
  font-family: var(--font-alt);
  letter-spacing: 0.1em;
}
.sous-titre {
  color: var(--color-text-alt);
  margin-top: 0;
}
h1 + .sous-titre {
  font-size: 1.2em;
  max-width: 900px;
}
h2 + .sous-titre {
  font-size: 1.1em;
}
h3 + .sous-titre {
  font-size: 1em;
  font-style: italic;
}
:is(h1, h2, h3, h4, h5, h6):has(+ p.sous-titre) {
  margin-bottom: 0.2em;
}
p a {color: initial;}
.citation {
  font-size: clamp(1.25rem, 1.07rem + 0.75vw, 1.75rem); /* 20px → 28px */
  line-height: 1.2;
  font-style: italic;
  color: var(--color-text-alt);
  padding-left: 30px;
  border-left: 3px solid var(--color-accent);
}
.mentions {
  margin: 0;
  font-size: 0.8em;
  font-style: italic;
}
.fond-alt {
  background: var(--color-bg-alt2);
}
.flex-start {
  align-items: flex-start;
}
.site-header {
  background: var(--color-bg);
  border-bottom: 1px solid #eee;
}
.site-header-main {
  width: 100%;
  max-width: var(--max-width);
  padding: 0 var(--columns-gap);
  margin: auto;
}
.site-topbar {
  background: var(--color-bg-alt);
  font-size: 0.8em;
  color: var(--color-text);
}
.site-topbar a {
  color: inherit;
  text-decoration: none;
}
.site-topbar a:hover {
  color: var(--color-accent);
}
/* Mode transparent : pas de fond ni de bordure tant qu'on est en haut de page.
   Devient identique au header normal une fois qu'on a scrollé (.header-solid,
   géré par theme/site.js) — évite un texte de menu illisible sur un fond clair. */
.site-header-transparent {
  border-bottom-color: transparent;
  background: transparent;
}
.site-header-transparent .site-menu a, .site-header-transparent .site-name {
  color: #fff;
}
.site-header-transparent .site-topbar, .site-header-transparent .site-topbar a {
  color: var(--color-text);
}
.site-header-transparent .burger-toggle span {
  background: #fff;
}
.site-header-transparent.header-solid {
  background: var(--color-bg);
  border-bottom-color: #eee;
}
.site-header-transparent.header-solid .site-menu a, .site-header-transparent.header-solid .site-name {
  color: var(--color-text);
}
.site-header-transparent.header-solid .site-topbar, .site-header-transparent.header-solid .site-topbar a {
  color: var(--color-text);
}
.site-header-transparent.header-solid .burger-toggle span {
  background: var(--color-text);
}
.site-name {
  font-weight: 700;
  font-size: 1.2em;
}
.burger-toggle span {
  background: var(--color-text);
  border-radius: 2px;
}
.site-header.nav-open .burger-toggle span {
  background: var(--color-accent);
}
.site-menu a {
  font-family: var(--font-alt);
  margin-left: 2vw;
  text-decoration: none;
  color: var(--color-text);
  font-size: 1em;
  font-weight: 600;
  text-transform: uppercase;
  transition: all .3s ease;
}
.site-menu a.active, .site-menu a:hover {
  color: var(--color-text-alt);
}
/* Menu déroulant en mode burger : fond plein nécessaire (peut s'afficher par-dessus
   n'importe quel contenu, y compris sous un header transparent) */
.site-header.burger-active .site-menu {
  background: var(--color-bg);
  gap: 10px;
}
.site-header.burger-active .site-menu a {
  margin-left: 0;
  padding: var(--columns-gap) 0;
  font-size: 1.4em;
  text-align: center;
  color: var(--color-text);
}
.site-header.burger-active .site-menu a.site-menu-btn {
  margin-top: var(--columns-gap);
}
/* Reprise de la barre supérieure à la fin du menu burger — volontairement plus
   discrète que le menu principal (texte plus petit, séparateur au-dessus). */
.site-menu-topbar-extra {
  border-top: 1px solid #eee;
}
.site-menu-topbar-extra a {
  font-size: 0.85em;
  color: var(--color-muted);
  padding: 4px 0;
}
.site-menu-topbar-extra a:hover {
  color: var(--color-accent);
}
/* Élément de menu affiché en bouton plutôt qu'en lien simple (case "Bouton"
   dans admin/menu.php), même style que le bloc Bouton du page builder. */
.site-header-main .site-menu a.site-menu-btn {
  padding: 10px 22px !important;
  background: var(--color-accent);
  color: var(--color-text-alt);
  border-radius: 5px;
}
.site-header-main .site-menu a.site-menu-btn:hover {
  background: var(--color-text-alt);
  color: #fff !important;
}
.site-content {
}
/* La largeur et le padding horizontal se font sur .pb-columns (voir plus bas),
   pas ici — que la page utilise le page builder ou non, tout son contenu
   passe maintenant par la même structure section/colonnes (voir
   theme/template.php), donc plus besoin de distinguer les deux cas ici. Ça
   permet à une section (.pb-section) d'avoir un fond en pleine largeur
   pendant que son contenu (les colonnes) reste centré et limité à
   --max-width. */
.page-body img {
  border-radius: var(--border-radius);
}
.site-footer {
  color: var(--color);
  font-size: 0.85em;
  background: var(--color-bg-alt);
}
.site-footer-social a {
  opacity: 0.75;
  transition: opacity 0.15s ease;
}
.site-footer-social a:hover {
  opacity: 1;
}
.site-footer-sep {
  margin: 0 6px;
  opacity: 0.6;
}
.site-footer-link {
  color: inherit;
  text-decoration: underline;
  font-size: 0.95em;
}
.site-footer-link:hover {
  color: var(--color-accent);
}
.site-footer-credit {
  margin-top: 6px;
  font-size: 0.85em;
  opacity: 0.7;
}
.site-footer-credit a {
  color: inherit;
}
.cms-credit-mention {
  font-size: 0.85em;
  color: var(--color);
}
/* Formulaire de contact */
.contact-form-wrap {
  max-width: 800px;
  margin-bottom: var(--columns-gap);
}
.contact-form label {
  margin-top: 14px;
  font-weight: 600;
  font-size: 0.9em;
}
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form input[type="date"],
.contact-form select, .contact-form textarea {
  padding: 10px;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.95em;
  background: #fff;
}
.contact-form-gdpr {
  font-weight: 400 !important;
  font-size: 0.85em !important;
  color: var(--color-text);
}
.contact-form-gdpr a {
  color: var(--color-accent);
}
.btn-contact-submit {
  margin-top: var(--columns-gap);
  padding: 1em 1.3em;
  background: var(--color-accent);
  color: #fff;
  border-radius: 1.5em;
  font-size: 0.95em;
  line-height: 1em;
  transition: all .3s ease;
  min-width: 250px;
}
.contact-form-success {
  background: #eef8ee;
  border: 1px solid #b7dfb7;
  padding: 14px;
  border-radius: 4px;
}
.contact-form-error {
  background: #fdeeee;
  border: 1px solid #e6b3b3;
  padding: 14px;
  border-radius: 4px;
}
/* Sections et éléments du page builder */
.pb-section {
  position: relative;
  margin: auto;
  padding: var(--section-padding) 0;
}
.pb-section.pb-has-bg {
  padding: 50px 30px;
  border-radius: 10px;
}
.pb-section.pb-bg-image {
  color: #fff;
}
.pb-section.pb-bg-image::before {
  background: rgba(0, 0, 0, 0.35);
  border-radius: 10px;
}
.pb-columns {
  position: relative;
  gap: var(--columns-gap);
  max-width: var(--max-width);
  padding: 0 var(--columns-gap);
}
/* Espacement entre plusieurs rangées de colonnes empilées dans une même section
   — sans ça, deux rangées consécutives se toucheraient : le padding de la
   section ne s'applique qu'à ses bords extérieurs, jamais entre ses enfants.
   Pas de marge après la dernière rangée, le padding bas de la section s'en
   charge déjà. */
.pb-columns:not(:last-child) {
  margin-bottom: var(--columns-gap);
}
.pb-image img, img.pb-image, .pb-image-img {
  border-radius: var(--border-radius);
}
.pb-image-caption {
  margin-top: 8px;
  font-size: 0.85em;
  color: var(--color-muted);
  text-align: center;
}
.pb-galerie {
  gap: var(--gallery-gap, 10px);
}
/* Slick n'a pas de notion de "gap" native : on simule avec du padding sur
   chaque slide (léger surplus sur les bords extérieurs, compromis simple
   plutôt que compenser avec une marge négative sur le conteneur). */
/* Marge négative sur le conteneur des slides, pour compenser exactement le
   padding ajouté sur chaque slide ci-dessous — sans ça, les deux extrémités
   de la galerie ont un demi-gap en trop (le padding du premier/dernier slide
   n'a rien en face pour se "fondre" dedans, contrairement aux slides du milieu). */
.pb-galerie .slick-list {
  margin: 0 calc(var(--gallery-gap, 10px) / -2);
}
.pb-galerie .slick-slide {
  padding: 0 calc(var(--gallery-gap, 10px) / 2);
  box-sizing: border-box;
}
.pb-galerie img {
  border-radius: var(--border-radius);
}
.pb-galerie-caption-overlay {
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  padding: 8px 10px;
  font-size: 0.8em;
}
.pb-galerie-zoom-icon {
  font-size: 1.8em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.pb-lightbox-overlay {
  background: rgba(0, 0, 0, 0.9);
}
.pb-lightbox-close {
  background: none;
  color: #fff;
  font-size: 1.6em;
}
.btn-cta {
  padding: 1em 1.3em;
  background: var(--color-accent);
  color: var(--color-text-alt);
  border-radius: 1.5em;
  font-size: 1em;
  font-weight: 600;
  line-height: 1em;
  transition: all .3s ease;
}
.btn-cta[data-btn-style="outline"] {
  border-color: var(--color-text-alt);
  color: var(--color-text-alt);
}
.btn-cta:hover, .btn-cta[data-btn-style="outline"]:hover {
  border-color: var(--color-text-alt) !important;
  color: #fff;
  background: var(--color-text-alt) !important;
}
.btn-cta[data-btn-style="text"] {
  color: var(--color-text-alt);
  border-radius: 0;
}
.btn-cta[data-btn-style="text"]:hover {
  opacity: 0.8;
}
:is(.btn-cta):has(+ .btn-cta) {
  margin: 0 1em 1em 0;
}
.btn-ancre {
  
}
/* Slider témoignages : même principe d'écart simulé par padding que la Galerie
   ci-dessus (Slick n'a pas de "gap" natif). */
.pb-testimonial-slider {
  gap: var(--testimonial-gap, 20px);
}
.pb-testimonial-slider .slick-list {
  margin: 0 calc(var(--testimonial-gap, 20px) / -2);
}
.pb-testimonial-slider .slick-slide {
  padding: 0 calc(var(--testimonial-gap, 20px) / 2);
  box-sizing: border-box;
}
/* Slick fusionne directement ses classes (.slick-slide etc.) sur l'élément
   .pb-testimonial-slide lui-même plutôt que de l'envelopper dans un élément
   séparé (vérifié par test réel) — la diapositive porte donc déjà tous les
   styles définis plus haut (fond, bordure, padding) une fois Slick actif,
   rien de plus à faire ici. */
/* Bloc "Catalogue" : mêmes styles que "Derniers articles" (pas de méta date,
   le catalogue n'en a pas). */
.pb-catalogue-recent {
  gap: var(--catalogue-recent-gap, var(--columns-gap));
}
.pb-catalogue-recent .slick-list {
  margin: 0 calc(var(--catalogue-recent-gap, var(--columns-gap)) / -2);
}
.pb-catalogue-recent .slick-slide {
  padding: 0 calc(var(--catalogue-recent-gap, var(--columns-gap)) / 2);
  box-sizing: border-box;
}
.pb-catalogue-recent-item img {
  border-radius: var(--border-radius);
}
.pb-catalogue-recent-item h3 {
  font-size: 1em;
  margin: 10px 0 4px;
  color: var(--color-text);
}
.pb-catalogue-recent-excerpt {
  font-size: 0.9em;
  color: var(--color-text);
  margin: 6px 0 0;
}
.pb-blog-recent {
  gap: var(--blog-recent-gap, var(--columns-gap));
}
/* La propriété "gap" ci-dessus ne sert que pour la grille de repli — une fois
   Slick actif (mode slider, systématique en dessous de 640px), il gère sa
   propre mise en page interne sans utiliser gap du tout, d'où la même
   technique que pour la Galerie : padding sur chaque slide + marge négative
   sur le conteneur pour obtenir un espacement équivalent. */
.pb-blog-recent .slick-list {
  margin: 0 calc(var(--blog-recent-gap, var(--columns-gap)) / -2);
}
.pb-blog-recent .slick-slide {
  padding: 0 calc(var(--blog-recent-gap, var(--columns-gap)) / 2);
  box-sizing: border-box;
}
.pb-blog-recent-item img {
  border-radius: var(--border-radius);
}
.pb-blog-recent-item h3 {
  font-size: 1em;
  margin: 10px 0 4px;
  color: var(--color-text);
}
.pb-blog-recent-meta {
  font-size: 0.8em;
  color: var(--color-muted);
  margin: 0;
}
.pb-blog-recent-excerpt {
  font-size: 0.9em;
  color: var(--color-text);
  margin: 6px 0 0;
}
/* Couleur d'accent sur les flèches/points de Slick (bloc Derniers articles
   et galerie en mode slider), pour rester cohérent avec le thème plutôt que
   le style générique par défaut de la librairie. */
.slick-slider {
  padding: 0 30px;
}
.slick-prev:before, .slick-next:before {
  color: var(--color-accent) !important;
}
.slick-prev, .slick-next {
  z-index: 100;
}
.slick-prev {
  left: 5px !important;
}
.slick-next {
  right: 5px !important;
}
.slick-dots {
  left: 0;
}
.slick-dots li button:before {
  color: var(--color-accent);
}
.slick-dots li.slick-active button:before {
  color: var(--color-accent);
  opacity: 1;
}
/* Bloc Hero */
.pb-hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.pb-hero-overlay {
  background: rgba(0, 0, 0, var(--hero-overlay, 0.3));
}
.pb-hero-content {
  color: #fff;
  gap: var(--columns-gap);
  max-width: var(--max-width);
  padding: calc(var(--section-padding) + var(--header-height-live)) var(--columns-gap) 0;
  margin: 0 auto;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  gap: 1em;
}
.pb-hero-content h1, .pb-hero-content h2, .pb-hero-content h3, .pb-hero-content p {
  color: #fff;
  width: 100%
}
.pb-hero-content .btn-cta {
  margin: 0 !important;
}
.pb-hero-content .btn-cta[data-btn-style="outline"] {
  border-color: #fff;
  color: #fff;
}
.pb-hero-content .engagements {
  padding: var(--columns-gap) 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--columns-gap) / 2);
  align-content: center;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, var(--hero-overlay, 0.3)) 20%, rgba(0, 0, 0, var(--hero-overlay, 0.3)) 80%, rgba(0, 0, 0, 0) 100%);
}
.pb-hero-content .engagements span {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.3em;
}
.pb-hero-content .engagements .offert::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWdpZnQiPjxwYXRoIGQ9Ik0xMiA3djE0Ii8+PHBhdGggZD0iTTIwIDExdjhhMiAyIDAgMCAxLTIgMkg2YTIgMiAwIDAgMS0yLTJ2LTgiLz48cGF0aCBkPSJNNy41IDdhMSAxIDAgMCAxIDAtNUE0LjggOCAwIDAgMSAxMiA3YTQuOCA4IDAgMCAxIDQuNS01IDEgMSAwIDAgMSAwIDUiLz48cmVjdCB4PSIzIiB5PSI3IiB3aWR0aD0iMTgiIGhlaWdodD0iNCIgcng9IjEiLz48L3N2Zz4=");
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWdpZnQiPjxwYXRoIGQ9Ik0xMiA3djE0Ii8+PHBhdGggZD0iTTIwIDExdjhhMiAyIDAgMCAxLTIgMkg2YTIgMiAwIDAgMS0yLTJ2LTgiLz48cGF0aCBkPSJNNy41IDdhMSAxIDAgMCAxIDAtNUE0LjggOCAwIDAgMSAxMiA3YTQuOCA4IDAgMCAxIDQuNS01IDEgMSAwIDAgMSAwIDUiLz48cmVjdCB4PSIzIiB5PSI3IiB3aWR0aD0iMTgiIGhlaWdodD0iNCIgcng9IjEiLz48L3N2Zz4=");
  mask-size: contain;
}
.pb-hero-content .engagements .experience::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXNwYXJrbGVzIj48cGF0aCBkPSJNMTEuMDE3IDIuODE0YTEgMSAwIDAgMSAxLjk2NiAwbDEuMDUxIDUuNTU4YTIgMiAwIDAgMCAxLjU5NCAxLjU5NGw1LjU1OCAxLjA1MWExIDEgMCAwIDEgMCAxLjk2NmwtNS41NTggMS4wNTFhMiAyIDAgMCAwLTEuNTk0IDEuNTk0bC0xLjA1MSA1LjU1OGExIDEgMCAwIDEtMS45NjYgMGwtMS4wNTEtNS41NThhMiAyIDAgMCAwLTEuNTk0LTEuNTk0bC01LjU1OC0xLjA1MWExIDEgMCAwIDEgMC0xLjk2Nmw1LjU1OC0xLjA1MWEyIDIgMCAwIDAgMS41OTQtMS41OTR6Ii8+PHBhdGggZD0iTTIwIDJ2NCIvPjxwYXRoIGQ9Ik0yMiA0aC00Ii8+PGNpcmNsZSBjeD0iNCIgY3k9IjIwIiByPSIyIi8+PC9zdmc+");
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXNwYXJrbGVzIj48cGF0aCBkPSJNMTEuMDE3IDIuODE0YTEgMSAwIDAgMSAxLjk2NiAwbDEuMDUxIDUuNTU4YTIgMiAwIDAgMCAxLjU5NCAxLjU5NGw1LjU1OCAxLjA1MWExIDEgMCAwIDEgMCAxLjk2NmwtNS41NTggMS4wNTFhMiAyIDAgMCAwLTEuNTk0IDEuNTk0bC0xLjA1MSA1LjU1OGExIDEgMCAwIDEtMS45NjYgMGwtMS4wNTEtNS41NThhMiAyIDAgMCAwLTEuNTk0LTEuNTk0bC01LjU1OC0xLjA1MWExIDEgMCAwIDEgMC0xLjk2Nmw1LjU1OC0xLjA1MWEyIDIgMCAwIDAgMS41OTQtMS41OTR6Ii8+PHBhdGggZD0iTTIwIDJ2NCIvPjxwYXRoIGQ9Ik0yMiA0aC00Ii8+PGNpcmNsZSBjeD0iNCIgY3k9IjIwIiByPSIyIi8+PC9zdmc+");
  mask-size: contain;
}
.pb-hero-content .engagements .engagement::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXNoaWVsZC1jaGVjayI+PHBhdGggZD0iTTIwIDEzYzAgNS0zLjUgNy41LTcuNjYgOC45NWExIDEgMCAwIDEtLjY3LS4wMUM3LjUgMjAuNSA0IDE4IDQgMTNWNmExIDEgMCAwIDEgMS0xYzIgMCA0LjUtMS4yIDYuMjQtMi43MmExLjE3IDEuMTcgMCAwIDEgMS41MiAwQzE0LjUxIDMuODEgMTcgNSAxOSA1YTEgMSAwIDAgMSAxIDF6Ii8+PHBhdGggZD0ibTkgMTIgMiAyIDQtNCIvPjwvc3ZnPg==");
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXNoaWVsZC1jaGVjayI+PHBhdGggZD0iTTIwIDEzYzAgNS0zLjUgNy41LTcuNjYgOC45NWExIDEgMCAwIDEtLjY3LS4wMUM3LjUgMjAuNSA0IDE4IDQgMTNWNmExIDEgMCAwIDEgMS0xYzIgMCA0LjUtMS4yIDYuMjQtMi43MmExLjE3IDEuMTcgMCAwIDEgMS41MiAwQzE0LjUxIDMuODEgMTcgNSAxOSA1YTEgMSAwIDAgMSAxIDF6Ii8+PHBhdGggZD0ibTkgMTIgMiAyIDQtNCIvPjwvc3ZnPg==");
  mask-size: contain;
}
@media (min-width: 769px) {
  .pb-hero-content .engagements {
    flex-direction: row;
  }
}
/* Google Maps */
.pb-gmap-consent {
  background: #f2f2f2;
  color: var(--color-muted);
}
.pb-gmap-consent p {
  margin: 0;
  font-size: 0.9em;
}
.pb-gmap-consent button {
  background: var(--color-accent);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
}
.pb-gmap-consent button:hover {
  opacity: 0.9;
}
/* Heures d'ouverture */
.pb-hours-row {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}
.pb-hours-row:last-child {
  border-bottom: none;
}
.pb-hours-day {
  color: var(--color-text);
}
.pb-hours-value {
  color: var(--color-muted);
}
.pb-hours-today {
  font-weight: 600;
}
.pb-hours-today .pb-hours-day, .pb-hours-today .pb-hours-value {
  color: var(--color-accent);
}
/* Bandeau de consentement cookies */
.cookie-consent-banner {
  background: #1a1a1a;
  color: #fff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
  font-size: 0.9em;
}
.cookie-consent-banner a {
  color: #fff;
  text-decoration: underline;
}
.cookie-consent-banner .btn {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.cookie-consent-banner .btn:hover {
  border-color: #fff;
}
/* animations */
[data-animate] {
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: var(--animate-delay, 0s);
}
[data-animate="fade-up"] {
  transform: translateY(24px);
}
[data-animate="fade-left"] {
  transform: translateX(-24px);
}
[data-animate="fade-right"] {
  transform: translateX(24px);
}
[data-animate].is-visible {
  opacity: 1;
  transform: none;
}

/* style communs */
section.hero {
  background: linear-gradient(180deg,rgba(237, 232, 225, 1) 40%, rgba(247, 244, 239, 1) 100%);
}

/*section.hero::before {
  content:'';
  background: #786c67;
  opacity: .5;
  top:0;
  left:0;
  right:0;
  bottom;
  position: absolute;
  width: 100%;
  height: 100%;
}

section.hero h1, section.hero .sous-titre {
  color:#fff;
}

section.hero .btn-cta[data-btn-style="outline"] {
  color:#fff;
  border-color: #fff;
}
section.hero .btn-cta[data-btn-style="outline"]:hover {
  border-color: var(--color-text-alt);
}*/

.image-principale img {
  border-radius: 20px !important;
}
.image-principale {
  position: relative;
}
.image-principale::after {
  content: "";
  background: center / contain no-repeat url(/uploads/apostrophe-dc5411.webp);
  display: block;
  width: 80px;
  height: 130px;
  position: absolute;
  bottom: -10%;
  right: -5%;
}

/* PAGES */

.home-blocs .pb-column {
  background: var(--color-bg-alt);
  padding: var(--columns-gap);
  border-radius: var(--border-radius);
}

.home-benefices  {
  border-radius: var(--border-radius);
  padding: 0;
  border: 1px solid var(--color-muted);
  margin-inline: max(var(--columns-gap), calc(((100% - var(--max-width)) / 2) + var(--columns-gap)));
}
.home-benefices .pb-column {
  padding: var(--columns-gap);
  position: relative;
}
.home-benefices .pb-column:first-of-type::after  {
  content:"";
  width: 100%;
  height: 1px;
  position:absolute;
  bottom: calc(var(--columns-gap) / -2);
  left:0;
  background: var(--color-muted);
}
@media (min-width: 699px) {
  .home-benefices .pb-column:first-of-type::after  {
    width: 1px;
    height: 100%;
    top:0;
	bottom: inherit;
	left:inherit;
    right: calc(var(--columns-gap) / -2);
  }
}
.apropos-blocs {
  background: var(--color-bg-alt);
}
.apropos-blocs .pb-column {
  background: var(--color-bg);
  padding: var(--columns-gap);
  border-radius: var(--border-radius);
}
.apropos-blocs .pb-column h2 {
  font-size: clamp(1.25rem, 1.07rem + 0.75vw, 1.75rem); /* 20px → 28px */
  line-height: 1.25;
}
.offres-bloc01, .offres-bloc02, .offres-bloc03 {
  max-width: var(--max-width);
  margin-inline: max(var(--columns-gap), calc((100% - var(--max-width)) / 2));
  margin-block: var(--section-padding);
  padding: var(--columns-gap);
  border-radius: var(--border-radius);
}
.offres-bloc01 .pb-columns, .offres-bloc02 .pb-columns, .offres-bloc03 .pb-columns {
  padding: 0;
}
.offres-bloc01 {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-bg-alt);
}
.offres-bloc02 {
  border: 1px solid var(--color-muted);
}
.offres-bloc03 {
  background: var(--color-bg-alt2);
  border: 1px solid var(--color-bg-alt2);
}
.offres-bloc01 .surtitre, .offres-bloc02 .surtitre, .offres-bloc03 .surtitre {
  margin-top: 0;
}
.offres-bloc02 .offre {
  padding: var(--columns-gap);
  background: var(--color-bg-alt);
  border-radius: var(--border-radius);
}
.tarif {
  font-family: var(--font-alt);
  font-size: 2em;
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1em;
}
.tarif .exp {
  font-size: 0.6em;
}
.tarif .mention {
  font-size: 0.5em;
  font-family: var(--font-main);
  font-style: italic;
  font-weight: 400;
  white-space: nowrap;
}
/* --- Calculateur --- */
/* --- Conteneur général --- */
.calc-block {
  background: #E9E4DD;
  padding: calc(var(--columns-gap) / 2);
  border-radius: var(--border-radius);
}
.calc-title {
  font-weight: 500;
  font-size: 0.9em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0;
  font-family: var(--font-alt);
}
.calc-field {
  margin: 20px 0 0 0;
}
/* --- Champs (slider CA + boutons période) --- */
.calc-field label, .compare-row {
  width: 100%;
  font-family: var(--font-alt);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.8em;
  display: flex;
  justify-content: space-between;
}
.field-value, .cr-value {
  font-weight: 700;
  color: var(--color-text-alt);
}
/* Slider */
.calc-field input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  background: var(--color-muted);
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  margin-top: 20px;
}
.calc-field input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(200, 121, 58, 0.4);
  cursor: pointer;
  transition: transform 0.15s;
}
.calc-field input[type=range]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}
.calc-field input[type=range]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(200, 121, 58, 0.4);
  cursor: pointer;
}
/* --- Boutons de période --- */
.period-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px
}
.period-pill {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-text);
  padding: 5px 11px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s;
}
.period-pill:hover {
  border-color: var(--color-accent);
  color: var(--color-text);
}
.period-pill.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text);
}
/* --- Bloc résultat --- */
.calc-result {
  background: var(--color-bg-alt);
  padding: calc(var(--columns-gap) / 2);
  border-radius: var(--border-radius);
  margin-top: var(--columns-gap);
}
.result-label, .compare-title {
  width: 100%;
  font-family: var(--font-alt);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.8em;
  color: var(--color-text-alt);
  display: flex;
  justify-content: space-between;
  margin-top: 0;
}
.result-amount {
  font-family: var(--font-alt);
  font-size: 2em;
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1em;
  margin: 5px 0 0;
}
.result-annual {
  margin: 0;
  font-size: 0.8em;
  font-style: italic;
}
.result-divider {
  margin: 10px 0;
  height: 1px;
  background: var(--color-muted);
}
.result-note {
  font-size: 0.8em;
  font-style: italic;
  margin-bottom: 0
}
/* --- Comparatif HelloFactu --- */
.cr-label {
  font-family: var(--font-main);
  font-weight: 400;
  text-transform: initial
}
.compare-row.roi .cr-label {
  font-weight: 700;
}

.offre-audit {
  padding: var(--columns-gap);
  background: var(--color-accent);
  border-radius: var(--border-radius);
}
.offre-audit h2 {
  font-size: clamp(1.125rem, 1.04rem + 0.38vw, 1.375rem); /* 18px → 22px */
  line-height: 1.3;
}
.tag-offert, .tag-temps {
  padding: 0.3em 1em;
  background: var(--color-text-alt);
  color: #fff;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  margin: 1em 1em 0 0;
  border-radius: 1.3em;
  gap: 0.3em;
}
.tag-offert::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWdpZnQiPjxwYXRoIGQ9Ik0xMiA3djE0Ii8+PHBhdGggZD0iTTIwIDExdjhhMiAyIDAgMCAxLTIgMkg2YTIgMiAwIDAgMS0yLTJ2LTgiLz48cGF0aCBkPSJNNy41IDdhMSAxIDAgMCAxIDAtNUE0LjggOCAwIDAgMSAxMiA3YTQuOCA4IDAgMCAxIDQuNS01IDEgMSAwIDAgMSAwIDUiLz48cmVjdCB4PSIzIiB5PSI3IiB3aWR0aD0iMTgiIGhlaWdodD0iNCIgcng9IjEiLz48L3N2Zz4=");
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWdpZnQiPjxwYXRoIGQ9Ik0xMiA3djE0Ii8+PHBhdGggZD0iTTIwIDExdjhhMiAyIDAgMCAxLTIgMkg2YTIgMiAwIDAgMS0yLTJ2LTgiLz48cGF0aCBkPSJNNy41IDdhMSAxIDAgMCAxIDAtNUE0LjggOCAwIDAgMSAxMiA3YTQuOCA4IDAgMCAxIDQuNS01IDEgMSAwIDAgMSAwIDUiLz48cmVjdCB4PSIzIiB5PSI3IiB3aWR0aD0iMTgiIGhlaWdodD0iNCIgcng9IjEiLz48L3N2Zz4=");
  mask-size: contain;
}
.tag-temps::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXRpbWVyLXJlc2V0Ij48cGF0aCBkPSJNMTAgMmg0Ii8+PHBhdGggZD0iTTEyIDE0di00Ii8+PHBhdGggZD0iTTQgMTNhOCA4IDAgMCAxIDgtNyA4IDggMCAxIDEtNS4zIDE0TDQgMTcuNiIvPjxwYXRoIGQ9Ik05IDE3SDR2NSIvPjwvc3ZnPg==");
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXRpbWVyLXJlc2V0Ij48cGF0aCBkPSJNMTAgMmg0Ii8+PHBhdGggZD0iTTEyIDE0di00Ii8+PHBhdGggZD0iTTQgMTNhOCA4IDAgMCAxIDgtNyA4IDggMCAxIDEtNS4zIDE0TDQgMTcuNiIvPjxwYXRoIGQ9Ik05IDE3SDR2NSIvPjwvc3ZnPg==");
  mask-size: contain;
}

.professionnels {
  background: var(--color-bg-alt);
  overflow-x: hidden;
}

.mots-cles-defilement {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow: visible;
  width: 100%;
}

.ligne {
  display: flex;
  width: max-content;
}

.ligne-contenu {
  display: flex;
  gap: 1.5rem;
  flex-shrink: 0;
  padding-right: 1.5rem;
}

.ligne-contenu span {
  white-space: nowrap;
  font-size: 1em;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--color-accent);
  color: var(--color-text-alt);
}

.ligne-1 {
  animation: defiler-gauche 40s linear infinite;
}

.ligne-2 {
  animation: defiler-droite 40s linear infinite;
}

@keyframes defiler-gauche {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes defiler-droite {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    transition: none;
    opacity: 1;
    transform: none;
  }
  .ligne-1, .ligne-2 {
    animation: none;
  }
}