/* Feuille du site : la mise en page, et elle seule. Les valeurs viennent des variables du kit, définies par tokens.css, et
   les styles de texte de ses classes, définies par typography.css, toutes deux générées depuis design-tokens.json et
   servies à côté de celle-ci (docs/design/design-system.md). Aucune couleur, taille, espacement ni police n'est écrit ici ;
   WebStyleTests refuse une valeur littérale, et pour changer une valeur on change le jeton. */

/* Les deux fontes du kit, servies par le site et par personne d'autre : une dépendance externe à l'exécution casse la page
   quand elle tombe, et l'appel enverrait l'adresse réseau de chaque visiteur à un tiers (docs/design/design-system.md,
   « Typographie »). Fichiers sous licence SIL Open Font, déposés à côté de leur licence, convertis en woff2 depuis les
   TrueType du dépôt que l'application Android embarque. */
@font-face {
  font-family: "Anton";
  src: url("fonts/anton-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Condensed";
  src: url("fonts/roboto-condensed-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Condensed";
  src: url("fonts/roboto-condensed-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Condensed";
  src: url("fonts/roboto-condensed-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
}

/* Blazor pose le focus sur le titre à chaque navigation, pour que les lecteurs d'écran annoncent la page ; il lui donne
   pour cela un tabindex de -1. Ce focus-là n'a pas à se voir, l'anneau restant partout où l'on navigue vraiment au clavier. */
[tabindex='-1']:focus,
:focus:not(:focus-visible) {
  outline: none;
}

html,
body {
  margin: var(--cj-space-0);
  background: var(--cj-canvas);
  color: var(--cj-text);
  font-family: var(--cj-font-body);
  font-size: var(--cj-font-size-md);
  line-height: 1.5;
}

/* En-tête */

/* L'en-tête tient la gouttière du contenu ; son filet, comme dans la maquette, court d'un bord à l'autre de la boîte du
   contenu et pas jusqu'aux bords de la fenêtre, d'où cette boîte intérieure, celle du pied de page. */
.site-header {
  padding: var(--cj-space-0) var(--cj-gutter);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cj-space-4);
  max-width: var(--cj-content-max);
  margin: var(--cj-space-0) auto;
  padding: var(--cj-space-4) var(--cj-space-0);
  border-bottom: var(--cj-line-width) solid var(--cj-line-soft);
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--cj-space-3);
  color: inherit;
  text-decoration: none;
}

/* Le lockup de la maquette : deux lignes serrées, hautes comme la mesure relevée sur l'image (129 px de large pour une
   largeur de contenu de 1080, soit deux lignes de 24 px posées l'une sur l'autre). */
.site-brand__name {
  display: grid;
  font-size: var(--cj-font-size-xl);
  line-height: 1;
}

/* Le symbole ferme la première ligne du lockup, comme dans la maquette. */
.site-brand__line {
  display: inline-flex;
  align-items: center;
  gap: var(--cj-space-2);
}

.site-brand__mark {
  width: var(--cj-icon-size);
  height: var(--cj-icon-size);
  flex: none;
  /* Le symbole est vert dans l'en-tête, comme dans la maquette ; le pied de page vert le reprend en ivoire. */
  color: var(--cj-green);
}

.site-footer .site-brand__mark {
  color: inherit;
}

.site-nav,
.site-account {
  display: flex;
  align-items: center;
  gap: var(--cj-space-5);
}

/* Dans la maquette, les rubriques sont en capitales et les liens du compte en casse normale. Sur un écran étroit, les
   rubriques passent à la ligne plutôt que de sortir de la page. */
.site-nav {
  flex-wrap: wrap;
  text-transform: uppercase;
}

/* Un lien de navigation est une cible tactile : il tient la hauteur minimale du kit, doigt compris. */
.site-account__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--cj-touch-target-min);
  color: inherit;
  text-decoration: none;
  border-bottom: var(--cj-line-width) solid transparent;
}

.site-account__link:hover,
.site-account__link:focus-visible {
  border-bottom-color: var(--cj-green);
}

/* Une rubrique dont la page n'existe pas encore : elle porte l'aspect du kit, elle n'emmène nulle part, et le curseur le dit. */
.site-nav__soon {
  display: inline-flex;
  align-items: center;
  min-height: var(--cj-touch-target-min);
  color: var(--cj-text-muted);
  cursor: default;
}

.site-account__search {
  min-height: var(--cj-touch-target-min);
}

/* Les boutons du kit : hauteur de cible tactile, bord net, décalage plein dans le vert de la marque. */
.cj-button__arrow {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  padding-left: var(--cj-space-3);
  border-left: var(--cj-line-width) solid currentColor;
}

