/* ============================================================
   Carte de visite virtuelle — feuille de styles autonome.

   Volontairement séparée de styles.css : cette page est le plus
   souvent ouverte après le scan d'un QR code, sur un téléphone et
   parfois en mauvaise réception. Elle doit s'afficher tout de
   suite, sans charger les 60 ko de styles du parcours.
   Mêmes jetons de couleur que le site, pour rester d'une pièce.
   ============================================================ */

:root {
  --bg: #F7F6F3;
  --ink: #111;
  --ink-2: #333;
  --ink-3: #555;
  --muted: #888;
  --accent: #4E6BFF;
  --accent-dark: #3A54D6;
  --line: rgba(0, 0, 0, .08);
  --card: #fff;
  --dark: #111113;
  --radius: 18px;
  --shadow: 0 10px 22px rgba(0, 0, 0, .06);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Pas de bande fixe par-dessus la page : elle recouvrait le haut de la carte
   dès que la marge de sécurité n'était pas appliquée. La zone claire sous
   l'encoche vient simplement du fond de page et de la marge du .wrap, qui ne
   peuvent, eux, rien masquer. La barre d'état est traitée par la teinte
   déclarée dans carte.html. */

a { color: var(--accent); }
a:hover { color: var(--accent-dark); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  background: var(--ink); color: #fff; padding: 10px 16px;
  font: 600 13px/1 'Inter', sans-serif; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* ---------- Le bloc carte ---------- */

.wrap {
  max-width: 520px;
  margin: 0 auto;
  /* Valeurs de repli d'abord : si le navigateur ne sait pas interpréter les
     lignes suivantes, il garde celles-ci. Sans ce raccourci, une seule
     déclaration incomprise mettait la marge haute à zéro et la carte
     remontait sous la barre d'état. */
  padding: 30px 18px 56px;
  /* Encoches, Dynamic Island et barre d'accueil des iPhone. */
  padding-top: max(30px, calc(env(safe-area-inset-top) + 18px));
  /* Voir aussi la règle « max-width: 640px » en bas de fichier : sur
     téléphone, la bande claire au-dessus de la carte est garantie même si le
     navigateur n'applique pas la marge de sécurité. */
  padding-bottom: max(56px, calc(env(safe-area-inset-bottom) + 40px));
  padding-left: max(18px, env(safe-area-inset-left));
  padding-right: max(18px, env(safe-area-inset-right));
}

.vcard {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .09);
  overflow: hidden;
}

/* ---------- Bandeau sombre ---------- */

.vc-cover {
  position: relative;
  height: 104px;
  background: var(--dark);
  /* La marque se place en haut à gauche : le portrait déborde sur le bas
     du bandeau et viendrait la recouvrir si elle était centrée. */
  display: flex;
  align-items: flex-start;
  padding: 18px 22px;
  overflow: hidden;
}
.vc-cover-glow {
  position: absolute; inset: -60% 20% auto 20%; height: 200%;
  background: radial-gradient(closest-side, rgba(78, 107, 255, .55), transparent 70%);
  pointer-events: none;
}
.vc-brand {
  position: relative;
  display: inline-flex; align-items: baseline; gap: 3px;
  font: 800 19px/1 'Inter', sans-serif; letter-spacing: -.02em;
  color: #fff; text-decoration: none;
  transition: transform .2s var(--ease);
}
.vc-brand:hover { color: #fff; transform: translateY(-1px); }
.vc-brand-caret { font-family: ui-monospace, Menlo, monospace; color: #8fa2ff; }

/* ---------- Identité ---------- */

.vc-id {
  padding: 0 22px 22px;
  text-align: center;
}
.vc-avatar {
  position: relative;
  width: 112px; height: 112px;
  margin: -56px auto 14px;
  border-radius: 50%;
  background: linear-gradient(150deg, #2a2d3a, #111113);
  border: 4px solid var(--card);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.vc-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vc-avatar-img[hidden] { display: none; }
.vc-monogram {
  font: 800 34px/1 'Inter', sans-serif; letter-spacing: -.04em;
  color: #fff;
}
.vc-monogram[hidden] { display: none; }

.vc-name {
  margin: 0;
  font: 800 30px/1.1 'Inter', sans-serif; letter-spacing: -.03em;
  color: var(--ink);
}
.vc-role {
  margin: 8px 0 0;
  font: 600 14px/1.3 'Inter', sans-serif; color: var(--accent);
}
.vc-org {
  margin: 5px 0 0;
  font: 500 13.5px/1.4 'Inter', sans-serif; color: var(--ink-3);
}
.vc-badge {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 16px 0 0; padding: 7px 14px;
  background: rgba(78, 107, 255, .08);
  border: 1px solid rgba(78, 107, 255, .22);
  border-radius: 100px;
  font: 600 12px/1 'Inter', sans-serif; color: var(--accent-dark);
}
.vc-badge-dot { position: relative; width: 7px; height: 7px; flex: none; }
.vc-badge-dot::before, .vc-badge-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--accent);
}
.vc-badge-dot::after { animation: badgeRing 2s ease-out infinite; }
@keyframes badgeRing {
  0%   { transform: scale(1); opacity: .55; }
  100% { transform: scale(3.4); opacity: 0; }
}

/* ---------- Action principale ---------- */

.vc-cta {
  display: flex; align-items: center; gap: 13px;
  margin: 0 22px 16px; padding: 15px 18px;
  background: var(--ink); color: #fff; text-decoration: none;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.vc-cta:hover {
  color: #fff; transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .22);
}
.vc-cta:active { transform: translateY(0); }
.vc-cta-ic {
  width: 40px; height: 40px; flex: none; border-radius: 12px;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.vc-cta-ic svg { width: 20px; height: 20px; display: block; }
.vc-cta-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vc-cta-main { font: 700 15px/1.2 'Inter', sans-serif; }
.vc-cta-sub { font: 500 11.5px/1.3 'Inter', sans-serif; color: rgba(255, 255, 255, .68); }
.vc-cta.is-done .vc-cta-ic { background: #16a34a; }

/* ---------- Liens de contact (mêmes codes que le parcours) ---------- */

.vc-links {
  display: flex; flex-direction: column; gap: 9px;
  padding: 0 22px 22px;
}
.link-btn {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 13px; text-decoration: none;
  background: var(--card); border: 1px solid var(--line); border-radius: 15px;
  padding: 12px 14px; color: var(--ink-2);
  transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.link-btn::before {
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; z-index: 1;
  border-radius: 0 3px 3px 0; background: var(--accent);
  transform: scaleY(0); transform-origin: center; transition: transform .22s var(--ease);
}
.link-btn:hover {
  transform: translateY(-2px); border-color: rgba(78, 107, 255, .32);
  box-shadow: 0 10px 22px rgba(78, 107, 255, .13);
}
.link-btn:hover::before { transform: scaleY(1); }
.link-btn[hidden] { display: none; }
.link-ic {
  position: relative; z-index: 1;
  width: 38px; height: 38px; border-radius: 11px; flex: none; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .1);
  transition: transform .2s var(--ease);
}
.link-btn:hover .link-ic { transform: scale(1.06) rotate(-3deg); }
.link-ic svg { width: 18px; height: 18px; display: block; }
.link-ic-mail { background: var(--ink); }
.link-ic-tel  { background: #16a34a; }
.link-ic-in   { background: #0A66C2; }
.link-ic-site { background: linear-gradient(135deg, #4E6BFF, #3A54D6); }
.link-ic-cv   { background: linear-gradient(135deg, #4657FF, #4A30EC); }
.link-tx {
  position: relative; z-index: 1; flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.link-tx-main { font: 700 14px/1.2 'Inter', sans-serif; color: var(--ink); }
.link-tx-sub {
  font: 500 11.5px/1.2 'Inter', sans-serif; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .2s var(--ease);
}
.link-btn:hover .link-tx-sub { color: var(--accent); }

/* ---------- QR code ---------- */

.vc-qr {
  padding: 24px 22px;
  border-top: 1px solid var(--line);
  background: #FBFAF8;
  text-align: center;
}
.vc-qr-title {
  margin: 0;
  font: 700 16px/1.2 'Inter', sans-serif; letter-spacing: -.01em; color: var(--ink);
}
.vc-qr-copy {
  margin: 7px auto 0; max-width: 300px;
  font: 500 12.5px/1.5 'Inter', sans-serif; color: var(--ink-3);
}
.vc-qr-frame {
  display: inline-block; margin: 16px 0 0; padding: 12px;
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow);
  line-height: 0;
}
.vc-qr-frame img { width: 200px; height: 200px; display: block; }
.vc-qr-url {
  margin: 12px 0 0;
  font: 600 13px/1 ui-monospace, Menlo, monospace; color: var(--ink-2);
  letter-spacing: -.01em;
}

/* ---------- Boutons secondaires ---------- */

.vc-actions {
  display: flex; flex-wrap: wrap; gap: 9px; justify-content: center;
  margin-top: 18px;
}
.vc-btn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); border-radius: 100px;
  padding: 10px 16px; color: var(--ink-2);
  font: 600 12.5px/1 'Inter', sans-serif;
  transition: transform .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.vc-btn:hover { transform: translateY(-2px); border-color: rgba(78, 107, 255, .35); color: var(--accent-dark); }
.vc-btn svg { width: 15px; height: 15px; display: block; }
.vc-btn[hidden] { display: none; }
.vc-btn-dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.vc-btn-dark:hover { background: var(--ink); color: #fff; }
.vc-btn.is-done { border-color: #16a34a; color: #16a34a; }

/* ---------- Mode présentation ----------
   Fond blanc et code aussi grand que l'écran le permet : c'est ce qui rend le
   scan fiable à bout de bras, dans un hall mal éclairé. Un fond blanc est
   aussi ce qui pousse le plus la luminosité perçue sur un écran OLED. */

.qr-modal {
  width: 100vw; height: 100vh;
  max-width: 100vw; max-height: 100vh;
  margin: 0; padding: 0; border: 0;
  background: #fff; color: var(--ink);
}
.qr-modal::backdrop { background: #fff; }
.qr-modal-inner {
  height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px;
  padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
}
/* Carré, aussi large que le permet la plus petite dimension de l'écran.
   Le SVG porte déjà sa zone de silence de 4 modules ; sur ce fond blanc elle
   se confond avec la page et tient lieu de marge. On peut donc pousser jusque
   près des bords : le motif utile y gagne environ un quart de sa taille. */
.qr-modal-img {
  width: min(90vw, 72vh);
  /* Écran court (téléphone tourné en paysage) : on réserve la place de
     l'adresse et du bouton, et le carré rétrécit au lieu de déborder. */
  max-width: 90vw;
  max-height: calc(100vh - 150px);
  height: auto;
  aspect-ratio: 1 / 1;
  display: block;
}
.qr-modal-url {
  margin: 0;
  font: 700 16px/1 ui-monospace, Menlo, monospace; color: var(--ink-2);
}
.qr-modal-close {
  cursor: pointer;
  background: var(--ink); color: #fff; border: 0; border-radius: 100px;
  padding: 14px 30px; font: 600 14px/1 'Inter', sans-serif;
}

/* Le cadre de la carte signale qu'il est agrandissable. */
.vc-qr-frame.is-zoomable { cursor: zoom-in; }

/* ---------- Pied ---------- */

.vc-foot {
  padding: 20px 22px 24px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.vc-foot-line { margin: 0; font: 500 13px/1.5 'Inter', sans-serif; color: var(--ink-2); }
.vc-foot-legal { margin: 8px 0 0; font: 500 11.5px/1.4 'Inter', sans-serif; color: var(--muted); }
.vc-foot-legal a { color: var(--muted); text-decoration: none; }
.vc-foot-legal a:hover { color: var(--accent); }

/* ---------- Petits écrans ---------- */

/* ---------- Bande claire au-dessus de la carte ----------
   Sur téléphone, l'espace au-dessus de la carte ne dépend plus uniquement de
   la marge de sécurité : un plancher fixe de 64px la garantit. C'est la seule
   façon de ne pas dépendre du calcul d'encoche, qui varie selon que la page
   est ouverte dans Safari ou depuis l'écran d'accueil. La bande reste dans le
   flux : contrairement à une bande fixe, elle ne peut rien recouvrir. */
@media (max-width: 640px) {
  .wrap { padding-top: 64px; }
  .wrap { padding-top: max(64px, calc(env(safe-area-inset-top) + 20px)); }
}

@media (max-width: 400px) {
  .wrap { padding: 16px 12px 40px; }
  .wrap { padding-top: max(64px, calc(env(safe-area-inset-top) + 20px)); }
  .vc-name { font-size: 26px; }
  .vc-cta, .vc-links { margin-left: 16px; margin-right: 16px; }
  .vc-links { padding-left: 0; padding-right: 0; }
  .vc-qr-frame img { width: 168px; height: 168px; }
}

@media (prefers-reduced-motion: reduce) {
  .vc-badge-dot::after { animation: none; }
  * { transition: none !important; }
}

/* ---------- Impression ----------
   Objectif : une page A4 propre à glisser dans un dossier de
   candidature, ou à découper. On retire tout ce qui ne se clique
   pas sur papier et on garde le QR bien lisible. */

@media print {
  @page { margin: 14mm; }
  body { background: #fff; }
  .wrap { max-width: none; padding: 0; }
  .skip-link, .vc-actions, .vc-cta, .qr-modal { display: none !important; }
  .vcard {
    border: 1px solid #ccc; border-radius: 12px;
    box-shadow: none; break-inside: avoid;
  }
  .vc-cover { height: 74px; background: #111113 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .vc-cover-glow { display: none; }
  .vc-brand { color: #fff !important; }
  .vc-badge { border-color: #bbb; background: none; }
  .vc-badge-dot { display: none; }
  .link-btn { border: 1px solid #ccc !important; box-shadow: none !important; }
  .link-ic { display: none; }
  .link-tx-sub { color: #444 !important; }
  .vc-qr { background: none; }
  .vc-qr-frame { border: none; box-shadow: none; padding: 0; }
  .vc-qr-frame img { width: 150px; height: 150px; }
  .vc-foot-line { display: none; }
}