/* ═══════════════════════════════════════════════════════════════════════════
   Pages juridiques publiques d'OUKALÈ.

   Aucune dépendance externe : polices, logos et styles sont servis par le
   MÊME domaine que la page. C'est un choix, pas une simplification — voir
   README.md. Charte : fuchsia #E6007E, noir #1D1D1B, sauge #657038.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Polices, auto-hébergées ──────────────────────────────────────────────
   Fredoka pour les titres, Lato pour le texte courant. Les deux sont sous
   licence SIL Open Font (cf. fonts/OFL-*.txt), qui autorise explicitement
   la redistribution — d'où les .woff2 dans le dépôt plutôt qu'un <link>
   vers fonts.googleapis.com.

   `font-display: swap` : le texte s'affiche IMMÉDIATEMENT dans la police de
   secours, puis bascule. Sur une connexion mobile lente, une politique de
   confidentialité doit être lisible tout de suite. */

@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 400 600; /* fichier variable : un seul téléchargement */
  font-display: swap;
  src: url('fonts/fredoka-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/fredoka-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/lato-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/lato-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/lato-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/lato-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Jetons ──────────────────────────────────────────────────────────────── */

:root {
  --fuchsia: #e6007e;      /* APLATS uniquement */
  --fuchsia-ink: #c6006c;  /* fuchsia en TEXTE : #E6007E n'est qu'à 4,50:1 sur blanc */
  --fuchsia-surface: #fdeaf4;
  --ink: #1d1d1b;
  --ink-soft: #3f3f3c;
  --ink-muted: #6b6b67;
  --canvas: #f6f6f5;
  --border: #e7e7e5;
  --border-strong: #8e8e8a;
  --sauge: #657038;
  --sauge-surface: #f1f3e7;

  --serif-titre: 'Fredoka', 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  --sans-texte: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif;

  --ombre-carte: 0 1px 2px rgba(29, 29, 27, 0.04), 0 12px 32px rgba(29, 29, 27, 0.06);
  --largeur: 48rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink-soft);
  font-family: var(--sans-texte);
  font-size: 17px; /* 16 px minimum : en dessous, iOS zoome à la mise au point */
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

/* ── Barre de marque ─────────────────────────────────────────────────────── */

.barre-marque {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}

/* `--largeur + 40px` et non `--largeur` : la gouttière de 20 px est INTÉRIEURE
   ici, alors qu'elle est portée par le parent dans `.entete` et le pied. Sans
   cette compensation, le logo et la carte se posent 20 px à droite du titre —
   un décalage qu'on ne voit pas en le codant, mais qui saute aux yeux à
   l'écran. Même raison pour `main` juste en dessous. */
.barre-marque .dedans {
  max-width: calc(var(--largeur) + 40px);
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.barre-marque .logo { display: block; flex-shrink: 0; }

.barre-marque .logo img {
  display: block;
  height: 40px;
  width: auto;
}

@media (min-width: 40rem) {
  .barre-marque .logo img { height: 52px; }
}

.barre-marque nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  font-size: 14px;
}

.barre-marque nav a {
  color: var(--ink-muted);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background-color 0.15s, color 0.15s;
}

.barre-marque nav a:hover { background: var(--canvas); color: var(--ink); }

.barre-marque nav a[aria-current='page'] {
  background: var(--fuchsia-surface);
  color: var(--fuchsia-ink);
  font-weight: 700;
}

/* ── En-tête de page ─────────────────────────────────────────────────────── */

.entete {
  /* Le dégradé démarre sur un voile fuchsia très dilué : la marque est
     présente sans qu'un aplat de couleur écrase un document juridique. */
  background: linear-gradient(168deg, #fff6fb 0%, var(--canvas) 62%, var(--canvas) 100%);
  border-bottom: 1px solid var(--border);
  padding: 44px 20px 40px;
}

.entete .dedans { max-width: var(--largeur); margin: 0 auto; }

.entete .surtitre {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fuchsia-ink);
  background: #fff;
  border: 1px solid var(--fuchsia-surface);
  border-radius: 999px;
  padding: 5px 14px;
  margin-bottom: 18px;
}

h1 {
  font-family: var(--serif-titre);
  font-weight: 600;
  font-size: clamp(30px, 6.4vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}

/* Le trait fuchsia sous le titre reprend celui du logo — c'est le seul
   élément graphique de la marque, autant s'en servir comme signature. */
h1::after {
  content: '';
  display: block;
  width: 84px;
  height: 5px;
  border-radius: 3px;
  background: var(--fuchsia);
  margin-top: 20px;
}

.entete .date-maj {
  margin: 18px 0 0;
  color: var(--ink-muted);
  font-size: 15px;
}

/* ── Corps ───────────────────────────────────────────────────────────────── */

main {
  max-width: calc(var(--largeur) + 40px);
  margin: 0 auto;
  padding: 8px 20px 72px;
}

.carte {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--ombre-carte);
  padding: 28px 22px 40px;
  margin-top: -22px;
}

@media (min-width: 40rem) {
  .carte { padding: 44px 52px 56px; }
}

h2 {
  font-family: var(--serif-titre);
  font-weight: 600;
  font-size: clamp(21px, 3.4vw, 26px);
  line-height: 1.28;
  color: var(--ink);
  margin: 52px 0 16px;
  padding-top: 30px;
  border-top: 1px solid var(--border);
  /* La barre sticky mesure ~64 px : sans cette marge, un lien d'ancre pose le
     titre SOUS la barre et la section paraît commencer au paragraphe suivant. */
  scroll-margin-top: 88px;
}

.carte > h2:first-child { margin-top: 8px; padding-top: 0; border-top: 0; }

h3 {
  font-family: var(--serif-titre);
  font-weight: 600;
  font-size: 19px;
  color: var(--ink);
  margin: 32px 0 10px;
  scroll-margin-top: 88px;
}

p, li { margin: 0 0 16px; }

ul, ol { padding-left: 24px; }

li::marker { color: var(--fuchsia-ink); }

a {
  color: var(--fuchsia-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover { text-decoration-thickness: 2px; }

/* Contour de mise au point visible au clavier. `--fuchsia` sur fond clair
   dépasse les 3:1 exigés par WCAG 1.4.11 pour un indicateur non textuel. */
a:focus-visible, summary:focus-visible {
  outline: 3px solid var(--fuchsia);
  outline-offset: 3px;
  border-radius: 4px;
}

strong { font-weight: 700; color: var(--ink); }

/* ── Sommaire ────────────────────────────────────────────────────────────── */

.sommaire {
  background: var(--canvas);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 24px;
  margin: 0 0 8px;
}

.sommaire h2 {
  font-size: 14px !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
}

.sommaire ol {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 1;
}

@media (min-width: 40rem) {
  .sommaire ol { columns: 2; column-gap: 32px; }
}

.sommaire li {
  margin: 0 0 8px;
  break-inside: avoid;
  font-size: 15.5px;
  line-height: 1.5;
}

.sommaire a { color: var(--ink-soft); text-decoration: none; }
.sommaire a:hover { color: var(--fuchsia-ink); text-decoration: underline; }

/* ── Cartes de navigation (sommaire du site) ─────────────────────────────── */

ul.cartes-liens {
  list-style: none;
  padding: 0;
  margin: 28px 0 8px;
  display: grid;
  gap: 14px;
}

ul.cartes-liens li { margin: 0; }

ul.cartes-liens a {
  display: block;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

ul.cartes-liens a:hover,
ul.cartes-liens a:focus-visible {
  border-color: var(--fuchsia);
  box-shadow: var(--ombre-carte);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  ul.cartes-liens a:hover, ul.cartes-liens a:focus-visible { transform: none; }
}

ul.cartes-liens .titre {
  display: block;
  font-family: var(--serif-titre);
  font-weight: 600;
  font-size: 19px;
  color: var(--ink);
  margin-bottom: 4px;
}

/* La flèche suit le titre plutôt que d'être posée dans un coin : c'est le
   titre qu'on lit, c'est donc là que le « ça continue » doit se voir. */
ul.cartes-liens .titre::after {
  content: ' →';
  color: var(--fuchsia-ink);
}

ul.cartes-liens .detail {
  display: block;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-muted);
}

/* ── Définitions ─────────────────────────────────────────────────────────── */

dl.definitions { margin: 20px 0 0; }

dl.definitions dt {
  font-family: var(--serif-titre);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  margin-top: 20px;
}

dl.definitions dd {
  margin: 4px 0 0;
  padding-left: 16px;
  border-left: 2px solid var(--border);
}

/* ── Tableaux ────────────────────────────────────────────────────────────── */

/* Un tableau large défile DANS son conteneur. La page, jamais. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: 12px;
  margin: 24px 0 28px;
}

table {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  font-size: 15.5px;
  line-height: 1.6;
}

th, td {
  text-align: left;
  padding: 13px 16px;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

thead th {
  font-family: var(--serif-titre);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  background: var(--canvas);
  white-space: nowrap;
}

tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }

tbody tr:nth-child(even) { background: #fbfbfa; }

/* Tableau « fiche » (mentions légales) : le libellé est en tête de LIGNE. */
tbody th {
  font-family: var(--serif-titre);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  white-space: nowrap;
  width: 1%;
  background: var(--canvas);
}

/* ── Encadrés ────────────────────────────────────────────────────────────── */

.encadre {
  background: var(--sauge-surface);
  border-left: 4px solid var(--sauge);
  border-radius: 0 12px 12px 0;
  padding: 18px 22px;
  margin: 28px 0;
  font-size: 16.5px;
}

.encadre p:last-child { margin-bottom: 0; }

.encadre.important {
  background: var(--fuchsia-surface);
  border-left-color: var(--fuchsia);
}

/* ── Pied de page ────────────────────────────────────────────────────────── */

footer.pied {
  background: var(--ink);
  color: #c9c9c5;
  padding: 48px 20px 56px;
  font-size: 15px;
}

footer.pied .dedans {
  max-width: var(--largeur);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
}

footer.pied img { display: block; height: 54px; width: auto; margin-bottom: 16px; }

footer.pied nav { display: flex; flex-direction: column; gap: 10px; }

footer.pied a { color: #fff; text-decoration: none; }
footer.pied a:hover { text-decoration: underline; }

footer.pied .mentions { margin: 0; max-width: 22rem; line-height: 1.6; }

footer.pied .copyright {
  max-width: var(--largeur);
  margin: 36px auto 0;
  padding-top: 24px;
  border-top: 1px solid #3a3a37;
  font-size: 14px;
  color: #8f8f8a;
}

/* ── Impression ──────────────────────────────────────────────────────────── */
/* Une politique de confidentialité finit souvent en PDF, dans un dossier
   ou une annexe de contrat. Autant que la sortie papier soit correcte. */

@media print {
  body { background: #fff; font-size: 11pt; }
  .barre-marque, .sommaire { display: none; }
  .entete { background: none; border-bottom: 2px solid var(--ink); padding: 0 0 16pt; }
  main { padding: 0; }
  .carte { border: 0; box-shadow: none; margin: 0; padding: 0; }
  h2 { page-break-after: avoid; }
  .table-scroll, table, .encadre { page-break-inside: avoid; }
  footer.pied { background: none; color: #000; padding: 16pt 0 0; }
  footer.pied img { display: none; }
  footer.pied a { color: #000; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; }
}