/* =========================================================
   AXEL DREANO — ATELIER IA · DOSSIER ÉDITORIAL
   Cream paper · terracotta ink · serif headlines
   ========================================================= */

:root {
  /* PAPER */
  --paper:        #f1ead7;
  --paper-2:      #e8dfc6;
  --paper-3:      #ddd1b1;

  /* INK */
  --ink:          #1a1613;
  --ink-soft:     #4d4339;
  --ink-mute:     #8a7c6a;
  --ink-faint:    rgba(26, 22, 19, 0.14);
  --ink-line:     rgba(26, 22, 19, 0.22);
  --ink-rule:     rgba(26, 22, 19, 0.45);

  /* ACCENT */
  --accent:       #b13c14;
  --accent-soft:  #c2541e;
  --accent-deep:  #7a2a0e;
  --accent-tint:  rgba(177, 60, 20, 0.08);

  /* TYPE */
  --f-display:    "Instrument Serif", "Times New Roman", serif;
  --f-body:       "Newsreader", "Georgia", serif;
  --f-sans:       "Geist", "Helvetica Neue", sans-serif;
  --f-mono:       "JetBrains Mono", ui-monospace, monospace;

  /* LAYOUT */
  --margin:       72px;
  --gutter:       40px;
  --max:          1320px;
  --col:          calc((var(--max) - 11 * var(--gutter)) / 12);
}

/* ---------- RESET ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
  font-feature-settings: "ss01", "ss02", "kern";
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  overflow-x: hidden;
}

/* paper grain */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 8%, rgba(26,22,19,0.025), transparent 35%),
    radial-gradient(circle at 88% 92%, rgba(26,22,19,0.04), transparent 40%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence baseFrequency='0.82' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.085 0 0 0 0 0.07 0 0 0 0.06 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
  z-index: 1;
  mix-blend-mode: multiply;
  opacity: .7;
}
body > * { position: relative; z-index: 2; }

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

/* ---------- TYPE SYSTEM ---------- */
.display, h1.display {
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.018em;
  font-feature-settings: "liga", "dlig";
}
.display em { font-style: italic; color: var(--accent); }

h1.huge { font-size: clamp(40px, 5.5vw, 76px); }
h2.big  { font-size: clamp(34px, 4.2vw, 56px); font-family: var(--f-display); font-weight: 400; line-height: 0.98; letter-spacing: -0.014em; }
h2.big em { font-style: italic; color: var(--accent); }

h3.mid  { font-size: clamp(22px, 2.4vw, 30px); font-family: var(--f-display); font-weight: 400; line-height: 1.05; letter-spacing: -0.01em; }
h3.mid em { font-style: italic; color: var(--accent); }

.lede {
  font-family: var(--f-body);
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 60ch;
  font-weight: 400;
}

/* mono labels — printer-press feel */
.mono-label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
}

/* —— SECTION MARKER · § —— */
.section-mark {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-mark .pilcrow {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 22px;
  color: var(--accent);
  letter-spacing: 0;
  line-height: 0;
  position: relative;
  top: -2px;
}
.section-mark::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ink-line);
  margin-left: 6px;
  max-width: 240px;
}

/* —— DROP CAP —— */
.drop::first-letter {
  font-family: var(--f-display);
  font-style: italic;
  color: var(--accent);
  font-size: 5.4em;
  line-height: 0.85;
  float: left;
  padding: 6px 12px 0 0;
  margin-top: 4px;
}

/* ---------- DOCUMENT FRAME / REGISTRY ---------- */

/* fixed registry bar (top) */
.registry {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 28px;
  height: 44px;
  background: rgba(241, 234, 215, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ink-line);
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.registry .l, .registry .r { display: flex; gap: 28px; align-items: center; }
.registry .r { justify-content: flex-end; }
.registry .c { font-weight: 600; color: var(--ink); }
.registry .ref { color: var(--accent); font-weight: 600; }
.registry .dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 6px;
  position: relative;
  top: 0;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(177,60,20,0.45); }
  50%       { box-shadow: 0 0 0 7px rgba(177,60,20,0); }
}
.registry .toggle-mode {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-left: 1px solid var(--ink-line);
  padding-left: 24px;
  display: flex; align-items: center; gap: 8px;
  transition: color .2s;
}
.registry .toggle-mode:hover { color: var(--accent); }
.registry .toggle-mode .ico {
  display: inline-block;
  width: 12px; height: 12px;
  border: 1px solid currentColor;
  position: relative;
}
.registry .toggle-mode .ico::after {
  content: ""; position: absolute; inset: 2px 4px 5px 2px; background: currentColor; opacity: .4;
}

/* primary nav (below registry) */
.nav {
  position: fixed;
  top: 44px; left: 0; right: 0;
  z-index: 49;
  background: var(--paper);
  border-bottom: 1px solid var(--ink-line);
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 28px;
  transition: transform .3s;
}
.nav.hide { transform: translateY(-100%); }
.nav .brand {
  font-family: var(--f-display);
  font-size: 22px;
  font-style: italic;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1;
}
.nav .brand .dot { color: var(--accent); }
.nav .menu {
  margin-left: auto;
  display: flex;
  gap: 28px;
  align-items: center;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.nav .menu a {
  color: var(--ink-soft);
  transition: color .2s;
  display: flex; align-items: baseline; gap: 6px;
}
.nav .menu a .n {
  color: var(--ink-mute); font-size: 10px;
}
.nav .menu a:hover { color: var(--accent); }
.nav .cta {
  margin-left: 12px;
  padding: 10px 18px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  transition: background .2s, color .2s;
}
.nav .cta:hover { background: var(--accent); border-color: var(--accent); color: white; }

/* CONTAINER */
.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--margin);
}

/* ----------- HERO / FOLIO 01 ----------- */
.hero {
  padding-top: 130px;
  padding-bottom: 50px;
  border-bottom: 1px solid var(--ink-line);
  position: relative;
}
.hero-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 28px;
  gap: 32px;
}
.hero-meta .ref-block {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.9;
}
.hero-meta .ref-block strong {
  color: var(--ink); font-weight: 600;
}
.hero-meta .ref-block .accent { color: var(--accent); }

.dossier-stamp {
  border: 1.5px solid var(--accent);
  color: var(--accent);
  padding: 10px 18px 8px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: right;
  line-height: 1.6;
  transform: rotate(-1.5deg);
  position: relative;
}
.dossier-stamp .big {
  display: block;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 20px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent-deep);
  margin-top: 2px;
}

.hero-title {
  font-family: var(--f-display);
  font-size: clamp(44px, 6.5vw, 88px);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin-bottom: 36px;
}
.hero-title em { font-style: italic; color: var(--accent); }
.hero-title .sub-line {
  display: block;
  font-size: 0.42em;
  font-style: italic;
  color: var(--ink-soft);
  font-family: var(--f-display);
  letter-spacing: 0;
  margin-top: 0.18em;
  padding-left: 0.04em;
}

.hero-body {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
  align-items: start;
}
.hero-left { padding-right: 20px; }
.hero-left .lede { margin-bottom: 32px; }
.hero-left .lede.drop::first-letter { margin-top: -2px; }

.hero-ctas { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }

/* BUTTONS */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 16px 24px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  transition: all .2s ease;
  cursor: pointer;
  position: relative;
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: white; }
.btn .arrow { transition: transform .2s; }
.btn:hover .arrow { transform: translateX(4px); }

.btn.ghost {
  background: transparent;
  color: var(--ink);
}
.btn.ghost:hover { background: var(--ink); color: var(--paper); }

.btn.accent {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}
.btn.accent:hover { background: var(--accent-deep); border-color: var(--accent-deep); }

/* CHAT DEMO BOX */
.chat-frame {
  border: 1px solid var(--ink);
  background: rgba(255, 252, 244, 0.55);
  position: relative;
  box-shadow:
    8px 8px 0 0 var(--paper-3),
    9px 9px 0 1px var(--ink-line);
}
.chat-frame .frame-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-bottom: 1px solid var(--ink-line);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--paper-2);
}
.chat-frame .frame-head .ttl { color: var(--ink); font-weight: 600; }
.chat-frame .frame-head .live {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent);
}
.chat-frame .frame-head .live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  animation: pulse 2s infinite;
}

.chat-body {
  min-height: 300px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.5;
}
.chat-msg {
  max-width: 88%;
  padding: 10px 14px;
  position: relative;
}
.chat-msg.user {
  align-self: flex-end;
  background: var(--ink);
  color: var(--paper);
  border-radius: 14px 14px 2px 14px;
}
.chat-msg.assistant {
  align-self: flex-start;
  border: 1px solid var(--ink-line);
  background: rgba(255,252,244,0.7);
  border-radius: 2px 14px 14px 14px;
}
.chat-msg .who {
  display: block;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 4px;
  opacity: .65;
}
.chat-msg.assistant .who { color: var(--accent); opacity: 1; }

.chat-input {
  display: flex;
  align-items: center;
  border-top: 1px solid var(--ink-line);
  background: var(--paper-2);
}
.chat-input input {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 14px 16px;
  font-family: var(--f-body);
  font-size: 15px;
  color: var(--ink);
  outline: none;
}
.chat-input input::placeholder { color: var(--ink-mute); font-style: italic; }
.chat-input button {
  padding: 14px 18px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  border-left: 1px solid var(--ink-line);
  transition: background .15s;
}
.chat-input button:hover { background: var(--accent); color: white; }
.chat-input button:disabled { color: var(--ink-mute); cursor: wait; }

.chat-suggest {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 0 14px 12px;
}
.chat-suggest button {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid var(--ink-line);
  color: var(--ink-soft);
  background: var(--paper);
  transition: all .15s;
}
.chat-suggest button:hover { border-color: var(--accent); color: var(--accent); }

.typing {
  display: inline-flex; gap: 3px; align-items: center;
}
.typing span {
  display: inline-block; width: 5px; height: 5px;
  background: var(--ink-mute); border-radius: 50%;
  animation: typing 1.2s infinite;
}
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

