/* ==========================================================================
   Candivio — pages/connexion.css
   Pages publiques du compte : connexion, inscription, mot de passe oublié,
   définition du mot de passe, retour de paiement. Pas d'en-tête global
   (personne non connectée) : une carte centrée, construite avec le kit.
   Valeurs : variables de tokens.css uniquement.
   ========================================================================== */

/* Couleurs du site de marque (demande d'Emir du 12/11/2026) : les composants du kit sont réaccordés
   ici, sans nouvelle classe. Les alias calculés sur :root (anneau de focus, --cv-line…) sont redéfinis. */
body {
  --cv-primary: var(--cv-site-action);
  --cv-primary-hover: var(--cv-site-action-hover);
  --cv-navy: var(--cv-site-ink); --cv-text: var(--cv-site-ink); --cv-navy-800: var(--cv-site-ink);
  --cv-ink-600: var(--cv-site-text-2); --cv-text-2: var(--cv-site-text-2);
  --cv-border-input: var(--cv-site-field); --cv-line: var(--cv-site-field);
  --cv-focus-ring: 0 0 0 2px var(--cv-surface), 0 0 0 4px var(--cv-site-accent);
  color: var(--cv-site-ink);
  background: linear-gradient(180deg, var(--cv-site-bg-top) 0%, var(--cv-site-bg-mid) 55%, var(--cv-surface) 100%) fixed;
}
[data-auth-card] .cv-link { color: var(--cv-site-link); }
[data-auth-card] .cv-link:hover { color: var(--cv-site-ink); }
/* Survol des boutons en turquoise du site, texte blanc (choix d'Emir du 12/11/2026, contraste 2,5:1 au survol).
   Un bouton désactivé (« Créer mon compte » avant l'accord) ne change pas au survol. */
[data-auth-card] .cv-btn--primary[disabled]:hover { background: var(--cv-primary); }
[data-auth-card] .cv-eyebrow { color: var(--cv-site-link); }
[data-auth-card] .cv-input:focus { border-color: var(--cv-site-accent); }
[data-check] input { accent-color: var(--cv-site-action); }
[data-auth-page] {
  min-height: 100vh; min-height: 100dvh; box-sizing: border-box;
  display: grid; place-items: center; padding: var(--cv-space-6) var(--cv-space-4);
}
[data-auth-card] {
  --auth-pad: var(--cv-space-6);
  width: min(460px, 100%); box-sizing: border-box; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--cv-space-4); padding: var(--auth-pad);
  border: var(--cv-site-card-border) solid var(--cv-site-field); border-radius: var(--cv-r-16);
}
[data-auth-card] form { display: flex; flex-direction: column; gap: var(--cv-space-4); }
[data-auth-card] h1 { font-size: var(--cv-fs-h2); }
[data-auth-card] .cv-eyebrow { margin: 0; }

/* En-tête de carte bleu nuit du site : le logo du kit (prévu pour fond sombre) occupe toute la
   largeur en haut de la carte ; point du logo --cv-brand-dot du kit (#3FD1B5). */
[data-auth-card] > .cv-logo:first-child {
  display: block; align-self: stretch;
  margin: calc(-1 * var(--auth-pad)) calc(-1 * var(--auth-pad)) var(--cv-space-2);
  padding: var(--cv-space-5) var(--auth-pad);
  background: var(--cv-site-ink);
}
/* La carte coupe ce qui dépasse : anneau de focus tracé à l'intérieur du bandeau. */
[data-auth-card] > .cv-logo:first-child:focus-visible { box-shadow: inset 0 0 0 2px var(--cv-on-dark); border-radius: 0; }

/* Texte d'introduction, liens de bas de carte. */
[data-auth-lead] { margin: 0; color: var(--cv-ink-600); }
[data-auth-foot] {
  margin: 0; padding-top: var(--cv-space-4); border-top: 1px solid var(--cv-site-line);
  font-size: var(--cv-fs-small); color: var(--cv-ink-600);
}
[data-auth-foot] .cv-link + .cv-link { display: block; margin-top: var(--cv-space-2); }

/* Libellé de champ avec un lien à droite (« Mot de passe oublié ? »). */
[data-label-row] { display: flex; justify-content: space-between; align-items: baseline; gap: var(--cv-space-2); flex-wrap: wrap; }
[data-label-row] .cv-link { font-size: var(--cv-fs-small); }
/* Même style que les libellés du kit (.cv-field > label), le libellé étant ici dans une ligne. */
[data-label-row] label { font-size: var(--cv-fs-small); font-weight: var(--cv-fw-semibold); }

/* Case de consentement. */
[data-check] { display: flex; align-items: flex-start; gap: var(--cv-space-2); font-size: var(--cv-fs-small); color: var(--cv-ink-600); }
[data-check] input { margin-top: var(--cv-space-1); flex: none; }

/* « ou » entre le formulaire et « Continuer avec Google / Microsoft / LinkedIn » (docs/CONNEXION-EXTERNE.md). */
[data-social-entry] { display: flex; flex-direction: column; gap: var(--cv-space-3); }
[data-social-entry][hidden], [data-social-button][hidden] { display: none; }
[data-auth-or] { margin: 0; display: flex; align-items: center; gap: var(--cv-space-3); font-size: var(--cv-fs-small); color: var(--cv-ink-600); }
[data-auth-or]::before, [data-auth-or]::after { content: ""; flex: 1; border-top: 1px solid var(--cv-site-line); }
/* Boutons de connexion : logo officiel à gauche du libellé, comme sur la page d'inscription du site. */
[data-social-button] { gap: var(--cv-sp-10); border-color: var(--cv-site-field); font-weight: var(--cv-fw-semibold); }
[data-social-button]:hover { border-color: var(--cv-site-action-hover); background: var(--cv-site-hover); }
[data-social-button] img { width: var(--cv-site-logo); height: var(--cv-site-logo); object-fit: contain; flex: none; }

/* Attente (vérification de session, redirection). */
[data-auth-wait] { text-align: center; }
[data-auth-wait] > .cv-logo:first-child { text-align: center; }

@media (max-width: 899px) {
  [data-auth-page] { place-items: start center; padding-top: var(--cv-space-6); }
  [data-auth-card] { --auth-pad: var(--cv-space-5); }
}