@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600&family=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap');

* {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

body {
  background: #F6EFE5;
  color: #2B2118;
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 18px;
  overflow-x: hidden;
}

img {
  max-width: 100%;
}

.navbar {
  background: rgba(255, 252, 247, 0.88);
  position: sticky;
  top: 18px;
  z-index: 100;
  min-height: 78px;
  border: 1px solid #E8DCCB;
  border-radius: 14px;
  align-items: center;
  justify-content: space-between;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 14px 22px;
  box-shadow: 0 10px 24px rgba(43, 33, 24, 0.06);
  backdrop-filter: blur(12px);
}

.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #2B2118;
  text-decoration: none;
  flex: 0 0 auto;
}

.navbar-brand img {
  width: 44px;
  height: 44px;
  padding: 4px;
  background: rgba(255, 252, 247, 0.88);
  border-radius: 10px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.navbar-brand span {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.navbar-brand strong {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 600;
}

.navbar-brand small {
  color: #8C5732;
  font-size: 11px;
  font-weight: 600;
}

.nav-list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
}

.nav-list li[hidden],
.nav-login-link[hidden] {
  display: none;
}

.nav-list a,
.rechbtn {
  color: #8C5732;
  border: none;
  padding: 8px 15px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}

.nav-list a:hover,
.rechbtn:hover {
  background: #F1E5D8;
  color: #7C4A28;
}

.nav-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.nav-profile[hidden] {
  display: none;
}

.nav-profile-name {
  max-width: 150px;
  color: #2B2118;
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-admin-link {
  color: #8C5732;
  border: 1px solid rgba(140, 87, 50, 0.35);
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.3s ease;
}

.nav-admin-link[hidden] {
  display: none;
}

.nav-admin-link:hover {
  background: #F1E5D8;
  color: #7C4A28;
}

.logout-btn {
  background: #8C5732;
  color: #FFFFFF;
  border: none;
  padding: 8px 13px;
  border-radius: 999px;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s ease;
}

.logout-btn:hover {
  background: #7C4A28;
}

.iconhome,
.iconbook,
.inconinsta,
.iconperson {
  width: 18px;
  height: 18px;
  filter: invert(33%) sepia(25%) saturate(1300%) hue-rotate(345deg) brightness(91%) contrast(88%);
}

.iconrech {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
}

.receherche {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rechbtn {
  padding: 9px 12px;
}

.receherche {
  width: 100%;
  max-width: 360px;
  flex: 1 1 260px;
  height: 44px;
  background: #FFFCF7;
  border: 1px solid #E4D7C8;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  box-shadow: 0 8px 18px rgba(43, 33, 24, 0.05);
}

.receherche input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: #2B2118;
  font-size: 15px;
}

.recherche input::placeholder {
  color: #9C8D7D;
}

.receherche input::placeholder {
  color: #9C8D7D;
}

.recettes-body .nav-recipe-search {
  display: none;
}

.decbtn {
  background: #FFFCF7;
  color: #8C5732;
  border: 1px solid #C9A481;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}

.decbtn:hover {
  background: #8C5732;
  color: #FFFFFF;
}

h1 {
  color: #2B2118;
  font-family: 'Playfair Display', serif;
  font-size: clamp(30px, 3.8vw, 48px);
  line-height: 1.08;
  font-weight: 600;
  margin: 0 0 16px;
}

p {
  font-family: 'Poppins', sans-serif;
  color: #6F6256;
  line-height: 1.65;
}

.nav-list a,
.decbtn {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
}

.hero {
  background-image: url(plat2.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 360px;
  margin-top: 28px;
  padding: 68px 90px 68px 48px;
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(43, 33, 24, 0.10);
}

.hero p {
  max-width: 460px;
  margin: 0 0 28px;
  font-size: 15px;
}

.features {
  width: 90%;
  max-width: 1200px;
  margin: -44px auto 60px;
  background: rgba(255, 252, 247, 0.96);
  border: 1px solid #E8DCCB;
  border-radius: 14px;
  box-shadow: 0 16px 36px rgba(43, 33, 24, 0.10);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
  position: relative;
  z-index: 5;
}

.feature {
  padding: 24px 22px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  position: relative;
}

.feature:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 30%;
  width: 1px;
  height: 40%;
  background: #EADFD2;
}

.feature i {
  font-size: 26px;
  color: #9A6238;
}

.iconbag {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  background: #8C5732;
  display: inline-block;
  mask: url(bag-heart.svg) center / contain no-repeat;
  -webkit-mask: url(bag-heart.svg) center / contain no-repeat;
}

.feature h3 {
  margin: 0 0 8px;
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  line-height: 1.18;
  font-weight: 600;
  color: #2B2118;
}

.feature p {
  margin: 0;
  font-size: 14px;
  color: #6F6256;
  line-height: 1.5;
}

.iconlist {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  background: #8C5732;
  display: inline-block;
  mask: url(list-check.svg) center / contain no-repeat;
  -webkit-mask: url(list-check.svg) center / contain no-repeat;
}

.iconcart {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  background: #8C5732;
  display: inline-block;
  mask: url(cart3.svg) center / contain no-repeat;
  -webkit-mask: url(cart3.svg) center / contain no-repeat;
}

.iconphone {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  background: #8C5732;
  display: inline-block;
  mask: url(phone.svg) center / contain no-repeat;
  -webkit-mask: url(phone.svg) center / contain no-repeat;
}

.categories {
  text-align: center;
}

h5 {
  margin: 64px 0 0;
  color: #2B2118;
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
}

h5::after {
  content: "";
  display: block;
  width: 78px;
  height: 3px;
  margin: 16px auto 0;
  border-radius: 999px;
  background: #8C5732;
}

.cards {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.categories .cards button {
  background: #FFFCF7;
  color: #2B2118;
  border: 1px solid #E8DCCB;
  width: 180px;
  min-height: 120px;
  padding: 22px 18px;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(43, 33, 24, 0.08);
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.categories .cards button:hover {
  background: #8C5732;
  color: #FFFFFF;
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(43, 33, 24, 0.14);
}

.categories .cards button:hover .iconcookie {
  background: #FFFFFF;
}

.iconcookie {
  width: 32px;
  height: 32px;
  background: #8C5732;
  display: inline-block;
  mask: url(cookie.svg) center / contain no-repeat;
  -webkit-mask: url(cookie.svg) center / contain no-repeat;
}

.iconsalad {
  width: 32px;
  height: 32px;
  display: inline-block;
  background: #8C5732;
  mask: url(salad.svg) center / contain no-repeat;
  -webkit-mask: url(salad.svg) center / contain no-repeat;
}

.categories .cards button:hover .iconsalad {
  background: #FFFFFF;
}

.icondessert {
  width: 32px;
  height: 32px;
  display: inline-block;
  background: #8C5732;
  mask: url(dessert.svg) center / contain no-repeat;
  -webkit-mask: url(dessert.svg) center / contain no-repeat;
}

.categories .cards button:hover .icondessert {
  background: #FFFFFF;
}

.iconburg {
  width: 32px;
  height: 32px;
  display: inline-block;
  background: #8C5732;
  mask: url(hamburger.svg) center / contain no-repeat;
  -webkit-mask: url(hamburger.svg) center / contain no-repeat;
}

.categories .cards button:hover .iconburg {
  background: #FFFFFF;
}

.iconsoup {
  width: 32px;
  height: 32px;
  display: inline-block;
  background: #8C5732;
  mask: url(soup.svg) center / contain no-repeat;
  -webkit-mask: url(soup.svg) center / contain no-repeat;
}

.categories .cards button:hover .iconsoup {
  background: #FFFFFF;
}

.cardinsta,
.cardfacebook,
.cardtiktok {
  background: #FFFCF7;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(43, 33, 24, 0.08);
  width: 275px;
  min-height: 350px;
  padding: 34px 18px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  text-align: center;
  margin-top: 70px;
}

.cardinsta img,
.cardfacebook img,
.cardtiktok img {
  width: 90px;
  height: 90px;
  object-fit: contain;
}

.cardinsta p,
.cardfacebook p,
.cardtiktok p {
  width: 100%;
  flex: 1;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.5;
}

.insta-btn,
.face-btn,
.tik-btn {
  background: #8C5732;
  color: #FFFFFF;
  border: none;
  padding: 9px 16px;
  border-radius: 999px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 0;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.reseaux-section {
  margin-top: 40px;
  padding: 60px 20px 80px;
  background-image: url("imgreseaux.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 16px;
}

.bdp {
  margin-top: 70px;
  padding: 42px 58px;
  background: #F8EFE2;
  border: 1px solid #E8DCCB;
  border-radius: 4px;
  box-shadow: 0 10px 24px rgba(43, 33, 24, 0.06);
}

.footer-content {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1.25fr;
  gap: 54px;
  align-items: start;
}

.footer-brand {
  max-width: 230px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.footer-logo-icon {
  width: 46px;
  height: 46px;
  padding: 6px;
  background: #F1E5D8;
  border-radius: 50%;
  object-fit: contain;
}

.footer-column {
  min-width: 120px;
}

.footer-logo h6,
.footer-column h6 {
  margin: 0;
  color: #2B2118;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 700;
}

.footer-column h6 {
  margin-bottom: 14px;
}

.footer-subtitle {
  color: #8C5732;
  font-size: 11px;
  font-weight: 600;
}

.footer-column ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-column li {
  margin-bottom: 7px;
}

.footer-brand p,
.footer-column a {
  color: #6F6256;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  text-decoration: none;
  transition: 0.3s ease;
}

.footer-column a:hover {
  color: #8C5732;
}

.footer-brand p {
  margin: 0;
}

.footer-socials {
  display: flex;
  gap: 18px;
}

.footer-socials a {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.footer-socials img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: invert(33%) sepia(25%) saturate(1300%) hue-rotate(345deg) brightness(91%) contrast(88%);
}

.footer-rights {
  justify-self: end;
}

.footer-rights p {
  margin: 0 0 4px;
  color: #6F6256;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .bdp {
    padding: 34px 24px;
  }

  .footer-content {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }

  .footer-rights {
    justify-self: start;
  }
}

.connexion-page {
  padding: 0;
  background: #F6EFE5;
}

.section-connexion {
  min-height: calc(100vh - 190px);
  padding: 34px 20px;
  background-image: url("imgfond.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.cardconnexion {
  width: min(100%, 460px);
  padding: 30px 40px 34px;
  background: rgba(255, 252, 247, 0.94);
  border: 1px solid rgba(232, 220, 203, 0.9);
  border-radius: 14px;
  box-shadow: 0 18px 42px rgba(43, 33, 24, 0.16);
}

.cardconnexion h5 {
  margin: 0;
  font-size: clamp(30px, 3vw, 40px);
}

.cardconnexion h5::after {
  content: "";
  display: block;
  width: 42px;
  height: 2px;
  margin: 12px auto 0;
  border-radius: 999px;
  background: #8C5732;
}

.cardconnexion label {
  display: block;
  margin: 0 0 8px;
  color: #6F6256;
  font-size: 13px;
  font-weight: 700;
}

.cardconnexion > input,
.register-fields input,
.password-field {
  width: 100%;
  height: 48px;
  margin-bottom: 18px;
  background: rgba(255, 252, 247, 0.82);
  border: 1px solid #E4D7C8;
  border-radius: 8px;
  color: #2B2118;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  outline: none;
  transition: 0.3s ease;
}

.cardconnexion > input,
.register-fields input {
  padding: 0 16px;
}

.register-fields {
  display: none;
}

.cardconnexion.register-mode .register-fields {
  display: block;
}

.password-field {
  padding: 0 10px 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.password-field input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: #2B2118;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
}

.password-field button {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.password-field img {
  width: 16px;
  height: 16px;
  opacity: 0.55;
}

.cardconnexion input::placeholder {
  color: #A69686;
}

.cardconnexion > input:focus,
.password-field:focus-within {
  background: #FFFFFF;
  border-color: #8C5732;
  box-shadow: 0 0 0 4px rgba(140, 87, 50, 0.12);
}

.connexion-options {
  margin: 0 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.remember {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.remember input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: #8C5732;
}

.connexion-options a,
.create-account a {
  color: #8C5732;
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
}

.connexion-submit {
  width: 100%;
  height: 52px;
  border: none;
  border-radius: 8px;
  background: #A56431;
  color: #FFFFFF;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.3s ease;
}

.connexion-submit:hover {
  background: #8C5732;
}

.create-account {
  margin: 26px 0 0;
  color: #6F6256;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.connexion-page .bdp {
  margin-top: 0;
}

.recettes-page,
.planning-page {
  min-height: 520px;
  padding: 42px 20px 70px;
  background: radial-gradient(circle at top, rgba(255, 252, 247, 0.92), transparent 360px);
}

.recettes-header {
  width: min(100%, 900px);
  margin: 0 auto;
  padding: 0 20px 22px;
  text-align: center;
}

.recettes-header h1 {
  margin: 0;
  font-size: clamp(34px, 4vw, 48px);
}

.recettes-header span {
  width: 72px;
  height: 2px;
  margin: 13px auto 0;
  display: block;
  border-radius: 999px;
  background: #B27443;
}

.recipes-toolbar {
  width: min(100%, 900px);
  margin: 0 auto 22px;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 150px;
  gap: 14px;
  align-items: center;
}

.recipes-search,
.recipes-toolbar select,
.filters-page-link {
  height: 44px;
  background: #FFFCF7;
  border: 1px solid #E8DCCB;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(43, 33, 24, 0.05);
}

.recipes-search {
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.recipes-search input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: #2B2118;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
}

.recipes-search input::placeholder {
  color: #A69686;
}

.recipes-search img {
  width: 16px;
  height: 16px;
  opacity: 0.55;
}

.recipes-toolbar select {
  padding: 0 14px;
  color: #2B2118;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 700;
  outline: none;
}

.filters-page-link {
  color: #8C5732;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: 0.3s ease;
}

.filters-page-link:hover {
  background: #8C5732;
  color: #FFFFFF;
}

.locked-page {
  min-height: 100vh;
  padding: 24px;
  background: #F6EFE5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.locked-card {
  width: min(100%, 430px);
  padding: 38px;
  background: #FFFCF7;
  border: 1px solid #E8DCCB;
  border-radius: 16px;
  box-shadow: 0 16px 36px rgba(43, 33, 24, 0.10);
  text-align: center;
}

.locked-card h1 {
  margin-bottom: 12px;
}

.locked-card p {
  margin: 0 0 24px;
}

.locked-login-btn {
  width: 100%;
  max-width: 240px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.auth-message {
  min-height: 22px;
  margin: 18px 0 0;
  color: #6F6256;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.auth-message.success {
  color: #3F7A45;
}

.auth-message.error {
  color: #A6422E;
}

.admin-page {
  width: min(100%, 1100px);
  margin: 46px auto;
}

.admin-panel,
.user-row {
  background: rgba(255, 252, 247, 0.94);
  border: 1px solid #E8DCCB;
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(43, 33, 24, 0.08);
}

.admin-panel {
  padding: 28px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.admin-panel h1 {
  margin: 0 0 8px;
}

.admin-panel p {
  margin: 0;
}

.users-list {
  margin-top: 24px;
  display: grid;
  gap: 16px;
}

.user-row {
  padding: 22px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
}

.user-row h2 {
  margin: 0 0 10px;
  color: #2B2118;
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
}

.user-row p {
  margin: 4px 0;
  font-size: 13px;
}

.password-reset-alert {
  width: fit-content;
  padding: 7px 10px;
  border-radius: 8px;
  background: #F7E4DD;
  color: #A6422E;
  font-weight: 800;
}

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.admin-actions button,
.admin-secondary-btn,
.admin-login-link,
.admin-add-btn,
.recipe-form button {
  border: none;
  border-radius: 999px;
  background: #8C5732;
  color: #FFFFFF;
  padding: 9px 14px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.admin-actions button:nth-child(2) {
  background: #A6422E;
}

.admin-actions button:nth-child(3),
.admin-actions button:nth-child(4),
.admin-actions button:nth-child(5),
.admin-actions button:nth-child(6),
.admin-secondary-btn {
  background: #6F6256;
}

.empty-admin {
  text-align: center;
}

.admin-panel-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.recipe-form-panel {
  margin-top: 22px;
  padding: 26px;
  background: rgba(255, 252, 247, 0.94);
  border: 1px solid #E8DCCB;
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(43, 33, 24, 0.08);
}

.recipe-form-panel h2 {
  margin: 0 0 18px;
  font-family: 'Playfair Display', serif;
}

.recipe-form {
  display: grid;
  gap: 10px;
}

.recipe-form label {
  color: #2B2118;
  font-size: 13px;
  font-weight: 700;
}

.recipe-form input,
.recipe-form select,
.recipe-form textarea {
  width: 100%;
  border: 1px solid #E4D7C8;
  border-radius: 10px;
  background: #FFFCF7;
  color: #2B2118;
  padding: 12px 14px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  outline: none;
}

.recipe-form textarea {
  min-height: 110px;
  resize: vertical;
}

.recipe-image-preview {
  width: 140px;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid #E4D7C8;
}

.recipe-form input:focus,
.recipe-form select:focus,
.recipe-form textarea:focus {
  border-color: #8C5732;
  box-shadow: 0 0 0 4px rgba(140, 87, 50, 0.12);
}

.recipe-form button {
  justify-self: start;
  margin-top: 8px;
}

.admin-recipes-panel {
  margin-top: 24px;
  padding: 26px;
  background: rgba(255, 252, 247, 0.94);
  border: 1px solid #E8DCCB;
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(43, 33, 24, 0.08);
}

.admin-recipes-panel h2 {
  margin: 0 0 18px;
  font-family: 'Playfair Display', serif;
}

.admin-recipes-list {
  display: grid;
  gap: 12px;
}

.admin-recipe-row {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px;
  background: #FFFCF7;
  border: 1px solid #E8DCCB;
  border-radius: 12px;
}

.admin-recipe-row img,
.admin-recipe-placeholder {
  width: 72px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  background: #F1E5D8;
}

.admin-recipe-row h3 {
  margin: 0 0 4px;
  color: #2B2118;
  font-size: 15px;
}

.admin-recipe-row p {
  margin: 0;
  font-size: 13px;
}

.admin-recipe-actions {
  display: flex;
  gap: 8px;
}

.edit-recipe-btn,
.delete-recipe-btn {
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: #8C5732;
  color: #FFFFFF;
  font-size: 18px;
  cursor: pointer;
}

.delete-recipe-btn {
  background: #A6422E;
  font-size: 22px;
}

.recipes-layout {
  width: min(100%, 1120px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}

.recipes-filter-panel {
  width: min(100%, 260px);
  position: relative;
  z-index: 10;
}

.filters-toggle {
  width: 100%;
  min-height: 42px;
  border: 1px solid #E8DCCB;
  border-radius: 10px;
  background: #FFFCF7;
  color: #8C5732;
  box-shadow: 0 10px 24px rgba(43, 33, 24, 0.05);
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.filters-toggle:hover,
.filters-toggle[aria-expanded="true"] {
  background: #F1E5D8;
  color: #7C4A28;
}

.recipe-filters {
  width: 100%;
  margin: 8px 0 0;
  padding: 16px;
  background: rgba(255, 252, 247, 0.94);
  border: 1px solid #E8DCCB;
  border-radius: 10px;
  box-shadow: 0 12px 26px rgba(43, 33, 24, 0.06);
  display: grid;
  gap: 9px;
  list-style: none;
}

.recipe-filters[hidden] {
  display: none;
}

.recipe-filters button {
  width: 100%;
  min-height: 34px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: #6F6256;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  padding: 0 10px;
  transition: 0.3s ease;
}

.recipe-filters button:hover,
.recipe-filters button.is-active {
  background: #F1E5D8;
  color: #8C5732;
}

.filters-page {
  min-height: 560px;
  padding: 48px 20px 80px;
  background: radial-gradient(circle at top, rgba(255, 252, 247, 0.92), transparent 360px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.filters-card {
  width: min(100%, 560px);
  padding: 34px;
  border: 1px solid #E8DCCB;
  border-radius: 14px;
  background: rgba(255, 252, 247, 0.96);
  box-shadow: 0 18px 42px rgba(43, 33, 24, 0.08);
}

.filters-heading {
  margin-bottom: 28px;
  text-align: center;
}

.filters-heading h1 {
  margin: 0;
  font-size: clamp(32px, 4vw, 44px);
}

.filters-heading span {
  width: 72px;
  height: 2px;
  margin: 13px auto 0;
  display: block;
  border-radius: 999px;
  background: #B27443;
}

.filters-form {
  display: grid;
  gap: 18px;
}

.filters-form label {
  display: grid;
  gap: 8px;
  color: #2B2118;
  font-size: 13px;
  font-weight: 800;
}

.filters-form select {
  width: 100%;
  min-height: 46px;
  border: 1px solid #E8DCCB;
  border-radius: 8px;
  background: #FFFFFF;
  color: #6F6256;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 700;
  padding: 0 14px;
}

.filters-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
}

.filters-secondary-link {
  min-height: 44px;
  border: 1px solid #E8DCCB;
  border-radius: 8px;
  color: #8C5732;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.recipes-main {
  min-width: 0;
}

.recipes-active-filters {
  min-height: 22px;
  margin: 0 0 14px;
  color: #8C5732;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.meal-planner {
  width: min(100%, 1120px);
  margin: 0 auto 24px;
  padding: 20px;
  background: rgba(255, 252, 247, 0.96);
  border: 1px solid #E8DCCB;
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(43, 33, 24, 0.08);
}

.meal-planner-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.meal-planner-header h2 {
  margin: 0 0 4px;
  color: #2B2118;
  font-family: 'Playfair Display', serif;
  font-size: 28px;
}

.meal-planner-header p,
.meal-planner-message {
  margin: 0;
  color: #8C5732;
  font-size: 13px;
  font-weight: 700;
}

.meal-planner-nav {
  display: flex;
  gap: 8px;
}

.meal-planner-nav button,
.meal-planner-form button,
.shopping-list-toggle,
.notification-test-btn,
.planned-meal button {
  border: none;
  border-radius: 8px;
  background: #8C5732;
  color: #FFFFFF;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  cursor: pointer;
}

.meal-planner-nav button {
  min-width: 38px;
  min-height: 38px;
  padding: 0 12px;
  font-size: 13px;
}

.meal-planner-form {
  display: grid;
  grid-template-columns: minmax(118px, 0.75fr) minmax(135px, 0.9fr) minmax(240px, 1.8fr) minmax(140px, 0.95fr) minmax(112px, 0.7fr) minmax(110px, 0.65fr);
  gap: 10px;
  align-items: end;
  margin-bottom: 12px;
}

.meal-planner-form label {
  display: grid;
  gap: 6px;
  color: #2B2118;
  font-size: 12px;
  font-weight: 800;
}

.meal-planner-form input,
.meal-planner-form select {
  width: 100%;
  min-height: 38px;
  border: 1px solid #E8DCCB;
  border-radius: 8px;
  background: #FFFFFF;
  color: #6F6256;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 700;
  padding: 0 10px;
}

.meal-planner-form input:disabled {
  background: #F4EADD;
  color: #A69686;
  cursor: not-allowed;
}

.meal-planner-form input[type="date"],
.meal-planner-form input[type="time"] {
  max-width: 136px;
}

.meal-planner-form button {
  min-height: 38px;
  padding: 0 14px;
}

.recipe-search-field {
  position: relative;
  min-width: 0;
}

.recipe-search-field input[type="hidden"] {
  display: none;
}

.recipe-search-suggestions {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 250px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid #E8DCCB;
  border-radius: 10px;
  background: #FFFFFF;
  box-shadow: 0 14px 34px rgba(43, 33, 24, 0.12);
}

.recipe-search-suggestions[hidden] {
  display: none;
}

.recipe-search-suggestions button {
  width: 100%;
  min-height: 34px;
  padding: 7px 9px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: #2B2118;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.recipe-search-suggestions button:hover,
.recipe-search-suggestions button:focus {
  background: #F1E5D8;
  color: #8C5732;
  outline: none;
}

.recipe-search-empty {
  margin: 0;
  padding: 8px;
  color: #6F6256;
  font-size: 12px;
}

.meal-planner-form button:disabled {
  opacity: 0.65;
  cursor: wait;
}

.meal-planner-message {
  min-height: 20px;
  margin-bottom: 12px;
}

.meal-planner-message[data-type="error"] {
  color: #B4432F;
}

.meal-planner-message[data-type="success"] {
  color: #4F8A45;
}

.shopping-list-toggle {
  min-height: 40px;
  margin: 0 0 14px;
  padding: 0 14px;
  background: #4F8A45;
}

.notification-test-btn {
  min-height: 40px;
  margin: 0 10px 14px 0;
  padding: 0 14px;
  background: #B27443;
}

.notification-test-btn:hover {
  background: #9E6037;
}

.notification-test-btn:disabled {
  opacity: 0.65;
  cursor: wait;
}

.shopping-list-toggle:hover {
  background: #3F7437;
}

.shopping-list-panel {
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid #E8DCCB;
  border-radius: 12px;
  background: #FFFFFF;
}

.shopping-list-panel[hidden] {
  display: none;
}

.shopping-list-header {
  margin-bottom: 14px;
}

.shopping-list-header h2 {
  margin: 0 0 4px;
  color: #2B2118;
  font-family: 'Playfair Display', serif;
  font-size: 26px;
}

.shopping-list-header p {
  margin: 0;
  color: #8C5732;
  font-size: 13px;
  font-weight: 700;
}

.shopping-list-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.shopping-group {
  min-width: 0;
  padding: 14px;
  border: 1px solid #EFE4D6;
  border-radius: 10px;
  background: #FFFCF7;
}

.shopping-group h3 {
  margin: 0 0 12px;
  color: #8C5732;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
}

.shopping-recipe {
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #EFE4D6;
}

.shopping-recipe:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.shopping-recipe h4 {
  margin: 0 0 8px;
  color: #2B2118;
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  line-height: 1.2;
}

.shopping-recipe ul {
  margin: 0;
  padding-left: 18px;
  color: #6F6256;
  font-size: 13px;
  line-height: 1.45;
}

.shopping-recipe p,
.shopping-group > p {
  margin: 0;
  color: #6F6256;
  font-size: 13px;
}

.meal-planner-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.meal-planner-day {
  min-height: 150px;
  padding: 10px;
  border: 1px solid #E8DCCB;
  border-radius: 10px;
  background: #FFFFFF;
}

.meal-planner-day-title {
  width: 100%;
  min-height: 32px;
  border: none;
  border-radius: 7px;
  background: #F1E5D8;
  color: #8C5732;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.meal-planner-day-list {
  display: grid;
  gap: 8px;
  margin-top: 9px;
}

.meal-planner-empty {
  margin: 16px 0 0;
  color: #C1B2A1;
  text-align: center;
}

.planned-meal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26px;
  gap: 7px;
  padding: 8px;
  border-radius: 8px;
  background: #FFFCF7;
  border: 1px solid #EFE4D6;
}

.planned-meal span {
  display: block;
  margin-bottom: 3px;
  color: #8C5732;
  font-size: 10px;
  font-weight: 800;
}

.planned-meal a {
  color: #2B2118;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  text-decoration: none;
}

.planned-meal p {
  margin: 4px 0 0;
  color: #6F6256;
  font-size: 11px;
}

.planned-meal button {
  width: 26px;
  height: 26px;
  font-size: 18px;
  line-height: 1;
  background: #B4432F;
}

.recipes-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.recipe-card,
.recipes-empty {
  background: rgba(255, 252, 247, 0.94);
  border: 1px solid #E8DCCB;
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(43, 33, 24, 0.08);
}

.recipe-card {
  overflow: hidden;
}

.recipe-summary-card {
  min-height: 250px;
  padding: 0;
  display: block;
  cursor: pointer;
  transition: 0.3s ease;
}

.recipe-summary-card:hover,
.recipe-summary-card:focus {
  border-color: #8C5732;
  transform: translateY(-3px);
  outline: none;
  box-shadow: 0 18px 42px rgba(140, 87, 50, 0.18);
}

.recipe-card-media {
  width: 100%;
  aspect-ratio: 1.42 / 1;
  overflow: hidden;
  background: #F1E5D8;
}

.recipe-card-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.recipe-card-body {
  min-height: 134px;
  padding: 14px 16px 16px;
  position: relative;
}

.recipe-card-highlight {
  border-color: #8C5732;
  box-shadow: 0 18px 42px rgba(140, 87, 50, 0.28);
}

.recipe-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  object-fit: cover;
  margin-bottom: 16px;
}

.recipe-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.recipe-card span {
  color: #8C5732;
  font-size: 12px;
  font-weight: 700;
}

.recipe-card h2 {
  margin: 0 0 12px;
  color: #2B2118;
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  line-height: 1.18;
}

.recipe-card p {
  margin: 0 0 18px;
  font-size: 14px;
}

.recipe-summary-card p {
  margin: 0;
  color: #8C5732;
  font-weight: 700;
}

.recipe-card-meta {
  padding-right: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: #8C5732;
  font-size: 12px;
  font-weight: 700;
}

.recipe-card-meta span {
  color: inherit;
  font-size: inherit;
}

.recipe-summary-card .favorite-btn {
  position: absolute;
  right: 14px;
  bottom: 14px;
}

.recipe-card-plan-btn {
  min-height: 32px;
  margin-top: 8px;
  padding: 7px 11px;
  border: none;
  border-radius: 8px;
  background: #8C5732;
  color: #FFFFFF;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.recipe-card-plan-btn:hover {
  background: #7C4A28;
}

.recipe-detail {
  margin-top: 22px;
}

.recettes-page.is-detail-view .recettes-header,
.recettes-page.is-detail-view .recipes-toolbar,
.recettes-page.is-detail-view .recipes-filter-panel,
.recettes-page.is-detail-view .meal-planner,
.recettes-page.is-detail-view .recipes-list {
  display: none;
}

.recettes-page.is-detail-view .recipes-layout {
  display: block;
}

.recipe-detail[hidden] {
  display: none;
}

.recipe-detail-card {
  width: min(100%, 900px);
  margin: 0 auto;
  padding: 28px;
  background: rgba(255, 252, 247, 0.96);
  border: 1px solid #E8DCCB;
  border-radius: 16px;
  box-shadow: 0 16px 36px rgba(43, 33, 24, 0.10);
}

.recipe-detail-top {
  display: grid;
  grid-template-columns: 1fr 180px;
  gap: 28px;
  align-items: start;
}

.recipe-detail-text {
  min-width: 0;
}

.recipe-detail-photo {
  width: 180px;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  object-fit: cover;
  justify-self: end;
  box-shadow: 0 12px 28px rgba(43, 33, 24, 0.10);
}

.recipe-detail-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.recipe-detail-heading span,
.recipe-duration {
  color: #8C5732;
  font-size: 13px;
  font-weight: 700;
}

.recipe-detail-card h2 {
  margin: 10px 0;
  color: #2B2118;
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 3vw, 42px);
}

.recipe-back-btn {
  margin-bottom: 14px;
  border: 1px solid rgba(140, 87, 50, 0.35);
  border-radius: 999px;
  background: #FFFCF7;
  color: #8C5732;
  padding: 9px 15px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.recipe-link-btn {
  width: fit-content;
  min-height: 40px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #4F8A45;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.3s ease;
}

.recipe-link-btn:hover {
  background: #3F7437;
}

.favorite-btn {
  width: 34px;
  height: 34px;
  border: 1px solid #E4D7C8;
  border-radius: 50%;
  background: #FFFCF7;
  color: #8C5732;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.favorite-btn.is-favorite {
  background: #8C5732;
  color: #FFFFFF;
}

.recipe-checklist {
  margin: 18px 0;
}

.recipe-checklist h3 {
  margin: 0 0 10px;
  color: #2B2118;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
}

.recipe-checklist label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 8px;
  color: #6F6256;
  font-size: 13px;
  line-height: 1.45;
}

.recipe-checklist input {
  margin-top: 3px;
  accent-color: #8C5732;
}

.recipe-checklist label.is-checked span {
  color: #A69686;
  text-decoration: line-through;
}

.recipes-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 24px;
  text-align: center;
}

@media (max-width: 760px) {
  .admin-panel,
  .user-row {
    grid-template-columns: 1fr;
  }

  .admin-panel {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 1180px) {
  body {
    padding: 14px;
  }

  .navbar {
    top: 14px;
    gap: 14px;
    padding: 12px 16px;
  }

  .navbar-brand {
    flex: 1 1 230px;
  }

  .nav-list {
    order: 3;
    flex-basis: 100%;
  }

  .receherche {
    max-width: 300px;
  }

  .hero {
    padding: 58px 42px;
  }

  .features {
    grid-template-columns: repeat(2, 1fr);
  }

  .feature:nth-child(2)::after {
    display: none;
  }

  .footer-content {
    grid-template-columns: repeat(3, 1fr);
    gap: 34px;
  }

  .footer-rights {
    justify-self: start;
  }

  .recipes-toolbar {
    grid-template-columns: minmax(240px, 1fr) repeat(3, 130px);
  }

  .recipes-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .navbar {
    justify-content: center;
  }

  .navbar-brand {
    flex: 1 1 100%;
    justify-content: center;
  }

  .nav-list {
    order: 2;
  }

  .receherche {
    order: 3;
    max-width: 100%;
    flex-basis: 100%;
  }

  .nav-profile {
    order: 4;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }

  .hero {
    min-height: 330px;
    padding: 46px 28px;
    background-position: center;
  }

  h1 {
    font-size: 38px;
  }

  h5 {
    font-size: 34px;
  }

  .cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .categories .cards button {
    width: 100%;
  }

  .reseaux-section {
    padding: 44px 16px 60px;
  }

  .cardinsta,
  .cardfacebook,
  .cardtiktok {
    width: min(100%, 320px);
    margin-top: 24px;
  }

  .section-connexion {
    min-height: auto;
    padding: 34px 16px 48px;
  }

  .cardconnexion {
    padding: 28px;
  }

  .recettes-page,
  .planning-page {
    padding: 46px 12px;
  }

  .recettes-header {
    padding: 0 20px 22px;
  }

  .recipes-toolbar {
    width: min(100%, 680px);
    grid-template-columns: 1fr 1fr;
  }

  .meal-planner-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .meal-planner-form button {
    grid-column: 1 / -1;
  }

  .meal-planner-calendar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shopping-list-grid {
    grid-template-columns: 1fr;
  }

  .recipes-filter-panel {
    width: min(100%, 320px);
  }

  .recipe-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .recipes-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-page {
    margin: 34px auto;
  }

  .admin-recipe-row {
    grid-template-columns: 64px 1fr;
  }

  .admin-recipe-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

@media (max-width: 640px) {
  body {
    padding: 10px;
  }

  .navbar {
    top: 10px;
    min-height: 0;
    border-radius: 12px;
  }

  .navbar-brand {
    justify-content: flex-start;
  }

  .navbar-brand img {
    width: 38px;
    height: 38px;
  }

  .navbar-brand strong {
    font-size: 16px;
  }

  .navbar-brand small {
    font-size: 10px;
  }

  .nav-list {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .nav-list a {
    width: 100%;
    min-height: 42px;
    padding: 8px 10px;
    font-size: 13px;
  }

  .receherche {
    height: 42px;
    padding: 0 12px;
  }

  .receherche input {
    font-size: 14px;
  }

  .nav-profile-name {
    max-width: 100%;
    text-align: center;
  }

  .hero {
    margin-top: 18px;
    min-height: 310px;
    padding: 34px 20px;
    border-radius: 12px;
  }

  h1 {
    font-size: 32px;
  }

  h5 {
    margin-top: 42px;
    font-size: 30px;
  }

  .hero p {
    font-size: 14px;
  }

  .features {
    width: 100%;
    margin: 18px auto 42px;
    grid-template-columns: 1fr;
  }

  .feature::after {
    display: none;
  }

  .feature {
    padding: 20px;
  }

  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .categories .cards button {
    min-height: 88px;
    padding: 14px 10px;
    border-radius: 10px;
    font-size: 13px;
    gap: 8px;
  }

  .iconcookie,
  .iconsalad,
  .icondessert,
  .iconburg,
  .iconsoup {
    width: 26px;
    height: 26px;
  }

  .bdp {
    margin-top: 42px;
    padding: 28px 20px;
  }

  .footer-content {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .footer-socials {
    gap: 14px;
  }

  .connexion-options {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .cardconnexion {
    padding: 24px 18px;
  }

  .cardconnexion h5 {
    font-size: 32px;
  }

  .recipes-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .recipes-toolbar {
    grid-template-columns: 1fr;
  }

  .meal-planner {
    padding: 14px;
  }

  .meal-planner-header {
    align-items: stretch;
    flex-direction: column;
  }

  .meal-planner-nav {
    display: grid;
    grid-template-columns: 42px 1fr 42px;
  }

  .meal-planner-form,
  .meal-planner-calendar {
    grid-template-columns: 1fr;
  }

  .meal-planner-day {
    min-height: 0;
  }

  .recipes-filter-panel {
    width: 100%;
  }

  .recipe-filters {
    padding: 12px;
  }

  .recipe-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .recipe-filters button {
    min-height: 36px;
    padding: 0 8px;
    text-align: center;
    font-size: 11px;
  }

  .recipe-summary-card {
    min-height: 0;
    padding: 0;
  }

  .recipe-card-media {
    aspect-ratio: 1.15 / 1;
  }

  .recipe-card-body {
    min-height: 124px;
    padding: 10px 10px 34px;
  }

  .recipe-card h2 {
    margin-bottom: 8px;
    font-size: 15px;
  }

  .recipe-summary-card p,
  .recipe-card-meta {
    font-size: 11px;
  }

  .recipe-detail-card {
    padding: 20px;
  }

  .recipe-detail-top {
    grid-template-columns: 1fr 130px;
    gap: 18px;
  }

  .recipe-detail-photo {
    width: 130px;
  }

  .recipe-card {
    padding: 18px;
  }

  .recipe-card.recipe-summary-card {
    padding: 0;
  }

  .admin-panel,
  .recipe-form-panel,
  .admin-recipes-panel,
  .user-row {
    padding: 20px;
  }

  .admin-panel-actions,
  .admin-actions {
    width: 100%;
    justify-content: stretch;
  }

  .admin-actions button,
  .admin-secondary-btn,
  .admin-add-btn,
  .admin-login-link,
  .recipe-form button {
    width: 100%;
  }
}

@media (max-width: 430px) {
  .nav-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .logout-btn,
  .nav-admin-link {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  .hero {
    padding: 28px 16px;
  }

  h1 {
    font-size: 28px;
  }

  h5 {
    font-size: 27px;
  }

  .recettes-header,
  .locked-card {
    padding: 28px 18px;
  }

  .recipe-detail-top {
    grid-template-columns: 1fr;
  }

  .recipe-detail-photo {
    width: 100%;
    max-width: 190px;
    justify-self: start;
  }

  .admin-recipe-row {
    grid-template-columns: 1fr;
  }

  .admin-recipe-row img,
  .admin-recipe-placeholder {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 350px) {
  .nav-list,
  .cards,
  .recipes-list,
  .recipe-filters {
    grid-template-columns: 1fr;
  }
}