/* PoolCenter — Les portes, hors canvas.
 *
 * Réplique HTML de `PCDoorInk` / `PCDoorLayout` (lib/widgets/pc_door_layout.dart,
 * pc_door_eau.dart). Une seule feuille pour les quatre portes du pro —
 * /login, /inscription, /join, /nouveau-mot-de-passe — servies en HTML statique
 * pour sortir l'authentification du bundle wasm : boot instantané, inputs
 * NATIFS (autofill, trousseau, coller — ce que le canvas skwasm cassait).
 *
 * Le contrat d'encre est celui du Flutter, à la valeur près, et un test de
 * parité l'y tient (test/vitrine/portes_jetons_test.dart) :
 *   - fond   = dégradé primary500 -> primary600, UN cran (PCDoorInk.eau)
 *   - encre  = blanc, toujours, sur l'eau (PCDoorInk.onSurface)
 *   - champ  = blanc, encre neutral950 (PCDoorInk.fill / onField)
 *   - bouton = SOMBRE neutral900, jamais cyan (PCButtonVariant.ink)
 * Ne PAS retourner l'encre ni teindre le bouton : la porte a déjà fait
 * l'aller-retour (cf. l'en-tête de PCDoorInk).
 */

/* -- Polices (auto-hébergées, CSP font-src 'self') ------------------------- */
@font-face {
  font-family: "Gabarito";
  src: url("/vitrine/assets/fonts/gabarito-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/vitrine/assets/fonts/jakarta-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  font-style: normal;
}

/* -- Jetons de la porte ---------------------------------------------------- */
:root {
  /* L'eau : aplat plat primary600 depuis le 2026-09-04 — « un seul bleu ». */
  --pd-surface: #008ee7; /* primary600 — le bleu de marque, imprimé */
  --pd-deep: #008ee7; /* primary600 — l'eau sous le formulaire */

  --pd-ink: #ffffff; /* onSurface — l'encre sur l'eau, toujours blanche */
  --pd-ink-muted: #e0e3e7; /* onSurfaceMuted — mentions, labels, sorties */

  --pd-fill: #ffffff; /* fill — ce qu'on remplit est du papier */
  --pd-on-field: #0b0e12; /* onField — l'encre DANS le champ */
  --pd-field-hint: #697079; /* onFieldHint — l'indication, 5.01:1 sur blanc */
  --pd-field-border: rgba(255, 255, 255, 0.9); /* fieldBorder — filet blanc */

  --pd-btn: #14181e; /* PCButtonVariant.ink — l'action, sombre */
  --pd-btn-hover: #0b0e12;

  /* Plaques de refus/attente : opaques, sur le modèle de .form-status. */
  --pd-danger-bg: #fbdbdc;
  --pd-danger-fg: #a82226;
  --pd-ok-bg: #c8f2e3;
  --pd-ok-fg: #076b4d;

  --pd-radius-field: 16px;
  --pd-radius-full: 999px;
  --pd-col: 420px; /* kDoorColumn */
  --pd-seuil: 900px; /* kDoorSeuilEtroit — informatif */

  --pd-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* -- Fond et coquille ------------------------------------------------------ */
* {
  box-sizing: border-box;
}
/* `[hidden]` doit gagner sur les classes qui posent un `display` (`.pd-form`,
   `.pd-pending`, `.pd-invalide` sont en `flex`) : la règle UA `display:none`
   perd sinon en spécificité, et un bloc masqué (email pending, état invalide de
   /join) reste peint. */
[hidden] {
  display: none !important;
}
html,
body {
  margin: 0;
  min-height: 100dvh;
}
body.pd {
  /* Dégradé vertical, un seul du produit, borné à la porte. */
  background: linear-gradient(180deg, var(--pd-surface) 0%, var(--pd-deep)
    100%);
  color: var(--pd-ink);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* La grille : une colonne. Au-delà du seuil, la colonne prend la moitié
   gauche, l'eau la moitié droite — sans texte ni cible (ExcludeSemantics). */
.pd-grille {
  display: flex;
  min-height: 100dvh;
}
.pd-grille__col {
  flex: 1 1 100%;
  display: flex;
  /* Conteneur scrollable + `margin:auto` sur la colonne : centré quand ça
     tient, défilable depuis le haut quand le formulaire dépasse (viewport
     court, très grand texte). `align-items:center` seul rognerait le haut,
     inatteignable — c'est SingleChildScrollView côté Flutter. */
  overflow-y: auto;
  /* Zone sûre iOS (encoche, indicateur d'accueil) — l'équivalent de SafeArea. */
  padding: max(24px, env(safe-area-inset-top)) max(20px,
    env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}
.pd-grille__eau {
  display: none;
}
@media (min-width: 900px) {
  .pd-grille {
    position: relative;
    height: 100dvh;
    isolation: isolate;
  }
  .pd-grille__col {
    position: absolute;
    z-index: 1;
    /* Posé sur le gazon de la photo, jamais sur l'eau : même recadrage
       `cover` (1774 × 887) et mêmes repères que `pc_door_eau.dart` —
       gazon centré à x = 700, margelle gauche à x = 1102. */
    --pd-e: max(100vw / 1774, 100dvh / 887);
    --pd-dx: calc((100vw - 1774 * var(--pd-e)) / 2);
    --pd-l: clamp(360px, 32vw, 480px);
    /* Le panneau tient à son contenu et se centre, comme il tient à sa
       largeur : étiré de 24 px à 24 px il faisait un mur bleu sur la moitié
       de l'écran. Bornée à la fenêtre, la colonne défile au-delà. */
    top: 50%;
    translate: 0 -50%;
    left: clamp(
      24px,
      calc(var(--pd-dx) + 700 * var(--pd-e) - var(--pd-l) / 2),
      max(24px, calc(var(--pd-dx) + 1102 * var(--pd-e) - 24px - var(--pd-l)))
    );
    width: var(--pd-l);
    max-height: calc(100dvh - 48px);
    box-sizing: border-box;
    padding: 32px;
    border-radius: 28px; /* AppRadius.brXxl : panneau, jamais le jardin. */
    background: var(--pd-surface);
  }
  .pd-grille__eau {
    display: block;
    position: absolute;
    inset: 0;
  }
  #pd-eau {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: url("/pc_eau_jardin_panorama.webp") center / cover no-repeat;
  }
  #pd-eau > * {
    position: absolute;
    inset: 0;
  }
}

/* La colonne : 420 px, contenu calé à gauche, bloc centré par margin auto. */
.pd-col {
  width: 100%;
  max-width: var(--pd-col);
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* -- Tête de colonne ------------------------------------------------------- */
.pd-marque {
  font-family: "Gabarito", "Plus Jakarta Sans", sans-serif;
  font-weight: 800;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--pd-ink);
  margin: 0;
}
.pd-titre {
  font-family: "Gabarito", "Plus Jakarta Sans", sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 1.35rem + 2.6vw, 3.25rem); /* displaySm -> displayLg */
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--pd-ink);
  text-wrap: balance;
  margin: 24px 0 0;
}
@media (min-width: 900px) {
  .pd-titre {
    margin-top: 40px;
  }
}

