/* ══════════════════════════════════════════════════════════════════
   Lux Audere — le registre de la maison, pour ses pages de texte.

   L'accueil est noir et garde son CSS inline : c'est une page unique,
   très dessinée, et la sortir de son fichier ne lui rendrait service à
   personne. Ce fichier-ci sert les pages qui sont arrivées après et
   qui, elles, sont plusieurs à se ressembler :

     mentions-legales/  ·  confidentialite/  ·  conditions/  ·  404

   Les jetons sont exactement ceux d'`index.html`, recopiés à
   l'identique. C'est délibéré : ils sont la définition du noir de la
   maison, pas une variation. Si l'un d'eux bouge là-bas, il bouge ici.

   Ce que ce fichier ajoute, l'accueil ne l'a pas : une colonne de
   lecture. L'accueil est fait de blocs courts ; ces pages sont faites
   de paragraphes qu'on lit en entier. D'où `--mesure`, la seule
   décision typographique propre à ce fichier.
   ══════════════════════════════════════════════════════════════════ */

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

:root {
  --noir:      #000000;
  --blanc:     #ffffff;

  /* Le même plancher de contraste que partout : 4,5:1 pour du texte.
       --texte  15:1   --dim  7:1   --faible  4,4:1
     --ornement et --filet ne portent jamais de texte — puces, traits,
     bordures. Dès qu'ils s'en retrouvent chargés, c'est un bug. */
  --texte:     rgba(255, 255, 255, 0.86);
  --dim:       rgba(255, 255, 255, 0.58);
  --faible:    rgba(255, 255, 255, 0.44);
  --ornement:  rgba(255, 255, 255, 0.22);
  --filet:     rgba(255, 255, 255, 0.09);
  --surface:   rgba(255, 255, 255, 0.035);

  --rayon:     6px;
  --rayon-lg:  20px;

  --marge:     clamp(20px, 5vw, 40px);
  --large:     1040px;

  /* La colonne de lecture. 680 px à 17 px de corps font ~72 signes par
     ligne — le haut de la fourchette confortable. Au-delà, l'œil rate
     le retour à la ligne suivante, et une page de mentions légales est
     déjà bien assez pénible à lire comme ça. */
  --mesure:    680px;

  /* CAPITALES → --sans, phrases → --ui. La règle de l'accueil, et elle
     compte double ici : ces pages sont presque entièrement en bas de
     casse, donc Josefin n'y touche que les titres et les étiquettes. */
  --sans: 'Josefin Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;
}

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

body {
  background: var(--noir);
  color: var(--texte);
  font-family: var(--ui);
  font-size: 17px;
  line-height: 1.7;   /* plus aéré que l'accueil (1.65) : on lit long */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ── Fond ──
   Le halo de l'accueil, remonté et affaibli. Sur une page de texte il
   ne doit pas se voir : il évite juste que le noir devienne un mur. */
.fond {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 45% at 50% 0%, rgba(255,255,255,0.04) 0%, transparent 70%);
}

.fond::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  opacity: 0.4;
}

.enveloppe {
  width: 100%;
  max-width: var(--large);
  margin: 0 auto;
  padding-inline: var(--marge);
}

/* ── En-tête ──
   Identique à celui de l'accueil, au fil d'Ariane près : d'ici, le
   logo de la maison ramène chez elle. C'est le même geste que dans le
   fil des pages produit — l'anneau ne signe pas la page, il dit d'où
   elle vient. */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: saturate(140%) blur(18px);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color .35s ease;
}

header.pose { border-bottom-color: var(--filet); }

.barre {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--blanc);
}

.anneau { width: 20px; height: 20px; flex: none; color: currentColor; }
.anneau svg { width: 100%; height: 100%; display: block; }

.marque-mot {
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0.30em;
  text-indent: 0.30em;
  text-transform: uppercase;
  white-space: nowrap;
}

.liens { display: flex; align-items: center; gap: 28px; }

.liens a {
  color: var(--dim);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: color .2s ease;
}

.liens a:hover { color: var(--blanc); }

/* Sous 560 px le mot disparaît et l'anneau reste seul, dans une zone
   tactile de 44 px. Même arbitrage que sur les pages produit. */
@media (max-width: 560px) {
  .liens { gap: 18px; }
  .liens a { font-size: 11.5px; letter-spacing: .1em; }
  .marque-mot { font-size: 12px; letter-spacing: .24em; text-indent: .24em; }
}

@media (max-width: 400px) {
  .marque-mot { display: none; }
  .marque { min-width: 44px; min-height: 44px; justify-content: center; }
}

/* ══ Le document ══ */
.document {
  max-width: calc(var(--mesure) + var(--marge) * 2);
  padding-block: clamp(56px, 9vh, 88px) clamp(72px, 12vh, 110px);
}

