/* Page d'accueil publique. Les couleurs et la base viennent de admin.css. */

.home {
  --mist: #c9d2de;
  --ochre-ink: #96611a;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  /* Gouttière : 16 px au minimum, contenu limité à 960 px. */
  --gutter: max(16px, calc(50% - 480px));
  font-size: 1.0625rem;
  line-height: 1.55;
}

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

.home h2 {
  max-width: 20em;
  margin: 0 0 36px;
  font-size: clamp(1.5rem, 3.2vw, 2.125rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.home h3 { margin: 0 0 8px; color: var(--navy); font-size: 1.2rem; line-height: 1.25; }

.home code {
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(26, 46, 74, 0.08);
  font-family: var(--mono);
  font-size: 0.92em;
  overflow-wrap: anywhere;
}

/* Haut de page : promesse, adresse d'exemple, connexion */

.hero {
  padding: 20px var(--gutter) 88px;
  border-bottom: 4px solid var(--ochre);
  background: var(--navy);
  color: #fff;
  text-align: center;
}

.hero .brand { margin-bottom: clamp(40px, 9vh, 96px); text-align: left; }

.hero .flash { margin: -24px 0 32px; color: var(--ink); text-align: left; }

.hero h1 {
  max-width: 15em;
  margin: 0 auto;
  font-size: clamp(2.25rem, 6vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.lead {
  max-width: 36em;
  margin: 22px auto 0;
  color: var(--mist);
  font-size: 1.125rem;
  text-wrap: pretty;
}

.address {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(100%, 40ch);
  margin: 44px auto 0;
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--muted);
  font-family: var(--mono);
  font-size: clamp(0.9375rem, 4.2vw, 1.5rem);
  line-height: 1.3;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
}

.lock { flex: none; }

.slug {
  display: inline-block;
  width: 0;
  overflow: hidden;
  vertical-align: bottom;
  color: var(--navy);
  font-weight: 700;
}

/* Sans animation, seul le dernier exemple est affiché. */
.slug:nth-child(3) { width: auto; }

.caret {
  display: inline-block;
  width: 2px;
  height: 1.15em;
  margin-left: 2px;
  background: var(--ochre);
  vertical-align: bottom;
}

/* Une seule séquence au chargement : deux exemples tapés puis effacés, le
   troisième reste. steps() et --n valent le nombre de caractères de chaque
   exemple écrit dans home.html. */
@media (prefers-reduced-motion: no-preference) {
  .slug:nth-child(1) { --n: 11; animation: slug-pass 2.6s steps(11) 0.6s; }
  .slug:nth-child(2) { --n: 4; animation: slug-pass 2s steps(4) 3.2s; }
  .slug:nth-child(3) { --n: 12; animation: slug-stay 0.9s steps(12) 5.2s backwards; }
  .caret { animation: caret 1s steps(1) 7; }
}

@keyframes slug-pass {
  0% { width: 0; }
  25%, 80% { width: calc(var(--n) * 1ch); }
  100% { width: 0; }
}

@keyframes slug-stay {
  from { width: 0; }
  to { width: calc(var(--n) * 1ch); }
}

@keyframes caret {
  50% { opacity: 0; }
}

.signin { margin-top: 28px; }

.signin-note {
  max-width: 30em;
  margin: 16px auto 0;
  color: var(--mist);
  font-size: 0.9rem;
}

/* Bouton Google : fond blanc, filet et texte aux teintes demandées par Google. */
.google {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 12px 28px;
  border: 1px solid #747775;
  border-radius: 8px;
  background: #fff;
  color: #1f1f1f;
  font-size: 1.0625rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.google:hover { background: #f0f3f8; color: #1f1f1f; }
.google:active { box-shadow: none; }
.google:focus-visible { outline-offset: 4px; }
.google img { flex: none; }

/* Sections */

.band { padding: 80px var(--gutter); }

.band-alt {
  border-block: 1px solid var(--line);
  background: var(--paper);
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  padding-top: 18px;
  border-top: 3px solid var(--navy);
  counter-increment: step;
}

.steps li::before {
  content: counter(step);
  display: block;
  margin-bottom: 14px;
  color: var(--ochre-ink);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
}

.steps p { margin: 0; }

.cares { margin: 0; }

.cares > div {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 6px 40px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}

.cares dt { color: var(--navy); font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
.cares dd { margin: 0; }

/* Bas de page : rappel de la connexion */

.closing {
  padding: 80px var(--gutter) 36px;
  background: var(--navy);
  color: #fff;
  text-align: center;
}

.closing h2 { margin: 0 auto 32px; color: #fff; }

.closing-note { margin: 64px 0 0; color: var(--mist); font-size: 0.9rem; }
.closing-note a { color: #fff; }
.closing-note a:hover { color: #f0c98a; }

@media (max-width: 720px) {
  .hero { padding-bottom: 64px; }
  .address { gap: 8px; padding: 12px 16px; }
  .band { padding-block: 56px; }
  .steps { grid-template-columns: 1fr; gap: 28px; }
  .cares > div { grid-template-columns: 1fr; }
}