/* SN GROUP — bloc « Votre contact » des mini-sites (David, 12.10.2026 11:45) : « carte de visite de maison haut de gamme »,
   glassmorphism raffiné, palette SN : noir #19130B, beige #F5F0E8 / #E8E0D0, or #C4A87C (or foncé lisible sur clair #7A5F36).
   v1 verre fumé sombre · v2 verre clair givré · v3 carte verticale, composition asymétrique.
   Lisibilité : textes ≥ 4,5:1 (mesurés), cibles tactiles ≥ 44 px, effets au survol légers, coupés si « mouvement réduit ». */

.sn-bc { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(64px, 9vw, 120px); }
.sn-bc .contact-fond { position: absolute; inset: 0; z-index: -2; }
.sn-bc .contact-fond img { width: 100%; height: 100%; object-fit: cover; }
.sn-bc-voile { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sn-bc-scene { position: relative; }

.sn-bc-carte { position: relative; display: grid; grid-template-columns: 250px 1fr; gap: clamp(28px, 4vw, 56px); align-items: center;
  max-width: 960px; margin-inline: auto; padding: clamp(28px, 4vw, 52px); border-radius: 6px;
  -webkit-backdrop-filter: blur(24px) saturate(1.2); backdrop-filter: blur(24px) saturate(1.2);
  transition: box-shadow .5s ease, border-color .5s ease; }
/* fin liseré doré : le bord + un second filet intérieur */
.sn-bc-liseret { position: absolute; inset: 9px; border: 1px solid var(--sn-bc-liseret); border-radius: 3px; pointer-events: none; }
.sn-bc-photo { margin: 0; position: relative; }
.sn-bc-photo picture, .sn-bc-photo > img { display: block; }
.sn-bc-photo img { display: block; width: 100%; height: auto; aspect-ratio: 340 / 420; object-fit: cover; }
.sn-bc-photo .sn-bc-logo { aspect-ratio: auto; object-fit: contain; padding: 24px; background: #F5F0E8; }
.sn-bc-texte { min-width: 0; }
.sn-bc-sur { margin: 0 0 14px; font-family: var(--police-texte, "Raleway", system-ui, sans-serif); font-size: 11.5px; font-weight: 500;
  letter-spacing: .32em; text-transform: uppercase; }
.sn-bc-nom { margin: 0; font-family: "ivymode-variable", "Gloock", Georgia, "Times New Roman", serif; font-variation-settings: "wght" 300;
  font-weight: 300; font-synthesis: none; font-size: clamp(40px, 4.6vw, 60px); line-height: 1.02; letter-spacing: .005em; }
.sn-bc-filet { display: block; width: 56px; height: 1px; margin: 22px 0 16px; background: #C4A87C; }
.sn-bc-role { margin: 0 0 22px; font-size: 15px; letter-spacing: .04em; }
.sn-bc-liens { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 2px; }
.sn-bc-liens li { display: flex; }
.sn-bc-liens a, .sn-bc-adresse { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; font-size: 16px; text-decoration: none;
  color: inherit; border-radius: 2px; }
.sn-bc-liens a span { background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-repeat: no-repeat;
  background-position: 0 100%; transition: background-size .35s ease; }
.sn-bc-liens a:hover span, .sn-bc-liens a:focus-visible span { background-size: 100% 1px; }
.sn-bc-adresse { font-size: 14.5px; }
.sn-bc-ico { width: 20px; height: 20px; flex: none; color: var(--sn-bc-icone); }
.sn-bc-phrase { margin: 0 0 26px; max-width: 46ch; font-size: 15px; line-height: 1.65; }
.sn-bc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.sn-bc-bouton { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 50px; padding: 0 28px;
  border: 1px solid transparent; border-radius: 2px; font: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  cursor: pointer; transition: background-color .35s ease, color .35s ease, border-color .35s ease, transform .35s ease; }
.sn-bc-bouton .sn-bc-ico { width: 18px; height: 18px; color: currentColor; transition: transform .35s ease; }
.sn-bc-bouton:hover .sn-bc-ico { transform: translateX(3px); }
.sn-bc-vcard { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 2px; font-size: 13px; letter-spacing: .08em;
  text-decoration: none; color: inherit; border-bottom: 1px solid var(--sn-bc-liseret-fort); transition: color .35s ease, border-color .35s ease; }
.sn-bc-vcard .sn-bc-ico { width: 18px; height: 18px; }
.sn-bc-bouton:focus-visible, .sn-bc-vcard:focus-visible, .sn-bc-liens a:focus-visible { outline: 2px solid #C4A87C; outline-offset: 4px; }

/* ── V1 : verre fumé sombre ── */
.sn-bc--v1 { --sn-bc-liseret: rgba(196, 168, 124, .30); --sn-bc-liseret-fort: rgba(196, 168, 124, .75); --sn-bc-icone: #C4A87C; }
.sn-bc--v1 .sn-bc-voile { background: linear-gradient(180deg, rgba(10, 8, 5, .25), rgba(10, 8, 5, .45)); }
.sn-bc--v1 .sn-bc-carte { color: #F5F0E8; background: linear-gradient(135deg, rgba(25, 19, 11, .82), rgba(25, 19, 11, .68));
  border: 1px solid rgba(196, 168, 124, .62); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .06); }
.sn-bc--v1 .sn-bc-carte:hover { border-color: rgba(196, 168, 124, .9); }
.sn-bc--v1 .sn-bc-photo { padding: 7px; border: 1px solid rgba(196, 168, 124, .7); border-radius: 130px 130px 4px 4px; }
.sn-bc--v1 .sn-bc-photo img { border-radius: 123px 123px 2px 2px; }
.sn-bc--v1 .sn-bc-sur { color: #C4A87C; }
.sn-bc--v1 .sn-bc-role { color: #E8E0D0; }
.sn-bc--v1 .sn-bc-org { color: #C9BFAF; }
.sn-bc--v1 .sn-bc-phrase, .sn-bc--v1 .sn-bc-adresse { color: #D9D1C3; }
.sn-bc--v1 .sn-bc-bouton { background: #C4A87C; color: #19130B; }
.sn-bc--v1 .sn-bc-bouton:hover { background: #D4BC94; }
.sn-bc--v1 .sn-bc-vcard { color: #F5F0E8; }
.sn-bc--v1 .sn-bc-vcard:hover { color: #fff; border-color: #C4A87C; }

/* ── V2 : verre clair givré ── */
.sn-bc--v2 { --sn-bc-liseret: rgba(122, 95, 54, .28); --sn-bc-liseret-fort: rgba(122, 95, 54, .7); --sn-bc-icone: #7A5F36; }
.sn-bc--v2 .sn-bc-voile { background: linear-gradient(180deg, rgba(245, 240, 232, .10), rgba(25, 19, 11, .25)); }
.sn-bc--v2 .sn-bc-carte { color: #19130B; background: linear-gradient(135deg, rgba(248, 245, 238, .86), rgba(240, 234, 222, .74));
  -webkit-backdrop-filter: blur(28px) saturate(1.35); backdrop-filter: blur(28px) saturate(1.35);
  border: 1px solid rgba(196, 168, 124, .85); box-shadow: 0 40px 90px -45px rgba(25, 19, 11, .55), inset 0 1px 0 rgba(255, 255, 255, .7); }
.sn-bc--v2 .sn-bc-carte:hover { box-shadow: 0 46px 100px -45px rgba(25, 19, 11, .65), inset 0 1px 0 rgba(255, 255, 255, .7); }
.sn-bc--v2 .sn-bc-photo { padding: 7px; border: 1px solid rgba(196, 168, 124, .95); border-radius: 50%; }
.sn-bc--v2 .sn-bc-photo img { border-radius: 50%; }
.sn-bc--v2 .sn-bc-sur { color: #6E5530; }
.sn-bc--v2 .sn-bc-role { color: #3A3128; }
.sn-bc--v2 .sn-bc-org { color: #5A4F44; }
.sn-bc--v2 .sn-bc-phrase, .sn-bc--v2 .sn-bc-adresse { color: #4A4038; }
.sn-bc--v2 .sn-bc-bouton { background: #19130B; color: #F5F0E8; }
.sn-bc--v2 .sn-bc-bouton:hover { background: #2E2416; border-color: #C4A87C; }
.sn-bc--v2 .sn-bc-vcard { color: #19130B; }
.sn-bc--v2 .sn-bc-vcard:hover { border-color: #19130B; }

/* ── V3 : carte verticale, composition asymétrique (carte étroite à gauche, phrase éditoriale à droite) ── */
.sn-bc--v3 { --sn-bc-liseret: rgba(196, 168, 124, .30); --sn-bc-liseret-fort: rgba(196, 168, 124, .75); --sn-bc-icone: #C4A87C; }
.sn-bc--v3 .sn-bc-voile { background: linear-gradient(90deg, rgba(10, 8, 5, .30) 0%, rgba(10, 8, 5, .55) 55%, rgba(10, 8, 5, .72) 100%); }
.sn-bc--v3 .sn-bc-scene { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: clamp(32px, 6vw, 96px); align-items: end; }
.sn-bc--v3 .sn-bc-carte { grid-template-columns: 1fr; gap: 26px; max-width: none; margin: 0; padding: 18px 18px 34px; text-align: center; color: #F5F0E8;
  background: linear-gradient(180deg, rgba(25, 19, 11, .58), rgba(25, 19, 11, .86) 55%); border: 1px solid rgba(196, 168, 124, .62);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .7); }
.sn-bc--v3 .sn-bc-carte:hover { border-color: rgba(196, 168, 124, .9); }
.sn-bc--v3 .sn-bc-photo { margin: 0 auto; width: min(100%, 300px); padding: 7px; border: 1px solid rgba(196, 168, 124, .7); border-radius: 160px 160px 4px 4px; }
.sn-bc--v3 .sn-bc-photo img { border-radius: 153px 153px 2px 2px; }
.sn-bc--v3 .sn-bc-texte { padding: 0 10px; }
.sn-bc--v3 .sn-bc-nom { font-size: clamp(36px, 3.6vw, 48px); }
.sn-bc--v3 .sn-bc-filet { margin-inline: auto; }
.sn-bc--v3 .sn-bc-sur { color: #C4A87C; }
.sn-bc--v3 .sn-bc-role { color: #E8E0D0; }
.sn-bc--v3 .sn-bc-org { color: #C9BFAF; }
.sn-bc--v3 .sn-bc-liens { justify-items: center; }
.sn-bc--v3 .sn-bc-adresse { color: #D9D1C3; }
.sn-bc--v3 .sn-bc-actions { flex-direction: column; align-items: stretch; gap: 10px; }
.sn-bc--v3 .sn-bc-bouton { background: #C4A87C; color: #19130B; width: 100%; padding: 0 18px; letter-spacing: .12em; white-space: nowrap; font-size: 12px; }
.sn-bc--v3 .sn-bc-bouton:hover { background: #D4BC94; }
.sn-bc--v3 .sn-bc-vcard { align-self: center; color: #F5F0E8; }
.sn-bc--v3 .sn-bc-vcard:hover { color: #fff; border-color: #C4A87C; }
.sn-bc-edito { color: #F5F0E8; padding-bottom: 24px; max-width: 560px; }
.sn-bc-edito .sn-bc-sur { color: #D4BC94; }
.sn-bc-titre { margin: 0 0 18px; font-family: "ivymode-variable", "Gloock", Georgia, "Times New Roman", serif; font-variation-settings: "wght" 300;
  font-weight: 300; font-synthesis: none; font-size: clamp(36px, 4.4vw, 64px); line-height: 1.04; }
.sn-bc-edito-texte { margin: 0; font-size: 16px; line-height: 1.7; color: #E8E0D0; max-width: 42ch; }

/* ── Téléphone et tablette ── */
@media (max-width: 760px) {
  .sn-bc-carte { grid-template-columns: 1fr; text-align: center; padding: 26px 22px 30px; }
  .sn-bc-photo { width: 200px; margin-inline: auto; }
  .sn-bc--v2 .sn-bc-photo { width: 190px; }
  .sn-bc-filet { margin-inline: auto; }
  .sn-bc-liens { justify-items: center; }
  .sn-bc-phrase { margin-inline: auto; }
  .sn-bc-actions { flex-direction: column; align-items: stretch; }
  .sn-bc-bouton { width: 100%; padding: 0 16px; letter-spacing: .12em; font-size: 12px; white-space: nowrap; }
  .sn-bc-vcard { align-self: center; }
  .sn-bc--v3 .sn-bc-scene { grid-template-columns: 1fr; }
  .sn-bc--v3 .sn-bc-photo { width: min(100%, 240px); }
  .sn-bc-edito { padding-bottom: 0; text-align: center; margin-inline: auto; }
}
@media (min-width: 761px) and (max-width: 1000px) {
  .sn-bc-carte { grid-template-columns: 200px 1fr; }
  .sn-bc--v3 .sn-bc-scene { grid-template-columns: 1fr; }
  .sn-bc--v3 .sn-bc-carte { max-width: 420px; margin-inline: auto; }
  .sn-bc-edito { text-align: center; margin-inline: auto; }
}
/* Sans « backdrop-filter » : fonds plus opaques (lisibilité garantie) */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .sn-bc--v1 .sn-bc-carte, .sn-bc--v3 .sn-bc-carte { background: rgba(25, 19, 11, .92); }
  .sn-bc--v2 .sn-bc-carte { background: rgba(246, 242, 234, .95); }
}
@media (prefers-reduced-motion: reduce) {
  .sn-bc *, .sn-bc-carte { transition: none !important; }
  .sn-bc-bouton:hover .sn-bc-ico { transform: none; }
}