:root {
  --marron: #4C3F3B;
  --marron-dark: #2b2320;
  --marron-darker: #1c1613;
  --beige: #E0D4C7;
  --beige-light: #F3EDE5;
  --orange: #FF7D45;
  --orange-light: #FFA36B;
  --orange-dark: #e5622c;
  --green-kaki: #565D41;
  --green-kaki-light: #7c8563;
  --white: #ffffff;
  --font: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  --radius: 10px;
  --shadow: 0 10px 30px rgba(0,0,0,0.25);
  --gradient-dark: linear-gradient(160deg, #2b2320 0%, #4C3F3B 55%, #3a2f2a 100%);
  --gradient-orange: linear-gradient(120deg, #FF7D45 0%, #ff9a6e 100%);
  --gradient-text: linear-gradient(120deg, #FF7D45 0%, #FFB088 100%);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--marron);
  background: var(--marron-darker);
  line-height: 1.6;
  overflow-x: hidden;
}
.section, .section-tight { background: var(--white); }

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

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

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 100px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.25s ease;
  cursor: pointer;
  border: none;
}
.btn-primary {
  background: var(--gradient-orange);
  color: var(--white);
  box-shadow: 0 4px 18px rgba(255,125,69,0.28);
}
.btn-primary:hover {
  background: var(--orange-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(255,125,69,0.45);
}
.btn-outline {
  background: transparent;
  border: 2px solid var(--beige);
  color: var(--marron);
}
.btn-outline:hover {
  border-color: var(--orange);
  color: var(--orange);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(28,22,19,0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(224,212,199,0.08);
  transition: box-shadow 0.3s ease;
}
.site-header.scrolled {
  box-shadow: 0 4px 30px rgba(0,0,0,0.35);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  max-width: 1180px;
  margin: 0 auto;
}
.logo {
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.5px;
  color: var(--beige-light);
  display: flex;
  align-items: center;
}
.logo-img {
  height: 38px;
  width: auto;
  display: block;
}
.logo span {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}
.main-nav > ul {
  display: flex;
  gap: 32px;
  align-items: center;
}
.main-nav a.nav-link {
  font-weight: 500;
  font-size: 0.92rem;
  white-space: nowrap;
  color: var(--beige-light);
  position: relative;
  padding: 6px 0;
}
.main-nav a.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--gradient-orange);
  transition: width 0.25s ease;
}
.main-nav a.nav-link:hover::after,
.main-nav a.nav-link.active::after { width: 100%; }
.main-nav a.nav-link:hover { color: var(--orange-light); }

/* dropdown */
.has-dropdown { position: relative; }
.dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: var(--marron-darker);
  border: 1px solid rgba(224,212,199,0.12);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width: 220px;
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.22s ease;
}
.has-dropdown:hover .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.dropdown a {
  display: block;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--beige-light);
}
.dropdown a:hover {
  background: rgba(255,125,69,0.12);
  color: var(--orange-light);
}

.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
}
.burger span {
  width: 26px; height: 2px;
  background: var(--beige-light);
  border-radius: 2px;
}

/* ---------- Hero ---------- */
.hero {
  /* hauteur calee entre les deux extremes essayes : assez d'air autour des
     boutons et du X, tout en laissant deviner le bloc suivant en bas d'ecran.
     +70px en bas pour compenser la vague, qui remonte de 69px. */
  padding: 84px 0 170px;
  background: var(--gradient-dark);
  color: var(--beige-light);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -20%; right: -10%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(255,125,69,0.18) 0%, transparent 70%);
  border-radius: 50%;
  animation: floatBlob 12s ease-in-out infinite;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -25%; left: -8%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(224,212,199,0.08) 0%, transparent 70%);
  border-radius: 50%;
  animation: floatBlob 15s ease-in-out infinite reverse;
}
@keyframes floatBlob {
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(-30px, 30px) scale(1.08); }
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.eyebrow {
  color: var(--orange-light);
  font-weight: 700;
  letter-spacing: 1.5px;
  font-size: 0.85rem;
  text-transform: uppercase;
  margin-bottom: 18px;
  opacity: 0;
  animation: fadeUp 0.7s ease forwards;
}
.hero h1 {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 22px;
  color: var(--beige-light);
  opacity: 0;
  animation: fadeUp 0.7s ease 0.15s forwards;
}
.hero h1 .accent {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p.lead {
  font-size: 1.1rem;
  color: rgba(224,212,199,0.85);
  margin-bottom: 30px;
  max-width: 480px;
  opacity: 0;
  animation: fadeUp 0.7s ease 0.3s forwards;
}
.hero-cta {
  opacity: 0;
  animation: fadeUp 0.7s ease 0.45s forwards;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* ---------- Hero product marquee (replaces static image) ---------- */
.hero-visual {
  position: relative;
  height: 560px;
  opacity: 0;
  animation: fadeIn 1s ease 0.2s forwards;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, black 8%, black 92%, transparent 100%);
}
.marquee-col {
  position: absolute;
  top: 0;
  width: 31%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.marquee-col.col-1 { left: 0; animation: marqueeUp 34s linear infinite; }
.marquee-col.col-2 { left: 34.5%; animation: marqueeDown 40s linear infinite; }
.marquee-col.col-3 { left: 69%; animation: marqueeUp 28s linear infinite; }
.marquee-col img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 16px;
  background: rgba(224,212,199,0.06);
  padding: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  box-sizing: border-box;
}
@keyframes marqueeUp {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}
@keyframes marqueeDown {
  from { transform: translateY(-50%); }
  to { transform: translateY(0); }
}

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

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* ---------- Section headers ---------- */
.section { padding: 90px 0; }
.section-tight { padding: 60px 0; }
.section-header { text-align: center; max-width: 640px; margin: 0 auto 50px; }
/* certains titres ont besoin de plus que 640px pour tenir sur une ligne */
.section-header:has(h2.nowrap-desktop) { max-width: 900px; }
.section-header .eyebrow { display: block; color: var(--orange-dark); }
.section-header h2 {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 14px;
}
@media (min-width: 641px) {
  .section-header h2.nowrap-desktop { white-space: nowrap; }
}
.section-header p { color: #6b5d57; font-size: 1.05rem; }
.section-header.left { text-align: left; margin: 0 0 40px; }

/* scroll-highlight text: gradient sweep reveal */
.highlight-sweep {
  background-image: linear-gradient(90deg, var(--marron) 0%, var(--marron) 50%, #cbb9ab 50%, #cbb9ab 100%);
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: background-position 1.2s ease;
}
.highlight-sweep.is-visible { background-position: 0% 0; }

/* ---------- Feature cards ---------- */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
/* Quatre cartes identiques : picto au-dessus, texte en dessous, meme format.
   La 4e etait auparavant en pleine largeur avec le picto a gauche, ce qui
   comprimait son titre sur quatre lignes. */
.features-grid.cols-4 {
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
}
.features-grid.cols-4 .feature-card h3 { min-height: 2.6em; }
@media (max-width: 1100px) {
  .features-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .features-grid.cols-4 { grid-template-columns: 1fr; }
  .features-grid.cols-4 .feature-card h3 { min-height: 0; }
}
.feature-card {
  background: linear-gradient(160deg, var(--beige-light) 0%, #ece1d5 100%);
  border-radius: 18px;
  padding: 36px 30px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}
.feature-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gradient-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.feature-card:hover::before { transform: scaleX(1); }
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}
.feature-icon {
  width: 54px; height: 54px;
  border-radius: 14px;
  background: var(--gradient-orange);
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 1.4rem; font-weight: 700;
  margin-bottom: 20px;
  box-shadow: 0 6px 16px rgba(255,125,69,0.3);
}
.feature-card h3 { font-size: 1.15rem; margin-bottom: 10px; font-weight: 600; }
.feature-card p { color: #6b5d57; font-size: 0.95rem; }

/* ---------- Stats ---------- */
.stats-section {
  background: var(--gradient-dark);
  color: var(--beige-light);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.stats-section::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(255,125,69,0.1) 0%, transparent 65%);
  transform: translate(-50%,-50%);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
  position: relative;
  z-index: 1;
}
.stat-item {
  padding: 0 20px;
  border-right: 1px solid rgba(224,212,199,0.15);
}
.stat-item:last-child { border-right: none; }
.stat-number {
  font-size: 3.2rem;
  font-weight: 700;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  margin-bottom: 10px;
}
.stat-label {
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 1.2px;
  font-weight: 600;
  color: rgba(224,212,199,0.85);
}

/* ---------- Catalog teaser (home) ---------- */
.catalog-teaser-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}
.catalog-teaser-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 16/11;
  background: var(--beige);
}
.catalog-teaser-card img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s ease;
}
.catalog-teaser-card:hover img { transform: scale(1.08); }
.catalog-teaser-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(76,63,59,0) 40%, rgba(76,63,59,0.85) 100%);
  display: flex; align-items: flex-end;
  padding: 30px;
}
.catalog-teaser-overlay h3 {
  color: white; font-size: 1.5rem; font-weight: 700;
}
.catalog-teaser-overlay span {
  color: var(--beige-light); font-size: 0.9rem;
}

