/* ============================================================
   LA SAUCE — FEUILLE DE STYLE
   Palette et mise en page fidèles à l'export Claude Design,
   réécrites en classes propres. Les couleurs vivent dans :root.
   ============================================================ */

:root {
  --bg: #17120e;
  --bg-deep: #1b1611;
  --card: #1c1610;
  --card-strong: #211a13;
  --card-active: #241b12;
  --card-warn: #2c1e10;
  --line: #2a221a;
  --line-2: #2e251c;
  --line-3: #3a2f23;
  --line-warn: #4a3922;
  --ink: #ece3d6;
  --ink-2: #c9bda9;
  --ink-3: #b7a992;
  --ink-4: #a1937f;
  --mut: #8d7e69;
  --mut-2: #6b5f4f;
  --amber: #e5a663;
  --amber-h: #efb87e;
  --amber-soft: #d9b78c;
  --on-amber: #241505;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); }
::selection { background: var(--amber); color: var(--on-amber); }
input::placeholder, textarea::placeholder { color: var(--mut-2); }
details > summary::-webkit-details-marker { display: none; }
button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 4px; }

/* ---------- Cadre général : nav fixe + zone défilante ---------- */
.frame {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  overflow: hidden;
}
.main {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
section[data-page] { display: none; }
section[data-page].on { display: flex; flex-direction: column; flex: 1 0 auto; }

/* ---------- Utilitaires typographiques ---------- */
.mono { font-family: var(--font-mono); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
}
.eyebrow--mut { color: var(--mut); }
.h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 4.5vh, 40px);
  line-height: 1.12;
  margin: 0;
}
.h2 {
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.2;
}
.lead { margin: 0; color: var(--ink-4); font-size: clamp(13px, 1.8vh, 15px); }
.note { margin: 0; color: var(--mut); font-size: 12px; }
.link-inline {
  color: var(--amber);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.link-inline:hover { color: var(--amber-h); }

/* ---------- Boutons ---------- */
.btn-primary {
  display: inline-block;
  background: var(--amber);
  color: var(--on-amber);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary:hover { background: var(--amber-h); }
.btn-primary--big { padding: 12px 24px; font-size: 14px; }
.btn-outline {
  display: inline-block;
  background: none;
  color: var(--ink);
  border: 1px solid var(--line-3);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.btn-outline:hover { border-color: var(--amber); }
.btn-pill {
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 7px 13px;
  color: var(--ink-2);
  font-size: 13px;
  white-space: nowrap;
}
.btn-pill:hover { border-color: var(--amber); color: var(--ink); }
.btn-quiet-mono {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.btn-quiet-mono:hover { color: var(--amber); }

/* ---------- Nav du haut ---------- */
.topnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 24px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.wordmark {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 22px;
  display: flex;
  align-items: baseline;
  gap: 2px;
  flex: none;
}
.wordmark sup { font-size: 10px; color: var(--mut); position: relative; top: -7px; }
.navlinks {
  display: flex;
  align-items: center;
  gap: 20px;
  overflow-x: auto;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.navlinks button { color: var(--ink-3); font: inherit; letter-spacing: inherit; text-transform: inherit; }
.navlinks button:hover { color: var(--amber); }
.navlinks button.on { color: var(--amber); }
.navlinks button.dim { color: var(--mut-2); }
.navlinks .invit { color: var(--mut-2); }

/* ---------- Menu mobile ---------- */
.btn-menu {
  display: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 7px 14px;
}
.btn-menu:hover, .btn-menu.open { color: var(--amber); border-color: var(--amber); }
.mobile-menu {
  display: none;
  flex-direction: column;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--line);
  flex: none;
}
.mobile-menu button {
  text-align: left;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.mobile-menu button:last-child { border-bottom: none; }
.mobile-menu button.on { color: var(--amber); }
.mobile-menu button.dim { color: var(--mut-2); }

/* ---------- Barre d'accès rapide ---------- */
.quickbar {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
  background: var(--bg-deep);
  flex: none;
  overflow-x: auto;
}
.quickbar { scrollbar-width: none; }
.quickbar::-webkit-scrollbar { display: none; }
.quickbar .grp { display: flex; align-items: center; gap: 10px; padding: 8px 24px; flex: none; }
.quickbar .sep { width: 1px; background: var(--line); flex: none; }
.quickbar .lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mut-2);
  white-space: nowrap;
}
.qa-pill {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--line-3);
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
  background: var(--card-strong);
}
.qa-pill:hover { border-color: var(--amber); }
.qa-pill .t { font-weight: 600; font-size: 13px; }
.qa-pill .m { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.15em; color: var(--amber); }
.qa-tool {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink-2);
  white-space: nowrap;
  font-size: 13px;
}
.qa-tool:hover { border-color: var(--amber); color: var(--ink); }
.qa-tool .arrow { color: var(--mut); font-size: 11px; }
.qa-all {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--amber);
  white-space: nowrap;
  padding: 6px 4px;
}
.qa-all:hover { color: var(--ink); }

