/* Thème mauve pastel — surcharge des variables Bootstrap success */
:root {
  --bs-success:                #9b72b0;
  --bs-success-rgb:            155, 114, 176;
  --bs-success-bg-subtle:      #ede0f5;
  --bs-success-border-subtle:  #d4b8e8;
  --bs-success-text-emphasis:  #5c3d70;
}

.btn-success {
  --bs-btn-bg:                 #9b72b0;
  --bs-btn-border-color:       #9b72b0;
  --bs-btn-hover-bg:           #7a5a8a;
  --bs-btn-hover-border-color: #7a5a8a;
  --bs-btn-active-bg:          #7a5a8a;
  --bs-btn-active-border-color:#7a5a8a;
}

.card-hover {
  transition: transform .2s ease, box-shadow .2s ease;
  cursor: pointer;
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(155,114,176,.2) !important;
}

/* Carrés de difficulté */
.squares { display: flex; gap: 3px; display: inline-flex; align-items: center; vertical-align: middle; }
.sq {
  width: 18px;
  height: 18px;
  border-radius: 2px;
  display: inline-block;
}
.sq.filled { background-color: #9b72b0; }
.sq.empty  { background-color: #D3D1C7; }
.sq-sm { width: 12px; height: 12px; }

/* Marqueurs ingrédients / instructions */
.recipe-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 0;
}
.marker {
  flex-shrink: 0;
  display: inline-block;
  background-color: #9b72b0;
}
.marker.diamond {
  width: 9px;
  height: 9px;
  min-width: 9px;
  min-height: 9px;
  transform: rotate(45deg);
  margin: 3px 2px 0;
}
.marker.circle {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 2px;
}

/* Nav pills — couleur mauve */
.nav-pills .nav-link {
  color: #9b72b0;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: #9b72b0;
  color: #fff;
}
.nav-pills .nav-link:hover:not(.active) {
  background-color: #ede0f5;
  color: #7a5a8a;
}

.btn-outline-success {
  --bs-btn-color:              #9b72b0;
  --bs-btn-border-color:       #9b72b0;
  --bs-btn-hover-bg:           #9b72b0;
  --bs-btn-hover-border-color: #9b72b0;
  --bs-btn-active-bg:          #7a5a8a;
  --bs-btn-active-border-color:#7a5a8a;
}

/* Bouton favori sur vignettes recettes */
.btn-fav-toggle {
  background: rgba(255,255,255,.85);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e53935;
  transition: transform .15s, background .2s;
  backdrop-filter: blur(4px);
}
.btn-fav-toggle:hover {
  background: #fff;
  transform: scale(1.15);
  color: #c62828;
}
.btn-fav-toggle .bi-heart-fill {
  color: #e53935;
}

/* Avatar picker — page Mon compte */
/* Wrapper avatar (image + label) */
.avatar-picker-item-wrap {
  cursor: pointer;
  width: 72px;
  transition: transform .15s;
}
.avatar-picker-item-wrap:hover {
  transform: scale(1.08);
}
.avatar-picker-item-wrap:hover .avatar-picker-item {
  border-color: #d4b8e8;
}
.avatar-picker-item-wrap.active .avatar-label {
  color: #5c3d70;
  font-weight: 600;
}

.avatar-picker-item {
  cursor: pointer;
  border: 3px solid transparent;
  border-radius: 50%;
  padding: 2px;
  transition: border-color .2s;
}
.avatar-picker-item.active {
  border-color: #9b72b0;
  box-shadow: 0 0 0 3px rgba(155, 114, 176, .25);
}

.avatar-label {
  font-size: .65rem;
  color: #6c757d;
  margin-top: 2px;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ═══ Bloc impression : masqué à l'écran ═══ */
.print-only { position: absolute; left: -9999px; width: 0; height: 0; overflow: hidden; }
.print-2col { display: contents; }

/* ═══ Impression recette (style magazine, une page A4) ═══ */
@media print {
  @page { margin: 0; size: A4; }

  /* ── Masquer tout le contenu web ── */
  nav.navbar, .bg-light.border-bottom, footer,
  .breadcrumb, .alert-warning, .alert-light,
  #avis-section, #carouselRecette,
  #btn-favori, .btn-fav-toggle, .btn-fav-guest,
  .col-lg-4, .col-lg-8, .d-print-none,
  .mt-4.mb-5, .row, .lead { display: none !important; }

  main.container { max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
  .container { padding: 0 !important; max-width: 100% !important; }

  /* ── Afficher le bloc impression ── */
  .print-only { position: static !important; left: auto !important; width: auto !important; height: auto !important; overflow: visible !important; }

  /* Bandeau mauve en haut */
  .print-banner {
    background: #9b72b0;
    color: #fff;
    font-size: 20pt;
    font-weight: 700;
    padding: 14px 20px;
    margin-top: 16px;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Grille photo + titre : 1/3 — 2/3 */
  .print-top {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
    padding: 24px 20px 14px;
  }
  .print-photo {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 10px;
  }
  .print-title-block {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 4px;
  }
  .print-title-block h1 {
    font-size: 24pt;
    font-weight: 700;
    margin: 0 0 8px;
  }
  .print-meta {
    font-size: 10pt;
    color: #444;
    margin: 0 0 30px;
  }

  /* Description dans le bloc titre (sans titre, filet mauve) */
  .print-description {
    font-size: 10.5pt;
    line-height: 1.45;
    color: #444;
    font-style: italic;
    border-left: 3px solid #9b72b0;
    padding: 6px 10px;
    margin: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Grille ingrédients + instructions : 1/3 — 2/3 */
  .print-body {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 0 20px;
    padding: 20px 20px 0;
    align-items: start;
  }
  .print-ingredients {
    padding-left: 14px;
    padding-top: 6px;
  }
  .print-body h4 {
    font-size: 15pt;
    font-weight: 700;
    margin: 0 0 12px;
    padding: 0;
    color: #333;
  }
  .print-body h4 i {
    font-size: 17pt;
    vertical-align: middle;
    margin-right: 4px;
  }
  .print-content {
    font-size: 10.5pt;
    line-height: 1.5;
    color: #222;
  }
  .print-instructions .print-content {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 10px 12px;
    background: #fafafa;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Couleurs forcées */
  .marker { background-color: #9b72b0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sq.filled { background-color: #9b72b0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sq.empty  { background-color: #D3D1C7 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .badge { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* QR code en bas à gauche */
  .print-qr {
    position: fixed;
    bottom: 16px;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .print-qr img {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .print-qr span {
    font-size: 8.5pt;
    color: #666;
    font-style: italic;
  }

  /* Pas de liens soulignés */
  a { text-decoration: none !important; color: #000 !important; }

  /* Typographie générale */
  body { font-size: 9pt !important; color: #000 !important; }
}