/* ===================================================================
   DESIGN SYSTEM: "Le studio indigo" — see DESIGN.md
   Dark, restrained, single indigo accent, clean modern typography.
   =================================================================== */

/* ===================================================================
   POLICES AUTO-HÉBERGÉES
   -------------------------------------------------------------------
   Les polices étaient chargées depuis fonts.googleapis.com, ce qui
   transmettait l'adresse IP de chaque visiteur à Google AVANT tout
   consentement — un point régulièrement sanctionné en Europe.
   Elles sont désormais servies depuis ce site : rendu identique,
   aucun tiers, et une requête réseau de moins.

   Ce sont des polices variables : un seul fichier couvre toute la
   plage de graisses (600→800 pour les titres, 400→700 pour le texte).
   Fichiers récupérés depuis Google Fonts, sous licence SIL Open Font
   License 1.1, qui autorise explicitement l'auto-hébergement.
   =================================================================== */

/* Bricolage Grotesque — titres */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/bricolage-grotesque-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Hanken Grotesk — texte courant */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/hanken-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/hanken-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #0F1016;
  --bg-elevated: #171926;
  --bg-elevated-hover: #1D2030;
  --text: #DAD8E6;
  --text-muted: #A8AAC0;
  --accent: #6E54FF;
  --accent-strong: #9E8CFF;
  --accent-deep: #4B32D6;
  --accent-soft: rgba(110, 84, 255, 0.16);
  --border: rgba(255, 255, 255, 0.09);
  --border-active: rgba(110, 84, 255, 0.6);

  --radius: 14px;
  --radius-sm: 10px;

  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;

  --max-width: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
  overflow-x: hidden;
}

/* ---------- Ambient studio light (signature motion) ---------- */
.ambient {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.ambient span {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.34;
  will-change: transform;
}
.ambient span:nth-child(1) {
  width: 520px; height: 520px;
  background: var(--accent);
  top: -160px; left: -120px;
  animation: drift1 26s ease-in-out infinite;
}
.ambient span:nth-child(2) {
  width: 460px; height: 460px;
  background: var(--accent-deep);
  bottom: -180px; right: -100px;
  animation: drift2 32s ease-in-out infinite;
}
.ambient span:nth-child(3) {
  width: 360px; height: 360px;
  background: var(--accent-strong);
  top: 38%; left: 58%;
  opacity: 0.2;
  animation: drift3 22s ease-in-out infinite;
}

@keyframes drift1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(70px, 50px); } }
@keyframes drift2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-60px, -40px); } }
@keyframes drift3 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-50px, 40px) scale(1.1); } }

.site-header, main, .site-footer { position: relative; z-index: 1; }

img { max-width: 100%; display: block; }
a { color: var(--accent-strong); text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  color: var(--text);
  overflow-wrap: break-word;
  hyphens: auto;
}

h1 { font-size: clamp(1.9rem, 3.8vw, 3.2rem); hyphens: none; overflow-wrap: normal; }
h2 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); }
h3 { font-size: 1.25rem; font-weight: 600; }

p { margin: 0 0 16px; max-width: 68ch; }

.label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  background: rgba(15, 16, 22, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  z-index: 100;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
}

.logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text);
}

.main-nav { display: flex; gap: 28px; }
.main-nav a {
  position: relative;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-muted);
  padding-bottom: 3px;
}
.main-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background: var(--accent-strong);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.25s ease;
}
.main-nav a:hover { color: var(--accent-strong); text-decoration: none; }
.main-nav a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.nav-toggle span { display: block; height: 2px; background: var(--text); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.97); }

.btn-primary {
  background: linear-gradient(135deg, var(--accent-strong) 0%, var(--accent) 55%, var(--accent-deep) 100%);
  color: #fff;
  box-shadow: 0 0 0 0 rgba(110,84,255,0.5);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #B4A6FF 0%, var(--accent-strong) 55%, var(--accent) 100%);
  box-shadow: 0 8px 28px rgba(110,84,255,0.45);
}

