/* ════════════════════════════════════════════════════════════════
   OBSIONIS — page légale
   Même DA « Trajectoire », même jetons. Mais un document de lecture
   n'est pas un hero : pas de faisceau, pas de plan vivant, pas
   d'anneau. Une lampe discrète, un quadrillage fondu, le grain — et
   ensuite on laisse le texte respirer.

   La doctrine des deux couches s'applique telle quelle : la coque
   habille la page, et la fiche d'identité de l'éditeur est un puits
   d'instrument (fond en creux, rayon strict, mono) — une fiche
   d'identité se lit comme un relevé, pas comme un paragraphe.
   ════════════════════════════════════════════════════════════════ */

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

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

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(.95rem, .3vw + .88rem, 1.02rem);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Le grain : la même texture que la page d'accueil, c'est elle qui
   fait lire les deux écrans comme un seul système. */
body::after{
  content:"";
  position:fixed; inset:0;
  z-index:40; pointer-events:none;
  opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{ max-width:100%; display:block; }
h1, h2, h3, p, dl, dd, ul, ol{ margin:0; }
ul, ol{ list-style:none; padding:0; }

a{ color:inherit; }

::selection{ background:var(--accent); color:var(--ink); }

:focus-visible{
  outline:2px solid var(--accent-2);
  outline-offset:3px;
  border-radius:var(--r-sm);
}

.mono{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* Lien d'évitement : hors écran, il revient au premier tabulateur. */
.evitement{
  position:absolute; left:var(--s4); top:var(--s4);
  z-index:60;
  transform:translateY(-200%);
  background:var(--bg-2);
  border:1px solid var(--line-2);
  border-radius:var(--r-sm);
  padding:var(--s3) var(--s4);
  font-size:.82rem;
  text-decoration:none;
  transition:transform var(--t-base) var(--ease);
}
.evitement:focus{ transform:none; }


/* ── Le fond ──────────────────────────────────────────────────*/
.fond{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  overflow:hidden;
}
/* Une seule source, très en retrait : sur un document, la lumière
   accompagne, elle ne met pas en scène. */
.fond__lampe{
  position:absolute;
  top:-46%; left:0; right:0; margin-inline:auto;
  width:min(1100px, 130vw); aspect-ratio:1.1;
  background:var(--halo);
  filter:blur(18px);
  opacity:.7;
}
.fond__grille{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, var(--whisper) 1px, transparent 1px),
    linear-gradient(to bottom, var(--whisper) 1px, transparent 1px);
  background-size:clamp(64px, 8vw, 108px) clamp(64px, 8vw, 108px);
  mask-image:radial-gradient(ellipse 80% 46% at 50% 0%, #000 6%, transparent 74%);
  -webkit-mask-image:radial-gradient(ellipse 80% 46% at 50% 0%, #000 6%, transparent 74%);
  opacity:.5;
}


/* ── Ossature ─────────────────────────────────────────────────*/
.entete, .page, .pied{
  position:relative; z-index:1;
  max-width:74rem;
  margin-inline:auto;
  padding-inline:var(--pad);
}

.entete{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s4);
  padding-block:clamp(1.25rem, 3vh, 2rem);
}

.marque{
  display:inline-flex; align-items:center; gap:7px;
  color:var(--ink);
  text-decoration:none;
}
/* Le symbole ne se retouche jamais : largeur imposée, ratio libre. */
.marque__signal{ width:24px; height:auto; }
.marque__mot{
  font-weight:600;
  font-size:.86rem;
  letter-spacing:.075em;
  text-transform:uppercase;
}

.retour{
  font-size:.72rem;
  letter-spacing:.06em;
  color:var(--muted);
  text-decoration:none;
  transition:color var(--t-base) var(--ease);
}
.retour:hover{ color:var(--accent-2); }


/* ── Titre de page ────────────────────────────────────────────*/
.titre-page{
  padding-block:clamp(3rem, 9vh, 6rem) clamp(2.5rem, 6vh, 4rem);
  border-bottom:1px solid var(--line);
  margin-bottom:clamp(2.5rem, 6vh, 4rem);
}

.etiquette{
  display:block;
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:var(--s5);
}

.titre-page h1{
  font-family:var(--display);
  font-weight:700;
  font-stretch:78%;
  font-size:clamp(2.4rem, 7vw, 4.6rem);
  line-height:.94;
  letter-spacing:-.03em;
}
.titre-page h1 em{
  font-style:normal;
  font-stretch:100%;
  font-weight:400;
  color:var(--lavande);
}
.titre-page__sous{
  color:var(--muted);
  max-width:46ch;
  margin-top:var(--s5);
  text-wrap:pretty;
}
.maj{
  margin-top:var(--s5);
  font-size:.72rem;
  letter-spacing:.05em;
  color:var(--faint);
}


/* ── Corps : sommaire + texte ─────────────────────────────────*/
.corps{
  display:grid;
  grid-template-columns:minmax(0, 14rem) minmax(0, 1fr);
  gap:clamp(2rem, 6vw, 5rem);
  padding-bottom:clamp(4rem, 10vh, 7rem);
}

.sommaire{
  position:sticky;
  top:clamp(1.5rem, 5vh, 3rem);
  align-self:start;
}
.sommaire__titre{
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--faint);
  padding-bottom:var(--s3);
  border-bottom:1px solid var(--line);
}
.sommaire__liste{ margin-top:var(--s3); }
.sommaire__liste a{
  display:grid;
  grid-template-columns:2rem 1fr;
  gap:var(--s2);
  padding:var(--s2) 0;
  font-size:.76rem;
  color:var(--muted);
  text-decoration:none;
  transition:color var(--t-base) var(--ease);
}
.sommaire__liste a span{ color:var(--faint); }
.sommaire__liste a:hover{ color:var(--accent-2); }
.sommaire__liste a:hover span{ color:var(--accent-2); }


/* ── Le texte ─────────────────────────────────────────────────*/
.texte{ max-width:66ch; }

.bloc{
  padding-block:clamp(2rem, 5vh, 3rem);
  border-top:1px solid var(--line);
  /* l'ancre ne doit pas coller au bord haut de la fenêtre */
  scroll-margin-top:clamp(1.5rem, 5vh, 3rem);
}
.bloc:first-child{ border-top:0; padding-top:0; }

.bloc__num{
  font-size:.7rem;
  letter-spacing:.2em;
  color:var(--faint);
  margin-bottom:var(--s3);
}

.texte h2{
  font-family:var(--display);
  font-weight:700;
  font-stretch:78%;
  font-size:clamp(1.5rem, 3vw, 2.1rem);
  line-height:1.04;
  letter-spacing:-.02em;
  margin-bottom:var(--s5);
}
.texte h3{
  font-family:var(--sans);
  font-weight:600;
  font-size:.94rem;
  letter-spacing:.01em;
  color:var(--ink);
  margin:var(--s6) 0 var(--s3);
}
.texte p{
  color:var(--muted);
  text-wrap:pretty;
}
.texte p + p{ margin-top:var(--s4); }
.texte b{ color:var(--ink); font-weight:600; }

.texte a{
  color:var(--accent-2);
  text-decoration:underline;
  text-underline-offset:.18em;
  text-decoration-thickness:1px;
  text-decoration-color:rgba(var(--accent-2-rgb) / .45);
  transition:text-decoration-color var(--t-base) var(--ease);
}
.texte a:hover{ text-decoration-color:var(--accent-2); }

.liste{
  margin-top:var(--s4);
  color:var(--muted);
}
.liste li{
  position:relative;
  padding-left:var(--s5);
  margin-top:var(--s3);
}
/* Un tiret, pas une puce ronde : le vocabulaire de la page est fait
   de traits. */
.liste li::before{
  content:"";
  position:absolute;
  left:0; top:.85em;
  width:10px; height:1px;
  background:var(--line-2);
}

/* Une remarque de second plan — jamais une information nécessaire à
   la compréhension du paragraphe qui précède. */
.note{
  margin-top:var(--s5);
  padding-left:var(--s4);
  border-left:1px solid var(--line-2);
  font-size:.86rem;
  color:var(--faint);
}


/* ── La fiche : puits d'instrument ────────────────────────────
   Fond en creux, rayon strict, aucun dégradé, aucune lueur. */
.fiche{
  background:var(--bg-inst);
  border:1px solid var(--line);
  border-radius:var(--r-inst-lg);
  padding:var(--s5);
  margin-top:var(--s5);
  font-size:.82rem;
}
.fiche > div{
  display:grid;
  grid-template-columns:minmax(0, 12rem) minmax(0, 1fr);
  gap:var(--s3) var(--s4);
  padding:var(--s3) 0;
  border-bottom:1px solid var(--line);
}
.fiche > div:first-child{ padding-top:0; }
.fiche > div:last-child{ padding-bottom:0; border-bottom:0; }
.fiche dt{ color:var(--muted); }
.fiche dd{ color:var(--ink); }
.fiche a{ color:var(--accent-2); text-decoration:none; }
.fiche a:hover{ text-decoration:underline; }

/* Un trou dans le document. En orange d'avertissement — c'est
   exactement son rôle : un seuil approché, quelque chose à traiter
   avant la mise en ligne. Impossible à publier sans le voir. */
.trou{
  color:var(--warn);
  border-bottom:1px dashed rgba(245,169,78,.45);
}


/* ── Une remarque encadrée ───────────────────────────────────
   Réservée à ce qui doit être lu avant le paragraphe suivant :
   l'état du service, la portée d'un titre. Jamais décorative. */
.avis{
  background:var(--bg-2);
  border:1px solid var(--line-2);
  border-left:2px solid var(--accent-2);
  border-radius:var(--r-sm);
  padding:var(--s4) var(--s5);
  margin-bottom:var(--s5);
  color:var(--muted) !important;
  font-size:.92rem;
}

/* Le seuil entre les deux moitiés du document : les CGU s'appliquent
   aujourd'hui, les CGV à l'ouverture. La rupture doit se voir. */
.bloc--seuil{
  border-top:1px solid var(--line-2);
  margin-top:var(--s6);
}
.bloc--seuil .bloc__num{ color:var(--lavande); }

.sommaire__coupe{
  margin:var(--s4) 0 var(--s2);
  padding-top:var(--s3);
  border-top:1px solid var(--line);
  font-size:.64rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--faint);
}


