/* =========================================================
   PUTCH — Intelligence over Obsession
   Feuille de style commune
   ========================================================= */

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

/* =========================================================
   Anti-CLS : police fallback aux métriques d'Open Sans
   ---------------------------------------------------------
   Pendant que la fonte Open Sans télécharge (cold cache),
   le navigateur affiche en Arial/Helvetica. Sans correction,
   les métriques (largeur, hauteur de ligne, ascender) diffèrent
   → quand Open Sans arrive, le layout shift de quelques px.
   Ce @font-face force la fonte fallback à occuper la MÊME
   place spatiale qu'Open Sans : aucun shift visible au swap.
   ========================================================= */
@font-face {
  font-family: 'OpenSansFallback';
  src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
  size-adjust: 99.71%;
  ascent-override: 100.92%;
  descent-override: 27.65%;
  line-gap-override: 0%;
  font-display: swap;
}
@font-face {
  font-family: 'OpenSansFallback';
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Neue Bold'), local('Helvetica Bold');
  font-weight: 600 800;
  size-adjust: 99.71%;
  ascent-override: 100.92%;
  descent-override: 27.65%;
  line-gap-override: 0%;
  font-display: swap;
}
/* Fallback italique pour les <em> et span en italique */
@font-face {
  font-family: 'PlayfairFallback';
  src: local('Times New Roman'), local('Times');
  size-adjust: 110%;
  ascent-override: 90%;
  descent-override: 25%;
  line-gap-override: 0%;
  font-display: swap;
}

:root {
  /* Palette stricte du guide PUTCH */
  --black: #000000;
  --ink:   #000000;        /* primaire — noir pur */
  --text:  #111111;        /* corps de texte — quasi-noir, lisible */
  --muted: #6b6b6b;        /* gris secondaire */
  --soft:  #9b9b9b;        /* gris clair, notes */
  --line:  #e8e8e8;        /* filets fins */
  --bg:    #ffffff;        /* secondaire — blanc pur */
  --bg-alt: #f4f4f4;
  --bg-soft: #fafafa;
  --max: 1280px;
  --pad: clamp(20px, 4vw, 64px);
  /* Typographie : Open Sans pour titres ET corps (bold pour titres, regular pour body)
     Playfair Display gardé uniquement pour <em> et accents italiques.
     JetBrains Mono pour étiquettes / petites majuscules. */
  --serif: 'Playfair Display', 'PlayfairFallback', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Open Sans', 'OpenSansFallback', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --display: 'Open Sans', 'OpenSansFallback', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --mono:  'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; overscroll-behavior: none; scrollbar-gutter: stable; overflow-y: scroll; }
