@font-face {
  font-family: 'Miriam';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/MiriamLibre.woff') format('woff');
}

@font-face {
  font-family: 'Miriam';
  font-style: normal;
  font-weight: bold;
  src: url('fonts/MiriamLibreBold.woff') format('woff');
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: white;

  color: #410b7a;
  line-height: 1.5;
  font-family: Arial, Helvetica, sans-serif;
}

img {
  max-width: 100%;
}

hr {
  margin: 2em 0;
  border: 0;
  border-top: 1px solid #aaa;
}

a:not([class]) {
  color: black;
}

a:not([class]):hover,
a:not([class]):focus {
  color: #c51cd7;
}

details {
}

summary {
  font-weight: bold;
  margin-bottom: 1em;

  cursor: pointer;
}

blockquote:not([class]) {
  font-style: italic;
  border-left: 5px solid #999;
  padding-left: 20px;
  margin-left: 0;
}

/* CONTAINER */

.o-container {
  position: relative;
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 20px;
}

@media (max-width: 450px) {
  .o-container {
    padding: 0 10px;
  }
}

.o-container--tiny {
  max-width: 800px;
}

.o-container--no-padding {
  padding: 0;
}

/* ACTION */

.o-action {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}

.o-action--column {
  flex-direction: column;
}

@media (max-width: 499px) {
  .o-action--column-mobile {
    flex-direction: column;
  }
}

.o-action--gap-s {
  gap: 10px;
}

.o-action__label {
  display: block;
  width: 100%;
  text-align: center;
}

/* BUTTON */

.o-button {
  position: relative;

  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  padding: 6px 18px;
  border: 4px solid transparent;
  border-radius: 18px;
  background: #222e67;

  color: white;
  font-size: 14px;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  line-height: 16px;
  text-decoration: none;
  text-shadow: none;

  text-align: center;
  transition: color 300ms, background-color 300ms, border-color 300ms;
  box-shadow: 0 28px 62px 0 rgba(65, 11, 122, 0.1);
  cursor: pointer;
}

.o-button--active,
.o-button:hover,
.o-button:focus {
  color: white;
  background: #c51cd7;
  outline: none;
}

.o-button--big {
  padding: 10px 24px;
  border: 3px solid transparent;
  border-radius: 28px;
  font-size: 16px;
  line-height: 24px;
}

.o-button--tiny {
  padding: 4px 12px;
  border: 2px solid transparent;
  border-radius: 12px;
}

.o-button--aerate {
  line-height: 1.5;
  border-radius: 30px;
}

.o-button--shadow {
  box-shadow: 0 15px 40px 0 rgba(0, 0, 0, 0.5);
}

.o-button--block {
  display: flex;
  width: 100%;
}

.o-button--white {
  background-color: white;
  color: #410b7a;
  border-color: white;
}

.o-button--white:hover,
.o-button--white:focus,
.o-button--white-active {
  background-color: white;
  color: #c51cd7;
  border-color: #c51cd7;
}

.o-button--light {
  background-color: #3cdbe2;
  color: #410b7a;
}

.o-button--shiny::before {
  content: '';
  position: absolute;
  inset: -4px;
  background-position: -100px;
  background-image: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0) 60%
  );
  background-size: 600% 100%;
  animation: shiny 10s linear infinite;
}

.o-button--active.o-button--light,
.o-button--light:hover,
.o-button--light:focus {
  color: #c51cd7;
  background: white;
  border-color: #c51cd7;
}

.o-button--gold {
  background-color: #c2a42b;
  color: black;
}

.o-button--active.o-button--gold,
.o-button--gold:hover,
.o-button--gold:focus {
  color: #c2a42b;
  background: transparent;
  border-color: #c2a42b;
}

.o-button--warning {
  background-color: #ffc107;
  color: black;
}

.o-button--yellow {
  background-color: #f8fb01;
  color: black;
}

.o-button--yellow.o-button--gold,
.o-button--yellow:hover,
.o-button--yellow:focus {
  color: #f8fb01;
  background: transparent;
  border-color: #f8fb01;
}

