/*
 * Feuille des pages annexes : privacy, terms, share, promo, offline.
 *
 * Ces pages sont copiées telles quelles de web/legacy-src/ vers web/public/ : elles
 * ne passent pas par Vite et ne peuvent donc pas importer ../src/ui/tokens.css.
 * Les douze variables de couleur ci-dessous en sont une COPIE, gardée par
 * web/test/marketing/legal-css.test.ts, qui compare les quatre thèmes.
 * Ne jamais changer une valeur ici seule : changer tokens.css, puis reporter.
 *
 * Servie à chemin fixe (/legal.css), donc en no-cache : la passe 2 du déploiement
 * CDK met tout ce qui n'est pas /assets/** en no-cache,max-age=0,must-revalidate.
 *
 * offline.html précache CETTE feuille (aucune entrée dans globIgnores) mais PAS
 * les polices (fonts/** y est, cf. tâche 2) : hors ligne, body/h1/h2 retombent sur
 * la pile système ci-dessous, jamais sur un @font-face qui échouerait à charger.
 */

@font-face {
  font-family: 'Fraunces Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/fonts/fraunces-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/fonts/fraunces-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+1E00-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+1E00-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --paper: #F4EEE4;
  --card: #FFFCF7;
  --card-2: #F7F1E7;
  --sand: #E3D8C6;
  --sand-2: #CFC1AB;
  --ink: #221C18;
  --ink-2: #52463F;
  --ink-3: #736459;
  --sienna: #B4472A;
  --sienna-deep: #8F361F;
  --sienna-soft: #F5E1D7;
  --on-accent: #FFFFFF;

  --lg-max: 760px;
  --lg-gutter: clamp(20px, 5vw, 40px);
  /* Texte d'accent (liens, libellés RGPD, titre du callout) : --sienna-deep passe
     en clair mais tombe sous 4.5:1 une fois le thème sombre inversé (voir
     legal-css.test.ts, assertions de contraste) ; --lg-accent isole ce cas. */
  --lg-accent: var(--sienna-deep);
}

html.dark {
  --paper: #1B1613;
  --card: #252019;
  --card-2: #2D2620;
  --sand: #3B322B;
  --sand-2: #4E423A;
  --ink: #F3ECE2;
  --ink-2: #CDBFB1;
  --ink-3: #B7A797;
  --sienna: #C5532C;
  --sienna-deep: #B4472A;
  --sienna-soft: #3E2A22;
  --on-accent: #FFFFFF;
  /* --sienna-deep n'a plus assez de contraste sur un fond sombre (voir la note
     dans :root) : le texte d'accent bascule sur --ink en thème sombre. */
  --lg-accent: var(--ink);
}

html.high-contrast {
  --ink: #000000;
  --ink-2: #1A1410;
  --ink-3: #3A2E26;
  --sand: #8A7A66;
  --sand-2: #5C4E42;
  --card: #FFFFFF;
  --paper: #FFFFFF;
}

html.high-contrast.dark {
  --paper: #000000;
  --card: #0B0908;
  --ink: #FFFFFF;
  --ink-2: #F3ECE2;
  --ink-3: #D9CFC2;
  --sand: #7A6C60;
  --sand-2: #A08F80;
  --lg-accent: var(--ink);
}

* { box-sizing: border-box; }

html { color-scheme: light dark; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter Variable', Inter, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: 'Fraunces Variable', Fraunces, Georgia, serif;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(28px, 5vw, 36px); }
h2 { font-size: 22px; margin-top: 1.6em; }
h3 { font-size: 18px; margin-top: 1.2em; }

p { margin: 0 0 1em; }
p.lg-meta { color: var(--ink-2); font-size: 15px; }

a { color: var(--lg-accent); }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 3px solid var(--sienna); outline-offset: 3px; }

ul, ol { padding-inline-start: 1.4em; margin: 0 0 1em; }
li { margin-bottom: .5em; }

section + section { margin-top: 2em; }

/* Tables : la carte de données personnelles / sous-traitants du privacy.
   Le zébrage des lignes est porté par nth-child, pas par une classe bg-* posée
   ligne par ligne dans le HTML (ancien Tailwind : plus rien pour la lire). */
.overflow-x-auto { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--sand); }
thead th { background: var(--card-2); font-weight: 600; }
tbody tr:nth-child(even) { background: var(--card-2); }
code { background: var(--card-2); padding: 2px 5px; border-radius: 4px; font-size: .9em; }
@media (max-width: 640px) {
  .overflow-x-auto table { min-width: 520px; }
}

/* Titre de grande section ("I. Mentions Légales", "II. CGU" dans terms.html) :
   même traitement que le h2 générique, plus le filet du dessous que portait
   l'ancien Tailwind (border-b pb-2). */
.lg-part-title { padding-bottom: .3em; border-bottom: 1px solid var(--sand); }

/* Emphase de paragraphe (l'ancien font-semibold Tailwind) : gras seul, la
   couleur reste celle du texte courant, pas un second accent à gérer. */
.lg-emphasis { font-weight: 700; }

/* Liste "carte de visite" sans puces (éditeur du site, hébergeur…) : l'ancien
   list-none pl-4, qui n'est plus qu'une puce fantôme sans Tailwind. */
.lg-list-plain { list-style: none; padding-inline-start: 0; }