/* ---------- Process steps ---------- */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  position: relative;
}
.process-line {
  position: absolute;
  top: 26px; left: 12.5%; right: 12.5%;
  height: 2px;
  background: var(--beige);
  z-index: 0;
}
.process-line-fill {
  height: 100%; width: 0%;
  background: var(--orange);
  transition: width 2.2s cubic-bezier(.4,0,.2,1);
}
.process-x-mark { display: none; }
.process-grid.in-view .process-line-fill { width: 100%; }
.process-step { position: relative; z-index: 1; text-align: center; }
.process-num {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--orange);
  color: var(--orange);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.1rem;
  margin: 0 auto 18px;
  position: relative;
  z-index: 1;
  transition: background 0.4s ease, color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
}
.process-num.is-active {
  background: var(--gradient-orange);
  color: white;
  transform: scale(1.12);
  box-shadow: 0 8px 20px rgba(255,125,69,0.4);
}
.process-step h3 { font-size: 1.05rem; margin-bottom: 8px; font-weight: 600; }
.process-step p { color: #6b5d57; font-size: 0.9rem; }

/* ---------- Testimonial ---------- */
.testimonial {
  background: var(--beige-light);
  border-radius: 24px;
  padding: 50px;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 40px;
  align-items: center;
}
.testimonial img { border-radius: 16px; aspect-ratio: 1; object-fit: cover; }
.testimonial blockquote {
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 16px;
}
.testimonial cite { color: var(--orange); font-weight: 600; font-style: normal; }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--gradient-dark);
  border-radius: 28px;
  padding: 70px 50px;
  text-align: center;
  color: white;
  margin: 0 24px;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute;
  top: -40%; right: -10%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(255,125,69,0.25) 0%, transparent 70%);
  border-radius: 50%;
}
.cta-band::after {
  content: '';
  position: absolute;
  bottom: -35%; left: -12%;
  width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(255,125,69,0.35) 0%, rgba(255,163,107,0.12) 55%, transparent 75%);
  border-radius: 50%;
}
.cta-band h2 { font-size: 2.1rem; margin-bottom: 26px; font-weight: 700; position: relative; z-index: 1; }
.cta-band .btn { position: relative; z-index: 1; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--marron-dark);
  color: var(--beige-light);
  padding: 60px 0 30px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer-col h4 {
  color: white; font-size: 0.95rem; margin-bottom: 16px; font-weight: 600;
}
.footer-col ul li { margin-bottom: 10px; }
.footer-col a { color: var(--beige); font-size: 0.9rem; }
.footer-col a:hover { color: var(--orange); }
.footer-link-btn {
  background: none; border: none; padding: 0;
  color: var(--beige); font-size: 0.9rem; font-family: var(--font);
  cursor: pointer; text-align: left;
}
.footer-link-btn:hover { color: var(--orange); }
.footer-bottom {
  border-top: 1px solid rgba(224,212,199,0.15);
  padding-top: 24px;
  text-align: center;
  font-size: 0.82rem;
  color: rgba(224,212,199,0.6);
}

