/* Redacta — feuille de style des pages de fond (conformité, sécurité, notes juridiques).
   Reprend les jetons de la landing : mêmes couleurs, mêmes familles, même sceau.
   La landing et conformite.html gardent leur CSS en ligne (page unique, coût réseau nul) ;
   ces pages-ci sont nombreuses et partagent donc une feuille commune. */

:root {
  --navy: #14213d; --navy-2: #1f3355; --ink: #232733; --muted: #6b6f66;
  --line: #e3ded2; --bg: #f6f4ee; --card: #fffefb;
  --gold: #a8863a; --gold-ink: #7d6226; --gold-soft: #f4ecd9;
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Avenir Next", "Segoe UI", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 760px; margin: 0 auto; padding: 0 24px 96px; }

h1, h2, h3 { font-family: var(--serif); color: var(--navy); font-weight: normal; line-height: 1.22; }
h1 { font-size: 34px; letter-spacing: -.01em; margin-bottom: 14px; text-wrap: balance; }
h2 { font-size: 24px; margin: 52px 0 14px; text-wrap: balance; }
h3 { font-size: 19px; margin: 32px 0 10px; }
p { margin-bottom: 16px; }
ul, ol { margin: 0 0 16px 22px; }
li { margin-bottom: 8px; }
a { color: var(--navy); text-underline-offset: 2px; }
a:hover { color: var(--gold-ink); }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
b, strong { font-weight: 650; }
code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .9em;
       background: var(--gold-soft); padding: 1px 5px; border-radius: 4px; }

/* En-tête */
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 10; background: var(--card);
              padding: 10px 16px; border: 1px solid var(--gold); border-radius: 8px; }
header.hero { display: flex; gap: 18px; align-items: flex-start; padding: 48px 0 26px; }
.seal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--navy); color: #f4efe2;
  font-family: var(--serif); font-size: 22px;
  border: 1.5px solid var(--gold);
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4.5px var(--gold);
  flex: none; user-select: none; text-decoration: none;
}
.eyebrow { font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase;
           color: var(--gold-ink); margin-bottom: 10px; }
.revision { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.lede { font-family: var(--serif); font-size: 20px; line-height: 1.5;
        color: var(--navy-2); margin: 22px 0 8px; }

/* Blocs */
.answer {
  background: var(--card); border-left: 3px solid var(--gold);
  padding: 20px 22px; margin: 26px 0;
}
.answer p:last-child { margin-bottom: 0; }
.notice {
  background: var(--gold-soft); border: 1px solid #ddc890; border-radius: 10px;
  padding: 14px 18px; font-size: 14px; color: #6a5420; margin: 30px 0;
}
.notice p:last-child { margin-bottom: 0; }
.todo {
  background: var(--card); border: 1px dashed var(--gold); border-radius: 10px;
  padding: 14px 18px; font-size: 14px; color: var(--gold-ink); margin: 20px 0;
}

/* Tableaux — toujours dans leur propre conteneur défilable. */
.scroll { overflow-x: auto; margin: 24px 0; border: 1px solid var(--line);
          border-radius: 10px; background: var(--card); }
table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: 15px; }
th, td { padding: 11px 16px; text-align: left; vertical-align: top;
         border-top: 1px solid var(--line); }
thead th { font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
           color: var(--muted); font-weight: 600; border-top: 0;
           border-bottom: 1px solid var(--gold); }
.ref { font-size: 12.5px; color: var(--muted); }

/* Pied */
footer.page { border-top: 1px solid var(--line); margin-top: 56px; padding-top: 22px;
              font-size: 14px; color: var(--muted); }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; }

@media (max-width: 640px) {
  body { font-size: 16px; }
  h1 { font-size: 26px; }
  h2 { font-size: 21px; }
  .lede { font-size: 18px; }
  .wrap { padding: 0 18px 72px; }
  header.hero { gap: 14px; padding: 36px 0 22px; }
  .answer, .notice, .todo { padding: 16px 18px; }

  /* Tableaux : on ne fait PAS défiler horizontalement sur mobile.
     Un tableau de 3-4 colonnes réduit à 375 px donne des colonnes de ~90 px,
     illisibles ; et un défilement latéral dans une page qui, elle, ne défile
     pas latéralement, est une interaction que personne ne découvre. Chaque
     ligne devient donc une fiche, et chaque cellule porte l'intitulé de sa
     colonne, repris de l'en-tête via l'attribut data-label posé dans le HTML.
     Les cellules sans data-label sont les intitulés de ligne : elles servent
     de titre à la fiche. */
  .scroll { border: 0; border-radius: 0; background: transparent; overflow-x: visible; }
  table { min-width: 0; width: 100%; }
  table, tbody, tr, td { display: block; }
  thead { position: absolute; left: -9999px; }
  caption { padding: 0 0 10px; }

  tbody tr {
    background: var(--card); border: 1px solid var(--line);
    border-radius: 10px; padding: 6px 0; margin-bottom: 12px;
  }
  tbody td { border: 0; padding: 8px 16px; }

  tbody td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 3px;
  }
  /* Intitulé de ligne : pas d'étiquette, mais le poids d'un titre de fiche. */
  tbody td:not([data-label]) {
    font-family: var(--serif); color: var(--navy); font-size: 18px;
    padding-bottom: 2px;
  }
  tbody td:not([data-label]) b { font-weight: normal; }

  /* Cibles tactiles : les liens de pied ne faisaient que 19 px de haut. */
  .foot-links { gap: 2px 20px; }
  .foot-links a, footer.page a { display: inline-block; padding: 11px 0; margin: -11px 0; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }