/* Revicard : les documents legaux.
 *
 *  CETTE FEUILLE COMPLETE CELLE DU PARTENAIRE, elle ne la remplace pas.
 *  Toutes ses classes sont prefixees .lgl- : elles ne peuvent donc rien
 *  ecraser chez lui. Ses couleurs, ses polices et ses rayons sont les siens,
 *  lus dans ses variables : le jour ou il change son bleu, ces pages suivent.
 *
 *  Trois pages tres longues et tres peu illustrees : mentions legales,
 *  conditions, confidentialite. Elles ne cherchent pas a seduire, elles
 *  cherchent a etre lues jusqu'au bout et retrouvees a la ligne pres.
 *
 *  LA HIERARCHIE EST TYPOGRAPHIQUE, PAS DECOREE
 *  Aucun encadre a barre coloree : la charte l'interdit, et sur un document
 *  de cette longueur il decouperait le texte en tranches sans rapport avec
 *  son sens. Ce qui separe les articles ici, c'est la taille, la graisse et
 *  la respiration, plus un filet fonctionnel tres clair.
 *
 *  LE NUMERO D'ARTICLE EST UNE INFORMATION
 *  Il ne decore pas : un utilisateur qui ecrit au support dit  article 7 ,
 *  et le support doit tomber sur le meme paragraphe. Les numeros sont donc
 *  affiches, ancrables, et lies au sommaire.
 *
 *  MESURE DE LIGNE COURTE
 *  70 caracteres au plus. Au dela, l'oeil perd la ligne suivante, et c'est
 *  exactement le genre de texte qu'on abandonne a la troisieme page.
 */

.lgl {
  max-width: 76ch;
  margin: 0 auto;
}

/* ------------------------------------------------------------- le sommaire */

.lgl-somm {
  margin: 0 0 56px;
  padding: 26px 30px 28px;
  border-radius: var(--radius);
  background: var(--glass);
  box-shadow: var(--shadow-sm);
}

.lgl-somm h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 16px;
}

.lgl-somm ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
  counter-reset: somm;
}

.lgl-somm li {
  counter-increment: somm;
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 14px;
  line-height: 1.5;
}

.lgl-somm li::before {
  content: counter(somm);
  font-family: var(--font-text);
  font-size: 11.5px;
  color: var(--brand);
  min-width: 1.4em;
  text-align: right;
  flex: none;
}

.lgl-somm a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.16s var(--ease), border-color 0.16s var(--ease);
}

.lgl-somm a:hover,
.lgl-somm a:focus-visible {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

/* -------------------------------------------------------------- un article */

.lgl-art {
  padding: 40px 0 0;
  scroll-margin-top: 110px;
}

/* Filet fonctionnel entre deux articles : il separe, il ne decore pas. */
.lgl-art + .lgl-art {
  margin-top: 40px;
  border-top: 1px solid var(--line);
}

.lgl-art > h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(19px, 2.2vw, 23px);
  letter-spacing: -0.015em;
  line-height: 1.28;
  color: var(--ink);
  margin: 0;
  display: flex;
  gap: 14px;
  align-items: baseline;
}

.lgl-art > h2 .n {
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 500;
  color: var(--brand);
  flex: none;
  letter-spacing: 0.02em;
}

.lgl-art h3 {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 15.5px;
  color: var(--ink);
  margin: 30px 0 0;
  letter-spacing: -0.005em;
}

.lgl-art p {
  font-size: 15px;
  line-height: 1.72;
  color: var(--muted);
  margin: 16px 0 0;
}

.lgl-art ul,
.lgl-art ol {
  margin: 16px 0 0;
  padding-left: 1.35em;
  display: grid;
  gap: 10px;
}

.lgl-art li {
  font-size: 15px;
  line-height: 1.66;
  color: var(--muted);
}

.lgl-art li::marker {
  color: var(--muted);
}

.lgl-art strong {
  font-weight: 600;
  color: var(--ink);
}

.lgl-art a {
  color: var(--brand);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 35%, transparent);
}

.lgl-art a:hover,
.lgl-art a:focus-visible {
  border-bottom-color: var(--brand);
}

/* ------------------------------------------- l'identite, en liste de termes
 *  Une definition list plutot qu'un tableau : ce sont des paires, pas des
 *  colonnes, et sur un telephone un tableau de deux colonnes se retrouve
 *  toujours a deborder.
 */

.lgl-id {
  margin: 22px 0 0;
  display: grid;
  gap: 0;
}

.lgl-id > div {
  display: grid;
  grid-template-columns: minmax(0, 15em) minmax(0, 1fr);
  gap: 8px 24px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

.lgl-id > div:first-child {
  border-top: 1px solid var(--line);
}

.lgl-id dt {
  font-family: var(--font-text);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  align-self: center;
}

.lgl-id dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  font-weight: 500;
  align-self: center;
}

/* Les identifiants d'entreprise se recopient chiffre a chiffre : chasse fixe,
   et les chiffres alignes. */
.lgl-id dd.num {
  font-family: var(--font-text);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

@media (max-width: 620px) {
  .lgl-id > div {
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 14px 0;
  }
}

/* ------------------------------------------- le tableau des sous-traitants */

.lgl-tab {
  margin: 22px 0 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.lgl-tab table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
}

.lgl-tab th,
.lgl-tab td {
  text-align: left;
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.5;
  vertical-align: top;
}

.lgl-tab th {
  font-family: var(--font-text);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}

.lgl-tab td {
  color: var(--muted);
}

.lgl-tab td:first-child {
  color: var(--ink);
  font-weight: 550;
  white-space: nowrap;
}

/* ------------------------------------------------ le point qu'on doit lire
 *  Reserve aux quelques passages que la loi veut voir mis en evidence : la
 *  renonciation au droit de retractation, la duree d'engagement. Une lueur
 *  diffuse et un fond tres doux, aucun contour, aucune barre laterale.
 */

.lgl-cle {
  margin: 26px 0 0;
  padding: 24px 28px;
  border-radius: var(--radius);
  background: radial-gradient(
      120% 140% at 12% 0%,
      color-mix(in srgb, var(--brand) 11%, transparent),
      transparent 62%
    ),
    var(--glass);
  box-shadow: var(--shadow-sm);
}

.lgl-cle b {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  margin: 0 0 8px;
  letter-spacing: -0.005em;
}

.lgl-cle p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.66;
  color: var(--muted);
}

.lgl-cle p + p {
  margin-top: 12px;
}

/* ------------------------------------------------------------ la date, en tete */

.lgl-date {
  font-family: var(--font-text);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 18px 0 0;
}

/* --------------------------------------------------- les liens entre documents */

.lgl-voisins {
  margin: 64px 0 0;
  padding: 28px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
}

.lgl-voisins a {
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.16s var(--ease), border-color 0.16s var(--ease);
}

.lgl-voisins a:hover,
.lgl-voisins a:focus-visible {
  color: var(--brand);
  border-bottom-color: var(--brand);
}