/* ============================================================
   AGENT NEO — pages légales
   Même direction que la page d'accueil : un imprimé d'atelier.
   Les jetons sont repris à l'identique de index.html ; seule la
   mise en page change, parce qu'un texte juridique se lit en
   colonne étroite et se cite par numéro d'article.
   ============================================================ */

:root {
  --papier:      #E3E1D6;
  --papier-2:    #D5D2C4;
  --encre:       #17191B;
  --encre-douce: #5B5F58;
  --mimeo:       #4B2E83;
  --tampon:      #B33A2B;

  --display: 'Archivo', system-ui, sans-serif;
  --mono: 'Martian Mono', ui-monospace, monospace;

  --marge: clamp(1.25rem, 5vw, 4.5rem);
  --filet: 1px solid color-mix(in srgb, var(--encre) 18%, transparent);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--display);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(23,25,27,.012) 3px 4px);
}

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

:focus-visible { outline: 2px solid var(--mimeo); outline-offset: 3px; }

a { color: var(--mimeo); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }

.enveloppe {
  max-width: 68rem;
  margin: 0 auto;
  padding-inline: var(--marge);
}

.etiquette {
  font-family: var(--mono);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

/* ---------- Bandeau ---------- */
.bandeau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.35rem;
  border-bottom: 2px solid var(--encre);
}

/* Même marque que l'accueil : le monogramme puis le nom, ici cliquable
   puisqu'il ramène à la page d'accueil. */
.marque {
  display: flex;
  align-items: center;
  gap: clamp(.55rem, 2vw, .8rem);
  min-width: 0;
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
}

.marque-logo {
  display: block;
  flex-shrink: 0;
  /* `aspect-ratio` réserve le carré avant l'arrivée de l'image : le bandeau
     ne saute pas au chargement. */
  width: clamp(1.75rem, 6.5vw, 2.25rem);
  height: auto;
  aspect-ratio: 1;
}

.lien-console {
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  padding: .5rem .9rem;
  border: 1.5px solid var(--encre);
  transition: background-color .18s ease, color .18s ease;
}
.lien-console:hover { background: var(--encre); color: var(--papier); }

/* ---------- Cartouche d'en-tête ---------- */
.entete { padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(1.5rem, 4vw, 2.5rem); }

.titre {
  margin: .9rem 0 0;
  font-size: clamp(2rem, 6.5vw, 3.75rem);
  font-weight: 800;
  font-stretch: 118%;
  line-height: .98;
  letter-spacing: -.026em;
  text-wrap: balance;
}

.chapo {
  margin: clamp(1.25rem, 3vw, 1.75rem) 0 0;
  max-width: 40em;
  font-size: clamp(1rem, .97rem + .3vw, 1.2rem);
  line-height: 1.55;
  color: var(--encre-douce);
  text-wrap: pretty;
}

/* Le cartouche : mêmes cases que le bordereau d'accueil. */
.cartouche {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  background: var(--papier-2);
  border: 2px solid var(--encre);
  box-shadow: 8px 8px 0 rgba(23,25,27,.10);
  margin-block: clamp(2rem, 5vw, 3rem);
}

.case { padding: .95rem 1.1rem; border-right: var(--filet); }
.case:last-child { border-right: 0; }
.case-valeur {
  display: block;
  margin-top: .3rem;
  font-family: var(--mono);
  font-size: .8rem;
  font-weight: 600;
  font-stretch: 90%;
  line-height: 1.4;
  word-break: break-word;
}

/* ---------- Sommaire ---------- */
.sommaire {
  border-top: 2px solid var(--encre);
  border-bottom: 2px solid var(--encre);
  padding-block: 1.5rem;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}
.sommaire ol {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: .45rem 2rem;
  counter-reset: som;
}
.sommaire li { counter-increment: som; }
.sommaire a {
  font-family: var(--mono);
  font-size: .78rem;
  font-stretch: 88%;
  text-decoration: none;
  color: inherit;
  display: flex;
  gap: .8rem;
}
.sommaire a::before {
  content: counter(som, decimal-leading-zero);
  font-weight: 700;
  color: var(--mimeo);
  flex: 0 0 auto;
}
.sommaire a:hover { text-decoration: underline; }

/* ---------- Articles ---------- */
.corps { counter-reset: art; padding-bottom: clamp(3rem, 7vw, 5rem); }

