/* ============================================================
   AGENCE BELLONI — Design system
   ============================================================ */

:root {
  --color-black: #0a0a0a;
  --color-black-soft: #121212;
  --color-white: #ffffff;
  --color-off: #f4f2ec;
  --color-yellow: #cfba9c;
  --color-yellow-soft: #e6dac8;
  --color-gray: #8a8a8a;
  --color-gray-line: rgba(255, 255, 255, 0.12);
  --color-line-dark: rgba(10, 10, 10, 0.12);
  --color-surface-hover: #161616;
  --color-cta-glow: #1a1a1a;
  --color-header-scrim: rgba(10, 10, 10, 0.7);
  /* Fixed dark ink for text sitting on surfaces that never change with the
     theme (the yellow accent, or the always-light --color-off panels) —
     unlike --color-black, this never gets redefined in light mode. */
  --color-ink: #0a0a0a;

  --font-display: "Space Grotesk", sans-serif;
  --font-body: "DM Sans", sans-serif;
  --font-mono: "Syncopate", sans-serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);

  --container: 1280px;
  --radius: 20px;

  --space-section: clamp(5rem, 10vw, 9rem);
}

/* ---------- Light theme ---------- */
:root[data-theme="light"] {
  --color-black: #f7f5f0;
  --color-black-soft: #ffffff;
  --color-white: #14120f;
  --color-gray: #5c5a55;
  --color-gray-line: rgba(10, 10, 10, 0.12);
  --color-surface-hover: #efece3;
  --color-cta-glow: #eeeae0;
  --color-header-scrim: rgba(247, 245, 240, 0.75);
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: auto;
  background: var(--color-black);
}

body {
  font-family: var(--font-body);
  background: var(--color-black);
  color: var(--color-white);
  line-height: 1.5;
  font-size: 16px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

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

ul {
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

input,
textarea {
  font: inherit;
  color: inherit;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.05;
  font-weight: 600;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

section[id],
#top {
  scroll-margin-top: 96px;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-yellow);
  color: var(--color-ink);
  padding: 0.75rem 1.25rem;
  z-index: 999;
  font-weight: 700;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

:focus-visible {
  outline: 2px solid var(--color-yellow);
  outline-offset: 3px;
}

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

/* ---------- Preloader ---------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--color-black);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.preloader__count {
  font-family: var(--font-display);
  font-size: clamp(3rem, 12vw, 7rem);
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: -0.02em;
}
.preloader__count::after {
  content: "%";
  color: var(--color-yellow);
  font-size: 0.4em;
  margin-left: 0.25rem;
}

.preloader__bar {
  width: min(60vw, 320px);
  height: 2px;
  background: var(--color-gray-line);
  overflow: hidden;
}
.preloader__bar span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--color-yellow);
}

/* ---------- Custom cursor ---------- */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 150;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.cursor__dot {
  position: fixed;
  top: 0; left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-yellow);
  transform: translate(-50%, -50%);
  transition: opacity 0.2s;
}
.cursor__ring {
  position: fixed;
  top: 0; left: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(207, 186, 156, 0.6);
  transform: translate(-50%, -50%);
  transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out), border-color 0.3s, background 0.3s;
}
.cursor.is-link .cursor__ring {
  width: 70px;
  height: 70px;
  background: rgba(207, 186, 156, 0.12);
}
.cursor.is-view .cursor__ring {
  width: 90px;
  height: 90px;
  background: var(--color-yellow);
  border-color: var(--color-yellow);
}
.cursor.is-view::after {
  content: "VOIR";
  position: fixed;
  top: 0; left: 0;
  transform: translate(-50%, -50%);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

@media (hover: none), (pointer: coarse) {
  .cursor { display: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 100px;
  cursor: pointer;
  min-height: 44px;
  position: relative;
  transition: transform 0.4s var(--ease-elastic), background 0.3s, color 0.3s, border-color 0.3s;
}

.btn--fill {
  background: var(--color-yellow);
  color: var(--color-ink);
}
.btn--fill:hover {
  transform: translateY(-2px) scale(1.03);
}

.btn--ghost {
  border: 1px solid var(--color-gray-line);
  color: var(--color-white);
}
.btn--ghost:hover {
  border-color: var(--color-yellow);
  color: var(--color-yellow);
}

.btn--pill {
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--color-gray-line);
  font-size: 0.85rem;
}
.btn--pill:hover {
  border-color: var(--color-yellow);
  background: var(--color-yellow);
  color: var(--color-ink);
}

/* ---------- Section shared ---------- */
.section-tag {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-yellow);
  margin-bottom: 1rem;
}
.section-tag--light { color: var(--color-ink); opacity: 0.6; }

.section-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  letter-spacing: -0.02em;
}
.section-title--light { color: var(--color-ink); }

/* ============================================================
   HEADER
   ============================================================ */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding-block: 1.25rem;
  transition: transform 0.5s var(--ease-out), background 0.4s, backdrop-filter 0.4s, padding 0.3s;
}
.header.is-scrolled {
  background: var(--color-header-scrim);
  backdrop-filter: blur(12px);
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--color-gray-line);
}
.header.is-hidden {
  transform: translateY(-100%);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.logo {
  display: flex;
  align-items: center;
}
.logo__img-wrap {
  display: inline-flex;
}
.logo__img {
  height: 40px;
  width: auto;
  transition: opacity 0.3s;
}
.logo:hover .logo__img {
  opacity: 0.85;
}
.logo__img--light {
  display: none;
}
[data-theme="light"] .logo__img--dark {
  display: none;
}
[data-theme="light"] .logo__img--light {
  display: block;
}

.nav__list {
  display: flex;
  gap: clamp(1rem, 2vw, 2.25rem);
}
.nav__list a {
  position: relative;
  font-size: 0.92rem;
  padding-block: 0.25rem;
}
.nav__list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 1px;
  background: var(--color-yellow);
  transition: width 0.3s var(--ease-out);
}
.nav__list a:hover::after {
  width: 100%;
}

.header__cta {
  white-space: nowrap;
}

.theme-toggle {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--color-gray-line);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s;
}
.theme-toggle:hover {
  border-color: var(--color-yellow);
  color: var(--color-yellow);
}
.theme-toggle__icon {
  position: absolute;
  width: 18px;
  height: 18px;
  transition: opacity 0.35s ease, transform 0.45s var(--ease-elastic);
}
.theme-toggle__icon--moon {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}
.theme-toggle__icon--sun {
  opacity: 0;
  transform: scale(0.4) rotate(-70deg);
}
[data-theme="light"] .theme-toggle__icon--moon {
  opacity: 0;
  transform: scale(0.4) rotate(70deg);
}
[data-theme="light"] .theme-toggle__icon--sun {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  z-index: 120;
}
.burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-white);
  transition: transform 0.35s var(--ease-out), opacity 0.25s, background 0.3s;
}
.burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Mobile menu ---------- */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--color-black);
  z-index: 110;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 6.5rem 1.5rem 2.5rem;
  clip-path: circle(0px at calc(100% - 40px) 40px);
  transition: clip-path 0.6s var(--ease-out);
  pointer-events: none;
}
.mobile-menu.is-open {
  clip-path: circle(150% at calc(100% - 40px) 40px);
  pointer-events: auto;
}