.cj-button {
  display: inline-flex;
  align-items: center;
  gap: var(--cj-space-2);
  min-height: var(--cj-touch-target-min);
  padding: var(--cj-inset-button);
  border: var(--cj-line-width) solid var(--cj-ink);
  border-radius: var(--cj-radius-md);
  background: var(--cj-surface);
  color: var(--cj-ink);
  white-space: nowrap;
}

/* Le bouton jaune de la maquette : bord et décalage dans le vert de la marque. */
.cj-button--primary {
  border-color: var(--cj-green);
  background: var(--cj-yellow);
  box-shadow: var(--cj-shadow-button);
}

.cj-button--booking {
  background: var(--cj-red);
  border-color: var(--cj-red);
  color: var(--cj-surface);
}

.icon {
  width: var(--cj-icon-size);
  height: var(--cj-icon-size);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--cj-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Bandeau d'accueil. Toutes les proportions viennent de la maquette finale, mesurées sur l'image plutôt qu'estimées à
   l'œil : contenu de 781 px, filet de l'en-tête à 48, valeurs ramenées à la largeur de contenu du site. La colonne de
   texte tient 41 % du contenu, la composition va de 45,9 % à 85,5 % et monte de 13 px au-dessus du filet de l'en-tête,
   qu'elle recouvre, et la colonne de droite tient les 21 % restants, devant la composition. */

.hero {
  position: relative;
  max-width: var(--cj-content-max);
  margin: var(--cj-space-0) auto;
  padding: var(--cj-space-0) var(--cj-space-0) var(--cj-space-6);
}

/* Le titre ne garde pas la marge que le navigateur donne à un h1 : elle vaut deux tiers de sa taille, soit 51 px ici, et
   décalerait tout le bandeau sous le filet de l'en-tête. Sa taille est celle que le kit donne au bandeau, 44 px, jusqu'à ce
   que la grille de la maquette s'installe. */
.hero__title {
  margin: var(--cj-space-0);
}

/* Les trois lignes serrées de la maquette. */
.hero__promise {
  margin: var(--cj-space-2) var(--cj-space-0) var(--cj-space-0);
  font-size: var(--cj-font-size-lg);
  line-height: 1.05;
}

.hero__call {
  margin: var(--cj-space-2) var(--cj-space-0) var(--cj-space-0);
}

/* La composition du kit : le soleil derrière, le plongeur devant lui, le plongeoir au premier plan à droite. Le conteneur
   porte le rapport de la composition de la maquette, 428 sur 360 pour une largeur de contenu de 1080, et chaque calque y
   est placé en pourcentage de ce conteneur : la composition garde ainsi sa forme à toutes les largeurs. */
.hero__art {
  position: relative;
  margin-top: var(--cj-space-8);
  aspect-ratio: 428 / 360;
}

.hero__art > img {
  position: absolute;
  max-width: none;
  height: auto;
}

.hero__sun {
  left: 5.1%;
  top: 0;
  width: 58.8%;
}

.hero__diver {
  left: 0;
  top: 7.5%;
  width: 45.7%;
}

/* L'image du plongeoir porte 10 % de marge transparente à gauche et 3 % à droite : sa boîte est donc plus large que le
   dessin et décalée, pour que le dessin lui-même aille de 29,8 % à 100 % du conteneur, comme dans la maquette. Sur un
   écran étroit, où la composition prend toute la largeur du contenu, la boîte s'arrête au bord : sa marge transparente
   poussait la page de côté de deux pixels entre 700 et 767 px. */
.hero__board {
  left: 19.3%;
  top: 28.8%;
  width: 80.7%;
}

/* La note du kit : en vert, contre le soleil, inclinée comme dans la maquette, où les bords gauches des quatre lignes
   restent alignés, ce que fait un cisaillement et non une rotation. Le filet qui la souligne reste droit, hors du
   cisaillement, et court sur la largeur que la maquette lui donne. */
.hero__claim {
  position: absolute;
  left: 0;
  top: 69%;
  margin: var(--cj-space-0);
  color: var(--cj-green);
}

.hero__claim-lines {
  display: block;
  font-size: var(--cj-font-size-xs);
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
  transform: skewY(-10deg);
}

.hero__claim::after {
  display: block;
  width: var(--cj-space-8);
  margin-top: var(--cj-space-3);
  border-top: var(--cj-line-width) solid currentColor;
  content: "";
}

/* La colonne de droite de la maquette : la saison à gauche, les mots du kit à droite derrière un filet, les flèches et
   l'astérisque en dessous. Sur téléphone, la saison reste seule : les mots sont un décor et les flèches une commande qui
   n'existe pas encore. */
.hero__side {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--cj-space-4);
}

