@charset "UTF-8";
/* HomeCristal : feuille de styles commune a toutes les pages.
   Extraite de index.html le 2026-10-09, sans modification hormis les url()
   relatives, reecrites depuis le dossier css/ (« photos/x » -> « ../photos/x »). */
/* ── FORCE LIGHT MODE ABSOLU ── */
html { background: #FBF9F6 !important; }
body { background: #FFFFFF !important; color: #241F1A !important; }

:root {
  /* Marque — teintes officielles conservées */
  --blue:      #0D87FB;
  --blue-dark: #0660C4;
  --blue-soft: #8FC4FF;
  --blue-tint: #E8F4FF;
  --violet:      #7B18C8;
  --violet-dark: #500AA0;
  --violet-soft: #D8B4FF;
  --violet-tint: #F4ECFF;

  /* Neutres chauds & raffinés */
  --blanc:       #FFFFFF;
  --fond:        #F4F1EC;
  --fond2:       #EBE6DE;
  --noir:        #161311;
  --texte:       #241F1A;
  --gris:        #6E665C;
  --gris-clair:  #E6E0D6;
  --hairline:    rgba(22,19,17,0.09);

  /* Typographie — polices variables natives (CSP-safe, zéro requête) */
  --font:        system-ui, -apple-system, 'Segoe UI Variable Display', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Rayons */
  --radius:      20px;
  --radius-lg:   28px;
  --radius-sm:   12px;

  /* Ombres en couches — profondeur réaliste */
  --shadow-sm:   0 1px 2px rgba(22,19,17,.05), 0 3px 10px rgba(22,19,17,.05);
  --shadow:      0 2px 4px rgba(22,19,17,.03), 0 10px 30px rgba(22,19,17,.08);
  --shadow-lg:   0 6px 14px rgba(22,19,17,.05), 0 28px 70px rgba(22,19,17,.14);
  --glow-b:      0 12px 36px rgba(13,135,251,.38);
  --glow-v:      0 12px 36px rgba(123,24,200,.34);

  /* Verre dépoli */
  --glass:       rgba(255,255,255,.72);
  --glass-brd:   rgba(255,255,255,.55);

  /* Mouvement */
  --t:           0.3s cubic-bezier(0.4,0,0.2,1);
  --t-slow:      0.65s cubic-bezier(0.16,1,0.3,1);
  --ease:        cubic-bezier(0.16,1,0.3,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 8px; }

/* ── Transitions fluides entre pages (View Transitions — fallback : navigation classique) ── */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: .2s; }
::view-transition-new(root) { animation-duration: .3s; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* ── ÉCRAN DE CHARGEMENT (index uniquement) : le logo se remplit comme un liquide ── */
.no-loader #site-loader { display: none !important; }
#site-loader {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(125% 125% at 50% 38%, #ffffff 0%, var(--fond) 66%, #ECE5DA 100%);
  animation: loaderFailsafe 3s linear forwards;   /* filet de sécurité : se retire seul si le JS ne le fait pas (> plafond JS) */
}
#site-loader.loader-done { animation: none !important; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .5s ease, visibility 0s linear .5s; }
/* Le logo HomeCristal est un disque plein : un masque a sa silhouette ne
   montrerait qu'un cercle. On remplit donc le logo lui-meme : il apparait en
   filigrane, puis sa version en couleurs monte du bas vers le haut. Le masque
   est une vague (haut ondule, plein dessous) qui glisse en montant. */
.loader-logo { position: relative; width: 130px; height: 130px; }
.loader-logo img { display: block; width: 130px; height: 130px; }
.loader-logo-vide { filter: grayscale(1); opacity: .16; }
.loader-logo-plein { position: absolute; inset: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='400'%3E%3Cpath d='M0 9Q13 0 26 9T52 9V400H0Z'/%3E%3C/svg%3E") 0 140px / 52px 400px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='400'%3E%3Cpath d='M0 9Q13 0 26 9T52 9V400H0Z'/%3E%3C/svg%3E") 0 140px / 52px 400px repeat-x;
  animation: loaderFill 1.15s cubic-bezier(.45,.05,.3,1) forwards; }
@keyframes loaderFill {
  from { -webkit-mask-position: 0 140px;     mask-position: 0 140px; }
  to   { -webkit-mask-position: -104px -12px; mask-position: -104px -12px; }
}
@keyframes loaderFailsafe { 0%, 90% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .loader-logo-plein { animation: none; -webkit-mask: none; mask: none; }
  #site-loader { animation: loaderFailsafe 1.8s linear forwards; }
}

button, input, select, textarea, a {
  font-family: var(--font);
}

body {
  background:
    radial-gradient(62% 52% at 86% 8%, rgba(13,135,251,.11), transparent 70%),
    radial-gradient(54% 46% at 6% 2%, rgba(123,24,200,.10), transparent 72%),
    var(--blanc) !important;
  color: var(--texte) !important;
  font-family: var(--font);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(13,135,251,.22); color: var(--noir); }

/* ── SECTIONS SOMBRES — texte blanc forcé ── */
.dark-section,
.dark-section * {
  color: #ffffff !important;
}

.dark-section .step-num        { color: var(--blue) !important; }
.dark-section .step-desc       { color: rgba(255,255,255,0.5) !important; }
.dark-section .pourquoi-desc   { color: var(--gris) !important; }
.dark-section .pourquoi-desc strong { color: var(--texte) !important; }

.f-links a  { color: var(--gris) !important; text-decoration: none; }
.footer-copy     { color: var(--gris) !important; }
.f-links a:hover { color: var(--texte) !important; text-decoration: none; }

/* ── EN-TÊTE FIXE : bandeau offre + nav empilés ── */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 200; }
/* Mobile/tablette : SEULE la nav se rétracte au scroll descendant (gain de place),
   le bandeau d'offre reste toujours visible. Sur desktop, rien ne bouge. */