/* ---------- Connexion ---------- */
.page-login .wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 24px;
}
.login-form {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.login-form .head { display: flex; flex-direction: column; gap: 10px; }
.login-form .eyebrow { font-size: 11px; }
.login-form h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 6vw, 46px);
  line-height: 1.08;
  margin: 0;
}
.login-form .intro { margin: 0; color: var(--ink-4); font-size: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field .lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mut);
}
.field input {
  background: none;
  border: none;
  border-bottom: 1px solid var(--line-3);
  padding: 8px 0;
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  outline: none;
}
.field input:focus { border-bottom-color: var(--amber); }
.login-form .help { margin: 0; color: var(--mut); font-size: 13px; }
.login-error, .form-error { margin: 6px 0 0; color: var(--amber); font-size: 13px; }
.footline {
  padding: 14px 24px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mut-2);
}

/* ---------- Gabarit de page centré ---------- */
.page-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  width: 100%;
  margin: 0 auto;
  padding: clamp(12px, 2.5vh, 32px) 20px;
  gap: clamp(12px, 2vh, 20px);
  min-height: 0;
}
.page-head { display: flex; flex-direction: column; gap: 6px; flex: none; }

/* ---------- Accueil ---------- */
.page-accueil .page-center { max-width: 960px; gap: clamp(10px, 2vh, 20px); padding: clamp(10px, 2.5vh, 32px) 20px; }
.page-accueil .page-head { gap: 8px; }
.page-accueil .h1 { max-width: 640px; font-size: clamp(24px, 4.5vh, 40px); }
.page-accueil .lead { max-width: 560px; }
.detail-box {
  border: 1px solid var(--line-2);
  background: var(--card);
  border-radius: 10px;
  padding: clamp(14px, 2.2vh, 20px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: none;
}
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: clamp(12px, 2vh, 20px);
}
.detail-grid .cell { display: flex; flex-direction: column; gap: 4px; }
.detail-grid .k { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--amber); }
.detail-grid .t { font-family: var(--font-heading); font-size: clamp(16px, 2.4vh, 19px); }
.detail-grid p { margin: 0; color: var(--ink-4); font-size: 12px; }
.detail-box .foot { margin: 0; color: var(--mut); font-size: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.duo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 12px;
  flex: none;
}
.big-card {
  border: 1px solid var(--line-2);
  background: var(--card);
  border-radius: 10px;
  padding: clamp(14px, 2.2vh, 22px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.big-card .t { font-family: var(--font-heading); font-size: clamp(20px, 3vh, 26px); line-height: 1.15; }
.big-card p { margin: 0; color: var(--ink-4); font-size: 13px; flex: 1; }
.big-card .row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.annonce {
  border: 1px solid var(--line-3);
  background: var(--card-strong);
  border-radius: 10px;
  padding: clamp(12px, 2vh, 18px) clamp(14px, 2vh, 20px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: none;
}
.annonce .k { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--amber); }
.annonce p { margin: 0; color: var(--ink-2); font-size: clamp(13px, 1.8vh, 14px); }
.accueil-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; flex: none; }
.accueil-foot .pills { display: flex; flex-wrap: wrap; gap: 8px; }
.soussol-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mut-2);
  white-space: nowrap;
  padding: 7px 4px;
}
.soussol-btn:hover { color: var(--amber); }

/* ---------- Le sous-sol ---------- */
.page-soussol .wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px 24px;
  text-align: center;
  gap: 12px;
}
.page-soussol .eyebrow { font-size: 11px; color: var(--mut); }
.page-soussol .t { font-family: var(--font-display); font-weight: 500; font-size: clamp(30px, 5vw, 44px); line-height: 1.08; }
.page-soussol p { margin: 0; color: var(--ink-4); font-size: 14px; max-width: 420px; }

