/* custom/css/pages/metier.css */
@layer site.sur-mesure {
/* Page métier (/photographes, /musiciens, /comediens) : feuille de la page (les règles communes aux landings sont dans components/site/landings.css). */

/* custom/css/components/site/landings.css */
/**
 * Landings (.pfcustom-landing) — home, agency, portfolios.
 * Typographie : main.css (variables portfolio via root.css).
 */

/* custom/css/components/site/accroches.css */
/**
 * Sections d'accroche des landings (partials/accroches/*.php).
 * Style du site : fond sombre, verre, bord lumineux, accent lavande, grain.
 */
.pfcustom-landing .pfcustom-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pfcustom-landing .pfcustom-acc__head { margin-inline: auto; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.pfcustom-landing .pfcustom-acc__kicker {
  margin: 0 0 0.75rem;
  color: var(--pfcustom-accent);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.pfcustom-landing .pfcustom-acc__title {
  margin: 0;
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
}
.pfcustom-landing .pfcustom-acc__lede { margin: 1rem auto 0; max-width: 42rem; text-wrap: pretty; }
.pfcustom-landing .pfcustom-acc__note { margin: 2rem auto 0; font-size: 0.85rem; }
.pfcustom-landing .pfcustom-acc ul, .pfcustom-landing .pfcustom-acc ol { list-style: none; padding: 0; margin-block: 0; }

/* Surface verre partagée */
.pfcustom-landing .pfcustom-acc-path,
.pfcustom-landing .pfcustom-acc-card,
.pfcustom-landing .pfcustom-acc-window,
.pfcustom-landing .pfcustom-acc-process__step,
.pfcustom-landing .pfcustom-acc-compare {
  background: var(--pfcustom-glass-pane-fill, var(--pfcustom-card-bg));
  border: var(--pfcustom-glass-border-soft, 1px solid rgb(255 255 255 / 0.08));
  border-radius: var(--pfcustom-radius-card);
  box-shadow: var(--pfcustom-glass-shadow-sm);
  backdrop-filter: var(--pfcustom-glass-blur-filter);
}

/* --- Je suis… --- */
.pfcustom-landing .pfcustom-acc-path {
  position: relative;
  display: flex;
  min-height: 26rem;
  overflow: hidden;
  color: var(--pfcustom-text);
  text-decoration: none;
  isolation: isolate;
  transition: border-color 0.4s ease;
}
.pfcustom-landing .pfcustom-acc-path__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.6) brightness(0.55);
  transition: transform 0.8s ease, filter 0.6s ease;
}
.pfcustom-landing .pfcustom-acc-path::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgb(0 0 0 / 0.92) 10%, rgb(0 0 0 / 0.1) 70%);
}
.pfcustom-landing .pfcustom-acc-path__body {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.6rem;
  padding: 1.75rem;
}
.pfcustom-landing .pfcustom-acc-path__label { color: var(--pfcustom-accent); font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; }
.pfcustom-landing .pfcustom-acc-path__title { margin: 0; font-size: 1.25rem; font-weight: 600; line-height: 1.2; }
.pfcustom-landing .pfcustom-acc-path__text { margin: 0; color: var(--pfcustom-text-muted); }
.pfcustom-landing .pfcustom-acc-path__actions { display: flex; flex-wrap: wrap; gap: var(--pfcustom-space-cta-gap, 1rem); margin-top: 0.5rem; }
.pfcustom-landing .pfcustom-acc-path:hover,
.pfcustom-landing .pfcustom-acc-path:focus-within {
  border: var(--pfcustom-glass-border-luminous, 1px solid var(--pfcustom-accent));
}
.pfcustom-landing .pfcustom-acc-path:hover .pfcustom-acc-path__img,
.pfcustom-landing .pfcustom-acc-path:focus-within .pfcustom-acc-path__img {
  transform: scale(1.06);
  filter: saturate(1) brightness(0.7);
}

