/* Socle de mise en page. Volontairement minimal : la mise en forme des surfaces
   est posee par les plans suivants. Ce fichier n'existe que pour que le gabarit
   racine soit lisible et que rien ne renvoie 404. */

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

html {
  /* 100 % et non une taille en pixels : le reglage utilisateur doit s'appliquer. */
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-corps);
  line-height: 1.6;
}

.wrap {
  max-width: 62rem;
  margin: 0 auto;
  padding: calc(var(--pas) * 8) calc(var(--pas) * 5);
}

h1 {
  font-family: var(--display);
  font-size: var(--t-h1);
  line-height: 1.1;
  margin: 0 0 calc(var(--pas) * 4);
}

h2 {
  font-family: var(--display);
  font-size: var(--t-h2);
  line-height: 1.15;
  margin: calc(var(--pas) * 8) 0 calc(var(--pas) * 3);
}

h3 {
  font-family: var(--display);
  font-size: var(--t-h3);
  margin: calc(var(--pas) * 6) 0 calc(var(--pas) * 2);
}

a {
  color: var(--voisin);
  text-underline-offset: 0.15em;
}

/* Le focus reste visible partout. Ne jamais retirer cette regle : la navigation
   au clavier est une exigence de la spec, pas une option. */
:focus-visible {
  outline: 3px solid var(--chiffre);
  outline-offset: 3px;
}

/* Region live unique. Visible : une annonce que seuls les lecteurs d'ecran
   percoivent priverait les autres utilisateurs du meme retour. */
.annonce:empty {
  display: none;
}

.annonce {
  margin: 0 auto;
  max-width: 62rem;
  padding: calc(var(--pas) * 2) calc(var(--pas) * 5);
  font-size: var(--t-petit);
  color: var(--ink2);
}

/* Mode degrade : la base est injoignable, tout le reste fonctionne. */
.degrade {
  margin: 0;
  padding: calc(var(--pas) * 3) calc(var(--pas) * 5);
  background: var(--retenue-bg);
  color: var(--retenue);
  border-bottom: 2px solid var(--retenue);
  font-size: var(--t-petit);
}

/* Le pied reste en bas des pages courtes : une page de refus, breve par nature,
   laissait sinon son pied flotter au milieu de l'ecran. */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* width explicite : une marge auto sur l'axe transversal d'un conteneur flex
   annule l'etirement, et main prenait alors la largeur de son contenu — le texte
   se decalait d'une page a l'autre selon sa longueur. */
main {
  flex: 1 0 auto;
  width: 100%;
}