/* assurances under hero */
.hero-promise {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--ink-line);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.hero-promise > div {
  display: flex; flex-direction: column; gap: 8px;
}
.hero-promise .num {
  font-family: var(--f-display);
  font-style: italic;
  color: var(--accent);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hero-promise .txt {
  font-family: var(--f-display);
  font-size: 14.5px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--ink);
}

/* ------- SECTION SHELL ------- */
section.folio {
  padding: 60px 0;
  position: relative;
  border-bottom: 1px solid var(--ink-line);
}
section.folio.alt { background: var(--paper-2); }
section.folio.dark { background: var(--ink); color: var(--paper); }
section.folio.dark .mono-label,
section.folio.dark .section-mark,
section.folio.dark .lede { color: var(--paper-3); }
section.folio.dark .section-mark::after { background: rgba(241,234,215,0.2); }
section.folio.dark h2.big em,
section.folio.dark h3.mid em,
section.folio.dark .display em { color: var(--accent-soft); }

.folio-head {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 80px;
  align-items: start;
  margin-bottom: 40px;
}
.folio-head .meta {
  position: sticky; top: 120px;
}
.folio-head .meta .section-mark { margin-bottom: 16px; }
.folio-head .meta p {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  line-height: 1.7;
}
.folio-head .body h2 { margin-bottom: 24px; }

/* ------ REGISTRE (counters) ------ */
.registre {
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.registre > div {
  padding: 36px 32px;
  border-right: 1px solid var(--ink-line);
  display: flex; flex-direction: column; gap: 8px;
}
.registre > div:last-child { border-right: 0; }
.registre .label {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.registre .val {
  font-family: var(--f-display);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.registre .val em { font-style: italic; color: var(--accent); font-size: 0.55em; }
.registre .val .unit {
  font-family: var(--f-body);
  font-size: 16px;
  font-style: italic;
  color: var(--ink-soft);
  letter-spacing: 0;
  margin-left: 4px;
}
.registre .note {
  font-family: var(--f-body);
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.4;
}

/* ------ SERVICES TABLE ------ */
.svc-table {
  border-top: 2px solid var(--ink);
}
.svc-row {
  display: grid;
  grid-template-columns: 64px 1.6fr 2fr 200px 100px;
  align-items: stretch;
  border-bottom: 1px solid var(--ink-line);
  transition: background .15s, padding .2s;
  cursor: pointer;
  position: relative;
}
.svc-row:hover { background: var(--paper-2); }
.svc-row > * { padding: 28px 18px; }
.svc-row .idx {
  font-family: var(--f-display);
  font-style: italic;
  color: var(--accent);
  font-size: 26px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -0.02em;
  border-right: 1px solid var(--ink-line);
}
.svc-row .ttl {
  font-family: var(--f-display);
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  display: flex; align-items: center;
}
.svc-row .ttl em { font-style: italic; color: var(--accent); }
.svc-row .desc {
  font-family: var(--f-body);
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--ink-soft);
  display: flex; align-items: center;
}
.svc-row .price {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.6;
  border-left: 1px solid var(--ink-line);
  display: flex; flex-direction: column; justify-content: center;
}
.svc-row .price strong {
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 400;
  font-style: italic;
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
}
.svc-row .price strong.free {
  color: var(--accent);
  font-weight: 400;
}
.svc-row .arr {
  font-family: var(--f-display);
  font-size: 24px;
  color: var(--ink-line);
  display: flex; align-items: center; justify-content: center;
  border-left: 1px solid var(--ink-line);
  transition: color .15s, transform .2s;
}
.svc-row:hover .arr { color: var(--accent); transform: translateX(4px); }

/* ------ PERSONAS ------ */
.personas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}
.persona {
  padding: 48px 36px 40px;
  border-right: 1px solid var(--ink-line);
  position: relative;
}
.persona:last-child { border-right: 0; }
.persona .roman {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 52px;
  line-height: 0.9;
  color: var(--accent);
  margin-bottom: 20px;
  letter-spacing: -0.02em;
}
.persona h4 {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}
.persona h4 em { font-style: italic; color: var(--accent); }
.persona p {
  font-family: var(--f-body);
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-bottom: 24px;
}
.persona .verdict {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 16px;
  line-height: 1.3;
  color: var(--ink);
  border-top: 1px solid var(--ink-line);
  padding-top: 16px;
  display: flex; gap: 8px;
}
.persona .verdict::before {
  content: "→";
  color: var(--accent);
  font-style: normal;
}

/* ------ MÉTHODE / PROCÈS-VERBAL ------ */
.timeline-doc {
  border: 1px solid var(--ink);
  background: rgba(255, 252, 244, 0.55);
  position: relative;
}
.timeline-doc::before,
.timeline-doc::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--ink-line);
  background: var(--paper);
  border-radius: 50%;
  top: -7px;
}
.timeline-doc::before { left: -7px; }
.timeline-doc::after { right: -7px; }
.timeline-doc .doc-head {
  border-bottom: 1px solid var(--ink-line);
  padding: 14px 24px;
  display: flex; justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.timeline-doc .doc-head .ttl { color: var(--ink); font-weight: 600; }
.timeline-doc .steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.tstep {
  padding: 40px 32px 40px;
  border-right: 1px dashed var(--ink-line);
  position: relative;
}
.tstep:last-child { border-right: 0; }
.tstep .when {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 8px;
}
.tstep .step-n {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-mute);
  margin-bottom: 14px;
}
.tstep h5 {
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.tstep p {
  font-family: var(--f-body);
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.tstep .duration {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dotted var(--ink-line);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ------ FAQ ------ */
.faq-doc {
  border-top: 2px solid var(--ink);
}
.faq-item {
  border-bottom: 1px solid var(--ink-line);
  padding: 32px 0;
  display: grid;
  grid-template-columns: 64px 1fr 32px;
  gap: 24px;
  cursor: pointer;
  transition: background .15s;
}
.faq-item:hover { background: var(--paper-2); padding-left: 12px; padding-right: 12px; }
.faq-item .num {
  font-family: var(--f-display);
  font-style: italic;
  color: var(--accent);
  font-size: 20px;
  line-height: 1;
}
.faq-item .q {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.005em;
  align-self: center;
}
.faq-item .q em { font-style: italic; color: var(--accent); }
.faq-item .toggle {
  font-family: var(--f-display);
  font-size: 24px;
  color: var(--ink-mute);
  transition: transform .2s, color .15s;
  align-self: center;
  text-align: right;
}
.faq-item.open .toggle { transform: rotate(45deg); color: var(--accent); }
.faq-answer {
  grid-column: 2 / 3;
  font-family: var(--f-body);
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-top: 18px;
  display: none;
  max-width: 70ch;
}
.faq-item.open .faq-answer { display: block; }

/* ------ CTA FINAL ------ */
.cta-final {
  padding: 80px 0;
  background: var(--ink);
  color: var(--paper);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-final::before {
  content: "RÉSERVATION  ·  RÉSERVATION  ·  RÉSERVATION  ·  RÉSERVATION  ·  RÉSERVATION  ·  RÉSERVATION  ·";
  position: absolute;
  top: 24px; left: 0; right: 0;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.4em;
  color: rgba(241, 234, 215, 0.18);
  white-space: nowrap;
  animation: scrollText 35s linear infinite;
}
.cta-final::after {
  content: "RÉSERVATION  ·  RÉSERVATION  ·  RÉSERVATION  ·  RÉSERVATION  ·  RÉSERVATION  ·  RÉSERVATION  ·";
  position: absolute;
  bottom: 24px; left: 0; right: 0;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.4em;
  color: rgba(241, 234, 215, 0.18);
  white-space: nowrap;
  animation: scrollText 35s linear infinite reverse;
}
@keyframes scrollText {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.cta-final h2 {
  font-family: var(--f-display);
  font-size: clamp(40px, 5.5vw, 72px);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin: 28px auto 32px;
  max-width: 14ch;
}
.cta-final h2 em { font-style: italic; color: var(--accent-soft); }
.cta-final .lede { color: var(--paper-3); margin: 0 auto 36px; }
.cta-final .small {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(241, 234, 215, 0.5);
  margin-top: 24px;
}
.cta-final .btn {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}
.cta-final .btn:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* ------ COLOPHON / FOOTER ------ */
.colophon-doc {
  padding: 50px 0 28px;
  border-top: 1px solid var(--ink-line);
}
.colophon-doc .grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 56px;
  margin-bottom: 56px;
}
.colophon-doc h3 {
  font-family: var(--f-display);
  font-size: 26px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}
.colophon-doc h3 .dot { color: var(--accent); }
.colophon-doc p { color: var(--ink-soft); font-size: 15px; max-width: 38ch; }
.colophon-doc h6 {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 18px;
}
.colophon-doc ul li { margin-bottom: 8px; }
.colophon-doc ul a {
  font-family: var(--f-body);
  font-size: 15px;
  color: var(--ink-soft);
  transition: color .15s;
  border-bottom: 1px solid transparent;
}
.colophon-doc ul a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.colophon-doc .legal {
  border-top: 1px solid var(--ink-line);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  flex-wrap: wrap;
  gap: 16px;
}

/* ====================================================
   PRINT / PRÉSENTATION CLIENT MODE
   ==================================================== */
body.mode-print {
  background: #f7f3e8;
}
body.mode-print .registry,
body.mode-print .nav,
body.mode-print #tweaks-mount { display: none !important; }

body.mode-print main {
  max-width: 920px;
  margin: 40px auto;
  background: #fefcf6;
  box-shadow: 0 30px 80px rgba(26,22,19,0.18), 0 6px 16px rgba(26,22,19,0.08);
  border: 1px solid var(--ink-line);
  padding: 0;
  position: relative;
}
body.mode-print .container { padding: 0 56px; max-width: 100%; }
body.mode-print section.folio { padding: 70px 0; page-break-inside: avoid; }
body.mode-print .hero { padding-top: 70px; }
body.mode-print h1.hero-title { font-size: clamp(56px, 9vw, 100px); }
body.mode-print h2.big { font-size: clamp(38px, 5vw, 64px); }
body.mode-print .hero-body { grid-template-columns: 1fr; gap: 40px; }
body.mode-print .folio-head { grid-template-columns: 1fr; gap: 24px; }
body.mode-print .folio-head .meta { position: static; }
body.mode-print .svc-row { grid-template-columns: 48px 1.4fr 1.8fr 160px 60px; }
body.mode-print .svc-row .ttl { font-size: 22px; }
body.mode-print .svc-row .desc { font-size: 14px; }
body.mode-print .registre { grid-template-columns: repeat(4, 1fr); }
body.mode-print .registre .val { font-size: clamp(38px, 4vw, 56px); }
body.mode-print .registre > div { padding: 22px 18px; }
body.mode-print .timeline-doc .steps { grid-template-columns: repeat(4, 1fr); }
body.mode-print .tstep { padding: 24px 16px; }
body.mode-print .tstep h5 { font-size: 18px; }
body.mode-print .personas-grid { grid-template-columns: repeat(3, 1fr); }
body.mode-print .persona { padding: 28px 22px; }
body.mode-print .persona .roman { font-size: 52px; }
body.mode-print .persona h4 { font-size: 22px; }
body.mode-print .cta-final { padding: 80px 0; }
body.mode-print .cta-final h2 { font-size: clamp(48px, 7vw, 84px); }

body.mode-print .watermark {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-32deg);
  font-family: var(--f-display);
  font-style: italic;
  font-size: 240px;
  color: rgba(177, 60, 20, 0.06);
  pointer-events: none;
  letter-spacing: -0.02em;
  z-index: 0;
  white-space: nowrap;
}
body:not(.mode-print) .watermark { display: none; }

body.mode-print .page-corner {
  position: fixed;
  top: 12px; right: 12px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  z-index: 100;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 10px 14px;
}
body:not(.mode-print) .page-corner { display: none; }

body.mode-print .exit-mode {
  position: fixed;
  bottom: 20px; right: 20px;
  z-index: 100;
}

/* ====== REVEAL ====== */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}
.reveal.on { opacity: 1; transform: translateY(0); }
.reveal.d-1 { transition-delay: .08s; }
.reveal.d-2 { transition-delay: .16s; }
.reveal.d-3 { transition-delay: .24s; }
.reveal.d-4 { transition-delay: .32s; }
.reveal.d-5 { transition-delay: .4s; }

/* ====== RESPONSIVE ====== */
@media (max-width: 1024px) {
  :root { --margin: 40px; }
  .nav .menu a:not(.always) { display: none; }
  .hero-body { grid-template-columns: 1fr; gap: 56px; }
  .folio-head { grid-template-columns: 1fr; gap: 24px; }
  .folio-head .meta { position: static; }
  .svc-row { grid-template-columns: 48px 1fr 60px; }
  .svc-row .desc, .svc-row .price { display: none; }
  .personas-grid { grid-template-columns: 1fr; }
  .persona { border-right: 0; border-bottom: 1px solid var(--ink-line); }
  .timeline-doc .steps { grid-template-columns: repeat(2, 1fr); }
  .registre { grid-template-columns: repeat(2, 1fr); }
  .registre > div:nth-child(2) { border-right: 0; }
  .registre > div:nth-child(1), .registre > div:nth-child(2) { border-bottom: 1px solid var(--ink-line); }
  .hero-promise { grid-template-columns: repeat(2, 1fr); }
  .colophon-doc .grid { grid-template-columns: 1fr 1fr; }
  .registry { font-size: 9.5px; gap: 12px; padding: 0 14px; }
  .registry .l span:nth-child(n+3), .registry .r span:nth-child(n+2) { display: none; }
}

@media (max-width: 640px) {
  :root { --margin: 22px; }
  .hero { padding-top: 130px; }
  .hero-meta { flex-direction: column; align-items: flex-start; gap: 18px; }
  .dossier-stamp { align-self: flex-start; }
  .registre { grid-template-columns: 1fr; }
  .registre > div { border-right: 0; border-bottom: 1px solid var(--ink-line); }
  .hero-promise { grid-template-columns: 1fr 1fr; }
  .timeline-doc .steps { grid-template-columns: 1fr; }
  .tstep { border-right: 0; border-bottom: 1px dashed var(--ink-line); }
  .colophon-doc .grid { grid-template-columns: 1fr; gap: 32px; }
  .faq-item { grid-template-columns: 36px 1fr 24px; gap: 12px; }
  .faq-item .q { font-size: 19px; }
}

/* ---------- BURGER (mobile) ---------- */
.nav .burger {
  display: none;
  width: 32px; height: 32px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  margin-left: auto;
}
.nav .burger span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--ink);
  transition: transform .2s, opacity .2s;
}
.nav .burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav .burger.open span:nth-child(2) { opacity: 0; }
.nav .burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1024px) {
  .nav .burger { display: flex; }
  .nav .menu {
    position: fixed;
    top: 100px; left: 0; right: 0;
    background: var(--paper);
    border-top: 1px solid var(--ink-line);
    border-bottom: 1px solid var(--ink-line);
    flex-direction: column;
    gap: 0;
    padding: 12px 28px 20px;
    margin-left: 0;
    display: none;
  }
  .nav .menu.open { display: flex; }
  .nav .menu a {
    padding: 14px 0;
    border-bottom: 1px dotted var(--ink-line);
    display: flex;
  }
  .nav .menu a:last-child { border-bottom: 0; }
  .nav .menu a:not(.always) { display: flex !important; }
  .nav .cta { margin-left: 0; align-self: flex-start; margin-top: 10px; }
}