/* --- Bandeau de métiers --- */
.pfcustom-landing .pfcustom-acc-trades {
  display: flex;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.pfcustom-landing .pfcustom-acc-trades__list {
  display: flex;
  flex-shrink: 0;
  gap: 3rem;
  padding-right: 3rem;
  animation: pfcustom-acc-marquee 40s linear infinite;
}
.pfcustom-landing .pfcustom-acc-trades__list li {
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  line-height: 1.25;
  padding-block: 0.15em;
  font-weight: 500;
  white-space: nowrap;
  color: var(--pfcustom-text-muted);
  opacity: 0.55;
}
.pfcustom-landing .pfcustom-acc-trades__list li:nth-child(3n + 2) { color: var(--pfcustom-accent); opacity: 1; }
.pfcustom-landing .pfcustom-acc-trades:hover .pfcustom-acc-trades__list { animation-play-state: paused; }
@keyframes pfcustom-acc-marquee { to { transform: translateX(-100%); } }

/* --- Mur de démos --- */
.pfcustom-landing .pfcustom-acc-wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1.5rem;
  perspective: 1600px;
}
.pfcustom-landing .pfcustom-acc-window {
  position: relative;
  overflow: hidden;
  transform: rotateX(4deg);
  transform-origin: center bottom;
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}
.pfcustom-landing .pfcustom-acc-window:nth-child(even) { transform: rotateX(4deg) translateY(1.5rem); }
.pfcustom-landing .pfcustom-acc-window:hover { transform: none; box-shadow: var(--pfcustom-glass-shadow-cta); }
.pfcustom-landing .pfcustom-acc-window__bar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.06);
}
.pfcustom-landing .pfcustom-acc-window__bar span { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: rgb(255 255 255 / 0.18); }
.pfcustom-landing .pfcustom-acc-window__bar em { margin-left: 0.6rem; font-size: 0.72rem; font-style: normal; color: var(--pfcustom-text-muted); }
.pfcustom-landing .pfcustom-acc-window__page { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.pfcustom-landing .pfcustom-acc-window__page img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; }
.pfcustom-landing .pfcustom-acc-window:hover .pfcustom-acc-window__page img { transform: scale(1.04); }
.pfcustom-landing .pfcustom-acc-window__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.25rem;
  background: linear-gradient(to top, rgb(0 0 0 / 0.85), transparent 65%);
}
.pfcustom-landing .pfcustom-acc-window__name { margin: 0; font-size: 1.25rem; font-weight: 500; }
.pfcustom-landing .pfcustom-acc-window__trade { margin: 0.15rem 0 0.75rem; color: var(--pfcustom-text-muted); font-size: 0.85rem; }
.pfcustom-landing .pfcustom-acc-window__nav { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pfcustom-landing .pfcustom-acc-window__nav li {
  padding: 0.2rem 0.6rem;
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: var(--pfcustom-radius-pill);
  font-size: 0.7rem;
}
.pfcustom-landing .pfcustom-acc-window__badge {
  margin: 0 0 0 auto;
  padding: 0.2rem 0.6rem;
  border-radius: var(--pfcustom-radius-pill);
  background: rgb(0 0 0 / 0.6);
  font-size: 0.68rem;
  color: var(--pfcustom-text-muted);
}
/* Chaque démo évoque un thème différent */
.pfcustom-landing .pfcustom-acc-window[data-theme="clair"] .pfcustom-acc-window__overlay { background: linear-gradient(to top, rgb(52 34 20 / 0.92), rgb(52 34 20 / 0.35) 55%, transparent 80%); }
.pfcustom-landing .pfcustom-acc-window[data-theme="clair"] .pfcustom-acc-window__name { color: #f3e3cf; font-style: italic; }
.pfcustom-landing .pfcustom-acc-window[data-theme="lavande"] .pfcustom-acc-window__overlay { background: linear-gradient(to top, rgb(40 30 90 / 0.9), transparent 65%); }
.pfcustom-landing .pfcustom-acc-window[data-theme="lavande"] .pfcustom-acc-window__name { color: var(--pfcustom-accent); }
.pfcustom-landing .pfcustom-acc-window[data-theme="editorial"] .pfcustom-acc-window__name { font-size: 1.6rem; font-weight: 300; letter-spacing: -0.02em; text-transform: uppercase; }

/* --- Cartes --- */
.pfcustom-landing .pfcustom-acc-cards { gap: 1.25rem; }
.pfcustom-landing .pfcustom-acc-card { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.75rem; transition: border-color 0.3s ease; }
.pfcustom-landing .pfcustom-acc-card:hover { border: var(--pfcustom-glass-border-luminous, 1px solid var(--pfcustom-accent)); }
.pfcustom-landing .pfcustom-acc-card__big {
  margin: 0;
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 500;
  line-height: 1;
  background: linear-gradient(120deg, var(--pfcustom-text), var(--pfcustom-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pfcustom-landing .pfcustom-acc-card__before {
  margin: 0;
  color: var(--pfcustom-text-muted);
  text-decoration: line-through;
  text-decoration-color: var(--pfcustom-accent);
  font-size: 0.9rem;
}
.pfcustom-landing .pfcustom-acc-card__title { margin: 0; font-size: 1.15rem; }
.pfcustom-landing .pfcustom-acc-card__text { margin: 0; }
.pfcustom-landing .pfcustom-acc-card__tags { margin-top: auto; padding-top: 0.5rem; gap: 0.4rem; }
.pfcustom-landing .pfcustom-acc-card__tags li {
  padding: 0.2rem 0.65rem;
  border-radius: var(--pfcustom-radius-pill);
  background: rgb(151 152 255 / 0.12);
  color: var(--pfcustom-accent);
  font-size: 0.75rem;
}

/* --- Comparatif --- */
.pfcustom-landing .pfcustom-acc-compare { margin-inline: auto; padding: 0.5rem 1.5rem; overflow-x: auto; }
.pfcustom-landing .pfcustom-acc-compare table { width: 100%; border-collapse: collapse; }
.pfcustom-landing .pfcustom-acc-compare th, .pfcustom-landing .pfcustom-acc-compare td { padding: 1rem 0.75rem; text-align: left; vertical-align: top; }
.pfcustom-landing .pfcustom-acc-compare thead th { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pfcustom-text-muted); }
.pfcustom-landing .pfcustom-acc-compare thead th:nth-child(2) { color: var(--pfcustom-accent); }
.pfcustom-landing .pfcustom-acc-compare tbody tr + tr > * { border-top: 1px solid rgb(255 255 255 / 0.06); }
.pfcustom-landing .pfcustom-acc-compare tbody th { font-weight: 500; }
.pfcustom-landing .pfcustom-acc-compare .is-yes span { color: var(--pfcustom-accent); }
.pfcustom-landing .pfcustom-acc-compare .is-no { color: var(--pfcustom-text-muted); }

/* --- Processus --- */
.pfcustom-landing .pfcustom-acc-process {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1.25rem;
  counter-reset: none;
}
.pfcustom-landing .pfcustom-acc-process__step { position: relative; padding: 1.75rem; }
.pfcustom-landing .pfcustom-acc-process__step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1.75rem;
  right: 1.75rem;
  height: 2px;
  background: linear-gradient(to right, var(--pfcustom-accent), transparent);
}
.pfcustom-landing .pfcustom-acc-process__when { margin: 0 0 0.75rem; color: var(--pfcustom-accent); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; }
.pfcustom-landing .pfcustom-acc-process__title { display: flex; gap: 0.6rem; align-items: baseline; margin: 0 0 0.5rem; font-size: 1.15rem; }
.pfcustom-landing .pfcustom-acc-process__num { color: var(--pfcustom-text-muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.pfcustom-landing .pfcustom-acc-process__step p:last-child { margin: 0; }

/* --- Manifeste --- */
.pfcustom-landing .pfcustom-acc--manifesto {
  display: grid;
  place-items: center;
  min-height: 70vh;
  padding-block: 6rem;
  isolation: isolate;
}
.pfcustom-landing .pfcustom-acc-manifesto__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(var(--pfcustom-blur-hero-bg, 18px)) brightness(0.35) saturate(0.7);
  transform: scale(1.1);
}
.pfcustom-landing .pfcustom-acc--manifesto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at center, transparent 20%, var(--pfcustom-bg) 85%);
}
.pfcustom-landing .pfcustom-acc-manifesto__inner { margin-inline: auto; }
.pfcustom-landing .pfcustom-acc-manifesto__quote {
  margin: 0 0 1.5rem;
  font-size: clamp(1.7rem, 4.2vw, 3.2rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* --- CTA final --- */
.pfcustom-landing .pfcustom-acc--final {
  display: grid;
  place-items: center;
  min-height: 60vh;
  padding-block: 6rem;
  isolation: isolate;
}
.pfcustom-landing .pfcustom-acc-final__aurora {
  position: absolute;
  inset: -20%;
  z-index: -1;
  background:
    radial-gradient(40% 50% at 30% 40%, rgb(151 152 255 / 0.35), transparent 70%),
    radial-gradient(35% 45% at 70% 60%, rgb(188 19 254 / 0.22), transparent 70%);
  filter: blur(40px);
  animation: pfcustom-acc-aurora 18s ease-in-out infinite alternate;
}
@keyframes pfcustom-acc-aurora {
  to { transform: translate3d(4%, -3%, 0) rotate(8deg) scale(1.08); }
}
.pfcustom-landing .pfcustom-acc-final__inner { margin-inline: auto; }
.pfcustom-landing .pfcustom-acc-final__title { margin: 0; font-size: clamp(1.8rem, 4.5vw, 3.4rem); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
.pfcustom-landing .pfcustom-acc-final__ctas { justify-content: center; margin-top: 2rem; gap: var(--pfcustom-space-cta-gap, 1rem); }
.pfcustom-landing .pfcustom-acc-final__reassure { margin-top: 1.25rem; font-size: 0.85rem; }

@media (max-width: 640px) {
  .pfcustom-landing .pfcustom-acc-window,
  .pfcustom-landing .pfcustom-acc-window:nth-child(even) { transform: none; }
  .pfcustom-landing .pfcustom-acc-path { min-height: 20rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pfcustom-landing .pfcustom-acc-trades__list,
  .pfcustom-landing .pfcustom-acc-final__aurora { animation: none; }
  .pfcustom-landing .pfcustom-acc-trades { flex-wrap: wrap; }
  .pfcustom-landing .pfcustom-acc-trades__list[aria-hidden="true"] { display: none; }
  .pfcustom-landing .pfcustom-acc-path,
  .pfcustom-landing .pfcustom-acc-path__img,
  .pfcustom-landing .pfcustom-acc-window,
  .pfcustom-landing .pfcustom-acc-window__page img { transition: none; }
}

/* Pictogramme des cartes (cartes « Ce qui vous attend ») */
.pfcustom-landing .pfcustom-acc-card__icon {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.75rem;
  border-radius: var(--pfcustom-radius-tile, 0.9rem);
  background: radial-gradient(circle at 30% 25%, rgb(151 152 255 / 0.28), rgb(151 152 255 / 0.06) 70%);
  border: 1px solid rgb(151 152 255 / 0.25);
  color: var(--pfcustom-accent);
  transition: transform 0.4s ease;
}
.pfcustom-landing .pfcustom-acc-card:hover .pfcustom-acc-card__icon { transform: translateY(-2px) rotate(-4deg); }
.pfcustom-landing .pfcustom-acc-card { position: relative; overflow: hidden; }
.pfcustom-landing .pfcustom-acc-card:has(.pfcustom-acc-card__icon)::after {
  content: "";
  position: absolute;
  inset: auto -30% -60% auto;
  width: 70%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgb(151 152 255 / 0.10), transparent 70%);
  pointer-events: none;
}

/* --- Hero fixe (partials/accroches/hero.php) --- */
.pfcustom-landing .pfcustom-acc-hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: min(100svh, 60rem);
  padding-block: clamp(7rem, 12vh, 9rem) clamp(4rem, 8vh, 6rem);
  overflow: hidden;
  isolation: isolate;
  background: var(--pfcustom-bg);
}
.pfcustom-landing .pfcustom-acc-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.32) saturate(0.75);
}
.pfcustom-landing .pfcustom-acc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgb(0 0 0 / 0.9) 0%, rgb(0 0 0 / 0.55) 45%, rgb(0 0 0 / 0.2) 100%),
    linear-gradient(to top, var(--pfcustom-bg) 0%, transparent 30%);
}
.pfcustom-landing .pfcustom-acc-hero__glow {
  position: absolute;
  z-index: -1;
  right: -10%;
  top: 10%;
  width: 60vw;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgb(151 152 255 / 0.22), rgb(188 19 254 / 0.08) 40%, transparent 70%);
  filter: blur(30px);
  pointer-events: none;
}
.pfcustom-landing .pfcustom-acc-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  margin-inline: auto;
}
.pfcustom-landing .pfcustom-acc-hero__title {
  margin: 0;
  font-size: clamp(2.1rem, 4.6vw, 3.9rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
  background: linear-gradient(115deg, var(--pfcustom-text) 55%, var(--pfcustom-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pfcustom-landing .pfcustom-acc-hero__intro {
  margin: 1.5rem 0 0;
  max-width: 34rem;
  color: var(--pfcustom-text-muted);
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  line-height: 1.65;
  text-wrap: pretty;
}
.pfcustom-landing .pfcustom-acc-hero__ctas { margin-top: 2rem; gap: var(--pfcustom-space-cta-gap, 0.75rem); }
.pfcustom-landing .pfcustom-acc-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  padding-top: 1.75rem;
  color: var(--pfcustom-text-muted);
  font-size: 0.8rem;
}
.pfcustom-landing .pfcustom-acc-hero__chips span { color: var(--pfcustom-accent); }

.pfcustom-landing .pfcustom-acc-hero__visual {
  position: relative;
  padding: 0 0 3rem 0;
}
.pfcustom-landing .pfcustom-acc-hero__window {
  overflow: hidden;
  border: var(--pfcustom-glass-border-luminous, 1px solid rgb(255 255 255 / 0.12));
  border-radius: var(--pfcustom-radius-card);
  background: rgb(18 18 18 / 0.85);
  box-shadow: 0 40px 80px -20px rgb(0 0 0 / 0.8), 0 0 0 1px rgb(151 152 255 / 0.08), 0 0 60px -10px rgb(151 152 255 / 0.25);
  transform: perspective(1800px) rotateY(-8deg) rotateX(3deg);
  transform-origin: left center;
}
.pfcustom-landing .pfcustom-acc-hero__window img { display: block; width: 100%; height: auto; }
.pfcustom-landing .pfcustom-acc-hero__phone {
  position: absolute;
  left: -6%;
  bottom: 0;
  width: 26%;
  overflow: hidden;
  border: 6px solid #1b1b1f;
  border-radius: 1.6rem;
  box-shadow: 0 30px 60px -10px rgb(0 0 0 / 0.85), 0 0 0 1px rgb(255 255 255 / 0.1);
}
.pfcustom-landing .pfcustom-acc-hero__phone img { display: block; width: 100%; height: auto; }

@media (max-width: 900px) {
  .pfcustom-landing .pfcustom-acc-hero { min-height: 0; }
  .pfcustom-landing .pfcustom-acc-hero__inner { grid-template-columns: 1fr; }
  .pfcustom-landing .pfcustom-acc-hero::before { background: linear-gradient(to bottom, rgb(0 0 0 / 0.75), rgb(0 0 0 / 0.6) 50%, var(--pfcustom-bg)); }
  .pfcustom-landing .pfcustom-acc-hero__window { transform: none; }
  .pfcustom-landing .pfcustom-acc-hero__phone { left: auto; right: 4%; width: 30%; }
}

/* Hero sans capture : une colonne centrée */
.pfcustom-landing .pfcustom-acc-hero__inner { grid-template-columns: minmax(0, 46rem); justify-content: center; text-align: center; }
.pfcustom-landing .pfcustom-acc-hero__intro { margin-inline: auto; }
.pfcustom-landing .pfcustom-acc-hero__ctas,
.pfcustom-landing .pfcustom-acc-hero__chips { justify-content: center; }
.pfcustom-landing .pfcustom-acc-hero::before {
  background:
    radial-gradient(ellipse at center, rgb(0 0 0 / 0.45), rgb(0 0 0 / 0.8) 75%),
    linear-gradient(to top, var(--pfcustom-bg) 0%, transparent 35%);
}
.pfcustom-landing .pfcustom-acc-hero__glow { right: auto; left: 50%; top: 50%; translate: -50% -50%; width: 70vw; }
.pfcustom-landing .pfcustom-acc-hero__title { background: linear-gradient(115deg, var(--pfcustom-text) 45%, var(--pfcustom-accent)); -webkit-background-clip: text; background-clip: text; }
.pfcustom-landing .pfcustom-acc ul.pfcustom-acc-hero__chips { margin-top: 1.75rem; padding-top: 0; }

/* Hero : photo plus présente (voile allégé, texte lisible par un halo central) */
.pfcustom-landing .pfcustom-acc-hero__bg { filter: brightness(0.62) saturate(0.95); }
.pfcustom-landing .pfcustom-acc-hero::before {
  background:
    radial-gradient(ellipse 55% 50% at center, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0.15) 70%, transparent),
    linear-gradient(to top, var(--pfcustom-bg) 0%, transparent 28%);
}
.pfcustom-landing .pfcustom-acc-hero__glow { opacity: 0.5; }
.pfcustom-landing .pfcustom-acc-hero__intro { color: rgb(255 255 255 / 0.82); text-shadow: 0 1px 12px rgb(0 0 0 / 0.6); }
.pfcustom-landing .pfcustom-acc-hero__title,
.pfcustom-landing .pfcustom-acc-hero__chips { filter: drop-shadow(0 2px 14px rgb(0 0 0 / 0.55)); }
.pfcustom-landing .pfcustom-acc__more { margin: 2rem 0 0; }

/* --- « Votre nom ici » --- */
.pfcustom-landing .pfcustom-acc-try {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  margin-inline: auto;
}
.pfcustom-landing .pfcustom-acc-try__form {
  display: grid;
  gap: 1.1rem;
  padding: 1.75rem;
  background: var(--pfcustom-glass-pane-fill, var(--pfcustom-card-bg));
  border: var(--pfcustom-glass-border-soft, 1px solid rgb(255 255 255 / 0.08));
  border-radius: var(--pfcustom-radius-card);
}
.pfcustom-landing .pfcustom-acc-try__field { display: grid; gap: 0.45rem; font-size: 0.85rem; color: var(--pfcustom-text-muted); }
.pfcustom-landing .pfcustom-acc-try__field :is(input, select) {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: var(--pfcustom-radius-input, 0.75rem);
  background: rgb(0 0 0 / 0.45);
  color: var(--pfcustom-text);
  font: inherit;
  font-size: 1rem;
}
.pfcustom-landing .pfcustom-acc-try__field :is(input, select):focus-visible {
  outline: 2px solid var(--pfcustom-accent);
  outline-offset: 2px;
}
.pfcustom-landing .pfcustom-acc-try__form .pfcustom-btn { justify-self: start; margin-top: 0.4rem; }
.pfcustom-landing .pfcustom-acc-try__note { margin: 0; font-size: 0.75rem; }
.pfcustom-landing .pfcustom-acc-try__preview .pfcustom-acc-window { transform: none; }
.pfcustom-landing .pfcustom-acc-try__page { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.pfcustom-landing .pfcustom-acc-try__page img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.pfcustom-landing .pfcustom-acc-try__hero {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 1.5rem;
  text-align: center;
  background: linear-gradient(to top, rgb(0 0 0 / 0.7), rgb(0 0 0 / 0.25));
}
.pfcustom-landing .pfcustom-acc-try__name {
  margin: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: clamp(1.6rem, 4vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-shadow: 0 2px 20px rgb(0 0 0 / 0.5);
}
.pfcustom-landing .pfcustom-acc-try__trade { margin: 0 0 0.6rem; color: rgb(255 255 255 / 0.85); }
.pfcustom-landing .pfcustom-acc-try__hero .pfcustom-acc-window__nav { justify-content: center; }
@media (max-width: 900px) {
  .pfcustom-landing .pfcustom-acc-try { grid-template-columns: 1fr; }
}

/* --- Bouton collant mobile (après le hero) --- */
.pfcustom-acc-sticky { display: none; }
@media (max-width: 640px) {
  .pfcustom-landing .pfcustom-acc-sticky {
    position: fixed;
    z-index: 50;
    left: 16px;
    right: 16px;
    bottom: max(16px, env(safe-area-inset-bottom));
    display: flex;
    justify-content: center;
    box-shadow: 0 12px 30px rgb(0 0 0 / 0.55);
  }
  .pfcustom-landing:has(.pfcustom-acc-sticky) { padding-bottom: 5rem; }
  @supports (animation-timeline: scroll()) {
    .pfcustom-landing .pfcustom-acc-sticky {
      animation: pfcustom-acc-sticky-in linear both;
      animation-timeline: scroll(root);
      animation-range: 60vh 80vh;
    }
  }
}
@keyframes pfcustom-acc-sticky-in {
  from { opacity: 0; transform: translateY(150%); pointer-events: none; }
  to { opacity: 1; transform: none; pointer-events: auto; }
}

/* --- Galerie des thèmes (/themes) --- */
.pfcustom-landing .pfcustom-acc-themes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem) 1.5rem;
  margin-inline: auto;
}
.pfcustom-landing .pfcustom-acc-theme--wide { grid-column: 1 / -1; }
.pfcustom-landing .pfcustom-acc-theme .pfcustom-acc-window { transform: none; }
.pfcustom-landing .pfcustom-acc-theme .pfcustom-acc-window img { display: block; width: 100%; height: auto; }
.pfcustom-landing .pfcustom-acc-theme--wide .pfcustom-acc-window { max-width: 60rem; margin-inline: auto; }
.pfcustom-landing .pfcustom-acc-theme__name { margin: 1rem 0 0.25rem; font-size: 1.1rem; }
.pfcustom-landing .pfcustom-acc-theme--wide :is(.pfcustom-acc-theme__name, .pfcustom-acc-theme__text) { text-align: center; }
.pfcustom-landing .pfcustom-acc-theme__text { margin: 0; }

/* --- Simulateur « Me surprendre » (/themes) --- */
.pfcustom-landing .pfcustom-acc-sim {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  margin-inline: auto;
}
.pfcustom-landing .pfcustom-acc-sim__panel {
  display: grid;
  gap: 1.5rem;
  padding: 1.5rem;
  background: var(--pfcustom-glass-sheen), var(--pfcustom-card-bg);
  border: var(--pfcustom-page-border, 1px solid rgb(255 255 255 / 0.06));
  border-radius: var(--pfcustom-radius-card);
}
.pfcustom-landing .pfcustom-acc-sim__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--pfcustom-border-separator-color); }
.pfcustom-landing .pfcustom-acc-sim__panel-title { margin: 0; font-weight: 600; font-size: 1.05rem; letter-spacing: 0.01em; }
.pfcustom-landing .pfcustom-acc-sim__more { border-top: 1px solid var(--pfcustom-border-separator-color); padding-top: 1.1rem; }
.pfcustom-landing .pfcustom-acc-sim__more summary { cursor: pointer; font-size: 0.85rem; color: var(--pfcustom-text-muted); list-style: none; }
.pfcustom-landing .pfcustom-acc-sim__more summary::-webkit-details-marker { display: none; }
.pfcustom-landing .pfcustom-acc-sim__more summary::after { content: "+"; float: right; font-size: 1.1rem; line-height: 1; }
.pfcustom-landing .pfcustom-acc-sim__more[open] summary::after { content: "\2212"; }
.pfcustom-landing .pfcustom-acc-sim__more-body { display: grid; gap: 1.5rem; margin-top: 1.25rem; }
.pfcustom-landing .pfcustom-acc-sim__group { margin: 0; padding: 0; border: 0; min-width: 0; }
.pfcustom-landing .pfcustom-acc-sim__group legend { margin-bottom: 0.65rem; padding: 0; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pfcustom-text-muted); }
.pfcustom-landing .pfcustom-acc-sim__chips { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
.pfcustom-landing .pfcustom-acc-sim__chip { position: relative; cursor: pointer; }
.pfcustom-landing .pfcustom-acc-sim__chip input { position: absolute; opacity: 0; pointer-events: none; }
.pfcustom-landing .pfcustom-acc-sim__chip span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.5rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid transparent;
  border-radius: 0.65rem;
  background: rgb(255 255 255 / 0.05);
  font-size: 0.82rem;
  line-height: 1.2;
  text-align: center;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.pfcustom-landing .pfcustom-acc-sim__chip:hover span { background: rgb(255 255 255 / 0.09); }
.pfcustom-landing .pfcustom-acc-sim__chip input:checked + span { background: rgb(255 255 255 / 0.12); border-color: var(--pfcustom-accent); }
.pfcustom-landing .pfcustom-acc-sim__chip input:focus-visible + span { outline: 2px solid var(--pfcustom-accent); outline-offset: 2px; }
.pfcustom-landing .pfcustom-acc-sim__dots { display: inline-flex; font-style: normal; }
.pfcustom-landing .pfcustom-acc-sim__dots b { width: 0.55rem; height: 0.55rem; border-radius: 50%; }
.pfcustom-landing .pfcustom-acc-sim__dots b + b { margin-left: 0.15rem; }
.pfcustom-landing .pfcustom-acc-sim__dots b[data-dot="sand-1"] { background: #c8a27a; }
.pfcustom-landing .pfcustom-acc-sim__dots b[data-dot="sand-2"] { background: #e9dcc6; }
.pfcustom-landing .pfcustom-acc-sim__dots b[data-dot="ocean-1"] { background: #1f6f8b; }
.pfcustom-landing .pfcustom-acc-sim__dots b[data-dot="ocean-2"] { background: #7fc8d8; }
.pfcustom-landing .pfcustom-acc-sim__dots b[data-dot="forest-1"] { background: #2f5d3a; }
.pfcustom-landing .pfcustom-acc-sim__dots b[data-dot="forest-2"] { background: #9cbf8a; }
.pfcustom-landing .pfcustom-acc-sim__dots b[data-dot="lavender-1"] { background: #6f63c9; }
.pfcustom-landing .pfcustom-acc-sim__dots b[data-dot="lavender-2"] { background: #c9c2f2; }
.pfcustom-landing .pfcustom-acc-sim__dots b[data-dot="vivid-1"] { background: #ff5a36; }
.pfcustom-landing .pfcustom-acc-sim__dots b[data-dot="vivid-2"] { background: #ffc928; }
.pfcustom-landing .pfcustom-acc-sim__dots b[data-dot="night-1"] { background: #1b2240; }
.pfcustom-landing .pfcustom-acc-sim__dots b[data-dot="night-2"] { background: #5b6aa8; }
.pfcustom-landing .pfcustom-acc-sim__go { flex: none; }
.pfcustom-landing .pfcustom-acc-sim__note { margin: 0; font-size: 0.72rem; }
.pfcustom-landing .pfcustom-acc-sim__cta { justify-content: center; margin-top: 1.5rem; margin-bottom: 2.5rem; }
.pfcustom-landing .pfcustom-acc-sim__preview { margin: 0; }
.pfcustom-landing .pfcustom-acc-sim__preview .pfcustom-acc-window { transform: none; }
.pfcustom-landing .pfcustom-acc-sim__caption { margin-top: 0.75rem; text-align: center; font-size: 0.85rem; color: var(--pfcustom-text-muted); }
@media (max-width: 900px) {
  .pfcustom-landing .pfcustom-acc-sim { grid-template-columns: 1fr; }
  .pfcustom-landing .pfcustom-acc-sim__preview { order: -1; }
}

/* Simulateur : cadre ordinateur (16:9) ou téléphone (9:16), bandeau « Aperçu ». */
.pfcustom-landing .pfcustom-acc-sim__screen {
  position: relative;
  overflow: hidden;
  margin-inline: auto;
  border: var(--pfcustom-glass-border-luminous, 1px solid rgb(255 255 255 / 0.14));
  border-radius: var(--pfcustom-radius-card);
  background: #111;
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.8);
}
.pfcustom-landing .pfcustom-acc-sim__preview[data-format="9"] .pfcustom-acc-sim__screen {
  width: min(100%, 20rem);
  border: 8px solid #1b1b1f;
  border-radius: 2rem;
}
.pfcustom-landing .pfcustom-acc-sim__ribbon {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  margin: 0;
  padding: 0.3rem 0.75rem;
  border-radius: var(--pfcustom-radius-pill);
  background: rgb(0 0 0 / 0.7);
  border: 1px solid rgb(255 255 255 / 0.2);
  color: #fff;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  pointer-events: none;
}

/* --- Mini générateur de thème : faux portfolio piloté par data-* (mode, palette, font, menu, hero, btn) ---
   Reprend la structure du vrai rendu : menu centré sans logo, nom en titre, sous-titre, texte, bouton, réseaux, section. */
.pfcustom-landing .pfcustom-acc-sim__screen { container-type: inline-size; aspect-ratio: 16 / 9; }
.pfcustom-landing .pfcustom-acc-sim__preview[data-format="9"] .pfcustom-acc-sim__screen { aspect-ratio: 9 / 16; }
.pfcustom-landing .pfcustom-acc-sim__preview { align-self: start; position: sticky; top: 5.5rem; }
.pfcustom-landing .pfcustom-acc-sim__screen > .pfcustom-acc-sim__ribbon { top: auto; bottom: 0.75rem; left: auto; right: 0.75rem; }

.pfcustom-landing .pfcustom-gen {
  --g-bg: #1f1a14; --g-surface: #2a231b; --g-fg: #f1e8d8; --g-muted: #b3a591; --g-accent: #d9a46b; --g-on: #1f1a14;
  --g-title: "Iowan Old Style", Palatino, Georgia, serif; --g-body: var(--pfcustom-font, "Poppins", system-ui, sans-serif);
  --g-tw: 600; --g-tcase: none; --g-tls: 0;
  --g-pad: 3em;
  position: relative; display: flex; flex-direction: column; width: 100%; height: 100%;
  font-size: 1.55cqw; line-height: 1.35;
  background: var(--g-bg); color: var(--g-fg); font-family: var(--g-body);
  transition: background 0.35s ease, color 0.35s ease;
}
.pfcustom-landing .pfcustom-acc-sim__preview[data-format="9"] .pfcustom-gen { font-size: 4.3cqw; --g-pad: 1.4em; }
.pfcustom-landing :is(.pfcustom-gen__title, .pfcustom-gen__sub, .pfcustom-gen__lede, .pfcustom-gen__h, .pfcustom-gen__items) { display: block; }

/* Palettes × ambiance */
.pfcustom-landing .pfcustom-gen[data-palette="sand"][data-mode="light"] { --g-bg: #f5efe4; --g-surface: #fffaf0; --g-fg: #2b2318; --g-muted: #6f6454; --g-accent: #b07b46; --g-on: #fff; }
.pfcustom-landing .pfcustom-gen[data-palette="sand"][data-mode="dark"] { --g-bg: #1f1a14; --g-surface: #2a231b; --g-fg: #f1e8d8; --g-muted: #b3a591; --g-accent: #d9a46b; --g-on: #1f1a14; }
.pfcustom-landing .pfcustom-gen[data-palette="ocean"][data-mode="light"] { --g-bg: #eef6f9; --g-surface: #fff; --g-fg: #0e2a36; --g-muted: #54707c; --g-accent: #1f6f8b; --g-on: #fff; }
.pfcustom-landing .pfcustom-gen[data-palette="ocean"][data-mode="dark"] { --g-bg: #0c1f29; --g-surface: #14303d; --g-fg: #e4f3f8; --g-muted: #8fb0bd; --g-accent: #7fc8d8; --g-on: #0c1f29; }
.pfcustom-landing .pfcustom-gen[data-palette="forest"][data-mode="light"] { --g-bg: #eff3ea; --g-surface: #fbfdf8; --g-fg: #1c2b1f; --g-muted: #5a6b5c; --g-accent: #2f5d3a; --g-on: #fff; }
.pfcustom-landing .pfcustom-gen[data-palette="forest"][data-mode="dark"] { --g-bg: #121d15; --g-surface: #1b2a1f; --g-fg: #e6efe2; --g-muted: #9db3a0; --g-accent: #9cbf8a; --g-on: #121d15; }
.pfcustom-landing .pfcustom-gen[data-palette="lavender"][data-mode="light"] { --g-bg: #f3f1fc; --g-surface: #fff; --g-fg: #221d3d; --g-muted: #6a6490; --g-accent: #6f63c9; --g-on: #fff; }
.pfcustom-landing .pfcustom-gen[data-palette="lavender"][data-mode="dark"] { --g-bg: #17142b; --g-surface: #221e3f; --g-fg: #ece9fb; --g-muted: #a39fcb; --g-accent: #b5adf2; --g-on: #17142b; }
.pfcustom-landing .pfcustom-gen[data-palette="vivid"][data-mode="light"] { --g-bg: #fff8ec; --g-surface: #fff; --g-fg: #1d1a14; --g-muted: #6b6252; --g-accent: #ff5a36; --g-on: #fff; }
.pfcustom-landing .pfcustom-gen[data-palette="vivid"][data-mode="dark"] { --g-bg: #151210; --g-surface: #231e1a; --g-fg: #fff3df; --g-muted: #b8ab96; --g-accent: #ffc928; --g-on: #151210; }
.pfcustom-landing .pfcustom-gen[data-palette="night"][data-mode="light"] { --g-bg: #e9ecf6; --g-surface: #fff; --g-fg: #131a33; --g-muted: #5b6488; --g-accent: #3a4a9a; --g-on: #fff; }
.pfcustom-landing .pfcustom-gen[data-palette="night"][data-mode="dark"] { --g-bg: #0d1226; --g-surface: #1b2240; --g-fg: #e6e9f7; --g-muted: #8e99c4; --g-accent: #7f90e0; --g-on: #0d1226; }

/* Typographies */
.pfcustom-landing .pfcustom-gen[data-font="modern"] { --g-title: var(--pfcustom-font, "Poppins", system-ui, sans-serif); --g-tw: 600; --g-tcase: none; --g-tls: -0.03em; }
.pfcustom-landing .pfcustom-gen[data-font="editorial"] { --g-title: "Iowan Old Style", Palatino, Georgia, serif; --g-body: Georgia, serif; --g-tw: 600; --g-tcase: none; --g-tls: -0.01em; }
.pfcustom-landing .pfcustom-gen[data-font="classic"] { --g-title: "Didot", "Bodoni 72", "Times New Roman", serif; --g-tw: 400; --g-tcase: uppercase; --g-tls: 0.06em; }
.pfcustom-landing .pfcustom-gen[data-font="mono"] { --g-title: ui-monospace, "SF Mono", Menlo, monospace; --g-body: ui-monospace, "SF Mono", Menlo, monospace; --g-tw: 600; --g-tcase: none; --g-tls: -0.04em; }
.pfcustom-landing .pfcustom-gen[data-font="bold"] { --g-title: "Helvetica Neue", Arial, sans-serif; --g-tw: 500; --g-tcase: uppercase; --g-tls: 0; }

/* Menu : centré, sans logo, sept entrées dont trois avec sous-menu */
.pfcustom-landing .pfcustom-gen__head { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 1.3em var(--g-pad); transition: all 0.35s ease; }
.pfcustom-landing .pfcustom-gen__nav { display: flex; gap: 1.8em; font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.14em; }
.pfcustom-landing .pfcustom-gen__nav > span { white-space: nowrap; padding-bottom: 0.25em; border-bottom: 0.1em solid transparent; }
.pfcustom-landing .pfcustom-gen__nav > .is-current { border-bottom-color: var(--g-accent); color: var(--g-muted); }
.pfcustom-landing .pfcustom-gen__nav > .has-sub::after { content: ""; display: inline-block; width: 0.4em; height: 0.4em; margin: 0 0 0.15em 0.5em; border: solid currentColor; border-width: 0 0.12em 0.12em 0; transform: rotate(45deg); }
.pfcustom-landing .pfcustom-gen__burger { display: none; align-items: center; gap: 0.7em; margin-left: auto; font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.1em; }
.pfcustom-landing .pfcustom-gen__burger-bars { display: block; width: 1.8em; }
.pfcustom-landing .pfcustom-gen__burger i { display: block; height: 0.12em; margin: 0.3em 0; background: currentColor; }
.pfcustom-landing .pfcustom-gen[data-menu="bar"] .pfcustom-gen__head { background: var(--g-surface); box-shadow: 0 0.1em 0 color-mix(in srgb, var(--g-fg) 14%, transparent); }
.pfcustom-landing .pfcustom-gen[data-menu="island"] .pfcustom-gen__head { margin: 1em calc(var(--g-pad) * 0.4) 0; padding: 0.9em 1.4em; border: 1px solid color-mix(in srgb, var(--g-fg) 18%, transparent); border-radius: 0.9em; background: var(--g-surface); box-shadow: 0 0.8em 1.8em -0.9em rgb(0 0 0 / 0.55); }
.pfcustom-landing .pfcustom-gen[data-menu="clear"] .pfcustom-gen__head { background: transparent; }
.pfcustom-landing .pfcustom-gen[data-menu="clear"] .pfcustom-gen__nav { letter-spacing: 0.2em; }
.pfcustom-landing .pfcustom-acc-sim__preview[data-format="9"] .pfcustom-gen__nav { display: none; }
.pfcustom-landing .pfcustom-acc-sim__preview[data-format="9"] .pfcustom-gen__burger { display: flex; }
.pfcustom-landing .pfcustom-acc-sim__preview[data-format="9"] .pfcustom-gen[data-menu="island"] .pfcustom-gen__head { margin: 0.8em 0.8em 0; }

/* Accueil : nom, sous-titre, texte, bouton, réseaux, image sans arrondi */
.pfcustom-landing .pfcustom-gen__hero { position: relative; flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr); align-items: center; gap: 3em; padding: 0.6em var(--g-pad); transition: all 0.35s ease; }
.pfcustom-landing .pfcustom-gen__text { position: relative; z-index: 1; min-width: 0; overflow-wrap: anywhere; }
.pfcustom-landing .pfcustom-gen__title { color: var(--g-fg); font-family: var(--g-title); font-weight: var(--g-tw); text-transform: var(--g-tcase); letter-spacing: var(--g-tls); font-size: 3.6em; line-height: 0.98; }
.pfcustom-landing .pfcustom-gen__sub { margin-top: 0.7em; font-size: 0.95em; font-weight: 600; color: var(--g-fg); }
.pfcustom-landing .pfcustom-gen__lede { margin: 0.8em 0 1.4em; max-width: 30em; font-size: 0.9em; color: var(--g-muted); }
.pfcustom-landing .pfcustom-gen__btn { display: inline-block; padding: 0.85em 1.8em; font-size: 0.75em; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; background: transparent; color: var(--g-fg); border: 0.1em solid color-mix(in srgb, var(--g-fg) 45%, transparent); border-radius: 99em; transition: all 0.35s ease; }
.pfcustom-landing .pfcustom-gen[data-btn="square"] .pfcustom-gen__btn { background: var(--g-accent); border-color: var(--g-accent); color: var(--g-on); border-radius: 0; }
.pfcustom-landing .pfcustom-gen[data-btn="outline"] .pfcustom-gen__btn { border-color: var(--g-accent); color: var(--g-accent); border-radius: 0.6em; }
.pfcustom-landing .pfcustom-gen__social { display: flex; gap: 0.7em; margin-top: 1.6em; }
.pfcustom-landing .pfcustom-gen__social i { display: grid; place-items: center; width: 2.6em; height: 2.6em; font-style: normal; font-size: 0.75em; font-weight: 700; color: var(--g-accent); border: 0.1em solid color-mix(in srgb, var(--g-accent) 70%, transparent); border-radius: 0; }
.pfcustom-landing .pfcustom-gen[data-btn="round"] .pfcustom-gen__social i { border-radius: 50%; background: color-mix(in srgb, var(--g-accent) 22%, transparent); }
.pfcustom-landing .pfcustom-gen__img { align-self: center; min-height: 0; overflow: hidden; }
.pfcustom-landing .pfcustom-gen__img img { display: block; width: 100%; height: auto; max-height: 100%; object-fit: cover; }
.pfcustom-landing .pfcustom-gen[data-hero="right"] .pfcustom-gen__img { order: -1; }
.pfcustom-landing .pfcustom-gen[data-hero="top"] .pfcustom-gen__hero { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 1.2em; text-align: center; }
.pfcustom-landing .pfcustom-gen[data-hero="top"] .pfcustom-gen__img { order: -1; height: 100%; }
.pfcustom-landing .pfcustom-gen[data-hero="top"] .pfcustom-gen__img img { height: 100%; }
.pfcustom-landing .pfcustom-gen[data-hero="top"] :is(.pfcustom-gen__lede, .pfcustom-gen__social) { display: none; }
.pfcustom-landing .pfcustom-gen[data-hero="top"] .pfcustom-gen__title { font-size: 2.4em; }
.pfcustom-landing .pfcustom-gen[data-hero="top"] .pfcustom-gen__sub { margin-bottom: 0.9em; }
.pfcustom-landing .pfcustom-gen[data-hero="bg"] .pfcustom-gen__hero { grid-template-columns: 1fr; padding: 0 var(--g-pad); color: #fff; }
.pfcustom-landing .pfcustom-gen[data-hero="bg"] .pfcustom-gen__img { position: absolute; inset: 0; height: auto; align-self: stretch; }
.pfcustom-landing .pfcustom-gen[data-hero="bg"] .pfcustom-gen__img img { height: 100%; max-height: none; }
.pfcustom-landing .pfcustom-gen[data-hero="bg"] .pfcustom-gen__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(0 0 0 / 0.75), rgb(0 0 0 / 0.2)); }
.pfcustom-landing .pfcustom-gen[data-hero="bg"] .pfcustom-gen__text { max-width: 62%; }
.pfcustom-landing .pfcustom-gen[data-hero="bg"] :is(.pfcustom-gen__title, .pfcustom-gen__sub) { color: #fff; }
.pfcustom-landing .pfcustom-gen[data-hero="bg"] .pfcustom-gen__lede { color: rgb(255 255 255 / 0.85); }
.pfcustom-landing .pfcustom-gen[data-hero="bg"] .pfcustom-gen__btn { color: #fff; border-color: rgb(255 255 255 / 0.7); }
.pfcustom-landing .pfcustom-gen[data-hero="bg"][data-btn="square"] .pfcustom-gen__btn { background: var(--g-accent); border-color: var(--g-accent); color: var(--g-on); }
.pfcustom-landing .pfcustom-gen[data-hero="bg"][data-btn="outline"] .pfcustom-gen__btn { color: var(--g-accent); border-color: var(--g-accent); }
.pfcustom-landing .pfcustom-gen[data-hero="bg"][data-menu="clear"] .pfcustom-gen__head { position: absolute; inset: 0 0 auto 0; --g-head-fg: #fff; }
.pfcustom-landing .pfcustom-gen[data-hero="bg"][data-menu="clear"] .pfcustom-gen__nav > .is-current { color: rgb(255 255 255 / 0.75); }
.pfcustom-landing .pfcustom-gen__head { color: var(--g-head-fg, var(--g-fg)); }
.pfcustom-landing .pfcustom-gen :is(.pfcustom-gen__nav > span, .pfcustom-gen__burger) { color: var(--g-head-fg, var(--g-fg)); }
.pfcustom-landing .pfcustom-gen__nav > .is-current { color: var(--g-muted); }

/* Section de contenu sous l'accueil */
.pfcustom-landing .pfcustom-gen__section { padding: 0.8em var(--g-pad) 1.6em; }
.pfcustom-landing .pfcustom-gen__h { font-family: var(--g-title); font-weight: 500; text-transform: var(--g-tcase); letter-spacing: var(--g-tls); font-size: 1.5em; color: var(--g-muted); }
.pfcustom-landing .pfcustom-gen__items { margin-top: 0.3em; font-size: 0.85em; }

/* Mobile : une seule colonne, menu replié */
.pfcustom-landing .pfcustom-acc-sim__preview[data-format="9"] .pfcustom-gen__hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-items: start; gap: 1.2em; }
.pfcustom-landing .pfcustom-acc-sim__preview[data-format="9"] .pfcustom-gen__title { font-size: 2.5em; }
.pfcustom-landing .pfcustom-acc-sim__preview[data-format="9"] .pfcustom-gen__lede { margin: 0.6em 0 1em; }
.pfcustom-landing .pfcustom-acc-sim__preview[data-format="9"] .pfcustom-gen__social { margin-top: 1em; }
.pfcustom-landing .pfcustom-acc-sim__preview[data-format="9"] .pfcustom-gen__img img { height: 100%; }
.pfcustom-landing .pfcustom-acc-sim__preview[data-format="9"] .pfcustom-gen__section { display: none; }
.pfcustom-landing .pfcustom-acc-sim__preview[data-format="9"] .pfcustom-gen[data-hero="right"] .pfcustom-gen__hero,
.pfcustom-landing .pfcustom-acc-sim__preview[data-format="9"] .pfcustom-gen[data-hero="top"] .pfcustom-gen__hero { grid-template-rows: minmax(0, 1fr) auto; }
.pfcustom-landing .pfcustom-acc-sim__preview[data-format="9"] .pfcustom-gen[data-hero="top"] :is(.pfcustom-gen__lede, .pfcustom-gen__social) { display: none; }
.pfcustom-landing .pfcustom-acc-sim__preview[data-format="9"] .pfcustom-gen[data-hero="bg"] .pfcustom-gen__hero { grid-template-rows: 1fr; align-items: end; padding-bottom: 1.4em; }
.pfcustom-landing .pfcustom-acc-sim__preview[data-format="9"] .pfcustom-gen[data-hero="bg"] .pfcustom-gen__text { max-width: none; }
.pfcustom-landing .pfcustom-acc-sim__preview[data-format="9"] .pfcustom-gen[data-hero="bg"] .pfcustom-gen__img::after { background: linear-gradient(0deg, rgb(0 0 0 / 0.85), rgb(0 0 0 / 0.1)); }
@media (prefers-reduced-motion: reduce) {
  .pfcustom-landing .pfcustom-gen, .pfcustom-landing .pfcustom-gen * { transition: none; }
}
.pfcustom-landing .pfcustom-gen__burger-bars { color: var(--g-head-fg, var(--g-fg)); }
.pfcustom-landing .pfcustom-acc-sim__preview[data-format="9"] .pfcustom-gen__title { font-size: 2.1em; overflow-wrap: normal; }


.pfcustom-landing {
  overflow-x: clip;
}

.pfcustom-landing [data-pf-align="center"] {
  text-align: center;
}

.pfcustom-landing .pfcustom-section {
  position: relative;
  background: var(--pfcustom-bg);
  overflow: hidden;
}

/* Séparation des sections : filet discret en haut de chaque section, fond légèrement relevé une section sur deux.
   Hors héros, bandeau de métiers, tarifs, manifeste et appel final, qui ont leur propre fond. */
.pfcustom-landing > .pfcustom-section:not(.pfcustom-acc--trades, .pfcustom-acc--manifesto, .pfcustom-acc--final, .pfcustom-pricing) {
  border-top: 1px solid var(--pfcustom-border-separator-color);
}

.pfcustom-landing > .pfcustom-section:nth-child(even):not(.pfcustom-acc--trades, .pfcustom-acc--manifesto, .pfcustom-acc--final, .pfcustom-pricing) {
  background: color-mix(in srgb, var(--pfcustom-bg-elevated) 45%, var(--pfcustom-bg));
}

/* --- Hero --- */
.pfcustom-landing .pfcustom-hero {
  position: relative;
  min-height: var(--pfcustom-hero-min-height);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--pfcustom-text);
}

.pfcustom-landing .pfcustom-hero--primary {
  justify-content: center;
  align-items: stretch;
  box-sizing: border-box;
}

/* Le dégagement header est sur la section / le contenu ; pas de :is(.pf-pt-md, .pf-pad-y-md, .pf-pad-md) grille en plus */
.pfcustom-landing .pfcustom-hero .pfcustom-hero__content:is(.pf-pt-md, .pf-pad-y-md, .pf-pad-md) {
  padding-top: 0;
}

.pfcustom-landing .pfcustom-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: var(--pfcustom-z-hero-bg);
}

/* Hero /home : diaporama 5 visuels en fondu */
.pfcustom-landing .pfcustom-hero__slides {
  position: absolute;
  inset: 0;
  z-index: var(--pfcustom-z-hero-bg);
  overflow: hidden;
}

.pfcustom-landing .pfcustom-hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 3s ease-in-out;
  pointer-events: none;
}

.pfcustom-landing .pfcustom-hero__slide.is-active {
  opacity: 1;
}

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

@media (prefers-reduced-motion: reduce) {
  .pfcustom-landing .pfcustom-hero__slide:not(.is-active) {
        opacity: 0;
      }
}

@media (prefers-reduced-motion: reduce) {
  .pfcustom-landing .pfcustom-hero__slide.is-active {
        opacity: 1;
      }
}

.pfcustom-landing .pfcustom-hero__bg--blur {
  filter: blur(var(--pfcustom-blur-hero-bg));
  transform: scale(var(--pfcustom-scale-hero-bg));
}

.pfcustom-landing .pfcustom-showcase .pfcustom-hero__bg {
  object-position: center top;
}

.pfcustom-landing .pfcustom-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: var(--pfcustom-z-hero-overlay);
  background: linear-gradient(
    var(--pfcustom-hero-overlay-angle),
    var(--pfcustom-hero-overlay-1) 0%,
    var(--pfcustom-hero-overlay-2) 45%,
    var(--pfcustom-hero-overlay-3) 100%
  );
}

.pfcustom-landing .pfcustom-hero__overlay--center {
  background: linear-gradient(
    var(--pfcustom-hero-overlay-angle),
    var(--pfcustom-hero-overlay-center-1) 0%,
    var(--pfcustom-hero-overlay-center-2) 50%,
    var(--pfcustom-hero-overlay-center-3) 100%
  );
}

.pfcustom-landing .pfcustom-hero__content {
  position: relative;
  z-index: var(--pfcustom-z-hero-content);
}

.pfcustom-landing .pfcustom-hero--primary .pfcustom-hero__content,
.pfcustom-landing .pfcustom-hero__content--center {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.pfcustom-landing .pfcustom-hero--primary .pfcustom-hero__overlay {
  background: linear-gradient(
    var(--pfcustom-hero-overlay-angle),
    var(--pfcustom-hero-overlay-center-1) 0%,
    var(--pfcustom-hero-overlay-center-2) 50%,
    var(--pfcustom-hero-overlay-center-3) 100%
  );
}

.pfcustom-landing .pfcustom-hero__text {
  max-width: 40rem;
}

.pfcustom-landing .pfcustom-hero--primary .pfcustom-hero__text,
.pfcustom-landing .pfcustom-hero__content--center .pfcustom-hero__text {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.pfcustom-landing .pfcustom-hero--primary .pfcustom-hero__ctas,
.pfcustom-landing .pfcustom-hero__content--center .pfcustom-hero__ctas {
  justify-content: center;
}

/* Plus spécifique que la règle de fond des paragraphes (structure/layout/main/16-prose.css, --pf-theme-bg-contrast),
   sinon le chapô héros reprend la couleur « contenu » et peut disparaître sur le fond photo. */
.pfcustom-landing .pfcustom-hero__intro {
  margin: 0 auto 1.5rem;
  max-width: 36rem;
  color: var(--pfcustom-mockup-text-subtle);
  text-align: center;
}

.pfcustom-landing .pfcustom-hero__ctas {
  gap: var(--pfcustom-space-cta-gap);
}

.pfcustom-landing .pfcustom-scroll-hint {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--pfcustom-z-scroll-hint);
  width: var(--pfcustom-size-scroll-hint);
  height: var(--pfcustom-size-scroll-hint);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pfcustom-rgba-white-85);
  text-decoration: none;
  border-radius: var(--pfcustom-radius-scroll-hint);
  border: var(--pfcustom-page-border);
  background: var(--pfcustom-rgba-black-025);
}

.pfcustom-landing .pfcustom-scroll-hint__chev {
  width: var(--pfcustom-size-chev);
  height: var(--pfcustom-size-chev);
  border-right: var(--pfcustom-size-chev-border) solid currentColor;
  border-bottom: var(--pfcustom-size-chev-border) solid currentColor;
  transform: rotate(45deg) translateY(-3px);
  animation: pfcustom-chev var(--pfcustom-motion-chev-duration) ease-in-out infinite;
}
@keyframes pfcustom-chev {
  0%,
  100% {
    transform: rotate(45deg) translateY(-3px);
    opacity: 0.6;
  }
  50% {
    transform: rotate(45deg) translateY(2px);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pfcustom-landing .pfcustom-scroll-hint__chev {
        animation: none;
      }
}

/* Features — séparation entre sections (.pfcustom-landing > section:not(.pfcustom-hero)) */
.pfcustom-landing .pfcustom-features {
  padding-bottom: 4rem;
}

.pfcustom-landing .pfcustom-features__title {
  margin: 0 0 0.35rem;
  font-weight: var(--pfcustom-type-h1-weight);
  color: var(--pfcustom-type-h1-color);
}

.pfcustom-landing .pfcustom-features__subtitle {
  margin: 0 0 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: var(--pfcustom-type-h3-weight);
  color: var(--pfcustom-accent-title);
}

.pfcustom-landing .pfcustom-features__lede {
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 650px) {
  .pfcustom-landing .pfcustom-features > .pfcustom-features__head {
        text-align: left;
      }
}

@media screen and (max-width: 650px) {
  .pfcustom-landing .pfcustom-features > .pfcustom-features__head .pfcustom-features__lede {
        margin-left: 0;
        margin-right: 0;
        max-width: none;
      }
}

@media screen and (max-width: 650px) {
  .pfcustom-landing .pfcustom-pricing__intro .pfcustom-muted,
  .pfcustom-landing .pfcustom-pricing__intro .pfcustom-pricing__lede {
        max-width: none;
      }
}

.pfcustom-landing .pfcustom-feature-card {
  position: relative;
  padding-bottom: 2.25rem;
}

.pfcustom-landing .pfcustom-feature-card__icon {
  color: var(--pfcustom-rgba-white-90);
}

.pfcustom-landing .pfcustom-feature-card__arrow {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  color: var(--pfcustom-rgba-white-75);
}

/* Section « Une solution intuitive » (#pfcustom-features) : pas de flèche décorative */
.pfcustom-landing .pfcustom-features .pfcustom-feature-card__arrow {
  display: none;
}

.pfcustom-landing .pfcustom-features .pfcustom-feature-card {
  padding-bottom: 1.35rem;
}

/*
 * Reordonner les cartes pour commencer par les marqueurs d'originalite Arktefakt.
 */
.pfcustom-landing .pfcustom-features__layout .pf-cols-4 > .pfcustom-feature-card:nth-child(10) { order: 1; }

/* Architecture modulaire intelligente */
.pfcustom-landing .pfcustom-features__layout .pf-cols-4 > .pfcustom-feature-card:nth-child(11) { order: 2; }

/* Pages services dediees */
.pfcustom-landing .pfcustom-features__layout .pf-cols-4 > .pfcustom-feature-card:nth-child(12) { order: 3; }

/* Experience createur complete */
.pfcustom-landing .pfcustom-features__layout .pf-cols-4 > .pfcustom-feature-card:nth-child(7) { order: 4; }

/* Galerie */
.pfcustom-landing .pfcustom-features__layout .pf-cols-4 > .pfcustom-feature-card:nth-child(8) { order: 5; }

/* Discographie */
.pfcustom-landing .pfcustom-features__layout .pf-cols-4 > .pfcustom-feature-card:nth-child(6) { order: 6; }

/* Productions */
.pfcustom-landing .pfcustom-features__layout .pf-cols-4 > .pfcustom-feature-card:nth-child(1) { order: 7; }

/* Blog */
.pfcustom-landing .pfcustom-features__layout .pf-cols-4 > .pfcustom-feature-card:nth-child(4) { order: 8; }

/* Agenda */
.pfcustom-landing .pfcustom-features__layout .pf-cols-4 > .pfcustom-feature-card:nth-child(2) { order: 9; }

/* A propos */
.pfcustom-landing .pfcustom-features__layout .pf-cols-4 > .pfcustom-feature-card:nth-child(3) { order: 10; }

/* Equipe */
.pfcustom-landing .pfcustom-features__layout .pf-cols-4 > .pfcustom-feature-card:nth-child(5) { order: 11; }

/* Livres */
.pfcustom-landing .pfcustom-features__layout .pf-cols-4 > .pfcustom-feature-card:nth-child(9) { order: 12; }

/* Boutique et Contact */
/* Grille features : la section porte déjà les gouttières — pas de padding en double */
.pfcustom-landing .pfcustom-features__layout > div:nth-child(2):is(.pf-pad-x-md, .pf-pad-md, .pf-pl-md.pf-pr-md) {
  padding-left: 0;
  padding-right: 0;
}

/* Hero landing : rythme vertical sous le contenu (desktop + mobile) */
.pfcustom-landing .pfcustom-hero--primary:is(.pf-pb-xl, .pf-pad-y-xl) {
  box-sizing: border-box;
}

.pfcustom-landing section.pfcustom-pricing:is(.pf-pad-y-xl, .pf-pt-xl.pf-pb-xl) {
  box-sizing: border-box;
}

@media screen and (max-width: 650px) {
  .pfcustom-landing .pfcustom-hero--primary .pfcustom-hero__content {
        padding-bottom: clamp(1.25rem, 4vw, 2rem);
      }
}

/* Temporaire : masquer les side gauche/droite */
.pfcustom-landing .pfcustom-sidecard {
  display: none;
}

.pfcustom-landing .pfcustom-features__layout > .pfcustom-sidecard {
  position: relative;
  align-self: start;
}

/* Sidecards masquées : pas de débordement négatif (alignement gouttières header) ; le cadre ne dépasse pas celui du header (1500 px). */
.pfcustom-landing .pfcustom-features__layout {
  max-width: var(--layout-width-wide);
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.pfcustom-landing .pfcustom-features__layout > .pfcustom-sidecard:first-child {
  transform: translate3d(0, 22px, 0);
}

.pfcustom-landing .pfcustom-features__layout > .pfcustom-sidecard:last-child {
  transform: translate3d(0, -34px, 0);
}

.pfcustom-landing .pfcustom-wide-placeholder {
  width: 100%;
  height: auto;
  border-radius: var(--pfcustom-radius-card);
  display: block;
}

.pfcustom-landing .pfcustom-video-slot {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--pfcustom-radius-card);
  overflow: hidden;
  border: 1px solid var(--pfcustom-rgba-white-40);
  background: var(--pfcustom-rgba-black-070);
}

.pfcustom-landing .pfcustom-video-slot__iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--pfcustom-radius-card);
  display: block;
}

@media screen and (max-width: 900px) {
  .pfcustom-landing .pfcustom-video-slot {
        aspect-ratio: 4 / 3;
      }
}

@media screen and (max-width: 650px) {
  .pfcustom-landing .pfcustom-video-slot {
        aspect-ratio: 1 / 1;
        max-height: min(70vh, 28rem);
      }
}

/*
 * Tarifs — bords alignés sur la barre header : la section porte déjà la
 * gouttière de page (pf-pad-x-md → layout-frame.css), le cadre se limite donc
 * à la largeur wide. --pfcustom-page-content-max-width retrancherait la
 * gouttière une seconde fois (son 100% est résolu dans la section déjà rembourrée).
 */
.pfcustom-landing .pfcustom-pricing__content {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--layout-width-wide);
  margin-left: auto;
  margin-right: auto;
  min-width: 0;
  padding-inline: 0;
}

.pfcustom-landing .pfcustom-pricing__title {
  margin: 0 0 1rem;
  font-weight: var(--pfcustom-type-h1-weight);
  color: var(--pfcustom-type-h1-color);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pfcustom-space-heading-split-gap);
  max-width: 100%;
  text-wrap: balance;
}

.pfcustom-landing .pfcustom-pricing__title .pfcustom-pricing__title-strong {
  font-weight: var(--pfcustom-type-h1-weight);
  display: block;
}

.pfcustom-landing .pfcustom-pricing__title .pfcustom-pricing__title-light {
  font-weight: var(--pfcustom-type-subtle-weight);
  color: var(--pfcustom-mockup-text-subtle);
  display: block;
}

.pfcustom-landing .pfcustom-pricing__lede {
  margin: 0 auto;
  max-width: 36rem;
  text-align: center;
}

.pfcustom-landing section.pfcustom-pricing {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    118deg,
    var(--pfcustom-color-black) 0%,
    #0f0518 38%,
    var(--pfcustom-color-pricing-grad-mid) 58%,
    var(--pfcustom-color-pricing-grad-end) 100%
  );
}

.pfcustom-landing .pfcustom-pricing__intro {
  text-align: center;
}

.pfcustom-landing p.pfcustom-pricing__empty {
  text-align: center;
}

.pfcustom-landing .pfcustom-pricing__grid {
  position: relative;
  z-index: 1;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  margin: 0;
  min-width: 0;
}

.pfcustom-landing .pfcustom-pricing__grid > * {
  min-width: 0;
}

/* Ordinateur : offres centrées (utile quand le menu de période en masque une partie). */
@media screen and (min-width: 1101px) {
  .pfcustom-landing .pfcustom-pricing__grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
      }
}

@media screen and (min-width: 1101px) {
  .pfcustom-landing .pfcustom-pricing__grid > * {
        flex: 0 1 calc((100% - 2 * var(--layout-gap, 20px)) / 3);
      }
}

.pfcustom-landing .pfcustom-pricing-card:not(.pfcustom-card--featured) {
  background: var(--pfcustom-glass-sheen), var(--pfcustom-card-bg);
  border-color: var(--pfcustom-glass-border-color);
  backdrop-filter: var(--pfcustom-glass-blur-filter);
  -webkit-backdrop-filter: var(--pfcustom-glass-blur-filter);
}

.pfcustom-landing .pfcustom-card--featured.pfcustom-pricing-card {
  transform: translateY(-0.4rem);
  box-shadow:
    0 22px 48px color-mix(in srgb, var(--pfcustom-color-black) 55%, transparent),
    0 0 0 1px var(--pfcustom-rgba-black-06-on-white);
  color: var(--pfcustom-text-on-light);
  /* Carte claire : la règle de fond du tronc lit cette variable pour le texte des spans, prix et coches. */
  --pf-theme-bg-contrast: var(--pfcustom-text-on-light);
}

.pfcustom-landing .pfcustom-card--featured.pfcustom-pricing-card .pfcustom-muted:not(.pfcustom-list):not(.pfcustom-price__note):not(.pfcustom-promo-until) {
  color: var(--pfcustom-text-on-featured-muted);
}

.pfcustom-landing .pfcustom-card--featured.pfcustom-pricing-card .pfcustom-list,
.pfcustom-landing .pfcustom-card--featured.pfcustom-pricing-card .pfcustom-list__missing,
.pfcustom-landing .pfcustom-card--featured.pfcustom-pricing-card .pfcustom-price__note.pfcustom-promo-until,
.pfcustom-landing .pfcustom-card--featured.pfcustom-pricing-card .pfcustom-promo-until,
.pfcustom-landing .pfcustom-card--featured.pfcustom-pricing-card .pfcustom-price--old {
  color: var(--pfcustom-color-black);
}

.pfcustom-landing .pfcustom-card--featured.pfcustom-pricing-card .pfcustom-list__missing {
  opacity: 0.5;
}

.pfcustom-landing .pfcustom-pricing-badge {
  margin: 0 0 0.5rem;
}

.pfcustom-landing .pfcustom-pricing-badge__label {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--pfcustom-radius-pill);
  background: var(--pfcustom-btn-sheen), var(--pfcustom-btn-cta-bg);
  color: var(--pfcustom-color-white);
}

.pfcustom-landing .pfcustom-pricing-card .pfcustom-price-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
  margin: 0.35rem 0 0;
  width: 100%;
}

.pfcustom-landing .pfcustom-pricing-card .pfcustom-price-line {
  display: block;
  line-height: 1.08;
  text-align: center;
  margin: 0;
}

.pfcustom-landing .pfcustom-pricing-card .pfcustom-price--hero {
  font-size: clamp(26px, 1.25vw + 19px, 42px);
  line-height: 1.08;
  font-weight: var(--pfcustom-type-h1-weight, 700);
  margin: 0.25rem 0 0.12rem;
  letter-spacing: -0.025em;
}

.pfcustom-landing .pfcustom-pricing-card:not(.pfcustom-card--featured) .pfcustom-price--hero:not(.pfcustom-price--old):not(.pfcustom-price--promo-highlight) {
  color: var(--pfcustom-accent-strong);
}

.pfcustom-landing .pfcustom-pricing-card .pfcustom-price-line--promo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.35em;
  width: 100%;
}

.pfcustom-landing .pfcustom-card--featured.pfcustom-pricing-card .pfcustom-price__suffix {
  /* Classé : il ne reçoit plus la couleur du parent mais celle de la règle de fond du tronc (encre sur la pastille violette). */
  color: inherit;
}

.pfcustom-landing .pfcustom-pricing-card .pfcustom-price--promo-highlight .pfcustom-price__suffix {
  font-size: 0.55em;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.pfcustom-landing .pfcustom-card--featured.pfcustom-pricing-card .pfcustom-price--featured-highlight .pfcustom-price__suffix,
.pfcustom-landing .pfcustom-card--featured.pfcustom-pricing-card .pfcustom-price--promo-highlight .pfcustom-price__suffix {
  font-size: max(13px, 0.26em);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.pfcustom-landing .pfcustom-card--featured.pfcustom-pricing-card .pfcustom-price-block {
  margin: 0.55rem 0 0.15rem;
  gap: 0.12rem;
}

.pfcustom-landing .pfcustom-card--featured.pfcustom-pricing-card .pfcustom-price--old {
  color: var(--pfcustom-color-black);
  opacity: 0.78;
}

.pfcustom-landing .pfcustom-card--featured .pfcustom-promo-until {
  color: var(--pfcustom-color-black);
}

.pfcustom-landing .pfcustom-pricing-card:not(.pfcustom-card--featured) .pfcustom-price--hero:not(.pfcustom-price--old):not(.pfcustom-price--promo-highlight) .pfcustom-price__suffix {
  font-size: 0.55em;
  font-weight: 500;
  letter-spacing: 0.01em;
  opacity: 0.82;
  white-space: nowrap;
}

.pfcustom-landing .pfcustom-pricing-card[data-pf-price-only][hidden] {
  display: none;
}

/* Réduction d'une période par rapport à la plus chère : même pastille que le badge tarif */
.pfcustom-landing .pfcustom-pricing-card .pfcustom-price__discount {
  display: inline-block;
  margin: 0.35rem 0 0;
  padding: 0.2rem 0.65rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  border-radius: var(--pfcustom-radius-pill);
  background: var(--pfcustom-btn-sheen), var(--pfcustom-btn-cta-bg);
  color: var(--pfcustom-color-white);
}

.pfcustom-landing .pfcustom-list__missing {
  text-decoration: line-through;
  opacity: 0.55;
}

.pfcustom-landing .pfcustom-rule {
  border: none;
  border-top: var(--pfcustom-page-border-width) solid var(--pfcustom-page-border-color);
  margin: 1rem 0;
}

.pfcustom-landing .pfcustom-rule--dark {
  border-top-color: var(--pfcustom-rgba-black-12-on-white);
}

.pfcustom-landing .pfcustom-price {
  font-size: var(--pfcustom-type-h3-size);
  font-weight: 600;
  margin: 0.5rem 0;
  color: var(--pfcustom-text);
}

.pfcustom-landing .pfcustom-price--lg {
  font-size: calc(var(--pfcustom-type-h1-size) * 0.95);
  font-weight: var(--pfcustom-type-h1-weight);
}

.pfcustom-landing .pfcustom-price__unit {
  font-size: 0.55em;
  font-weight: 600;
}

.pfcustom-landing .pfcustom-price__note {
  margin: 0 0 0.5rem;
}

.pfcustom-landing .pfcustom-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

@media screen and (max-width: 1100px) {
  .pfcustom-landing .pfcustom-pricing__grid.pf-cols-3 {
        grid-template-columns: 1fr;
        gap: 1.25rem;
      }
}

@media screen and (max-width: 1100px) {
  .pfcustom-landing .pfcustom-card--featured.pfcustom-pricing-card {
        transform: none;
        box-shadow: var(--pfcustom-shadow-featured-card);
      }
}

@media screen and (max-width: 1100px) {
  .pfcustom-landing .pfcustom-features__layout {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
      }
}

/*
 * Mobile (≤990px) : texte hero aligné à gauche ; centrage vertical conservé sous le header.
 */
@media screen and (max-width: 990px) {
  .pfcustom-landing .pfcustom-hero--primary .pfcustom-hero__content,
  .pfcustom-landing .pfcustom-hero__content--center,
  .pfcustom-landing .pfcustom-hero__content[data-pf-align="center"] {
        align-items: flex-start;
        text-align: left;
        margin-left: 0;
        margin-right: 0;
      }
}

@media screen and (max-width: 990px) {
  .pfcustom-landing .pfcustom-hero--primary .pfcustom-hero__text,
  .pfcustom-landing .pfcustom-hero__content--center .pfcustom-hero__text {
        margin-left: 0;
        margin-right: 0;
        text-align: left;
        max-width: none;
        width: 100%;
      }
}

/* Texte d'introduction du showcase : règle de base avant ses surcharges mobiles (même poids : la dernière gagne). */
.pfcustom-landing .pfcustom-showcase .pfcustom-showcase__intro {
  max-width: 36rem;
  margin: 0 auto 0;
  color: var(--pfcustom-mockup-text-subtle);
}

@media screen and (max-width: 990px) {
  .pfcustom-landing .pfcustom-hero :is(h1, h2, h3, .pfcustom-hero__subtitle, .pfcustom-hero__intro),
  .pfcustom-landing .pfcustom-showcase :is(.pfcustom-showcase__title, .pfcustom-showcase__subtitle, .pfcustom-showcase__intro) {
        text-align: left;
      }
}

@media screen and (max-width: 990px) {
  .pfcustom-landing .pfcustom-hero__intro {
        margin-left: 0;
        margin-right: 0;
        max-width: none;
      }
}

@media screen and (max-width: 990px) {
  .pfcustom-landing .pfcustom-showcase .pfcustom-showcase__intro {
        margin-left: 0;
        margin-right: 0;
        max-width: none;
      }
}

@media screen and (max-width: 990px) {
  .pfcustom-landing .pfcustom-hero--primary .pfcustom-hero__ctas,
  .pfcustom-landing .pfcustom-hero__content--center .pfcustom-hero__ctas {
        justify-content: flex-start;
        width: 100%;
      }
}

@media screen and (max-width: 990px) {
  .pfcustom-landing .pfcustom-showcase .pfcustom-hero__content--center,
  .pfcustom-landing .pfcustom-showcase .pfcustom-hero__content[data-pf-align="center"] {
        align-items: flex-start;
        text-align: left;
        margin-left: 0;
        margin-right: 0;
      }
}

@media screen and (max-width: 990px) {
  .pfcustom-landing .pfcustom-showcase .pfcustom-hero--secondary {
        justify-content: flex-start;
        align-items: stretch;
        min-height: min(var(--pfcustom-hero-secondary-min-height), 28rem);
      }
}

@media screen and (max-width: 990px) {
  .pfcustom-landing .pfcustom-showcase .pfcustom-hero__content .pfcustom-btn {
        align-self: flex-start;
      }
}

@media screen and (max-width: 650px) {
  .pfcustom-landing .pfcustom-pricing-card {
        padding: 1.25rem 1rem;
      }
}

@media screen and (max-width: 650px) {
  .pfcustom-landing .pfcustom-pricing__grid {
        gap: 1rem;
      }
}

@media screen and (max-width: 650px) {
  .pfcustom-landing .pfcustom-pricing-card .pfcustom-btn {
        width: 100%;
        justify-content: center;
        box-sizing: border-box;
      }
}

@media screen and (max-width: 650px) {
  .pfcustom-landing .pfcustom-hero__ctas {
        flex-direction: column;
        align-items: stretch;
      }
}

@media screen and (max-width: 650px) {
  .pfcustom-landing .pfcustom-hero__ctas .pfcustom-btn {
        width: 100%;
        justify-content: center;
        box-sizing: border-box;
      }
}

@media screen and (max-width: 650px) {
  .pfcustom-landing .pfcustom-faq__actions {
        flex-direction: column;
        align-items: stretch;
      }
}

@media screen and (max-width: 650px) {
  .pfcustom-landing .pfcustom-faq__actions .pfcustom-btn {
        width: 100%;
        justify-content: center;
        box-sizing: border-box;
      }
}

@media screen and (max-width: 650px) {
  .pfcustom-landing .pfcustom-showcase .pf-w-wide.pf-mt-lg {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }
}

/* Showcase */
.pfcustom-landing .pfcustom-showcase {
  background: var(--pfcustom-bg);
}

.pfcustom-landing .pfcustom-hero--secondary {
  min-height: var(--pfcustom-hero-secondary-min-height);
  justify-content: center;
  border-radius: var(--pfcustom-radius-card);
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--pfcustom-showcase-max-width);
}

/* Showcase — carte « Dernières réalisations » : layout contenu (padding via classes grille) */
.pfcustom-landing .pfcustom-showcase .pfcustom-hero--secondary .pfcustom-hero__content {
  box-sizing: border-box;
  width: 100%;
}

.pfcustom-landing .pfcustom-project-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: var(--pfcustom-radius-card);
  overflow: hidden;
  min-height: var(--pfcustom-project-card-min-height);
  background: var(--pfcustom-glass-sheen), var(--pfcustom-card-bg);
}

.pfcustom-landing a.pfcustom-project-card--link {
  display: grid;
  text-decoration: none;
  color: inherit;
}

.pfcustom-landing .pfcustom-project-card__media--layered {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.pfcustom-landing .pfcustom-project-card__title {
  margin: 0;
  line-height: 1.2;
  font-weight: 600;
}

.pfcustom-landing .pfcustom-project-card__text {
  border: none;
  display: flex;
  align-items: center;
  padding: 1.5rem;
  color: var(--pfcustom-text);
}

.pfcustom-landing .pfcustom-project-card--image {
  position: relative;
  display: block;
  grid-template-columns: none;
}

.pfcustom-landing .pfcustom-project-card__caption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  color: var(--pfcustom-color-white);
  font-weight: 600;
  background: linear-gradient(var(--pfcustom-caption-grad-angle), var(--pfcustom-rgba-black-65-caption), transparent 60%);
}

.pfcustom-landing .pfcustom-project-card--light {
  background: var(--pfcustom-color-project-light-bg);
  color: var(--pfcustom-text-on-light);
}

.pfcustom-landing .pfcustom-project-card--light .pfcustom-project-card__text-light {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pfcustom-landing .pfcustom-project-card__headline {
  margin: 0 0 0.75rem;
  line-height: 1.15;
  font-weight: var(--pfcustom-type-project-headline-weight);
  color: var(--pfcustom-text-on-light);
}

@media screen and (max-width: 650px) {
  .pfcustom-landing .pfcustom-project-card {
        grid-template-columns: 1fr;
      }
}

/* FAQ */
.pfcustom-landing .pfcustom-faq {
  position: relative;
  background: var(--pfcustom-color-black);
}

.pfcustom-landing .pfcustom-faq__intro {
  position: relative;
  z-index: 1;
}

.pfcustom-landing .pfcustom-faq__actions {
  gap: var(--pfcustom-space-faq-actions-gap);
  flex-wrap: wrap;
}

.pfcustom-landing .pfcustom-faq .pfcustom-accordion {
  position: relative;
  z-index: 1;
}

.pfcustom-landing .pfcustom-faq .pfcustom-accordion details .pfcustom-accordion__body.pfcustom-faq__answer {
  padding: 0.2rem 0 1.35rem;
  margin-top: 0;
}

.pfcustom-landing .pfcustom-faq__answer {
}

.pfcustom-landing .pfcustom-faq__answer :is(ul, ol) {
  margin: 0 0 var(--pfcustom-faq-answer-paragraph-gap);
  padding-left: 1.15rem;
}

.pfcustom-landing .pfcustom-faq__answer :is(ul, ol):last-child {
  margin-bottom: 0;
}

/* Bandeau fin de page — hébergement & données en France */
.pfcustom-landing .pfcustom-hosting-fr {
  background: var(--pfcustom-bg-elevated);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.pfcustom-landing .pfcustom-hosting-fr__inner {
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.pfcustom-landing p.pfcustom-hosting-fr__kicker {
  margin: 0 0 0.5rem;
  text-align: center;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: var(--pfcustom-type-h3-weight);
  color: var(--pfcustom-accent-title);
}

.pfcustom-landing .pfcustom-hosting-fr__title {
  margin: 0 0 1rem;
  text-align: center;
  font-weight: var(--pfcustom-type-h2-weight);
  color: var(--pfcustom-text);
  text-wrap: balance;
}

.pfcustom-landing .pfcustom-hosting-fr__text {
  margin: 0;
  line-height: 1.6;
  text-align: center;
  text-wrap: balance;
}

/* Demo étapes — module unique avec sous-menu */
.pfcustom-landing .pfcustom-landing-steps-demo .pfcustom-features__title--step {
  color: var(--pfcustom-accent-title);
}

.pfcustom-landing .pfcustom-landing-steps-demo {
  padding-bottom: clamp(2.5rem, 8vw, 4.5rem);
  box-sizing: border-box;
}

.pfcustom-landing .pfcustom-landing-steps-demo__body {
  margin-inline: auto;
}

/* Sous-menu des étapes : même design que la bascule Tableau / Galerie du hub (pastille + onglets arrondis). */
.pfcustom-landing .pfcustom-landing-steps-demo__nav {
  display: flex;
  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;
  align-items: stretch;
  gap: 4px;
  padding: 5px;
  box-sizing: border-box;
  margin: 0 auto clamp(1.75rem, 4vw, 2.5rem);
  border-radius: var(--pfcustom-radius-pill);
  background: var(--pfcustom-glass-sheen), var(--pfcustom-card-bg);
  border: var(--pfcustom-page-border);
}

.pfcustom-landing .pfcustom-landing-steps-demo__tab {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: var(--pfcustom-type-md);
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  line-height: var(--pfcustom-type-body-line);
  padding: 0.7rem 1.15rem;
  border-radius: var(--pfcustom-radius-pill);
  color: var(--pfcustom-text);
  background: transparent;
  opacity: 0.65;
  transition:
    background-color 0.2s linear,
    color 0.2s linear,
    opacity 0.2s linear;
}

/* Survol de l'onglet inactif : couleurs opposées du thème */
.pfcustom-landing .pfcustom-landing-steps-demo__tab:not(.is-active):hover {
  opacity: 1;
  background: var(--pfcustom-text);
  color: var(--pfcustom-bg);
}

/* Onglet actif : couleurs CTA, ton sur ton comme les boutons CTA (--pfcustom-btn-cta-sheen) */
.pfcustom-landing .pfcustom-landing-steps-demo__tab.is-active {
  opacity: 1;
  color: var(--pfcustom-btn-cta-text);
  background: var(--pfcustom-btn-cta-sheen), var(--pfcustom-btn-cta-bg);
}

.pfcustom-landing .pfcustom-landing-steps-demo__tab.is-active:hover {
  background: var(--pfcustom-btn-cta-sheen), var(--pfcustom-btn-cta-bg-hover);
}

.pfcustom-landing .pfcustom-landing-steps-demo__tab:focus-visible {
  outline: 2px solid var(--pfcustom-btn-cta-bg);
  outline-offset: 2px;
}

.pfcustom-landing .pfcustom-landing-steps-demo__panels {
  position: relative;
}

.pfcustom-landing .pfcustom-landing-steps-demo__panel {
  display: none;
}

.pfcustom-landing .pfcustom-landing-steps-demo__panel.is-active {
  display: block;
  animation: pfcustom-steps-demo-fade 0.35s ease;
}
@keyframes pfcustom-steps-demo-fade {
  from {
    opacity: 0;
    transform: translateY(0.35rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pfcustom-landing .pfcustom-landing-steps-demo__copy {
  margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
}

.pfcustom-landing .pfcustom-landing-steps-demo__cta {
  justify-content: center;
  margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
}

.pfcustom-landing .pfcustom-landing-steps-demo__title {
  margin: 0 0 0.75rem;
  font-weight: var(--pfcustom-type-h2-weight);
}

.pfcustom-landing .pfcustom-landing-steps-demo__media {
  padding-bottom: clamp(0.5rem, 2vw, 1rem);
  width: 100%;
  margin-inline: auto;
}

.pfcustom-landing .pfcustom-landing-steps-demo__device--mobile {
  display: none;
}

.pfcustom-landing .pfcustom-step-window {
  width: 100%;
  max-width: min(60rem, 100%);
  margin-inline: auto;
  border-radius: 0.65rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--pfcustom-color-white) 12%, var(--pfcustom-color-black));
  background: var(--pfcustom-mockup-surface);
  box-shadow:
    var(--pfcustom-card-shadow),
    0 22px 44px color-mix(in srgb, var(--pfcustom-color-black) 52%, transparent);
}

.pfcustom-landing .pfcustom-step-window__chrome {
  display: flex;
  align-items: center;
  min-height: 2.1rem;
  padding: 0.55rem 0.85rem;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--pfcustom-mockup-surface) 55%, var(--pfcustom-color-white) 12%) 0%,
    var(--pfcustom-mockup-surface) 100%
  );
  border-bottom: 1px solid color-mix(in srgb, var(--pfcustom-color-black) 55%, transparent);
}

.pfcustom-landing .pfcustom-step-window__dots {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.pfcustom-landing .pfcustom-step-window__dot {
  width: 0.72rem;
  height: 0.72rem;
  border-radius: var(--pfcustom-radius-pill);
  border: 1px solid color-mix(in srgb, var(--pfcustom-color-black) 22%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--pfcustom-color-white) 18%, transparent);
}

.pfcustom-landing .pfcustom-step-window__dot--close {
  background: #ff5f57;
}

.pfcustom-landing .pfcustom-step-window__dot--minimize {
  background: #febc2e;
}

.pfcustom-landing .pfcustom-step-window__dot--zoom {
  background: #28c840;
}

.pfcustom-landing .pfcustom-step-window__content {
  background: var(--pfcustom-color-black);
  line-height: 0;
}

.pfcustom-landing .pfcustom-step-window .pfcustom-step-img {
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  display: block;
  border-radius: 0;
  object-fit: contain;
  object-position: center top;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

.pfcustom-landing .pfcustom-step-phone {
  position: relative;
  width: 100%;
  max-width: min(20rem, 100%);
  margin-inline: auto;
  padding: 0.55rem;
  border-radius: 2.35rem;
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--pfcustom-color-white) 18%, var(--pfcustom-mockup-surface)) 0%,
    var(--pfcustom-mockup-surface) 42%,
    color-mix(in srgb, var(--pfcustom-color-black) 35%, var(--pfcustom-mockup-surface)) 100%
  );
  border: 1px solid color-mix(in srgb, var(--pfcustom-color-white) 14%, var(--pfcustom-color-black));
  box-shadow:
    var(--pfcustom-card-shadow),
    0 24px 48px color-mix(in srgb, var(--pfcustom-color-black) 48%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--pfcustom-color-white) 16%, transparent);
}

.pfcustom-landing .pfcustom-step-phone__frame {
  position: absolute;
  inset: 0.55rem;
  border-radius: 1.95rem;
  pointer-events: none;
  z-index: 2;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--pfcustom-color-black) 55%, transparent),
    inset 0 0 0 2px color-mix(in srgb, var(--pfcustom-color-white) 8%, transparent);
}

.pfcustom-landing .pfcustom-step-phone__island {
  position: absolute;
  top: 0.72rem;
  left: 50%;
  transform: translateX(-50%);
  width: 28%;
  min-width: 4.5rem;
  max-width: 5.75rem;
  height: 1.35rem;
  border-radius: 999px;
  background: var(--pfcustom-color-black);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--pfcustom-color-white) 8%, transparent);
}

.pfcustom-landing .pfcustom-step-phone__screen {
  position: relative;
  overflow: hidden;
  border-radius: 1.95rem;
  background: var(--pfcustom-color-black);
  line-height: 0;
}

.pfcustom-landing .pfcustom-step-phone__img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: center top;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

.pfcustom-landing .pfcustom-step-phone__home {
  display: block;
  width: 34%;
  max-width: 5.5rem;
  height: 0.28rem;
  margin: 0.55rem auto 0.15rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pfcustom-color-white) 42%, var(--pfcustom-color-black));
}

@media screen and (max-width: 850px) {
  .pfcustom-landing .pfcustom-landing-steps-demo__device--desktop {
        display: none;
      }
}

@media screen and (max-width: 850px) {
  .pfcustom-landing .pfcustom-landing-steps-demo__device--mobile {
        display: block;
      }
}



@media screen and (max-width: 850px) {
  .pfcustom-landing .pfcustom-step-phone {
        width: 100%;
        max-width: none;
        margin-inline: 0;
      }
}

@media screen and (max-width: 650px) {
  .pfcustom-landing .pfcustom-landing-steps-demo > .pfcustom-landing-steps-demo__head {
        text-align: left;
      }
}

@media screen and (max-width: 650px) {
  .pfcustom-landing .pfcustom-landing-steps-demo > .pfcustom-landing-steps-demo__head .pfcustom-features__lede {
        margin-left: 0;
        margin-right: 0;
        max-width: none;
      }
}

@media screen and (max-width: 650px) {
  .pfcustom-landing .pfcustom-landing-steps-demo__nav {
        margin-left: 0;
      }
}

@media screen and (max-width: 650px) {
  .pfcustom-landing .pfcustom-landing-steps-demo__copy {
        text-align: left;
      }
}

@media screen and (max-width: 650px) {
  .pfcustom-landing .pfcustom-landing-steps-demo__copy .pfcustom-features__lede {
        margin-left: 0;
        margin-right: 0;
        max-width: none;
      }
}



/* custom/css/components/modules/services/services/11-price.css */
/* Généré par docs/tools/themes-portfolios/theme-depart.php : copie de modules/services/services/11-price.css (tronc).
   Ce fichier est à vous : redessinez-le. */
@layer elements {
/* Part 11/11 de modules/services/services.css : composant « price » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


/* Réduction d'une période par rapport à la plus chère : pastille aux couleurs du bouton du thème. */
.pf-c-page .pf-c-price__discount {
    align-self: center;
    padding: 2px 8px;
    font-size: calc(var(--pf-font-size-base) * 0.8);
    font-weight: 700;
    color: var(--pf-button-text-color, #fff);
    background-color: var(--pf-button-background-color, #222);
    background-image: var(--pf-button-gradient, none);
}
}

/* Primitives retirées du HTML (grammaire, décision n° 1) : leur effet, dans la couche qu'elles occupaient, pour un
   rendu identique en mode commun. */
@layer socle {
/* Empilement : ancien « #services-slider .services-slider-item » de structure/layout/zindex.css (même spécificité,
   passe devant « .pf-c-page main article »). */
.pf-c-page .pf-c-services__item {
    z-index: 5;
}

/* ex-.pf-cols-3.pf-cols-md-1.pf-cols-sm-1 : 3 offres par ligne, 1 sur tablette et mobile. */
@layer general {
.pf-c-services__list {
    --cols-lg: initial;
    --cols-md: 1;
    --cols-sm: 1;
    --cols: 3;
    --cols-lg-auto: 3;
    display: grid;
    grid-template-rows: auto;
    gap: var(--layout-gap);
}
}

.pf-c-page .pf-c-services__list {
    --_cols: var(--cols);
    grid-template-columns: repeat(var(--_cols), 1fr);
}

@media screen and (min-width: 1101px) and (max-width: 1439px) {
    .pf-c-page .pf-c-services__list {
        --_cols: var(--cols-lg, var(--cols-lg-auto));
    }
}

@media screen and (max-width: 1100px) {
    .pf-c-page .pf-c-services__list {
        --_cols: var(--cols-md, var(--cols));
    }
}

@media screen and (max-width: 650px) {
    .pf-c-page .pf-c-services__list {
        --_cols: var(--cols-sm, var(--cols-md, var(--cols)));
    }
}

@media screen and (min-width: 1440px) {
    .pf-c-page .pf-c-services__list:is(.pf-w-content, [data-pf-width="content"], .pf-c-consent-prefs, :is(.pf-w-content, [data-pf-width="content"], .pf-c-consent-prefs) *) {
        --_cols: var(--cols-lg, var(--cols-lg-auto));
    }
}
}

@layer utilitaires {
/* ex-.pf-mb-md */
@layer general {
.pf-c-services__filter-bar {
    margin-bottom: var(--layout-space-y-md);
}
}
}

/* Couleur principale du site (réglage), autrefois en style="" dans le HTML : couche « reglages », la plus forte des
   couches normales, comme l'était le style en ligne. */
@layer reglages {
@layer general {
.pf-c-service__check {
    background-color: var(--pf-color-one);
}

.pf-c-pricing__promo {
    color: var(--pf-color-one);
}
}
}

/* Fusion : règles du site pour ce composant (venues de components/site/core-bridge.css) */
.pfcustom-landing .pfcustom-card--featured.pfcustom-pricing-card .pf-c-pricing__promo {
  color: var(--pfcustom-color-black);
}

/* Fusion : règles du site pour ce composant (venues de components/site/landings.css) */
.pfcustom-landing .pfcustom-card--featured.pfcustom-pricing-card .pf-c-pricing__promo {
  color: var(--pfcustom-color-black);
}

.pfcustom-landing .pfcustom-pricing-card .pf-c-pricing__promo {
  margin: 0.35rem 0 0;
  font-weight: 600;
  display: inline-block;
  padding: 0.25rem 0.65rem;
  background: rgba(127, 127, 127, 0.08);
  border-radius: var(--pf-border-radius-s, 0.35rem);
  color: var(--pfcustom-accent);
}

.pfcustom-landing .pfcustom-card--featured.pfcustom-pricing-card .pf-c-pricing__promo {
  color: var(--pfcustom-color-black);
  background: rgba(0, 0, 0, 0.06);
}

/* Plusieurs prix par service : un bloc par période, bascule via le menu .pfcustom-pricing__periods */
.pfcustom-landing .pfcustom-pricing-card .pf-c-pricing,
.pfcustom-landing .pfcustom-pricing-card .pf-c-pricing__period {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.pfcustom-landing .pfcustom-pricing-card .pf-c-pricing__period[hidden] {
  display: none;
}

/* Fusion : règles du site pour ce composant (venues de components/site/type.css) */
.pfcustom-landing .pfcustom-pricing-card .pf-c-pricing__promo {
  font-size: var(--pfcustom-type-caption-size);
}



}