:root {
  --bg: #f9f9f9;
  --fg: #333;
  --accent: #70C48F;
  --card-bg: white;
  --shadow: rgba(0,0,0,0.1);
  

}

/* @media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;
    --fg: #f0f0f0;
    --card-bg: #1e1e1e;
    --shadow: rgba(0,0,0,0.5);
  }
} */

/* ====== LAYOUT GLOBAL (footer visible, contenu ajusté) ====== */
html, body {
  height: 100%;
  margin: 0;
}

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Segoe UI', Roboto, sans-serif;
  padding-top: var(--header-h); /* compense la .menu fixe */
}

main{
  flex: 1 1 auto;
  display: flex;
}

/* conteneur principal si tu l’utilises autour de main */
.container {
  display: flex;
  flex-direction: row;   /* Par défaut : côte à côte */
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

/* footer toujours visible, pas de scroll global pour l’atteindre */
footer {
	background-color: #ffffff;
	color: black;
	text-align: center;
	width: 100%;
    }

/* zone centrale qui occupe l’espace restant */
main {
  flex: 1 1 auto;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 20px;
  padding-right: 20px;
  display: flex; /* permet à .vcard de calculer la hauteur utile */
}

/* ====== BLOC VCARD (2 colonnes) ====== */
.vcard{
  display: flex;
  gap: 12px;
  align-items: stretch; /* étire les colonnes à la même hauteur */
  width: 100%;
  height: calc(100dvh - var(--header-h) - var(--footer-h));
  box-sizing: border-box;
  padding-top: 30px;
}

/* colonne gauche */
.left-box{
  max-width: 300px;
  width: 100%;
  height: 100%;        /* prend toute la hauteur utile */
  overflow: auto;      /* si le contenu déborde */
  background: var(--card-bg);
  border-radius: 8px;
  padding: 10px 20px;
  text-align: center;
}

.left-box2{
  max-width: 300px;
  width: 100%;
  height: auto;        /* prend toute la hauteur utile */
  overflow: auto;      /* si le contenu déborde */
  background: var(--card-bg);
  border-radius: 8px;
  padding: 10px 20px;
  text-align: center;
}

/* colonne droite */
.next-box {
  background: var(--card-bg);
  padding: 10px 20px;
  border-radius: 8px;
  text-align: left !important;
  flex: 1;
  height: auto; /* prend la hauteur de la plus grande colonne */
}

/* ====== DÉCORATION / TEXTE ====== */
a {
  text-decoration: none;
  color: inherit;
}
h2 {
  margin-top: 0;
  font-size: 1.5rem;
}
#qrcode {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
a.button {
  display: inline-block;
  background: var(--accent);
  color: white;
  text-decoration: none;
  padding: 10px 20px;
  margin: 8px 4px;
  border-radius: 8px;
  font-weight: 600;
  transition: background 0.3s;
}
a.button:hover {
  background: #5aa97a;
}

/* icônes auto */
a[href*="linkedin"]::before { content: "🔗 "; margin-right: 4px; }
a[href*="facebook"]::before { content: "📘 "; margin-right: 4px; }
a[href*="/x.com"]::before   { content: "✖️ "; margin-right: 4px; }
a[href*="instagram"]::before{ content: "📸 "; margin-right: 4px; }
a[href*="tiktok"]::before   { content: "🎵 "; margin-right: 4px; }
a[href*="youtube"]::before  { content: "▶️ "; margin-right: 4px; }
a[href*="mastodon"]::before { content: "🐘 "; margin-right: 4px; }
.siteweb::before            { content: "🌐 "; margin-right: 4px; }
a[href^="mailto:"]::before  { content: "✉️ "; margin-right: 4px; }
a[href^="tel:"]::before     { content: "📞 "; margin-right: 4px; }
.fonction::before           { content: "💼 "; margin-right: 4px; }
.societe::before            { content: "🏢 "; margin-right: 4px; }
.localadress::before        { content: "📍 "; margin-right: 4px; }

.note {
  text-align: left !important;
  display: block;
  font-family: "Segoe UI", "Verdana", sans-serif;
  font-size: 0.8rem;
  color: #555;
  line-height: 1.4;
}
.rdv {
  font-family: "Verdana", "Tahoma", sans-serif;
  font-size: 0.95rem;
  font-weight: normal;
  color: #333;
  display: inline-block;
}
.rdv::before { content: "📅 "; margin-right: 4px; }
.finname {
  font-family: 'Segoe UI', sans-serif;
  font-weight: 600;
  font-size: 1.5em;
  margin: 0;
}

.filter-bar {
  display: block;
  width: 100%;
  max-width: 300px;
  padding: 8px 10px;
  margin: 10px auto 20px auto;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.hidden-by-default { display: none; }

/* ====== MOBILE ====== */
@media (max-width: 780px) {
  .container {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Empile et laisse la hauteur suivre le contenu */
  .vcard {
    flex-direction: column;
    height: auto;                 /* ✅ plus de hauteur fixe */
    min-height: 0;                /* évite les contraintes */
  }

  .left-box,
  .next-box {
    max-width: 100%;
    width: 100%;
    height: auto;                 /* ✅ suit le contenu */
    overflow: visible;            /* ✅ pas de scroll interne */
    box-sizing: border-box;
  }
}