/* =========================================================================
   Pages legales — theme CLAIR.

   Mentions legales, confidentialite, conditions d'utilisation, politique
   d'utilisation, remboursement. Ces cinq pages etaient du texte blanc sur
   fond noir : illisible sur la longueur, et rien n'y hierarchisait quoi que
   ce soit.

   Le parti pris : un document, pas une page de produit. Fond blanc casse
   chaud (#faf9f5, le meme que le blog), corps en serif pour la lecture
   longue, titres en Inter pour rester dans la marque, et une colonne etroite
   qui borne la ligne a une longueur confortable. L'en-tete et le pied restent
   sombres : l'alternance est assumee, elle separe le document du reste du
   site.

   Le violet de marque n'apparait pas : sur un document juridique, il n'y a
   rien a mettre en avant.
   ========================================================================= */

body.pages-legales {
  --pl-fond: #faf9f5;
  --pl-encre: #141413;
  --pl-corps: #2b2926;
  --pl-discret: #6b6862;
  --pl-filet: rgba(20, 20, 19, 0.14);

  background: var(--pl-fond) !important;
  color: var(--pl-corps);
}

/* Vuetify pose ses propres fonds sur ces trois conteneurs. Sans cela, la
   couleur du body ne se voit nulle part. */
body.pages-legales .v-application,
body.pages-legales .v-application--wrap,
body.pages-legales .v-main,
body.pages-legales .v-main__wrap,
body.pages-legales .blog,
body.pages-legales .ethics-page {
  background: transparent !important;
}

/* ======================= Titre ======================= */

body.pages-legales .blog > .hero {
  padding: 88px 24px 8px;
  background: none !important;
}

body.pages-legales .blog > .hero h1 {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(38px, 5.4vw, 62px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.032em;
  color: var(--pl-encre);
}

/* ======================= Colonne de lecture ======================= */

body.pages-legales .content-container {
  max-width: 748px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

body.pages-legales .policy-content {
  font-family: Georgia, "Times New Roman", "Liberation Serif", serif;
  font-size: 17.5px;
  line-height: 1.66;
  color: var(--pl-corps);
  padding-bottom: 104px;
}

/* La date de mise a jour tient lieu d'en-tete de document : elle est isolee
   du corps par un filet, comme la date d'effet chez ceux dont on s'inspire. */
body.pages-legales .policy-content .last-updated {
  margin: 0 0 40px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--pl-filet);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--pl-encre);
}

/* ======================= Titres de section ======================= */

body.pages-legales .policy-content h2 {
  margin: 56px 0 18px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.018em;
  color: var(--pl-encre);
}

body.pages-legales .policy-content h3 {
  margin: 36px 0 12px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--pl-encre);
}

body.pages-legales .policy-content h2:first-child,
body.pages-legales .policy-content h3:first-child {
  margin-top: 0;
}

/* ======================= Corps ======================= */

body.pages-legales .policy-content p {
  margin: 0 0 20px;
  color: var(--pl-corps);
}

body.pages-legales .policy-content strong,
body.pages-legales .policy-content b {
  font-weight: 700;
  color: var(--pl-encre);
}

body.pages-legales .policy-content ul,
body.pages-legales .policy-content ol {
  margin: 0 0 20px;
  padding-left: 26px;
}

body.pages-legales .policy-content li {
  margin-bottom: 10px;
  color: var(--pl-corps);
}

body.pages-legales .policy-content li::marker {
  color: var(--pl-discret);
}

/* Le lien se signale par son soulignement, pas par une couleur : dans un
   document juridique, une couleur d'accent hierarchise ce qui ne doit pas
   l'etre. */
body.pages-legales .policy-content a {
  color: var(--pl-encre);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(20, 20, 19, 0.4);
}

body.pages-legales .policy-content a:hover {
  text-decoration-color: var(--pl-encre);
}

body.pages-legales .policy-content table {
  width: 100%;
  margin: 0 0 24px;
  border-collapse: collapse;
  font-size: 15.5px;
}

body.pages-legales .policy-content th,
body.pages-legales .policy-content td {
  padding: 11px 14px;
  border: 1px solid var(--pl-filet);
  text-align: left;
  vertical-align: top;
}

body.pages-legales .policy-content th {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--pl-encre);
  background: rgba(20, 20, 19, 0.04);
}

body.pages-legales .policy-content hr {
  margin: 44px 0;
  border: 0;
  border-top: 1px solid var(--pl-filet);
}

