/* ==========================================================================
   Rire & Photos — Design System
   Ethereal Glass × Asymmetrical Bento / Z-Axis Cascade
   ========================================================================== */

:root{
  --bg: #131318;
  --bg-rgb: 19,19,24;
  --bg-soft: #1b1b23;
  --surface: rgba(255,255,255,0.065);
  --surface-strong: rgba(255,255,255,0.105);
  --hairline: rgba(255,255,255,0.13);
  --hairline-strong: rgba(255,255,255,0.22);

  --ink: #f6f5f8;
  --ink-dim: #bcbbc6;
  --ink-faint: #8b8a97;

  --grad-orange: #ff8a3d;
  --grad-pink: #ff4d94;
  --grad-purple: #8b5cf6;

  --gradient-brand: linear-gradient(115deg, var(--grad-orange) 0%, var(--grad-pink) 52%, var(--grad-purple) 100%);
  --gradient-brand-soft: linear-gradient(115deg, rgba(255,138,61,0.18) 0%, rgba(255,77,148,0.16) 52%, rgba(139,92,246,0.18) 100%);

  --radius-xl: 2rem;
  --radius-lg: 1.5rem;
  --radius-md: 1.125rem;
  --radius-sm: 0.75rem;
  --radius-pill: 999px;

  --ease-fluid: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);

  --container: 1240px;
}

/* ---------------------------------------------------------------------- */
/* Reset                                                                    */
/* ---------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote{ margin: 0; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
img, svg{ display: block; max-width: 100%; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select{ font: inherit; color: inherit; background: none; border: none; }
input:focus, textarea:focus, select:focus{ outline: none; }

html{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body{
  background: var(--bg);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
}

.font-display{
  font-family: 'Clash Display', 'Plus Jakarta Sans', sans-serif;
}

h1, h2, h3, h4{
  font-family: 'Clash Display', 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------------- */
/* Ambient background — mesh gradient + grain (fixed, GPU-safe)            */
/* ---------------------------------------------------------------------- */
.ambient{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--bg);
}

.ambient__orb{
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.65;
  will-change: transform;
}
.ambient__orb--1{
  width: 46vw; height: 46vw;
  top: -14vw; left: -10vw;
  background: radial-gradient(circle at 30% 30%, var(--grad-orange), transparent 70%);
  animation: driftA 34s var(--ease-soft) infinite alternate;
}
.ambient__orb--2{
  width: 40vw; height: 40vw;
  top: 8vw; right: -14vw;
  background: radial-gradient(circle at 60% 40%, var(--grad-pink), transparent 70%);
  animation: driftB 28s var(--ease-soft) infinite alternate;
}
.ambient__orb--3{
  width: 50vw; height: 50vw;
  bottom: -20vw; left: 20vw;
  background: radial-gradient(circle at 50% 50%, var(--grad-purple), transparent 72%);
  opacity: 0.48;
  animation: driftC 40s var(--ease-soft) infinite alternate;
}

@keyframes driftA{ from{ transform: translate3d(0,0,0) scale(1);} to{ transform: translate3d(4%, 6%, 0) scale(1.08);} }
@keyframes driftB{ from{ transform: translate3d(0,0,0) scale(1);} to{ transform: translate3d(-6%, 4%, 0) scale(1.05);} }
@keyframes driftC{ from{ transform: translate3d(0,0,0) scale(1);} to{ transform: translate3d(3%, -5%, 0) scale(1.1);} }

.grain{
  position: fixed;
  inset: -10%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.page{
  position: relative;
  z-index: 2;
}

/* ---------------------------------------------------------------------- */
/* Layout helpers                                                          */
/* ---------------------------------------------------------------------- */
.wrap{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.5rem;
}
@media (min-width: 768px){ .wrap{ padding-inline: 2.5rem; } }

.section{ padding-block: 6rem; }
@media (min-width: 1024px){ .section{ padding-block: 9rem; } }
.section--tight{ padding-block: 4rem; }

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline-strong);
  background: var(--surface);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-dim);
}
.eyebrow i{ color: var(--grad-pink); font-size: 0.85rem; }

