/* =============================================================================
   LENUTA-F-397 — Page d'accueil publique, direction C « Manufacture nocturne ».

   Chargée UNIQUEMENT par templates/accueil.html. Toutes les règles sont portées
   par body.acc ou par des classes .acc-* : aucune autre page n'est touchée.
   Polices OFL auto-hébergées (static/fonts, licences jointes), aucun CDN.

   Contrastes WCAG 2.1 (fond nuit #0f0e0c / surface #191714) :
     ivoire  #f4efe6            → 17.4:1 / 16.0:1
     gris    #b8afa0            →  9.1:1 /  8.3:1
     laiton  #c2a06a (surtitres)→  8.0:1 /  7.3:1
     nuit sur bouton ivoire     → 17.4:1
   Lisibilité en plein jour : corps 16–18 px, aucun texte posé sur une image.
   Cibles tactiles ≥ 44 px (boutons et liens d'action).
   ========================================================================== */

@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); }

body.acc {
  --night: #0f0e0c;
  --surface: #191714;
  --ivory: #f4efe6;
  --muted: #b8afa0;
  --brass: #c2a06a;
  --line: #2e2a24;
  --serif: "Cormorant Garamond", "Garamond", "Georgia", serif;
  --sans: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --gutter: 80px;
  --spot: radial-gradient(closest-side, rgba(194, 160, 106, 0.22), rgba(194, 160, 106, 0));

  margin: 0;
  background: var(--night);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.acc *, .acc *::before, .acc *::after { box-sizing: border-box; }
/* Remise à zéro sans poids de spécificité (:where) : les classes .acc-* gagnent toujours. */
.acc :where(h1, h2, h3, p, ul, ol, figure) { margin: 0; }
.acc :where(ul, ol) { padding: 0; list-style: none; }
.acc :where(a) { color: inherit; }
.acc :focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

.acc-skip { position: absolute; left: -9999px; }
.acc-skip:focus { left: 16px; top: 16px; z-index: 10; background: var(--ivory); color: var(--night); padding: 10px 14px; }
.acc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Boutons, liens ─────────────────────────────────────────────────────── */
.acc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 26px;
  font: 600 15px/1 var(--sans); letter-spacing: 0.01em;
  text-decoration: none; border-radius: 2px; white-space: nowrap;
}
.acc-btn--primary { background: var(--ivory); color: var(--night); }
.acc-btn--primary:hover { background: #fff; }
.acc-btn--ghost { min-height: 44px; padding: 0 20px; font-weight: 500; color: var(--ivory); border: 1px solid rgba(244, 239, 230, 0.7); }
.acc-btn--ghost:hover { border-color: var(--ivory); }
.acc-link {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 500 15px/1.3 var(--sans); text-decoration: underline; text-underline-offset: 4px;
}
.acc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.acc-actions--center { justify-content: center; }

/* ── Typographie commune ────────────────────────────────────────────────── */
.acc-kicker { font: 500 12px/1.4 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass); }
.acc-kicker--center { text-align: center; }
.acc-h2 { font: 300 48px/1.05 var(--serif); color: var(--ivory); }
.acc-h2--center { text-align: center; }

/* ── En-tête ────────────────────────────────────────────────────────────── */
.acc-header {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 16px var(--gutter);
  background: rgba(15, 14, 12, 0.94);
  border-bottom: 1px solid var(--line);
}
.acc-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; min-height: 44px; }
.acc-brand .lx-mark { width: 34px; height: 34px; color: var(--ivory); flex: none; --lx-brass: var(--brass); }
.acc-brand__name { font: 500 22px/1 var(--serif); letter-spacing: 0.3em; text-transform: uppercase; }
.acc-nav { display: flex; gap: 36px; }
.acc-nav a { font-size: 15px; color: var(--muted); text-decoration: none; padding: 12px 0; }
.acc-nav a:hover { color: var(--ivory); }
.acc-header__actions { display: flex; align-items: center; gap: 12px; }