.btn-small { padding: 10px 20px; font-size: 0.85rem; }

.btn-secondary {
  background: transparent;
  color: var(--accent-strong);
  border: 1px solid var(--border-active);
}
.btn-secondary:hover {
  background: var(--accent-soft);
  border-color: var(--accent-strong);
}

.link-cta {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--accent-strong);
}

/* ---------- Hero ---------- */
.hero { padding: 0; overflow: hidden; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: stretch;
  min-height: 680px;
}

.hero-text-wrap {
  display: flex;
  align-items: center;
  padding-top: 96px;
  padding-bottom: 96px;
  padding-left: max(24px, calc((100vw - var(--max-width)) / 2 + 24px));
  padding-right: 48px;
}

.hero-eyebrow {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 14px;
  display: block;
}

.hero-subtitle {
  font-size: 1.15rem;
  color: var(--text-muted);
  max-width: 48ch;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hero-devis-note {
  margin-top: 16px;
  font-size: 0.92rem;
  color: var(--text-muted);
}
.hero-devis-note a { font-weight: 600; }

.hero-photo {
  position: relative;
  margin: 0;
  height: 100%;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
}

.hero-photo img {
  position: relative;
  z-index: 1;
  width: auto;
  height: auto;
  max-width: 82%;
  max-height: 96%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.35));
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 96%);
}

.hero-photo-glow {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 6%;
  width: 82%;
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--accent) 0%, var(--accent-deep) 45%, rgba(75, 50, 214, 0) 72%);
  filter: blur(64px);
  opacity: 0.5;
  pointer-events: none;
}

/* ---------- Stats band ---------- */
.stats-band {
  padding: 56px 0 40px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  text-align: center;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 28px 20px;
  border-radius: var(--radius);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.stat:hover { border-color: var(--border-active); transform: translateY(-2px); }

.stat-number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  line-height: 1;
  color: var(--accent-strong);
}

.stat-label {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  max-width: none;
  margin: 0 auto;
}

.category-band {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  text-align: center;
}

.category-band .label {
  display: block;
  margin-bottom: 16px;
}

.category-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.chip {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--border-active);
  background: var(--accent-soft);
  white-space: nowrap;
}

/* ---------- Section shells ---------- */
.prestations, .methodologie, .testimonials, .parcours, .in-situ, .faq, .contact { padding: 96px 0; }

.section-head { max-width: 62ch; margin-bottom: 44px; }
.section-lead { color: var(--text-muted); }

/* ---------- Prestations ---------- */
.prestation-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}

.exhibit {
  position: relative;
  border-radius: var(--radius);
  padding: 30px 26px 26px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.exhibit::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-strong), var(--accent-deep));
}
.exhibit:hover {
  border-color: var(--border-active);
  background: var(--bg-elevated-hover);
  transform: translateY(-3px);
}

.exhibit p { color: var(--text-muted); font-size: 0.98rem; }

/* ---------- Méthodologie ---------- */
.format-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  align-items: start;
}

.format-card { padding: 34px 32px 30px; }

.format-tagline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text);
  margin-bottom: 16px;
}

.format-audience {
  margin: 24px 0 0;
  padding-left: 16px;
  border-left: 3px solid var(--accent-strong);
}

.format-audience-label {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

.format-audience p {
  margin: 0;
  color: var(--text);
  font-size: 0.92rem;
  max-width: none;
}

.format-note {
  margin: 36px 0 0;
  text-align: center;
  color: var(--text-muted);
  max-width: none;
}
.format-note a { font-weight: 600; }

/* ---------- Avis clients ---------- */
.spotlight-quote {
  max-width: 62ch;
  margin: 44px auto 0;
  text-align: center;
}

.spotlight-mark {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--accent-strong);
  opacity: 0.5;
  margin-bottom: 6px;
}