.text-gradient{
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section-head{
  max-width: 640px;
  margin-bottom: 3.5rem;
}
.section-head h2{ font-size: clamp(2.1rem, 4.2vw, 3.4rem); margin-top: 1rem; }
.section-head p{ margin-top: 1.1rem; color: var(--ink-dim); font-size: 1.05rem; max-width: 52ch; }
.section-head--center{ margin-inline: auto; text-align: center; }
.section-head--center p{ margin-inline: auto; }

/* ---------------------------------------------------------------------- */
/* Reveal on scroll                                                         */
/* ---------------------------------------------------------------------- */
.reveal{
  opacity: 0;
  transform: translateY(3.5rem);
  filter: blur(6px);
  transition: opacity 1s var(--ease-fluid), transform 1s var(--ease-fluid), filter 1s var(--ease-fluid);
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.reveal-stagger > *{ transition-delay: calc(var(--i, 0) * 90ms); }

/* ---------------------------------------------------------------------- */
/* Buttons — Island / Nested CTA architecture                              */
/* ---------------------------------------------------------------------- */
.btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0.4rem 0.4rem 1.5rem;
  border-radius: var(--radius-pill);
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
  transition: transform 0.5s var(--ease-fluid), box-shadow 0.5s var(--ease-fluid);
}
.btn:active{ transform: scale(0.97); }

.btn__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform 0.6s var(--ease-spring), background 0.4s var(--ease-fluid);
}

.btn--primary{
  background: var(--gradient-brand);
  color: #0a0a0c;
  box-shadow: 0 10px 30px -10px rgba(255, 77, 148, 0.55);
}
.btn--primary .btn__icon{ background: rgba(10,10,12,0.16); color: #0a0a0c; }
.btn--primary:hover{ box-shadow: 0 16px 40px -8px rgba(255, 77, 148, 0.7); }
.btn--primary:hover .btn__icon{ transform: translate(2px,-2px) scale(1.06); }

.btn--ghost{
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--hairline-strong);
  padding: 0.4rem 0.4rem 0.4rem 1.5rem;
}
.btn--ghost .btn__icon{ background: rgba(255,255,255,0.08); }
.btn--ghost:hover{ background: var(--surface-strong); border-color: rgba(255,255,255,0.28); }
.btn--ghost:hover .btn__icon{ transform: translate(2px,-2px) scale(1.06); }

.btn--sm{ padding: 0.3rem 0.3rem 0.3rem 1.1rem; font-size: 0.82rem; }
.btn--sm .btn__icon{ width: 2rem; height: 2rem; }

.btn--block{ width: 100%; justify-content: space-between; }

/* Text link with arrow */
.link-arrow{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink);
}
.link-arrow i{
  display: inline-flex;
  width: 1.9rem; height: 1.9rem;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--hairline);
  transition: transform 0.5s var(--ease-spring), background 0.4s ease, border-color .4s ease;
}
.link-arrow:hover i{ transform: translate(3px,-3px); background: var(--surface-strong); border-color: rgba(255,255,255,0.3); }

/* ---------------------------------------------------------------------- */
/* Nav — Fluid Island                                                      */
/* ---------------------------------------------------------------------- */
/* Le voile "nav-scrim" adoucit toute la bande du haut de l'écran (pas
   seulement sous la pilule de nav) pour que le texte qui défile sous la
   barre de navigation flottante ne s'affiche jamais en clair à côté ou
   à travers elle. */
.nav-scrim{
  position: fixed;
  inset: 0 0 auto 0;
  height: 7rem;
  z-index: 30;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--bg) 0%, rgba(var(--bg-rgb),0.82) 55%, rgba(var(--bg-rgb),0) 100%);
}

.nav-shell{
  position: fixed;
  top: 1.25rem;
  left: 0; right: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  padding-inline: 1rem;
  pointer-events: none;
}
.nav{
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: min(100%, 1040px);
  padding: 0.5rem 0.6rem 0.5rem 0.6rem;
  border-radius: var(--radius-pill);
  background: rgba(22,22,28,0.6);
  border: 1px solid var(--hairline);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  box-shadow: 0 20px 50px -20px rgba(0,0,0,0.6);
  transition: background 0.5s var(--ease-fluid), transform 0.5s var(--ease-fluid);
}

.nav__brand{
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-right: 0.5rem;
  flex-shrink: 0;
}
.nav__brand img{
  width: 2.5rem; height: 2.5rem;
  border-radius: 0.7rem;
  border: 1px solid var(--hairline-strong);
}
.nav__brand span{
  font-family: 'Clash Display', sans-serif;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  font-weight: 600;
  display: none;
}
@media (min-width: 560px){ .nav__brand span{ display: block; } }

.nav__links{
  display: none;
  align-items: center;
  gap: 0.15rem;
  margin-inline: auto;
}
@media (min-width: 900px){ .nav__links{ display: flex; } }

.nav__links a{
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-dim);
  white-space: nowrap;
  transition: color 0.4s ease, background 0.4s ease;
}
.nav__links a:hover, .nav__links a.is-active{ color: var(--ink); background: var(--surface); }

