/* Accueil pixel-perfect — généré par perfect-web-clone, 13 sections */

/* ============ SECTION 1 ============ */
/* ==========================================================================
   SECTION 1 — Hero d'accueil Tissu Ébène (réplique Wix, base 1440 px)
   Section originale : #comp-kbgaghri — rect 0,0 1440x900
   ========================================================================== */

.s1 {
  /* L'original est en position:sticky (les sections suivantes glissent
     par-dessus — effet « reveal » Wix). top:0 reproduit cet effet. */
  position: sticky;
  top: 0;
  z-index: 0;
  width: 100%;
  height: 900px;
  overflow: hidden;
  color: rgb(255, 255, 255);
  font-family: 'Assistant', sans-serif;
}

/* --------------------------------------------------------------------------
   Fond : sous-couche noire + vidéo de tissu bordeaux (cover plein écran).
   Le poster local sert d'image de secours en background cover.
   -------------------------------------------------------------------------- */
.s1-bg {
  position: absolute;
  inset: 0;
  background-image: url("/assets/img/hero-tissu-bordeaux.jpg");
  background-size: cover;
  background-position: center center;
}

.s1-bg-underlay {
  position: absolute;
  inset: 0;
  background-color: rgb(0, 0, 0);
  z-index: -1;
}

.s1-bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* --------------------------------------------------------------------------
   Barre d'en-tête : pilule bordée de blanc.
   rect original : x 58.234 / 1440 = 4.044 %, y 19.125 px, w 1323.016 = 91.876 %, h 44 px
   -------------------------------------------------------------------------- */
.s1-topbar {
  position: absolute;
  top: 19.125px;
  left: 4.044%;
  width: 91.876%;
  height: 44px;
  box-sizing: border-box;
  border: 1px solid rgb(255, 255, 255);
  border-radius: 22px;
  display: flex;
  align-items: center;
  padding: 0 20px 0 12px;
  animation: s1-float-in 1.2s cubic-bezier(0.165, 0.84, 0.44, 1) both;
}

/* Logo : « Tissu Ébène » (Bitter 13 px, capitales) + slogan (Assistant 14 px) */
.s1-logo { width: 299px; flex: none; }

.s1-logo-name {
  margin: 0;
  font-family: 'Bitter', serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 15px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.s1-logo-name a {
  color: rgb(255, 255, 255);
  text-decoration: none;
}

.s1-logo-tagline {
  margin: 0;
  font-family: 'Assistant', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  color: rgb(255, 255, 255);
}

/* Menu horizontal — 7 entrées, libellés Assistant 16 px blancs */
.s1-nav { flex: 1 1 auto; margin-left: 37px; min-width: 0; }

.s1-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

.s1-menu-item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 11px 14px;
}

.s1-menu-item > a {
  color: rgb(255, 255, 255);
  font-family: 'Assistant', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.4s ease;
}

.s1-menu-item > a:hover { color: rgba(255, 255, 255, 0.7); }

/* État sélectionné (« Accueil ») : brun-or sombre relevé sur la capture */
.s1-menu-item.s1-is-selected > a { color: rgb(77, 51, 22); }

