/* ==========================================================================
   Photobooth Strasbourg — Feuille de styles partagée
   Utilisée par les pages : mockup-mentions-legales.html,
   mockup-conditions-generales-de-location.html,
   mockup-politique-de-confidentialite.html

   Inclut aussi des classes utilitaires pour Elementor :
     .pb-header  → header sticky avec backdrop blur
   ========================================================================== */

/* ==========================================================================
   Header Elementor — sticky + backdrop blur (workaround Pro)
   Appliqué via la classe CSS "pb-header" sur le conteneur Elementor du header.
   ========================================================================== */

.pb-header {
  position: sticky !important;
  top: 0;
  z-index: 50;
  background: rgba(248, 245, 241, 0.92) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}

/* Force la hauteur interne du header — compact */
.pb-header > .e-con-inner,
.pb-header.e-con > .e-con-inner {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  min-height: auto !important;
  align-items: center !important;
}

/* Compresser tous les widgets Elementor dans le header */
.pb-header .elementor-widget,
.pb-header .elementor-element {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Compresser le wrapper du menu ElementsKit (cause cachée des marges) */
.pb-header .ekit-wid-con,
.pb-header .elementskit-menu-container,
.pb-header .ekit-menu-wraper,
.pb-header .elementskit-navbar-nav,
.pb-header .ekit-menu-nav-main {
  margin: 0 !important;
  padding: 0 !important;
  min-height: auto !important;
  height: auto !important;
}

/* ElementsKit met height:80px sur les <a> du menu — on override */
.pb-header .elementskit-navbar-nav > li,
.pb-header .elementskit-navbar-nav > li > a,
.pb-header .ekit-menu-nav-main > li,
.pb-header .ekit-menu-nav-main > li > a,
.pb-header .ekit-menu-nav-main .menu-item > a {
  height: auto !important;
  min-height: auto !important;
  line-height: 1.4 !important;
  padding: 8px 14px !important;
  font-size: 14px !important;
}

/* Aligne verticalement le contenu dans chaque colonne */
.pb-header > .e-con-inner > .e-con,
.pb-header > .e-con-inner > .e-child {
  justify-content: center !important;
  min-height: auto !important;
}

/* Force la taille du logo SVG */
.pb-header svg {
  height: 44px !important;
  width: auto !important;
  max-width: 220px !important;
  display: block !important;
}

/* Logo widget HTML : pas de marge, alignement gauche */
.pb-header .elementor-widget-html {
  margin: 0 !important;
}

/* Menu : espacement plus serré, items horizontaux */
.pb-header .ekit-menu-nav-main {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
}

/* Bouton CTA : padding compact, alignement à droite */
.pb-header .elementor-widget-button {
  text-align: right !important;
}
.pb-header .elementor-button {
  padding: 12px 22px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
}

/* Sur mobile / tablette : header en row, plus compact */
@media (max-width: 1024px) {
  .pb-header > .e-con-inner {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  .pb-header svg {
    height: 36px !important;
  }
  /* Cache le bouton CTA en mobile (sera dans le drawer) */
  .pb-header .elementor-widget-button {
    display: none !important;
  }
}

/* ==========================================================================
   Footer Elementor — apparence et layout
   Appliqué via .pb-footer-wrap dans le widget HTML du footer ElementsKit
   ========================================================================== */

/* Étend le footer en pleine largeur sur fond dark
   (override des contraintes du conteneur Elementor parent) */
.pb-footer-wrap {
  background: var(--ink-3);
  color: rgba(248,245,241,0.65);
  padding: 64px 0 24px;
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

.pb-footer-grid {
  max-width: 1180px;
  margin: 0 auto 48px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 36px;
}

.pb-footer-brand p {
  font-size: 14px;
  line-height: 1.65;
  margin-top: 16px;
  max-width: 320px;
  color: rgba(248,245,241,0.65);
}

.pb-footer-mention {
  margin-top: 14px !important;
  font-size: 12px !important;
  color: rgba(248,245,241,0.45) !important;
}
.pb-footer-mention strong {
  color: rgba(248,245,241,0.75);
}

.pb-footer-col h4 {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--cream);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.pb-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pb-footer-col li {
  padding: 5px 0;
  font-size: 14px;
}

.pb-footer-col a,
.pb-footer-brand a {
  color: rgba(248,245,241,0.65);
  text-decoration: none;
  transition: color .15s ease;
}

.pb-footer-col a:hover,
.pb-footer-brand a:hover {
  color: var(--gold);
}

.pb-footer-bottom {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 24px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  flex-wrap: wrap;
  gap: 12px;
  color: rgba(248,245,241,0.55);
}

.pb-footer-legal {
  display: flex;
  gap: 18px;
}

.pb-footer-legal a {
  color: rgba(248,245,241,0.55);
  text-decoration: none;
  font-size: 12px;
}

.pb-footer-legal a:hover { color: var(--gold); }

/* Sur le widget Elementor parent, on enlève le padding/margin pour que le
   footer prenne vraiment toute la largeur */
.elementor-widget-html:has(.pb-footer-wrap),
.e-con:has(.pb-footer-wrap) {
  padding: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Responsive footer */
@media (max-width: 900px) {
  .pb-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .pb-footer-grid { grid-template-columns: 1fr; }
  .pb-footer-bottom { flex-direction: column; align-items: flex-start; }
}

:root {
  --cream: #F8F5F1;
  --cream-2: #ECE7DF;
  --ink: #111111;
  --ink-2: #2C2520;
  --ink-3: #0e1021;
  --gold: #C9A14A;
  --gold-dark: #A8862F;
  --muted: #6B6358;
  --line: rgba(0,0,0,0.08);
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --logo-display: 'Archivo Black', 'Inter', sans-serif;
}

/* Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* Base */
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--gold-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 880px; margin: 0 auto; padding: 0 24px; }

h1, h2 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; }
h1 { font-size: 44px; line-height: 1.1; margin-bottom: 12px; }
h2 { font-size: 22px; margin: 36px 0 12px; }

p, ul { margin-bottom: 16px; font-size: 16px; }
ul { padding-left: 24px; }
li { margin-bottom: 6px; }
em { color: var(--muted); font-style: italic; }

.eyebrow {
  font-size: 12px;
  letter-spacing: 2.5px;
  color: var(--gold-dark);
  text-transform: uppercase;
  font-weight: 600;
}

/* ==========================================================================
   Header + navigation desktop
   ========================================================================== */

header {
  background: rgba(248, 245, 241, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}

.nav {
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Logo SVG */
.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-3);
}

.logo svg {
  height: 44px;
  width: auto;
  display: block;
}

/* Classes des paths SVG du logo */
.logo .gold-fill { fill: var(--gold); }
.logo .gold-stroke { stroke: var(--gold); }
.logo .accent-fill { fill: var(--gold); }       /* alias rétro-compat */
.logo .accent-stroke { stroke: var(--gold); }   /* alias rétro-compat */
.logo .currentcolor-fill { fill: currentColor; }

/* Menu desktop */
.menu {
  display: flex;
  gap: 28px;
  font-size: 14px;
}

.menu a {
  color: var(--ink-2);
  font-weight: 500;
  transition: color .2s;
}

.menu a:hover { color: var(--gold-dark); text-decoration: none; }

/* Bouton CTA primaire (header desktop) */
.btn-primary {
  background: var(--gold);
  color: var(--ink);
  padding: 12px 22px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all .2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-primary:hover {
  background: var(--gold-dark);
  color: var(--cream);
  text-decoration: none;
  transform: translateY(-1px);
}

/* Bouton hamburger (mobile uniquement) */
.menu-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--line);
  width: 42px;
  height: 42px;
  border-radius: 8px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   Drawer mobile (panneau latéral)
   ========================================================================== */

.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(14, 16, 33, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
  z-index: 200;
}

.mobile-menu-overlay.is-open { opacity: 1; visibility: visible; }

.mobile-menu-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 88vw);
  background: var(--cream);
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,.0,.2,1);
  display: flex;
  flex-direction: column;
  padding: 24px;
  box-shadow: -8px 0 30px rgba(14,16,33,0.12);
}