.mobile-menu__list li a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 9vw, 3rem);
  font-weight: 600;
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--color-gray-line);
}
.mobile-menu__list li a span {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-yellow);
}

.mobile-menu__footer {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  color: var(--color-gray);
}
.mobile-menu__footer a {
  color: var(--color-white);
}
.mobile-menu__socials {
  display: flex;
  gap: 1.25rem;
  font-size: 0.85rem;
}

body.menu-open,
body.modal-open {
  overflow: hidden;
}

/* ============================================================
   PROJECT DETAIL MODAL
   ============================================================ */
.project-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease-out);
}
.project-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.project-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.82);
  backdrop-filter: blur(6px);
}
.project-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 860px;
  max-height: 88vh;
  background: var(--color-black-soft);
  border: 1px solid var(--color-gray-line);
  border-radius: var(--radius);
  overflow: hidden;
  transform: translateY(24px) scale(0.98);
  transition: transform 0.4s var(--ease-out);
}
.project-modal.is-open .project-modal__panel {
  transform: translateY(0) scale(1);
}
.project-modal__scroll {
  max-height: 88vh;
  overflow-y: auto;
}
.project-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.65);
  backdrop-filter: blur(4px);
  border: 1px solid var(--color-gray-line);
  color: var(--color-white);
  transition: border-color 0.3s, color 0.3s, transform 0.3s var(--ease-elastic);
}
.project-modal__close:hover {
  border-color: var(--color-yellow);
  color: var(--color-yellow);
  transform: rotate(90deg);
}
.project-modal__close svg {
  width: 18px;
  height: 18px;
}
.project-modal__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 2px;
}
.project-modal__gallery .travaux__media {
  aspect-ratio: 1;
  width: 100%;
  height: 100%;
}
.project-modal__body {
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.project-modal__body h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin-top: 0.5rem;
}
.project-modal__desc {
  color: var(--color-gray);
  margin-top: 1rem;
  max-width: 42rem;
  font-size: 0.98rem;
}
.project-modal__meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-gray-line);
}
.project-modal__meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.project-modal__meta-item--wide {
  grid-column: 1 / -1;
}
.project-modal__meta-item span {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-yellow);
}
.project-modal__meta-item strong {
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--color-white);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 6rem;
  padding-bottom: 5.5rem;
  overflow: hidden;
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.9;
}

.hero__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  mask-image: radial-gradient(circle at 50% 30%, black 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at 50% 30%, black 10%, transparent 70%);
}

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

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gray);
  margin-bottom: 1.5rem;
}
.eyebrow__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-yellow);
  box-shadow: 0 0 12px 2px rgba(207, 186, 156, 0.6);
  animation: pulse 2s infinite ease-in-out;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

.hero__title {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 0.12em;
  font-size: clamp(2.6rem, 8.2vw, 6.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.hero__title em {
  font-style: normal;
  color: var(--color-yellow);
}
.hero__title--outline {
  -webkit-text-stroke: 1.5px var(--color-white);
  color: transparent;
}
.hero__title--outline em {
  -webkit-text-stroke: 1.5px var(--color-yellow);
  color: transparent;
}

.reveal-word {
  overflow: visible;
  display: block;
}

.hero__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  margin-top: clamp(2rem, 5vw, 3.5rem);
}

.hero__lead {
  max-width: 32rem;
  color: var(--color-gray);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
}

.hero__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.hero__scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  width: fit-content;
  margin-top: clamp(2.5rem, 6vw, 4rem);
}
.hero__scroll span {
  width: 1px;
  height: 40px;
  background: linear-gradient(var(--color-yellow), transparent);
  animation: scrollLine 1.8s infinite ease-in-out;
}
.hero__scroll p {
  writing-mode: vertical-rl;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: var(--color-gray);
}
@keyframes scrollLine {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  50.1% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@media (max-width: 640px) {
  .hero__scroll { display: none; }
}

.hero__marquee {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  border-top: 1px solid var(--color-gray-line);
  padding-block: 1.1rem;
  overflow: hidden;
  white-space: nowrap;
}
.marquee__track {
  display: inline-flex;
  gap: 2.5rem;
  align-items: center;
  animation: marquee 26s linear infinite;
  will-change: transform;
}
.marquee__track span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.9rem, 1.8vw, 1.3rem);
  color: var(--color-gray);
  text-transform: uppercase;
}
.marquee__track span:nth-child(2n) {
  color: var(--color-yellow);
  font-size: 0.8em;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============================================================
   STATS
   ============================================================ */
.stats {
  border-top: 1px solid var(--color-gray-line);
  border-bottom: 1px solid var(--color-gray-line);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
@media (min-width: 768px) {
  .stats__grid { grid-template-columns: repeat(4, 1fr); }
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 700;
  color: var(--color-yellow);
}
.stat__label {
  color: var(--color-gray);
  font-size: 0.9rem;
}

/* ============================================================
   STUDIO / ABOUT (light section)
   ============================================================ */
.studio {
  background: var(--color-off);
  color: var(--color-ink);
  padding-block: var(--space-section);
  overflow: clip;
}
.studio__grid {
  display: grid;
  gap: clamp(3rem, 6vw, 5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .studio__grid {
    grid-template-columns: 0.85fr 1.15fr;
  }
}

.studio__visual {
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 10 / 9;
  margin-inline: auto;
}
@media (min-width: 900px) {
  .studio__visual {
    max-width: none;
    margin-inline: 0;
  }
}
.studio__card {
  position: absolute;
  width: 62%;
  aspect-ratio: 3/4;
  border-radius: var(--radius);
  overflow: hidden;
  transform-style: preserve-3d;
  box-shadow: 0 30px 60px -20px rgba(10, 10, 10, 0.3);
}
.studio__card--1 {
  background: var(--color-yellow);
  top: -2%;
  left: -18%;
  z-index: 2;
}
.studio__card--2 {
  background: var(--color-yellow);
  bottom: 0;
  right: 0;
  z-index: 1;
}
@media (max-width: 899px) {
  .studio__card--1 {
    left: 2%;
  }
  .studio__card--2 {
    right: 2%;
  }
}
@media (max-width: 640px) {
  .studio__visual {
    max-width: 300px;
  }
  .studio__card {
    width: 56%;
  }
}
.studio__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.studio__badge {
  position: absolute;
  top: -1%;
  right: 1%;
  width: 75px;
  height: 75px;
  z-index: 3;
  animation: spin 16s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .studio__badge { animation: none; }
}
.studio__badge-svg { width: 100%; height: 100%; }
.studio__badge-svg text { fill: #14120f; }
.studio__badge-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--color-yellow);
  -webkit-text-stroke: 1px #14120f;
  font-size: 1.4rem;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.studio__content { max-width: 40rem; }
.studio__text {
  color: rgba(10, 10, 10, 0.72);
  margin-top: 1rem;
  font-size: clamp(1rem, 1.3vw, 1.05rem);
}
.studio__signature {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-line-dark);
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
}
.studio__signature-loc {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--color-yellow-soft);
  background: var(--color-ink);
  display: inline-block;
  width: fit-content;
  padding: 0.3rem 0.6rem;
  margin-top: 0.5rem;
  border-radius: 4px;
}

/* ============================================================
   SERVICES
   ============================================================ */
.services {
  padding-block: var(--space-section);
}
.services__head {
  max-width: 40rem;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

.services__grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .services__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .services__grid { grid-template-columns: repeat(4, 1fr); }
}

.service-card {
  position: relative;
  background: var(--color-black-soft);
  border: 1px solid var(--color-gray-line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  transform-style: preserve-3d;
  perspective: 800px;
  transition: border-color 0.4s, background 0.4s, box-shadow 0.4s;
}
.service-card:hover {
  border-color: rgba(207, 186, 156, 0.5);
  background: var(--color-surface-hover);
  box-shadow: 0 20px 45px -20px rgba(207, 186, 156, 0.18);
}
.service-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}
.service-card__num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-gray);
}
.service-card__icon {
  width: 30px;
  height: 30px;
  color: var(--color-yellow);
  transition: transform 0.4s var(--ease-elastic);
}
.service-card:hover .service-card__icon {
  transform: rotate(-12deg) scale(1.1);
}
.service-card h3 {
  font-size: 1.4rem;
  margin-bottom: 0.6rem;
}
.service-card p {
  color: var(--color-gray);
  font-size: 0.92rem;
}
.service-card__list {
  margin-top: 1.5rem;
  border-top: 1px solid var(--color-gray-line);
}
.service-card__list li {
  position: relative;
  padding: 0.7rem 0 0.7rem 1.15rem;
  border-bottom: 1px solid var(--color-gray-line);
  font-size: 0.92rem;
  color: var(--color-white);
}
.service-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.15rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-yellow);
}