/* -- Formulaire ------------------------------------------------------------ */
.pd-form {
  width: 100%;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 900px) {
  .pd-form {
    margin-top: 32px;
  }
}

.pd-champ {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pd-champ__tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.pd-label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--pd-ink);
}
.pd-input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  font-family: inherit;
  font-size: 16px; /* 16px : pas de zoom iOS au focus */
  color: var(--pd-on-field);
  background: var(--pd-fill);
  border: 1px solid var(--pd-field-border);
  border-radius: var(--pd-radius-field);
  transition: box-shadow 0.15s var(--pd-ease);
  appearance: none;
}
.pd-input::placeholder {
  color: var(--pd-field-hint);
}
.pd-input:focus-visible {
  outline: none;
  border-color: var(--pd-fill);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55);
}
/* Un code (clé bêta, SIRET, PIN) : pas d'autocorrection, chasse fixe.
   Équivalent HTML de PCTextField(code: true). */
.pd-input--code {
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

/* Le mot de passe et son œil. */
.pd-mdp {
  position: relative;
}
.pd-mdp .pd-input {
  padding-right: 48px;
}
.pd-oeil {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--pd-field-hint);
  cursor: pointer;
  border-radius: 12px;
}
.pd-oeil:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55);
}
.pd-oeil svg {
  width: 20px;
  height: 20px;
}

.pd-aide {
  font-size: 13px;
  color: var(--pd-ink-muted);
}
/* Message d'erreur sous un champ (règle du mot de passe, concordance, clé
   refusée) : blanc, plus appuyé que l'aide — la plaque « danger » reste pour le
   canal serveur. Vide par défaut, il ne réserve pas d'espace. */
