/* =========================================================
   NUTRITION.NELLES — PRODUIT (GROUPE COMMERCIAL)
   CSS nettoyé : pas de doublons "cassants", responsive conservé
========================================================== */

:root{
  --ink:#1f1f1f;
  --muted:#555;
  --soft:#6b6b6b;
  --paper:#FCFCFA;
  --bg:#FFF4EA;              /* fond hero */
  --card:#ffffff;
  --line:rgba(0,0,0,.10);
  --line2:rgba(0,0,0,.14);

  --good-bg:rgba(166,191,43,.14);
  --good-bd:rgba(166,191,43,.40);

  --warn-bg:rgba(242,183,5,.15);
  --warn-bd:rgba(242,183,5,.42);

  --tech-bg:rgba(31,127,163,.08);
  --tech-bd:rgba(31,127,163,.22);

  --shadow: 0 18px 50px rgba(0,0,0,.08);
  --shadow2: 0 10px 26px rgba(0,0,0,.07);

  --r:22px;
  --r2:16px;
  --max:1120px;

  /* Recettes (cartes dans scroll) */
  --recipe-card-w: clamp(220px, 78vw, 300px);
}

/* ---------------------------
   Base / Reset doux
--------------------------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.45;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
button{font-family:inherit}

/* Focus visible (accessibilité) */
:focus-visible{
  outline:3px solid rgba(31,127,163,.35);
  outline-offset:2px;
  border-radius:10px;
}

/* ---------------------------
   Layout / Header
--------------------------- */
.wrap{max-width:var(--max); margin:0 auto; padding:0 18px}

.site{
  background:rgba(252,252,250,.75);
  backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 0;
}
.brand{display:flex; align-items:center; gap:10px}
.main{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}

.navlink{
  padding:9px 12px;
  border-radius:999px;
  border:1px solid transparent;
  color:rgba(0,0,0,.72);
  font-size:13px;
  background:transparent;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.navlink:hover{transform:translateY(-1px); border-color:var(--line2); background:rgba(0,0,0,.03)}
.navlink.active{border-color:rgba(0,0,0,.18); background:rgba(0,0,0,.04); color:rgba(0,0,0,.82)}

/* ---------------------------
   Hero
--------------------------- */
.hero{
  background:linear-gradient(180deg,var(--bg),rgba(255,244,234,.55) 55%,rgba(252,252,250,1) 100%);
}
.crumb{
  font-size:12px;
  color:rgba(0,0,0,.58);
  padding:18px 0 10px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}
.crumb a{border-bottom:1px solid rgba(0,0,0,.10); padding-bottom:1px}
.sep{opacity:.45}

.heroCard{
  display:grid;
  grid-template-columns: 1.12fr .88fr;
  gap:18px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  padding:18px;
  margin:0 0 18px;
}
.kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(0,0,0,.58);
}
.kicker i{
  width:10px; height:10px; border-radius:999px;
  background:rgba(0,0,0,.20);
  box-shadow:0 0 0 6px rgba(0,0,0,.05);
  display:inline-block;
}
h1{
  font-family:"Playfair Display", serif;
  font-weight:600;
  letter-spacing:-.02em;
  font-size:44px;
  line-height:1.05;
  margin:8px 0 10px;
}
.lead{margin:0 0 10px; color:rgba(0,0,0,.80); font-size:16px}

.chips{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0}
.chip{
  font-size:12px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.03);
  color:rgba(0,0,0,.78);
}
.chip.good{background:var(--good-bg); border-color:var(--good-bd)}
.chip.warn{background:var(--warn-bg); border-color:var(--warn-bd)}

.season{margin-top:10px}
.season .label{font-size:12px; color:rgba(0,0,0,.62); margin-bottom:7px}
.months{display:flex; flex-wrap:wrap; gap:6px}
.m{
  font-size:12px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.02);
  color:rgba(0,0,0,.62);
  user-select:none;
}
.m.on{
  background:rgba(0,0,0,.08);
  color:rgba(0,0,0,.85);
  border-color:rgba(0,0,0,.18);
}