/* ============================================================
   PROCESS (light section)
   ============================================================ */
.process {
  background: var(--color-off);
  color: var(--color-ink);
  padding-block: var(--space-section);
}
.process__list {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  border-top: 1px solid var(--color-line-dark);
}
.process__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--color-line-dark);
  align-items: baseline;
  transition: padding-left 0.4s var(--ease-out);
}
.process__item:hover {
  padding-left: 1rem;
}
.process__index {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--color-yellow);
  -webkit-text-stroke: 1px var(--color-black);
}
.process__body h3 {
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  margin-bottom: 0.5rem;
}
.process__body p {
  color: rgba(10, 10, 10, 0.68);
  max-width: 38rem;
}
@media (min-width: 720px) {
  .process__item { grid-template-columns: 120px 1fr; }
}

/* ============================================================
   TRAVAUX / PORTFOLIO
   ============================================================ */
.travaux {
  padding-block: var(--space-section);
}
.travaux__head {
  max-width: 40rem;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}
.travaux__grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .travaux__grid { grid-template-columns: repeat(2, 1fr); }
}

.travaux__more {
  display: flex;
  justify-content: center;
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
}

/* ---------- Galerie page ---------- */
.travaux--page {
  padding-top: clamp(2rem, 5vw, 3rem);
}
.gallery-hero {
  padding-top: clamp(8rem, 16vw, 11rem);
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
}
.gallery-hero__title {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  letter-spacing: -0.02em;
  max-width: 24ch;
  margin-top: 1.25rem;
}
.gallery-hero__title em {
  font-style: normal;
  color: var(--color-yellow);
}
.gallery-hero__lead {
  color: var(--color-gray);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  max-width: 36rem;
  margin-top: 1.25rem;
}

.travaux__item {
  display: block;
  width: 100%;
  text-align: left;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  perspective: 800px;
  transform-style: preserve-3d;
}
.travaux__media {
  aspect-ratio: 4/3;
  width: 100%;
  background: var(--color-black-soft);
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s var(--ease-out);
}
.travaux__item:hover .travaux__media {
  transform: scale(1.06);
}
.travaux__meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.5rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.travaux__meta h3 {
  font-size: 1.15rem;
  color: #fff;
}
.travaux__meta span {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  color: var(--color-yellow);
  text-transform: uppercase;
}

/* ---------- Galerie : blocs "En cours" ---------- */
.travaux__item--loading {
  cursor: default;
}
.travaux__media--loading {
  position: relative;
  aspect-ratio: 4/3;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--color-black-soft);
}
.travaux__media--loading::before {
  content: "";
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(circle at 30% 30%, var(--color-yellow) 0%, transparent 55%),
    radial-gradient(circle at 70% 65%, rgba(255, 255, 255, 0.25) 0%, transparent 50%);
  opacity: 0.35;
  filter: blur(38px);
}
.travaux__item--loading:hover .travaux__media--loading {
  transform: none;
}
.loader-bar {
  position: relative;
  z-index: 1;
  width: 55%;
  max-width: 180px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
}
.loader-bar__fill {
  --progress: 55%;
  position: absolute;
  inset: 0;
  width: 0%;
  border-radius: 2px;
  background: var(--color-yellow);
  animation: loaderFill 2.2s cubic-bezier(0.2, 0.75, 0.25, 1) forwards;
}
.travaux__item--loading .travaux__meta span {
  color: var(--color-gray);
}
@keyframes loaderFill {
  0% { width: 0%; }
  55% { width: calc(var(--progress) * 0.9); }
  100% { width: var(--progress); }
}

/* ============================================================
   COOKIE BANNER
   ============================================================ */
