/* =========================================================
   Polices auto-hébergées.

   Elles étaient auparavant chargées depuis fonts.googleapis.com, ce qui
   transmettait l'adresse IP du visiteur à Google avant même l'affichage
   de la page. Sur des pages qui expliquent le traitement des données
   personnelles, c'était contradictoire.

   Fichiers variables (un seul fichier couvre toute la plage de graisses).
   Ce dépôt n'a pas de build : les .woff2 viennent de @fontsource-variable,
   déclaré en devDependency du dépôt site-guivideoimage. Pour les mettre à
   jour, y lancer npm update, puis recopier les fichiers depuis
   node_modules/@fontsource-variable/<famille>/files/ vers /fonts/ ici.
   ========================================================= */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-display: swap;
}

/* =========================================================
   Pages légales & utilitaires de l'application Promenade
   Hébergées sur guivideoimage.com mais habillées avec la charte
   du site Promenade : "Soft Structuralism" chaleureux
   (vert forêt + crème + ambre, Bricolage Grotesque / Plus Jakarta Sans).
   Feuille autonome : ne dépend pas de styles.css du site vitrine.
   ========================================================= */

:root {
  /* Couleurs de marque Promenade */
  --green-900: #21340e;
  --green-800: #2f4a1e;
  --green-700: #3a5a24;
  --green-600: #4c7526;
  --green-500: #6aa832;
  --green-300: #b7d89a;
  --green-100: #e6f0da;

  --cream:     #faf7ee;
  --cream-2:   #f2ecdd;
  --card:      #ffffff;

  --amber:     #e8873b;
  --amber-soft:#f6d9b8;
  --sky:       #cfe3f0;

  --ink:       #1b2a0e;
  --muted:     #5f6a4f;
  --hairline:  rgba(33, 52, 14, 0.10);

  --r-lg: 2rem;
  --r-md: 1.25rem;
  --r-sm: 0.75rem;

  --shadow-soft: 0 24px 60px -24px rgba(33, 52, 14, 0.28);
  --shadow-card: 0 20px 50px -28px rgba(33, 52, 14, 0.35);
  --shadow-float:0 40px 90px -40px rgba(33, 52, 14, 0.45);

  --ease: cubic-bezier(0.32, 0.72, 0, 1);

  --maxw: 820px;
  --font-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Bricolage Grotesque", "Plus Jakarta Sans", sans-serif;
}

/* ---------- Reset léger ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body.legal-page {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.legal-page img { max-width: 100%; display: block; }
body.legal-page a { color: inherit; text-decoration: none; }
body.legal-page ul { list-style: none; }

/* Grain fixe très subtil pour le rendu "matière" */
body.legal-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Halos diffus en fond, repris du hero du site Promenade */
body.legal-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(420px 420px at -6% -8%, rgba(183, 216, 154, 0.55), transparent 70%),
    radial-gradient(380px 380px at 106% 4%, rgba(246, 217, 184, 0.45), transparent 70%),
    radial-gradient(460px 460px at 30% 108%, rgba(207, 227, 240, 0.4), transparent 70%);
}

/* =========================================================
   Navigation — pilule flottante en verre
   ========================================================= */
.legal-nav-wrap {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 70;
  display: flex;
  justify-content: center;
  padding-top: 1.1rem;
}
.legal-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: min(var(--maxw), calc(100% - 2rem));
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  background: rgba(250, 247, 238, 0.72);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 10px 30px -18px rgba(33, 52, 14, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.6);
}
.legal-nav .brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
}
.legal-nav .brand img {
  width: 34px; height: 34px;
  border-radius: 10px;
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.5);
}
.legal-nav .nav-links {
  display: flex;
  gap: 1.4rem;
  margin-left: auto;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--muted);
}
.legal-nav .nav-links a { position: relative; transition: color 0.3s var(--ease); }
.legal-nav .nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  height: 2px; width: 0;
  background: var(--green-500);
  border-radius: 2px;
  transition: width 0.4s var(--ease);
}
.legal-nav .nav-links a:hover { color: var(--ink); }
.legal-nav .nav-links a:hover::after { width: 100%; }
.legal-nav .nav-links a[aria-current="page"] { color: var(--green-700); font-weight: 600; }
.legal-nav .nav-links a[aria-current="page"]::after { width: 100%; }