/* ── Premier écran ──────────────────────────────────────────────────────── */
.acc-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 72px; align-items: center;
  padding: 80px var(--gutter) 104px;
}
.acc-hero__text { display: flex; flex-direction: column; gap: 28px; max-width: 640px; }
.acc-hero__title { font: 300 68px/1 var(--serif); letter-spacing: -0.01em; }
.acc-hero__lead { font-size: 18px; line-height: 1.65; color: var(--muted); }
.acc-hero__visual {
  position: relative; aspect-ratio: 1 / 1; max-width: 560px; justify-self: end; width: 100%;
  display: grid; place-items: center;
  background: var(--spot), var(--surface);
  border: 1px solid var(--line);
}
.acc-hero__visual { overflow: hidden; }
.acc-hero__visual picture { position: absolute; inset: 0; }
.acc-hero__visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; }

/* ── Bande « Ce que fait Lenuta » ───────────────────────────────────────── */
.acc-band {
  padding: 64px var(--gutter);
  background: var(--surface);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 40px;
}
.acc-band__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.acc-path { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; font: italic 400 28px/1.2 var(--serif); }
.acc-path li + li::before { content: "→"; font-style: normal; color: var(--brass); margin: 0 20px; font-family: var(--sans); font-size: 18px; vertical-align: middle; }
.acc-band__who { font-size: 15px; color: var(--muted); }
.acc-caps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
.acc-caps li { border-left: 1px solid rgba(194, 160, 106, 0.6); padding-left: 20px; }
.acc-caps h3 { font: 500 17px/1.35 var(--sans); margin-bottom: 8px; }
.acc-caps p { font-size: 15px; line-height: 1.6; color: var(--muted); }

/* ── Fonctionnement ─────────────────────────────────────────────────────── */
.acc-steps { padding: 112px var(--gutter); }
.acc-steps .acc-h2 { margin: 20px 0 56px; }
.acc-steps__list { max-width: 880px; margin: 0 auto; }
.acc-steps__list li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 48px; padding: 36px 0; border-top: 1px solid var(--line); }
.acc-num { font: italic 400 48px/1 var(--serif); color: var(--brass); }
.acc-steps__list h3 { font: 400 32px/1.15 var(--serif); margin-bottom: 10px; }
.acc-steps__list p { color: var(--muted); }