.cookie-banner {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 300;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.cookie-banner.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.cookie-banner__card {
  width: min(280px, 78vw);
  background: var(--color-black-soft);
  border: 1px solid var(--color-gray-line);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  box-shadow: 0 20px 45px -20px rgba(0, 0, 0, 0.55);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.cookie-banner__text {
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--color-gray);
  margin-bottom: 0.9rem;
}
.cookie-banner__text a {
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-banner__actions {
  display: flex;
  gap: 0.6rem;
}
.cookie-banner__btn {
  flex: 1;
  padding: 0.6rem 0.5rem;
  font-size: 0.76rem;
  font-weight: 600;
  font-family: var(--font-body);
  border-radius: 999px;
  border: 1px solid var(--color-gray-line);
  background: transparent;
  color: var(--color-white);
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s, color 0.3s, opacity 0.3s;
}
.cookie-banner__btn:hover {
  border-color: rgba(207, 186, 156, 0.5);
}
.cookie-banner__btn--accept {
  background: var(--color-yellow);
  border-color: var(--color-yellow);
  color: var(--color-ink);
}
.cookie-banner__btn--accept:hover {
  opacity: 0.88;
}
.cookie-banner__pill {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--color-yellow);
  border: none;
  color: var(--color-ink);
  cursor: pointer;
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.55);
}
.cookie-banner__pill svg {
  width: 20px;
  height: 20px;
}
.cookie-banner.is-collapsed .cookie-banner__card {
  opacity: 0;
  transform: scale(0.85);
  pointer-events: none;
  position: absolute;
  inset: auto 0 0 auto;
}
.cookie-banner.is-collapsed .cookie-banner__pill {
  display: flex;
}

/* ============================================================
   BANDE CONFIGURATEUR
   ============================================================ */
.logo-banner {
  padding-block: clamp(1.5rem, 3vw, 2rem);
  background: var(--color-black-soft);
  border-block: 1px solid var(--color-gray-line);
}
.logo-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}
.logo-banner__text {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  font-weight: 600;
  color: var(--color-white);
}

/* ============================================================
   AVIS GOOGLE
   ============================================================ */
.reviews {
  position: relative;
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
  background: var(--color-black);
  overflow: hidden;
}

.reviews__stars {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.reviews__stars .star {
  position: absolute;
  top: var(--sy);
  left: var(--sx);
  width: 150px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--color-yellow-soft) 55%, #fff);
  transform: rotate(25deg);
  opacity: 0;
  filter: drop-shadow(0 0 6px var(--color-yellow-soft));
  animation: star-shoot var(--sdur, 3.5s) linear infinite;
  animation-delay: var(--sdelay, 0s);
}
@keyframes star-shoot {
  0%   { transform: translate(0, 0) rotate(25deg); opacity: 0; }
  6%   { opacity: 1; }
  22%  { opacity: 1; }
  38%  { opacity: 0; }
  100% { transform: translate(50vw, 23vw) rotate(25deg); opacity: 0; }
}

.reviews__head {
  position: relative;
  z-index: 1;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
.reviews__rating {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
  color: var(--color-gray);
  font-size: 0.95rem;
}
.reviews__rating-stars {
  color: var(--color-yellow);
  font-size: 1.15rem;
  letter-spacing: 0.15em;
}

.reviews__marquee {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding-block: 0.75rem;
  margin-block: -0.75rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}
.reviews__track {
  display: inline-flex;
  gap: 1.5rem;
  width: max-content;
  animation: reviews-scroll 48s linear infinite;
  will-change: transform;
}
.reviews__marquee:hover .reviews__track {
  animation-play-state: paused;
}
@keyframes reviews-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.review-card {
  position: relative;
  flex: 0 0 auto;
  width: min(340px, 82vw);
  background: var(--color-black-soft);
  border: 1px solid var(--color-gray-line);
  border-radius: var(--radius);
  padding: 1.75rem;
  overflow: hidden;
  transition: border-color 0.4s, transform 0.4s;
}
.review-card:hover {
  border-color: rgba(207, 186, 156, 0.5);
  transform: translateY(-4px);
}
.review-card__laser {
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(207, 186, 156, 0.35), transparent);
  transform: skewX(-20deg);
  animation: laser-sweep 6s ease-in-out infinite;
  animation-delay: var(--d, 0s);
  pointer-events: none;
}
@keyframes laser-sweep {
  0%   { left: -60%; }
  22%  { left: 130%; }
  100% { left: 130%; }
}
/* Star row with a soft light sweep: the star glyphs are filled by a
   gradient (background-clip: text) whose bright band slides across on a
   loop. Each card inherits its --d laser delay so the sweeps don't fire
   in sync across the rail. */
.review-card__stars {
  width: fit-content;
  font-size: 0.95rem;
  letter-spacing: 0.15em;
  margin-bottom: 0.9rem;
  color: var(--color-yellow);
  background: linear-gradient(105deg, var(--color-yellow) 42%, #fff6e8 50%, var(--color-yellow) 58%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: stars-sweep 5s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes stars-sweep {
  0%, 20% { background-position: 100% 0; }
  70%, 100% { background-position: 0% 0; }
}
.review-card__text {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--color-white);
  min-height: 5.5em;
  /* Clamped by default; JS appends a "Lire la suite" toggle only when the
     text actually overflows (see initReviewCards in main.js). */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
.review-card__text.is-expanded {
  -webkit-line-clamp: unset;
}
.review-card__more {
  margin-top: 0.5rem;
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  font-size: 0.84rem;
  color: var(--color-yellow);
  cursor: pointer;
}
.review-card__more:hover {
  text-decoration: underline;
}
/* Header row (avatar + name + date) sits on top, Google-widget style. */
.review-card__author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.review-card__badge {
  vertical-align: -2px;
  margin-left: 0.15rem;
}
.review-card__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--color-yellow);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  flex-shrink: 0;
}
.review-card__author div {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.review-card__author strong {
  font-size: 0.9rem;
  font-weight: 600;
}
.review-card__author span {
  font-size: 0.78rem;
  color: var(--color-gray);
}

@media (prefers-reduced-motion: reduce) {
  .reviews__track { animation: none; }
  .reviews__stars .star,
  .review-card__laser { animation: none; opacity: 0; }
  .review-card__stars { animation: none; }
}

/* ============================================================
   PAGES LÉGALES
   ============================================================ */
.legal {
  padding-bottom: var(--space-section);
}
.legal__content {
  max-width: 42rem;
}
.legal__content h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-yellow);
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}
.legal__content h2:first-child {
  margin-top: 0;
}
.legal__content p {
  color: var(--color-gray);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 1rem;
}
.legal__content a {
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal__content a:hover {
  color: var(--color-yellow);
}
.legal__content strong {
  color: var(--color-white);
}

/* ============================================================
   CONFIGURATEUR DE LOGO
   ============================================================ */
.configurator {
  padding-bottom: var(--space-section);
}

.configurator__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 1000px) {
  .configurator__grid {
    grid-template-columns: 1fr minmax(300px, 380px) 1fr;
    align-items: start;
    gap: 2rem;
  }
  .configurator__col--center {
    order: 0;
    position: sticky;
    top: 6.5rem;
  }
}

.configurator__col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.configurator__col--center {
  align-items: center;
  text-align: center;
}

.config-group {
  border: 1px solid var(--color-gray-line);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem 1.4rem;
}
.config-group legend {
  padding: 0 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-yellow);
}
.config-group__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.75rem;
}

.config-pill {
  position: relative;
  cursor: pointer;
}
.config-pill input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.config-pill span {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1rem;
  border: 1px solid var(--color-gray-line);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--color-gray);
  transition: border-color 0.3s, background 0.3s, color 0.3s;
}
.config-pill:hover span {
  border-color: rgba(207, 186, 156, 0.5);
  color: var(--color-white);
}
.config-pill input:checked + span {
  background: var(--color-yellow);
  border-color: var(--color-yellow);
  color: var(--color-ink);
}
.config-pill input:focus-visible + span {
  outline: 2px solid var(--color-yellow);
  outline-offset: 2px;
}

.logo-preview-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
}
.logo-preview {
  --logo-primary: #cfba9c;
  --logo-secondary: #161616;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1;
  background: var(--color-off);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.75rem;
  box-shadow: 0 30px 60px -20px rgba(10, 10, 10, 0.35);
}
.logo-preview__icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.logo-preview__icon-wrap svg {
  width: 168px;
  height: 168px;
  display: block;
}
.logo-preview__icon-wrap svg circle,
.logo-preview__icon-wrap svg rect,
.logo-preview__icon-wrap svg polygon {
  transition: fill 0.3s, stroke 0.3s;
}
.logo-preview.is-style-retro .logo-preview__icon-wrap {
  padding: 12px;
  border: 3px double var(--logo-primary);
  border-radius: 14px;
}
.logo-preview__text {
  font-family: "Montserrat", var(--font-display), sans-serif;
  font-weight: 600;
  font-size: 1.55rem;
  color: var(--color-ink);
  max-width: 100%;
  overflow-wrap: break-word;
  transition: font-family 0.2s;
}

/* type */
.logo-preview.is-type-typo .logo-preview__icon-wrap { display: none; }
.logo-preview.is-type-icone .logo-preview__text { display: none; }
.logo-preview.is-type-icone-texte { flex-direction: row; justify-content: center; }
.logo-preview.is-type-icone-texte .logo-preview__icon-wrap svg { width: 108px; height: 108px; }
.logo-preview.is-type-icone-texte .logo-preview__text { font-size: 1.35rem; text-align: left; }
.logo-preview.is-type-mascotte .logo-preview__icon-wrap svg { width: 150px; height: 150px; }

/* style */
.logo-preview.is-style-retro .logo-preview__text {
  font-family: "Montenegrin Gothic One", serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  font-size: 1.85rem;
}
.logo-preview.is-style-classique .logo-preview__text {
  font-family: "Montserrat", var(--font-display), sans-serif;
  font-weight: 600;
}
.logo-preview.is-style-futuriste .logo-preview__text {
  font-family: "Exo 2", var(--font-display), sans-serif;
  font-weight: 200;
  letter-spacing: 0.04em;
  transform: skewX(-4deg);
}

/* personality accents */
.logo-preview.is-personality-premium .logo-preview__text { letter-spacing: 0.06em; }
.logo-preview.is-personality-sportif .logo-preview__text { font-weight: 700; }
.logo-preview.is-personality-amical .logo-preview__text { font-weight: 500; }

.logo-preview__hint {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gray);
}

.configurator__name-field {
  width: 100%;
  max-width: 320px;
}
.configurator__cta {
  width: 100%;
  max-width: 320px;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

@media (max-width: 999px) {
  .configurator__col--left,
  .configurator__col--right {
    order: 2;
  }
  .configurator__col--center {
    order: 1;
  }
}

/* ============================================================
   CTA / CONTACT
   ============================================================ */
.cta {
  padding-block: var(--space-section);
  position: relative;
  background: radial-gradient(circle at 50% 0%, var(--color-cta-glow), var(--color-black) 60%);
}
.cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cta__title {
  font-size: clamp(2.4rem, 7vw, 5rem);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 1.75rem;
}
.cta__email {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  color: var(--color-yellow);
  border-bottom: 1px solid rgba(207, 186, 156, 0.4);
  padding-bottom: 0.25rem;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.cta__form {
  width: 100%;
  max-width: 640px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  text-align: left;
}
@media (min-width: 640px) {
  .cta__form { grid-template-columns: 1fr 1fr; }
  .field--full { grid-column: 1 / -1; }
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.field label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gray);
}
.field input,
.field textarea,
.field select {
  background: var(--color-black-soft);
  border: 1px solid var(--color-gray-line);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  min-height: 44px;
  resize: vertical;
  transition: border-color 0.3s;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--color-yellow);
}
.field input::placeholder,
.field textarea::placeholder {
  color: #6b6b6b;
}
.field select {
  appearance: none;
  color: var(--color-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 18px;
  padding-right: 2.5rem;
}
.field select option {
  background: var(--color-black-soft);
  color: var(--color-white);
}

.field--checks {
  border: 1px solid var(--color-gray-line);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}
.field--checks legend {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gray);
  padding: 0;
  margin-bottom: 0.25rem;
}
.field--checks .check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.95rem;
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-white);
}
.check input[type="checkbox"] {
  appearance: none;
  width: 18px;
  height: 18px;
  min-height: 18px;
  border: 1px solid var(--color-gray-line);
  border-radius: 5px;
  background: var(--color-black-soft);
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  transition: border-color 0.3s, background 0.3s;
}
.check input[type="checkbox"]:checked {
  background: var(--color-yellow);
  border-color: var(--color-yellow);
}
.check input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--color-black);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-yellow);
  outline-offset: 2px;
}

.cta__submit {
  margin-top: 0.5rem;
  width: 100%;
}

.field--hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cta__form-status {
  min-height: 1.2em;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-align: center;
}
.cta__form-status[data-state="ok"] { color: var(--color-yellow); }
.cta__form-status[data-state="error"] { color: #e05a5a; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  border-top: 1px solid var(--color-gray-line);
  padding-block: 2.5rem 1.5rem;
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.footer__brand {
  display: flex;
  align-items: center;
}
.footer__brand .logo__img {
  height: 46px;
}
.footer__loc {
  color: var(--color-gray);
  font-size: 0.85rem;
}
.footer__socials {
  display: flex;
  gap: 1.25rem;
  font-size: 0.85rem;
}
.footer__socials a:hover,
.footer__loc,
.footer__brand {
  transition: color 0.3s;
}
.footer__socials a:hover {
  color: var(--color-yellow);
}
.footer__top {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-gray-line);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s, color 0.3s, transform 0.4s var(--ease-elastic);
}
.footer__top:hover {
  background: var(--color-yellow);
  color: var(--color-ink);
  transform: translateY(-4px);
}
.footer__credit {
  text-align: center;
  margin-top: 2rem;
  color: var(--color-gray);
  font-size: 0.78rem;
}
.footer__legal {
  display: inline-flex;
  gap: 0.5rem;
  margin-left: 0.5rem;
}
.footer__legal a {
  color: var(--color-gray);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.3s;
}
.footer__legal a:hover {
  color: var(--color-yellow);
}

