/* ============================================
   CSS GLOBAL - SOMMAIRE / PLAN DU FICHIER / de-lafontaine.ca
=============================================
   Projet : de-lafontaine.ca
   Fichier : main.css
   Description : Styles globaux du site
   Auteur : Francis Lafontaine
   Date : 2025-06-07

1. Importations des polices Google Fonts
2. Styles généraux du corps et du texte
3. Styles du menu de navigation (navbar)
4. Styles des boutons et éléments interactifs
5. Styles des logos et images
6. Styles des sections pleine page (fullscreen)
7. Responsive design (adaptations mobiles)
8. Cartes et images de contenus (posts, voyages, recettes)
9. Styles des timelines et événements
10. Styles des animations globales (bulles, pulses, fadeIn, etc.)
11. Styles du footer (pied de page)
12. Styles spécifiques pages (ex: page single travel)
13. Styles supplémentaires / overrides Bootstrap
14. Commentaires & notes diverses

============================================= */

/* ============================================
   1. Importations des polices Google Fonts
============================================= */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Karla:wght@400;700&family=Lora:wght@400;700&display=swap");
/* Importation d'une police manuscrite pour le branding */
@import url("https://fonts.googleapis.com/css2?family=Great+Vibes&family=Playfair+Display:wght@700&display=swap");

:root {
  /* Couleur principale */
  --color-primary: #b5e95e;
  --color-primary-over: 
    /* Variantes automatiques (UI) */ --color-primary-50:
    #f4fce6;
  --color-primary-100: #e6f8c3;
  --color-primary-200: #d4f09a;
  --color-primary-300: #c0e96f;
  --color-primary-400: #b0e24f;
  --color-primary-500: #a2e436; /* base */
  --color-primary-600: #8fcf2f;
  --color-primary-700: #78b526;
  --color-primary-800: #5f8f1e;
  --color-primary-900: #466815;

  /* Neutres */
  --color-text: #111;
  --color-muted: #666;
  --color-bg: #ffffff;

  --color-link: #466815; /* très lisible */
  --color-link-hover: #2f4d0f; /* encore plus foncé */
}

/* ============================================
   2. Styles généraux du corps et du texte
============================================= */

/* Style global du texte */
body {
  font-family: "Karla", sans-serif;
  font-size: 18px;
  line-height: 1.6;
}

/* Titres principaux */
.accordion-item .accordion-button {
  font-size: 1.75rem !important;
}
h1,
h2 {
  font-family: "Great Vibes", cursive !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
}

/* Sous-titres */
/*h3 {*/
/*  font-family: "Lora", serif;*/
/*  !*border-left: 1px solid #800080; !* Mauve *!*!*/
/*  font-weight: 700;*/
/*}*/

/*h4,*/
/*h5,*/
/*blockquote {*/
/*  font-family: "Lora", serif;*/
/*  font-style: italic;*/
/*  color: #593196;*/
/*  border-left: 4px solid #593196;*/
/*  padding-left: 15px;*/
/*  margin: 20px 0;*/
/*}*/
/* Texte normal */
/*p {*/
/*  font-family: "Karla", sans-serif;*/
/*  font-weight: 400;*/
/*}*/

/*a {*/
/*  text-decoration: none;*/
/*}*/

/* Texte accentué (ex: citations, slogans) */
/*blockquote,*/
/*.highlight-text {*/
/*  font-family: "Playfair Display", serif;*/
/*  font-style: italic;*/
/*}*/

.bg-gradient-black {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8));
}

/* ============================================
   3. Styles du menu de navigation (navbar)
============================================= */
/* Pour ton menu dropdown */
.dropdown-menu.show {
  position: absolute !important; /* s'assurer qu'il n'est pas statique */
  z-index: 1100 !important; /* supérieur au z-index de la subnav */
}

footer p,
footer .nav-link,
.navbar-nav .nav-link {
  position: relative;
  color: #111 !important;
  font-weight: 600;
  font-size: 1.8rem;
  font-family: "Great Vibes", cursive;
  transition: all 0.3s ease-in-out;
}