/* ---------- Regarder ---------- */
.page-regarder .page-center { max-width: 860px; gap: clamp(12px, 2vh, 22px); }
.device-box {
  border: 1px solid var(--line-2);
  background: var(--card);
  border-radius: 10px;
  overflow: hidden;
  flex: none;
}
.device-tabs { display: flex; border-bottom: 1px solid var(--line-2); overflow-x: auto; }
.device-tabs button {
  flex: 1;
  border-bottom: 2px solid transparent;
  padding: 11px 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mut);
  white-space: nowrap;
}
.device-tabs button:hover { color: var(--amber); }
.device-tabs button.on { background: var(--card-active); border-bottom-color: var(--amber); color: var(--amber); }
.device-steps { padding: clamp(16px, 2.5vh, 26px); display: flex; flex-direction: column; gap: 12px; }
.device-steps .step { display: flex; gap: 10px; align-items: baseline; }
.device-steps .n { font-family: var(--font-mono); font-size: 11px; color: var(--amber); flex: none; }
.device-steps .s { color: var(--ink-2); font-size: 14px; }
.regarder-actions { display: flex; align-items: stretch; gap: 16px; flex-wrap: wrap; flex: none; }
.act-grp { display: flex; flex-direction: column; gap: 7px; }
.act-grp .lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mut-2);
  white-space: nowrap;
}
.act-grp .act-row { display: flex; gap: 8px; flex-wrap: wrap; }
.act-sep { width: 1px; background: var(--line-2); flex: none; }
.regarder-ask { flex: none; }
.regarder-ask .ask { font-size: 13px; color: var(--ink-4); }
.regarder-ask .ask:hover { color: var(--amber); }
.regarder-ask .ask .em { color: var(--amber); }

/* ---------- Demander ---------- */
.page-demander .page-center { max-width: 1120px; gap: clamp(10px, 1.8vh, 18px); padding: clamp(12px, 2.5vh, 28px) 20px; }
.demander-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  flex: none;
}
.demander-head .txt { display: flex; flex-direction: column; gap: 4px; max-width: 620px; }
.demander-head .h1 { font-size: clamp(24px, 4.2vh, 38px); }
.demander-head .lead { font-size: clamp(13px, 1.8vh, 14px); }
.demander-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "steps shot"
    "badges shot";
  gap: clamp(12px, 2vh, 20px);
  align-items: center;
  flex: none;
}
.steps-col { grid-area: steps; display: flex; flex-direction: column; gap: clamp(6px, 1.2vh, 10px); }
.demander-grid .shot { grid-area: shot; }
.demander-grid .badge-row { grid-area: badges; align-self: start; }
.step-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid var(--line-2);
  background: var(--card);
  border-radius: 10px;
  padding: clamp(10px, 1.6vh, 14px) clamp(12px, 1.8vh, 16px);
}
.step-card .n {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--amber);
  flex: none;
  min-width: 24px;
  padding-top: 4px;
}
.step-card .txt { display: flex; flex-direction: column; gap: 1px; }
.step-card .t { font-family: var(--font-heading); font-size: clamp(15px, 2.2vh, 18px); }
.step-card .d { color: var(--ink-4); font-size: 12px; }
.badge-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.badge {
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 11px;
  color: var(--ink-2);
  white-space: nowrap;
}
.shot {
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  overflow: hidden;
  background: var(--card);
}
.shot img { display: block; width: 100%; height: auto; }
.shot .marker {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(23, 18, 14, 0.88);
  border: 1px solid var(--amber);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  white-space: nowrap;
}

/* ---------- Outils ---------- */
.page-outils .page-center { max-width: 1120px; }
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 12px;
  flex: none;
}
.tool-card {
  border: 1px solid var(--line-2);
  background: var(--card);
  border-radius: 10px;
  padding: clamp(14px, 2.2vh, 20px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tool-card .head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tool-card .t { font-family: var(--font-heading); font-size: clamp(19px, 2.8vh, 24px); }
.tool-card .badge-mono { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--mut); }
.tool-card .badge-mono.amber { color: var(--amber); }
.tool-card .list { display: flex; flex-direction: column; }
.tool-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
a.tool-line:hover { color: var(--amber); }
.tool-line .col { display: flex; flex-direction: column; gap: 2px; }
.tool-line .nm { font-size: 14px; font-weight: 500; }
.tool-line .ds { color: var(--mut); font-size: 12px; }
.tool-line .arrow { color: var(--mut); font-size: 12px; flex: none; }
.tool-line .eta { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); flex: none; }
.tool-card .foot { margin: 0; color: var(--mut-2); font-size: 11px; }
.vote-list { display: flex; flex-direction: column; gap: 7px; }
.vote-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 8px 12px;
  text-align: left;
  color: var(--ink);
}
.vote-btn:hover { border-color: var(--amber); }
.vote-btn.on { background: var(--card-active); border-color: var(--amber); }
.vote-btn .t { font-size: 13px; }
.vote-btn .c { display: flex; align-items: center; gap: 5px; flex: none; color: var(--mut); }
.vote-btn.on .c { color: var(--amber); }
.vote-btn .c .tri { font-size: 10px; }
.vote-btn .c .num { font-family: var(--font-mono); font-size: 12px; }
.propose {
  border: 1px solid var(--line-3);
  background: var(--card-strong);
  border-radius: 10px;
  padding: clamp(12px, 2vh, 18px) clamp(14px, 2vh, 20px);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  flex: none;
}
.propose .txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 240px; }
.propose .t { font-family: var(--font-heading); font-size: clamp(16px, 2.4vh, 19px); }
.propose p { margin: 0; color: var(--mut); font-size: 12px; }
.propose form { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 260px; }
.propose input {
  flex: 1;
  min-width: 170px;
  background: var(--bg);
  border: 1px solid var(--line-3);
  border-radius: 999px;
  padding: 9px 16px;
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  outline: none;
}
.propose input:focus { border-color: var(--amber); }
.propose .thanks { display: flex; align-items: center; gap: 8px; color: var(--amber); font-size: 13px; }