/* ============================================================
   Reveal animation base states (GSAP toggles .is-visible)
   ============================================================ */
[data-reveal-line],
[data-reveal-up] {
  opacity: 0;
}
.reveal-word span {
  display: inline-block;
}

/* ============================================================
   Responsive: nav collapse
   ============================================================ */
@media (max-width: 880px) {
  .nav { display: none; }
  .header__cta { display: none; }
  .burger { display: flex; }
}

@media (min-width: 881px) {
  .mobile-menu { display: none; }
}

@media (max-width: 899px) {
  .hero__canvas { display: none; }
}

/* Small phones */
@media (max-width: 400px) {
  .hero__actions { flex-direction: column; align-items: stretch; }
  .btn { width: 100%; }
}

/* ============================================================
   ESPACE CLIENT
   ============================================================ */
.compte-body {
  background: var(--color-black);
  color: var(--color-white);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* The /compte/ header reuses the exact main-site .header markup (fixed,
   burger + mobile-menu on narrow screens) — .compte-main just needs top
   padding to clear it, the same way the homepage hero does. */
.compte-main {
  flex: 1;
  padding-top: clamp(7rem, 14vw, 9rem);
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.compte-signout {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  text-align: center;
}

/* Heading size shared by every /compte/ page — matches the scale used for
   section titles elsewhere on the site (e.g. .gallery-hero__title), instead
   of falling back to the browser's unstyled default h1 size. */
.compte-main h1 {
  font-size: clamp(1.8rem, 4.5vw, 2.75rem);
  letter-spacing: -0.02em;
}

.compte-footer {
  padding: 1.5rem clamp(1.25rem, 5vw, 3rem);
  text-align: center;
  color: var(--color-gray);
  font-size: 0.8rem;
  border-top: 1px solid var(--color-gray-line);
}

.compte-narrow { max-width: 30rem; }
.compte-center { padding-block: clamp(2rem, 8vw, 5rem); }

.compte-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gray);
  margin-bottom: 0.75rem;
}
.compte-lead { color: var(--color-gray); margin-top: 0.75rem; max-width: 40rem; }
.compte-hint { color: var(--color-gray); margin-top: 1.5rem; font-size: 0.9rem; }
.compte-hint a { color: var(--color-yellow); }

.compte-errors {
  margin-top: 1.25rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid rgba(220, 90, 90, 0.4);
  background: rgba(220, 90, 90, 0.08);
  border-radius: calc(var(--radius) / 2);
  color: #e08a8a;
  font-size: 0.9rem;
}
.compte-flash {
  margin-top: 1.25rem;
  padding: 0.9rem 1.1rem;
  border-radius: calc(var(--radius) / 2);
  font-size: 0.9rem;
  border: 1px solid var(--color-gray-line);
}
.compte-flash--success { border-color: rgba(150, 200, 150, 0.4); background: rgba(150, 200, 150, 0.08); color: #9fcf9f; }
.compte-flash--error { border-color: rgba(220, 90, 90, 0.4); background: rgba(220, 90, 90, 0.08); color: #e08a8a; }

.compte-form {
  margin-top: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.compte-form--row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
}
.compte-form--row label { flex: 1 1 12rem; }
.compte-form label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--color-gray);
}
.compte-form input,
.compte-form select {
  font: inherit;
  padding: 0.8rem 1rem;
  border-radius: calc(var(--radius) / 2.5);
  border: 1px solid var(--color-gray-line);
  background-color: var(--color-black-soft);
  color: var(--color-white);
}
.compte-form select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 16px;
}
.compte-form input:focus,
.compte-form select:focus {
  outline: none;
  border-color: var(--color-yellow);
}

.btn--sm { padding: 0.6rem 1.1rem; font-size: 0.8rem; }
.btn--danger { border-color: rgba(220, 90, 90, 0.5); color: #e08a8a; }
.btn--danger:hover { background: rgba(220, 90, 90, 0.12); border-color: #e08a8a; color: #e08a8a; }


.compte-project-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.25rem;
}
.compte-project-switcher__item {
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--color-gray-line);
  font-size: 0.85rem;
  color: var(--color-gray);
}
.compte-project-switcher__item.is-active {
  border-color: var(--color-yellow);
  color: var(--color-yellow);
}

.compte-stage-note {
  margin-top: 1rem;
  padding: 0.7rem 1rem;
  border-radius: calc(var(--radius) / 2.5);
  background: var(--color-surface-hover);
  color: var(--color-gray);
  font-size: 0.9rem;
  width: fit-content;
}

/* Space journey visualization — hyperspace cockpit view.
   Breaks out of .container to span the full viewport width/height instead
   of sitting inside a contained, rounded-corner box. No background of its
   own: the starfield draws directly over the page background (the stars
   flip color with the theme, see space-journey.js). */
.space-journey {
  position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-top: 2.5rem;
  height: 100vh;
  overflow: hidden;
}
.space-journey__canvas {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* The block clips the starfield hard at its edges; this mask fades the
     streaks out before they reach the border so they dissipate instead of
     being cut off. Two gradients (vertical + horizontal) intersected so
     all four edges fade. */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-composite: intersect;
}

.space-journey__stepper-wrap {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding-left: 0.5rem;
}
.space-journey__stepper-line,
.space-journey__stepper-line-fill {
  position: absolute;
  left: calc(0.5rem + 5px);
  top: 6px;
  bottom: 6px;
  width: 2px;
}
.space-journey__stepper-line {
  background: var(--color-gray-line);
}
.space-journey__stepper-line-fill {
  background: var(--color-yellow);
  box-shadow: 0 0 8px rgba(207, 186, 156, 0.6);
  transform-origin: top;
  transform: scaleY(0);
  animation: stepper-line-grow var(--stepper-duration, 1.3s) ease-out forwards;
}
@keyframes stepper-line-grow {
  from { transform: scaleY(0); }
  to { transform: scaleY(var(--stepper-progress, 0)); }
}