/* ---------- FORM (contact) ---------- */
.form-doc {
  border: 1px solid var(--ink);
  background: rgba(255, 252, 244, 0.55);
  padding: 40px 44px 36px;
  position: relative;
}
.form-doc::before,
.form-doc::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--ink-line);
  background: var(--paper);
  border-radius: 50%;
  top: -7px;
}
.form-doc::before { left: -7px; }
.form-doc::after { right: -7px; }
.form-doc .form-head {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--ink-line);
  padding-bottom: 14px;
}
.form-doc .form-head .ttl { color: var(--ink); font-weight: 600; }
.form-doc .row { margin-bottom: 22px; }
.form-doc .row.split { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.form-doc label {
  display: block;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 8px;
}
.form-doc input,
.form-doc select,
.form-doc textarea {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--ink-line);
  padding: 12px 14px;
  font-family: var(--f-body);
  font-size: 16px;
  color: var(--ink);
  transition: border-color .15s;
}
.form-doc input:focus,
.form-doc select:focus,
.form-doc textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.form-doc textarea { min-height: 120px; resize: vertical; }
.form-doc button[type="submit"] {
  padding: 16px 24px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  cursor: pointer;
  transition: background .15s;
  margin-top: 10px;
}
.form-doc button[type="submit"]:hover { background: var(--accent); border-color: var(--accent); }
.form-doc .small-note {
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--ink-mute);
  line-height: 1.5;
}
.form-doc .small-note a { color: var(--accent); border-bottom: 1px solid var(--accent); }

@media (max-width: 640px) {
  .form-doc { padding: 26px 22px; }
  .form-doc .row.split { grid-template-columns: 1fr; }
}

/* ---------- INCLUDES BOX (service detail) ---------- */
.includes-doc {
  border: 1px solid var(--ink-line);
  background: rgba(255, 252, 244, 0.4);
  padding: 32px 36px;
  margin: 36px 0;
}
.includes-doc h4 {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--ink-line);
  padding-bottom: 12px;
}
.includes-doc ul li {
  position: relative;
  padding: 10px 0 10px 28px;
  border-bottom: 1px dotted var(--ink-line);
  font-family: var(--f-body);
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.includes-doc ul li:last-child { border-bottom: 0; }
.includes-doc ul li::before {
  content: "→";
  position: absolute;
  left: 0; top: 10px;
  color: var(--accent);
  font-family: var(--f-display);
  font-style: italic;
}
.includes-doc ul li strong { color: var(--ink); font-weight: 600; }

/* ---------- PRICE GRID ---------- */
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--ink);
  background: rgba(255, 252, 244, 0.5);
}
.price-grid.two { grid-template-columns: repeat(2, 1fr); }
.price-card {
  padding: 36px 32px;
  border-right: 1px solid var(--ink-line);
}
.price-card:last-child { border-right: 0; }
.price-card.featured { background: var(--paper-2); position: relative; }
.price-card.featured::before {
  content: "Le plus choisi";
  position: absolute;
  top: -1px; right: 16px;
  background: var(--accent);
  color: white;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 10px;
}
.price-card .label {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 14px;
}
.price-card .amount {
  font-family: var(--f-display);
  font-size: 38px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.price-card .amount em { font-style: italic; color: var(--accent); }
.price-card .amount .unit {
  font-size: 18px;
  font-style: italic;
  color: var(--ink-soft);
  margin-left: 4px;
}
.price-card .when {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px dotted var(--ink-line);
}
.price-card .feat {
  font-family: var(--f-body);
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-bottom: 22px;
}
.price-card .feat li {
  padding-left: 16px;
  position: relative;
  margin-bottom: 6px;
}
.price-card .feat li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}
.price-card .btn { width: 100%; justify-content: center; }

@media (max-width: 1024px) {
  .price-grid, .price-grid.two { grid-template-columns: 1fr; }
  .price-card { border-right: 0; border-bottom: 1px solid var(--ink-line); }
  .price-card:last-child { border-bottom: 0; }
}

/* ---------- LEGAL DOC (mentions / privacy) ---------- */
.legal-doc {
  max-width: 760px;
  margin: 0 auto;
  font-family: var(--f-body);
  font-size: 15.5px;
  color: var(--ink-soft);
  line-height: 1.7;
}
.legal-doc h2 {
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 400;
  color: var(--ink);
  margin: 48px 0 18px;
  letter-spacing: -0.01em;
}
.legal-doc h2:first-child { margin-top: 0; }
.legal-doc h2 em { font-style: italic; color: var(--accent); }
.legal-doc p { margin-bottom: 16px; }
.legal-doc ul { margin: 18px 0 24px 28px; }
.legal-doc ul li {
  padding-left: 24px;
  margin-bottom: 8px;
  position: relative;
}
.legal-doc ul li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent);
}
.legal-doc strong { color: var(--ink); font-weight: 600; }
.legal-doc a { color: var(--accent); border-bottom: 1px solid var(--accent); }