body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* -------- Typo -------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -0.02em;
}
h1 em, h2 em, h3 em { font-style: italic; font-family: var(--serif); font-weight: 500; letter-spacing: -0.005em; }
h1 { font-size: clamp(2.2rem, 4.5vw, 3.6rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.5rem;
}

.italic { font-style: italic; }

/* -------- Layout -------- */
.container {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

section { padding: clamp(48px, 6vw, 96px) 0; }
.section-alt { background: var(--bg-alt); }
.section-dark { background: var(--ink); color: #fff; }
.section-dark h1, .section-dark h2, .section-dark h3 { color: #fff; }
.section-dark .eyebrow { color: #aaa; }

/* -------- Header / Nav -------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  /* HAUTEUR VERROUILLÉE : peu importe le contenu interne (chip hydraté ou non,
     image chargée ou non, fonte loaded ou pas), le bandeau garde toujours
     exactement 78px sur desktop. Cause directe du saut entre pages éliminée. */
  height: 78px;
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad);   /* padding vertical retiré : la hauteur fixe du header gère */
  max-width: var(--max);
  margin: 0 auto;
  gap: 24px;
  height: 100%;
}
@media (max-width: 980px) {
  /* Sur mobile, la nav-right est cachée et le toggle hamburger prend la place.
     On garde une hauteur naturelle plus compacte. */
  .site-header { height: auto; min-height: 66px; }
  .nav { padding: 14px var(--pad); height: auto; }
}
.nav-brand {
  font-family: var(--serif);
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.nav-brand img {
  height: 38px;
  width: auto;
  display: block;
  transition: opacity .2s ease;
}
.nav-brand:hover img { opacity: .75; }

/* -------- Slot utilisateur : largeur réservée --------
   "Me connecter" fait ~80px, le chip connecté ~220px. Sans cette
   réservation, quand le JS hydrate le chip, la zone nav-right gagne
   ~140px et la zone des nav-links se décale d'autant (justify-content:
   space-between). Locker une min-width égale à la largeur du chip
   garantit une largeur stable indépendamment de l'état de hydratation. */
[data-user-slot] {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 220px;
  /* Lock vertical : le chip-wrap connecté fait ~41px (chip 30px + email 10px),
     vs le lien anonyme ~27px. Sans cette min-height, la hauteur du nav saute
     de ~14px au moment où le JS hydrate le chip. On réserve ici la hauteur
     pleine pour les deux états → plus de saut vertical à l'hydratation. */
  min-height: 42px;
}
@media (max-width: 980px) {
  /* Sur mobile la nav-right est cachée → pas besoin de réserver. */
  [data-user-slot] { min-width: 0; }
}

.nav-links {
  display: flex;
  gap: 36px;
  list-style: none;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.nav-links a {
  position: relative;
  padding: 6px 0;
  color: var(--ink);
  transition: opacity .2s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}
.nav-links a:hover { opacity: .6; }
.nav-links a.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--ink);
}
.nav-right {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.lang-switch a {
  color: var(--muted);
  padding: 0 4px;
}
.lang-switch a.active { color: var(--ink); font-weight: 600; }
.lang-switch span { color: var(--line); }

/* -------- Buttons -------- */
.btn {
  display: inline-block;
  padding: 12px 24px;
  font-size: 0.74rem;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid var(--ink);
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
  cursor: pointer;
  font-family: var(--sans);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
/* L'attribut [hidden] doit forcer le masquage MEME quand un display:inline-block
   est déjà déclaré sur .btn (sinon la règle later wins et le bouton reste visible). */
.btn[hidden] { display: none !important; }
.btn-primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-primary:hover { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--bg-alt); color: var(--ink); border-color: var(--ink); }
.btn-light { background: #fff; color: var(--ink); border-color: #fff; }
.btn-light:hover { background: transparent; color: #fff; }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* -------- Hero -------- */
.hero {
  text-align: center;
  padding: clamp(40px, 6vw, 80px) var(--pad) clamp(36px, 5vw, 64px);
  max-width: 1080px;
  margin: 0 auto;
}
.hero-logo {
  width: 110px;
  margin: 0 auto 24px;
  border: 1px solid var(--line);
  padding: 14px 18px;
}
.hero-logo img { width: 100%; }
.hero h1 {
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  margin-bottom: 1.4rem;
  line-height: 1.15;
  letter-spacing: -0.022em;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}
.hero p {
  color: var(--muted);
  /* Largeur étendue pour tenir chaque phrase sur une ligne */
  max-width: 980px;
  margin: 0 auto 0.55rem;
  font-size: 1.05rem;
  line-height: 1.4;
}
.hero p.hero-italic {
  font-style: italic;
  margin-top: 0.85rem;
  color: var(--ink);
  line-height: 1.4;
}
.hero p.hero-invite {
  margin-top: 0.3rem;
  margin-bottom: 1.6rem;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.4;
}
@media (max-width: 1024px) {
  /* Sur écrans plus étroits, on laisse les phrases respirer */
  .hero p { max-width: 720px; }
}
.hero .btn-row { justify-content: center; margin-top: 0.4rem; }
.btn-row-center { justify-content: center; }

/* -------- Two-col split -------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.split.reverse .split-img { order: -1; }
.split-img {
  background: var(--bg-alt);
  aspect-ratio: 4/5;
  overflow: hidden;
}
.split-img img { width: 100%; height: 100%; object-fit: cover; }
.split-text h2 { margin-bottom: 2.2rem; letter-spacing: -0.02em; }

/* -------- Stats list -------- */
.stats { display: flex; flex-direction: column; gap: 0; }
.stat-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 24px;
  align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.stat-row:last-child { border-bottom: none; }
.stat-num {
  font-family: var(--serif);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--ink);
  font-weight: 500;
}
.stat-unit {
  display: block;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--muted);
  margin-top: 8px;
  text-transform: uppercase;
}
.stat-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 6px;
}
.stat-desc { color: var(--muted); font-size: 0.95rem; }

/* -------- Steps grid -------- */
.section-steps { text-align: center; }
.section-steps h2 { margin: 0.5rem auto 3rem; max-width: 720px; }
.steps-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.step {
  padding: 36px 22px;
  text-align: left;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.step-num { font-family: var(--serif); font-size: 2.2rem; color: #d4d4d4; margin-bottom: 32px; }
.step-title {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: var(--ink);
}
.step-desc { font-size: 0.86rem; color: var(--muted); line-height: 1.55; }

/* -------- Roadmap -------- */
.roadmap { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.roadmap-card { border-top: 2px solid var(--ink); padding: 18px 4px 0; }
.roadmap-year {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin-bottom: 8px;
}
.roadmap-title { font-family: var(--serif); font-size: 1.05rem; margin-bottom: 8px; color: var(--ink); }
.roadmap-desc { font-size: 0.78rem; color: var(--muted); line-height: 1.5; }

/* -------- Final CTA -------- */
.final-cta {
  text-align: center;
  background: var(--ink);
  color: #fff;
  padding: clamp(80px, 10vw, 140px) var(--pad);
}
.final-cta h2 { color: #fff; margin-bottom: 2rem; letter-spacing: -0.02em; }
.final-cta p { color: #ccc; max-width: 560px; margin: 0 auto 2rem; }

/* -------- Configurateur -------- */
.config-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 60px; align-items: start; }
.config-form { display: flex; flex-direction: column; gap: 26px; }
.config-field label {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.swatch-row { display: flex; gap: 10px; }
.swatch { width: 44px; height: 44px; border: 1px solid var(--line); cursor: pointer; }
.swatch.active { outline: 2px solid var(--ink); outline-offset: 3px; }
.swatch.white { background: #fff; }
.swatch.black { background: #000; }
.swatch.cream { background: #f0ead6; }

.config-select, .config-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 0.9rem;
  background: #fff;
  color: var(--ink);
}
.fit-toggle { display: flex; }
.fit-toggle button {
  flex: 1;
  padding: 12px;
  border: 1px solid var(--line);
  background: #fff;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.fit-toggle button.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.fit-toggle button + button { border-left: none; }

.config-preview {
  background: #1a1a1a;
  aspect-ratio: 4/5;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.config-preview img { max-height: 80%; width: auto; }
.config-price {
  position: absolute;
  bottom: 18px; right: 18px;
  background: #fff;
  padding: 10px 16px;
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ink);
}
.config-price small {
  display: block;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: var(--muted);
  margin-bottom: 2px;
  text-transform: uppercase;
}

/* -------- Scan dark -------- */
.scan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.scan-list { list-style: none; margin-top: 30px; }
.scan-list li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid #333;
}
.scan-list li:last-child { border-bottom: none; }
.scan-list .num { font-family: var(--mono); color: #888; font-size: 0.85rem; }
.scan-list .label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 6px;
  display: block;
}
.scan-list .desc { color: #999; font-size: 0.85rem; line-height: 1.5; }

.scan-visual {
  background: radial-gradient(circle at center, #2a2a2a 0%, #0a0a0a 70%);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.scan-visual::before { content: ''; position: absolute; inset: 20%; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; }
.scan-visual::after { content: ''; position: absolute; inset: 30%; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; }
.scan-icon { font-family: var(--mono); color: #fff; font-size: 0.7rem; letter-spacing: 0.18em; text-align: center; z-index: 2; }
.scan-icon .fingerprint { font-size: 3rem; display: block; margin-bottom: 12px; }

/* -------- Espace personnel -------- */
.account-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.account-card {
  background: #fff;
  border: 1px solid var(--line);
  padding: 28px;
  min-height: 180px;
  display: flex;
  flex-direction: column;
}
.account-card.dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.account-card.dark .ac-label { color: #aaa; }
.account-icon { font-size: 1.2rem; margin-bottom: 18px; color: var(--muted); }
.ac-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 10px;
}
.ac-text { font-size: 0.85rem; color: var(--muted); flex: 1; margin-bottom: 16px; }
.account-card.dark .ac-text { color: #ccc; }
.ac-cta {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  padding: 8px 14px;
  align-self: flex-start;
  background: #fff;
  color: var(--ink);
}
.account-card.dark .ac-cta { background: transparent; color: #fff; border-color: #fff; }
.measure-row { display: flex; gap: 28px; margin-top: 6px; }
.measure-row .m { display: flex; flex-direction: column; }
.measure-row .m-val { font-family: var(--serif); font-size: 1.4rem; }
.measure-row .m-lbl { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em; color: #888; text-transform: uppercase; }

/* -------- Soutenir / Investir -------- */
.intro-block { text-align: center; max-width: 700px; margin: 0 auto; }
.intro-block .eyebrow { display: block; }
.intro-block h2 { margin-bottom: 1.2rem; letter-spacing: -0.02em; }
.intro-block p { color: var(--muted); margin-bottom: 1.8rem; }
.intro-block .btn-row { justify-content: center; }

.why-grid { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); gap: 32px; }
.why-cell h3 { font-style: italic; font-size: 1.2rem; margin-bottom: 12px; }
.why-num {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--muted);
  margin-bottom: 14px;
}
.why-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 10px;
}
.why-cell p { color: var(--muted); font-size: 0.88rem; }

.tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.tier { background: #fff; border: 1px solid var(--line); padding: 32px 24px; display: flex; flex-direction: column; }
.tier.featured { background: var(--ink); color: #fff; border-color: var(--ink); transform: translateY(-8px); }
.tier-level {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.tier.featured .tier-level { color: #aaa; }
.tier-name { font-family: var(--serif); font-size: 1.3rem; margin-bottom: 8px; }
.tier-price { font-family: var(--mono); font-size: 0.85rem; color: var(--muted); margin-bottom: 22px; }
.tier.featured .tier-price { color: #ccc; }
.tier-list { list-style: none; flex: 1; margin-bottom: 22px; }
.tier-list li { font-size: 0.85rem; padding: 8px 0 8px 22px; position: relative; color: var(--muted); }
.tier.featured .tier-list li { color: #ddd; }
.tier-list li::before { content: '\2713'; position: absolute; left: 0; color: var(--ink); font-weight: 700; }
.tier.featured .tier-list li::before { color: #fff; }

/* -------- Funds usage -------- */
.funds { display: flex; flex-direction: column; gap: 8px; }
.fund {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  background: var(--bg-alt);
  border-left: 4px solid var(--ink);
  padding: 22px 28px;
  gap: 32px;
}
.fund-name { font-family: var(--serif); font-size: 1.2rem; color: var(--ink); }
.fund-desc { font-size: 0.82rem; color: var(--muted); margin-top: 4px; }
.fund-pct { font-family: var(--serif); font-size: 1.8rem; color: #b8b8b8; font-weight: 500; }

/* -------- FAQ -------- */
.faq { max-width: 760px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); padding: 22px 0; }
.faq-q { font-family: var(--serif); font-size: 1.15rem; color: var(--ink); margin-bottom: 10px; cursor: pointer; }
.faq-a { font-size: 0.92rem; color: var(--muted); }

/* -------- Footer (compact) -------- */
.site-footer { background: #fff; border-top: 1px solid var(--line); padding: 40px var(--pad) 24px; font-size: 0.78rem; line-height: 1.4; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1.4fr;
  gap: 24px;
  max-width: var(--max);
  margin: 0 auto 16px;
}
.footer-brand { font-family: var(--serif); font-size: 1.05rem; line-height: 1.2; }
.footer-brand small {
  display: block;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-top: 4px;
  text-transform: uppercase;
}
.footer-col h4 {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
  font-weight: 600;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { padding: 1px 0; color: var(--ink); line-height: 1.5; }
.footer-col a:hover { opacity: .6; }
.footer-newsletter input {
  width: 100%;
  padding: 6px 0;
  border: none;
  border-bottom: 1px solid var(--ink);
  font-family: var(--sans);
  background: transparent;
  outline: none;
  font-size: 0.85rem;
}
.footer-bottom {
  max-width: var(--max);
  margin: 0 auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--muted);
  text-transform: uppercase;
}

/* =========================================================
   Coming soon page
   ========================================================= */
.coming-soon-page { min-height: 100vh; display: flex; flex-direction: column; background: #fff; }
.coming-soon-header { display: flex; justify-content: flex-end; padding: 24px var(--pad); }
.coming-soon-login {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 10px 18px;
  background: #fff;
  transition: all .2s;
}
.coming-soon-login:hover { background: var(--ink); color: #fff; }
.coming-soon-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px var(--pad);
  gap: 40px;
}
.coming-soon-logo { width: clamp(180px, 28vw, 280px); }
.coming-soon-logo img { width: 100%; }
.coming-soon-text {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.4rem);
  color: var(--ink);
  letter-spacing: -0.025em;
}
.coming-soon-sub {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}
.coming-soon-footer {
  text-align: center;
  padding: 24px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: uppercase;
}

/* =========================================================
   Login modal
   ========================================================= */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.modal-backdrop.show { display: flex; }
.modal {
  background: #fff;
  width: 100%;
  max-width: 420px;
  padding: 40px 36px;
  position: relative;
  animation: fadeIn .3s ease;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.modal-close { position: absolute; top: 14px; right: 18px; font-size: 1.4rem; color: var(--muted); background: none; border: none; }
.modal h2 { font-family: var(--display); font-weight: 800; font-size: 1.6rem; margin-bottom: 8px; }
.modal p { color: var(--muted); font-size: 0.86rem; margin-bottom: 26px; }
.modal-field { margin-bottom: 18px; }
.modal-field label {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.modal-field input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 0.95rem;
  outline: none;
  transition: border-color .2s;
}
.modal-field input:focus { border-color: var(--ink); }
.modal .btn { width: 100%; margin-top: 8px; }
.modal-error { color: #c0392b; font-size: 0.82rem; margin-top: 12px; display: none; }
.modal-error.show { display: block; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 980px) {
  .nav-links { display: none; }
  .split, .scan-grid, .config-grid { grid-template-columns: 1fr; }
  .split-img { aspect-ratio: 1; max-width: 520px; margin: 0 auto; }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .roadmap { grid-template-columns: repeat(3, 1fr); }
  .tiers { grid-template-columns: repeat(2, 1fr); }
  .tier.featured { transform: none; }
  .why-grid { grid-template-columns: 1fr 1fr; }
  .account-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .steps-grid, .roadmap, .tiers, .why-grid, .account-grid, .footer-grid { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 100px 1fr; }
  .stat-num { font-size: 1.9rem; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
}


/* -------- CTA nav header (PUTCH Me Now) — sobre & affûté -------- */
.nav-right .btn {
  padding: 10px 20px;
  font-size: 0.70rem;
  letter-spacing: 0.22em;
  font-weight: 600;
}
.nav-right .btn-primary {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
}
.nav-right .btn-primary:hover {
  background: #fff;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}


/* -------- Variante "Iconique" : photo mannequin sans crop, fond clair -------- */
.split-img--iconic {
  background: #fafafa;
  padding: 24px;
}
.split-img--iconic img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* la photo entière est visible, pas de crop */
  display: block;
}

/* -------- SVG illustration "Coût caché" : afficher en entier -------- */
.split-img img[src$=".svg"] {
  object-fit: contain;
  background: #fafafa;
}


/* -------- Section Paradoxe : intro centrée + illustration pleine largeur -------- */
.paradox-intro {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(40px, 6vw, 70px);
}
.paradox-intro .eyebrow { display: block; }
.paradox-intro h2 {
  margin-bottom: 1.4rem;
  letter-spacing: -0.02em;
}
.paradox-lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  color: var(--ink);
  line-height: 1.45;
}
.paradox-illustration {
  width: 100%;
  background: #fafafa;
  border: 1px solid var(--line);
  overflow: hidden;
}
.paradox-illustration img {
  display: block;
  width: 100%;
  height: auto;
}


/* -------- Section "La Réponse" : 3 piliers de la solution -------- */
.solution-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.solution-pillar {
  padding: 40px 36px 36px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.solution-pillar:last-child { border-right: none; }
.pillar-eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.6rem;
  line-height: 1.4;
  min-height: 2.6em;
}
.solution-pillar h3 {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 1.8rem;
  line-height: 1.32;
  flex: 1;
}
.pillar-benefits {
  list-style: none;
  padding: 1.4rem 0 0;
  margin: 0;
  border-top: 1px solid var(--line);
}
.pillar-benefits li {
  position: relative;
  padding: 7px 0 7px 22px;
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.5;
}
.pillar-benefits li::before {
  content: '\2192';
  position: absolute;
  left: 0;
  color: var(--ink);
  font-family: var(--mono);
  font-weight: 600;
}

@media (max-width: 980px) {
  .solution-grid { grid-template-columns: 1fr; border-bottom: none; }
  .solution-pillar { border-right: none; border-bottom: 1px solid var(--line); }
  .solution-pillar:last-child { border-bottom: none; }
  .pillar-eyebrow { min-height: 0; }
}

/* ============================================================
   Tunnel L'Expérience
   ============================================================ */

/* Wrapper de chaque étape */
.tunnel-step { padding: clamp(48px,8vw,110px) 0; }

/* Anti-flash login : on dévoile l'étape pré-calculée par le script inline
   en <head> avant que putch-me.js ne s'exécute. Sans ça, le welcome est
   visible par défaut → flash du formulaire login pour les users connectés.
   !important pour passer outre l'attribut [hidden] du HTML. */
html[data-init-step="welcome"]      .tunnel-step[data-step="welcome"]      { display: block !important; }
html[data-init-step="signup"]       .tunnel-step[data-step="signup"]       { display: block !important; }
html[data-init-step="validate"]     .tunnel-step[data-step="validate"]     { display: block !important; }
html[data-init-step="dashboard"]    .tunnel-step[data-step="dashboard"]    { display: block !important; }
html[data-init-step="scan"]         .tunnel-step[data-step="scan"]         { display: block !important; }
html[data-init-step="collection"]   .tunnel-step[data-step="collection"]   { display: block !important; }
html[data-init-step="configurator"] .tunnel-step[data-step="configurator"] { display: block !important; }


/* TOUTES les étapes du tunnel : on rapproche le contenu de la barre de menu
   et on reduit l'espace entre le bas et le footer */
.tunnel-step {
  padding-top: clamp(16px, 2.5vw, 32px);
  padding-bottom: clamp(12px, 1.6vw, 20px);
}

/* ===== Welcome / Onboarding ===== */

/* Hero éditorial centré et compact */
.welcome-hero {
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 var(--pad);
}
.welcome-hero .eyebrow {
  display: inline-block;
  margin-bottom: 0;
}
.welcome-hero hr {
  width: 56px;
  height: 1px;
  background: var(--ink);
  border: 0;
  margin: 22px auto 28px;
}
.welcome-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  letter-spacing: -0.025em;
  line-height: 1.18;
  color: var(--ink);
  margin: 0 0 1.4rem;
}
.welcome-title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.welcome-lead {
  font-size: 1rem;
  color: var(--muted);
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.55;
}

/* Bandeau process — grid stricte 5 colonnes */
.process-strip {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1120px;
  margin: clamp(56px, 7vw, 90px) auto clamp(48px, 6vw, 72px);
  padding: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.process-step {
  padding: clamp(28px, 3.4vw, 44px) clamp(8px, 1.4vw, 20px);
  text-align: center;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  position: relative;
}
.process-step:last-child { border-right: none; }
.process-num {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  color: var(--muted);
  text-transform: uppercase;
}
.process-icon {
  color: var(--ink);
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.process-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.process-label {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

/* CTA + petite ligne secondaire */
.welcome-cta {
  text-align: center;
  padding: 0 var(--pad);
}
.welcome-cta .btn {
  min-width: 220px;
  padding: 14px 32px;
  font-size: 0.78rem;
  letter-spacing: 0.24em;
}
.welcome-foot {
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 1.6rem;
}
.welcome-foot a {
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1px;
}

/* Note de bas de page (privacy/manifesto) */
.welcome-fineprint {
  margin-top: clamp(56px, 8vw, 100px);
  padding: 28px var(--pad) 0;
  border-top: 1px solid var(--line);
  max-width: 1120px;
  margin-inline: auto;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  color: var(--soft);
}

/* === Responsive === */
@media (max-width: 760px) {
  .process-strip {
    grid-template-columns: 1fr;
    margin-left: var(--pad);
    margin-right: var(--pad);
  }
  .process-step {
    border-right: none;
    border-bottom: 1px solid var(--line);
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    padding: 22px 24px;
    gap: 22px;
  }
  .process-step:last-child { border-bottom: none; }
  .process-icon { width: 40px; height: 40px; flex-shrink: 0; }
  .process-num { min-width: 28px; }
  .process-label { flex: 1; }
}

/* ===== Forms (signup / login) ===== */
.tunnel-form-block {
  max-width: 460px;
  margin: 0 auto;
  padding: 0 var(--pad);
}
.tunnel-form-block .eyebrow { text-align: center; }
.tunnel-form-block h2 { text-align: center; margin-bottom: 0.6rem; }
.tunnel-form-intro {
  text-align: center;
  color: var(--muted);
  margin-bottom: 2.2rem;
  font-size: 0.95rem;
}

.tunnel-form { display: flex; flex-direction: column; gap: 16px; }
.tunnel-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 540px) { .tunnel-row { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input {
  padding: 12px 14px;
  border: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 0.95rem;
  background: #fff;
  color: var(--ink);
  outline: none;
  transition: border-color .15s ease;
}
.field input:focus { border-color: var(--ink); }

.field-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.85rem;
  color: var(--text);
  line-height: 1.45;
}
.field-check input { margin-top: 3px; accent-color: #000; }

.privacy-note {
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
  margin-top: 14px;
  line-height: 1.5;
}

.form-error {
  display: none;
  background: #fff5f5;
  border-left: 3px solid #c0392b;
  color: #b03126;
  padding: 10px 12px;
  font-size: 0.85rem;
}
.form-error.show { display: block; }

.form-foot {
  text-align: center;
  margin-top: 1.4rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.form-foot a { color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 1px; }

/* ===== Validate / Dashboard ===== */
.center-block { text-align: center; max-width: 600px; margin: 0 auto; padding: 0 var(--pad); }
.center-block h2 { margin-bottom: 1rem; }
.center-block p { color: var(--muted); margin-bottom: 2rem; }
.center-block .btn { margin-top: 0.6rem; }

/* ===== Scan ===== */
.scan-block { max-width: 760px; margin: 0 auto; padding: 0 var(--pad); text-align: center; }
.scan-block h2 { margin-bottom: 1rem; }
.scan-block .saia-widget-container {
  display: inline-block;
  margin: 2rem auto;
  padding: 0;
  background: transparent;
  border: 0;
  min-height: 0;
  width: auto;
  max-width: 320px;
  vertical-align: middle;
}
.scan-block .saia-widget-container > * {
  display: inline-block;
  width: auto !important;
  max-width: 320px;
}

/* ===== Collection ===== */
/* Étape Collection : on serre l'espace haut (sous le menu) et bas (avant la grille) */
.tunnel-step[data-step="collection"] { padding-top: 12px; }
.collection-intro { margin-bottom: 1.25rem !important; }
.collection-intro h2 { margin-top: 0; }
.collection-intro p { margin-top: 0.5rem !important; }

.collection-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 var(--pad);
}
@media (max-width: 880px) { .collection-grid { grid-template-columns: 1fr; max-width: 360px; } }
.garment-card {
  border: 1px solid var(--line);
  background: #fff;
  display: flex;
  flex-direction: column;
}
.garment-illu {
  background: var(--bg-alt);
  aspect-ratio: 4/5;
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 10px;
  position: relative;
  overflow: hidden;
}
/* SVG (fallback ou illustration) : on remplit le cadre au maximum pour reduire la zone grise. */
.garment-illu svg {
  width: 100%;
  height: 100%;
  max-width: 220px;
  max-height: 88%;
}
/* Photo qui recouvre l'illu (SVG en dessous = fallback si erreur de chargement).
   Recadrage et leger zoom pour minimiser la zone grise visible autour du modele. */
.garment-illu .garment-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  transform: scale(1.18);
  transform-origin: center 35%;
  display: block;
  background: var(--bg-alt);
}
.garment-body { padding: 16px 18px 20px; text-align: center; }
.garment-name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.garment-desc { color: var(--muted); font-size: 0.78rem; margin-bottom: 12px; line-height: 1.45; }
.garment-card .btn { width: 100%; padding: 10px 16px; font-size: 0.8rem; }

/* ===== Configurator (refonte) ===== */
.configurator { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad) clamp(48px, 6vw, 80px); }
.configurator-header {
  text-align: center;
  margin-bottom: clamp(20px, 2.8vw, 36px);
}
.configurator-header .eyebrow {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
  margin: 0;
}

/* Stage : 2 colonnes (photo + options) */
.config-stage {
  display: grid;
  grid-template-columns: minmax(0, 32fr) minmax(0, 40fr) minmax(0, 28fr);
  gap: clamp(16px, 2vw, 28px);
  align-items: stretch;          /* toutes les cellules ont la meme hauteur (= photo) */
  margin-bottom: clamp(16px, 2vw, 28px);
}
.config-stage > * { min-width: 0; min-height: 0; }
.config-stage > .avatar-frame,
.config-stage > .config-options,
.config-stage > .config-side {
  align-self: stretch;
  height: 100%;
}
/* Sous 720px : on empile tout en colonne unique */
@media (max-width: 720px) {
  .config-stage { grid-template-columns: 1fr; gap: 20px; }
  .config-stage > .avatar-frame,
  .config-stage > .config-options,
  .config-stage > .config-side { height: auto; }
  .config-side, .morphopass-card { position: static; }

  /* Vue d'ensemble mobile : l'illustration devient compacte, centree et
     epinglee juste sous le header. Elle reste visible pendant qu'on fait
     defiler les options -> on voit toujours le rendu en changeant un choix. */
  .config-stage > .avatar-frame {
    position: sticky;
    top: 66px;                 /* hauteur du header mobile */
    z-index: 5;
    aspect-ratio: 4 / 5;
    height: 38vh;
    width: auto;
    max-width: 86vw;
    margin: 0 auto 6px;
    box-shadow: 0 10px 20px -14px rgba(0,0,0,0.5);
  }
}

/* Avatar frame (photo OU mannequin SVG dynamique) */
.avatar-frame {
  position: relative;
  background: var(--bg-alt);
  aspect-ratio: 2/3;            /* aligné sur le ratio des illustrations (plus de bande latérale) */
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  /* Variables couleur du t-shirt (mises à jour par experience.js) */
  --shirt-fill: #111;
  --shirt-stroke: #000;
}
.avatar-variant {
  position: absolute; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-variant img.avatar-photo {
  /* v2 (mai 2026) — léger padding-top via object-position décalé pour éviter
     que la tête du mannequin ne touche le haut du cadre. */
  width: 100%; height: 100%; object-fit: contain; object-position: 50% 58%; display: block;
  background: #fff;
}
.avatar-variant img.avatar-photo[hidden] { display: none !important; }
.avatar-variant[hidden] { display: none !important; }

.avatar-svg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-svg[hidden] { display: none !important; }
.avatar-svg svg {
  width: 100%;
  height: 100%;
  display: block;
}
.mannequin .shirt-base {
  transition: fill .35s ease, stroke .35s ease;
}

/* Variantes d'encolure pilotées par [data-neck] sur .avatar-frame */
.avatar-frame .neck-variant            { display: none; }
.avatar-frame[data-neck="round"]  .neck-round  { display: block; }
.avatar-frame[data-neck="v"]      .neck-v      { display: block; }
/* Fallback : si data-neck absent → col rond */
.avatar-frame:not([data-neck]) .neck-round { display: block; }

/* Etiquette prix flottante : CHF | PTC + tooltip au survol */
.avatar-price {
  position: absolute;
  bottom: 14px; right: 14px;
  background: #fff;
  padding: 10px 16px;
  border: 1px solid var(--ink);
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.98rem;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  cursor: help;
  outline: none;
}
.avatar-price .price-amount,
.avatar-price .price-coins {
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
}
.avatar-price .price-currency {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  font-weight: 500;
  color: var(--muted);
  margin-left: 2px;
  vertical-align: 1px;
}
.avatar-price .price-divider {
  width: 1px;
  height: 18px;
  background: var(--line);
  display: inline-block;
}
.avatar-price .price-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  background: var(--ink);
  color: #fff;
  padding: 10px 14px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.78rem;
  line-height: 1.45;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease;
  z-index: 10;
  box-shadow: 0 6px 18px -8px rgba(0,0,0,0.3);
}
.avatar-price .price-tooltip strong {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 4px;
  font-weight: 600;
}
.avatar-price .price-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 22px;
  border: 5px solid transparent;
  border-top-color: var(--ink);
}
.avatar-price:hover .price-tooltip,
.avatar-price:focus .price-tooltip,
.avatar-price:focus-within .price-tooltip {
  opacity: 1;
  transform: translateY(0);
}

/* Colonne centrale : carte stylee (memes codes que la carte Morphopass) */
.config-options {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  align-self: stretch;
  background: #fff;
  border: 1px solid #ededed;
  padding: 20px 16px 16px;
  box-shadow: none;
}
[data-garment-config] {
  display: flex;
  flex-direction: column;
  justify-content: space-between;  /* repartit les 5 sections sur toute la hauteur */
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
}
[data-garment-config][hidden] { display: none !important; }
.config-section { margin: 0; flex: 0 0 auto; }
.config-section h3 {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--soft);
  font-weight: 500;
  margin-bottom: 9px;
}
.opt-row { display: flex; flex-wrap: wrap; gap: 6px; }
.opt {
  border: 1px solid var(--line);
  background: #fff;
  padding: 10px 8px;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .18s, color .18s, border-color .18s;
}
.opt:hover { border-color: #c9c9c9; background: var(--bg-soft); }
.opt.active { background: var(--ink); color: #fff; border-color: var(--ink); }
/* Chaque rangee = un controle segmente pleine largeur (encolure sur 1 ligne) */
.config-section .opt-row { gap: 5px; }
.config-section .opt-row .opt { flex: 1 1 0; min-width: 0; text-align: center; white-space: normal; line-height: 1.25; }
.config-input {
  padding: 8px 2px;
  border: 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 0.85rem;
  background: transparent;
  color: var(--ink);
  width: 100%;
  outline: none;
  transition: border-color .18s;
}
.config-input::placeholder { color: var(--soft); letter-spacing: 0.04em; }
.config-input:focus { border-bottom-color: var(--ink); }

/* Bandeau couleurs en bas */
.config-colors {
  text-align: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 32px var(--pad);
  margin: 0 calc(-1 * var(--pad)) clamp(32px, 4vw, 48px);
  background: #fff;
}
.config-colors h3 {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 18px;
}
.color-strip {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.color-swatch {
  width: 58px;
  height: 58px;
  border: 1px solid var(--line);
  cursor: pointer;
  position: relative;
  padding: 0;
}
.color-swatch.active { outline: 2px solid var(--ink); outline-offset: 4px; }
.color-swatch[data-color="black"]      { background: #111; }
.color-swatch[data-color="white"]      { background: #fff; }
.color-swatch[data-color="cream"]      { background: #ece4d3; }
.color-swatch[data-color="navy"]       { background: #1c2842; }
.color-swatch[data-color="anthracite"] { background: #2a2a2d; }
.color-current-name {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 700;
}

.config-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* ===== Gender field au signup ===== */
.gender-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gender-opt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 8px;
  border: 1px solid var(--line);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.8rem;
  line-height: 1.15;
  color: var(--ink);
  background: #fff;
  transition: background-color .15s, color .15s, border-color .15s;
  text-align: center;
}
.gender-opt input { position: absolute; opacity: 0; pointer-events: none; }
.gender-opt:has(input:checked) {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

/* ===== Nav user chip ===== */
.user-chip {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--sans);
  font-size: 0.78rem;
  text-transform: none;
  letter-spacing: normal;
}
.user-chip .user-name {
  font-weight: 600;
  color: var(--ink);
}
.user-chip .cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: transparent;
  border: 1px solid var(--ink);
  cursor: pointer;
  color: var(--ink);
}
.user-chip .cart-btn:hover { background: var(--bg-alt); }
.user-chip .cart-count {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
}
/* Nouveau lien "Mon compte" dans la barre de navigation */
.user-chip .nav-account-link {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color .2s ease;
  white-space: nowrap;
}
.user-chip .nav-account-link:hover { border-bottom-color: var(--ink); }
.user-chip .nav-account-link .cart-mini-count {
  margin-left: 4px;
  font-size: 0.66rem;
  color: var(--muted);
  font-weight: 500;
}
.user-chip .user-logout {
  width: 28px; height: 28px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 1.2rem;
  line-height: 0;
  color: var(--muted);
  cursor: pointer;
}
.user-chip .user-logout:hover { color: var(--ink); border-color: var(--ink); }


/* -------- Lien Se connecter / S'inscrire dans le nav -------- */
.user-chip--connected {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 0;
  padding: 0;
  background: none;
  color: var(--muted);
}
.user-chip--connected .user-ident {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
}
.user-chip--connected .user-status {
  border-left: 1px solid var(--line);
  padding-left: 9px;
  font-weight: 600;
  color: var(--muted);
}
.user-chip--connected .user-logout {
  background: none;
  border: 0;
  color: var(--soft);
  font-size: 1.05rem;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
}
.user-chip--connected .user-logout:hover { color: var(--ink); }
.mobile-nav-right .user-chip--connected {
  width: 100%;
  justify-content: space-between;
  padding: 12px 16px;
  border: 1px solid var(--line);
}
.mobile-nav-right .user-chip--connected .user-ident { font-size: 0.95rem; }

.nav-account {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 8px 0;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, opacity .2s ease;
  white-space: nowrap;
}
.nav-account:hover { border-color: var(--ink); }
@media (max-width: 720px) {
  .nav-account { font-size: 0.62rem; letter-spacing: 0.14em; }
}


/* -------- Process strip splitté (welcome avec zoom au milieu) -------- */
.process-strip--first {
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 0;
  border-bottom: none;
}
.process-strip--second {
  grid-template-columns: repeat(3, 1fr);
  margin-top: 0;
  border-top: none;
}
/* Bloc d'illustration "zoom" entre les 2 strips */
.process-zoom {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0;
  background: #fafafa;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  position: relative;
}
.process-zoom .zoom-eyebrow {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  color: var(--soft);
  text-transform: uppercase;
  text-align: center;
  padding: 14px var(--pad);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.process-zoom img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 760px) {
  .process-strip--first,
  .process-strip--second {
    grid-template-columns: 1fr;
  }
}


/* -------- Couleur en première option (intégrée dans la colonne options) -------- */
.config-section .color-row-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.color-row-inline .color-swatch {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(0,0,0,0.1);
  cursor: pointer;
  position: relative;
  padding: 0;
  transition: outline-color .15s;
}
.color-row-inline .color-swatch.active {
  outline: 1px solid var(--ink);
  outline-offset: 3px;
}
.color-row-inline .current-color-name {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 700;
}

/* Titre de section : couleur du tissu suivie du nom entre parentheses, plus petit, inline */
.config-section-title {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 6px;
  flex-wrap: wrap;
}
.config-section-title .current-color-name {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.config-section-title .current-color-name::before { content: '('; }
.config-section-title .current-color-name::after { content: ')'; }

/* ===== Morphopass card : 3eme colonne du config-stage ===== */
.morphopass-card {
  background: #fff;
  border: 1px solid var(--line);
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 8px 24px -16px rgba(0,0,0,0.08);
}
.morphopass-card .morphopass-eyebrow {
  /* Titre agrandi et centre horizontalement */
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 700;
  text-align: center;
  margin: 0 0 6px;
}
.morphopass-card .morphopass-select-label {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin: 4px 0 0;
}
.morphopass-card .morphopass-select {
  width: 100%;
  padding: 10px 32px 10px 12px;
  border: 1px solid var(--line);
  background: #fff;
  font-family: var(--sans);
  font-size: 0.86rem;
  color: var(--ink);
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' width='12' height='8'><path fill='none' stroke='%23111' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: border-color .15s;
}
.morphopass-card .morphopass-select:hover { border-color: var(--ink); }
.morphopass-card .morphopass-select:disabled {
  background-color: var(--bg-alt);
  color: var(--muted);
  cursor: not-allowed;
}
.morphopass-card .morphopass-add {
  background: transparent;
  border: 0;
  padding: 6px 0 0;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  border-bottom: 1px solid transparent;
  align-self: flex-start;
  transition: border-color .15s, opacity .15s;
}
.morphopass-card .morphopass-add:hover { border-bottom-color: var(--ink); }
.morphopass-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}
.morphopass-list:empty { display: none; }
.morphopass-opt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 12px 14px;
  cursor: pointer;
  font-family: var(--sans);
  text-align: left;
  transition: background-color .15s, color .15s, border-color .15s;
}
.morphopass-opt:hover { border-color: var(--ink); }
.morphopass-opt.active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.morphopass-opt .morphopass-name {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.2;
}
.morphopass-opt .morphopass-date {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.morphopass-opt.active .morphopass-date { color: rgba(255,255,255,0.65); }
.morphopass-empty {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}
.morphopass-empty a {
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1px;
  margin-left: 4px;
}

/* ===== Champ "nom de version" dans l'etape scan ===== */
.scan-version-card {
  max-width: 540px;
  margin: 0 auto 2.2rem;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  padding: 26px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}
.scan-version-card .scan-version-q {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
}
.scan-version-card input {
  padding: 14px 16px;
  border: 1px solid var(--line);
  background: #fff;
  font-family: var(--sans);
  font-size: 1rem;
  outline: none;
  text-align: center;
  transition: border-color .15s, box-shadow .15s;
}
.scan-version-card input:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.05);
}
.scan-version-card input:invalid {
  border-color: var(--line);
}
.scan-version-card .scan-version-help {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.45;
}

/* ===== Signup : titre "Bienvenue parmi les Putchers." sur 2 lignes ===== */
.tunnel-form-block .welcome-h2-balanced {
  text-wrap: balance;
  font-size: clamp(1.6rem, 3.2vw, 2rem);
  line-height: 1.18;
}

/* -------- Actions placées sous le stage (fallback) -------- */
.config-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: clamp(20px, 3vw, 36px);
}

/* -------- Actions à l'intérieur de la colonne options (sous les options) -------- */
.config-options .config-actions {
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  justify-content: stretch;
}
.config-options .config-actions .btn {
  flex: 1 1 180px;
  min-width: 0;
}
@media (max-width: 540px) {
  .config-options .config-actions .btn { flex: 1 1 100%; }
}


/* ============================================================
   Toggle œil sur les champs mot de passe
   - Wrap injecté par auth.js autour de tout input[type=password]
   - Bouton à droite, transparent, change l'icône au toggle
   ============================================================ */
.pw-wrap {
  position: relative;
  display: block;
  width: 100%;
}
.pw-wrap > input {
  width: 100%;
  padding-right: 46px;
}
.pw-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--muted, #888);
  cursor: pointer;
  border-radius: 0;
  transition: color .15s ease;
}
.pw-toggle:hover,
.pw-toggle:focus-visible { color: var(--ink, #111); outline: none; }
.pw-toggle svg { display: block; }
.pw-toggle [hidden] { display: none !important; }


/* ============================================================
   Compression haut de page (toutes pages)
   - Premier <section> ou .hero juste après le header : top padding réduit
   ============================================================ */
.site-header + section,
.site-header + .hero {
  padding-top: clamp(16px, 2.5vw, 32px);
}


/* ============================================================
   AXE D'AVANCEMENT PROJET (Le Projet, sticky sous le menu)
   ============================================================ */
.project-progress {
  position: sticky;
  top: 78px;          /* hauteur du header (verrouillée) */
  z-index: 90;
  background: #fff;
  /* Ligne sous les textes des etapes : supprimee a la demande */
}
.project-progress-inner {
  max-width: var(--max);
  margin: 0 auto;
  /* Plus d'espace entre le menu et l'axe d'avancement */
  padding: 28px var(--pad) 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
}
.project-progress-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  position: relative;
}
/* Trait avant la fusee : solide noir */
.project-progress-steps::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 9px;
  /* S'arrete au depart de la fusee (~22%) - la fusee elle-meme couvre la zone 22-30% */
  width: calc(22% - 6px);
  height: 1.4px;
  background: var(--ink);
  z-index: 0;
}
/* Trait apres la fusee : pointille gris clair */
.project-progress-steps::after {
  content: '';
  position: absolute;
  left: 30%;
  right: 6px;
  top: 9px;
  height: 1.4px;
  /* Pattern pointille : 3px de gris + 3px de transparent, repete */
  background-image: linear-gradient(to right, var(--line) 50%, transparent 50%);
  background-size: 6px 1.4px;
  background-repeat: repeat-x;
  z-index: 0;
}
.prog-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding-top: 22px;
  cursor: default;
}
.prog-step .prog-step-dot {
  position: absolute;
  top: 4px;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
}
.prog-step.done .prog-step-dot {
  background: var(--ink);
  border-color: var(--ink);
}
/* Etape courante : grande fusee horizontale pointant a droite, centree sur la ligne. */
.prog-step.current .prog-step-dot {
  width: 60px;
  height: 28px;
  border-radius: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  /* Centre verticalement la fusee sur la ligne (top: 9px du parent + 0.7px epaisseur ligne)
     => fusee centree autour de y = 9.7 ; rocket center vertical au milieu de height (= 14)
     => top = 9.7 - 14 = -4.3px (arrondi) */
  top: -4px;
  left: -22px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 24' fill='none'><g fill='%23111'><path d='M0 12 L4 9 L4 15 Z'/><path d='M4 14 L13 14 L15 23 L9 23 Z'/><path d='M4 10 L13 10 L15 1 L9 1 Z'/><rect x='8' y='5' width='26' height='14' rx='5'/><path d='M34 5 L46 12 L34 19 Z'/></g><circle cx='22' cy='12' r='2.4' fill='%23fff'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.prog-step .prog-step-num {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--muted);
  font-weight: 500;
}
.prog-step.current .prog-step-num,
.prog-step.done .prog-step-num { color: var(--ink); }
.prog-step .prog-step-name {
  font-family: var(--sans);
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.prog-step.current .prog-step-name {
  color: var(--ink);
  font-weight: 700;
}
.prog-step.done .prog-step-name { color: var(--ink); }
.project-progress-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 220px;
}
.project-progress-bar {
  flex: 1;
  height: 4px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.project-progress-bar > span {
  display: block;
  height: 100%;
  background: var(--ink);
  transition: width .4s ease;
}
.project-progress-pct {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.project-progress-pct em {
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.6rem;
  color: var(--muted);
  font-weight: 500;
  margin-right: 8px;
}
@media (max-width: 880px) {
  .project-progress-inner { grid-template-columns: 1fr; gap: 12px; }
  .project-progress-steps { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .project-progress-steps::before { display: none; }
  .prog-step { padding-top: 18px; }
  .prog-step .prog-step-name { font-size: 0.7rem; }
  .project-progress-meta { min-width: 0; }
}

/* ============================================================
   SELECTEUR DE VETEMENT (place entre le titre et le config-stage)
   ============================================================ */
.garment-selector-bar {
  max-width: 1200px;
  margin: 0 auto clamp(20px, 2.4vw, 32px);
  padding: clamp(14px, 1.6vw, 22px);
  border: 1px solid var(--line);
  background: #fff;
}
.garment-selector {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.garment-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 14px;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.86rem;
  color: var(--ink);
  transition: border-color .15s, background-color .15s, color .15s;
}
.garment-pick:focus { outline: none; }
.garment-pick:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.garment-pick:hover { border-color: var(--ink); }
.garment-pick.active {
  border-color: var(--ink);
  background: #fff;
  color: var(--ink);
}
/* Pas d'effet sur la photo : on souligne juste le label en gras quand actif */
.garment-pick.active .garment-pick-label {
  font-weight: 700;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 1px;
}
.garment-pick-thumb {
  width: 100%;
  height: 76px;
  background: var(--bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.garment-pick-thumb img,
.garment-pick-thumb svg {
  max-width: 76%;
  max-height: 76%;
  width: auto;
  height: auto;
  display: block;
  transition: filter .2s;
}
.garment-pick-thumb img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center 28%;
}
.garment-pick-label {
  font-weight: 600;
  letter-spacing: 0.02em;
}
@media (max-width: 600px) {
  .garment-pick-thumb { height: 64px; }
}


/* ---- Logo : garde-fou pour eviter qu'il disparaisse ---- */
.site-header .nav-brand img {
  display: block !important;
  height: 38px !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain;
  background: transparent;
}


/* ============================================================
   COLONNE DE DROITE DU CONFIGURATEUR : Morphopass + actions
   ============================================================ */
/* Carte Morphopass naturelle au sommet, boutons colles en bas via flex column.
   Le bas du dernier bouton (Mon panier) se retrouve aligne avec le bas de la photo
   grace au stretch parent + margin-top: auto sur les actions. */
.config-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  align-self: stretch;
}
.config-side .morphopass-card {
  position: static;
  top: auto;
  /* Hauteur du contenu uniquement (pas d'etirement) */
  flex: 0 0 auto;
  height: auto;
  justify-content: flex-start;
}
.config-side .config-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;       /* pousse les boutons en bas de la colonne */
  padding-top: 0;
  border-top: 0;
  flex: 0 0 auto;
}
.config-side .config-actions .btn {
  width: 100%;
  padding: 12px 18px;
  font-size: 0.74rem;
}
.config-side .cart-mini {
  padding: 11px 16px;
}

/* Bouton "Mon panier" (compact, secondaire) */
.cart-mini {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--line);
  padding: 10px 16px;
  cursor: pointer;
  font-family: var(--sans);
  color: var(--ink);
  transition: border-color .15s, background-color .15s;
}
.cart-mini:hover { border-color: var(--ink); }
.cart-mini-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cart-mini-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cart-mini-count {
  font-weight: 500;
  color: var(--muted);
}

/* Sous 720px : la colonne droite passe sous les options */
@media (max-width: 720px) {
  .config-side { position: static; gap: 12px; height: auto; }
  .config-options, [data-garment-config] { height: auto; }
}

/* ============================================================
   PAGE MON COMPTE : layout avec onglets lateraux
   ============================================================ */
.account-layout {
  max-width: var(--max);
  margin: 0 auto;
  /* Padding-top reduit suite a la suppression du header (ESPACE CLIENT / Mon Dressing) */
  padding: clamp(20px, 2.5vw, 36px) var(--pad);
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  grid-template-areas:
    "tabs   panels";
  column-gap: clamp(28px, 4vw, 48px);
  row-gap: clamp(20px, 2vw, 32px);
  align-items: start;
}
.account-tabs { grid-area: tabs; }
.account-panels { grid-area: panels; }
.account-header .eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.account-header h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  letter-spacing: -0.02em;
  margin: 0;
}
.account-tabs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-right: none;
}
.account-tab-btn {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 12px 14px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 10px;
  transition: color .15s, background-color .15s;
}
.account-tab-btn:hover { color: var(--ink); background: var(--bg-alt); }
.account-tab-btn.active {
  color: #fff;
  font-weight: 700;
  background: var(--ink);
}
.account-tab-btn.active:hover { color: #fff; background: #000; }
.account-tab-btn.active .account-tab-icon { color: #fff; }
.account-tab-btn.active .account-tab-count { color: rgba(255,255,255,0.7); }
.account-tab-btn .account-tab-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}
.account-tab-btn .account-tab-count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-weight: 500;
}
.account-panels {
  min-height: 320px;
  min-width: 0;
  align-self: start;
  margin: 0;
  padding: 0;
}
.account-panel { display: none; margin: 0; padding: 0; }
.account-panel.active { display: block; margin: 0; padding: 0; }
.account-panel h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  padding: 0;
}
.account-panel .panel-intro {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0 0 24px;
  line-height: 1.5;
}
.account-empty {
  border: 1px dashed var(--line);
  background: var(--bg-alt);
  padding: 28px 24px;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}
.account-empty a {
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
}
.dressing-grid,
.orders-list {
  display: grid;
  gap: 14px;
}
.morphopasses-list {
  display: grid;
  gap: 6px;
}
.dressing-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.dressing-card {
  border: 1px solid var(--line);
  background: #fff;
  display: flex;
  flex-direction: column;
}
.dressing-card-illu {
  aspect-ratio: 4/5;
  background: var(--bg-alt);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.dressing-card-illu img { width: 100%; height: 100%; object-fit: cover; }
.dressing-card-body { padding: 12px 14px 16px; }
.dressing-card-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
}
.dressing-card-meta {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 4px;
}

.order-card {
  border: 1px solid var(--line);
  background: #fff;
  padding: 16px 20px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
}
.mp-row {
  border: 1px solid var(--line);
  background: #fff;
  padding: 6px 14px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 14px;
  min-height: 0;
}
.mp-row .dressing-card-name { font-size: 0.92rem; line-height: 1.2; }
.mp-row .mp-meta { margin-top: 0; font-size: 0.62rem; letter-spacing: 0.14em; }
.mp-row > div:first-child {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.order-card .order-status,
.mp-row .mp-active-pill {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 4px 8px;
}
.mp-row .mp-active-pill { background: var(--ink); color: #fff; padding: 2px 8px; font-size: 0.6rem; }
.mp-row button.opt { padding: 4px 10px; font-size: 0.62rem; line-height: 1.2; }
.order-card .order-meta,
.mp-row .mp-meta {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 4px;
}



@media (max-width: 760px) {
  .account-layout { grid-template-columns: 1fr; }
  .account-tabs {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    flex-direction: row;
    overflow-x: auto;
    gap: 4px;
    padding-bottom: 2px;
  }
  .account-tab-btn {
    padding: 10px 14px;
    border-right: 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    margin: 0;
  }
  .account-tab-btn.active {
    border-right: 0;
    border-bottom-color: var(--ink);
  }
}


/* ============================================================
   WELCOME (Le Store) : version simplifiee avec connexion directe
   ============================================================ */
.welcome-hero--simple {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) var(--pad) clamp(24px, 3vw, 36px);
}
.welcome-h1-simple {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
.welcome-login-block {
  max-width: 420px;
  margin: 0 auto;
  padding: 0 var(--pad);
}
.welcome-login-eyebrow {
  text-align: center;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 20px;
}
.welcome-login-block .form-foot {
  text-align: center;
  margin-top: 16px;
  font-size: 0.85rem;
  color: var(--muted);
}
.welcome-login-block .form-foot a {
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1px;
  font-weight: 600;
  margin-left: 4px;
}
.welcome-login-block .btn-primary { width: 100%; padding: 14px 24px; }


/* ============================================================
   Eyebrow "MES OPTIONS" en haut de la colonne centrale du configurateur
   (meme style que "MON MORPHOPASS" pour symetrie visuelle)
   ============================================================ */
.config-options .options-eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
  text-align: center;
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #efefef;
  flex: 0 0 auto;
}


/* ============================================================
   PAGE MON DRESSING : nouveaux composants (cart, orders, modals)
   ============================================================ */

/* Cart (panier) */
.cart-list { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; }
.cart-list:empty { display: none; }
.cart-item {
  display: grid;
  grid-template-columns: 64px 1fr auto auto;
  gap: 14px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  padding: 10px 12px;
}
.cart-item-illu {
  width: 64px;
  height: 64px;
  background: var(--bg-alt);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.cart-item-illu img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-name { font-family: var(--display); font-weight: 700; font-size: 1rem; }
.cart-item-meta { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; margin-top: 4px; }
.cart-item-price { font-family: var(--display); font-weight: 800; font-size: 1rem; }
.cart-item-remove {
  width: 28px; height: 28px;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  font-size: 1.1rem; line-height: 0;
  color: var(--muted);
}
.cart-item-remove:hover { color: var(--ink); border-color: var(--ink); }

.cart-checkout {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}
.cart-checkout[hidden] { display: none; }
.cart-total {
  font-family: var(--mono);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  color: var(--ink);
  display: flex; gap: 12px; align-items: baseline;
}
.cart-total-amount { font-family: var(--display); font-weight: 800; font-size: 1.2rem; letter-spacing: -0.01em; }
.cart-checkout .btn { padding: 12px 24px; }
.cart-continue {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.cart-continue:hover { color: var(--ink); }

/* Trackvision tag */
.trackvision-tag {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

/* Orders : grid (list + detail) */
.orders-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.orders-list { display: flex; flex-direction: column; gap: 8px; }
.order-card {
  background: #fff;
  border: 1px solid var(--line);
  padding: 11px 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  cursor: pointer;
  text-align: left;
  font-family: var(--sans);
  transition: border-color .15s, background-color .15s;
}
.order-card:hover { border-color: var(--ink); }
.order-card-wrap.open > .order-card { border-color: var(--ink); }
.order-card-id { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.16em; font-weight: 700; }
.order-card-meta { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; color: var(--muted); text-transform: uppercase; margin-top: 3px; }
.order-card-status {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 4px 10px;
}
.order-detail {
  background: #fff;
  border: 1px solid var(--line);
  padding: 14px 16px;
  position: relative;
}
.order-detail-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 30px; height: 30px;
  background: #fff;
  border: 1px solid var(--line);
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 0;
  color: var(--muted);
}
.order-detail-close:hover { color: var(--ink); border-color: var(--ink); }
.order-detail-head { margin-bottom: 4px; min-height: 30px; }
.order-detail-eyebrow { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em; color: var(--muted); margin: 0 0 4px; text-transform: uppercase; }
.order-detail-item { padding: 9px 0; border-bottom: 1px solid var(--line); }
.order-detail-item:last-child { border-bottom: 0; }
.odi-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; gap: 12px; flex-wrap: wrap; }
.odi-name { font-family: var(--display); font-weight: 700; font-size: 1rem; }
.odi-meta { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; }
.prod-stages {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  position: relative;
}
.prod-stages::before {
  content: '';
  position: absolute;
  left: 6px;
  right: 6px;
  top: 5px;
  height: 1px;
  background: var(--line);
}
.prod-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 16px;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.prod-stage-dot {
  position: absolute;
  top: 0; left: 0;
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  z-index: 1;
}
.prod-stage.done .prod-stage-dot { background: var(--ink); border-color: var(--ink); }
/* Etape terminee = vert ; etape en cours = orange */
.prod-stage.done:not(.current) .prod-stage-dot { background: #1aa35a; border-color: #1aa35a; }
.prod-stage.current .prod-stage-dot { background: #f0921e; border-color: #f0921e; box-shadow: 0 0 0 4px rgba(240,146,30,0.18); }
.prod-stage.done .prod-stage-label,
.prod-stage.current .prod-stage-label { color: var(--ink); font-weight: 600; }
.prod-stage.done:not(.current) .prod-stage-label { color: #1aa35a; }
.prod-stage.current .prod-stage-label { color: #c9760f; }
/* Date de livraison estimee sous l'etape Expediee */
.prod-stage-eta { display: block; margin-top: 7px; font-family: var(--mono); line-height: 1.3; text-transform: none; }
.prod-stage-eta .pse-label { display: block; font-size: 0.5rem; letter-spacing: 0.1em; color: var(--soft); text-transform: uppercase; }
.prod-stage-eta .pse-date { display: block; margin-top: 1px; font-size: 0.62rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
@media (max-width: 760px) {
  .prod-stages { grid-template-columns: 1fr; }
  .prod-stages::before { display: none; }
  .prod-stage { padding-top: 0; padding-left: 18px; }
  .prod-stage-dot { left: 0; top: 4px; }
}

/* Dressing table */
.dressing-controls { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.dressing-sort-label {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}
.dressing-sort {
  padding: 6px 28px 6px 12px;
  border: 1px solid var(--line);
  background: #fff;
  font-family: var(--sans);
  font-size: 0.86rem;
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' width='12' height='8'><path fill='none' stroke='%23111' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.dressing-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--line);
  font-size: 0.84rem;
  table-layout: auto;
}
.dressing-table th {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-alt);
  white-space: nowrap;
}
.dressing-table td {
  padding: 8px 10px;
  vertical-align: middle;
  border-bottom: 1px solid var(--line);
}
.dressing-table tbody tr { cursor: pointer; transition: background-color .12s; }
.dressing-table tbody tr:hover { background: var(--bg-alt); }
.dressing-table tbody tr:last-child td { border-bottom: 0; }
.dressing-item-name { font-family: var(--display); font-weight: 700; font-size: 0.9rem; line-height: 1.2; }
.dressing-item-meta { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em; color: var(--muted); text-transform: uppercase; margin-top: 2px; }
.qr-cell { width: 56px; padding: 4px !important; }
.qr-wrap {
  width: 44px;
  height: 44px;
  padding: 2px;
  background: #fff;
  border: 1px solid var(--line);
  display: inline-block;
  vertical-align: middle;
}
.qr-svg { display: block; width: 100%; height: 100%; }
.security-cell { width: 1%; white-space: nowrap; }
.security-serial {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  color: var(--ink);
  background: var(--bg-alt);
  padding: 4px 8px;
  border: 1px solid var(--line);
  white-space: nowrap;
  display: inline-block;
}

/* Product modal (TrackVision-like) */
.product-modal,
.checkout-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-modal[hidden],
.checkout-modal[hidden] { display: none; }
.product-modal-backdrop,
.checkout-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  cursor: pointer;
}
.product-modal-card,
.checkout-modal-card {
  position: relative;
  background: #fff;
  width: min(540px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  overflow: auto;
  padding: 32px;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.3);
}
.product-modal-card { width: min(820px, calc(100vw - 32px)); padding: 28px 32px 32px; }
.checkout-modal-card { width: min(640px, calc(100vw - 32px)); padding: 18px 24px 20px; max-height: calc(100vh - 28px); }
.product-modal-close,
.checkout-modal-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  background: #fff;
  border: 1px solid var(--line);
  cursor: pointer;
  font-size: 1.4rem; line-height: 0;
  color: var(--muted);
}
.product-modal-close:hover,
.checkout-modal-close:hover { color: var(--ink); border-color: var(--ink); }
.product-modal-head { margin: 0 0 22px; }
.product-modal-eyebrow { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.product-modal-title { font-family: var(--display); font-weight: 800; font-size: 1.4rem; letter-spacing: -0.01em; margin: 0 0 4px; }
.product-modal-sub { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; margin: 0; }

/* Layout 2 colonnes : illustration | détails + QR */
.product-modal-grid {
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr) auto;
  gap: 28px;
  align-items: start;
}
.product-modal-figure {
  margin: 0;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-modal-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-modal-img-empty { background: var(--bg-alt); }
.product-modal-details {
  min-width: 0;
}

.product-spec {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px 18px;
  margin: 0;
  font-size: 0.88rem;
}
.product-spec dt { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.product-spec dd { margin: 0; color: var(--ink); line-height: 1.35; word-break: break-word; }
.product-spec code { font-family: var(--mono); font-size: 0.78rem; word-break: break-all; }

/* QR : taille fixe et compacte (la règle globale .qr-svg{width:100%} est neutralisée ici) */
.product-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: max-content;
}
.product-qr-frame {
  display: inline-flex;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  line-height: 0;
}
.product-qr-frame .qr-svg {
  width: 132px;
  height: 132px;
  display: block;
}
.product-qr-serial {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  color: var(--muted);
  background: var(--bg-alt);
  padding: 4px 8px;
  border: 1px solid var(--line);
  word-break: break-all;
  text-align: center;
  max-width: 100%;
}

/* Mobile : on empile illustration / détails / QR */
@media (max-width: 760px) {
  .product-modal-grid {
    grid-template-columns: minmax(160px, 200px) 1fr;
    gap: 22px;
  }
  .product-qr {
    grid-column: 1 / -1;
    width: 100%;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
    margin-top: 4px;
  }
  .product-qr-serial { word-break: break-all; }
}
@media (max-width: 520px) {
  .product-modal-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .product-modal-figure {
    aspect-ratio: 4 / 3;
    max-height: 260px;
  }
  .product-modal-img { object-fit: contain; }
  .product-qr {
    flex-direction: column;
    border-top: 0;
    padding-top: 0;
  }
  .product-qr-frame .qr-svg { width: 116px; height: 116px; }
}

/* Checkout modal */
body.modal-open { overflow: hidden; }
.checkout-modal-title { font-family: var(--display); font-weight: 800; font-size: 1.22rem; letter-spacing: -0.01em; margin: 0 0 10px; }
.checkout-steps {
  list-style: none; margin: 0 0 16px; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  position: relative;
}
.checkout-steps li {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.10em;
  color: var(--muted);
  text-align: center;
  text-transform: uppercase;
  line-height: 1.3;
  min-width: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.checkout-steps li .lbl { display: block; white-space: normal; max-width: 100%; }
.checkout-steps li .num {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
  background: #fff;
}
.checkout-steps li.active .num,
.checkout-steps li.done .num { background: var(--ink); color: #fff; border-color: var(--ink); }
.checkout-steps li.active .lbl,
.checkout-steps li.done .lbl { color: var(--ink); font-weight: 600; }
.checkout-pane { display: block; }
.checkout-pane[hidden] { display: none; }
.checkout-radio {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: #fff;
  margin-bottom: 8px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.9rem;
}
.checkout-radio input { accent-color: #000; }
.checkout-radio-meta { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; }
.checkout-radio:has(input:checked) { border-color: var(--ink); background: var(--bg-alt); }
.checkout-empty { color: var(--muted); font-size: 0.9rem; margin: 0 0 12px; }

/* Carte d'adresse : nom en haut, adresse dessous (pleine largeur) */
.checkout-address-list .checkout-radio {
  grid-template-columns: 22px 1fr;
  align-items: start;
  row-gap: 3px;
}
.checkout-address-list .checkout-radio input { grid-column: 1; grid-row: 1; margin-top: 3px; }
.checkout-address-list .checkout-radio-main { grid-column: 2; grid-row: 1; font-weight: 600; }
.checkout-address-list .checkout-radio-meta { grid-column: 2; grid-row: 2; }
.checkout-new-address {
  border: 1px solid var(--line);
  padding: 12px 14px;
  margin-top: 8px;
}
.checkout-new-address summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
}
.checkout-form { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; }
.checkout-form .cf-row { display: grid; grid-template-columns: 1fr; gap: 10px; }
.checkout-form .cf-row.two { grid-template-columns: 1fr 2fr; }
.checkout-form label { display: flex; flex-direction: column; gap: 4px; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.checkout-form input { padding: 9px 12px; border: 1px solid var(--line); background: #fff; font-family: var(--sans); font-size: 0.9rem; outline: none; color: var(--ink); }
.checkout-form input:focus { border-color: var(--ink); }
.checkout-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; }
.checkout-actions .btn { padding: 11px 22px; }
.checkout-actions .btn[disabled] { opacity: 0.4; pointer-events: none; }
.rev-section { padding: 7px 0; border-top: 1px solid var(--line); }
.rev-section:first-child { border-top: 0; padding-top: 0; }
.rev-section h4 { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: 0 0 3px; font-weight: 600; }
.rev-section p { margin: 0; font-size: 0.9rem; line-height: 1.35; }
.rev-items { list-style: none; margin: 0; padding: 0; font-size: 0.9rem; line-height: 1.4; }
.rev-totals { padding: 8px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; font-size: 0.9rem; }
.rev-totals > div { display: flex; justify-content: space-between; }
.rev-total-final { font-family: var(--display); font-weight: 800; font-size: 1.1rem; padding-top: 4px; }
.rev-ptc { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.12em; color: var(--muted); }
.checkout-success { text-align: center; padding: 24px 12px; }
.checkout-success-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.8rem;
  margin-bottom: 14px;
}
.checkout-success h3 { font-family: var(--display); font-weight: 800; font-size: 1.2rem; margin: 0 0 6px; }
.checkout-success p { color: var(--muted); margin: 0 auto 18px; max-width: 380px; line-height: 1.5; }

@media (max-width: 600px) {
  .cart-item { grid-template-columns: 56px 1fr; row-gap: 4px; }
  .cart-item-illu { width: 56px; height: 56px; }
  .cart-item-price, .cart-item-remove { grid-column: 2; }
  .qr-cell { width: 90px; }
}


/* ============================================================
   PUTCH COINS : section dans le checkout + onglet Coins refondu
   ============================================================ */

/* Section Coins dans la modale checkout */
.checkout-coins {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--bg-alt);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.checkout-coins.disabled { opacity: 0.55; }
.checkout-coins-title {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 700;
  margin: 0;
}
.checkout-coins-desc {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.4;
}
.checkout-coins-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 4px;
}
.ccm-balance { color: var(--ink); font-weight: 700; }
.checkout-coins-input-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 10px;
  align-items: center;
}
.ccm-input-label {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.checkout-coins-input-row input[type="number"] {
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: #fff;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  outline: none;
  color: var(--ink);
  text-align: right;
  width: 100%;
}
.checkout-coins-input-row input[type="number"]:focus { border-color: var(--ink); }
.ccm-input-unit {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--muted);
}
.ccm-max {
  background: #fff;
  border: 1px solid var(--line);
  padding: 7px 12px;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.ccm-max:hover:not([disabled]) { border-color: var(--ink); background: var(--bg-alt); }
.ccm-max[disabled] { opacity: 0.5; cursor: not-allowed; }
.checkout-coins-equiv {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--ink);
  margin: 0;
  text-align: right;
}

/* Ligne PTC dans le recap */
.rev-coins-line { color: var(--ink); }
.rev-coins-line span:last-child { font-family: var(--mono); font-weight: 600; }

/* Ligne Remise (code ambassadeur) dans le recap */
.rev-promo-line span:first-child { display: inline-flex; align-items: center; gap: 6px; }

/* Bloc Code ambassadeur (etape paiement) */
.checkout-promo {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--bg-alt);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.checkout-promo-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}
.checkout-promo-row input[type="text"] {
  padding: 9px 12px;
  border: 1px solid var(--line);
  background: #fff;
  font-family: var(--mono);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  outline: none;
  color: var(--ink);
  width: 100%;
}
.checkout-promo-row input[type="text"]:focus { border-color: var(--ink); }
.checkout-promo-row input[type="text"]::placeholder {
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0.08em;
}
.checkout-promo-msg {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  line-height: 1.4;
}
.checkout-promo-msg.is-ok  { color: #1d7a3f; }
.checkout-promo-msg.is-err { color: #c0392b; }

/* Notice "rien a payer" (commande offerte / payee en Putch Coins) */
.checkout-nopay {
  margin: 0 0 8px;
  padding: 10px 12px;
  border: 1px solid var(--ink);
  background: #fff;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  line-height: 1.45;
  color: var(--ink);
}

/* Boite Moyen de paiement (aligne sur les boites Code / Coins) */
.checkout-pay {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: var(--bg-alt);
}
.checkout-pay-label {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 700;
  margin: 0 0 6px;
}
.checkout-pay-methods { transition: opacity .15s; }
.checkout-pay-methods.is-disabled { opacity: 0.4; pointer-events: none; filter: grayscale(1); }
.checkout-pay-methods .checkout-radio { background: #fff; }
.checkout-pay-element { margin: 0; min-height: 148px; }
/* Etat de chargement du cadre Stripe : occupe la place finale pour eviter le saut */
.checkout-pay-loading {
  min-height: 148px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

/* Onglet Coins : ancien layout simple -> 2 colonnes (PTC | CHF + taux) */
.coins-summary {
  border: 1px solid var(--line);
  background: var(--bg-alt);
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.coins-balance {
  font-family: var(--display);
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: -0.02em;
}
.coins-balance small {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin-left: 6px;
  font-weight: 500;
}
.coins-equiv {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.coins-equiv-amount {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.coins-equiv-amount small {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin-left: 4px;
  font-weight: 500;
}
.coins-rate-small {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 540px) {
  .coins-summary { flex-direction: column; align-items: flex-start; }
  .coins-equiv { align-items: flex-start; }
  .checkout-coins-input-row { grid-template-columns: 1fr auto; gap: 8px; }
  .ccm-input-label { grid-column: 1 / -1; }
  .ccm-max { grid-column: 1 / -1; justify-self: flex-end; }
}

/* =========================================================
   Modale Scan / Morphopass
   ========================================================= */
.putch-scan-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center; justify-content: center;
  z-index: 1100; padding: 20px;
}
.putch-scan-modal-backdrop.show { display: flex; overflow-y: auto; }
.putch-scan-modal {
  background: #fff; width: 100%; max-width: 560px;
  padding: 36px 32px; position: relative; max-height: 92vh; overflow-y: auto;
  animation: fadeIn .25s ease;
}
.putch-scan-close {
  position: sticky; top: 0; margin-left: auto; display: block;
  font-size: 1.8rem; color: var(--ink);
  background: rgba(255,255,255,0.92); border: 1px solid var(--line);
  width: 38px; height: 38px; border-radius: 50%;
  cursor: pointer; line-height: 1; padding: 0;
  z-index: 5;
}
.putch-scan-close:hover { color: var(--ink); background: #fff; }
.putch-scan-title {
  font-family: var(--display); font-weight: 800;
  font-size: 1.5rem; letter-spacing: -0.01em;
  margin: 6px 0 14px;
}
.putch-scan-intro {
  color: var(--muted); font-size: 0.92rem;
  line-height: 1.5; margin: 0 0 22px;
}
.putch-scan-card {
  background: var(--bg-alt); padding: 18px 20px; margin-bottom: 22px;
}
.putch-scan-q {
  font-weight: 700; font-size: 0.96rem;
  margin: 0 0 12px; line-height: 1.35;
}
.putch-scan-input {
  width: 100%; padding: 11px 14px;
  border: 1px solid var(--line); background: #fff;
  font-family: var(--sans); font-size: 0.95rem; outline: none;
  transition: border-color .2s;
}
.putch-scan-input:focus { border-color: var(--ink); }
.putch-scan-select {
  width: 100%; padding: 11px 14px;
  border: 1px solid var(--line); background: #fff;
  font-family: var(--sans); font-size: 0.95rem; outline: none;
  transition: border-color .2s;
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
}
.putch-scan-select:focus { border-color: var(--ink); }
.putch-scan-help {
  display: block; margin-top: 8px;
  color: var(--muted); font-size: 0.78rem; line-height: 1.4;
}
.putch-scan-preview {
  margin-top: 12px; padding: 10px 12px;
  background: #fff; border: 1px dashed var(--line);
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 0.82rem; color: var(--ink); letter-spacing: 0.2px;
  word-break: break-word; min-height: 1.3em;
}
.putch-scan-error {
  margin-top: 14px; color: #b3261e;
  font-size: 0.88rem; font-weight: 500;
}
.putch-scan-modal .saia-widget-container {
  margin: 0 0 22px;
}
.putch-scan-modal .saia-widget-container:empty { display: none; }
/* Pendant le clic auto sur le bouton 3DLook "GET MEASURED" : on planque
   visuellement le container pour éviter de montrer le bouton 3DLook avant
   que l'écran QR / mobile ne prenne le relais. La classe est posée par
   autoTriggerMtmFlow() puis retirée 80ms après le clic auto. */
.putch-scan-modal .saia-widget-container.is-await-mtm-click {
  opacity: 0; pointer-events: none; min-height: 80px;
}

/* Bouton "Démarrer mon bodyscan" — chargement paresseux du widget 3DLook
   pour ne pas créer de session 3DLook fantôme à chaque ouverture de modale. */
.putch-scan-widget-area {
  margin: 18px 0 22px;
  text-align: center;
}
.putch-scan-start {
  width: 100%;
}
.putch-scan-start-hint {
  display: block;
  margin-top: 10px;
  text-align: center;
  color: var(--text-muted, #6c6c6c);
  font-size: 0.85rem;
}
.putch-scan-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.putch-scan-actions .btn { flex: 1; min-width: 200px; }
.putch-scan-success {
  margin-top: 16px;
  color: #167b3a;
  font-size: 0.95rem;
  font-weight: 600;
}
@media (max-width: 560px) {
  .putch-scan-modal { padding: 28px 22px; }
  .putch-scan-actions .btn { min-width: 0; width: 100%; }
}

/* =========================================================
   Champ téléphone avec indicatif pays
   ========================================================= */
.phone-row {
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr;
  gap: 10px;
}
.phone-row .phone-cc {
  width: 100%;
  padding: 12px 12px;
  border: 1px solid var(--line);
  background: #fff;
  font-family: var(--sans);
  font-size: 0.92rem;
  outline: none;
  cursor: pointer;
  transition: border-color .2s;
}
.phone-row .phone-cc:focus { border-color: var(--ink); }
@media (max-width: 480px) {
  .phone-row { grid-template-columns: 1fr; }
}

/* =========================================================
   Mobile nav : hamburger + drawer
   ========================================================= */
.nav-toggle { display: none; }
@media (max-width: 980px) {
  .site-header .nav { padding: 14px var(--pad); }
  .nav-toggle {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 44px; height: 44px;
    background: none; border: 1px solid var(--ink);
    cursor: pointer; padding: 0;
    margin-left: auto;
  }
  .nav-toggle-bars {
    display: inline-block; width: 22px; height: 16px;
    position: relative;
  }
  .nav-toggle-bars span {
    position: absolute; left: 0; right: 0; height: 1.5px;
    background: var(--ink);
    transition: transform .25s ease, opacity .2s ease, top .25s ease;
  }
  .nav-toggle-bars span:nth-child(1) { top: 0; }
  .nav-toggle-bars span:nth-child(2) { top: 7px; }
  .nav-toggle-bars span:nth-child(3) { top: 14px; }
  .nav-toggle.active .nav-toggle-bars span:nth-child(1) { top: 7px; transform: rotate(45deg); }
  .nav-toggle.active .nav-toggle-bars span:nth-child(2) { opacity: 0; }
  .nav-toggle.active .nav-toggle-bars span:nth-child(3) { top: 7px; transform: rotate(-45deg); }
  .site-header .nav-right { display: none !important; }
}
.mobile-drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
  z-index: 1199;
}
.mobile-drawer-backdrop.show { opacity: 1; pointer-events: auto; }
.mobile-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(85vw, 380px);
  background: #fff;
  z-index: 1200;
  transform: translateX(100%);
  transition: transform .3s ease;
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 80px 28px 28px;
  box-shadow: -10px 0 30px rgba(0,0,0,0.1);
}
.mobile-drawer.show { transform: translateX(0); }
.mobile-drawer-inner { display: flex; flex-direction: column; gap: 28px; }
.mobile-nav-links {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.mobile-nav-links li { margin: 0; }
.mobile-nav-links a {
  display: block;
  padding: 14px 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.mobile-nav-links a:hover,
.mobile-nav-links a.active { opacity: .65; }
.mobile-nav-right {
  display: flex; flex-direction: column; gap: 16px;
  padding-top: 8px;
}
.mobile-nav-right .lang-switch {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.18em;
}
.mobile-nav-right .lang-switch a {
  color: var(--muted); padding: 0 6px;
}
.mobile-nav-right .lang-switch a.active { color: var(--ink); font-weight: 600; }
.mobile-nav-right .nav-account {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 12px 18px;
  text-align: center;
  width: 100%;
}
body.mobile-nav-open { overflow: hidden; }

/* =========================================================
   Optimisations responsives globales (mobile/iPhone)
   ========================================================= */
@media (max-width: 760px) {
  :root { --pad: clamp(16px, 5vw, 32px); }
  body { font-size: 15px; }
  h1 { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  h2 { font-size: clamp(1.4rem, 6vw, 1.9rem); }
  h3 { font-size: clamp(1.05rem, 4.5vw, 1.25rem); }
  section { padding: clamp(40px, 8vw, 64px) 0; }
  .btn { padding: 12px 18px; font-size: 0.7rem; }
  .btn-row { gap: 10px; }
  .btn-row .btn { flex: 1 1 auto; min-width: 140px; }

  /* Coming-soon (homepage) : logo plus compact */
  .coming-soon-main { gap: 28px; padding: 28px 18px; }
  .coming-soon-logo { width: clamp(160px, 50vw, 240px); }

  /* Modale scan : moins de padding sur iPhone */
  .putch-scan-modal { padding: 26px 20px; }
  .putch-scan-title { font-size: 1.3rem; }

  /* Formulaire signup : stack vertical */
  .tunnel-row { grid-template-columns: 1fr !important; gap: 0; }
  .tunnel-form { padding: 0 !important; }
  .field-check { font-size: 0.85rem; }

  /* Timeline (4 étapes) : compactée */
  .project-progress { padding: 14px var(--pad); }

  /* Configurateur : tout vertical, image plus petite */
  .config-stage { grid-template-columns: 1fr !important; }
  .config-stage-photo { aspect-ratio: 4/5; max-height: 60vh; }
  .garment-selector { grid-template-columns: 1fr 1fr 1fr !important; gap: 8px; }
  .garment-pick-thumb { aspect-ratio: 1; }

  /* Mon dressing : tabs en haut au lieu de gauche */
  .account-layout { grid-template-columns: 1fr !important; }
  .account-tabs { flex-direction: row; overflow-x: auto; gap: 0; border-right: none; }
  .account-tab-btn { flex: 0 0 auto; padding: 12px 14px; }

  /* Dashboard admin : table scroll horizontal */
  table.admin { font-size: 0.78rem; }
  table.admin th, table.admin td { padding: 10px 12px; }

  /* Modale login admin (espace privé) plus serrée */
  .modal { padding: 28px 22px; }
}
@media (max-width: 480px) {
  .coming-soon-text { font-size: clamp(1.6rem, 9vw, 2.4rem); letter-spacing: -0.015em; }
  .coming-soon-sub { font-size: 0.66rem; letter-spacing: 0.22em; }
  .nav-brand img { height: 30px; }
  .garment-pick-label { font-size: 0.72rem; }
  /* Buttons stretch full-width on tiny screens */
  .modal .btn,
  .tunnel-form .btn { width: 100%; }
}

/* iOS : éviter le zoom auto sur input focus (font ≥ 16px) */
@media (max-width: 760px) {
  input, select, textarea { font-size: 16px !important; }
}

/* =========================================================
   Garde-robe : colonne photo produit
   ========================================================= */
.dressing-table th.dressing-photo-col { width: 80px; padding: 0; }
.dressing-photo-cell {
  width: 80px; padding: 8px 10px 8px 0 !important;
  vertical-align: middle;
}
.dressing-photo {
  width: 64px; height: 80px;
  object-fit: cover;
  display: block;
  background: var(--bg-alt);
  border: 1px solid var(--line);
}
.dressing-photo-empty {
  display: block;
  width: 64px; height: 80px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
}
@media (max-width: 760px) {
  .dressing-table th.dressing-photo-col { width: 56px; }
  .dressing-photo, .dressing-photo-empty { width: 48px; height: 60px; }
  .dressing-photo-cell { width: 56px; padding: 6px 8px 6px 0 !important; }
}

/* =========================================================
   Footer : copyright + déconnexion intégrés sous la marque
   ========================================================= */
.footer-brand-tail {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex; flex-direction: column; gap: 8px;
  align-items: flex-start;
}
.footer-brand-tail a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
  transition: text-decoration-color .2s;
}
.footer-brand-tail a:hover { text-decoration-color: var(--ink); }
@media (max-width: 760px) {
  .footer-brand-tail { margin-top: 12px; gap: 6px; font-size: 0.62rem; }
}

/* =========================================================
   FIX MOBILE — Mon Dressing (onglets) + footer compact
   ========================================================= */
@media (max-width: 760px) {
  /* Grid 1 colonne (areas refondues) — sinon le grid 240px 1fr persiste */
  .account-layout {
    grid-template-columns: 1fr !important;
    grid-template-areas: "tabs" "panels" !important;
    column-gap: 0 !important;
    padding-top: 16px;
  }
  /* Onglets en barre horizontale scrollable */
  .account-tabs {
    flex-direction: row !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    border-right: none !important;
    border-bottom: 1px solid var(--line);
    gap: 0;
    padding: 0 0 2px;
    margin: 0 calc(-1 * var(--pad)) 18px;
    /* ↑ marges négatives pour que la barre touche les bords du screen */
    padding-left: var(--pad);
    padding-right: var(--pad);
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .account-tabs::-webkit-scrollbar { display: none; }
  .account-tab-btn {
    flex: 0 0 auto !important;
    width: auto !important;
    padding: 12px 14px !important;
    margin: 0 !important;
    border-right: 0 !important;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    scroll-snap-align: start;
    font-size: 0.9rem;
  }
  .account-tab-btn.active {
    border-right-color: transparent !important;
    border-bottom-color: var(--ink) !important;
    border-bottom-width: 2px;
  }
  .account-tab-btn .account-tab-count {
    margin-left: 8px;
  }

  /* ===== Footer compact ===== */
  .site-footer { padding: 28px var(--pad) 24px; font-size: 0.75rem; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 24px 18px; }
  .footer-grid > div:first-child { grid-column: 1 / -1; } /* bloc PUTCH pleine largeur */
  .footer-col h4 { font-size: 0.66rem; margin-bottom: 8px; }
  .footer-col li { padding: 0; line-height: 1.6; }
  .footer-col a, .footer-col li { font-size: 0.85rem; }
  .footer-brand { font-size: 1.2rem; }
  .footer-brand small { font-size: 0.6rem; }
  .footer-brand-tail { margin-top: 10px; gap: 4px; font-size: 0.6rem; }
  .footer-newsletter input { padding: 8px 10px; font-size: 0.85rem; }
}
@media (max-width: 480px) {
  .account-tab-btn .account-tab-label { font-size: 0.85rem; }
}

/* =========================================================
   Illustration "pitch" sur Le Projet
   ========================================================= */
.pitch-illustration {
  margin: clamp(28px, 4vw, 56px) auto 0;
  max-width: 1100px;
}
.pitch-illustration img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 760px) {
  .pitch-illustration { margin-top: 22px; }
}

/* =========================================================
   PAGE LE PROJET — refonte 5 sections
   ========================================================= */

/* 1. HERO photo + texte */
.hero-projet {
  padding: clamp(40px, 6vw, 96px) 0 clamp(60px, 8vw, 120px);
}
.hero-projet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}
.hero-projet-img {
  position: relative;
  background: var(--bg-alt);
  overflow: hidden;
  aspect-ratio: 4/5;
  filter: grayscale(100%) contrast(1.05);
}
.hero-projet-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s ease;
}
.hero-projet-img:hover img { transform: scale(1.02); }
.hero-projet-text { padding: 0 12px; }
.hero-projet-text .eyebrow { margin-bottom: 14px; }
.hero-projet-text h1 {
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-bottom: 18px;
}
.hero-projet-text h1 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
}
.hero-projet-lead {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--muted);
  margin-bottom: 28px;
  line-height: 1.5;
  max-width: 460px;
}

@media (max-width: 880px) {
  .hero-projet-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .hero-projet-img { aspect-ratio: 3/4; max-height: 60vh; }
  .hero-projet-text { padding: 0; }
}

/* 2. MANIFESTE */
.manifeste { text-align: center; }
.manifeste-text { max-width: none; margin: 0; display: flex; flex-direction: column; justify-content: center; }
.manifeste-text .eyebrow { margin-bottom: 18px; }
.manifeste-text h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  margin-bottom: 28px;
  line-height: 1.2;
}
.manifeste-text h2 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.manifeste-body {
  font-size: 1.05rem;
  color: var(--text);
  margin-bottom: 14px;
  line-height: 1.65;
}
.manifeste-body-tight { color: var(--muted); font-style: italic; }
.manifeste-emphasis {
  margin-top: 28px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* 3. PITCH SECTION (titre HTML + SVG) */
.pitch-section .paradox-intro { text-align: center; max-width: 760px; margin: 0 auto clamp(28px, 4vw, 48px); }
.pitch-section h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  margin: 8px 0 14px;
}
.pitch-section h2 em { font-family: var(--serif); font-style: italic; font-weight: 500; }
.pitch-section .paradox-lead {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
/* .pitch-illustration déjà défini plus haut */

/* 4. MÉTHODE 4 GESTES — version compactée */
.section-alt.methode { padding: clamp(28px, 3.5vw, 56px) 0 !important; }
.methode .paradox-intro { text-align: center; max-width: 720px; margin: 0 auto clamp(10px, 1.4vw, 20px); }
.methode .paradox-intro p.eyebrow { margin-bottom: 8px; }
.methode .paradox-intro h2 { margin-bottom: 0; line-height: 1.1; font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.methode .paradox-intro h2 em { font-family: var(--serif); font-style: italic; font-weight: 500; }
.methode-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.4vw, 18px);
  margin-top: clamp(14px, 1.8vw, 24px);
}
.methode-card {
  background: #fff;
  padding: clamp(14px, 1.6vw, 22px) clamp(14px, 1.6vw, 22px) clamp(12px, 1.4vw, 18px);
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
  gap: 8px;
  position: relative;
}
.methode-num {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  color: var(--muted);
}
.methode-icon {
  width: 36px; height: 36px;
  color: var(--ink);
  margin-bottom: 2px;
}
.methode-icon svg { width: 100%; height: 100%; }
.methode-card h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  margin: 0;
}
.methode-card p {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
  margin: 0;
}

/* CTA en fin de section méthode */
.methode-cta-row {
  text-align: center;
  margin-top: clamp(16px, 2vw, 28px);
}
.methode-cta-row .btn {
  padding: 14px 36px;
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  font-weight: 700;
}
@media (max-width: 980px) {
  .methode-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .methode-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Auth-gate : modale d'inscription / connexion overlay
   ========================================================= */
.auth-gate-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center; justify-content: center;
  z-index: 1500;
  padding: 20px;
  overflow-y: auto;
}
.auth-gate-backdrop.show { display: flex; }
body.auth-gate-locked { overflow: hidden; }
.auth-gate-modal {
  background: #fff;
  width: 100%;
  max-width: 480px;
  padding: 38px 36px;
  margin: auto;
  position: relative;
  animation: fadeIn .25s ease;
  max-height: 95vh; overflow-y: auto;
}
.auth-gate-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.auth-gate-intro { color: var(--muted); font-size: 0.92rem; margin: 0 0 22px; }
.auth-gate-tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
}
.auth-gate-tab {
  flex: 1;
  background: none; border: 0;
  padding: 12px 8px;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .2s, border-color .2s;
}
.auth-gate-tab:hover { color: var(--ink); }
.auth-gate-tab.active { color: var(--ink); border-bottom-color: var(--ink); font-weight: 700; }
.auth-gate-form .modal-field { margin-bottom: 14px; }
.auth-gate-form .modal-field label {
  display: block;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.auth-gate-form .modal-field input {
  width: 100%; padding: 11px 14px;
  border: 1px solid var(--line);
  font-family: var(--sans); font-size: 16px;
  outline: none;
  transition: border-color .2s;
}
.auth-gate-form .modal-field input:focus { border-color: var(--ink); }
.auth-gate-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth-gate-genders { display: flex; gap: 14px; flex-wrap: wrap; }
.auth-gate-genders label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.92rem; cursor: pointer;
  text-transform: none; letter-spacing: 0; font-family: var(--sans); color: var(--ink); margin: 0;
}
.auth-gate-form .btn { width: 100%; margin-top: 6px; }
.auth-gate-form .modal-error {
  color: #c0392b; font-size: 0.85rem; margin-top: 12px;
  display: none;
}
.auth-gate-form .modal-error.show { display: block; }
.auth-gate-foot {
  margin-top: 18px; text-align: center;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
.auth-gate-foot button {
  color: var(--ink); text-decoration: underline;
  text-decoration-color: var(--line); padding: 0; background: none;
  border: 0; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit;
}
.auth-gate-success { text-align: center; padding: 24px 0; }
.auth-gate-success p { font-size: 1rem; color: #167b3a; font-weight: 600; }
@media (max-width: 540px) {
  .auth-gate-modal { padding: 28px 22px; }
  .auth-gate-row { grid-template-columns: 1fr; }
}

/* =========================================================
   Graphique Putch Coins (cumul mensuel)
   ========================================================= */
.coins-chart-wrap {
  margin: 28px 0;
  background: #fff;
  border: 1px solid var(--line);
  padding: 18px 20px 14px;
}
.coins-chart-header {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px;
}
.coins-chart-title {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
}
.coins-chart-period {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.coins-chart {
  width: 100%;
  height: clamp(140px, 22vh, 200px);
  display: block;
}
.coins-chart-axis {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin-top: 4px;
  padding-left: 40px; padding-right: 12px;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.coins-chart-axis span { text-align: center; }
@media (max-width: 540px) {
  .coins-chart-wrap { padding: 14px 14px 10px; }
  .coins-chart { height: 140px; }
}

/* =========================================================
   Bouton temporaire : simuler la livraison d'une commande
   ========================================================= */
.order-card-wrap {
  display: flex; flex-direction: column;
  gap: 6px;
}
.order-simulate {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  background: #fff;
  border: 1px dashed var(--line);
  padding: 8px 14px;
  cursor: pointer;
  align-self: flex-end;
  transition: all .2s;
}
.order-simulate:hover {
  color: var(--ink);
  border-color: var(--ink);
  border-style: solid;
}

/* =========================================================
   Putch Coins — solde intégré DANS le bloc graphique
   ========================================================= */
.coins-chart-balance {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 8px 0 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
  gap: 16px;
}
.coins-chart-balance-main {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.coins-chart-balance-main small {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--muted);
  font-weight: 500;
  text-transform: uppercase;
}
.coins-chart-balance-side { text-align: right; }
.coins-chart-balance-chf {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  letter-spacing: -0.01em;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px;
}
.coins-chart-balance-chf small {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  color: var(--muted);
  font-weight: 500;
  text-transform: uppercase;
}
.coins-chart-balance-rate {
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin-top: 4px;
  text-transform: uppercase;
}
@media (max-width: 540px) {
  .coins-chart-balance { flex-direction: column; align-items: flex-start; gap: 8px; }
  .coins-chart-balance-side { text-align: left; }
  .coins-chart-balance-chf { justify-content: flex-start; }
}

/* =========================================================
   Modale Scan — message contextuel (cart-required, etc.)
   ========================================================= */
.putch-scan-context {
  background: #fff7e0;
  border: 1px solid #f0c674;
  color: #6b4f00;
  padding: 14px 16px;
  font-size: 0.92rem;
  line-height: 1.5;
  margin-bottom: 22px;
  margin-right: 32px; /* laisse de la place au bouton × */
}
@media (max-width: 540px) {
  .putch-scan-context { font-size: 0.85rem; padding: 12px 14px; margin-bottom: 18px; }
}

/* =========================================================
   Mes Morphopass : croix de suppression + bouton ajouter en bas droite
   ========================================================= */
.mp-row {
  position: relative;
  grid-template-columns: 1fr auto auto !important;
  gap: 12px;
  align-items: center;
}
.mp-delete {
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 50%;
  transition: color .15s, background-color .15s;
}
.mp-delete:hover {
  color: #c0392b;
  background: #fbecea;
}
.mp-delete:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Bouton "+ Ajouter Morphopass" sous la liste, aligné à droite, taille un peu plus petite */
.mp-add-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}
.mp-add-bottom {
  font-size: 0.7rem;        /* un peu plus petit que .btn (0.74rem) */
  letter-spacing: 0.18em;
  padding: 10px 18px;
}
@media (max-width: 540px) {
  .mp-add-row { justify-content: stretch; }
  .mp-add-bottom { width: 100%; }
}

/* Réajustement axe X du graphique coins : positionnement absolu pour aligner avec les points */
.coins-chart-axis {
  position: relative;
  height: 18px;
  margin-top: 6px;
  padding-left: 0; padding-right: 0;
  display: block;
}
.coins-chart-axis span {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
  /* Compense le padding gauche du SVG (40/600 ≈ 6.67%) et le padding droit (16/600 ≈ 2.67%) */
  /* On scale la position : pos% est en % de la zone "plot" (padding inclus on ajuste) */
}

/* =========================================================
   HERO SPLASH (Le Projet) — image plein écran + overlay texte
   ========================================================= */
.hero-splash {
  position: relative;
  width: 100%;
  height: clamp(540px, 92vh, 880px);
  overflow: hidden;
  background: #0a0a0a;
  margin-bottom: 0;
}
.hero-splash-img {
  position: absolute; inset: 0;
  z-index: 1;
}
.hero-splash-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.05) brightness(0.95);
}
/* Vignette progressive pour faire ressortir le texte */
.hero-splash::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.0) 50%, rgba(0,0,0,0.55) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.10) 50%, rgba(0,0,0,0.0) 100%);
  z-index: 2; pointer-events: none;
}
.hero-splash-overlay {
  position: absolute; inset: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  padding: clamp(28px, 6vw, 80px);
}
.hero-splash-text {
  max-width: 720px;
  color: #fff;
}
.hero-splash-h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.8rem, 7vw, 5.2rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin: 0 0 18px;
  color: #fff;
  text-shadow: 0 2px 20px rgba(0,0,0,0.4);
}
.hero-splash-sub {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.1rem, 2.4vw, 1.7rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  color: #fff;
  opacity: 0.96;
  text-shadow: 0 1px 12px rgba(0,0,0,0.35);
  max-width: 560px;
}
.hero-splash-sub em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
}
.hero-splash-tag {
  font-family: var(--mono);
  font-size: clamp(0.72rem, 1.1vw, 0.86rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.85;
  margin: 0 0 28px;
}
.hero-splash-cta {
  background: #fff;
  color: #000;
  border-color: #fff;
}
.hero-splash-cta:hover {
  background: transparent;
  color: #fff;
  border-color: #fff;
}
@media (max-width: 760px) {
  .hero-splash { height: clamp(540px, 88vh, 720px); }
  .hero-splash-overlay { padding: 24px; align-items: flex-end; }
  .hero-splash-h1 { font-size: clamp(2.2rem, 11vw, 3.4rem); }
  .hero-splash-sub { font-size: 1.05rem; }
  .hero-splash::after {
    background:
      linear-gradient(180deg, rgba(0,0,0,0.0) 35%, rgba(0,0,0,0.65) 100%),
      linear-gradient(90deg, rgba(0,0,0,0.40), rgba(0,0,0,0.10));
  }
}

/* =========================================================
   Section MANIFESTE + ILLUSTRATION en 2 colonnes (Le Projet)
   ========================================================= */
.manifeste-pitch { padding: clamp(32px, 4vw, 64px) 0 clamp(48px, 6vw, 96px); }
.manifeste-pitch-grid {
  display: grid;
  grid-template-columns: 1fr 1.45fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
.manifeste-pitch-text {
  /* défilement avec le reste de la page (plus de sticky) */
}
.manifeste-pitch-text .eyebrow { margin-bottom: 18px; }
.manifeste-pitch-text h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  line-height: 1.1;
  margin-bottom: 28px;
}
.manifeste-pitch-text h2 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
}
.manifeste-pitch-text .manifeste-body {
  font-size: 1.05rem;
  color: var(--text);
  margin-bottom: 16px;
  line-height: 1.65;
  max-width: 460px;
}
.manifeste-pitch-text .manifeste-body-tight {
  color: var(--muted);
  font-style: italic;
  margin-bottom: 26px;
}
.manifeste-pitch-text .manifeste-emphasis {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin-top: 6px;
}

/* Colonne droite — illustration */
.manifeste-pitch-illu .eyebrow-illu {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
  text-align: center;
}
.manifeste-pitch-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: center;
  margin: 0 0 28px;
}
.manifeste-pitch-title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
}
.manifeste-pitch-illu .pitch-illustration {
  margin: 0;
  max-width: 100%;
}
.manifeste-pitch-illu .pitch-illustration img {
  width: 100%;
  height: auto;
  display: block;
}
.manifeste-pitch-baseline {
  text-align: center;
  margin-top: 24px;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.manifeste-pitch-baseline em {
  font-family: var(--serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.04em;
  color: var(--ink);
  font-weight: 500;
}

@media (max-width: 880px) {
  .manifeste-pitch-grid { grid-template-columns: 1fr; gap: 48px; }
  .manifeste-pitch-text { position: static; }
  .manifeste-pitch-text .manifeste-body,
  .manifeste-pitch-text .manifeste-emphasis { max-width: none; text-align: center; }
  .manifeste-pitch-text { text-align: center; }
  .manifeste-pitch-text .eyebrow { margin-left: auto; margin-right: auto; }
}

/* =========================================================
   Lightbox click-to-zoom
   ========================================================= */
.pitch-illustration.zoomable {
  background: none;
  border: 0;
  padding: 0;
  width: 100%;
  cursor: zoom-in;
  position: relative;
  display: block;
  transition: transform .25s ease;
}
.pitch-illustration.zoomable:hover { transform: scale(1.01); }
.pitch-illustration.zoomable:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.zoom-cue {
  position: absolute;
  bottom: 12px; right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,0.85);
  color: #fff;
  padding: 6px 10px;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.zoom-cue svg { width: 14px; height: 14px; }
.pitch-illustration.zoomable:hover .zoom-cue,
.pitch-illustration.zoomable:focus .zoom-cue { opacity: 1; }

/* La modale */
.zoom-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 2000;
  display: flex;
  align-items: center; justify-content: center;
  padding: clamp(20px, 4vw, 60px);
  opacity: 0;
  transition: opacity .25s ease;
  cursor: zoom-out;
}
.zoom-modal.show { opacity: 1; }
.zoom-modal img {
  max-width: 96vw;
  max-height: 88vh;
  object-fit: contain;
  background: #fff;
  padding: clamp(12px, 2vw, 32px);
  display: block;
}
.zoom-close {
  position: absolute;
  top: clamp(16px, 3vw, 32px); right: clamp(16px, 3vw, 32px);
  width: 44px; height: 44px;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.4);
  font-size: 1.6rem; line-height: 1;
  cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.zoom-close:hover { background: rgba(255,255,255,0.12); border-color: #fff; }
.zoom-hint {
  position: absolute;
  bottom: clamp(16px, 3vw, 32px);
  left: 0; right: 0; text-align: center;
  font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
body.zoom-locked { overflow: hidden; }

@media (max-width: 760px) {
  .zoom-cue { font-size: 0.55rem; padding: 5px 8px; }
}

/* =========================================================
   MANIFESTE — refonte typographique stylée PUTCH
   ========================================================= */
.manifeste-pitch-text .eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 28px;
}

.manifeste-headline {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 32px;
  color: var(--ink);
}
.manifeste-headline em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.manifeste-rule {
  width: 60px;
  height: 1px;
  background: var(--ink);
  margin: 32px 0;
}

.manifeste-para {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--text);
  margin: 0 0 20px;
  max-width: 480px;
}
.manifeste-para em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.08em;
  color: var(--ink);
  letter-spacing: 0;
}
.manifeste-para strong {
  font-weight: 700;
  color: var(--ink);
}

/* Paragraphe d'amorce : punchline du manifeste */
.manifeste-para.manifeste-lead {
  font-size: 1.12rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 26px;
  letter-spacing: -0.005em;
}
.manifeste-para.manifeste-lead strong {
  font-weight: 700;
}

/* Triplet : "Moins de... / Moins de... / Plus de..." */
.manifeste-triptych {
  list-style: none;
  margin: 32px 0;
  padding: 0;
  border-left: 2px solid var(--ink);
  padding-left: 22px;
}
.manifeste-triptych li {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.manifeste-triptych li + li { margin-top: 4px; }
.manifeste-triptych li span {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--ink);
  margin-right: 4px;
}

/* Punchline finale */
.manifeste-punchline {
  margin-top: 24px;
}
.manifeste-punch-1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 12px;
}
.manifeste-punch-2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0;
  max-width: 380px;
}
.manifeste-punch-2 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
}

@media (max-width: 880px) {
  .manifeste-pitch-text { text-align: left; }
  .manifeste-pitch-text .eyebrow { margin-left: 0; }
  .manifeste-rule { margin-left: 0; }
  .manifeste-para,
  .manifeste-punch-2 { max-width: none; }
  .manifeste-triptych { padding-left: 18px; }
}

/* =========================================================
   LE PROJET — restructuration : manifeste+portrait (haut), illustration (bas)
   ========================================================= */

/* SECTION 1 : Manifeste + Portrait */
.manifeste-section {
  padding: clamp(14px, 2vw, 28px) 0 clamp(10px, 1.4vw, 18px);
}
.manifeste-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(28px, 3.5vw, 56px);
  align-items: stretch;
}
.manifeste-text {
  /* Réutilise les styles déjà définis pour .manifeste-pitch-text via classes */
}
.manifeste-portrait {
  position: relative;
  overflow: hidden;
  background: var(--bg-alt);
  filter: contrast(1.05);
  align-self: stretch;
  min-height: 460px;
}
.manifeste-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 980px) {
  .manifeste-grid { grid-template-columns: 1fr; gap: 40px; }
  .manifeste-portrait { aspect-ratio: 3/4; max-height: 65vh; max-width: 480px; margin: 0 auto; }
}

/* Réappliquer les styles du manifeste sur la nouvelle classe .manifeste-text */
.manifeste-text .eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 28px;
}

/* SECTION 2 : Illustration pleine largeur */
.projet-section {
  padding: clamp(24px, 3.2vw, 48px) 0 clamp(40px, 5vw, 72px);
  background: #fff;
}
.projet-intro {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(18px, 2.4vw, 28px);
}
.projet-intro .eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.projet-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin: 0;
}
.projet-title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
}
.projet-illustration {
  display: block;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  background: none;
  border: 0;
  padding: 0;
  position: relative;
}
.projet-illustration img {
  width: 100%;
  height: auto;
  display: block;
}
.projet-baseline {
  text-align: center;
  margin: clamp(6px, 0.8vw, 12px) auto 0;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  max-width: 720px;
}
.projet-intro .projet-baseline {
  margin-top: clamp(14px, 1.8vw, 22px);
}
/* Garder TOUTE la phrase dans la même typo (mono-caps), sans italique serif */
.projet-baseline em {
  font: inherit;
  font-style: normal;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  font-weight: inherit;
}

/* =========================================================
   MANIFESTE COMPACT — pour que le texte tienne dans la hauteur
   de la photo (4/5)
   ========================================================= */
.manifeste-text .eyebrow {
  margin-bottom: 18px;
}
.manifeste-text .manifeste-headline {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1.1;
  margin-bottom: 12px;
}
.manifeste-text .manifeste-rule {
  margin: 10px 0 12px;
  width: 50px;
}
.manifeste-text .manifeste-para {
  font-size: 0.93rem;
  line-height: 1.4;
  margin-bottom: 8px;
}
.manifeste-text .manifeste-triptych {
  margin: 6px 0 10px;
  padding-left: 18px;
}
.manifeste-text .manifeste-triptych li {
  font-size: clamp(0.92rem, 1.4vw, 1.05rem);
  line-height: 1.15;
  padding: 0;
  margin: 0;
}

/* Aligner verticalement le texte avec la photo (centré) */
.manifeste-grid {
  align-items: center;
}
@media (max-width: 980px) {
  .manifeste-text .manifeste-headline { font-size: clamp(1.5rem, 6vw, 2rem); }
}


/* =========================================================
   Onglet "Mes paramètres" — formulaire de profil
   ========================================================= */
.settings-form {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vw, 12px);
  max-width: 760px;
}
.settings-group {
  border: 1px solid var(--line);
  padding: clamp(6px, 0.8vw, 10px) clamp(20px, 2.4vw, 32px) clamp(8px, 1vw, 12px);
  margin: 0;
}
.settings-group legend {
  padding: 0 8px;
}
.settings-group legend {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 700;
  padding: 0 10px;
}
.settings-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 10px;
}
.settings-row-3 { grid-template-columns: 1fr 2fr 1fr; }
.settings-row:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  .settings-row, .settings-row-3 { grid-template-columns: 1fr; }
}

.settings-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.settings-field:last-child { margin-bottom: 0; }
.settings-field > label {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.settings-field input[type="text"],
.settings-field input[type="email"],
.settings-field input[type="tel"],
.settings-field input[type="date"],
.settings-field input[type="password"] {
  padding: 7px 11px;
  border: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--ink);
  background: #fff;
  outline: none;
  transition: border-color .15s;
}
.settings-field input:focus { border-color: var(--ink); }
.settings-field input[readonly] { background: var(--bg-alt); cursor: not-allowed; color: var(--muted); }
.settings-hint {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--soft);
}

.settings-password-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: stretch;
}
.btn-small { padding: 8px 14px; font-size: 0.66rem; letter-spacing: 0.16em; }

.payment-methods { margin-bottom: 14px; }
.payment-empty {
  font-size: 0.86rem;
  color: var(--muted);
  font-style: italic;
  padding: 16px;
  background: var(--bg-alt);
  border: 1px dashed var(--line);
  text-align: center;
}

.settings-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 4px;
}
.settings-saved {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #2a7d4f;
  font-weight: 600;
  margin-left: auto;
  animation: settingsFade .3s ease;
}
@keyframes settingsFade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* =========================================================
   CTA d'enchaînement entre sections (Pourquoi → Comment → La méthode)
   ========================================================= */
.section-cta {
  display: inline-block;
  margin-top: 18px;
  padding: 14px 36px;
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  font-weight: 700;
  text-transform: uppercase;
}
.manifeste-cta-row,
.projet-cta-row {
  margin-top: clamp(24px, 3vw, 40px);
  text-align: center;
}
.manifeste-cta-row { text-align: left; }
@media (max-width: 760px) {
  .manifeste-cta-row { text-align: center; }
}

/* Bouton hero (Pourquoi ?) — couleur claire bien lisible sur le fond noir */
.hero-splash-cta {
  background: #fff;
  color: #000;
  border: 1px solid #fff;
}
.hero-splash-cta:hover {
  background: transparent;
  color: #fff;
  border-color: #fff;
}

/* Espace ZERO entre titre projet et illustration — section ENTIÈRE dans 1 écran */
.projet-section {
  padding: clamp(4px, 1vw, 14px) 0 !important;
  min-height: 0 !important;
}
.projet-section .container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.projet-section .projet-intro { margin-bottom: 0 !important; }
.projet-section .projet-intro h2 { margin-bottom: 0 !important; line-height: 1.05 !important; }
.projet-section .projet-baseline {
  margin-top: 2px !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
/* L'illustration remonte sous le baseline + max-height très contrainte */
.projet-section .projet-illustration,
.projet-section .pitch-illustration,
.projet-section .pitch-illustration.zoomable {
  margin-top: -8px !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}
.projet-section .projet-illustration img,
.projet-section .pitch-illustration img {
  /* On donne plus de place au schéma sur petits laptops (1366×768) afin
     que les libellés restent lisibles, tout en gardant la section sur 1 écran. */
  max-height: 64vh;
  width: 100% !important;
  max-width: 1100px !important;
  height: auto !important;
  margin: 0 auto;
  display: block;
}
@media (min-height: 900px) {
  .projet-section .projet-illustration img,
  .projet-section .pitch-illustration img {
    max-height: 56vh;
  }
}
/* Bouton 'Quand ?' remonte aussi pour être visible */
.projet-section .projet-cta-row {
  margin-top: 0 !important;
}
/* Zoom-in réactivé sur le schéma projet */
.projet-section .pitch-illustration.zoomable {
  cursor: zoom-in !important;
}
.projet-section .pitch-illustration.zoomable:hover {
  transform: scale(1.005) !important;
}
.projet-section .zoom-cue { display: inline-flex !important; }

/* Petit écran : éviter la déformation de l'illustration */
@media (max-width: 880px) {
  .projet-section { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .projet-section .pitch-illustration {
    min-width: 720px;
  }
  .projet-section .pitch-illustration img {
    max-height: none !important;
    width: 100% !important;
  }
}


/* Responsive du sélecteur 5 vêtements */
@media (max-width: 980px) {
  .garment-selector { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 540px) {
  .garment-selector { grid-template-columns: repeat(2, 1fr); }
}


/* Nouvelles classes manifeste — claim, tagline, call */
.manifeste-claim {
  margin-top: 0.9rem !important;
  margin-bottom: 0.6rem !important;
  border-left: 2px solid var(--ink);
  padding-left: 14px;
  font-size: 0.98rem;
  line-height: 1.4;
}
.manifeste-tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.98rem;
  color: var(--muted);
  margin-top: 0.5rem !important;
  margin-bottom: 0.7rem !important;
}
.manifeste-call {
  margin-top: 0.7rem !important;
  font-size: 0.98rem;
  line-height: 1.4;
}
.manifeste-call strong {
  font-weight: 800;
  letter-spacing: 0.02em;
}


/* Bouton manifeste centré sur l'axe horizontal de la page */
.manifeste-cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: clamp(8px, 1vw, 14px);
}
.manifeste-cta-wrap .manifeste-cta-row {
  text-align: center;
  margin: 0;
}

/* =========================================================
   SECTION ROADMAP v5 — compactée + détail au survol
   ========================================================= */
.roadmap-section {
  padding: clamp(14px, 2vw, 28px) 0 clamp(36px, 4.5vw, 64px);
  background: #fafafa;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

/* Intro — compactée */
.rmv4-intro {
  text-align: center;
  max-width: 820px;
  margin: 0 auto clamp(14px, 2vw, 26px);
  padding: 0 var(--pad);
}
.rmv4-intro .eyebrow { display: block; margin-bottom: 10px; }
.rmv4-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin: 0 0 10px;
  color: var(--ink);
}
.rmv4-title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.rmv4-sub {
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.5;
  max-width: 620px;
  margin: 0 auto;
}
.rmv4-sub em { font-family: var(--serif); font-style: italic; color: var(--ink); font-weight: 400; }

/* === CADRE AXE — détail intégré, beaucoup plus serré === */
.rmv4-axis {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px clamp(24px, 3vw, 44px) 28px;
  background: #fff;
  border: 1px solid var(--line);
}

.rmv4-track {
  position: relative;
  width: 100%;
}

/* Barre */
.rmv4-bar {
  position: relative;
  height: 2px;
  background: var(--line);
  width: 100%;
}
.rmv4-bar-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: var(--ink);
  transition: width 1.6s cubic-bezier(.22,.61,.36,1);
}

/* 5 jalons */
.rmv4-steps {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 76px;
}
.rmv4-step {
  position: absolute;
  top: -7px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3px;
  width: 120px;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.rmv4-step-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--ink);
  display: block;
  margin-bottom: 14px;
  transition: background-color .25s, transform .25s, box-shadow .25s;
}
.rmv4-step.is-passed .rmv4-step-dot { background: var(--ink); }
.rmv4-step.is-current .rmv4-step-dot {
  background: var(--ink);
  transform: scale(1.2);
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--ink);
}
.rmv4-step.is-active .rmv4-step-dot,
.rmv4-step:hover .rmv4-step-dot,
.rmv4-step:focus-visible .rmv4-step-dot {
  background: var(--ink);
  border-color: var(--ink);
}
.rmv4-step-num {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  color: var(--soft);
  font-weight: 700;
  transition: color .25s;
}
.rmv4-step-verb {
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--ink);
  text-transform: uppercase;
  margin-top: 1px;
  transition: opacity .25s;
}
.rmv4-step-date {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.76rem;
  color: var(--muted);
  margin-top: 1px;
}
.rmv4-step.is-active .rmv4-step-verb { text-decoration: underline; text-underline-offset: 5px; }
.rmv4-step:hover .rmv4-step-verb { text-decoration: underline; text-underline-offset: 5px; }

/* === CURSEUR PUTCH — pin "P" ancré sur la barre === */
/* La barre devient le contexte de positionnement du curseur */
.rmv4-track { padding-top: 76px; }
.rmv4-bar { position: relative; }

.rmv4-cursor {
  position: absolute;
  top: 1px;          /* milieu de la barre (height: 2px) */
  left: 0%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 5;
  transition: left 1.6s cubic-bezier(.22,.61,.36,1);
}

/* Pin = badge PUTCH "P" — chevauche la barre */
.rmv4-cursor-pin {
  position: absolute;
  top: -12px;             /* recentre sur la barre (taille 24, barre 2) */
  left: 0;
  transform: translateX(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: 0;
  border: 2px solid #fafafa;
  box-shadow: 0 0 0 1px var(--ink), 0 4px 12px rgba(0,0,0,0.25);
}
.rmv4-cursor-pin span {
  font-size: 11px;
  line-height: 1;
  position: relative;
  top: 0;
}
/* Halo pulsant subtil */
.rmv4-cursor-pin::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  opacity: 0.35;
  animation: rmv4-pulse 2.6s ease-out infinite;
}
@keyframes rmv4-pulse {
  0%   { transform: scale(0.85); opacity: 0.5; }
  70%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Stem = trait fin entre le pin et le tag, JAMAIS sous la barre */
.rmv4-cursor-stem {
  position: absolute;
  top: -50px;             /* extrémité haute juste sous le tag */
  left: 0;
  transform: translateX(-50%);
  width: 1px;
  height: 26px;           /* du dessous du tag au dessus du pin */
  background: var(--ink);
  opacity: 0.55;
}

/* Tag "Nous sommes ici · date" — au-dessus de la barre, jamais sur le texte */
.rmv4-cursor-tag {
  position: absolute;
  top: -76px;
  left: 0;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  background: var(--ink);
  color: #fff;
  padding: 6px 12px;
  border-radius: 24px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.14);
}
.rmv4-cursor-here { display: inline-block; font-weight: 700; }
.rmv4-cursor-date {
  display: inline-block;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: none;
  border-left: 1px solid rgba(255,255,255,0.35);
  padding-left: 9px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.74rem;
}

/* === DÉTAIL INTÉGRÉ DANS LE CADRE === */
.rmv4-detail {
  position: relative;
  margin-top: 18px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  min-height: 130px;
}
.rmv4-detail-card {
  display: none;
  animation: rmv4-fade .35s ease;
}
.rmv4-detail-card.is-active { display: block; }
@keyframes rmv4-fade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.rmv4-detail-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.rmv4-detail-num {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  color: var(--soft);
  font-weight: 700;
  text-transform: uppercase;
}
.rmv4-detail-pill {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  border: 1px solid var(--ink);
  background: #fff;
  color: var(--ink);
  border-radius: 22px;
  padding: 4px 10px;
}
.rmv4-detail-pill.is-now { background: var(--ink); color: #fff; }
.rmv4-detail-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin: 4px 0 4px;
  color: var(--ink);
}
.rmv4-detail-date {
  font-family: var(--serif);
  font-style: italic;
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0 0 8px;
}
.rmv4-detail-text {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text);
  margin: 0 0 8px;
  max-width: 760px;
}
.rmv4-detail-objective {
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--muted);
  margin: 0;
}
.rmv4-detail-objective strong {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 700;
}

/* === CTA dans une fiche détail (ex. PARTICIPER → crowdfunding) === */
.rmv4-detail-cta-row {
  margin: 14px 0 0;
}
.rmv4-detail-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 22px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  font-weight: 700;
  text-transform: uppercase;
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
  border-radius: 26px;
  transition: background-color .25s, color .25s, transform .25s;
  text-decoration: none;
}
.rmv4-detail-cta:hover {
  background: #fff;
  color: var(--ink);
  transform: translateY(-1px);
}
.rmv4-detail-cta-arrow {
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0;
  line-height: 1;
  transition: transform .25s;
}
.rmv4-detail-cta:hover .rmv4-detail-cta-arrow {
  transform: translateX(3px);
}

