/*
 * Papillote — base : remise à zéro, typographie, mise en page.
 * Uniquement des jetons --pa-* ; classes préfixées pa-.
 */

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

/* L'attribut hidden gagne toujours, même sur un élément mis en grille ou en flex */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--pa-paper);
  color: var(--pa-ink);
  font-family: var(--pa-font-text);
  font-size: var(--pa-text-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

.pa-icon,
.pa-logo,
.pa-candy,
.pa-picto {
  flex: 0 0 auto;
}

/* Avant leur dessin (js/app/icons-first.js), les icônes réservent leur place : rien ne bouge quand elles arrivent.
   Tailles par défaut de js/ui/icons.js : 20 px pour une icône, 40 px pour le logo, 48 px pour un pictogramme. */
[data-icon],
[data-logo],
[data-picto] {
  display: inline-block;
  flex: 0 0 auto;
  vertical-align: middle;
}

[data-icon] { width: 20px; height: 20px; }
[data-logo] { width: 40px; height: 40px; }
[data-picto] { width: 48px; height: 48px; }
:is([data-icon], [data-logo], [data-picto])[data-size="15"] { width: 15px; height: 15px; }
:is([data-icon], [data-logo], [data-picto])[data-size="16"] { width: 16px; height: 16px; }
:is([data-icon], [data-logo], [data-picto])[data-size="18"] { width: 18px; height: 18px; }
:is([data-icon], [data-logo], [data-picto])[data-size="20"] { width: 20px; height: 20px; }
:is([data-icon], [data-logo], [data-picto])[data-size="22"] { width: 22px; height: 22px; }
:is([data-icon], [data-logo], [data-picto])[data-size="24"] { width: 24px; height: 24px; }
:is([data-icon], [data-logo], [data-picto])[data-size="26"] { width: 26px; height: 26px; }
:is([data-icon], [data-logo], [data-picto])[data-size="28"] { width: 28px; height: 28px; }
:is([data-icon], [data-logo], [data-picto])[data-size="30"] { width: 30px; height: 30px; }
:is([data-icon], [data-logo], [data-picto])[data-size="32"] { width: 32px; height: 32px; }
:is([data-icon], [data-logo], [data-picto])[data-size="34"] { width: 34px; height: 34px; }
:is([data-icon], [data-logo], [data-picto])[data-size="40"] { width: 40px; height: 40px; }
:is([data-icon], [data-logo], [data-picto])[data-size="42"] { width: 42px; height: 42px; }
:is([data-icon], [data-logo], [data-picto])[data-size="44"] { width: 44px; height: 44px; }
:is([data-icon], [data-logo], [data-picto])[data-size="48"] { width: 48px; height: 48px; }
:is([data-icon], [data-logo], [data-picto])[data-size="72"] { width: 72px; height: 72px; }

/* Avant le démarrage (js/app/boot.js) : une autre page que l'accueil, ou une autre langue que le français, reste
   invisible le temps d'être prête, plutôt que de montrer l'accueil ou du français. Sans JavaScript, tout apparaît
   au bout de trois secondes. */
.pa-boot-route .pa-main,
.pa-boot-route .pa-footer,
.pa-boot-lang body {
  visibility: hidden;
  animation: pa-boot-reveal 0s 3s forwards;
}

@keyframes pa-boot-reveal {
  to { visibility: visible; }
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--pa-font-title);
  font-weight: var(--pa-title-weight);
  font-variation-settings: var(--pa-title-variation);
  letter-spacing: var(--pa-title-tracking);
  line-height: 1.12;
  text-wrap: balance;
}

p,
li,
dd,
figcaption {
  text-wrap: pretty;
}

p {
  margin: 0;
}

/* Titres qui reçoivent le focus à l'arrivée sur une page (tabindex="-1") : rien d'interactif, donc pas de cadre. */
h1[tabindex="-1"]:focus,
h2[tabindex="-1"]:focus {
  outline: none;
}

a {
  color: var(--pa-lagoon);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--pa-accent);
}

:focus-visible {
  outline: 3px solid var(--pa-focus);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection {
  background: var(--pa-accent-soft);
  color: var(--pa-ink);
}

.pa-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pa-skip-link {
  position: absolute;
  left: var(--pa-space-4);
  top: -100px;
  z-index: 100;
  padding: var(--pa-space-2) var(--pa-space-4);
  background: var(--pa-surface);
  color: var(--pa-ink);
  border-radius: var(--pa-radius-sm);
  box-shadow: var(--pa-shadow-2);
}

.pa-skip-link:focus {
  top: var(--pa-space-4);
}

/* Mise en page */
.pa-container {
  width: min(100% - 2 * var(--pa-space-4), var(--pa-content-width));
  margin-inline: auto;
}

@media (min-width: 600px) {
  .pa-container {
    width: min(100% - 2 * var(--pa-space-8), var(--pa-content-width));
  }
}

.pa-main {
  flex: 1 0 auto;
  overflow-x: clip; /* les halos décoratifs ne doivent jamais faire défiler la page de côté */
}

.pa-stack {
  display: grid;
  gap: var(--pa-space-4);
}

.pa-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pa-space-3);
}

/* Titres de section */
.pa-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--pa-space-2);
  font-size: var(--pa-text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pa-accent);
}

.pa-section-title {
  font-size: var(--pa-text-3xl);
}

.pa-section-lead {
  max-width: 42rem;
  font-size: var(--pa-text-lg);
  color: var(--pa-ink-soft);
  /* Deux ou trois lignes de longueur égale, sans petit mot laissé seul en bout de ligne. */
  text-wrap: balance;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

.pa-cluster--center {
  justify-content: center;
}