/* ==========================================================================
   Veille des postes de Charles : page de connexion (préfixe vc-)
   Sur Socle Données 1.1.0 (vendor/socle-donnees.css), au bleu de Socle.
   Aucun script, aucun style en ligne (CSP du Worker).
   Téléphone : illustration en bandeau en haut ; ordinateur (900 px et plus) :
   texte à gauche, illustration à droite (demande de Charles, 12 nov. 2026).
   L'illustration (visuel.svg, fond transparent) est entière (object-fit: contain)
   sur un fond bleu léger, plus sombre en thème sombre : aucun bord visible.
   Bouton « Continuer avec Google » : charte Google Sign-In (logo « G » officiel en
   couleurs, libellé exact, Roboto Medium ; thème clair : fond #FFFFFF, contour
   #747775, texte #1F1F1F ; thème sombre : fond #131314, contour #8E918F, texte
   #E3E3E3), en forme de pilule, 48 px de haut.
   ========================================================================== */

:root {
  --vc-google-fond: #FFFFFF;
  --vc-google-survol: #ECECEC;      /* calque d'état de Google : #1F1F1F à 8 % */
  --vc-google-bord: #747775;        /* 4,61:1 sur la surface blanche */
  --vc-google-texte: #1F1F1F;       /* 16,48:1 sur le fond, 14,1:1 au survol */
  --vc-visuel-fond: #E7EFFE;        /* fond de l'illustration : bleu léger de Socle (--dn-action-subtle) */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --vc-google-fond: #131314;
    --vc-google-survol: #242425;    /* calque d'état de Google : #E3E3E3 à 8 % */
    --vc-google-bord: #8E918F;      /* 5,74:1 sur la surface #0C121A */
    --vc-google-texte: #E3E3E3;     /* 15,1:1 sur le fond */
    --vc-visuel-fond: #19263F;      /* --dn-action-subtle en sombre */
  }
}
:root[data-theme="dark"] {
  --vc-google-fond: #131314;
  --vc-google-survol: #242425;
  --vc-google-bord: #8E918F;
  --vc-google-texte: #E3E3E3;
  --vc-visuel-fond: #19263F;
}

html { -webkit-text-size-adjust: 100%; }
body.dn.vc { min-height: 100vh; min-height: 100dvh; background: var(--dn-bg-surface); }

.vc-page {
  display: grid; grid-template-rows: auto 1fr;
  min-height: 100vh; min-height: 100dvh;
}

/* Image : bandeau sur téléphone, moitié gauche sur ordinateur. Toujours plein cadre. */
.vc-visuel {
  position: relative; overflow: hidden; background: var(--vc-visuel-fond);
  height: clamp(168px, 30vh, 300px);
}
.vc-visuel img {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; max-width: none;
  object-fit: contain; object-position: 50% 50%;
  /* Bords de l'image fondus dans le fond du panneau : aucun cadre visible. */
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
}

.vc-panneau {
  display: grid; align-items: start;
  padding: 28px max(16px, env(safe-area-inset-right, 0px)) max(32px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
.vc-contenu { width: 100%; max-width: 28rem; margin-inline: auto; display: grid; gap: 18px; }

@media (min-width: 900px) {
  .vc-page { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; }
  .vc-visuel { height: auto; grid-column: 2; grid-row: 1; }
  .vc-visuel img { inset: 6%; width: 88%; height: 88%; }
  .vc-panneau { grid-column: 1; grid-row: 1; align-items: center; padding: 48px 40px 48px max(40px, env(safe-area-inset-left, 0px)); }
}
@media (min-width: 1200px) { .vc-panneau { padding-inline: 72px; } }

.vc-titre {
  display: flex; align-items: center; gap: 12px;
  font: 780 clamp(2rem, 1.5rem + 1.6vw, 2.5rem)/1.05 var(--dn-font-display); font-stretch: 112%; letter-spacing: -0.015em;
  color: var(--dn-text-primary);
}
.vc-titre::before {
  content: ""; flex: none; width: .45em; height: .45em; border-radius: 30%;
  background: var(--dn-action); transform: rotate(45deg);
}
.vc-accueil { font-size: 1.0625rem; line-height: 1.55; color: var(--dn-text-secondary); }
.vc-note { font-size: .875rem; line-height: 1.45; color: var(--dn-text-secondary); }

/* Message (refus, échec, déconnexion, configuration absente) */
.vc-message {
  padding: 12px 14px; border-left: 4px solid var(--dn-action);
  border-radius: 0 var(--dn-radius-sm) var(--dn-radius-sm) 0;
  background: var(--dn-bg-sunken); color: var(--dn-text-primary);
  font: 650 1rem/1.45 var(--dn-font-texte);
}
.vc-message--erreur { border-left-color: var(--dn-statut-negatif); }
.vc-message--attention { border-left-color: var(--dn-statut-attention); }

/* Bouton « Continuer avec Google » (charte Google Sign-In) */
.vc-google {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; min-height: 48px; padding: 10px 20px 10px 16px; margin: 0;
  border: 1px solid var(--vc-google-bord); border-radius: var(--dn-radius-full);
  background: var(--vc-google-fond); color: var(--vc-google-texte);
  font: 500 1rem/1.25 "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; letter-spacing: .01em;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color var(--dn-motion-rapide), box-shadow var(--dn-motion-rapide);
}
.vc-google:hover {
  background: var(--vc-google-survol); color: var(--vc-google-texte); text-decoration: none;
  box-shadow: 0 1px 2px rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);
}
.vc-google:focus-visible { outline: 3px solid var(--dn-focus); outline-offset: 3px; border-radius: var(--dn-radius-full); }
.vc-google__logo { display: inline-flex; flex: none; width: 20px; height: 20px; }
.vc-google__logo svg { width: 20px; height: 20px; }
.vc-google__texte { min-width: 0; }

/* Indisponible (configuration absente) : reste lisible et focalisable, raison écrite au-dessus */
.vc-google[aria-disabled="true"], .vc-google[aria-disabled="true"]:hover {
  cursor: not-allowed; box-shadow: none;
  background: var(--dn-bg-sunken); color: var(--dn-text-secondary); border: 2px dashed var(--dn-border-control);
}
.vc-google[aria-disabled="true"] .vc-google__logo { filter: grayscale(1); opacity: .6; }

/* « Essayer avec un autre compte » : bouton principal bleu de Socle */
.vc-bouton { width: 100%; min-height: 48px; background: var(--dn-action); color: var(--dn-text-on-action); font-size: 1rem; }
.vc-bouton:hover { background: var(--dn-action-hover); color: var(--dn-text-on-action); }

@media (prefers-reduced-motion: reduce) { .vc-google { transition: none; } }
@media (forced-colors: active) {
  .vc-google, .vc-bouton { border: 2px solid ButtonText; }
  .vc-titre::before { background: CanvasText; }
}