/** Shopify CDN: Minification failed

Line 796:8 Expected identifier but found whitespace
Line 796:9 Unexpected "1px"

**/
:root {
  --noir: #0C0C0C;
  --blanc: #F8F6F3;
  --gris-bloc: #F2F0ED;
  --gris-mid: #E0DDD8;
  --gris-sep: #C8C4BC;
  --gris-txt: #6A6560;
  --or: #B09070;
  --rouge: #8B2020;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --display: 'Queens', Georgia, serif;
  --sans: 'Josefin Sans', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--blanc); color: var(--noir); font-family: var(--serif); font-weight: 300; overflow-x: hidden; }
img { display: block; max-width: 100%; }

/* ════════════════════════════════
   HERO
════════════════════════════════ */
.hero {
  background: var(--noir);
  height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* Overlay noir qui s'estompe au scroll */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: var(--noir);
  z-index: 1;
  opacity: 0;
  transition: opacity 0.1s;
  pointer-events: none;
}
.hero-inner {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  text-align: center;
  position: relative;
  z-index: 2;
}
/* BIENVENUE — serif élégant, taille calibrée pour aligner avec la ligne dessous */
.hero-title {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  color: #fff;
  letter-spacing: 20.8px;
  text-transform: uppercase;
  opacity: 0;
  animation: revealTitle 2.4s 0.3s cubic-bezier(0.16,1,0.3,1) forwards;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 0 40px rgba(255,255,255,0.35), 0 0 80px rgba(255,255,255,0.12);
}
/* ESPACE SYLVIA RIELLE — même largeur visuelle que BIENVENUE */
.hero-brand {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 200;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  opacity: 0;
  animation: revealBrand 2s 1.6s cubic-bezier(0.16,1,0.3,1) forwards;
  line-height: 1;
  white-space: nowrap;
}
.hero-brand strong { font-weight: 300; color: rgba(255,255,255,0.75); letter-spacing: 5px; text-shadow: 0 0 30px rgba(255,255,255,0.25); }
.hero-scroll {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--sans);
  font-size: 7px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0;
  animation: fadeIn 1.5s 3.2s forwards;
}
.hero-scroll::after {
  content: '';
  width: 1px; height: 32px;
  background: rgba(255,255,255,0.15);
  animation: scrollLine 2s 1.6s infinite;
}

/* ════════════════════════════════
   INTRO
════════════════════════════════ */
.intro-section {
  padding: 72px 6vw 56px;
  text-align: center;
  border-bottom: 1px solid var(--gris-mid);
}
.intro-welcome { font-size: 15px; color: var(--gris-txt); margin-bottom: 4px; line-height: 1.7; }
.intro-wish { font-size: clamp(24px, 3.5vw, 40px); font-weight: 300; line-height: 1.35; margin-bottom: 48px; }
.intro-wish em { font-style: italic; color: var(--gris-txt); }

/* Guide box — "guide interactif" collé contre le trait vertical */
.guide-box {
  display: flex;
  align-items: stretch;
  max-width: 680px;
  margin: 0 auto 36px;
  background: var(--gris-bloc);
  border: 1px solid var(--gris-mid);
  text-align: left;
}
.guide-left {
  padding: 36px 20px 36px 40px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.guide-kw {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 300;
  line-height: 1.1;
  color: var(--noir);
  text-align: right;
  white-space: nowrap;
}
.guide-kw em { display: block; font-style: italic; }
.guide-vline {
  width: 1px;
  background: var(--gris-sep);
  flex-shrink: 0;
  margin: 20px 0;
}
.guide-right {
  padding: 36px 40px 36px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.guide-desc { font-size: 13px; line-height: 1.85; color: var(--gris-txt); font-style: italic; }
.guide-tags { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.guide-tag { font-family: var(--sans); font-size: 8px; letter-spacing: 2px; text-transform: uppercase; color: var(--gris-txt); }

/* "Nous vous recommandons" — fond or très léger + pulse */
.intro-recommend {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(102,20,20,0.35);
  background: rgba(102,20,20,0.12);
  padding: 13px 28px 13px 20px;
  font-size: 15px;
  color: var(--noir);
  margin-bottom: 32px;
  font-weight: 400;
}
.intro-recommend-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #881818;
  flex-shrink: 0;
  animation: dotPulse 2s 1.5s ease-in-out infinite;
}
@keyframes recommendAppear { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes dotPulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.3; transform:scale(1.7); } }

.intro-close { font-size: 14px; line-height: 1.9; color: var(--gris-txt); max-width: 500px; margin: 0 auto; }
.intro-close strong { color: var(--noir); font-weight: 500; }

/* ════════════════════════════════
   EMPREINTE
════════════════════════════════ */
.empreinte-section {
  background: var(--gris-bloc);
  border-bottom: 1px solid var(--gris-mid);
  padding: 80px 6vw 72px;
  text-align: center;
}
.empr-pretitle { font-family: var(--sans); font-size: 8px; letter-spacing: 4px; text-transform: uppercase; color: var(--gris-txt); margin-bottom: 20px; }

/* "OBTENIR VOTRE CODE D'ACCÈS" — Playfair Display comme capture */
.empr-title {
  font-family: var(--display);
  font-size: clamp(48px, 9vw, 110px);
  font-weight: 400;
  font-style: normal;
  line-height: 1.0;
  letter-spacing: -1px;
  text-transform: uppercase;
  margin-bottom: 16px;
  color: var(--noir);
}
.empr-sub { font-size: 12px; color: var(--gris-txt); margin-bottom: 28px; letter-spacing: 0.3px; }
.empr-mandatory { font-family: var(--sans); font-size: 8px; letter-spacing: 4px; text-transform: uppercase; color: var(--or); margin-bottom: 36px; }

/* Carte noire — "Pour sécuriser..." — italic Playfair comme capture */
.empr-card {
  position: relative;
  background: var(--noir);
  padding: 40px 56px;
  max-width: 780px;
  margin: 0 auto 36px;
  font-family: var(--display);
  font-size: clamp(20px, 2.8vw, 30px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.55;
  color: #fff;
}
.empr-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--or); }
.empr-card::after  { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--or); }

.empr-icons { display: flex; justify-content: center; max-width: 400px; margin: 0 auto 28px; }
.empr-icon-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 16px; position: relative; }
.empr-icon-item:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 10%; bottom: 10%; width: 1px; background: var(--gris-sep); }
.empr-icon { font-size: 20px; color: var(--gris-txt); }
.empr-icon-label { font-family: var(--sans); font-size: 8px; letter-spacing: 1px; text-transform: uppercase; color: var(--gris-txt); text-align: center; line-height: 1.5; }
.empr-body { font-size: 13px; line-height: 1.8; color: #4A4540; max-width: 520px; margin: 0 auto 32px; text-align: left; background: rgba(0,0,0,0.04); border-left: 3px solid var(--noir); padding: 10px 14px; }
.btn-dark { display: inline-flex; align-items: center; gap: 10px; background: #881818; color: #fff; font-family: var(--sans); font-size: 9px; letter-spacing: 4px; text-transform: uppercase; padding: 16px 40px; text-decoration: none; cursor: pointer; border: none; transition: background 0.3s, transform 0.3s; margin-bottom: 20px; animation: pulse-btn 2s ease-in-out infinite; }
.btn-dark::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; flex-shrink: 0; animation: dotPulse 1.4s ease-in-out infinite; }
.btn-dark:hover { background: #6a1010; transform: scale(1.02); }
@keyframes pulse-btn { 0%,100% { box-shadow: 0 0 0 0 rgba(136,24,24,0.5); } 50% { box-shadow: 0 0 0 10px rgba(136,24,24,0); } }
.empr-note { font-size: 12px; color: var(--gris-txt); max-width: 420px; margin: 0 auto; }
.empr-note strong { color: var(--noir); }

/* ════════════════════════════════
   OPTIONS
════════════════════════════════ */
.options-section { padding: 80px 6vw 72px; background: var(--blanc); border-bottom: 1px solid var(--gris-mid); }
.options-header { text-align: center; margin-bottom: 52px; }
.options-title { font-size: clamp(18px, 2.5vw, 26px); font-weight: 300; letter-spacing: 2px; margin-bottom: 8px; }
.options-title em { font-style: italic; color: var(--gris-txt); }
.options-sub { font-size: 14px; color: var(--gris-txt); line-height: 1.7; }

/* Percement (3fr) bien plus grand que Nettoyage (2fr) */
.options-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 24px; max-width: 1100px; margin: 0 auto; align-items: start; }
.option-card { background: var(--gris-bloc); border: 1px solid var(--gris-mid); padding: 36px 32px; }
.option-card.primary { padding: 52px 44px; }
.opt-num { font-family: var(--sans); font-size: 7px; letter-spacing: 4px; text-transform: uppercase; color: var(--gris-txt); margin-bottom: 12px; }
.opt-title { font-family: var(--display); font-size: clamp(20px, 2.5vw, 28px); font-weight: 400; font-style: italic; margin-bottom: 10px; line-height: 1.15; }
.opt-tagline { font-size: 16px; font-style: italic; color: var(--gris-txt); margin-bottom: 14px; }
/* Slogan "Percez, installez, créez." */
.opt-slogan { font-family: var(--display); font-size: clamp(28px, 4vw, 52px); font-style: italic; font-weight: 400; color: var(--noir); margin: 20px 0 24px; line-height: 1.05; letter-spacing: -1px; display: block; }
.opt-slogan.visible {
  background: linear-gradient(90deg, var(--noir) 0%, var(--noir) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
/* Animation de trait soulignant qui glisse */
.opt-note { font-size: 12px; color: #4A4540; line-height: 1.7; margin: 0 0 24px; font-style: normal; background: rgba(0,0,0,0.04); border-left: 3px solid var(--noir); padding: 10px 14px; }
.opt-slogan-wrap {
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.opt-slogan-wrap::after {
  content: '';
  position: absolute;
  bottom: 4px; left: 0;
  width: 0; height: 2px;
  background: var(--noir);
  transition: width 1.2s cubic-bezier(0.16,1,0.3,1) 0.2s;
}
.opt-slogan-wrap.visible::after { width: 100%; }
.opt-body { font-size: 13px; line-height: 1.85; color: var(--gris-txt); margin-bottom: 14px; }
.opt-steps { display: flex; flex-wrap: wrap; gap: 5px 0; align-items: center; margin-bottom: 16px; font-size: 11px; color: var(--gris-txt); }
.opt-step-sep { margin: 0 6px; color: var(--gris-mid); }
.opt-price-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.opt-price-tag { border: 1px solid var(--gris-sep); background: #fff; padding: 7px 16px; font-size: 13px; }
.btn-opt { display: inline-block; background: var(--noir); color: #fff; font-family: var(--sans); font-size: 8px; letter-spacing: 3px; text-transform: uppercase; padding: 10px 20px; text-decoration: none; transition: background 0.3s; cursor: pointer; border: none; }
.btn-opt:hover { background: #333; }
.opt-warning { font-size: 12px; color: var(--gris-txt); line-height: 1.7; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--gris-mid); }
.opt-warning strong { color: var(--noir); }

/* ════════════════════════════════
   REMERCIEMENTS
════════════════════════════════ */
.thanks-section { background: var(--noir); color: #fff; padding: 80px 6vw 64px; text-align: center; }


/* Logo dans guide-header */
.guide-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 32px;
}
.guide-logo-text {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 8px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  font-weight: 200;
  display: block;
  margin-bottom: 6px;
}
.guide-logo-address {
  font-family: var(--sans);
  font-size: 8px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.25);
  display: block;
}
/* Picto ⚠ SVG pour b03/b04 */
.esr-warn-icon {
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  letter-spacing: 0 !important;
  display: block !important;
  margin-bottom: 14px !important;
}
/* b03/b04 .n géré par .esr-warn-num */

/* ════════════════════════════════
   GUIDE — SECTION & BLOCS ACCORDÉON
════════════════════════════════ */
.guide-section {
  background: #111;
  padding: 80px 0 0;
}
.guide-header {
  text-align: center;
  padding: 0 6vw 64px;
}
.guide-eyebrow {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 7px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  display: block;
  margin-bottom: 18px;
}
.guide-h2 {
  font-family: var(--display);
  font-size: clamp(40px, 7vw, 96px);
  font-style: italic;
  font-weight: 400;
  color: #fff;
  letter-spacing: -1px;
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0;
}
/* Grille 2x2 grands blocs */
.esr-maj-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: #2c2c2c;
  border-top: 1px solid #2c2c2c;
}
/* Rangée petits blocs */
.esr-min-row {
  background: #E8E4DF;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: #2c2c2c;
  border-top: 1px solid #2c2c2c;
}
.esr-sep { height: 1px; background: #d8d4cf; }

/* Bloc commun */
.esr-bloc { background: #111; overflow: hidden; }
.esr-bloc-min { background: #E8E4DF; }

/* Bouton fermé — grand */
.esr-btn {
  width: 100%; background: transparent; border: none;
  cursor: pointer; display: flex; flex-direction: column;
  text-align: left; transition: background 0.25s;
}
.esr-btn:hover { background: rgba(255,255,255,0.04); }
.esr-btn:hover .n { color: #FEF5F7; transition: color 0.3s; }
.esr-btn-maj {
  padding: 30px 36px 26px;
  min-height: 210px;
  justify-content: space-between;
}
.esr-btn-maj .n {
  font-family: var(--display);
  font-size: clamp(40px, 5vw, 64px);
  font-style: italic;
  font-weight: 400;
  color: rgba(255,255,255,0.22);
  display: block;
  margin-bottom: 10px;
  letter-spacing: -1px;
  line-height: 1;
  transition: color 0.3s;
}
.esr-btn-maj .t {
  font-family: var(--display);
  font-size: clamp(26px, 2.8vw, 46px);
  font-style: italic; font-weight: 400;
  color: rgba(255,255,255,0.88);
  letter-spacing: -0.5px; line-height: 1.05;
  flex: 1; display: block;
}
.esr-btn-maj .a {
  font-size: 22px; color: rgba(255,255,255,0.3);
  align-self: flex-end; margin-top: 18px;
  transition: transform 0.35s, color 0.35s; display: block;
}
/* Bouton fermé — petit */
.esr-btn-min {
  padding: 18px 16px 14px;
  min-height: 82px;
  justify-content: space-between;
}
.esr-btn-min .n {
  font-family: var(--sans); font-size: 9px; letter-spacing: 3px;
  color: rgba(0,0,0,0.4); display: inline-block; margin-bottom: 7px;
  background: rgba(0,0,0,0.06); padding: 2px 7px; border-radius: 20px;
}
.esr-btn-min .t {
  font-family: var(--sans); font-size: 8.5px; font-weight: 300;
  letter-spacing: 3.5px; text-transform: uppercase;
  color: rgba(0,0,0,0.55); display: block; line-height: 1.45;
}
.esr-btn-min .a {
  font-size: 13px; color: rgba(0,0,0,0.2);
  align-self: flex-end; margin-top: 7px;
  transition: transform 0.35s, color 0.35s; display: block;
}
/* État ouvert — grands blocs noirs */
.esr-bloc.open .esr-btn { background: rgba(255,255,255,0.05); }
.esr-bloc.open .a { transform: rotate(45deg) !important; color: rgba(255,255,255,0.5) !important; }
.esr-bloc.open .t { color: #fff !important; }
.esr-bloc.open .n { color: rgba(255,255,255,0.38) !important; }
/* État ouvert — blocs grille gris */
.esr-bloc-mode.open .esr-btn, .esr-bloc-large.open .esr-btn { background: rgba(0,0,0,0.05); }
.esr-bloc-mode.open .a, .esr-bloc-large.open .a { color: rgba(0,0,0,0.4) !important; }
.esr-bloc-mode.open .t, .esr-bloc-large.open .t { color: #111 !important; }
.esr-bloc-mode.open .n, .esr-bloc-large.open .n { color: rgba(0,0,0,0.3) !important; }

/* Panneau intérieur */
.esr-panel {
  max-height: 0; overflow: hidden;
  transition: max-height 0.65s cubic-bezier(0.16,1,0.3,1);
  background: #111;
}
/* Blocs pleine largeur : affichage classique via max-height */
.esr-bloc.open .esr-panel { max-height: 5000px; }
/* Blocs grille : panel caché - c'est le drawer qui affiche leur contenu */
.esr-bloc-mode.open .esr-panel,
.esr-bloc-large.open .esr-panel,
.esr-bloc-min.open .esr-panel { max-height: 0 !important; }

/* Drawer : zone d'affichage sous la rangée */
.esr-drawer {
  background: #e8e4df;
  border-top: 1px solid #d8d4cf;
  width: 100%;
  overflow: hidden;
}


/* Fond noir bas */
.guide-foot { background: #F0EDE9; height: 48px; }




/* Titre blocs avertissement — blanc clair lisible */
#b03 .t, #b04 .t {
  color: rgba(255,255,255,0.88) !important;
}
#b03.open .t, #b04.open .t {
  color: #fff !important;
}
/* Emoji ⚠ dans le .n pour b03/b04 — grand et visible */
#b03 .n, #b04 .n {
  font-size: clamp(40px, 5vw, 64px);
  background: none;
  padding: 0;
  border-radius: 0;
  color: rgba(255,255,255,0.35);
  letter-spacing: -1px;
  margin-bottom: 10px;
}
/* Fond légèrement teinté */


/* Label de section entre rangées */
.esr-row-label {
  background: #F0EDE9;
  padding: 28px 36px 12px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.esr-row-label-text {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: rgba(0,0,0,0.45);
  white-space: nowrap;
}
.esr-row-label-rule {
  flex: 1;
  height: 1px;
  background: rgba(0,0,0,0.12);
}

/* Rangée 6 modes d'emploi */
.esr-modes-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: #d8d4cf;
  border-top: 1px solid #d8d4cf;
}
.esr-bloc-mode { background: #F0EDE9; }
.esr-btn-mode {
  padding: 18px 16px 14px;
  min-height: 100px;
  justify-content: space-between;
}
.esr-btn-mode .n {
  font-family: var(--sans); font-size: 20px; letter-spacing: 1px;
  color: rgba(0,0,0,0.5); display: block; margin-bottom: 10px;
  line-height: 1;
}
.esr-btn-mode .t {
  font-family: var(--sans); font-size: 10px; font-weight: 500;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(0,0,0,0.65); display: block; line-height: 1.5;
}
.esr-btn-mode .a {
  font-size: 14px; color: rgba(0,0,0,0.25);
  align-self: flex-end; margin-top: 8px;
  transition: transform 0.35s, color 0.35s; display: block;
}

/* Rangée 3 grands blocs larges */
.esr-large-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: #d8d4cf;
  border-top: 1px solid #d8d4cf;
}
.esr-bloc-large { background: #F0EDE9; }
.esr-btn-large {
  padding: 26px 26px 22px;
  min-height: 130px;
  justify-content: space-between;
}
.esr-btn-large .n {
  font-family: var(--sans); font-size: 10px; letter-spacing: 4px;
  color: rgba(0,0,0,0.4); display: inline-block; margin-bottom: 12px;
  background: rgba(0,0,0,0.06); padding: 3px 9px; border-radius: 20px;
}
.esr-btn-large .t {
  font-family: var(--display); font-size: clamp(20px, 1.8vw, 28px);
  font-style: italic; font-weight: 400;
  color: rgba(0,0,0,0.75); letter-spacing: -0.3px;
  display: block; line-height: 1.1; flex: 1;
}
.esr-btn-large .a {
  font-size: 18px; color: rgba(0,0,0,0.2);
  align-self: flex-end; margin-top: 14px;
  transition: transform 0.35s, color 0.35s; display: block;
}

@media (max-width: 800px) {
  /* Grille modes : 2 colonnes sur mobile au lieu de 3 */
  .esr-modes-row { grid-template-columns: repeat(2, 1fr); }
  .esr-large-row { grid-template-columns: 1fr; }
  /* Boutons mode plus grands sur mobile */
  .esr-btn-mode { min-height: 110px; padding: 20px 18px 16px; }
  .esr-btn-mode .n { font-size: 22px; }
  .esr-btn-mode .t { font-size: 11px; letter-spacing: 1px; }
  /* Boutons large plus présents */
  .esr-btn-large { min-height: 110px; padding: 24px 22px 20px; }
  .esr-btn-large .t { font-size: clamp(18px, 5vw, 26px); }
}

@media (max-width: 800px) {
  .esr-maj-grid { grid-template-columns: 1fr; }
  .esr-min-row { grid-template-columns: repeat(3,1fr); }
  .esr-btn-maj { min-height: 160px; padding: 26px 28px 22px; }
  .esr-btn-maj .t { font-size: clamp(26px, 7vw, 38px); }
  .guide-h2 { font-size: clamp(32px,10vw,56px); }
  /* Footer contacts : 2 colonnes sur mobile */
  .thanks-contacts { max-width: 100%; }
  .thanks-contact-card { min-width: 140px; padding: 24px 16px; }
  .thanks-contact-icon { font-size: 20px; }
  .thanks-contact-val { font-size: 12px; }
}

@media (max-width: 480px) {
  /* Très petit écran : modes en 2 colonnes serrées */
  .esr-modes-row { grid-template-columns: repeat(2, 1fr); }
  .esr-btn-mode { min-height: 100px; }
  /* Contacts empilés */
  .thanks-contacts { flex-direction: column; border: none; gap: 1px; }
  .thanks-contact-card { width: 100%; min-width: unset; border: 1px solid rgba(255,255,255,0.08); }
  .thanks-contact-sep { display: none; }
}

/* ════ PANNEAU KEYBOX ════ */
.gt-panel-keybox {
  padding: 0;
  background: #F8F5F2;
}
.kbsec {
  padding: 44px 5vw 40px;
}
.kbsec-title {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 7px;
  text-transform: uppercase;
  color: var(--noir);
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gris-mid);
}
.kbdivider {
  height: 1px;
  background: var(--gris-mid);
  margin: 0 5vw;
}

/* Rangée photo + textes côte à côte */
.kbrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 28px;
  align-items: start;
}
.kbphoto {
  background: var(--gris-mid);
  overflow: hidden;
  border-radius: 2px;
}
.kbphoto img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.kbphoto-sm { max-height: 180px; }

.kbtexts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  height: 100%;
}

/* Blocs texte colorés */
.kbbox {
  font-family: var(--serif);
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--noir);
  padding: 12px 16px;
  border-radius: 2px;
}
.kbbox.pink {
  background: #F4F3F1;
  border-left: 3px solid var(--rouge);
  color: #5a1a1a;
}
.kbbox.small {
  font-size: 12px;
  background: #F0EDEA;
  border-left: 2px solid #c9b8b0;
  color: var(--gris-txt);
}
.kbbox.warning {
  background: #FFF4E0;
  border-left: 3px solid #C07800;
  color: #7a4a00;
  font-size: 12.5px;
}
.kbbox.center { text-align: center; }

/* Double colonne pour les paires de photos */
.kbrow-double {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
.kbcol {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (max-width: 680px) {
  .kbrow, .kbrow-double { grid-template-columns: 1fr; }
  .kbsec { padding: 28px 5vw 24px; }
}


/* ════ FOOTER REMERCIEMENTS ════ */
.thanks-section {
  background: var(--noir);
  color: #fff;
  padding: 80px 6vw 0;
  text-align: center;
  overflow: hidden;
}
.thanks-eyebrow {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  display: block;
  margin-bottom: 20px;
}
.thanks-title {
  font-family: var(--display);
  font-size: clamp(38px, 5.5vw, 72px);
  font-style: italic;
  font-weight: 400;
  color: #fff;
  line-height: 1.1;
  margin: 0 0 24px;
  text-shadow: 0 0 60px rgba(255,255,255,0.08);
}
.thanks-body {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.9;
  color: rgba(255,255,255,0.65);
  max-width: 540px;
  margin: 0 auto 40px;
  font-weight: 300;
}
.thanks-sep {
  width: 40px;
  height: 1px;
  background: rgba(255,255,255,0.2);
  margin: 0 auto 40px;
}
.thanks-contacts {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 0;
  flex-wrap: wrap;
  max-width: 100%;
  margin: 0 -6vw 0;
  background: #F0EDE9;
  border-top: 1px solid #d8d4cf;
}
.thanks-contact-card {
  flex: 1;
  min-width: 160px;
  padding: 32px 24px;
  text-align: center;
  overflow: hidden;
}
.thanks-contact-val {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 1px;
  color: #111 !important;
  text-decoration: none !important;
  display: block;
  line-height: 1.5;
  word-break: break-all;
  overflow-wrap: break-word;
}
  width: 1px;
  background: #d8d4cf;
  align-self: stretch;
}
.thanks-contact-icon { font-size: 22px; color: #6a6560; margin-bottom: 10px; opacity: 0.8; }
.thanks-contact-label {
  font-family: var(--sans);
  font-size: 8px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #9a8e85;
  display: block;
  margin-bottom: 8px;
}
a.thanks-contact-val,
a.thanks-contact-val:visited,
a.thanks-contact-val:hover {
  color: #111 !important;
  text-decoration: none !important;
}
.thanks-address {
  padding-bottom: 0;
  font-family: var(--sans);
  font-size: 8px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-top: 32px;
}

/* ════ INTRO GUIDE ════ */
.guide-intro {
  background: #F4F3F1;
  padding: 0 6vw 0;
}
.guide-intro-inner {
  max-width: 680px;
  margin: 0 auto;
  padding: 48px 0 52px;
  text-align: center;
  border-bottom: 1px solid #E2E0DC;
}
.guide-intro-text {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 2.05;
  color: #1a1410;
  font-weight: 300;
  font-weight: 300;
}
.guide-intro-text strong {
  color: var(--rouge);
  font-weight: 400;
}


/* ════ BANDEAUX PERCEMENT + NETTOYAGE ════ */
.esb-percement-bandeau {
  background: #F4F3F1;
  border-left: 5px solid #8A9099;
  padding: 48px 6vw;
  border-top: 1px solid #E2E0DC;
}
.esb-percement-inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0 60px;
  max-width: 1100px;
  margin: 0 auto;
  align-items: start;
}
.esb-perc-num {
  font-family: var(--sans);
  font-size: 7px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #6A7078;
  margin-bottom: 14px;
}
.esb-perc-title {
  font-family: var(--display);
  font-size: clamp(32px, 4vw, 56px);
  font-style: italic;
  font-weight: 400;
  color: #111;
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 16px;
}
.esb-perc-tagline {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--gris-txt);
  font-style: italic;
  margin-bottom: 20px;
}
.esb-perc-slogan {
  font-family: var(--display);
  font-size: clamp(20px, 2.5vw, 32px);
  font-style: italic;
  color: #881818;
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin-top: 8px;
}
.esb-perc-body {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.9;
  color: #4a4540;
  margin-bottom: 0;
  font-weight: 300;
}
.esb-perc-note {
  font-size: 12px;
  line-height: 1.75;
  color: #4a4e55;
  font-style: italic;
  margin-bottom: 20px;
  padding: 12px 16px;
  background: #F4F3F1;
  border-left: 3px solid #8A9099;
}
.esb-perc-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  align-items: center;
  font-family: var(--sans);
  font-size: 10px;
  color: #6a5e55;
  letter-spacing: 1px;
  margin-bottom: 24px;
  padding: 12px 16px;
  background: #F4F3F1;
  border-left: 3px solid #8A9099;
}
.esb-sep { margin: 0 8px; color: #8A9099; }
.esb-perc-bottom {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.esb-perc-price {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 7px 16px;
  border: 1px solid #ccc;
  background: #fff;
  color: #111;
}
.esb-perc-btn {
  font-family: var(--sans);
  font-size: 8px;
  letter-spacing: 3px;
  text-transform: uppercase;
  background: #881818;
  color: #fff;
  padding: 10px 20px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  animation: pulse-btn 2s ease-in-out infinite;
  transition: background 0.3s, transform 0.3s;
}
.esb-perc-btn::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; flex-shrink: 0; animation: dotPulse 1.4s ease-in-out infinite; }
.esb-perc-btn:hover { background: #6a1010; transform: scale(1.02); }
.esb-perc-warn {
  font-family: var(--sans);
  font-size: 9px;
  color: var(--rouge);
  letter-spacing: 0.5px;
}

/* ════ NETTOYAGE ════ */
.esb-nettoyage-bandeau {
  background: #F4F3F1;
  border-left: 5px solid #9ab89a;
  padding: 44px 6vw;
  border-top: 1px solid #E2E0DC;
}
.esb-nett-inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0 60px;
  max-width: 1100px;
  margin: 0 auto;
  align-items: start;
}
.esb-nett-num {
  font-family: var(--sans);
  font-size: 7px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #9ab89a;
  margin-bottom: 12px;
}
.esb-nett-title {
  font-family: var(--display);
  font-size: clamp(26px, 3vw, 44px);
  font-style: italic;
  font-weight: 400;
  color: #111;
  letter-spacing: -0.5px;
  line-height: 1.05;
  margin-bottom: 12px;
}
.esb-nett-tagline {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--gris-txt);
  font-style: italic;
}
.esb-nett-body {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.85;
  color: #4a4540;
  margin-bottom: 12px;
  font-weight: 300;
}
.esb-nett-bottom {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.esb-nett-price {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 7px 16px;
  border: 1px solid #ccc;
  background: #fff;
  color: #111;
}
.esb-nett-btn {
  font-family: var(--sans);
  font-size: 8px;
  letter-spacing: 3px;
  text-transform: uppercase;
  background: #881818;
  color: #fff;
  padding: 9px 18px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  animation: pulse-btn 2s ease-in-out infinite;
  transition: background 0.3s, transform 0.3s;
}
.esb-nett-btn::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; flex-shrink: 0; animation: dotPulse 1.4s ease-in-out infinite; }
.esb-nett-btn:hover { background: #6a1010; transform: scale(1.02); }
.esb-nett-warn {
  font-family: var(--sans);
  font-size: 9px;
  color: var(--rouge);
  letter-spacing: 0.3px;
}

/* ════ CONTACTS BANDEAU FOND GRIS ════ */
.esb-contacts-bandeau {
  background: #F0EDE9;
  padding: 44px 6vw;
  border-top: 1px solid #E2E0DC;
}
.esb-contacts-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.esb-contacts-label {
  font-family: var(--sans);
  font-size: 7px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: #b0a89e;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid #E2E0DC;
}
.esb-contacts-items {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.esb-contact-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 40px 0 0;
}
.esb-contacts-sep {
  width: 1px;
  background: #E2E0DC;
  margin: 0 40px 0 0;
  align-self: stretch;
  min-height: 40px;
}
.esb-contact-role {
  font-family: var(--sans);
  font-size: 7px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #9a8e85;
}
.esb-contact-val {
  font-family: var(--sans);
  font-size: 18px;
  letter-spacing: 1px;
  color: #111;
  text-decoration: none;
  font-weight: 200;
  line-height: 1.3;
}
.esb-contact-addr .esb-contact-val {
  font-size: 13px;
  letter-spacing: 0.3px;
  font-weight: 300;
  line-height: 1.7;
}
.esb-contacts-note {
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1.8;
  color: var(--gris-txt);
  font-style: italic;
}

/* ════ WIFI BANDEAU FOND NOIR ════ */
.esb-wifi-bandeau {
  background: #111;
  padding: 44px 6vw;
}
.esb-wifi-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.esb-wifi-label {
  font-family: var(--display);
  font-size: clamp(28px, 3vw, 42px);
  font-style: italic;
  font-weight: 400;
  color: rgba(255,255,255,0.9);
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  letter-spacing: -0.5px;
}
.esb-wifi-items {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.esb-wifi-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 48px 0 0;
}
.esb-wifi-sep {
  width: 1px;
  background: rgba(255,255,255,0.08);
  margin: 0 48px 0 0;
  min-height: 40px;
}
.esb-wifi-sub {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  padding-bottom: 6px;
  display: block;
}
.esb-wifi-val {
  font-family: var(--sans);
  font-size: 22px;
  letter-spacing: 4px;
  color: rgba(255,255,255,0.85);
  font-weight: 200;
}
.esb-wifi-warn {
  font-family: var(--serif);
  font-size: 12.5px;
  line-height: 1.75;
  color: rgba(255,255,255,0.45);
  font-style: italic;
}

/* ════ RESPONSIVE MOBILE ════ */
@media (max-width: 700px) {
  .esb-percement-inner, .esb-nett-inner { grid-template-columns: 1fr; gap: 24px; }
  .esb-contacts-items { flex-direction: column; gap: 20px; }
  .esb-contacts-sep { display: none; }
  .esb-wifi-items { flex-direction: column; gap: 16px; }
  .esb-wifi-sep { display: none; }
}

/* ════ NOUVELLE SECTION ENTRÉE / SORTIE / PERCEMENT ════ */
.guide-entree-sortie {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.esb-bloc {
  padding: 36px 6vw;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.esb-bloc.esb-percement {
  background: #1a1a1a;
  border-left: 4px solid var(--or);
}
.esb-bloc.esb-nettoyage {
  background: #F4F3F1;
  border-left: 4px solid #9ab89a;
}
.esb-bloc.esb-horaires {
  background: #fff;
  border-left: 4px solid #b0a89e;
}
.esb-inner {
  max-width: 900px;
  margin: 0 auto;
}
.esb-label {
  font-family: var(--sans);
  font-size: 7px;
  letter-spacing: 5px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.esb-percement .esb-label { color: rgba(255,255,255,0.4); }
.esb-nettoyage .esb-label { color: #8a7e75; }
.esb-horaires .esb-label { color: #9a8e85; }
.esb-title {
  font-family: var(--display);
  font-size: clamp(22px, 2.5vw, 34px);
  font-style: italic;
  font-weight: 400;
  margin-bottom: 14px;
  letter-spacing: -0.3px;
  line-height: 1.1;
}
.esb-percement .esb-title { color: #fff; }
.esb-nettoyage .esb-title { color: #111; }
.esb-horaires .esb-title { color: #111; }
.esb-body {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.9;
  font-weight: 300;
  margin-bottom: 16px;
}
.esb-percement .esb-body { color: rgba(255,255,255,0.65); }
.esb-nettoyage .esb-body { color: #4a4540; }
.esb-horaires .esb-body { color: #4a4540; }
.esb-details {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.esb-price {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 7px 16px;
  border: 1px solid;
}
.esb-percement .esb-price { color: rgba(255,255,255,0.8); border-color: rgba(255,255,255,0.2); }
.esb-nettoyage .esb-price { color: #111; border-color: #ccc; background: #fff; }
.esb-warn {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--rouge);
}
.esb-note-rouge {
  font-family: var(--sans);
  font-size: 8px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #5a1a1a;
  background: #F4F3F1;
  padding: 10px 16px;
  border-left: 3px solid var(--rouge);
  display: inline-block;
  margin-top: 4px;
}

/* ════ BANDEAU ENTRÉE / SORTIE ════ */
.guide-bandeau {
  background: #F4F3F1;
  border-top: 1px solid #E2E0DC;
  padding: 0 6vw;
}
.guide-bandeau-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 48px;
  max-width: 960px;
  margin: 0 auto;
  padding: 48px 0;
  border-bottom: 1px solid #E2E0DC;
}
.guide-bandeau-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-family: var(--sans);
  font-size: 7px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: #b0a89e;
  align-self: center;
  white-space: nowrap;
}
.guide-bandeau-content {}
.guide-bandeau-title {
  font-family: var(--display);
  font-size: clamp(22px, 2.5vw, 32px);
  font-style: italic;
  font-weight: 400;
  color: #111;
  margin: 0 0 20px;
  letter-spacing: -0.3px;
}
.guide-bandeau-body {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.95;
  color: #2a2218;
  font-weight: 300;
  margin-bottom: 12px;
}
.guide-bandeau-body strong { color: #111; font-weight: 600; }
.guide-bandeau-note {
  font-family: var(--sans);
  font-size: 8px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #5a1a1a;
  background: #F4F3F1;
  padding: 10px 16px;
  border-left: 2px solid var(--rouge);
  display: inline-block;
  margin-top: 8px;
}

/* ════ CONTACTS & WIFI BANDEAUX ════ */
.guide-info-row {
  background: #F4F3F1;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  max-width: 100%;
  border-top: 1px solid #E2E0DC;
}
.guide-info-vline { background: #E2E0DC; }
.guide-info-bloc {
  padding: 40px 6vw;
}
.guide-info-label {
  font-family: var(--sans);
  font-size: 7px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: #b0a89e;
  display: block;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #E2E0DC;
}
.guide-info-label-wifi {
  font-family: var(--display);
  font-size: clamp(28px, 3vw, 40px);
  font-style: italic;
  font-weight: 400;
  color: #111;
  letter-spacing: -0.5px;
  display: block;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #E2E0DC;
}
/* Contact items */
.guide-contact-item {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 12px;
}
.guide-contact-role {
  font-family: var(--sans);
  font-size: 7px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #8a7e75;
  min-width: 80px;
}
.guide-contact-val {
  font-family: var(--sans);
  font-size: 15px;
  letter-spacing: 1px;
  color: #111;
  text-decoration: none;
  font-weight: 300;
}
.guide-contact-note {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.85;
  color: #4a3e35;
  margin-top: 16px;
  border-top: 1px solid #E2E0DC;
  padding-top: 14px;
}
.guide-contact-addr {
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #5a4e45;
  line-height: 1.9;
}
/* Wifi */
.guide-wifi-name {
  font-family: var(--sans);
  font-size: 20px;
  letter-spacing: 4px;
  color: #111;
  display: block;
  margin-bottom: 8px;
  font-weight: 200;
}
.guide-wifi-pw-label {
  font-family: var(--sans);
  font-size: 7px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #b0a89e;
  display: block;
  margin-top: 14px;
  margin-bottom: 4px;
}
.guide-wifi-pw {
  font-family: var(--sans);
  font-size: 20px;
  letter-spacing: 4px;
  color: #4a3e35;
  display: block;
  font-weight: 200;
}
.guide-wifi-warn {
  margin-top: 18px;
  font-family: var(--serif);
  font-size: 12.5px;
  line-height: 1.75;
  color: #5a1a1a;
  background: #F4F3F1;
  border-left: 2px solid var(--rouge);
  padding: 10px 14px;
}

@media (max-width: 680px) {
  .guide-bandeau-inner { grid-template-columns: 1fr; gap: 20px; }
  .guide-bandeau-label { writing-mode: horizontal-tb; transform: none; }
  .guide-info-row { grid-template-columns: 1fr; }
  .guide-info-vline { display: none; }
}


@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Bienvenue — arrivée lettre par lettre simulée via letter-spacing + opacity */
@keyframes revealTitle {
  0%   { opacity: 0; letter-spacing: 4px;    filter: blur(6px);   transform: translateY(10px); }
  40%  { opacity: 0.6; filter: blur(2px); }
  100% { opacity: 1; letter-spacing: 20.8px; filter: blur(0);     transform: translateY(0); }
}
@keyframes revealBrand {
  0%   { opacity: 0; letter-spacing: 1px;  filter: blur(4px); transform: translateY(8px); }
  40%  { opacity: 0.5; filter: blur(1px); }
  100% { opacity: 1; letter-spacing: 5px;  filter: blur(0);   transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scrollLine {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}


/* ════ TITRE TRANSITION clair → noir ════ */
.guide-transition {
  background: linear-gradient(to bottom, #F9DDE3 0%, #1a1a1a 100%);
  padding: 52px 6vw 56px;
  text-align: center;
  transition: opacity 0.8s ease;
}
.guide-transition-eyebrow {
  font-family: var(--sans);
  font-size: 8px;
  letter-spacing: 7px;
  text-transform: uppercase;
  color: rgba(100,80,70,0.5);
  display: block;
  margin-bottom: 14px;
}
.guide-transition-title {
  font-family: var(--display);
  font-size: clamp(36px, 5vw, 68px);
  font-weight: 400;
  color: #fff;
  letter-spacing: -1px;
  line-height: 1.05;
  margin: 0;
  text-shadow: 0 2px 40px rgba(0,0,0,0.4);
}
.guide-transition-title em {
  font-style: italic;
  color: rgba(255,255,255,0.65);
}


/* ════ ANIMATIONS INTERACTIONS ════ */

/* Hover sur les blocs accordéon — léger lift */
.esr-bloc {
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s ease;
}
.esr-btn-maj:hover ~ .esr-panel,
.esr-bloc:not(.open):hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}

/* Hover blocs kbbox pink — pulse léger */
.kbbox {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.kbbox:hover {
  transform: translateX(3px);
  box-shadow: -3px 0 0 var(--rouge);
}
.kbbox.small:hover {
  transform: translateX(3px);
  box-shadow: -2px 0 0 #c9b8b0;
}
.kbbox.warning:hover {
  transform: translateX(3px);
}

/* Gradient animé sur "Votre arrivée pas à pas" */
.guide-transition-title {
  background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.55) 40%, #fff 60%, rgba(255,255,255,0.4) 100%);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmerTitle 4s ease-in-out infinite;
}
.guide-transition-title em {
  /* hérite du parent */
}
@keyframes shimmerTitle {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Apparition au scroll des 3 sections claires */
.guide-intro,
.guide-bandeau,
.guide-info-row {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
/* Uniquement si JS active la classe animate-ready */
.guide-intro.in-view, .guide-bandeau.in-view, .guide-info-row.in-view { opacity: 1; transform: none; }

/* Hover sur les blocs kbphoto — zoom subtil */
.kbphoto {
  overflow: hidden;
}
.kbphoto img {
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.kbphoto:hover img {
  transform: scale(1.04);
}

/* Pulse contact val au hover */
.guide-contact-val {
  transition: color 0.2s, letter-spacing 0.3s;
}
.guide-contact-val:hover {
  color: var(--rouge);
  letter-spacing: 2px;
}



/* === STYLES BLOCS SOURCE === */

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Georgia',serif;background:#F4F3F1;color:#111;max-width:900px;margin:0 auto}
.banner{background:#111;padding:16px 24px;font-family:'Helvetica Neue',sans-serif;font-size:10px;letter-spacing:5px;text-transform:uppercase;color:rgba(255,255,255,0.85);font-weight:300}
.section{padding:24px;border-bottom:1px solid #E2E0DC}
.lbl{font-family:'Helvetica Neue',sans-serif;font-size:8px;letter-spacing:6px;text-transform:uppercase;color:#b0a89e;display:block;margin-bottom:20px;padding-bottom:10px;border-bottom:1px solid #E2E0DC}
.row{display:grid;grid-template-columns:200px 1fr;margin-bottom:16px;border:1px solid #E2E0DC;overflow:hidden;background:#fff}
.ph{overflow:hidden;background:#e8e5e0;min-height:160px}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ct{padding:18px 20px;background:#fff;display:flex;flex-direction:column;justify-content:center;gap:10px;border-left:1px solid #E2E0DC}
.step{display:flex;align-items:flex-start;gap:12px}
.num{width:28px;height:28px;border-radius:50%;background:#111;color:#fff;font-family:'Helvetica Neue',sans-serif;font-size:12px;font-weight:300;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.main{font-family:'Helvetica Neue',sans-serif;font-size:14px;font-weight:400;color:#111;line-height:1.4;margin-bottom:4px}
.note{font-family:'Georgia',serif;font-size:12px;color:#9a8e85;line-height:1.6;font-style:italic}
.box{padding:13px 16px;font-family:'Helvetica Neue',sans-serif;font-size:13px;line-height:1.7;margin-bottom:0}
.box.red{background:#F5E8E8;border-left:3px solid #74180C;color:#3a0808}
.box.gray{background:#F0EDEA;border-left:3px solid #b0a89e;color:#4a3e35}
.box.green{background:#EAF3E8;border-left:3px solid #4a8a3a;color:#1a3a14}
.box.amber{background:#FFF8E8;border-left:3px solid #C9A961;color:#5a3a00}
.box.black{background:#111;border-left:3px solid #74180C;color:#fff}
.box.pink{background:#F5E8E8;border-left:3px solid #c0566a;color:#3a0808}
.gap{margin-bottom:12px}
.dbl{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.dbl-img{overflow:hidden;background:#e8e5e0;border:1px solid #E2E0DC}
.dbl-img img{width:100%;height:100%;object-fit:cover;display:block}
.cap{background:#fff;padding:9px 14px;font-family:'Helvetica Neue',sans-serif;font-size:11px;letter-spacing:1px;color:#5a4e45;text-align:center;border:1px solid #E2E0DC;border-top:none}
.cap strong{font-weight:500;color:#111}
.trio{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:16px}
.card{background:#fff;border:1px solid #E2E0DC;overflow:hidden;text-align:center}
.cp{height:140px;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:10px}
.cl{padding:8px 10px;font-family:'Helvetica Neue',sans-serif;font-size:9px;letter-spacing:3px;text-transform:uppercase;color:#5a4e45;border-top:1px solid #E2E0DC}
.alr{background:#111;border-left:4px solid #74180C;padding:16px 20px;margin-top:12px;display:flex;align-items:flex-start;gap:12px}
.alr-t{font-family:'Helvetica Neue',sans-serif;font-size:12px;letter-spacing:1px;color:rgba(255,255,255,0.85);line-height:1.7;text-transform:uppercase;font-weight:300}
.alr-t strong{color:#fff;font-weight:500}
.wide{width:100%;overflow:hidden;margin-bottom:16px;border:1px solid #E2E0DC}
.wide img{width:100%;display:block;object-fit:cover}
.sep{height:1px;background:#E2E0DC;margin:12px 0}
.zones{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#E2E0DC;border:1px solid #E2E0DC;overflow:hidden;margin-bottom:16px}
.z-ok{background:#fff;padding:18px;border-top:4px solid #4a8a3a}
.z-ko{background:#fff;padding:18px;border-top:4px solid #74180C}
.z-t{font-family:'Helvetica Neue',sans-serif;font-size:9px;letter-spacing:4px;text-transform:uppercase;margin-bottom:10px;font-weight:500}
.z-t.ok{color:#4a8a3a}.z-t.ko{color:#74180C}
.zi{font-family:'Georgia',serif;font-size:13px;color:#4a3e35;line-height:1.8;padding-left:14px;position:relative;margin-bottom:4px}
.zi::before{content:'';position:absolute;left:4px;top:9px;width:5px;height:5px;border-radius:50%}
.zi.ok::before{background:#4a8a3a}.zi.ko::before{background:#74180C}
.zone-banner{background:#74180C;padding:14px 20px;margin-bottom:16px;display:flex;align-items:center;gap:12px}
.zone-banner span{font-family:'Helvetica Neue',sans-serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#fff;font-weight:300;line-height:1.7}

@media(max-width:600px){
  .row{grid-template-columns:1fr}
  .ph{min-height:200px}
  .ct{border-left:none;border-top:1px solid #E2E0DC}
  .dbl{grid-template-columns:1fr}
  .trio{grid-template-columns:1fr 1fr}
  .zones{grid-template-columns:1fr}
  .banner{font-size:9px;letter-spacing:3px;padding:14px 16px}
  .section{padding:16px}
}

/* ── Fade-in au scroll ── */
.section { transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; opacity: 1; }
.section.visible { transform: translateY(0); opacity: 1; }

/* ── Sticky nav ── */
#sticky-nav {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 900px;
  background: rgba(17,17,17,0.96); backdrop-filter: blur(8px);
  z-index: 999; padding: 10px 24px;
  display: flex; align-items: center; justify-content: space-between;
  font-family: 'Helvetica Neue', sans-serif; font-size: 9px;
  letter-spacing: 4px; text-transform: uppercase; color: rgba(255,255,255,0.7);
  border-bottom: 1px solid rgba(116,24,12,0.6);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
#sticky-nav.show { opacity: 1; pointer-events: auto; }
#sticky-nav .nav-title { color: #fff; font-weight: 400; }
#sticky-nav .nav-progress { height: 2px; background: #74180C; position: absolute; bottom: 0; left: 0; transition: width 0.2s ease; }

/* ── Pulse sur les alertes importantes ── */
@keyframes pulse-border {
  0%, 100% { border-left-color: #74180C; }
  50%       { border-left-color: #c0566a; }
}
.box.black { animation: pulse-border 3s ease-in-out infinite; }

/* ── Zoom doux sur les photos au tap ── */
.dbl-img img, .ph img, .wide img {
  transition: transform 0.4s ease;
}
.dbl-img:hover img, .ph:hover img { transform: scale(1.03); }

/* ── Sommaire ── */
#sommaire {
  background: #fff; border: 1px solid #E2E0DC;
  padding: 20px 24px; margin: 0;
}
#sommaire h2 {
  font-family: 'Helvetica Neue', sans-serif; font-size: 8px;
  letter-spacing: 6px; text-transform: uppercase; color: #b0a89e;
  margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid #E2E0DC;
}
.som-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.som-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid #E2E0DC;
  font-family: 'Helvetica Neue', sans-serif; font-size: 11px;
  color: #111; text-decoration: none; letter-spacing: 1px;
  transition: background 0.2s, border-color 0.2s;
}
.som-item:hover, .som-item:active { background: #F4F3F1; border-color: #74180C; }
.som-num { font-size: 9px; color: #b0a89e; letter-spacing: 2px; min-width: 18px; }
@media(max-width:600px){ .som-grid { grid-template-columns: 1fr; } }

/* ── Décalage body pour sticky ── */
body { padding-top: 0; }

@keyframes shake {
  0%,100%{ transform: translateX(0); }
  15%{ transform: translateX(-4px); }
  30%{ transform: translateX(4px); }
  45%{ transform: translateX(-3px); }
  60%{ transform: translateX(3px); }
  75%{ transform: translateX(-2px); }
  90%{ transform: translateX(2px); }
}
@keyframes glow-red {
  0%,100%{ box-shadow: 0 0 0px rgba(116,24,12,0); }
  50%{ box-shadow: 0 0 22px rgba(116,24,12,0.55); }
}
.bandeau-vip {
  animation: glow-red 2.5s ease-in-out infinite, shake 1.2s ease-in-out 0.6s 1;
  position: relative;
  overflow: hidden;
}
.bandeau-vip::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer {
  0%{ left: -100%; }
  60%,100%{ left: 160%; }
}


/* ════ ANIMATIONS REVEAL AU SCROLL ════ */
.reveal, .reveal-left, .reveal-scale { opacity: 1; transform: none; }
.reveal-left { transform: none; }
.reveal-scale { transform: none; }
.delay-1 { transition-delay: 0.12s !important; }
.delay-2 { transition-delay: 0.24s !important; }
.delay-3 { transition-delay: 0.38s !important; }

/* Apparition scroll sur les nouveaux bandeaux */
.esb-percement-bandeau, .esb-nettoyage-bandeau, .esb-contacts-bandeau, .esb-wifi-bandeau, .esb-bloc { opacity: 1; transform: none; }

/* ════ BLOC ROSE NETTOYAGE ════ */
.esb-nett-pink {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.85;
  color: #4a4e55;
  background: #F4F3F1;
  border-left: 3px solid #8A9099;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-style: italic;
  position: relative;
}

/* ════ CONTACTS BLOCS ROSES ════ */
.esb-contacts-label {
  font-family: var(--sans);
  font-size: 11px !important;
  letter-spacing: 8px;
  text-transform: uppercase;
  color: #6a5e55 !important;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid #E2E0DC;
  display: block;
}
.esb-contacts-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}
.esb-contact-rose {
  display: flex;
  align-items: baseline;
  gap: 16px;
  background: #F4F3F1;
  border-left: 3px solid #8A9099;
  padding: 12px 18px;
  position: relative;
}
.esb-contact-rose-bar { display: none; }
.esb-contact-rose .esb-contact-role {
  font-family: var(--sans);
  font-size: 7px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #6A7078;
  min-width: 110px;
  flex-shrink: 0;
}
.esb-contact-rose .esb-contact-val {
  font-family: var(--sans);
  font-size: 15px;
  letter-spacing: 1px;
  color: #1a1a1a;
  text-decoration: none;
  font-weight: 300;
}
@media (max-width: 600px) {
  .esb-contact-rose { flex-direction: column; gap: 4px; }
  .esb-contact-rose .esb-contact-role { min-width: unset; }
  .esb-contact-rose .esb-contact-val { font-size: 18px; }
}

/* ════ b03/b04 PICTO + À LIRE ════ */
.esr-warn-icon {
  display: flex !important;
  align-items: center;
  gap: 12px;
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  margin-bottom: 16px !important;
}
.esr-alire {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  animation: blink-alire 1s ease-in-out infinite;
  font-weight: 400;
}
@keyframes blink-alire {
  0%, 100% { opacity: 1; }
  45%, 55% { opacity: 0; }
}

/* ════ THANKS address section fond gris ════ */
.thanks-address-section {
  background: #F0EDE9;
  padding: 32px 6vw 40px;
  margin: 0 -6vw;
}
.thanks-address {
  font-family: var(--sans);
  font-size: 8px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #9a8e85;
  line-height: 1.9;
}

/* ════ CONTACTS items responsive ════ */
@media (max-width: 700px) {
  .esb-contact-rose { flex-direction: column; gap: 6px; }
}



/* ════ THANKS — partie basse fond gris (contacts + adresse + doc confidentiel) ════ */
.thanks-contacts-wrapper {
  background: #F0EDE9;
  margin: 0 -6vw;
  padding: 0 6vw;
}
.thanks-contacts {
  background: transparent !important;
  border-top: none !important;
  margin: 0 !important;
}
.thanks-bottom-grey {
  background: #F0EDE9;
  margin: 0 -6vw;
  padding: 24px 6vw 40px;
  text-align: center;
}
.thanks-bottom-grey .thanks-address {
  color: #9a8e85;
}


/* b03/b04 — numéro grand + picto + À lire */
.esr-warn-num {
  font-family: var(--display);
  font-size: clamp(40px, 5vw, 64px);
  font-style: italic;
  font-weight: 400;
  color: rgba(255,255,255,0.22);
  display: block;
  margin-bottom: 6px;
  letter-spacing: -1px;
  line-height: 1;
}
.esr-warn-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

/* ════ CONDITIONS GÉNÉRALES ════ */
.cgv-section {
  background: #F8F6F3;
  border-top: 1px solid #E2E0DC;
  padding: 40px 6vw;
}
.cgv-header { display: none; }
.cgv-eyebrow {
  font-family: var(--sans);
  font-size: 7px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: #9a8e85;
  display: block;
  margin-bottom: 20px;
}
.cgv-title {
  font-family: var(--display);
  font-size: clamp(28px, 3.5vw, 48px);
  font-style: italic;
  font-weight: 400;
  color: #111;
  line-height: 1.15;
  margin: 0 0 20px;
  letter-spacing: -0.5px;
}
.cgv-intro {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.9;
  color: var(--gris-txt);
  font-style: italic;
}
.cgv-body {
  max-width: 820px;
  margin: 0 auto;
}
.cgv-parties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: #E2E0DC;
  border: 1px solid #E2E0DC;
  margin-bottom: 40px;
}
.cgv-partie {
  background: #fff;
  padding: 24px 28px;
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.85;
  color: #4a4540;
}
.cgv-partie a { color: #6a5e55; text-decoration: none; border-bottom: 1px solid #E2E0DC; }
.cgv-partie-label {
  display: block;
  font-size: 7px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #9a8e85;
  margin-bottom: 10px;
}
.cgv-preambule {
  background: #F4F3F1;
  border-left: 3px solid #8A9099;
  padding: 20px 24px;
  margin-bottom: 36px;
  font-family: var(--serif);
  font-size: 13.5px;
  line-height: 1.85;
  color: #4a4e55;
}
.cgv-preambule p { margin: 0 0 10px; }
.cgv-preambule p:last-child { margin: 0; }
.cgv-articles {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid #E2E0DC;
}
.cgv-article {
  padding: 22px 28px;
  border-bottom: 1px solid #E2E0DC;
  background: #fff;
}
.cgv-article:last-child { border-bottom: none; }
.cgv-art-title {
  font-family: var(--sans);
  font-size: 8px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #881818;
  margin: 0 0 10px;
  font-weight: 400;
}
.cgv-article p {
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.85;
  color: #4a4540;
  margin: 0 0 8px;
}
.cgv-article p:last-child { margin: 0; }
.cgv-article strong { color: #111; font-weight: 500; }
.cgv-footer-note {
  margin-top: 32px;
  padding: 20px 24px;
  background: #111;
  color: rgba(255,255,255,0.75);
  font-family: var(--serif);
  font-size: 13px;
  font-style: italic;
  line-height: 1.8;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.cgv-footer-icon {
  color: var(--or);
  font-size: 16px;
  flex-shrink: 0;
}
@media (max-width: 700px) {
  .cgv-parties { grid-template-columns: 1fr; }
  .cgv-article { padding: 18px 20px; }
  .cgv-partie { padding: 18px 20px; }
}


/* ════ CASE À COCHER CGV ════ */
.cgv-accept-wrap {
  margin-top: 36px;
  padding: 24px 28px;
  background: #fff;
  border: 1px solid #E2E0DC;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.cgv-accept-label {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  flex: 1;
}
.cgv-checkbox-wrap {
  position: relative;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.cgv-checkbox-wrap input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}
.cgv-checkbox-custom {
  position: absolute;
  inset: 0;
  border: 1.5px solid #c9a49e;
  background: #fff;
  transition: background 0.2s, border-color 0.2s;
}
.cgv-checkbox-wrap input:checked + .cgv-checkbox-custom {
  background: #881818;
  border-color: #881818;
}
.cgv-checkbox-wrap input:checked + .cgv-checkbox-custom::after {
  content: '';
  position: absolute;
  left: 6px; top: 3px;
  width: 5px; height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}
.cgv-accept-text {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.3px;
  color: #4a4540;
  line-height: 1.7;
}
.cgv-link {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 11px;
  color: #881818;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
  letter-spacing: 0.3px;
}
.cgv-link:hover { color: #6a1010; }
.cgv-accept-confirmed {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #881818;
  opacity: 0;
  transition: opacity 0.4s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cgv-accept-confirmed.visible { opacity: 1; }
.cgv-confirmed-icon {
  font-size: 14px;
  font-weight: bold;
}

/* ════ MODALE CONTRAT COMPLET ════ */
.cgv-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,8,6,0.75);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(3px);
}
.cgv-modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.cgv-modal-inner {
  background: #F8F6F3;
  max-width: 760px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  position: relative;
  transform: translateY(20px);
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
  box-shadow: 0 32px 80px rgba(0,0,0,0.35);
}
.cgv-modal-overlay.open .cgv-modal-inner {
  transform: translateY(0);
}
.cgv-modal-close {
  position: sticky;
  top: 0;
  float: right;
  background: #111;
  color: rgba(255,255,255,0.8);
  border: none;
  font-family: var(--sans);
  font-size: 8px;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 12px 20px;
  cursor: pointer;
  z-index: 10;
  transition: background 0.2s;
}
.cgv-modal-close:hover { background: #881818; color: #fff; }
.cgv-modal-content {
  padding: 40px 44px 52px;
  clear: both;
}
.cgv-modal-header {
  text-align: center;
  margin-bottom: 36px;
  padding-bottom: 28px;
  border-bottom: 1px solid #E2E0DC;
}
.cgv-modal-eyebrow {
  font-family: var(--sans);
  font-size: 7px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #9a8e85;
  display: block;
  margin-bottom: 14px;
}
.cgv-modal-title {
  font-family: var(--display);
  font-size: clamp(22px, 3vw, 34px);
  font-style: italic;
  font-weight: 400;
  color: #111;
  margin: 0 0 10px;
  letter-spacing: -0.5px;
}
.cgv-modal-subtitle {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--gris-txt);
  font-style: italic;
  margin: 0;
}
.cgv-modal-parties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: #E2E0DC;
  border: 1px solid #E2E0DC;
  margin-bottom: 24px;
}
.cgv-modal-partie {
  background: #fff;
  padding: 18px 22px;
  font-family: var(--sans);
  font-size: 10.5px;
  line-height: 1.85;
  color: #4a4540;
}
.cgv-modal-partie-label {
  display: block;
  font-size: 7px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #9a8e85;
  margin-bottom: 8px;
}
.cgv-modal-preambule {
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1.9;
  color: #4a4e55;
  background: #F4F3F1;
  border-left: 3px solid #8A9099;
  padding: 16px 20px;
  margin-bottom: 24px;
}
.cgv-modal-articles {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid #E2E0DC;
  margin-bottom: 28px;
}
.cgv-modal-art {
  padding: 18px 22px;
  border-bottom: 1px solid #E2E0DC;
  background: #fff;
}
.cgv-modal-art:last-child { border-bottom: none; }
.cgv-modal-art h4 {
  font-family: var(--sans);
  font-size: 7.5px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #881818;
  margin: 0 0 10px;
  font-weight: 400;
}
.cgv-modal-art p {
  font-family: var(--sans);
  font-size: 10.5px;
  line-height: 1.85;
  color: #4a4540;
  margin: 0 0 8px;
}
.cgv-modal-art p:last-child { margin: 0; }
.cgv-modal-art strong { color: #111; font-weight: 500; }
.cgv-modal-footer {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #9a8e85;
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid #E2E0DC;
  line-height: 2;
}
@media (max-width: 640px) {
  .cgv-modal-content { padding: 24px 20px 36px; }
  .cgv-modal-parties { grid-template-columns: 1fr; }
  .cgv-accept-wrap { flex-direction: column; align-items: flex-start; }
}