/* =========================================================
   Contenu — carte crème posée sur le fond
   ========================================================= */
.legal-main {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(6.5rem, 14vw, 8.5rem) 1.5rem clamp(3rem, 6vw, 4.5rem);
}

.legal-content {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
  padding: clamp(1.75rem, 5vw, 3.5rem);
}

.legal-content .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--green-700);
  background: var(--green-100);
  border: 1px solid var(--hairline);
  margin-bottom: 1.2rem;
}
.legal-content .eyebrow .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 0 4px rgba(106, 168, 50, 0.18);
}

.legal-content h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin-bottom: 0.6rem;
}
.legal-content .last-update {
  font-size: 0.88rem;
  color: var(--muted);
  margin-bottom: 2rem;
}
.legal-content > p:first-of-type { font-size: 1.06rem; }

.legal-content h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 2.6rem 0 0.9rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--hairline);
}
.legal-content h2:first-of-type { border-top: none; padding-top: 0; }

.legal-content p,
.legal-content li {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--muted);
}
.legal-content p { margin-bottom: 1rem; }
.legal-content strong { color: var(--ink); font-weight: 600; }

.legal-content ul {
  list-style: none;
  margin-bottom: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.legal-content li { position: relative; padding-left: 1.65rem; }
.legal-content li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.65em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 0 4px rgba(106, 168, 50, 0.16);
}

.legal-page .legal-content a {
  color: var(--green-600);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.3s var(--ease);
}
.legal-page .legal-content a:hover { color: var(--green-800); }

.legal-content .contact-block {
  margin-top: 1.6rem;
  padding: 1.35rem 1.5rem;
  border-radius: var(--r-md);
  background: radial-gradient(120% 140% at 0% 0%, var(--green-100), var(--cream));
  border: 1px solid var(--hairline);
}
.legal-content .contact-block p { color: var(--ink); }

/* Bouton principal, repris des CTA du site Promenade */
.legal-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  border-radius: 999px;
  padding: 0.9rem 1.5rem;
  margin: 0.6rem 0 1.2rem;
  background: var(--green-800);
  color: #fff !important;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none !important;
  border: 1px solid transparent;
  box-shadow: 0 16px 30px -16px rgba(47, 74, 30, 0.8);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), background 0.4s var(--ease);
  will-change: transform;
}
.legal-cta:hover {
  background: var(--green-700);
  transform: translateY(-2px);
  box-shadow: 0 22px 40px -18px rgba(47, 74, 30, 0.85);
}
.legal-cta:active { transform: scale(0.97); }
.legal-cta svg { flex-shrink: 0; }

/* =========================================================
   Footer
   ========================================================= */
.legal-footer {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 2.5rem 1.5rem 3rem;
  border-top: 1px solid var(--hairline);
}
.legal-footer .f-top {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
  justify-content: space-between;
}
.legal-footer .brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
}
.legal-footer .brand img { width: 30px; height: 30px; border-radius: 9px; }
.legal-footer .f-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  font-size: 0.88rem;
  color: var(--muted);
}
.legal-footer .f-links a { transition: color 0.3s var(--ease); }
.legal-footer .f-links a:hover { color: var(--ink); }
.legal-footer .made {
  font-size: 0.8rem;
  color: var(--muted);
  padding-top: 1.5rem;
  margin-top: 1.5rem;
  border-top: 1px solid var(--hairline);
}
.legal-footer .made a { text-decoration: underline; text-underline-offset: 3px; }
.legal-footer .made a:hover { color: var(--ink); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 760px) {
  .legal-nav .nav-links { display: none; }
  .legal-nav { justify-content: center; padding-inline: 1rem; }
}

@media (max-width: 460px) {
  .legal-main { padding-inline: 1.15rem; }
  .legal-footer { padding-inline: 1.15rem; }
  .legal-content { border-radius: var(--r-md); }
}

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