/* === RESPONSIVE === */
@media (max-width: 980px) {
  .rmv4-axis { padding: 52px 18px 24px; }
  .rmv4-step-num { display: none; }
  .rmv4-step-verb { font-size: 0.74rem; letter-spacing: 0.04em; }
  .rmv4-step-date { font-size: 0.66rem; }
  .rmv4-step { width: 90px; }
  .rmv4-cursor-date { display: none; }
}
@media (max-width: 640px) {
  .rmv4-axis { padding: 50px 14px 22px; }
  .rmv4-cursor-tag { font-size: 0.58rem; padding: 5px 10px; }
  .rmv4-step-verb { font-size: 0.7rem; }
  .rmv4-step-date { font-size: 0.62rem; }
  .rmv4-detail-title { font-size: 1.05rem; }
  .rmv4-detail-text { font-size: 0.86rem; }
  .rmv4-title { font-size: clamp(1.5rem, 5vw, 1.9rem); }
  .rmv4-title br { display: none; }
}

/* =========================================================
   MODAL MÉTHODE — Welcome première connexion sur PUTCH ME
   ========================================================= */
.methode-modal,
.methode-confirm {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 3vw, 32px);
  animation: methode-modal-fade .35s ease;
}
.methode-modal[hidden],
.methode-confirm[hidden] { display: none; }