.o-button--choco {
  color: #fff;
  border-color: transparent;
  background: #be4f23;
  background: linear-gradient(to right, #be4f23, #cc6120);
}

.o-button--active.o-button--choco,
.o-button--choco:hover,
.o-button--choco:focus {
  border-color: #be4f23;
  background: transparent;
  color: #be4f23;
}

.o-button--goldenscapes {
  background-color: white;
  color: #433a8d;
}

.o-button--goldenscapes:hover,
.o-button--goldenscapes:focus {
  background-color: #433a8d;
  color: white;
}

.o-button--tresor {
  color: #fff;
  border-color: transparent;
  background: #715637;
}

.o-button--active.o-button--tresor,
.o-button--tresor:hover,
.o-button--tresor:focus {
  border-color: #715637;
  background: transparent;
  color: #715637;
}

.o-button--university {
  color: #fff;
  border-color: transparent;
  background: #393701;
}

.o-button--active.o-button--university,
.o-button--university:hover,
.o-button--university:focus {
  border-color: #393701;
  background: black;
  color: #fbfc01;
}

.o-button--university-secondary {
  color: black;
  border-color: transparent;
  background: #fbfc01;
}

.o-button--active.o-button--university-secondary,
.o-button--university-secondary:hover,
.o-button--university-secondary:focus {
  border-color: #fbfc01;
  background: black;
  color: #fbfc01;
}

.o-button--escape-game-awards-primary {
  background: white;
  border: 2px white solid;
  color: #eb5441;
  text-transform: uppercase;
}

.o-button--escape-game-awards-primary:hover,
.o-button--escape-game-awards-primary:focus {
  box-shadow: 0 0 10px 6px #e3305f;
  border-color: white;
  color: #eb5441;
  background: white;
}

.o-button--escape-game-awards-secondary {
  background: transparent;
  border: 2px white solid;
  text-transform: uppercase;
}
.o-button--escape-game-awards-secondary:hover,
.o-button--escape-game-awards-secondary:focus {
  box-shadow: 0 0 10px 6px #e3305f;
  border-color: white;
  background: transparent;
}

/* OVERRIDE SMALL SECTION STYLES */
.o-button.o-button small,
.o-button.o-button small {
  color: white;
  font-size: 90%;
}

.o-button.o-button--light small,
.o-button.o-button--light small {
  color: black;
  font-size: 90%;
}

.o-button__icon {
  width: 16px;
  height: 16px;
  vertical-align: text-top;
  margin: 0 5px;
}

.o-button--big .o-button__icon {
  width: 20px;
  height: 20px;
  vertical-align: text-bottom;
  margin: 0 7px;
}

/* Button links */

.o-button-link {
  background: none !important;
  border: none;
  padding: 0 !important;
  font: inherit;
  color: black;
  text-decoration: underline;
  cursor: pointer;
}

.o-label {
  display: block;
  color: black;
  margin-bottom: 6px;
}

.o-control {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: -5px;
  max-width: 600px;
}

.o-control > * {
  margin: 5px;
}

.o-input {
  height: 36px;
  width: 100%;
  flex: 1;
  min-width: 200px;
  padding-left: 18px;
  padding-right: 18px;
  border-radius: 18px;
  border: 1px solid #50e3c2;
  font-size: 16px;
  color: #4a4a4a;
  outline: none;
}

.o-input-message {
  margin-top: 6px;
}

.o-input-message:empty {
  display: none;
}

/* FORM */

/*
 * Formulaire en colonne : connexion, inscription.
 *
 * Largeur propre, plus étroite que la colonne de texte qui l'entoure. Un champ
 * de 800 px de large est inconfortable à remplir, et son étiquette se retrouve
 * loin du contenu qu'elle nomme.
 *
 * L'espacement ne peut pas venir de .o-flow, qui ne pousse que son propre
 * élément vers le bas. Ici, c'est l'intervalle ENTRE deux champs qu'il faut,
 * puis un intervalle plus large avant le bouton, pour que la validation se
 * détache de la saisie.
 */
.o-form {
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

.o-form__field + .o-form__field {
  margin-top: 20px;
}

.o-form__action {
  margin-top: 30px;
}

/* FLOW */

.o-flow {
  margin-top: 60px;
}

.o-flow-after {
  margin-bottom: 60px;
}

.o-flow--small {
  margin-top: 30px;
}

.o-flow-after--small {
  margin-bottom: 30px;
}

@media (max-width: 600px) {
  .o-flow {
    margin-top: 10vw;
  }

  .o-flow-after {
    margin-bottom: 10vw;
  }

  .o-flow--small {
    margin-top: 5vw;
  }

  .o-flow-after--small {
    margin-bottom: 5vw;
  }
}

/* IMAGE */

img.o-image-center {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

.o-image-border {
  border: 1px solid black;
}

.o-image-radius {
  border-radius: 12px;
}

.o-image-gray {
  filter: grayscale(100%);
}

.o-image-block {
  display: block;
  width: 100%;
  height: auto;
}

.o-image-shadow {
  box-shadow: 0 28px 62px 0 rgba(65, 11, 122, 0.1);
}

/* OUTLINE */

.o-outline {
  padding: 20px 40px;
  margin: -20px -40px;
  border-radius: 5px;
  background: #f0f0f0;
}

@media (max-width: 680px) {
  .o-outline {
    padding: 20px;
    margin: -20px;
    border-radius: 0;
  }
}

@media (max-width: 450px) {
  .o-outline {
    padding: 10px;
    margin: -10px;
  }
}

/* LINE */

.o-line {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: -15px;
  list-style: none;
}

.o-line__item {
  flex: 1;
  margin: 15px;
}

.o-line-separator {
  padding: 24px;
  font-size: 24px;
  font-weight: bold;
  align-self: center;
}

@media (max-width: 600px) {
  .o-line-separator {
    font-size: 4vw;
    padding: 0;
  }
}

/* TOP BAR */

.c-top {
  position: relative;
  z-index: 10;
  padding: 10px 0 0;
  border-bottom: 1px solid white; /* contains inner margins */

  background-color: transparent;
  background-image: none;
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: center center;

  color: white;
  text-align: center;
}

.c-top--tiny {
}

.c-top--image-left-mobile {
  background-position-x: left;
}

@media (min-width: 800px) {
  .c-top {
    background-size: auto 120%;
  }
}

@media (min-width: 960px) {
  .c-top {
    background-size: auto 150%;
  }

  .c-top--image-left-mobile {
    background-position-x: center;
  }
}

.c-top::after {
  content: '';

  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;

  background: linear-gradient(to right, #431973, #00415f);

  pointer-events: none;
}

.c-top--image::after {
  opacity: 0.85;
}

.c-top--naked::after {
  display: none;
}

/*
 * Les prix s'empilent dans la même cellule de grille et se relaient en fondu.
 * Chacun joue la même animation, décalée de son rang : il apparaît, reste
 * affiché pendant --award-duration, puis s'efface pendant que le suivant
 * apparaît. Les pourcentages de @keyframes supposent six prix.
 */
.c-top__floating-awards {
  --award-count: 6;
  --award-duration: 2.5s;
  position: absolute;
  left: 10px;
  top: -10px;
  display: grid;
  align-items: start;
  padding: 12px;
  width: 180px;
  min-width: 22%;
  opacity: 0.6;

  transition: 300ms opacity;
}

.c-top__floating-awards:hover {
  opacity: 1;
}

.c-top__award {
  grid-area: 1 / 1;
  width: 100%;
  opacity: 0;

  animation: c-top-award calc(var(--award-count) * var(--award-duration))
    calc(var(--award-index) * var(--award-duration)) infinite;
}

.c-top__floating-awards:hover .c-top__award {
  animation-play-state: paused;
}

/* 100 % / 6 prix = 16,67 % par passage, dont un fondu d'environ 0,6 s. */
@keyframes c-top-award {
  0% {
    opacity: 0;
  }
  2.5%,
  16.67% {
    opacity: 1;
  }
  19.17%,
  100% {
    opacity: 0;
  }
}

/* Sans animation, seul le prix le plus récent reste affiché. */
@media (prefers-reduced-motion: reduce) {
  .c-top__award {
    animation: none;
  }

  .c-top__award:first-child {
    opacity: 1;
  }
}

.c-top__floating-link {
  position: absolute;
  left: 10px;
  top: -10px;
  padding: 12px;
  border-radius: 0 0 4px 4px;

  color: white;
  text-decoration: none;

  transition: 300ms background-color;
}

.c-top__floating-link:hover,
.c-top__floating-link:focus {
  outline: 2px solid white;
  background: rgba(255, 255, 255, 0.2);
}

.c-top__floating-link--solid {
  background: rgba(255, 255, 255, 0.6);
  color: #410b7a;
  font-weight: bold;
  font-size: 14px;
}

.c-top__floating-link--solid:hover,
.c-top__floating-link--solid:focus {
  outline: 2px solid white;
  outline-offset: 2px;
  background: white;
}

.c-top__floating-link--active {
  color: black;
  background: linear-gradient(90deg, #64ccf3, #b7e886);
}

.c-top__floating-link--active:hover,
.c-top__floating-link--active:focus {
  outline: 2px solid #a4e3a0;
  outline-offset: 2px;
  color: black;
  background: linear-gradient(90deg, #64ccf3, #b7e886);
}

/*
 * Les boutons de droite, quand il y en a deux : le compte, et
 * l'administration pour qui y a droit. Chaque lien flottant se positionne en
 * absolu ; sans ce groupe, le second se poserait sur le premier.
 */
.c-top__floating-group {
  position: absolute;
  right: 10px;
  top: -10px;
  display: flex;
  gap: 6px;
}

.c-top__floating-group .c-top__floating-link {
  position: static;
}

.c-top__floating-link--alternate {
  left: auto;
  right: 10px;
}

.c-top__floating-link-icon {
  vertical-align: text-top;
  margin: 0 3px;
  fill: currentColor;
}

@media (max-width: 479px) {
  .c-top__floating-link {
    padding: 8px;
  }
}

.c-top__brand-link {
  display: block;
  max-width: 20%;
  min-width: 150px;
  margin: 0 auto 20px;

  color: inherit;
  font-size: 30px;
  font-weight: bold;
  font-family: Miriam, Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  text-decoration: none;
}

.c-top__brand-image {
  display: block;
  width: 100%;
  max-width: 150px;
  height: auto;
  margin: 0 auto;
  padding: 60px 0 40px;
}

.c-top__brand-image--tiny {
  padding: 40px 0 20px;
  max-width: none;
}

.c-top__menu {
  position: relative;
  padding: 10px 4px 0;
  margin-bottom: -10px; /* Allow the current menu to have a visible marker */
  overflow: hidden;
}

.c-top__menu--left-overflow::before,
.c-top__menu--right-overflow::after {
  content: '';
  width: 40px;
  position: absolute;
  top: 20px;
  bottom: 10px;
  z-index: 9;

  pointer-events: none;
}

.c-top__menu--left-overflow::before {
  left: 0;
  background: radial-gradient(
    ellipse at left,
    rgba(67, 25, 115, 0.9) 40%,
    rgba(67, 25, 115, 0) 80%
  );
}

.c-top__menu--right-overflow::after {
  right: 0;
  background: radial-gradient(
    ellipse at right,
    rgba(0, 65, 95, 0.9) 40%,
    rgba(0, 65, 95, 0) 80%
  );
}

.c-top__menu-button {
  position: absolute;
  z-index: 10;
  width: 60px;
  height: 90px;
  inset: 0;
  margin: auto;

  display: flex;
  align-items: center;

  border: none;
  background: none;

  color: rgba(255, 255, 255, 0.8);
  font-weight: bold;
  font-size: 20px;

  visibility: hidden;
  pointer-events: none;
  cursor: pointer;
}

.c-top__menu-button--left {
  padding-right: 20px;
  right: auto;
  justify-content: flex-start;
  background: radial-gradient(
    ellipse at left,
    rgba(67, 25, 115, 0.9) 40%,
    rgba(67, 25, 115, 0) 80%
  );
}

.c-top__menu-button--right {
  padding-left: 20px;
  left: auto;
  justify-content: flex-end;
  background: radial-gradient(
    ellipse at right,
    rgba(67, 25, 115, 0.9) 40%,
    rgba(67, 25, 115, 0) 80%
  );
}

.c-top__menu-button svg {
  width: 40px;
  height: 40px;
}

.c-top__menu-button path {
  fill: rgba(255, 255, 255, 0.8);
}

.c-top__menu-button:hover path {
  fill: white;
}

.c-top__menu-button--visible {
  visibility: visible;
  pointer-events: auto;
}

.c-top__menu-frame {
  padding-bottom: 40px;
  padding-top: 10px;
  position: relative;
}

.c-top__menu-scroller {
  overflow-x: auto;
  margin-bottom: -30px;
  scroll-behavior: smooth;
}

.c-top__menu-content {
  position: relative;
  display: inline-block;
  margin: 0 20px;
}

.c-top__group-list {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  grid-gap: 10px;
  margin: 0;

  pointer-events: none;
}

.c-top__group-item {
  position: relative;
  height: 100%;
  border-radius: 4px 4px 0 0;
  border-top: 2px solid rgba(255, 255, 255, 0.5);
  background: rgba(44, 7, 91, 0.4);
}

.c-top__group-item::before {
  position: absolute;
  inset: -1px 4px auto;
  content: '';
}

.c-top__links {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  grid-gap: 10px;
  margin: 0;
  padding: 0;
  min-width: 880px;

  list-style: none;
}

.c-top__item {
}

.c-top__item--double {
  grid-column: auto / span 2;
}

.c-top__item--triple {
  grid-column: auto / span 3;
}

.c-top__link {
  position: relative;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  padding: 12px 4px;
  margin: 0;
  border-radius: 4px 4px 0 0;
  border: 2px solid transparent;
  border-bottom-width: 0;

  color: white;
  font-size: 16px;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
  transition: 300ms background-color;
}

.c-top__link--highlight {
  background: rgba(44, 7, 91, 0.2);
}

.c-top__link--horizontal {
  flex-direction: row;
  justify-content: space-evenly;
  align-items: flex-end;
}
.c-top__link--horizontal .c-top__image {
  margin: 0;
  padding: 0;
  height: 70px;
  width: auto;
}

.c-top__link--border {
  border-top-color: rgba(255, 255, 255, 0.5);
}

@keyframes shiny {
  from {
    background-position: -1000px;
  }

  to {
    background-position: 1000px;
  }
}

.c-top__link--shiny:not(.c-top__link--active)::before {
  content: '';
  position: absolute;
  inset: 0;
  background-position: -100px;
  background-image: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0) 60%
  );
  background-size: 600% 100%;
  animation: shiny 10s linear infinite;
}

.c-top__link:hover,
.c-top__link:focus {
  color: white;
  border-color: currentColor;
  background: rgba(255, 255, 255, 0.2);
}

.c-top__link--active,
.c-top__link--active:hover {
  color: #a4e3a0;
  background: rgba(255, 255, 255, 0.2);
}

.c-top__link--active::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -2px;
  right: -2px;
  border-radius: 0 0 4px 4px;
  height: 10px;
  background: linear-gradient(90deg, #64ccf3, #b7e886);
}

.c-top__link-caption {
  position: absolute;
  top: -12px;
  left: -8px;
  right: -8px;
  width: fit-content;
  z-index: 1;
  margin: auto;
  background: white;
  padding: 2px 6px;
  border-radius: 6px;
  box-shadow: 1px 1px rgba(0, 0, 0, 0.5);

  font-size: 12px;
  font-weight: normal;
  color: black;
  line-height: 1;
}

.c-top__link-caption--highlight {
  background: #b0e58f;
}

.c-top__link-caption:empty {
  display: none;
}

.c-top__link-image {
  max-width: 70px;
  margin: auto;
}

.c-top__link-image--double {
  max-width: 140px;
  max-height: 90px;
}

.c-top__image {
  display: block;
  width: 48px;
  max-width: 100%;
  height: auto;
  margin: 0 auto 4px;
  padding: 0 2px;
  filter: drop-shadow(1px 1px rgba(0, 0, 0, 1));
  opacity: 0.5;
}

.c-top__link--active .c-top__image,
.c-top__link:active .c-top__image,
.c-top__link:hover .c-top__image {
  opacity: 1;
}

.c-top__image path {
  fill: currentColor;
}

.c-top__image .stroke {
  fill: none;
}

.c-top__link-label {
  position: relative;
  display: block;
  width: min-content;
  margin: 0 auto;
  padding: 0;

  font-size: 12px;
  line-height: 1.5;
  font-weight: bold;
  text-transform: uppercase;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
}

.c-top__link-label-prefix,
.c-top__link-label-suffix {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  font-size: 1.3em;
  margin: 4px;
}

.c-top__link-label-prefix {
  right: 100%;
}

.c-top__link-label-suffix {
  left: 100%;
}

@media (max-width: 799px) {
  .c-top__link {
    font-size: 14px;
    line-height: 17px;
  }

  .c-top__link-image--double {
    max-width: 120px;
    max-height: 80px;
  }

  .c-top__brand-image,
  .c-top__brand-image--tiny {
    padding: 80px 0 0;
  }
}

@media (max-width: 479px) {
  .c-top__group-list {
    grid-gap: 5px;
  }

  .c-top__links {
    grid-gap: 5px;
    min-width: 765px;
  }

  .c-top__link {
    font-size: 12px;
    line-height: 15px;
    padding: 8px 4px;
  }
}

/* MENU */

.c-menu {
  padding: 20px 0;
}

.c-menu--sticky {
  position: sticky;
  top: 0;
  z-index: 9;
  min-height: 80px;
  background: white;
  border-bottom: 1px solid #410b7a;
}

.c-menu__grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.c-menu__left {
  flex: none;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-right: 20px;

  color: #2c075b;
  text-decoration: none;
  font-family: Miriam, Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 24px;
  line-height: 1.5;
}

.c-menu__left-image {
  max-height: 40px;
  max-width: 200px;
  height: auto;
}

.c-menu__logo {
  height: 40px;
}

.c-menu__right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-menu__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0 16px;
  padding: 6px 8px;
  border-bottom: 2px solid transparent;

  color: #4a4a4a;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  white-space: nowrap;

  transition: color 300ms, border-color 300ms;
}

.c-menu__link:hover,
.c-menu__link:focus,
.c-menu__link--active {
  color: #c51cd7;
  border-bottom: 2px solid currentColor;
}

.c-menu__link-icon {
  color: #410b7a;
}

.c-menu__link:hover .c-menu__link-icon,
.c-menu__link:focus .c-menu__link-icon,
.c-menu__link--active .c-menu__link-icon {
  color: #c51cd7;
}

.c-menu__button {
  margin-left: 18px;
}

@media (max-width: 1000px) {
  .c-menu__link {
    margin: 0 4px;
  }
}

@media (max-width: 720px) {
  .c-menu__button {
    position: absolute;
    top: 0;
    right: 20px;

    margin-left: 12px;
  }

  .c-menu__grid {
    flex-direction: column;
    align-items: stretch;
  }

  .c-menu__left {
    margin-bottom: 20px;
  }

  .c-menu__left--mobile-hidden {
    display: none;
  }

  .c-menu__left--mobile-center {
    justify-content: center;
    margin-right: 0;
  }
}

@media (max-width: 450px) {
  .c-menu__logo {
    height: 40px;
  }

  .c-menu__right {
    overflow: auto;
    margin-top: 0;
    padding: 0;
    flex-wrap: wrap;
    justify-content: center;
  }

  .c-menu__button {
    right: 10px;
  }

  .c-menu__link {
    font-size: 14px;
  }
}

/* BANDEAU */

.c-bandeau {
  position: relative;
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
}

.c-bandeau > img {
  display: block;
  width: 100%;
  max-height: 350px;
  object-fit: cover;
}

/* HEADER */

.c-header {
  position: relative;
  background: linear-gradient(to right, #431973, #00415f);
  min-height: 5px;
}

.c-header--pro {
  background: linear-gradient(to right, #548adf, #fc388c);
}

@media (min-width: 1000px) {
  .c-header--with-group {
    background-image: url('team-building/groupe.png'),
      linear-gradient(to right, #431973, #00415f);
    background-size: auto calc(100% - 10px), auto 100%;
    background-position: right center;
    background-repeat: no-repeat;
  }
}

.c-header__content {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 60px 0;
}

.c-header__content--with-illustration {
  background-image: url('images/map-lyon.png');
  background-size: auto 100%;
  background-position: left top;
  background-repeat: no-repeat;
}

.c-header__side {
  position: relative;
}

@media (min-width: 900px) {
  .c-header__side {
    max-width: 600px;
  }
}

.c-header__anchor {
  margin-top: 0;
  margin-bottom: 10px;
  color: #ffffff;
  font-weight: bold;
  font-size: 24px;
  line-height: 1.2;

  text-decoration: none;
}

.c-header__anchor:any-link:hover,
.c-header__anchor:any-link:focus {
  text-decoration: underline;
}

.c-header__big-title {
  min-height: 240px;
  text-align: center;
  color: white;
  font-family: Miriam, Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 40px;
}

.c-header__big-title--fluid {
  min-height: 0;
}

.c-header__big-title small {
  display: block;
  color: #b8e986;
  line-height: 1.5;
  font-size: 30px;
}

.c-header__title {
  color: #b8e986;
  font-family: Miriam, Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 30px;
  line-height: 1.2;
}

.c-header__subtitle {
  max-width: 400px;
  margin: 0 auto;

  color: #ffffff;
  line-height: 2;
  font-size: 20px;
  text-align: center;
}

.c-header__subtitle strong:not([class]) {
  color: #b8e986;
}

.c-header__description {
  color: #ffffff;
  line-height: 2;
}

.c-header__description p {
  margin: 10px 0 0;
}

.c-header__action {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 60px;
}

.c-header__beta {
  width: 100%;
  margin-top: 15px;

  color: #b8e986;
  font-style: italic;
  text-decoration: none;
}

.c-header__action-caption {
  width: 100%;
  flex: none;
  margin-top: 15px;
  margin-bottom: -10px;

  color: white;
  font-size: 90%;
  text-align: center;
  text-decoration: none;
}

.c-header__action-caption:hover,
.c-header__action-caption:focus {
  text-decoration: underline;
}

.c-header__illustration {
  position: absolute;
  top: 80px;
  right: 0;
  width: 325px;
}

.c-header__illustration--phone {
  top: 0;
  width: 300px;
  padding: 30px 30px 60px;
}

.c-header__squircle {
  display: block;
  width: 140px;
  margin: auto;
}

@media (max-width: 1200px) {
  .c-header__illustration {
    left: 700px;
    right: 0;
    width: auto;
    margin: auto;
    max-width: 325px;
  }

  .c-header__illustration--phone {
    max-width: 300px;
  }

  .c-header__illustration--photo {
    left: 600px;
  }
}

@media (max-width: 900px) {
  .c-header {
    overflow: hidden;
  }

  .c-header__illustration {
    display: none;
  }
}

@media (max-width: 600px) {
  .c-header__content {
    padding: 10vw 0;
  }

  .c-header__anchor {
    font-size: 4vw;
  }

  .c-header__big-title {
    font-size: 7vw;
    min-height: 0;
  }

  .c-header__big-title small {
    font-size: 7vw;
  }

  .c-header__title {
    font-size: 5vw;
  }

  .c-header__action {
    margin-top: 10vw;
  }
}

/* BANNER */

.c-banner {
  display: block;
  padding: 20px 0;
  background: #b8e986;
  color: black;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.c-banner:any-link:hover,
.c-banner:any-link:focus {
  text-decoration: underline;
}

/* WARNING BOX */

.c-warning-box {
  position: absolute;
  bottom: calc(10% - 50px);
  left: 0;
  right: 0;
  padding: 30px;
  background: linear-gradient(315deg, #b8e986, #3cdbe2);
  text-align: center;
  transform: rotate(-10deg);

  transition: opacity 500ms 100ms, transform 600ms;
}

.c-warning-box--closed {
  transform: rotate(-10deg) scale(0.5);
  opacity: 0;

  pointer-events: none;
}

.c-warning-box__cross {
  position: absolute;
  top: 0;
  right: 0;

  padding: 10px;
  border: 0;
  background: none;
  cursor: pointer;

  color: black;
  font: inherit;
  font-size: 1.5em;
  line-height: 1;
}

.c-warning-box__cross:before {
  content: '\2715';
}

.c-warning-box__cross:hover,
.c-warning-box__cross:focus {
  color: #c51cd7;
}

.c-warning-box__title {
  margin: 0;
}

.c-warning-box__action {
}

/* SECTION */

.c-section {
  padding: 60px 0;
  background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.85),
      white 200px,
      white calc(100% - 200px),
      rgba(255, 255, 255, 0.85)
    ),
    url('images/rain.png');
}

.c-section--tiny {
  padding: 20px 0;
}

.c-section--fit {
  padding: 0;
}

.c-section--blue {
  background: linear-gradient(to right, #431973, #00415f);
}

.c-section--black {
  background: black;
  color: white;
}

.c-section--black .c-section__title {
  color: white;
}

.c-section--warning {
  background: #fff3cd;
  color: rgb(102, 77, 3);
}

.c-section--warning strong:not([class]) {
  color: black;
}

.c-section--grayish-blue {
  background: linear-gradient(to right, #703683, #472353);
  color: white;
}

.c-section--dark-violet {
  background: #431973;
  color: white;
}

.c-section--dark-violet .c-section__title,
.c-section--dark-violet .c-section__subtitle {
  color: white;
  text-shadow: 1px 0 2px black;
}

/* le texte posé sur la section, pas celui des cartes blanches qu’elle contient */
.c-section--dark-violet .c-section__content > p:not([class]),
.c-section--dark-violet .c-section__description p:not([class]),
.c-section--dark-violet .c-section__description li:not([class]),
.c-section--dark-violet .c-section__description strong:not([class]) {
  color: white;
}

.c-section--arlette {
  background: #001057;
  color: white;
  text-shadow: 2px 2px 2px black;
}

.c-section--flowers {
  background-image: url('/images/escape/roses-pattern.jpg');
  border: 2px solid #431973;
  border-width: 2px 0;
}

.section__lb-corner {
  display: block;
  margin: auto;

  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: -1;

  width: 180px;
  min-width: 22%;
}

.c-section--tapisserie-arlette {
  background: url('/images/section/section-arlette-tapisserie.jpg');
  background-size: 300px auto;
  color: white;
}

.c-section--tapisserie-arlette .c-section__title,
.c-section--tapisserie-arlette .c-section__subtitle {
  color: #c3a52b;
  text-shadow: 1px 0 2px black;
}

.c-section--tapisserie-arlette .c-photo-slider__link {
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-width: 4px 4px 16px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.c-section--tapisserie-arlette .c-photo-slider__link:hover,
.c-section--tapisserie-arlette .c-photo-slider__link:focus {
  border-color: white;
}

.c-section--green {
  background: linear-gradient(315deg, #b8e986, #3cdbe2);
  color: black;
}

.c-section--university {
  background: black;
  color: white;
}

.c-section--university .c-section__title,
.c-section--university .c-section__subtitle {
  color: white;
}

.c-section--university .c-section__description p:not([class]) {
  color: white;
}

.c-section--university strong:not([class]) {
  color: #f8fb01;
}

.c-section--escape-game-awards {
  background-color: #eb5441;
  background-image: linear-gradient(45deg, #e3305f, #f3751b);
  color: white;
}

.c-section--goldenscapes {
  background-color: #d1a94e;
  background-image: linear-gradient(to top right, #d1a94e, #a97d2d);
  color: #1d1d1d;
}

.c-section--goldenscapes .c-section__title {
  color: #433a8d;
}

.c-section--goldenscapes .c-section__title small:not([class]) {
  color: #433a8d;
}

.c-section--julie-castel {
  background: #472353;
  color: white;
}

.c-section--julie-castel .c-section__title {
  color: #bbaec8;
}

.c-section--julie-castel .c-section__title small:not([class]) {
  color: white;
}

.c-section--julie-castel strong:not([class]) {
  color: #bbaec8;
}

.c-section--diamants {
  background: #431973;
  color: white;
}

.c-section--diamants .c-section__title {
  color: #b8e986;
}

.c-section--diamants .c-section__title small:not([class]) {
  color: white;
}

.c-section--diamants strong:not([class]) {
  color: #b8e986;
}

.c-section--lockee {
  background: #422e80;
  color: white;
}

.c-section--lockee .c-section__title {
  color: white;
}

.c-section--lockee .c-section__title small:not([class]) {
  color: white;
}

.c-section--lockee strong:not([class]) {
  color: #ffc000;
}

.c-section--chococervo {
  background: #e8cbb4;
  color: #3d0f00;
}

.c-section--chococervo .c-section__title {
  color: #0e9832;
}

.c-section--chococervo .c-section__title small:not([class]) {
  color: #3d0f00;
}

.c-section--chococervo strong:not([class]) {
  color: #0e9832;
}

.c-section--aventgers {
  background: #e6e8e1;
  color: #212529;
}

.c-section--aventgers .c-section__title {
  color: #764d29;
}

.c-section--aventgers .c-section__title small:not([class]) {
  color: #212529;
}

.c-section--aventgers strong:not([class]) {
  color: #764d29;
}

.c-section--podcast {
  background: linear-gradient(to right, #dfd0c3 20%, #beb0ce 80%);
  color: #413d39;
}

.c-section--podcast .c-section__title small:not([class]) {
  color: #413d39;
}

.c-section__content--static-arlette {
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 20px 0 calc(60% - 80px);

  background-image: url('/images/section/section-arlette.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 40% center;
}

.c-section__content--arlette {
  position: relative;
  z-index: 1;
  min-height: 460px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 calc(14% - 40px) 0 calc(60% - 140px);

  background-color: black;

  overflow: hidden;
}

.c-section__tableau {
  position: absolute;
  top: 0;
  left: calc(25% - 180px);
  right: auto;
  z-index: -1;

  opacity: 0;
  transition: 0s opacity 2s;
}

.c-section--animated .c-section__tableau {
  opacity: 1;
  transition-delay: 0s;
}

.c-section__rideau {
  position: absolute;
  inset: 0;
  z-index: -1;

  background-repeat: no-repeat;
  background-size: cover;

  transition: transform 2s;
}

.c-section__rideau--gauche {
  left: -100px;
  right: calc(72% + 100px);

  background-image: url('/images/section/section-arlette_gauche.png');
  background-position: right top;

  transform: translateX(100px);
}

.c-section__rideau--droit {
  left: calc(33% - 100px);
  right: -100px;

  background-image: url('/images/section/section-arlette_droit.png');
  background-position: left top;

  transform: translateX(-100px);
}

.c-section--arlette.c-section--animated .c-section__rideau {
  transform: translateX(0);
}

.c-section__pre-title {
  color: #aaa;
  text-align: center;
}

.c-section__title,
.c-section__content h1:not([class]) {
  padding: 0;
  margin: 0 0 1em;
  color: #410b7a;
  font-family: Miriam, Arial, Helvetica, sans-serif;
  font-size: 36px;
  font-weight: bold;
  text-align: center;
}

.c-section__title small:not([class]),
.c-section__content .c-section__title small:not([class]),
.c-section__content h1:not([class]) small:not([class]) {
  color: #aaa;
  display: block;
  margin: 0;
  font-size: 16px;
}

.c-section__title--left {
  text-align: left;
}

.c-section__subtitle,
.c-section__content h2:not([class]) {
  padding: 0;
  margin: 0;
  color: #410b7a;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

.c-section__subtitle small:not([class]),
.c-section__content h2:not([class]) small:not([class]) {
  display: block;
  margin: 0;
  font-size: 16px;
}

.c-section__title-more-link {
  font-weight: normal;
  font-size: 1rem;
}

.c-section__title-more-link::before {
  content: '↪ ';
}

.c-championship-rules h3:not([class]) {
  color: #000;
}

.c-section__low-title {
  color: #410b7a;
  font-family: Miriam, Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 1em;
}

.c-section__introduction {
  max-width: 500px;
  margin: 0 auto 20px;
  font-size: 90%;
  text-align: center;
}

.c-section__content img:not([class]) {
  display: block;
  width: 75%;
  max-width: 280px;
  margin: 2em auto;
  border: 1px solid #2c075b;
}

.c-section__content p:not([class]),
.c-section__content li:not([class]) {
  color: #4a4a4a;
  font-family: Arial, sans-serif;
}

.c-section__content small:not([class]) {
  display: inline-block;
  color: #aaa;
  font-size: inherit;
}

.c-section__content strong:not([class]) {
  color: #410b7a;
}

.c-section__image {
  display: block;
  margin: 0 auto 30px;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

.c-section__news-image {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 66vh;
  margin: 20px auto;
  border-radius: 12px;
}

.c-section__news-image--border {
  border: 2px solid #2d075c;
}

.c-section__description {
  max-width: 600px;
  margin: 0 auto;
}

.c-section__description dl:not([class]) {
  display: grid;
  grid-template-columns: auto 1fr;
  margin-top: 30px;
  overflow: hidden;
}

.c-section__description dt:not([class]),
.c-section__description dd:not([class]) {
  padding: 5px 0;
  margin: 0;
}

.c-section__description dt:not([class]) {
  clear: left;
  float: left;
  color: #aaa;
  font-weight: normal;
  padding-right: 1em;
}

.c-section__description dd:not([class]) {
  width: 100%;
  color: black;
}

.c-section__description dt:not([class]):not(:first-of-type),
.c-section__description dd:not([class]):not(:first-of-type) {
  border-top: 1px dashed #ddd;
}

.c-section__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 60px;
}

.c-section__action-caption {
  width: 100%;
  flex: none;
  margin-top: 15px;

  color: black;
  font-size: 90%;
  text-align: center;
  text-decoration: none;
}

.c-section__action-caption:hover,
.c-section__action-caption:focus {
  text-decoration: underline;
}

@media (max-width: 600px) {
  .c-section {
    padding: 7vw 0;
  }

  .c-section--fit {
    padding: 0;
  }

  .c-section--fit-bottom {
    padding-bottom: 0;
  }

  .c-section__title,
  .c-section__content h1:not([class]) {
    font-size: 6vw;
  }

  .c-section__subtitle,
  .c-section__content h2:not([class]) {
    font-size: 4vw;
  }

  .c-section__content img:not([class]) {
    width: 100%;
  }

  .c-section__description dl:not([class]) {
    margin-top: 5vw;
  }

  .c-section__action {
    margin-top: 10vw;
  }

  .section__lb-corner {
    position: static;
    margin-bottom: 20px;
  }

  .c-goldenscapes {
    flex-direction: column;
    gap: 24px;
  }

  .c-goldenscapes__images {
    width: 100%;
    flex-direction: column;
    gap: 16px;
  }

  .c-goldenscapes__image--square,
  .c-goldenscapes__image--label {
    width: min(320px, 100%);
  }

  .c-goldenscapes__intro {
    font-size: 7vw;
  }
}

/* PHOTO CARD GRID */

.c-photo-card-grid {
  display: grid;
  padding: 0;
  margin: -15px 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.c-photo-card-grid__item {
  padding: 15px;
}

/* PHOTO CARD */

.c-photo-card {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 260px;
  max-width: 400px;
  height: 100%;
  margin: auto;
  padding: 140px 30px 30px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 6px 12px 0 rgba(65, 11, 122, 0.3);
  text-decoration: none;

  pointer-events: auto;
  transition: transform 300ms, opacity 300ms;
}

.c-photo-card-grid {
  pointer-events: none;
}

@media (min-width: 701px) {
  .c-photo-card--action:hover,
  .c-photo-card--action:focus {
    transform: scale(1.05, 1.05);
    transition-delay: 100ms;
  }

  ul:hover .c-photo-card--action:not(:hover):not(:focus),
  ul:focus-within .c-photo-card--action:not(:hover):not(:focus) {
    opacity: 0.5;
    transition-delay: 100ms;
  }
}

.c-photo-card__image {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-photo-card__incentive {
  position: absolute;
  top: -13px;
  left: 100%;
  z-index: 1;

  width: 366px;
  padding: 35px 100px 5px;
  background: #b8e986;

  color: black;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;

  transform: rotateZ(45deg);
  transform-origin: 85px -212px;
}

.c-photo-card__place {
  position: absolute;
  top: 30px;
  left: 60px;
  right: 60px;
  z-index: -1;
  text-align: center;
  color: white;
}

.c-photo-card__label {
  display: inline-block;
  padding: 5px 20px;
  border-radius: 15px;
  background: rgb(245, 166, 35);
  line-height: 1;
  font-size: 20px;
}

.c-photo-card__content {
  position: relative;
  width: 100%;
  padding: 30px 15px 15px;
  margin-top: auto;
  background: white;
  border-radius: 12px;
  font-size: 14px;
  color: #4a4a4a;
  border-top: 12px solid rgb(245, 166, 35);
}

.c-photo-card__logo {
  position: absolute;
  width: 70px;
  right: calc(50% - 35px);
  top: -45px;
}

.c-photo-card__title {
  margin: 0;
  padding: 5px 0 15px;
  color: #410b7a;
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  text-align: center;
}

.c-photo-card__content > p {
  margin: 0;
  line-height: 1.5;
}

.c-photo-card__footer {
  display: flex;
  justify-content: space-between;
  padding-top: 15px;
  color: #9b9b9b;
}

.c-photo-card__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 20px;
  background: rgba(67, 25, 115, 0.6);

  display: flex;
  justify-content: center;
  align-items: center;

  color: white;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
}

/* BELT CARD */

.c-belt-card {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 260px;
  max-width: 400px;
  height: 100%;
  margin: auto;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 6px 12px 0 rgba(65, 11, 122, 0.3);
  text-decoration: none;

  pointer-events: auto;
  transition: transform 300ms, opacity 300ms;
}

.c-belt-card-grid {
  pointer-events: none;
}

@media (min-width: 701px) {
  .c-belt-card--action:hover,
  .c-belt-card--action:focus {
    transform: scale(1.05, 1.05);
    transition-delay: 100ms;
  }

  ul:hover .c-belt-card--action:not(:hover):not(:focus),
  ul:focus-within .c-belt-card--action:not(:hover):not(:focus) {
    opacity: 0.5;
    transition-delay: 100ms;
  }
}

.c-belt-card__image {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 40%;
  z-index: -2;
  width: 100%;
  height: 60%;
  object-fit: cover;
}

.c-belt-card__incentive {
  position: absolute;
  top: -13px;
  left: 100%;
  z-index: 1;

  width: 366px;
  padding: 35px 100px 5px;
  background: #b8e986;

  color: black;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;

  transform: rotateZ(45deg);
  transform-origin: 85px -212px;
}

.c-belt-card__place {
  position: absolute;
  bottom: 60%;
  left: 15px;
  right: 15px;
  z-index: -1;
  text-align: center;
  color: white;
}

.c-belt-card__label {
  display: inline-block;
  padding: 5px 20px;
  border-radius: 15px;
  background: rgb(245, 166, 35);
  line-height: 1;
  font-size: 20px;
}

.c-belt-card__content {
  position: absolute;
  bottom: 0;
  height: 40%;
  height: max-content;
  width: 100%;
  padding: 30px 15px 20px;
  margin-top: auto;
  background: white;
  border-radius: 0;
  font-size: 14px;
  color: #4a4a4a;
  border-top: 20px solid rgb(245, 166, 35);
}

.c-belt-card__logo {
  position: absolute;
  width: 70px;
  right: calc(50% - 35px);
  top: -45px;
  filter: drop-shadow(-2px 0 10px white) drop-shadow(2px 0 10px white);
}

.c-belt-card__title {
  margin: 0;
  padding: 5px 0 15px;
  color: #410b7a;
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  text-align: center;
}

.c-belt-card__content > p {
  margin: 0;
  line-height: 1.5;

  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.c-belt-card__footer {
  position: absolute;
  bottom: 100%;
  width: 100%;
  left: 0;
  padding: 0 15px;

  display: flex;
  justify-content: space-between;
  color: white;
}

.c-belt-card__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 20px;
  background: rgba(67, 25, 115, 0.6);

  display: flex;
  justify-content: center;
  align-items: center;

  color: white;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
}

/* CAPSULE */

.c-capsule-wrapper {
  display: block;
  margin-bottom: 20px;
  text-align: center;
}

.c-capsule-wrapper--overlap {
  position: absolute;
  left: 50%;
  width: 100%;
  transform: translateY(15px) translateX(-50%);
}

.c-capsule.c-capsule {
  display: inline-block;
  padding: 8px 20px;
  margin: 0.25em;
  background: hotpink;
  border-radius: 15px;

  color: white;
  font-size: 14px;
  line-height: 1;
}

.c-capsule.c-capsule--green {
  background-color: #229d30;
}

.c-capsule.c-capsule--blue {
  background-color: #0074d9;
}

.c-capsule.c-capsule--gray {
  background-color: #237d7d;
}

.c-capsule__icon.c-capsule__icon {
  display: inline-block;
  width: auto;
  margin: -4px 0;
  border: 0;
  padding-right: 4px;
}

.c-capsule__label {
}

/* PHOTO GRID */

.c-photo-grid {
  table-layout: fixed;
  width: auto;
  margin: auto;
  border-collapse: collapse;
}

.c-photo-grid td {
  padding: 10px;
}

.c-photo-grid .c-photo-grid__image {
  width: 100%;
  display: block;
  margin: 0;
  padding: 10px;
}

/* PHOTO SLIDESHOW */

.c-photo-slideshow {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 600px;
  margin: auto;
  aspect-ratio: 1;
}

@keyframes c-photo-slideshow__layer--left {
  0% {
    transform: translateX(0) rotate(0deg);
    z-index: 1;
  }
  50% {
    transform: translateX(-130%) rotate(-120deg);
    z-index: 1;
  }
  50.1% {
    z-index: -1;
  }
  100% {
    transform: translateX(0) rotate(-360deg);
    z-index: -1;
  }
}

@keyframes c-photo-slideshow__layer--right {
  0% {
    transform: translateX(0) rotate(0deg);
    z-index: 1;
  }
  50% {
    transform: translateX(130%) rotate(120deg);
    z-index: 1;
  }
  50.1% {
    z-index: -1;
  }
  100% {
    transform: translateX(0) rotate(360deg);
    z-index: -1;
  }
}

@keyframes c-photo-slideshow__layer--back {
  0% {
    transform-origin: -200% 200%;
    transform: translateX(0) rotate(0deg);
    z-index: 1;
  }
  50% {
    transform: rotate(-45deg);
    z-index: 1;
  }
  50.1% {
    z-index: -1;
  }
  100% {
    transform: translateX(0) rotate(0deg);
    z-index: -1;
  }
}

@keyframes c-photo-slideshow__layer--back-right {
  0% {
    transform-origin: 300% 200%;
    transform: translateX(0) rotate(0deg);
    z-index: 1;
  }
  50% {
    transform: rotate(45deg);
    z-index: 1;
  }
  50.1% {
    z-index: -1;
  }
  100% {
    transform: translateX(0) rotate(0deg);
    z-index: -1;
  }
}

.c-photo-slideshow__layer {
  position: absolute;
  inset: 20px;

  animation: 1s c-photo-slideshow__layer--left ease-in-out both paused;
}

.c-photo-slideshow__layer--left {
  animation-name: c-photo-slideshow__layer--left;
}
.c-photo-slideshow__layer--right {
  animation-name: c-photo-slideshow__layer--right;
}
.c-photo-slideshow__layer--back {
  animation-name: c-photo-slideshow__layer--back;
}
.c-photo-slideshow__layer--back-right {
  animation-name: c-photo-slideshow__layer--back-right;
}

.c-photo-slideshow__photo {
  display: block;
  max-width: 100%;
}

.c-photo-slideshow__layer:nth-child(n + 3) .c-photo-slideshow__photo {
  box-shadow: 0 0 20px black;
}

.c-photo-slideshow__photo--polaroid {
  background: white;
  padding: 5% 5% 15%;
}

.c-photo-slideshow__photo--meli {
  transform: translate(0, 6%) rotate(14deg);
}

.c-photo-slideshow__photo--melo {
  transform: translate(0, 3%) rotate(-8deg);
}

.c-photo-slideshow__photo--melu {
  transform: translate(-3%, 6%) rotate(3deg);
}

/* PANORAMA */

.c-panorama {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}

.c-panorama__full {
  display: block;
  width: 100%;
}

.c-panorama__strate {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  pointer-events: none;
}

.c-panorama__logo {
  width: 100%;
}

.c-panorama__point {
  position: absolute;
  text-decoration: none;

  animation: 1s slideInDown backwards;
  transition: transform 300ms;
}

.c-panorama__point:hover,
.c-panorama__point:focus {
  transform: translate(0, -10px);
}
.c-panorama__point:nth-of-type(2) {
  animation-delay: 0.5s;
}

.c-panorama__point:nth-of-type(3) {
  animation-delay: 1s;
}

.c-panorama__point:nth-of-type(4) {
  animation-delay: 1.5s;
}

.c-panorama__point:nth-of-type(5) {
  animation-delay: 2s;
}

.c-panorama__title {
  display: inline-block;
  margin-left: 50%;
  transform: translate(-50%, 0);
  color: black;
  white-space: nowrap;
  font-weight: bold;
  font-size: 28px;
  text-transform: uppercase;

  opacity: 0;
  transition: transform 300ms;
}

.c-panorama__point:hover .c-panorama__title,
.c-panorama__point:focus .c-panorama__title {
  opacity: 1;
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

/* CLUE BOX */

.c-details-box {
  border: 1px solid #ccc;
  padding: 0;
  border-radius: 20px;
  overflow: hidden;
}

.c-details-box:hover,
.c-details-box[open] {
  border-color: black;
}

.c-details-box--disabled,
.c-details-box--disabled:hover {
  border-color: #d5d5d5;
  background: #f7f7f7;
}

.c-details-box--disabled .c-details-box__summary {
  cursor: not-allowed;
}

.c-details-box--disabled .c-details-box__id,
.c-details-box--disabled .c-details-box__question,
.c-details-box--disabled .c-details-box__text {
  color: #777;
}

.c-details-box--disabled .c-details-box__question {
  opacity: 0.9;
}

.c-details-box__summary {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 80px;
  padding: 20px 20px 20px 80px;
  margin: 0;
  line-height: 1.25;
  list-style: none;
}

.c-details-box__icon {
  position: absolute;
  top: 20px;
  left: 20px;
  bottom: 0;
  width: 40px;
  height: 40px;
}

.c-details-box__question {
  font-size: 20px;
}

.c-details-box[open] .c-details-box__icon {
  filter: drop-shadow(0 0 5px white) drop-shadow(0 0 30px var(--icon-color))
    drop-shadow(0 0 50px var(--icon-color))
    drop-shadow(0 0 100px var(--icon-color));
}

.c-details-box__when-open {
  display: none;
}

.c-details-box[open] .c-details-box__when-open {
  display: block;
}

.c-details-box[open] .c-details-box__when-closed {
  display: none;
}

.c-details-box__id {
  display: block;
  color: #4a4a4a;
  font-weight: normal;
  font-size: 14px;
}

.c-details-box__content {
  padding: 0 20px 20px;
}

.c-details-box__text {
  color: black;
}

.c-details-box__image {
  display: block;
  margin: 20px auto 0;
  border: 1px solid black;
  border-radius: 10px;
}

/* MINI BOX */

.c-mini-box {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
  padding: 52px 40px 40px;

  border-radius: 12px;
  background-color: white;
  box-shadow: 0 28px 62px 0 rgba(65, 11, 122, 0.1);

  text-decoration: none;
}

.c-mini-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 12px;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(to bottom, #3cdbe2, #50e3c2);
}

.c-mini-box--odd::before {
  background: linear-gradient(315.17deg, #03465f 0%, #410b7a 100%);
}

.c-mini-box__image {
  flex: none;
  width: 40%;
  min-width: 60px;
  margin-right: 30px;
}

.c-mini-box__title {
  color: #410b7a;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.2;
}

.c-mini-box__action {
  display: inline-block;
  margin-top: 10px;
  border-bottom: 1px solid transparent;

  color: #c51cd7;
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap;
}

.c-mini-box:hover .c-mini-box__action,
.c-mini-box:focus .c-mini-box__action {
  border-color: currentColor;
}

@media (max-width: 800px) {
  .c-mini-box__image {
    display: none;
  }
}

@media (max-width: 600px) {
  .c-mini-box {
    padding: calc(12px + 6vw) 6vw 6vw;
  }

  .c-mini-box__title {
    font-size: 4vw;
  }
}

/* FULL BOX */

.c-full-box {
  position: relative;
  padding: 60px;
  border-radius: 12px;
  background: linear-gradient(315deg, #b8e986, #3cdbe2);
  box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.1);
}

.c-full-box--empty {
  padding-top: 52px;
  background: white;
  box-shadow: 0 28px 62px 0 rgba(65, 11, 122, 0.1);
}

.c-full-box--empty::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 12px;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(to bottom, #3cdbe2, #50e3c2);
}

.c-full-box--odd {
  background: linear-gradient(315deg, #03465f, #410b7a);
}

.c-full-box--outline {
  border: 2px dashed currentColor;
  background: transparent;
  box-shadow: none;
}

.c-full-box__highlight {
  margin: 0 0 20px;
  font-size: clamp(26px, 6vw, 44px);
  font-weight: bold;
  text-align: center;
  text-wrap: balance;
  user-select: all;
}

.c-full-box__background {
  position: absolute;
  top: 30px;
  left: 0;
  right: 30px;
  z-index: 1;
  width: 360px;
  max-width: 40%;
  margin-left: auto;
  opacity: 0.5;

  pointer-events: none;
}

.c-full-box__content {
  position: relative;
  z-index: 2;
}

.c-full-box__anchor {
  margin-top: 0;
  margin-bottom: 24px;
  color: black;
  font-size: 14px;
  font-weight: bold;
}

.c-full-box--odd .c-full-box__anchor {
  color: white;
}

.c-full-box__title {
  margin: 0 0 30px;

  color: #410b7a;
  font-size: 30px;
  font-weight: bold;
  font-family: Miriam, Arial, Helvetica, sans-serif;
  line-height: 1.2;
  text-align: center;
}

.c-full-box--odd .c-full-box__title {
  color: #b8e986;
}

.c-full-box__description {
  max-width: 600px;
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
  color: black;
  line-height: 2;
}

.c-full-box--odd .c-full-box__description,
.c-full-box--odd .c-full-box__description p,
.c-full-box--odd .c-full-box__description li {
  color: white;
}

.c-full-box--odd .c-full-box__description strong {
  color: #b8e986;
}

.c-full-box__description p {
  margin: 10px 0 0;
}

.c-full-box__action {
  display: flex;
  justify-content: center;
  margin-top: 60px;
}

@media (max-width: 600px) {
  .c-full-box {
    padding: 10vw;
  }

  .c-full-box__anchor {
    margin-bottom: 4vw;
  }

  .c-full-box__title {
    font-size: 6vw;
  }

  .c-full-box__description {
    margin-top: 7vw;
  }

  .c-full-box__action {
    margin-top: 10vw;
  }
}

/* STEP LIST */

.c-step-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: -12px;
  list-style: none;
}

.c-step-list__item {
  flex: 1;
  min-width: 0;
  margin: 12px;
}

@media (max-width: 1000px) {
  .c-step-list__item {
    min-width: 35%;
  }
}

@media (max-width: 600px) {
  .c-step-list {
    margin: -2vw;
  }

  .c-step-list__item {
    margin: 2vw;
  }
}

@media (max-width: 500px) {
  .c-step-list__item {
    min-width: 60%;
  }
}

/* STEP */

.c-step {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  width: 100%;
  max-width: 200px;
  margin-right: auto;
  padding: 24px;
  border-radius: 12px;
  background-color: white;
  box-shadow: 0 28px 62px 0 rgba(65, 11, 122, 0.1);

  text-decoration: none;
  color: inherit;

  pointer-events: auto;
  transition: transform 300ms, opacity 300ms;
}

:nth-child(odd) > .c-step {
  margin-left: auto;
  margin-right: 0;
}

.c-step-list {
  pointer-events: none;
}

@media (min-width: 701px) {
  .c-step--action:hover,
  .c-step--action:focus {
    transform: scale(1.1, 1.1);
    transition-delay: 100ms;
  }

  .c-step-list:hover .c-step--action:not(:hover):not(:focus),
  .c-step-list:focus-within .c-step--action:not(:hover):not(:focus) {
    opacity: 0.5;
    transition-delay: 100ms;
  }
}

.c-step__image {
  flex: none;
  margin: 0 0 24px;
}

.c-step__image > img {
  display: block;
  width: auto;
  height: 90px;
  margin: auto;
}

.c-step__number {
  display: block;
  font-weight: bold;
}

.c-step__description {
  margin-bottom: auto;
  color: #410b7a;
  text-align: center;
}

.c-step__action {
  margin: 12px 0 0;
}

@media (max-width: 600px) {
  .c-step {
    padding: 4vw;
  }

  .c-step.c-step {
    margin: auto;
  }

  .c-step__image {
    margin-bottom: 4vw;
  }

  .c-step__image > img {
    height: 20vw;
  }

  .c-step__action {
    margin-top: 2vw;
  }
}

/* LOGO SLIDER */

.c-logo-slider {
  position: relative;
  padding: 50px 0;
  text-align: center;
}

.c-logo-slider__content {
  margin: auto;
}

.c-logo-slider__list {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;

  list-style: none;
  margin: 0;
  padding: 0;
}

.c-logo-slider__item {
  display: inline-block;
}

.c-logo-slider__link {
  display: block;
  width: 140px;
  height: 70px;
  margin: 2px 0;
  overflow: hidden;
  outline: 2px solid transparent;
  transition: all 300ms;
}

.c-logo-slider__link:any-link:hover,
.c-logo-slider__link:any-link:focus {
  border-color: #c51cd7;
  outline-color: #c51cd7;
}

.c-logo-slider__image,
.c-section__content .c-logo-slider__image {
  width: 140px;
  height: 70px;
  border: none;
  margin: 0;
  transition: all 300ms;
}

.c-logo-slider__link:any-link:hover .c-logo-slider__image,
.c-logo-slider__link:any-link:focus .c-logo-slider__image {
  transform: scale(1.1);
}

/* QUOTE */

.c-quote {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: 0 auto;
  font-style: normal;
  text-align: center;
}

.c-quote::before {
  content: '\201C';
  position: absolute;
  top: -0.4em;
  left: -0.2em;
  z-index: -1;

  color: #3cdbe2;
  font-size: 7.5em;
  font-weight: bold;
  font-family: Georgia, serif;
  font-style: italic;
  opacity: 0.3;
}

.c-quote.u-txt-left::after {
  content: '';
  position: absolute;
  top: -10px;
  left: -20px;
  bottom: -10px;
  z-index: -2;
  border-right: 4px solid #c51cd7;
  opacity: 0;
}

.c-anchor:target + .c-quote::after {
  opacity: 1;
}

@media (max-width: 450px) {
  .c-anchor:target + .c-quote {
    margin-left: 10px;
  }
}

.c-quote__text {
  margin: 0;
  color: #1c6466;
  font-size: 1.5em;
  font-family: Georgia, serif;
  font-style: italic;
}

.c-quote__text--medium {
  margin-top: 20px;
  font-size: 1.25em;
}

.c-quote__text--small {
  margin-top: 20px;
  font-size: 1em;
}

.c-quote__footer {
  display: block;
  margin-top: 1em;
}

.c-quote__footer::before {
  content: '— ';
  margin-right: 1em;
}

.c-quote__name {
  text-transform: uppercase;
}

.c-quote__uni {
  font-style: normal;
}

@media (max-width: 600px) {
  .c-quote__text {
    font-size: 1.2em;
  }

  .c-quote__text--small {
    font-size: 1em;
  }
}

/* PAPER */

.c-paper {
  border: 1px solid transparent;
  border-image: linear-gradient(to bottom, #3cdbe2, #50e3c2);
  border-image-slice: 1;
  padding: 0 20px;
}

.c-paper,
.c-paper p {
  color: #410b7a;
  font-style: italic;
  //font-family: monospace, monospace;
}

/* NEWSPAPER */

.c-newspapers {
  position: relative;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  padding-top: 1em;
}

.c-newspapers::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-top: 1px solid #333;
  padding: 0 2em;
}

.c-newspapers__label {
  display: block;
  padding: 0.5em;

  text-align: center;
  white-space: nowrap;
}

.c-newspapers__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  margin: 0;
  padding: 0;
  list-style: none;
}

.c-newspapers__item {
  margin: 0.5em;
}

.c-newspapers__link {
  display: inline-block;
  border-radius: 5px;
  border: 3px solid transparent;
  transiton: 300ms filter;
}

.c-newspapers__link:hover,
.c-newspapers__link:focus {
  border-color: #c51cd7;
  background: white;
}

.c-newspapers__logo {
  display: block;
  width: 50px;
  height: auto;
  padding: 5px;
}

/* PRODUCT BOX */

.c-product-box {
  position: relative;
  min-width: 260px;
  max-width: 300px;
  height: 100%;
  padding: 52px 40px 40px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;

  border-radius: 12px;
  background-color: white;
  box-shadow: 0 28px 62px 0 rgba(65, 11, 122, 0.1);

  text-decoration: none;
}

.c-product-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 12px;
  border-radius: 12px 12px 0 0;
  background: rgb(184, 233, 134);
}

.c-product-box--two::before {
  background: rgb(189, 16, 224);
}

.c-product-box--three::before {
  background: rgb(245, 166, 35);
}

.c-product-box__title {
  margin-bottom: 20px;
  color: #410b7a;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
}

.c-product-box__content {
  flex: auto;
  display: flex;
  flex-direction: column;
}

.c-product-box__icon {
  position: relative;
  z-index: 1;

  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  margin: 0 auto;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;

  font-size: 42px;
  line-height: 0.95;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}

.c-product-box__icon--price {
  flex-direction: row;
  justify-content: center;
}

.c-product-box__squircle {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;

  color: rgb(184, 233, 134);
}

.c-product-box--two .c-product-box__squircle {
  color: rgb(189, 16, 224);
}

.c-product-box--three .c-product-box__squircle {
  color: rgb(245, 166, 35);
}

.c-product-box__icon small:not([class]) {
  color: inherit;
  font-size: 40%;
}

.c-product-box__description {
  margin: 20px 0 0;
}

.c-product-box__features {
  list-style: none;
  margin: auto 0 0;
  padding-top: 40px;
  padding-left: 1em;

  white-space: nowrap;
}

.c-product-box__features svg {
  display: inline-block;
  vertical-align: sub;
  margin-right: 0.5em;
  color: rgb(184, 233, 134);
}

.c-product-box__features strong {
  font-size: 120%;
}

.c-product-box--two .c-product-box__features svg {
  color: rgb(189, 16, 224);
}

.c-product-box--three .c-product-box__features svg {
  color: rgb(245, 166, 35);
}

.c-product-box__action {
  flex: none;
  padding: 20px 0 0;

  text-align: center;
}

.c-product-box__gift-link {
  display: block;
  color: #410b7a;
  margin-top: 10px;
}

.c-product-box__gift-link:hover,
.c-product-box__gift-link:focus {
  color: #c51cd7;
}

@media (min-width: 601px) and (max-width: 950px) {
  .c-product-box {
    min-width: 51vw;
    max-width: none;
  }

  .c-product-box__content {
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
  }

  .c-product-box__icon {
    margin: 0 20px 0 0;
  }

  .c-product-box__description {
    width: 35%;
    margin: 0 20px 0 0;
  }

  .c-product-box__features {
    width: 35%;
    margin: 0 20px 0 0;
    padding: 0;
  }

  .c-product-box__action {
    padding: 0;
  }
}

@media (min-width: 601px) and (max-width: 800px) {
  .c-product-box__description {
    display: none;
  }

  .c-product-box__features {
    margin: 0 auto;
  }
}

@media (max-width: 600px) {
  .c-product-box {
    padding: calc(12px + 6vw) 6vw 6vw;
    min-width: 51vw;
  }

  .c-product-box__description {
    display: none;
  }

  .c-product-box__features {
    margin: 0;
    padding-top: 20px;
  }
}

/* WHITE PHONE */

.c-phone {
  position: relative;
  display: table;
  margin: 0 auto;
  width: 100%;
  min-width: 170px;
  padding: 60px 10px;
  border: 5px solid #2f2f2f;
  border-radius: 30px;
  background: #171717;
  box-shadow: 0 28px 62px 0 rgba(65, 11, 122, 0.1);
}

.c-phone__wrapper {
  margin: 0 auto;
  max-width: 230px;
}

.c-phone__wrapper--annotated {
  padding-left: 170px;
  max-width: 400px;
}

.c-phone--landscape {
  padding: 10px 60px;
}

.c-phone__screen {
  position: relative;
  display: block;
  width: 100%;
  max-width: 300px;
  padding: 0;
  background: transparent;
  border: none;
  font: inherit;
  cursor: pointer;
}

.c-phone--landscape .c-phone__screen {
  max-width: none;
  max-height: 300px;
}

.c-phone__screen > img {
  display: block;
}

.c-phone__screen::after {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 60px;
  height: 80px;
  margin: auto;
  border: 20px #b8e986 solid;
  border-top: 0;
  border-bottom: 0;
  opacity: 0;

  transition: opacity 500ms;
}

.c-phone__screen--pause::after {
  opacity: 1;
}

.c-phone__back-face {
  display: block;
  width: 100%;
}

.c-phone__front-face {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: opacity 500ms;
}

.c-phone__screen .c-phone__front-image {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  border: 0;
}

.c-phone__front-text {
  position: absolute;
  bottom: 80%;
  right: calc(100% + 15px);
  width: 180px;
  padding-right: 10px;
  color: white;
  font-family: cursive, sans-serif;
  font-size: 20px;
  line-height: 1.2;
  opacity: 0;
  transition: opacity 500ms;
}

.c-phone__front-text path {
  fill: none;
  stroke: currentColor;
}

.c-phone__front-text--dark {
  color: #2c075b;
}

.c-phone__front-arrow {
  position: absolute;
  top: 90%;
  right: 15%;
  transform: rotateZ(-45deg);
}

.c-phone__front-text--left-bottom {
  top: 80%;
  bottom: auto;
}

.c-phone__front-text--left-bottom .c-phone__front-arrow {
  top: auto;
  bottom: 90%;
  transform: rotateZ(45deg) scale(1, -1);
}

.c-phone__front-face--current {
  opacity: 1;
}

.c-phone__front-face--current .c-phone__front-text {
  opacity: 1;
  transition-delay: 500ms;
}

.c-phone__speaker {
  position: absolute;
  top: 25px;
  left: 50%;
  margin: 0 -25px;
  width: 50px;
  height: 6px;
  background: #2f2f2f;
  border-radius: 6px;
}

.c-phone--landscape > .c-phone__speaker {
  top: 50%;
  left: 25px;
  margin: -25px 0;
  width: 6px;
  height: 50px;
}

.c-phone__home {
  position: absolute;
  left: 50%;
  bottom: 15px;
  background: transparent;
  margin: 0 -18px;
  width: 30px;
  height: 30px;
  border: 5px solid #2f2f2f;
  border-radius: 50%;
  appearance: none;
}

.c-phone--landscape > .c-phone__home {
  top: 50%;
  left: auto;
  right: 15px;
  margin: -15px 0;
}

/* LOGO SHOWCASE */

.c-logo-showcase img {
  display: block;
  width: 140px;
  height: 180px;
  margin: 16px auto;
  border: none;
  object-fit: contain;
}

/* DEFINITION TABLE */

.c-definition-table {
  width: 100%;
  max-width: 400px;
  margin: auto;
}

.c-definition-table__section {
  color: black;
  flex: auto;
  text-transform: uppercase;
  width: 100%;
  margin-top: 20px;
}

.c-definition-table tr {
  display: flex;
  align-items: flex-end;
}

.c-definition-table th {
  flex: none;
  padding: 6px 0;
  order: 0;

  text-align: left;
  font-weight: bold;
  line-height: 1.25;
}

.c-definition-table th small {
  display: block;

  color: inherit;
  font-weight: normal;
  font-size: small;
}

.c-definition-table td {
  flex: none;
  order: 2;
}

.c-definition-table tr::after {
  content: '';
  flex: auto;
  order: 1;
  border-bottom: 2px dotted black;
  margin: 8px 0.5em;
}

/* AGENDA LIST */

.c-agenda-list {
  margin: 0;
  padding: 0;

  list-style: none;
}

.c-agenda-list__item {
  padding: 15px 0;
  margin-bottom: 15px;
}

/* ITEMS SLIDER */

.c-items-slider {
  display: flex;
  padding: 10px 0; /* to contain box-shadow */

  overflow: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 40px;
}

.c-items-slider::before,
.c-items-slider::after {
  content: '';
  flex: auto;
  min-width: 40px;
}

.c-items-slider__list {
  display: inline-flex;
  flex-wrap: nowrap;
  justify-content: start;
  padding: 0;

  list-style: none;
}

.c-items-slider--grid .c-items-slider__list {
  flex-wrap: wrap;
  justify-content: center;
  max-width: calc(100vw - 80px);
}

.c-items-slider__item {
  flex: none;
  padding: 10px;

  scroll-snap-align: start;
}

.c-items-slider--3 .c-items-slider__item {
  width: 333px;
  max-width: 333px;
}

@media (max-width: 832px) {
  .c-items-slider--3 .c-items-slider__item {
    max-width: calc(50vw - 40px);
  }
}

@media (max-width: 499px) {
  .c-items-slider--3 .c-items-slider__item {
    max-width: calc(100vw - 80px);
  }
}

.c-items-slider--3xl .c-items-slider__item {
  width: 333px;
  max-width: 333px;
}

@media (max-width: 899px) {
  .c-items-slider--3xl .c-items-slider__item {
    max-width: calc(50vw - 40px);
  }
}

@media (max-width: 666px) {
  .c-items-slider--3xl .c-items-slider__item {
    max-width: calc(100vw - 80px);
  }
}

.c-items-slider--4 .c-items-slider__item {
  width: 250px;
  max-width: 250px;
}

@media (max-width: 875px) {
  .c-items-slider--4 .c-items-slider__item {
    max-width: calc(33.3vw - 27px);
  }
}

@media (max-width: 625px) {
  .c-items-slider--4 .c-items-slider__item {
    max-width: calc(50vw - 40px);
  }
}

.c-items-slider--5 .c-items-slider__item {
  width: 200px;
  max-width: 200px;
}

@media (max-width: 900px) {
  .c-items-slider--5 .c-items-slider__item {
    max-width: calc(20vw - 16px);
  }
}

@media (max-width: 700px) {
  .c-items-slider--5 .c-items-slider__item {
    max-width: calc(25vw - 20px);
  }
}

@media (max-width: 500px) {
  .c-items-slider--5 .c-items-slider__item {
    width: calc(33.3vw - 26px);
  }
}

/* ENIGME IMAGE */

.c-enigme-image {
  display: block;
  max-height: 554px;
  margin: 20px auto;
  border-radius: 12px;
}

/* SOLVED */

/*
 * Bandeau « déjà trouvé », au-dessus du formulaire de réponse.
 *
 * Vert et encadré pour se distinguer du texte de l'énigme : c'est une
 * information sur le joueur, pas sur l'histoire qu'il est en train de lire.
 */
.c-solved {
  padding: 10px 20px;
  border: 1px solid #2ecc40;
  border-radius: 5px;
  background: #f2fbf3;
  text-align: center;
}

/* COUNTDOWN */

/*
 * Compte à rebours avant l'ouverture d'une énigme, sous le titre.
 *
 * display: table pour que l'encadré s'arrête à la largeur de son texte, quelle
 * que soit la durée affichée, et reste centré.
 */
.c-countdown {
  display: table;
  margin: 30px auto;
  padding: 10px 20px;
  border: 1px solid #aaa;
  border-radius: 5px;
  background: white;
  color: #aaa;
  font-size: 16px;
  text-align: center;
  text-transform: uppercase;
  animation: c-countdown-pulse 1s ease-out infinite;
}

/*
 * Chiffres à chasse fixe. Sans ça, la largeur du compte à rebours change à
 * chaque seconde et l'encadré tressaute sous le titre.
 */
.c-countdown__time {
  color: black;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}

/* Une pulsation par seconde, au rythme du décompte. */
@keyframes c-countdown-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(170, 170, 170, 0.6);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(170, 170, 170, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(170, 170, 170, 0);
  }
}

/* Une pulsation perpétuelle est pénible pour qui y est sensible. */
@media (prefers-reduced-motion: reduce) {
  .c-countdown {
    animation: none;
  }
}

/* ACCOUNT HEADER */

/*
 * Titre de la page de compte et bouton de déconnexion.
 *
 * Le bouton appartient au titre plus qu'au reste de la page : c'est l'action
 * qui porte sur le compte lui-même, pas sur son contenu. On resserre donc
 * l'espace que le titre ménage seul, et le bloc le rend plus bas.
 */
.c-account-header {
  margin-bottom: 1em;
}

.c-account-header .c-section__title {
  margin-bottom: 0.4em;
}

/*
 * Les explications de la page de compte : ce qu'on lit une fois, pas ce qu'on
 * vient chercher. Plus petites que le corps de texte, sans être illisibles.
 */
.c-account-note {
  font-size: 14px;
}

/* SEPARATOR */

/*
 * Titre de section, quand la section contient elle-même des titres.
 *
 * Sur la page de compte, « Vos participations » précède un titre par série.
 * Avec c-section__low-title, les deux niveaux avaient la même taille et la
 * même graisse : plus rien ne disait lequel contenait l'autre. Le filet et
 * l'espace au-dessus font la coupure.
 */
.c-separator {
  margin: 50px 0 25px;
  padding-top: 20px;
  border-top: 2px solid #e2e2e2;
  color: #410b7a;
  font-family: Miriam, Arial, Helvetica, sans-serif;
  font-size: 24px;
  font-weight: bold;
}

/*
 * Le décompte, dans un séparateur qui en porte un. Plus gros que le reste du
 * titre : c'est le chiffre qu'on vient chercher, la phrase ne fait que le
 * nommer.
 */
.c-separator__count {
  font-size: 32px;
  font-variant-numeric: tabular-nums;
}

/* QUICK FORM */

/*
 * Formulaire à un seul champ : rejoindre une équipe, la créer, la renommer.
 *
 * Le bouton reste sur la ligne de la saisie, y compris en mobile, où son
 * libellé se réduit à « OK ». Ces formulaires sont utilisés une fois dans une
 * vie de joueur : leur donner la hauteur d'un formulaire d'inscription les
 * rendait plus encombrants qu'utiles.
 *
 * La marge haute vient du titre qui les précède, et de lui seul.
 */
.c-quick-form {
  max-width: 420px;
  margin: 0 auto 30px;
}

.c-quick-form .o-control {
  flex-wrap: nowrap;
}

/*
 * min-width par défaut à 200 px, ce qui ferait déborder la ligne sur un
 * téléphone étroit. La saisie prend ce qui reste après le bouton.
 */
.c-quick-form .o-input {
  min-width: 0;
}

/* INVITE */

/*
 * Le code d'invitation d'une équipe et ses deux actions, sur une seule ligne.
 *
 * flex-wrap laisse les boutons passer dessous sur un téléphone étroit plutôt
 * que de comprimer le code, qui est fait pour être lu et recopié.
 */
.c-invite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 15px;
}

.c-invite__code {
  margin: 0;
  padding: 12px 24px;
  border: 1px dashed #aaa;
  border-radius: 5px;
  background: white;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 0.18em;
  user-select: all;
}

/* ADMIN BAR */

/*
 * Barre d'outils des pages d'administration : deux rangées, ce qu'on regarde
 * puis ce qu'on en fait. Elles se replient d'elles-mêmes sur un téléphone.
 */
.c-admin-bar {
  margin: 0 0 30px;
}

.c-admin-bar__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
}

/* Le sélecteur prend la place qui reste, sans pousser le bouton dehors. */
.c-admin-bar__select {
  flex: 1;
  min-width: 0;
  max-width: 420px;
}

/* LOG */

/*
 * Journal d'activité de l'administration.
 *
 * Une ligne par événement, l'heure en tête. Pas de numérotation : dans un
 * journal, le rang d'une ligne n'apprend rien, l'heure si.
 */
.c-log {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.c-log__line {
  padding: 3px 0;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  line-height: 1.5;
}

/*
 * Le changement de jour, à la taille d'une ligne de journal.
 *
 * C'est un repère, pas un titre : en gros et espacé, il découpait la page en
 * chapitres alors qu'il ne fait que dire « on passe à la veille ».
 */
.c-log__day {
  margin: 25px 0 0;
  padding: 3px 0;
  border-bottom: 1px solid #aaa;
  color: #4a4a4a;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.5;
}

.c-log__day:first-child {
  margin-top: 0;
}

.c-log__time {
  color: #767676;
  font-variant-numeric: tabular-nums;
}

.c-log__riddle {
  color: #767676;
}

/* Une proposition d'aperçu ne compte pour rien : elle s'efface un peu. */
.c-log__line--preview {
  opacity: 0.6;
}

/* HISTORY */

/*
 * Les participations d'un joueur, une table par série, sur sa page de compte.
 *
 * Deux colonnes étroites encadrent le nom de l'énigme : la place au palmarès
 * et la marque de réussite. Elles sont ramenées à leur contenu pour que le
 * nom, seul élément de largeur variable, prenne tout le reste.
 */
.c-history {
  width: 100%;
  margin: 0 0 30px;
  border-collapse: collapse;
}

.c-history td,
.c-history th {
  padding: 6px 5px;
  border-top: 1px solid #ddd;
  text-align: left;
}

.c-history th {
  border-top: 0;
  border-bottom: 1px solid #aaa;
  color: #4a4a4a;
  font-size: 14px;
  font-weight: normal;
}

.c-history td:not(:first-child),
.c-history th:not(:first-child) {
  width: 1%;
  text-align: center;
  white-space: nowrap;
}

/* Une place absente se lit « - », et ne doit pas attirer l'œil. */
.c-history__empty {
  color: #aaa;
}

/*
   Le nom sous lequel la place a été obtenue, à côté d'elle.

   La cellule interdit les retours à la ligne pour que « 33e » ne se coupe
   pas ; le nom, lui, les autorise : « Les grattons malicieux » élargirait
   sinon la colonne au point de pousser le reste du tableau hors de l'écran.
 */
.c-history__name {
  display: block;
  color: #4a4a4a;
  font-size: 14px;
  white-space: normal;
}

/* NEWS CARD */

.c-item-square {
  position: relative;
  display: block;
  border-radius: 12px;

  color: #2d075c;
  text-decoration: none;
  text-transform: uppercase;
}

.c-item-square--black {
  color: black;
}

.c-item-square--dark {
  color: white;
}

.c-item-square__illustration {
  position: relative;
  display: block;
}

.c-item-square__image {
  display: block;
  width: auto;
  height: auto;
  outline: 2px solid transparent;
  border-radius: 12px;

  box-shadow: 0 6px 12px 0 rgba(65, 11, 122, 0.3);
}

.c-item-square--black .c-item-square__image {
  filter: grayscale(100%);
}

.c-item-square__image--border {
  outline: 2px solid currentColor;
}

.c-item-square__image--with-tongue {
  outline: 2px solid #00415f;
}

.c-item-square--dark .c-item-square__image--with-tongue {
  outline: 2px solid white;
}

.c-item-square--black .c-item-square__image--with-tongue {
  outline: 2px solid black;
}

.c-item-square--dark.c-item-square--black .c-item-square__image--with-tongue {
  outline: 2px solid #aaa;
}

.c-item-square__placeholder {
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  outline: 2px solid currentColor;
  border-radius: 12px;
  box-shadow: 0 6px 12px 0 rgba(65, 11, 122, 0.3);

  font-size: 100px;
}

.c-item-square__date {
  display: block;
  margin: 0 auto 10px;
  min-height: 1em;

  color: #aaa;
  font-size: 14px;
  line-height: 1;
  text-align: center;
}

.c-item-square__title {
  display: block;
  margin: 10px auto 0;
  max-width: 200px;

  text-align: center;
  font-size: 20px;
  line-height: 1.2;
  font-family: Miriam, Arial, Helvetica, sans-serif;
  font-weight: bold;
}

.c-item-square__tongue {
  display: block;
  margin-top: -12px;
  padding: 24px 12px 12px;
  border-radius: 0 0 12px 12px;
  background: #00415f;

  color: #05e2ff;
  font-family: Miriam, Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.2;
  text-align: left;
}

.c-item-square--dark .c-item-square__tongue {
  color: black;
  background: white;
}

.c-item-square--black .c-item-square__tongue {
  color: white;
  background: black;
}

.c-item-square--dark.c-item-square--black .c-item-square__tongue {
  color: black;
  background: #aaa;
}

.c-item-square__pre-name {
  display: block;
}

.c-item-square__name {
  display: block;

  color: white;
  font-weight: bold;
}

.c-item-square--dark .c-item-square__name {
  color: black;
}

.c-item-square__meta {
  display: block;
  margin-top: 6px;

  font-size: 12px;
}

.c-item-square__capsule {
  display: table;
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  margin: auto;
  z-index: 1;
  padding: 4px 10px;
  background: white;

  color: black;
  font-size: 14px;
  text-align: center;
  line-height: 16px;
  border-radius: 20px;
}

.c-item-square__capsule--success {
  color: rgb(0, 128, 0);
}

.c-item-square__capsule--highlight {
  background: #c51cd7;
  color: white;
}

.c-item-square__capsule--dark {
  background: black;
  color: white;
}

.c-item-square__capsule--bottom {
  top: auto;
  bottom: 4px;
}

.c-item-square__capsule--top-right {
  top: 6%;
  left: auto;
  right: 6%;
}

.c-item-square__capsule-icon {
  height: 14px;
  width: 14px;
  vertical-align: text-top;
}

.c-item-square:hover,
.c-item-square:focus {
  color: #c51cd7;
}

.c-item-square--dark:hover,
.c-item-square--dark:focus {
  color: #c880d0;
}

.c-item-square:hover .c-item-square__image,
.c-item-square:focus .c-item-square__image {
  outline: 2px solid currentColor;
}

.c-item-square--black:hover .c-item-square__image,
.c-item-square--black:focus .c-item-square__image {
  outline: 2px solid #4c4c4c;
}

.c-item-square:hover .c-item-square__tongue,
.c-item-square:focus .c-item-square__tongue {
  background: #c51cd7;
}

.c-item-square--dark:hover .c-item-square__tongue,
.c-item-square--dark:focus .c-item-square__tongue {
  background: #c880d0;
}

.c-item-square--black:hover .c-item-square__tongue,
.c-item-square--black:focus .c-item-square__tongue {
  background: #4c4c4c;
}

@media (max-width: 799px) {
  .c-item-square__title {
    font-size: 16px;
  }

  .c-item-square__tongue {
    font-size: 14px;
  }

  .c-item-square__meta {
    font-size: 11px;
  }
}

@media (max-width: 479px) {
  .c-item-square__date {
    font-size: 12px;
  }

  .c-item-square__capsule {
    font-size: 12px;
    line-height: 14px;
  }

  .c-item-square__title {
    font-size: 14px;
  }

  .c-item-square__tongue {
    font-size: 12px;
  }

  .c-item-square__meta {
    font-size: 10px;
  }
}

/* ALERT */

.c-alert {
  position: relative;
  border: 1px solid #2c075b;
  border-radius: 4px;
  padding: 12px 20px;
  margin-bottom: 20px;
}

.c-alert--warning {
  border-color: rgba(241, 142, 6, 0.8);
  background-color: rgba(220, 128, 1, 0.05);
  box-shadow: 0px 0px 2px #ffb103;
  color: #ffb103;
}

.c-alert__title {
  font-weight: bold;
  color: rgb(205, 120, 2);
}

/*
 * Les actions d'une alerte, sur leur propre ligne.
 *
 * display: block plutôt qu'un div, parce que le contenu d'une alerte est fait
 * de span : un bloc au milieu de texte en ligne casserait le fil de la phrase
 * juste au-dessus.
 */
.c-alert__actions {
  display: block;
}

/*
 * Mise en valeur à l'intérieur d'une alerte.
 *
 * Elle prend la couleur de l'alerte, et non celle du texte courant : un
 * passage violet au milieu d'un encadré orange se lit comme une erreur.
 */
.c-alert__strong {
  color: inherit;
}

.c-alert__link {
  color: rgb(205, 120, 2);
}

/*
   Deux actions côte à côte se séparent, deux liens dans une phrase non.

   La règle valait pour tous les liens voisins d'une alerte, et posait donc
   quinze pixels au milieu d'une phrase qui en cite deux : la ponctuation s'en
   trouvait décollée, comme une faute de frappe.
 */
.c-alert__actions .c-alert__link + .c-alert__link {
  margin-left: 15px;
}

.c-alert__link:hover,
.c-alert__link:focus {
  color: black;
}

/*
 * Les deux boutons de navigation du journal.
 *
 * En bas de liste et non en haut : on descend vers le passé, et c'est là qu'on
 * arrive quand on veut aller plus loin.
 */
.c-log__pagination {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 30px;
}

/* SOCIAL SHARE */

.c-social-share {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 140px));
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.c-social-share__button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;

  padding: 6px 18px;
  border: 4px solid transparent;
  border-radius: 18px;
  background-color: #3cdbe2;

  color: #410b7a;
  font-size: 14px;
  font-weight: bold;
  line-height: 16px;
  text-decoration: none;
  white-space: nowrap;

  text-align: center;
  transition: color 300ms, background-color 300ms, border-color 300ms;
  box-shadow: 0 28px 62px 0 rgba(65, 11, 122, 0.1);
  cursor: pointer;
}

.c-social-share__button > svg {
  flex: none;
}

.c-social-share__button:hover,
.c-social-share__button:focus {
  color: #c51cd7;
  background: white;
  border-color: #c51cd7;

  outline: none;
}

/* ACTION LIST */

.c-action-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 40px 0;
}

/* CARD */

@keyframes card-VerticalBounce {
  0,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes card-appear {
  0%,
  15%,
  85%,
  100% {
    opacity: 0;
  }
  35%,
  65% {
    opacity: 1;
  }
}

@keyframes card-blur {
  0%,
  30%,
  70%,
  100% {
    filter: none;
  }
  50% {
    filter: drop-shadow(0 0 1px black) brightness(75%) blur(100px) opacity(10%);
  }
}

@keyframes card-slide {
  5%,
  95% {
    opacity: 1;
    transform: translateX(0);
  }
  49% {
    opacity: 0;
    transform: translateX(100%);
  }
  51% {
    opacity: 0;
    transform: translateX(-100%);
  }
}

@keyframes card-slide-up {
  5%,
  95% {
    opacity: 1;
    transform: translateY(0);
  }
  50% {
    opacity: 0;
    transform: translateY(100%);
  }
}

/* EXTENDED CARD */

.c-extended-card {
  position: relative;

  display: grid;
  grid-template-columns: auto 240px;
  gap: 20px;

  margin: 10px 0;
  padding: 20px 20px 40px;
  border-radius: 20px;
  background: white;
  box-shadow: 0 28px 62px 0 rgba(65, 11, 122, 0.2);
}

@media (max-width: 540px) {
  .c-extended-card {
    display: flex;
    flex-direction: column;
  }
}

h1.c-extended-card__title {
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 2px solid #2c075b;

  color: #410b7a;
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  text-align: center;
}

.c-extended-card__type {
  display: block;

  color: #999;
}

.c-extended-card__description {
  padding: 0;
  margin: 10px 0 0;
}

.c-extended-card__image-stack {
  display: block;
  position: relative;
  height: 0;
  padding-top: 50%;
  border-radius: 5px;
  border: 2px solid #2c075b;

  overflow: hidden;
}

img.c-extended-card__image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  border: none;

  object-fit: cover;
  object-position: center;
}

.c-extended-card__image--verticalBounce {
  animation: 4s card-VerticalBounce infinite;
}

.c-extended-card__image--appear {
  animation: 4s card-appear infinite;
}

.c-extended-card__image--blur {
  animation: 4s card-blur linear infinite;
}

.c-extended-card__image--slide {
  animation: 4s card-slide ease-in-out infinite;
}

.c-extended-card__image--slide-right {
  animation: 4s card-slide ease-in-out infinite reverse;
}

.c-extended-card__image--slide-up {
  animation: 4s card-slide-up ease-in-out infinite;
}

.c-extended-card__details {
  margin-bottom: 10px;
  color: black;
  font-size: 16px;
  line-height: 18px;
  font-weight: normal;
  text-align: left;
}

.c-extended-card__main {
  display: flex;
  flex-direction: column;
}

.c-extended-card__action {
  position: absolute;
  top: 100%;
  right: 20px;
  transform: translateY(-50%);
}

/* VERTICAL CARD */

.c-vertical-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px 20px 20px;
  border-radius: 20px;
  background: white;
  box-shadow: 0 0 10px 0 rgba(65, 11, 122, 0.2);
}

@media (max-width: 540px) {
  .c-vertical-card {
    display: flex;
    flex-direction: column;
  }
}

.c-vertical-card__type {
  display: table;
  margin: 0 auto 10px;
  background-color: #3cdbe2;

  color: #410b7a;
  font-size: 14px;
  line-height: 18px;
  padding: 2px 10px;
  border-radius: 20px;
}

.c-vertical-card__type-icon {
  display: inline-block;
  height: 17px;
  width: auto;
  margin: 0;
  vertical-align: text-bottom;
}

.c-vertical-card__type-icon path {
  fill: currentColor;
}

h1.c-vertical-card__title {
  margin: 0;
  padding-top: 20px;

  color: #2c075b;
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  text-align: left;
}

.c-vertical-card__description {
  padding: 0;
  margin: 10px 0 0;
  color: black;
}

.c-vertical-card__image-stack {
  display: block;
  position: relative;
  height: 0;
  padding-top: 50%;
  border-radius: 5px;
  border: 2px solid #2c075b;

  overflow: hidden;
}

img.c-vertical-card__image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  border: none;

  object-fit: cover;
  object-position: center;
}

.c-vertical-card:hover .c-vertical-card__image--verticalBounce {
  animation: 4s card-VerticalBounce infinite;
}

.c-vertical-card:hover .c-vertical-card__image--appear {
  animation: 4s card-appear infinite;
}

.c-vertical-card:hover .c-vertical-card__image--blur {
  animation: 4s card-blur linear infinite;
}

.c-vertical-card:hover .c-vertical-card__image--slide {
  animation: 4s card-slide ease-in-out infinite;
}

/*
 * Les deux mêmes variantes que sur la carte étendue. Elles manquaient ici,
 * alors que trois événements les demandent : leur couche animée restait figée
 * dans les sections « à venir », qui utilisent la carte verticale.
 *
 * Au survol, comme les quatre autres : sur cette carte l'animation est une
 * réponse au geste, pas un mouvement permanent au milieu d'une page.
 */
.c-vertical-card:hover .c-vertical-card__image--slide-right {
  animation: 4s card-slide ease-in-out infinite reverse;
}

.c-vertical-card:hover .c-vertical-card__image--slide-up {
  animation: 4s card-slide-up ease-in-out infinite;
}

.c-vertical-card__date {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  padding: 10px;
  margin: 0;
  background-color: rgba(255, 255, 255, 0.8);

  color: black;
  font-size: 16px;
  font-weight: bold;
  line-height: 18px;
  text-align: left;
}

.c-vertical-card__details {
  margin: 10px 0;
  color: black;
  font-size: 16px;
  line-height: 18px;
  font-weight: normal;
  text-align: left;
}

.c-vertical-card__action {
  margin-top: auto;
  padding-top: 20px;
  text-align: right;
}

.c-vertical-card__link {
  color: #2c075b;
}

.c-vertical-card__link:hover,
.c-vertical-card__link:focus {
  color: #c51cd7;
}

/* RECOMMENDATION BADGE */

.c-recommendation-badge {
}

.c-recommendation-badge__image {
  filter: drop-shadow(0 0 5px rgba(65, 11, 122, 0.2));
}

.c-recommendation-badge:hover .c-recommendation-badge__image {
  filter: drop-shadow(0 0 10px rgba(65, 11, 122, 0.6));
}

/* RECOMMENDATION CARD */

.c-recommendation-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 360px;
  height: 100%;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.c-recommendation-card__header {
  height: 30px;
  margin-bottom: 20px;
  text-align: center;
}

.c-recommendation-card:hover .c-recommendation-card__stars {
  color: yellowgreen;
}

.c-recommendation-card__title {
  font-weight: bold;
}

.c-recommendation-card__content {
  margin: auto;
  font-style: italic;
}

.c-recommendation-card__author {
  margin-top: 20px;
  font-size: 14px;
  text-align: right;
}

.c-recommendation-card--arlette {
  border: 2px solid #d9466f;
  background: #fefffa;
  border-radius: 20px;
}

.c-recommendation-card--arlette:hover,
.c-recommendation-card--arlette:focus-within {
  border-color: black;
}

.c-recommendation-card--arlette .c-recommendation-card__title {
  color: #d9466f;
  font-size: 18px;
  margin-bottom: 0.5em;
}

.c-recommendation-card--arlette .c-recommendation-card__stars {
  color: #c3a52c;
  font-size: 28px;
}

.c-recommendation-card--arlette:hover .c-recommendation-card__stars {
  color: #c3a52c;
}

.c-recommendation-card--arlette .c-recommendation-card__author > a {
  color: #410b7a;
}

/* CONDITIONAL HIGHLIGHT */

.highlight-enable-groupe .highlight-groupe,
.highlight-enable-expert .highlight-expert,
.highlight-enable-debutant .highlight-debutant,
.highlight-enable-evjf .highlight-evjf,
.highlight-enable-teambuilding .highlight-teambuilding,
.highlight-enable-famille .highlight-famille {
  font-weight: bold;
  background: #f5d245;
  padding: 2px 4px;
}

/* BIG SEARCH INPUT */

.c-big-input {
  padding: 10px 20px;
  background: white;
  border-radius: 50px;
  display: flex;
  align-items: center;
}
.c-big-input__prefix-icon {
  height: 26px;
  padding-right: 10px;
}
.c-big-input__input {
  border: 0;
  height: 30px;
  flex: auto;
}

/* La croix native de type="search" ferait doublon avec la nôtre. */
.c-big-input__input::-webkit-search-cancel-button {
  display: none;
}

/*
 * Le contour du focus se pose sur la pastille, pas sur le champ : dessiné à
 * l'intérieur, il faisait un rectangle bleu au milieu du blanc arrondi.
 */
.c-big-input__input:focus {
  outline: none;
}

.c-big-input:focus-within {
  outline: 2px solid #f5d245;
  outline-offset: 2px;
}
.c-big-input__cross {
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
/*
 * En bloc : posée sur la ligne de base, l'icône laissait dessous la place des
 * jambages, et la pastille grandissait de 3 px dès que la croix apparaissait.
 */
.c-big-input__cross-icon {
  display: block;
  height: 30px;
}

/* FAQ */

/*
 * Les raccourcis sous le champ de recherche.
 *
 * Sur fond violet foncé : des pastilles claires, pas des liens soulignés, pour
 * qu'on voie tout de suite qu'ils se cliquent et se déclipent.
 */
.c-faq-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 15px 0 0;
  justify-content: center;
  text-align: center;
}

/* Seul sur sa ligne : il annonce les raccourcis, il ne fait pas nombre. */
.c-faq-filters__label {
  display: block;
  width: 100%;
  color: white;
  font-size: 14px;
  opacity: 0.8;
}

.c-faq-filters__tag {
  padding: 5px 14px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50px;
  background: none;
  color: white;
  font: inherit;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
}

.c-faq-filters__tag:hover {
  border-color: white;
  background: rgba(255, 255, 255, 0.15);
}

.c-faq-filters__tag[aria-pressed='true'] {
  border-color: white;
  background: white;
  color: #431973;
  font-weight: bold;
}

/*
 * Chaque catégorie s'éloigne de la précédente.
 *
 * Sans ça, le titre héritait des 30 px qui séparent deux questions : il
 * touchait la question d'au-dessus et semblait lui appartenir, au lieu
 * d'ouvrir ce qui suit.
 *
 * Seulement après une catégorie visible : pendant un filtre, la première
 * catégorie affichée n'est pas forcément la première de la page, et elle
 * s'écartait alors du compte des résultats plus que les autres.
 */
.c-faq-category:not([hidden]) ~ .c-faq-category {
  margin-top: 60px;
}

.c-faq-category__intro {
  margin: 8px 0 0;
  color: #4a4a4a;
}

.c-faq-category[hidden] {
  display: none;
}

.c-faq-empty {
  padding: 30px 0;
  text-align: center;
  font-size: 18px;
}

/* Une question dont la réponse n'est pas encore écrite. */
.c-faq-item--brouillon .c-details-box__question {
  opacity: 0.75;
}

.c-faq-todo {
  margin: 0;
  color: #777;
  font-style: italic;
}

/* UNIVERSITY DATA TABLE */

.c-university-data-table__intro {
  margin: 0 0 1em;
  font-style: italic;
  text-align: center;
}

.c-university-data-table table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  max-width: 500px;
  margin: auto;
  text-align: center;
}

.c-university-data-table th {
  font-weight: normal;
  text-transform: uppercase;
}

.c-university-data-table td {
  font-size: 40px;
  color: #f8fb01;
  font-weight: bold;
  font-variant: tabular-nums;
}

.c-university-data-table th:not(:last-child),
.c-university-data-table td:not(:last-child) {
  border-right: 2px solid #393800;
}

/* UNIVERSITY CIBLE */

.c-university-cible {
  display: inline-block;
  position: relative;
  z-index: 1;
  padding: 20px;
}

.c-university-cible__logo {
  width: 160px;
  height: 160px;
}

.c-university-cible__cible {
  position: absolute;
  inset: -70px;
  width: 300px;
  max-width: none;
  height: 300px;
  margin: auto;
  z-index: -1;

  animation: 30s rotate linear infinite;
}

/* UNIVERSITY ZOOM PHOTO */

.c-university-zoom-photo {
}

.c-university-zoom-photo__logo {
  display: block;
  max-width: 280px;
  height: auto;
  margin: 10px auto;
}

.c-university-zoom-photo__slideshow {
  position: relative;
  z-index: 1;
}

@keyframes zoomPhoto2 {
  0%,
  29%,
  100% {
    opacity: 0;
  }
  30%,
  99% {
    opacity: 1;
  }
}

.c-university-zoom-photo__photo2 {
  position: absolute;
  inset: 0;
  margin: auto;
  animation: 6s zoomPhoto2 linear infinite;
}

@keyframes zoomPhoto3 {
  0%,
  59%,
  100% {
    opacity: 0;
  }
  60%,
  99% {
    opacity: 1;
  }
}

.c-university-zoom-photo__photo3 {
  position: absolute;
  inset: 0;
  margin: auto;
  animation: 6s zoomPhoto3 linear infinite;
}

/* ESCAPE */

.c-price-table {
  width: 100%;

  border-collapse: collapse;
  border: 2px solid black;
  border-radius: 10px;
  table-layout: fixed;
}

.c-price-table th,
.c-price-table td {
  padding: 10px 0;
  text-align: center;
  border: 1px solid black;
}

.c-price-table th {
  font-weight: normal;
}

.c-price-table td {
  font-size: 24px;
  font-weight: bold;
  line-height: 1.2;
}

.c-price-table__small {
  display: block;
  color: #aaa;
  font-size: 16px;
  font-weight: normal;
}

/* FOOTER */

.c-footer {
  padding: 40px 0;
  background: linear-gradient(to bottom, rgba(0, 65, 95, 0.95), #00415f 50%),
    url('images/rain.png'), #00415f;
  color: #05e2ff;
  text-align: center;
}

.c-footer__image {
  display: block;
  height: 120px;
  width: auto;
  margin: auto;
}

.c-footer__content {
  padding-top: 20px;
  max-width: 400px;
  margin: 0 auto;
}

.c-footer__content a {
  color: white;
}

.c-footer__content a:hover,
.c-footer__content a:focus {
  color: black;
}

.c-footer__social-line {
  margin-bottom: 1em;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
}

.c-footer__social-line--wrap {
  flex-wrap: wrap;
}

.c-footer__social-label {
}

.c-footer__social-link {
  flex: none;
  display: inline-flex;
  vertical-align: top;
  border-radius: 50%;
  background: #2c075b;
  width: 3rem;
  height: 3rem;
  padding: 0.75rem;
  transition: background-color 300ms;
}

.c-footer__social-link:hover,
.c-footer__social-link:focus {
  background: #c51cd7;
}

.c-footer__social-link--fit {
  padding: 0;
}

.c-footer__social-link > svg {
  flex: 1;
}

.c-footer__license {
  margin-top: 20px;
  font-size: 12px;
}

@media (max-width: 600px) {
  .c-footer {
    padding: 7vw 0;
  }

  .c-footer__image {
    height: 20vw;
  }

  .c-footer__content {
    padding-top: 7vw;
  }
}

/* ANCHOR */
.c-anchor {
  visibility: hidden;
  height: 0;
  position: relative;
  margin: 0;
  top: -100px;
}

/* SPOIL */

.o-spoil {
  position: relative;
  display: inline-block;
  padding: 5px 10px;
  min-width: 8em;

  border: 1px solid #2c075b;
  border-radius: 5px;
  background: none;

  color: transparent;
  font: inherit;

  cursor: pointer;
}

.o-spoil--visible {
  color: #2c075b;
  transition: 4s color 0.5s;
}

.o-spoil::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    #2c075b,
    #2c075b 33%,
    transparent 66%,
    transparent
  );
  background-size: 300% 100%;
  background-position: top left;
  transition: background-position 1s;
}

.o-spoil:not(.o-spoil--visible):hover::before {
  background-position: top left 20%;
}

.o-spoil--visible::before {
  background-position: top right;
}

.o-spoil--image {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 20px auto 0;
  padding: 0;
  overflow: hidden;
}

.o-spoil--image .c-details-box__image {
  max-width: 100%;
  margin: 0;
}

/* BUBBLE ICON */

.o-bubble-icon.o-bubble-icon {
  width: auto;
  border-radius: 50%;
  padding: 5px;
  display: inline-block;
  margin: 0 0.25em;
  vertical-align: middle;
}

/* MEDIA */

.o-media {
  display: flex;
  align-items: center;
  gap: 20px;
}

.o-media--top {
  align-items: flex-start;
}

.o-media--bottom {
  align-items: flex-end;
}

.o-media--gap-l {
  gap: 40px;
}

.o-media--gap-xl {
  gap: 80px;
}

.o-media__img {
  flex: none;
  margin: 0 auto;
}

.o-media__body {
  flex: auto;
}

@media (max-width: 599px) {
  .o-media--mq-600 {
    flex-direction: column;
  }
  .o-media--mq-600.o-media--column-reverse {
    flex-direction: column-reverse;
  }
  .o-media--mq-600 .o-media__img {
    width: 100%;
  }
}

@media (max-width: 799px) {
  .o-media--mq-800 {
    flex-direction: column;
  }
  .o-media--mq-800.o-media--column-reverse {
    flex-direction: column-reverse;
  }
  .o-media--mq-800 .o-media__img {
    width: 100%;
  }
}

/* VIDEO */

.o-youtube {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  border: none;
}

.o-youtube--shadow {
  box-shadow: 0 0 50px rgba(255, 255, 255, 0.5);
}

/* COLOR PAD */
/*
   Le pavé de schéma, pour les énigmes qui demandent un tracé.

   Neuf points cliquables plutôt qu'un tracé à la souris : un schéma qui ne se
   dessine qu'au doigt exclut qui joue au clavier ou au lecteur d'écran. Le
   numéro qui apparaît dans un point dit son rang dans la suite, ce qu'un trait
   dirait moins bien lorsqu'un même point est repris deux fois.
 */
.c-pattern-pad {
  display: grid;
  max-width: 360px;
  margin: 20px auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 40px;
}

.c-pattern-pad__output,
.c-pattern-pad__grid {
  grid-column: 1 / -1;
}

.c-pattern-pad__output {
  width: 100%;
}

/*
   La grille des neuf points.

   L'écart vertical est plus large que l'horizontal : les traits obliques ont
   alors la pente d'un schéma de téléphone, et non celle d'une grille carrée.
 */
.c-pattern-pad__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 60px 20px;
  padding: 40px 0;
  justify-items: center;
}

/*
   Les traits entre les points cliqués.

   Sous les points et transparente aux clics : c'est un dessin, il ne doit
   jamais intercepter ce qui vise un bouton.
 */
.c-pattern-pad__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.c-pattern-pad__dot {
  position: relative;
  width: 40px;
  height: 40px;
  border: 2px solid rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  background: #f4f2f7;
  color: #410b7a;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
}

.c-pattern-pad__dot:hover,
.c-pattern-pad__dot:focus {
  border-color: #c51cd7;
}

.c-pattern-pad__dot--on {
  background: #410b7a;
  border-color: #410b7a;
  color: white;
}

/*
   Les deux actions.

   Sans fond ni emoji : un aplat de couleur derrière un emoji le rend
   illisible, et deux blocs pleins côte à côte pèsent plus que le schéma
   qu'ils accompagnent. La couleur ne vient qu'au survol.
 */
.c-pattern-pad__action {
  padding: 8px 14px;
  border: 2px solid rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  background: none;
  color: #410b7a;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
}

.c-pattern-pad__action:hover,
.c-pattern-pad__action:focus {
  border-color: #410b7a;
  background: #410b7a;
  color: white;
}

.c-color-pad {
  display: grid;
  max-width: 360px;
  margin: 20px auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.c-color-pad__output {
  width: 100%;
  grid-column: 1 / -1;
}

.c-color-pad__result {
  display: flex;
  justify-content: center;
  gap: 20px;

  min-height: 60px;
  padding: 10px 0;
  grid-column: 1 / -1;
  border-radius: 5px;
}

.c-color-pad__result-item {
  width: 40px;
  height: 100%;
  border: 2px solid rgba(0, 0, 0, 0.25);
  border-radius: 50%;
}

.c-color-pad__item {
  min-height: 60px;
  padding: 5px 10px;
  border-radius: 5px;
  border: 2px solid rgba(0, 0, 0, 0.25);

  color: white;
  text-transform: uppercase;
  font-size: 16px;
  text-shadow: -1px 1px rgba(0, 0, 0, 0.25);
  text-align: center;

  cursor: pointer;
}
.c-color-pad__item:hover,
.c-color-pad__item:focus {
  border: 2px solid #c51cd7;
}
.c-color-pad__rouge {
  background: #d32f2f;
}
.c-color-pad__orange {
  background: #f57c00;
}
.c-color-pad__jaune {
  background: #fbc02d;
}
.c-color-pad__vert {
  background: #388e3c;
}
.c-color-pad__bleu {
  background: #1976d2;
}
.c-color-pad__violet {
  background: #7b1fa2;
}
.c-color-pad__indigo {
  background: #303f9f;
}
.c-color-pad__rose {
  background: #f06292;
}
.c-color-pad__marron {
  background: #6d4c41;
}
.c-color-pad__gris {
  background: #757575;
}
.c-color-pad__blanc {
  background: white;
  color: black;
}
.c-color-pad__noir {
  background: black;
}

.c-color-pad__item--action {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  background: transparent;
  border-color: transparent;

  color: black;
  font-size: 14px;
  text-shadow: none;
}

.c-color-pad__item--submit {
  grid-column: 3;
}

/* BOX GRID */

.box-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.box-grid__item {
  border: 1px solid #7b7b7b;
  padding: 20px 0;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.box-grid__highlight {
  padding: 20px 0;
  color: black;
  font-size: 54px;
  line-height: 1;
  font-weight: bold;
  font-family: sans-serif;
  font-variant-numeric: tabular-nums;
}

.box-grid__date {
  margin-left: auto;
  margin-right: 10px;
  font-size: 14px;
}

.box-grid__detail {
  text-align: center;
}

/* PODCAST - BANNER */

.c-podcast-banner {
  padding: 40px 0;
  background: linear-gradient(to right, #dfd0c3 20%, #beb0ce 80%);
  border-top: 1px solid #422009;
  border-bottom: 1px solid #422009;

  color: #422009;
}

.c-podcast-banner__inner {
  display: flex;
  gap: 20px;
  flex-direction: column;
  justify-content: flex-start;
}

.c-podcast-banner__teasing {
  margin: 0;

  text-align: center;
  font-size: inherit;
  font-weight: bold;
  line-height: 1.2;
  text-transform: uppercase;
  font-style: italic;
  letter-spacing: 1px;
}

.c-podcast-banner__footer {
  display: block;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
}

.c-podcast-banner__footer-link {
  color: inherit;
}

.c-podcast-banner__footer-link:hover,
.c-podcast-banner__footer-link:focus {
  color: black;
}

/* PODCAST - BOX */

.c-podcast-box {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  max-width: 800px;
  margin: 0 auto;

  padding: 20px;
  background: linear-gradient(to right, #f2ebe5, #e5dce9);
  border-radius: 12px;
}

.c-podcast-box__image-link {
  position: relative;
  margin: 0 auto;
  flex: none;
  width: 30%;
  max-width: 160px;

  border-radius: 4px;
}

.c-podcast-box__image-link::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to right, #a57b51, #441972);

  border-radius: 4px;

  opacity: 0;
  transition: opacity 300ms;
}

.c-podcast-box__image-link:hover::before,
.c-podcast-box__image-link:focus::before {
  opacity: 0.5;
}

.c-podcast-box__image-link::after {
  content: url('data:image/svg+xml,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M21.409 9.353a2.998 2.998 0 0 1 0 5.294L8.597 21.614C6.534 22.736 4 21.276 4 18.968V5.033c0-2.31 2.534-3.769 4.597-2.648l12.812 6.968Z" fill="%23fff"/></svg>');
  position: absolute;
  inset: 0;
  width: 40%;
  height: 40%;
  margin: auto;
  z-index: 2;

  opacity: 0;
  transition: opacity 300ms;
}

.c-podcast-box__image-link:hover::after,
.c-podcast-box__image-link:focus::after {
  opacity: 1;
}

.c-podcast-box__image {
  display: block;
  border-radius: 4px;
  width: 100%;
  height: auto;
}

.c-podcast-box__main {
  flex: auto;
  display: flex;
  gap: 6px;
  flex-direction: column;
  justify-content: flex-start;
  padding: 6px 0;
}

.c-podcast-box__date {
  color: #666;
  text-transform: uppercase;
  font-size: 14px;
  line-height: 1.2;
}

.c-podcast-box__title {
  color: #410b7a;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: bold;
  font-size: 20px;
  line-height: 1.2;
}

.c-podcast-box__title:focus,
.c-podcast-box__title:hover {
  text-decoration: underline;
}

.c-podcast-box__description {
  margin: 0;
}

@media (max-width: 599px) {
  .c-podcast-box {
    flex-direction: column;
  }
  .c-podcast-box__image-link {
    width: 100%;
  }
  .c-podcast-box__image-link::before,
  .c-podcast-box__image-link::before {
    opacity: 0.5;
  }
  g .c-podcast-box__image-link::after,
  .c-podcast-box__image-link::after {
    opacity: 1;
  }
}

/* PODCAST - HEADER */

.c-podcast-header {
  display: block;
  max-height: 50vh;
  width: 100%;
  object-fit: contain;
  background: linear-gradient(to right, #dfd0c3 50%, #beb0ce 50%);
}

/* VIDEO */
.c-video {
  display: block;
  margin: 20px 0;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 480px;
  background: black;
}

.c-video--landscape {
  aspect-ratio: 16/9;
}

/*
 * Vidéo verticale. max-height la ramène à 270 de large, et sans marge
 * automatique elle resterait collée à gauche, avec 700 pixels de vide à sa
 * droite dans une colonne de lecture. Centrée, ce vide devient symétrique,
 * donc lu comme un cadrage et non comme un oubli.
 */
.c-video--portrait {
  aspect-ratio: 9/16;
  margin-inline: auto;
}

/*
 * Le trajet et les informations pratiques, côte à côte.
 *
 * Une vidéo verticale seule laisserait 700 pixels de vide à côté d'elle sur
 * la page d'accès. La liste des informations fait à peu près sa hauteur : on
 * remplit donc ce vide avec ce que le visiteur cherche au même moment, le
 * trajet d'un côté, l'adresse à recopier de l'autre.
 */
.c-access {
  display: grid;
  gap: 0 40px;
  align-items: start;
}

@media (min-width: 700px) {
  .c-access {
    grid-template-columns: 270px 1fr;
  }
}

/* Dans la grille, la vidéo ne se centre plus : sa colonne fait sa largeur. */
.c-access .c-video {
  margin-block: 0;
}

/* PODCAST - AUDIO PLAYER */

.c-audio-player {
  max-width: 600px;
  margin: 40px auto;
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: minmax(0, 350px) minmax(0, 200px);
  gap: 20px;
  grid-template-areas:
    'box aside'
    'footer footer';
}

.c-audio-player__box {
  grid-area: box;
  position: relative;
  max-width: 350px;
  margin: auto;
  background: #f1f3f4;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
}

.c-audio-player__button {
  position: relative;
  border: none;
  display: block;
  padding: 0;
  outline: none;
  cursor: pointer;
}

.c-audio-player__button::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to right, #a57b51, #441972);

  opacity: 0;
  transition: opacity 300ms;
}

.c-audio-player__button::after {
  content: url('data:image/svg+xml,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M21.409 9.353a2.998 2.998 0 0 1 0 5.294L8.597 21.614C6.534 22.736 4 21.276 4 18.968V5.033c0-2.31 2.534-3.769 4.597-2.648l12.812 6.968Z" fill="%23fff"/></svg>');
  position: absolute;
  inset: 0;
  width: 40%;
  height: 40%;
  margin: auto;
  z-index: 2;

  opacity: 0;
  transition: opacity 300ms;
}

.c-audio-player--playing .c-audio-player__button::after {
  content: url('data:image/svg+xml,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M2 6c0-1.886 0-2.828.586-3.414C3.172 2 4.114 2 6 2c1.886 0 2.828 0 3.414.586C10 3.172 10 4.114 10 6v12c0 1.886 0 2.828-.586 3.414C8.828 22 7.886 22 6 22c-1.886 0-2.828 0-3.414-.586C2 20.828 2 19.886 2 18V6ZM14 6c0-1.886 0-2.828.586-3.414C15.172 2 16.114 2 18 2c1.886 0 2.828 0 3.414.586C22 3.172 22 4.114 22 6v12c0 1.886 0 2.828-.586 3.414C20.828 22 19.886 22 18 22c-1.886 0-2.828 0-3.414-.586C14 20.828 14 19.886 14 18V6Z" fill="%23fff" /></svg>');
}

.c-audio-player__button:hover::before,
.c-audio-player__button:focus::before {
  opacity: 0.5;
}

.c-audio-player__button:hover::after,
.c-audio-player__button:focus::after {
  opacity: 1;
}

.c-audio-player__image {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.c-audio-player__audio {
  display: block;
  width: 100%;
  background: linear-gradient(to right, #a57b51, #441972);
  outline: none;
}

.c-audio-player__audio::-webkit-media-controls-panel {
  background: linear-gradient(to right, #a57b51, #441972);
}

.c-audio-player__audio::-webkit-media-controls-current-time-display,
.c-audio-player__audio::-webkit-media-controls-time-remaining-display {
  color: white;
  text-shadow: 0 0 3px black;
}

.c-audio-player__audio::-webkit-media-controls-play-button,
.c-audio-player__audio::-webkit-media-controls-timeline-container,
.c-audio-player__audio::-webkit-media-controls-timeline,
.c-audio-player__audio::-webkit-media-controls-mute-button {
  filter: invert();
}

.c-audio-player__footer {
  grid-area: footer;
}

.c-audio-player__footer-label {
  max-width: 350px;
  text-align: center;
}

.c-audio-player__index {
  padding: 0;
  margin: 0;
  list-style: none;
}

.c-audio-player__index-item {
  margin: 10px 0;
  display: flex;
  gap: 10px;
  align-items: center;
}

.c-audio-player__index-action {
  flex: none;
}

.c-audio-player__index-label {
  flex: auto;
}

.c-audio-player__index-item--current .c-audio-player__index-highlight {
  font-weight: bold;
}

@media (max-width: 479px) {
  .c-audio-player {
    grid-template-columns: auto;
    grid-template-areas:
      'box'
      'footer'
      'aside';
  }
  .c-audio-player__footer-label {
    margin: auto;
  }
}

/* PODCAST LINK LIST */

.c-podcast-link {
  grid-area: aside;
}

.c-podcast-link__label {
  margin: 0 0 10px;
  text-align: center;
}

.c-podcast-link__list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.c-podcast-link--horizontal .c-podcast-link__list {
  flex-direction: row;
  flex-wrap: wrap;
}

.c-podcast-link__item {
  flex: 1;
  min-width: 120px;
  max-width: 200px;
}

.c-podcast-link__link {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;

  padding: 6px 18px;
  border: 4px solid transparent;
  border-radius: 18px;
  background-color: #3cdbe2;

  color: #410b7a;
  font-size: 14px;
  font-weight: bold;
  line-height: 16px;
  text-decoration: none;
  white-space: nowrap;

  text-align: center;
  transition: color 300ms, background-color 300ms, border-color 300ms;
  box-shadow: 0 28px 62px 0 rgba(65, 11, 122, 0.1);
  cursor: pointer;
}

.c-podcast-link__link > svg {
  flex: none;
}

.c-podcast-link__link:hover,
.c-podcast-link__link:focus {
  color: #c51cd7;
  background: white;
  border-color: #c51cd7;

  outline: none;
}

.c-podcast-link__link--podcastaddict {
  background-color: #fc7e0f;
  color: #fff;
}

.c-podcast-link__link--podcastaddict:hover,
.c-podcast-link__link--podcastaddict:focus {
  color: black;
  background: white;
  border-color: #fc7e0f;
}

.c-podcast-link__link--deezer {
  background-color: #a238ff;
  color: #fff;
}

.c-podcast-link__link--deezer:hover,
.c-podcast-link__link--deezer:focus {
  color: black;
  background: white;
  border-color: #a238ff;
}

.c-podcast-link__link--spotify {
  background-color: #25d865;
  color: black;
}

.c-podcast-link__link--spotify:hover,
.c-podcast-link__link--spotify:focus {
  color: black;
  background: white;
  border-color: #25d865;
}

.c-podcast-link__link--apple {
  background-color: black;
  color: white;
}

.c-podcast-link__link--apple:hover,
.c-podcast-link__link--apple:focus {
  color: black;
  background: white;
  border-color: black;
}

.c-podcast-link__link--amazon {
  background-color: #21a9d3;
  color: white;
}

.c-podcast-link__link--amazon:hover,
.c-podcast-link__link--amazon:focus {
  color: black;
  background: white;
  border-color: #21a9d3;
}

.c-podcast-link__link--audible {
  background-color: #ffa000;
  color: black;
}

.c-podcast-link__link--audible:hover,
.c-podcast-link__link--audible:focus {
  color: black;
  background: white;
  border-color: #ffa000;
}

.c-podcast-link__link--youtube {
  background-color: #ff0000;
  color: white;
}

.c-podcast-link__link--youtube:hover,
.c-podcast-link__link--youtube:focus {
  color: #ff0000;
  background: white;
  border-color: #ff0000;
}

@media (max-width: 479px) {
  .c-podcast-link__list {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* PODIUM */

.c-podium {
  position: relative;
}

.c-podium__scroller {
  max-width: 100vw;
  overflow-x: auto;
}

.c-podium__wrapper {
  width: min-content;
  margin: auto;
}

.c-podium__header {
  padding: 10px 10px;
  background: #431973;
  color: white;
  text-align: left;
}

.c-podium__header-label {
  margin-right: 0.5em;
}

.c-podium__header-icon {
  margin-right: 0.25em;
}

.c-podium__show-more {
  display: block;
  width: 100%;
  background: none;
  border: 0;
  padding: 10px;
  text-align: center;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.c-podium__show-more:hover {
  text-decoration: underline;
}

.c-podium__show-more-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  vertical-align: text-bottom;
  width: 16px;
  height: 16px;
  margin: 0 0.25em;
  border: 0;
  border-radius: 50%;
  background: #431973;
  color: white;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 16px;
  line-height: 1;
}

.c-podium__table {
  width: 100%;
  margin: auto;
  border: 1px solid currentColor;
  border-collapse: collapse;
  text-align: right;
}

.c-podium td,
.c-podium th {
  padding: 2px 5px;
}

.c-podium th {
  background: #431973;
  color: white;
  font-weight: bold;
  text-align: center;
}

.c-podium tr:nth-child(2n of :not([class]):not([style])) td {
  background: #f0f0f0;
}

.c-podium tr.c-podium__highlighted-row td {
  background: #b7e886;
}

.c-podium .c-podium__ellipsis-row td {
  text-align: center;
}

.c-podium--championnat td:not(:empty):nth-child(2n + 3)::after {
  content: ' pts';
  font-size: 12px;
  white-space: nowrap;
}

.c-podium--championnat td:nth-child(2) {
  white-space: nowrap;
}

.c-podium--championnat td:nth-child(2n + 4) {
  color: gray;
  border-left: 1px solid currentColor;
}

.c-podium--championnat td:not(:empty):nth-child(2n + 4)::after {
  content: 'e';
  font-size: 12px;
  vertical-align: super;
}

.c-podium--championnat tr:nth-child(-n + 3) {
  font-weight: bold;
}

.c-podium--championnat td:nth-child(2) {
  text-align: left;
}

.c-podium--palmares td:nth-child(2),
.c-podium--palmares td:nth-child(3),
.c-podium--palmares td:nth-child(4) {
  white-space: nowrap;
}

.c-podium--palmares td:nth-child(3) {
  color: gray;
}

.c-podium--palmares td:nth-child(2) {
  text-align: left;
}

.c-podium--palmares tr:nth-child(-n + 3) {
  font-weight: bold;
}

/* PHOTO SLIDER */

.c-photo-slider {
  margin: 40px 0;
}

.c-photo-slider__label {
  margin-bottom: 10px;
  text-align: center;
}

.c-photo-slider__list {
  display: flex;
  justify-content: center;
  gap: 10px;

  margin: 0;
  padding: 0;
  list-style: none;
}

.c-photo-slider__item {
  display: block;
  flex: auto;
}

.c-photo-slider__link {
  display: block;
  height: 100%;
}

.c-photo-slider__photo {
  display: block;
  height: 100%;
  object-fit: cover;
}

/* SEO TITLE */

.c-inline-title {
  display: block;
}

.c-inline-title__title {
  display: inline;
  margin: 0;
  font-weight: bold;
  font-size: inherit;
  font-family: inherit;
}

.c-inline-title__sentence {
  display: inline;
  margin: 0;
}

/* HERO */

/*
 * En-tête de page produit : titre, accroche, chiffres clés, appel à
 * l’action, et un visuel à droite sur grand écran. Il prend les couleurs de
 * la section qui l’entoure.
 */

.c-hero {
  display: grid;
  gap: 40px;
  align-items: center;
}

@media (min-width: 860px) {
  .c-hero {
    grid-template-columns: 1.1fr 1fr;
  }
}

.c-hero > * {
  min-width: 0;
}

/* le titre se règle sur la largeur de sa colonne, pas de l’écran */
.c-hero__text {
  container-type: inline-size;
}

.c-hero__kicker {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.c-hero__kicker-link {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.c-hero__kicker-link:hover,
.c-hero__kicker-link:focus {
  text-decoration-thickness: 2px;
}

.c-hero__title {
  display: inline-flex;
  flex-direction: column;
  margin: 0 0 24px;

  font-family: Miriam, Arial, Helvetica, sans-serif;
  font-weight: bold;
  line-height: 0.95;
}

/*
 * --hero-title-size dépend de la longueur du titre et de la chasse de la
 * police : chaque thème l’ajuste pour que le titre tienne sur une ligne.
 */
.c-hero__title-main {
  font-size: min(var(--hero-title-size, 12cqi), 100px);
}

.c-hero__title-suffix {
  align-self: flex-end;
  font-size: min(calc(var(--hero-title-size, 12cqi) * 0.55), 54px);
}

.c-hero__tagline {
  max-width: 30em;
  margin: 0;
  font-size: 19px;
}

.c-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 20px;
}

.c-hero__caption {
  font-size: 15px;
}

.c-hero__visual {
  display: block;
  transform: rotate(1.5deg);
}

.c-hero__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 10px solid white;
  border-bottom-width: 44px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

/* KEY FIGURES */

.c-key-figures {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 32px;
  padding: 0;
  list-style: none;
}

.c-key-figures__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 16px;
  border: 1px solid rgba(128, 128, 128, 0.6);
  border-radius: 12px;
}

.c-key-figures__value {
  color: #3cdbe2;
  font-family: Miriam, Arial, Helvetica, sans-serif;
  font-size: 28px;
  font-weight: bold;
  line-height: 1;
}

.c-key-figures__label {
  font-size: 14px;
}

/* SPLIT */

/* Un texte et un visuel côte à côte, empilés sur mobile. */

.c-split {
  display: grid;
  gap: 40px;
  align-items: center;
}

@media (min-width: 860px) {
  .c-split {
    grid-template-columns: 1fr 1.3fr;
  }
}

.c-split__visual {
  display: block;
}

.c-split__image {
  display: block;
  width: 100%;
  transform: rotate(-1deg);
  filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.25));
}

/* CARD */

.c-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin: 40px 0;
  padding: 0;
  list-style: none;
}

/* des cartes plus larges : trois par ligne au plus */
.c-card-grid--large {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/*
 * Les éléments de même rang s’alignent d’une carte à l’autre, même quand un
 * titre passe sur deux lignes : chaque carte reprend les lignes de la grille
 * (jusqu’à quatre éléments par carte).
 */
.c-card-grid--aligned .c-card-grid__item,
.c-card-grid--aligned .c-card-grid__item > * {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: 0;
}

.c-card-grid__item {
  position: relative;
  display: flex;
  min-width: 0;
}

/* une flèche entre les cartes : elles se suivent */
@media (min-width: 760px) {
  .c-card-grid--sequence {
    gap: 60px;
  }

  .c-card-grid--sequence .c-card-grid__item:not(:last-child)::after {
    content: '→';

    position: absolute;
    top: 50%;
    right: -46px;
    transform: translateY(-50%);

    color: #c51cd7;
    font-size: 36px;
    font-weight: bold;
  }
}

.c-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 28px 24px 24px;
  border-radius: 12px;
  background: white;
  box-shadow: 0 28px 62px 0 rgba(65, 11, 122, 0.1);
  color: #4a4a4a;
  text-align: left;
}

/* une carte facultative, en retrait des autres */
.c-card--outline {
  border: 2px dashed currentColor;
  background: transparent;
  box-shadow: none;
}

.c-card__visual {
  position: relative;
  display: block;
  margin: -28px -24px 20px;
}

.c-card__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px 12px 0 0;
}

.c-card__image--wide {
  aspect-ratio: 2 / 1;
}

.c-card__number {
  position: absolute;
  left: 16px;
  bottom: -22px;

  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #410b7a;

  color: white;
  font-size: 24px;
  font-weight: bold;
}

.c-card__icon {
  display: block;
  margin-bottom: 10px;
  font-size: 40px;
  line-height: 1.2;
}

.c-card__label {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.c-card__title {
  margin: 0 0 8px;
  color: #410b7a;
  font-family: Miriam, Arial, Helvetica, sans-serif;
  font-size: 22px;
  font-weight: bold;
  line-height: 1.15;
}

.c-card__meta {
  margin: 0 0 12px;
  font-size: 15px;
  font-style: italic;
}

.c-card__text {
  margin: 0;
}

/* calé en bas, même quand les cartes voisines sont plus hautes */
.c-card__action {
  margin: auto 0 0;
  padding-top: 16px;
  text-align: center;
  text-wrap: balance;
}

/* POLAROID */

.c-polaroid-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 30px 20px;
  margin: 50px 0;
  padding: 0;
  list-style: none;
}

.c-polaroid {
  display: flex;
  flex-direction: column;
  padding: 12px 12px 0;
  background: #f3eedf;
  color: #2f2418;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.45);
}

.c-polaroid:nth-child(odd) {
  transform: rotate(-2deg);
}

.c-polaroid:nth-child(even) {
  transform: rotate(1.5deg) translateY(12px);
}

/* même rendu que l’outil polaroid des jeux */
.c-polaroid__photo {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  filter: grayscale(1) contrast(1.12);
}

.c-polaroid__caption {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 4.2em;
  padding: 8px 4px;

  font-family: Caveat, 'Segoe Script', cursive;
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  text-wrap: balance;
}

/* DEFINITION LIST */

/* Des libellés et leurs valeurs, sur deux colonnes. */

.c-definition-list {
  display: grid;
  grid-template-columns: auto 1fr;
  margin: 30px 0 0;
}

.c-definition-list__term,
.c-definition-list__definition {
  margin: 0;
  padding: 5px 0;
}

.c-definition-list__term {
  padding-right: 1em;
  color: #aaa;
}

.c-definition-list__definition {
  color: black;
}

.c-definition-list__term:not(:first-of-type),
.c-definition-list__definition:not(:first-of-type) {
  border-top: 1px dashed #ddd;
}

/* sur fond sombre */
.c-definition-list--light .c-definition-list__term {
  color: rgba(255, 255, 255, 0.7);
}

.c-definition-list--light .c-definition-list__definition {
  color: white;
}

.c-definition-list--light .c-definition-list__term,
.c-definition-list--light .c-definition-list__definition {
  border-color: rgba(255, 255, 255, 0.2);
}

/* PRICE CARD */

.c-price-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 32px 28px 28px;
  border-radius: 12px;
  background: white;
  box-shadow: 0 28px 62px 0 rgba(65, 11, 122, 0.1);
  color: #4a4a4a;
  text-align: left;
}

.c-price-card__name {
  margin: 0;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/*
 * Le prix tient sur une ligne : le montant suit la largeur de la carte. Le
 * conteneur est la ligne du prix et non la carte, car un conteneur ne peut
 * pas reprendre les lignes de c-card-grid--aligned.
 */
.c-price-card__price {
  container-type: inline-size;
  margin: 4px 0 16px;
  color: #410b7a;
  font-family: Miriam, Arial, Helvetica, sans-serif;
  font-weight: bold;
  line-height: 1;
}

.c-price-card__amount {
  font-size: min(60px, 24cqi);
  white-space: nowrap;
}

.c-price-card__tax {
  font-size: 0.4em;
}

.c-price-card__specs {
  flex: 1;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.c-price-card__specs li {
  padding: 8px 0;
  border-bottom: 1px dashed #ddd;
}

.c-price-card__option {
  padding: 14px 16px;
  border-radius: 8px;
  background: #f4f1fa;
}

.c-price-card__option-title,
.c-price-card__option-text {
  margin: 0;
}

.c-price-card__option-title {
  font-weight: bold;
}

/* CREDIT LIST */

.c-credit-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
}

.c-credit-list a {
  color: inherit;
}

/* THÈME TOUTÂNKHAMON */

/*
 * La charte du jeu « Toutânkhamon… ou non » : nuit, sable et or. Les polices
 * ne sont téléchargées que par les pages qui portent ces modificateurs.
 */

@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/BigShouldersDisplay-ExtraBold.woff2') format('woff2');
}

@font-face {
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/CourierPrime-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/CourierPrime-Bold.woff2') format('woff2');
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/Caveat-SemiBold.woff2') format('woff2');
}

/* Sous-ensemble : seulement les signes décoratifs de la page. */
@font-face {
  font-family: 'Noto Sans Egyptian Hieroglyphs';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/NotoSansEgyptianHieroglyphs-subset.woff2') format('woff2');
}

.c-section--toutankhamon {
  background: #151a24;
  color: #faf6ec;
  --hero-title-size: 17.5cqi;
}

.c-section--toutankhamon-light {
  background: #f1e8d6;
  color: #2a2218;
}

.c-section--toutankhamon-light + .c-section--toutankhamon-light {
  background: #e6dabe;
}

/* titres */

.c-section--toutankhamon .c-section__title,
.c-section--toutankhamon .c-section__subtitle,
.c-section--toutankhamon-light .c-section__title,
.c-section--toutankhamon .c-hero__title,
.c-section--toutankhamon-light .c-card__title,
.c-section--toutankhamon .c-card__title,
.c-section--toutankhamon .c-price-card__price,
.c-section--toutankhamon .c-full-box__title,
.c-section--toutankhamon .c-key-figures__value {
  font-family: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
}

.c-section--toutankhamon .c-hero__title-suffix {
  color: #d9a441;
  text-transform: none;
}

.c-section--toutankhamon .c-section__title,
.c-section--toutankhamon .c-section__subtitle,
.c-section--toutankhamon .c-full-box__title {
  color: #faf6ec;
}

.c-section--toutankhamon-light .c-section__title,
.c-section--toutankhamon-light .c-card__title {
  color: #2a2218;
}

/* étiquettes */

.c-section--toutankhamon .c-section__title small:not([class]),
.c-section--toutankhamon-light .c-section__title small:not([class]),
.c-section--toutankhamon .c-hero__kicker,
.c-section--toutankhamon .c-hero__caption,
.c-section--toutankhamon .c-key-figures__label,
.c-section--toutankhamon-light .c-card__label,
.c-section--toutankhamon-light .c-card__meta,
.c-section--toutankhamon .c-price-card__name,
.c-section--toutankhamon .c-price-card__option-title,
.c-section--toutankhamon .c-full-box__highlight {
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-style: normal;
}

.c-section--toutankhamon .c-section__title small:not([class]),
.c-section--toutankhamon-light .c-section__title small:not([class]),
.c-section--toutankhamon .c-hero__kicker,
.c-section--toutankhamon-light .c-card__label,
.c-section--toutankhamon .c-price-card__name {
  font-weight: bold;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.c-section--toutankhamon .c-section__title small:not([class]),
.c-section--toutankhamon .c-hero__kicker,
.c-section--toutankhamon .c-key-figures__value,
.c-section--toutankhamon .c-full-box__highlight,
.c-section--toutankhamon .c-card__icon {
  color: #d9a441;
}

.c-section--toutankhamon-light .c-section__title small:not([class]) {
  color: #7a5512;
}

.c-section--toutankhamon-light .c-card__label,
.c-section--toutankhamon-light .c-card__meta {
  color: #4d4232;
}

/* textes */

.c-section--toutankhamon .c-section__description strong:not([class]),
.c-section--toutankhamon .c-section__description li:not([class]),
.c-section--toutankhamon .c-section__content p:not([class]),
.c-section--toutankhamon .c-full-box__description p,
.c-section--toutankhamon .c-section__action-caption {
  color: #faf6ec;
}

.c-section--toutankhamon-light .c-section__content p:not([class]),
.c-section--toutankhamon-light .c-section__action-caption {
  color: #2a2218;
}

/* cartes et boîtes */

.c-section--toutankhamon-light .c-card,
.c-section--toutankhamon .c-price-card {
  background: #faf6ec;
  box-shadow: 0 14px 40px rgba(42, 34, 24, 0.12);
  color: #2a2218;
}

.c-section--toutankhamon-light .c-card--outline {
  border-color: #4d4232;
  background: transparent;
  box-shadow: none;
}

.c-section--toutankhamon .c-card {
  border: 1px solid rgba(217, 164, 65, 0.4);
  background: #1f2636;
  box-shadow: none;
  color: #faf6ec;
}

.c-section--toutankhamon .c-card__title {
  color: #faf6ec;
}

.c-section--toutankhamon .c-card__icon {
  font-family: 'Noto Sans Egyptian Hieroglyphs', sans-serif;
  font-size: 48px;
}

.c-section--toutankhamon-light .c-card__number {
  background: #151a24;
  color: #faf6ec;
  font-family: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
}

.c-section--toutankhamon-light
  .c-card-grid--sequence
  .c-card-grid__item::after {
  color: #7a5512;
}

.c-section--toutankhamon .c-price-card__price {
  color: #2a2218;
}

.c-section--toutankhamon .c-price-card__specs strong:not([class]),
.c-section--toutankhamon .c-price-card__option strong:not([class]) {
  color: #2a2218;
}

.c-section--toutankhamon .c-price-card__specs li {
  border-color: #e6dabe;
}

.c-section--toutankhamon .c-price-card__option {
  background: #f1e8d6;
}

.c-section--toutankhamon .c-full-box--outline {
  border-color: #d9a441;
}

.c-definition-list--toutankhamon .c-definition-list__term {
  color: #d9a441;
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-weight: bold;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.c-definition-list--toutankhamon .c-definition-list__definition {
  color: #faf6ec;
}

.c-definition-list--toutankhamon .c-definition-list__term,
.c-definition-list--toutankhamon .c-definition-list__definition {
  border-color: rgba(250, 246, 236, 0.2);
}

.o-button--color-toutankhamon {
  background-color: #d9a441;
  color: #151a24;
}

.o-button--color-toutankhamon:hover,
.o-button--color-toutankhamon:focus {
  border-color: #d9a441;
  background: #151a24;
  color: #d9a441;
}

/* UTILS */

.u-squircle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90px;
  height: 90px;
  background-image: url('images/squircle.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  color: white;
  font-size: 42px;
  font-weight: bold;
  letter-spacing: -3px;
}

.u-img-width {
  max-width: 720px;
  margin: auto;
}

.u-img-center {
  display: block;
  margin: 0 auto;
}

.u-txt-upper,
.u-txt-uppercase {
  text-transform: uppercase !important;
}

.u-txt-bold {
  font-weight: bold !important;
}

.u-txt-italic {
  font-style: italic;
}

.u-txt-big {
  font-size: 115% !important;
}

.u-txt-bigger {
  font-size: 130% !important;
}

.u-txt-huge {
  font-size: 200% !important;
}

@media (min-width: 600px) {
  .u-txt-bigger-desktop {
    font-size: 130% !important;
  }
}

.u-txt-smaller {
  font-size: 80% !important;
}

.u-txt-small {
  font-size: 90% !important;
}

.u-txt-numeric {
  font-variant: tabular-nums;
}

.u-txt-center {
  text-align: center !important;
  text-wrap: balance;
}

.u-txt-left {
  text-align: left !important;
}

.u-txt-right {
  text-align: right !important;
}

.u-txt-white {
  color: white !important;
}

.u-txt-dark-grey {
  color: #4a4a4a;
}

.u-txt-black {
  color: black;
}

.u-txt-pink {
  color: #d9466f;
}

.u-txt-red,
.u-txt-red > strong:not([class]) {
  color: red !important;
}

.u-txt-light-red,
.u-txt-light-red > strong:not([class]) {
  color: #fa4646 !important;
}

.u-txt-dark-blue {
  color: #410b7a !important;
}

.u-txt-gold {
  color: #c2a52b !important;
}

.u-txt-shadow {
  text-shadow: 2px 2px 2px black;
}

.u-list-naked {
  padding: 0;
  list-style: none;
}

.u-title-naked {
  display: inline;
  margin: 0;
  font-weight: bold;
  font-size: inherit;
  font-family: inherit;
}

.u-link-hidden {
  color: inherit;
  font: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.u-link-hidden:hover,
.u-link-hidden:focus {
  border-bottom-color: currentColor;
}

.u-position-relative {
  position: relative;
}

.u-position-center {
  position: absolute;
  inset: 0;
  margin: auto;
}

.u-position-1 {
  z-index: 1;
}

.u-position-2 {
  z-index: 2;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.u-animation-slow-rotate {
  animation: 20s rotate linear infinite;
}

/*
 * Une image qui occupe toute la largeur de son conteneur.
 *
 * max-width: none lève la borne que les images portent par défaut dans le
 * contenu. Écrit vingt-sept fois en style en ligne dans les articles avant
 * d'être une classe.
 */
.u-w100 {
  width: 100% !important;
  max-width: none !important;
}

.u-m-auto {
  margin: auto !important;
}

.u-m-0 {
  margin: 0 !important;
}

.u-m-1 {
  margin: 10px !important;
}

.u-m-2 {
  margin: 20px !important;
}

.u-m-3 {
  margin: 30px !important;
}

.u-m-4 {
  margin: 40px !important;
}

.u-mt-0 {
  margin-top: 0 !important;
}

.u-mt-1 {
  margin-top: 10px !important;
}

.u-mt-2 {
  margin-top: 20px !important;
}

.u-mt-3 {
  margin-top: 30px !important;
}

.u-mt-4 {
  margin-top: 40px !important;
}

.u-mt-6 {
  margin-top: 60px !important;
}

.u-mb-0 {
  margin-bottom: 0 !important;
}

.u-mb-1 {
  margin-bottom: 10px !important;
}

.u-mb-2 {
  margin-bottom: 20px !important;
}

.u-mb-3 {
  margin-bottom: 30px !important;
}

.u-mb-4 {
  margin-bottom: 40px !important;
}

.u-mb-6 {
  margin-bottom: 60px !important;
}

.u-pb-0 {
  padding-bottom: 0 !important;
}

.u-emoji {
  font-style: normal;
  font-weight: 400;
  font-family: 'apple color emoji', 'segoe ui emoji', 'noto color emoji',
    'android emoji', emojisymbols, 'emojione mozilla', 'twemoji mozilla',
    'segoe ui symbol', serif;
}

.u-sr-only {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  margin: -1px !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}

@media (max-width: 799px) {
  .u-mq-min-800 {
    display: none;
  }
}

@media (max-width: 599px) {
  .u-desktop-only {
    display: none;
  }
}

@media (min-width: 600px) {
  .u-mobile-only {
    display: none;
  }
}

@media (max-width: 599px) {
  .u-flex-wrap-mobile {
    flex-wrap: wrap;
  }
}

@media (min-width: 600px) {
  .u-flex-none-desktop {
    flex: none;
  }
}