/* ---------- Quote modal (replaces contact page) ---------- */
.quote-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(28,22,19,0.75);
  backdrop-filter: blur(6px);
  z-index: 500;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; visibility: hidden;
  transition: all 0.3s ease;
}
.quote-modal-overlay.open { opacity: 1; visibility: visible; }
.quote-modal {
  background: var(--white);
  border-radius: 20px;
  max-width: 640px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 40px;
  position: relative;
  transform: translateY(20px) scale(0.97);
  transition: transform 0.3s ease;
}
.quote-modal-overlay.open .quote-modal { transform: translateY(0) scale(1); }
.quote-modal-close {
  position: absolute; top: 20px; right: 20px;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--beige-light); border: none;
  font-size: 1.1rem; cursor: pointer; color: var(--marron);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease;
}
.quote-modal-close:hover { background: var(--beige); }
.quote-modal h2 { font-size: 1.5rem; margin-bottom: 8px; }
.quote-modal .modal-sub { color: #6b5d57; font-size: 0.92rem; margin-bottom: 24px; }
body.modal-open { overflow: hidden; }

/* ---------- Dark page hero (matches home hero DA) ---------- */
.page-hero {
  padding: 70px 0 150px;
  background: var(--gradient-dark);
  color: var(--beige-light);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  top: -30%; right: -10%;
  width: 450px; height: 450px;
  background: radial-gradient(circle, rgba(255,125,69,0.16) 0%, transparent 70%);
  border-radius: 50%;
}
.page-hero h1 { font-size: 2.4rem; font-weight: 700; margin-bottom: 14px; color: var(--beige-light); position: relative; z-index: 1; }
.page-hero p { color: rgba(224,212,199,0.85); max-width: 720px; margin: 0 auto; position: relative; z-index: 1; }

/* ---------- Process step carousel (focus + blur) ---------- */
.process-carousel {
  position: relative;
  padding: 40px 0;
}
.process-track {
  display: flex;
  gap: 40px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 20px 40vw;
  scrollbar-width: none;
}
.process-track::-webkit-scrollbar { display: none; }
.process-slide {
  flex: 0 0 auto;
  width: min(380px, 74vw);
  scroll-snap-align: center;
  background: var(--beige-light);
  border-radius: 20px;
  padding: 40px 34px;
  text-align: center;
  filter: blur(3px) opacity(0.45);
  transform: scale(0.9);
  transition: filter 0.4s ease, transform 0.4s ease, background 0.5s ease;
}
.process-slide.is-focus {
  filter: blur(0) opacity(1);
  transform: scale(1);
  box-shadow: var(--shadow);
}
.process-slide[data-color="1"].is-focus { background: linear-gradient(160deg, #FFE4D6 0%, #FFF3EC 100%); }
.process-slide[data-color="2"].is-focus { background: linear-gradient(160deg, #E0D4C7 0%, #F3EDE5 100%); }
.process-slide[data-color="3"].is-focus { background: linear-gradient(160deg, #FFD9BE 0%, #FFEEE1 100%); }
.process-slide[data-color="4"].is-focus { background: linear-gradient(160deg, #E8C9AE 0%, #F6E7D9 100%); }
.process-slide .process-num {
  margin: 0 auto 20px;
  width: 60px; height: 60px;
  font-size: 1.4rem;
  background: var(--gradient-orange);
  color: white; border: none;
}
.process-slide h3 { font-size: 1.3rem; margin-bottom: 12px; }
.process-slide p { color: #6b5d57; }
.process-nav-dots {
  display: flex; justify-content: center; gap: 8px; margin-top: 20px;
}
.process-nav-dots button {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--beige); border: none; cursor: pointer;
  transition: all 0.25s ease;
}
.process-nav-dots button.active { background: var(--orange); width: 24px; border-radius: 6px; }
.process-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--white); border: 1px solid var(--beige);
  box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 5; font-size: 1.2rem; color: var(--marron);
  transition: all 0.2s ease;
}
.process-arrow:hover { background: var(--orange); color: white; border-color: var(--orange); }
.process-arrow.prev { left: 4%; }
.process-arrow.next { right: 4%; }
@media (max-width: 640px) {
  .process-arrow { width: 38px; height: 38px; font-size: 1rem; }
  .process-arrow.prev { left: 2%; }
  .process-arrow.next { right: 2%; }
}

/* ---------- Infographic placeholder cards (Nos réalisations) ---------- */
.infographic-card {
  background: var(--beige-light);
  border-radius: 18px;
  padding: 30px;
  border: 2px dashed var(--beige);
  text-align: center;
  transition: transform 0.3s ease;
}
.infographic-card:hover { transform: translateY(-4px); }
.infographic-card .infographic-icon {
  width: 64px; height: 64px;
  border-radius: 16px;
  background: var(--gradient-orange);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  margin: 0 auto 18px;
}
.infographic-card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.infographic-card p { color: #8a7b73; font-size: 0.85rem; }
.infographic-card .placeholder-tag {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--orange-dark);
  font-weight: 700;
  background: rgba(255,125,69,0.1);
  padding: 4px 10px;
  border-radius: 100px;
}

/* ---------- Catalog sub-nav ---------- */
.catalog-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 44px;
  align-items: start;
}
.subcat-nav {
  position: sticky;
  top: 100px;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  background: var(--beige-light);
  border-radius: 16px;
  padding: 22px;
}
.subcat-nav h4 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #6b5d57;
  margin-bottom: 14px;
}
.subcat-main-label {
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--marron);
  margin: 18px 0 6px;
  padding-top: 12px;
  border-top: 1px solid var(--beige);
  background: none;
  border-left: none; border-right: none; border-bottom: none;
  width: 100%;
  text-align: left;
  cursor: default;
  font-family: var(--font);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.subcat-group:first-child .subcat-main-label { margin-top: 0; padding-top: 0; border-top: none; }
.subcat-main-label .chevron { display: none; }
.catalog-group-title {
  font-size: 1.8rem;
  font-weight: 700;
  margin: 50px 0 24px;
  padding-bottom: 14px;
  border-bottom: 3px solid var(--orange);
  display: inline-block;
}
.catalog-group-title:not(:first-child) {
  margin-top: 100px;
  padding-top: 60px;
  border-top: 1px solid var(--beige);
  display: block;
}
.subcat-nav a {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.86rem;
  line-height: 1.25;
  font-weight: 500;
  margin-bottom: 2px;
  transition: all 0.2s ease;
}
.subcat-nav a:hover, .subcat-nav a.active {
  background: var(--orange);
  color: white;
}

.subcat-block { margin-bottom: 56px; scroll-margin-top: 100px; }
.subcat-block h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--beige);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.seasonal-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .seasonal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .seasonal-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
.product-card {
  background: var(--white);
  border: 1px solid var(--beige);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}
.product-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
  border-color: transparent;
}
.product-card .thumb {
  aspect-ratio: 1;
  background: var(--beige-light);
  overflow: hidden;
}
.product-card:hover .thumb img { transform: scale(1.06); }
.product-card .info { padding: 16px; }
.product-card .info h3 {
  font-size: 0.95rem; font-weight: 600; margin-bottom: 4px;
}
.product-card .info span {
  font-size: 0.78rem; color: #8a7b73;
}

/* ---------- Product detail ---------- */
.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: flex-start;
}
/* Le cadre de la fiche reproduit exactement celui de la vignette du catalogue :
   meme rapport, meme fond, meme positionnement de l'image. La photo s'affiche
   donc a l'identique, simplement en plus grand. */
.product-detail .thumb-large {
  background: var(--beige-light);
  border-radius: 20px;
  aspect-ratio: 1;
  overflow: hidden;
  position: sticky;
  top: 100px;
}
/* Photo de la fiche produit : elle occupe tout le cadre, sans etre bridee.
   Le cadrage precis est donne par la classe fit-* posee sur le conteneur. */
.product-detail .thumb-large img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 12px;              /* identique a la vignette */
  position: absolute;
  top: 0; left: 0;
  box-sizing: border-box;
}
.product-detail .cat-tag {
  display: inline-block;
  color: var(--orange);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 14px;
}
.product-detail h1 { font-size: 2rem; font-weight: 700; margin-bottom: 18px; }
.product-detail .ref { color: #8a7b73; font-size: 0.9rem; margin-bottom: 24px; }
.product-detail .desc { color: #5a4d47; line-height: 1.8; margin-bottom: 32px; }
.product-detail .personalization-note {
  background: var(--beige-light);
  border-left: 3px solid var(--orange);
  padding: 16px 20px;
  border-radius: 8px;
  font-size: 0.9rem;
  margin-bottom: 30px;
}

/* ---------- Contact form ---------- */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}
.form-group { margin-bottom: 22px; }
.form-group label {
  display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 8px;
}
.form-group input, .form-group select, .form-group textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--beige);
  border-radius: 10px;
  font-family: var(--font);
  font-size: 0.95rem;
  color: var(--marron);
  background: var(--white);
  transition: border-color 0.2s ease;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none;
  border-color: var(--orange);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.contact-info-card {
  background: var(--marron);
  color: var(--beige-light);
  border-radius: 20px;
  padding: 40px;
}
.contact-info-card h3 { color: white; margin-bottom: 20px; font-size: 1.3rem; }
.contact-info-card .info-line { margin-bottom: 16px; font-size: 0.95rem; }
.contact-info-card .info-line strong { color: var(--orange); display: block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }

/* ---------- Realisations grid ---------- */
.realisations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.realisation-card {
  border-radius: 18px;
  overflow: hidden;
  background: var(--beige-light);
}
.realisation-card .img { aspect-ratio: 4/3; background: var(--beige); overflow: hidden; }
.realisation-card .img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.realisation-card:hover .img img { transform: scale(1.06); }
.realisation-card .body { padding: 20px; }
.realisation-card h3 { font-size: 1.05rem; margin-bottom: 6px; font-weight: 600; }
.realisation-card p { font-size: 0.88rem; color: #6b5d57; }

/* ---------- Reassurance banner ---------- */
.reassurance-band {
  background: var(--marron-darker);
  padding: 26px 0;
  border-top: 1px solid rgba(224,212,199,0.12);
  position: relative;
}
.reassurance-band::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 120px; height: 2px;
  background: var(--gradient-orange);
  border-radius: 2px;
}
.reassurance-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: center;
}
.reassurance-item {
  color: var(--beige-light);
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.reassurance-item .ic {
  font-size: 1.3rem;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Back to top ---------- */
.back-to-top {
  position: fixed;
  bottom: 26px;
  right: 26px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--gradient-orange);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  border: none;
  box-shadow: 0 8px 20px rgba(255,125,69,0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
  z-index: 150;
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { transform: translateY(-4px); }

/* ---------- Product card hover-swap image ---------- */
.product-card .thumb {
  aspect-ratio: 1;
  background: var(--beige-light);
  overflow: hidden;
  position: relative;
}
/* Regle de base unique pour les vignettes du catalogue.
   Elle ne fixe volontairement PAS object-position : c'est la classe fit-* posee
   sur le conteneur qui decide du cadrage, plus bas dans ce fichier. */
.product-card .thumb img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 12px;
  position: absolute;
  top: 0; left: 0;
  box-sizing: border-box;
  opacity: 1;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.product-card:hover .thumb img { transform: scale(1.06); }

/* ---------- Product detail slideshow ---------- */
.product-slideshow { position: relative; }
.product-slideshow .slide-track {
  display: flex;
  transition: transform 0.45s cubic-bezier(.65,0,.35,1);
}
.product-slideshow .slide-track img {
  width: 100%; flex: 0 0 100%;
  max-height: 480px; object-fit: contain;
}
.slideshow-dots {
  display: flex; gap: 8px; justify-content: center; margin-top: 16px;
}
.slideshow-dots button {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--beige); border: none; cursor: pointer;
  transition: all 0.25s ease;
}
.slideshow-dots button.active { background: var(--orange); width: 24px; border-radius: 6px; }
.slideshow-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(76,63,59,0.85); color: white; border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 5; font-size: 1.1rem;
  transition: background 0.2s ease;
}
.slideshow-arrow:hover { background: var(--orange); }
.slideshow-arrow.prev { left: 12px; }
.slideshow-arrow.next { right: 12px; }

/* ---------- History timeline with rocket ---------- */
.history-timeline {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding-left: 50px;
}
.history-track {
  position: absolute;
  left: 14px; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--beige) 0%, var(--orange) 100%);
  border-radius: 3px;
}
.history-track-fill {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 0%;
  background: var(--gradient-orange);
  border-radius: 3px;
  transition: height 0.1s linear;
}
.history-rocket {
  position: absolute;
  left: -13px;
  top: 0;
  font-size: 1.8rem;
  transform: translateY(-50%) rotate(0deg);
  transition: top 0.1s linear;
  filter: drop-shadow(0 4px 8px rgba(255,125,69,0.5));
  z-index: 5;
}
.history-item {
  position: relative;
  padding: 0 0 70px 30px;
  opacity: 0.35;
  transition: opacity 0.4s ease;
}
.history-item.is-active { opacity: 1; }
.history-item:last-child { padding-bottom: 0; }
.history-dot {
  position: absolute;
  left: -50px; top: 4px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--beige-light);
  border: 3px solid var(--marron);
}
.history-item.is-active .history-dot {
  background: var(--orange);
  border-color: var(--orange);
}
.history-year {
  display: inline-block;
  font-weight: 700;
  color: var(--orange-dark);
  font-size: 1.1rem;
  margin-bottom: 8px;
}
.history-item h3 { font-size: 1.25rem; margin-bottom: 10px; font-weight: 700; }
.history-item p { color: #6b5d57; font-size: 0.95rem; line-height: 1.7; }

/* ---------- Story scroll: thick gradient arrow flowing between icons ---------- */
.story-scroll { position: relative; max-width: 900px; margin: 0 auto; }
.story-arrow-track {
  position: absolute;
  left: 55px; top: 60px; bottom: 60px;
  width: 14px;
  background: rgba(224,212,199,0.35);
  border-radius: 10px;
  z-index: 0;
}
.story-arrow-fill {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 0%;
  background: linear-gradient(180deg, var(--orange-dark) 0%, var(--orange) 60%, var(--orange-light) 100%);
  border-radius: 10px;
  transition: height 0.08s linear;
  box-shadow: 0 0 18px rgba(255,125,69,0.5);
}
.story-arrow-head {
  position: absolute;
  left: 50%;
  top: 0;
  width: 0; height: 0;
  transform: translateX(-50%);
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 20px solid var(--orange-light);
  filter: drop-shadow(0 3px 6px rgba(255,125,69,0.5));
  transition: top 0.08s linear;
  z-index: 1;
}
.story-chapter {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 36px;
  align-items: center;
  padding: 50px 0;
  opacity: 0.3;
  transition: opacity 0.5s ease;
  position: relative;
  z-index: 2;
}
.story-chapter.is-active { opacity: 1; }
.story-shape {
  width: 110px; height: 110px;
  border-radius: 30px;
  background: var(--beige-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.6rem;
  position: relative;
  transition: all 0.5s ease;
  transform: rotate(-6deg) scale(0.88);
  border: 4px solid var(--white);
  box-shadow: 0 6px 18px rgba(76,63,59,0.12);
}
.story-chapter.is-active .story-shape {
  background: var(--gradient-orange);
  transform: rotate(0deg) scale(1);
  box-shadow: 0 14px 30px rgba(255,125,69,0.35);
}
.story-year {
  display: inline-block;
  font-weight: 700;
  color: var(--orange-dark);
  font-size: 1.05rem;
  margin-bottom: 8px;
}
.story-chapter h3 { font-size: 1.35rem; margin-bottom: 10px; font-weight: 700; }
.story-chapter p { color: #6b5d57; font-size: 0.98rem; line-height: 1.75; }
@media (max-width: 640px) {
  .story-chapter { grid-template-columns: 70px 1fr; gap: 20px; padding: 34px 0; }
  .story-shape { width: 64px; height: 64px; font-size: 1.6rem; border-radius: 20px; }
  .story-arrow-track { left: 32px; width: 8px; }
  .story-arrow-head { border-left-width: 9px; border-right-width: 9px; border-top-width: 12px; }
}
.wave-divider {
  display: block;
  width: 100%;
  line-height: 0;
  background: transparent;
  position: relative;
  z-index: 2;
  margin-top: -69px;
  pointer-events: none;
}
.wave-divider svg { width: 100%; height: 70px; display: block; }
.wave-divider.flip { transform: rotate(180deg); }

/* ---------- Decorative blobs ---------- */
.decor-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  animation: floatBlob 14s ease-in-out infinite;
}

/* ---------- Technique animated "video" cards ---------- */
.technique-card {
  background: var(--white);
  border: 1px solid var(--beige);
  border-radius: 18px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.technique-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.technique-anim {
  aspect-ratio: 16/10;
  background: var(--marron-darker);
  position: relative;
  overflow: hidden;
}
.technique-anim svg { width: 100%; height: 100%; }
.technique-card .body { padding: 24px 26px; }
.technique-card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.technique-card p { color: #6b5d57; font-size: 0.9rem; }

.technique-dark-section {
  background: var(--gradient-dark);
  position: relative;
  overflow: hidden;
}
.technique-dark-section::before {
  content: '';
  position: absolute;
  top: -20%; left: -8%;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(255,125,69,0.14) 0%, transparent 70%);
  border-radius: 50%;
}
.technique-dark-section::after {
  content: '';
  position: absolute;
  bottom: -25%; right: -8%;
  width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(224,212,199,0.08) 0%, transparent 70%);
  border-radius: 50%;
}

/* ---------- Playful embroidery-themed feature icons ---------- */
.feature-icon-anim {
  width: 56px; height: 56px;
  margin-bottom: 20px;
}
.feature-icon-anim svg { width: 100%; height: 100%; }
.spool-spin { animation: spoolSpin 3s linear infinite; transform-origin: center; }
@keyframes spoolSpin { to { transform: rotate(360deg); } }
.tag-swing { animation: tagSwing 2.4s ease-in-out infinite; transform-origin: 30px 12px; }
@keyframes tagSwing {
  0%, 100% { transform: translate(-2px, 3px) rotate(-8deg); }
  50%      { transform: translate(-2px, 3px) rotate(8deg); }
}
.speed-line { animation: speedLine 1s ease-in-out infinite; }
@keyframes speedLine {
  0%, 100% { opacity: 0.2; transform: translateX(0); }
  50% { opacity: 1; transform: translateX(-6px); }
}
.check-stitch {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: checkStitchDraw 2.4s ease-in-out infinite;
}
@keyframes checkStitchDraw {
  0% { stroke-dashoffset: 40; }
  40% { stroke-dashoffset: 0; }
  85% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -40; }
}
.cross-stitch-x { animation: crossPop 2.4s ease-in-out infinite; transform-origin: center; }
@keyframes crossPop {
  0%, 100% { opacity: 0.25; transform: scale(0.7); }
  50% { opacity: 1; transform: scale(1); }
}
.badge-ring {
  stroke-dasharray: 8 6;
  animation: badgeRotate 6s linear infinite;
  transform-origin: center;
}
@keyframes badgeRotate { to { transform: rotate(360deg); } }
.thread-connect {
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: threadConnectDraw 4s ease-in-out infinite;
}
@keyframes threadConnectDraw {
  0%   { stroke-dashoffset: 48; }
  45%  { stroke-dashoffset: 0; }
  62%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -48; }
}