/* ---------- Serveur ---------- */
.page-serveur .page-center { max-width: 1060px; }
.serveur-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(14px, 2.5vh, 24px);
  align-items: center;
  flex: none;
}
.photo-slot {
  width: 100%;
  height: clamp(180px, 32vh, 300px);
  border-radius: 10px;
  border: 1px dashed var(--line-3);
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mut-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  overflow: hidden;
}
.photo-slot img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.serveur-hero .txt { display: flex; flex-direction: column; gap: 10px; }
.goal-box {
  border: 1px solid var(--line-2);
  background: var(--card);
  border-radius: 10px;
  padding: clamp(14px, 2.2vh, 22px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: none;
}
.goal-box .head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.goal-box .col { display: flex; flex-direction: column; gap: 2px; }
.goal-box .k { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--amber); }
.goal-box .t { font-family: var(--font-heading); font-size: clamp(19px, 2.8vh, 24px); }
.goal-box .pct { font-family: var(--font-mono); font-size: 13px; color: var(--amber); white-space: nowrap; }
.goal-bar { height: 7px; background: var(--line-2); border-radius: 99px; overflow: hidden; }
.goal-bar i { display: block; height: 100%; background: var(--amber); border-radius: 99px; }
.chips { display: flex; gap: 10px; flex-wrap: wrap; flex: none; }
.chip {
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 12px;
  color: var(--ink-2);
  white-space: nowrap;
}
.specs { border: 1px solid var(--line-2); border-radius: 10px; flex: none; }
.specs summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 12px 18px;
  cursor: pointer;
  list-style: none;
}
.specs summary .t { font-family: var(--font-heading); font-size: clamp(16px, 2.4vh, 19px); }
.specs summary .badge-mono { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--mut); flex: none; }
.specs .rows { display: flex; flex-direction: column; padding: 0 18px 14px; }
.spec-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.spec-row .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--mut); flex: none; min-width: 120px; }
.spec-row .v { font-size: 14px; font-weight: 500; flex: 1; }
.spec-row .n { color: var(--mut); font-size: 12px; text-align: right; max-width: 300px; }

