@font-face {
  font-family: 'Gotham';
  src: url('/GothamHTF-Bold.woff2');
  font-display: swap;
  font-weight: 700;
}
@font-face {
  font-family: 'Gotham';
  src: url('/GothamHTF-Medium.woff2');
  font-display: swap;
  font-weight: 500;
}
@font-face {
  font-family: 'Gotham';
  src: url('/GothamHTF-Book.woff2');
  font-display: swap;
  font-weight: 400;
}
@font-face {
  font-family: 'Gotham';
  src: url('/GothamHTF-Light.woff2');
  font-display: swap;
  font-weight: 300;
}
:root {
  --bg-color: #041533;
  --bg-soft-color: #2e2e2e;
  --fg-color: #ffffff;
  --fg-soft-color: #a1a1c4;
  --text-color: #d5e7fe;
  --link-color: #66ccff;
  --danger-color: #ff6699;
  --success-color: #99ffcc;
  --highlight-color: #ff9933;
  --selection-bg-color: #66ccff88;
  color-scheme: light dark;
  quotes: '\201C''\201D';
  scrollbar-color: var(--fg-soft-color) var(--bg-soft-color);
}
@media (prefers-color-scheme: light) {
  :root {
    --bg-color: #f5f5f5;
    --bg-soft-color: #e5e5e5;
    --fg-color: #041533;
    --fg-soft-color: #4f4f4f;
    --text-color: #1a1a1a;
    --link-color: #3399cc;
    --danger-color: #ff0000;
    --success-color: #00a800;
    --highlight-color: #da5700;
    --selection-bg-color: #66ccff88;
  }
  #support {
    filter: brightness(0.67);
  }
}

::selection {
  background-color: var(--selection-bg-color);
}
.text {
  color: var(--text-color);
}
.center {
  text-align: center;
}
.nowrap {
  white-space: nowrap;
}
.muted {
  color: var(--fg-soft-color) !important;
}
.danger {
  color: var(--danger-color) !important;
}
.success {
  color: var(--success-color) !important;
}
.highlight {
  color: var(--highlight-color) !important;
}
.small {
  font-size: small;
}
.large {
  font-size: x-large;
}
.hidden {
  display: none;
}
q {
  line-height: 1.2lh;
}
/* Can't use :is() with pseudo-elements:
 * "Pseudo-elements [...] are not valid within :is()."
 * https://drafts.csswg.org/selectors-4/#matches
 */
q::before,
q::after {
  font-size: 2.7em;
  vertical-align: bottom;
  user-select: text;
  font-weight: bold;
  font-family: serif;
  position: relative;
  top: 0.1em;
}
q::before {
  margin-inline-end: 0.15em;
}
q::after {
  margin-inline-start: 0.15em;
}

/* -------------------------------------------------------------------------- */

* {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  min-width: 250px;
  min-height: 100dvh;
  margin: 0;
  padding: 2rem max(10vw, 2rem);
  background-color: var(--bg-color);
  color: var(--fg-color);
  font-family: Gotham, Helvetica, Roboto, Arial, sans-serif;
  line-height: 1.2;
}

h1,
h2 {
  text-transform: uppercase;
  margin: 1rem 0;
  text-wrap: balance;
}
h1 {
  text-align: center;
}
h4 {
  margin: 0;
}
:is(h2, h3, figcaption) > :not(:nth-child(1)) {
  margin-inline-start: 0.3rem;
}
section {
  margin: 2rem 0;
}
section:target > :is(h2, h3),
:is(h2, h3):target {
  color: var(--highlight-color);
}
section:target > hr {
  background-color: var(--highlight-color);
}
/* When section is not targeted, hide share button */
.share:not(#share, :target > :is(h2, h3) > *, figure:target *) {
  display: none;
}
.share {
  color: var(--success-color);
  cursor: pointer;
}
h3:has(~ .subtitle) {
  margin-bottom: 0;
}

.subtitle {
  text-wrap: balance;
}
.time {
  text-wrap: nowrap;
}

hr {
  background-color: var(--fg-soft-color);
  height: 1px;
  border: none;
  margin-top: 1rem;
}
hr.upper {
  visibility: hidden;
}

p {
  margin: 1rem 0;
}
/* Do not override .success, .danger and .highlight wrappers */
p:not(:is(.success, .danger, .highlight)):not(:is(.success, .danger, .highlight) p) {
  color: var(--text-color);
}

li {
  margin: 0.25em 0;
}

img.inline {
  vertical-align: middle;
}