.star-row { display: inline-flex; gap: 4px; }
.star { width: 16px; height: 16px; fill: #FBBC04; }

.stars-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto 36px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid var(--border-active);
}
.stars-badge-text { font-size: 0.85rem; font-weight: 600; color: var(--text); }

.byline-stars { display: inline-flex; margin-top: 8px; }
.byline-stars .star { width: 13px; height: 13px; }

.spotlight-item {
  margin: 0 0 28px;
  padding: 0 0 28px;
  border-bottom: 1px solid var(--border);
}
.spotlight-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

.spotlight-item p {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.5;
  color: var(--text);
  max-width: none;
  margin-bottom: 20px;
  letter-spacing: -0.01em;
}
.spotlight-item cite { display: block; font-style: normal; }
.spotlight-item cite strong { display: block; color: var(--text); font-weight: 700; }
.spotlight-item cite span { display: block; color: var(--text-muted); font-size: 0.88rem; margin-top: 4px; }

.spotlight-progress, .spotlight-controls { display: none; }

.testimonials.js-enhanced .spotlight-item { display: none; }
.testimonials.js-enhanced .spotlight-item.is-active { display: block; }
.testimonials.js-enhanced .spotlight-item { border-bottom: none; margin: 0; padding: 0; }

.testimonials.js-enhanced .spotlight-progress {
  display: flex;
  gap: 6px;
  max-width: 280px;
  margin: 36px auto 0;
}
.spotlight-progress-track {
  flex: 1;
  height: 2px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.spotlight-progress-fill {
  height: 100%;
  width: 100%;
  background: var(--accent-strong);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
}
.spotlight-progress-fill.is-filling { transition: transform 10s linear; transform: scaleX(1); }
.spotlight-progress-fill.is-done { transform: scaleX(1); transition: none; }

.testimonials.js-enhanced .spotlight-controls {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 18px;
}
.spotlight-arrow {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.spotlight-arrow:hover { border-color: var(--border-active); color: var(--accent-strong); }
.spotlight-arrow svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ---------- Parcours ---------- */
.path-timeline {
  position: relative;
  max-width: 74ch;
  padding-left: 8px;
}

.route-line-wrap {
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 40px;
  pointer-events: none;
}
.route-line-wrap svg { display: block; width: 100%; height: 100%; }
.route-line {
  fill: none;
  stroke: var(--border-active);
  stroke-width: 2;
  stroke-dasharray: 2200;
  stroke-dashoffset: 2200;
}
.path-timeline.is-drawn .route-line {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.8s ease;
}

.path-item {
  position: relative;
  padding-left: 64px;
  margin-bottom: 44px;
}
.path-item:last-child { margin-bottom: 0; }

.path-icon {
  position: absolute;
  left: 4px;
  top: 2px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 2px solid var(--accent-strong);
  color: var(--accent-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.path-icon .icon { width: 16px; height: 16px; stroke: currentColor; }

.path-date { display: block; margin-bottom: 8px; }
.path-content h3 { margin-bottom: 10px; }
.path-content p { color: var(--text-muted); font-size: 1.02rem; margin-bottom: 0; }
.path-content strong { color: var(--text); }
.path-content strong.hl { color: var(--accent-strong); }

.timeline-animated .path-item {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.timeline-animated .path-item.is-visible { opacity: 1; transform: none; }
.timeline-animated .path-item:nth-child(3) { transition-delay: 0.08s; }
.timeline-animated .path-item:nth-child(4) { transition-delay: 0.16s; }
.timeline-animated .path-item:nth-child(5) { transition-delay: 0.24s; }

.parcours-outro {
  margin: 48px 0 0;
  padding-top: 32px;
  border-top: 1px solid var(--border);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text);
  max-width: 66ch;
}

/* ---------- En situation ---------- */
.in-situ-wrap {
  position: relative;
  max-width: 900px;
}

.in-situ-glow {
  position: absolute;
  width: 340px;
  height: 340px;
  background: radial-gradient(closest-side, var(--accent) 0%, var(--accent-deep) 45%, transparent 72%);
  filter: blur(50px);
  opacity: 0.5;
  top: -50px;
  right: -20px;
  z-index: 0;
}

.in-situ-frame {
  position: relative;
  z-index: 1;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border-active);
  transform: rotate(-1deg);
}
.in-situ-frame img {
  width: 100%;
  height: auto;
  display: block;
}

.in-situ-caption {
  position: relative;
  z-index: 1;
  margin: 24px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text);
  max-width: 32ch;
}

/* ---------- FAQ ---------- */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 74ch;
}

.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  padding: 0 22px;
  transition: border-color 0.2s ease;
}
.faq-item[open] { border-color: var(--border-active); }

