/* Écrans de pré-connexion BRO (Connexion V3, 18/09) — connexion, lien d'accès, activation,
   lien utilisé/expiré. Feuille dédiée, isolée de style.css (partagé par le reste de l'app) :
   ces écrans sont volontairement sombres, seuls hors application (voir le raisonnement dans
   claude/bro-poc-jmh-etat.md / Prompt design - Pré-connexion.md). Valeurs copiées telles
   quelles depuis "Login V3 - source autonome.html", jamais redevinées.
*/

/* Les 8 px de marge que tout navigateur pose sur <body>. Tant que la page demandait une
   hauteur MINIMALE, ils ne se voyaient pas ; depuis que la porte d'entrée tient dans
   100dvh, ils la font dépasser de 16 px — assez pour une barre de défilement sur un écran
   où tout tenait. La maquette pose la même remise à zéro. */
html, body { margin: 0; padding: 0; }

.pc-page {
  min-height: 100vh;
  padding: clamp(6px, 1vh, 14px);
  box-sizing: border-box;
  background: linear-gradient(180deg, #eae8e2 0%, #ddd9d1 100%);
  font-family: "DM Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* Spécificité volontairement basse (élément seul) : c'est un défaut, pas une règle — chaque
   composant lien/bouton ci-dessous (pc-submit, pc-btn-msoutline, pc-provider-btn, etc.) porte
   sa propre couleur et doit gagner sur ce défaut sans avoir à se qualifier avec `a.`. */
a { color: #e2f163; text-decoration: none; }
a:hover { color: #ffffff; }
.pc-page input { font-family: "DM Sans", system-ui, sans-serif; }
.pc-page input:focus { outline: none; }
.pc-page input::placeholder { color: #8d9086; }
.pc-page ::selection { background: #e2f163; color: #14150f; }

@keyframes broFlyIn { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes broFlyRow { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── LE ZÉRO SCROLL, ET SEULEMENT SUR LA PORTE D'ENTRÉE ─────────────────────────────────
   `--fit` n'est posé que sur la connexion et sur l'écran « ce n'est pas pour vous ». Le
   tunnel d'inscription partage cette même coque (voir l'en-tête d'inscription.css) mais il
   est long par nature — l'étape 3 compare trois formules sur plus d'un écran. L'enfermer
   dans 100dvh transformerait le défilement de la page en défilement d'une carte à coins
   arrondis : ce n'est pas le même objet. Claude Design le dit lui-même (MESSAGE 8, §5) :
   l'inscription n'a pas reçu ce traitement.

   `dvh` et non `vh` : sur mobile, `vh` compte la barre d'adresse comme si elle n'existait
   pas, et la page déborderait de sa propre hauteur au chargement.

   Sur la coque, `overflow: auto` et non `hidden` : c'est le troisième mécanisme du zéro
   scroll, celui qui s'applique quand les deux autres ont rendu les armes. Sous le plancher
   de lisibilité (0,85), la mise à l'échelle s'arrête et le panneau défile — plutôt que de
   rendre du texte à 11 px. C'est aussi ce qui sauve la page quand le JS ne tourne pas :
   sans fit(), l'échelle reste à 1 et les états les plus hauts restent atteignables. */
.pc-page--fit { height: 100dvh; min-height: 0; overflow: hidden; }
.pc-page--fit .pc-shell { height: 100%; min-height: 0; overflow: auto; box-sizing: border-box; }

.pc-shell {
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - 28px);
  border-radius: 26px;
  background: radial-gradient(62% 40% at 50% -4%, rgba(226, 241, 99, 0.18), rgba(20, 20, 20, 0) 72%), #141414;
  box-shadow: 0 18px 36px -18px rgba(20, 21, 15, 0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2.4vh, 36px);
  padding: clamp(14px, 3vh, 52px) clamp(16px, 3vw, 40px);
}
.pc-dots {
  position: absolute;
  inset: 0 0 auto;
  height: 320px;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 15px 15px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 78%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 78%);
  pointer-events: none;
}
/* La colonne que fit() met à l'échelle : `zoom` lui est posé en ligne par le script du bas de
   views/preconnexion.ejs. Rien ici ne doit fixer `zoom`, sans quoi la mesure et l'application
   se contrediraient. */
.pc-col {
  position: relative;
  width: 100%;
  max-width: 452px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2.2vh, 24px);
}

/* La marque. Ce carré portait le logo de l'organisation cliente ; il n'a plus lieu
   d'être avant l'authentification (voir le commentaire dans views/preconnexion.ejs). */
.pc-brand { display: flex; flex-direction: column; align-items: center; gap: 9px; }
/* MESSAGE 62 §3 : le logo remplace le carré citron (clamp(52px, 8.6vh, 88px)). Plus bas
   que le carré : la colonne ne gagne rien en hauteur, le zéro défilement tient. Version
   négative, le fond de la colonne est noir (guide du logo §1). */
.pc-logo { display: block; align-self: center; flex: none; height: clamp(28px, 4.4vh, 40px); width: auto; }

/* Rythme vertical élastique — le premier mécanisme du zéro scroll. Chaque espacement et
   chaque hauteur porte une borne en vh : sur un écran court, tout se resserre au lieu de
   pousser le contenu dehors. Les bornes basses sont celles de la maquette, à une exception
   près, documentée plus bas sur les cibles tactiles. */
.pc-panel { width: 100%; display: flex; flex-direction: column; gap: clamp(8px, 2.2vh, 24px); animation: broFlyIn 200ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.pc-head { display: flex; flex-direction: column; align-items: center; gap: clamp(6px, 1.4vh, 10px); }
.pc-h1 {
  margin: 0; font-family: Poppins, sans-serif; font-weight: 700; font-size: clamp(27px, 3.6vh, 40px);
  line-height: 1.02; letter-spacing: -0.035em; color: #ffffff; text-align: center; text-wrap: pretty;
}
.pc-h1--sm { font-size: clamp(28px, 3.2vw, 38px); line-height: 1.04; }
.pc-sub { margin: 0; font-size: clamp(14px, 2.5vh, 15px); line-height: 1.45; color: #cfd2c6; text-align: center; max-width: 36ch; text-wrap: pretty; }

.pc-alert {
  display: flex; gap: 11px; align-items: flex-start; background: #232323; border-radius: 18px;
  padding: 14px; animation: broFlyRow 220ms ease-out both;
}
.pc-alert .material-symbols-rounded { font-size: 21px; line-height: 1.2; color: #e2f163; flex-shrink: 0; }
.pc-alert-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pc-alert-body--gap6 { gap: 6px; }
.pc-alert-title { font-family: Poppins, sans-serif; font-weight: 500; font-size: 15px; color: #ffffff; }
.pc-alert-text { font-size: 14px; line-height: 1.45; color: #cfd2c6; }
.pc-alert-text strong { font-weight: 500; color: #ffffff; }
.pc-alert-link {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  padding: 0 12px; margin-left: -12px; border-radius: 999px; font-size: 14px; font-weight: 500;
  border: none; background: none; cursor: pointer; color: #e2f163;
}
.pc-alert-link:hover { background: #2e2f27; color: #ffffff; }
.pc-alert-link .material-symbols-rounded { font-size: 18px; color: inherit; }

.pc-alert--ms { background: #e2f163; flex-direction: column; gap: 10px; padding: 16px; }
.pc-alert--ms .pc-alert-row { display: flex; gap: 10px; align-items: flex-start; }
.pc-alert--ms .material-symbols-rounded { color: #14150f; }
.pc-alert--ms .pc-alert-title { color: #14150f; font-weight: 600; }
.pc-alert--ms .pc-alert-text { color: #14150f; }
.pc-alert--ms .pc-alert-text strong { color: #14150f; font-weight: 600; }
.pc-alert--ms-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pc-btn-dark {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px;
  padding: 0 16px; border-radius: 999px; background: #14150f; color: #e2f163; border: none;
  font-family: Poppins, sans-serif; font-weight: 500; font-size: 14px; cursor: pointer;
}
.pc-btn-dark:hover { background: #2e2f27; }
.pc-btn-msoutline {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px;
  border: 1px solid #14150f; border-radius: 999px; background: transparent; cursor: pointer;
  font-family: Poppins, sans-serif; font-weight: 500; font-size: 14px; color: #14150f;
}
.pc-btn-msoutline:hover { background: rgba(20, 21, 15, 0.08); }

.pc-form { display: flex; flex-direction: column; gap: clamp(10px, 1.7vh, 14px); }
.pc-label { display: flex; flex-direction: column; gap: 7px; }
.pc-label > span, .pc-label > label { font-family: Poppins, sans-serif; font-weight: 500; font-size: 13px; color: #cfd2c6; }
.pc-input {
  min-height: clamp(48px, 6.2vh, 54px); border: 1px solid #2e2f27; border-radius: 16px; background: #1c1c1c;
  padding: 0 16px; font-size: 15px; color: #ffffff; box-sizing: border-box; width: 100%;
}
.pc-input:focus { border-color: #e2f163; background: #1f1f1f; }
.pc-input--err { border-color: #e2f163; }
.pc-pwd-wrap { position: relative; display: flex; }
.pc-pwd-wrap .pc-input { padding-right: 54px; }
.pc-pwd-toggle {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px;
  border: none; border-radius: 14px; background: none; cursor: pointer; display: grid; place-items: center;
  color: #8d9086;
}
.pc-pwd-toggle:hover { background: #232323; color: #ffffff; }
.pc-pwd-toggle .material-symbols-rounded { font-size: 20px; }

.pc-field-err { display: flex; align-items: flex-start; gap: 7px; font-size: 13px; line-height: 1.4; color: #e2f163; margin: 0; }
.pc-field-err .material-symbols-rounded { font-size: 17px; line-height: 1.2; }

.pc-pwd-meter { display: flex; align-items: center; gap: 10px; }
.pc-pwd-track { flex: 1 1 0; min-width: 0; height: 6px; border-radius: 999px; background: #232323; overflow: hidden; display: flex; }
.pc-pwd-bar { height: 6px; border-radius: 999px; background: #e2f163; width: 0%; transition: width 120ms ease-out; }
.pc-pwd-hint { font-family: 'DM Mono', ui-monospace, monospace; font-size: 11px; color: #cfd2c6; min-width: 92px; text-align: right; }

.pc-row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pc-stay {
  display: flex; align-items: center; gap: 10px; min-height: 44px; margin-left: -8px; padding: 0 8px;
  border: none; border-radius: 14px; background: none; cursor: pointer;
}
.pc-stay:hover { background: #1c1c1c; }
.pc-stay input { position: absolute; opacity: 0; width: 21px; height: 21px; margin: 0; cursor: pointer; }
.pc-stay-box { width: 21px; height: 21px; border-radius: 7px; background: #1c1c1c; box-shadow: inset 0 0 0 1px #3c4034; display: grid; place-items: center; flex-shrink: 0; }
.pc-stay input:checked ~ .pc-stay-box { background: #e2f163; box-shadow: none; }
.pc-stay-box .material-symbols-rounded { font-size: 15px; color: #14150f; display: none; }
.pc-stay input:checked ~ .pc-stay-box .material-symbols-rounded { display: block; }
.pc-stay-label { font-size: 14px; color: #ffffff; }
.pc-stay input:not(:checked) ~ .pc-stay-label { color: #cfd2c6; }

.pc-link-btn {
  min-height: 44px; margin-right: -12px; padding: 0 12px; border: none; border-radius: 999px;
  background: none; cursor: pointer; font-family: 'DM Sans', sans-serif; font-size: 14px; color: #e2f163;
}
.pc-link-btn:hover { background: #1c1c1c; color: #ffffff; }

.pc-submit {
  display: flex; align-items: center; justify-content: center; gap: 9px; min-height: clamp(48px, 6.2vh, 54px);
  border-radius: 999px; cursor: pointer; font-family: Poppins, sans-serif; font-weight: 600; font-size: 16px;
  border: 1px solid #e2f163; background: #e2f163; color: #14150f;
}
.pc-submit:hover { background: #eaf68b; }
.pc-submit--outline { background: transparent; color: #ffffff; border-color: #2e2f27; }
.pc-submit--outline:hover { background: #1c1c1c; }
.pc-submit .material-symbols-rounded { font-size: 20px; }

.pc-divider { display: flex; align-items: center; gap: 12px; }
.pc-divider .rule { flex: 1 1 auto; height: 1px; background: #2e2f27; }
.pc-divider span:not(.rule) {
  font-family: 'DM Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: #a8ada0;
}

.pc-providers { display: flex; flex-direction: column; gap: clamp(10px, 1.7vh, 14px); }
.pc-provider-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pc-provider-btn {
  flex: 1 1 150px; min-width: 0; display: inline-flex; align-items: center; justify-content: center;
  gap: 9px; min-height: clamp(46px, 5.8vh, 50px); border: 1px solid #2e2f27; border-radius: 999px; background: transparent;
  cursor: pointer; font-family: Poppins, sans-serif; font-weight: 500; font-size: 14px; color: #ffffff;
  text-decoration: none;
}
.pc-provider-btn:hover { background: #1c1c1c; color: #ffffff; }
.pc-provider-btn img { width: 18px; height: 18px; }
.pc-ms-glyph { width: 18px; height: 18px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; }
.pc-ms-glyph span:nth-child(1) { background: #f25022; }
.pc-ms-glyph span:nth-child(2) { background: #7fba00; }
.pc-ms-glyph span:nth-child(3) { background: #00a4ef; }
.pc-ms-glyph span:nth-child(4) { background: #ffb900; }

.pc-fineprint { margin: 0; font-size: 14px; color: #cfd2c6; text-align: center; }
.pc-fineprint--muted { font-size: 13px; line-height: 1.45; color: #a8ada0; text-align: center; }
/* ⚠ L'EXCEPTION AU RYTHME ÉLASTIQUE. La maquette fait aussi respirer les petites cibles :
   `clamp(36px, 4vh, 44px)` ici, `clamp(38px, 4.4vh, 44px)` sur les liens du pied de page.
   Elles sont laissées à 44 px fixes. Le plancher de Claude Design est 40 px ; celui du brief
   de ce projet est 44, et c'est lui qui est vérifié à chaque passage du comparateur. Un
   écran court gagnerait ici 8 px sur un seul lien — ça ne vaut pas de rendre un lien
   juridique plus difficile à toucher que le reste du produit. Les hauteurs qui suivent la
   maquette (champs 48, boutons 48, fournisseurs 46) restent toutes au-dessus de 44. */
.pc-inline-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; margin: 0 -8px; border-radius: 12px; font-weight: 500; }

/* « CRÉER UN COMPTE » — une ligne pleine largeur, plus une phrase grise (MESSAGE 13 §3).
   Elle porte la seule porte d'entrée des nouveaux clients, et elle le montre.

   Elle reste SECONDAIRE : fond sombre, bordure qui passe au lime au survol, et la seule
   surface lime est la pastille fléchée. Lui donner un fond plein lui ferait concurrencer
   « C'est parti », qui est l'action première de l'écran.

   La hauteur est en `clamp`, comme les champs et les boutons : elle ENTRE dans la contrainte
   de hauteur de l'écran (voir .pc-page--fit) au lieu de la contredire avec une valeur fixe.
   Le plancher de 52 px reste au-dessus des 44 px du brief, y compris sur un écran court. */
.pc-signup {
  display: flex; align-items: center; gap: 12px; min-height: clamp(52px, 6.6vh, 60px);
  padding: 0 8px 0 18px; border: 1px solid #3c4034; border-radius: 999px; background: #1c1c1c;
  color: #ffffff; text-decoration: none;
}
.pc-signup:hover { background: #232323; border-color: #e2f163; color: #ffffff; }
.pc-signup-texte { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pc-signup-question { font-size: 13px; line-height: 1.3; color: #a8ada0; }
.pc-signup-action { font-family: Poppins, sans-serif; font-weight: 500; font-size: 16px; line-height: 1.2; }
.pc-signup-fleche {
  flex: 0 0 auto; width: clamp(40px, 5vh, 46px); height: clamp(40px, 5vh, 46px); border-radius: 999px;
  background: #e2f163; display: grid; place-items: center;
  font-family: 'Material Symbols Rounded'; font-size: 21px; color: #14150f;
}

.pc-badge-pill {
  display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 14px; border-radius: 999px;
  background: #e2f163; color: #14150f; font-family: Poppins, sans-serif; font-weight: 500; font-size: 13px;
}
.pc-badge-pill--muted { background: #232323; color: #cfd2c6; font-family: 'DM Mono', ui-monospace, monospace; font-weight: 400; font-size: 11px; letter-spacing: 0.04em; text-transform: none; }

.pc-btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pc-btn-row .pc-submit, .pc-btn-row .pc-submit--outline { flex: 1 1 160px; min-width: 0; }
.pc-btn-row--stack .pc-submit, .pc-btn-row--stack .pc-submit--outline { flex: 1 1 100%; }

.pc-info-card {
  margin: 0; display: flex; align-items: flex-start; gap: 9px; background: #1c1c1c; border-radius: 18px;
  padding: 14px; font-size: 14px; line-height: 1.45; color: #cfd2c6;
}
.pc-info-card .material-symbols-rounded { font-size: 20px; line-height: 1.25; color: #a8ada0; }

.pc-icon-tile { width: 56px; height: 56px; border-radius: 19px; background: #232323; display: grid; place-items: center; }
.pc-icon-tile .material-symbols-rounded { font-size: 28px; color: #e2f163; }

.pc-identifier { display: flex; align-items: center; gap: 11px; background: #1c1c1c; border-radius: 18px; padding: 13px 14px; }
.pc-identifier .material-symbols-rounded { font-size: 20px; color: #a8ada0; }
.pc-identifier-col { display: flex; flex-direction: column; min-width: 0; }
.pc-identifier-label { font-family: 'DM Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: #a8ada0; }
.pc-identifier-value { font-size: 15px; color: #ffffff; overflow-wrap: anywhere; }

.pc-footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; font-size: 12px; color: #a8ada0;
}
.pc-footer a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 12px; color: #a8ada0; }
.pc-footer-help { gap: 5px; }
.pc-footer .material-symbols-rounded { font-size: 16px; }

/* `hidden` doit vraiment cacher. La règle du navigateur (`[hidden] { display: none }`) a une
   spécificité de 0,0,1 : n'importe quelle classe posant `display: flex` la bat, et l'élément
   reste affiché. Sans cette ligne, l'encart d'aide au mot de passe de l'écran d'activation
   (#pc-pwd-tip, en .pc-info-card donc display:flex) s'affiche en permanence au lieu
   d'apparaître seulement pendant la saisie d'un mot de passe trop court — sur le tout premier
   écran que voit une personne invitée. Mesuré à 170 px de haut avant correction. */
.pc-page [hidden] { display: none !important; }

/* Remplissage automatique du navigateur. Chrome impose son propre fond (un bleu très clair)
   et sa propre couleur de texte aux champs qu'il pré-remplit — sur ces écrans sombres, les
   champs devenaient blancs, ce qui n'a rien à voir avec la maquette. Elle ne pouvait pas le
   prévoir : une maquette n'a jamais d'identifiants enregistrés. L'ombre intérieure de 1000px
   est la seule façon fiable de reprendre la main sur ce fond, et la transition de 9999s
   neutralise l'animation d'arrière-plan que Chrome applique au moment du remplissage. */
.pc-page input:-webkit-autofill,
.pc-page input:-webkit-autofill:hover,
.pc-page input:-webkit-autofill:focus,
.pc-page input:-webkit-autofill:active {
  -webkit-text-fill-color: #ffffff;
  -webkit-box-shadow: 0 0 0 1000px #1c1c1c inset;
  box-shadow: 0 0 0 1000px #1c1c1c inset;
  caret-color: #ffffff;
  transition: background-color 9999s ease-out 0s;
}
.pc-page input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #1f1f1f inset; box-shadow: 0 0 0 1000px #1f1f1f inset; }

/* ⚠ Il y avait ici une règle fourre-tout `.pc-page button, .pc-page a { min-height: 44px }`,
   posée pour garantir la cible tactile minimale du brief. Elle faisait l'inverse de ce qu'on
   croyait : sa spécificité (0,1,1) BAT celle des composants (`.pc-submit`, 0,1,0), donc elle
   écrasait leurs hauteurs propres au lieu de servir de plancher. Résultat mesuré contre la
   maquette : « C'est parti » à 44px au lieu de 54, les boutons Google et Microsoft à 44 au
   lieu de 50 — tous les boutons de la pré-connexion étaient tassés.
   Chaque composant déclare désormais sa hauteur lui-même, et aucun ne descend sous 44px ;
   `claude/compare-maquette.js` le vérifie à chaque passage. */
.pc-page .material-symbols-rounded { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }