/* ==========================================================================
   PAGES DE TEXTE — mentions, confidentialite, remboursement, conditions
   --------------------------------------------------------------------------
   Ces quatre pages n'ont PAS de reference Framer : seule la page d'accueil a
   ete exportee. Leur habillage est donc bati sur le vocabulaire de l'accueil
   — les memes jetons, les memes familles, les memes rythmes — et sur rien
   d'invente par ailleurs.

   Une seule regle de composition : une colonne de lecture etroite. Un texte
   juridique se lit mal sur 1200 px de large.
   ========================================================================== */

.oya-page {
  /* L'en-tete fixe mesure 104 px : 39 pour le bandeau, 65 pour la barre. */
  padding: calc(104px + 80px) 60px 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}

@media (max-width: 1199.98px) { .oya-page { padding: calc(104px + 60px) 40px 90px; } }
@media (max-width: 679.98px)  { .oya-page { padding: calc(104px + 40px) 25px 60px; gap: 40px; } }

/* Le sommaire a gauche, le texte a droite. Au-dessous de 1000 px la colonne
   du sommaire disparait et il repasse au-dessus du texte, borde. */
.oya-page__grille {
  display: grid;
  grid-template-columns: 220px minmax(0, var(--l-lecture));
  gap: 60px;
  width: 100%;
  max-width: calc(220px + 60px + var(--l-lecture));
}

.oya-page__sommaire {
  position: sticky;
  /* 104 px d'en-tete fixe, plus 40 de respiration. */
  top: 144px;
  align-self: start;
  max-height: calc(100vh - 184px);
  overflow-y: auto;
}

.oya-page__sommaire ol {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: partie;
}

.oya-page__sommaire a {
  display: block;
  font-family: var(--f-texte);
  font-size: var(--t-14);
  font-weight: var(--g-500);
  line-height: var(--i-titre);
  color: var(--c-encre-50);
  text-decoration: none;
  border-left: 2px solid transparent;
  padding-left: 12px;
  transition: color 150ms var(--e-survol), border-color 150ms var(--e-survol);
}

.oya-page__sommaire a::before {
  counter-increment: partie;
  content: counter(partie) ".  ";
  color: var(--c-encre-25);
}

.oya-page__sommaire a:hover { color: var(--c-encre); }

/* La partie en cours de lecture. `pages.js` pose l'attribut. */
.oya-page__sommaire a[aria-current="true"] {
  color: var(--c-encre);
  border-left-color: var(--c-encre);
}

@media (max-width: 999.98px) {
  .oya-page__grille {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    max-width: var(--l-lecture);
  }

  .oya-page__sommaire {
    position: static;
    max-height: none;
    padding: 20px;
    border: 1px solid var(--c-encre-10);
    border-radius: var(--r-12);
  }

  .oya-page__sommaire a { border-left: 0; padding-left: 0; }
  .oya-page__sommaire a[aria-current="true"] { border-left: 0; }
}