/* ---------- CASE STUDIES (realisations) ---------- */
.case-list {
  border-top: 2px solid var(--ink);
}
.case-item {
  border-bottom: 1px solid var(--ink-line);
  padding: 48px 0;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 32px;
}
.case-item .num {
  font-family: var(--f-display);
  font-style: italic;
  color: var(--accent);
  font-size: 36px;
  line-height: 1;
}
.case-item .head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 14px;
}
.case-item .head .tag {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 4px 10px;
}
.case-item .head .year {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
}
.case-item h3 {
  font-family: var(--f-display);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}
.case-item h3 em { font-style: italic; color: var(--accent); }
.case-item .case-desc {
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 22px;
  max-width: 70ch;
}
.case-item .stack {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.case-item .stack span {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--paper-2);
  border: 1px solid var(--ink-line);
  padding: 4px 9px;
  color: var(--ink-soft);
}
.case-item .metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  border-top: 1px dotted var(--ink-line);
  padding-top: 22px;
}
.case-item .metrics > div {
  display: flex; flex-direction: column; gap: 4px;
}
.case-item .m-value {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 19px;
  color: var(--accent);
  line-height: 1;
}
.case-item .m-label {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

@media (max-width: 640px) {
  .case-item { grid-template-columns: 1fr; gap: 16px; }
  .case-item .num { font-size: 36px; }
  .case-item .metrics { grid-template-columns: 1fr; gap: 12px; }
}

/* ---------- POUR QUI / GRID DOC ---------- */
.grid-doc {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}
.grid-doc.two { grid-template-columns: repeat(2, 1fr); }
.grid-doc > div {
  padding: 36px 32px;
  border-right: 1px solid var(--ink-line);
}
.grid-doc > div:last-child { border-right: 0; }
.grid-doc h4 {
  font-family: var(--f-display);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.15;
  margin-bottom: 14px;
  letter-spacing: -0.005em;
}
.grid-doc h4 em { font-style: italic; color: var(--accent); }
.grid-doc p {
  font-family: var(--f-body);
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
}
@media (max-width: 1024px) {
  .grid-doc, .grid-doc.two { grid-template-columns: 1fr; }
  .grid-doc > div { border-right: 0; border-bottom: 1px solid var(--ink-line); }
  .grid-doc > div:last-child { border-bottom: 0; }
}

/* ---------- LINK ARROW INLINE ---------- */
.link-arrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.link-arrow:hover { color: var(--ink); }

/* ---------- SECTION TITLE (small h2 for inner pages) ---------- */
.h-mid {
  font-family: var(--f-display);
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}
.h-mid em { font-style: italic; color: var(--accent); }

/* ============================================================
   ORNEMENTS & ANIMATIONS — habillage visuel des zones vides
   ============================================================ */

/* ---------- Scroll progress bar ---------- */
.scroll-progress {
  position: fixed;
  top: 44px; left: 0; right: 0;
  height: 2px;
  z-index: 60;
  background: linear-gradient(to right, var(--accent), var(--accent-soft));
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.1s linear;
  pointer-events: none;
}

/* ---------- Hero : orbes flottants en arrière-plan ---------- */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hero::before, .hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.28;
  z-index: -1;
}
.hero::before {
  width: 420px; height: 420px;
  background: var(--accent);
  top: 15%; left: -120px;
  animation: orb-float 22s ease-in-out infinite;
}
.hero::after {
  width: 320px; height: 320px;
  background: var(--accent-soft);
  bottom: -60px; right: -80px;
  animation: orb-float 28s ease-in-out infinite reverse;
}
@keyframes orb-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(40px, -30px) scale(1.05); }
  66% { transform: translate(-20px, 40px) scale(0.95); }
}

/* ---------- Hero : ornement coin haut-gauche ---------- */
.hero .corner-deco {
  position: absolute;
  top: 110px; left: 28px;
  width: 64px; height: 64px;
  pointer-events: none;
  opacity: 0.5;
}
.hero .corner-deco svg { width: 100%; height: 100%; }
.hero .corner-deco .stroke { stroke: var(--accent); fill: none; stroke-width: 1; }

/* ---------- Service row : effet hover renforcé ---------- */
.svc-row {
  position: relative;
  overflow: hidden;
}
.svc-row::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: linear-gradient(90deg, rgba(177,60,20,0.10), transparent 60%);
  transition: width 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
  z-index: 0;
}
.svc-row:hover::after { width: 100%; }
.svc-row > * { position: relative; z-index: 1; }
.svc-row .idx {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s;
}
.svc-row:hover .idx {
  transform: scale(1.15) rotate(-4deg);
}

/* ---------- Persona : barre verticale qui pousse au hover ---------- */
.persona {
  position: relative;
  transition: background 0.3s, transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.persona::after {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 0;
  background: var(--accent);
  transform: translateY(-50%);
  transition: height 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.persona:hover { background: rgba(177,60,20,0.04); }
.persona:hover::after { height: 80%; }
.persona:hover .roman {
  transform: scale(1.08) translateX(4px);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.persona .roman { transition: transform 0.4s; }

/* ---------- Registre cards : indicateur visuel + pulse ---------- */
.registre {
  position: relative;
}
.registre .val em {
  display: inline-block;
  animation: pulse-em 4s ease-in-out infinite;
}
@keyframes pulse-em {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.registre > div {
  position: relative;
  transition: background 0.3s;
}
.registre > div:hover {
  background: rgba(177,60,20,0.03);
}
.registre > div::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 0; height: 3px;
  background: var(--accent);
  transform: translateX(-50%);
  transition: width 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.registre > div:hover::before { width: 100%; }

/* ---------- Section pilcrow : pulse subtil ---------- */
.section-mark .pilcrow {
  animation: pulse-em 5s ease-in-out infinite;
}

/* ---------- Btn arrow animation au hover ---------- */
.btn .arrow {
  display: inline-block;
}
.btn:hover .arrow {
  animation: arrow-slide 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes arrow-slide {
  0% { transform: translateX(0); }
  40% { transform: translateX(8px); opacity: 0.5; }
  41% { transform: translateX(-8px); opacity: 0; }
  60% { transform: translateX(-8px); opacity: 0; }
  61% { transform: translateX(-4px); opacity: 0.5; }
  100% { transform: translateX(0); opacity: 1; }
}

/* ---------- Chat frame : flottement subtil ---------- */
.chat-frame {
  animation: chat-float 9s ease-in-out infinite;
}
@keyframes chat-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* ---------- Folio sections : graduations latérales décoratives ---------- */
.folio {
  position: relative;
}
.folio::before {
  content: "";
  position: absolute;
  top: 60px; left: 28px;
  width: 1px; height: 32px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  opacity: 0.5;
}
@media (max-width: 1024px) {
  .folio::before { display: none; }
}

/* ---------- Hero promise items : hover ---------- */
.hero-promise > div {
  position: relative;
  transition: transform 0.3s;
}
.hero-promise > div:hover {
  transform: translateY(-3px);
}
.hero-promise > div:hover .num {
  color: var(--accent-soft);
}
.hero-promise .num { transition: color 0.3s; }

/* ---------- CTA final : button pulse ---------- */
.cta-final .btn {
  position: relative;
  overflow: hidden;
}
.cta-final .btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,0.4), transparent 70%);
  opacity: 0;
  transform: scale(0);
  transition: transform 0.6s, opacity 0.4s;
  pointer-events: none;
}
.cta-final .btn:hover::before {
  opacity: 1;
  transform: scale(2);
}

/* ---------- Dossier stamp : oscille subtilement au survol ---------- */
.dossier-stamp {
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
  cursor: default;
}
.dossier-stamp:hover {
  transform: rotate(1deg) scale(1.02);
}

/* ---------- FAQ items : indicator de hover ---------- */
.faq-item {
  position: relative;
}
.faq-item::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  height: 2px; width: 0;
  background: var(--accent);
  transition: width 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.faq-item:hover::after { width: 100%; }
.faq-item.open::after { width: 100%; }

/* ---------- Price card : hover effect ---------- */
.price-card {
  transition: transform 0.4s, background 0.3s, box-shadow 0.4s;
  position: relative;
}
.price-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(26,22,19,0.06);
  z-index: 2;
}

/* ---------- Case-item : effet bord ---------- */
.case-item {
  position: relative;
  transition: padding 0.4s;
}
.case-item::before {
  content: "";
  position: absolute;
  left: -2px; top: 0;
  width: 3px; height: 0;
  background: var(--accent);
  transition: height 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.case-item:hover::before { height: 100%; }
.case-item:hover { padding-left: 16px; }
.case-item .num {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.case-item:hover .num {
  transform: scale(1.1) translateX(-4px);
}

/* ---------- Grid-doc : hover items ---------- */
.grid-doc > div {
  position: relative;
  transition: background 0.3s;
}
.grid-doc > div::after {
  content: "";
  position: absolute;
  bottom: 0; left: 50%;
  width: 0; height: 2px;
  background: var(--accent);
  transform: translateX(-50%);
  transition: width 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.grid-doc > div:hover { background: rgba(177,60,20,0.03); }
.grid-doc > div:hover::after { width: 70%; }
.grid-doc > div h4 em { transition: color 0.3s; }

/* ---------- Tstep (timeline) : hover ---------- */
.tstep {
  transition: background 0.3s;
}
.tstep:hover {
  background: rgba(177,60,20,0.025);
}
.tstep .when {
  position: relative;
  display: inline-block;
}
.tstep .when::after {
  content: "";
  position: absolute;
  bottom: -3px; left: 0;
  width: 0; height: 1px;
  background: var(--accent);
  transition: width 0.4s;
}
.tstep:hover .when::after { width: 100%; }

/* ---------- Section accent vertical ornement ---------- */
.folio-head .meta {
  position: relative;
}
.folio-head .meta::before {
  content: "";
  position: absolute;
  left: -12px; top: 0;
  width: 2px; height: 28px;
  background: var(--accent);
}
@media (max-width: 1024px) {
  .folio-head .meta::before { display: none; }
}

/* ---------- Background subtle gradient mouvant sur sections alt ---------- */
section.folio.alt {
  background:
    radial-gradient(ellipse at 80% 20%, rgba(177,60,20,0.04), transparent 50%),
    var(--paper-2);
}

/* ---------- Footer : ornement décoratif ---------- */
.colophon-doc {
  position: relative;
}
.colophon-doc::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 60px; height: 2px;
  background: var(--accent);
}

/* ---------- Reveal animation enrichie ---------- */
.reveal {
  filter: blur(2px);
}
.reveal.on {
  filter: blur(0);
}

/* ---------- Hero title em : effet wave subtil ---------- */
.hero-title em {
  position: relative;
  display: inline-block;
}
.hero-title em::after {
  content: "";
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--accent), transparent);
  opacity: 0.4;
  transform: scaleX(0);
  transform-origin: left;
  animation: underline-grow 1.2s 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
@keyframes underline-grow {
  to { transform: scaleX(1); }
}

/* ---------- Banner "EN PRÉPARATION" pour services pas encore prêts ---------- */
.banner-soon {
  background: linear-gradient(90deg, var(--accent), var(--accent-soft));
  color: white;
  padding: 14px 24px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  text-align: center;
  position: relative;
  z-index: 10;
}
.banner-soon strong { font-weight: 700; }
.banner-soon a {
  color: white;
  border-bottom: 1px solid rgba(255,255,255,0.7);
  margin-left: 8px;
}
.banner-soon a:hover { border-bottom-color: white; }

/* ============================================================
   SECTION VORIA (produit complémentaire)
   ============================================================ */
section.voria-spotlight {
  padding: 80px 0;
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 100%);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
section.voria-spotlight::before {
  content: "";
  position: absolute;
  top: -100px; right: -100px;
  width: 400px; height: 400px;
  background: var(--accent);
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.25;
  pointer-events: none;
}
section.voria-spotlight::after {
  content: "VORIA · VORIA · VORIA · VORIA · VORIA · VORIA · VORIA · VORIA · VORIA · VORIA · ";
  position: absolute;
  bottom: 16px; left: 0; right: 0;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.4em;
  color: rgba(241,234,215,0.08);
  white-space: nowrap;
  animation: scrollText 45s linear infinite;
  pointer-events: none;
}
.voria-spotlight .container { position: relative; z-index: 2; }

.voria-head {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 50px;
}
.voria-badge {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-soft);
  border: 1px solid var(--accent-soft);
  padding: 5px 12px;
  margin-bottom: 18px;
}
.voria-head h2 {
  font-family: var(--f-display);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.015em;
  color: var(--paper);
  margin-bottom: 18px;
}
.voria-head h2 em { font-style: italic; color: var(--accent-soft); }
.voria-head p.lede {
  color: var(--paper-3);
  font-size: 17px;
  max-width: 56ch;
}

.voria-modules {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(241,234,215,0.18);
  border-bottom: 1px solid rgba(241,234,215,0.18);
  margin-bottom: 36px;
}
.voria-modules > div {
  padding: 20px 18px;
  border-right: 1px solid rgba(241,234,215,0.1);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-3);
  line-height: 1.6;
}
.voria-modules > div:last-child { border-right: 0; }
.voria-modules > div strong {
  display: block;
  font-family: var(--f-display);
  font-size: 22px;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  color: var(--accent-soft);
  margin-bottom: 4px;
}