/* Links */
a {
  color: inherit;
  text-decoration: none;
}
:is(p, ul, ol, em, .text) a {
  color: var(--link-color);
}
.link {
  text-decoration: underline;
  color: var(--link-color);
}

.crossed {
  text-decoration: line-through;
}

/* For links that are in a paragraph: underline and remove on hover
   For any other link: do the opposite */
:is(:is(p, .text) a:not(:hover), a:not(:is(p, .text) a):hover) {
  text-decoration: underline;
}
:is(:is(p, .text) a:not(:hover), a:not(:is(p, .text) a):hover).crossed {
  text-decoration: underline line-through;
}

/* Form */
textarea,
input,
button,
input[type='submit'],
input[type='file'] {
  background-color: var(--bg-soft-color);
  font-family: inherit;
  padding: 0.7em;
  border: none;
  border-radius: 3px;
}
button > i {
  margin-inline-end: 0.5em;
}
textarea {
  resize: vertical;
}
:is(textarea, input)::placeholder {
  color: var(--fg-soft-color);
}
a,
button:not(:disabled),
[role='button'],
[onclick],
input[type='submit'],
input[type='file'] {
  cursor: pointer;
}
button,
input[type='submit'],
input[type='file'] {
  font-weight: bold;
  font-size: inherit;
}
button[type='submit'],
input[type='submit'] {
  font-size: large;
}
:is(button, input[type='submit'], input[type='file']):not(:active, :disabled) {
  background-color: var(--fg-color);
  color: var(--bg-color);
}

/* -------------------------------------------------------------------------- */

.map {
  display: block;
  max-height: 400px;
  max-width: 100%;
}
a:has(.map.open) {
  /* position the parent element so that max-width works */
  position: relative;
}
.map.open {
  position: absolute;
  transition: opacity 0.2s ease-in-out;
}
.map.open.hide {
  opacity: 0;
}
@media (hover: hover) {
  .map.open:hover {
    opacity: 0;
  }
}
@media (hover: none) {
  .map.open {
    /* prevent highlighting on longclick */
    cursor: default;
  }
}

/* -------------------------------------------------------------------------- */

#infos-officielles .content > :not(:first-child) {
  margin-top: 2em;
}

#infos-officielles .content > * {
  border-left: solid 1px var(--fg-soft-color);
  padding-left: 0.8em;
  border-radius: 4px;
}

.content {
  margin: 1rem 0;
  overflow: auto;
  scrollbar-width: none;
}

/* -------------------------------------------------------------------------- */

.figure-list {
  display: flex;
  flex-flow: row wrap;
  content-visibility: auto;
  contain-intrinsic-size: 1px 800px;
}
.figure-list > figure {
  margin: 1.5rem 1rem 0 1rem;
}
figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}
figure:target > :is(iframe, a:has(img)) {
  border: 4px solid var(--highlight-color);
}
figure img {
  display: block;
  height: auto;
  background-color: var(--bg-soft-color);
}
figcaption {
  font-size: 1.2em;
  margin-top: 0.2rem;
  text-align: center;
  text-wrap: balance;
}

/* Can't keep aspect ratio *and* HTML width/height without heavy tweaks: */
/* https://github.com/sgomes/css-aspect-ratio/blob/ec9572877fa360e61bd9dd10fd4c09653949a7fa/css-aspect-ratio.css#L19-L50 */
.webcam {
  min-height: 100px;
  max-height: 350px;
  min-width: 200px;
  max-width: 100%;
}

/* -------------------------------------------------------------------------- */

.poll {
  border: solid 1px var(--fg-soft-color);
  border-radius: 2rem;
  margin-top: 4rem;
  padding: 1rem 2rem;
  text-align: center;
}

#sondages:target .poll,
.poll:target {
  border: solid 4px var(--highlight-color);
}

.options {
  display: flex;
  gap: 2em;
  row-gap: 1em;
  justify-content: space-around;
  flex-wrap: wrap;
}

.poll:not(.results) .option {
  color: var(--link-color);
}

.poll.results .option {
  cursor: unset;
}

.option[aria-selected='true'] {
  color: var(--highlight-color);
}

.poll:not(.results) .result {
  opacity: 0;
}

.result {
  transition: opacity 0.5s;
}

/* -------------------------------------------------------------------------- */

#donation-hook {
  display: inline-block;
  padding: 0.3em 0.6em;
  border-radius: 5px;
  background-color: var(--highlight-color);
  box-shadow: 0 0 10px 2px var(--highlight-color);
}