.mobile-menu-overlay.is-open .mobile-menu-panel { transform: translateX(0); }

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}

.mobile-menu-close {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mobile-menu-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-menu-list a {
  display: block;
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  border-radius: 8px;
  transition: background .15s ease, color .15s ease;
  text-decoration: none;
}

.mobile-menu-list a:hover {
  background: var(--cream-2);
  color: var(--gold-dark);
}

.mobile-menu-cta {
  margin-top: auto;
  background: var(--gold);
  color: var(--ink);
  padding: 14px 20px;
  border-radius: 8px;
  font-weight: 600;
  text-align: center;
  font-size: 14px;
  text-decoration: none;
  transition: background .2s ease;
}

.mobile-menu-cta:hover {
  background: var(--gold-dark);
  color: var(--cream);
  text-decoration: none;
}

/* ==========================================================================
   Page d'accueil — toutes les styles scopés sous .pb-accueil
   pour éviter les collisions avec WordPress / Elementor / pages légales
   ========================================================================== */

/* Cache le titre WP par défaut sur la page accueil (id=177) — le hero fait office de h1 */
body.page-id-177 .entry-title,
body.page-id-177 .page-title,
body.page-id-177 .elementor-page-title,
body.page-id-177 .elementor-widget-theme-post-title,
body.page-id-177 main > article > header,
body.home .entry-title {
  display: none !important;
}

/* Pas de padding-top sur le main pour que le hero touche le header */
body.page-id-177 main,
body.page-id-177 .site-main,
body.page-id-177 .elementor-section-wrap > .elementor-section:first-child {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

body.page-id-177 .page-content,
body.page-id-177 .entry-content {
  margin: 0 !important;
}

.pb-accueil {
  font-family: var(--sans);
  color: var(--ink);
  line-height: 1.6;
}

.pb-accueil * { box-sizing: border-box; }

.pb-accueil h1,
.pb-accueil h2,
.pb-accueil h3 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
}

.pb-accueil p { margin: 0 0 12px; }

.pb-accueil ul { list-style: none; padding: 0; margin: 0; }
.pb-accueil li { margin: 0; }

.pb-accueil img,
.pb-accueil svg { display: block; max-width: 100%; }

.pb-accueil a { color: inherit; text-decoration: none; }

.pb-accueil .pb-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.pb-accueil .eyebrow {
  font-size: 12px;
  letter-spacing: 2.5px;
  color: var(--gold-dark);
  text-transform: uppercase;
  font-weight: 600;
  display: inline-block;
}

.pb-accueil .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  transition: all .2s ease;
  cursor: pointer;
  border: none;
  text-decoration: none;
}