.navbar-nav .nav-link::before {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 0;
  height: 1px;
  width: 0;
  background: linear-gradient(to right, #000, #333);
  transition: width 0.3s ease-in-out;
  opacity: 0.6;
}

.navbar-nav .nav-link:hover::before,
.navbar-nav .nav-link.active::before {
  width: 100%;
}

.navbar-nav .nav-link:hover {
  color: #222 !important;
  text-shadow: 0.5px 0.5px 0 #000;
}

.navbar-nav .nav-link.active {
  color: #000 !important;
  background: rgba(255, 255, 255, 0.05);
  /*border-bottom: 1px solid #444;*/
  text-shadow: none;
}

/* ============================================
   4. Styles des boutons et éléments interactifs
============================================= */

.post-link {
  color: var(--color-link);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}

.post-link:hover {
  color: var(--color-link-hover);
}

/* .filtre-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.filtre-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #ddd;
  color: #222;
  padding: 14px 12px;
  border-radius: 6px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease, color 0.3s ease;
  user-select: none;
}
.filtre-btn span {
  font-size: 18px;
}
.filtre-btn:hover {
  background-color: #9ccc65;
  color: white;
  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.2);
}
.filtre-btn-primary {
  background-color: #7cb342;
  color: white;
}
.filtre-btn-primary:hover {
  background-color: #558b2f;
}
.filtre-btn-secondary {
  background-color: #757575;
  color: white;
}
.filtre-btn-secondary:hover {
  background-color: #424242;
}
.filtre-btn.active {
  box-shadow: 0 0 8px 3px #aed581;
  background-color: #aed581;
  color: #2e7d32;
} */
.filtre-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

/* Boutons */
.filtre-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  color: #111;
  padding: 10px 14px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;

  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.04),
    0 8px 20px rgba(0, 0, 0, 0.06);

  transition: all 0.25s ease;
  user-select: none;
}

/* Icônes */
.filtre-btn span,
.filtre-btn i {
  font-size: 1rem;
  opacity: 0.8;
}

/* Hover */
.filtre-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.08),
    0 14px 30px rgba(0, 0, 0, 0.12);
}

/* Boutons Catégories */
.filtre-btn-primary {
  background: linear-gradient(180deg, #ffffff, #f4f4f7);
}

/* Bouton Tous */
.filtre-btn-secondary {
  background: rgba(240, 240, 245, 0.8);
}

/* Actif */
.filtre-btn.active {
  background: linear-gradient(180deg, #ffffff, #f0f0f5);
  color: #000;
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.15),
    inset 0 0 0 1px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}

.accordion-item .accordion-button {
  font-size: inherit !important;
}

/* ============================================
    5. Styles des logos et images
 ============================================= */
.navbar-brand {
  font-family: "Great Vibes", cursive;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: none;
}

/* Alternative avec Playfair Display pour un effet plus classique */
.navbar-brand.alt {
  font-family: "Playfair Display", serif;
  font-size: 1.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.fullscreen-section {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 768px) {
  .navbar-nav .nav-link {
    text-align: center;
  }
}
.accordion-body .alert {
  font-size: 12px;
}
.main-logo {
  max-width: 100px;
}
.menu-logo {
  max-width: 100px;
}
.footer-logo {
  max-width: 100px;
  transform: rotate(90deg);
}

.gallery-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: transform .3s ease;
}

.gallery-img:hover {
    transform: scale(1.05);
}

/* ============================================
   6. Styles des sections pleine page (fullscreen)
============================================= */

/* ============================================
   PAGE ACCUEIL
============================================= */
.accent-line {
  position: relative;
  display: inline-block;
  padding-bottom: 0.3rem;
}

.accent-line::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background-color: #a2e436;
  width: 0;
  animation: loading-line 2s ease-out forwards;
}