.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--text);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '';
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--accent-strong);
  border-bottom: 2px solid var(--accent-strong);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  margin-top: -4px;
}
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }

.faq-item p {
  margin: 0 0 22px;
  color: var(--text-muted);
  max-width: 66ch;
}

/* ---------- Contact ---------- */
.contact-inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 48px;
  align-items: start;
}

.contact-alt {
  font-size: 0.92rem;
  color: var(--text-muted);
  margin-top: 4px;
  margin-bottom: 12px;
}

.contact-alt-btn { margin-bottom: 4px; }

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 34px 32px;
}

.contact-form label {
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 14px;
  color: var(--text-muted);
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 11px 13px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.contact-form button { margin-top: 4px; align-self: flex-start; border: none; }

.hidden-field { display: none; }

/* ---------- Radio group (format envisagé) ---------- */
.radio-group {
  margin-top: 14px;
  padding: 0;
  border: none;
}
.radio-group legend {
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 8px;
  padding: 0;
}
.contact-form label.radio-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 16px 6px 0;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--text);
  text-transform: none;
  letter-spacing: normal;
}
.radio-option input {
  accent-color: var(--accent);
  width: auto;
  padding: 0;
  margin: 0;
}

/* ---------- Consentement RGPD ---------- */
.contact-form label.consent-field {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  font-weight: 400;
  font-size: 0.85rem;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-muted);
}
.consent-field input {
  accent-color: var(--accent);
  width: auto;
  margin-top: 3px;
  flex-shrink: 0;
}
.consent-field a { color: var(--accent-strong); font-weight: 600; }

.response-delay-note {
  margin: 14px 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  max-width: none;
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 28px 0;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.88rem;
  color: var(--text-muted);
}
.footer-inner a { color: var(--text-muted); text-decoration: underline; }

.footer-links {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
/* Le bouton de gestion des cookies doit être indiscernable des autres liens
   légaux : c'est un accès permanent exigé par la CNIL, pas une option. */
.footer-consent {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: inherit;
  color: var(--text-muted);
  text-decoration: underline;
  cursor: pointer;
}
.footer-consent:hover { color: var(--accent-strong); }


/* ---------- WhatsApp float ---------- */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  background: #25D366;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  z-index: 200;
  transition: transform 0.15s ease;
}
.whatsapp-float:hover { transform: scale(1.08); }

/* ---------- Legal page ---------- */
.legal { padding: 60px 0; max-width: 72ch; }
.legal h2 { font-size: 1.15rem; margin-top: 30px; }
.legal p { color: var(--text-muted); }
.legal .placeholder { background: var(--accent-soft); padding: 1px 6px; border-radius: 4px; color: var(--accent-strong); font-size: 0.92em; }

/* Pages légales longues (confidentialité, CGV) : sous-titres, chapô, tableaux. */
.legal h3 {
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text);
  margin: 26px 0 6px;
}
.legal-intro {
  font-size: 1.02rem;
  color: var(--text) !important;
  border-left: 2px solid var(--accent);
  padding-left: 18px;
  margin-bottom: 34px;
}
.legal strong { color: var(--text); font-weight: 600; }
.legal code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.86em;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 6px;
}
.legal-updated { font-size: 0.85rem; font-style: italic; }