.pb-accueil .btn-primary {
  background: var(--gold);
  color: var(--ink);
}

.pb-accueil .btn-primary:hover {
  background: var(--gold-dark);
  color: var(--cream);
  transform: translateY(-1px);
  text-decoration: none;
}

.pb-accueil .btn-ghost-light {
  color: var(--cream);
  border: 1.5px solid rgba(248,245,241,0.4);
  background: transparent;
}

.pb-accueil .btn-ghost-light:hover {
  background: rgba(248,245,241,0.1);
  border-color: var(--cream);
  color: var(--cream);
  text-decoration: none;
}

.pb-accueil .btn-ghost-dark {
  color: var(--ink);
  border: 1.5px solid var(--ink);
  background: transparent;
}

.pb-accueil .btn-ghost-dark:hover {
  background: var(--ink);
  color: var(--cream);
  text-decoration: none;
}

/* Hero (full-width) */
.pb-accueil .hero {
  background: var(--ink-3);
  color: var(--cream);
  padding: 120px 0 110px;
  position: relative;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

.pb-accueil .hero::before,
.pb-accueil .hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.pb-accueil .hero::before {
  width: 380px;
  height: 380px;
  background: rgba(201,161,74,0.18);
  top: -100px;
  left: -120px;
}
.pb-accueil .hero::after {
  width: 480px;
  height: 480px;
  background: rgba(201,161,74,0.10);
  bottom: -180px;
  right: -140px;
}

.pb-accueil .hero-content {
  max-width: 680px;
  position: relative;
  z-index: 2;
}

.pb-accueil .hero h1 {
  font-size: clamp(40px, 6vw, 68px);
  line-height: 1.05;
  margin: 18px 0 24px;
  color: var(--cream);
}

.pb-accueil .hero h1 em {
  font-style: italic;
  color: var(--gold);
}

.pb-accueil .hero-lede {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(248,245,241,0.78);
  margin-bottom: 36px;
  max-width: 540px;
}

.pb-accueil .hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Reassurance row */
.pb-accueil .reassurance {
  background: var(--cream-2);
  padding: 22px 0;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

.pb-accueil .reassurance-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.pb-accueil .reassurance-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--ink-2);
  font-weight: 500;
}

.pb-accueil .check {
  width: 22px;
  height: 22px;
  background: var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Sections génériques */
.pb-accueil section {
  padding: 90px 0;
}

.pb-accueil .section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}

.pb-accueil .section-head h2 {
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.15;
  margin-top: 12px;
}

.pb-accueil .section-head p {
  color: var(--muted);
  margin-top: 16px;
  font-size: 16px;
}

/* Comment ça marche */
.pb-accueil .steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.pb-accueil .step {
  text-align: center;
  padding: 0 12px;
}

.pb-accueil .step-num {
  display: inline-flex;
  width: 56px;
  height: 56px;
  border: 1.5px solid var(--gold);
  color: var(--gold-dark);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 18px;
}

.pb-accueil .step h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.pb-accueil .step p {
  color: var(--muted);
  font-size: 15px;
}

/* Section offre */
.pb-accueil .offre-section {
  background: var(--cream-2);
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

.pb-accueil .offre-card {
  max-width: 920px;
  margin: 0 auto;
  background: var(--cream);
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 5fr 6fr;
  border: 1px solid var(--line);
}

.pb-accueil .offre-visual {
  background: var(--ink-3);
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.pb-accueil .offre-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pb-accueil .offre-body {
  padding: 44px 40px;
}

.pb-accueil .offre-body h3 {
  font-size: 32px;
  line-height: 1.15;
  margin: 14px 0;
}

.pb-accueil .offre-body p {
  color: var(--muted);
  margin-bottom: 22px;
}

.pb-accueil .offre-features {
  margin-bottom: 28px;
}

.pb-accueil .offre-features li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 6px 0;
  font-size: 15px;
}

.pb-accueil .offre-features svg {
  flex-shrink: 0;
  margin-top: 4px;
}

.pb-accueil .offre-price {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}

.pb-accueil .offre-price-main {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}

.pb-accueil .offre-price-label {
  font-size: 13px;
  color: var(--muted);
}

.pb-accueil .offre-price-amount {
  font-family: var(--serif);
  font-size: 38px;
  font-weight: 500;
}

.pb-accueil .offre-price-detail {
  font-size: 13px;
  color: var(--muted);
  margin-left: auto;
  line-height: 1.4;
}

/* Pour qui — cards */
.pb-accueil .cases {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

.pb-accueil .case-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 16px;
  text-align: center;
  transition: all .25s ease;
  cursor: pointer;
}

.pb-accueil .case-card:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
}

.pb-accueil .case-icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 12px;
  color: var(--gold-dark);
}

.pb-accueil .case-card h4 {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

/* Pricing — formulas */
.pb-accueil .pricing-section {
  background: var(--cream);
}

.pb-accueil .formulas-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1080px;
  margin: 0 auto;
}