.methode-modal-overlay,
.methode-confirm-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 15, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.methode-confirm { z-index: 9100; }
.methode-confirm .methode-confirm-overlay { background: rgba(15, 15, 15, 0.5); }

.methode-modal-card {
  position: relative;
  background: #fafafa;
  border: 1px solid var(--ink);
  max-width: 1100px;
  width: 100%;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 56px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.18);
  animation: methode-modal-slide .45s cubic-bezier(.22,.61,.36,1);
}
.methode-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-family: var(--display);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: background-color .25s, border-color .25s, transform .25s;
  z-index: 2;
}
.methode-modal-close:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  transform: rotate(90deg);
}

.methode-modal-head {
  text-align: center;
  margin-bottom: clamp(22px, 2.6vw, 32px);
  padding: 0 8px;
}
.methode-modal-eyebrow {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--soft);
  font-weight: 600;
  margin: 0 0 12px;
}
.methode-modal-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin: 0;
  color: var(--ink);
}
.methode-modal-title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* Grille des 4 cartes — légèrement plus serrée que la version page */
.methode-modal-grid {
  margin: 0 0 clamp(22px, 2.8vw, 36px) !important;
  gap: 12px !important;
}

.methode-modal-cta {
  text-align: center;
  margin-top: 4px;
}
.methode-modal-go {
  padding: 14px 36px;
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.26em;
  font-weight: 700;
  text-transform: uppercase;
}

