:root { --bleu: #0a66ff; --gris: #f2f2f5; }
* { box-sizing: border-box; }
body {
  margin: 0; font: 17px/1.4 -apple-system, system-ui, sans-serif;
  padding: max(16px, env(safe-area-inset-top)) 16px 24px;
  background: #fff; color: #111;
}
h1 { font-size: 28px; margin: 8px 0 12px; }
button {
  width: 100%; padding: 16px; font-size: 18px; border: 0; border-radius: 14px;
  background: var(--bleu); color: #fff; margin: 8px 0; cursor: pointer;
}
button.lien-discret { background: none; color: #666; font-size: 15px; padding: 10px; }
#btn-ajouter, #btn-reset { background: var(--gris); color: #111; }
input[type="text"], .carte input {
  width: 100%; padding: 14px; font-size: 17px; border: 1px solid #ccc; border-radius: 12px;
}
#apercu-photos img { max-width: 100%; border-radius: 12px; margin-top: 8px; }
#etat { min-height: 22px; color: #b00; font-weight: 600; }
.carte {
  border: 1px solid #e2e2e6; border-radius: 16px; padding: 14px; margin: 12px 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.carte-tete { font-weight: 700; font-size: 15px; color: #666; margin-bottom: 8px; }
.carte label { display: block; font-size: 13px; color: #666; margin: 8px 0; }
.carte-actions { display: flex; gap: 10px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.btn-plans {
  margin-left: auto; background: var(--gris); color: #111; padding: 10px 14px;
  border-radius: 12px; text-decoration: none; font-size: 16px;
}
.btn-appeler {
  background: var(--bleu); color: #fff; padding: 12px 16px; border-radius: 12px;
  text-decoration: none; font-size: 18px; font-weight: 700;
}
.carte-actions a.disabled { opacity: .4; pointer-events: none; }