/* Chevron des entrées à sous-menu */
.s1-sub-toggle {
  background: none;
  border: 0;
  padding: 0;
  margin-left: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.s1-chevron {
  width: 10px;
  height: 7px;
  fill: rgb(255, 255, 255);
  transition: transform 0.4s ease;
}

.s1-has-sub:hover .s1-chevron,
.s1-has-sub:focus-within .s1-chevron { transform: rotate(180deg); }

/* Sous-menus déroulants (survol / focus). Le style exact des panneaux Wix
   n'était pas observable (fermés à la capture) : panneau bordeaux assorti. */
.s1-submenu {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 280px;
  background-color: rgba(63, 11, 16, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s linear 0.4s;
  z-index: 10;
}

.s1-has-sub:hover .s1-submenu,
.s1-has-sub:focus-within .s1-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.s1-submenu a {
  display: block;
  padding: 8px 18px;
  color: rgb(255, 255, 255);
  font-family: 'Assistant', sans-serif;
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.4s ease;
}

.s1-submenu a:hover { color: rgba(255, 255, 255, 0.7); }

/* Bouton hamburger 30x30 à droite (barres blanches) */
.s1-burger {
  flex: none;
  margin-left: auto;
  width: 30px;
  height: 30px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.s1-burger svg { width: 30px; height: 30px; display: block; }
.s1-burger path { fill: rgb(255, 255, 255); }

/* --------------------------------------------------------------------------
   Titres (tous centrés, blancs)
   -------------------------------------------------------------------------- */

/* h3 « Plus de 50 ans d'expérience » — Assistant 28.5 px, top 181.61 px */
.s1-kicker-wrap {
  position: absolute;
  top: 181.61px;
  left: 13.5417%;   /* 195 / 1440 */
  width: 72.9156%;  /* 1049.984 / 1440 */
  animation: s1-float-in 1.2s cubic-bezier(0.165, 0.84, 0.44, 1) both;
}

.s1-kicker {
  margin: 0;
  font-family: 'Assistant', sans-serif;
  font-size: 28.5px;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  color: rgb(255, 255, 255);
}

/* h2 « Tissu Ébène » — Bitter 157.5 px light, capitales, top 251.58 px */
.s1-title-wrap {
  position: absolute;
  top: 251.58px;
  left: 5.4688%;   /* 78.75 / 1440 */
  width: 85.9375%; /* 1237.5 / 1440 */
  animation: s1-float-in 1.4s cubic-bezier(0.165, 0.84, 0.44, 1) both;
}

.s1-title {
  margin: 0;
  font-family: 'Bitter', serif;
  font-size: 157.5px;
  font-weight: 300;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  color: rgb(255, 255, 255);
}

/* h1 « Atelier de restauration… » — Assistant 39.375 px light, top 447.94 px */
.s1-subtitle-wrap {
  position: absolute;
  top: 447.94px;
  left: 13.5384%;  /* 194.953 / 1440 */
  width: 72.9156%;
  animation: s1-float-in 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) both;
}

.s1-subtitle {
  margin: 0;
  font-family: 'Assistant', sans-serif;
  font-size: 39.375px;
  font-weight: 300;
  line-height: 1.4;
  text-align: center;
  color: rgb(255, 255, 255);
}

/* --------------------------------------------------------------------------
   Bloc « Nos services » + flèche basse
   rect : x 500.578 = 34.7624 %, y 756.31 px, w 438.75 = 30.4688 %
   -------------------------------------------------------------------------- */
.s1-services {
  position: absolute;
  top: 756.31px;
  left: 34.7624%;
  width: 30.4688%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.s1-services-label {
  margin: 0;
  font-family: 'Assistant', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
  color: rgb(255, 255, 255);
}

/* Flèche : forme horizontale d'origine pivotée de 90° (pointe vers le bas) */
.s1-arrow {
  width: 40px;
  height: 40px;
  margin-top: 26px;
  transition: all 0.3s ease-in-out;
}

.s1-arrow svg {
  width: 40px;
  height: 40px;
  display: block;
  transform: rotate(90deg);
}

.s1-arrow path { fill: rgb(255, 255, 255); }

/* --------------------------------------------------------------------------
   Animation d'entrée (motion-floatIn Wix)
   -------------------------------------------------------------------------- */
@keyframes s1-float-in {
  0%   { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .s1-topbar,
  .s1-kicker-wrap,
  .s1-title-wrap,
  .s1-subtitle-wrap { animation: none; }
}

/* --------------------------------------------------------------------------
   Responsive — empilement sous 860 px (le menu complet passe la main
   au hamburger, titres fluides, flux vertical)
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .s1 {
    height: auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .s1-topbar {
    position: relative;
    top: auto;
    left: auto;
    margin: 19px auto 0;
    width: calc(100% - 32px);
  }

  .s1-nav { display: none; }

  .s1-kicker-wrap,
  .s1-title-wrap,
  .s1-subtitle-wrap,
  .s1-services {
    position: relative;
    top: auto;
    left: auto;
    width: 92%;
  }

  .s1-kicker-wrap  { margin-top: 96px; }
  .s1-kicker       { font-size: 22px; }
  .s1-title-wrap   { margin-top: 24px; }
  .s1-title        { font-size: 13vw; }
  .s1-subtitle-wrap { margin-top: 24px; }
  .s1-subtitle     { font-size: 26px; }
  .s1-services     { margin: 96px 0 48px; }
}


/* ============ SECTION 2 ============ */
/* ============================================================
   SECTION 2 — Panneau « Tapissier »
   Source Wix : #comp-llezvhsy (page accueil, référence 1440 px)
   rect : x 0 / y 900 / 1440 × 900 px
   Fond : noir opaque (colorUnderlay rgb(0,0,0)) + photo
   « Tapissier Paris » en cover, opacité 0.4, position sticky
   chez Wix (effet fixe/parallaxe) → background-attachment: fixed
   ============================================================ */

.s2 {
  position: relative;
  width: 100%;
  height: 900px;                    /* hauteur exacte de la section à 1440 px */
  background-color: rgb(0, 0, 0);   /* underlay noir sous l'image à 40 % */
  color: rgb(255, 255, 255);
  overflow: hidden;                 /* contient le fond ; le contenu reste dans les 900 px */
}

.s2 *,
.s2 *::before,
.s2 *::after {
  box-sizing: border-box;
}

/* --- Fond image plein écran (img_comp-llezvhsy)
   1440 × 900, object-fit cover, object-position 50% 50%,
   opacity 0.4, position: sticky chez Wix → équivalent fixe --- */
.s2-bg {
  position: absolute;
  inset: 0;
  background-image: url('/assets/img/tapissier-paris.jpg');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;     /* reproduit le fond figé Wix (sticky) */
  opacity: 0.4;
}

/* --- Boîte texte gauche (comp-llf04bg6)
   rect : x 140.625 → 9.7656 % de 1440 ; y 1201.47 → 301.47 px
   sous le haut de section ; largeur 438.75 px → 30.4688 % --- */
.s2-textbox {
  position: absolute;
  left: 9.7656%;
  top: 301.47px;
  width: 30.4688%;
}

/* --- Titre H2 (font_2 Wix) : Bitter 56.25px, graisse 400, blanc,
   hauteur rendue 68 px (1 ligne), margin-bottom 22.0938 px --- */
.s2-title {
  margin: 0 0 22.0938px;
  font-family: 'Bitter', serif;
  font-size: 56.25px;
  font-weight: 400;
  line-height: 1.2;                 /* ≈ 67.5 px, hauteur mesurée 68 px */
  letter-spacing: normal;
  color: rgb(255, 255, 255);
  text-align: left;
}

/* --- Paragraphes (font_7 Wix, madefor → Assistant)
   20px / 32px, graisse 300, blanc ; bloc margin-bottom 22.9688 px --- */
.s2-desc {
  margin: 0 0 22.9688px;
}

.s2-desc p {
  margin: 0;
  font-family: 'Assistant', sans-serif;
  font-size: 20px;
  font-weight: 300;
  line-height: 32px;
  letter-spacing: normal;
  color: rgb(255, 255, 255);
  text-align: left;
}

/* --- Flèche cercle (comp-llf04bg9) : lien 56 × 56, SVG blanc --- */
.s2-arrow {
  display: block;
  width: 56px;
  height: 56px;
}

.s2-arrow svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: rgb(255, 255, 255);
}

/* --- Photos portrait 243 × 324 (16.875 % de 1440), décalées.
   Positions hors transform de parallaxe Wix (parallaxSpeed 1.5) :
   comp-llf0dw4u : x 817.219 → 56.7513 % ; y 1241.42 → top 341.42 px
   comp-llf0jojx : x 1117.828 → 77.6270 % ; y 1134.56 → top 234.56 px
   Sous-couche couleur Wix conservée sous chaque image. --- */
.s2-photos {
  position: absolute;
  inset: 0;
  pointer-events: none;             /* simple couche d'images, non cliquable */
}

.s2-photo {
  position: absolute;
  width: 16.875%;
  height: 324px;
  margin: 0;
  overflow: hidden;
}

.s2-photo-1 {
  left: 56.7513%;
  top: 341.42px;
  background-color: rgb(222, 197, 197);
}

.s2-photo-2 {
  left: 77.6270%;
  top: 234.56px;
  background-color: rgb(209, 219, 195);
}

.s2-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* ============================================================
   Responsive : empilement propre sous 860 px
   ============================================================ */
@media (max-width: 860px) {
  .s2 {
    height: auto;
    padding: 64px 24px 72px;
  }

  .s2-bg {
    background-attachment: scroll;  /* fixed peu fiable sur mobile */
  }

  .s2-textbox {
    position: static;
    width: auto;
    max-width: 560px;
    margin: 0 0 48px;
  }

  .s2-title {
    font-size: 38px;
  }

  .s2-desc p {
    font-size: 18px;
    line-height: 29px;
  }

  .s2-photos {
    position: static;
    pointer-events: auto;
    display: flex;
    gap: 20px;
  }

  .s2-photo {
    position: static;
    width: calc(50% - 10px);
    max-width: 243px;
    height: auto;
    aspect-ratio: 243 / 324;        /* même cadrage 3:4 qu'au desktop */
  }

  .s2-photo-2 {
    margin-top: -40px;              /* conserve le décalage diagonal du design */
  }
}


/* ============ SECTION 3 ============ */
/* ============================================================
   SECTION 3 — « Ébéniste » (réplique Wix #comp-llf1ienv)
   Référence desktop : 1440 × 900 px (rect y 1800 → 2700)
   ============================================================ */

.s3 {
  position: relative;
  width: 100%;
  height: 900px;
  background-color: rgb(0, 0, 0); /* colorUnderlay Wix */
  overflow: hidden;
  color: rgb(0, 0, 0);
}

/* Fond image plein écran avec parallaxe
   (Wix : bgMedia 1440×2700 + wow-image sticky, focal point 39% / 65%) */
.s3-bg {
  position: absolute;
  inset: 0;
  background-image: url('/assets/img/ebeniste.jpg');
  background-size: cover;
  background-position: 39% 65%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.s3-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ---------- Colonne gauche (comp-llf1ieou : 0,0 → 720×900) ---------- */

.s3-col-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;          /* 720 / 1440 */
  height: 100%;
}

/* Carte texte (comp-llf1ieow : x 141, y 253, 439×393) */
.s3-card {
  width: 60.9375%;     /* 438.75 / 720 — centré dans la colonne => x ≈ 141 */
  margin: 253px auto 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* H2 (comp-llf1iepb1) — 56.25px calculé à 1440, Bitter 400, blanc, capitales */
.s3-title {
  margin: 0 0 23px;    /* 5.036% de 439px ≈ 22–23 px mesurés */
  font-family: 'Bitter', serif;
  font-weight: 400;
  font-size: clamp(46px, 3.90625vw, 90px); /* = 56.25px à 1440 */
  line-height: normal;
  letter-spacing: 0em;
  text-transform: uppercase;
  text-align: left;
  color: #FFFFFF;
}

/* Paragraphe (comp-llf1iep61) — Assistant 300, 20px / 1.6, blanc */
.s3-text {
  margin: 0 0 23px;    /* 5.236% de 439px ≈ 23 px mesurés */
  font-family: 'Assistant', sans-serif;
  font-weight: 300;
  font-size: clamp(16px, 1.5625vw, 20px); /* = 20px à 1440 */
  line-height: 1.6;
  letter-spacing: 0em;
  text-align: left;
  color: #FFFFFF;
}

/* Flèche ronde (comp-llf1ieox6) — 56×56, fill #FFFFFF,
   transition all .3s ease-in-out, hover scale(1.03) */
.s3-arrow {
  display: block;
  width: 56px;
  height: 56px;
  transition: all 0.3s ease-in-out 0s, visibility 0s;
}
.s3-arrow:hover {
  transform: scaleX(1.03) scaleY(1.03);
}
.s3-arrow svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: #FFFFFF;
  fill-opacity: 1;
  stroke: #757575;
  stroke-width: 0;
}

/* ---------- Duo de photos (comp-lqm0wksf : 544×431, calé à droite,
     centré verticalement => x 794, y 235) ---------- */

.s3-photos {
  position: absolute;
  top: 50%;
  right: 7.1289%;      /* margin-right Wix : 7.12890625% => x droit = 1337 */
  transform: translateY(-50%);
  display: flex;
  flex-direction: row;
}

.s3-photo {
  position: relative;
  width: 243px;
  height: 324px;
  margin: 0;
  overflow: hidden;
}

/* Photo 1 (comp-llf1iepf1) — x 794, fond d'attente rgb(199,211,213) */
.s3-photo--1 {
  background-color: rgb(199, 211, 213);
  margin-right: 57px;  /* 1094 − (794 + 243) */
}

/* Photo 2 (comp-llf1iepj1) — décalée de 107 px vers le bas,
   fond d'attente rgb(240,213,182) */
.s3-photo--2 {
  background-color: rgb(240, 213, 182);
  margin-top: 107px;   /* 431 − 324 */
}

.s3-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* ============================================================
   Responsive — empilement sous 860 px
   ============================================================ */

@media (max-width: 860px) {
  .s3 {
    height: auto;
    min-height: 0;
    padding: 80px 0 64px;
  }

  /* background-attachment: fixed est peu fiable sur mobile */
  .s3-bg {
    background-attachment: scroll;
  }

  .s3-col-left {
    position: static;
    width: 100%;
    height: auto;
  }

  .s3-card {
    width: 82%;          /* règle mobile Wix : 82.05% */
    margin: 0 auto;
    align-items: center;
  }

  .s3-title,
  .s3-text {
    text-align: center;  /* règles Wix des points de rupture étroits */
  }

  .s3-arrow {
    width: 50px;
    height: 50px;
  }

  .s3-photos {
    position: static;
    transform: none;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 48px;
    padding: 0 16px;
  }

  .s3-photo--1 {
    margin-right: 0;
  }

  .s3-photo--2 {
    margin-top: 0;
  }
}


/* ============ SECTION 4 ============ */
/* ============================================================
   SECTION 4 — « Rénovation Tapis »  (#comp-llf28c9r)
   Référence Wix : 1440 × 900 px, y = 2700 → 3600
   Fond : noir + image parallaxe (opacité 0.4)
   ============================================================ */

.s4 {
  position: relative;
  width: 100%;
  height: 900px;
  background-color: rgb(0, 0, 0);
  overflow: hidden;
  font-family: 'Assistant', sans-serif;
}

/* --- Fond parallaxe (image dimmée à 40 % sur fond noir) --- */
.s4-bg {
  position: absolute;
  inset: 0;
  background-image: url('/assets/img/bandeau-tapis-roules.jpg');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  opacity: 0.4;
}

.s4-inner {
  position: relative;
  height: 100%;
}

/* ------------------------------------------------------------
   Bloc texte (colonne gauche)
   Wix : x 140.625 / 1440 = 9.7656 % — top 273.8 px — l. 471.375 px
   ------------------------------------------------------------ */
.s4-text {
  position: absolute;
  left: 9.7656%;            /* 140.625 px @1440 */
  top: 273.8px;             /* 2973.797 − 2700 */
  width: 32.7344%;          /* 471.375 px @1440 */
  color: rgb(255, 255, 255);
}

.s4-title {
  margin: 0 0 23.72px;      /* 23.7188 px */
  max-width: 464.625px;
  font-family: 'Bitter', serif;
  font-size: 50.625px;      /* 50.6251 px calculé */
  font-weight: 400;
  line-height: 60px;        /* 120 px sur 2 lignes */
  letter-spacing: normal;
  text-align: left;
  color: rgb(255, 255, 255);
}

.s4-desc {
  margin: 0 0 24.672px;     /* 24.6719 px */
}

.s4-desc p {
  margin: 0;
  font-family: 'Assistant', sans-serif;
  font-size: 20px;
  font-weight: 300;
  line-height: 32px;
  text-align: left;
  color: rgb(255, 255, 255);
}

/* --- Flèche « Arches » (lien vers /renovation-tapis-paris) --- */
.s4-arrow {
  display: block;
  width: 56px;
  height: 56px;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.s4-arrow svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: rgb(255, 255, 255);
}

.s4-arrow:hover {
  opacity: 0.7;
  transform: translateX(4px);
}

/* ------------------------------------------------------------
   Galerie (colonne droite) — 2 images 243 × 324 px
   img1 : x 808.1875 (56.124 %), top 341.44 px, fond #677E82
   img2 : x 1108.797 (77 %),     top 234.56 px, fond #E1BB90
   ------------------------------------------------------------ */
.s4-img {
  position: absolute;
  width: 16.875%;           /* 243 px @1440 */
  aspect-ratio: 243 / 324;
  overflow: hidden;
}

.s4-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.s4-img--restauration {
  left: 56.124%;
  top: 341.44px;            /* 234.5625 + marge 106.874 */
  background-color: rgb(103, 126, 130);
}

.s4-img--nettoyage {
  left: 77%;
  top: 234.56px;
  background-color: rgb(225, 187, 144);
}

/* --- Dérive douce au scroll (effet « parallaxe flottante » Wix,
       parallaxSpeed 1.5 : img gauche monte, img droite descend) --- */
@supports (animation-timeline: view()) {
  .s4-img--restauration {
    animation: s4-drift-up linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
  .s4-img--nettoyage {
    animation: s4-drift-down linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
}

@keyframes s4-drift-up {
  from { transform: translateY(24px); }
  to   { transform: translateY(-24px); }
}

@keyframes s4-drift-down {
  from { transform: translateY(-24px); }
  to   { transform: translateY(24px); }
}

/* ------------------------------------------------------------
   Responsive — empilement sous 860 px
   ------------------------------------------------------------ */
@media (max-width: 860px) {
  .s4 {
    height: auto;
    padding: 64px 24px 72px;
  }

  /* background-attachment: fixed peu fiable sur mobile */
  .s4-bg {
    background-attachment: scroll;
  }

  .s4-text {
    position: static;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
  }

  .s4-title {
    max-width: none;
    font-size: 36px;
    line-height: 44px;
  }

  .s4-desc p {
    font-size: 18px;
    line-height: 29px;
  }

  .s4-gallery {
    display: flex;
    justify-content: center;
    gap: 24px;
    max-width: 520px;
    margin: 40px auto 0;
  }

  .s4-img {
    position: static;
    width: calc(50% - 12px);
    max-width: 243px;
  }

  .s4-img--nettoyage {
    margin-top: -32px;       /* rappel du décalé desktop */
  }
}


/* ============ SECTION 5 ============ */
/* ============================================================
   SECTION 5 — « La Maison » (page d'accueil tissuebene.fr)
   Référence desktop : 1440 px de large, hauteur 870.922 px
   Fond : sous-couche rgb(104, 69, 69) + image parallaxe à 40 %
   d'opacité (équivalent : voile rgba(104,69,69,0.6) SUR l'image)
   ============================================================ */

.s5 {
  position: relative;
  width: 100%;
  height: 870.922px;
  /* Underlay #684545 + image opacité 0.4 (sticky/parallaxe chez Wix)
     => voile rgba(104,69,69,0.6) par-dessus l'image, attachée au viewport */
  background-color: rgb(104, 69, 69);
  background-image:
    linear-gradient(rgba(104, 69, 69, 0.6), rgba(104, 69, 69, 0.6)),
    url('/assets/img/bandeau-pont.avif');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed; /* parallaxe (image sticky dans l'original) */
  overflow: hidden;
  color: rgb(255, 255, 255);
  font-family: 'Assistant', sans-serif;
}

/* Deux colonnes de 720 px (50 % / 50 %), pleine hauteur */
.s5-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  height: 100%;
}

.s5-col {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* ---------- Colonne gauche : bloc texte ----------
   Boîte : x 140.625 px (19.531 % de 720) — y 286.94 px
   (centrée verticalement : (870.922 − 297.047) / 2)
   largeur 438.75 px (60.938 % de 720) */
.s5-col-left {
  justify-content: center;
}

.s5-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 19.531%;
  width: 60.938%;
  max-width: 438.75px;
}

/* H2 « La Maison » — font_2 Wix : bitter, 56.25 px, 400, blanc,
   rendu en capitales, hauteur 68 px (interligne ≈ 1.21) */
.s5-title {
  margin: 0 0 22.094px;
  width: 100%;
  font-family: 'Bitter', serif;
  font-size: 56.25px;
  font-weight: 400;
  line-height: 1.21;
  letter-spacing: normal;
  text-transform: uppercase;
  color: rgb(255, 255, 255);
}

/* Bloc paragraphes — font_7 Wix : assistant, 20 px / 32 px, 300, blanc
   décalé de 18 px à gauche, largeur 456.75 px (déborde légèrement la boîte) */
.s5-text {
  margin: 0 0 22.953px 18px;
  width: 456.75px;
  max-width: calc(100% - 18px);
}

.s5-p {
  margin: 0;
  font-family: 'Assistant', sans-serif;
  font-size: 20px;
  font-weight: 300;
  line-height: 32px;
  color: rgb(255, 255, 255);
}

/* Flèche cerclée 56 × 56 px, lien vers la page « La Maison » */
.s5-arrow {
  display: block;
  width: 56px;
  height: 56px;
  transition: all 0.3s ease-in-out, visibility 0s ease; /* a.IT88M3 d'origine */
}

.s5-arrow svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: rgb(255, 255, 255);
}

.s5-arrow:hover {
  opacity: 0.7;
}

/* ---------- Colonne droite : portrait du fondateur ----------
   x 907.078 px (187.084 px dans la colonne = 25.984 % de 720)
   y 3785.49 − 3600 = 185.49 px — 314.656 × 448.609 px
   coins arrondis 5.625 px, fond #eee sous l'image */
.s5-portrait {
  margin: 185.49px 0 0 25.984%;
  width: 314.656px;
  height: 448.609px;
  background-color: rgb(238, 238, 238);
  border: 2px solid rgba(255, 255, 255, 0);
  border-radius: 5.625px;
  overflow: hidden;
  box-sizing: border-box;
}

.s5-portrait-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* ============================================================
   RESPONSIVE — empilement sous 860 px
   ============================================================ */
@media (max-width: 860px) {
  .s5 {
    height: auto;
    background-attachment: scroll; /* fixed peu fiable sur mobile */
  }

  .s5-inner {
    grid-template-columns: 1fr;
    height: auto;
    padding: 64px 24px 72px;
    row-gap: 48px;
  }

  .s5-box {
    margin-left: 0;
    width: 100%;
    max-width: 456.75px;
  }

  .s5-title {
    font-size: 40px;
  }

  .s5-text {
    margin-left: 0;
    width: 100%;
    max-width: 100%;
  }

  .s5-portrait {
    margin: 0 auto;
    max-width: 100%;
  }
}


/* ============ SECTION 6 ============ */
/* ============================================================
   SECTION 6 — « Restauration de Meubles à Paris »
   Source Wix : #comp-lwonlk6h (page accueil, référence 1440 px)
   rect : x 0 / y 4470.92 / 1440 × 372.84 px
   Fond : transparent (rgba(255,255,255,0)) — hérite du fond de page
   ============================================================ */

.s6 {
  position: relative;
  width: 100%;
  height: 372.84px;               /* hauteur exacte de la section à 1440 px */
  background-color: rgba(255, 255, 255, 0);
  color: rgb(0, 0, 0);
  overflow: visible;
}

.s6 *,
.s6 *::before,
.s6 *::after {
  box-sizing: border-box;
}

.s6-content {
  position: relative;
  width: 100%;
  height: 100%;
}

/* --- Titre H2 (font_2 Wix)
   rect : x 175.72 → 12.2027 % de 1440 ; y 4544.92 → 74 px sous le haut
   largeur 1089.09 px → 75.6315 % --- */
.s6-title {
  width: 75.6315%;
  margin: 74px 0 0 12.2027%;
  font-family: 'Bitter', serif;
  font-size: 22.5px;
  font-weight: 400;
  line-height: 31.5px;
  letter-spacing: normal;
  color: rgb(52, 35, 35);
  text-align: center;
}

/* --- Bloc texte (font_8 Wix)
   rect : x 172.125 → 11.9531 % ; y 4598.73 (h2 finit à 4576.42 → écart 22.31 px)
   largeur 1089.09 px → 75.6315 % --- */
.s6-text {
  width: 75.6315%;
  margin: 22.31px 0 0 11.9531%;
  color: rgb(52, 35, 35);
  text-align: center;
}

.s6-p {
  margin: 0;
  font-family: 'Assistant', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
  color: rgb(52, 35, 35);
  text-align: center;
}

/* Sous-titre « TISSU ÉBÈNE, ARTISAN DEPUIS 1972 » : span en Bitter, graisse 400 */
.s6-kicker {
  font-family: 'Bitter', serif;
  font-weight: 400;
}

/* Paragraphe descriptif : Assistant graisse 300 (madefor remplacé par Assistant) */
.s6-body {
  font-weight: 300;
}

/* ============================================================
   Responsive : empilement propre sous 860 px
   ============================================================ */
@media (max-width: 860px) {
  .s6 {
    height: auto;
    padding: 48px 0 56px;
  }

  .s6-title {
    width: 90%;
    margin: 0 auto;
  }

  .s6-text {
    width: 90%;
    margin: 22px auto 0;
  }
}


/* ============ SECTION 7 ============ */
/* ============================================================
   SECTION 7 — Bandeau « Restauration de meubles à Paris »
   Réplique pixel-perfect du comp Wix #comp-mizmk8xo
   Référence desktop : 1440 x 282 px (rect y 4843.77 → 5125.81)
   Empilement d'origine :
     1. fond noir (colorUnderlay rgb(0,0,0))
     2. image de fond restauration-de-meuble.jpg (cover, 50% 50%)
     3. voile rouge rgba(137, 14, 14, 0.4) (inner-box du wixui-box)
     4. photo atelier IMG_4480 (1440 x 250.72, cover, 50% 74%)
     5. textes blancs (p font_7 + h6 font_6)
   Aucun effet parallaxe sur l'original (data-bg-effect-name vide).
   ============================================================ */

.s7 {
  position: relative;
  width: 100%;
  height: 282px;
  overflow: hidden;
  color: rgb(0, 0, 0);
}

/* --- Couche de fond (bgLayers_comp-mizmk8xo) --- */
.s7-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.s7-bg-underlay {
  position: absolute;
  inset: 0;
  background-color: rgb(0, 0, 0);
}

.s7-bg-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* --- Voile rouge (inner-box de comp-mizmk8yc) --- */
.s7-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(137, 14, 14, 0.4);
}

/* --- Contenu (comp-mizmk8yc-container, grid plein cadre) --- */
.s7-content {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Photo atelier (comp-mj2irgkj) : 0 / 0, 1440 x 250.72 */
.s7-photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 250.72px;
  overflow: hidden;
}

.s7-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 74%;
}

/* Paragraphe (comp-mj2itb6b, p.font_7) :
   x 369.52 → 25.661 %, y 111.55, w 700.97 → 48.678 %, h 76 (4 x 19) */
.s7-text {
  position: absolute;
  top: 111.55px;
  left: 25.661%;
  width: 48.678%;
  margin: 0;
  font-family: 'Assistant', sans-serif;
  font-size: 15px;
  line-height: 19px;
  font-weight: 400;
  letter-spacing: normal;
  text-align: center;
  color: rgb(255, 255, 255);
}

/* Titre (comp-mj2iumj6, h6.font_6) :
   x 419.27 → 29.116 %, y 55.5, w 619.97 → 43.053 %, h 31.5 (lh 1.4) */
.s7-title {
  position: absolute;
  top: 55.5px;
  left: 29.116%;
  width: 43.053%;
  margin: 0;
  font-family: 'Bitter', serif;
  font-size: 22.5px;
  line-height: 31.5px;
  font-weight: 400;
  letter-spacing: normal;
  text-align: left;
  color: rgb(255, 255, 255);
}

.s7-hidden {
  display: none;
}

/* ============================================================
   Responsive < 860 px : empilement vertical propre
   ============================================================ */
@media (max-width: 860px) {
  .s7 {
    height: auto;
  }

  .s7-content {
    display: flex;
    flex-direction: column;
    height: auto;
  }

  .s7-photo {
    position: relative;
    top: auto;
    left: auto;
    order: 1;
    height: 180px;
  }

  .s7-title {
    position: relative;
    top: auto;
    left: auto;
    order: 2;
    width: auto;
    margin: 24px 20px 0;
    font-size: 20px;
    line-height: 28px;
    text-align: center;
  }

  .s7-text {
    position: relative;
    top: auto;
    left: auto;
    order: 3;
    width: auto;
    margin: 14px 20px 28px;
  }
}


/* ============ SECTION 8 ============ */
/* ============================================================
   SECTION 8 — EXPERTISE EN RESTAURATION DE MEUBLES
   Réplique pixel-perfect Wix #comp-mj2iq0w1 (réf. 1440 px, h 453 px)
   Fond image cover + voile rouge rgba(137,14,14,.4), texte blanc à
   gauche, photo 549×303 à droite.
   ============================================================ */

.s8 {
  position: relative;
  width: 100%;
  height: 453px;
  background-color: rgb(156, 104, 104); /* colorUnderlay Wix (visible avant chargement) */
  background-image: url("/assets/img/restauration-de-meuble.jpg");
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  overflow: hidden;
  color: rgb(255, 255, 255);
}

/* Voile coloré au-dessus de l'image de fond (inner-box Wix) */
.s8-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(137, 14, 14, 0.4);
  pointer-events: none;
}