/* ── Démonstration ──────────────────────────────────────────────────────── */
.acc-demo {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 64px; align-items: center;
  padding: 112px var(--gutter);
  background: var(--surface);
}
.acc-demo__intro { display: flex; flex-direction: column; gap: 20px; }
.acc-demo__intro p:last-child { color: var(--muted); }
.acc-phone { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 40px 64px; background: var(--spot); }
.acc-phone__frame { width: 280px; height: 560px; padding: 10px; border-radius: 40px; background: #000; border: 1px solid var(--line); }
.acc-phone__screen {
  height: 100%; border-radius: 30px; background: var(--ivory); color: #16140f;
  padding: 48px 22px 22px; display: flex; flex-direction: column; gap: 10px;
}
.acc-phone__label { font: 500 11px/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: #7a5c30; }
.acc-phone__title { font: 400 26px/1.1 var(--serif); }
.acc-phone__rows { margin-top: 12px; border-top: 1px solid #d9d0c1; }
.acc-phone__rows li { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #d9d0c1; font-size: 15px; }
.acc-phone__btn { margin-top: auto; text-align: center; background: #16140f; color: var(--ivory); padding: 14px; font: 600 14px/1 var(--sans); border-radius: 2px; }
.acc-phone figcaption { font-size: 13px; color: var(--muted); }
.acc-day { display: flex; flex-direction: column; gap: 28px; }
.acc-day li { border-left: 1px solid rgba(194, 160, 106, 0.6); padding-left: 20px; }
.acc-day h3 { font: italic 400 24px/1.2 var(--serif); margin-bottom: 4px; }
.acc-day p { font-size: 16px; color: var(--muted); }

/* ── Réassurance ────────────────────────────────────────────────────────── */
.acc-trust { padding: 104px var(--gutter); text-align: center; }
.acc-trust ul { margin-top: 24px; display: flex; flex-direction: column; gap: 14px; }
.acc-trust li { font: 400 30px/1.3 var(--serif); }

/* ── Invitation finale ──────────────────────────────────────────────────── */
.acc-final {
  padding: 128px var(--gutter); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
  border-top: 1px solid var(--line);
  background: radial-gradient(60% 70% at 50% 100%, rgba(194, 160, 106, 0.14), rgba(194, 160, 106, 0)), var(--night);
}
.acc-final__title { font: 300 64px/1.05 var(--serif); }
.acc-final > p { max-width: 620px; color: var(--muted); font-size: 18px; }

/* ── Pied de page ───────────────────────────────────────────────────────── */
.acc-footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px;
  padding: 32px var(--gutter); border-top: 1px solid var(--line);
  font-size: 14px; color: var(--muted);
}
.acc-brand--small .lx-mark { width: 28px; height: 28px; }
.acc-brand--small .acc-brand__name { font-size: 18px; color: var(--ivory); }
.acc-footer__links { display: flex; gap: 28px; }
.acc-footer__links a { text-decoration: none; padding: 12px 0; }
.acc-footer__links a:hover { color: var(--ivory); }

/* ── Tablette ───────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  body.acc { --gutter: 40px; }
  .acc-nav { display: none; }
  .acc-hero { gap: 48px; }
  .acc-hero__title { font-size: 56px; }
  .acc-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acc-demo { grid-template-columns: minmax(0, 1fr) auto; }
  .acc-day { grid-column: 1 / -1; flex-direction: row; }
  .acc-day li { flex: 1; }
}

/* ── Téléphone : page recomposée, texte avant visuel ────────────────────── */
@media (max-width: 720px) {
  body.acc { --gutter: 20px; font-size: 16px; }
  .acc-header { padding: 8px var(--gutter); }
  .acc-brand .lx-mark { width: 28px; height: 28px; }
  .acc-brand__name { font-size: 18px; }
  .acc-header__cta { display: none; }   /* « Se connecter » reste visible ; l'action principale est dans la page */
  .acc-hero { grid-template-columns: 1fr; gap: 20px; padding: 32px var(--gutter) 48px; }
  /* LENUTA-F-422 : sur téléphone, le paragraphe d'introduction passe sous la photo. */
  .acc-hero__text { display: contents; }
  .acc-hero__text > * { order: 1; }
  .acc-hero__visual { order: 2; margin-top: 12px; }
  .acc-hero__lead { order: 3; margin-top: 4px; }
  .acc-hero__title { font-size: 38px; line-height: 1.02; }
  .acc-hero__lead { font-size: 17px; }
  .acc-hero .acc-actions { flex-direction: column; align-items: stretch; gap: 4px; }
  .acc-hero .acc-actions .acc-link { justify-content: center; }
  .acc-hero__visual { justify-self: stretch; max-width: none; aspect-ratio: 4 / 3; }
  .acc-band { padding: 40px var(--gutter); gap: 24px; }
  .acc-path { font-size: 22px; }
  .acc-path li + li::before { margin: 0 10px; font-size: 15px; }
  .acc-caps { grid-template-columns: 1fr; gap: 20px; }
  .acc-steps { padding: 56px var(--gutter); }
  .acc-h2 { font-size: 34px; }
  .acc-steps .acc-h2 { margin: 14px 0 28px; text-align: left; }
  .acc-steps .acc-kicker--center { text-align: left; }
  .acc-steps__list li { grid-template-columns: 48px minmax(0, 1fr); gap: 18px; padding: 24px 0; }
  .acc-num { font-size: 30px; }
  .acc-steps__list h3 { font-size: 24px; }
  .acc-demo { grid-template-columns: 1fr; gap: 28px; padding: 56px var(--gutter); }
  .acc-phone { padding: 24px 0; }
  .acc-phone__frame { width: 240px; height: 480px; }
  .acc-day { flex-direction: column; gap: 20px; }
  .acc-trust { padding: 56px var(--gutter); }
  .acc-trust li { font-size: 24px; }
  .acc-final { padding: 72px var(--gutter); gap: 20px; }
  .acc-final__title { font-size: 40px; }
  .acc-final .acc-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .acc-final .acc-link { justify-content: center; }
  .acc-footer { flex-direction: column; align-items: flex-start; }
}