/* Redjam Bundles — feuille de style commune à tout le site.
   Palette tirée de l'icône : tuiles crème et une tuile dorée sur fond
   framboise. Le doré ne sert qu'à une chose, marquer une économie, pour ne
   jamais se diluer. Les neutres sont tirés vers le framboise plutôt que
   laissés gris. */

:root {
  --berry-deep: #6E1526;
  --berry: #C0344A;
  --berry-soft: #F7E4E7;
  --gold: #FFC24A;
  --cream: #FFF3E9;

  --ground: #FFFDFB;
  --surface: #FFFFFF;
  --surface-sunk: #FAF3EF;
  --ink: #24141A;
  --ink-soft: #6E5B60;
  --rule: #EADFDB;

  --shadow: 0 1px 2px rgba(36,20,26,.05), 0 8px 24px -12px rgba(36,20,26,.18);

  --measure: 34rem;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --step: clamp(4rem, 9vw, 7rem);

  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --body: "Source Sans 3", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Le framboise clair est trop proche de l'encre sur fond sombre : même
       teinte, remontée en clarté, pour que l'accent reste un accent. */
    --berry: #E8697D;
    --berry-soft: #3A1A21;
    --ground: #171013;
    --surface: #1F161A;
    --surface-sunk: #241A1E;
    --ink: #F6EAE6;
    --ink-soft: #B79FA5;
    --rule: #3A2C31;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
  }
}

:root[data-theme="dark"] {
  --berry: #E8697D;
  --berry-soft: #3A1A21;
  --ground: #171013;
  --surface: #1F161A;
  --surface-sunk: #241A1E;
  --ink: #F6EAE6;
  --ink-soft: #B79FA5;
  --rule: #3A2C31;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}

p, ul, ol, table { margin: 0; }
a { color: inherit; }

:where(a, button, summary):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

.wrap { width: 100%; max-width: 68rem; margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 48rem; }

.eyebrow {
  font-family: var(--body);
  font-size: .78rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
}

/* --- en-tête -------------------------------------------------------------- */

.masthead { background: var(--berry-deep); color: var(--cream); }
.masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding-block: 1.15rem;
}

.mark {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--display); font-weight: 800; font-size: 1.05rem;
  letter-spacing: -0.01em; text-decoration: none; white-space: nowrap;
}
@media (max-width: 26rem) { .mark { font-size: .95rem; } }

/* Sur un petit écran, l'en-tête préfère passer à la ligne plutôt que de
   pousser le bouton hors de la page. */
@media (max-width: 26rem) {
  .masthead__inner { flex-wrap: wrap; gap: .8rem 1rem; }
  .masthead nav { gap: 1rem; }
  .masthead .btn { padding: .58em 1.05em; font-size: .95rem; }
}

/* L'icône en miniature : trois articles et l'offre. */
.mark__tiles { display: grid; grid-template-columns: repeat(2, 9px); grid-auto-rows: 9px; gap: 2.5px; }
.mark__tiles i { background: var(--cream); border-radius: 2.5px; }
.mark__tiles i:last-child { background: var(--gold); }

.masthead nav { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem); font-size: .95rem; }
.masthead nav a { text-decoration: none; opacity: .82; }
.masthead nav a:hover { opacity: 1; }
@media (max-width: 46rem) { .masthead nav .hide-sm { display: none; } }

.btn {
  display: inline-block; font-family: var(--body); font-size: 1rem; font-weight: 600;
  text-decoration: none; padding: .68em 1.35em; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .15s ease, background-color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn--gold { background: var(--gold); color: #4A1019; }
.btn--gold:hover { background: #FFD070; }
.btn--outline { border-color: currentColor; opacity: .9; }
.btn--outline:hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

/* --- pied de page --------------------------------------------------------- */

.foot { padding-block: 3rem; font-size: .93rem; color: var(--ink-soft); border-top: 1px solid var(--rule); margin-top: var(--step); }
.foot a { color: var(--ink-soft); }
.foot a:hover { color: var(--berry); }

/* Neuf liens en une ligne devenaient illisibles : trois colonnes les
   regroupent par ce que le lecteur cherche — l'éditeur, l'aide, le légal. */
.foot__cols { display: grid; gap: 2rem; }
@media (min-width: 40rem) { .foot__cols { grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; } }
.foot__cols > div { display: grid; gap: .55rem; align-content: start; }
.foot__title { font-family: var(--display); font-weight: 600; color: var(--ink); }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }

/* conservé pour l'accueil et la 404, qui gardent un pied simple */
.foot__inner { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; }
.foot__links { display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* --- pages de texte ------------------------------------------------------- */

.doc { padding-block: clamp(3rem, 7vw, 5rem) 0; }
.doc__head { display: grid; gap: .85rem; margin-bottom: 2.5rem; }
.doc__head .eyebrow { color: var(--berry); }
.doc__head h1 { font-size: clamp(2rem, 4.5vw, 2.9rem); }
.doc__updated { color: var(--ink-soft); font-size: .95rem; }

.doc__body { display: grid; gap: 1.15rem; }
.doc__body h2 { font-size: 1.3rem; margin-top: 2rem; }
.doc__body h3 { font-size: 1.05rem; margin-top: 1.25rem; font-weight: 600; font-family: var(--body); letter-spacing: 0; }
.doc__body ul, .doc__body ol { padding-left: 1.35rem; display: grid; gap: .4rem; }
.doc__body a { color: var(--berry); }

.doc__toc {
  background: var(--surface-sunk); border: 1px solid var(--rule);
  border-radius: 12px; padding: 1.25rem 1.5rem; display: grid; gap: .5rem;
  font-size: .96rem;
}
.doc__toc strong { font-family: var(--display); }
.doc__toc ol { padding-left: 1.2rem; display: grid; gap: .3rem; margin: 0; }

.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .96rem; min-width: 30rem; }
th, td { text-align: left; padding: .65rem .8rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-weight: 600; background: var(--surface-sunk); }

.callout {
  background: var(--berry-soft); border-radius: 12px; padding: 1.15rem 1.4rem;
  display: grid; gap: .5rem;
}
.callout strong { font-family: var(--display); }

.lang-switch { font-size: .95rem; color: var(--ink-soft); }
.lang-switch a { color: var(--berry); }

/* --- changelog ------------------------------------------------------------ */

.release {
  border: 1px solid var(--rule); border-radius: 14px;
  padding: 1.6rem 1.75rem; background: var(--surface);
  display: grid; gap: .6rem;
}
.release__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem; }
.release__head h2 { margin: 0; font-size: 1.6rem; }
.release__note { color: var(--ink-soft); }
.release h3 { margin-top: 1.1rem; }

.tag {
  font-size: .76rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; padding: .25em .7em; border-radius: 999px;
}
.tag--pending { background: var(--gold); color: #4A1019; }