@media (max-width: 900px) { .site-header.header-hidden nav { transform: translateY(calc(-100% - 6px)); } }
@media (prefers-reduced-motion: reduce) { nav { transition: none !important; } }
.top-bar {
  display: block; text-align: center; text-decoration: none;
  position: relative; z-index: 2;   /* au-dessus de la nav → la couvre quand elle se rétracte */
  padding: 7px 18px; line-height: 1.35;
  background: linear-gradient(135deg, #9A2BE0, var(--violet) 58%, #5E0FB0);
  color: #fff !important; font-size: 12.5px; font-weight: 700; letter-spacing: .01em;
  transition: filter var(--t);
}
@media (hover:hover) and (pointer:fine) { .top-bar:hover { filter: brightness(1.1); } }

/* ── NAV ── */
nav {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: flex-start;
  padding: 16px 48px;
  background: rgba(251,249,246,0.78) !important;
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid var(--hairline);
  transition: transform .32s ease, box-shadow var(--t), background var(--t), padding var(--t);
}
nav.scrolled { box-shadow: 0 8px 30px rgba(22,19,17,.09); background: rgba(251,249,246,0.92) !important; }
/* Desktop : header qui se condense au scroll (mobile garde son comportement de rétraction) */
@media (min-width: 901px) {
  .logo { transition: font-size .32s var(--ease); }
  .logo-img { transition: width .32s var(--ease), height .32s var(--ease); }
  nav.scrolled { padding-top: 9px; padding-bottom: 9px; }
  nav.scrolled .logo { font-size: 25px; }
  nav.scrolled .logo-img { width: 36px; height: 36px; }
}
.logo {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; font-weight: 800; font-size: 30px;
  letter-spacing: 0.03em; color: var(--noir) !important;
}
.logo-img  { width: 44px; height: 44px; display: block; flex-shrink: 0; }
.logo-name { display: inline-flex; }
.logo-home    { color: var(--violet) !important; }
.logo-cristal { color: var(--blue) !important; }
.nav-links { display: flex; align-items: center; gap: 28px; list-style: none; }
.nav-sep { width: 1px; height: 18px; align-self: center; background: var(--gris-clair); }
.nav-links a { color: var(--gris) !important; text-decoration: none; font-size: 14px; font-weight: 500; transition: color var(--t); }
.nav-links a:hover { color: var(--noir) !important; }
/* Soulignement animé de la section consultée (sauf bouton Simuler) */
.nav-links a:not(.nav-cta) { position: relative; }
.nav-links a:not(.nav-cta)::after {
  content: ''; position: absolute; left: 0; bottom: -6px;
  width: 100%; height: 2px; border-radius: 2px;
  background: var(--blue);
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s cubic-bezier(.65,0,.35,1);
}
.nav-links a:not(.nav-cta).is-current { color: var(--noir) !important; }
.nav-links a:not(.nav-cta).is-current::after {
  transform: scaleX(1); transform-origin: left;
}
/* Ecrans moyens (901 a 1240 px) : l'en-tete ne tient plus sur une ligne avec
   tous ses liens. On retire d'abord ceux qui ont un equivalent (le logo mene
   a l'accueil), puis les sections secondaires, et on resserre. */
.nav-links a, .nav-drop-btn { white-space:nowrap; }
@media (min-width:901px) and (max-width:1240px){
  .nav-links { gap:20px; }
  .nav-links li:has(> a[href$="#accueil"]), .nav-links li:has(> a[href$="#parrainage"]) { display:none; }
}
@media (min-width:901px) and (max-width:1100px){
  .nav-links { gap:16px; }
  .nav-links li:has(> a[href$="#occasions"]) { display:none; }
}
/* Deroulant « Prestations » (meme comportement que CarCristal) */
.nav-drop { position:relative; }
.nav-drop-btn { display:flex; align-items:center; gap:5px; background:none; border:none; padding:0; font-family:inherit;
  font-size:14px; font-weight:500; color:var(--gris) !important; cursor:pointer; transition:color var(--t); }
.nav-drop-btn:hover, .nav-drop.open .nav-drop-btn { color:var(--noir) !important; }
.nav-drop-chev { font-size:10px; transition:transform var(--t); }
.nav-drop.open .nav-drop-chev { transform:rotate(180deg); }
.nav-drop-menu { position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(-10px);
  background:var(--blanc) !important; border:1px solid var(--hairline); border-radius:14px; box-shadow:0 14px 38px rgba(22,19,17,.14);
  padding:8px; min-width:250px; z-index:300; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s ease, transform .28s cubic-bezier(.16,1,.3,1), visibility 0s linear .28s; }
.nav-drop-menu::before { content:''; position:absolute; top:-14px; left:0; right:0; height:14px; }   /* pont pour le survol */
.nav-drop.open .nav-drop-menu { opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
  transition:opacity .2s ease, transform .28s cubic-bezier(.16,1,.3,1); }
@media (hover:hover) and (pointer:fine) {
  .nav-drop:hover .nav-drop-menu { opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
    transition:opacity .2s ease, transform .28s cubic-bezier(.16,1,.3,1); }
  .nav-drop:hover .nav-drop-chev { transform:rotate(180deg); }
}
.nav-links .nav-drop-menu a { display:block; padding:9px 12px; border-radius:9px; font-size:13.5px; font-weight:600; color:var(--texte) !important; white-space:nowrap; }
.nav-links .nav-drop-menu a::after { display:none; }
.nav-links .nav-drop-menu a:hover, .nav-links .nav-drop-menu a[aria-current] { background:var(--fond) !important; color:var(--blue-dark) !important; }
.nav-cta {
  display: inline-flex; align-items: center; white-space: nowrap;
  background: linear-gradient(135deg, #3DA0FF, var(--blue)) !important; color: #fff !important;
  padding: 10px 22px; border-radius: 12px;
  font-weight: 700 !important; transition: all var(--t) !important;
  box-shadow: 0 6px 18px rgba(13,135,251,.30);
}
/* Le bouton mobile de l'en-tete n'existe que sous 900 px : sans cette
   ligne, l'ordinateur affiche deux fois le meme appel a l'action. */
.nav-cta-mobile { display: none; }
/* Hors de .nav-links, le bouton retombait sur le soulignement par defaut des liens. */
.nav-cta, .nav-cta-mobile { text-decoration: none !important; }
/* Forcer couleur blanche sur nav-cta même quand règle nav-links a s'applique */
.nav-links a.nav-cta,
.nav-links a.nav-cta:visited { color: #fff !important; }
/* Hover/tap blanc universel (orange) — desktop + mobile */
@media (hover:hover) and (pointer:fine) {
  .nav-cta:hover, .nav-links a.nav-cta:hover { background:var(--fond) !important; color:var(--blue-dark) !important; box-shadow:0 0 0 2px var(--blue), 0 8px 20px rgba(13,135,251,.35) !important; transform:translateY(-1px); }
}
.nav-cta:active, .nav-links a.nav-cta:active { background:var(--fond) !important; color:var(--blue-dark) !important; box-shadow:0 0 0 2px var(--blue) !important; transform:translateY(0); }
/* Mobile : pastilles fixes « appel » et « voir les prix » (affichees dans le media query) */
.mcb-float { display:none; position:fixed; right:14px; bottom:calc(16px + env(safe-area-inset-bottom,0px));
  z-index:189; align-items:center; gap:8px; }
.mcb-prix { display:inline-flex; align-items:center; padding:11px 18px; border-radius:999px;
  background:linear-gradient(135deg,#3DA0FF,var(--blue) 60%,#0660C4); color:#fff !important;
  font-weight:700; font-size:14px; text-decoration:none; white-space:nowrap;
  box-shadow:0 6px 18px rgba(13,135,251,.45), 0 2px 8px rgba(22,19,17,.18); }
.mcb-prix:active { transform:scale(.97); }
.mcb-call-round { flex:0 0 auto; width:44px; height:44px; display:inline-flex; align-items:center;
  justify-content:center; font-size:19px; line-height:1; border-radius:50%; text-decoration:none;
  color:#161311 !important; border:1.5px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box, linear-gradient(135deg, var(--blue), var(--violet)) border-box;
  box-shadow:0 6px 18px rgba(22,19,17,.18); }
.mcb-call-round:active { transform:scale(.96); }

/* Bandeau cookies : tout ce qui flotte en bas remonte de sa hauteur,
   sinon le bandeau recouvre le bouton d'appel et les pastilles mobiles. */
body.hc-has-banner .call-fab { bottom:calc(20px + var(--hc-banner-h, 0px)); }
body.hc-has-banner .mcb-float { bottom:calc(16px + var(--hc-banner-h, 0px)); }
.call-fab { display:inline-flex; position:fixed; left:20px; bottom:20px; z-index:180; align-items:center; gap:9px; padding:11px 18px; border-radius:999px; background:linear-gradient(#fff,#fff) padding-box, linear-gradient(135deg, var(--blue), #B94AC8 55%, var(--violet)) border-box; color:#161311 !important; border:1.5px solid transparent; box-shadow:0 8px 24px rgba(22,19,17,.16); text-decoration:none; font-weight:700; font-size:14px; transition:box-shadow var(--t), transform .4s cubic-bezier(.16,1,.3,1), opacity .3s ease; }
.call-fab.is-hidden { transform:translateY(calc(100% + 30px)); opacity:0; pointer-events:none; }  /* masqué sur le pied de page → ne couvre pas le contenu du footer */
@media (hover:hover) and (pointer:fine) { .call-fab:hover { box-shadow:0 12px 28px rgba(123,24,200,.26); transform:translateY(-1px); } }
.lang-wrap { position:relative; flex-shrink:0; }
.lang-btn { background:var(--fond); border:1.5px solid var(--gris-clair); border-radius:8px; padding:5px 10px; font-size:12px; font-weight:700; cursor:pointer; color:var(--texte) !important; transition:border-color var(--t); display:flex; align-items:center; gap:5px; white-space:nowrap; }
.lang-btn:hover { border-color:var(--blue); }
.lang-code { margin-left:5px; }
/* Sur mobile l'en-tete est deja charge : le drapeau suffit a se comprendre. */
@media (max-width:900px){
  .lang-code { display:none; }
  .lang-btn { padding:5px 8px; }
}
.lang-dropdown { position:absolute; top:calc(100% + 6px); right:0; background:#FDFCFB !important; border:1.5px solid var(--gris-clair); border-radius:10px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,0.10); min-width:132px; z-index:201;
  opacity:0; transform:translateY(-8px) scaleY(.96); transform-origin:top right; visibility:hidden; pointer-events:none;
  transition:opacity .2s ease, transform .24s cubic-bezier(.16,1,.3,1), visibility 0s linear .24s; }
.lang-dropdown.open { opacity:1; transform:translateY(0) scaleY(1); visibility:visible; pointer-events:auto;
  transition:opacity .2s ease, transform .24s cubic-bezier(.16,1,.3,1); }
@media (prefers-reduced-motion: reduce) { .lang-dropdown { transition:none; } }
.lang-option { display:flex; align-items:center; gap:8px; width:100%; padding:10px 14px; font-size:13px; font-weight:600; color:var(--texte) !important; background:none; border:none; cursor:pointer; font-family:var(--font); transition:background var(--t); text-align:left; white-space:nowrap; }
.lang-option:hover { background:var(--fond) !important; }
.lang-option.is-current { color:var(--blue) !important; font-weight:700; }
a.lang-option { text-decoration:none; box-sizing:border-box; }

/* ── HERO ── */
.hero {
  min-height: 100vh;
  padding: 140px 48px 100px;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 72px; align-items: center;
  max-width: 1280px; margin: 0 auto;
  position: relative; overflow: hidden;
}
.hero-logo-bg {
  position: absolute;
  width: 520px; height: 520px;
  left: 32px; top: 50%; transform: translateY(-50%);
  opacity: 0.18;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.hero-left  { display: flex; flex-direction: column; gap: 32px; position: relative; z-index: 1; }
.hero-right { position: relative; z-index: 1; }

.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.58);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(13,135,251,0.32);
  color: var(--blue-dark) !important;
  padding: 7px 15px; border-radius: 100px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; width: fit-content;
  box-shadow: 0 4px 18px rgba(13,135,251,.13);
  opacity: 0; animation: fadeUp 0.7s 0.1s ease forwards;
}
.hero-badge::before {
  content:''; width:6px; height:6px; background: var(--blue);
  border-radius: 50%; animation: blink 1.8s infinite; flex-shrink:0;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.2} }

.hero h1 {
  font-size: clamp(35px,4.5vw,66px); font-weight: 800;
  line-height: 1.04; letter-spacing: -0.022em;
  color: var(--noir) !important;
  opacity: 0; animation: fadeUp 0.8s 0.25s ease forwards;
}
.hl-blue {
  position: relative; display: inline-block;
  background: linear-gradient(100deg, var(--blue) 0%, #C21E8E 52%, var(--violet) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--violet) !important;
}

.hero-sub {
  font-size: 16px; color: var(--gris) !important;
  line-height: 1.75; max-width: 440px;
  opacity: 0; animation: fadeUp 0.8s 0.4s ease forwards;
}
.hero-sub strong { color: var(--texte) !important; font-weight: 700; }

.hero-actions {
  display: flex; flex-direction: column; gap: 12px;
  opacity: 0; animation: fadeUp 0.8s 0.55s ease forwards;
  max-width: 420px;
}

/* Reflet qui balaie les CTA — la couleur du bouton n'est pas touchée */
.btn-wa-blue { background:linear-gradient(135deg, #3DA0FF, var(--blue) 58%, #0A63C4) !important; box-shadow:0 8px 24px rgba(13,135,251,.32), inset 0 1px 0 rgba(255,255,255,.18) !important; }
.btn-wa-hero, .section-avap .btn-wa, .btn-wa-blue { position:relative; overflow:hidden; isolation:isolate; }
.btn-wa-hero::after, .section-avap .btn-wa::after, .btn-wa-blue::after {
  content:''; position:absolute; top:0; bottom:0; left:0; width:60%;
  background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,.34) 50%, transparent 100%);
  transform:translateX(-160%); pointer-events:none; z-index:1;
  animation:ctaShine 4.6s cubic-bezier(.4,0,.2,1) infinite; }
.section-avap .btn-wa::after { animation-delay:1.2s; }
.btn-wa-blue::after { animation-delay:2.4s; }
.btn-wa-hero > *, .section-avap .btn-wa > *, .btn-wa-blue > * { position:relative; z-index:2; }
@keyframes ctaShine { 0% { transform:translateX(-160%); } 45%, 100% { transform:translateX(280%); } }
@media (prefers-reduced-motion: reduce) { .btn-wa-hero::after, .section-avap .btn-wa::after, .btn-wa-blue::after { animation:none; opacity:0; } }
.btn-wa-hero {
  display: flex; align-items: center; gap: 16px;
  background: linear-gradient(135deg, #3DA0FF, var(--blue) 60%, #0660C4); color: #fff !important;
  text-decoration: none; padding: 18px 24px;
  border-radius: 16px; font-weight: 700;
  transition: all var(--t);
  box-shadow: 0 10px 30px rgba(13,135,251,.40), inset 0 1px 0 rgba(255,255,255,.25);
}
@media (hover:hover) and (pointer:fine) {
  .btn-wa-hero:hover { background:var(--fond) !important; transform:translateY(-2px); box-shadow:0 0 0 2px var(--blue), 0 14px 34px rgba(13,135,251,.32) !important; }
  .btn-wa-hero:hover .btn-wa-icon, .btn-wa-hero:hover .btn-wa-main { color:var(--blue-dark) !important; }
  .btn-wa-hero:hover .btn-wa-sub { color:var(--blue) !important; }
}
.btn-wa-hero:active { background:var(--fond) !important; transform:translateY(0); box-shadow:0 0 0 2px var(--blue), 0 4px 12px rgba(13,135,251,.3) !important; }
.btn-wa-hero:active .btn-wa-icon, .btn-wa-hero:active .btn-wa-main { color:var(--blue-dark) !important; }
.btn-wa-hero:active .btn-wa-sub { color:var(--blue) !important; }
.btn-wa-icon { font-size: 26px; flex-shrink:0; }
.btn-wa-text { display: flex; flex-direction: column; gap: 3px; }
.btn-wa-main { font-size: 15px; font-weight: 700; color: #fff !important; }
.btn-wa-sub  { font-size: 12px; font-weight: 400; color: rgba(255,255,255,0.85) !important; }

.hero-trust {
  display: flex; gap: 24px; flex-wrap: wrap;
  opacity: 0; animation: fadeUp 0.8s 0.7s ease forwards;
}
.trust-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gris) !important; }
.trust-dot { width: 6px; height: 6px; background: var(--blue); border-radius: 50%; flex-shrink:0; }

/* HERO SLIDER */
.hero-right { position: relative; opacity: 0; animation: fadeRight 0.9s 0.3s ease forwards; z-index: 1;
  max-width:100%; }
.float-br { max-width:calc(100% - 8px); }   /* la pastille ne pousse plus le visuel hors du cadre */
@keyframes fadeRight { from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:translateX(0)} }

/* Grand ecran : la colonne du visuel prend un peu plus de place que le texte,
   le titre tient toujours sur trois lignes et la photo respire moins bete. */
@media (min-width:1101px){ .hero { grid-template-columns:1fr 1.15fr; } }
/* Hero : carrousel coverflow glissable, chaque vue etant son propre
   comparateur avant/apres. Les voisines restent derriere la vue courante,
   reduites et estompees : rien ne peut plus etre coupe par le cadre. */
.hero-carousel { position:relative; width:100%; aspect-ratio:4/3; perspective:1400px;
  touch-action:pan-y; user-select:none; -webkit-user-select:none; cursor:grab; }
.hero-carousel.is-dragging { cursor:grabbing; }
.hcar-track { position:absolute; inset:0; }
.hcar-slide { position:absolute; top:8%; bottom:8%; left:8%; right:8%; border-radius:22px; overflow:hidden;
  box-shadow:0 22px 55px rgba(22,19,17,.28); border:1px solid rgba(22,19,17,.06);
  transition:transform .5s var(--ease), opacity .5s var(--ease); }
.hero-carousel.is-dragging .hcar-slide { transition:none; }
.hcar-before, .hcar-after { position:absolute; inset:0; background-size:cover; background-position:center; }
.hcar-before { z-index:1; }
.hcar-after { z-index:2; clip-path:inset(0 0 0 50%); }
.hcar-lbl { position:absolute; bottom:12px; z-index:4; font-size:10.5px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:#fff !important; padding:5px 10px; border-radius:8px; }
.hcar-lbl-b { left:12px; background:rgba(22,19,17,.55); }
.hcar-lbl-a { right:12px; background:var(--blue); }
.hcar-handle { position:absolute; top:0; bottom:0; left:50%; width:3px; background:#fff; z-index:8;
  transform:translateX(-50%); box-shadow:0 0 10px rgba(0,0,0,.35); }
.hcar-grip { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:42px; height:42px;
  border-radius:50%; background:#fff; box-shadow:0 4px 16px rgba(0,0,0,.28);
  display:flex; align-items:center; justify-content:center; }
.hcar-grip img { width:22px; height:22px; pointer-events:none; -webkit-user-drag:none; user-select:none; }
.hcar-slide.is-current .hcar-grip { cursor:ew-resize; }
.hcar-nav { position:absolute; top:50%; transform:translateY(-50%); z-index:6; width:38px; height:38px;
  border-radius:50%; border:1.5px solid var(--gris-clair); background:rgba(255,255,255,.92) !important;
  color:var(--blue) !important; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-sm); transition:background var(--t), color var(--t), border-color var(--t); }
.hcar-nav:hover { background:var(--blue) !important; color:#fff !important; border-color:var(--blue); }
.hcar-prev { left:2px; } .hcar-next { right:2px; }
.hcar-piece { text-align:center; margin-top:14px; font-size:12.5px; font-weight:700; letter-spacing:.03em;
  color:var(--gris) !important; }
.hcar-dots { display:flex; gap:8px; justify-content:center; margin-top:12px; }
.hcar-dot { width:8px; height:8px; border-radius:50%; border:none; padding:0; cursor:pointer;
  background:var(--gris-clair); transition:background .3s, width .3s; }
.hcar-dot.is-on { width:22px; border-radius:5px;
  background:linear-gradient(90deg, var(--blue), var(--violet)); }
/* format photo : 4/3 sur ordinateur, carre sur telephone */
@media (max-width:600px) and (pointer:coarse) and (any-hover:none){ .hero-carousel { aspect-ratio:1/1; } }
/* Mini-video : ce que le meuble a rendu, visible des le premier ecran */
.hero-eau { position:absolute; left:14px; bottom:56px; z-index:6; margin:0; width:24%; min-width:88px;   /* au-dessus du badge Avant */
  border-radius:14px; overflow:hidden; background:#111; border:2px solid rgba(255,255,255,.92);
  box-shadow:0 10px 26px rgba(22,19,17,.34); }
.hero-eau video { display:block; width:100%; aspect-ratio:406/720; object-fit:cover; }
.hero-eau figcaption { position:absolute; left:0; right:0; bottom:0; padding:16px 6px 5px; font-size:9.5px;
  font-weight:700; text-align:center; color:#fff !important; letter-spacing:.02em;
  background:linear-gradient(transparent, rgba(0,0,0,.82)); }

.s-apres { z-index:2; clip-path: inset(0 0 0 50%); }
/* Labels flottants hors panels pour éviter le clipping */

.s-divider { position:absolute; top:0; bottom:0; left:50%; width:3px; background:#fff; z-index:10; transform:translateX(-50%); pointer-events:none; }

.avap-div-handle img { width:64%; height:64%; object-fit:contain; display:block; }
.s-hint { text-align:center; margin-top:14px; font-size:12px; color:var(--gris) !important; letter-spacing:.04em; }

.float-badge { position:absolute; background:rgba(255,255,255,.74) !important; backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4); border:1px solid rgba(255,255,255,.7); border-radius:16px; padding:12px 16px; box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:10px; z-index:30; }
.float-tl { top:-16px; left:-20px; animation:floatY 3s ease-in-out infinite; will-change:transform; }
.float-br { bottom:120px; right:-20px; animation:floatY 3s 1.5s ease-in-out infinite; will-change:transform; }
@keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.float-icon { font-size:22px; }
.float-text { display:flex; flex-direction:column; gap:2px; }
.float-main { font-weight:700; color:var(--noir) !important; font-size:13px; }
.float-sub  { font-size:11px; color:var(--gris) !important; }

/* ── SHARED SECTION STYLES ── */
.section-wrap { max-width:1200px; margin:0 auto; }
.eyebrow { font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--blue) !important; font-weight:700; margin-bottom:12px; }
.eyebrow::before { content:''; display:inline-block; width:22px; height:2px; background:currentColor; border-radius:2px; vertical-align:middle; margin-right:10px; transform:translateY(-2px); opacity:.85; }
.section-h2 { font-size:clamp(27px,3.6vw,46px); font-weight:800; letter-spacing:-.022em; line-height:1.08; color:var(--noir) !important; }
.hl { background:linear-gradient(100deg, var(--violet), #A64BE8); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--violet) !important; }
.section-p { font-size:15px; color:var(--gris) !important; line-height:1.7; }

/* ── SECTION POURQUOI (dark) ── */
.section-pourquoi { position:relative; overflow:hidden; padding:100px 48px;
  background:
    radial-gradient(52% 62% at 10% -4%, rgba(123,24,200,.30), transparent 60%),
    radial-gradient(48% 58% at 94% 104%, rgba(13,135,251,.22), transparent 60%),
    var(--noir) !important; }
.pourquoi-grid { display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:1fr; gap:14px; margin-top:48px; position:relative; z-index:1; }
.section-pourquoi .section-wrap { max-width:1320px; }
.pourquoi-card { background:var(--blanc) !important; border:1px solid var(--hairline); border-radius:16px; padding:20px 17px; cursor:default; box-shadow:var(--shadow-sm);
  /* Flex interne : la desc remplit l'espace résiduel → toutes les cards d'une rangée ont le même look */
  display:flex; flex-direction:column;
  transition:box-shadow var(--t), border-color var(--t); }
.pourquoi-desc { flex:1; }   /* pousse les descriptions à se dilater uniformément */
@media (hover: hover) and (pointer: fine) {
  .pourquoi-card:hover { box-shadow:var(--shadow); border-color:rgba(13,135,251,.26); }
}
/* ── ICÔNES : même traitement visuel (bulle arrondie) dans toutes les sections de cartes ── */
/* Emojis nus — le carré arrondi de fond a été retiré partout */
.pourquoi-icon, .occ-card > div:first-child { transition: transform var(--t); }
@media (hover: hover) and (pointer: fine) { .pourquoi-card:hover .pourquoi-icon { transform: scale(1.12); } }
.pourquoi-icon { font-size: 26px; margin-bottom: 12px; align-self: flex-start; }
.occ-card > div:first-child { font-size: 28px; margin-bottom: 14px; align-self: flex-start; }
.pourquoi-title { font-size:14.5px; font-weight:700; color:var(--noir) !important; margin-bottom:7px; line-height:1.25; }
.pourquoi-desc { font-size:12px; color:var(--gris) !important; line-height:1.5; }
.pourquoi-desc strong { color:var(--texte) !important; font-weight:700; }

/* ── AVANT/APRÈS ── */
.section-avap { background:var(--fond) !important; padding:100px 48px; }
.section-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:56px; flex-wrap:wrap; gap:20px; }
.section-lead { font-size:15px; color:var(--gris) !important; max-width:300px; line-height:1.7; text-align:right; }

.section-avap { overflow-x:clip; }   /* les voisines du carrousel debordent : on evite tout scroll horizontal */
.avap-grid { display:grid; grid-template-columns:repeat(2, minmax(0,374px)); grid-template-rows:auto auto;
  gap:24px; align-items:start; justify-content:center; }   /* 2 chantiers publies, centres */
.avap-grid-more { padding-top:28px; }
.avap-card { border-radius:var(--radius); overflow:hidden; background:var(--blanc) !important; box-shadow:var(--shadow); transition:transform var(--t),box-shadow var(--t); }
@media (hover: hover) and (pointer: fine) {
  .avap-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
}
.avap-visual { position:relative; height:220px; cursor:ew-resize; overflow:hidden; user-select:none; content-visibility:auto; contain-intrinsic-size:auto 220px; }
.avap-panel { position:absolute; inset:0; }
.avap-after { z-index:2; clip-path:inset(0 0 0 50%); }
.avap-lbl { position:absolute; bottom:10px; padding:4px 10px; border-radius:6px; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; z-index:20; pointer-events:none; }
.avap-lbl-b { left:10px; background:rgba(0,0,0,.55); color:#fff !important; }
.avap-lbl-a { right:10px; background:var(--blue); color:#fff !important; }
.avap-lbl-a.avap-lbl-violet { background:var(--violet); }
.avap-div { position:absolute; top:0; bottom:0; left:50%; width:2px; background:#fff; z-index:10; transform:translateX(-50%); pointer-events:none; }
.carr-slide[data-pos="0"] .avap-div-handle { pointer-events:auto; cursor:ew-resize; }
.avap-div-handle { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:34px; height:34px; background:#fff; border-radius:50%; box-shadow:0 2px 8px rgba(0,0,0,.2); display:flex; align-items:center; justify-content:center; pointer-events:none; }
.avap-info { padding:20px 22px; background:var(--blanc) !important; }
.avap-tag { display:inline-block; padding:3px 10px; border-radius:6px; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:10px; }
.tag-d { background:var(--violet-soft); color:var(--violet) !important; }
/* Hauteurs reservees : sans elles, un chantier au texte plus court decale ses videos
   par rapport au chantier voisin (visible surtout sur mobile, sans subgrid). */
.avap-title { font-size:16px; font-weight:700; color:var(--noir) !important; margin-bottom:6px;
  line-height:1.3; min-height:calc(2 * 1.3em); }
.avap-desc  { font-size:13px; color:var(--gris) !important; line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  min-height:calc(3 * 1.55em); }

/* Visuels avant/après — chantier « canapé convertible 2 places, tissu gris ».
   vXb = Avant, vXa = Après. Trois angles du même canapé : face, gauche, droite. */
.avap-panel{background-size:cover;background-position:center}
.avap-vide { display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#2A2622 0%,#3A342E 100%); }
.avap-soon { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.45) !important; border:1px dashed rgba(255,255,255,.22);
  border-radius:999px; padding:7px 14px; }
.avap-card-soon { opacity:.82; }
.v1b{background-image:url('../photos/canape-face-avant-m.webp')}
.v1a{background-image:url('../photos/canape-face-apres-m.webp')}
.v3b{background-image:url('../photos/canape-gauche-avant-m.webp')}
.v3a{background-image:url('../photos/canape-gauche-apres-m.webp')}
.v2b{background-image:url('../photos/canape-droit-avant-m.webp')}
.m1b{background-image:url('../photos/matelas-face-avant-m.webp')}
.m1a{background-image:url('../photos/matelas-face-apres-m.webp')}
.m2b{background-image:url('../photos/matelas-gauche-avant-m.webp')}
.m2a{background-image:url('../photos/matelas-gauche-apres-m.webp')}
.v2a{background-image:url('../photos/canape-droit-apres-m.webp')}

/* ── Les videos du meme chantier : empilees, une seule joue a la fois ── */

@media (max-width:900px){
  .chantier { padding:18px 16px 22px; border-radius:18px; }
  .avap-grid { grid-template-columns:1fr; gap:12px; }
  .avap-visual { height:200px; }
}
/* ── Carrousel : 3 avant/apres dans la carte canape ── */
/* Carrousel flottant : les voisines debordent HORS de la carte, elles ne sont pas
   enfermees dedans. La carte porteuse laisse donc passer le debordement. */
.avap-card--carr { overflow:visible; z-index:2; }
.avap-card--carr .avap-info { position:relative; z-index:4; border-radius:0 0 var(--radius) var(--radius); background:var(--blanc) !important; }
.carr { position:relative; height:220px; overflow:visible;
  touch-action:pan-y; user-select:none; -webkit-user-select:none; cursor:grab; }
.carr:active { cursor:grabbing; }
.carr-slide { position:absolute; top:0; bottom:0; left:0; width:100%;
  overflow:hidden; opacity:0; pointer-events:none;
  transition:transform .48s cubic-bezier(.16,1,.3,1), opacity .38s ease, filter .38s ease; }
.carr-slide[data-pos="0"]  { transform:none; opacity:1; z-index:3; pointer-events:auto;
  border-radius:var(--radius) var(--radius) 0 0; }
.carr-slide[data-pos="1"], .carr-slide[data-pos="-1"] { opacity:.42; z-index:1; pointer-events:auto;
  border-radius:14px; filter:brightness(.6); box-shadow:0 16px 38px rgba(0,0,0,.5); }
.carr-slide[data-pos="1"]  { transform:translateX(52%) scale(.82); }
.carr-slide[data-pos="-1"] { transform:translateX(-52%) scale(.82); }
.carr-focus { position:absolute; inset:0; z-index:6; border:none; padding:0; background:transparent; cursor:pointer; }
.carr-slide[data-pos="0"] .carr-focus { display:none; }   /* la photo centrale reste glissable */
.carr-nav { position:absolute; top:50%; transform:translateY(-50%); z-index:7; width:32px; height:32px; padding:0;
  display:flex; align-items:center; justify-content:center; border:1.5px solid var(--blue); border-radius:50%;
  cursor:pointer; background:var(--blue); color:#fff !important; line-height:0;
  box-shadow:0 3px 10px rgba(13,135,251,.35);
  opacity:0; transition:opacity var(--t), background var(--t), color var(--t); }
.carr:hover .carr-nav, .carr:focus-within .carr-nav { opacity:1; }
.carr-nav:hover { background:#fff; color:var(--blue) !important; }
.carr-prev { left:8px; } .carr-next { right:8px; }
.carr-dots { position:absolute; left:0; right:0; bottom:9px; z-index:7; display:flex; justify-content:center; gap:6px; }
.carr-dot { width:7px; height:7px; padding:0; border:none; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.5); box-shadow:0 1px 3px rgba(0,0,0,.4); transition:width var(--t), background var(--t); }
.carr-dot.is-on { width:18px; border-radius:4px; background:#fff; }

/* ── Les videos du meuble ci-dessus : portrait, en carrousel ── */
/* Un chantier = une colonne : sa carte, puis ses videos juste dessous.
   Sur ordinateur, les colonnes partagent les memes rangees (subgrid) : les
   cartes s'alignent entre elles et les blocs video demarrent a la meme hauteur.
   Sur mobile la colonne se deroule -> les videos restent avec leur chantier. */
.chantier-col { display:grid; grid-template-rows:subgrid; grid-row:span 2; align-content:start; }
.chantier-col[hidden] { display:none !important; }   /* un display explicite l'emporte sinon sur l'attribut */
@supports not (grid-template-rows: subgrid) { .chantier-col { display:flex; flex-direction:column; } }
.vcarr { text-align:center; margin-top:26px; }
.vcarr-titre { font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.45) !important; margin-bottom:8px; }
.vcarr-note { font-size:15px; line-height:1.6; color:rgba(255,255,255,.74) !important;
  max-width:520px; margin:0 auto 20px; min-height:calc(3 * 1.6em); }   /* meme hauteur d'un chantier a l'autre */
.vcarr-note strong { color:#fff !important; }
/* Scene video : meme carrousel flottant, en portrait */
/* Les videos restent contenues : le debordement se fait a l'interieur du cadre,
   pour ne pas empieter sur les blocs voisins des prochains chantiers. */
.vcarr-scene { position:relative; width:100%; height:0; padding-bottom:135%; overflow:hidden;
  touch-action:pan-y; user-select:none; -webkit-user-select:none; cursor:grab; }
.vcarr-scene:active { cursor:grabbing; }
.vcarr-scene .carr-slide { left:50%; width:78%; margin-left:-39%; }
.vcarr-scene .carr-slide[data-pos="0"]  { transform:translateX(0) scale(1); }
.vcarr-scene .carr-slide[data-pos="1"]  { transform:translateX(62%) scale(.86); }
.vcarr-scene .carr-slide[data-pos="-1"] { transform:translateX(-62%) scale(.86); }
.vcarr-scene .carr-slide { border-radius:18px; background:#111 center/cover no-repeat; box-shadow:0 18px 44px rgba(0,0,0,.5);
  border:1px solid rgba(255,255,255,.12); }
.vcarr-scene .carr-slide[data-pos="0"] { border-radius:18px; }
.vcarr-scene video { display:block; width:100%; height:100%; object-fit:cover; }
.vcarr-cap { position:absolute; left:0; right:0; bottom:0; padding:34px 14px 12px; font-size:13px;
  font-weight:600; color:#fff !important; background:linear-gradient(transparent, rgba(0,0,0,.8)); }
.vcarr-jauge { position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.16); }
.vcarr-jauge span { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--violet),var(--blue)); }
.vcarr-dots { position:static; display:flex; justify-content:center; gap:7px; margin-top:14px; }
.vcarr-dots .carr-dot { position:static; background:rgba(255,255,255,.32); }
.vcarr-dots .carr-dot.is-on { background:linear-gradient(90deg,var(--violet),var(--blue)); }
.chantier-points { display:none; }   /* points visibles uniquement en version mobile */
@media (max-width:900px){
  .carr { height:200px; }
  .hero-eau { width:24%; min-width:0; bottom:52px; left:10px; }   /* visuel plus petit : la vignette suit */
  .hero-eau figcaption { font-size:8.5px; padding:12px 4px 4px; }
  .vcarr { margin-top:22px; }
  /* Un chantier par ecran, on passe au suivant en balayant : evite une page a rallonge */
  /* Centrage par marges internes : justify-content:center rognerait le 1er chantier */
  .avap-grid { display:flex; grid-template-columns:none; grid-template-rows:none; justify-content:flex-start;
    gap:14px; overflow-x:auto; overflow-y:visible;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    /* largeur figee en unites d'ecran : les marges internes centrent alors exactement */
    padding:2px calc((100% - 82vw)/2) 8px; margin:0 -2px; }
  .avap-grid::-webkit-scrollbar { display:none; }
  .chantier-col { display:flex; flex-direction:column; flex:0 0 82vw; scroll-snap-align:center; }   /* chaque chantier se cale au centre */
  .chantier-points { display:flex; justify-content:center; gap:9px; margin-top:16px; }
  .chantier-point { width:8px; height:8px; padding:0; border:none; border-radius:50%;
    background:rgba(255,255,255,.3); cursor:pointer; transition:transform var(--t), background var(--t); }
  .chantier-point.is-on { background:var(--blue); transform:scale(1.35); }
}
.cta-block { text-align:center; margin-top:52px; }
.cta-block p { font-size:15px; color:var(--gris) !important; margin-bottom:20px; font-style:italic; }
.btn-wa { display:inline-flex; align-items:center; gap:10px; background:linear-gradient(135deg, #9A2BE0, var(--violet) 58%, #5E0FB0); color:#fff !important; text-decoration:none; padding:14px 26px; border-radius:14px; font-weight:700; font-size:15px; transition:all var(--t); box-shadow:0 8px 24px rgba(123,24,200,.32), inset 0 1px 0 rgba(255,255,255,.18); }
/* Hover/tap blanc universel (violet) — anneau de marque pour rester visible sur tout fond */
@media (hover:hover) and (pointer:fine) {
  .btn-wa:hover { background:var(--fond) !important; color:var(--violet) !important; transform:translateY(-2px); box-shadow:0 0 0 2px var(--violet), 0 12px 28px rgba(123,24,200,.30) !important; }
}
.btn-wa:active { background:var(--fond) !important; color:var(--violet) !important; transform:translateY(0); box-shadow:0 0 0 2px var(--violet), 0 4px 12px rgba(123,24,200,.25) !important; }
.btn-wa-blue { background:linear-gradient(135deg, #3DA0FF, var(--blue) 60%, #0660C4) !important; box-shadow:0 8px 24px rgba(13,135,251,.4), inset 0 1px 0 rgba(255,255,255,.22) !important; }
@media (hover:hover) and (pointer:fine) {
  .btn-wa-blue:hover { background:var(--fond) !important; color:var(--blue-dark) !important; transform:translateY(-2px); box-shadow:0 0 0 2px var(--blue), 0 12px 28px rgba(13,135,251,.32) !important; }
}
.btn-wa-blue:active { background:var(--fond) !important; color:var(--blue-dark) !important; transform:translateY(0); box-shadow:0 0 0 2px var(--blue), 0 4px 12px rgba(13,135,251,.3) !important; }

/* ── FORMULES ── */
/* Deux sections claires qui se suivent : filet discret pour garder le rythme */
.section-parrainage + .section-faq { border-top:1px solid var(--hairline); }
.section-formules { padding:100px 24px; background:var(--blanc) !important; }
.section-formules .section-wrap { max-width:1380px; }  /* cartes plus larges que le reste du site */
.formules-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin-top:48px; margin-bottom:44px; align-items:stretch; }  /* 3 domaines de service (canapés / literie / options) */
.formules-grid.is-single { grid-template-columns:minmax(0,560px); justify-content:center; }
.formules-grid.is-double { grid-template-columns:repeat(2,minmax(0,440px)) !important; justify-content:center; }
.formule-card { border-radius:18px; overflow:hidden; box-shadow:var(--shadow); transition:box-shadow var(--t); border:2px solid transparent; background:linear-gradient(var(--blanc),var(--blanc)) padding-box, linear-gradient(125deg,var(--blue),var(--violet)) border-box; display:flex; flex-direction:column; }
/* formule-card : pas de réaction au survol (effet 3D/lift désactivé par choix UX) */
.formule-card.feat { border-color:var(--violet); }
.f-top { padding:28px 24px 18px; }
.formule-card:not(.feat) .f-top { background:transparent; }
.formule-card.feat .f-top { background:linear-gradient(135deg,var(--violet-soft),var(--blanc)); }
.f-pill { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:100px; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:16px; }
.p-s { background:var(--blue); color:#fff !important; }
.p-d { background:var(--violet); color:#fff !important; }
.f-name { font-size:26px; font-weight:800; letter-spacing:-.02em; color:var(--noir) !important; margin-bottom:8px; white-space:nowrap; }  /* nowrap → nom sur 1 seule ligne (aligne les cartes) */
.f-desc { font-size:14px; color:var(--gris) !important; line-height:1.65; min-height:3.3em; }  /* réserve 2 lignes → listes alignées entre cartes, sans vide au-dessus des prix */
.f-body { padding:0 24px 28px; background:var(--blanc) !important; display:flex; flex-direction:column; flex:1; }

/* Liste de prix par pièce (domaines de service à la carte) */
.f-plist { list-style:none; display:flex; flex-direction:column; margin:22px 0 8px; }
.f-plist li { display:flex; align-items:baseline; justify-content:space-between; gap:14px; font-size:14px; padding:11px 0; border-bottom:1px solid var(--hairline); color:var(--texte) !important; line-height:1.4; }
.f-plist li:last-child { border-bottom:none; }
.f-plist .fp-name { flex:1; }

.f-plist .fp-name small { display:block; font-size:11.5px; font-weight:600; color:var(--gris) !important; margin-top:1px; }
.f-plist .fp-price { font-weight:800; color:var(--noir) !important; white-space:nowrap; }

/* Tapis : deux prix par ligne, synthetique puis naturelle */

.f-plist li.fp-hdr { border-bottom:1px solid rgba(22,19,17,.10); padding-bottom:6px; margin-bottom:2px; }
.f-plist li.fp-hdr .fp-name { font-size:12px; font-weight:700; color:var(--gris) !important; }

.f-plist-foot .hl-blue { color:var(--blue) !important; }
/* Prix lisibles d'un coup d'oeil : une ligne par prix, chiffres en grand. */
.f-plist-gros { margin-top:10px; }
.f-plist-gros li { align-items:center; padding:13px 0; font-size:15px; }
.f-plist-gros .fp-name { font-weight:600; }
.f-plist-gros .fp-price { font-size:23px; letter-spacing:-.01em; line-height:1.1; }
.f-plist-gros .fp-price small { font-size:13px; font-weight:700; color:var(--gris) !important; margin-left:2px; }
.f-plist-gros .fp-price.fp-devis { font-size:14px; color:var(--blue) !important; }
.f-plist-gros li.fp-ex { padding-top:2px; }
.f-plist-gros li.fp-ex .fp-name,
.f-plist-gros li.fp-ex .fp-price { font-size:13px; font-weight:600; color:var(--gris) !important; }
@media (max-width:900px){
  .f-plist-gros li { font-size:14px; gap:10px; }
  .f-plist-gros .fp-price { font-size:21px; }
}

/* Passerelle vers le site frere : la carte reste en pleine largeur, sous
   les traitements cibles, et ne concurrence aucun appel a l'action. */
.pont-cristal { display:flex; flex-wrap:wrap; align-items:center; gap:22px 30px;
  width:100%; margin-top:36px; padding:24px 28px; border-radius:18px;
  background:linear-gradient(135deg, rgba(13,135,251,.06), rgba(123,24,200,.07)) !important;
  border:1.5px solid var(--hairline); }
.pont-txt { flex:1 1 340px; min-width:0; }
.pont-ey { font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--violet) !important; margin-bottom:6px; }
.pont-titre { font-size:19px; font-weight:800; color:var(--noir) !important; margin-bottom:8px; }
.pont-p { font-size:14px; line-height:1.6; color:var(--gris) !important; margin:0; }
.pont-action { flex:0 1 300px; text-align:center; }
.pont-lien { display:inline-block; padding:13px 22px; border-radius:12px; text-decoration:none !important;
  font-size:14px; font-weight:800; color:var(--noir) !important;
  background:var(--blanc) !important; border:1.5px solid var(--gris-clair);
  box-shadow:var(--shadow-sm); transition:border-color var(--t), box-shadow var(--t), transform var(--t); }
/* Au survol, le bouton prend les couleurs de CarCristal : l'orange de sa
   marque vers le violet commun aux deux sites. */
.pont-lien:hover { color:#fff !important; border-color:transparent;
  background:linear-gradient(135deg, #F08000, #7B18C8) !important;
  box-shadow:0 10px 26px rgba(240,128,0,.28); transform:translateY(-1px); }
.pont-note { margin-top:9px; font-size:12.5px; color:var(--gris) !important; }
@media (max-width:900px){
  .pont-cristal { padding:20px; gap:16px; }
  .pont-action { flex:1 1 100%; }
  .pont-lien { display:block; }
}
/* Couleur de la carte : prix, mises en avant et bouton de reservation */
.f-carte-bleu   { --f-accent:var(--blue); }
.f-carte-violet { --f-accent:var(--violet); }
/* Contour a la couleur de la carte. « Canapes & assises » : bleu jusqu'aux assises,
   violet a partir des canapes ; --deg-debut / --deg-fin sont mesures par le script
   (milieu des lignes « fauteuil » et « canape 2 ou 3 places »), valeurs par defaut en attendant. */
.formule-card.f-carte-bleu   { background:linear-gradient(var(--blanc),var(--blanc)) padding-box, linear-gradient(var(--blue),var(--blue)) border-box; }
.formule-card.f-carte-violet { background:linear-gradient(var(--blanc),var(--blanc)) padding-box, linear-gradient(var(--violet),var(--violet)) border-box; }
.formule-card.f-carte-degrade { background:linear-gradient(var(--blanc),var(--blanc)) padding-box,
  linear-gradient(180deg, var(--blue) 0%, var(--blue) var(--deg-debut, 52%), var(--violet) var(--deg-fin, 62%), var(--violet) 100%) border-box; }
/* les prix des canapes (ligne « 2 ou 3 places » et suivantes) suivent la partie violette du contour */
.f-carte-degrade li[data-degrade="fin"], .f-carte-degrade li[data-degrade="fin"] ~ li { --f-accent:var(--violet); }
/* le trait entre assises et canapes passe lui aussi du bleu au violet */
.f-carte-degrade li[data-degrade="debut"] { border-bottom:1px solid transparent; border-image:linear-gradient(90deg, var(--blue), var(--violet)) 1; }
.f-plist-gros .fp-price,
.f-plist-gros .fp-price.fp-devis { color:var(--f-accent, var(--blue)) !important; }
.f-plist-foot .hl-accent { color:var(--f-accent, var(--blue)) !important; }
.f-pill-ic { flex-shrink:0; }
/* Titre de carte cliquable : mene a la page de la prestation */
.f-name-lien { color:inherit !important; text-decoration:none; transition:color var(--t); }
@media (hover:hover) and (pointer:fine){ .f-name-lien:hover { color:var(--f-accent, var(--blue)) !important; } }
/* Raccourcis vers les pages de prestation, sous les cartes (telephone seulement) */
.f-raccourcis { display:none; }
@media (max-width:900px){
  .f-raccourcis { display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 18px; }
  .f-raccourcis a { display:inline-flex; align-items:center; gap:6px; padding:10px 14px; border-radius:999px; text-decoration:none;
    background:var(--blanc) !important; border:1.5px solid var(--hairline); color:var(--noir) !important; font-size:13.5px; font-weight:700; }
  .f-raccourcis a::after { content:'→'; color:var(--blue); }
}
.f-more { display:inline-flex; align-items:center; gap:6px; margin-top:8px; font-size:13px; font-weight:700;
  color:var(--f-accent, var(--blue)) !important; text-decoration:none; }
.f-more::after { content:'→'; transition:transform var(--t); }
@media (hover:hover) and (pointer:fine){ .f-more:hover::after { transform:translateX(3px); } }
/* lien vers une page detaillee, sous un texte d'introduction ou un bouton */
.lien-suite { margin-top:14px; font-size:14px; }
.fp-ic { flex-shrink:0; margin-top:1px; color:var(--f-accent, var(--blue)); }
/* Prix barre (prix de base) a gauche du prix actuel, comme sur CarCristal */
.fp-prix { display:inline-flex; align-items:baseline; gap:8px; white-space:nowrap; }
.fp-old { font-size:15px; font-weight:700; color:var(--gris) !important; text-decoration:line-through; text-decoration-thickness:1.5px; }
.f-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* Matelas : le prix « 1 face » en petit, sous le nom */
.fp-1f { display:block; font-size:12px; font-weight:600; color:var(--gris) !important; margin-top:1px; }
.f-plist-gros li.fp-hdr { padding:0 0 4px; border-bottom:1px solid var(--hairline); }
.fp-hdr-lbl { font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--gris) !important; }
/* Boutons de carte, comme CarCristal : reservation (couleur de la carte) + WhatsApp */
.f-cta-row { display:flex; gap:9px; margin-top:auto; padding-top:16px; }
.f-cta2 { flex:1 1 auto; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:14px 12px; border-radius:12px; font-weight:800; font-size:13.5px; text-decoration:none !important;
  white-space:nowrap; transition:filter var(--t), transform var(--t); }
.f-cta-resa { flex:2 1 auto; background:var(--f-accent, var(--blue)) !important; color:#fff !important; box-shadow:0 6px 18px rgba(22,19,17,.14); }
.f-cta-wa { flex:1 1 auto; background:#25D366 !important; color:#fff !important; box-shadow:0 6px 18px rgba(37,211,102,.26); }
.f-cta-wa .wa-logo { width:17px; height:17px; flex-shrink:0; fill:currentColor; }
@media (hover:hover) and (pointer:fine){ .f-cta-wa:hover { filter:brightness(1.05); } .f-cta-resa:hover { filter:brightness(1.06); } }
.f-cta2:active { transform:scale(.98); }
/* Besoin specifique et entreprise : sous les cartes, a la place du simulateur */
.f-encarts { margin-top:4px; }
/* Les cartes sont enveloppees dans un .reveal : c'est lui l'element de grille.
   Sans ces deux lignes, la carte garde sa hauteur propre et la rangee fait un escalier. */
.formules-grid > .reveal { display:flex; }
.formules-grid > .reveal > .formule-card { flex:1; }
.f-plist-foot { margin-bottom:16px; }   /* le pied garde sa hauteur, le bouton descend seul */
.f-plist-foot { font-size:12px; color:var(--gris) !important; line-height:1.55; margin:14px 0 4px; display:flex; gap:7px; align-items:flex-start; }
/* Bloc traitements sous les cartes : contour dégradé bleu→violet (un seul, pas par carte) */
.f-treatments { margin-top:36px; border:2px solid transparent; border-radius:20px; box-shadow:var(--shadow); background:linear-gradient(var(--blanc),var(--blanc)) padding-box, linear-gradient(125deg,var(--blue),var(--violet)) border-box; padding:26px 26px 22px; }
.f-treatments-head { display:flex; flex-direction:column; gap:3px; margin-bottom:18px; text-align:center; }
.f-treatments-eyebrow { font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; background:linear-gradient(120deg,var(--blue),var(--violet)); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.f-treatments-title { font-size:21px; font-weight:800; color:var(--noir) !important; }
.f-treatments-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.f-treat-ic { font-size:26px; margin-bottom:8px; }
.f-treat-name { font-size:15px; font-weight:700; color:var(--noir) !important; margin-bottom:4px; }
.f-treat-price { font-size:14px; font-weight:800; background:linear-gradient(120deg,var(--blue),var(--violet)); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; width:fit-content; margin-bottom:8px; }
.f-treat-desc { font-size:12.5px; color:var(--gris) !important; line-height:1.55; }
@media (max-width:760px){ .f-treatments-grid { grid-template-columns:1fr; gap:18px; } }

/* Promo de lancement */
.promo-bar { display:block; background:linear-gradient(135deg,#3DA0FF,var(--blue) 55%,#0558B0); color:#fff !important; padding:14px 20px; border-radius:14px; font-size:13px; font-weight:700; line-height:1.5; text-align:center; margin-top:20px; margin-bottom:28px; box-shadow:0 8px 24px rgba(13,135,251,.26); }
/* Liens vers les cartes d'explication, dans les encarts d'offre */
.promo-bar a, .f-promo a, .top-bar a { color:inherit; text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1.5px; font-weight:800; }
@media (hover:hover) and (pointer:fine) { .promo-bar a:hover, .f-promo a:hover { opacity:.82; } }
.f-promo { display:flex; align-items:center; gap:8px; background:rgba(13,135,251,0.09); border:1.5px solid rgba(13,135,251,0.35); border-radius:10px; padding:10px 14px; font-size:12px; font-weight:700; color:var(--blue) !important; margin-top:16px; margin-bottom:10px; line-height:1.4; flex-wrap:wrap; }
.formule-card.feat .f-promo { background:rgba(123,24,200,0.08); border-color:rgba(123,24,200,0.35); color:var(--violet) !important; }

@keyframes promoGlow { 0%,100%{text-shadow:0 0 6px rgba(34,197,94,.5)} 50%{text-shadow:0 0 16px rgba(34,197,94,.9),0 0 4px #fff} }
.sim-promo-incl { color:#22c55e !important; font-weight:700; animation:promoGlow 2s ease-in-out infinite; }
/* Promo bar orange : « offerte » en blanc avec halo (pas de vert sur l'orange) */
.promo-bar .sim-promo-incl { color:#fff !important; animation:none; text-shadow:0 0 8px rgba(255,255,255,.55); }
/* Carte Saphir : « offerte » en texte normal (l'option offerte se choisit dans le simulateur) */
.f-promo .sim-promo-incl { color:inherit !important; animation:none; text-shadow:none; }

/* ══ FORMULES : cartes de prix ══ */
.formules-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }

/* ── Dépliage animé réutilisable (comparateur, « voir plus »…) ── */
.collapsible { display:grid; grid-template-rows:0fr; transition:grid-template-rows .42s cubic-bezier(.4,0,.2,1); }
.collapsible.open { grid-template-rows:1fr; }

@media (prefers-reduced-motion: reduce) { .collapsible { transition:none; } }

/* Bouton « voir plus » de l'Avant/Après — défini après .collapse-toggle pour que le margin-top prime sur le raccourci margin:0 auto */
.avap-more-btn { margin-top:28px; }
/* ── Bouton zoom sur les visuels + Lightbox ── */
.zoom-btn { position:absolute; top:10px; right:10px; z-index:30; width:36px; height:36px; border:none; border-radius:10px; background:rgba(0,0,0,.42); color:#fff; line-height:0; padding:0; cursor:pointer; display:flex; align-items:center; justify-content:center; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); opacity:.72; transition:opacity .2s var(--ease), background .2s, transform .2s var(--ease); }
.avap-visual:hover .zoom-btn, .hero-carousel:hover .zoom-btn { opacity:1; }
/* le cadre du hero deborde la photo de 8 % : on cale la loupe sur le coin de la photo */
#heroCarousel .zoom-btn { top:calc(8% + 10px); right:calc(8% + 10px); }
.zoom-btn:hover { background:rgba(0,0,0,.72); transform:scale(1.08); }
.lightbox { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(18,12,6,0); opacity:0; visibility:hidden; transition:opacity .35s var(--ease), background .35s var(--ease), visibility 0s linear .35s; -webkit-backdrop-filter:blur(0); backdrop-filter:blur(0); }
.lightbox.open { opacity:1; visibility:visible; background:rgba(18,12,6,.85); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); transition:opacity .35s var(--ease), background .35s var(--ease); }
.lightbox-stage { position:relative; width:min(92vw,1080px); aspect-ratio:16/10; max-height:84vh; border-radius:22px; overflow:hidden; box-shadow:0 30px 90px rgba(0,0,0,.55); transform:scale(.82) translateY(14px); opacity:0; transition:transform .42s var(--ease), opacity .42s var(--ease); }
.lightbox.open .lightbox-stage { transform:scale(1) translateY(0); opacity:1; }
.lightbox-stage > * { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; cursor:ew-resize; }
.lightbox-close { position:absolute; top:18px; right:20px; z-index:10000; width:46px; height:46px; border:none; border-radius:50%; background:rgba(255,255,255,.16); color:#fff; font-size:19px; cursor:pointer; display:flex; align-items:center; justify-content:center; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); transition:background .2s, transform .3s var(--ease); }
.lightbox-close:hover { background:rgba(255,255,255,.32); transform:rotate(90deg); }

/* Teaser « bientôt » — fine ligne discrète, visible tant qu'une offre reste masquée */
.coming-teaser { display:flex; align-items:center; justify-content:center; gap:7px; max-width:540px; margin:20px auto 0; padding:0 16px; text-align:center; color:var(--gris); font-size:12px; font-weight:500; line-height:1.4; opacity:.92; }
.coming-teaser .ct-dot { width:6px; height:6px; border-radius:50%; flex:none; background:var(--blue); animation:ctPulse 2.4s ease-in-out infinite; }
.coming-teaser strong { font-weight:700; color:var(--gris) !important; }

@keyframes ctPulse  { 0%,100%{box-shadow:0 0 0 0 rgba(13,135,251,.4)}  50%{box-shadow:0 0 0 5px rgba(13,135,251,0)} }

/* Deux mises en garde que le client doit lire AVANT de reserver :
   le tapis ne se reserve pas au forfait, et un matelas deux faces
   immobilise la chambre jusqu'au soir. */

.avis { display:flex; gap:12px; align-items:flex-start; margin:0; padding:15px 18px;
  border-radius:14px; font-size:13.5px; line-height:1.55; color:var(--noir) !important;
  background:var(--blanc) !important; border:1.5px solid var(--hairline);
  box-shadow:var(--shadow-sm); }

.avis strong { font-weight:800; }
.avis a { color:var(--blue) !important; font-weight:800; }

@media (max-width:900px){ .avis { font-size:13px; padding:13px 14px; } }

/* En-tête simulateur : orange (Saphir) par défaut, balayage vers le violet (Diamant) */

/* Poids constant (600) en tout temps : éviter que le passage en gras à la
   sélection n'élargisse le texte et ne redimensionne les boutons (rangée fit-content). */

.sim-btn-soon { cursor:not-allowed !important; position:relative; color:var(--gris) !important; opacity:0.72; }
.sim-btn-bientot { opacity:0.72; }
.sim-btn-soon-badge { font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; background:var(--gris); color:#fff !important; border-radius:4px; padding:1px 5px; margin-left:6px; vertical-align:middle; }

/* Occasions cards */
.occ-card { cursor:default; transition:box-shadow var(--t), border-color var(--t) !important;
  display:flex; flex-direction:column; height:100%; box-sizing:border-box; }
.occ-card > div:last-child { flex:1; }
@media (hover: hover) and (pointer: fine) {
  .occ-card:hover { box-shadow:var(--shadow); border-color:rgba(13,135,251,.28) !important; }
}
.occ-card > div:first-child { transition:transform var(--t); }
@media (hover: hover) and (pointer: fine) { .occ-card:hover > div:first-child { transform:scale(1.12); } }

 /* manquait vs sim-btn et sim-toggle */

.res-btn.disabled { background:#888 !important; cursor:not-allowed; pointer-events:none; box-shadow:none !important; }
@keyframes waBtnGlow { 0%,100%{box-shadow:0 4px 16px rgba(37,211,102,.4)} 50%{box-shadow:0 0 28px rgba(37,211,102,.85),0 4px 12px rgba(37,211,102,.5)} }
.res-btn:not(.disabled) { animation:waBtnGlow 2s ease-in-out infinite; }

/* CTA libre sous le simulateur */
.sim-aside-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin-top: 20px;
  background: var(--blanc) !important;
  border: 1.5px solid var(--gris-clair);
  border-radius: 14px;
  padding: 18px 24px;
}
.sim-aside-text { display: flex; align-items: center; gap: 14px; }
.sim-aside-icon { font-size: 22px; flex-shrink: 0; }
.sim-aside-title { font-size: 14px; font-weight: 700; color: var(--noir) !important; margin-bottom: 2px; }
.sim-aside-desc  { font-size: 13px; color: var(--gris) !important; }
.sim-aside-btn {
  flex-shrink: 0;
  background: var(--blue) !important; color: #fff !important;
  padding: 10px 20px; border-radius: 10px; text-align: center;
  font-size: 13px; font-weight: 700; text-decoration: none;
  white-space: nowrap; transition: background var(--t);
}
@media (hover:hover) and (pointer:fine) { .sim-aside-btn:hover { background:#fff !important; color:var(--blue-dark) !important; box-shadow:0 0 0 2px var(--blue) !important; } }
.sim-aside-btn:active { background:#fff !important; color:var(--blue-dark) !important; box-shadow:0 0 0 2px var(--blue) !important; }
.sim-aside-btns { flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; min-width: 210px; }

/* Encart entreprise */
.sim-ent-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin-top: 14px;
  background: linear-gradient(135deg, #F7F0FF, #ffffff) !important;
  border: 1.5px solid var(--violet-soft);
  border-radius: 14px;
  padding: 18px 24px;
}
.sim-ent-text { display: flex; align-items: center; gap: 14px; }
.sim-ent-icon { font-size: 22px; flex-shrink: 0; }
.sim-ent-title { font-size: 14px; font-weight: 800; color: var(--violet-dark) !important; margin-bottom: 2px; }
.sim-ent-desc  { font-size: 13px; color: var(--gris) !important; }
.sim-ent-btn {
  flex-shrink: 0;
  background: var(--violet) !important; color: #fff !important;
  padding: 10px 20px; border-radius: 10px;
  font-size: 13px; font-weight: 700; text-decoration: none;
  white-space: nowrap; transition: background var(--t);
}
@media (hover:hover) and (pointer:fine) { .sim-ent-btn:hover { background:#fff !important; color:var(--violet) !important; box-shadow:0 0 0 2px var(--violet) !important; } }
.sim-ent-btn:active { background:#fff !important; color:var(--violet) !important; box-shadow:0 0 0 2px var(--violet) !important; }

/* Résultat */

.res-right { display:flex; flex-direction:column; gap:8px; align-items:flex-end; }

.res-btn  { display:inline-flex; align-items:center; gap:8px; background:#25D366; color:#fff !important; text-decoration:none; padding:14px 22px; border-radius:12px; font-weight:700; font-size:14px; transition:all var(--t); white-space:nowrap; }
.res-btn:hover  { background:#1DA851; transform:translateY(-2px); box-shadow:0 8px 24px rgba(37,211,102,.45); }
.res-btn:active { background:#1DA851; transform:translateY(0); }

/* Zone e-mail : au clic sur « Par e-mail », un panneau se déroule sur toute la largeur */

.res-right.is-mailing .res-btn { opacity:0; pointer-events:none; }

/* ── PROCESSUS (dark) ── */
.section-process { position:relative; overflow:hidden; padding:100px 48px;
  background:
    radial-gradient(50% 60% at 88% -4%, rgba(13,135,251,.24), transparent 60%),
    radial-gradient(48% 58% at 8% 104%, rgba(123,24,200,.26), transparent 60%),
    var(--noir) !important; }
.section-process .section-wrap { position:relative; z-index:1; }
.section-process .section-h2 { color:var(--blue) !important; }
.steps { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-top:56px; position:relative; }
.steps::after { content:''; position:absolute; top:28px; left:10%; right:10%; height:1px; background:linear-gradient(90deg,transparent,rgba(13,135,251,.5),rgba(123,24,200,.5),transparent); }
.step { display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; position:relative; z-index:1; }
.step-num { width:58px; height:58px; border-radius:50%;
  /* Fond opaque : le dégradé orange par-dessus var(--noir) solide — la ligne du fil ne transparaît plus */
  background: radial-gradient(circle at 50% 32%, rgba(13,135,251,.40), transparent 68%), var(--noir) !important;
  border:1.5px solid rgba(13,135,251,.55);
  box-shadow:0 0 0 6px rgba(13,135,251,.06), 0 10px 26px rgba(0,0,0,.42);
  display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:800;
  color:var(--blue) !important; transition:transform var(--t), box-shadow var(--t); }
@media (hover: hover) and (pointer: fine) {
  .step:hover .step-num { transform:translateY(-3px); box-shadow:0 0 0 8px rgba(13,135,251,.09), 0 14px 30px rgba(0,0,0,.5); }
}
.step-title { font-size:15px; font-weight:700; color:#fff !important; margin-bottom:6px; }
.step-title.step-title-cta { color:var(--blue) !important; }
.step-desc  { font-size:12px; color:rgba(255,255,255,.45) !important; line-height:1.6; }

/* ── FOOTER ── */
footer { background:var(--blanc) !important; border-top:1px solid var(--hairline); padding:22px 48px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.f-logo { display:flex; align-items:center; gap:10px; font-size:28px; font-weight:800; color:var(--noir) !important; letter-spacing:.03em; }
.f-logo-name { display:inline-flex; }
.f-logo-img { width:40px; height:40px; flex-shrink:0; }
.f-logo-home { color:var(--violet) !important; }
.f-logo-cristal { color:var(--blue) !important; }
.f-left { display:flex; align-items:center; gap:18px; }
.f-links { flex:1; min-width:0; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; list-style:none; margin:0; padding:0; }
.f-social { display:flex; gap:12px; align-items:center; }
.f-social a { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:10px; border:1.5px solid var(--gris-clair); color:var(--gris) !important; transition:border-color var(--t), color var(--t), background var(--t); }
.f-social a:hover { border-color:var(--blue); color:var(--blue-dark) !important; background:var(--blue-soft); }
.f-social svg { width:19px; height:19px; fill:currentColor; }

/* ── DIAMANT GLOW ── */

.sim-toggle-soon { pointer-events:none !important; cursor:default; opacity:0.72; }
.d-soon-strip { background:var(--violet); color:#fff !important; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; text-align:center; padding:9px 16px; }

/* ── PARRAINAGE / LE CERCLE ── */
.section-parrainage { padding:100px 48px; background:var(--blanc) !important; }
.par-tiers { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:48px; align-items:stretch; }
.par-card { position:relative; background:var(--blanc) !important; border:1.5px solid var(--hairline); border-radius:18px; padding:28px 26px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:7px; transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s ease; }
.par-ico { font-size:30px; line-height:1; align-self:flex-start; transition:transform var(--t); }
@media (hover:hover) and (pointer:fine) {
  .par-card:hover { transform:translateY(-4px); box-shadow:0 14px 34px rgba(22,19,17,.10); }
  .par-card:hover .par-ico { transform:scale(1.12); }
  .par-card--parrain:hover { border-color:var(--blue); }
}
.par-grade { font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:800; }
.par-cond { font-size:20px; font-weight:800; color:var(--noir) !important; letter-spacing:-.01em; }
.par-reward { font-size:14px; color:var(--texte) !important; line-height:1.55; margin-top:3px; }
.par-card--parrain { border-color:rgba(13,135,251,.32); }
.par-card--parrain .par-grade { color:var(--blue) !important; }

.par-how { display:flex; flex-wrap:wrap; gap:12px 22px; justify-content:center; margin-top:42px; }
.par-step { display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:600; color:var(--gris) !important; }
.par-step-n { display:inline-flex; align-items:center; justify-content:center; width:25px; height:25px; border-radius:50%; background:var(--blue); color:#fff !important; font-weight:800; font-size:13px; flex:none; }
.par-foot { text-align:center; margin-top:30px; }
.par-legal { font-size:12.5px; color:var(--gris) !important; margin-top:4px; }
.par-legal a { color:var(--gris) !important; text-decoration:underline; text-underline-offset:2px; }
.par-legal a:hover { color:var(--blue) !important; }
.par-reward { margin-top:6px; }
.par-points { list-style:none; display:flex; flex-direction:column; gap:7px; }
.par-points li { position:relative; padding-left:22px; font-size:13.5px; line-height:1.5; color:var(--texte) !important; }
.par-points li::before { content:'✦'; position:absolute; left:0; top:1px; font-size:12px; line-height:1.4; }
.par-card--parrain .par-points li::before { color:var(--blue) !important; }

.par-fnref { font-size:.72em; font-weight:700; vertical-align:super; color:var(--gris) !important; }
.par-fn { font-size:11.5px; color:var(--gris) !important; line-height:1.55; max-width:660px; margin:20px auto 0; text-align:center; }
.par-fn a { color:var(--gris) !important; text-decoration:underline; text-underline-offset:2px; }
.par-fn a:hover { color:var(--blue) !important; }

/* ── Sections sombres (alternance ciblée : Résultats · Options) ── */
.on-dark { background:
    radial-gradient(54% 60% at 8% 0%, rgba(13,135,251,.12), transparent 60%),
    radial-gradient(52% 64% at 96% 102%, rgba(123,24,200,.20), transparent 60%),
    var(--noir) !important; }
.on-dark .section-h2 { color:#fff !important; }
.on-dark .section-lead { color:rgba(255,255,255,.74) !important; }
.on-dark .section-p { color:rgba(255,255,255,.74) !important; }
.on-dark .section-p strong { color:#fff !important; }

.on-dark .cta-block p { color:rgba(255,255,255,.74) !important; }
.on-dark .coming-teaser { color:rgba(255,255,255,.66) !important; }
.on-dark .coming-teaser strong { color:#fff !important; }
@media (max-width:900px){ .section-parrainage { padding:64px 22px; } .par-tiers { grid-template-columns:1fr; } }
/* ── OPT SOON ── */
.opt-soon-badge { font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:#fff !important; border-radius:4px; padding:2px 6px; margin-left:7px; vertical-align:middle; display:inline-block; white-space:nowrap;
  background:linear-gradient(100deg, var(--violet) 0%, #A855F7 42%, #C77DFF 52%, #A855F7 62%, var(--violet) 100%);
  background-size:260% 100%; animation:soonSweep 3.4s linear infinite, soonGlow 2.6s ease-in-out infinite; }
@keyframes soonSweep { from { background-position:130% 0; } to { background-position:-30% 0; } }
@keyframes soonGlow { 0%, 100% { box-shadow:0 0 0 0 rgba(123,24,200,.45); } 55% { box-shadow:0 0 0 6px rgba(123,24,200,0); } }
@media (prefers-reduced-motion: reduce) { .opt-soon-badge { animation:none; background:var(--violet); } }

/* ── REVEAL ── */
.reveal { opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.visible { opacity:1; transform:translateY(0); }
/* Soulèvements CSS : uniquement pour les cartes sans tilt JS
   (.avap-card exclue du tilt → garde son hover CSS)
   Les autres (.occ, .opt, .pourquoi, .formule) sont gérées par le JS 3D sur desktop.
   Sur mobile (pointer:coarse) → le JS ne tourne pas ET aucune règle CSS hover ne s'applique. */
/* avap-card et c-card : pas de JS tilt mais hover CSS desktop uniquement */
@media (hover: hover) and (pointer: fine) {
  .avap-card.reveal:hover { transform:translateY(-6px); }
  .c-card.reveal:hover    { transform:translateY(-4px); }
}

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

/* Accessibilité : neutralise les animations si l'utilisateur le demande */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal { opacity:1 !important; transform:none !important; }
}

/* ══ RESPONSIVE ══ */

/* Tablette large (< 1100px) */
@media(max-width:1100px) {
  .hero { padding:140px 32px 80px; gap:48px; }
  nav { padding:18px 32px; }
  .logo { font-size:28px; }
  .logo-img { width:40px; height:40px; }
  .f-logo { font-size:26px; }
  .f-logo-img { width:36px; height:36px; }
  .section-pourquoi, .section-avap, .section-formules, .section-process { padding:80px 32px; }
  footer { padding:18px 32px; }
}

/* Tablette (< 900px) */
@media(max-width:900px) {
  /* ── PERFORMANCE : on coupe les flous backdrop-filter (très coûteux au scroll mobile)
     et on rend les fonds opaques pour garder la lisibilité ── */
  nav { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; background:rgba(251,249,246,0.97) !important; }
  .hero-badge { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; background:var(--blue-soft) !important; }
  .pourquoi-card { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
  .float-badge { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }

  nav { padding:14px 20px; }
  .logo { font-size:26px; }
  .logo-img { width:36px; height:36px; }
  .f-logo { font-size:24px; }
  .f-logo-img { width:32px; height:32px; }
  .nav-links { display:none; }
  .mcb-float.is-visible { display:flex; }
  .nav-cta-mobile { display:inline-flex; align-items:center; justify-content:center;
    margin-left:auto; padding:9px 13px; font-size:12.5px; white-space:nowrap; }
  .nav { gap:8px; }
  .logo { font-size:23px; }   /* laisse la place au bouton et au drapeau */
  .logo-img { width:32px; height:32px; }
  .call-fab { display:none; }
  body { padding-bottom: 0; }

  .hero { grid-template-columns:1fr; padding:128px 20px 60px; gap:40px; }
  .float-tl, .float-br { display:none; }
  .zoom-btn { display:none; } /* photos déjà pleine largeur sur mobile/tablette → zoom inutile */
  .hero h1 { font-size:clamp(30px,8vw,48px); }
  .btn-wa-hero { width:100%; box-sizing:border-box; }
  .btn-wa-sub  { white-space:normal; }

  .pourquoi-grid { grid-template-columns:1fr 1fr; }

  .avap-grid { grid-template-columns:1fr; }
  .section-header { flex-direction:column; }
  .section-lead { text-align:left; max-width:100%; }

  /* Cartes empilees, format compact : plus de carrousel horizontal ni de blanc reserve */
  .formules-grid { display:grid !important; grid-template-columns:1fr !important; gap:14px; overflow:visible; padding:0; margin:22px 0 18px; }
  .formules-grid > .reveal { display:block; }
  .section-formules .f-top { padding:16px 16px 2px; }
  .section-formules .f-pill { margin-bottom:8px; }
  .section-formules .f-name { font-size:21px; margin-bottom:2px; }
  .section-formules .f-desc { min-height:0; font-size:13.5px; line-height:1.5; }
  .section-formules .f-body { padding:0 16px 16px; }
  .section-formules .f-plist-gros { margin:6px 0 2px; }
  .section-formules .f-plist-gros li { padding:8px 0; }
  .section-formules .f-plist-foot { margin:6px 0 0; }
  .section-formules .f-cta-row { padding-top:12px; }
  .f-cta2 { min-width:0; }
  /* la reservation domine : WhatsApp passe en logo seul (nom lu via aria-label) */
  .f-cta-resa { flex:1 1 auto; }
  .f-cta-wa { flex:0 0 auto; padding-left:16px; padding-right:16px; }
  .f-cta-wa span { display:none; }
  .f-cta-wa .wa-logo { width:20px; height:20px; }

  

  .res-right { align-items:flex-start; }

  .steps { grid-template-columns:1fr 1fr; }
  .steps::after { display:none; }

  footer { flex-direction:column; align-items:flex-start; padding:14px 20px; }

  .section-pourquoi, .section-avap, .section-formules, .section-process { padding:64px 20px; }
}

/* Mobile (< 540px) */
@media(max-width:540px) {
  .hero { padding:120px 16px 48px; }
  .hero h1 { font-size:clamp(28px,9vw,40px); }
  .pourquoi-grid { grid-template-columns:1fr; }
  .steps { grid-template-columns:1fr; }
  .f-body { padding:0 18px 24px; }
  .f-top  { padding:24px 18px 18px; }
  .f-promo { font-size:11px; padding:8px 10px 8px; }

  .res-btn { white-space:normal; text-align:center; justify-content:center; width:100%; box-sizing:border-box; }

  
  /* Mobile : la zone e-mail prend toute la largeur (sur desktop elle se cale sur
     --wa-w ; sur mobile ce calage se bloquait à une largeur partielle → transition cassée) */

  .res-right { align-items:stretch; width:100%; }
  .sim-aside-cta { flex-direction:column; align-items:flex-start; gap:14px; }
  .sim-ent-cta { flex-direction:column; align-items:flex-start; gap:14px; }
  .sim-aside-btn { white-space:normal; width:100%; text-align:center; justify-content:center; box-sizing:border-box; }
  /* Boutons d'action en pleine largeur : meme largeur d'une carte a l'autre */

  
  .res-right      { width:100%; }
  .sim-aside-btns { width:100%; min-width:0; }
  .sim-ent-btn    { display:block; width:100%; box-sizing:border-box; text-align:center; white-space:normal; }
  nav { padding:12px 16px; }
  .logo { font-size:24px; gap:8px; }
  .logo-img { width:32px; height:32px; }
  footer { padding:12px 16px; }
  .f-logo { font-size:22px; gap:8px; }
  .f-logo-img { width:28px; height:28px; }
  .f-links { flex-wrap:wrap; gap:16px; }
}

/* ── FAQ (section visible, appuie le balisage FAQPage) ── */
.section-faq { padding:100px 48px; background:var(--blanc) !important; }
.faq-list { max-width:780px; margin:48px auto 0; display:flex; flex-direction:column; gap:12px; }
.faq-item { background:var(--blanc) !important; border:1px solid var(--hairline); border-radius:16px; box-shadow:var(--shadow-sm); overflow:hidden; transition:box-shadow var(--t); }
.faq-item[open] { box-shadow:var(--shadow); }
.faq-q { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; font-size:16px; font-weight:700; color:var(--noir) !important; }
.faq-q::-webkit-details-marker { display:none; }
.faq-q:hover { color:var(--blue) !important; }
.faq-chev { flex:0 0 auto; font-size:14px; color:var(--blue); transition:transform .3s ease; }
.faq-item[open] .faq-chev { transform:rotate(180deg); }
.faq-a { padding:0 24px 22px; font-size:15px; line-height:1.65; color:var(--gris) !important; }
.faq-item:not([open]) .faq-a { display:none; }   /* filet : force le repli même si le rendu natif de <details> flanche */

/* Garde-fou : le bouton « Voir plus » n'existe QUE sur mobile (réaffiché dans la media query
   ci-dessous). Évite tout bouton résiduel sur desktop si le nettoyage JS ne s'est pas déclenché. */
.m-fold-btn { display:none; }

/* ══════════════ MOBILE UX (≤900px) ══════════════
   Objectif : casser l'impression de « scroll infini ».
   1) le devis remonte avant les packs · 2) l'argumentation se replie (« voir plus ») · 3) respiration réduite.
   ⚠️ TOUT est dans cette media query → le desktop est strictement inchangé. */
@media (max-width:900px) {
  /* 1 ── Réordonnancement (seuls les <section> + <footer> sont dans le flux, le reste est fixed → sûr) */
  body { display:flex; flex-direction:column; }
  #accueil          { order:1; }
  #resultats        { order:2; }
  #formules         { order:4; }
  #reservation      { order:5; }   /* ← le devis remonte ici (avant les packs) */
  #options          { order:6; }
  .section-pourquoi { order:7; }
  #occasions        { order:8; }
  #processus        { order:9; }
  #parrainage       { order:10; }
  #faq              { order:11; }
  footer            { order:12; }

  /* 2 ── Sections repliables : la classe .m-fold + le bouton sont posés par JS (mobile only) */
  /* Repli animé : hauteur pilotée en JS (mesure du scrollHeight) → vraie transition à l'ouverture/fermeture */
  .m-fold { max-height:340px; overflow:hidden; position:relative; transition:max-height .55s cubic-bezier(.4,0,.2,1); }
  .m-fold::after {
    content:''; position:absolute; left:0; right:0; bottom:0; height:140px; z-index:2; pointer-events:none;
    background:linear-gradient(to bottom, transparent, var(--m-fold-bg, #fff));
    transition:opacity .3s ease;
  }
  .m-fold.m-open::after { opacity:0; }
  .m-fold-btn {
    position:absolute; left:50%; bottom:14px; transform:translateX(-50%); z-index:3;
    display:flex; align-items:center; gap:7px; cursor:pointer; font-family:inherit; white-space:nowrap;
    padding:10px 20px; border-radius:999px; font-size:13px; font-weight:700;
    background:var(--blanc) !important;
    border:1.5px solid var(--hairline); box-shadow:0 6px 18px rgba(22,19,17,.20);
  }
  .m-fold-btn, .m-fold-btn .m-fold-txt, .m-fold-btn .m-fold-chev { color:var(--noir) !important; } /* lisible même sur section sombre */
  .m-fold-btn:active { transform:translateX(-50%) scale(.97); }
  .m-fold.m-open .m-fold-btn { position:static; transform:none; width:fit-content; margin:20px auto 0; }
  .m-fold.m-open .m-fold-btn:active { transform:scale(.97); }
  .m-fold-chev { font-size:11px; transition:transform .3s ease; }
  .m-fold.m-open .m-fold-chev { transform:rotate(180deg); }

  /* 3 ── Respiration réduite (moins de scroll mort entre les blocs) */
  .section-avap, .section-formules, .section-pourquoi, .section-process, .section-parrainage, .section-faq, #occasions { padding-top:54px; padding-bottom:54px; }
  .faq-list { margin-top:28px; }
  .faq-q { padding:16px 18px; font-size:14.5px; }
  .faq-a { padding:0 18px 18px; font-size:14px; }

  /* 5 ── Textes d'intro raccourcis à un format mobile cohérent */
  .section-p { font-size:14px; line-height:1.55; }
  .section-h2 { font-size:clamp(24px,7vw,30px); }
  .eyebrow { font-size:10px; }

  /* 6 ── Épuration : sur mobile, les blocs CTA passent en « titre + bouton » (le détail reste sur desktop) */
  .sim-ent-desc, .sim-aside-desc, .cta-block p { display:none !important; }
  .sim-ent-cta, .sim-aside-cta { padding:16px 18px; gap:12px; }
  .sim-ent-title, .sim-aside-title { font-size:15px; }

  /* 7 ── Avant/après en CARROUSEL + points (les 6 cartes rassemblées par JS) + curseur au bouton */
  .avap-carousel { display:flex !important; grid-template-columns:none !important; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:2px 2px 6px; }
  .avap-carousel::-webkit-scrollbar { display:none; }
  .avap-carousel > .avap-card { flex:0 0 78%; scroll-snap-align:center; }  /* 78% → peek net des cartes gauche/droite (on voit qu'il y en a d'autres) */

  /* la poignée reste : le glisser fonctionne aussi sur mobile */
  .avap-dots { display:flex; justify-content:center; gap:9px; margin-top:18px; }
  .avap-dot { width:8px; height:8px; padding:0; border:none; border-radius:50%; background:var(--gris-clair); cursor:pointer; transition:transform .3s ease, background .3s ease; }
  .avap-dot.is-active { background:var(--blue); transform:scale(1.4); }
  .on-dark .avap-dot { background:rgba(255,255,255,.32); }
  .on-dark .avap-dot.is-active { background:var(--blue); }
  .avap-swipe-btn { position:absolute; left:50%; bottom:12px; transform:translateX(-50%); z-index:11; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; padding:8px 15px; border-radius:999px; border:none; cursor:pointer; font-family:inherit; font-size:12px; font-weight:700; background:rgba(255,255,255,.96); color:var(--noir) !important; box-shadow:0 4px 14px rgba(0,0,0,.28); }
  .avap-swipe-btn:active { transform:translateX(-50%) scale(.96); }
  .avap-swipe-icon { font-size:14px; }
  /* Hero raccord avec la section photo : poignée ronde + hint masqués (remplacés par le bouton pilule) */
  /* poignée du hero conservée sur mobile (glisser actif) */
  .s-hint { display:none !important; }

  /* 8 ── Doublons / sections redondantes masqués sur mobile */
  .hero-badge { display:none !important; }   /* badge « Pays de Gex… » retiré du hero */
  .hero-trust { display:none !important; }   /* « Devis transparent » + « Au lieu convenu » retirés du hero */
  .promo-bar { display:none !important; }   /* offre fondateurs déjà rappelée sur chaque carte */
  #options   { display:none !important; }   /* « Choisissez vos packs » : redondant avec les packs du devis */
  #processus { display:none !important; }   /* « Le déroulé » : allégé sur mobile */

  /* 10 ── « Les bonnes raisons » : cartes réduites à l'icône + titre (descriptions masquées) */
  #occasions .occ-card { padding:18px 20px !important; }
  #occasions .occ-card > div:last-child { display:none !important; }

  /* 11 ── « La différence HomeCristal » : même méthode → cartes réduites à l'icône + titre */
  .section-pourquoi .pourquoi-card { padding:18px 20px !important; }
  .section-pourquoi .pourquoi-icon { margin-bottom:8px; }
  .section-pourquoi .pourquoi-title { margin-bottom:0; }
  .section-pourquoi .pourquoi-desc { display:none !important; }
}

/* ══ Rythme vertical resserre (2026-10-08) ══
   Avant : 100 px en haut et en bas de chaque section, hero a 100 vh, titres
   a 56 px de leur contenu. Place en fin de feuille : l'emporte sur les
   regles d'origine a chaque palier. */
.hero { min-height:0; padding:112px 48px 56px; }
.section-pourquoi, .section-avap, .section-formules, .section-process,
.section-parrainage, .section-faq, .section-occ, #occasions { padding-top:64px; padding-bottom:64px; }
.section-occ { padding-left:48px; padding-right:48px; }
.section-header { margin-bottom:32px; }
.pourquoi-grid, .par-tiers, .steps { margin-top:28px; }
.faq-list { margin-top:28px; }
.formules-grid { margin-top:28px; margin-bottom:24px; }
.f-treatments, .pont-cristal { margin-top:24px; }
.cta-block { margin-top:32px; }
.par-how { margin-top:24px; }
.par-foot { margin-top:20px; }
@media (max-width:1100px){
  .hero { padding:104px 32px 48px; }
  .section-pourquoi, .section-avap, .section-formules, .section-process,
  .section-parrainage, .section-faq, .section-occ, #occasions { padding-top:52px; padding-bottom:52px; }
  .section-occ { padding-left:32px; padding-right:32px; }
}
@media (max-width:900px){
  .hero { padding:84px 20px 32px; gap:28px; }
  .section-pourquoi, .section-avap, .section-formules, .section-process,
  .section-parrainage, .section-faq, .section-occ, #occasions { padding-top:40px; padding-bottom:40px; }
  .section-occ { padding-left:20px; padding-right:20px; }
  .section-header { margin-bottom:20px; }
  .pourquoi-grid, .par-tiers, .steps, .faq-list { margin-top:20px; }
  .formules-grid { margin-top:20px; margin-bottom:16px; }
  .f-treatments, .pont-cristal { margin-top:16px; }
  .cta-block { margin-top:24px; }
}
@media (max-width:540px){ .hero { padding:80px 16px 28px; } }

/* Pictogrammes au trait (a la place des emojis), couleur par contexte */
.picto { display:inline-block; vertical-align:middle; flex-shrink:0; }
.hero-badge .picto { color:var(--blue); }
.float-icon { color:var(--blue); line-height:0; }
.f-treat-ic { color:var(--blue); line-height:0; }
.sim-aside-icon { color:var(--blue); line-height:0; }
.sim-ent-icon { color:var(--violet); line-height:0; }
/* la section sombre force le blanc sur tout son contenu ; les cartes, elles, sont blanches */
.section-pourquoi .pourquoi-icon { line-height:0; }
.section-pourquoi .pourquoi-icon svg { color:var(--blue) !important; }
.occ-ic { margin-bottom:12px; color:var(--blue); line-height:0; }
.par-ico { color:var(--violet); }