.nav__cta{ display: none; flex-shrink: 0; }
@media (min-width: 900px){ .nav__cta{ display: inline-flex; } }

.nav__toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--hairline);
  margin-left: auto;
  position: relative;
  flex-shrink: 0;
}
@media (min-width: 900px){ .nav__toggle{ display: none; } }

.nav__toggle span{
  position: absolute;
  left: 50%; top: 50%;
  width: 1.05rem; height: 1.5px;
  background: var(--ink);
  transform: translate(-50%, -4px);
  transition: transform 0.5s var(--ease-fluid), opacity 0.3s ease;
}
.nav__toggle span:last-child{ transform: translate(-50%, 4px); }
.nav__toggle.is-open span:first-child{ transform: translate(-50%,-50%) rotate(45deg); }
.nav__toggle.is-open span:last-child{ transform: translate(-50%,-50%) rotate(-45deg); }

.nav-overlay{
  position: fixed;
  inset: 0;
  z-index: 39;
  background: rgba(6,6,9,0.85);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease-fluid), visibility 0.5s;
}
.nav-overlay.is-open{ opacity: 1; visibility: visible; }
.nav-overlay a{
  font-family: 'Clash Display', sans-serif;
  font-size: 2.1rem;
  padding: 0.5rem 0;
  color: var(--ink-dim);
  opacity: 0;
  transform: translateY(3rem);
  transition: transform 0.7s var(--ease-fluid), opacity 0.7s var(--ease-fluid), color 0.3s ease;
}
.nav-overlay.is-open a{ opacity: 1; transform: translateY(0); }
.nav-overlay a:hover{ color: var(--ink); }
.nav-overlay a:nth-child(1){ transition-delay: 0.08s; }
.nav-overlay a:nth-child(2){ transition-delay: 0.14s; }
.nav-overlay a:nth-child(3){ transition-delay: 0.20s; }
.nav-overlay a:nth-child(4){ transition-delay: 0.26s; }
.nav-overlay a:nth-child(5){ transition-delay: 0.32s; }
.nav-overlay .nav-overlay__meta{
  margin-top: 2rem;
  opacity: 0;
  transform: translateY(2rem);
  transition: transform 0.7s var(--ease-fluid) 0.4s, opacity 0.7s var(--ease-fluid) 0.4s;
  text-align: center;
  color: var(--ink-faint);
  font-size: 0.85rem;
}
.nav-overlay.is-open .nav-overlay__meta{ opacity: 1; transform: translateY(0); }

body.nav-locked{ overflow: hidden; }

/* ---------------------------------------------------------------------- */
/* Double-Bezel card architecture                                          */
/* ---------------------------------------------------------------------- */
.bezel{
  background: rgba(255,255,255,0.055);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  padding: 0.4rem;
}
.bezel__core{
  background: linear-gradient(165deg, rgba(255,255,255,0.075), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: calc(var(--radius-xl) - 0.4rem);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.1);
  padding: 2rem;
  height: 100%;
}

/* ---------------------------------------------------------------------- */
/* Hero                                                                     */
/* ---------------------------------------------------------------------- */
.hero{
  padding-top: 9.5rem;
  padding-bottom: 5rem;
  position: relative;
  overflow: hidden;
  border-radius: 0 0 clamp(1.75rem, 5vw, 3.5rem) clamp(1.75rem, 5vw, 3.5rem);
}
@media (min-width: 1024px){ .hero{ padding-top: 12rem; padding-bottom: 6rem; } }

.hero__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero__bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  filter: blur(9px) saturate(1.1);
  transform: scale(1.15);
  opacity: 0.24;
}
.hero__bg::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(190deg, rgba(var(--bg-rgb),0.72) 0%, rgba(var(--bg-rgb),0.9) 55%, var(--bg) 100%),
    linear-gradient(100deg, rgba(var(--bg-rgb),0.65) 0%, rgba(139,92,246,0.1) 48%, rgba(255,77,148,0.12) 100%);
}
.hero__bg::after{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 35%, transparent 15%, var(--bg) 100%);
  opacity: 0.75;
}

.hero__grid{
  position: relative;
  z-index: 1;
  display: grid;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 1024px){
  .hero__grid{ grid-template-columns: 1.05fr 0.95fr; gap: 2rem; }
}

.hero h1{
  font-size: clamp(2.6rem, 6.4vw, 4.6rem);
  letter-spacing: -0.03em;
}
.hero__lede{
  margin-top: 1.5rem;
  font-size: 1.15rem;
  color: var(--ink-dim);
  max-width: 46ch;
}
.hero__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.4rem;
}