/* Le sourcil : où l'on est, avant de dire ce que c'est. */
.sourcil {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: var(--faible);
  margin-bottom: 18px;
}

h1 {
  font-family: var(--sans);
  font-size: clamp(28px, 6vw, 40px);
  font-weight: 300;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--blanc);
  margin-bottom: 22px;
  text-wrap: balance;
}

/* Le chapeau dit en trois lignes ce que la page met deux écrans à
   dire. Sur une page légale c'est le seul paragraphe que la plupart
   des gens liront — il a intérêt à être exact. */
/* Le seul titre du site qui contienne un mot de quinze lettres. Sur un
   écran de 320 px, « CONFIDENTIALITÉ » à 28 px et 0,16 em de chasse
   mesure 321 px pour une colonne de 280 : la page se met à défiler
   horizontalement. On resserre plutôt que de couper le mot — une
   césure au milieu d'un titre en capitales est pire que le défaut
   qu'elle corrige. */
@media (max-width: 400px) {
  h1 {
    font-size: clamp(21px, 6.4vw, 28px);
    letter-spacing: 0.09em;
    text-indent: 0.09em;
  }
}

.chapeau {
  font-size: clamp(17.5px, 2.2vw, 19.5px);
  font-weight: 300;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.92);
  text-wrap: pretty;
}

.maj {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--filet);
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);   /* était --faible : c'est une date, ça se lit */
}

.document section { margin-top: clamp(46px, 7vh, 64px); }

h2 {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-transform: uppercase;
  color: var(--blanc);
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--filet);
}

h3 {
  font-size: 16.5px;
  font-weight: 600;
  color: var(--blanc);
  margin: 30px 0 8px;
}

.document p { margin-bottom: 16px; color: var(--texte); text-wrap: pretty; }
.document p:last-child { margin-bottom: 0; }

.document a {
  color: var(--blanc);
  text-decoration: underline;
  text-decoration-color: var(--ornement);
  text-underline-offset: 3px;
  transition: text-decoration-color .2s ease;
}

.document a:hover { text-decoration-color: currentColor; }

.document strong { color: var(--blanc); font-weight: 600; }

.document ul, .document ol { margin: 0 0 18px; padding-left: 0; list-style: none; }
.document ol { counter-reset: n; }

.document li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  color: var(--texte);
}

/* La puce est un filet court, pas un rond : le vocabulaire du site est
   fait de traits de lumière. */
.document ul > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 13px;
  width: 9px;
  height: 1px;
  background: var(--ornement);
}

.document ol > li::before {
  counter-increment: n;
  content: counter(n) '.';
  position: absolute;
  left: 0;
  top: 0;
  font-variant-numeric: tabular-nums;
  color: var(--dim);   /* était --faible : un numéro d'alinéa se cite */
}

code {
  font-family: var(--mono);
  font-size: 0.87em;
  color: var(--blanc);
  background: var(--surface);
  padding: 1px 5px;
  border-radius: 4px;
}

/* ── La fiche d'identité ──
   Un <dl> plutôt qu'un tableau : ce sont des paires étiquette/valeur,
   pas une matrice. En grille à deux colonnes tant qu'il y a la place,
   empilé en dessous — un tableau, lui, aurait débordé sur mobile.

   C'est le seul endroit du site qui porte l'identité de l'éditeur.
   Les autres pages y renvoient au lieu de la recopier : une donnée
   légale écrite à trois endroits finit par diverger des deux autres. */
.fiche {
  display: grid;
  grid-template-columns: minmax(150px, 210px) 1fr;
  gap: 1px;
  background: var(--filet);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  overflow: hidden;
  margin-bottom: 18px;
}

.fiche dt, .fiche dd {
  background: #050505;   /* opaque : sinon le filet transparaît */
  padding: 13px 18px;
}

.fiche dt {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  display: flex;
  align-items: center;
}

.fiche dd { color: var(--texte); }
.fiche dd a { color: var(--blanc); }

@media (max-width: 600px) {
  .fiche { grid-template-columns: 1fr; }
  .fiche dt { padding-bottom: 0; background: #050505; }
  .fiche dd { padding-top: 4px; }
}

/* ── Les tableaux ──
   Traitement × finalité × base légale × durée, ça se croise : c'est la
   définition d'un tableau. Il défile dans son propre cadre quand il ne
   tient pas — la page, elle, ne bouge jamais horizontalement. */
.cadre-table {
  overflow-x: auto;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  margin-bottom: 18px;
  -webkit-overflow-scrolling: touch;
}

table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 15px; }

