/*
 * Wellputt — Landings : accueil Wellputt Studio et landing Produits personnalises.
 * Memes codes que les landings BigTilt / Surface : noir profond, Oswald, orange Wellputt.
 * Tout est prefixe .wps pour ne pas toucher au theme.
 */
.wps {
  --wps-bg: #050505;
  --wps-card: rgba(255, 255, 255, .035);
  --wps-line: rgba(255, 255, 255, .09);
  --wps-text: #f5f5f3;
  --wps-muted: rgba(255, 255, 255, .64);
  --wps-accent: #f15a29;
  --wps-accent-h: #ff7a4d;
  --wps-title: 'Oswald', sans-serif;
  --wps-body: 'Poppins', sans-serif;
  position: relative;
  overflow: hidden;
  background: var(--wps-bg);
  color: var(--wps-text);
  font-family: var(--wps-body);
  -webkit-font-smoothing: antialiased;
}
.wps *, .wps *::before, .wps *::after { box-sizing: border-box; }
.wps img { display: block; max-width: 100%; }
.wps a { text-decoration: none; }
/* Le theme remet des puces sur toutes les listes du contenu CMS. */
.wps ul, .wps ol, .wps li { list-style: none; }
.wps ul.wps-tags, .wps ul.wps-facts, .wps ol.wps-steps { padding-left: 0; margin-left: 0; }
.wps li::marker { content: none; }
.wps-wrap { width: min(1240px, 100%); margin: 0 auto; padding: 0 32px; }
.wps-section { position: relative; padding: clamp(72px, 10vw, 128px) 0; }
.wps-section--line { border-top: 1px solid var(--wps-line); }

/* Titres */
.wps-eyebrow {
  margin: 0 0 18px;
  color: var(--wps-accent);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
}
.wps-h2 {
  margin: 0;
  color: #fff;
  font-family: var(--wps-title);
  font-size: clamp(34px, 5vw, 64px);
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  text-wrap: balance;
}
.wps-lead { max-width: 620px; margin: 22px 0 0; color: var(--wps-muted); font-size: 18px; line-height: 1.65; text-wrap: pretty; }
.wps-center { text-align: center; }
.wps-center .wps-lead { margin-left: auto; margin-right: auto; }

/* Boutons : le theme colore tous les liens (a:link:not(.btn)), d'ou la classe doublee. */
.wps .wps-btn.wps-btn:link, .wps .wps-btn.wps-btn:visited, .wps button.wps-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  border: 1px solid var(--wps-accent);
  border-radius: 100px;
  color: #fff;
  background: var(--wps-accent);
  font-family: var(--wps-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s;
}
.wps .wps-btn.wps-btn:hover, .wps button.wps-btn:hover { color: #fff; background: var(--wps-accent-h); border-color: var(--wps-accent-h); transform: translateY(-1px); }
.wps .wps-btn.wps-btn--ghost:link, .wps .wps-btn.wps-btn--ghost:visited { background: transparent; border-color: rgba(255, 255, 255, .3); }
.wps .wps-btn.wps-btn--ghost:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .55); }
.wps button.wps-btn[disabled] { opacity: .6; cursor: wait; }

/* Hero */
.wps-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(92vh, 900px);
  padding: 120px 20px 96px;
  text-align: center;
  isolation: isolate;
}
.wps-hero__media { position: absolute; inset: 0; z-index: -2; display: grid; grid-template-columns: repeat(var(--wps-cols, 1), 1fr); }
.wps-hero__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); }
.wps-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(closest-side at 50% 38%, rgba(241, 90, 41, .22), transparent 75%),
    linear-gradient(180deg, rgba(5, 5, 5, .72), rgba(5, 5, 5, .62) 45%, #050505);
}
/* Photos produits tres chargees : voile plus sombre derriere le titre. */
.wps--products .wps-hero::before { background: radial-gradient(closest-side at 50% 42%, rgba(5, 5, 5, .55), transparent 90%), linear-gradient(180deg, rgba(5, 5, 5, .82), rgba(5, 5, 5, .78) 50%, #050505); }
.wps-hero__inner { max-width: 1000px; }
.wps-hero__title {
  margin: 0;
  color: #fff;
  font-family: var(--wps-title);
  font-size: clamp(56px, 10vw, 150px);
  font-weight: 600;
  line-height: .92;
  text-transform: uppercase;
  text-wrap: balance;
}
.wps-hero__title span { display: block; color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, .9); }
.wps-hero .wps-lead { margin: 30px auto 0; font-size: clamp(16px, 1.6vw, 20px); color: rgba(255, 255, 255, .78); }
.wps-hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 38px; }
.wps-scroll { position: absolute; bottom: 26px; left: 50%; width: 1px; height: 46px; background: linear-gradient(var(--wps-accent), transparent); animation: wpsScroll 2.2s ease-in-out infinite; }