/* Liste des droits RGPD (9. Vos droits) : libellé + description côte à côte.
   .lg-right-label porte l'accent que perdait le span une fois font-bold
   text-blue-600 devenu muet. */
.lg-rights { list-style: none; padding-inline-start: 0; }
.lg-rights li { display: flex; gap: 12px; }
.lg-right-label { flex-shrink: 0; font-weight: 700; color: var(--lg-accent); }

/* Paire de liens de bas de page (mentions/retour accueil) : l'ancien
   flex justify-center gap-4 / space-x-4. */
.lg-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; margin-top: 12px; }

/* Colophon de fin de page (date de mise à jour + liens) : l'ancien
   pt-8 text-center text-sm text-slate-500 border-t. */
.lg-colophon {
  margin-top: 2em;
  padding-top: 2em;
  border-top: 1px solid var(--sand);
  text-align: center;
  font-size: 14px;
  color: var(--ink-3);
}

/* Encadré neutre (récap RGPD, contact). Un seul accent disponible (--sienna),
   pas de --brick/--ochre dans les douze variables copiées : réservé au non-urgent. */
.lg-box {
  margin-top: 1em;
  padding: 16px;
  background: var(--card-2);
  border-radius: 12px;
  font-size: 15px;
  list-style: none;
}
ul.lg-box { padding-inline-start: 16px; }
ul.lg-box li { margin-bottom: .25em; }

/* Encadré d'avertissement (clause de non-substitution du terms) : seul accent
   disponible côté légal, --sienna, volontairement réservé à CE bloc. */
.lg-callout {
  margin: 1.2em 0;
  padding: 18px 20px;
  background: var(--sienna-soft);
  border-inline-start: 4px solid var(--sienna);
  border-radius: 0 12px 12px 0;
}
.lg-callout h2 { margin-top: 0; font-size: 17px; color: var(--lg-accent); }

.lg-card {
  background: var(--card);
  border: 1px solid var(--sand);
  border-radius: 22px;
  padding: clamp(20px, 4vw, 40px);
}

main {
  overflow-wrap: anywhere;
  max-width: var(--lg-max);
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) var(--lg-gutter);
}

/* En-tête et pied de page : même balisage que chrome.ts, même rendu, classes lp-*
   redéfinies ici parce que ces pages ne chargent pas marketing.css. */
.lp-header {
  position: sticky;
  top: 0;
  background: var(--paper);
  border-bottom: 1px solid var(--sand);
}
.lp-header-inner {
  max-width: var(--lg-max);
  margin: 0 auto;
  padding: 12px var(--lg-gutter);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.lp-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  min-width: 0;
}
.lp-brand:hover { text-decoration: none; }
.lp-logo { display: block; height: 44px; width: auto; flex-shrink: 0; }
.lp-logo--lg { height: 64px; }
.lp-footer-brand .lp-footer-tagline { margin: 12px 0 8px; color: var(--ink); font-weight: 600; font-size: 15px; }
.lp-nav {
  display: flex;
  gap: 20px;
  margin-inline-start: auto;
  flex-wrap: wrap;
}
.lp-nav a { color: var(--ink-2); text-decoration: none; font-size: 15px; font-weight: 500; }
.lp-nav a:hover { color: var(--ink); text-decoration: none; }
.lp-nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--sienna); }
.lp-header-login { min-height: 44px; padding-inline: 16px; }
@media (max-width: 640px) {
  .lp-nav { display: none; }
  .lp-header-login { margin-inline-start: auto; }
}

.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--sand-2);
  border-radius: 16px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}
.lp-btn:hover { text-decoration: none; border-color: var(--ink-3); }
.lp-btn-ghost { background: transparent; }
/* Bouton principal des pages de contact (checkout.html, senior-subscribe.html) : même
   rendu que .lp-btn-primary de marketing.css. Blanc sur --sienna : 5,4:1 en clair,
   4,5:1 en sombre ; --sienna-deep au survol, plus foncé dans les deux thèmes. */
.lp-btn-primary { background: var(--sienna); border-color: var(--sienna); color: var(--on-accent); }
.lp-btn-primary:hover { background: var(--sienna-deep); border-color: var(--sienna-deep); }

.lp-footer {
  border-top: 1px solid var(--sand);
  background: var(--card-2);
  margin-top: 48px;
  padding-block: 32px;
}
.lp-footer-inner {
  max-width: var(--lg-max);
  margin: 0 auto;
  padding-inline: var(--lg-gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}
.lp-footer-brand { flex: 1 1 220px; min-width: 0; }
.lp-footer-brand p { color: var(--ink-2); font-size: 14px; max-width: 38ch; margin-top: 8px; }
.lp-footer-col { display: flex; flex-direction: column; gap: 8px; flex: 1 1 160px; min-width: 0; }
.lp-footer-col h2 {
  font-family: 'Inter Variable', Inter, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-3);
  margin: 0 0 4px;
}
.lp-footer-col a { color: var(--ink-2); text-decoration: none; font-size: 14px; }
.lp-footer-col a:hover { color: var(--ink); text-decoration: underline; }
.lp-footer-note, .lp-footer-legal {
  max-width: var(--lg-max);
  margin: 16px auto 0;
  padding-inline: var(--lg-gutter);
  font-size: 13px;
  color: var(--ink-3);
}
.lp-footer-note { color: var(--ink-2); }
.lp-footer-legal { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 12px; }