.pb-accueil .formula-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform .25s ease, border-color .2s ease, box-shadow .25s ease;
}

.pb-accueil .formula-card:hover {
  transform: translateY(-4px);
  border-color: rgba(201,161,74,0.5);
  box-shadow: 0 10px 30px rgba(14,16,33,0.06);
}

.pb-accueil .formula-card.featured {
  border: 2px solid var(--gold);
  background: #FBF7F0;
}

.pb-accueil .formula-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 100px;
  white-space: nowrap;
}

.pb-accueil .formula-tier {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--gold-dark);
  margin-bottom: 6px;
}

.pb-accueil .formula-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 8px;
}

.pb-accueil .formula-amount {
  font-family: var(--serif);
  font-size: 44px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.pb-accueil .formula-cur {
  font-family: var(--serif);
  font-size: 24px;
  color: var(--ink);
  font-weight: 500;
}

.pb-accueil .formula-tagline {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 20px;
  min-height: 36px;
}

.pb-accueil .formula-list {
  margin-bottom: 24px;
  flex: 1;
}

.pb-accueil .formula-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.5;
  padding: 6px 0;
  color: var(--ink-2);
}

.pb-accueil .formula-list li.muted {
  color: #B8B0A2;
}

.pb-accueil .formula-list svg {
  flex-shrink: 0;
  margin-top: 4px;
}

.pb-accueil .formulas-included {
  max-width: 1080px;
  margin: 48px auto 0;
  padding: 24px 28px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 12px;
  text-align: center;
}

.pb-accueil .formulas-included-title {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-dark);
  font-weight: 600;
  margin-bottom: 14px;
}

.pb-accueil .formulas-included-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: center;
  font-size: 14px;
  color: var(--ink-2);
}

.pb-accueil .formulas-included-list span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pb-accueil .formulas-options {
  text-align: center;
  margin-top: 32px;
}
.pb-accueil .formulas-options p {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 16px;
}
.pb-accueil .formulas-options p strong { color: var(--ink); }

/* Reviews */
.pb-accueil .reviews-section {
  background: var(--cream-2);
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

.pb-accueil .reviews-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 36px;
}

.pb-accueil .stars {
  display: flex;
  gap: 2px;
}

.pb-accueil .reviews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1080px;
  margin: 0 auto;
}

.pb-accueil .review {
  background: var(--cream);
  border-radius: 12px;
  padding: 26px;
  border: 1px solid var(--line);
}

.pb-accueil .review-stars {
  display: flex;
  gap: 2px;
  margin-bottom: 14px;
}

.pb-accueil .review-text {
  font-family: var(--serif);
  font-size: 16px;
  font-style: italic;
  line-height: 1.6;
  color: var(--ink-2);
  margin-bottom: 16px;
}

.pb-accueil .review-author {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}

/* Zones */
.pb-accueil .zones-section {
  background: var(--cream);
}

.pb-accueil .zones-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-width: 920px;
  margin: 0 auto;
}

.pb-accueil .zone-chip {
  background: var(--cream);
  border: 1px solid var(--line);
  padding: 8px 16px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  transition: all .2s;
  cursor: pointer;
}

.pb-accueil .zone-chip:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

.pb-accueil .zone-chip.principal {
  background: var(--ink-3);
  color: var(--cream);
  border-color: var(--ink-3);
}

.pb-accueil .socials {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 48px;
}

.pb-accueil .social {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease, box-shadow .2s ease;
}

.pb-accueil .social:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 6px 18px rgba(14,16,33,0.12);
}