.note{
  margin-top:12px;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(252,252,250,.85);
  color:rgba(0,0,0,.76);
  font-size:13px;
}

.heroMedia{display:flex; flex-direction:column; gap:10px}
.mediaFrame{
  border-radius:18px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.02);
  box-shadow:var(--shadow2);
  padding:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:260px;
}
.mediaFrame img{
  width:100%;
  max-width:420px;
  height:auto;
  border-radius:14px;
}
.mediaNote{font-size:12px; color:rgba(0,0,0,.62)}

/* ---------------------------
   Main / Sections
--------------------------- */
main{padding:12px 0 34px}
.grid{display:grid; gap:18px}

.section{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow: 0 12px 35px rgba(0,0,0,.05);
  overflow:hidden;
}
.sectionHead{
  padding:16px 16px 10px;
  border-bottom:1px solid rgba(0,0,0,.06);
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.sectionHead h2{
  margin:0;
  font-family:"Playfair Display", serif;
  font-size:22px;
  letter-spacing:-.01em;
}
.hint{font-size:12px; color:rgba(0,0,0,.58)}
.sectionBody{padding:14px 16px 16px}

.cols{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.list{margin:0; padding:0; list-style:none; display:grid; gap:10px}
.li{display:flex; gap:10px; align-items:flex-start}
.dot{width:10px; height:10px; border-radius:999px; background:rgba(0,0,0,.18); margin-top:6px; flex:0 0 10px}
.txt{font-size:14px; color:rgba(0,0,0,.78)}
.txt strong{color:rgba(0,0,0,.88)}

/* Repères */
.repers{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.badge{
  border:1px solid var(--line);
  background:rgba(0,0,0,.02);
  border-radius:16px;
  padding:12px;
}
.badge b{display:block; font-size:12px; color:rgba(0,0,0,.62); margin-bottom:6px}
.badge strong{font-size:14px}
.subline{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.pill{
  font-size:12px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.02);
  color:rgba(0,0,0,.70);
}

/* Callouts */
.callouts{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.call{
  border:1px solid var(--line);
  background:rgba(0,0,0,.02);
  border-radius:18px;
  padding:12px;
  display:grid;
  gap:6px;
}
.call strong{font-size:13px}
.call span{font-size:13px; color:rgba(0,0,0,.72)}
.call strong a{border-bottom:1px solid rgba(0,0,0,.12); padding-bottom:1px}

/* Tech box */
.techBox{
  border:1px solid var(--tech-bd);
  background:var(--tech-bg);
  border-radius:18px;
  padding:12px;
  color:rgba(0,0,0,.78);
  font-size:13px;
}
.techTitle{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:8px;
  font-weight:600;
}
.techSmall{font-size:12px; color:rgba(0,0,0,.60); font-weight:500}
.techCols{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;
}

/* ---------------------------
   Mini-filtres
--------------------------- */
.filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin:6px 0 12px;
}
.fbtn{
  appearance:none;
  border:1px solid var(--line);
  background:rgba(0,0,0,.02);
  border-radius:999px;
  padding:9px 12px;
  font-size:13px;
  color:rgba(0,0,0,.78);
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.fbtn:hover{transform:translateY(-1px); border-color:rgba(0,0,0,.18)}
.fbtn.on{
  background:rgba(0,0,0,.10);
  border-color:rgba(0,0,0,.22);
  color:rgba(0,0,0,.88);
}
.freset{
  margin-left:auto;
  font-size:12px;
  color:rgba(0,0,0,.58);
  border-bottom:1px solid rgba(0,0,0,.12);
  padding-bottom:2px;
  cursor:pointer;
  user-select:none;
}

/* ---------------------------
   Variétés
--------------------------- */
.varGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.vCard{
  border:1px solid var(--line);
  background:rgba(0,0,0,.02);
  border-radius:18px;
  padding:12px;
  display:grid;
  gap:10px;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.vCard:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,.07); background:rgba(0,0,0,.025)}
.vTop{display:flex; gap:10px; align-items:center}
.vImg{
  width:58px; height:58px; border-radius:16px;
  border:1px solid var(--line);
  background:#fff;
  overflow:hidden;
  flex:0 0 58px;
  display:flex; align-items:center; justify-content:center;
}
.vImg img{width:100%; height:100%; object-fit:cover}
.vName{font-weight:600; letter-spacing:-.01em}
.vMeta{font-size:12px; color:rgba(0,0,0,.62)}


/* TAGS DESCRIPTIFS — VARIÉTÉS */
.vTags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.vTag {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 24px;            /* 🔒 hauteur fixe */
  padding: 0 10px;         /* horizontal uniquement */
  line-height: 1;          /* stop effet bulle */

  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;

  border-radius: 6px;      /* badge, pas rond */
  background: rgba(0,0,0,.06);
  color: #333;
}

/* TAGS MODES — VARIÉTÉS */
.vModes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.vMode {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 26px;              /* 🔒 hauteur verrouillée */
  padding: 0 10px;           /* horizontal uniquement */
  line-height: 1;            /* empêche l’effet rond */

  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;

  border-radius: 6px;        /* pas de pillule excessive */
  background: rgb(139 140 255 / 23%);
  color: #333;
}

/* Variante "good" si tu en as */
.vMode.good {
  background: rgba(166,191,43,.18);
  color: #3d4a12;
}
.vMode.warn{background:var(--warn-bg); border-color:var(--warn-bd)}

/* ---------------------------
   Composition
--------------------------- */
.partGrid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.part{
  border:1px solid var(--line);
  background:rgba(0,0,0,.02);
  border-radius:18px;
  padding:12px;
  display:grid;
  gap:10px;
}
.part h3{
  margin:0;
  font-family:"Playfair Display", serif;
  font-size:18px;
  letter-spacing:-.01em;
}
.part p{margin:0; font-size:13px; color:rgba(0,0,0,.76)}

.taste{
  font-size:0.9rem;
  margin:.25rem 0 .75rem;
  color:#333;
}
.taste .stars{letter-spacing:1px}
.taste .muted{color:#777; font-style:italic}

.marks{display:flex; flex-wrap:wrap; gap:8px}
.mark{
  font-size:12px;
  padding:6px 9px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.60);
  color:rgba(0,0,0,.72);
}
.mark.good{background:var(--good-bg); border-color:var(--good-bd)}
.mark.warn{background:var(--warn-bg); border-color:var(--warn-bd)}

.micro{
  border:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.70);
  border-radius:16px;
  padding:10px;
  font-size:12px;
  color:rgba(0,0,0,.70);
  display:grid;
  gap:6px;
}
.micro b{font-size:12px}
.micro .mono{opacity:.9}

/* Tag "Bientôt" – optionnel (si tu l’utilises plus tard) */
.mark.tech-soon{
  display:inline-flex;
  align-items:center;
  width:auto;
  min-width:unset;
  padding:2px 6px;
  line-height:1;
  white-space:nowrap;
}

/* Gestes clés : "Bientôt" doit rester en badge */
#gestes .mark.warn{
  display:inline-flex;
  align-items:center;
  width:auto;
  min-width:unset;
  max-width:max-content;
  padding:2px 8px;
  line-height:1;
  white-space:nowrap;
  margin-left:8px;
  vertical-align:middle;
}

/* Lien dynamique gestes (JS remplace <strong> → <a>) */
.gesture-link{
  font-weight:600;
  border-bottom:1px solid rgba(0,0,0,.12);
  padding-bottom:1px;
}
.gesture-link:hover{border-bottom-color:rgba(0,0,0,.22)}

/* ---------------------------
   Tableau
--------------------------- */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius:18px;
  border:1px solid var(--line);
}
.table td{
  padding:11px 12px;
  border-bottom:1px solid rgba(0,0,0,.06);
  font-size:13px;
  color:rgba(0,0,0,.76);
}
.table tr:last-child td{border-bottom:none}
.table td:first-child{
  width:38%;
  color:rgba(0,0,0,.62);
  background:rgba(0,0,0,.02);
}