.voria-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.voria-ctas .btn {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}
.voria-ctas .btn:hover {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.voria-ctas .btn.ghost {
  background: transparent;
  color: var(--paper);
  border-color: var(--paper);
}
.voria-ctas .btn.ghost:hover {
  background: var(--paper);
  color: var(--ink);
}

@media (max-width: 1024px) {
  .voria-head { grid-template-columns: 1fr; gap: 30px; align-items: start; }
  .voria-modules { grid-template-columns: repeat(2, 1fr); }
  .voria-modules > div:nth-child(2) { border-right: 0; }
  .voria-modules > div:nth-child(1),
  .voria-modules > div:nth-child(2) { border-bottom: 1px solid rgba(241,234,215,0.1); }
}
@media (max-width: 640px) {
  .voria-modules { grid-template-columns: 1fr; }
  .voria-modules > div { border-right: 0; border-bottom: 1px solid rgba(241,234,215,0.1); }
  .voria-modules > div:last-child { border-bottom: 0; }
}

/* Nav · lien externe (Voria) */
.nav .menu a.external {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav .menu a.external .ext-icon {
  font-size: 10px;
  color: var(--accent);
  margin-left: 2px;
}

/* ============================================================
   CHATBOT FLOTTANT (toutes pages)
   ============================================================ */

/* Bulle flottante en bas à droite */
.chat-bubble {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(177,60,20,0.35), 0 2px 6px rgba(0,0,0,0.1);
  transition: transform 0.25s cubic-bezier(0.2,0.7,0.2,1), box-shadow 0.25s;
  border: none;
  outline: none;
  padding: 0;
}
.chat-bubble:hover {
  transform: scale(1.08) rotate(-5deg);
  box-shadow: 0 10px 28px rgba(177,60,20,0.45), 0 3px 8px rgba(0,0,0,0.12);
}
.chat-bubble svg {
  width: 26px; height: 26px;
  fill: white;
}
.chat-bubble .status-dot {
  position: absolute;
  top: 4px; right: 4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #4ade80;
  border: 2px solid var(--paper);
  animation: pulse-em 2.4s ease-in-out infinite;
}
.chat-bubble.open svg { opacity: 0; }
.chat-bubble.open::after {
  content: "×";
  position: absolute;
  color: white;
  font-size: 32px;
  font-weight: 300;
  line-height: 1;
}

/* Tooltip "Posez-moi une question" sur le hover de la bulle */
.chat-bubble::before {
  content: "Posez-moi une question";
  position: absolute;
  right: 100%;
  margin-right: 12px;
  white-space: nowrap;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(8px);
  transition: opacity 0.2s, transform 0.2s;
}
.chat-bubble:hover::before {
  opacity: 1;
  transform: translateX(0);
}
.chat-bubble.open::before { display: none; }

/* Panneau de chat (s'ouvre depuis la bulle) */
.chat-panel {
  position: fixed;
  bottom: 96px; right: 24px;
  width: 380px;
  height: 560px;
  max-height: calc(100vh - 130px);
  background: var(--paper);
  border: 1px solid var(--ink);
  display: none;
  flex-direction: column;
  z-index: 101;
  box-shadow: 0 18px 50px rgba(26,22,19,0.22), 0 4px 12px rgba(26,22,19,0.1);
  transform-origin: bottom right;
  overflow: hidden;
}
.chat-panel.open {
  display: flex;
  animation: chat-panel-open 0.3s cubic-bezier(0.2,0.7,0.2,1);
}
@keyframes chat-panel-open {
  from { transform: scale(0.85) translateY(24px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

.chat-panel .frame-head {
  background: var(--ink);
  color: var(--paper);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.chat-panel .frame-head .ttl {
  color: var(--paper);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.chat-panel .frame-head .ttl::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4ade80;
  animation: pulse-em 2.4s ease-in-out infinite;
}
.chat-panel .frame-head .close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 22px;
  font-weight: 300;
  color: var(--paper-3);
  padding: 0;
  line-height: 1;
  transition: color 0.2s, transform 0.2s;
}
.chat-panel .frame-head .close:hover {
  color: var(--paper);
  transform: rotate(90deg);
}

.chat-panel .chat-body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 16px 18px;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--f-body);
  font-size: 14.5px;
  line-height: 1.5;
}
.chat-panel .chat-msg {
  max-width: 90%;
  padding: 10px 14px;
  position: relative;
}
.chat-panel .chat-msg.user {
  align-self: flex-end;
  background: var(--ink);
  color: var(--paper);
  border-radius: 14px 14px 2px 14px;
}
.chat-panel .chat-msg.assistant {
  align-self: flex-start;
  background: var(--paper-2);
  border-radius: 2px 14px 14px 14px;
}
.chat-panel .chat-msg .who {
  display: block;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 4px;
  opacity: 0.6;
}
.chat-panel .chat-msg.assistant .who { color: var(--accent); opacity: 1; }

.chat-panel .chat-suggest {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 0 14px 10px;
  border-top: 1px solid var(--ink-line);
  padding-top: 10px;
}
.chat-panel .chat-suggest button {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 9px;
  border: 1px solid var(--ink-line);
  color: var(--ink-soft);
  background: var(--paper);
  cursor: pointer;
  transition: all 0.15s;
}
.chat-panel .chat-suggest button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.chat-panel .chat-input {
  display: flex;
  align-items: center;
  border-top: 1px solid var(--ink-line);
  background: var(--paper-2);
}
.chat-panel .chat-input input {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 14px 16px;
  font-family: var(--f-body);
  font-size: 14.5px;
  color: var(--ink);
  outline: none;
}
.chat-panel .chat-input input::placeholder {
  color: var(--ink-mute);
  font-style: italic;
}
.chat-panel .chat-input button {
  padding: 14px 16px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  border-left: 1px solid var(--ink-line);
  background: none;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  cursor: pointer;
  transition: background 0.15s;
}
.chat-panel .chat-input button:hover {
  background: var(--accent);
  color: white;
}
.chat-panel .chat-input button:disabled {
  color: var(--ink-mute);
  cursor: wait;
}
.chat-panel .typing {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}
.chat-panel .typing span {
  display: inline-block;
  width: 4px; height: 4px;
  background: var(--ink-mute);
  border-radius: 50%;
  animation: typing 1.2s infinite;
}
.chat-panel .typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-panel .typing span:nth-child(3) { animation-delay: 0.3s; }

/* Mobile : panneau plein écran */
@media (max-width: 640px) {
  .chat-panel {
    width: calc(100vw - 24px);
    height: calc(100vh - 110px);
    bottom: 80px; right: 12px; left: 12px;
  }
  .chat-bubble {
    bottom: 16px; right: 16px;
    width: 52px; height: 52px;
  }
  .chat-bubble::before { display: none; }
}

/* Cacher la bulle en mode présentation */
body.mode-print .chat-bubble,
body.mode-print .chat-panel { display: none !important; }

/* ============================================================
   OPTIMISATION SMARTPHONE — passe finale 2026
   Cible : 320px à 640px (mobiles), 641 à 900px (tablet portrait)
   ============================================================ */

/* ---------- TABLET PORTRAIT (641 à 900px) ---------- */
@media (max-width: 900px) {
  /* Hero un peu plus compact */
  .hero { padding-top: 110px; padding-bottom: 36px; }
  .hero-title { margin-bottom: 28px; }
  .hero-meta { margin-bottom: 22px; }

  /* Contact : passe en 1 colonne plus tot */
  section.folio > .container > div[style*="grid-template-columns: 1.4fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* Voria head : 1 col */
  .voria-head { grid-template-columns: 1fr; gap: 24px; align-items: start; }

  /* Folio padding */
  section.folio { padding: 50px 0; }
  .folio-head { margin-bottom: 32px; gap: 24px; }

  /* Service rows : titre légèrement plus petit */
  .svc-row .ttl { font-size: 20px; }
  .svc-row .idx { font-size: 22px; }

  /* Personas un peu plus compactes */
  .persona { padding: 36px 28px 30px; }
  .persona .roman { font-size: 44px; margin-bottom: 14px; }
  .persona h4 { font-size: 20px; }

  /* Registre : padding réduit */
  .registre > div { padding: 24px 22px; }
  .registre .val { font-size: clamp(28px, 4vw, 44px); }

  /* CTA final */
  .cta-final { padding: 60px 0; }
  .cta-final h2 { font-size: clamp(36px, 5vw, 60px); }

  /* Footer grid : 2 col au lieu de 1.5fr+3 */
  .colophon-doc .grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}

/* ---------- MOBILE (max-width 640px) ---------- */
@media (max-width: 640px) {
  /* Margins / containers */
  :root { --margin: 18px; --gut: 24px; }
  .container { padding: 0 18px; }

  /* Registry bar : hauteur réduite, texte mini */
  .registry {
    height: auto;
    min-height: 38px;
    padding: 6px 14px;
    font-size: 9px;
    letter-spacing: 0.14em;
  }
  .registry .l { gap: 10px; flex-wrap: wrap; }
  .registry .c { display: none; }
  .registry .r { display: none; }
  .registry .toggle-mode { display: none; }

  /* Nav : ajusté pour mobile */
  .nav {
    top: 38px;
    height: 50px;
    padding: 0 18px;
  }
  .nav .brand { font-size: 18px; }
  .nav .burger { width: 28px; height: 28px; }

  /* Hero : padding réduit, titre plus petit */
  .hero {
    padding-top: 100px;
    padding-bottom: 28px;
  }
  .hero-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
  }
  .hero-meta .ref-block { font-size: 9.5px; line-height: 1.7; }
  .dossier-stamp {
    transform: rotate(-1deg);
    padding: 8px 12px 6px;
    font-size: 9px;
  }
  .dossier-stamp .big { font-size: 18px; }

  .hero-title {
    font-size: clamp(32px, 9vw, 48px) !important;
    line-height: 0.98;
    margin-bottom: 22px;
  }
  .hero-title .sub-line {
    font-size: 0.45em;
    margin-top: 0.4em;
  }

  .hero-body { gap: 28px; }
  .hero-left .lede { font-size: 16px; }
  .drop::first-letter {
    font-size: 4em;
    padding: 4px 8px 0 0;
  }

  .hero-ctas {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }
  .hero-ctas .btn {
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
  }

  /* Promesses : 1 col en mobile */
  .hero-promise {
    grid-template-columns: 1fr;
    margin-top: 30px;
    padding-top: 22px;
    gap: 16px;
  }
  .hero-promise .txt { font-size: 14px; }

  /* Chat frame inline (hero) : largeur full, ombre réduite */
  .chat-frame {
    box-shadow: 4px 4px 0 0 var(--paper-3), 5px 5px 0 1px var(--ink-line);
    animation: none;
  }
  .chat-body {
    min-height: 220px;
    padding: 14px 16px;
    font-size: 14px;
  }
  .chat-suggest { padding: 0 12px 10px; }
  .chat-suggest button { font-size: 9px; padding: 4px 8px; }
  .chat-input input { padding: 12px 14px; font-size: 14px; }
  .chat-input button { padding: 12px 14px; font-size: 9.5px; }

  /* Folio sections : padding réduit */
  section.folio { padding: 40px 0; }
  .folio-head {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 24px;
  }
  .folio-head .meta { position: static; }
  .folio-head .meta::before { display: none; }
  .folio-head .body h2.big { font-size: clamp(28px, 7vw, 40px); }
  .folio-head .body p.lede { font-size: 15px; }

  /* Service rows : version mobile très compacte */
  .svc-row {
    grid-template-columns: 40px 1fr 28px;
    gap: 0;
  }
  .svc-row > * { padding: 18px 14px; }
  .svc-row .idx { font-size: 18px; border-right: 1px solid var(--ink-line); }
  .svc-row .ttl { font-size: 17px; line-height: 1.2; }
  .svc-row .desc, .svc-row .price { display: none; }
  .svc-row .arr { font-size: 22px; }

  /* Registre */
  .registre { grid-template-columns: 1fr; }
  .registre > div {
    padding: 22px 18px;
    border-right: 0;
    border-bottom: 1px solid var(--ink-line);
  }
  .registre > div:last-child { border-bottom: 0; }
  .registre .label { font-size: 9.5px; }
  .registre .val { font-size: 36px; }
  .registre .note { font-size: 13px; }

  /* Personas : empilées */
  .personas-grid {
    grid-template-columns: 1fr;
  }
  .persona {
    padding: 28px 22px 24px;
    border-right: 0;
    border-bottom: 1px solid var(--ink-line);
  }
  .persona:last-child { border-bottom: 0; }
  .persona .roman { font-size: 38px; margin-bottom: 12px; }
  .persona h4 { font-size: 19px; }
  .persona p { font-size: 14.5px; }
  .persona .verdict { font-size: 14.5px; padding-top: 12px; }

  /* Voria section */
  section.voria-spotlight {
    padding: 50px 0;
  }
  section.voria-spotlight::after { display: none; } /* enlever le marquee bottom mobile */
  .voria-head { gap: 18px; }
  .voria-head h2 { font-size: clamp(28px, 8vw, 44px); }
  .voria-head p.lede { font-size: 15px; }
  .voria-modules { grid-template-columns: 1fr; }
  .voria-modules > div {
    padding: 14px 16px;
    border-right: 0;
    border-bottom: 1px solid rgba(241,234,215,0.1);
  }
  .voria-modules > div:last-child { border-bottom: 0; }
  .voria-modules > div strong { font-size: 20px; }
  .voria-ctas { flex-direction: column; }
  .voria-ctas .btn { width: 100%; justify-content: center; }

  /* CTA final */
  .cta-final { padding: 50px 0; }
  .cta-final h2 {
    font-size: clamp(30px, 8vw, 48px);
    margin: 22px auto 24px;
  }
  .cta-final .lede { font-size: 15px; }
  .cta-final .btn { width: 100%; max-width: 320px; justify-content: center; }
  .cta-final::before, .cta-final::after { font-size: 9px; }

  /* Footer */
  .colophon-doc {
    padding: 40px 0 24px;
  }
  .colophon-doc .grid {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: 36px;
  }
  .colophon-doc h3 { font-size: 24px; }
  .colophon-doc p { font-size: 14px; }
  .colophon-doc .legal {
    flex-direction: column;
    gap: 10px;
    font-size: 9.5px;
    text-align: center;
  }

  /* Formulaire contact : champs full width */
  .form-doc {
    padding: 22px 18px;
    margin: 0;
  }
  .form-doc .form-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-size: 9.5px;
  }
  .form-doc .row { margin-bottom: 18px; }
  .form-doc .row.split {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .form-doc label { font-size: 9.5px; }
  .form-doc input,
  .form-doc select,
  .form-doc textarea {
    font-size: 16px; /* 16px pour éviter zoom auto iOS */
    padding: 10px 12px;
  }
  .form-doc button[type="submit"] {
    width: 100%;
    justify-content: center;
    padding: 14px 18px;
  }
  .form-doc .small-note { font-size: 12px; }

  /* Aside contact : sections empilées */
  aside > div {
    padding: 20px 18px !important;
  }

  /* Case items */
  .case-item {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 32px 0;
  }
  .case-item .num { font-size: 28px; }
  .case-item .head { gap: 10px; }
  .case-item .head .tag, .case-item .head .year { font-size: 9.5px; padding: 3px 8px; }
  .case-item h3 { font-size: clamp(20px, 5vw, 26px); }
  .case-item .case-desc { font-size: 14.5px; }
  .case-item .stack { gap: 5px; margin-bottom: 18px; }
  .case-item .stack span { font-size: 9.5px; padding: 3px 7px; }
  .case-item .metrics { grid-template-columns: 1fr; gap: 10px; padding-top: 16px; }
  .case-item .m-value { font-size: 18px; }
  .case-item .m-label { font-size: 10px; }

  /* Price grid */
  .price-grid, .price-grid.two { grid-template-columns: 1fr; }
  .price-card { padding: 26px 22px; }
  .price-card .amount { font-size: 30px; }
  .price-card .when { font-size: 10px; }
  .price-card .feat { font-size: 13.5px; }

  /* Grid-doc (services internes) */
  .grid-doc, .grid-doc.two,
  .grid-doc[style*="repeat(2"],
  .grid-doc[style*="repeat(3"],
  .grid-doc[style*="repeat(4"],
  .grid-doc[style*="repeat(5"] {
    grid-template-columns: 1fr !important;
  }
  .grid-doc > div { padding: 22px 18px; border-right: 0; border-bottom: 1px solid var(--ink-line); }
  .grid-doc > div:last-child { border-bottom: 0; }
  .grid-doc h4 { font-size: 17px; }
  .grid-doc p { font-size: 13.5px; }

  /* Timeline procès-verbal méthode */
  .timeline-doc .doc-head {
    font-size: 9px;
    padding: 12px 16px;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
  }
  .tstep {
    padding: 24px 18px;
    border-right: 0;
    border-bottom: 1px dashed var(--ink-line);
  }
  .tstep:last-child { border-bottom: 0; }
  .tstep h5 { font-size: 18px; }
  .tstep p { font-size: 13.5px; }

  /* FAQ */
  .faq-item {
    grid-template-columns: 32px 1fr 24px;
    gap: 10px;
    padding: 22px 0;
  }
  .faq-item .num { font-size: 18px; }
  .faq-item .q { font-size: 15.5px; line-height: 1.3; }
  .faq-item .toggle { font-size: 22px; }
  .faq-answer { font-size: 14px; margin-top: 14px; }

  /* Legal doc */
  .legal-doc { font-size: 14.5px; }
  .legal-doc h2 { font-size: 20px; margin: 32px 0 14px; }

  /* Bannière "EN PRÉPARATION" */
  .banner-soon {
    font-size: 10px;
    padding: 10px 16px;
    letter-spacing: 0.08em;
  }
  .banner-soon a { display: inline-block; margin-top: 4px; margin-left: 0; }

  /* Hero corner deco moins visible */
  .hero .corner-deco {
    top: 90px;
    width: 44px;
    height: 44px;
    opacity: 0.35;
  }

  /* Orbes hero plus discrets */
  .hero::before, .hero::after {
    filter: blur(60px);
    opacity: 0.18;
  }
  .hero::before { width: 220px; height: 220px; }
  .hero::after { width: 180px; height: 180px; }

  /* Folio decorative left line cachée */
  .folio::before { display: none; }

  /* Scroll progress reste mais hauteur 1.5px */
  .scroll-progress { top: 38px; height: 1.5px; }

  /* Watermark hidden */
  .watermark { display: none !important; }
}

/* ---------- VERY SMALL MOBILE (max 380px) ---------- */
@media (max-width: 380px) {
  :root { --margin: 14px; }
  .container { padding: 0 14px; }

  .hero { padding-top: 90px; }
  .hero-title { font-size: clamp(26px, 9vw, 40px) !important; }

  .registry { font-size: 8.5px; padding: 4px 10px; }
  .registry .l span:nth-child(n+2) { display: none; }

  .nav { padding: 0 14px; }
  .nav .brand { font-size: 16px; }

  .dossier-stamp { display: none; } /* trop chargé sur très petit écran */

  .folio-head .body h2.big { font-size: 24px; }

  .svc-row > * { padding: 14px 10px; }
  .svc-row .idx { font-size: 16px; }
  .svc-row .ttl { font-size: 15px; }

  .voria-head h2 { font-size: 26px; }

  .cta-final h2 { font-size: 28px; }

  .chat-bubble {
    width: 48px;
    height: 48px;
    bottom: 14px;
    right: 14px;
  }
  .chat-bubble svg { width: 22px; height: 22px; }
}

/* ---------- LANDSCAPE MOBILE (paysage sur tel) ---------- */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { padding-top: 80px; padding-bottom: 24px; }
  .hero-title { font-size: clamp(28px, 5vh, 42px) !important; }
  .hero-promise { display: none; }
  .chat-panel { height: calc(100vh - 100px); }
}

/* ---------- TOUCH-ONLY (désactive certains hover sur smartphone) ---------- */
@media (hover: none) {
  .svc-row:hover::after { width: 0; }
  .persona:hover { background: transparent; }
  .persona:hover::after { height: 0; }
  .case-item:hover::before { height: 0; }
  .case-item:hover { padding-left: 0; }
  .registre > div:hover::before { width: 0; }
  .grid-doc > div:hover { background: transparent; }
  .grid-doc > div:hover::after { width: 0; }
  .tstep:hover { background: transparent; }
  .price-card:hover { transform: none; box-shadow: none; }
  .chat-bubble:hover { transform: none; }
  .dossier-stamp:hover { transform: rotate(-1.5deg); }
}

/* ---------- Burger menu : ajusté pour la nouvelle hauteur registry+nav mobile ---------- */
@media (max-width: 640px) {
  .nav .menu {
    top: 88px; /* 38px registry + 50px nav */
    padding: 12px 18px 18px;
  }
  .nav .menu a {
    padding: 12px 0;
    font-size: 12px;
  }
}

/* ============================================================
   DARK MODE — toggle via data-theme="dark" sur <html>
   ============================================================ */
:root[data-theme="dark"] {
  --paper:        #15110d;
  --paper-2:      #1d1813;
  --paper-3:      #0d0a08;

  --ink:          #f1ead7;
  --ink-soft:     #c5b89c;
  --ink-mute:     #8a7d6a;
  --ink-faint:    rgba(241, 234, 215, 0.14);
  --ink-line:     rgba(241, 234, 215, 0.18);
  --ink-rule:     rgba(241, 234, 215, 0.45);

  --accent:       #d65a30;   /* terracotta plus vif sur fond sombre */
  --accent-soft:  #e2734a;
  --accent-deep:  #b34522;
  --accent-tint:  rgba(214, 90, 48, 0.12);
}

:root[data-theme="dark"] body::before {
  opacity: 0.4;
  mix-blend-mode: screen;
}

/* Sections .alt en dark : inverser le contraste */
:root[data-theme="dark"] section.folio.alt {
  background:
    radial-gradient(ellipse at 80% 20%, rgba(214, 90, 48, 0.05), transparent 50%),
    var(--paper-2);
}

/* Hero orbes en dark : plus subtils */
:root[data-theme="dark"] .hero::before,
:root[data-theme="dark"] .hero::after {
  opacity: 0.14;
}

/* Watermark en dark : invisible */
:root[data-theme="dark"] .watermark {
  color: rgba(214, 90, 48, 0.04);
}

/* Chat-frame en dark : fond plus sombre */
:root[data-theme="dark"] .chat-frame {
  background: rgba(29, 24, 19, 0.7);
}
:root[data-theme="dark"] .chat-msg.assistant {
  background: rgba(29, 24, 19, 0.85);
  color: var(--ink-soft);
}

/* Voria spotlight : déjà sombre, fonctionne en dark naturellement */

/* CTA final en dark : inversé */
:root[data-theme="dark"] .cta-final {
  background: var(--paper-3);
}

/* Toggle dark mode UI */
.theme-toggle {
  background: none;
  border: 1px solid var(--ink-line);
  color: var(--ink-soft);
  padding: 4px 10px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s, border-color 0.2s;
}
.theme-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.theme-toggle .theme-icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  position: relative;
}
:root[data-theme="dark"] .theme-toggle .theme-icon {
  background: currentColor;
  box-shadow: inset -3px 0 0 var(--paper);
}

/* Mode présentation cassé en dark : forcer paper light */
body.mode-print {
  background: #f7f3e8 !important;
  color: var(--ink) !important;
}
body.mode-print main {
  background: #fefcf6 !important;
}

/* ============================================================
   DARK MODE — corrections contraste (sections sombres by design)
   ============================================================ */

/* CTA final : reste sombre en dark mode (le design demande un contraste fort) */
:root[data-theme="dark"] .cta-final {
  background: #0a0805;
  color: #f1ead7;
}
:root[data-theme="dark"] .cta-final h2,
:root[data-theme="dark"] .cta-final h2 em {
  color: #f1ead7;
}
:root[data-theme="dark"] .cta-final h2 em {
  color: #e2734a;
}
:root[data-theme="dark"] .cta-final .lede {
  color: rgba(241, 234, 215, 0.75) !important;
}
:root[data-theme="dark"] .cta-final .small {
  color: rgba(241, 234, 215, 0.45);
}
:root[data-theme="dark"] .cta-final::before,
:root[data-theme="dark"] .cta-final::after {
  color: rgba(241, 234, 215, 0.15);
}

/* Voria spotlight : reste sombre */
:root[data-theme="dark"] section.voria-spotlight {
  background: linear-gradient(135deg, #0d0a08 0%, #15110d 100%);
  color: #f1ead7;
}
:root[data-theme="dark"] .voria-head h2 {
  color: #f1ead7;
}
:root[data-theme="dark"] .voria-head p.lede {
  color: rgba(241, 234, 215, 0.65) !important;
}
:root[data-theme="dark"] .voria-modules {
  border-color: rgba(241, 234, 215, 0.18);
}
:root[data-theme="dark"] .voria-modules > div {
  color: rgba(241, 234, 215, 0.65);
  border-color: rgba(241, 234, 215, 0.1);
}
:root[data-theme="dark"] .voria-spotlight p {
  color: rgba(241, 234, 215, 0.7) !important;
}
:root[data-theme="dark"] .voria-spotlight strong {
  color: #f1ead7 !important;
}

/* Encadrés contact "Engagement de réponse" — restent sombres */
:root[data-theme="dark"] aside > div[style*="background: var(--ink)"] {
  background: #1d1813 !important;
}

/* Forcer texte clair dans les blocs sombres avec inline styles */
:root[data-theme="dark"] [style*="background: var(--ink)"] *,
:root[data-theme="dark"] [style*="background:var(--ink)"] * {
  color: inherit;
}
:root[data-theme="dark"] [style*="background: var(--ink)"] [style*="color: var(--paper)"],
:root[data-theme="dark"] [style*="background:var(--ink)"] [style*="color: var(--paper)"] {
  color: #f1ead7 !important;
}
:root[data-theme="dark"] [style*="background: var(--ink)"] [style*="color: var(--paper-3)"],
:root[data-theme="dark"] [style*="background:var(--ink)"] [style*="color: var(--paper-3)"] {
  color: rgba(241, 234, 215, 0.65) !important;
}
:root[data-theme="dark"] [style*="background: var(--ink)"] [style*="color: var(--accent-soft)"],
:root[data-theme="dark"] [style*="background:var(--ink)"] [style*="color: var(--accent-soft)"] {
  color: #e2734a !important;
}

/* Chatbot panel : la frame-head doit rester sombre */
:root[data-theme="dark"] .chat-panel .frame-head {
  background: #0d0a08;
  color: #f1ead7;
}
:root[data-theme="dark"] .chat-panel .frame-head .ttl {
  color: #f1ead7;
}
:root[data-theme="dark"] .chat-panel .frame-head .close {
  color: rgba(241, 234, 215, 0.65);
}
:root[data-theme="dark"] .chat-panel .frame-head .close:hover {
  color: #f1ead7;
}

/* Chat messages user : doit rester sombre */
:root[data-theme="dark"] .chat-msg.user {
  background: #0d0a08;
  color: #f1ead7;
}

/* Chat-frame inline (hero) : frame-head doit rester sombre */
:root[data-theme="dark"] .chat-frame .frame-head {
  background: #0d0a08;
}
:root[data-theme="dark"] .chat-frame .frame-head .ttl {
  color: #f1ead7;
}
:root[data-theme="dark"] .chat-frame .frame-head .live {
  color: var(--accent);
}

/* Nav CTA "Audit gratuit" : reste sombre + accent au hover */
:root[data-theme="dark"] .nav .cta {
  background: var(--accent);
  border-color: var(--accent);
  color: #f1ead7;
}
:root[data-theme="dark"] .nav .cta:hover {
  background: var(--accent-soft);
  border-color: var(--accent-soft);
}

/* Btn primaire : doit rester contrasté */
:root[data-theme="dark"] .btn {
  background: #f1ead7;
  border-color: #f1ead7;
  color: #15110d;
}
:root[data-theme="dark"] .btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #f1ead7;
}
:root[data-theme="dark"] .btn.ghost {
  background: transparent;
  color: #f1ead7;
  border-color: #f1ead7;
}
:root[data-theme="dark"] .btn.ghost:hover {
  background: #f1ead7;
  color: #15110d;
}
:root[data-theme="dark"] .btn.accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #f1ead7;
}
:root[data-theme="dark"] .btn.accent:hover {
  background: var(--accent-soft);
  border-color: var(--accent-soft);
}