.hero__stats{
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 3rem;
}
.stat-chip{
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.9rem 1.2rem;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--hairline);
}
.stat-chip b{ font-family:'Clash Display',sans-serif; font-size: 1.3rem; }
.stat-chip span{ font-size: 0.72rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.08em; }

.hero__art{
  position: relative;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__art svg{ width: 100%; height: 100%; }
.hero__art .float-badge{
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  border-radius: var(--radius-pill);
  background: rgba(24,24,30,0.65);
  border: 1px solid var(--hairline-strong);
  backdrop-filter: blur(16px);
  font-size: 0.78rem;
  font-weight: 600;
  animation: floaty 6s var(--ease-soft) infinite;
}
.hero__art .float-badge i{ color: var(--grad-pink); }
.hero__art .float-badge--a{ top: 6%; left: -4%; animation-delay: 0s; }
.hero__art .float-badge--b{ bottom: 10%; right: -6%; animation-delay: 1.2s; }
@keyframes floaty{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-14px);} }

.hero__burst{ transform-origin: 200px 200px; animation: spinSlow 90s linear infinite; }
.hero__orbit{ transform-origin: 200px 200px; animation: spinSlow 50s linear infinite reverse; }
@keyframes spinSlow{ from{ transform: rotate(0deg);} to{ transform: rotate(360deg);} }

/* ---------------------------------------------------------------------- */
/* Marquee — événements                                                    */
/* ---------------------------------------------------------------------- */
.marquee{
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding-block: 1.6rem;
  overflow: hidden;
  position: relative;
}
.marquee::before, .marquee::after{
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 10%;
  z-index: 2;
  pointer-events: none;
}
.marquee::before{ left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.marquee::after{ right: 0; background: linear-gradient(-90deg, var(--bg), transparent); }

.marquee__track{
  display: flex;
  width: max-content;
  gap: 0.75rem;
  animation: scrollX 32s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state: paused; }
@keyframes scrollX{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

.tag-chip{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--hairline);
  font-size: 0.85rem;
  color: var(--ink-dim);
  white-space: nowrap;
}
.tag-chip i{ color: var(--grad-orange); font-size: 0.9rem; }

/* ---------------------------------------------------------------------- */
/* Bento grid — services                                                   */
/* ---------------------------------------------------------------------- */
.bento{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.25rem;
}
.bento > *{ grid-column: span 12; }
@media (min-width: 700px){
  .bento-services > *{ grid-column: span 6; }
}
/* Les 4 cartes n'ont pas toutes la même longueur de texte (la carte
   Photobooth est plus riche que les 3 autres) : on reste en 2 colonnes à
   toutes les tailles d'écran plutôt que de forcer 4 colonnes étroites, et
   on désactive l'étirement automatique des lignes de la grille pour que
   chaque carte garde sa hauteur naturelle au lieu d'être artificiellement
   étirée pour égaler la plus grande. */
.bento-services{ align-items: start; }

.service-card{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  min-height: 320px;
  overflow: hidden;
  transition: transform 0.6s var(--ease-fluid), box-shadow 0.6s var(--ease-fluid);
}
.service-card:hover{ transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(0,0,0,0.55); }
.service-card:hover .service-card__glow{ opacity: 0.85; }

.service-card__glow{
  position: absolute;
  inset: -20% -20% auto auto;
  width: 60%; height: 60%;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.service-card--photobooth .service-card__glow{ background: var(--grad-orange); }
.service-card--photocombi .service-card__glow{ background: var(--grad-purple); }
.service-card--polaroid .service-card__glow{ background: var(--grad-pink); }
.service-card--interactive .service-card__glow{ background: var(--gradient-brand); }

.service-card__icon{
  width: 3.4rem; height: 3.4rem;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--gradient-brand-soft);
  border: 1px solid var(--hairline-strong);
  position: relative;
  z-index: 1;
}
.service-card__icon svg{ width: 1.7rem; height: 1.7rem; }

.service-card__head{
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
  z-index: 1;
}
.service-card__head h3{ font-size: 1.6rem; }

.service-card__body{ position: relative; z-index: 1; }
.service-card__body p{ color: var(--ink-dim); font-size: 0.96rem; max-width: 42ch; }
.service-card__body p + p{ margin-top: 0.75rem; }
.service-card__tagline{ color: var(--ink) !important; font-weight: 600; font-size: 1rem !important; }
.service-card__body p strong{ color: var(--ink); font-weight: 700; }

.service-card__tags{
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin-top: 1rem;
  position: relative; z-index: 1;
}
.service-card__tags span{
  font-size: 0.72rem;
  color: var(--ink-faint);
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
}

.service-card__footer{
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.7rem 1rem;
  position: relative; z-index: 1;
}
.service-card__footer .link-arrow{ flex: 1 1 auto; min-width: 0; }
.service-card__footer .btn{ flex-shrink: 0; }

/* Feature illustration inside big card */
.service-card__illustration{
  position: absolute;
  right: -6%; bottom: -8%;
  width: 46%;
  opacity: 0.9;
  z-index: 0;
}

/* ---------------------------------------------------------------------- */
/* Options complémentaires                                                 */
/* ---------------------------------------------------------------------- */
.options-grid{
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 760px){ .options-grid{ grid-template-columns: repeat(2, 1fr); } }

.option-card__core{
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  height: 100%;
  padding: 0;
  overflow: hidden;
}
.option-card__core--icon{ padding: 2rem; }

.option-card__media{
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  border-radius: calc(var(--radius-xl) - 0.4rem) calc(var(--radius-xl) - 0.4rem) 0 0;
}
.option-card__media img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s var(--ease-fluid);
}
.option-card:hover .option-card__media img{ transform: scale(1.05); }
.option-card__media::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(18,18,22,0.7), transparent 55%);
}