/* ---------- FAQ ---------- */
.page-faq .wrap {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 48px 24px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.page-faq .page-head { gap: 14px; }
.page-faq .eyebrow { font-size: 11px; }
.page-faq .h1 { font-size: clamp(36px, 5vw, 52px); line-height: 1.08; }
.page-faq .lead { font-size: 16px; }
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
}
.faq-item summary .q { font-family: var(--font-heading); font-size: 20px; }
.faq-item summary .plus { color: var(--mut); flex: none; }
.faq-item p { margin: 0; padding: 0 0 18px; color: var(--ink-4); font-size: 14px; max-width: 640px; }
.faq-cta {
  border: 1px solid var(--line-2);
  background: var(--card);
  border-radius: 10px;
  padding: clamp(24px, 4vw, 36px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.faq-cta .t { font-family: var(--font-heading); font-size: 24px; }

/* ---------- Contact ---------- */
.page-contact .page-center { max-width: 640px; }
.contact-form { display: flex; flex-direction: column; gap: 14px; flex: none; }
.contact-form textarea {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 14px 16px;
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  outline: none;
  resize: vertical;
  width: 100%;
}
.contact-form textarea:focus { border-color: var(--amber); }
.cats { display: flex; flex-direction: column; gap: 8px; }
.cats .lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mut-2);
}
.cats .lbl .opt { text-transform: none; letter-spacing: normal; }
.cats .row { display: flex; gap: 8px; flex-wrap: wrap; }
.cat-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  color: var(--ink-2);
}
.cat-btn:hover { border-color: var(--amber); }
.cat-btn.warn { border-color: var(--line-warn); color: var(--amber-soft); }
.cat-btn.on { background: var(--card-active); border-color: var(--amber); color: var(--amber); }
.cat-btn.warn.on { background: var(--card-warn); }
.contact-idfields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 12px;
}
.contact-idfields input {
  background: none;
  border: none;
  border-bottom: 1px solid var(--line-3);
  padding: 8px 0;
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  outline: none;
}
.contact-idfields input:focus { border-bottom-color: var(--amber); }
.contact-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.contact-actions .left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.file-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px dashed var(--line-3);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  color: var(--ink-4);
  font-size: 13px;
}
.file-btn:hover { border-color: var(--amber); color: var(--ink); }
.file-btn input { display: none; }
.file-clear { color: var(--mut-2); font-size: 13px; }
.file-clear:hover { color: var(--amber); }
.sent-box {
  border: 1px solid var(--line-2);
  background: var(--card);
  border-radius: 10px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: none;
}
.sent-box .t { font-family: var(--font-heading); font-size: 24px; color: var(--amber); }
.sent-box p { margin: 0; color: var(--ink-4); font-size: 14px; }
.sent-box .again { color: var(--mut); font-size: 13px; text-align: left; margin-top: 6px; }
.sent-box .again:hover { color: var(--amber); }
.contact-direct { margin: 0; color: var(--mut-2); font-size: 12px; font-family: var(--font-mono); flex: none; }
.contact-direct a { color: var(--mut); text-decoration: none; }
.contact-direct a:hover { color: var(--amber); }
.back-login { color: var(--mut); font-size: 13px; text-align: left; flex: none; }
.back-login:hover { color: var(--amber); }

/* ============================================================
   MOBILE (≤ 720px) — mise en page adaptée, pas juste rétrécie
   ============================================================ */
@media (max-width: 720px) {
  /* Nav : le menu remplace la rangée de liens */
  .topnav { padding: 11px 16px; }
  #nav-logged { display: none !important; }
  .btn-menu.is-logged { display: inline-block; }
  .mobile-menu.open { display: flex; }

  /* Barre rapide : une seule rangée à glisser, plus compacte */
  .quickbar .grp { padding: 8px 16px; gap: 8px; }

  /* Marges latérales réduites partout */
  .page-center { padding-left: 16px; padding-right: 16px; }
  .page-faq .wrap { padding: 32px 16px 40px; gap: 28px; }
  .page-login .wrap { padding: 32px 16px; }
  .footline { padding: 12px 16px; }

  /* Boutons d'action principaux pleine largeur (pouce) */
  .login-form .btn-primary--big,
  .contact-form .btn-primary--big { width: 100%; text-align: center; }

  /* Demander : étapes -> image -> badges, une colonne */
  .demander-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "steps"
      "shot"
      "badges";
  }

  /* Regarder : les deux groupes d'action s'empilent, sans séparateur */
  .regarder-actions { flex-direction: column; align-items: stretch; gap: 14px; }
  .act-sep { display: none; }
  .act-grp .act-row .btn-outline { flex: 1; text-align: center; }
  .regarder-actions .btn-primary { text-align: center; }

  /* Serveur : le texte avant la photo */
  .serveur-hero .txt { order: -1; }
  .photo-slot { height: clamp(150px, 24vh, 220px); }
  .spec-row .n { text-align: left; max-width: 100%; flex-basis: 100%; }

  /* FAQ : questions un cran plus petites */
  .faq-item summary .q { font-size: 17px; }
  .faq-item summary { padding: 15px 0; }
  .faq-cta { padding: 20px; }
  .faq-cta .t { font-size: 20px; }
  .faq-cta .btn-primary--big { width: 100%; text-align: center; }

  /* Outils : champ idée confortable */
  .propose input { min-width: 0; }
  .propose form .btn-primary { flex: none; }

  /* Contact : bouton fichier et envoyer empilés proprement */
  .contact-actions { flex-direction: column; align-items: stretch; }
  .contact-actions .left { justify-content: flex-start; }

  /* Sous-sol / titres héros : un peu plus contenus */
  .h1 { font-size: clamp(23px, 6vw, 32px); }
  .login-form h1 { font-size: clamp(30px, 8vw, 38px); }
  .page-faq .h1 { font-size: clamp(30px, 8vw, 40px); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}