.s8-content {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Photo de droite — 548.797×302.516 px @ x=761.687, y=+75 */
.s8-img-wrap {
  position: absolute;
  left: 52.8949%;   /* 761.687 / 1440 */
  top: 75px;
  width: 38.1109%;  /* 548.797 / 1440 */
  height: 302.5px;
}

.s8-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}

/* Titre — font_3 : Bitter 22.5px / 31.5px, blanc @ x=131.757, y=+94 */
.s8-title {
  position: absolute;
  left: 9.1498%;    /* 131.757 / 1440 */
  top: 94px;
  width: 33.3659%;  /* 480.469 / 1440 */
  margin: 0;
  font-family: 'Bitter', serif;
  font-size: 22.5px;
  font-weight: 400;
  font-style: normal;
  line-height: 31.5px; /* 1.4em */
  color: rgb(255, 255, 255);
  text-align: left;
}

/* Paragraphe — font_7 : Assistant 15px, justifié, blanc @ x=131.757, y=+150.5 */
.s8-text {
  position: absolute;
  left: 9.1498%;    /* 131.757 / 1440 */
  top: 150.5px;
  width: 30.4753%;  /* 438.844 / 1440 */
  margin: 0;
  font-family: 'Assistant', sans-serif;
  font-size: 15px;
  font-weight: 400;
  font-style: normal;
  line-height: normal; /* hauteur calculée Wix : 114px sur 5 lignes */
  color: rgb(255, 255, 255);
  text-align: justify;
}

/* ---------- Responsive : empilement sous 860 px ---------- */
@media (max-width: 860px) {
  .s8 {
    height: auto;
  }

  .s8-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 48px 24px;
  }

  .s8-title,
  .s8-text,
  .s8-img-wrap {
    position: static;
    width: 100%;
    left: auto;
    top: auto;
  }

  .s8-img-wrap {
    height: auto;
    aspect-ratio: 549 / 303;
  }
}


/* ============ SECTION 9 ============ */
/* ==========================================================================
   SECTION 9 — « SERVICES DE TISSU ÉBÈNE » (Wix comp-mizn0in3)
   Référence desktop : 1440 × 453,047 px (rect Playwright y=5578.86 → 6031.91)
   Conversion x → % de 1440 ; hauteurs conservées en px.
   ========================================================================== */

.s9 {
  position: relative;
  width: 100%;
  height: 453.047px;                 /* rect exact de la section */
  background-color: rgba(255, 255, 255, 0);
  color: rgb(0, 0, 0);
  overflow: visible;
}

/* ---- Fond (bgLayers Wix) : sous-couche couleur + photo opacité 0.5 ------ */
.s9-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-color: rgb(108, 66, 66); /* colorUnderlay calculé #6C4242 */
}

.s9-bg-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;           /* alignType center, displayMode fill */
  opacity: 0.5;                       /* opacité calculée du wow-image de fond */
}