.article {
  counter-increment: art;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 42em);
  gap: 0 1.75rem;
  padding-block: clamp(1.75rem, 4vw, 2.5rem);
  border-top: var(--filet);
  scroll-margin-top: 1.5rem;
}
.article:first-child { border-top: 0; }

.article::before {
  content: counter(art, decimal-leading-zero);
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 700;
  color: var(--mimeo);
  padding-top: .45rem;
}

.article > * { grid-column: 2; }

.article h2 {
  margin: 0 0 .9rem;
  font-size: clamp(1.2rem, 1.1rem + .5vw, 1.55rem);
  font-weight: 700;
  font-stretch: 110%;
  line-height: 1.2;
  letter-spacing: -.012em;
}

.article h3 {
  margin: 1.6rem 0 .5rem;
  font-family: var(--mono);
  font-size: .8rem;
  font-weight: 700;
  font-stretch: 88%;
  letter-spacing: .02em;
}

.article p { margin: 0 0 .9rem; color: var(--encre-douce); }
.article p:last-child { margin-bottom: 0; }
.article strong { color: var(--encre); font-weight: 700; }

.article ul { margin: 0 0 .9rem; padding-left: 1.15rem; color: var(--encre-douce); }
.article li { margin-bottom: .45rem; }
.article li::marker { color: var(--mimeo); }

code {
  font-family: var(--mono);
  font-size: .82em;
  font-stretch: 88%;
  background: var(--papier-2);
  padding: .1em .35em;
  border: var(--filet);
}

/* ---------- Tableau (destinataires, cookies) ---------- */
.tableau-enveloppe { overflow-x: auto; margin-bottom: .9rem; }

table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  background: var(--papier-2);
  border: 2px solid var(--encre);
}
th, td {
  text-align: left;
  padding: .7rem .9rem;
  border-bottom: var(--filet);
  vertical-align: top;
  font-size: .9rem;
}
th {
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--encre-douce);
  border-bottom: 2px solid var(--encre);
  white-space: nowrap;
}
td:first-child { font-family: var(--mono); font-size: .78rem; font-stretch: 88%; }
td { color: var(--encre-douce); }
tr:last-child td { border-bottom: 0; }

/* ---------- Encart d'insistance ---------- */
.encart {
  border: 2px solid var(--tampon);
  padding: 1.1rem 1.25rem;
  margin-bottom: .9rem;
}
.encart p { color: var(--encre); }
.encart p:last-child { margin-bottom: 0; }
.encart .etiquette { color: var(--tampon); }

/* ---------- Pied ---------- */
.pied {
  padding-block: clamp(2.5rem, 6vw, 4rem);
  border-top: 2px solid var(--encre);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
}
.pied p { margin: 0; color: var(--encre-douce); font-size: .9rem; max-width: 30em; }

.nav-legale {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.nav-legale a { color: inherit; text-decoration: none; border-bottom: 1.5px solid transparent; }
.nav-legale a:hover { border-bottom-color: var(--encre); }
.nav-legale a[aria-current="page"] { color: var(--mimeo); border-bottom-color: var(--mimeo); }

@media (max-width: 40rem) {
  .article { grid-template-columns: 1fr; gap: 0; }
  .article::before { grid-column: 1; padding-top: 0; padding-bottom: .5rem; display: block; }
  .article > * { grid-column: 1; }
  .cartouche { box-shadow: 5px 5px 0 rgba(23,25,27,.10); }
}

/* Le bandeau tient sur une ligne jusqu'en bas de gamme : la chasse des
   lettres cède la place que prend le monogramme, plutôt que de renvoyer le
   lien console à la ligne. */
@media (max-width: 34rem) {
  .bandeau { gap: .75rem; }
  .marque { letter-spacing: .22em; }
  .lien-console { padding: .45rem .7rem; letter-spacing: .08em; }
}

/* Galaxy Fold replié, ou un petit écran avec la taille de texte poussée : le
   monogramme porte seul la marque. Pas `display:none` — le nom disparaîtrait
   aussi des lecteurs d'écran, et l'image porte un alt vide. */
@media (max-width: 22rem) {
  .marque-nom {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media print {
  body { background: #fff; }
  .bandeau, .pied, .sommaire { display: none; }
  .article { break-inside: avoid; }
}