/* Base : mise en page, bandeau, boutons, cartes, formulaires, dialogues. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--police);
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--texte);
  background: var(--fond);
  /* Un mot trop long pour la ligne (adresse, nom composé) passe à la ligne au lieu de déborder */
  overflow-wrap: break-word;
}

/* Titres sur des lignes de longueur égale : jamais un mot seul sur la dernière ligne */
h1,
h2,
h3 {
  line-height: 1.15;
  font-weight: 800;
  color: var(--bleu-nuit);
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h4,
legend,
label,
summary {
  text-wrap: balance;
}

/* Paragraphes : la dernière ligne garde au moins deux mots */
p,
li,
dd {
  text-wrap: pretty;
}

h2 {
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
}

h3 {
  font-size: 1.3rem;
}

p {
  margin: 0 0 0.75em;
}

a {
  color: var(--bleu-numerique);
  font-weight: 700;
}

img {
  max-width: 100%;
}

:focus-visible {
  outline: 3px solid var(--bleu);
  outline-offset: 3px;
}

/* Titres focalisés par le script à l'arrivée sur un écran : pas de cadre */
[tabindex='-1']:focus {
  outline: none;
}

[hidden] {
  display: none !important;
}

/* Icônes Font Awesome : un petit espace avant le texte qui suit */
.icone {
  margin-inline-end: 0.4em;
}

/* Pas d'espace dans un bouton du bandeau (il a son propre écart), ni pour une icône seule dans sa
   pastille (icône du jeu, médaille du podium) : l'espace à droite la décalerait vers la gauche */
.bouton-bandeau .icone,
.bouton-icone .icone,
.puce__retirer .icone,
.scores-groupe__bouton .icone,
.intro__icone .icone,
.carte-jeu__icone .icone,
.carte-thematique__icone .icone,
.apercu-jeu__icone .icone,
.podium__medaille .icone,
.haut-de-page .icone {
  margin-inline-end: 0;
}

/* Icône placée après le texte (flèche « suivant ») */
.icone--apres {
  margin-inline: 0.4em 0;
}

.visuellement-cache {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.lien-evitement {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--blanc);
  border-radius: var(--rayon-pilule);
}

.lien-evitement:focus {
  top: 1rem;
}

/* ---------- Signature des outils Skazy Formation ---------- */

/* Commune aux outils Skazy Formation : le logo Skazy Formation (lien vers formation.skazy.nc, dans
   un nouvel onglet), des filets, la pastille (le favicon de l'outil) et le nom « Mini-jeux », qui
   forment un seul lien vers l'accueil des mini-jeux. Sa taille de police règle l'ensemble : pour
   17 px, un logo de 36 px de haut, une pastille de 28 px, un filet de 24 px, 16 px entre les
   éléments et 10 px entre la pastille et le nom. */
.signature {
  display: flex;
  align-items: center;
  gap: calc(16em / 17);
  font-size: 1.0625rem;
}

.signature__logo {
  flex: none;
  display: block;
  line-height: 0;
}

.signature__logo img {
  width: auto;
  max-width: none;
  height: calc(36em / 17);
}

.signature__filet {
  flex: none;
  width: 1px;
  height: calc(24em / 17);
  background: var(--filet-sombre);
}

.signature__outil {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(10em / 17);
  font-weight: 700;
  line-height: 1.2;
  color: var(--blanc);
  text-decoration: none;
  white-space: nowrap;
}

.signature__outil:hover .signature__nom {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.signature__pastille {
  flex: none;
  width: calc(28em / 17);
  height: calc(28em / 17);
}

/* « Les outils » : la roue des outils Skazy Formation (26 px) et son nom, vers la page qui les
   réunit, dans le même onglet. Une pilule claire au survol, comme les boutons du bandeau. Sur
   téléphone, la roue seule : le nom reste lu par les lecteurs d'écran. */
.lien-outils {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.25rem;
  padding: 0.25rem 0.75rem 0.25rem 0.5rem;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--blanc);
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--rayon-pilule);
}

@media (hover: hover) {
  .lien-outils:hover {
    background: var(--survol-sombre);
  }
}

.lien-outils__roue {
  flex: none;
  width: 1.625rem;
  height: 1.625rem;
}