.option-card__core > h3,
.option-card__core > p,
.option-card__core > .option-card__tag,
.option-card__core > .option-card__icon,
.option-card__core > .option-card__footer{
  margin-inline: 2rem;
}
.option-card__core > h3{ margin-top: 0; }
.option-card__core > p{ color: var(--ink-dim); font-size: 0.95rem; }
.option-card__core > *:last-child{ margin-bottom: 2rem; }

.option-card__footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.4rem;
}

.option-card__icon{
  width: 2.8rem; height: 2.8rem;
  margin-top: -3.2rem;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: rgba(24,24,30,0.72);
  border: 1px solid var(--hairline-strong);
  backdrop-filter: blur(10px);
  position: relative;
  z-index: 1;
}
.option-card__icon i{ font-size: 1.3rem; color: var(--ink); }
.option-card__icon--lg{
  margin-top: 0;
  width: 3.4rem; height: 3.4rem;
  background: var(--gradient-brand-soft);
  border: 1px solid var(--hairline-strong);
}

.option-card__tag{
  display: inline-block;
  width: fit-content;
  font-size: 0.72rem;
  color: var(--ink-faint);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
}

/* ---------------------------------------------------------------------- */
/* Message d'accueil — audience split (particuliers / professionnels)      */
/* ---------------------------------------------------------------------- */
.audience-grid{
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(1, 1fr);
  margin-top: 2.75rem;
}
@media (min-width: 700px){ .audience-grid{ grid-template-columns: repeat(2, 1fr); } }

.audience-card{
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  height: 100%;
}
.audience-card h3{ font-size: 1.25rem; }
.audience-card p{ color: var(--ink-dim); font-size: 0.96rem; }

.welcome-tags{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem 1.2rem;
  margin-top: 2.75rem;
  font-size: 0.92rem;
  color: var(--ink-dim);
}
.welcome-tags span:not(.welcome-tags__dot){ display: inline-flex; align-items: center; gap: 0.4rem; }
.welcome-tags i{ color: var(--grad-orange); font-size: 1rem; }
.welcome-tags__dot{ color: var(--ink-faint); }

.welcome-closing{
  text-align: center;
  margin-top: 1.75rem;
  font-size: 1.1rem;
  color: var(--ink-dim);
  max-width: 60ch;
  margin-inline: auto;
}

/* ---------------------------------------------------------------------- */
/* Feature grid — avantages                                                */
/* ---------------------------------------------------------------------- */
.feature-grid{
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 700px){ .feature-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px){ .feature-grid{ grid-template-columns: repeat(4, 1fr); } }

/* Triple grid — used for the Borne interactive games */
.game-grid{
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 700px){ .game-grid{ grid-template-columns: repeat(3, 1fr); } }