.tech-needle { animation: needleMove 1.6s ease-in-out infinite; transform-origin: center; }
@keyframes needleMove {
  0%, 100% { transform: translateY(-14px) rotate(0deg); }
  50% { transform: translateY(10px) rotate(6deg); }
}
.tech-thread-dot { animation: dotPulse 1.6s ease-in-out infinite; }
@keyframes dotPulse {
  0%, 100% { opacity: 0.3; } 50% { opacity: 1; }
}

.tech-squeegee { animation: squeegeeSlide 2.2s ease-in-out infinite; }
@keyframes squeegeeSlide {
  0% { transform: translateX(-60px); }
  50% { transform: translateX(60px); }
  100% { transform: translateX(-60px); }
}

.tech-press-top { animation: pressClose 2s ease-in-out infinite; transform-origin: left center; }
@keyframes pressClose {
  0%, 15% { transform: rotate(-18deg); }
  45%, 60% { transform: rotate(0deg); }
  85%, 100% { transform: rotate(-18deg); }
}

/* ---------- AKOMI pencil-drawn line animation ---------- */
.akomi-section { position: relative; overflow: hidden; }
.pencil-draw {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.12;
  z-index: 0;
}
.pencil-draw path {
  fill: none;
  stroke: var(--orange-light);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: drawLine 8s ease-in-out infinite;
}
.pencil-draw .pencil-tip {
  animation: movePencil 8s ease-in-out infinite;
  offset-path: path("M 40 260 C 200 60, 420 420, 620 140 S 980 320, 1150 90");
}
@keyframes drawLine {
  0% { stroke-dashoffset: 1400; }
  55% { stroke-dashoffset: 0; }
  90% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes movePencil {
  0% { offset-distance: 0%; opacity: 1; }
  55% { offset-distance: 100%; opacity: 1; }
  60% { opacity: 0; }
  100% { opacity: 0; offset-distance: 100%; }
}

/* ---------- About intro: modern split layout on dark bg ---------- */
.intro-split-wrap {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  background: var(--gradient-dark);
  padding: 64px 50px;
}
.intro-split-wrap .geo-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0.55;
}
.intro-split-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 50px;
  align-items: center;
}
.intro-glass-panel {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(224,212,199,0.18);
  border-radius: 20px;
  padding: 36px 38px;
  backdrop-filter: blur(10px);
  position: relative;
}
.intro-glass-panel::before {
  content: '';
  position: absolute;
  top: -1px; left: 24px; right: 24px; height: 3px;
  background: var(--gradient-orange);
  border-radius: 0 0 6px 6px;
}
.intro-glass-panel p {
  font-size: 1.05rem;
  color: rgba(243,237,229,0.92);
  line-height: 1.8;
}
.intro-glass-panel p + p { margin-top: 18px; }
.intro-glass-panel .quote-mark {
  font-size: 3.5rem;
  color: var(--orange);
  line-height: 1;
  font-weight: 700;
  margin-bottom: 6px;
  font-family: Georgia, serif;
}
.intro-stitch-visual {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.intro-stitch-visual svg { width: 100%; height: 100%; }
@media (max-width: 860px) {
  .intro-split-grid { grid-template-columns: 1fr; }
  .intro-hero-photo { height: 300px; margin: 0 auto; }
}
@media (max-width: 640px) {
  .intro-split-wrap { padding: 40px 22px; border-radius: 20px; }
  .intro-glass-panel { padding: 26px 24px; }
}

/* ---------- Embroidery-themed decorative animations ---------- */
.embroidery-hoop {
  stroke: var(--beige);
  stroke-width: 3;
  fill: none;
  opacity: 0.35;
  animation: hoopRotate 40s linear infinite;
  transform-origin: center;
}
@keyframes hoopRotate {
  from { transform: rotate(0deg); } to { transform: rotate(360deg); }
}
.stitch-path {
  fill: none;
  stroke: var(--orange);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 14 10;
  animation: stitchFlow 3s linear infinite;
}
.stitch-path.alt { stroke: var(--orange-light); animation-duration: 4s; animation-direction: reverse; opacity: 0.7; }
@keyframes stitchFlow {
  to { stroke-dashoffset: -240; }
}
.thread-loop {
  fill: none;
  stroke: var(--beige-light);
  stroke-width: 1.5;
  opacity: 0.4;
  stroke-dasharray: 6 8;
  animation: stitchFlow 6s linear infinite;
}
.stitch-needle {
  animation: stitchNeedle 3s ease-in-out infinite;
  transform-origin: center;
}
@keyframes stitchNeedle {
  0%, 100% { transform: translateY(-6px) rotate(-4deg); }
  50% { transform: translateY(8px) rotate(4deg); }
}
.thread-dot-float {
  animation: threadDotFloat 4s ease-in-out infinite;
}
@keyframes threadDotFloat {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(-10px); opacity: 1; }
}

/* Stitched thread divider (alternative to wave) */
.stitch-divider {
  display: flex; align-items: center; justify-content: center;
  padding: 30px 0;
}
.stitch-divider svg { width: min(600px, 90%); height: 20px; }

/* ---------- Instagram callout ---------- */
.instagram-callout {
  background: linear-gradient(120deg, #FF7D45 0%, #ff9a6e 45%, #ffb088 100%);
  border-radius: 24px;
  padding: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  color: white;
}
.instagram-callout .ig-text h3 { font-size: 1.5rem; margin-bottom: 8px; }
.instagram-callout .ig-text p { color: rgba(255,255,255,0.9); max-width: 420px; }
.instagram-callout .btn-ig {
  background: white; color: var(--orange-dark);
  padding: 14px 30px; border-radius: 100px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 10px;
  transition: transform 0.25s ease;
}
.instagram-callout .btn-ig:hover { transform: translateY(-3px); }
@media (max-width: 640px) {
  .instagram-callout { padding: 34px 26px; flex-direction: column; text-align: center; }
}

/* ---------- Eco-responsible badge (kaki green accent) ---------- */
.eco-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(86,93,65,0.12);
  border: 1px solid rgba(86,93,65,0.3);
  color: var(--green-kaki);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 100px;
  margin-bottom: 16px;
}
.eco-badge .leaf { font-size: 1rem; }

/* ---------- Page-hero X watermark ---------- */
.page-hero .x-watermark {
  position: absolute;
  top: 50%; right: -60px;
  width: 320px;
  opacity: 0.1;
  z-index: 0;
  pointer-events: none;
  animation: pageHeroXSpin 24s linear infinite;
  transform-origin: center;
}
@keyframes pageHeroXSpin {
  from { transform: translateY(-50%) rotate(0deg); }
  to { transform: translateY(-50%) rotate(360deg); }
}
@media (max-width: 640px) {
  .page-hero .x-watermark { width: 180px; right: -40px; }
}

/* ---------- Footer brand mark ---------- */
.footer-brand-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.footer-brand-mark img { height: 22px; width: auto; opacity: 0.85; }

/* ---------- Spinning X pinwheel accent ---------- */
.pinwheel-accent {
  position: absolute;
  width: 90px;
  opacity: 0.12;
  animation: spoolSpin 18s linear infinite;
  pointer-events: none;
}

/* ---------- Hero X parallax mark ---------- */

}

/* ---------- Cookie consent banner ---------- */
.cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--marron-darker);
  color: var(--beige-light);
  padding: 20px 24px;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  box-shadow: 0 -6px 24px rgba(0,0,0,0.3);
  transform: translateY(100%);
  transition: transform 0.4s ease;
}
.cookie-banner.visible { transform: translateY(0); }
.cookie-banner p { font-size: 0.88rem; color: rgba(224,212,199,0.85); max-width: 640px; margin: 0; }
.cookie-banner .cookie-actions { display: flex; gap: 12px; flex-shrink: 0; }
.cookie-banner .btn-cookie {
  padding: 10px 22px; border-radius: 100px; font-size: 0.85rem; font-weight: 600;
  cursor: pointer; border: none; font-family: var(--font);
}
.cookie-banner .btn-accept { background: var(--gradient-orange); color: white; }
.cookie-banner .btn-decline { background: transparent; color: var(--beige-light); border: 1px solid rgba(224,212,199,0.3) !important; }
@media (max-width: 640px) {
  .cookie-banner { flex-direction: column; align-items: flex-start; padding: 18px 20px; }
  .cookie-banner .cookie-actions { width: 100%; }
  .cookie-banner .btn-cookie { flex: 1; }
}