/* === Sous-confirm === */
.methode-confirm-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--ink);
  max-width: 460px;
  width: 100%;
  padding: clamp(28px, 3vw, 40px) clamp(24px, 3vw, 36px);
  text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,0.22);
  animation: methode-modal-slide .35s cubic-bezier(.22,.61,.36,1);
}
.methode-confirm-eyebrow {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--soft);
  font-weight: 700;
  margin: 0 0 10px;
}
.methode-confirm-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.15rem, 1.9vw, 1.4rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
  color: var(--ink);
}
.methode-confirm-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.45;
  margin: 0 0 22px;
}
.methode-confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.methode-confirm-btn-no,
.methode-confirm-btn-yes {
  padding: 11px 22px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 24px;
  cursor: pointer;
  transition: all .25s;
  border: 1px solid var(--ink);
}
.methode-confirm-btn-no {
  background: #fff;
  color: var(--ink);
}
.methode-confirm-btn-no:hover {
  background: #f0f0f0;
}
.methode-confirm-btn-yes {
  background: var(--ink);
  color: #fff;
}
.methode-confirm-btn-yes:hover {
  background: #fff;
  color: var(--ink);
}

@keyframes methode-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes methode-modal-slide {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Empêche le scroll du body quand le modal est ouvert */
body.methode-modal-open { overflow: hidden; }

/* Responsive */
@media (max-width: 720px) {
  .methode-modal-card { padding: 28px 18px; max-height: calc(100vh - 24px); }
  .methode-modal-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 480px) {
  .methode-modal-grid { grid-template-columns: 1fr !important; }
  .methode-modal-title { font-size: 1.4rem; }
  .methode-confirm-actions { flex-direction: column; }
  .methode-confirm-actions .btn { width: 100%; }
}

/* =========================================================
   SECTION ACTUALITÉ — articles, évènements, posts
   ========================================================= */
.actu-section {
  padding: clamp(24px, 3.5vw, 56px) 0 clamp(28px, 4vw, 64px);
  background: var(--bg-alt, #fafafa);
  border-top: 1px solid var(--line);
}

/* Intro centrée */
.actu-intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(20px, 2.6vw, 36px);
  padding: 0 var(--pad);
}
.actu-intro .eyebrow { display: block; margin-bottom: 8px; }
.actu-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.06;
  letter-spacing: -0.022em;
  margin: 0 0 8px;
  color: var(--ink);
}
.actu-title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.actu-sub {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.5;
  max-width: 560px;
  margin: 0 auto;
}
.actu-sub em { font-family: var(--serif); font-style: italic; color: var(--ink); font-weight: 400; }

/* Grille 3 colonnes */
.actu-grid {
  list-style: none;
  margin: 0 auto;
  padding: 0 var(--pad);
  max-width: 1280px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.actu-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  height: 100%;
  transition: border-color .25s, box-shadow .25s, transform .25s;
  overflow: hidden;
}
.actu-card:hover {
  border-color: var(--ink);
  box-shadow: 0 12px 28px rgba(0,0,0,0.07);
  transform: translateY(-2px);
}

/* Cover — placeholder éditorial; remplaçable par <img> par la suite */
.actu-cover {
  aspect-ratio: 16 / 10;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* Variante 1 : grosse wordmark PUTCH sur fond noir */
.actu-cover-mark {
  background: var(--ink);
  color: #fff;
}
.actu-cover-mark .actu-cover-text {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  letter-spacing: 0.18em;
}
.actu-cover-mark .actu-cover-tag {
  position: absolute;
  top: 12px;
  right: 14px;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}

/* Variante 2 : carton évènement avec date */
.actu-cover-event {
  background: #fff;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  flex-direction: column;
  gap: 6px;
}
.actu-cover-event::before,
.actu-cover-event::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  background: var(--line);
}
.actu-cover-event::before { top: 18%; }
.actu-cover-event::after  { bottom: 18%; }
.actu-cover-event .actu-cover-day {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.actu-cover-event .actu-cover-month {
  font-family: var(--serif);
  font-style: italic;
  color: var(--muted);
  font-size: 0.95rem;
}

/* Variante 3 : pin "P" PUTCH géant */
.actu-cover-pin {
  background: linear-gradient(135deg, #f0f0f0 0%, #fafafa 100%);
}
.actu-cover-pin-badge {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.95rem;
  border: 3px solid #fafafa;
  box-shadow: 0 0 0 1px var(--ink), 0 8px 22px rgba(0,0,0,0.18);
  position: relative;
}
.actu-cover-pin-badge::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  opacity: 0.18;
}
.actu-cover-pin-badge span { display: inline-block; }

/* Corps de la carte */
.actu-body {
  padding: 18px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.actu-meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 4px;
}
.actu-cat {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 700;
  background: #fff;
  border: 1px solid var(--ink);
  padding: 4px 10px;
  border-radius: 22px;
}
.actu-date {
  font-family: var(--serif);
  font-style: italic;
  color: var(--muted);
  font-size: 0.82rem;
}
.actu-title-card {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.1rem;
  line-height: 1.22;
  letter-spacing: -0.012em;
  margin: 4px 0 6px;
  color: var(--ink);
}
.actu-excerpt {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text);
  margin: 0 0 14px;
}
.actu-link {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.actu-arrow {
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1;
  display: inline-block;
  transition: transform .25s;
}
.actu-card:hover .actu-arrow { transform: translateX(4px); }

/* === Responsive === */
@media (max-width: 1080px) {
  .actu-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .actu-grid { grid-template-columns: 1fr; gap: 16px; }
  .actu-section { padding: 56px 0 64px; }
  .actu-cover-mark .actu-cover-text { font-size: 1.4rem; }
}

/* CTA en bas de la roadmap : Voir l'actualité */
.rmv4-bottom-cta {
  text-align: center;
  margin-top: clamp(10px, 1.2vw, 16px);
}
.rmv4-bottom-cta .section-cta {
  display: inline-block;
  padding: 14px 36px;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  font-weight: 700;
  text-transform: uppercase;
}

/* =========================================================
   MENU DÉROULANT — sous-menu "Le Putch" au survol
   ========================================================= */
.nav-links .has-sub {
  position: relative;
}
.nav-links .has-sub > a {
  /* alignement géré par .nav-links a (inline-flex commun) */
}
.nav-caret {
  font-size: 0.62em;
  display: inline-block;
  transition: transform .25s;
  opacity: 0.65;
  position: relative;
  top: 1px;
  margin-left: 2px;
}
.has-sub:hover > a .nav-caret,
.has-sub:focus-within > a .nav-caret {
  transform: rotate(180deg);
  opacity: 1;
}

/* Le panneau lui-même */
.nav-sub {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--ink);
  box-shadow: 0 18px 40px rgba(0,0,0,0.10);
  padding: 4px;
  opacity: 0;
  pointer-events: none;
  /* Hide immédiat (sans delay) à la sortie du hover */
  transition: opacity .2s, transform .2s, visibility 0s linear .2s;
  visibility: hidden;
  z-index: 50;
}
/* Petite zone tampon entre le lien et le panneau pour éviter la fermeture si la souris glisse */
.nav-sub::before {
  content: '';
  position: absolute;
  inset: -10px 0 100% 0;
  /* zone invisible juste au-dessus du panneau pour récupérer le hover */
}
.has-sub:hover > .nav-sub,
.has-sub:focus-within > .nav-sub {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  visibility: visible;
  /* Délai de 250ms avant que la dropdown apparaisse, pour laisser le temps
     de cliquer LE PUTCH directement si on ne fait que survoler le lien.
     Si la souris quitte avant 250ms : aucune apparition. */
  transition: opacity .2s .25s, transform .2s .25s, visibility 0s .25s;
}

.nav-sub-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.nav-sub-list a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 5px 12px;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid transparent;
  transition: background-color .2s, border-color .2s;
}
.nav-sub-list a:hover,
.nav-sub-list a:focus-visible {
  background: #fafafa;
  border-color: var(--line);
  opacity: 1;
}
.nav-sub-eyebrow {
  display: inline-block;
  flex: 0 0 auto;
  min-width: 92px;          /* aligne tous les titres en colonne */
  font-family: var(--mono);
  font-size: 0.54rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--soft);
  font-weight: 700;
  line-height: 1;
}
.nav-sub-title {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1;
  margin-top: 0;
}

/* Sur mobile, le sous-menu est masqué (le menu mobile prend le relais) */
@media (max-width: 760px) {
  .nav-sub { display: none; }
}

/* =========================================================
   FLÈCHE FLOTTANTE — section précédente (Le Putch)
   ========================================================= */
.back-to-prev {
  position: fixed;
  bottom: clamp(20px, 3vw, 40px);
  right: clamp(20px, 3vw, 40px);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease,
              background-color .25s, color .25s;
  z-index: 200;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  padding: 0;
}
.back-to-prev.is-visible {
  opacity: 0.62;
  pointer-events: auto;
  transform: translateY(0);
}
.back-to-prev:hover,
.back-to-prev:focus-visible {
  opacity: 1;
  background: #fff;
  color: var(--ink);
  outline: none;
}
.back-to-prev svg {
  width: 18px;
  height: 18px;
  display: block;
}
@media (max-width: 640px) {
  .back-to-prev { width: 38px; height: 38px; }
  .back-to-prev svg { width: 16px; height: 16px; }
}
@media print {
  .back-to-prev { display: none; }
}

/* =========================================================
   POPUP NEWSLETTER (zone Actualité)
   Layout split : photo gauche / formulaire droite
   ========================================================= */
.actu-popup {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 3vw, 32px);
  animation: actu-popup-fade .35s ease;
}
.actu-popup[hidden] { display: none; }
.actu-popup-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 15, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.actu-popup-card {
  position: relative;
  background: #fafafa;
  border: 1px solid var(--ink);
  width: 100%;
  max-width: 980px;
  max-height: calc(100vh - 48px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.22);
  animation: actu-popup-slide .45s cubic-bezier(.22,.61,.36,1);
}

.actu-popup-close {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 38px;
  height: 38px;
  border: 1px solid var(--ink);
  background: #fff;
  color: var(--ink);
  font-family: var(--display);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: background-color .25s, color .25s, transform .25s;
  z-index: 3;
}
.actu-popup-close:hover {
  background: var(--ink);
  color: #fff;
  transform: rotate(90deg);
}

/* Visual (gauche) */
.actu-popup-visual {
  position: relative;
  background: #f0f0f0;
  overflow: hidden;
}
.actu-popup-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Body (droite) */
.actu-popup-body {
  padding: clamp(28px, 3.4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
}
.actu-popup-eyebrow {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--soft);
  font-weight: 700;
  margin: 0;
}
.actu-popup-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin: 0;
  color: var(--ink);
}
.actu-popup-title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.actu-popup-text {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text);
  margin: 0;
}

/* Form */
.actu-popup-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 4px;
}
.actu-popup-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.actu-popup-label {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
}
.actu-popup-form input[type="email"] {
  font-family: var(--sans);
  font-size: 0.95rem;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--ink);
  color: var(--ink);
  width: 100%;
  outline: none;
  transition: box-shadow .2s;
}
.actu-popup-form input[type="email"]:focus {
  box-shadow: 0 0 0 3px rgba(0,0,0,0.08);
}

