/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *

 */

/* makes the footer stick to the bottom of the page */
html, body {
  min-height: 100vh;
}
body {
  display: flex;
  flex-direction: column;
}
main {
  flex-grow: 1;
}

/* for the header's title */
.unbold {
  font-weight: normal !important;
}

/* for the header's user name */
.two-rows-headers {
  display: flex;
  flex-direction: column-reverse;
}
@media (min-width: 62em) {
  .two-rows-headers {
    flex-direction: column;
  }
}

/* for the banner */
.title-highlight {
  color: var(--background-flat-pink-tuile);
}
.banner {
  background: var(--background-contrast-brown-cafe-creme);
}

/* Custom checlist bullets */
ul.checklist li {
  position: relative;
  list-style-type: none;
  margin-left: 16px;
}
ul.checklist li:before {
  content: "";
  position: absolute;
  left: -32px;
  width: 24px;
  height: 24px;
  background-color: var(--success-425-625);
  -webkit-mask: url(/assets/icons/system/fr--success-fill-f3a8a1bd46e61075b19a2eeaae5642f5869e81d25c2e813617c35a70ff05a99b.svg) center / contain no-repeat;
  mask: url(/assets/icons/system/fr--success-fill-f3a8a1bd46e61075b19a2eeaae5642f5869e81d25c2e813617c35a70ff05a99b.svg) center / contain no-repeat;
}

/* User data container */
.user-data {
  background-color: var(--background-alt-yellow-tournesol);
}
.underlined {
  border-bottom: 2px solid black;
}

/* success screen */
.centered-text {
  text-align: center;
}

/* check icons */
.success-green {
  color: var(--success-425-625);
}
.big-icon::before {
  width: 72px;
  height: 72px;
}

/* Horizonal lines around 'Ou' under france connect */
.horizontal-line {
  border-bottom: 1px solid var(--text-default-grey);
  margin-bottom: 10px;
  flex-grow: 1;
}

/* More spaces on titles for CGU and FAQ */
.big-spaced-titles h1, .big-spaced-titles h2, .big-spaced-titles h3, .big-spaced-titles h4 {
  margin-top: 3rem !important;
}

/* download card for QR code */
.download-qr {
  height: fit-content !important;
}
.break-link {
  word-break: break-all;
}

/* Bouton je donne mon avis */
a.image-link {
  display: inline-block;
  background-image: none;
  --hover-tint: none;
  --active-tint: none;
  transition: transform 0.1s ease-in-out;
}
a.image-link:hover {
  transform: scale(1.05);
}
a.image-link:active {
  transform: scale(1);
}