.hero__kit,
.hero__steps {
  display: none;
}

/* Le bloc de saison : la mention en petit au-dessus, la saison et l'année en grand, dans la fonte de texte du kit et non
   dans sa fonte d'affichage, parce que la maquette les écrit en condensé fin et non en gras. */
.hero__season {
  margin: var(--cj-space-0);
  color: var(--cj-ink);
}

.hero__season-lead {
  display: block;
  font-size: var(--cj-font-size-lg);
  line-height: 1.2;
  text-transform: uppercase;
}

/* L'interlignage réserve la hauteur réelle des capitales accentuées : plus serré, l'accent de « ÉTÉ » remonte dans la
   ligne du dessus. */
.hero__season-name,
.hero__season-year {
  display: block;
  font-size: var(--cj-font-size-4xl);
  line-height: 1;
  text-transform: uppercase;
}

/* Les mots du kit, derrière le filet vertical de la maquette, qui commence sous le haut de la colonne et s'arrête sous
   la signature. */
.hero__kit {
  margin-top: var(--cj-space-3);
  /* Les mots tiennent le bord droit de la colonne, que la saison les laisse à côté d'elle ou les renvoie en dessous. */
  margin-left: auto;
  padding: var(--cj-space-10) var(--cj-space-0) var(--cj-space-2) var(--cj-space-4);
  border-left: var(--cj-line-width) solid var(--cj-line);
}

.hero__words,
.hero__signature {
  margin: var(--cj-space-0);
  padding: var(--cj-space-0);
  list-style: none;
  font-size: var(--cj-font-size-xs);
  line-height: 1.15;
  text-transform: uppercase;
}

/* Le tiret que la maquette pose entre les mots et la signature. */
.hero__signature::before {
  display: block;
  width: var(--cj-space-8);
  margin: var(--cj-space-2) var(--cj-space-0) var(--cj-space-8);
  border-top: var(--cj-line-width) solid currentColor;
  content: "";
}

/* Les deux flèches de défilement et l'astérisque de la marque, au bas de la colonne, alignés à droite comme dans la
   maquette. */
.hero__steps {
  align-items: center;
  justify-content: flex-end;
  gap: var(--cj-space-3);
  flex: 1 1 100%;
  margin: var(--cj-space-3) var(--cj-space-0) var(--cj-space-0);
}

.hero__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--cj-touch-target-min);
  height: var(--cj-touch-target-min);
  border: var(--cj-line-width) solid var(--cj-line);
  border-radius: var(--cj-radius-pill);
  color: var(--cj-text-muted);
  cursor: default;
}

/* Les chevrons de la maquette : le symbole du kit pointe vers le bas, un quart de tour lui donne les deux sens. */
.icon--previous {
  transform: rotate(90deg);
}

.icon--next {
  transform: rotate(-90deg);
}

.hero__mark {
  width: var(--cj-brand-mark-size);
  height: var(--cj-brand-mark-size);
  margin-left: var(--cj-space-6);
  color: var(--cj-green);
}

/* La barre de recherche de la maquette : un bandeau blanc bordé, ses champs séparés par un filet, le bouton à droite.
   Elle passe devant la composition, dont la maquette lui fait couvrir le bas du plongeoir. */
.search {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  position: relative;
  max-width: var(--cj-content-max);
  margin: var(--cj-space-0) auto;
  padding: var(--cj-space-1);
  border: var(--cj-line-width) solid var(--cj-line-soft);
  border-radius: var(--cj-radius-md);
  background: var(--cj-surface);
}

.search__field {
  display: flex;
  align-items: center;
  gap: var(--cj-space-2);
  /* Un élément flexible ne descend pas sous sa taille minimale automatique, ici la largeur du libellé : sans cela, sur un
     écran de 320 px, le premier champ poussait la barre hors de la page au lieu de couper son libellé. */
  min-width: var(--cj-space-0);
  min-height: var(--cj-touch-target-min);
  margin: var(--cj-space-0);
  padding: var(--cj-space-0) var(--cj-space-4);
  color: var(--cj-text-muted);
}

/* Dans la maquette, le champ du lieu est en capitales et celui de la date en casse normale. */
.search__field--place {
  text-transform: uppercase;
}

.search__field + .search__field {
  border-left: var(--cj-line-width) solid var(--cj-line-soft);
}

/* Sur un écran étroit, le champ de recherche prend sa propre ligne : partagée avec les autres, il ne montrerait qu'une
   lettre de son libellé. */
