/* Page d'accès de la racine du domaine standard, aux couleurs de Relaytour. */

/* Baloo 2 ne sert que le logotype « Relaytour » (docs/design-system.md du dépôt public).
   La police vient de site/polices/ du dépôt public, sous licence OFL. */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/polices/baloo-2-latin-600-normal.woff2') format('woff2');
}

:root {
  --rt-encre: #1b2730;
  --rt-encre-douce: rgba(27, 39, 48, 0.72);
  --rt-primaire: #1e5a63;
  --rt-primaire-clair: #dceaeb;
  --rt-accent-texte: #7e3a24;
  --rt-erreur: #b0283f;
  --rt-erreur-clair: #f9e1e5;
  --rt-sol-1: #ffffff;
  --rt-sol-2: #f4f6f7;
  --rt-trait: rgba(27, 39, 48, 0.16);
  --rayon: 16px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 16px;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  line-height: 1.6;
  color: var(--rt-encre);
  background: var(--rt-sol-2);
}

main {
  max-width: 34rem;
  margin: 10vh auto 0;
  padding: 32px 24px;
  background: var(--rt-sol-1);
  border-radius: var(--rayon);
  box-shadow: 0 18px 40px -18px rgba(27, 39, 48, 0.22);
}

/* Marque reprise de relaytour.com : pictogramme, logotype, puis « Cloud » en gris.
   Baloo 2 et la police du texte n'ont pas les mêmes métriques : les deux mots s'alignent
   sur leur ligne de base, et le pictogramme se centre sur la hauteur de la marque. */
.marque {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 24px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--rt-encre);
}

.marque img {
  align-self: center;
}

/* Le logotype : Baloo 2 SemiBold, « Relay » en encre et « tour » en accent de texte. */
.logotype {
  font-family: 'Baloo 2', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.logotype > span {
  color: var(--rt-accent-texte);
}

.marque-suite {
  color: var(--rt-encre-douce);
  font-weight: 400;
}

h1 {
  margin: 0 0 8px;
  font-size: 1.5rem;
  line-height: 1.3;
}

p {
  margin: 0 0 16px;
}

.erreur {
  padding: 12px 16px;
  border-radius: 12px;
  color: var(--rt-erreur);
  background: var(--rt-erreur-clair);
}

label {
  display: block;
  margin: 24px 0 8px;
  font-weight: 600;
}

.champ {
  display: flex;
  align-items: center;
  border: 1px solid var(--rt-trait);
  border-radius: 12px;
  background: var(--rt-sol-1);
}

.champ:focus-within {
  outline: 2px solid var(--rt-primaire);
  outline-offset: 1px;
}

.champ input {
  flex: 1;
  min-width: 0;
  padding: 12px 0 12px 14px;
  font: inherit;
  color: inherit;
  border: 0;
  background: transparent;
}

.champ input:focus {
  outline: none;
}

.champ span {
  padding: 12px 14px 12px 2px;
  color: var(--rt-encre-douce);
}

button {
  width: 100%;
  margin: 16px 0 24px;
  padding: 12px 16px;
  font: inherit;
  font-weight: 600;
  color: var(--rt-sol-1);
  border: 0;
  border-radius: 12px;
  background: var(--rt-primaire);
  cursor: pointer;
}

button:focus-visible {
  outline: 2px solid var(--rt-encre);
  outline-offset: 2px;
}

details {
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--rt-primaire-clair);
}

summary {
  font-weight: 600;
  cursor: pointer;
}

details p {
  margin: 8px 0 0;
}

a {
  color: var(--rt-primaire);
}

footer {
  max-width: 34rem;
  margin: 24px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  color: var(--rt-encre-douce);
}