/* ---------------------------------------------------------------------- */
/* Promo banner — highlight strip reused across the prestation pages       */
/* ---------------------------------------------------------------------- */
.promo-banner{
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem 2.25rem;
  flex-wrap: wrap;
}
.promo-banner__icon{
  flex-shrink: 0;
  width: 3.6rem; height: 3.6rem;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--gradient-brand-soft);
  border: 1px solid var(--hairline-strong);
}
.promo-banner__icon i{
  font-size: 1.6rem;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.promo-banner__body{ flex: 1; min-width: 220px; }
.promo-banner__body h3{ font-size: 1.3rem; }
.promo-banner__body p{ color: var(--ink-dim); margin-top: 0.3rem; font-size: 0.98rem; }

.feature-card{ height: 100%; }
.feature-card .bezel__core{ display: flex; flex-direction: column; gap: 1.1rem; }
.feature-card__icon{
  width: 2.8rem; height: 2.8rem;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-strong);
  border: 1px solid var(--hairline);
}
.feature-card__icon i{ font-size: 1.3rem; background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.feature-card h4{ font-size: 1.1rem; }
.feature-card p{ color: var(--ink-dim); font-size: 0.9rem; }

/* ---------------------------------------------------------------------- */
/* Ambiance / mood tiles                                                   */
/* ---------------------------------------------------------------------- */
.mood-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem;
}

.mood-tile{
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--hairline);
  display: flex;
  align-items: flex-end;
  padding: 1.2rem;
  isolation: isolate;
  transition: transform 0.6s var(--ease-fluid);
}
.mood-tile:hover{ transform: translateY(-4px); }
.mood-tile img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -3;
  transition: transform 0.9s var(--ease-fluid);
}
.mood-tile:hover img{ transform: scale(1.06); }
.mood-tile::before{
  content: "";
  position: absolute; inset: 0;
  background: var(--mood-grad, var(--gradient-brand-soft));
  opacity: var(--mood-tint-opacity, 0.9);
  mix-blend-mode: var(--mood-blend, normal);
  z-index: -2;
}
.mood-tile::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(4,4,6,0.85) 0%, rgba(4,4,6,0.15) 55%, transparent 75%);
  z-index: -1;
}
.mood-tile svg{ position: absolute; top: 1.2rem; left: 1.2rem; width: 1.8rem; height: 1.8rem; opacity: 0.85; z-index: 1; filter: drop-shadow(0 1px 4px rgba(0,0,0,0.5)); }
.mood-tile span{ position: relative; z-index: 1; font-family:'Clash Display',sans-serif; font-size: 1.05rem; letter-spacing: -0.01em; text-shadow: 0 1px 8px rgba(0,0,0,0.5); }

/* Galerie photo des pages services (tuiles non teintées, format portrait) */
.photo-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
}
@media (min-width: 640px){ .photo-grid{ grid-template-columns: repeat(3, 1fr); } }
.photo-grid .mood-tile{ aspect-ratio: 3/4; --mood-tint-opacity: 0; }

/* ---------------------------------------------------------------------- */
/* Testimonials — Z-Axis Cascade                                           */
/* ---------------------------------------------------------------------- */
.cascade{
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 860px){
  .cascade{ grid-template-columns: repeat(3, 1fr); gap: 1.75rem; padding-block: 1rem 2rem; }
  .cascade > *:nth-child(1){ transform: rotate(-2deg) translateY(8px); }
  .cascade > *:nth-child(2){ transform: rotate(1.4deg) translateY(-10px); z-index: 1; }
  .cascade > *:nth-child(3){ transform: rotate(-1deg) translateY(6px); }
  .cascade > *{ transition: transform 0.6s var(--ease-fluid); }
  .cascade > *:hover{ transform: rotate(0deg) translateY(-6px) scale(1.02); z-index: 2; }
}