.search__field--wide {
  flex: 1 1 100%;
}

/* Un libellé tient sur une ligne : serré, il se coupe, et la barre garde la forme de la maquette. */
.search__field > span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Le bouton de la barre est le seul que la maquette écrive en capitales. Étiré sur toute la largeur quand la barre passe
   en colonne, il garde son libellé au milieu. */
.search .cj-button {
  justify-content: center;
  margin-left: var(--cj-space-3);
  text-transform: uppercase;
}

.icon--end {
  margin-left: var(--cj-space-2);
}

/* Pied de page */

.site-footer {
  margin-top: var(--cj-space-16);
  padding: var(--cj-space-10) var(--cj-gutter);
  background: var(--cj-green);
  color: var(--cj-surface);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--cj-space-8);
  max-width: var(--cj-content-max);
  margin: var(--cj-space-0) auto;
}

/* Tout ce que porte le pied de page prend l'ivoire du pied de page : un gris de texte courant sur le vert ne se lirait pas. */
.site-footer .site-brand__name,
.site-footer .site-footer__claim,
.site-footer__legal {
  color: inherit;
}

.site-footer__claim {
  margin: var(--cj-space-0);
  padding: var(--cj-space-0);
  list-style: none;
  text-align: right;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cj-space-4);
  max-width: var(--cj-content-max);
  margin: var(--cj-space-8) auto var(--cj-space-0);
  padding-top: var(--cj-space-4);
  border-top: var(--cj-line-width) solid currentColor;
}

/* Pages courantes */

.site-main {
  max-width: var(--cj-content-max);
  margin: var(--cj-space-0) auto;
  padding: var(--cj-space-4) var(--cj-gutter) var(--cj-space-12);
}

#blazor-error-ui {
  display: none;
  position: fixed;
  bottom: var(--cj-space-0);
  left: var(--cj-space-0);
  width: 100%;
  padding: var(--cj-space-3) var(--cj-space-4);
  background: var(--cj-yellow);
  color: var(--cj-ink);
  border-top: var(--cj-line-width) solid var(--cj-yellow-dark);
}

#blazor-error-ui .reload {
  margin-left: var(--cj-space-2);
  color: inherit;
}

@media (min-width: 768px) {
  /* Sur grand écran, la grille mesurée sur la maquette : la colonne de texte sur 41 % du contenu, la composition dans la
     colonne du milieu mais plus large qu'elle, de 45,9 % à 85,5 %, et les 21 % de droite pour la saison et les mots. */
  .hero {
    display: grid;
    grid-template-columns: 41% 38% 21%;
    align-items: start;
    padding-bottom: var(--cj-space-0);
  }

  .hero__text {
    grid-column: 1;
    padding-top: var(--cj-space-4);
  }

  .hero__title {
    font-size: var(--cj-font-size-hero);
  }

  /* La composition déborde de sa colonne vers la droite, comme dans la maquette, et monte au-dessus du filet de
     l'en-tête ; une marge en pourcentage se lit sur la largeur de la colonne, d'où ces deux valeurs. */
  .hero__art {
    grid-column: 2;
    /* La composition s'arrête au bord de la colonne de droite : le grand écran seul lui fait passer dessous, comme dans
       la maquette, là où la saison garde un fond lisible. */
    width: 87%;
    margin: -7.8% 0 -6.1% 12.9%;
  }

  /* La colonne de droite passe devant la composition : le plongeoir court derrière la saison. */
  .hero__side {
    grid-column: 3;
    position: relative;
    padding-left: var(--cj-space-3);
  }

  /* La composition ne prend plus toute la largeur : le dessin du plongeoir reprend sa place mesurée dans son conteneur. */
  .hero__board {
    left: 21.7%;
  }

  .search__field--wide {
    flex: 1;
  }

  /* La note verte reprend sa place de la maquette, contre le soleil et à gauche de la composition. */
  .hero__claim {
    left: -12.9%;
    top: 54.7%;
  }
}

@media (min-width: 1200px) {
  /* Les mots du kit se rangent à côté de la saison, derrière leur filet, et les flèches prennent le bas de la colonne,
     comme dans la maquette : en dessous de cette largeur, la colonne de droite ne tient pas les deux, et la saison seule
     y reste lisible, sans commande de défilement pour un module qui n'existe pas encore. */
  .hero__kit {
    display: block;
  }

  .hero__steps {
    display: flex;
  }

  /* La composition reprend le débord de la maquette, de 45,9 % à 85,5 % du contenu, et passe derrière la saison. */
  .hero__art {
    width: 104.4%;
  }
}