.space-journey__stepper {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  list-style: none;
}
.space-journey__step {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.space-journey__step-marker {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid var(--color-gray-line);
  flex-shrink: 0;
  background: transparent;
}
.space-journey__step.is-done .space-journey__step-marker,
.space-journey__step.is-current .space-journey__step-marker {
  animation: stepper-marker-light 0.5s ease-out both;
  animation-delay: var(--light-delay, 0s);
}
@keyframes stepper-marker-light {
  from {
    background: transparent;
    border-color: var(--color-gray-line);
    box-shadow: none;
  }
  to {
    background: var(--color-yellow);
    border-color: var(--color-yellow);
    box-shadow: 0 0 0 4px rgba(207, 186, 156, 0.25);
  }
}
.space-journey__step-label {
  font-size: 0.95rem;
  color: var(--color-gray);
}
.space-journey__step.is-done .space-journey__step-label,
.space-journey__step.is-current .space-journey__step-label {
  animation: stepper-label-light 0.5s ease-out both;
  animation-delay: var(--light-delay, 0s);
}
@keyframes stepper-label-light {
  from { color: var(--color-gray); }
  to { color: var(--color-white); }
}
.space-journey__step.is-current .space-journey__step-label { font-weight: 600; }

/* Cockpit frame + holographic readout — desktop only (>=900px, see media
   query below). On mobile the plain accessible stepper list is the whole UI. */
.cockpit {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
/* Five stage blocks connected by a horizontal line — same grow-and-light-up
   principle as the mobile stepper (.space-journey__stepper-wrap below), just
   laid out sideways with a bigger, hologram-style card for the current stage. */
.cockpit__stages {
  position: absolute;
  left: 5%;
  right: 5%;
  top: 8%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  z-index: 3;
}
.cockpit__stages-line,
.cockpit__stages-line-fill {
  position: absolute;
  /* Inset roughly to the dot centers of the first/last blocks (~half a
     small block's width) so the line starts and ends at the dots instead
     of overshooting to the container's raw edges. top 4px centers the 2px
     line on the 10px dots (both midlines at 5px). */
  left: 5.1rem;
  right: 5.1rem;
  top: 4px;
  height: 2px;
}
.cockpit__stages-line { background: var(--color-gray-line); }
.cockpit__stages-line-fill {
  background: var(--color-yellow);
  box-shadow: 0 0 8px rgba(207, 186, 156, 0.6);
  transform-origin: left;
  transform: scaleX(0);
  animation: stepper-line-grow-x var(--stepper-duration, 1.3s) ease-out forwards;
}
@keyframes stepper-line-grow-x {
  from { transform: scaleX(0); }
  to { transform: scaleX(var(--stepper-progress, 0)); }
}

.cockpit__stage-block {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 1.5rem;
  flex: 1;
}
.cockpit__stage-dot {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid var(--color-gray);
  background: transparent;
}
.cockpit__stage-block.is-done .cockpit__stage-dot,
.cockpit__stage-block.is-current .cockpit__stage-dot {
  animation: stepper-marker-light 0.5s ease-out both;
  animation-delay: var(--light-delay, 0s);
}
.cockpit__stage-name {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-gray);
  max-width: 7rem;
}
/* Upcoming stages must stay clearly readable — theme-flipping white at
   reduced opacity, so they sit just under the lit done/current labels. */
.cockpit__stage-block.is-upcoming .cockpit__stage-name {
  color: var(--color-white);
  opacity: 0.75;
}
.cockpit__stage-block.is-done {
  pointer-events: auto;
  cursor: default;
  transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}
.cockpit__stage-block.is-done:hover {
  transform: translateY(-2px);
  opacity: 0.8;
}
.cockpit__stage-block.is-done .cockpit__stage-name,
.cockpit__stage-block.is-current .cockpit__stage-name {
  animation: stepper-label-light 0.5s ease-out both;
  animation-delay: var(--light-delay, 0s);
}

.cockpit__stage-block.is-current {
  margin-top: -0.75rem;
  padding: 1.5rem 2rem 1.35rem;
  /* The float uses `translate` (not `transform`) so it composes with the
     hover transform below instead of overriding it. */
  animation:
    hologram-flicker 5s infinite,
    hologram-float 6s ease-in-out infinite;
  flex: 0 0 auto;
  pointer-events: auto;
  cursor: default;
  transition: transform 0.35s var(--ease-out);
}
.cockpit__stage-block.is-current:hover {
  transform: scale(1.04) translateY(-3px);
}
/* The card's visual background is a separate layer (not the block's own
   background) so it can sit on top of the dot instead of the dot always
   painting above its parent's background. It starts a little below the
   block's top edge, leaving the dot peeking out above it, connected to
   the line. */
.cockpit__stage-block.is-current::before {
  content: "";
  position: absolute;
  top: 1rem;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  border-radius: calc(var(--radius) / 1.5);
  background: rgba(2, 3, 9, 0.86);
  border: 1px solid rgba(230, 218, 200, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 16px rgba(207, 186, 156, 0.35), 0 0 50px rgba(0, 0, 0, 0.7);
  transition: box-shadow 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}
.cockpit__stage-block.is-current:hover::before {
  border-color: rgba(230, 218, 200, 0.85);
  box-shadow: 0 0 26px rgba(207, 186, 156, 0.55), 0 0 60px rgba(0, 0, 0, 0.8);
}
/* Counters the block's own -0.75rem margin-top so this dot lands at the
   exact same height as its siblings' dots — i.e. right on the line. The
   second animation is the inverse of the block's hologram-float, keeping
   the dot pinned on the line while the card floats around it. */
.cockpit__stage-block.is-current .cockpit__stage-dot {
  top: 0.75rem;
  z-index: 0;
  transition: transform 0.35s var(--ease-out);
  animation:
    stepper-marker-light 0.5s ease-out both,
    hologram-float-counter 6s ease-in-out infinite;
  animation-delay: var(--light-delay, 0s), 0s;
}
.cockpit__stage-block.is-current:hover .cockpit__stage-dot {
  transform: translateX(-50%) scale(1.3);
}
.cockpit__stage-block.is-current .cockpit__stage-name,
.cockpit__stage-block.is-current .cockpit__stage-note,
.cockpit__stage-block.is-current .cockpit__stage-index {
  position: relative;
  z-index: 2;
}
.cockpit__stage-block.is-current .cockpit__stage-name {
  max-width: none;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  font-weight: 700;
  color: #fff6e8;
  text-shadow:
    0 0 6px rgba(255, 255, 255, 0.9),
    0 0 16px rgba(230, 218, 200, 0.95),
    0 0 34px rgba(207, 186, 156, 0.8);
}
.cockpit__stage-note {
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-yellow-soft);
  opacity: 0.85;
}
.cockpit__stage-index {
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--color-yellow-soft);
  opacity: 0.7;
}
/* Light theme: the space-dark hologram card reads as a muddy slab on the
   cream background, so it flips to a bright surface with dark ink text
   and a warm gold halo instead of the white neon glow. */