/* Voria CTAs : restent visibles */
:root[data-theme="dark"] .voria-ctas .btn {
  background: var(--accent);
  border-color: var(--accent);
  color: #f1ead7;
}
:root[data-theme="dark"] .voria-ctas .btn:hover {
  background: #f1ead7;
  color: #15110d;
  border-color: #f1ead7;
}
:root[data-theme="dark"] .voria-ctas .btn.ghost {
  background: transparent;
  color: #f1ead7;
  border-color: #f1ead7;
}
:root[data-theme="dark"] .voria-ctas .btn.ghost:hover {
  background: #f1ead7;
  color: #15110d;
}
:root[data-theme="dark"] .voria-badge {
  color: #e2734a;
  border-color: #e2734a;
}

/* Hero corner deco : reste visible */
:root[data-theme="dark"] .hero .corner-deco .stroke {
  stroke: var(--accent);
}

/* Watermark : presque invisible */
:root[data-theme="dark"] .watermark {
  color: rgba(214, 90, 48, 0.04);
}

/* Toggle mode présentation (registry) : reste lisible */
:root[data-theme="dark"] .registry .toggle-mode {
  color: var(--ink-soft);
}

/* Submit button form-doc : reste sombre */
:root[data-theme="dark"] .form-doc button[type="submit"] {
  background: #f1ead7;
  color: #15110d;
  border-color: #f1ead7;
}
:root[data-theme="dark"] .form-doc button[type="submit"]:hover {
  background: var(--accent);
  color: #f1ead7;
  border-color: var(--accent);
}