/* ---------- Bandeau ---------- */

/* De gauche à droite : la maison « Accueil », un filet, la pastille et « Mini-jeux » (lien vers
   l'accueil des mini-jeux), le titre de la page, ses boutons, puis « Les outils », un filet et le
   logo Skazy Formation, toujours le dernier (nouvel onglet : la partie en cours reste ouverte).
   Sur ordinateur, tout tient sur une ligne : le bandeau garde sa hauteur, et l'écran de partie
   tient en 1280 × 720. */
.bandeau {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.75rem clamp(1rem, 3vw, 2.5rem);
  background: var(--bleu-nuit);
  color: var(--blanc);
  overflow: hidden;
}

.bandeau::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 5px;
  background: var(--accent);
}

.bandeau__accueil {
  flex: none;
  text-decoration: none;
}

/* Le filet entre la maison et la pastille, un peu plus près d'elles que l'écart du bandeau */
.bandeau__filet {
  margin-inline: -0.25rem;
}

.bandeau__outil,
.bandeau__signature {
  flex: none;
  font-size: 1.0625rem;
}

.bandeau__titre {
  margin: 0;
  flex: 1;
  color: var(--blanc);
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  font-weight: 800;
}

.bandeau__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.bouton-bandeau {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--blanc);
  background: rgb(255 255 255 / 10%);
  border: 1px solid rgb(255 255 255 / 35%);
  border-radius: var(--rayon-pilule);
  padding: 0.4rem 0.9rem;
  cursor: pointer;
}

.bouton-bandeau:hover {
  background: rgb(255 255 255 / 20%);
}

.bouton-bandeau[aria-pressed='false'] {
  opacity: 0.75;
}

/* Portable, vidéoprojecteur en 1280 × 720 : « Les outils » se réduit à la roue (le nom reste lu par
   les lecteurs d'écran) et les écarts se resserrent, pour que le titre tienne sur une ligne */