/* Les tableaux débordent sur mobile : ils défilent dans leur propre cadre
   plutôt que de faire défiler toute la page horizontalement. */
.legal-table-wrap {
  overflow-x: auto;
  margin: 18px 0 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
  min-width: 460px;
}
.legal-table th,
.legal-table td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  color: var(--text-muted);
}
.legal-table th {
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text);
  background: var(--bg-elevated);
  white-space: nowrap;
}
.legal-table tbody tr:last-child td { border-bottom: none; }
.legal-table code { white-space: nowrap; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .hero-text-wrap { padding: 64px 24px 40px; text-align: center; }
  .hero-subtitle { margin-left: auto; margin-right: auto; }
  .hero-ctas { justify-content: center; }
  .hero-photo { height: 60vh; min-height: 340px; order: -1; }
  .hero-photo-glow { width: 92%; bottom: 2%; }
  .prestation-list { grid-template-columns: 1fr; }
  .format-list { grid-template-columns: 1fr; }
  .contact-inner { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; gap: 16px; }

  .main-nav {
    position: fixed;
    top: 61px;
    left: 0;
    right: 0;
    background: var(--bg-elevated);
    flex-direction: column;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border);
    transform: translateY(-150%);
    transition: transform 0.2s ease;
    gap: 18px;
  }
  .main-nav.open { transform: translateY(0); }
  .nav-toggle { display: flex; }
  /* Masque le CTA "Échange gratuit" de l'en-tête, qui n'a pas la place de
     cohabiter avec le bouton menu. Cette règle visait CE bouton précis : non
     ciblée, elle masquait aussi sur mobile le CTA "Réserver 20 minutes" de la
     section Contact, les boutons de la page Diffusion et ceux du bandeau
     cookies. */
  .header-inner > .btn-small { display: none; }
}

@media (max-width: 500px) {
  .hero, .prestations, .testimonials, .parcours, .in-situ, .faq, .contact { padding: 56px 0; }
  h1 { font-size: clamp(1.7rem, 7vw, 2.3rem); }
}

/* ===================================================================
   BLOG — direction "liste éditoriale"
   Pas de vignette dans les listes : le site n'a pas de source d'images
   authentiques par article, et une illustration générique coûte plus de
   crédibilité qu'elle n'en apporte. La photo réelle sert d'image de partage
   (Open Graph) et, quand elle existe, de couverture sur la page article.
   Voir build/blog.js.
   =================================================================== */

/* ---------- Liste d'articles (blog, accueil, "à lire aussi") ---------- */
.blog-list { border-top: 1px solid var(--border); }

.blog-row {
  position: relative;
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 40px;
  padding: 34px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
}
.blog-row::before {
  content: "";
  position: absolute;
  inset: 0 -24px;
  background: var(--accent-soft);
  border-radius: var(--radius);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.blog-row:hover::before,
.blog-row:focus-visible::before { opacity: 1; }
.blog-row > * { position: relative; }

/* La règle globale `a:hover { text-decoration: underline }` (l.89) est plus
   spécifique que la mise à `none` de l'état au repos, et soulignait donc tout
   le contenu de la ligne au survol. Sur un bloc cliquable entier, le retour
   visuel est porté par le voile indigo et par le titre qui passe en accent —
   pas par un trait. Spécificité volontairement supérieure à `a:hover`. */
.blog-row:hover,
.blog-row:focus-visible,
.blog-month-item:hover,
.blog-month-item:focus-visible { text-decoration: none; }

.blog-row:focus-visible,
.blog-month-item:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.blog-row-aside { padding-top: 5px; }
.blog-row-date {
  margin: 0 0 8px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}
.blog-row-tag {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

.blog-row-title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  font-weight: 700;
  line-height: 1.16;
  margin: 0 0 12px;
  transition: color 0.2s ease;
}
.blog-row:hover .blog-row-title { color: var(--accent-strong); }
.blog-row-excerpt { color: var(--text-muted); margin: 0 0 14px; max-width: 62ch; }
.blog-row-more { font-weight: 600; font-size: 0.92rem; color: var(--accent-strong); }

.blog-empty { color: var(--text-muted); max-width: 62ch; }

/* ---------- Page /blog/ ---------- */
/* padding-top/bottom seulement : la forme courte écraserait les 24px
   horizontaux de .container et collerait le texte au bord sur mobile. */
.blog-index { padding-top: 72px; padding-bottom: 96px; }
.blog-head { margin-bottom: 32px; }

/* ---------- Chronologie par mois (teaser de l'accueil) ----------
   Direction validée par le client : ni rubrique, ni article vedette. Les
   cibles cherchent des sujets différents, donc mettre en avant le dernier
   article n'aide personne ; c'est le rythme de parution, mois après mois,
   qui porte la crédibilité. Voir build/blog.js (renderMonthGroups).        */
.blog-months { display: flex; flex-direction: column; gap: 28px; }

.blog-month-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; }
.blog-month-name {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin: 0;
  white-space: nowrap;
}
.blog-month-rule { flex: 1; height: 1px; background: var(--border); }