/* Lien accent dans contact aside */
:root[data-theme="dark"] aside a[style*="color: var(--ink)"] {
  color: var(--ink) !important; /* var(--ink) en dark = crème = OK */
}

/* Footer : déjà géré via vars mais on s'assure */
:root[data-theme="dark"] .colophon-doc {
  background: var(--paper-3);
}

/* Bannière "EN PRÉPARATION" reste visible */
:root[data-theme="dark"] .banner-soon {
  background: linear-gradient(90deg, var(--accent), var(--accent-soft));
  color: #f1ead7;
}

/* Span backgrounds dans les case items / stack */
:root[data-theme="dark"] .case-item .stack span {
  background: var(--paper-2);
  border-color: var(--ink-line);
  color: var(--ink-soft);
}

/* Hero promesses items, hero CTAs - hérite déjà via vars */

/* Service rows hover en dark : plus visible */
:root[data-theme="dark"] .svc-row:hover {
  background: var(--paper-2);
}

/* Toggle theme button highlight */
:root[data-theme="dark"] .theme-toggle:hover {
  color: var(--accent-soft);
  border-color: var(--accent-soft);
}

/* ============================================
   DARK MODE — Compléments registry + formulaire
   ============================================ */

/* Registry (barre du haut) — fond sombre crème inversé */
:root[data-theme="dark"] .registry {
  background: rgba(15, 13, 11, 0.92);
  border-bottom-color: rgba(241, 234, 215, 0.12);
}