.testimonial{ height: 100%; }
.testimonial .bezel__core{ display: flex; flex-direction: column; gap: 1.2rem; }
.testimonial__stars{ display: flex; gap: 0.2rem; }
.testimonial__stars svg{ width: 1rem; height: 1rem; }
.testimonial p{ font-size: 1.02rem; color: var(--ink); }
.testimonial__person{ display: flex; align-items: center; gap: 0.8rem; margin-top: auto; }
.avatar-mono{
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--gradient-brand);
  color: #0a0a0c;
  font-family: 'Clash Display', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  flex-shrink: 0;
  overflow: hidden;
  padding: 0;
  border: none;
}
.avatar-mono img{
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.testimonial__person div span{ display: block; }
.testimonial__person .name{ font-weight: 600; font-size: 0.92rem; }
.testimonial__person .role{ font-size: 0.78rem; color: var(--ink-faint); }

/* ---------------------------------------------------------------------- */
/* Sub-page hero (service pages)                                           */
/* ---------------------------------------------------------------------- */
.page-hero{
  padding-top: 9.5rem;
  padding-bottom: 3rem;
}
@media (min-width: 1024px){ .page-hero{ padding-top: 11.5rem; } }
.page-hero__crumb{
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.8rem; color: var(--ink-faint);
  margin-bottom: 1.4rem;
}
.page-hero__crumb a:hover{ color: var(--ink); }
.page-hero h1{ font-size: clamp(2.4rem, 5.6vw, 4rem); max-width: 16ch; }
.page-hero p{ margin-top: 1.2rem; font-size: 1.08rem; color: var(--ink-dim); max-width: 56ch; }

.spec-row{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 3rem;
}
@media (min-width: 700px){ .spec-row{ grid-template-columns: repeat(4, 1fr); } }
.spec-card{ text-align: center; }
.spec-card .bezel__core{ padding: 1.4rem 1rem; }
.spec-card b{ display:block; font-family:'Clash Display',sans-serif; font-size: 1.4rem; }
.spec-card span{ display:block; margin-top: 0.3rem; font-size: 0.74rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.06em; }

.detail-list{ display: flex; flex-direction: column; gap: 1rem; }
.detail-list li{
  display: flex; align-items: flex-start; gap: 0.9rem;
  padding: 1.1rem 1.3rem;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--hairline);
}
.detail-list i{
  flex-shrink: 0;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--gradient-brand-soft);
  color: var(--grad-pink);
  font-size: 1rem;
  margin-top: 0.1rem;
}
.detail-list strong{ display: block; font-size: 0.98rem; margin-bottom: 0.15rem; }
.detail-list span.desc{ color: var(--ink-dim); font-size: 0.9rem; }

/* Split section (image/illustration + text) */
.split{
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 960px){ .split{ grid-template-columns: 1fr 1fr; gap: 3.5rem; } }
.split.split--rev{ direction: rtl; }
.split.split--rev > *{ direction: ltr; }
.split__art{ aspect-ratio: 1/1; display:flex; align-items:center; justify-content:center; }

/* ---------------------------------------------------------------------- */
/* Steps                                                                    */
/* ---------------------------------------------------------------------- */
.steps{
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  counter-reset: step;
}
@media (min-width: 780px){ .steps{ grid-template-columns: repeat(3, 1fr); } }
.step .bezel__core{ display:flex; flex-direction:column; gap: 0.9rem; }
.step__num{
  counter-increment: step;
  font-family:'Clash Display',sans-serif;
  font-size: 0.85rem;
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  display: flex; align-items:center; justify-content:center;
  background: var(--surface-strong);
  border: 1px solid var(--hairline-strong);
}
.step__num::before{ content: counter(step, decimal-leading-zero); }
.step h4{ font-size: 1.05rem; }
.step p{ color: var(--ink-dim); font-size: 0.9rem; }

/* ---------------------------------------------------------------------- */
/* Contact / CTA                                                           */
/* ---------------------------------------------------------------------- */
.cta-panel{
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
}
.contact-grid{
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
}
@media (min-width: 940px){ .contact-grid{ grid-template-columns: 1.05fr 0.95fr; } }

.contact-info{
  padding: 2.6rem;
  background: linear-gradient(165deg, rgba(255,138,61,0.12), rgba(139,92,246,0.14));
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  justify-content: space-between;
}
@media (min-width: 1024px){ .contact-info{ padding: 3.4rem; } }
.contact-info h3{ font-size: 1.8rem; }
.contact-info > p{ color: var(--ink-dim); margin-top: 0.8rem; max-width: 40ch; }

.contact-methods{ display: flex; flex-direction: column; gap: 0.9rem; }
.contact-method{
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-md);
  background: rgba(20,20,25,0.4);
  border: 1px solid var(--hairline);
  transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s var(--ease-fluid);
}
.contact-method:hover{ background: rgba(20,20,25,0.55); transform: translateX(4px); }
.contact-method i{
  width: 2.2rem; height: 2.2rem; flex-shrink: 0;
  border-radius: 50%;
  display: flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.08);
  font-size: 1rem;
}
.contact-method strong{ display:block; font-size: 0.92rem; }
.contact-method span{ display:block; font-size: 0.8rem; color: var(--ink-faint); }

.contact-form{
  padding: 2.6rem;
  background: rgba(22,22,28,0.6);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
@media (min-width: 1024px){ .contact-form{ padding: 3.4rem; } }

.field{ display: flex; flex-direction: column; gap: 0.5rem; }
.field label{ font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-faint); }
.field input, .field select, .field textarea{
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--hairline);
  transition: border-color 0.4s ease, background 0.4s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: rgba(255,138,61,0.55);
  background: rgba(255,255,255,0.06);
}
/* Le menu déroulant natif d'un <select> s'affiche hors du contrôle du CSS du
   site (fond blanc géré par le navigateur/l'OS) : on fixe donc explicitement
   la couleur des options pour qu'elles restent lisibles sur ce fond clair,
   plutôt que d'hériter la couleur claire prévue pour le thème sombre. */