/* ---------------------------
   Cards génériques + Modal
--------------------------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:12px}

.card{
  border:1px solid var(--line);
  background:rgba(0,0,0,.02);
  border-radius:18px;
  padding:12px;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  display:grid;
  gap:8px;
}
.card:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,.07); background:rgba(0,0,0,.025)}
.card b{font-size:14px}

.metaRow{display:flex; flex-wrap:wrap; gap:6px}
.metaChip{
  font-size:12px;
  padding:6px 9px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.62);
  color:rgba(0,0,0,.70);
}

.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.42);
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:50;
}
.modal.on{display:flex}
.modalCard{
  width:min(860px, 100%);
  border-radius:24px;
  background:var(--card);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 30px 80px rgba(0,0,0,.25);
  overflow:hidden;
}
.modalTop{
  padding:14px 16px;
  border-bottom:1px solid rgba(0,0,0,.06);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.modalTop h3{margin:0; font-family:"Playfair Display", serif; font-size:22px}
.xbtn{
  appearance:none;
  border:1px solid rgba(0,0,0,.14);
  background:rgba(0,0,0,.02);
  border-radius:999px;
  padding:8px 12px;
  cursor:pointer;
  font-size:13px;
  color:rgba(0,0,0,.78);
}
.modalBody{padding:14px 16px 16px; display:grid; gap:12px}
.modalGrid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.steps ol{margin:0; padding-left:18px}
.steps li{margin:6px 0; color:rgba(0,0,0,.76); font-size:13px}
.ing ul{margin:0; padding-left:18px}
.ing li{margin:6px 0; color:rgba(0,0,0,.76); font-size:13px}

/* ---------------------------
   Recettes — scroll horizontal (fix doublons + règle cassante)
--------------------------- */
.recipes-scroll{
  display:flex;
  gap:16px;
  overflow-x:auto;
  padding-bottom:6px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}