/* ---- Conteneur de contenu : grille 1×1, enfants superposés (Wix) -------- */
.s9-content {
  position: relative;
  display: grid;
  grid-template-columns: 100%;        /* 1440px à la référence */
  grid-template-rows: 453.047px;
  width: 100%;
  height: 100%;
}

.s9-band,
.s9-card,
.s9-text,
.s9-title {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

/* ---- Bande photo pleine largeur : 1440 × 402,719, collée en haut -------- */
.s9-band {
  align-self: start;
  justify-self: start;
  width: 100%;
  height: 402.719px;
  overflow: hidden;
}

.s9-band img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* ---- Carte photo gauche : x=100,17 → 6,9562 % ; 548,8 × 302,5 ; centrée v. */
.s9-card {
  align-self: center;                 /* y = 75,27px ⇒ centrage vertical exact */
  justify-self: start;
  margin-left: 6.9562%;               /* 100,169px / 1440 */
  width: 38.1109%;                    /* 548,797px / 1440 */
  height: 302.516px;
  overflow: hidden;
}

.s9-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* ---- Bloc texte (p.font_8) : x=871,64, y=+171,097, 438,84 × 126 --------- */
.s9-text {
  align-self: start;
  justify-self: end;
  width: 30.4753%;                    /* 438,844px / 1440 */
  margin-top: 171.097px;
  margin-right: 8.9947%;              /* 129,524px / 1440 */
}

.s9-text p {
  margin: 0;
  font-family: 'Assistant', sans-serif; /* assistant-v2 d'origine */
  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: normal;
  color: rgb(255, 255, 255);
  text-align: justify;
}

/* ---- Titre (h2.font_2) : x=871,64, y=+112,043, 438,84 × 32,5 ------------ */
.s9-title {
  align-self: start;
  justify-self: end;
  width: 30.4753%;
  margin-top: 112.043px;
  margin-right: 8.9947%;
}

.s9-title h2 {
  margin: 0;
  font-family: 'Bitter', serif;       /* bitter-v2 d'origine (span interne) */
  font-size: 22.5px;
  font-style: normal;
  font-weight: 400;
  line-height: 31.5px;
  letter-spacing: normal;
  color: rgb(255, 255, 255);
  text-align: start;                  /* texte déjà en capitales dans la source */
}

/* ==========================================================================
   Responsive — empilement propre sous 860 px
   ========================================================================== */
@media (max-width: 860px) {
  .s9 {
    height: auto;
  }

  .s9-content {
    display: flex;
    flex-direction: column;
    grid-template-rows: none;
    height: auto;
    padding: 56px 24px 64px;
    box-sizing: border-box;
    gap: 24px;
  }

  /* La bande pleine largeur est un doublon décoratif de la carte : masquée */
  .s9-band {
    display: none;
  }

  .s9-card {
    order: 2;
    width: 100%;
    height: auto;
    aspect-ratio: 549 / 303;          /* même cadrage que la carte desktop */
    margin-left: 0;
  }

  /* Titre affiché au-dessus du paragraphe (comme à l'écran desktop) */
  .s9-title {
    order: 1;
    width: 100%;
    margin: 0;
  }

  .s9-text {
    order: 3;
    width: 100%;
    margin: 0;
  }
}


/* ============ SECTION 10 ============ */
/* ============================================================
   SECTION 10 — « ARTISANAT ET SUR-MESURE »
   Réplique Wix #comp-miznc93b — page conçue à 1440 px
   Fond : aplat rgb(108,66,66) + photo chaise-garniture.jpg
   en cover à 50 % d'opacité ; photo encart à droite ;
   bloc texte blanc à gauche.
   ============================================================ */

.s10 {
  position: relative;
  width: 100%;
  height: 453px;            /* 453.047px mesurés */
  overflow: hidden;
  background-color: rgb(108, 66, 66);  /* colorUnderlay exact */
  color: rgb(0, 0, 0);
}

/* ---- Couche de fond : image à 50 % sur l'aplat bordeaux ---- */
.s10-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.s10-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0.5;             /* opacité exacte du calque Wix */
}