.actu-popup-fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.actu-popup-fieldset legend {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.actu-popup-checkrow {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.actu-popup-checkrow input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid var(--ink);
  background: #fff;
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color .15s;
}
.actu-popup-checkrow input[type="checkbox"]:checked {
  background: var(--ink);
}
.actu-popup-checkrow input[type="checkbox"]:checked::after {
  content: '';
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
.actu-popup-terms {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.4;
  margin-top: 2px;
}
.actu-popup-link {
  text-decoration: underline;
  color: var(--ink);
}
.actu-popup-link:hover { opacity: .7; }

.actu-popup-submit {
  margin-top: 6px;
  padding: 14px 28px;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}

.actu-popup-success {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text);
  padding: 14px 0 0;
  margin: 0;
}
.actu-popup-success strong {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.005em;
}

@keyframes actu-popup-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes actu-popup-slide {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
body.actu-popup-open { overflow: hidden; }

/* Responsive — empile photo + form sur petits écrans */
@media (max-width: 760px) {
  .actu-popup-card {
    grid-template-columns: 1fr;
    grid-template-rows: 180px 1fr;
    max-height: calc(100vh - 32px);
  }
  .actu-popup-visual { order: 1; }
  .actu-popup-body { order: 2; padding: 24px 22px; }
  .actu-popup-title { font-size: 1.4rem; }
  .actu-popup-close {
    background: rgba(255,255,255,0.92);
  }
}

/* === Toggle Newsletter (Mes paramètres) === */
.settings-toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  cursor: pointer;
  user-select: none;
}
.settings-toggle-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border: 1px solid var(--ink);
  background: #fff;
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color .15s, transform .15s;
}
.settings-toggle-row input[type="checkbox"]:checked {
  background: var(--ink);
}
.settings-toggle-row input[type="checkbox"]:checked::after {
  content: '';
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 1.7px 1.7px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
.settings-toggle-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.settings-toggle-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.settings-toggle-hint {
  font-family: var(--sans);
  font-size: 0.83rem;
  line-height: 1.4;
  color: var(--muted);
}


/* =========================================================
   SKU — Référence article (variant_code)
   ========================================================= */

/* Bloc d'affichage live dans le configurateur PUTCH ME */
.config-sku {
  margin-top: clamp(10px, 1.4vw, 16px);
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--mono);
}
.config-sku-label {
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--soft);
  font-weight: 700;
}
.config-sku-value {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink);
  word-break: break-all;
  flex: 1;
}
.config-sku-fallback {
  font-family: var(--serif);
  font-style: italic;
  color: var(--muted);
  font-size: 0.85rem;
}

/* Référence sur une ligne de panier */
.cart-item-ref {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
}
.cart-item-ref span {
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--soft);
  font-weight: 700;
}
.cart-item-ref code {
  font-size: 0.72rem;
  color: var(--ink);
  word-break: break-all;
}

/* Référence sur le détail de commande */
.odi-ref {
  margin: 2px 0 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
}
.odi-ref span {
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--soft);
  font-weight: 700;
}
.odi-ref code {
  font-size: 0.72rem;
  color: var(--ink);
  word-break: break-all;
}
.odi-mp {
  margin: 2px 0 4px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--mono);
  flex-wrap: wrap;
}
.odi-mp span {
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--soft);
  font-weight: 700;
}
.odi-mp code {
  font-size: 0.72rem;
  color: var(--ink);
  word-break: break-all;
}

/* Cellule RÉF dans la table garde-robe */
.dressing-table .ref-cell {
  vertical-align: middle;
}
.ref-code {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink);
  background: #f4f4f4;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 4px 7px;
  white-space: nowrap;
}


/* === Carte SKU dans la sidebar PUTCH ME === */
.config-sku-card {
  background: #fff;
  border: 1px solid var(--line);
  padding: 14px 16px;
  margin-bottom: clamp(10px, 1.4vw, 16px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color .25s;
}
.config-sku-card:has(.config-sku-fallback:not([hidden])) {
  background: #fafafa;
}
.config-sku-eyebrow {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--soft);
  font-weight: 700;
  margin: 0;
}
.config-sku-card .config-sku-value {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
  word-break: break-all;
  display: block;
  line-height: 1.35;
}
.config-sku-card .config-sku-fallback {
  font-family: var(--serif);
  font-style: italic;
  color: var(--muted);
  font-size: 0.86rem;
  margin: 0;
}


/* =========================================================
   Ligne Morphopass simplifiée + modale détail
   ========================================================= */
.mp-clickable { cursor: pointer; transition: background-color .15s ease; }
.mp-clickable:hover { background: var(--bg-alt); }
.mp-row-body {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.mp-row-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.96rem;
  line-height: 1.25;
  color: var(--ink);
  word-break: break-word;
}
.mp-row-code {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: uppercase;
  word-break: break-all;
}

.mp-detail-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  display: none;
  align-items: flex-start; justify-content: center;
  z-index: 1300;
  padding: 40px 20px;
  overflow-y: auto;
}
.mp-detail-backdrop.show { display: flex; }
.mp-detail-modal {
  background: #fff;
  width: 100%;
  max-width: 640px;
  margin: auto;
  padding: 40px 36px;
  position: relative;
  animation: fadeIn .25s ease;
}
.mp-detail-close {
  position: absolute; top: 14px; right: 18px;
  font-size: 1.5rem; line-height: 1;
  color: var(--muted);
  background: none; border: 0; cursor: pointer;
}
.mp-detail-eyebrow {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 4px;
}
.mp-detail-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.4rem;
  line-height: 1.15;
  margin: 0 0 4px;
  color: var(--ink);
}
.mp-detail-sub {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
  word-break: break-all;
}
.mp-detail-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: 4px;
}
.mp-detail-info {
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px;
}
.mp-detail-info .lbl {
  font-family: var(--mono);
  font-size: 0.54rem;
  letter-spacing: 0.16em;
  color: var(--muted);
}
.mp-detail-info .val {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
}
.mp-detail-section { margin-bottom: 22px; }
.mp-detail-section-h {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  text-transform: uppercase;
}
.mp-detail-rows {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  column-gap: 32px;
  row-gap: 0;
}
.mp-detail-row {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 3px 0;
  border-bottom: 1px dashed var(--line);
  gap: 10px;
  min-height: 0;
}
.mp-detail-row-labels {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  flex: 1 1 auto;
  line-height: 1;
}
.mp-detail-row-l {
  font-family: var(--sans);
  font-size: 0.8rem;
  line-height: 1.15;
  color: var(--ink);
}
.mp-detail-row-en {
  font-family: var(--mono);
  font-size: 0.52rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1;
  margin-top: 0;
}
.mp-detail-row-v {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  flex: 0 0 auto;
}
.mp-detail-modal .mp-detail-section {
  padding: 0 !important;
  margin: 0 0 4px;
}
.mp-detail-modal .mp-detail-section + .mp-detail-section {
  margin-top: 4px;
}
.mp-detail-modal .mp-detail-section-h {
  font-size: 0.82rem;
  margin: 8px 0 4px;
  padding-bottom: 3px;
}
.mp-detail-rows .mp-detail-row:last-child { border-bottom: 0; }
.mp-detail-empty {
  text-align: center;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  padding: 24px 0;
}
@media (max-width: 540px) {
  .mp-detail-modal { padding: 32px 22px; }
  .mp-detail-title { font-size: 1.25rem; }
  .mp-detail-rows { grid-template-columns: 1fr; }
}


/* =========================================================
   Pill "Active par défaut" / "Définir par défaut" avec radio
   ========================================================= */
.mp-default-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.2;
  transition: background-color .15s ease, color .15s ease;
}
.mp-default-pill:hover {
  background: var(--bg-alt);
}
.mp-default-pill.is-active {
  background: var(--ink);
  color: #fff;
  cursor: default;
}
.mp-radio {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  background: transparent;
}
.mp-radio--filled::after {
  content: '';
  position: absolute;
  inset: 2px;
  background: currentColor;
  border-radius: 50%;
}
.mp-default-label {
  font-weight: 600;
}
@media (max-width: 760px) {
  .mp-default-pill {
    font-size: 0.54rem;
    padding: 6px 10px;
    gap: 6px;
  }
  .mp-default-label {
    /* On masque le long libellé sur mobile et on garde juste l'état */
    display: none;
  }
  .mp-default-pill.is-active::after {
    content: 'ACTIVE';
    font-weight: 700;
  }
  .mp-default-pill:not(.is-active)::after {
    content: 'DÉFAUT';
  }
}


/* =========================================================
   Scan modal — échelle 1-5 segmentée + chips suggestions
   ========================================================= */
.putch-scale-group {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.putch-scale-btn {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
  padding: 10px 6px;
  border: 1px solid var(--ink);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
  min-height: 64px;
}
.putch-scale-btn:hover {
  background: var(--bg-alt);
}
.putch-scale-btn.is-active {
  background: var(--ink);
  color: #fff;
}
.putch-scale-num {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.2rem;
  line-height: 1;
}
.putch-scale-lbl {
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.1;
  word-break: break-word;
}
.putch-scale-anchors {
  display: flex; justify-content: space-between;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.putch-suggest-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px;
  margin-top: 10px;
}
.putch-suggest-label {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 4px;
}
.putch-suggest-chip {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.78rem;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.putch-suggest-chip:hover {
  background: var(--bg-alt);
  border-color: var(--ink);
}

@media (max-width: 480px) {
  .putch-scale-group { gap: 6px; }
  .putch-scale-btn { padding: 8px 4px; min-height: 56px; }
  .putch-scale-num { font-size: 1rem; }
  .putch-scale-lbl { font-size: 0.5rem; letter-spacing: 0.06em; }
}


/* =========================================================
   Modale confirmation suppression Morphopass (style PUTCH)
   ========================================================= */
.mp-confirm-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center; justify-content: center;
  z-index: 1400;
  padding: 20px;
}
.mp-confirm-backdrop.show { display: flex; }
.mp-confirm-modal {
  background: #fff;
  width: 100%;
  max-width: 460px;
  padding: 32px 32px 28px;
  position: relative;
  animation: fadeIn .25s ease;
}
.mp-confirm-close {
  position: absolute; top: 12px; right: 16px;
  font-size: 1.5rem; line-height: 1;
  color: var(--muted); background: none; border: 0; cursor: pointer;
}
.mp-confirm-eyebrow {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 6px;
}
.mp-confirm-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.4rem;
  line-height: 1.2;
  margin: 0 0 8px;
  color: var(--ink);
}
.mp-confirm-sub {
  font-family: var(--sans);
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--muted);
  margin: 0 0 18px;
}
.mp-confirm-target {
  background: var(--bg-alt);
  border-left: 2px solid var(--ink);
  padding: 10px 14px;
  margin-bottom: 22px;
}
.mp-confirm-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.96rem;
  color: var(--ink);
  word-break: break-word;
}
.mp-confirm-meta {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
  word-break: break-all;
}
.mp-confirm-actions {
  display: flex; gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.mp-confirm-btn {
  padding: 11px 20px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
  min-width: 110px;
}
.mp-confirm-btn--cancel {
  background: #fff; color: var(--ink);
}
.mp-confirm-btn--cancel:hover { background: var(--bg-alt); }
.mp-confirm-btn--ok {
  background: var(--ink); color: #fff;
}
.mp-confirm-btn--ok:hover { background: #000; }
@media (max-width: 480px) {
  .mp-confirm-modal { padding: 28px 22px; }
  .mp-confirm-title { font-size: 1.2rem; }
  .mp-confirm-actions { flex-direction: column-reverse; }
  .mp-confirm-btn { width: 100%; }
}


/* =========================================================
   Chip CONNECTÉ : email visible en sous-ligne
   ========================================================= */
.user-chip-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}
.user-chip-email { display: none; }
.mobile-nav-right .user-chip-wrap {
  width: 100%;
}
.mobile-nav-right .user-chip-email {
  font-size: 0.65rem;
  text-align: left;
  padding: 4px 0 0;
}


/* Cache l'icône œil native du navigateur sur le champ MOT DE PASSE
   du panneau Mes paramètres (le mot de passe stocké ici est un placeholder
   visuel, pas le vrai password — l'œil ne révélerait rien d'utile). */
.settings-password-row input::-ms-reveal,
.settings-password-row input::-ms-clear,
.settings-password-row input::-webkit-credentials-auto-fill-button,
.settings-password-row input::-webkit-strong-password-auto-fill-button,
.settings-password-row input::-webkit-textfield-decoration-container {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
}


/* === Masque mot de passe (remplace input) ===
   Visuellement identique mais sans aucun input HTML, ce qui empêche
   tout password manager (Edge, Safari, 1Password, LastPass…) d'injecter
   son icône œil. Le vrai changement se fait via le bouton Modifier. */
.settings-password-mask {
  display: block;
  width: 100%;
  background: var(--bg-soft, #fafafa);
  border: 1px solid var(--line);
  padding: 11px 14px;
  padding-right: 48px; /* place pour l'œil */
  font-family: var(--mono);
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  color: var(--ink);
  min-height: 41px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  box-sizing: border-box;
}
.settings-password-mask:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}
input.settings-password-mask::placeholder {
  color: var(--ink);
  letter-spacing: 0.05em;
  opacity: 1;
}
/* Hide native password reveal icons inside this input */
input.settings-password-mask::-ms-reveal,
input.settings-password-mask::-ms-clear,
input.settings-password-mask::-webkit-credentials-auto-fill-button,
input.settings-password-mask::-webkit-strong-password-auto-fill-button,
input.settings-password-mask::-webkit-textfield-decoration-container {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
}

/* === Form inline de changement de mot de passe === */
/* Stratégie classe : par défaut masquée, visible avec .is-open */
.pwd-change-form {
  display: none;
  margin-top: 14px;
  padding: 18px;
  background: var(--bg-soft, #fafafa);
  border: 1px solid var(--ink);
  flex-direction: column;
  gap: 12px;
}
.pwd-change-form.is-open {
  display: flex;
}
.pwd-change-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pwd-change-grid input[type="password"] {
  padding: 11px 14px;
  font-family: var(--sans);
  font-size: 0.95rem;
  background: #fff;
  border: 1px solid var(--ink);
  color: var(--ink);
  width: 100%;
  outline: none;
  transition: box-shadow .2s;
}
.pwd-change-grid input[type="password"]:focus {
  box-shadow: 0 0 0 3px rgba(0,0,0,0.08);
}
.pwd-change-hint {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--soft);
  margin: 0;
}
.pwd-change-msg {
  margin: 0;
  padding: 8px 12px;
  font-size: 0.85rem;
  line-height: 1.4;
  border: 1px solid var(--ink);
}
.pwd-change-msg.is-error {
  background: #fff;
  color: var(--ink);
  border-color: var(--ink);
}
.pwd-change-msg.is-ok {
  background: var(--ink);
  color: #fff;
}
.pwd-change-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}


/* === Wrapper input + bouton œil custom (form changement de mot de passe) === */
.pwd-input-wrap {
  position: relative;
  display: block;
}
.pwd-input-wrap input[type="password"],
.pwd-input-wrap input[type="text"] {
  width: 100%;
  padding-right: 44px !important; /* place pour le bouton œil */
}
/* Cache les icônes natives des navigateurs/password managers */
.pwd-input-wrap input::-ms-reveal,
.pwd-input-wrap input::-ms-clear,
.pwd-input-wrap input::-webkit-credentials-auto-fill-button,
.pwd-input-wrap input::-webkit-strong-password-auto-fill-button,
.pwd-input-wrap input::-webkit-textfield-decoration-container {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
}

.pwd-eye {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.55;
  transition: opacity .2s;
}
.pwd-eye:hover { opacity: 1; }
.pwd-eye svg { width: 20px; height: 20px; display: block; pointer-events: none; }
.pwd-eye * { pointer-events: none; }
.pwd-eye { pointer-events: auto; }
.pwd-eye .eye-slash { transition: stroke-dashoffset .25s; }
.pwd-eye:not(.is-revealed) .eye-slash {
  stroke-dasharray: 24;
  stroke-dashoffset: 0;
}
.pwd-eye.is-revealed .eye-slash {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
}


/* Label texte VOIR/CACHER (remplace l'icône œil — ultra fiable) */
.pwd-eye-text {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 5px 9px;
  border-radius: 14px;
  cursor: pointer;
  transition: background-color .2s, color .2s;
  z-index: 2;
}
.pwd-eye-text:hover {
  background: var(--ink);
  color: #fff;
}
.pwd-input-wrap input[type="password"],
.pwd-input-wrap input[type="text"] {
  padding-right: 78px !important;
}

/* Lien Mot de passe oublié */
.pwd-forgot-row {
  margin: 0;
  text-align: right;
}
.pwd-forgot-link {
  background: none;
  border: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px 0;
}
.pwd-forgot-link:hover { color: var(--ink); }


/* === Bouton œil unifié (modale + raccourci masque) === */
.pwd-input-wrap { position: relative; }
.pwd-input-wrap input[type="password"],
.pwd-input-wrap input[type="text"] {
  width: 100%;
  padding-right: 44px !important;
}
/* Hide native browser reveal icons */
.pwd-input-wrap input::-ms-reveal,
.pwd-input-wrap input::-ms-clear,
.pwd-input-wrap input::-webkit-credentials-auto-fill-button,
.pwd-input-wrap input::-webkit-strong-password-auto-fill-button,
.pwd-input-wrap input::-webkit-textfield-decoration-container {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
}

.eye-btn {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: transparent;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  transition: opacity .2s, background-color .2s;
  border-radius: 6px;
  z-index: 2;
}
.eye-btn:hover { opacity: 1; background: rgba(0,0,0,0.04); }
.eye-btn svg { width: 20px; height: 20px; display: block; pointer-events: none; }
.eye-btn * { pointer-events: none; }

/* Slash : visible par défaut (password caché), masquée quand .is-revealed */
.eye-btn .eye-slash-line { display: block; }
.eye-btn.is-revealed .eye-slash-line { display: none; }

/* Wrapper du masque + œil-raccourci en mode fermé */
.settings-password-mask-wrap {
  position: relative;
  display: block;
}
.settings-password-mask-wrap .settings-password-mask {
  padding-right: 48px;
}
.settings-password-eye {
  /* hérite de .eye-btn, mais position uniquement sur le mask */
}


/* === Mini-form inline pour saisir le mot de passe à révéler === */
.pwd-reauth-inline {
  margin-top: 12px;
  padding: 16px;
  background: var(--bg-soft, #fafafa);
  border: 1px solid var(--ink);
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: pwd-reauth-slide .25s ease;
}
@keyframes pwd-reauth-slide {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pwd-reauth-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.pwd-reauth-hint {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--soft);
}
.pwd-reauth-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  flex-wrap: wrap;
}
.pwd-reauth-input {
  flex: 1;
  min-width: 200px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--ink);
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--ink);
  outline: none;
  transition: box-shadow .2s;
}
.pwd-reauth-input:focus {
  box-shadow: 0 0 0 3px rgba(0,0,0,0.08);
}


/* === Input in-place quand pas de password en session === */
.settings-password-input {
  display: block;
  width: 100%;
  padding: 11px 14px;
  background: #fff;
  border: 1px solid var(--ink);
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--ink);
  outline: none;
  transition: box-shadow .2s;
  min-height: 41px;
}
.settings-password-input:focus {
  box-shadow: 0 0 0 3px rgba(0,0,0,0.08);
}


/* Hint d'aide sous l'input password en mode saisie */
.settings-password-hint {
  margin: 8px 0 0;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--soft);
  line-height: 1.5;
}


/* ===== Checkout / Paramètres : menus déroulants Pays + adresse requise ===== */
.checkout-form select {
  padding: 9px 30px 9px 12px; border: 1px solid var(--line); background: #fff;
  font-family: var(--sans); font-size: 0.9rem; outline: none; color: var(--ink); width: 100%;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23444'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center;
}
.checkout-form select:focus { border-color: var(--ink); }
.settings-field select {
  padding: 10px 30px 10px 12px; border: 1px solid var(--line); background: #fff;
  font-family: var(--sans); font-size: 0.92rem; color: var(--ink); outline: none;
  transition: border-color .15s; width: 100%;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23444'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center;
}
.settings-field select:focus { border-color: var(--ink); }
.checkout-error { color: #c0392b; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em; margin: 10px 2px 0; }
.checkout-radio-badge { display: inline-block; margin-left: 6px; padding: 1px 6px; font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); vertical-align: middle; }

