/* Pages réglementaires — mentions légales, confidentialité, cookies.
   Feuille autonome : app.css est issu de less/app.less, mais les deux ont
   divergé et lessc n'est plus installé. Y ajouter ces règles serait les exposer
   à disparaître à la première recompilation. */

/* ------------------------------------------------------------ bandeau titre */
.page-legale-entete {
  background-color: var(--marque-fond-sombre);
  color: #fff;
  padding: 96px 0 44px;
  margin-bottom: 48px;
  border-bottom: 4px solid var(--marque-accent);
}
.page-legale-entete h1 {
  font-family: var(--marque-titre);
  font-weight: 200;
  font-size: 38px;
  line-height: 1.2;
  color: #fff;
  margin: 0;
  letter-spacing: -0.01em;
}
.page-legale-entete .accroche {
  color: #9a9a9a;
  font-size: 14px;
  margin: 10px 0 0;
  max-width: 60ch;
}

/* ------------------------------------------------------------------ contenu */
.page-legale {
  padding-bottom: 72px;
}
.page-legale .contenu {
  max-width: 68ch;   /* au-delà, l'œil perd la ligne suivante */
}
.page-legale h2 {
  font-family: var(--marque-titre);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  color: var(--marque-fond-sombre);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 44px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--marque-filet);
}
.page-legale h2:first-child {
  margin-top: 0;
}
.page-legale p,
.page-legale li {
  font-size: 14px;
  line-height: 1.75;
  color: #444;
}
.page-legale p {
  margin: 0 0 14px;
}
.page-legale ul {
  margin: 0 0 18px 18px;
}
.page-legale li {
  margin-bottom: 8px;
}
.page-legale a {
  color: var(--marque-accent-sombre);
  text-decoration: underline;
}
.page-legale a:hover {
  color: var(--marque-fond-sombre);
}
.page-legale strong {
  color: var(--marque-fond-sombre);
}
.page-legale code {
  background: #f4f4f4;
  border: 1px solid var(--marque-filet);
  color: var(--marque-accent-sombre);
  font-size: 12px;
  padding: 1px 5px;
}

/* -------------------------------------------------------------------- table */
.page-legale table {
  width: 100%;
  margin: 0 0 20px;
  border-collapse: collapse;
  font-size: 13px;
}
.page-legale table th {
  text-align: left;
  font-family: var(--marque-titre);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #777;
  padding: 0 14px 8px 0;
  border-bottom: 2px solid var(--marque-fond-sombre);
}
.page-legale table td {
  padding: 12px 14px 12px 0;
  border-bottom: 1px solid #ececec;
  vertical-align: top;
  line-height: 1.6;
  color: #444;
}

/* ------------------------------------------- liens légaux du pied de page */
/* Bande pleine largeur, posée sous la zone carte dont la hauteur est figée.
   L'insérer à l'intérieur ferait déborder le contenu sur le fond blanc. */
/* Ne jamais poser de fond sur html pour combler un vide en bas de page :
   flexslider place la bannière d'accueil en z-index négatif, et celle-ci n'est
   visible que parce que le fond du body se propage au canevas. Donner un fond à
   html rompt cette propagation, le body peint son propre blanc par-dessus, et
   la bannière disparaît. */
.liens-legaux {
  background-color: var(--marque-fond-sombre);
  color: var(--marque-texte-faible);
  font-size: 12px;
  padding: 22px 0 26px;
  border-top: 1px solid var(--marque-filet-sombre);
}
.liens-legaux a {
  color: #cfcfcf;
  text-decoration: none;
}
.liens-legaux a:hover {
  color: var(--marque-accent);
  text-decoration: none;
}
.liens-legaux .separateur {
  color: #555;
  padding: 0 4px;
}

@media (max-width: 767px) {
  .page-legale-entete {
    padding: 72px 0 32px;
    margin-bottom: 32px;
  }
  .page-legale-entete h1 {
    font-size: 28px;
  }
}

/* ------------------------------------- liens de la zone coordonnées du pied */
/* Ce lien vit dans un <p> hors du bloc <address> : la règle de circle.css qui
   grise les autres liens ne l'atteint pas, et il retombait sur le bleu par
   défaut de Bootstrap. */
footer .info .location p a {
  color: var(--marque-accent);
  font-size: 12px;
  font-weight: bold;
}
footer .info .location p a:hover {
  color: var(--marque-fond-clair);
  text-decoration: none;
}

/* Version en ligne, dans le bandeau légal. Volontairement effacée : c'est une
   information d'exploitation, utile quand on la cherche, jamais quand on lit
   la page. */
.liens-legaux .version-deployee {
  font-family: Menlo, Consolas, monospace;
  font-size: 11px;
  color: #777;
  cursor: help;
}