@keyframes loading-line {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

.bg-blur {
  background-color: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: all 0.3s ease-in-out;
}

.bg-blur:hover {
  background-color: rgba(255, 255, 255, 0.08);
  transform: scale(1.01);
}

.team-logo {
  max-width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

.team-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  font-size: 1.8rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #a2e436 0%, #ff6f3c 100%);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

.team-card {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  background-color: #fff;
  border-radius: 1rem;
}

.team-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

.team-card-link {
  color: inherit;
  text-decoration: none;
}

.bg-primary-light {
  background-color: rgba(13, 110, 253, 0.1);
  color: #0d6efd;
}

/* ============================================
   PAGE TRAVEL
============================================= */
.travel-text {
  column-count: 2;
  column-gap: 30px;
  text-align: justify;
}
.travel-info {
  background: #f8f9fa;
  border-radius: 5px;
  font-size: 14px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

@media (max-width: 992px) {
  .travel-text {
    column-count: 1; /* 1 colonne sur mobile */
  }
}

.travel-border-gallery {
  border-radius: 87% 13% 88% 12% / 22% 73% 27% 78% !important;
  overflow: hidden;
}

.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

.timeline-item {
  display: flex;
  align-items: center;
  margin: 20px 0;
  padding-left: 30px;
}

.timeline-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  background-color: #a2e436;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.timeline-content {
  padding-left: 50px;
  padding-top: 10px;
  border-left: 3px solid #a2e436;
  margin-left: 20px;
}

.timeline-item h5 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.timeline-item p {
  font-size: 1rem;
  color: #555;
}

.timeline-item-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.timeline-item {
  transition:
    transform 0.3s ease-in-out,
    box-shadow 0.3s ease-in-out;
  /*background: #fff;*/
  /*border-radius: 8px;*/
  /*padding: 10px;*/
}

.timeline-item:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
/* ============================================
     PAGE RECIPE
============================================= */
.recipe-card img,
.post-card img,
.travel-card img {
  max-height: 396px;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

/********************************
* 6. Footer
********************************/
.logo-wrapper {
  width: 100px;
  height: 60px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.f-logo-footer,
.f-logo-footer-inverse {
  width: auto;
  height: 100px;
  transform-origin: center;
}

.f-logo-footer {
  transform: rotate(90deg);
}

.f-logo-footer-inverse {
  transform: rotate(270deg);
}

.hide-desktop {
  display: none;
}
@media (max-width: 768px) {
  .hide-desktop {
    display: block;
  }
}
@media (max-width: 768px) {
  .hide-desktop {
    display: block;
  }
}
@media (max-width: 768px) {
  .hide-mobile {
    display: none;
  }
}

/*.custom-img {*/
/*  width: 100%;*/
/*  max-width: 300px; !* ou 400px selon l’effet voulu *!*/
/*  height: auto;*/
/*}*/

/********************************
* 8. Animation
********************************/
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    transform: translateY(-30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

/********************************
* 11. Styles du footer (pied de page)
********************************/
.angled-line-left {
  height: 20px; /* épaisseur de la ligne */
  background-color: #ffffff; /* couleur de la ligne */
  transform: skewY(-15deg); /* angle de 10 degrés */
  margin-bottom: -10px; /* pour coller le footer */
}
.angled-line-right {
  height: 20px; /* épaisseur de la ligne */
  background-color: #ffffff; /* couleur de la ligne */
  transform: skewY(15deg); /* angle de 10 degrés */
  margin-bottom: -10px; /* pour coller le footer */
}
.angled-chevron {
  width: 100%;
  height: 30px;
  background: linear-gradient(135deg, transparent 50%, #ffffff 50%);
}

/********************************
* 12.Apple card
********************************/
.apple-card {
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.apple-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

/* Image */
.apple-card-img img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.apple-card:hover img {
  transform: scale(1.05);
}

/* Body */
.apple-card-body {
  padding: 20px;
}

.apple-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.apple-desc {
  font-size: 0.9rem;
  color: #6e6e73;
}

/* Meta */
.apple-meta {
  display: flex;
  /* justify-content: space-between; */
  font-size: 0.8rem;
  color: #86868b;
  margin-top: 10px;
}

/* Actions */
.apple-actions {
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Boutons */
.apple-link {
  font-size: 0.9rem;
  color: #a2e436;
  text-decoration: none;
  font-weight: 500;
}

.apple-link:hover {
  text-decoration: underline;
}

.apple-btn {
  background: #a2e436;
  border: none;
  color: white;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.85rem;
  transition: background 0.2s;
}

.apple-btn:hover {
  background: --color-primary-over;
}

.apple-btn-outline {
  border: 1px solid #a2e436;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.85rem;
  color: #1d1d1f;
  text-decoration: none;
}

.apple-btn-outline:hover {
  background: #a2e436;
}

/* ============================= */
/* Apple Aside (Filtres) */
/* ============================= */

.apple-aside {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.apple-aside:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.apple-aside-body {
  padding: 20px;
}

/* Titre */
.apple-aside-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 16px;
  color: #1d1d1f;
}

/* Champs */
.apple-field {
  margin-bottom: 14px;
}

.apple-label {
  display: block;
  font-size: 0.75rem;
  color: #6e6e73;
  margin-bottom: 4px;
}

/* Inputs & Select */
.apple-input,
.apple-select {
  width: 100%;
  border: 1px solid #d2d2d7;
  border-radius: 12px;
  padding: 6px 10px;
  font-size: 0.85rem;
  background: #fff;
  transition: all 0.2s ease;
}

.apple-input:focus,
.apple-select:focus {
  outline: none;
  border-color: #a2e436;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15);
}

/* Bouton */
.apple-aside .apple-btn {
  margin-top: 10px;
  border-radius: 999px;
}

.apple-side-card {
  background: linear-gradient(180deg, var(--color-primary-50), #ffffff);
  border-radius: 18px;
  padding: 1.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.apple-side-title {
  font-weight: 600;
  margin-bottom: 1rem;
}

.apple-action-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.apple-action-list li {
  margin-bottom: 0.5rem;
}

.apple-action-list a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.8rem;
  border-radius: 12px;
  text-decoration: none;
  color: #111;
  transition: all 0.2s ease;
}

.apple-action-list a:hover {
  background: var(--color-primary-100);
  transform: translateX(4px);
}

.apple-action-list span {
  font-weight: 500;
}

.apple-welcome-card {
  background: linear-gradient(135deg, #ffffff, var(--color-primary-50));
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

.apple-welcome-badge {
  display: inline-block;
  background: var(--color-primary-100);
  color: var(--color-primary-800);
  font-size: 0.75rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}

.apple-welcome-title {
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.apple-welcome-text {
  font-size: 1.05rem;
  color: #333;
  margin-bottom: 0.5rem;
}

.apple-welcome-subtext {
  font-size: 0.95rem;
  color: #666;
}

.apple-badge {
  font-family: "Karla", sans-serif;
  font-size: 0.75rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.apple-badge-available {
  background: rgba(162, 228, 54, 0.15);
  color: #5a8f1f;
  border: 1px solid rgba(162, 228, 54, 0.4);
}

.apple-badge-unavailable {
  background: rgba(220, 53, 69, 0.12);
  color: #b02a37;
  border: 1px solid rgba(220, 53, 69, 0.4);
}
.apple-credit-badge {
  background: linear-gradient(135deg, #ffeaa7, #fdcb6e);
  color: #2d3436;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Groupe Affichage */
.display-switch {
  display: inline-flex;
  background: #f1f3f6;
  border-radius: 14px;
  padding: 4px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

/* Boutons */
.display-switch .filtre-btn {
  border-radius: 10px;
  padding: 6px 14px;
  font-size: 0.9rem;
  border: none;
  background: transparent;
  color: #555;
  transition: all 0.25s ease;
  font-weight: 500;
}

/* Actif */
.display-switch .filtre-btn.active {
  background: white;
  color: #000;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}

/* Hover */
.display-switch .filtre-btn:hover {
  color: #000;
}

.apple-featured {
  background: linear-gradient(180deg, #fff, #f4f4f7);
  border-radius: 24px;
  padding: 40px 0px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

.apple-img-wrap img {
  max-height: 700px;
  width: 100%;
  border-radius: 20px;
  object-fit: cover;
}

.apple-featured-content h1 {
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.apple-meta {
  color: #6e6e73;
  font-size: 0.9rem;
  margin-bottom: 20px;
}

.apple-btn {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 22px;
  border-radius: 30px;
  background: #0071e3;
  color: white;
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s;
}
.apple-btn:hover {
  background: #005ecb;
}

/* Cards */
.apple-card {
  display: block;
  background: white;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: black;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: 0.35s;
}

.apple-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
}

.apple-card-img img {
  width: 100%;
  height: 260px;
  object-fit: cover;
}

.apple-card.small .apple-card-img img {
  height: 200px;
}

.apple-card-body {
  padding: 18px;
}

.apple-card-body h3,
.apple-card-body h4 {
  font-weight: 600;
  margin-bottom: 6px;
}

.apple-card-body span {
  color: #6e6e73;
  font-size: 0.85rem;
}

.apple-header {
  color: white;
  padding: 100px 0;
  position: relative;
  overflow: hidden;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
}
.token-card {
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
  border-radius: 18px;
}

.token-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.token-slider .card {
  border-radius: 20px;
  transition: 0.3s ease;
}

.token-slider .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.post-card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  transition: 0.3s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
}

.post-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

/* Image */
.post-image-wrapper {
  position: relative;
  overflow: hidden;
  height: 400px;
}

.post-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.4s ease;
}

.post-card:hover img {
  transform: scale(1.08);
}

/* Overlay */
.post-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
}

/* Date badge */
.post-date {
  position: absolute;
  bottom: 15px;
  left: 15px;
  background: rgba(255, 255, 255, 0.9);
  padding: 5px 12px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
}

/* Content */
.post-content {
  padding: 20px;
}

.read-more {
  font-weight: 600;
  text-decoration: none;
  color: var(--color-link);
  transition: 0.3s;
}

.read-more:hover {
  letter-spacing: 1px;
}
.author-link {
  color: #111;
  transition: 0.2s ease;
}

.author-link:hover {
  color: #007bff;
  text-decoration: underline;
}

.recipe-card:hover {
  transform: translateY(-5px);
}

.recipe-card:hover .recipe-img {
  transform: scale(1.1);
}

.recipe-card .badge {
  font-weight: bold;
  font-size: 0.8rem;
}

section.bg-light {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
/* .apple-header-title {
    font-family: 'Bitter', serif;
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 20px;
    color: #fff;
}

.apple-header-subtitle {
    font-family: 'Lora', serif;
    font-size: 1.2rem;
    color: rgba(255,255,255,0.85);
} */

/* Optionnel : glow subtil pour le marketing */
/* .apple-header-title {
    text-shadow: 0 4px 20px rgba(255,255,255,0.15);
} */
.hover-card {
  transition: all 0.25s ease;
  cursor: pointer;
}

.hover-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
}

/* .post-article>.post-content img {
  max-width: 300px;
}

@media (max-width: 768px) {
  .post-article>.post-content {
    padding: 0px;

  }
  .post-article>.post-content img {
    max-width: 100%;

  }
} */

.post-article > .post-content img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;

  /* limite douce selon écran */
  max-width: clamp(180px, 40vw, 600px);
}

@media (max-width: 768px) {
  .post-article > .post-content {
    padding: 0;
  }

  .post-article > .post-content img {
    max-width: 100%;
  }
}

/* ============================================
   Centre uniquement les items auth en mobile
============================================= */
@media (max-width: 991px) {
  /* cible le dernier bloc nav (connexion/register) */
  .navbar .navbar-nav:last-of-type {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* force les items à ne pas rester alignés à droite */
  .navbar .navbar-nav:last-of-type .nav-item {
    text-align: center;
  }

  .navbar .navbar-nav:last-of-type .nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 768px) {
  /* cache le texte */
  .pagination .page-link {
    font-size: 0; /* cache le texte */
  }

  /* remet les flèches visibles */
  .pagination .page-link::before {
    font-size: 18px;
  }

  /* previous */
  .pagination .page-item:first-child .page-link::before {
    content: "←";
  }

  /* next */
  .pagination .page-item:last-child .page-link::before {
    content: "→";
  }

  /* garde les pages numériques lisibles */
  .pagination .page-item:not(:first-child):not(:last-child) .page-link {
    font-size: 14px;
  }
}

.post-meta {
  margin-top: 20px;
}

.meta-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  font-size: 0.85rem;
  font-weight: 500;
}

.meta-badge i {
  opacity: 0.8;
}

.pulse-menu {
  position: absolute;
  bottom: 45px;
  left: 50%;
  transform: translateX(-50%) scale(0.8);

  background: white;

  display: flex;
  gap: 8px;

  opacity: 0;
  pointer-events: none;

  transition: 0.25s ease;
}

.pulse-menu.active {
  opacity: 1;
  pointer-events: auto;

  transform: translateX(-50%) scale(1);
}

.pulse-menu button {
  border: 0;
  background: none;

  font-size: 22px;

  transition: 0.2s;
}

.pulse-menu button:hover {
  transform: translateY(-8px) scale(1.3);
}

.pulse-button {
  animation: none;
}

.pulse-button.animate {
  animation: pulseHeart 0.6s;
}

@keyframes pulseHeart {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.35);
  }

  100% {
    transform: scale(1);
  }
}

.floating-reaction {
  position: absolute;

  font-size: 25px;

  animation: floatUp 1.5s forwards;
}

@keyframes floatUp {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  100% {
    opacity: 0;

    transform: translateY(-80px) scale(1.8);
  }
}