/* Hero de l'accueil Studio en diaporama : une photo par univers, fondu enchaine et leger zoom.
   Barre du bas facon Vans : points de 6px, le point actif s'allonge et se remplit d'orange pendant
   que la photo s'affiche (--wps-slide) ; la fin du remplissage passe a la suivante (studio.js).
   Bouton pause a droite des points (mouvement automatique de plus de 5 s : il faut pouvoir l'arreter ;
   le coin bas droit est pris par le bouton du chatbot). */
.wps-hero--slider { --wps-slide: 4.5s; }
.wps-hero--slider .wps-hero__media { display: block; overflow: hidden; }
.wps-hero--slider .wps-hero__media img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity .9s ease, transform 6s linear;
}
.wps-hero--slider .wps-hero__media img.is-on { opacity: 1; transform: scale(1); }
.wps-dots { position: absolute; left: 50%; bottom: 22px; display: flex; align-items: center; gap: 2px; transform: translateX(-50%); }
.wps .wps-dot { display: block; padding: 10px 3px; border: 0; background: none; cursor: pointer; }
.wps-dot > span {
  position: relative;
  display: block;
  width: 6px;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .6);
  transition: width .4s cubic-bezier(.16, 1, .3, 1), background-color .3s;
}
.wps-dot:hover > span { background: #fff; }
.wps-dot.is-on > span { width: 40px; background: rgba(255, 255, 255, .3); }
.wps-dot i { position: absolute; top: 0; left: 0; width: 0; height: 100%; border-radius: inherit; background: var(--wps-accent); }
.wps-dot.is-on i { animation: wpsFill var(--wps-slide) linear forwards; }
.wps-hero.is-paused .wps-dot i { animation-play-state: paused; }
.wps-dot:focus-visible, .wps-pause:focus-visible { outline: 2px solid var(--wps-accent); outline-offset: 2px; }
.wps .wps-pause {
  position: relative;
  flex: none;
  width: 26px;
  height: 26px;
  margin-left: 10px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: border-color .2s;
}
.wps .wps-pause:hover { border-color: #fff; }
/* Icone : deux barres (pause), triangle (lecture) */
.wps-pause::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 9px;
  transform: translate(-50%, -50%);
  border-left: 2px solid #fff;
  border-right: 2px solid #fff;
  box-sizing: border-box;
}
.wps-hero.is-paused .wps-pause::before {
  width: 0;
  height: 0;
  margin-left: 1px;
  border-style: solid;
  border-width: 4px 0 4px 7px;
  border-color: transparent transparent transparent #fff;
}
@keyframes wpsFill { to { width: 100%; } }

/* Cartes des trois univers */
.wps-worlds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 56px; }
.wps-world {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 640px;
  overflow: hidden;
  border: 1px solid var(--wps-line);
  border-radius: 22px;
  background: #0b0b0b;
  color: #fff;
  isolation: isolate;
}
.wps-world__img { position: absolute; inset: 0; z-index: -2; }
.wps-world__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); }
.wps-world::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5, 5, 5, .15) 0%, rgba(5, 5, 5, .55) 38%, rgba(5, 5, 5, .96) 70%); }
.wps-world:hover .wps-world__img img { transform: scale(1.06); }
.wps-world__body { display: flex; flex: 1; flex-direction: column; justify-content: flex-end; padding: 32px 28px 30px; }
.wps-world__num { position: absolute; top: 24px; left: 28px; color: var(--wps-accent); font-family: var(--wps-title); font-size: 15px; letter-spacing: .14em; }
.wps-world__kicker { margin: 0 0 8px; color: var(--wps-accent); font-size: 12px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; }
.wps-world__name { margin: 0; font-family: var(--wps-title); font-size: clamp(32px, 3vw, 44px); font-weight: 600; line-height: 1; text-transform: uppercase; }
.wps-world__text { margin: 14px 0 0; color: rgba(255, 255, 255, .74); font-size: 15px; line-height: 1.6; }
.wps-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 0; padding: 0; list-style: none; }
.wps-tags li { padding: 5px 11px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 100px; color: rgba(255, 255, 255, .78); font-size: 12px; }
.wps-facts { margin: 18px 0 0; padding: 0; list-style: none; }
.wps-facts li { position: relative; padding-left: 18px; color: rgba(255, 255, 255, .7); font-size: 13px; line-height: 1.7; }
.wps-facts li::before { content: ''; position: absolute; top: .72em; left: 0; width: 8px; height: 2px; background: var(--wps-accent); }
/* Pied de carte identique sur les trois : prix (ou espace vide), puis bouton en bas */
.wps-world__foot { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 14px; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12); }
.wps-price { color: rgba(255, 255, 255, .62); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.wps-price strong { display: block; text-transform: none; color: #fff; font-family: var(--wps-title); font-size: 22px; font-weight: 500; letter-spacing: .02em; }
.wps-world .wps-btn.wps-btn:link, .wps-world .wps-btn.wps-btn:visited { padding: 13px 20px; font-size: 12px; }

/*
 * Trois cartes cote a cote : une grille de lignes commune (subgrid). Surtitre, nom, texte,
 * publics, points forts et pied commencent a la meme hauteur dans les trois cartes, quelle que
 * soit la longueur des textes ; la premiere ligne (140 px) laisse voir le numero et la photo. Boutons de
 * meme largeur. Sans subgrid (anciens navigateurs), les cartes restent alignees par le bas.
 */
@media (min-width: 1101px) {
  @supports (grid-template-rows: subgrid) {
    .wps-worlds { grid-template-rows: 140px repeat(6, auto); row-gap: 0; }
    .wps-world { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 0; min-height: 0; }
    .wps-world__body { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); justify-content: normal; row-gap: 0; }
    .wps-world__kicker { grid-row: 2; align-self: end; }
    .wps-world__name { grid-row: 3; }
    .wps-world__text { grid-row: 4; }
    .wps-world .wps-tags { grid-row: 5; align-content: flex-start; }
    .wps-world .wps-facts { grid-row: 6; }
    .wps-world__foot { grid-row: 7; align-items: stretch; }
    .wps-world .wps-btn.wps-btn:link, .wps-world .wps-btn.wps-btn:visited { justify-content: center; width: 100%; text-align: center; }
  }
}

/* Etapes */
.wps-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 52px 0 0; padding: 0; list-style: none; counter-reset: wps; }
.wps-step { padding: 28px 24px; border: 1px solid var(--wps-line); border-radius: 18px; background: var(--wps-card); }
.wps-step__num { display: block; margin-bottom: 14px; color: var(--wps-accent); font-family: var(--wps-title); font-size: 15px; letter-spacing: .14em; }
.wps-step__icon { width: 64px; height: 64px; margin-bottom: 18px; }
.wps-step strong { display: block; color: #fff; font-family: var(--wps-title); font-size: 20px; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; }
.wps-step p { margin: 10px 0 0; color: var(--wps-muted); font-size: 14px; line-height: 1.6; }

/* Logos clients */
.wps-marquee { position: relative; overflow: hidden; margin-top: 40px; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.wps-marquee__track { display: flex; gap: 72px; width: max-content; animation: wpsMarquee 32s linear infinite; }
.wps-marquee__track img { height: 42px; width: auto; opacity: .7; filter: brightness(0) invert(1); }

/* Produits (landing Produits personnalises) */
.wps-product { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; padding: 48px 0; border-top: 1px solid var(--wps-line); }
.wps-product:nth-child(even) { grid-template-columns: .85fr 1.15fr; }
.wps-product:nth-child(even) .wps-rail { order: 2; }
.wps-product__name { margin: 0; font-family: var(--wps-title); font-size: clamp(30px, 3.4vw, 46px); font-weight: 600; text-transform: uppercase; }
.wps-product__text { margin: 14px 0 0; color: var(--wps-muted); font-size: 16px; line-height: 1.65; }
.wps-product__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.wps-product__cta .wps-btn.wps-btn:link, .wps-product__cta .wps-btn.wps-btn:visited { padding: 13px 22px; font-size: 12px; }
.wps-rail { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent; }
.wps-rail img { flex: 0 0 auto; height: clamp(260px, 30vw, 380px); width: auto; border-radius: 16px; scroll-snap-align: start; background: #111; }
.wps-rail--work img { height: clamp(220px, 26vw, 340px); }

/* Formulaire */
.wps-form-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; }
.wps-offices { margin-top: 36px; color: var(--wps-muted); font-size: 14px; line-height: 1.7; }
.wps-offices strong { display: block; margin-top: 16px; color: #fff; font-family: var(--wps-title); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.wps-form { padding: 32px; border: 1px solid var(--wps-line); border-radius: 22px; background: rgba(12, 12, 12, .9); }
.wps-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wps-fields .wps-full { grid-column: 1 / -1; }
.wps input, .wps select, .wps textarea {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  color: #fff;
  background: rgba(255, 255, 255, .05);
  font-family: var(--wps-body);
  font-size: 14px;
  outline: none;
  transition: border-color .2s;
}
.wps select { color: rgba(255, 255, 255, .8); }
.wps select option { color: #111; }
.wps textarea { min-height: 130px; resize: vertical; }
.wps input:focus, .wps select:focus, .wps textarea:focus { border-color: var(--wps-accent); }
.wps input::placeholder, .wps textarea::placeholder { color: rgba(255, 255, 255, .42); }
.wps-captcha { min-height: 78px; margin-top: 14px; }
.wps-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 18px; }
.wps-status { display: none; margin: 14px 0 0; font-size: 14px; line-height: 1.5; }
.wps-status.is-ok { display: block; color: #7fe27a; }
.wps-status.is-error { display: block; color: #ff8a6a; }

/* Fin de page */
.wps-end { padding: clamp(72px, 10vw, 120px) 20px; text-align: center; background: radial-gradient(closest-side at 50% 100%, rgba(241, 90, 41, .2), transparent 80%); }
.wps-end .wps-btn { margin-top: 32px; }

/* Apparition au scroll (seulement si le JS tourne) */
.wps-js [data-wps-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1); }
.wps-js [data-wps-reveal].is-in { opacity: 1; transform: none; }

@keyframes wpsMarquee { to { transform: translateX(-50%); } }
@keyframes wpsScroll { 0%, 100% { opacity: .2; transform: scaleY(.6); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  .wps-marquee__track, .wps-scroll { animation: none; }
  .wps-hero--slider .wps-hero__media img, .wps-hero--slider .wps-hero__media img.is-on { transform: none; }
  /* fondu garde (reglage « reduire les animations » souvent coupe sous Windows), sans glissement */
  .wps-js [data-wps-reveal] { transform: none; transition: opacity .8s ease; }
}

@media (max-width: 1100px) {
  .wps-worlds { grid-template-columns: 1fr; }
  .wps-world { min-height: 540px; }
}
@media (max-width: 900px) {
  .wps-product, .wps-product:nth-child(even) { grid-template-columns: 1fr; gap: 24px; }
  .wps-product:nth-child(even) .wps-rail { order: 0; }
  .wps-form-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 575px) {
  .wps-wrap { padding: 0 18px; }
  .wps-fields { grid-template-columns: 1fr; }
  .wps-form { padding: 22px 18px; }
  .wps-hero__cta { flex-direction: column; align-items: stretch; }
  .wps-world__body { padding: 26px 20px 22px; }
  .wps-hero__title span { -webkit-text-stroke-width: 1.5px; }
}

/* Formulaire de devis : ancre des boutons « Demander un devis », sous l'en-tete fixe du site. */
#wps-contact { scroll-margin-top: 110px; }