/* Composants partagés : boutons, champs, badge, pictos. Spec : DESIGN.md section 5 et 02-ACCUEIL-SPEC.md. */

/* Boutons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-block-size: 48px;
  min-inline-size: 44px;
  padding-inline: var(--e4);
  border: 1.5px solid transparent;
  border-radius: var(--rayon-m);
  font: 600 var(--t-corps) / 1.2 var(--police-texte);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--d-micro) linear, color var(--d-micro) linear;
}
.btn--principal { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.btn--principal:hover, .btn--principal:active { background: var(--accent-fort); border-color: var(--accent-fort); }
.btn--secondaire { background: var(--surface); border-color: var(--dominante); color: var(--dominante); }
.btn--secondaire:hover, .btn--secondaire:active { background: var(--dominante-douce); }
.btn--whatsapp { background: var(--surface); border-color: var(--whatsapp); color: var(--whatsapp); }
.btn--whatsapp:hover, .btn--whatsapp:active { background: var(--succes-pale); }
.btn__glyphe { inline-size: 20px; block-size: 20px; flex: none; }

/* Champs de formulaire */
.champ { display: flex; flex-direction: column; min-inline-size: 0; }
.champ label { margin-block-end: var(--e2); font-weight: 600; color: var(--encre); }
.champ select, .champ input {
  inline-size: 100%;
  min-inline-size: 0;
  block-size: 56px;
  padding-inline: var(--e3);
  background: var(--surface);
  color: var(--encre);
  border: 1.5px solid var(--filet-fort);
  border-radius: var(--rayon-s);
  font: inherit;
  text-align: start;
}
.champ input[type="date"] { -webkit-appearance: none; appearance: none; }
.champ select:focus, .champ input:focus { border-color: var(--dominante); }
.champ [aria-invalid="true"] { border-color: var(--attention); border-width: 2px; }
.champ__aide, .champ__erreur { margin-block-start: var(--e2); font-size: var(--t-petit); line-height: 1.5; }
.champ__aide { color: var(--sourdine); }
.champ__erreur { display: flex; align-items: flex-start; gap: var(--e2); color: var(--attention); }
.champ__erreur[hidden] { display: none; }
.champ__erreur-icone { flex: none; inline-size: 16px; block-size: 16px; margin-block-start: 0.2em; }

/* Badge « Démonstration » */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  min-block-size: 28px;
  padding-inline: var(--e2);
  background: var(--attention-pale);
  color: var(--attention);
  border: 1px solid var(--attention);
  border-radius: var(--rayon-s);
  font-size: var(--t-micro);
  font-weight: 600;
  line-height: 1.4;
}
.badge__icone { inline-size: 14px; block-size: 14px; flex: none; }

/* Pictos d'oiseaux : masque CSS, couleur héritée, décoratifs (le nom de la villa est toujours à côté) */
.picto {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 48px;
  block-size: 48px;
  border-radius: 50%;
  background: var(--fond);
  border: var(--filet-trait);
}
.picto::before {
  content: "";
  inline-size: 32px;
  block-size: 32px;
  background: var(--dominante);
  -webkit-mask: var(--picto) center / contain no-repeat;
  mask: var(--picto) center / contain no-repeat;
}
.picto--tourterelle { --picto: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik00MSAxMy41IEMzOS41IDEwIDM2LjUgOC41IDM0IDEwLjUgQzMyIDEyIDMzIDE0LjUgMzIgMTcgQzMxIDIxIDI3IDIxLjUgMjMgMjQgQzE3IDI4IDEyIDMzIDYuNSAzOS41IEMxMyAzOS41IDE5IDQwIDI0IDM5IEMzMSAzOCAzOCAzMyAzNyAyNiBDMzYgMjIgMzYgMTkgMzYgMTYuNSBDMzcuNSAxNiAzOS41IDE1IDQxIDEzLjUgWiIvPjxwYXRoIGQ9Ik0xNyAzNSBDMjQgMzUgMzEgMzEuNSAzNCAyNiIvPjwvc3ZnPgo="); }
.picto--alouette { --picto: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik00MS41IDE4IEMzOS41IDE1LjUgMzcgMTQgMzQuNSAxNC41IEMzMyAxMi41IDMwIDExIDI1LjUgOS41IEMyOCAxMS41IDI5LjUgMTIuNSAyOS41IDE0IEMyMyAxNSAxNi41IDE5IDEyIDI1LjUgQzEwIDI5IDguNSAzMSA3IDM0IEMxMiAzNSAxNyAzNi41IDIyIDM3IEMyOSAzNy41IDM2IDM0IDM3IDI3IEMzNy41IDIzIDM1IDIxIDM0LjUgMTguNSBDMzYuNSAxOC41IDM5IDE4LjUgNDEuNSAxOCBaIi8+PHBhdGggZD0iTTE1IDI4IEMyMSAyOC41IDI3IDI2IDMxIDIxIi8+PHBhdGggZD0iTTIyIDM3IEwyMiA0MSIvPjxwYXRoIGQ9Ik0yOSAzNiBMMjkuNSA0MC41Ii8+PC9zdmc+Cg=="); }
.picto--hirondelle { --picto: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik00MiAyMSBDNDEgMTguNSAzOC41IDE3LjUgMzYuNSAxOC41IEMzNSAxOS41IDM0LjUgMTkuNSAzMyAyMCBDMzAgMTQgMjEgNy41IDggOC41IEMxNyAxMSAyMi41IDE1LjUgMjUuNSAyMiBDMjEgMjQgMTcgMjUuNSAxMyAyNyBDMTAgMzAgNyAzMyA0LjUgMzYuNSBDOCAzNSAxMSAzMyAxNCAzMC41IEMxMyAzNCAxMiAzOCAxMC41IDQyIEMxNiA0MCAyMiAzNSAyOCAzMSBDMzQgMjkgMzggMjYgNDAuNSAyNCBDNDEuNSAyMyA0MiAyMiA0MiAyMSBaIi8+PC9zdmc+Cg=="); }
.picto--perdrix { --picto: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik00MiAxNy41IEM0MC41IDEzLjUgMzcgMTIgMzQuNSAxMy41IEMzMSAxMS41IDI2IDExIDIxIDEzIEMxMyAxNiA5IDIyIDkuNSAyOSBDOS41IDMxIDggMzIuNSA2LjUgMzMuNSBDMTAgMzQuNSAxMiAzNSAxNCAzNSBDMTcgMzggMjIgMzkgMjYgMzguNSBDMzQgMzggMzkuNSAzMyAzOC41IDI2IEMzNy41IDIxLjUgMzQgMTkuNSAzNSAxNy41IEMzNy41IDE4IDQwIDE4IDQyIDE3LjUgWiIvPjxwYXRoIGQ9Ik0xNiAyNyBDMjIgMjkgMjkgMjggMzMgMjMiLz48cGF0aCBkPSJNMjEgMzguNSBMMjAuNSA0MiIvPjxwYXRoIGQ9Ik0yOSAzOCBMMjkuNSA0MS41Ii8+PC9zdmc+Cg=="); }
html[dir="rtl"] .picto::before { transform: scaleX(-1); }