.pb-accueil .social-wa { background: #25D366; }
.pb-accueil .social-mail { background: #E6E2DC; }
.pb-accueil .social-ig { background: #E1306C; }

/* FAQ */
.pb-accueil .faq-section {
  background: var(--cream);
  padding: 90px 0;
}

.pb-accueil .faq-list {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pb-accueil .faq-item {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.pb-accueil .faq-item[open] {
  border-color: rgba(201,161,74,0.4);
  box-shadow: 0 4px 18px rgba(14,16,33,0.05);
}

.pb-accueil .faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 24px;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  user-select: none;
}

.pb-accueil .faq-item summary::-webkit-details-marker {
  display: none;
}

.pb-accueil .faq-item summary::after {
  content: '+';
  font-family: var(--sans);
  font-size: 28px;
  color: var(--gold-dark);
  line-height: 1;
  font-weight: 300;
  transition: transform .25s ease;
  flex-shrink: 0;
}

.pb-accueil .faq-item[open] summary::after {
  transform: rotate(45deg);
}

.pb-accueil .faq-item p {
  padding: 0 24px 22px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
}

/* CTA final */
.pb-accueil .cta-final {
  background: var(--ink-3);
  color: var(--cream);
  text-align: center;
  padding: 100px 24px;
  position: relative;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

.pb-accueil .cta-final::before {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: rgba(201,161,74,0.10);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.pb-accueil .cta-final-content {
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin: 0 auto;
}

.pb-accueil .cta-final h2 {
  font-size: clamp(30px, 4vw, 44px);
  color: var(--cream);
  margin: 12px 0 16px;
}

.pb-accueil .cta-final p {
  color: rgba(248,245,241,0.78);
  margin-bottom: 32px;
  font-size: 17px;
}

.pb-accueil .cta-final-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Responsive accueil */
@media (max-width: 900px) {
  .pb-accueil .reassurance-grid { grid-template-columns: repeat(2, 1fr); }
  .pb-accueil .steps { grid-template-columns: 1fr; gap: 32px; }
  .pb-accueil .offre-card { grid-template-columns: 1fr; }
  .pb-accueil .offre-visual { min-height: 220px; }
  .pb-accueil .offre-body { padding: 32px 24px; }
  .pb-accueil .cases { grid-template-columns: repeat(2, 1fr); }
  .pb-accueil .formulas-grid { grid-template-columns: repeat(2, 1fr); }
  .pb-accueil .formulas-included-list { flex-direction: column; gap: 8px; }
  .pb-accueil .reviews { grid-template-columns: 1fr; }
  .pb-accueil section { padding: 64px 0; }
  .pb-accueil .hero { padding: 80px 0 70px; }
  .pb-accueil .faq-section { padding: 64px 0; }
}

@media (max-width: 540px) {
  .pb-accueil .reassurance-grid,
  .pb-accueil .cases,
  .pb-accueil .formulas-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Contenu principal des pages légales
   ========================================================================== */

main { padding: 60px 0 100px; }

.page-head {
  margin-bottom: 48px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}

.last-update {
  color: var(--muted);
  font-size: 14px;
  margin-top: 16px;
}

/* Encadré d'intro (utilisé sur la CGL) */
.intro-quote {
  background: var(--cream-2);
  border-left: 3px solid var(--gold);
  padding: 18px 24px;
  margin-bottom: 32px;
  border-radius: 0 8px 8px 0;
  font-size: 15px;
  color: var(--ink-2);
}

/* ==========================================================================
   Footer
   ========================================================================== */

footer {
  background: var(--ink-3);
  color: rgba(248,245,241,0.65);
  padding: 60px 0 24px;
}

.footer-bottom {
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px 24px 0;
  border-top: 1px solid #2A2520;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-bottom a {
  color: rgba(248,245,241,0.65);
}

.footer-bottom a:hover {
  color: var(--gold);
  text-decoration: none;
}

.footer-legal { display: flex; gap: 18px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
  .menu, .nav .btn-primary { display: none; }
  .menu-toggle { display: flex; }
}

@media (max-width: 700px) {
  h1 { font-size: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   ============== WORDPRESS / ELEMENTOR / ELEMENTSKIT OVERRIDES =============
   Tout ce qui n'est nécessaire QUE dans le contexte WordPress.
   Migré depuis le bloc <style id="pb-master-fixes"> qui était inline dans
   le content de chaque page. Centralisé ici → un seul endroit à maintenir,
   un seul chargement HTTP cacheable.
   ========================================================================== */

/* Cercles décoratifs hero/cta — couleur amber chaude (au lieu du gold pâle) */
.pb-accueil .hero::before { background: rgba(200,125,5,0.18) !important; }
.pb-accueil .hero::after  { background: rgba(200,125,5,0.10) !important; }
.pb-accueil .cta-final::before { background: rgba(200,125,5,0.10) !important; }

/* Logo plus grand — desktop */
.pb-header svg,
.elementor-location-header .elementor-widget-html svg {
  height: 56px !important;
  max-width: 280px !important;
  width: auto !important;
}
@media (max-width: 1024px) {
  .pb-header svg,
  .elementor-location-header .elementor-widget-html svg { height: 44px !important; }
}
@media (max-width: 540px) {
  .pb-header svg,
  .elementor-location-header .elementor-widget-html svg { height: 36px !important; }
}

/* Sticky header : position fixed (le parent .elementor a une hauteur figée
   qui casse position:sticky — d'où le passage en fixed). */
.ekit-template-content-header {
  position: fixed !important;
  top: 32px !important; /* admin bar WP */
  left: 0;
  right: 0;
  z-index: 9000 !important;
  width: 100% !important;
  background: rgba(248,245,241,0.92) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.08);
}
@media screen and (max-width: 782px) {
  .ekit-template-content-header { top: 46px !important; }
}
body:not(.admin-bar) .ekit-template-content-header { top: 0 !important; }

/* Compense le header fixed avec un padding-top sur le main */
body.home .site-main,
body.page-id-177 .site-main,
body.page-id-103 .site-main,
body.page-id-102 .site-main,
body.page-id-104 .site-main { padding-top: 97px !important; }
@media (max-width: 1024px) {
  body.home .site-main,
  body.page-id-177 .site-main,
  body.page-id-103 .site-main,
  body.page-id-102 .site-main,
  body.page-id-104 .site-main { padding-top: 80px !important; }
}
@media (max-width: 540px) {
  body.home .site-main,
  body.page-id-177 .site-main,
  body.page-id-103 .site-main,
  body.page-id-102 .site-main,
  body.page-id-104 .site-main { padding-top: 64px !important; }
}

/* Header compact */
.pb-header > .e-con-inner,
.pb-header.e-con > .e-con-inner,
.elementor-location-header .pb-header > .e-con-inner {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}
@media (max-width: 540px) {
  .pb-header > .e-con-inner,
  .pb-header.e-con > .e-con-inner {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
}

/* Cache la 2ème section Elementor vide en bas du header (artefact du template ElementsKit) */
.ekit-template-content-header > .elementor > .e-con-boxed:not(.pb-header),
.elementor-location-header .elementor-element-49006aa {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Desktop : hide hamburger, show menu */
.pb-header .elementskit-menu-hamburger,
.pb-header .elementskit-menu-toggler,
.elementor-location-header .elementskit-menu-hamburger,
.elementor-location-header .elementskit-menu-toggler { display: none !important; }

.pb-header .elementskit-navbar-nav,
.elementor-location-header .elementskit-navbar-nav {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  gap: 6px !important;
}
.pb-header .elementskit-navbar-nav > li,
.elementor-location-header .elementskit-navbar-nav > li {
  flex: 0 0 auto !important;
  width: auto !important;
}
.pb-header .elementskit-navbar-nav > li > a,
.elementor-location-header .elementskit-navbar-nav > li > a {
  padding: 8px 10px !important;
  font-size: 13px !important;
  white-space: nowrap !important;
  height: auto !important;
  line-height: 1.4 !important;
}

/* Mobile : aligne logo + hamburger sur la même ligne, cache menu desktop */
@media (max-width: 1024px) {
  .pb-header > .e-con-inner,
  .pb-header.e-con > .e-con-inner {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
  }
  .pb-header .elementskit-navbar-nav,
  .elementor-location-header .elementskit-navbar-nav { display: none !important; }
  .pb-header .elementor-widget-button,
  .pb-header .elementor-widget-elementskit-button { display: none !important; }
  .pb-header > .e-con-inner > .elementor-element:nth-child(3) { display: none !important; }
  .pb-header > .e-con-inner > .elementor-element:nth-child(1) {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 60% !important;
  }
  .pb-header > .e-con-inner > .elementor-element:nth-child(2) {
    flex: 0 0 auto !important;
    width: auto !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }
  .pb-header .elementskit-menu-hamburger,
  .pb-header .elementskit-menu-toggler,
  .elementor-location-header .elementskit-menu-hamburger,
  .elementor-location-header .elementskit-menu-toggler {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
  }
  .pb-accueil .hero { padding: 48px 0 56px !important; }
  .pb-accueil .hero-content { padding: 0 24px !important; }
  .pb-accueil .hero h1 { font-size: clamp(34px, 8vw, 48px) !important; margin: 14px 0 18px !important; }
  .pb-accueil .hero-lede { font-size: 16px !important; margin-bottom: 24px !important; }
}

/* Hamburger : bouton + traits empilés (3 spans) */
.elementskit-menu-hamburger,
.elementskit-menu-toggler {
  width: 42px !important;
  height: 42px !important;
  background: transparent !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  border-radius: 8px !important;
  padding: 0 !important;
  cursor: pointer !important;
  line-height: 0 !important;
  font-size: 0 !important;
  box-sizing: border-box !important;
}
.elementskit-menu-hamburger > .elementskit-menu-hamburger-icon,
.elementskit-menu-toggler > .elementskit-menu-hamburger-icon,
.elementskit-menu-hamburger-icon {
  display: block !important;
  background: #111 !important;
  height: 2px !important;
  width: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 2px !important;
  flex: 0 0 auto !important;
}

/* Cache le titre WP par défaut (entry-title) sur les pages où on a notre propre h1 */
body.page-id-177 .entry-title,
body.page-id-103 .entry-title,
body.page-id-102 .entry-title,
body.page-id-104 .entry-title,
body.page-id-177 .page-title,
body.page-id-103 .page-title,
body.page-id-102 .page-title,
body.page-id-104 .page-title,
body.page-id-177 .site-main > article > header,
body.page-id-103 .site-main > article > header,
body.page-id-102 .site-main > article > header,
body.page-id-104 .site-main > article > header { display: none !important; }

/* Pages légales : contenu aligné avec le page-head (max-width 880px centré) */
body.page-id-103 .page-content,
body.page-id-102 .page-content,
body.page-id-104 .page-content,
body.page-id-103 .entry-content,
body.page-id-102 .entry-content,
body.page-id-104 .entry-content {
  max-width: 880px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  padding-top: 0 !important;
}

/* Page head (titre + eyebrow + date) sur les pages légales */
.pb-page-head {
  max-width: 880px;
  margin: 48px auto 36px;
  padding: 0 0 24px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.pb-page-head .eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 2.5px;
  color: var(--gold-dark);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 12px;
}
.pb-page-head h1 {
  font-family: var(--serif);
  font-size: clamp(36px, 5vw, 52px);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  color: var(--ink);
}
.pb-page-head .last-update {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
  font-style: italic;
}

/* Encadré d'intro sur la CGL (préfixé pour éviter collision avec .intro-quote du mockup) */
.pb-intro-quote {
  max-width: 880px;
  margin: 0 auto 28px;
  padding: 18px 24px;
  background: var(--cream-2);
  border-left: 3px solid var(--gold);
  border-radius: 0 8px 8px 0;
  font-size: 15px;
  color: var(--ink-2);
}

/* Bouton WhatsApp flottant en bas à droite (toutes pages WP) */
.pb-wa-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 60px;
  height: 60px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 24px rgba(14,16,33,0.22);
  z-index: 9000;
  transition: transform .2s ease;
  text-decoration: none;
}
.pb-wa-float:hover { transform: scale(1.08); text-decoration: none; }
.pb-wa-float svg { width: 30px; height: 30px; fill: #fff; }
@media (max-width: 540px) {
  .pb-wa-float { width: 54px; height: 54px; bottom: 16px; right: 16px; }
  .pb-wa-float svg { width: 26px; height: 26px; }
}

/* ============================================================
   Complianz cookie banner — déplacer la pastille flottante à gauche
   pour qu'elle ne se superpose pas au bouton WhatsApp (qui reste à droite).
   ============================================================ */
.cmplz-manage-consent,
.cmplz-cookiebanner-show,
button.cmplz-manage-consent-container,
.cmplz-cookiebanner .cc-bottom.cc-banner.cc-floating {
  left: 24px !important;
  right: auto !important;
  bottom: 24px !important;
}
@media (max-width: 540px) {
  .cmplz-manage-consent,
  .cmplz-cookiebanner-show,
  button.cmplz-manage-consent-container {
    left: 16px !important;
    bottom: 16px !important;
  }
}

/* ============================================================
   Fluent Forms — formulaire de devis (id=3)
   Styling cohérent avec la charte cream/navy/amber, dans le popup et inline.
   ============================================================ */
.pb-quote-form-wrap .frm-fluent-form,
.cta-final-form .frm-fluent-form {
  max-width: 640px;
  margin: 0 auto;
  text-align: left;
}
.pb-quote-form-wrap .ff-el-group,
.cta-final-form .ff-el-group {
  margin-bottom: 16px;
}
.pb-quote-form-wrap .ff-el-input--label,
.cta-final-form .ff-el-input--label {
  text-align: left;
  margin-bottom: 6px;
}
.pb-quote-form-wrap .ff-el-input--label label,
.cta-final-form .ff-el-input--label label {
  color: var(--cream);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.pb-quote-form-wrap input[type="text"],
.pb-quote-form-wrap input[type="email"],
.pb-quote-form-wrap input[type="tel"],
.pb-quote-form-wrap input[type="date"],
.pb-quote-form-wrap input[type="number"],
.pb-quote-form-wrap select,
.pb-quote-form-wrap textarea,
.cta-final-form input[type="text"],
.cta-final-form input[type="email"],
.cta-final-form input[type="tel"],
.cta-final-form input[type="date"],
.cta-final-form input[type="number"],
.cta-final-form select,
.cta-final-form textarea {
  background: var(--cream);
  color: var(--ink-3);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pb-quote-form-wrap input:focus,
.pb-quote-form-wrap select:focus,
.pb-quote-form-wrap textarea:focus,
.cta-final-form input:focus,
.cta-final-form select:focus,
.cta-final-form textarea:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(200,125,5,0.18);
}
.pb-quote-form-wrap textarea,
.cta-final-form textarea { min-height: 100px; resize: vertical; }
/* Sélecteurs multiples pour battre n'importe quel override Fluent Forms / Elementor.
   On targe TOUS les boutons submit possibles dans le wrap. */
.pb-quote-form-wrap .ff-btn,
.pb-quote-form-wrap button.ff-btn,
.pb-quote-form-wrap button.ff-btn-submit,
.pb-quote-form-wrap button[type="submit"],
.pb-quote-form-wrap input[type="submit"],
.cta-final-form .ff-btn,
.cta-final-form button.ff-btn,
.cta-final-form button.ff-btn-submit,
.cta-final-form button[type="submit"],
.cta-final-form input[type="submit"] {
  background: #c87d05 !important;
  background-color: #c87d05 !important;
  background-image: none !important;
  color: #0e1021 !important;
  border: none !important;
  border-radius: 100px !important;
  padding: 14px 36px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  cursor: pointer !important;
  margin-top: 8px !important;
  font-family: inherit !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
  box-shadow: 0 8px 24px rgba(200,125,5,0.25) !important;
  text-shadow: none !important;
  min-width: 200px !important;
}
.pb-quote-form-wrap .ff-btn:hover,
.pb-quote-form-wrap button.ff-btn-submit:hover,
.pb-quote-form-wrap button[type="submit"]:hover,
.cta-final-form .ff-btn:hover,
.cta-final-form button.ff-btn-submit:hover,
.cta-final-form button[type="submit"]:hover {
  transform: translateY(-2px);
  background: #b06d04 !important;
  background-color: #b06d04 !important;
  box-shadow: 0 12px 30px rgba(200,125,5,0.35) !important;
}
.pb-quote-form-wrap .ff-el-is-error .text-danger,
.cta-final-form .ff-el-is-error .text-danger {
  color: #ffb8b8;
  font-size: 13px;
}
.pb-quote-form-wrap .ff-message-success,
.cta-final-form .ff-message-success {
  background: rgba(200,125,5,0.18);
  color: var(--cream);
  border: 1px solid var(--amber);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}

/* ============================================================
   Popup devis — overlay au clic sur "Demander un devis"
   `!important` car Elementor / Hello Elementor / Fluent Forms
   peuvent surcharger `display` sur des `<div>` génériques.
   ============================================================ */
.pb-quote-modal {
  position: fixed !important;
  inset: 0;
  z-index: 99998;
  background: rgba(10,12,28,0.85);
  display: none !important;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
body.pb-quote-modal-open { overflow: hidden; }
.pb-quote-modal.is-open { display: flex !important; }

/* Quand le popup est ouvert : on cache TOUT ce qui ressemble à du Complianz
   ou à du flottant fixed bas-de-page, pour ne rien laisser couvrir
   le bouton Envoyer du formulaire. Sélecteur large par préfixe. */
body.pb-quote-modal-open [class*="cmplz-"],
body.pb-quote-modal-open [id*="cmplz-"],
body.pb-quote-modal-open .cmplz-manage-consent,
body.pb-quote-modal-open .cmplz-cookiebanner,
body.pb-quote-modal-open .cmplz-cookiebanner-show,
body.pb-quote-modal-open button.cmplz-manage-consent-container,
body.pb-quote-modal-open .cmplz-cookiebanner.cc-floating,
body.pb-quote-modal-open #cmplz-manage-consent,
body.pb-quote-modal-open .pb-wa-float {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
/* sauf le popup lui-même — au cas où on aurait par erreur catch quelque chose
   à l'intérieur. Le modal a son propre id/classe propre, pas en cmplz. */
.pb-quote-modal-inner {
  background: var(--ink-3);
  border-radius: 16px;
  max-width: 720px;
  width: 100%;
  padding: 40px 28px 56px;   /* bottom padding élargi pour bien dégager le bouton Envoyer */
  position: relative;
  margin: 0 auto;            /* pas de margin auto vertical : le flex-start gère le placement */
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  animation: pbQuoteIn .25s ease-out;
}
.pb-quote-modal-inner .pb-quote-form-wrap {
  /* dernier élément : on s'assure que le bouton submit a de l'air sous lui */
  padding-bottom: 8px;
}
.pb-quote-modal-inner .ff-el-group.ff_submit_btn_wrapper,
.pb-quote-modal-inner .ff-t-cell.ff-t-submit-btn,
.pb-quote-modal-inner .ff_submit_btn_wrapper {
  margin-top: 12px;
  margin-bottom: 0;
  text-align: center;
}
@keyframes pbQuoteIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.pb-quote-modal-head { text-align: center; margin-bottom: 24px; }
.pb-quote-modal-head .eyebrow {
  display: inline-block;
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.pb-quote-modal-head h2 {
  color: var(--cream);
  font-family: 'Fraunces', serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 6px;
}
.pb-quote-modal-head p {
  color: rgba(248,245,241,0.7);
  font-size: 15px;
  margin: 0;
}
.pb-quote-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  background: rgba(248,245,241,0.08);
  border: none;
  border-radius: 50%;
  color: var(--cream);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease;
}
.pb-quote-modal-close:hover { background: rgba(248,245,241,0.18); }
@media (max-width: 540px) {
  .pb-quote-modal { padding: 12px; }
  .pb-quote-modal-inner { padding: 28px 18px 22px; border-radius: 14px; }
  .pb-quote-modal-head h2 { font-size: 24px; }
}

/* Drawer mobile custom (créé dynamiquement par photobooth.js sur mobile) */
.pb-mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 88vw);
  max-width: 320px;
  height: 100vh;
  height: 100dvh;
  background: var(--cream);
  box-shadow: -8px 0 30px rgba(14,16,33,0.18);
  z-index: 99999;
  transform: translateX(110%);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  flex-direction: column;
  padding: 24px;
  overflow-y: auto;
}
body.pb-drawer-open .pb-mobile-drawer { transform: translateX(0); }
.pb-mobile-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}
.pb-mobile-drawer-logo {
  font-family: 'Archivo Black', sans-serif;
  font-size: 14px;
  letter-spacing: 1.5px;
  color: var(--ink-3);
}
.pb-mobile-drawer-logo span {
  display: block;
  font-size: 9px;
  color: var(--gold);
  letter-spacing: 2px;
  margin-top: 2px;
}
.pb-mobile-drawer-close {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(0,0,0,0.08);
  background: transparent;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
  padding: 0;
}
.pb-mobile-drawer-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pb-mobile-drawer-list li { margin: 0; }
.pb-mobile-drawer-list a {
  display: block;
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  border-radius: 8px;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
  font-family: var(--sans);
}
.pb-mobile-drawer-list a:hover,
.pb-mobile-drawer-list a:active {
  background: var(--cream-2);
  color: var(--gold-dark);
}
.pb-mobile-drawer-cta {
  margin-top: auto;
  background: var(--gold);
  color: var(--ink-3);
  padding: 14px 20px;
  border-radius: 8px;
  font-weight: 600;
  text-align: center;
  font-size: 14px;
  text-decoration: none;
  font-family: var(--sans);
  transition: background .2s ease, color .2s ease;
}
.pb-mobile-drawer-cta:hover,
.pb-mobile-drawer-cta:active {
  background: var(--gold-dark);
  color: var(--cream);
  text-decoration: none;
}
.pb-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(14,16,33,0.55);
  z-index: 99998;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
body.pb-drawer-open .pb-drawer-backdrop { opacity: 1; visibility: visible; }
body.pb-drawer-open { overflow: hidden !important; }
@media (min-width: 1025px) {
  .pb-mobile-drawer,
  .pb-drawer-backdrop { display: none !important; }
}