/* ──────────────────────────────────────────────────────────────────────────
   reset.css — primitives communes aux deux sites de demonstration.

   /!\ CE FICHIER NE CONTIENT AUCUNE IDENTITE : aucune couleur de marque,
       aucune famille de police, aucun rayon. Tout cela vit dans le site.css
       de chaque site. Si un token de marque apparait ici, c'est un bug.
   ────────────────────────────────────────────────────────────────────────── */

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

/* L'attribut `hidden` doit l'emporter sur toute règle d'auteur.
   La feuille du navigateur pose bien `[hidden] { display: none }`, mais elle a
   la priorité la plus faible : n'importe quelle règle d'auteur qui fixe
   `display` l'annule. C'est ce qui se passait ici — `.form { display: grid }`
   rendait `form.hidden = true` sans aucun effet, si bien que le formulaire
   rempli restait affiché sous le panneau « C'est envoyé », et que l'étape
   « Vos coordonnées » du module de rendez-vous s'affichait avant même d'avoir
   choisi un créneau. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  min-height: 100vh;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }

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

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

button { cursor: pointer; border: 0; background: none; }

table { border-collapse: collapse; width: 100%; }

a { color: inherit; }

/* Accessibilite ─────────────────────────────────────────────────────────── */

.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;
}

/* Positionnement seul : les couleurs viennent du site.css via currentColor. */
.skip-link {
  position: absolute; left: 0; top: 0;
  transform: translateY(-120%);
  padding: 0.75rem 1.25rem;
  z-index: 10000;
  text-decoration: none;
}
.skip-link:focus-visible { transform: translateY(0); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

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

/* Piège à robots des formulaires ────────────────────────────────────────── */
/* Aucune identité de marque : c'est une primitive de positionnement, au même
   titre que .sr-only, et les deux sites en avaient une copie identique. */

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Bandeau de demonstration ──────────────────────────────────────────────── */
/* Volontairement HORS des deux chartes : gris neutre, typo systeme, hauteur de
   barre d'outils. Le cerveau le classe comme chrome de navigateur, pas comme un
   element du design du commercant. */

:root { --demo-bar-h: 34px; }

.demo-bar {
  position: fixed; inset: 0 0 auto 0;
  height: var(--demo-bar-h);
  display: flex; align-items: center; justify-content: center;
  gap: 0.45em;
  padding: 0 0.75rem;
  background: #141414;
  color: #e8e8e8;
  font: 400 12px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0.01em;
  text-align: center;
  z-index: 9999;
}
.demo-bar b { font-weight: 600; }
.demo-bar a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.demo-bar a:hover { text-decoration-thickness: 2px; }

body { padding-top: var(--demo-bar-h); }

@media (max-width: 24rem) {
  .demo-bar { font-size: 11px; }
}