/* ── Le tableau qui déborde ──
   Cinq colonnes ne tiennent pas dans une colonne de lecture : à 680 px,
   « Adresse IP, date et heure, page demandée… » tombe sur sept lignes,
   et la comparaison d'une ligne à l'autre — tout l'intérêt d'un
   tableau — devient impossible. Celui des traitements sort donc de la
   prose, symétriquement, jusqu'à la largeur de la page.

   Le calcul : la colonne fait --mesure, la page fait --large ; le
   tableau gagne la moitié de la différence de chaque côté. Comme le
   bloc est centré, une marge négative égale à gauche et à droite le
   garde centré en l'élargissant.

   Le seuil de 1120 px, c'est --large plus deux marges de 40 : en
   dessous, le tableau toucherait le bord de la fenêtre. Il reste alors
   dans la colonne, et défile. */
.cadre-table.deborde table { min-width: 780px; }

@media (min-width: 1120px) {
  .cadre-table.deborde {
    width: var(--large);
    margin-inline: calc((var(--mesure) - var(--large)) / 2);
  }
}

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

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

th {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
}

td { color: var(--texte); line-height: 1.55; }
td:first-child { color: var(--blanc); font-weight: 500; }

/* ── L'encart ──
   Pour ce qui compte plus que le paragraphe d'à côté : le consentement
   aux cookies, la clause de sauvegarde des CGU. */
.encart {
  border: 1px solid var(--filet);
  border-left: 2px solid var(--ornement);
  border-radius: var(--rayon);
  background: var(--surface);
  padding: 22px 24px;
  margin-bottom: 18px;
}

.encart > :last-child { margin-bottom: 0; }

.encart strong { display: block; margin-bottom: 6px; }

/* ── Le sommaire ──
   Deux pages sur trois dépassent l'écran. Une liste de liens en tête
   coûte dix lignes et évite de faire défiler à l'aveugle. */
.sommaire {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}

.sommaire a {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  text-decoration: none;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 7px 13px;
  transition: color .2s ease, border-color .2s ease;
}

.sommaire a:hover { color: var(--blanc); border-color: var(--ornement); }

/* Une ancre visée depuis le sommaire ne doit pas finir sous l'en-tête
   collant. 64 px de barre + une respiration. */
.document section { scroll-margin-top: 84px; }

/* ── Pied ──
   Le même que l'accueil, plus la rangée des pages légales. Sur mobile
   les deux rangées s'empilent au lieu de se serrer. */
footer {
  border-top: 1px solid var(--filet);
  padding-block: 40px 44px;
}

.pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 26px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--dim);
}

.pied nav { display: flex; flex-wrap: wrap; gap: 16px 26px; }
.pied a { color: var(--dim); text-decoration: none; transition: color .2s ease; }
.pied a:hover { color: var(--blanc); }
.pied a[aria-current="page"] { color: var(--blanc); }

/* ══ La page 404 ══
   Centrée, courte, et surtout : elle propose une sortie. Une 404 qui
   ne fait que constater l'erreur laisse le visiteur dans l'impasse. */
.perdu {
  min-height: calc(100dvh - 64px - 132px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: 70px;
}

.perdu .code {
  font-family: var(--sans);
  font-size: clamp(52px, 14vw, 82px);
  font-weight: 200;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  color: var(--blanc);
  line-height: 1;
  margin-bottom: 26px;
}

.perdu h1 {
  font-size: clamp(15px, 3.4vw, 19px);
  font-weight: 400;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  margin-bottom: 18px;
}

.perdu p { max-width: 460px; color: var(--dim); margin-bottom: 34px; }

.retour {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  text-transform: uppercase;
  color: var(--blanc);
  text-decoration: none;
  border: 1px solid var(--ornement);
  border-radius: var(--rayon);
  padding: 12px 22px;
  transition: border-color .25s ease, background .25s ease;
}

.retour:hover { border-color: rgba(255,255,255,0.4); background: var(--surface); }
.retour svg { width: 15px; height: 15px; transition: transform .3s cubic-bezier(.22,1,.36,1); }
.retour:hover svg { transform: translateX(-4px); }

/* Le seul mouvement de ces pages est la transition de l'en-tête. On la
   coupe aussi : la règle ne coûte rien et vaut pour ce qui viendra. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── Impression ──
   Des mentions légales, ça s'imprime et ça se classe. Sur du papier,
   le noir de la maison coûte une cartouche et se lit mal : la page
   passe en noir sur blanc, sans en-tête ni fond. */
@media print {
  .fond, header, .sommaire, footer { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .document { max-width: none; padding: 0; }
  h1, h2, h3, .fiche dd, .document strong, .document a { color: #000; }
  .sourcil, .maj, .fiche dt, th { color: #444; }
  .fiche dt, .fiche dd { background: #fff; }
  .fiche, .encart, .cadre-table { border-color: #bbb; break-inside: avoid; }
  .document a { text-decoration: none; }
  .document a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
}