/* ---- Conteneur de contenu ---- */
.s10-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ---- Photo encart, à droite ----
   rect original : x 761.69 → 52.8951 % de 1440 ;
   y 75 px ; 548.8 × 302.5 px (38.1109 % de large) */
.s10-media {
  position: absolute;
  left: 52.8951%;
  top: 75px;
  width: 38.1109%;
  height: 302.5px;
  margin: 0;
  overflow: hidden;
}

.s10-media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}

/* ---- Bloc texte, à gauche ----
   rect original : x 131.75 → 9.1493 % de 1440 ;
   y 121.9 px ; largeur 438.84 px → 30.4753 % */
.s10-text {
  position: absolute;
  left: 9.1493%;
  top: 121.9px;
  width: 30.4753%;
}

/* h2 — font_2 Wix : bitter-v2, 22.5px / 31.5px, graisse 400, blanc */
.s10-title {
  margin: 0 0 29.26px;      /* 29.2591px mesurés entre titre et paragraphe */
  font-family: 'Bitter', serif;
  font-style: normal;
  font-weight: 400;
  font-size: 22.5px;
  line-height: 31.5px;
  color: rgb(255, 255, 255);
  text-align: left;
}

/* p — font_8 Wix : madefor → Assistant, 15px / 21px, justifié, blanc */
.s10-p {
  margin: 0;
  font-family: 'Assistant', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 21px;
  color: rgb(255, 255, 255);
  text-align: justify;
}

/* ============================================================
   Responsive : empilement propre sous 860 px
   ============================================================ */
@media (max-width: 860px) {
  .s10 {
    height: auto;
  }

  .s10-inner {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 48px 24px;
  }

  .s10-media,
  .s10-text {
    position: static;
    width: 100%;
  }

  .s10-media {
    height: auto;
    aspect-ratio: 549 / 303;  /* même cadrage que l'encart desktop */
  }
}


/* ============ SECTION 11 ============ */
/* ============================================================
   SECTION 11 — « CONSERVATION ET PATRIMOINE »
   Réplique pixel-perfect du Wix #comp-miznqbc0 (1440 × 453 px)
   ============================================================ */

.s11 {
  position: relative;
  width: 100%;
  height: 453px;            /* 453.047px mesurés à 1440 px */
  color: rgb(0, 0, 0);
  overflow: hidden;
}

/* ---------- Fond : sous-couche brune + photo à 50 % ---------- */
.s11-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.s11-bg-underlay {
  position: absolute;
  inset: 0;
  background-color: rgb(108, 66, 66);
}

.s11-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0.5;             /* opacité exacte du wow-image Wix */
}

/* ---------- Calque de contenu ---------- */
.s11-content {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Image pleine largeur (bandeau étiré en haut de section) */
.s11-img-wide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 402.72px;         /* 402.719px mesurés */
  overflow: hidden;
}

.s11-img-wide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}

/* Image encart à gauche */
.s11-img-inset {
  position: absolute;
  top: 74.98px;             /* 6559.94 − 6484.95 */
  left: 6.9553%;            /* 100.156 / 1440 */
  width: 38.1109%;          /* 548.797 / 1440 */
  height: 302.52px;
  overflow: hidden;
}

.s11-img-inset img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}

/* Bloc texte à droite */
.s11-text {
  position: absolute;
  top: 121.89px;            /* 6606.84 − 6484.95 */
  left: 60.0868%;           /* 865.25 / 1440 */
  width: 30.4753%;          /* 438.844 / 1440 */
  display: flex;
  flex-direction: column;
}

.s11-title {
  margin: 0 0 29.25px 0.5px;
  font-family: 'Bitter', serif;
  font-style: normal;
  font-weight: 400;
  font-size: 22.5px;
  line-height: 31.5px;
  letter-spacing: normal;
  color: rgb(255, 255, 255);
  text-align: left;
}

.s11-para {
  margin: 0;
  font-family: 'Assistant', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 21px;
  color: rgb(255, 255, 255);
  text-align: justify;
}

/* ---------- Responsive : empilement sous 860 px ---------- */
@media (max-width: 860px) {
  .s11 {
    height: auto;
  }

  .s11-content {
    display: flex;
    flex-direction: column;
    padding-bottom: 50px;   /* bande de fond visible comme en bas du desktop */
  }

  .s11-img-wide {
    position: relative;
    top: auto;
    left: auto;
    height: 200px;
  }

  .s11-img-inset {
    position: relative;
    top: auto;
    left: auto;
    width: calc(100% - 48px);
    height: auto;
    aspect-ratio: 548.8 / 302.5;
    margin: 24px auto 0;
  }

  .s11-text {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    margin: 32px 24px 0;
  }

  .s11-title {
    margin-left: 0;
  }
}


/* ============ SECTION 12 ============ */
/* ============================================================
   SECTION 12 — Bandeau « Nos réalisations »
   Réplique pixel-perfect du comp Wix #comp-miznw1j5
   Référence desktop : 1440 px de large, section 453 px de haut
   ============================================================ */

.s12 {
  position: relative;
  width: 100%;
  height: 453px;
  overflow: hidden;
  color: rgb(0, 0, 0);
}

/* --- Fond de section : aplat bordeaux + photo opacité 0,5 --- */
.s12-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.s12-bg-underlay {
  position: absolute;
  inset: 0;
  background-color: rgb(108, 66, 66); /* colorUnderlay Wix exact */
}

.s12-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0.5; /* opacité exacte du wow-image de fond */
  display: block;
}

/* --- Photo bandeau pleine largeur (rect : x 0, y 0, 1440 x 402,72) --- */
.s12-banner {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 402.72px;
  background-color: rgb(137, 74, 23); /* fond de repli Wix derrière l'image */
  overflow: hidden;
}

.s12-banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 76%; /* focal point Wix fp_0.50_0.76 */
}

/* --- Bloc texte gauche (rect : x 137,56 -> 9,553 %, y 132,35, larg. 438,84 -> 30,475 %) --- */
.s12-text {
  position: absolute;
  left: 9.553%;
  top: 132.35px;
  width: 30.475%;
  z-index: 1;
}

.s12-title {
  margin: 0 0 29.25px;
  font-family: 'Bitter', serif;
  font-style: normal;
  font-weight: 400;
  font-size: 22.5px;
  line-height: 31.5px;
  letter-spacing: 0em;
  color: rgb(255, 255, 255);
}

.s12-desc {
  margin: 0;
  font-family: 'Assistant', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 21px;
  letter-spacing: 0em;
  color: rgb(255, 255, 255);
  text-align: justify;
}

/* --- Photo encadrée droite (rect : x 761,7 -> 52,896 %, y 75, 548,8 x 302,52) --- */
.s12-inset {
  position: absolute;
  left: 52.896%;
  top: 75px;
  width: 38.111%;
  height: 302.52px;
  overflow: hidden;
  z-index: 1;
}

.s12-inset img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* émule le crop Wix x_0,y_177,w_1536,h_847 (bande basse de l'image) */
  object-position: 50% 100%;
}

/* ============================================================
   RESPONSIVE — empilement sous 860 px
   ============================================================ */
@media (max-width: 860px) {
  .s12 {
    height: auto;
  }

  .s12-banner {
    position: relative;
    height: auto;
    aspect-ratio: 1440 / 403;
  }

  .s12-text {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    padding: 32px 24px 0;
  }

  .s12-inset {
    position: relative;
    left: auto;
    top: auto;
    width: calc(100% - 48px);
    height: auto;
    aspect-ratio: 549 / 303;
    margin: 28px auto 40px;
  }
}


/* ============ SECTION 13 ============ */
/* ============================================================
   SECTION 13 — Footer (contact + pied de page)
   Réplique Wix — rect : x 0, y 7391.05, 1440 × 793.67 px
   Fond : rgb(255, 250, 244)
   ============================================================ */

.s13 {
  position: relative;
  display: flow-root; /* empêche la fusion des marges, laisse déborder le bloc contact */
  box-sizing: border-box;
  width: 100%;
  height: 793.67px;
  background-color: rgb(255, 250, 244);
  color: rgb(0, 0, 0);
  font-family: 'Assistant', sans-serif;
}