/* ===== Checkout : délai de production (lu depuis Supabase, poussé par la putch app) ===== */
.checkout-eta { border: 1px solid var(--line); background: var(--bg-alt, #f7f7f7); padding: 18px 20px; }
.eta-lead { font-family: var(--display); font-size: 1.05rem; color: var(--ink); margin: 0 0 6px; }
.eta-lead strong { font-weight: 800; }
.eta-sub { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--muted); text-transform: uppercase; margin: 0 0 10px; }
.eta-ok { font-size: 0.9rem; color: var(--ink); margin: 0; }
.eta-wait { font-size: 0.95rem; color: var(--muted); margin: 0; font-style: italic; }

/* ===== Putch Room : menu latéral gauche fixé au défilement (desktop) ===== */
@media (min-width: 761px) {
  .account-layout .account-tabs {
    position: -webkit-sticky;
    position: sticky;
    /* top = hauteur du header (78px) + padding-top de .account-layout :
       le menu est ainsi épinglé exactement à sa position de départ => aucun déplacement. */
    top: calc(78px + clamp(20px, 2.5vw, 36px));
    align-self: start;
    z-index: 5;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
  }
}

/* ===== Paramètres : cartes d'adresses (type/label, défaut, ajout) ===== */
.addr-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 600px) { .addr-cards { grid-template-columns: 1fr; } }
.addr-card { position: relative; border: 1px solid var(--line); background: #fff; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; font-family: var(--sans); min-height: 120px; }
.addr-card.is-default { border-color: var(--ink); }
.addr-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.addr-card-type { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--ink); }
.addr-card-badge { font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: var(--ink); padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.addr-card-link { font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); background: none; border: 0; cursor: pointer; padding: 0; text-decoration: underline; white-space: nowrap; }
.addr-card-link:hover { color: var(--ink); }
.addr-card-name { font-weight: 600; font-size: 0.92rem; }
.addr-card-lines { font-size: 0.84rem; color: var(--muted); line-height: 1.5; }
.addr-card-del { align-self: flex-end; margin-top: auto; background: none; border: 0; color: var(--soft); cursor: pointer; font-size: 1.15rem; line-height: 1; padding: 2px 4px; }
.addr-card-del:hover { color: #c0392b; }
.addr-card-add { align-items: center; justify-content: center; text-align: center; border: 1px dashed #cfcfcf; background: #fafafa; cursor: pointer; color: var(--muted); font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; gap: 8px; }
.addr-card-add:hover { border-color: var(--ink); color: var(--ink); }
.addr-card-plus { font-size: 1.9rem; line-height: 1; }
.addr-card-form { grid-column: 1 / -1; gap: 10px; }
.addr-card-form .cf-row { display: grid; grid-template-columns: 1fr; gap: 8px; }
.addr-card-form .cf-row.two { grid-template-columns: 1fr 1fr; }
.addr-card-form label { display: flex; flex-direction: column; gap: 4px; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.addr-card-form input, .addr-card-form select { padding: 9px 12px; border: 1px solid var(--line); background: #fff; font-family: var(--sans); font-size: 0.9rem; color: var(--ink); outline: none; width: 100%; }
.addr-card-form input:focus, .addr-card-form select:focus { border-color: var(--ink); }
.addr-card-form select { -webkit-appearance: none; appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23444'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.addr-form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.addr-card .btn-small { padding: 8px 16px; font-size: 0.7rem; }

/* ===== Bodyscanner : encart confidentialité (remplace le bouton "scan terminé") ===== */
.putch-scan-privacy { margin-top: 18px; padding: 16px 18px; border: 1px solid var(--line); background: var(--bg-alt, #f7f7f7); }
.putch-scan-privacy-title { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--ink); margin: 0 0 6px; }
.putch-scan-privacy-intro { font-size: 0.82rem; color: var(--muted); margin: 0 0 10px; }
.putch-scan-privacy-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.putch-scan-privacy-list li { font-size: 0.8rem; color: var(--muted); line-height: 1.5; }
.putch-scan-privacy-list strong { color: var(--ink); font-weight: 700; }

/* --- Case à cocher de consentement (apparait sous la liste privacy) --- */
.putch-scan-consent {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 14px; padding: 10px 12px;
  border: 1px solid var(--line); background: #fff;
  font-size: 0.85rem; color: var(--ink); line-height: 1.45;
  cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease;
}
.putch-scan-consent input[type="checkbox"] {
  flex-shrink: 0; margin-top: 2px;
  width: 16px; height: 16px; accent-color: var(--ink);
  cursor: pointer;
}
.putch-scan-consent.is-highlight {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.08);
  animation: putchConsentPulse 0.9s ease 0s 2;
}
@keyframes putchConsentPulse {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

/* --- Zone bouton "Me mesurer" + widget 3DLook --- */
.putch-scan-measure-area {
  margin-top: 14px; text-align: center;
}
.putch-scan-measure { width: 100%; }
.putch-scan-measure[disabled],
.putch-scan-measure.is-disabled {
  opacity: 0.45; cursor: not-allowed; pointer-events: none;
  filter: grayscale(0.4);
}

/* --- Bloc "En attente du scan mobile" : visible après clic Me mesurer
       pendant que 3DLook fait son flow QR / SMS / scan sur le mobile.
       Le polling Supabase ferme la modale dès que le webhook 3DLook
       passe scan_status à 'scanned'. --- */
.putch-scan-waiting {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 14px; padding: 12px 14px;
  background: #fff8e1; border: 1px solid #e6c97a;
  font-size: 0.86rem; color: #6b5400;
  line-height: 1.4;
  /* Sticky en bas de la modale : visible même quand le widget 3DLook prend
     toute la hauteur — le user peut toujours cliquer "J'ai fini" sans
     scroll. */
  position: sticky; bottom: 0; z-index: 4;
  box-shadow: 0 -6px 12px rgba(0,0,0,0.06);
}
.putch-scan-waiting[hidden] { display: none; }
.putch-scan-waiting-text { flex: 1 1 200px; }
.putch-scan-waiting-spin {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid #e6c97a; border-top-color: #6b5400;
  animation: putchSpin 0.9s linear infinite;
  flex-shrink: 0;
}
@keyframes putchSpin {
  to { transform: rotate(360deg); }
}
.putch-scan-check-now {
  font: inherit; font-size: 0.82rem; font-weight: 600;
  background: var(--ink, #111); color: #fff; border: none;
  padding: 6px 12px; cursor: pointer;
}
.putch-scan-check-now:hover { background: #333; }

/* =========================================================
   Popup 1 : Confidentialité (premier scan, non-consenti)
   ========================================================= */
.putch-priv-gate-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center; justify-content: center;
  z-index: 1200; padding: 20px;
}
.putch-priv-gate-backdrop.show { display: flex; overflow-y: auto; }
.putch-priv-gate {
  background: #fff; width: 100%; max-width: 520px;
  padding: 36px 30px 28px; position: relative; max-height: 92vh; overflow-y: auto;
  animation: fadeIn .25s ease;
}
.putch-priv-gate-close {
  position: sticky; top: 0; margin-left: auto; display: block;
  font-size: 1.8rem; color: var(--ink);
  background: rgba(255,255,255,0.92); border: 1px solid var(--line);
  width: 38px; height: 38px; border-radius: 50%;
  cursor: pointer; line-height: 1; padding: 0;
  z-index: 5;
}
.putch-priv-gate-close:hover { background: #fff; }
.putch-priv-gate-title {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 700; color: var(--ink);
  margin: 4px 0 12px;
}
.putch-priv-gate-intro {
  font-size: 0.92rem; color: var(--muted); margin: 0 0 14px; line-height: 1.5;
}
.putch-priv-gate-list {
  margin: 0 0 20px; padding-left: 18px; display: flex; flex-direction: column; gap: 10px;
}
.putch-priv-gate-list li {
  font-size: 0.86rem; color: var(--muted); line-height: 1.55;
}
.putch-priv-gate-list strong { color: var(--ink); font-weight: 700; }
.putch-priv-gate-consent {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 18px 0 22px; padding: 12px 14px;
  border: 1px solid var(--line); background: var(--bg-alt, #f7f7f7);
  font-size: 0.86rem; color: var(--ink); line-height: 1.45; cursor: pointer;
}
.putch-priv-gate-consent input[type="checkbox"] {
  flex-shrink: 0; margin-top: 2px;
  width: 16px; height: 16px; accent-color: var(--ink); cursor: pointer;
}
.putch-priv-gate-go {
  width: 100%;
}
.putch-priv-gate-go[disabled],
.putch-priv-gate-go.is-disabled {
  opacity: 0.45; cursor: not-allowed; pointer-events: none; filter: grayscale(0.4);
}

/* =========================================================
   Popup 2 : Éducative "Comment se déroule un scan"
   ========================================================= */
.putch-edu-gate-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center; justify-content: center;
  z-index: 1200; padding: 20px;
}
.putch-edu-gate-backdrop.show { display: flex; overflow-y: auto; }
.putch-edu-gate {
  background: #fff; width: 100%; max-width: 760px;
  padding: 36px 32px 28px; position: relative; max-height: 92vh; overflow-y: auto;
  animation: fadeIn .25s ease;
}
.putch-edu-gate-close {
  position: sticky; top: 0; margin-left: auto; display: block;
  font-size: 1.8rem; color: var(--ink);
  background: rgba(255,255,255,0.92); border: 1px solid var(--line);
  width: 38px; height: 38px; border-radius: 50%;
  cursor: pointer; line-height: 1; padding: 0;
  z-index: 5;
}
.putch-edu-gate-close:hover { background: #fff; }
.putch-edu-gate-title {
  font-family: var(--display); font-weight: 800;
  font-size: 1.5rem; letter-spacing: -0.01em;
  margin: 6px 0 8px;
}
.putch-edu-gate-intro {
  color: var(--muted); font-size: 0.94rem; line-height: 1.5;
  margin: 0 0 26px;
}
.putch-edu-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 28px;
}
.putch-edu-step {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.putch-edu-step-illu {
  position: relative;
  width: 100%; aspect-ratio: 1 / 1;
  border: 1px solid var(--line);
  background: var(--bg-alt, #f7f7f7);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
  margin-bottom: 12px;
}
.putch-edu-step-illu svg { width: 60%; height: 60%; }
.putch-edu-step-num {
  position: absolute; top: 8px; left: 10px;
  font-family: var(--mono);
  font-size: 0.72rem; letter-spacing: 0.14em;
  color: var(--ink); font-weight: 700;
}
.putch-edu-step-label {
  font-size: 0.82rem; color: var(--ink); line-height: 1.4;
  margin: 0;
}
.putch-edu-gate-go {
  width: 100%;
}
/* Responsive : 2x2 sur mobile / petit écran */
@media (max-width: 640px) {
  .putch-edu-steps { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .putch-edu-gate { padding: 28px 22px 22px; }
  .putch-edu-gate-title { font-size: 1.25rem; }
}


/* Pastille connecté : on n'affiche que le prénom + la croix (mot "Connecté" masqué) */
.user-chip--connected .user-status { display: none; }

/* === Renommer un Morphopass (édition inline du nom) === */
.mp-row-titlewrap{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mp-rename-btn{background:none;border:none;cursor:pointer;font-size:13px;line-height:1;opacity:.45;padding:2px 4px;color:inherit;border-radius:4px}
.mp-rename-btn:hover{opacity:1;background:rgba(0,0,0,.06)}
.mp-rename-form{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mp-rename-input{font:inherit;font-weight:700;padding:4px 8px;border:1px solid #bbb;border-radius:6px;min-width:200px;max-width:100%}
.mp-rename-input:focus{outline:none;border-color:#111}
.mp-rename-save,.mp-rename-cancel{border:1px solid #ccc;background:#fff;border-radius:6px;cursor:pointer;width:28px;height:28px;line-height:1;font-size:14px;flex:0 0 auto}
.mp-rename-save{background:#111;color:#fff;border-color:#111}
.mp-rename-save:hover{opacity:.85}
.mp-rename-cancel:hover{background:#f2f2f2}

/* =====================================================================
   PHOTO DE PROFIL — chip nav (photo ronde + prénom + déconnexion)
   Ajouté pour afficher l'avatar du membre en haut à droite, aligné
   verticalement avec le logo et les menus (header 78px).
   ===================================================================== */
.user-chip--connected {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  border: 0;
  padding: 0;
  background: none;
}
.user-chip-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: var(--ink);
  max-width: 96px;
}
.user-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  flex: 0 0 auto;
  transition: transform .18s ease, box-shadow .18s ease;
}
.user-chip-link:hover .user-avatar {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
}
.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.user-avatar-initial {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  color: #fff;
}
.user-chip--connected .user-ident {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink);
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.user-chip-link:hover .user-ident { opacity: .6; }
.user-chip--connected .user-logout {
  align-self: flex-start;
  margin-top: 1px;
  width: 18px;
  height: 18px;
  border: 0;
  background: none;
  color: var(--soft);
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
}
.user-chip--connected .user-logout:hover { color: var(--ink); }

/* Largeur/hauteur réservées dans le nav pour éviter tout saut à l'hydratation */
[data-user-slot] {
  min-width: 128px;
  min-height: 58px;
}
@media (max-width: 980px) {
  [data-user-slot] { min-width: 0; min-height: 0; }
  /* Sur mobile : disposition horizontale dans le menu déroulant */
  .mobile-nav-right .user-chip--connected {
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--line);
  }
  .mobile-nav-right .user-chip-link {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    max-width: none;
  }
  .mobile-nav-right .user-chip--connected .user-ident {
    font-size: 0.95rem;
    max-width: none;
    text-align: left;
  }
  .mobile-nav-right .user-avatar { width: 34px; height: 34px; }
  .mobile-nav-right .user-chip--connected .user-logout {
    align-self: center;
    margin-top: 0;
  }
}

/* =====================================================================
   PHOTO DE PROFIL — uploader dans les formulaires (inscription + paramètres)
   ===================================================================== */
.avatar-uploader {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.avatar-preview {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: var(--bg-alt);
  background-size: cover;
  background-position: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  flex: 0 0 auto;
  overflow: hidden;
}
.avatar-preview.has-photo {
  background-color: transparent;
  border-color: rgba(0, 0, 0, 0.08);
}
.avatar-preview-initial {
  font-family: var(--serif);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--soft);
}
.avatar-preview.has-photo .avatar-preview-initial { display: none; }
.avatar-uploader-actions {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.avatar-remove {
  border: 0;
  background: none;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 0;
}
.avatar-remove:hover { color: var(--ink); }

/* =====================================================================
   MODIFICATIONS NON ENREGISTRÉES — 3e bouton de la modale + bouton volant
   ===================================================================== */
.mp-confirm-btn--ghost {
  background: #fff;
  color: var(--muted);
  border-color: var(--line);
}
.mp-confirm-btn--ghost:hover {
  color: var(--ink);
  border-color: var(--ink);
}

.settings-fab {
  position: fixed;
  z-index: 1200;
  left: 0;
  top: 50%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transform: translateY(6px) scale(0.96);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.settings-fab.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.settings-fab-save,
.settings-fab-cancel {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 22px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.20);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.settings-fab-save {
  background: var(--ink);
  color: #fff;
  border: 0;
}
.settings-fab-save:hover { background: #000; }
.settings-fab-cancel {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
}
.settings-fab-cancel:hover { border-color: var(--ink); }
.settings-fab .settings-fab-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  flex: 0 0 auto;
  animation: fabPulse 1.6s ease-in-out infinite;
}
.settings-fab.is-saved .settings-fab-dot { display: none; }
.settings-fab.is-saved .settings-fab-cancel { display: none; }
@keyframes fabPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.7); }
}
@media (max-width: 980px) {
  .settings-fab-save,
  .settings-fab-cancel { font-size: 0.7rem; padding: 13px 18px; }
}

/* =====================================================================
   PARAMÈTRES — bloc Identité compact (photo à gauche, infos à droite)
   ===================================================================== */
.identity-block {
  display: flex;
  gap: clamp(16px, 2.4vw, 30px);
  align-items: flex-start;
}
.identity-block .avatar-field {
  margin: 0;
  flex: 0 0 auto;
}
.identity-block .identity-fields {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.identity-block .identity-fields .settings-row { margin-bottom: 10px; }
.identity-block .identity-fields .settings-row:last-child { margin-bottom: 0; }

.identity-block .avatar-uploader {
  position: relative;
  width: 120px;
  height: 120px;
  display: block;
}
.identity-block .avatar-preview {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: var(--bg-alt);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  transition: border-color .15s ease;
}
.identity-block .avatar-preview:hover { border-color: var(--ink); }
.identity-block .avatar-preview.has-photo {
  background-color: transparent;
  border-color: rgba(0, 0, 0, 0.08);
}
.identity-block .avatar-preview-hint {
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--soft);
  text-align: center;
  line-height: 1.6;
  padding: 0 14px;
  pointer-events: none;
}
.identity-block .avatar-preview.has-photo .avatar-preview-hint { display: none; }
.identity-block .avatar-edit-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events: none;
}
.identity-block .avatar-preview.has-photo:hover .avatar-edit-overlay { opacity: 1; }
.identity-block .avatar-remove {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity .15s ease, transform .15s ease, color .15s ease, border-color .15s ease;
  z-index: 2;
}
.identity-block .avatar-uploader:hover .avatar-remove:not([hidden]) {
  opacity: 1;
  transform: scale(1);
}
.identity-block .avatar-remove:hover { color: var(--ink); border-color: var(--ink); }
.age-hint {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  color: var(--soft);
  margin-left: 8px;
  text-transform: none;
}
@media (max-width: 640px) {
  .identity-block { flex-direction: column; align-items: center; }
  .identity-block .identity-fields { width: 100%; }
}

/* Onglets : sur mobile on garde la barre soulignée (pas la pastille) */
@media (max-width: 760px) {
  .account-tab-btn { border-radius: 0; }
  .account-tab-btn:hover { background: transparent; }
  .account-tab-btn.active { background: transparent; color: var(--ink); }
  .account-tab-btn.active .account-tab-icon { color: var(--ink); }
  .account-tab-btn.active .account-tab-count { color: var(--muted); }
}


/* (Sticky du menu latéral : géré par la règle .account-layout .account-tabs ci-dessus) */


/* =====================================================================
   PUTCH ROOM — footer collé en bas quand le contenu est court
   (sticky footer : le contenu prend la hauteur dispo, le footer suit)
   ===================================================================== */
body:has(> main.account-layout) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body:has(> main.account-layout) > main.account-layout {
  flex: 1 0 auto;
  width: 100%;        /* empêche l'élément flex de rétrécir à la largeur du contenu */
}

/* ============================================================
   PUTCH ME — Sélecteur "rail accordéon" v3 (enrichissement)
   Injecté dans le DOM par assets/js/putch-me-rail.js.
   Pour retirer : supprimer ce bloc + le <script> putch-me-rail.js
   dans fr/en/de/it/putch-me.html. Le configurateur d'origine revient.
   ============================================================ */
.garment-selector-bar[hidden] { display: none !important; }

/* étiquettes communes des panneaux photo */
.pm-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: object-position .5s ease; }
.pm-scrim { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.06) 38%, rgba(255,255,255,.85) 100%); transition: background .4s; }
.pm-vlabel { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%) rotate(180deg); writing-mode: vertical-rl;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink);
  font-weight: 500; white-space: nowrap; transition: opacity .3s; pointer-events: none; }
.pm-hlabel { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px; display: flex; align-items: baseline;
  justify-content: space-between; gap: 10px; opacity: 0; transition: opacity .35s .1s; pointer-events: none; }
.pm-hlabel b { font-family: var(--display); font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; color: #fff; }
.pm-hlabel i { font-family: var(--mono); font-style: normal; font-size: .66rem; letter-spacing: .16em; color: rgba(255,255,255,.7); }
.pm-num { position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; color: var(--soft); transition: opacity .3s; }

/* VUE D'ENSEMBLE : panneaux superposés pleine largeur */
.pm-overview { display: flex; height: auto; padding-left: 0; transition: height .55s cubic-bezier(.22,1,.36,1); }
.pm-panel { position: relative; flex: 1 1 0; min-width: 60px; height: 100%; cursor: pointer; overflow: hidden;
  margin-left: -40px; border-left: 2px solid #fff; box-shadow: -18px 0 34px -22px rgba(0,0,0,.6);
  transition: flex-grow .55s cubic-bezier(.22,1,.36,1); padding: 0; background: var(--bg-alt); }
.pm-panel:first-child { margin-left: 0; border-left: none; box-shadow: none; }
/* Bande réduite (config) : statique. Aperçu plein (accueil) : agrandissement au survol. */
.configurator:not(.pm-lock) .pm-panel:hover { flex-grow: 2.4; z-index: 4; }
.configurator:not(.pm-lock) .pm-overview:hover .pm-panel:not(:hover) { flex-grow: .82; }
.pm-panel.is-active { outline: 2px solid var(--ink); outline-offset: -2px; }
.pm-panel:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

.pm-hint { margin: 12px 0 0; font-family: var(--mono); font-size: .6rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--soft); text-align: center; }

/* BARRE STICKY : changement de type sur place (calée sous le header 78px) */
.pm-switch { position: sticky; top: 78px; z-index: 90; background: rgba(255,255,255,.96); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 18px; }
.pm-switch[hidden] { display: none !important; }
.pm-switch-inner { display: flex; align-items: stretch; justify-content: center; gap: clamp(16px, 3vw, 46px); }
.pm-sw { position: relative; background: none; border: none; cursor: pointer; padding: 18px 2px;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: 8px; white-space: nowrap; transition: color .2s; }
.pm-sw:hover { color: var(--ink); }
.pm-sw-num { font-size: .56rem; color: var(--soft); }
.pm-sw.is-active { color: var(--ink); font-weight: 600; }
.pm-sw.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); }
.pm-sw-thumb { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px);
  width: 108px; height: 135px; object-fit: cover; object-position: center top; border: 1px solid var(--line);
  background: var(--bg-alt); opacity: 0; visibility: hidden; transition: opacity .25s, transform .25s;
  pointer-events: none; box-shadow: 0 16px 34px -20px rgba(0,0,0,.55); z-index: 5; }
.pm-sw:hover .pm-sw-thumb { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(5px); }

/* CONFIGURATEUR : s'ouvre dessous */
.pm-config { scroll-margin-top: 150px; padding-top: clamp(16px, 2vw, 26px); padding-bottom: clamp(16px, 2vw, 26px); }
.pm-config[hidden] { display: none !important; }
.pm-active-tag { display: none !important; }   /* libellé produit retiré (redondant avec les badges de l'accordéon) */

@media (max-width: 720px) {
  .pm-switch { top: 66px; }
  .pm-switch-inner { justify-content: flex-start; gap: 18px; overflow-x: auto; }
  .pm-sw { padding: 14px 2px; }
  .pm-config { scroll-margin-top: 124px; }
  .pm-overview { padding-left: 0; }
  .pm-panel { margin-left: -28px; }
}
/* Visuels recadrés (sans label intégré) — libellés CSS restylés (éditorial),
   alignés au même endroit sur chaque panneau. Numéro + libellé horizontal
   masqués, phrase d'aide retirée. */
.pm-overview .pm-num,
.pm-overview .pm-hlabel { display: none !important; }
.pm-overview .pm-vlabel {
  /* libellé en haut à gauche : petit badge sombre -> lisibilité garantie sur toute photo */
  display: block; top: 14px; left: 14px; bottom: auto; opacity: 1;
  writing-mode: horizontal-tb; transform: none;
  background: var(--ink); color: #fff;
  font-family: var(--mono); font-size: .58rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 6px 9px; text-shadow: none;
}
.pm-hint { display: none !important; }
/* ===== Disposition plein écran : accueil = accordéon plein ; après sélection,
   en-tête "Collection iconique" + accordéon réduit + configurateur qui remplit
   l'écran (le footer passe sous la ligne de flottaison). Homme + Femme. ===== */
.tunnel-step[data-step="configurator"] {
  --pm-header: 78px;
  --pm-collection-h: 34px;                 /* réserve en-tête collection */
  --pm-vpad: clamp(10px, 1.4vw, 16px);
  --pm-reduced: clamp(120px, 18vh, 190px); /* hauteur bande réduite */
  padding: 0;
}
/* Bloc à hauteurs définies (pas de flex sur le configurateur) -> rendu fiable */
.tunnel-step[data-step="configurator"] .configurator {
  padding-top: var(--pm-vpad);
  padding-bottom: var(--pm-vpad);
}
/* En-tête : titre collection + bascule de genre */
.pm-collection {
  display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap;
  gap: 4px 14px; height: var(--pm-collection-h); margin: 0 0 var(--pm-vpad);
  font-family: var(--mono); text-transform: uppercase;
  letter-spacing: .14em; font-size: clamp(.6rem, .9vw, .76rem);
}
.pm-collection-title { color: var(--soft); }
.pm-gender { display: inline-flex; align-items: baseline; gap: 9px; }
.pm-gender-btn {
  background: none; border: 0; cursor: pointer; padding: 1px 0; font: inherit;
  letter-spacing: inherit; text-transform: inherit; color: var(--soft);
  border-bottom: 1.5px solid transparent; transition: color .2s, border-color .2s;
}
.pm-gender-btn:hover { color: var(--ink); }
.pm-gender-btn.is-active { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }
.pm-gender-sep { color: var(--soft); }
/* Accordéon : plein écran à l'accueil (hauteur définie -> panneaux height:100% OK) */
.tunnel-step[data-step="configurator"] .pm-overview {
  height: calc(100vh - var(--pm-header) - var(--pm-collection-h) - 3 * var(--pm-vpad));
}
/* Après sélection : bande réduite + le configurateur remplit le reste */
.configurator.pm-selected .pm-overview { height: var(--pm-reduced); }
/* Bande réduite : on descend le cadrage pour voir le vêtement (col / torse) plutôt que le visage */
.configurator.pm-selected .pm-img { object-position: center 30%; }
/* Survol de la bande réduite -> réouverture plein écran avec l'accordéon dynamique */
.configurator.pm-selected:not(.pm-lock) .pm-overview:hover { height: calc(100vh - var(--pm-header) - var(--pm-collection-h) - 3 * var(--pm-vpad)); }
.configurator.pm-selected:not(.pm-lock) .pm-overview:hover .pm-img { object-position: center top; }
.configurator.pm-selected .pm-config {
  /* remplit l'espace sous l'accordéon ET centre le bloc config -> réparti sur la hauteur */
  min-height: calc(100vh - var(--pm-header) - var(--pm-collection-h) - var(--pm-reduced) - 4 * var(--pm-vpad));
  display: flex; flex-direction: column; justify-content: center;
}
@media (max-width: 720px) {
  .tunnel-step[data-step="configurator"] { --pm-header: 66px; --pm-collection-h: 46px; --pm-reduced: clamp(92px, 15vh, 150px); }
  .tunnel-step[data-step="configurator"] .pm-overview { height: calc(100svh - var(--pm-header) - var(--pm-collection-h) - 3 * var(--pm-vpad)); }
}
/* ===== Mobile (<=720px) : l'accordéon devient un carrousel horizontal swipeable.
   Le tactile n'a pas de survol -> on remplace les effets hover par un défilement
   à doigt + tap pour sélectionner. ===== */
@media (max-width: 720px) {
  .tunnel-step[data-step="configurator"] .configurator { min-height: calc(100svh - var(--pm-header)); }
  .pm-overview {
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; gap: 6px; padding-left: 0;
  }
  .pm-overview::-webkit-scrollbar { display: none; }
  .pm-panel {
    flex: 0 0 86%; min-width: 0; margin-left: 0;
    border-left: none; box-shadow: 0 8px 22px -16px rgba(0,0,0,.45);
    scroll-snap-align: center;
  }
  .pm-panel:first-child { margin-left: 0; }
  /* hauteurs en svh (gère la barre d'adresse mobile) */
  .tunnel-step[data-step="configurator"] .pm-overview { height: clamp(360px, 64svh, 560px); }
  .configurator.pm-selected .pm-overview { height: clamp(108px, 17svh, 168px); }
  .configurator.pm-selected .pm-panel { flex: 0 0 42%; }
  .configurator.pm-selected .pm-img { object-position: center 30%; }
  /* config : flux naturel empilé (pas de centrage vertical forcé) */
  .configurator.pm-selected .pm-config { display: block; min-height: 0; }
}
/* ============ fin bloc rail accordéon v3 ============ */

/* ============================================================
   Anti-flash du chip utilisateur (nav) — voir assets/js/nav-prepaint.js
   Avant l'hydratation JS, on masque le lien "Me connecter" pour les
   utilisateurs déjà connectés et on dessine leur avatar via CSS
   (data URL exposée en variable --pm-avatar). Supprime le clignotement
   de la photo à chaque navigation.
   Retrait : enlever ce bloc + nav-prepaint.js + ses includes.
   ============================================================ */
html[data-pm-auth="in"] [data-user-slot] > .nav-account { display: none !important; }

/* Placeholder pre-hydratation = chip COMPLET (avatar + prenom EN LIGNE),
   identique au chip rendu par nav-user.js. Le slot est deja inline-flex /
   justify-content:flex-end (cf. regle de base). On ajoute juste le gap et on
   reserve la place du bouton x (gap 8 + 18px) pour qu'avatar et prenom soient
   exactement a la meme position avant et apres hydratation -> swap invisible,
   plus aucun saut du menu a chaque navigation. */
html[data-pm-auth="in"] [data-user-slot]:not(.pm-hydrated) {
  gap: 8px;
  padding-right: 26px;
}
html[data-pm-auth="in"] [data-user-slot]:not(.pm-hydrated)::before {
  content: "";
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--pm-avatar) center / cover no-repeat, var(--ink);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
html[data-pm-auth="in"] [data-user-slot]:not(.pm-hydrated)::after {
  content: var(--pm-name, "");
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink);
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Une fois hydrate (ou des que le vrai chip est present) : on efface le
   placeholder et on rend la main au chip reel. */
html[data-pm-auth="in"] [data-user-slot].pm-hydrated::before,
html[data-pm-auth="in"] [data-user-slot].pm-hydrated::after,
html[data-pm-auth="in"] [data-user-slot]:has(.user-chip)::before,
html[data-pm-auth="in"] [data-user-slot]:has(.user-chip)::after { content: none !important; }
html[data-pm-auth="in"] [data-user-slot].pm-hydrated,
html[data-pm-auth="in"] [data-user-slot]:has(.user-chip) { padding-right: 0; }
/* ============ fin bloc anti-flash chip ============ */


/* ====== PUTCH transitions de page (View Transitions) ====== */
/* Chrome garde la page courante affichee jusqu'a ce que la nouvelle soit
   prete a peindre -> plus de flash blanc entre les pages. Le header est
   "nomme" : comme le menu est identique sur toutes les pages, il reste
   parfaitement stable pendant la transition (aucun clignotement du chip). */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-group(root) { animation-duration: 0.22s; }
}

.site-header { view-transition-name: pm-site-header; }
/* Le header ne se fond pas : il est juste maintenu en place, immobile. */
::view-transition-group(pm-site-header),
::view-transition-image-pair(pm-site-header) { animation-duration: 0s; }
::view-transition-old(pm-site-header),
::view-transition-new(pm-site-header) { animation: none; mix-blend-mode: normal; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*) { animation-duration: 0s !important; }
}
/* ====== fin transitions de page ====== */

/* ============================================================
   MESSAGERIE (boite de reception client) + enveloppe nav
   ============================================================ */
.account-tab-count--unread {
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  min-width: 18px;
  padding: 0 6px;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.account-tab-count--unread[hidden] { display: none; }

.messages-toolbar { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-bottom: 8px; }
.messages-markall {
  background: none; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); padding: 4px 2px;
}
.messages-markall:hover { color: var(--ink); }

.messages-list { display: block; border: 1px solid var(--line); background: #fff; }

/* --- Liste deroulante : bande de titre (entete de colonnes) --- */
.msg-listhead {
  display: grid;
  grid-template-columns: 92px minmax(0,1fr) 120px 110px 72px;
  gap: 16px; align-items: center;
  padding: 7px 16px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
.msg-listhead .msg-col--date,
.msg-listhead .msg-col--time { text-align: right; }

/* --- Lignes : 1 mail = 1 ligne --- */
.msg-row { border-bottom: 1px solid var(--line); }
.msg-row:last-child { border-bottom: 0; }
.msg-row.is-open { box-shadow: inset 3px 0 0 var(--ink); }
.msg-rowline {
  display: grid;
  grid-template-columns: 92px minmax(0,1fr) 120px 110px 72px;
  gap: 16px; align-items: center; width: 100%;
  background: none; border: 0; cursor: pointer; text-align: left;
  padding: 8px 16px; font: inherit; color: inherit;
  transition: background-color .12s;
}
.msg-rowline:hover { background: var(--bg-alt); }
.msg-col { min-width: 0; }
.msg-col--subject { display: flex; align-items: center; gap: 10px; }
.msg-subject {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--display); font-size: 0.92rem; line-height: 1.2; font-weight: 500; color: var(--muted);
}
.msg-col--author {
  font-size: 0.8rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.msg-rowline .msg-col--date,
.msg-rowline .msg-col--time {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.06em;
  color: var(--muted); text-transform: uppercase; text-align: right; white-space: nowrap;
}
.msg-dot {
  flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink); visibility: hidden;
}

/* Non lu : pastille visible + objet en gras noir + fond legerement grise.
   Une fois le mail ouvert (lu), il "se degrise" : retour au style normal. */
.msg-row.is-unread { background: var(--bg-alt); }
.msg-row.is-unread .msg-dot { visibility: visible; }
.msg-row.is-unread .msg-subject { color: var(--ink); font-weight: 800; }

/* Colonne statut + pastilles Recu / Envoye (a gauche de chaque ligne) */
.msg-col--status { display: flex; align-items: center; }
.msg-listhead .msg-col--status { color: var(--muted); }
.msg-status {
  display: inline-block; font-family: var(--mono); font-size: 0.54rem;
  letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
  padding: 3px 7px; border: 1px solid var(--line); white-space: nowrap;
}
.msg-status--in  { background: #fff; color: var(--muted); }
.msg-status--out { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Mail ENVOYE : fond legerement different de la bande d'entete (bg-alt) */
.msg-row--out { background: #eef2f6; }
.msg-row--out:hover .msg-rowline,
.msg-row--out .msg-rowline:hover { background: #e6ecf2; }
.msg-row--out .msg-subject { color: var(--ink); }

/* Pastille categorie pour un mail envoye (panneau deroule) */
.msg-cat--support { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Panneau accordeon (corps du mail, code, bouton) */
.msg-panel { border-top: 1px dashed var(--line); }
.msg-panel[hidden] { display: none; }
.msg-panel-inner { padding: 10px 16px 14px; }
.msg-panel-inner .msg-head { margin-bottom: 10px; }

/* Mobile : on garde Objet + Date, on masque Auteur + Heure */
@media (max-width: 640px) {
  .msg-listhead, .msg-rowline { grid-template-columns: auto minmax(0,1fr) auto; }
  .msg-col--author, .msg-col--time { display: none; }
}
.msg-card {
  border: 1px solid var(--line);
  background: #fff;
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.msg-card:hover { border-color: var(--ink); }
.msg-card.is-unread { border-left: 3px solid var(--ink); background: var(--bg-alt); }
.msg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.msg-cat {
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 700; color: var(--ink);
  border: 1px solid var(--line); padding: 2px 8px;
}
.msg-cat--promo, .msg-cat--ambassador_code { background: var(--ink); color: #fff; border-color: var(--ink); }
.msg-date { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; }
.msg-title { font-family: var(--display); font-weight: 800; font-size: 1.02rem; margin: 0 0 4px; letter-spacing: -0.01em; }
.msg-body { margin: 0; font-size: 0.9rem; line-height: 1.5; color: #444; }
.msg-code { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.msg-code code {
  font-family: var(--mono); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.14em;
  background: var(--bg-alt); border: 1px dashed var(--ink); padding: 8px 12px; color: var(--ink);
}
.msg-code-copy {
  background: var(--ink); color: #fff; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 8px 14px;
}
.msg-code-copy:hover { opacity: 0.85; }
.msg-cta {
  display: inline-block; margin-top: 12px;
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid var(--ink); color: var(--ink); padding: 8px 16px; text-decoration: none;
}
.msg-cta:hover { background: var(--ink); color: #fff; }

/* ============================================================
   Contacter le PUTCH Center (zone titre + CTA + modale)
   ============================================================ */
/* Zone titre : intitule a gauche, CTA aligne a droite */
.messages-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; margin: 0 0 20px;
}
.messages-header-text { min-width: 0; }
.messages-header-text h2 { margin: 0 0 6px; }
.messages-header-text .panel-intro { margin: 0; }

/* CTA : noir plein -> invert blanc au survol (convention CTA du site) + relief */
.messages-contact {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  flex: 0 0 auto; white-space: nowrap; cursor: pointer;
  background: var(--ink); color: #fff; border: 1px solid var(--ink);
  font-family: var(--mono); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 13px 22px;
  box-shadow: 0 8px 20px -8px rgba(0,0,0,0.55);
  transition: background-color .18s, color .18s, box-shadow .18s, transform .18s;
}
.messages-contact .messages-contact-ico { flex: 0 0 auto; display: block; }
.messages-contact:hover {
  background: #fff; color: var(--ink); border-color: var(--ink);
  box-shadow: 0 12px 26px -8px rgba(0,0,0,0.38);
  transform: translateY(-1px);
}
.messages-contact:active { transform: translateY(0); box-shadow: 0 4px 12px -8px rgba(0,0,0,0.5); }
.messages-contact:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

@media (max-width: 720px) {
  .messages-header { flex-direction: column; align-items: stretch; gap: 14px; }
  .messages-contact { width: 100%; }
}

.support-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
}
.support-modal[hidden] { display: none; }
.support-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.4); cursor: pointer; }
.support-modal-card {
  position: relative; background: #fff;
  width: min(540px, calc(100vw - 32px));
  max-height: calc(100vh - 64px); overflow: auto;
  padding: 28px 32px 24px;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.3);
}
.support-modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; background: #fff; border: 1px solid var(--line);
  cursor: pointer; font-size: 1.4rem; line-height: 0; color: var(--muted);
}
.support-modal-close:hover { color: var(--ink); border-color: var(--ink); }
.support-modal-title { font-family: var(--display); font-weight: 800; font-size: 1.22rem; letter-spacing: -0.01em; margin: 0 0 8px; }
.support-modal-intro { color: var(--muted); font-size: 0.9rem; line-height: 1.5; margin: 0 0 18px; }

.support-form { display: flex; flex-direction: column; gap: 14px; }
.support-form[hidden], .support-success[hidden] { display: none; }
.support-field { display: flex; flex-direction: column; gap: 6px; }
.support-label {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
.support-form select,
.support-form textarea {
  padding: 10px 12px; border: 1px solid var(--line); background: #fff;
  font-family: var(--sans); font-size: 0.92rem; color: var(--ink); outline: none; width: 100%;
}
.support-form textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.support-form select:focus,
.support-form textarea:focus { border-color: var(--ink); }
.support-error { color: #c0392b; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em; margin: 0; }
.support-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 2px; }

.support-success { text-align: center; padding: 18px 8px 8px; }
.support-success-icon {
  width: 52px; height: 52px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--ink); color: #fff; font-size: 1.5rem;
}
.support-success h3 { font-family: var(--display); font-weight: 800; font-size: 1.2rem; margin: 0 0 6px; }
.support-success p { color: var(--muted); margin: 0 auto 18px; max-width: 360px; line-height: 1.5; }

@media (max-width: 640px) {
  .support-modal-card { padding: 24px 20px 20px; }
}

/* Enveloppe messagerie dans le chip nav (a cote de la photo de profil) */
.user-chip .user-mail {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  color: var(--ink); text-decoration: none;
}
.user-chip .user-mail svg { width: 19px; height: 19px; }
.user-chip .user-mail:hover { opacity: 0.65; }
.user-mail-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
  background: var(--ink); color: #fff; border: 1px solid #fff; border-radius: 999px;
  font-family: var(--mono); font-size: 9px; font-weight: 700; line-height: 14px; text-align: center;
}
.user-mail-badge[hidden] { display: none; }

/* =========================================================
   Coming soon — bloc de présentation public (SEO / classification)
   Ajouté le 2026-05-25 : fournit au crawler des filtres web (PAN-DB,
   Zscaler, etc.) assez de texte réel pour classer putch.ch comme site
   de mode / commerce et sortir de la catégorie "insufficient-content".
   ========================================================= */
.coming-soon-about {
  max-width: 640px;
  margin: 4px auto 0;
  text-align: center;
  font-family: var(--display);
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.7;
}
.coming-soon-about .cs-about-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}
.coming-soon-about p { margin: 0 0 14px; }
.coming-soon-about p:last-child { margin-bottom: 0; }
.coming-soon-about strong { color: var(--ink); font-weight: 600; }
.coming-soon-about em { font-style: italic; color: var(--ink); }
.coming-soon-about a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); }
.coming-soon-about a:hover { text-decoration-color: var(--ink); }
@media (max-width: 600px) {
  .coming-soon-about { font-size: 0.9rem; }
}

/* =========================================================
   Coming soon — bloc "à propos" enrichi (2026-05-25b)
   Étoffe le contenu public lisible/indexable pour sortir de
   la catégorie "insufficient-content" des filtres web, tout
   en gardant un rendu sobre "coming soon".
   Ces règles arrivent après le bloc initial : elles l'affinent.
   ========================================================= */
.coming-soon-about {
  max-width: 720px;
  margin: 8px auto 0;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  text-align: left;
  font-family: var(--display);
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.75;
}
.coming-soon-about .cs-about-title {
  text-align: center;
  font-weight: 700;
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0 0 18px;
}
.coming-soon-about .cs-about-lead {
  text-align: center;
  font-size: 1.02rem;
  color: #3a3a3a;
  margin: 0 auto 22px;
  max-width: 600px;
}
.coming-soon-about .cs-about-h2 {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 28px 0 10px;
}
.coming-soon-about p { margin: 0 0 14px; }
.coming-soon-about .cs-steps {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  counter-reset: cs-step;
}
.coming-soon-about .cs-steps li {
  counter-increment: cs-step;
  position: relative;
  padding-left: 34px;
  margin: 0 0 12px;
}
.coming-soon-about .cs-steps li::before {
  content: counter(cs-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 22px;
  text-align: center;
  color: var(--ink);
}
.coming-soon-about .cs-faq { margin: 0 0 14px; }
.coming-soon-about .cs-faq dt {
  font-weight: 600;
  color: var(--ink);
  margin: 14px 0 4px;
}
.coming-soon-about .cs-faq dd { margin: 0; color: var(--muted); }
.coming-soon-about .cs-contact {
  text-align: center;
  margin-top: 24px;
  font-size: 0.9rem;
}
.coming-soon-about strong { color: var(--ink); font-weight: 600; }
.coming-soon-about em { font-style: italic; color: var(--ink); }
.coming-soon-about a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); }
.coming-soon-about a:hover { text-decoration-color: var(--ink); }
@media (max-width: 600px) {
  .coming-soon-about { font-size: 0.9rem; padding-top: 22px; }
  .coming-soon-about .cs-about-lead { font-size: 0.96rem; }
}

/* =========================================================
   Auth gate — bouton de fermeture (verrou souple, 2026-05-25)
   Visible uniquement en mode "soft" (ex. PUTCH ME) : permet de
   refermer la modale et de continuer à explorer l'accordéon.
   ========================================================= */
.auth-gate-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  transition: color .15s ease;
  z-index: 2;
}
.auth-gate-close:hover { color: var(--ink); }

/* ============================================================
   Illustration configurateur — survol léger + loupe centrée (molette)
   ============================================================ */
.avatar-frame { cursor: zoom-in; }
.avatar-frame .avatar-photo { transition: transform .35s ease; }
@media (hover: none) { .avatar-frame { cursor: default; } }

.pm-zoom-overlay {
  position: fixed; inset: 0; z-index: 9999; display: none;
  align-items: center; justify-content: center;
  background: rgba(38,38,40,.80); backdrop-filter: blur(3px);
  cursor: zoom-out; animation: pmZoomFade .18s ease;
}
.pm-zoom-overlay.is-open { display: flex; }
@keyframes pmZoomFade { from { opacity: 0; } to { opacity: 1; } }
.pm-zoom-img {
  max-height: 92vh; max-width: 88vw; width: auto; height: auto;
  object-fit: contain; transform-origin: center center;
  transition: transform .12s ease-out; will-change: transform;
  box-shadow: 0 24px 70px rgba(0,0,0,.45); cursor: zoom-in;
}
.pm-zoom-hint {
  position: fixed; left: 0; right: 0; bottom: 22px; text-align: center;
  color: #fff; opacity: .82; font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; pointer-events: none;
}

/* =============================================================
   PUTCH — Onglet "Mon putch" (anciennement "Mes Putch Coins")
   Compteurs compacts + modal graphique
   ============================================================= */
.myputch-counters {
  display: grid;
  /* 2 compteurs sur la 1re ligne, carte QR pleine largeur en 2e ligne. */
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 12px 0 24px;
  align-items: stretch;
}
.myputch-qr-card { grid-column: 1 / -1; }
@media (max-width: 720px) {
  .myputch-counters { grid-template-columns: 1fr; }
}

/* ===== Carte QR de cooptation (pleine largeur, layout horizontal) ===== */
.myputch-qr-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line, #eee);
  padding: 18px 20px;
  text-align: left;
  font-family: inherit;
  position: relative;
}
.myputch-qr-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.myputch-qr-hint {
  font-family: var(--mono);
  font-size: 0.6rem; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted, #888);
  text-align: center;
}
.myputch-qr-frame {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fafafa;
  border: 1px solid var(--line, #eee);
  padding: 12px;
  width: 184px;
  height: 184px;
  box-sizing: border-box;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.myputch-qr-frame:hover {
  border-color: var(--ink, #111);
  box-shadow: 0 2px 0 0 rgba(0,0,0,0.04);
}
.myputch-qr-frame:active { transform: scale(0.98); }
.myputch-qr-frame:focus-visible {
  outline: 2px solid var(--ink, #111);
  outline-offset: 2px;
}
.myputch-qr-frame canvas,
.myputch-qr-frame img {
  display: block;
  width: 160px;
  height: 160px;
  image-rendering: pixelated;
}
.myputch-qr-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.myputch-qr-note {
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1.55;
  color: var(--muted, #888);
  margin: 0;
}
.myputch-qr-copy {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink, #111);
  background: transparent;
  border: 1px solid var(--line, #eee);
  padding: 8px 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.myputch-qr-copy:hover { border-color: var(--ink, #111); background: #fafafa; }
.myputch-qr-copy.copied { border-color: #2e7d32; color: #2e7d32; }
@media (max-width: 560px) {
  .myputch-qr-card { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .myputch-qr-body { align-items: center; }
}

/* =============================================================
   Modale "Envoyer une invitation"
   ============================================================= */
.invite-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  display: none;
  align-items: center; justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.invite-modal-backdrop.show { display: flex; }
body.invite-modal-locked { overflow: hidden; }
.invite-modal {
  background: #fff;
  width: 100%; max-width: 520px;
  max-height: 90vh; overflow-y: auto;
  padding: 24px 24px 20px;
  position: relative;
  font-family: inherit;
  box-shadow: 0 8px 40px rgba(0,0,0,0.25);
}
.invite-modal-close {
  position: absolute; top: 10px; right: 12px;
  background: transparent; border: 0;
  font-size: 22px; line-height: 1;
  cursor: pointer; color: var(--muted, #888);
  padding: 4px 8px;
}
.invite-modal-close:hover { color: var(--ink, #111); }
.invite-modal-eyebrow {
  font-family: var(--mono);
  font-size: 0.6rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted, #888);
  margin-bottom: 4px;
}
.invite-modal-title {
  font-family: var(--display);
  font-size: 1.4rem; font-weight: 700;
  letter-spacing: -0.02em; margin: 0 0 6px;
  color: var(--ink, #111);
}
.invite-modal-sub {
  font-family: var(--mono);
  font-size: 0.72rem; line-height: 1.5;
  color: var(--muted, #888);
  margin: 0 0 16px;
}
.invite-modal-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-bottom: 12px;
}
@media (max-width: 460px) {
  .invite-modal-grid { grid-template-columns: 1fr; }
}
.invite-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.invite-field label {
  font-family: var(--mono);
  font-size: 0.62rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted, #888);
}
.invite-field input,
.invite-field select {
  font-family: inherit; font-size: 0.92rem;
  padding: 9px 10px;
  border: 1px solid var(--line, #ddd);
  background: #fff;
  width: 100%; box-sizing: border-box;
}
.invite-field input:focus,
.invite-field select:focus {
  outline: none; border-color: var(--ink, #111);
}
.invite-phone-row { display: grid; grid-template-columns: minmax(140px, 0.7fr) 1fr; gap: 8px; }
@media (max-width: 460px) {
  .invite-phone-row { grid-template-columns: 1fr; }
}
.invite-modal-preview {
  background: #fafafa;
  border: 1px solid var(--line, #eee);
  padding: 10px 12px;
  margin: 8px 0 16px;
}
.invite-modal-preview-label {
  font-family: var(--mono);
  font-size: 0.6rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted, #888);
  margin-bottom: 4px;
}
.invite-modal-preview-body {
  font-family: var(--mono);
  font-size: 0.72rem; line-height: 1.5;
  color: var(--ink, #111);
  white-space: pre-wrap; word-break: break-word;
}
.invite-modal-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.invite-action-btn {
  font-family: var(--mono);
  font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--line, #ddd);
  color: var(--ink, #111);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.invite-action-btn:hover:not(:disabled) {
  border-color: var(--ink, #111); background: #fafafa;
}
.invite-action-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.invite-action-btn-primary {
  background: #25d366; color: #fff; border-color: #25d366;
}
.invite-action-btn-primary:hover:not(:disabled) {
  background: #1ebe5b; border-color: #1ebe5b;
}
.myputch-counter {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--line, #eee);
  padding: 18px 20px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  position: relative;
}
.myputch-counter:hover {
  border-color: var(--ink, #111);
  box-shadow: 0 2px 0 0 rgba(0,0,0,0.04);
}
.myputch-counter:focus-visible {
  outline: 2px solid var(--ink, #111);
  outline-offset: 2px;
}
.myputch-counter-eyebrow {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted, #888);
}
.myputch-counter-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 2px 0;
}
.myputch-counter-val {
  font-family: var(--display);
  font-weight: 800;
  font-size: 2.4rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
.myputch-counter-val-muted { color: var(--muted, #888); font-weight: 600; }
.myputch-counter-unit, .myputch-counter-sep {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.myputch-counter-sep { font-size: 1.6rem; color: #ccc; }
.myputch-counter-sub {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--muted);
}
.myputch-counter-hint {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
  opacity: 0.7;
  transition: opacity 0.15s, color 0.15s;
}
.myputch-counter:hover .myputch-counter-hint {
  opacity: 1;
  color: var(--ink);
}

/* === Modal graphique === */
.myputch-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  cursor: pointer;            /* "clic n'importe où pour fermer" */
  animation: myputch-fade 0.2s ease-out;
}
.myputch-modal[hidden] { display: none; }
@keyframes myputch-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.myputch-modal-card {
  background: #fff;
  max-width: 820px;
  width: 100%;
  padding: 36px 40px 28px;
  position: relative;
  border-radius: 2px;
  cursor: pointer;            /* clic sur le card ferme aussi (demande user) */
  animation: myputch-rise 0.25s ease-out;
}
@keyframes myputch-rise {
  from { transform: translateY(8px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.myputch-modal-x {
  position: absolute;
  top: 12px; right: 14px;
  background: none; border: 0;
  font-size: 1.6rem;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
}
.myputch-modal-x:hover { color: var(--ink); }
.myputch-modal-eyebrow {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.myputch-modal-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -0.01em;
  margin: 4px 0 2px;
  color: var(--ink);
}
.myputch-modal-sub {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--muted);
  margin: 0 0 18px;
}
.myputch-modal-chartwrap {
  position: relative;
  width: 100%;
  height: 340px;
  margin: 8px 0 6px;
}
.myputch-modal-chart {
  width: 100%; height: 100%;
}
.myputch-modal-axis {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--muted);
  margin-top: 4px;
}
.myputch-modal-legend {
  display: flex;
  gap: 18px;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--muted);
}
.myputch-modal-legend-item {
  display: inline-flex; align-items: center; gap: 6px;
}
.myputch-modal-legend-dot {
  width: 10px; height: 10px;
  display: inline-block;
}
.myputch-modal-closehint {
  text-align: center;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 18px 0 0;
  opacity: 0.6;
}

/* === Footer NAVIGATION : tout en majuscules (cohérence visuelle) === */
.footer-col ul a {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ============================================================
   v2 simplifications (mai 2026) — options grisées / désactivées
   T-shirt : Fitée + Regular désactivées (seule Suggestion PUTCH active)
   Polo / Pants : toutes les options non-actives désactivées en attendant
   le développement des produits réels.
   ============================================================ */
.opt.disabled,
.opt[disabled],
.opt[aria-disabled="true"] {
  background: var(--bg-soft, #f5f5f5) !important;
  color: #b4b4b4 !important;
  border-color: #e4e4e4 !important;
  cursor: not-allowed !important;
  opacity: 0.6;
  pointer-events: none;
}
.opt.disabled:hover,
.opt[disabled]:hover {
  background: var(--bg-soft, #f5f5f5) !important;
  border-color: #e4e4e4 !important;
}
.color-swatch.disabled,
.color-swatch[disabled],
.color-swatch[aria-disabled="true"] {
  opacity: 0.35;
  cursor: not-allowed !important;
  pointer-events: none;
  position: relative;
}
.color-swatch.disabled::after,
.color-swatch[disabled]::after {
  content: "";
  position: absolute;
  inset: 50% 0 0 0;
  height: 1px;
  background: rgba(0,0,0,0.18);
  transform: rotate(-15deg);
  transform-origin: center;
}
.config-input[disabled] {
  background: var(--bg-soft, #f5f5f5);
  color: #b4b4b4;
  cursor: not-allowed;
  opacity: 0.6;
}

/* ============================================================
   v2 checkout (mai 2026) — Lignes compactes promo & coins
   intercalées entre la livraison et les totaux.
   ============================================================ */
.checkout-pane .checkout-inline-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line, #e6e6e6);
}
.checkout-pane .checkout-inline-row .ccm-input-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft, #6e6e6e);
  font-weight: 500;
}
.checkout-pane .checkout-inline-row .ccm-bal-suffix {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--text-soft, #9e9e9e);
}
.checkout-pane .checkout-inline-row .ccm-input-wrap {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}
.checkout-pane .checkout-inline-row input[type="text"],
.checkout-pane .checkout-inline-row input[type="number"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--line, #d8d8d8);
  background: #fff;
  font-family: var(--sans, inherit);
  font-size: 0.88rem;
  color: var(--text, #1a1a1a);
}
.checkout-pane .checkout-inline-row input[type="number"] { max-width: 120px; text-align: right; }
.checkout-pane .checkout-inline-row .ccm-input-unit {
  display: inline-flex; align-items: center;
  font-size: 0.78rem; letter-spacing: 0.04em;
  color: var(--text-soft, #6e6e6e);
}
.checkout-pane .checkout-inline-row .ccm-max {
  flex: 0 0 auto;
  padding: 9px 14px;
  border: 1px solid var(--ink, #1a1a1a);
  background: #fff;
  font-family: var(--sans, inherit);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink, #1a1a1a);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .18s, color .18s;
}
.checkout-pane .checkout-inline-row .ccm-max:hover { background: var(--ink, #1a1a1a); color: #fff; }
.checkout-pane .checkout-inline-row .checkout-promo-msg,
.checkout-pane .checkout-inline-row .checkout-coins-equiv {
  font-size: 0.74rem;
  color: var(--text-soft, #6e6e6e);
  margin: 4px 0 0 0;
  text-align: right;
}
.checkout-pane .checkout-inline-row .checkout-promo-msg[hidden] { display: none; }

/* ============================================================
   v2 checkout success recap (mai 2026)
   ============================================================ */
.checkout-recap {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 8px 4px 16px;
}
.checkout-recap .recap-head {
  text-align: center;
  padding: 8px 0 4px;
}
.checkout-recap .recap-head .checkout-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--ink, #1a1a1a);
  color: #fff;
  font-size: 28px;
  margin: 0 auto 12px;
}
.checkout-recap .recap-title {
  font-family: var(--display, inherit);
  font-size: 1.45rem;
  margin: 0 0 6px;
  letter-spacing: 0.005em;
}
.checkout-recap .recap-sub {
  color: var(--text-soft, #6e6e6e);
  font-size: 0.9rem;
  margin: 0;
}
.checkout-recap .recap-section {
  border-top: 1px solid var(--line, #ececec);
  padding-top: 16px;
}
.checkout-recap .recap-section h4 {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft, #6e6e6e);
  font-weight: 500;
  margin: 0 0 10px;
}
.checkout-recap .recap-section p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text, #1a1a1a);
  line-height: 1.5;
}
/* Items list — visually prominent so the customer can verify at a glance */
.checkout-recap .recap-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.checkout-recap .recap-items li {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  grid-column-gap: 14px;
  grid-row-gap: 2px;
  padding: 12px 14px;
  background: var(--bg-soft, #f7f6f3);
  border: 1px solid var(--line, #ececec);
}
.checkout-recap .recap-items .recap-item-name {
  grid-column: 1 / 2; grid-row: 1 / 2;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--ink, #1a1a1a);
}
.checkout-recap .recap-items .recap-item-spec {
  grid-column: 1 / 2; grid-row: 2 / 3;
  font-size: 0.82rem;
  color: var(--text-soft, #6e6e6e);
  letter-spacing: 0.01em;
}
.checkout-recap .recap-items .recap-item-price {
  grid-column: 2 / 3; grid-row: 1 / 3;
  align-self: center;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--ink, #1a1a1a);
  white-space: nowrap;
}
/* Total in its own section, prominent */
.checkout-recap .recap-total-section {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid var(--line, #ececec);
  padding-top: 16px;
}
.checkout-recap .recap-total-label {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft, #6e6e6e);
}
.checkout-recap .recap-total-value {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--ink, #1a1a1a);
  letter-spacing: 0.005em;
}
.checkout-recap-actions {
  display: flex; justify-content: center;
  padding: 8px 0 12px;
}
.checkout-recap-actions .btn { min-width: 200px; }

/* ============================================================
   v4 — Récap de validation (step 4) : visuel optimisé pour
   un contrôle rapide par le client avant validation finale.
   ============================================================ */
.checkout-recap {
  /* Override le gap pour rapprocher les sections, et padding plus aéré */
  gap: 16px;
  padding: 4px 4px 12px;
}
.checkout-recap .recap-head {
  text-align: center;
  padding: 4px 0 8px;
  border-bottom: none;
}
.checkout-recap .recap-head .recap-title {
  font-family: var(--display, var(--sans, inherit));
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 4px;
  letter-spacing: -0.005em;
  color: var(--ink, #1a1a1a);
}
.checkout-recap .recap-head .recap-sub {
  font-size: 0.82rem;
  color: var(--muted, #8a8a8a);
  margin: 0;
}
/* Sections : alternance subtile pour faciliter la lecture */
.checkout-recap .recap-section {
  padding: 14px 16px;
  background: var(--bg-soft, #f9f8f5);
  border: 1px solid var(--line, #ececec);
  border-radius: 2px;
}
.checkout-recap .recap-section h4 {
  font-family: var(--mono, var(--sans, inherit));
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted, #8a8a8a);
  font-weight: 500;
  margin: 0 0 8px;
  text-align: left;
}
.checkout-recap .recap-section p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text, #1a1a1a);
  line-height: 1.5;
  text-align: left;
}
/* Articles : encarts blancs prominents sur fond gris */
.checkout-recap .recap-items-section { background: var(--bg-soft, #f9f8f5); }
.checkout-recap .recap-items { gap: 6px; }
.checkout-recap .recap-items li {
  background: #fff;
  padding: 14px 16px;
  border: 1px solid var(--line, #ececec);
  border-radius: 2px;
  grid-template-columns: 1fr auto;
}
.checkout-recap .recap-items .recap-item-name {
  font-weight: 600;
  font-size: 0.95rem;
}
.checkout-recap .recap-items .recap-item-spec {
  font-size: 0.78rem;
  margin-top: 2px;
}
.checkout-recap .recap-items .recap-item-price {
  font-size: 0.95rem;
}
/* Total : pleine largeur, contraste fort, lisible d'un coup d'œil */
.checkout-recap .recap-total-section {
  background: var(--ink, #1a1a1a);
  border-color: var(--ink, #1a1a1a);
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 16px 20px;
}
.checkout-recap .recap-total-section .recap-total-label {
  font-family: var(--mono, var(--sans, inherit));
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.checkout-recap .recap-total-section .recap-total-value {
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.005em;
}
/* Le bloc success garde son ✓ et son centrage  */
[data-checkout-pane="success"] .checkout-recap .recap-head .checkout-success-icon { margin: 0 auto 12px; }