/* ---------- Google reviews placeholder ---------- */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.review-card {
  background: var(--beige-light);
  border: 2px dashed var(--beige);
  border-radius: 16px;
  padding: 26px;
}
.review-card .stars { color: var(--orange); font-size: 1rem; margin-bottom: 12px; letter-spacing: 2px; }
.review-card p { color: #8a7b73; font-style: italic; font-size: 0.92rem; margin-bottom: 14px; }
.review-card .reviewer { font-size: 0.85rem; font-weight: 600; color: #6b5d57; }
.reviews-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(76,63,59,0.06); border-radius: 100px;
  padding: 7px 16px; font-size: 0.78rem; font-weight: 700;
  color: #8a7b73; text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 8px;
}
@media (max-width: 980px) { .reviews-grid { grid-template-columns: 1fr; } }


/* ---------- Client logos strip (horizontal auto-scroll) ---------- */
.logos-strip-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}
.logos-strip {
  display: flex;
  align-items: center;
  gap: 20px;
  width: max-content;
  animation: logosScroll 26s linear infinite;
}
.logos-strip-viewport:hover .logos-strip { animation-play-state: paused; }
@keyframes logosScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.logo-slot {
  width: 170px;
  height: 80px;
  flex-shrink: 0;
  background: var(--white);
  border: 2px solid var(--beige);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b5d57;
  font-size: 0.92rem;
  font-weight: 700;
  text-align: center;
  padding: 0 14px;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.logo-slot:hover { border-color: var(--orange); color: var(--orange); }
@media (max-width: 640px) {
  .logo-slot { width: 140px; height: 65px; font-size: 0.8rem; }
}

/* ---------- "Notre fil conducteur" - two worlds joined by the X ---------- */
.thread-story-section {
  background: var(--gradient-dark);
  padding: 110px 0;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.thread-story-section::before {
  content: '';
  position: absolute;
  top: -20%; left: -10%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(255,125,69,0.12) 0%, transparent 70%);
  border-radius: 50%;
}
.thread-story-eyebrow {
  color: var(--orange-light);
  font-weight: 700;
  letter-spacing: 1.5px;
  font-size: 0.85rem;
  text-transform: uppercase;
  margin-bottom: 46px;
  position: relative;
  z-index: 1;
}
.worlds-stage {
  --orb-size: 108px;
  position: relative;
  width: min(520px, 90vw);
  height: 220px;
  margin: 0 auto 44px;
  z-index: 1;
}
.world-orb {
  position: absolute;
  z-index: 1;
  top: 50%;
  width: 108px; height: 108px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.world-orb.left {
  left: 0;
  transform: translateY(-50%);
  background: linear-gradient(160deg, #2b2320 0%, #4C3F3B 100%);
  border: 2px solid rgba(224,212,199,0.25);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.world-orb.right {
  right: 0;
  transform: translateY(-50%) scale(0.5);
  opacity: 0.35;
  background: var(--gradient-orange);
  transition: transform 0.15s linear, opacity 0.15s linear;
}
.world-orb svg { width: 46px; height: 46px; }
.world-caption {
  position: absolute;
  top: calc(50% + 68px);
  font-size: 0.78rem;
  color: rgba(224,212,199,0.65);
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.world-caption.left { left: 0; }
.world-caption.right { right: 0; text-align: right; }
.worlds-x-svg {
  position: absolute;
  z-index: 1;
  top: 50%; left: 50%;
  width: 80px;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0.25;
  pointer-events: none;
  transition: transform 0.15s linear, opacity 0.15s linear;
  filter: drop-shadow(0 6px 16px rgba(255,125,69,0.35));
}
.thread-story-text {
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.thread-story-text.is-visible { opacity: 1; transform: translateY(0); }
.thread-story-text p {
  font-size: 1.15rem;
  color: var(--beige-light);
  line-height: 1.65;
  font-weight: 500;
}
.thread-story-text .accent { color: var(--orange-light); font-weight: 700; }
.thread-story-text .signature {
  display: block;
  margin-top: 18px;
  font-size: 0.9rem;
  color: rgba(224,212,199,0.6);
  font-weight: 600;
}
@media (max-width: 640px) {
  .thread-story-section { padding: 80px 0; }
  .worlds-stage { --orb-size: 80px; height: 180px; margin-bottom: 34px; }
  .world-orb { width: 80px; height: 80px; }
  .world-orb svg { width: 34px; height: 34px; }
  .worlds-x-svg { width: 100px; height: 100px; }
  .world-caption { font-size: 0.68rem; top: calc(50% + 54px); }
  .thread-story-text p { font-size: 1rem; }
}

/* ---------- Manifesto section ---------- */
.manifesto-section {
  background: var(--gradient-dark);
  padding: 120px 0;
  position: relative;
  overflow: hidden;
  border-radius: 28px;
}
.manifesto-section::before {
  content: '';
  position: absolute;
  top: -25%; right: -12%;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(255,125,69,0.16) 0%, transparent 70%);
  border-radius: 50%;
}
.manifesto-section::after {
  content: '';
  position: absolute;
  bottom: -30%; left: -10%;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(224,212,199,0.07) 0%, transparent 70%);
  border-radius: 50%;
}
.manifesto-inner { max-width: 780px; margin: 0 auto; position: relative; z-index: 1; padding: 0 24px; }
.manifesto-eyebrow {
  color: var(--orange-light);
  font-weight: 700;
  letter-spacing: 1.5px;
  font-size: 0.85rem;
  text-transform: uppercase;
  margin-bottom: 26px;
  text-align: center;
}
.manifesto-line {
  font-size: clamp(1.6rem, 4.2vw, 2.6rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--beige-light);
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.manifesto-line.is-visible { opacity: 1; transform: translateY(0); }
.manifesto-line .accent {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.manifesto-line.small {
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  font-weight: 400;
  color: rgba(224,212,199,0.8);
  margin-top: 24px;
}
.manifesto-signature {
  text-align: center;
  margin-top: 40px;
  font-weight: 700;
  color: var(--orange);
  letter-spacing: 0.5px;
  opacity: 0;
  transition: opacity 1s ease 0.3s;
}
.manifesto-signature.is-visible { opacity: 1; }

/* ---------- Growth bars animation (launch section) ---------- */
.launch-visual {
  width: 90px;
  height: 70px;
  margin: 0 auto 20px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
}
.launch-bar {
  width: 14px;
  border-radius: 7px 7px 3px 3px;
  height: 0;
  transition: height 0.9s cubic-bezier(.34,1.56,.64,1);
}
.launch-bar:nth-child(1) { background: var(--beige); }
.launch-bar:nth-child(2) { background: var(--orange-light); }
.launch-bar:nth-child(3) { background: var(--orange); }
.launch-bar:nth-child(4) { background: var(--orange-dark); }
.launch-visual.is-visible .launch-bar:nth-child(1) { height: 28px; transition-delay: 0s; }
.launch-visual.is-visible .launch-bar:nth-child(2) { height: 44px; transition-delay: 0.12s; }
.launch-visual.is-visible .launch-bar:nth-child(3) { height: 58px; transition-delay: 0.24s; }
.launch-visual.is-visible .launch-bar:nth-child(4) { height: 70px; transition-delay: 0.36s; }

/* ---------- Three simple circles with text + X topper (About origins) ---------- */
.simple-x-topper {
  display: block;
  width: 44px;
  margin: 50px auto 24px;
  opacity: 0.85;
}
.circle-trio {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  max-width: 780px;
  margin: 0 auto;
}
.circle-item {
  width: 190px;
  height: 190px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  color: white;
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.35;
}
.c-orange { background: var(--gradient-orange); }
.c-grey { background: linear-gradient(160deg, #8a7b73 0%, #6b5d57 100%); }
.c-marron { background: linear-gradient(160deg, #4C3F3B 0%, #2b2320 100%); }
@media (max-width: 640px) {
  .circle-item { width: 150px; height: 150px; font-size: 0.88rem; padding: 18px; }
}
.intro-hero-photo {
  position: relative;
  height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 16px;
}
.intro-hero-photo::before {
  content: '';
  position: absolute;
  inset: -10%;
  background: radial-gradient(circle at 55% 45%, rgba(255,125,69,0.22) 0%, transparent 60%);
  z-index: 0;
}
.intro-hero-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, var(--marron-darker) 0%, transparent 32%);
  z-index: 2;
  pointer-events: none;
}
.intro-hero-photo img {
  position: relative;
  z-index: 1;
  height: 108%;
  max-width: none;
  width: auto;
  transform: rotate(-3deg);
  animation: heroPhotoFloat 6s ease-in-out infinite;
}
@keyframes heroPhotoFloat {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50% { transform: rotate(-2deg) translateY(-14px); }
}
@media (max-width: 860px) {
  .intro-hero-photo { height: 340px; }
  .intro-hero-photo img { height: 90%; }
}

.br-desktop { display: none; }
@media (min-width: 641px) {
  .br-desktop { display: inline; }
}

/* ---------- Glass panel differentiators (About intro) ---------- */
.glass-origin-text .accent {
  color: var(--orange-light);
  font-weight: 700;
}
.glass-diff-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  color: var(--orange-light);
  margin: 28px 0 16px;
}
.glass-diff-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.glass-diff-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.glass-diff-item.is-visible { opacity: 1; transform: translateX(0); }
.glass-diff-item .dot {
  flex-shrink: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--orange);
  margin-top: 7px;
}
.glass-diff-item strong {
  color: var(--beige-light);
  font-weight: 700;
}
.glass-diff-item span.detail {
  color: rgba(224,212,199,0.75);
}

.text-center { text-align: center; }
.mt-40 { margin-top: 40px; }
.breadcrumb { font-size: 0.85rem; color: #8a7b73; margin-bottom: 24px; }
.breadcrumb a:hover { color: var(--orange); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero-grid, .contact-layout, .testimonial, .product-detail { grid-template-columns: 1fr; }
  .features-grid, .catalog-teaser-grid, .stats-grid, .process-grid { grid-template-columns: repeat(2,1fr); }
  .realisations-grid { grid-template-columns: repeat(2,1fr); }
  .product-grid { grid-template-columns: repeat(3,1fr); }
  .catalog-layout { grid-template-columns: 1fr; }
  .subcat-nav {
    position: static;
    max-height: 280px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--beige);
    background: var(--beige-light);
    padding: 22px;
    margin-bottom: 30px;
  }
  .subcat-nav h4 { display: block; }
  .subcat-main-label {
    cursor: default;
    padding: 0;
    background: none;
    border-radius: 0;
    margin: 18px 0 6px;
    border-top: 1px solid var(--beige) !important;
    padding-top: 12px;
  }
  .subcat-group:first-child .subcat-main-label { margin-top: 0; border-top: none !important; padding-top: 0; }
  .subcat-main-label .chevron { display: none; }
  .subcat-sublist {
    max-height: none;
    overflow: visible;
  }
  .subcat-sublist a {
    padding: 9px 10px;
    white-space: normal;
  }
  .process-line { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero-visual { height: 420px; margin-top: 30px; }
  .reassurance-grid { grid-template-columns: repeat(2,1fr); gap: 24px; }
}
@media (max-width: 960px) {
  .main-nav { display: none; }
  .burger { display: flex; }
}
@media (max-width: 640px) {
  .hero { padding: 60px 0 70px; }
  .hero h1 { font-size: 2.1rem; }
  .hero-visual { height: 320px; }
  .features-grid, .catalog-teaser-grid, .stats-grid, .process-grid, .product-grid, .realisations-grid, .footer-grid {
    grid-template-columns: 1fr;
  }
  .product-grid { grid-template-columns: repeat(2,1fr); gap: 14px; }
  .stat-item { border-right: none; border-bottom: 1px solid rgba(224,212,199,0.2); padding-bottom: 20px; margin-bottom: 20px; }
  .cta-band { margin: 0 12px; padding: 50px 24px; }
  .form-row { grid-template-columns: 1fr; }
  .reassurance-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .reassurance-item { font-size: 0.75rem; }
  .history-timeline { padding-left: 34px; }
  .history-item { padding-left: 16px; padding-bottom: 50px; }
  .history-dot { left: -34px; }
  .history-rocket { left: -27px; font-size: 1.4rem; }
  .back-to-top { bottom: 16px; right: 16px; width: 42px; height: 42px; }
  .section { padding: 60px 0; }
  .section-header h2 { font-size: 1.7rem; }
  .page-hero { padding: 50px 0 110px; }
}

/* Mobile nav drawer (slide-in panel) */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 299;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}
.nav-overlay.open { opacity: 1; visibility: visible; }

.main-nav.mobile-open {
  display: flex;
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(300px, 82vw);
  height: 100vh;
  background: var(--marron-darker);
  flex-direction: column;
  align-items: flex-start;
  padding: 90px 28px 30px;
  overflow-y: auto;
  z-index: 300;
  box-shadow: -10px 0 40px rgba(0,0,0,0.4);
  transform: translateX(0);
  transition: transform 0.3s ease;
}
.main-nav.mobile-open > ul { flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; }
.main-nav.mobile-open .has-dropdown { width: 100%; }
.main-nav.mobile-open .dropdown {
  position: static; opacity: 1; visibility: visible; transform: none;
  display: none; box-shadow: none; border: none; margin: 4px 0 4px 12px; width: 100%;
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
}
.nav-close {
  display: none;
  position: absolute;
  top: 22px; right: 22px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(224,212,199,0.1);
  border: none;
  color: var(--beige-light);
  font-size: 1.3rem;
  align-items: center; justify-content: center;
  cursor: pointer;
}
.main-nav.mobile-open .nav-close { display: flex; }
.main-nav.mobile-open .has-dropdown .dropdown { display: none !important; }
.main-nav.mobile-open .nav-link {
  color: var(--beige-light) !important;
}
.main-nav.mobile-open .nav-link::after { display: none !important; content: none !important; }
.main-nav.mobile-open .btn-primary {
  margin: 18px 0 0 !important;
  width: 100%;
  text-align: center;
}
.main-nav.mobile-open .has-dropdown.open .dropdown { display: block; }
.main-nav.mobile-open .nav-link { display: block; padding: 14px 0; width: 100%; border-bottom: 1px solid rgba(224,212,199,0.15); }

/* ---------- Static hero grid (replaces scrolling marquee) ---------- */
.hero-visual--grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  position: relative;
  z-index: 1;
}
.hero-visual--grid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 16px;
  background: rgba(224,212,199,0.06);
  padding: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  box-sizing: border-box;
}
@media (max-width: 980px) {
  .hero-visual--grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}

/* ---------- Hero scroll cue ---------- */
.hero-scroll-cue {
  position: absolute;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  width: 34px; height: 50px;
  border: 2px solid rgba(224,212,199,0.5);
  border-radius: 20px;
  background: none;
  cursor: pointer;
  z-index: 2;
}
.hero-scroll-cue span {
  display: block;
  width: 5px; height: 5px;
  background: var(--orange);
  border-radius: 50%;
  margin: 8px auto 0;
  animation: scrollCueMove 1.8s ease-in-out infinite;
}
@keyframes scrollCueMove {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(16px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}
@media (max-width: 640px) {
  .hero-scroll-cue { bottom: 14px; }
}

/* ---------- Chronometer icon animation ---------- */
.chrono-hand-sec {
  transform-origin: 30px 30px;
  animation: chronoTick 3s linear infinite;
}
@keyframes chronoTick {
  to { transform: rotate(360deg); }
}
@keyframes chronoMin {
  to { transform: rotate(360deg); }
}
}

/* ---------- Instagram feed embed container ---------- */
.ig-feed-embed {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  border-radius: 16px;
  overflow: hidden;
}
.ig-feed-embed iframe { width: 100%; border: none; border-radius: 16px; }

/* ---------- Messages du formulaire de devis ---------- */
.form-notice {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 0.9rem;
  line-height: 1.5;
  border-left: 3px solid;
}
.form-notice.is-success {
  background: rgba(76, 63, 59, 0.06);
  border-left-color: #4C3F3B;
  color: #4C3F3B;
}
.form-notice.is-error {
  background: rgba(255, 125, 69, 0.10);
  border-left-color: #FF7D45;
  color: #8a4a25;
}


/* ---------- Fleche de defilement (symetrique du retour en haut) ---------- */
.hero-scroll-cue {
  position: absolute;
  bottom: 96px; right: 40px; left: auto;
  transform: none;
  width: 48px; height: 48px;
  border: none; border-radius: 50%;
  background: var(--gradient-orange);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 3;
  box-shadow: 0 8px 20px rgba(255,125,69,0.4);
  animation: scrollCueBob 1.9s ease-in-out infinite;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.hero-scroll-cue svg { width: 22px; height: 22px; }
.hero-scroll-cue.is-hidden { opacity: 0; visibility: hidden; }
@keyframes scrollCueBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(7px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-cue { animation: none; }
}
@media (max-width: 640px) {
  .hero-scroll-cue { bottom: 70px; right: 20px; width: 42px; height: 42px; }
}

/* ---------- Signature en pied de page ---------- */
.footer-baseline {
  margin-top: 14px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--orange-light);
  letter-spacing: 0.01em;
}

/* ---------- Catalogue : photos a fond perdu, respirations, separations ---------- */
/* Espace entre le nom de la sous-categorie et son compteur */
.subcat-nav a span { margin-left: 8px !important; }
.subcat-sublist a { justify-content: space-between; gap: 14px; }

/* Separation nettement plus marquee entre Textiles et Goodies */
.catalog-group-title:not(:first-child) {
  margin-top: 130px;
  padding-top: 80px;
  border-top: none;
  position: relative;
}
.catalog-group-title:not(:first-child)::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 100vw; max-width: 1600px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--beige) 18%, var(--beige) 82%, transparent);
}
.catalog-group-title:not(:first-child)::after {
  content: '';
  position: absolute;
  top: -9px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 16px; height: 16px;
  background: var(--orange);
  border-radius: 3px;
}
/* Un peu plus d'air entre deux sous-categories */
.subcat-block { margin-bottom: 76px; }
.subcat-block h2 { margin-bottom: 26px; }


/* ---------- Grille a cinq techniques ---------- */
.features-grid--five {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 980px) { .features-grid--five { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .features-grid--five { grid-template-columns: 1fr; } }


/* ---------- Bloc AKOMI : picto a la place du trait dessine ---------- */
.akomi-icon { width: 72px; height: 72px; margin: 0 auto 18px; }
.akomi-icon svg { width: 100%; height: 100%; display: block; }
.akomi-nib { transform-origin: 36px 36px; animation: akomiDraw 4s ease-in-out infinite; }
@keyframes akomiDraw {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-8deg); }
}
@media (prefers-reduced-motion: reduce) { .akomi-nib { animation: none; } }

/* ---------- Apercu du feed Instagram ---------- */
.ig-preview { max-width: 720px; margin: 0 auto; }
.ig-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.ig-tile {
  display: block; aspect-ratio: 1;
  overflow: hidden; border-radius: 10px;
  background: var(--beige-light);
}
.ig-tile img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.4s ease;
}
.ig-tile:hover img { transform: scale(1.07); }
.ig-handle {
  display: block; text-align: center;
  margin-top: 18px; font-weight: 600;
  color: var(--orange-dark, #d9612a);
}
@media (max-width: 520px) { .ig-preview-grid { gap: 6px; } }


/* ---------- Techniques : grille de six (5 + carte d'appel) ---------- */
.technique-grid-six {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
@media (max-width: 1000px) { .technique-grid-six { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 660px)  { .technique-grid-six { grid-template-columns: 1fr; } }

.technique-card--cta {
  background: var(--gradient-orange);
  border-color: transparent;
  display: flex;
  flex-direction: column;
}
.technique-card--cta .technique-anim--cta {
  background: transparent;
  display: flex; align-items: center; justify-content: center;
}
.technique-card--cta .body { flex: 1; display: flex; flex-direction: column; }
.technique-card--cta h3 { color: #fff; }
.technique-card--cta p { color: rgba(255,255,255,0.92); }
/* rond fixe, sans pulsation : l'animation le decalait visuellement */
.cta-pulse { opacity: 0.22; }
.btn-cta-card {
  margin-top: auto;
  align-self: flex-start;
  background: #fff;
  color: var(--orange-dark, #d9612a);
  font-weight: 700;
  padding: 12px 22px;
  border: none; border-radius: 999px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-cta-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.22); }

/* animations des deux nouvelles techniques */
.tech-cut { animation: techCut 3.2s ease-in-out infinite; }
@keyframes techCut { 0%,15% { stroke-dashoffset: 130; } 65%,100% { stroke-dashoffset: 0; } }
.tech-blade { animation: techBlade 3.2s ease-in-out infinite; }
@keyframes techBlade {
  0%,15% { transform: translateX(-62px); }
  65%,100% { transform: translateX(62px); }
}
.tech-printhead { animation: techHead 2.8s ease-in-out infinite; }
@keyframes techHead { 0%,100% { transform: translateX(-52px); } 50% { transform: translateX(52px); } }
.tech-ink { animation: techInk 1.4s ease-in infinite; }
@keyframes techInk { 0% { opacity: 0; transform: translateY(-8px); } 60% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) {
  .tech-cut, .tech-blade, .tech-printhead, .tech-ink, .cta-pulse { animation: none; }
}


/* ---------- Pictos de reassurance : traces vectoriels, meme grille ---------- */
.reassurance-item .ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  margin-right: 10px;
  flex-shrink: 0;
}
.reassurance-item .ic-svg {
  width: 22px; height: 22px;
  fill: none;
  stroke: var(--orange);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.reassurance-item { display: flex; align-items: center; }

/* ---------- Broderie : la couture se fait, l'aiguille suit le trace ---------- */
.broderie-points {
  animation: broderieCoud 4s linear infinite;
}
@keyframes broderieCoud {
  0%   { stroke-dashoffset: 220; }
  75%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}
.broderie-aiguille {
  offset-path: path('M 70 120 C 100 62, 200 62, 230 120');
  offset-rotate: 0deg;
  animation: broderieAiguille 4s linear infinite, broderiePique 0.5s ease-in-out infinite;
}
@keyframes broderieAiguille {
  0%   { offset-distance: 0%; }
  75%  { offset-distance: 100%; }
  100% { offset-distance: 100%; }
}
@keyframes broderiePique {
  0%, 100% { translate: 0 -6px; }
  50%      { translate: 0 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .broderie-points, .broderie-aiguille { animation: none; }
  .broderie-points { stroke-dashoffset: 0; }
}


/* ---------- Techniques sur fond clair (cartes sombres sur beige) ---------- */
.technique-light-section {
  background: var(--beige-light);
  position: relative;
}
.technique-light-section .technique-card {
  box-shadow: 0 14px 34px rgba(76, 63, 59, 0.14);
}
.technique-light-section .technique-card--cta {
  box-shadow: 0 16px 38px rgba(255, 125, 69, 0.32);
}
/* le bouton de la carte orange ne colle plus au texte */
.btn-cta-card {
  margin-top: 20px;
  margin-bottom: 4px;
}
/* titre du bloc : assez large pour ne pas isoler un mot */
.technique-light-section .section-header h2 { max-width: 22ch; margin-inline: auto; }


/* ---------- Etiquette du hero : toujours au-dessus du visuel ---------- */
.hero-tag {
  position: absolute;
  z-index: 4;
  bottom: -16px;
  left: 24px;
  background: var(--gradient-orange);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 9px 18px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(255,125,69,0.42);
}
.hero-photo, .hero-x { overflow: visible; }
@media (max-width: 640px) {
  .hero-tag { font-size: 0.68rem; padding: 7px 14px; left: 16px; bottom: -12px; }
}




/* Titres de cartes produit sur deux lignes : les cartes s'alignent */
.product-card .info h3 {
  min-height: 2.7em;
  display: flex;
  align-items: flex-start;
}

/* ---------- Techniques : vignette a picto (remplace les animations larges) ---------- */
.technique-anim--icon {
  width: 100%;
  height: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #2b2320 0%, #4C3F3B 100%);
  border-radius: 0;
}
.technique-card { overflow: hidden; display: flex; flex-direction: column; }
.technique-card .body { flex: 1; display: flex; flex-direction: column; }
.technique-anim--icon svg { width: 76px; height: 76px; }
.technique-anim--cta { width: 100%; height: 132px; background: transparent; }
.technique-anim--cta svg { width: 76px; height: 76px; }
.tech-products {
  margin-top: 12px;
  font-size: 0.82rem;
  color: #8a7b73;
  line-height: 1.6;
}
.technique-card--cta .tech-products { color: rgba(255,255,255,0.8); }

/* animations des pictos de technique */
.ic-stitch { stroke-dashoffset: 90; animation: icStitch 3.6s ease-in-out infinite; }
@keyframes icStitch { 0% { stroke-dashoffset: 90; } 60%,100% { stroke-dashoffset: 0; } }
.ic-squeegee { animation: icSqueegee 3s ease-in-out infinite; }
@keyframes icSqueegee { 0%,100% { transform: translateX(-9px); } 50% { transform: translateX(9px); } }
.ic-press { animation: icPress 2.6s ease-in-out infinite; }
@keyframes icPress { 0%,100% { transform: translateY(0); } 45%,60% { transform: translateY(11px); } }
.ic-film { stroke-dasharray: 60; stroke-dashoffset: 60; animation: icFilm 3.2s ease-in-out infinite; }
@keyframes icFilm { 0% { stroke-dashoffset: 60; } 55%,100% { stroke-dashoffset: 0; } }
.ic-head { animation: icHead 2.8s ease-in-out infinite; }
@keyframes icHead { 0%,100% { transform: translateX(-7px); } 50% { transform: translateX(7px); } }
.ic-drop { animation: icDrop 1.5s ease-in infinite; }
@keyframes icDrop { 0% { opacity: 0; transform: translateY(-6px); } 55% { opacity: 1; } 100% { opacity: 0; transform: translateY(6px); } }
.ic-stamp { animation: icStamp 2.4s ease-in-out infinite; }
@keyframes icStamp { 0%,100% { transform: translateY(0); } 50% { transform: translateY(9px); } }
.ic-beam { animation: icBeam 2s ease-in-out infinite; }
@keyframes icBeam { 0%,100% { opacity: 0.25; } 50% { opacity: 1; } }
.ic-rotate { animation: icRotate 4s ease-in-out infinite; transform-origin: 30px 32px; }
@keyframes icRotate { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(0.55); } }
.ic-wrap { animation: icWrap 3s ease-in-out infinite; }
@keyframes icWrap { 0%,100% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }
.ic-heat { animation: icHeat 2.6s ease-in-out infinite; }
@keyframes icHeat { 0%,100% { opacity: 0.35; transform: translateY(2px); } 50% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) {
  .ic-stitch,.ic-squeegee,.ic-press,.ic-film,.ic-head,.ic-drop,
  .ic-stamp,.ic-beam,.ic-rotate,.ic-wrap,.ic-heat { animation: none; }
  .ic-stitch,.ic-film { stroke-dashoffset: 0; }
}

/* ---------- Logos clients : bandeau et fiches de realisation ---------- */
.logo-slot img {
  max-height: 42px;
  max-width: 140px;
  width: auto;
  object-fit: contain;
  /* gris fonce plutot que blanc : le bandeau est sur fond clair */
  filter: brightness(0) opacity(0.55);
  opacity: 1;
  transition: opacity 0.3s ease;
}
.logo-slot:hover img { filter: brightness(0) opacity(0.85); }

.client-logo {
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.client-logo img {
  max-height: 46px;
  max-width: 160px;
  width: auto;
  object-fit: contain;
}
.client-name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--orange-dark, #d9612a);
  letter-spacing: 0.02em;
}


/* Janvrin Freres n'existe qu'en version blanche : lisible dans le bandeau
   (filtre blanc sur fond sombre), on l'assombrit sur les fonds clairs. */
.client-logo img[src*="janvrin"] { filter: brightness(0) opacity(0.75); }
.logo-slot img[src*="janvrin"] { filter: brightness(0) opacity(0.55); }



/* ---------- Bloc goodies : couleurs inversees pour distinguer les deux familles ---------- */
.technique-dark-family {
  background: var(--gradient-dark);
  position: relative;
}
.technique-dark-family .eyebrow { color: var(--orange-light); }
.technique-dark-family .section-header h2 { color: var(--beige-light); max-width: 22ch; margin-inline: auto; }
.technique-dark-family .section-header p { color: rgba(224,212,199,0.85); }
.technique-dark-family .technique-card {
  background: var(--beige-light);
  border-color: rgba(224,212,199,0.25);
  box-shadow: 0 18px 40px rgba(0,0,0,0.3);
}
.technique-dark-family .technique-card h3 { color: var(--marron, #4C3F3B); }
.technique-dark-family .technique-card p { color: #5a4d47; }
.technique-dark-family .tech-products { color: #8a7b73; }
/* le bandeau du picto passe en clair, en miroir du premier bloc */
.technique-dark-family .technique-anim--icon {
  background: linear-gradient(160deg, #E0D4C7 0%, #F3EDE5 100%);
}
.technique-dark-family .technique-anim--icon svg circle[opacity="0.14"] { fill: #FF7D45; }
.technique-dark-family .technique-card--cta {
  background: var(--gradient-orange);
  border-color: transparent;
}
.technique-dark-family .technique-card--cta h3,
.technique-dark-family .technique-card--cta p { color: #fff; }
.technique-dark-family .technique-anim--cta { background: transparent; }


/* ---------- Hero pleine largeur, texte centre, X en filigrane ---------- */
.hero--centered { position: relative; overflow: hidden; }
.hero-centered-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 24px;
  padding-bottom: 40px;
  max-width: 1120px;
}
/* Titre et accroche exactement a la meme largeur : c'est le conteneur qui
   donne la mesure, pas chaque element pris separement.
   ATTENTION a la specificite : la regle d'origine s'ecrit `.hero p.lead`
   (deux classes + une balise) et l'emporte sur `.hero-centered-inner .lead`
   (deux classes seulement). Il faut donc au moins autant de specificite ici,
   sinon le max-width: 480px d'origine gagne et le couloir ne bouge pas. */
.hero--centered .hero-centered-inner h1 { text-wrap: balance; }
.hero--centered .hero-centered-inner h1,
.hero--centered .hero-centered-inner p.lead {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}
.hero-centered-inner .hero-cta { justify-content: center; }

.hero-x-parallax {
  position: absolute;
  top: 50%; left: 50%;
  /* reduit et adouci : il doit rester une texture de fond, pas un motif
     qui passe derriere le texte et casse la lisibilite */
  width: 380px;
  max-width: 34vw;
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 0.09;
  pointer-events: none;
  z-index: 0;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.lead-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255,125,69,0.6);
  transition: color 0.25s ease;
}
.lead-link:hover { color: var(--orange-light); }

@media (max-width: 900px) {
  .hero-x-parallax { width: 330px; }
}
@media (max-width: 640px) {
  .hero-x-parallax { width: 250px; opacity: 0.08; }
  .hero-centered-inner { padding-top: 20px; padding-bottom: 40px; }
}


/* rotation des pictos 360 : la fleche circulaire pulse doucement */
.ic-turn { animation: icTurn 2.8s ease-in-out infinite; transform-origin: 30px 44px; }
@keyframes icTurn {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .ic-turn { animation: none; } }





/* ---------- Cadrage des photos produit ----------
   Beaucoup de visuels sont deja tronques dans le catalogue d'origine : un bras
   coupe sur un cote, les jambes coupees en bas. Centrer la photo laisserait ces
   bords francs au milieu du beige, ou ils sautent aux yeux. On colle donc la
   photo contre chaque bord qu'elle touche : la coupure disparait dans le bord
   du cadre.

   SPECIFICITE : ces selecteurs nomment le conteneur (.thumb / .thumb-large) EN
   PLUS de la classe fit-*, pour passer devant les regles de base
   `.product-card .thumb img` et `.product-detail .thumb-large img`. Sans cela
   elles perdent et rien ne bouge a l'ecran.
   La classe est calculee automatiquement pour chaque produit (champ "fit"
   dans data/*.js) a partir des bords que le produit touche dans son fichier. */

.thumb.fit-center-bottom img, .thumb-large.fit-center-bottom img { object-position: center bottom; padding: 0; }
.thumb.fit-center-top    img, .thumb-large.fit-center-top    img { object-position: center top;    padding: 0; }
.thumb.fit-left-center   img, .thumb-large.fit-left-center   img { object-position: left center;   padding: 0; }
.thumb.fit-right-center  img, .thumb-large.fit-right-center  img { object-position: right center;  padding: 0; }
.thumb.fit-left-bottom   img, .thumb-large.fit-left-bottom   img { object-position: left bottom;   padding: 0; }
.thumb.fit-right-bottom  img, .thumb-large.fit-right-bottom  img { object-position: right bottom;  padding: 0; }
.thumb.fit-left-top      img, .thumb-large.fit-left-top      img { object-position: left top;      padding: 0; }
.thumb.fit-right-top     img, .thumb-large.fit-right-top     img { object-position: right top;     padding: 0; }

/* coupe des deux cotes : la photo occupe toute la largeur.
   Placement par top/bottom/margin plutot que par transform : le survol applique
   un transform: scale(1.06) plus specifique, qui ecraserait un centrage fait
   avec transform. */
.thumb.fit-wide-center img, .thumb-large.fit-wide-center img,
.thumb.fit-wide-bottom img, .thumb-large.fit-wide-bottom img,
.thumb.fit-wide-top    img, .thumb-large.fit-wide-top    img {
  width: 100%; height: auto; max-height: 100%;
  left: 0; right: 0;
  padding: 0;
}
.thumb.fit-wide-center img, .thumb-large.fit-wide-center img { top: 0; bottom: 0; margin: auto 0; }
.thumb.fit-wide-bottom img, .thumb-large.fit-wide-bottom img { top: auto; bottom: 0; }
.thumb.fit-wide-top    img, .thumb-large.fit-wide-top    img { top: 0; bottom: auto; }

/* coupe en haut ET en bas : la photo occupe toute la hauteur */
.thumb.fit-tall-left   img, .thumb-large.fit-tall-left   img,
.thumb.fit-tall-right  img, .thumb-large.fit-tall-right  img,
.thumb.fit-tall-center img, .thumb-large.fit-tall-center img {
  height: 100%; width: auto; max-width: 100%;
  top: 0; bottom: 0;
  padding: 0;
}
.thumb.fit-tall-center img, .thumb-large.fit-tall-center img { left: 0; right: 0; margin: 0 auto; }
.thumb.fit-tall-left   img, .thumb-large.fit-tall-left   img { left: 0; right: auto; }
.thumb.fit-tall-right  img, .thumb-large.fit-tall-right  img { left: auto; right: 0; }

/* aucun bord libre pour cacher la coupure : on rogne.
   fit-fill    = cadrage centre
   fit-fill-top = cadrage sur le haut, quand le produit est porte sur la tete
                  (casquettes) et que c'est lui qu'on veut voir. */
.thumb.fit-fill img, .thumb-large.fit-fill img,
.thumb.fit-fill-top img, .thumb-large.fit-fill-top img {
  width: 100%; height: 100%;
  object-fit: cover;
  padding: 0;
  left: 0; right: auto; top: 0; bottom: auto; margin: 0;
}
.thumb.fit-fill img, .thumb-large.fit-fill img { object-position: center; }
.thumb.fit-fill-top img, .thumb-large.fit-fill-top img { object-position: center top; }


/* ---------- Encart catalogue : mis en avant plutot qu'en note de bas de bloc ---------- */
.catalogue-teaser {
  max-width: 860px;
  margin: 64px auto 0;
  text-align: center;
  background: var(--gradient-dark);
  color: var(--beige-light);
  padding: 44px 40px;
  border-radius: 20px;
  box-shadow: 0 22px 50px rgba(76, 63, 59, 0.22);
}
.catalogue-teaser-eyebrow {
  display: block;
  color: var(--orange-light);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.catalogue-teaser-title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 14px;
  color: var(--beige-light);
}
.catalogue-teaser-text {
  font-size: 1rem;
  color: rgba(224,212,199,0.85);
  max-width: 60ch;
  margin: 0 auto 26px;
}
@media (max-width: 640px) {
  .catalogue-teaser { padding: 32px 22px; margin-top: 44px; }
  .catalogue-teaser-title { font-size: 1.2rem; }
}

.footer-note {
  color: var(--orange-light);
  font-size: 0.82rem;
  margin-top: 6px;
  list-style: none;
}

/* ---------- Fil conducteur : le trait en pointilles entre les deux cercles ---------- */
.worlds-thread {
  position: absolute;
  top: 50%;
  /* CAUSE DU DEBORDEMENT : un <svg> est un element remplace. Avec un viewBox
     520x8 et height: 8px, une largeur "auto" est recalculee depuis le rapport
     du viewBox — soit 520px — et la propriete right est alors ignoree. Le trait
     partait donc de left:96px sur 520px de large et depassait le conteneur.
     On fixe donc la largeur explicitement au lieu de la deduire. */
  left: var(--orb-size, 108px);
  right: auto;
  width: calc(100% - 2 * var(--orb-size, 108px));
  height: 8px;
  transform: translateY(-50%);
  z-index: 0;
  pointer-events: none;
}
.worlds-thread line {
  stroke-dashoffset: 0;
  animation: threadDrift 6s linear infinite;
}
@keyframes threadDrift { to { stroke-dashoffset: -30; } }
@media (prefers-reduced-motion: reduce) { .worlds-thread line { animation: none; } }


.product-minimum {
  margin-top: 14px;
  font-size: 0.9rem;
  color: var(--orange-dark, #d9612a);
  background: rgba(255,125,69,0.08);
  border-radius: 8px;
  padding: 10px 14px;
  display: inline-block;
}



/* ---------- Mobile : titres reduits ----------
   Les titres etaient dimensionnes pour l'ordinateur et prenaient trop de place
   sur un ecran de telephone. Reduction d'environ 20 %, sans toucher aux
   tablettes ni aux ordinateurs. */
@media (max-width: 640px) {
  .hero h1 { font-size: 1.75rem; line-height: 1.2; }
  .hero p.lead { font-size: 1rem; }
  .hero .eyebrow { font-size: 0.7rem; letter-spacing: 0.1em; }
  .page-hero h1 { font-size: 1.8rem; }
  .section-header h2 { font-size: 1.4rem; }
  .section-header p { font-size: 0.95rem; }
  .cta-band h2 { font-size: 1.35rem; }
  .catalogue-teaser-title { font-size: 1.1rem; }
  .product-detail h1 { font-size: 1.5rem; }
  .technique-card h3, .feature-card h3 { font-size: 1rem; }
}
@media (max-width: 400px) {
  .hero h1 { font-size: 1.55rem; }
  .section-header h2 { font-size: 1.25rem; }
  .page-hero h1 { font-size: 1.6rem; }
}

/* ---------- Carte d'appel : coche centree, sans animation ----------
   Le trace precedent n'etait pas centre dans son cercle : sa boite englobante
   etait decalee d'un pixel a droite et d'un demi vers le bas. Corrige dans le
   SVG (personnalisation.html). Le cercle et la coche restent fixes. */
}