.pd-erreur {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--pd-ink);
  white-space: pre-line;
}
.pd-erreur:empty {
  display: none;
}

/* Badge « Bêta privée — gratuit » : une plaque calme, sur le modèle du .pd-ok. */
.pd-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: var(--pd-radius-full);
  background: var(--pd-ok-bg);
  color: var(--pd-ok-fg);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.pd-badge svg {
  width: 14px;
  height: 14px;
}

/* Champ à préfixe fixe (clé bêta : « POOL- » est du décor, jamais tapé). */
.pd-code {
  position: relative;
}
.pd-code__prefixe {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--pd-field-hint);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.pd-code .pd-input {
  padding-left: 66px;
}

/* Case à cocher engageante (CGU, RGPD) — cible 44 px, encre sombre au coche. */
.pd-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.pd-check input {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 11px 0 0;
  accent-color: var(--pd-btn);
  cursor: pointer;
}
.pd-check__txt {
  padding-top: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--pd-ink-muted);
}
.pd-check__txt a {
  color: var(--pd-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Deux champs de front (prénom + nom), empilés sous 380 px. */
.pd-duo {
  display: flex;
  gap: 12px;
}
.pd-duo > .pd-champ {
  flex: 1 1 0;
  min-width: 0;
}
@media (max-width: 379px) {
  .pd-duo {
    flex-direction: column;
  }
}

/* Sous-titre « Invitation de … » (/join) : sur l'encre, discret. */
.pd-de {
  margin: 12px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--pd-ink-muted);
}

/* État « lien invalide » (/join) : un glyphe, un mot, une sortie. */
.pd-invalide {
  width: 100%;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.pd-invalide__msg {
  font-size: 15px;
  line-height: 1.5;
  color: var(--pd-ink);
  white-space: pre-line;
}

/* Bloc « vérifiez votre boîte mail » (/inscription, repli confirmation). */
.pd-pending {
  width: 100%;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.pd-pending svg {
  width: 40px;
  height: 40px;
  color: var(--pd-ink);
}
.pd-pending__corps {
  font-size: 15px;
  line-height: 1.5;
  color: var(--pd-ink-muted);
}

/* Note sous le bloc Google (« la clé bêta reste nécessaire »). */
.pd-note {
  width: 100%;
  margin-top: -4px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--pd-ink-muted);
}

/* -- Boutons --------------------------------------------------------------- */
.pd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 56px;
  padding: 0 24px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--pd-radius-full);
  border: 0;
  cursor: pointer;
  transition:
    transform 0.12s var(--pd-ease),
    box-shadow 0.15s var(--pd-ease),
    background-color 0.15s var(--pd-ease);
}
.pd-btn:active {
  transform: translateY(1px);
}
.pd-btn[disabled] {
  opacity: 0.6;
  cursor: default;
  pointer-events: none;
}
.pd-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.7);
}

/* L'action : sombre, l'ombre la sépare de l'eau (elevation.sm). */
.pd-btn--ink {
  background: var(--pd-btn);
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(11, 14, 18, 0.28);
}
.pd-btn--ink:hover {
  background: var(--pd-btn-hover);
}

/* Le papier : Google, secondaire. Blanc, encre sombre, filet. */
.pd-btn--paper {
  height: 52px;
  background: var(--pd-fill);
  color: var(--pd-on-field);
  border: 1px solid var(--pd-field-border);
  box-shadow: 0 4px 14px rgba(11, 14, 18, 0.16);
}
.pd-btn--paper:hover {
  background: #f5f6f8;
}
.pd-btn--paper .pd-g {
  width: 18px;
  height: 18px;
}

/* Le fantôme : sortie, sur l'eau, encre blanche. */
.pd-btn--ghost {
  width: auto;
  height: 48px;
  padding: 0 16px;
  background: transparent;
  color: var(--pd-ink);
  font-weight: 600;
}
.pd-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
}

.pd-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: pd-spin 0.7s linear infinite;
}
.pd-btn--paper .pd-spinner {
  border-color: rgba(11, 14, 18, 0.25);
  border-top-color: #0b0e12;
}
@keyframes pd-spin {
  to {
    transform: rotate(360deg);
  }
}

/* -- OAuth : filet « ou » -------------------------------------------------- */
.pd-ou {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--pd-ink-muted);
  font-size: 13px;
  margin: 4px 0;
}
.pd-ou::before,
.pd-ou::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.28);
}