.s13 *,
.s13 *::before,
.s13 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

/* Spans utilitaires (graisses / soulignés Wix) */
.s13 .s13-w300 { font-weight: 300; }
.s13 .s13-w400 { font-weight: 400; }
.s13 .s13-w600 { font-weight: 600; }
.s13 .s13-b    { font-weight: bold; }
.s13 .s13-u    { text-decoration: underline; }

/* ------------------------------------------------------------
   Bloc CONTACTEZ NOUS
   Wix : x 175.19 (12.166 %), w 1089.11 (75.633 %), top −28.84 px
   ------------------------------------------------------------ */
.s13-contact {
  position: relative;
  width: 75.633%;
  margin: -28.84px 0 0 12.166%;
}

.s13-contact-title {
  font-family: 'Assistant', sans-serif;
  font-size: 40.5px;
  font-weight: 400;
  line-height: 1.3em; /* 53 px mesurés */
  text-align: center;
  color: rgb(52, 35, 35);
}

.s13-contact-title-serif {
  font-family: 'Bitter', serif;
}

.s13-contact-text {
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
  text-align: center;
  color: rgb(52, 35, 35);
}

/* ------------------------------------------------------------
   Grand titre « Tissu Ébène »
   Wix : x 54.09 (3.756 %), w 1266.22 (87.932 %), top 248.39 px
   157.5px / 157.5px, Bitter 300, rgb(52,35,35)
   ------------------------------------------------------------ */
.s13-title {
  width: 87.932%;
  margin: 66.23px 0 0 3.756%;
  font-family: 'Bitter', serif;
  font-size: 157.5px;
  font-weight: 300;
  line-height: 157.5px;
  text-align: center;
  color: rgb(52, 35, 35);
}

/* ------------------------------------------------------------
   Rangée de colonnes — top 397 px, h 262.27 px
   Positions exactes du rect (réf. 1440 px)
   ------------------------------------------------------------ */
.s13-cols {
  position: relative;
  height: 262.27px;
  margin-top: -8.89px; /* le titre déborde sur la rangée (marge Wix −38.89) */
}

/* Colonne 1 — texte « maison fondée en 1972 »
   x 39.19 (2.721 %), w 511.19 (35.499 %), top 60.81 px */
.s13-about {
  position: absolute;
  left: 2.721%;
  width: 35.499%;
  top: 60.81px;
}

.s13-about p {
  font-size: 17px;
  font-weight: 300;
  line-height: 27.2px;
  text-align: center;
  color: rgb(52, 35, 35);
}

/* Titres de colonnes — Bitter 22.5px / 33.75px, centré */
.s13-col-heading {
  margin-bottom: 20px;
  font-family: 'Bitter', serif;
  font-size: 22.5px;
  font-weight: 400;
  line-height: 33.75px;
  text-align: center;
  color: rgb(52, 35, 35);
}

.s13-col-heading--black {
  color: rgb(0, 0, 0);
}

/* Colonne 2 — Adresses
   x 757.70 (52.618 %), w 141.72 (9.841 %), top 19.92 px */
.s13-addr {
  position: absolute;
  left: 52.618%;
  width: 9.841%;
  top: 19.92px;
  display: flex;
  flex-direction: column;
}

.s13-addr-body p {
  font-size: 16px;
  font-weight: 300;
  line-height: 25.6px;
  text-align: center;
  color: rgb(52, 35, 35);
}

/* Colonne 3 — Contacts
   x 938.92 (65.203 %), w 207.17 (14.386 %), top 29.36 px */
.s13-contacts {
  position: absolute;
  left: 65.203%;
  width: 14.386%;
  top: 29.36px;
  display: flex;
  flex-direction: column;
}

.s13-contacts-body p {
  font-size: 16px;
  font-weight: 500;
  line-height: 25.6px;
  text-align: center;
  color: rgb(0, 0, 0);
}

/* Colonne 4 — Suivez-nous
   x 1198.08 (83.2 %), w 155.53 (10.801 %), top 22.25 px */
.s13-social {
  position: absolute;
  left: 83.2%;
  width: 10.801%;
  top: 22.25px;
  display: flex;
  flex-direction: column;
}

.s13-social .s13-col-heading {
  min-height: 67.5px; /* rendu Wix sur 2 lignes */
}

.s13-social-list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  list-style: none;
}

.s13-social-list li {
  width: 24px;
  height: 24px;
}

.s13-social-list li:not(:last-child) {
  margin-right: 10px;
}

.s13-social-list a {
  display: block;
  width: 24px;
  height: 24px;
}

.s13-social-list img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  object-position: center center;
}

/* ------------------------------------------------------------
   Copyright — x 86.39 (6 %), top 689.28 px, 14px / 18px, à gauche
   ------------------------------------------------------------ */
.s13-copyright {
  margin: 30.01px 5.999% 0;
}

.s13-copyright p {
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  text-align: left;
  color: rgb(0, 0, 0);
}

/* ============================================================
   Responsive — empilement sous 860 px
   ============================================================ */
@media (max-width: 860px) {
  .s13 {
    height: auto;
    padding: 48px 24px 40px;
  }

  .s13-contact {
    width: 100%;
    margin: 0;
  }

  .s13-contact-title {
    font-size: clamp(26px, 5vw, 40.5px);
  }

  .s13-title {
    width: 100%;
    margin: 32px 0 0;
    font-size: clamp(56px, 12vw, 110px);
    line-height: 1.05;
  }

  .s13-cols {
    height: auto;
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 36px;
    align-items: center;
  }

  .s13-about,
  .s13-addr,
  .s13-contacts,
  .s13-social {
    position: static;
    width: 100%;
    max-width: 511px;
  }

  .s13-social .s13-col-heading {
    min-height: 0;
  }

  .s13-copyright {
    margin: 40px 0 0;
  }
}


/* Correction finale : fond de page Wix derrière la section 6 transparente */
.s6 { background: rgb(247, 240, 230) !important; }

/* ============ Effets d'entrée des textes (s2-s5), façon float-in Wix ============ */
.anim-entree {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--retard, 0s);
  will-change: opacity, transform;
}
.anim-entree.est-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .anim-entree { opacity: 1; transform: none; transition: none; }
}


/* ============ Réduction de 20 % des sections s2-s5 (demande Owens 12/06) ============ */
@media (min-width: 861px) {
  .s2 { height: 720px; }
  .s2-textbox { top: 241.18px; }
  .s2-photo-1 { top: 273.14px; }
  .s2-photo-2 { top: 187.65px; }

  .s3 { height: 720px; }

  .s4 { height: 720px; }
  .s4-text { top: 219.04px; }
  .s4-img--restauration { top: 273.15px; }
  .s4-img--nettoyage { top: 187.65px; }

  .s5 { height: 696.74px; }
}

/* Titres en capitales comme sur l'original (s2 et s4) */
.s2-title, .s4-title { text-transform: uppercase; }