@media (max-width: 1350px) {
  .bandeau {
    gap: 1rem;
  }

  .bouton-bandeau {
    padding-inline: 0.75rem;
  }

  .bandeau .lien-outils {
    padding: 0.3125rem;
  }

  .bandeau .lien-outils__texte {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Moins de place (vidéoprojecteur en 1024 × 768) : le nom « Mini-jeux » cède la place au titre et
   aux boutons (la pastille reste, le nom reste lu par les lecteurs d'écran), sans filet après la
   maison ; logo de 32 px, écarts encore un peu resserrés */
@media (max-width: 1200px) {
  .bandeau {
    gap: 0.75rem;
  }

  .bandeau__filet {
    display: none;
  }

  .bouton-bandeau {
    padding-inline: 0.65rem;
  }

  .bandeau__outil,
  .bandeau__signature {
    font-size: 0.9375rem;
  }

  .bandeau__signature {
    gap: 0.75rem;
  }

  .bandeau__outil .signature__nom {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Téléphone, sur trois lignes : la maison, la pastille, puis à droite la roue et le logo ; le
   titre ; les boutons, sur une seule ligne */
@media (max-width: 700px) {
  .bandeau {
    flex-wrap: wrap;
    row-gap: 0.6rem;
  }

  .bandeau__signature {
    order: 1;
    margin-inline-start: auto;
  }

  .bandeau .bandeau__titre {
    order: 2;
    flex-basis: 100%;
  }

  .bandeau .bandeau__actions {
    order: 3;
    flex-basis: 100%;
    justify-content: flex-start;
  }

  .bandeau .bandeau__actions:empty {
    display: none;
  }

  /* La première ligne a la place du filet entre la maison et la pastille */
  .bandeau__filet {
    display: block;
  }

  /* La roue seule, avec une zone de toucher de 40 px qui déborde sur l'écart voisin */
  .bandeau .lien-outils {
    justify-content: center;
    min-width: 2.5rem;
    min-height: 2.5rem;
    margin-inline: -0.4375rem;
    padding: 0;
  }
}

@media (max-width: 640px) {
  .bandeau {
    gap: 0.75rem;
  }

  /* Sur téléphone, la maison suffit : le mot reste lu par les lecteurs d'écran */
  .bandeau__accueil {
    padding: 0.45rem 0.6rem;
  }

  .bandeau__accueil-texte {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Pastille de 24 px, logo de 30 px de haut */
  .bandeau__outil {
    font-size: calc(24rem / 28 * 17 / 16);
  }

  .bandeau__signature {
    gap: 0.75rem;
    font-size: calc(30rem / 36 * 17 / 16);
  }

  .bandeau .bandeau__signature .signature__filet {
    height: 1.5rem;
  }
}

/* Petit téléphone (360 px) : logo de 28 px ; les boutons, un peu plus petits, restent sur une
   ligne, avec leur libellé entier */
@media (max-width: 400px) {
  .bandeau__signature {
    font-size: calc(28rem / 36 * 17 / 16);
  }

  .bandeau__actions {
    gap: 0.4rem;
  }

  .bandeau__actions .bouton-bandeau {
    font-size: 0.875rem;
    padding: 0.4rem 0.7rem;
  }
}

/* Petit écran sans écran tactile (fenêtre étroite sur ordinateur) : le bouton Plein écran s'ajoute
   aux autres ; Désigner se réduit à sa roue (son nom reste lu) et les boutons rapetissent encore un
   peu, pour que les quatre tiennent sur une ligne, libellés entiers */
@media (max-width: 400px) and (hover: hover), (max-width: 400px) and (pointer: fine) {
  .bandeau__actions .bouton-bandeau {
    font-size: 0.8125rem;
    padding-inline: 0.6rem;
  }

  .bouton-bandeau__texte {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ---------- Mise en page ---------- */

.cadre {
  flex: 1;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 2.5rem);
}

.cadre:focus {
  outline: none;
}

/* En partie, on profite de toute la largeur du vidéoprojecteur, et de sa hauteur : en
   1280 × 720, les marges du haut et du bas se resserrent */
.cadre:has(> .ecran-jeu) {
  max-width: 1680px;
  padding-block: clamp(0.75rem, 2vh, 1.75rem);
}

.pied {
  padding: 1.25rem;
  text-align: center;
  color: var(--texte-doux);
  font-size: 0.95rem;
}

.pied p {
  margin-block: 0;
}

.pied p + p {
  margin-top: 0.5rem;
}

/* Mention de droits (copyright) de toutes les pages */
.pied__mentions {
  max-width: 60rem;
  margin-inline: auto;
  font-size: 0.85rem;
}

/* En partie, l'écran tient en 1280 × 720 sans défiler : le pied de page s'efface */
body:has(.ecran-jeu) .pied {
  display: none;
}

.carte {
  background: var(--blanc);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: clamp(1.1rem, 2.4vw, 2.25rem);
}

.colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(1.25rem, 2.4vw, 2.25rem);
  margin: clamp(1.25rem, 2.4vw, 2.25rem) 0;
}

.groupe-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.groupe-boutons--centre {
  justify-content: center;
}

/* ---------- Boutons ---------- */

/* Le texte d'un bouton s'écrit comme une phrase (pas de flex) : quand il passe à la ligne, le
   libellé, un compte (« · 3 participants ») et l'aide « (Entrée) » se suivent sur des lignes
   équilibrées, au lieu de former des colonnes coupées chacune de leur côté */
.bouton {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  text-wrap: balance;
  font: inherit;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  color: var(--bleu-nuit);
  background: var(--blanc);
  border: 2px solid var(--bleu-nuit);
  border-radius: var(--rayon-pilule);
  padding: 0.6em 1.3em;
  cursor: pointer;
  transition:
    transform 0.1s ease,
    background-color 0.15s ease;
}

/* Icône du bouton : en ligne avec le texte, qu'elle ne quitte jamais (pas de coupure entre les
   deux), avec l'écart qu'avait le flex */
.bouton .icone {
  display: inline;
  margin-inline: 0 0.35em;
}

.bouton .icone--apres {
  margin-inline: 0.35em 0;
}

/* Seulement avec une souris : sur écran tactile, le survol resterait collé au bouton touché
   (et au bouton qui apparaît ensuite au même endroit) */
@media (hover: hover) {
  .bouton:hover:not(:disabled) {
    background: var(--accent-clair);
  }
}

.bouton:active:not(:disabled) {
  transform: translateY(1px);
}

.bouton:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.bouton--principal {
  color: var(--sur-accent);
  background: var(--accent);
  border-color: var(--accent);
}

.bouton--principal:hover:not(:disabled) {
  background: var(--accent);
  filter: brightness(1.08);
}

.bouton--sombre {
  color: var(--blanc);
  background: var(--bleu-nuit);
}

.bouton--sombre:hover:not(:disabled) {
  background: #23264a;
}

.bouton--discret {
  border-color: var(--bord);
  font-weight: 700;
}

.bouton--grand {
  font-size: 1.25rem;
  padding: 0.75em 1.8em;
}

/* En partie, au vidéoprojecteur : les grands boutons grandissent avec la hauteur de l'écran, comme
   le reste (1.25rem en 1280 × 720, environ 1.55rem en 1920 × 1080) */
@media (min-width: 481px) {
  .ecran-jeu .bouton--grand {
    font-size: clamp(1.25rem, 2.3vh, 1.6rem);
  }
}

/* Téléphone : le grand bouton reste le plus visible, mais laisse de la place à son texte */
@media (max-width: 480px) {
  .bouton--grand {
    font-size: 1.1rem;
    padding: 0.7em 1.2em;
  }
}

.bouton--succes {
  color: var(--blanc);
  background: var(--succes);
  border-color: var(--succes);
}

.bouton--succes:hover:not(:disabled) {
  background: #00614e;
}

.bouton--danger {
  color: var(--blanc);
  background: var(--erreur);
  border-color: var(--erreur);
}

.bouton--danger:hover:not(:disabled) {
  background: #8f1e18;
}

.bouton-icone {
  display: inline-grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  font: inherit;
  font-weight: 800;
  color: var(--bleu-nuit);
  background: var(--fond);
  border: 1px solid var(--bord);
  border-radius: 50%;
  cursor: pointer;
}

.bouton-icone:hover:not(:disabled) {
  background: var(--accent-clair);
}

.bouton-icone:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.bouton-icone--danger:hover:not(:disabled) {
  color: var(--blanc);
  background: var(--erreur);
}

kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0.05em 0.4em;
  font: inherit;
  font-weight: 800;
  font-size: 0.85em;
  text-align: center;
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-bottom-width: 3px;
  border-radius: 6px;
}

/* ---------- Formulaires ---------- */

.champ {
  margin: 0 0 1rem;
}

.champ__libelle {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 700;
  color: var(--bleu-nuit);
}

fieldset.champ {
  border: 0;
  padding: 0;
  min-width: 0;
}

.champ__controle {
  width: 100%;
  font: inherit;
  color: var(--texte);
  background: var(--blanc);
  border: 2px solid var(--bord);
  border-radius: 10px;
  padding: 0.55rem 0.8rem;
}

.champ__controle:focus {
  border-color: var(--bleu);
}

/* Listes de choix (passion, nombre d'équipes, duellistes…) : une pilule comme les boutons voisins,
   en gras, avec un chevron dessiné et un survol, pour qu'on voie d'un coup d'œil qu'elle s'ouvre */
select.champ__controle {
  appearance: none;
  /* La largeur de son contenu : une pilule étirée sur toute la ligne pour « Vrai » se lit mal */
  width: auto;
  min-width: min(100%, 12rem);
  max-width: 100%;
  padding: 0.55rem 2.6rem 0.55rem 1.1rem;
  font-weight: 700;
  color: var(--bleu-nuit);
  background-color: var(--blanc);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6 8 10.5 12.5 6' fill='none' stroke='%230E1027' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.95rem center;
  background-size: 0.95rem;
  border-radius: var(--rayon-pilule);
  box-shadow: var(--ombre);
  text-overflow: ellipsis;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}

select.champ__controle:hover {
  border-color: var(--bleu-nuit);
  background-color: var(--fond);
}

select.champ__controle:focus {
  border-color: var(--bleu-nuit);
}

select.champ__controle:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.champ__controle--nombre {
  max-width: 16rem;
}

textarea.champ__controle {
  resize: vertical;
  min-height: 3.2rem;
}

.champ__ligne {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* Téléphone : le champ garde une largeur où l'on voit ce qu'on tape ; s'il n'y a pas la place,
   le bouton (Valider, Essayer, Ajouter) passe dessous au lieu de l'écraser */
@media (max-width: 480px) {
  .champ__ligne {
    flex-wrap: wrap;
  }

  .champ__ligne > .champ__controle {
    flex: 1 1 11rem;
    min-width: 0;
  }
}

.champ__unite {
  font-weight: 700;
  color: var(--texte-doux);
}

.champ__aide {
  margin: 0.3rem 0 0;
  font-size: 0.92rem;
  color: var(--texte-doux);
}

.champ__erreur {
  margin: 0.3rem 0 0;
  font-weight: 700;
  color: var(--erreur);
}

.case-a-cocher {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.case-a-cocher input {
  width: 1.3rem;
  height: 1.3rem;
  accent-color: var(--vert-logo);
}

/* ---------- Messages ---------- */

.message {
  margin: 1rem 0;
  padding: 0.8rem 1rem;
  border-radius: 10px;
  font-weight: 700;
}

.message ul {
  margin: 0.4rem 0 0;
  font-weight: 500;
}

.message p {
  margin: 0;
}

.message--info {
  background: var(--bleu-clair);
}

.message--erreur {
  color: #6d1712;
  background: #fde4e2;
}

.erreurs {
  color: #6d1712;
  font-size: 0.95rem;
}

.etiquette {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.6rem;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: var(--rayon-pilule);
  background: var(--jaune-clair);
}

/* ---------- Dialogues ---------- */

.dialogue {
  width: min(92vw, 640px);
  max-height: 92vh;
  padding: 0;
  border: 0;
  border-radius: var(--rayon);
  box-shadow: var(--ombre-forte);
  color: var(--texte);
}

.dialogue::backdrop {
  background: rgb(14 16 39 / 65%);
}

.dialogue__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem 0;
}

.dialogue__titre {
  margin: 0;
  font-size: 1.5rem;
}

.dialogue__corps {
  padding: 1rem 1.25rem;
}

.dialogue__message {
  font-size: 1.15rem;
}

.dialogue__outils {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.dialogue__pied {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 0 1.25rem 1.25rem;
}

/* ---------- Remonter en haut ---------- */

/* Pages qui défilent (haut-de-page.js) : un bouton rond en bas à droite, qui apparaît en fondu
   (opacité et déplacement seulement) après un écran et un peu plus de défilement. Caché, il ne
   reçoit pas le focus (visibility). Jamais pendant une partie ni sur l'écran de fin. */
.haut-de-page {
  position: fixed;
  right: 1.5rem;
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  z-index: 20;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  font: inherit;
  font-size: 1.15rem;
  color: var(--blanc);
  background: var(--succes);
  border: 0;
  border-radius: 50%;
  box-shadow: var(--ombre-forte);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.75rem);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0s linear 0.2s;
}

.haut-de-page--visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0s;
}

@media (hover: hover) {
  .haut-de-page:hover {
    background: var(--bleu-nuit);
  }
}

/* La barre Annuler / Enregistrer, collée en bas de l'écran pendant la préparation, lui laisse sa
   place à droite : le bouton passe par-dessus la barre, jamais sur Enregistrer */
body:has(> .haut-de-page:not([hidden])) .barre-actions {
  padding-inline-end: 4rem;
}

/* Tout en bas de la page, il ne cache pas le pied de page (mentions, bouton Verrouiller) */
body:has(> .haut-de-page:not([hidden])) .pied {
  padding-bottom: 5rem;
}

@media (max-width: 640px) {
  .haut-de-page {
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    width: 2.75rem;
    height: 2.75rem;
  }
}

/* Téléphone tactile (petit écran, ni souris ni clavier) : on retire le plein écran, qui n'apporte
   rien sur un si petit écran, et les aides sur les touches du clavier (Espace, Entrée…) */
@media (hover: none) and (pointer: coarse) and (max-width: 600px),
  (hover: none) and (pointer: coarse) and (max-height: 600px) {
  .bouton-plein-ecran,
  .raccourci,
  .aide-clavier {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}