/* -- Sortie latérale (PCDoorSortie) ---------------------------------------- */
.pd-sortie {
  width: 100%;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}
.pd-sortie__q {
  font-size: 13px;
  color: var(--pd-ink-muted);
}

/* -- Bannière (deux canaux d'erreur : le serveur passe ici) ---------------- */
.pd-alerte {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--pd-radius-field);
  font-size: 14px;
  line-height: 1.4;
}
.pd-alerte svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}
.pd-alerte--danger {
  background: var(--pd-danger-bg);
  color: var(--pd-danger-fg);
}
.pd-alerte--ok {
  background: var(--pd-ok-bg);
  color: var(--pd-ok-fg);
}
.pd-alerte[hidden] {
  display: none;
}

/* -- Mentions de pied (PCDoorMentions) ------------------------------------- */
.pd-pied {
  width: 100%;
  margin-top: 24px;
  text-align: center;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--pd-ink-muted);
}
.pd-pied a {
  color: var(--pd-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pd-pied a:hover {
  text-decoration-thickness: 2px;
}

/* Lien inline (mot de passe oublié, retour). */
.pd-lien {
  background: transparent;
  border: 0;
  padding: 4px 0;
  font-family: inherit;
  font-size: 13px;
  color: var(--pd-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  min-height: 44px;
}
.pd-lien:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);
  border-radius: 6px;
}

/* La classe de saisie visuellement cachée mais lue (labels invisibles). */
/* -- Arrivée en cascade (PCSettleIn) --------------------------------------- */
/* Rien ne bouge à l'ouverture : seule l'encre arrive. */
.pd-settle {
  opacity: 0;
  transform: translateY(12px);
  animation: pd-settle 0.5s var(--pd-ease) forwards;
  animation-delay: var(--pd-delay, 0ms);
}
@keyframes pd-settle {
  to {
    opacity: 1;
    transform: none;
  }
}

/* Mouvement réduit : la porte est complète et immobile. */
@media (prefers-reduced-motion: reduce) {
  .pd-settle {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .pd-spinner {
    animation-duration: 1.4s;
  }
}

/* -- Dialogue « mot de passe oublié » -------------------------------------- */
/* Un <dialog> natif flotte au-dessus de l'eau : c'est une carte de PAPIER,
   encre sombre — le seul endroit de la porte où l'on quitte le monde d'encre,
   parce qu'un overlay n'a pas de fond bleu derrière lui. */
.pd-dialog {
  width: min(92vw, 420px);
  padding: 24px;
  border: 0;
  border-radius: 20px;
  background: #ffffff;
  color: #14181e;
  box-shadow: 0 24px 60px rgba(11, 14, 18, 0.35);
}
.pd-dialog::backdrop {
  background: rgba(11, 14, 18, 0.5);
}
.pd-dialog[open] {
  animation: pd-dialog-in 0.2s var(--pd-ease);
}
@keyframes pd-dialog-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
.pd-dialog__titre {
  font-family: "Gabarito", "Plus Jakarta Sans", sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.pd-dialog__corps {
  font-size: 14px;
  line-height: 1.5;
  color: #4b525c;
  margin: 0 0 16px;
}
.pd-dialog__label {
  color: #14181e;
}
/* Dans le dialogue clair, le champ blanc-sur-blanc disparaîtrait : il reprend
   la grammaire du champ vitrine — fond sunken, filet neutre, encre sombre. */
.pd-input--dark {
  background: #f5f6f8;
  border-color: #b7bdc6;
  color: #14181e;
}
.pd-input--dark:focus-visible {
  border-color: #0070c1;
  box-shadow: 0 0 0 3px rgba(0, 112, 193, 0.25);
}
.pd-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}
.pd-dialog__annuler,
.pd-dialog__envoyer {
  height: 44px;
  padding: 0 20px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
}
.pd-dialog__annuler {
  background: transparent;
  border: 1px solid #e0e3e7;
  color: #14181e;
}
.pd-dialog__annuler:hover {
  background: #f5f6f8;
}
.pd-dialog__envoyer {
  background: #14181e;
  border: 0;
  color: #ffffff;
}
.pd-dialog__envoyer:hover {
  background: #0b0e12;
}
.pd-dialog__annuler:focus-visible,
.pd-dialog__envoyer:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 112, 193, 0.4);
}