.blog-month-items { display: flex; flex-direction: column; }

.blog-month-item {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
}
.blog-month-item:last-child { border-bottom: none; }
.blog-month-item::before {
  content: "";
  position: absolute;
  inset: 0 -20px;
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.blog-month-item:hover::before,
.blog-month-item:focus-visible::before { opacity: 1; }
.blog-month-item > * { position: relative; }

.blog-month-day {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.blog-month-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.3;
  transition: color 0.2s ease;
}
.blog-month-item:hover .blog-month-title { color: var(--accent-strong); }

/* ---------- Teaser sur la page d'accueil ---------- */
.blog-teaser { padding: 96px 0; position: relative; z-index: 1; }
.blog-teaser-more { margin: 28px 0 0; }
.blog-teaser-more a {
  font-weight: 600;
  color: var(--accent-strong);
  text-decoration: none;
}
.blog-teaser-more a:hover { text-decoration: underline; }

/* ---------- Page article ---------- */
.article-page { padding: 64px 0 0; }
.article { max-width: 72ch; }
.article-back { margin: 0 0 20px; }
.article-back a { color: var(--accent-strong); text-decoration: none; }
.article-back a:hover { text-decoration: underline; }

.article-meta {
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  margin: 0 0 22px;
}
.article-lede {
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--text);
  margin: 0 0 34px;
  padding-left: 20px;
  border-left: 2px solid var(--accent);
}

.article-cover { margin: 0 0 34px; }
.article-cover img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.article-cover figcaption {
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.article-video {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 0 0 34px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: #0B0C12;
}
.article-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.article-body { font-size: 1.05rem; }
.article-body h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin: 44px 0 14px; }
.article-body h3 { font-size: 1.15rem; margin: 32px 0 12px; }
.article-body p { margin: 0 0 20px; }
.article-body ul, .article-body ol { margin: 0 0 20px; padding-left: 22px; color: var(--text); }
.article-body li { margin-bottom: 8px; max-width: 66ch; }
.article-body a { color: var(--accent-strong); }
.article-body strong { color: var(--text); }
.article-body blockquote {
  margin: 28px 0;
  padding: 4px 0 4px 22px;
  border-left: 2px solid var(--border-active);
  color: var(--text-muted);
  font-style: italic;
}
.article-body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.article-body hr { border: 0; border-top: 1px solid var(--border); margin: 36px 0; }
.article-body code {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 0.9em;
}

/* ---------- Partage ---------- */
.article-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 44px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--border);
}
.article-share .label { margin-right: 4px; }
.share-btn {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}
/* text-decoration: none explicite — même raison que pour .blog-row : ces liens
   sont des pastilles bordées, un soulignement les abîme. */