/* ======================= Telephone ======================= */

@media (max-width: 599px) {
  body.pages-legales .blog > .hero {
    padding: 56px 20px 4px;
  }
  body.pages-legales .content-container {
    padding-left: 20px;
    padding-right: 20px;
  }
  body.pages-legales .policy-content {
    font-size: 17px;
    padding-bottom: 72px;
  }
  body.pages-legales .policy-content h2 {
    margin-top: 44px;
    font-size: 23px;
  }
}

/* =========================================================================
   En-tete sur fond clair

   L'en-tete a deja ses deux themes, pilotes par des variables dans
   entete.css : le clair est celui par defaut, le sombre s'active avec
   `body.dark-header`. Ces pages ayant perdu cette classe, la barre est donc
   deja en clair. Il ne reste qu'a accorder son fond blanc pur au blanc casse
   du document, et a corriger le logo, que l'application Vue choisit sur son
   propre drapeau et non sur le theme de l'en-tete.
   ========================================================================= */

body.pages-legales {
  --sz-ent-fond: var(--pl-fond);
  --sz-ent-panneau: #ffffff;
}

/* Le logo est pose en image de fond par Vuetify, sur la source claire prevue
   pour un fond sombre. On prend la version sombre, comme le pied clair. */
body.pages-legales header .sz-logo-link .v-image__image {
  background-image: url("/img/static/sinozia-logo-dark.svg") !important;
}

/* =========================================================================
   Politique d'utilisation

   Cette page-la n'a pas la structure des quatre autres : elle a son propre
   gabarit sombre, avec une biere d'accueil, un sommaire colle et des sections
   numerotees. Son dessin est bon, c'est sa palette qui detonne une fois les
   quatre autres passees en clair. On garde donc la mise en page et on ne
   reprend que les couleurs.

   Le violet subsiste ici, sur la numerotation et sur l'element courant du
   sommaire : c'est le seul endroit de ces cinq pages ou une couleur porte une
   information, celle de savoir ou l'on se trouve dans un long document.
   ========================================================================= */

body.pages-legales .ethics-hero {
  background: none;
  padding-top: 120px;
  padding-bottom: 64px;
}

body.pages-legales .ethics-badge {
  color: #5b3fc4;
  background: rgba(98, 67, 206, 0.07);
  border-color: rgba(98, 67, 206, 0.22);
}

body.pages-legales .ethics-badge::before {
  background: #6243ce;
  box-shadow: none;
}

body.pages-legales .ethics-main-title {
  color: var(--pl-encre) !important;
}

body.pages-legales .ethics-intro {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  color: var(--pl-corps);
}

body.pages-legales .ethics-updated {
  color: var(--pl-discret);
}

/* ---- Sommaire ---- */

body.pages-legales .ethics-toc-title {
  color: var(--pl-discret);
}

body.pages-legales .ethics-toc-list {
  border-left-color: var(--pl-filet);
}

body.pages-legales .ethics-toc-list a {
  color: var(--pl-discret);
}

body.pages-legales .ethics-toc-list a:hover {
  color: var(--pl-encre);
  border-left-color: rgba(98, 67, 206, 0.5);
}

body.pages-legales .ethics-toc-list a.is-active {
  color: var(--pl-encre);
  border-left-color: #6243ce;
  background: linear-gradient(90deg, rgba(98, 67, 206, 0.07) 0%, transparent 80%);
}

body.pages-legales .ethics-toc-list a.is-active .ethics-toc-num,
body.pages-legales .ethics-toc-num {
  color: rgba(98, 67, 206, 0.75);
}

/* ---- Sections ---- */

body.pages-legales .ethics-content section {
  border-bottom-color: var(--pl-filet);
}

body.pages-legales .ethics-content .ethics-section-num {
  color: #6243ce;
}

body.pages-legales .ethics-content h2 {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--pl-encre) !important;
}

body.pages-legales .ethics-content p,
body.pages-legales .ethics-content ul li {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17.5px;
  color: var(--pl-corps);
}

body.pages-legales .ethics-content ul li::marker {
  color: var(--pl-discret);
}

body.pages-legales .ethics-content a {
  color: var(--pl-encre);
  border-bottom-color: rgba(20, 20, 19, 0.35);
}

body.pages-legales .ethics-content a:hover {
  color: var(--pl-encre);
  border-bottom-color: var(--pl-encre);
}

body.pages-legales .ethics-content strong {
  color: var(--pl-encre);
  font-weight: 700;
}