.field select option{
  color: #1a1a1a;
  background: #fff;
}
.field textarea{ resize: vertical; min-height: 90px; }
.field-row{ display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
@media (min-width: 560px){ .field-row{ grid-template-columns: 1fr 1fr; } }

.form-note{ font-size: 0.78rem; color: var(--ink-faint); }
.form-success{
  display: none;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-sm);
  background: rgba(139,92,246,0.14);
  border: 1px solid rgba(139,92,246,0.35);
  font-size: 0.88rem;
}
.form-success.is-visible{ display: flex; }

.form-error{
  display: none;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-sm);
  background: rgba(255,138,61,0.12);
  border: 1px solid rgba(255,138,61,0.4);
  font-size: 0.88rem;
  color: var(--ink-dim);
}
.form-error a{ color: var(--ink); text-decoration: underline; text-decoration-color: rgba(255,255,255,0.3); }
.form-error.is-visible{ display: flex; }

.btn[disabled]{ opacity: 0.7; pointer-events: none; }

/* ---------------------------------------------------------------------- */
/* Footer                                                                   */
/* ---------------------------------------------------------------------- */
.footer{
  padding-top: 5rem;
  padding-bottom: 2.5rem;
  border-top: 1px solid var(--hairline);
  margin-top: 4rem;
}
.footer__top{
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 860px){ .footer__top{ grid-template-columns: 1.3fr 0.8fr 0.8fr 1fr; gap: 2rem; } }

.footer__brand{ display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1rem; }
.footer__brand img{ width: 2.6rem; height: 2.6rem; border-radius: 0.7rem; border: 1px solid var(--hairline-strong); }
.footer__brand span{ font-family: 'Clash Display', sans-serif; font-size: 1.1rem; }
.footer p.tagline{ color: var(--ink-dim); font-size: 0.92rem; max-width: 32ch; }

.footer h5{ font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-faint); margin-bottom: 1.1rem; }
.footer ul{ display: flex; flex-direction: column; gap: 0.7rem; }
.footer a{ font-size: 0.9rem; color: var(--ink-dim); transition: color 0.3s ease; }
.footer a:hover{ color: var(--ink); }

.footer__social{
  display: inline-flex; align-items:center; justify-content:center;
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--hairline);
  margin-top: 0.6rem;
}
.footer__social:hover{ background: var(--surface-strong); }

.footer__bottom{
  margin-top: 3.5rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--ink-faint);
}
@media (min-width: 700px){ .footer__bottom{ flex-direction: row; align-items:center; justify-content: space-between; } }
.footer__bottom nav{ display: flex; gap: 1.4rem; }
.footer__bottom a:hover{ color: var(--ink-dim); }

/* ---------------------------------------------------------------------- */
/* Legal pages                                                             */
/* ---------------------------------------------------------------------- */
.legal{ padding-top: 10.5rem; padding-bottom: 6rem; }
.legal__content{ max-width: 760px; margin-inline: auto; }
.legal__content h1{ font-size: clamp(2rem, 4.4vw, 2.8rem); margin-bottom: 2.5rem; }
.legal__content h2{ font-size: 1.25rem; margin-top: 2.6rem; margin-bottom: 0.9rem; }
.legal__content h2:first-of-type{ margin-top: 0; }
.legal__content p{ color: var(--ink-dim); font-size: 0.96rem; margin-bottom: 1rem; }
.legal__content p strong{ color: var(--ink); font-weight: 600; }
.legal__content ul{ display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.legal__content li{ color: var(--ink-dim); font-size: 0.96rem; padding-left: 1.2rem; position: relative; }
.legal__content li::before{ content:""; position:absolute; left:0; top:0.6em; width:5px; height:5px; border-radius:50%; background: var(--grad-pink); }
.legal__content a{ color: var(--ink); text-decoration: underline; text-decoration-color: var(--hairline-strong); text-underline-offset: 3px; }

/* ---------------------------------------------------------------------- */
/* Utilities                                                                */
/* ---------------------------------------------------------------------- */
.mt-0{ margin-top: 0 !important; }
.hidden{ display: none !important; }
.center{ text-align: center; }

@media (max-width: 767px){
  .split.split--rev{ direction: ltr; }
}