.share-btn:hover { border-color: var(--border-active); color: var(--accent-strong); text-decoration: none; }

/* ---------- Rappel de contact en fin d'article ---------- */
.article-cta {
  margin: 56px 0 0;
  padding: 32px 34px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.article-cta h2 { font-size: 1.35rem; margin: 0 0 10px; }
.article-cta p { color: var(--text-muted); margin: 0 0 20px; }

.blog-related { padding: 72px 0 96px; margin-top: 72px; border-top: 1px solid var(--border); }
.blog-related h2 { font-size: 1.4rem; margin-bottom: 22px; }

/* ---------- Page de diffusion (interne, pensée mobile) ---------- */
.diffusion-page { padding-top: 64px; padding-bottom: 96px; }
.diffusion-list { display: grid; gap: 22px; }
.diffusion-item {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 26px 26px;
}
.diffusion-thumb { margin-bottom: 16px; }
.diffusion-thumb img {
  width: 100%;
  max-height: 160px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
}
.diffusion-meta {
  margin: 0 0 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
}
.diffusion-item h2 { font-size: 1.2rem; margin: 0 0 16px; }
.diffusion-message {
  margin: 0 0 18px;
  padding: 16px 18px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.diffusion-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Responsive blog ---------- */
@media (max-width: 860px) {
  .blog-row { grid-template-columns: 1fr; gap: 10px; padding: 28px 0; }
  .blog-row-aside { display: flex; align-items: baseline; gap: 12px; padding-top: 0; }
  .blog-row-date { margin: 0; }
  .blog-teaser { padding: 56px 0; }
  .blog-months { gap: 24px; }
  .blog-month-item { grid-template-columns: 28px 1fr; gap: 12px; }
  .blog-month-title { font-size: 1rem; }
  .blog-index, .article-page, .diffusion-page { padding-top: 48px; }
  .blog-related { padding: 56px 0 72px; margin-top: 56px; }
}

@media (max-width: 500px) {
  .article-lede { font-size: 1.08rem; padding-left: 16px; }
  .article-cta { padding: 26px 22px; }
  .diffusion-item { padding: 20px 18px 22px; }
  .diffusion-actions .btn { flex: 1 1 100%; text-align: center; }
}

/* ===================================================================
   BANDEAU DE CONSENTEMENT COOKIES
   Variante "carte d'angle" : ancrée en bas à GAUCHE, volontairement à
   l'opposé du bouton WhatsApp flottant (bas droite) pour ne jamais le
   masquer. Piloté par consent.js.
   =================================================================== */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- La carte ---------- */
.consent-card {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 300;
  width: 340px;
  max-width: calc(100vw - 48px);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.55);
  animation: consent-in 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.consent-card::before {
  content: "";
  display: block;
  width: 30px; height: 3px;
  border-radius: 2px;
  background: var(--accent);
  margin-bottom: 14px;
}
@keyframes consent-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.consent-card-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.consent-card-text {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}
.consent-card-text a { color: var(--accent-strong); }

.consent-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
/* Refuser et Accepter ont exactement le même poids visuel : exigence CNIL,
   refuser doit être aussi simple qu'accepter. */
.consent-card-actions .btn {
  flex: 1;
  text-align: center;
  padding: 10px 12px;
}

.consent-link {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 8px 4px;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.consent-link:hover { color: var(--accent-strong); }

/* ---------- Le panneau détaillé ---------- */
.consent-veil {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(15, 16, 22, 0.78);
  backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  padding: 20px;
  animation: consent-fade 0.2s ease both;
}
@keyframes consent-fade { from { opacity: 0; } to { opacity: 1; } }

.consent-panel {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: 0 26px 70px rgba(0,0,0,0.6);
}
.consent-panel-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
}

.consent-option {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.consent-option:last-of-type { border-bottom: none; }
.consent-option h3 {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  margin: 0 0 3px;
}
.consent-option p {
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
}

.consent-locked {
  flex-shrink: 0;
  font-size: 0.72rem;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

.consent-switch {
  flex-shrink: 0;
  position: relative;
  width: 46px; height: 26px;
  margin-top: 2px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  cursor: pointer;
  transition: background 0.18s ease;
}
.consent-switch::after {
  content: "";
  position: absolute;
  top: 3px; left: 23px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.18s ease;
}
.consent-switch.is-off { background: rgba(255,255,255,0.14); }
.consent-switch.is-off::after { left: 3px; }

.consent-panel-actions {
  display: flex;
  gap: 9px;
  margin-top: 22px;
}
.consent-panel-actions .btn { flex: 1; text-align: center; padding: 11px 12px; }

.consent-close {
  position: absolute;
  top: 14px; right: 16px;
  width: 32px; height: 32px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.consent-close:hover { color: var(--text); background: var(--bg-elevated-hover); }

.consent-card :focus-visible,
.consent-panel :focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  .consent-card {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    max-width: none;
    padding: 20px;
  }
  /* En pleine largeur, la carte recouvrirait le bouton WhatsApp : on
     l'escamote le temps du choix, il revient dès que le visiteur a répondu. */
  body.consent-open .whatsapp-float {
    opacity: 0;
    pointer-events: none;
    transform: translateY(90px);
  }
  .consent-panel { padding: 24px 20px; }
}

/* ===================================================================
   BLOC NEWSLETTER
   Variante "carte indigo" : teintée à l'accent du site pour se
   distinguer au premier coup d'œil de la carte grise .article-cta qui
   la précède, sans lui voler la priorité (le CTA WhatsApp reste
   l'action principale du site).
   =================================================================== */

/* Sur une page d'article, le bloc doit rester aligné sur la colonne de texte
   (.article fait 72ch) : sans cela il s'étalerait sur toute la largeur de la
   page, sous une carte CTA deux fois plus étroite. */
.article-outro { max-width: 72ch; }

.newsletter {
  position: relative;
  overflow: hidden;
  margin: 20px 0 0;
  padding: 28px 30px;
  border: 1px solid var(--border-active);
  border-radius: var(--radius);
  background: linear-gradient(150deg,
    rgba(110, 84, 255, 0.14) 0%,
    rgba(110, 84, 255, 0.05) 60%,
    transparent 100%);
}
/* Halo indigo diffus, écho de la lumière ambiante du site. */
.newsletter::after {
  content: "";
  position: absolute;
  top: -110px; right: -70px;
  width: 230px; height: 230px;
  border-radius: 50%;
  filter: blur(80px);
  background: var(--accent);
  opacity: 0.16;
  pointer-events: none;
}
.newsletter > * { position: relative; }

.newsletter-title {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 7px;
}
.newsletter-lead {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0 0 18px;
  max-width: 46ch;
}

.newsletter-row {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}
.newsletter-input {
  flex: 1;
  min-width: 210px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.newsletter-input::placeholder { color: var(--text-muted); }
.newsletter-input:focus {
  outline: none;
  border-color: var(--border-active);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.newsletter-consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 13px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-muted);
  cursor: pointer;
}
.newsletter-consent input {
  margin-top: 3px;
  accent-color: var(--accent);
  flex-shrink: 0;
}
.newsletter-consent a { color: var(--accent-strong); }

/* Message de confirmation ou d'erreur, rempli par script.js.
   Reste invisible et sans hauteur tant qu'il est vide. */
.newsletter-feedback {
  margin: 0;
  font-size: 0.85rem;
  color: var(--accent-strong);
}
.newsletter-feedback:empty { display: none; }
.newsletter-feedback.is-error { color: #FF9B9B; }

.newsletter.is-done .newsletter-row,
.newsletter.is-done .newsletter-consent { display: none; }

@media (max-width: 600px) {
  .newsletter { padding: 24px 20px; }
  .newsletter-row .btn { width: 100%; }
}