#contributeurs ul {
  padding: 0;
}

#contributeurs li {
  list-style-type: none;
  margin: 2em 0;
}

#contributeurs li q {
  text-wrap: balance;
  line-height: 2rem;
}

/* -------------------------------------------------------------------------- */

form {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  gap: 1rem;
  margin: auto;
  width: 45em;
  max-width: 100%;
}

/* -------------------------------------------------------------------------- */

footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  color: var(--text-color);
  font-weight: bold;
  text-align: center;
  column-gap: 2em;
  row-gap: 17px;
  /* Using padding instead of margin because margin-top needs to be auto to push
   * the footer at the bottom but min(2em, auto) doesn't work with auto */
  padding: 2em 0;
  margin-top: auto;
}

#support {
  transition: transform 0.2s, box-shadow 0.2s;
  text-decoration: none;
  text-wrap: balance;
  border: solid 2px;
  border-radius: 2em;
  padding: 0.25em 0.5em;
  box-shadow: 4px 4px;
  view-transition-name: bmc;
}
@media (hover: hover) {
  #support:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px;
  }
}
#support:active {
  transform: translate(4px, 4px);
  box-shadow: unset;
}

/* -------------------------------------------------------------------------- */

.wiggle {
  animation: 1.5s wiggle;
}

@keyframes wiggle {
  30% {
    transform: scale(1.2);
  }
  40%,
  60% {
    transform: rotate(-5deg) scale(1.2);
  }
  50% {
    transform: rotate(5deg) scale(1.2);
  }
  70% {
    transform: rotate(0deg) scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.button-press {
  animation: 0.4s button-press 2;
}

@keyframes button-press {
  50% {
    transform: translate(4px, 4px);
    box-shadow: unset;
  }
  100% {
    transform: initial;
    box-shadow: initial initial;
  }
}

.rainbow {
  animation: 2s rainbow infinite linear;
  color: hsl(0, 100%, 75%);
}

@keyframes rainbow {
  0% {
    filter: hue-rotate(0);
  }
  100% {
    filter: hue-rotate(1turn);
  }
}

/* -------------------------------------------------------------------------- */

@media (max-width: 992px) {
  body {
    padding: 2rem max(1rem, 2vw);
  }
  h2 {
    text-align: center;
  }
  ul {
    padding-left: 10px;
  }
  .mobile-wide {
    text-align: center;
    width: 100%;
  }
  hr.upper {
    visibility: visible;
  }
  .figure-list {
    flex-direction: column;
    align-items: center;
  }
  .figure-list > figure,
  .poll {
    margin-inline-start: 0;
    margin-inline-end: 0;
  }
  .poll {
    padding: 0 1rem;
  }
  footer {
    flex-direction: column;
    align-items: center;
    font-size: large;
  }
  #support {
    order: -1;
    margin-bottom: 0.5em;
  }
}

@media (hover: hover) {
  .mobile {
    display: none;
  }
}

@media (hover: none) {
  .desktop {
    display: none;
  }
}

/* -------------------------------------------------------------------------- */

#HCB_comment_box {
  margin-top: 2rem;

  h3,
  .home-desc,
  a:has(img[alt='rss']),
  div:has(> .admin-link),
  input[type='file'],
  .hcb-comment-tb,
  #hcb_subscribe,
  small:has(> #hcb_settings),
  .likes {
    display: none;
  }

  #comments_list {
    border: solid 1px var(--fg-soft-color);
    border-radius: 2rem 0 0 2rem;
    margin-top: 2rem;
    padding: 2rem;
    min-height: 20em;
    height: 100dvh;
    max-height: calc(100dvh - 6em);
    overflow-y: auto;
    scrollbar-width: thin;
    img {
      max-width: 100%;
      max-height: 17em;
    }
  }
  @media (max-width: 992px) {
    #comments_list {
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding: 1.8rem 1rem;
    }
  }

  #hcb_msg {
    color: var(--highlight-color);
  }

  textarea,
  input[type='text'],
  input[type='submit'],
  label {
    display: block;
    width: 100%;
  }

  label {
    margin-top: 0.5em;
  }

  .date {
    font-size: small;
    color: var(--fg-soft-color);
  }

  .comment:not(:first-child) {
    margin-top: 1rem;
  }

  blockquote {
    margin: 0;
  }

  /* .hcb-comment-tb {
    margin-top: .5em;
    button {
      color: var(--link-color);
      background-color: transparent;
      font-size: small;
      padding: 0;
      margin-right: 4px;
    }
  } */
}