/*
 * Dopfin — thème commun des pages PHP (/maat, /actualites, /roast, /e-facture, /facturation, /newsletter…)
 * Chargé en dernier dans le <head> de chaque page : il redéfinit les variables de couleurs et de polices
 * que ces pages utilisent déjà, pour qu'elles suivent la page d'accueil (thème clair « heure dorée »).
 * Les couleurs de référence sont celles de src/app/globals.css.
 */

@font-face {
  font-family: "Instrument Serif";
  src: url("/assets/fonts/instrument-serif-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/assets/fonts/instrument-serif-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/geist-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/geist-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Anciennes polices des pages, redirigées vers celles du site (aucun appel à Google Fonts). */
@font-face {
  font-family: "Outfit";
  src: url("/assets/fonts/geist-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("/assets/fonts/geist-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/assets/fonts/geist-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/instrument-serif-latin-400-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/instrument-serif-latin-400-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Jetons Dopfin */
  --df-canvas: #f7f3ea;
  --df-canvas-2: #fbf8f1;
  --df-card: #ffffff;
  --df-ink: #1d1b29;
  --df-ink-dim: #4a4757;
  --df-muted: #6b6775;
  --df-line: rgb(29 27 41 / 0.1);
  --df-line-strong: rgb(29 27 41 / 0.2);
  --df-violet: #5a48e0;
  --df-cyan: #0b84a5;
  --df-mint: #0a8f6a;
  --df-gold: #a8781f;
  --df-spectrum: linear-gradient(100deg, #5a48e0 0%, #0b84a5 55%, #0a8f6a 100%);
  --df-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --df-serif: "Instrument Serif", ui-serif, Georgia, serif;
  --df-mono: "Geist Mono", ui-monospace, monospace;

  /* Variables des pages Outfit/Sora (maat, roast, e-facture, actualites, cgv) */
  --bg: var(--df-canvas);
  --bg-primary: var(--df-canvas);
  --bg-card: var(--df-card);
  --tp: var(--df-ink);
  --ts: var(--df-ink-dim);
  --tm: var(--df-muted);
  --ap: var(--df-violet);
  --as: var(--df-cyan);
  --ag: var(--df-spectrum);
  --ag-maat: linear-gradient(120deg, #a8781f 0%, #5a48e0 55%, #0b84a5 100%);
  --gold: #b8892c;
  --gold-dark: #8a6216;
  --bl: var(--df-line);
  --b: rgb(90 72 224 / 0.14);
  --fp: var(--df-sans);
  /* Les titres h1-h3 passent en serif plus bas ; le reste (badges, boutons, chiffres) reste en sans. */
  --fh: var(--df-sans);

  /* Variables des pages DM Sans (facturation, newsletter) */
  --card: var(--df-card);
  --border: var(--df-line-strong);
  --text: var(--df-ink);
  --muted: var(--df-muted);
  --accent: var(--df-violet);
  --accent2: var(--df-cyan);
  --grad: var(--df-spectrum);

  /* Variables des pages « parchemin » de Maât (confidentialité, audit) */
  --parchment: var(--df-canvas);
  --parchment-warm: var(--df-canvas-2);
  --ink: var(--df-ink);
  --ink-light: var(--df-ink-dim);
  --ink-muted: var(--df-muted);
  --white: var(--df-card);
}

html {
  background: var(--df-canvas) !important;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

body {
  background: transparent !important;
  color: var(--df-ink);
  font-family: var(--df-sans) !important;
}

/* Lumière ambiante et grain de pellicule, comme sur la page d'accueil */
body::before {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60vmax 45vmax at 95% -5%, rgb(255 207 168 / 0.5), transparent 70%),
    radial-gradient(55vmax 45vmax at -10% 105%, rgb(217 210 255 / 0.55), transparent 70%);
}
body::after {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection {
  background: var(--df-violet);
  color: #fff;
}

/* Titres : la serif cinéma de la page d'accueil */
h1,
h2,
h3 {
  font-family: var(--df-serif) !important;
  font-weight: 400 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.02;
}
h1 { font-size: clamp(2.6rem, 6vw, 5rem); }
h4,
h5,
h6 {
  font-family: var(--df-sans) !important;
}
code,
kbd,
pre,
samp {
  font-family: var(--df-mono) !important;
}

/* Grandes sections à fond blanc ou bleuté codé en dur : elles laissent passer la lumière ambiante,
   les sections « temps fort » gardent un voile blanc translucide. */
.forwho,
.features,
.comparison,
.security,
.faq,
.prereq,
.after-chat,
.module-intro {
  background: transparent !important;
}
.demo-section,
.pricing,
.under-hood,
.waitlist,
.cta-section,
.nl-section {
  background: rgb(255 255 255 / 0.5) !important;
  border-top: 1px solid var(--df-line);
  border-bottom: 1px solid var(--df-line);
}
body > footer {
  background: transparent !important;
}
body > div[style*="background:#fff"] {
  background: transparent !important;
}

/* Maât IA (confidentialité, audit) : bandeau de titre sombre passé en lumière dorée */
body > .header {
  background: linear-gradient(180deg, rgb(255 246 226 / 0.95) 0%, rgb(246 233 205 / 0.95) 100%) !important;
  border-bottom: 1px solid rgb(168 120 31 / 0.2);
}
body > .header h1,
body > .header .logo-text {
  color: #8a6216 !important;
}
body > .header p,
body > .header .subtitle,
body > .header .description {
  color: var(--df-ink-dim) !important;
}

/* Maât IA : le récit « story » passe d'un bandeau nuit à une lumière dorée */
.story {
  background: linear-gradient(180deg, rgb(255 246 226 / 0.95) 0%, rgb(246 233 205 / 0.95) 100%) !important;
  color: var(--df-ink) !important;
  border-top: 1px solid rgb(168 120 31 / 0.2);
  border-bottom: 1px solid rgb(168 120 31 / 0.2);
}
.story-title,
.story-text strong,
.story-highlight {
  color: var(--df-ink) !important;
}
.story-text {
  color: var(--df-ink-dim) !important;
}
.story-text em,
.story-eyebrow {
  color: #8a6216 !important;
}
.story-signoff {
  color: var(--df-muted) !important;
}
.story-title em,
.story-highlight strong {
  background: linear-gradient(120deg, #8a6216 0%, #b8892c 50%, #8a6216 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

/* Menu propre à une page produit (Maât IA) : même verre dépoli que l'en-tête Dopfin */
body > nav {
  background: rgb(247 243 234 / 0.78) !important;
  border-bottom: 1px solid var(--df-line) !important;
}

/* Boutons principaux des pages : pilule encre, comme sur l'accueil */
.btn-primary,
.btn-p,
.nav-cta,
.cta-btn {
  border-radius: 999px !important;
}
.btn-primary,
.btn-p {
  background: var(--df-ink) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.btn-primary:hover,
.btn-p:hover {
  background: var(--df-violet) !important;
}

/* ---------- En-tête Dopfin commun (remplace les anciens menus) ---------- */
.df-header,
.df-header * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
}
.df-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  height: 64px;
  display: flex;
  align-items: center;
  background: rgb(247 243 234 / 0.78);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--df-line);
  font-family: var(--df-sans);
}
.df-header .df-wrap {
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
@media (min-width: 640px) {
  .df-header .df-wrap { padding: 0 32px; }
}
.df-header a {
  color: var(--df-ink-dim);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 400;
  transition: color 0.2s;
}
.df-header a:hover,
.df-header a[aria-current="page"] {
  color: var(--df-ink);
}
.df-header .df-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--df-ink);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.df-header .df-brand svg {
  width: 28px;
  height: 28px;
}
.df-header .df-links {
  display: flex;
  align-items: center;
  gap: 28px;
}
.df-header .df-cta {
  border: 1px solid var(--df-line-strong);
  border-radius: 999px;
  padding: 8px 16px;
  color: var(--df-ink);
}
.df-header .df-cta:hover {
  border-color: var(--df-ink);
}
.df-header .df-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}
.df-header .df-toggle span {
  position: absolute;
  left: 9px;
  right: 9px;
  height: 1px;
  background: var(--df-ink);
  transition: transform 0.4s;
}
.df-header .df-toggle span:first-child { top: 16px; }
.df-header .df-toggle span:last-child { top: 23px; }
.df-header.df-open .df-toggle span:first-child { transform: translateY(3.5px) rotate(45deg); }
.df-header.df-open .df-toggle span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
@media (max-width: 1023px) {
  .df-header .df-toggle { display: block; }
  .df-header .df-links {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 20px 24px;
    background: var(--df-canvas);
    border-bottom: 1px solid var(--df-line);
  }
  .df-header.df-open .df-links { display: flex; }
  .df-header .df-links a:not(.df-cta) {
    font-family: var(--df-serif);
    font-size: 1.9rem;
    color: var(--df-ink);
    padding: 4px 0;
  }
  .df-header .df-cta { margin-top: 12px; }
}

/* ---------- Pied de page Dopfin commun ---------- */
.df-footer,
.df-footer * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.df-footer {
  border-top: 1px solid var(--df-line);
  font-family: var(--df-sans);
  font-size: 0.875rem;
  color: var(--df-muted);
}
.df-footer .df-wrap {
  max-width: 80rem;
  margin: 0 auto;
  padding: 32px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}
.df-footer a {
  color: var(--df-muted);
  text-decoration: none;
}
.df-footer a:hover {
  color: var(--df-ink);
}
.df-footer .df-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--df-ink);
  font-weight: 500;
}
.df-footer .df-brand svg {
  width: 22px;
  height: 22px;
}
.df-footer .df-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}