:root[data-theme="light"] .cockpit__stage-block.is-current::before {
  /* Warm cream close to the page background — pure white pops out like a
     stain against the site's off-white. Kept translucent (the base rule's
     backdrop blur frosts what shows through) so the starfield stays
     faintly visible behind the card. */
  background: rgba(238, 233, 221, 0.55);
  border-color: rgba(20, 18, 15, 0.2);
  box-shadow: 0 0 16px rgba(207, 186, 156, 0.55), 0 12px 30px rgba(20, 18, 15, 0.12);
}
:root[data-theme="light"] .cockpit__stage-block.is-current:hover::before {
  border-color: rgba(20, 18, 15, 0.35);
  box-shadow: 0 0 26px rgba(207, 186, 156, 0.75), 0 14px 34px rgba(20, 18, 15, 0.16);
}
:root[data-theme="light"] .cockpit__stage-block.is-current .cockpit__stage-name {
  color: var(--color-white); /* near-black ink in light theme */
  text-shadow: 0 0 14px rgba(207, 186, 156, 0.8);
}
:root[data-theme="light"] .cockpit__stage-note,
:root[data-theme="light"] .cockpit__stage-index {
  color: #8a6f47;
  opacity: 1;
}
@keyframes hologram-flicker {
  0%, 19%, 21%, 23%, 80%, 100% { opacity: 1; }
  20%, 22%, 79% { opacity: 0.9; }
}
/* Gentle hover-in-place so the current-stage card reads as a hologram
   floating near the line rather than pinned onto it. The range is biased
   upward (never back to 0): at rest the card's top edge sits exactly on
   the line, so returning to 0 would make it look reattached — it must
   always stay above the line. The dot runs the exact inverse (same
   duration/easing, mirrored offsets) so it cancels the block's float and
   stays pinned on the line. */
@keyframes hologram-float {
  0%, 100% { translate: 0 -6px; }
  50% { translate: 0 -14px; }
}
@keyframes hologram-float-counter {
  0%, 100% { translate: 0 6px; }
  50% { translate: 0 14px; }
}

@media (min-width: 900px) {
  .space-journey__canvas { display: block; }
  .space-journey__stepper-wrap { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cockpit__stage-block.is-current { animation: none; }
  .cockpit__stage-block.is-done .cockpit__stage-dot,
  .cockpit__stage-block.is-current .cockpit__stage-dot {
    animation: none;
    background: var(--color-yellow);
    border-color: var(--color-yellow);
  }
  .space-journey__stepper-line-fill,
  .space-journey__step.is-done .space-journey__step-marker,
  .space-journey__step.is-current .space-journey__step-marker,
  .space-journey__step.is-done .space-journey__step-label,
  .space-journey__step.is-current .space-journey__step-label {
    animation: none;
  }
  .space-journey__stepper-line-fill { transform: scaleY(var(--stepper-progress, 0)); }
  .space-journey__step.is-done .space-journey__step-marker,
  .space-journey__step.is-current .space-journey__step-marker {
    background: var(--color-yellow);
    border-color: var(--color-yellow);
  }
  .space-journey__step.is-current .space-journey__step-marker {
    box-shadow: 0 0 0 4px rgba(207, 186, 156, 0.25);
  }
  .space-journey__step.is-done .space-journey__step-label,
  .space-journey__step.is-current .space-journey__step-label {
    color: var(--color-white);
  }
}
@media (max-width: 899px) {
  .space-journey {
    position: static;
    width: auto;
    height: auto;
    margin-left: 0;
  }
  .cockpit { display: none; }
}

/* Admin panel */
.compte-admin__section { margin-top: clamp(2.5rem, 6vw, 3.5rem); }
.compte-admin__section h2 { font-size: 1.15rem; margin-bottom: 1rem; }

.compte-admin__section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.compte-admin__section-head h2 { margin-bottom: 0; }
.compte-admin__sort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.compte-admin__sort label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--color-gray);
}
.compte-admin__search input {
  font: inherit;
  padding: 0.5rem 0.9rem;
  border-radius: calc(var(--radius) / 3);
  border: 1px solid var(--color-gray-line);
  background-color: var(--color-black-soft);
  color: var(--color-white);
  font-size: 0.85rem;
  min-width: 14rem;
}
.compte-admin__search input:focus {
  outline: none;
  border-color: var(--color-yellow);
}
.compte-admin__sort select {
  font: inherit;
  padding: 0.5rem 2.3rem 0.5rem 0.7rem;
  border-radius: calc(var(--radius) / 3);
  border: 1px solid var(--color-gray-line);
  background-color: var(--color-black-soft);
  color: var(--color-white);
  font-size: 0.85rem;
  min-width: 15rem;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 14px;
}

.compte-admin__clients {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.compte-admin__client {
  border: 1px solid var(--color-gray-line);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
}
.compte-admin__client-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.compte-admin__client-head strong { font-family: var(--font-display); }
.compte-admin__client-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.5rem; }
.compte-admin__edit summary {
  list-style: none;
}
.compte-admin__edit summary::-webkit-details-marker { display: none; }
.compte-admin__edit summary::marker { content: ""; }
.compte-admin__edit[open] {
  flex-basis: 100%;
  order: 10;
}
/* While the edit form is open, hide the reset-password/delete buttons so the
   row doesn't wrap/reflow confusingly — only re-appear once it's closed. */
.compte-admin__client-actions:has(.compte-admin__edit[open]) > form.compte-admin__inline-form {
  display: none;
}
.compte-admin__edit-form {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-gray-line);
}
/* Narrower than the general .compte-form--row label so all 4 fields plus
   the submit button fit on one line instead of the button wrapping alone. */
.compte-admin__edit-form label { flex: 1 1 9rem; min-width: 0; }
/* The "Modifier" toggle is redundant once the form is already open — saving
   reloads the page (closing it), so hide it instead of leaving it floating
   alone above the form. */
.compte-admin__edit[open] > summary { display: none; }
.compte-admin__client-email {
  color: var(--color-gray);
  font-size: 0.85rem;
  margin-left: 0.6rem;
}
.compte-admin__client-email + .compte-admin__client-email::before {
  content: "· ";
}
.compte-admin__no-project {
  color: var(--color-gray);
  font-size: 0.9rem;
  margin-top: 0.75rem;
}
.compte-admin__projects {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-gray-line);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.compte-admin__projects li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.compte-admin__project-name-input {
  font: inherit;
  font-weight: 500;
  min-width: 8rem;
  width: 10rem;
  padding: 0.5rem 0.7rem;
  border-radius: calc(var(--radius) / 3);
  border: 1px solid var(--color-gray-line);
  background: var(--color-black-soft);
  color: var(--color-white);
  font-size: 0.85rem;
}

.compte-admin__inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.compte-admin__inline-form select,
.compte-admin__inline-form input {
  font: inherit;
  padding: 0.5rem 0.7rem;
  border-radius: calc(var(--radius) / 3);
  border: 1px solid var(--color-gray-line);
  background-color: var(--color-black-soft);
  color: var(--color-white);
  font-size: 0.85rem;
}
.compte-admin__inline-form select {
  appearance: none;
  padding-right: 2.2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 13px;
}