/* Formulaire contact — fond papier inversé */
:root[data-theme="dark"] .form-doc {
  background: rgba(29, 24, 19, 0.55);
  border-color: var(--ink-line);
}
:root[data-theme="dark"] .form-doc::before,
:root[data-theme="dark"] .form-doc::after {
  background: var(--paper);
  border-color: var(--ink-line);
}
:root[data-theme="dark"] .form-doc input,
:root[data-theme="dark"] .form-doc select,
:root[data-theme="dark"] .form-doc textarea {
  background: var(--paper-2);
  color: var(--ink);
  border-color: var(--ink-line);
}
:root[data-theme="dark"] .form-doc input::placeholder,
:root[data-theme="dark"] .form-doc textarea::placeholder {
  color: var(--ink-mute);
  opacity: 0.6;
}
:root[data-theme="dark"] .form-doc select option {
  background: #1d1813;
  color: #f1ead7;
}

/* Fond crème inline rgba(255,252,244,...) — adapté au dark mode
   (méthode étapes, a-propos blockquote, etc.) */
:root[data-theme="dark"] [style*="rgba(255,252,244"],
:root[data-theme="dark"] [style*="rgba(255, 252, 244"] {
  background: rgba(29, 24, 19, 0.55) !important;
}

/* ============================================
   FIX MOBILE — Chevauchements & débordements
   Audit explorer 2026-05-20
   ============================================ */

/* Empêche le débordement horizontal global */
html, body { overflow-x: hidden; }

/* Tous les conteneurs avec inline width/max-width fixes */
@media (max-width: 640px) {
  [style*="max-width: 720px"],
  [style*="max-width:720px"],
  [style*="max-width: 760px"],
  [style*="max-width:760px"] {
    max-width: 100% !important;
  }
  [style*="max-width: 60ch"],
  [style*="max-width:60ch"] {
    max-width: 100% !important;
  }
}

/* Grilles inline non-repeat (1fr 1fr, 1fr 1fr 1fr, 200px 1fr) */
@media (max-width: 640px) {
  [style*="grid-template-columns: 200px 1fr"],
  [style*="grid-template-columns:200px 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* Grilles 3 colonnes — collapse propre à 768px puis 1col à 640px */
@media (max-width: 1024px) {
  .grid-doc { grid-template-columns: repeat(2, 1fr); }
  .price-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .grid-doc { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .price-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .grid-doc { grid-template-columns: 1fr; gap: 14px; }
}

/* svc-row : 5 colonnes à 640-1024px → simplifier */
@media (max-width: 768px) {
  .svc-row {
    grid-template-columns: 40px 1fr 60px;
    gap: 14px;
  }
  .svc-row .desc,
  .svc-row .price {
    display: none;
  }
}

/* folio-head : 2 cols à 640-1024px → empiler */
@media (max-width: 768px) {
  .folio-head {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .folio-head .meta {
    position: static;
  }
}

/* hero-promise : 2 cols à 480px → 1 col */
@media (max-width: 480px) {
  .hero-promise {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* Formulaire contact + aside (inline grid 1.4fr 1fr) */
@media (max-width: 900px) {
  main section.folio > .container > div[style*="grid-template-columns: 1.4fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
}

/* CTA final bande déco (RÉSERVATION...) — masquer sur petit */
@media (max-width: 640px) {
  .cta-final::before { display: none; }
}

/* Letter-spacing trop dense sur petit écran (inline mono 0.18-0.2em) */
@media (max-width: 480px) {
  [style*="letter-spacing: 0.2em"],
  [style*="letter-spacing:0.2em"],
  [style*="letter-spacing: 0.18em"],
  [style*="letter-spacing:0.18em"] {
    letter-spacing: 0.12em !important;
  }
}

/* Coupures longs mots (URL, emails) sur mobile */
@media (max-width: 640px) {
  p, li, td, dd, .small {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* Tables responsives — wrap dans scroll horizontal si denses */
@media (max-width: 640px) {
  table:not(.matrix) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Hero titles — clamp en sécurité supplémentaire */
@media (max-width: 380px) {
  .hero-title,
  h1.hero-title { font-size: clamp(38px, 11vw, 56px) !important; }
  h2.big { font-size: clamp(28px, 8vw, 42px) !important; }
}

/* Inline meta-bars en mode trop dense */
@media (max-width: 480px) {
  aside > div[style*="padding: 28px"],
  aside > div[style*="padding:28px"] {
    padding: 22px 20px !important;
  }
  aside > div[style*="padding: 36px 32px"] {
    padding: 26px 22px !important;
  }
}