.oya-page__entete {
  width: 100%;
  max-width: calc(220px + 60px + var(--l-lecture));
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.oya-page__entete > * { max-width: var(--l-lecture); }

.oya-page__titre {
  font-family: var(--f-titre);
  font-size: var(--t-40);
  font-weight: var(--g-600);
  line-height: var(--i-titre);
  letter-spacing: var(--a-titre);
}

@media (max-width: 679.98px) { .oya-page__titre { font-size: var(--t-30); } }

.oya-page__date {
  font-family: var(--f-texte);
  font-size: var(--t-14);
  font-weight: var(--g-400);
  line-height: var(--i-titre);
  color: var(--c-encre-70);
}

/* La colonne de lecture ---------------------------------------------------- */

.oya-page__corps {
  width: 100%;
  max-width: var(--l-lecture);
  font-family: var(--f-texte);
  font-size: var(--t-16);
  font-weight: var(--g-400);
  line-height: var(--i-texte);
  color: var(--c-encre-70);
}

/* Le rythme vertical tient en trois valeurs : 40 px avant une partie, 24 avant
   un sous-titre, 16 entre deux paragraphes. Rien d'autre. */
.oya-page__corps > * + * { margin-top: 16px; }
.oya-page__corps > * + h2 { margin-top: 40px; }
.oya-page__corps > * + h3 { margin-top: 24px; }

/* Un titre vise par un lien du sommaire doit se degager de l'en-tete fixe,
   sinon il se retrouve dessous. */
.oya-page__corps h2 { scroll-margin-top: 144px; }

.oya-page__corps h2 {
  font-family: var(--f-titre);
  font-size: var(--t-25);
  font-weight: var(--g-600);
  line-height: var(--i-titre);
  letter-spacing: var(--a-titre);
  color: var(--c-encre);
}

.oya-page__corps h3 {
  font-family: var(--f-texte);
  font-size: var(--t-18);
  font-weight: var(--g-500);
  line-height: var(--i-titre);
  letter-spacing: var(--a-titre);
  color: var(--c-encre);
}

.oya-page__corps ul,
.oya-page__corps ol { padding-left: 22px; }
.oya-page__corps li + li { margin-top: 8px; }
.oya-page__corps ul { list-style: disc; }
.oya-page__corps ol { list-style: decimal; }

/* Un lien dans un texte juridique doit se voir : il est souligne. */
.oya-page__corps a {
  color: var(--c-encre);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 150ms var(--e-survol);
}
.oya-page__corps a:hover { opacity: 0.6; }

.oya-page__corps strong { font-weight: var(--g-500); color: var(--c-encre); }

/* Un tableau sert aux durees et aux delais ; il deborde plutot que d'ecraser
   ses colonnes. */
.oya-page__corps table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-14);
}
.oya-page__corps th,
.oya-page__corps td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--c-encre-10);
  vertical-align: top;
}
.oya-page__corps th { font-weight: var(--g-500); color: var(--c-encre); }

/* Le marqueur des pages dont le texte n'est pas encore ecrit. Il DOIT se voir :
   une page legale vide qui passe en production est un risque, pas un detail. */
.oya-page__attente {
  padding: 20px;
  border: 1px dashed var(--c-encre-25);
  border-radius: var(--r-12);
  color: var(--c-encre-70);
}
.oya-page__attente::before {
  content: "\26A0\FE0E  ";
}

/* --------------------------------------------------------------------------
   A L'IMPRESSION
   --------------------------------------------------------------------------
   Une page de conditions se lit aussi sur papier, et un client qui imprime ses
   CGV n'a que faire de la barre de navigation ou du pied.
   -------------------------------------------------------------------------- */

@media print {
  .oya-entete-fixe,
  .oya-pied,
  .oya-page__sommaire { display: none; }

  .oya-page { padding: 0; }
  .oya-page__grille { display: block; max-width: none; }
  .oya-page__corps { max-width: none; color: var(--c-encre); }

  /* Un titre ne doit pas rester seul en bas d'une feuille. */
  .oya-page__corps h2,
  .oya-page__corps h3 { break-after: avoid; }
  .oya-page__corps p,
  .oya-page__corps li { orphans: 3; widows: 3; }

  /* L'adresse d'un lien, puisqu'on ne peut pas cliquer sur du papier. */
  .oya-page__corps a::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}


/* ---------------------------------------------------------------------- */
/* Les blocs apportes par les textes du client.                            */
/* Ecrits par `scripts/poser-pages-legales.py` depuis les markdown de       */
/* `OYA/04_Site/Pages_legales/`.                                            */

/* Le genre de la page — « Mentions légales », « Confidentialité » — au-dessus
   du titre. Le titre, lui, est une phrase : « Qui vend, et où nous joindre. » */
.oya-page__genre {
  margin: 0 0 12px;
  font-family: var(--f-texte);
  font-size: var(--t-14);
  font-weight: var(--g-500);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-encre-60);
}

.oya-page__chapo {
  margin: 0 0 24px;
  font-family: var(--f-texte);
  font-size: var(--t-20);
  line-height: var(--i-ample);
  color: var(--c-encre);
}

/* La raison sociale, posee comme une carte de visite : c'est l'information
   qu'un visiteur vient chercher en premier sur une page legale. */
.oya-page__editeur {
  margin: 0 0 40px;
  padding: 16px 20px;
  border-radius: var(--r-12);
  background: var(--c-gris-050);
  font-family: var(--f-texte);
  font-size: var(--t-16);
  line-height: var(--i-texte);
  color: var(--c-encre);
}

.oya-page__cite {
  margin: 0 0 20px;
  padding-left: 20px;
  border-left: 2px solid var(--c-encre-15);
  font-style: normal;
  color: var(--c-encre-70);
}

@media print {
  .oya-page__editeur { background: none; border: 1px solid var(--c-gris-200); }
}