/* scrollbar discrète */
.recipes-scroll::-webkit-scrollbar{height:6px}
.recipes-scroll::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.15);
  border-radius:6px;
}

/* Cartes recettes : la carte porte la largeur + snap */
.recipes-scroll > .card.recipe{
  flex:0 0 var(--recipe-card-w);
  width:var(--recipe-card-w);
  scroll-snap-align:start;
}

/* Carte recette (structure propre) */
.card.recipe{
  padding:0;                 /* important : image bord à bord */
  overflow:hidden;
  cursor:default;            /* évite un curseur trompeur */
}

/* Wrapper image : garde liseré/ombre, ratio stable */
.card.recipe .recipe-img,
.card.recipe .media{          /* alias si tu réutilises .media un jour */
  aspect-ratio: 4 / 3;
  overflow:hidden;
  background:#fff;
  border-radius:14px 14px 0 0;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.07),
    0 3px 8px rgba(0,0,0,.08);
}

/* Image cover */
.card.recipe .recipe-img img,
.card.recipe .media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Corps carte recette */
.card.recipe .cardBody{
  padding:14px 16px;
  display:grid;
  gap:8px;
}
.card.recipe .cardBody h3{
  margin:0;
  font-size:14px;
  font-weight:600;
  letter-spacing:-.01em;
}

/* Ligne meta + action */
#recettes .recipe-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:6px;
}
#recettes .recipe-row .meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  font-size:12px;
  color:rgba(0,0,0,.65);
}
#recettes .recipe-row .actions{flex-shrink:0}

/* Bouton "Voir la recette" */
#recettes .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.14);
  background:rgba(0,0,0,.02);
  font-size:12px;
  font-weight:600;
  color:rgba(0,0,0,.82);
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
  white-space:nowrap;
}
#recettes .btn:hover{
  transform:translateY(-1px);
  background:rgba(0,0,0,.04);
  border-color:rgba(0,0,0,.20);
}