/* ── Passage d'un document à l'autre ─────────────────────────*/
.documents{
  padding-block:clamp(2rem, 5vh, 3rem);
  border-top:1px solid var(--line);
}
.documents__titre{
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--faint);
  margin-bottom:var(--s5);
}
.documents__liste{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr));
  gap:var(--s4);
}
.documents__liste a{
  display:flex; align-items:baseline; gap:var(--s3);
  height:100%;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:var(--s4) var(--s5);
  font-size:.88rem;
  color:var(--muted);
  text-decoration:none;
  transition:border-color var(--t-base) var(--ease),
             color var(--t-base) var(--ease);
}
.documents__liste a span{ color:var(--faint); font-size:.72rem; }
.documents__liste a:hover{
  border-color:var(--accent-2);
  color:var(--ink);
}


/* ── Pied ─────────────────────────────────────────────────────*/
.pied{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:var(--s4);
  padding-block:var(--s5) clamp(1.5rem, 4vh, 2.5rem);
  border-top:1px solid var(--line);
  font-size:.68rem;
  letter-spacing:.06em;
  color:var(--faint);
}
.pied a{
  color:var(--faint);
  text-decoration:none;
  transition:color var(--t-base) var(--ease);
}
.pied a:hover{ color:var(--accent-2); }


/* ── Petits écrans ────────────────────────────────────────────*/
@media (max-width:900px){
  .corps{ grid-template-columns:1fr; gap:var(--s7); }
  /* Empilé, un sommaire collant masquerait le texte : il redevient
     un simple encart en tête de document. */
  .sommaire{
    position:static;
    background:var(--bg-2);
    border:1px solid var(--line);
    border-radius:var(--r-md);
    padding:var(--s4) var(--s5);
  }
  .sommaire__liste a{ padding:var(--s3) 0; }
}

@media (max-width:560px){
  .fiche{ padding:var(--s4); }
  .fiche > div{ grid-template-columns:1fr; gap:2px; }
  .fiche dt{ font-size:.72rem; letter-spacing:.04em; }
  .pied{ flex-direction:column; align-items:flex-start; gap:var(--s2); }
}


/* ── Mouvement réduit ─────────────────────────────────────────*/
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    transition-duration:.001ms !important;
    animation-duration:.001ms !important;
  }
}

@media (forced-colors:active){
  .fond{ display:none; }
}