/* Sécurité mobile : row empilée si trop serré */
@media (max-width:520px){
  #recettes .recipe-row{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
}


/* =========================
   CROSS-SELL — Cocci.Nelles
========================= */
.discover{margin-top:28px}
.partnerCard{
  background:#F9F6F5;
  border:1px solid rgba(31,31,31,.10);
  border-radius:18px;
  padding:16px;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  display:grid;
  gap:12px;
}
.partnerTop{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.partnerLogo{
  width:60px;
  height:60px;
  object-fit:contain;
  flex:0 0 auto;
}
.partnerHead{min-width:0}
.partnerName{margin:0; font-size:1.05rem; line-height:1.2}
.partnerTag{margin:2px 0 0; color:rgba(31,31,31,.70)}
.partnerCopy{margin:0; color:rgba(31,31,31,.85)}
.partnerCta{
  justify-self:start;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:12px;
  background:#00B5B8;
  color:#fff;
  text-decoration:none;
  font-weight:600;
  line-height:1;
}
.partnerCta:hover{filter:brightness(.96)}

@media (min-width: 820px){
  .partnerCard{padding:18px}
  .partnerLogo{width:66px;height:66px}
}

/* ---------------------------
   Share
--------------------------- */
.shareBar{display:flex; flex-wrap:wrap; gap:10px}
.shareBtn{
  border:1px solid rgba(0,0,0,.14);
  background:rgba(0,0,0,.02);
  padding:10px 12px;
  border-radius:999px;
  font-size:13px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform .15s ease, background .15s ease;
}
.shareBtn:hover{transform:translateY(-1px); background:rgba(0,0,0,.04)}
.shareBtn.wa{background:rgba(37,211,102,.12)}
.shareBtn.fb{background:rgba(24,119,242,.10)}
.shareBtn.pin{background:rgba(230,0,35,.10)}
.shareBtn.copy{background:rgba(0,0,0,.02)}

/* ---------------------------
   Footer
--------------------------- */
footer.site{border-top:1px solid var(--line); border-bottom:none}
.foot{display:flex; gap:14px; justify-content:space-between; padding:18px 0; flex-wrap:wrap}
.foot p{margin:0; color:rgba(0,0,0,.70); font-size:13px}
.footLinks{display:flex; gap:12px; flex-wrap:wrap}
.footLinks a{
  font-size:13px;
  color:rgba(0,0,0,.72);
  border-bottom:1px solid rgba(0,0,0,.10);
  padding-bottom:2px;
}

/* ---------------------------
   Responsive
--------------------------- */
@media (max-width: 980px){
  .heroCard{grid-template-columns:1fr; padding:16px}
  .cols{grid-template-columns:1fr}
  .repers{grid-template-columns:repeat(2,1fr)}
  .callouts{grid-template-columns:1fr}
  .varGrid{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:1fr}
  .partGrid{grid-template-columns:1fr}
  h1{font-size:38px}

  .cocci-wrap{grid-template-columns: 64px 1fr}
  .cocci-btn{grid-column:1 / -1}
}

@media (max-width: 520px){
  .varGrid{grid-template-columns:1fr}
  h1{font-size:34px}
}

/* Réduction animations si demandé */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important}
  .navlink, .fbtn, .vCard, .card, .shareBtn, .cocci-btn, #recettes .btn{
    transition:none !important;
  }
  .navlink:hover, .fbtn:hover, .vCard:hover, .card:hover, .shareBtn:hover, .cocci-btn:hover, #recettes .btn:hover{
    transform:none !important;
  }
}

.vCard.is-link {
  cursor: pointer;
}

.vCard.is-link:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  transform: translateY(-2px);
}

.vCard.is-disabled {
  opacity: .9;
  cursor: default;
}

.vCard .mark.warn {
  margin-top: 8px;
  display: inline-block;
}

.call[hidden] {
  display: none !important;
}