:root{--bg:#0b0e14;--panel:#0f1420;--muted:#94a3b8;--text:#e2e8f0;--border:#1f2937;--gold:#D4AF37;--gold-dark:#A58027}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;line-height:1.6}
a{color:var(--text);text-decoration:none}
a.button,button.button{display:inline-block;padding:.55rem .9rem;border-radius:.75rem;border:1px solid #334155;background:var(--panel);color:var(--text);transition:transform .15s,box-shadow .15s}
a.button:hover,button.button:hover{transform:translateY(-1px);box-shadow:0 6px 12px rgba(0,0,0,.25)}
.button.gold{background:var(--gold);color:#0a0a0a;border-color:#C09A2E}

.button.silver {
  background: #1e3a8a !important;        /* Bleu GPGE */
  color: #ffffff !important;             /* Texte blanc pour le contraste */
  border: 1px solid #10204a !important;  /* Bordure bleu foncé */
  border-radius: .75rem;
}

.button.silver:hover {
  background: var(--panel) !important;   /* Gris foncé du site */
  color: var(--text) !important;         /* Texte harmonisé */
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(0,0,0,.25);
}

.container{max-width:1100px;margin:0 auto;padding:0 1rem}
.header{position:sticky;top:0;background:rgba(11,14,20,.9);border-bottom:1px solid var(--border);z-index:10}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:56px}
.brand{display:flex;align-items:center;gap:.5rem;font-weight:700}
.brand .dot{width:24px;height:24px;border-radius:6px;background:var(--gold)}
.nav{display:flex;gap:1rem}

/* ===== H1 global (taille + poids) ===== */
h1{
  font-size:clamp(28px,4.4vw,44px); /* un peu plus gros que .h1 */
  font-weight:900;
  line-height:1.15;
  margin:0 0 .75rem;
  color:var(--gold); 
}

.section{padding:0.25rem 0}
.grid{display:grid;gap:.85rem}
.grid.cards{grid-template-columns:1fr}
@media(min-width:640px){.grid.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.grid.cards{grid-template-columns:repeat(3,1fr)}}
.card{border:1px solid rgba(148,163,184,.15);border-radius:14px;background:rgba(15,20,32,.6);overflow:hidden}
.card .thumb{height:160px;background:#111827;overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .25s}
.card:hover .thumb img{transform:scale(1.05)}
.card .body{padding:.85rem}
.badge{display:inline-flex;align-items:center;border:1px solid #C09A2E;border-radius:9999px;padding:.2rem .45rem;color:#A58027;font-size:.72rem}
.footer{border-top:1px solid var(--border);padding:1.4rem 0;color:#94a3b8;font-size:.9rem}
.breadcrumbs{font-size:.9rem;color:#94a3b8;margin-bottom:.5rem}
.list{color:#cbd5e1}
hr.sep{border:0;border-top:1px solid var(--border);margin:1.6rem 0}

/* ==== Grilles catégories ==== */
.cat-grid{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:640px){.cat-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.cat-grid{grid-template-columns:repeat(3,1fr)}}
.card.cat{display:block;border:1px solid rgba(148,163,184,.15);border-radius:14px;background:rgba(15,20,32,.6);overflow:hidden;transition:transform .2s,box-shadow .2s}
.card.cat:hover{transform:translateY(-1px);box-shadow:0 6px 12px rgba(0,0,0,.25)}
.card .pad{padding:1rem}
.card .title{font-size:1.05rem;font-weight:700;margin:.2rem 0}
.empty{border:1px dashed #334155;border-radius:14px;padding:1.25rem;text-align:center;color:#cbd5e1;background:rgba(15,20,32,.35)}
.hero-empty{height:160px;border-bottom:1px dashed #334155;display:flex;align-items:center;justify-content:center;color:#A58027}

/* ==== Gold card accent (Saints vibe) ==== */
.u-gold-card{background:linear-gradient(180deg, rgba(212,175,55,.10), rgba(212,175,55,.05));border-color:#C09A2E;box-shadow:inset 0 0 0 1px rgba(192,154,46,.55)}
.u-gold-card:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(212,175,55,.25), inset 0 0 0 1px rgba(192,154,46,.7)}
.card.cat.u-gold-card .title{color:#0a0a0a}
.card.cat.u-gold-card .pad{color:#111827}

/* ==== v9.3 header doré ==== */
.header{background:var(--gold)!important;border-bottom:1px solid var(--gold-dark)!important}
.header .brand span, .header .nav a{color:#0a0a0a!important}
.header .brand .dot {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #0a0a0a url(/assets/img/hero-home.jpg) center/cover no-repeat;
  border: 2px solid #C09A2E;
  margin-right: .4rem;
}
.header .brand{align-items:center}

/* ==== Contrastes or ==== */
.u-gold-card, .u-gold-card p, .u-gold-card li, .u-gold-card label,
.u-gold-card h1, .u-gold-card h2, .u-gold-card h3, .u-gold-card h4, .u-gold-card h5, .u-gold-card h6{color:#f8fafc!important}
.u-gold-card .list{color:#f8fafc!important}
.u-gold-card a{color:#f1f5f9!important;text-decoration:none}
.u-gold-card a:hover{text-decoration:underline}
.u-gold-outline{border:1px solid #C09A2E;border-radius:14px;box-shadow:inset 0 0 0 1px rgba(192,154,46,.55)}
.u-gold-outline .prose, .u-gold-outline, .u-gold-outline *{color:#f8fafc!important}

/* ==== Cartes grises ==== */
:where(.card).u-grey-card{
  background:#2E323B!important;
  border:1px solid #C09A2E!important;
  border-radius:14px!important;
  box-shadow:inset 0 0 0 1px rgba(192,154,46,.35)!important;
  color:#f8fafc!important;
}
:where(.card).u-grey-card *{color:#f8fafc!important}

/* ==== Bande dorée (unique) ==== */
.band-gold{
  position:relative;
  padding-top:.5rem;
  margin-top:.75rem;
  color:#ffffff;
  font-weight:700;
}
.band-gold::before{
  content:"";
  position:absolute;
  top:0;left:0;
  width:72px;height:6px;
  background:#C09A2E;
  border-radius:3px;
  box-shadow:0 0 0 1px rgba(192,154,46,.55);
}

/* ==== Espacement global ==== */
.grid > :is(div,article,section) > * + *{margin-top:1.5rem}

/* ==== RECETTES — disposition (T&P = 1 seule rangée) ==== */
.recipe-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;   /* gauche = image+ing ; droite = T&P+prep */
  gap:1.5rem;
  align-items:start;
  grid-template-areas:
    "img tps"   /* rangée 1 : Image | T&P */
    "ing prep"  /* rangée 2 : Ingrédients | Préparation */
    "ing note"; /* rangée 3 : Ingrédients | Note */
}
/* Mappage des zones (unique) */
.recipe-grid > :is(div,article,section) > .card:first-child{grid-area:img;}   /* image */
.recipe-grid > :is(div,article,section) > .u-gold-outline{grid-area:ing;}    /* ingrédients */
.recipe-grid > aside > .u-grey-card{grid-area:tps;}                           /* Temps & portions */
.recipe-grid > aside > .u-gold-card{grid-area:prep;}                          /* préparation */
.recipe-grid > aside > .note{grid-area:note;}                                 /* note */

/* Mobile : 1 colonne, ordre logique */
@media (max-width:768px){
  .recipe-grid{
    grid-template-columns:1fr;
    gap:1rem;
    grid-template-areas:
      "img"
      "tps"
      "ing"
      "prep"
      "note";
  }

  .card .thumb{height:auto!important;}

  /* ⚠️ On limite l’effet aux images à l’intérieur des cartes seulement */
  .card .thumb img,
  .card picture img,
  .card video{
    max-width:100%;
    height:auto;
    display:block;
  }
}

.recipe-grid .card .thumb {
  min-height: 195px;   /* ← ajuste ici */
  overflow: hidden;
  display: flex;
}

.recipe-grid .card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .recipe-grid .card .thumb {
    min-height: 180px;
  }
}

.recipe-title{
  display:flex;
  align-items:baseline;
  gap:.6rem;
}

.gd-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:12px;
  background: rgba(212,175,55,.18);   /* or GD */
  border:1px solid rgba(212,175,55,.45);
  transform: translateY(6px);         /* ajuste fin */
}

.gd-badge img{
  width:26px;
  height:auto;
  display:block;
}

.recipe-title{
  display:flex;
  align-items:baseline;
  gap:.65rem;
}

/* Logo Moose inline – un peu plus présent */
.moose-inline{
  height:1.50em;              /* 👈 était 0.85em */
  width:auto;
  margin-left:.15em;
  transform: translateY(.14em);
  opacity:.95;
}

@media (max-width: 768px){
  .moose-inline{
    height:1.50em;
    transform: translateY(.12em);
  }
}


/* --- Bloc contact (version unique, thème du site) --- */
body.home section#contact{
  width:100%;
  max-width:900px;
  margin:3rem auto;
  padding:2rem;
  background:var(--panel);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.4);
}
/* Conteneur interne */
body.home section#contact form{width:100%;margin:0;padding:0;background:transparent;backdrop-filter:none}
/* Champs et disposition */
body.home .form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem 2rem}
body.home .form-row{display:flex;flex-direction:column;width:100%}
body.home .form-row.full{grid-column:1 / -1}
body.home input[type="text"],body.home input[type="email"],body.home textarea{
  width:100%;padding:.75rem 1rem;font-size:1rem;border:1px solid var(--border);border-radius:.5rem;background:#fff;color:#000;box-sizing:border-box;
}
/* Bouton */
body.home button.button.gold{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  background:var(--gold);color:#000;border:none;border-radius:.5rem;
  padding:.25rem 1.8rem;font-size:.9rem;font-weight:600;letter-spacing:.3px;line-height:1;
  cursor:pointer;transition:background .2s ease-in-out, transform .15s ease-in-out;
}
body.home button.button.gold:hover{background:var(--gold-dark);transform:translateY(-2px)}
body.home button.button.gold svg{width:14px;height:14px;flex-shrink:0;margin-top:-1px}

/* ==== Ingrédients (or clair) ==== */
.u-gold-outline{
  background:linear-gradient(180deg, rgba(212,175,55,.18), rgba(212,175,55,.08));
  border:1px solid #C09A2E;border-radius:14px;box-shadow:inset 0 0 0 1px rgba(192,154,46,.45);
  color:#f8fafc!important;
}
.u-gold-outline h3,.u-gold-outline .list,.u-gold-outline *{color:#f8fafc!important}

/* ==== Titres uniformisés ==== */
.u-gold-card h2.band-gold,
.u-gold-outline h3.band-gold,
.u-grey-card h3.band-gold{
  font-size:1.25rem;font-weight:700;line-height:1.3;color:#f8fafc!important;text-transform:none;margin-bottom:.75rem;
}
/* ==== Bande dorée pleine largeur & texte blanc ==== */
.band-gold-categorie {
  display:block;
  position:relative;
  background:#C09A2E;           /* bande dorée pleine largeur */
  color:#000 !important;        /* texte noir */
  font-weight:700;
  padding:.6rem 1rem;           /* espace interne */
  border-radius:.4rem;
  margin:1rem 0;
  text-transform:none;
  box-shadow:inset 0 0 0 1px rgba(192,154,46,.55);
  transition:background .25s ease, box-shadow .25s ease, transform .15s ease;
}

.band-gold-categorie:hover {
  background:#000;           /* noir au survol */
  color:#fff !important;        /* texte blanc */
  box-shadow:0 4px 10px rgba(212,175,55,.4);
  transform:translateY(-2px);
}
.cat-hero {
  display:block;
  width:100%;
  height:160px;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  border-radius:14px;
  overflow:hidden;
}

/* Mobile */
@media (max-width:640px){
  .cat-hero { height:120px; }  /* environ ¾ de la hauteur desktop */
}

.hero {
  position: relative;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(#0b0e14, #0f1420);
}

.hero-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: center;
  padding: 2.5rem 0;
}

.hero-photo {
  position: relative;
  width: 128px;
  height: 128px;
}

.hero-photo img {
  width: 128px;
  height: 128px;
  object-fit: cover;
  border-radius: 9999px;
}

/* Avatar à droite (desktop) */
.hero-avatar {
  position: absolute;
  right: calc((100vw - 1100px) / 2);
  bottom: 1.5rem;
  width: 130px;
  height: auto;
  border-radius: 1rem;
  border: 3px solid #D4AF37;
  box-shadow: 0 10px 25px rgba(0,0,0,.5);
  z-index: 10;
}

/* Mobile : avatar centré sous le titre */
@media (max-width: 768px) {
  .hero-avatar {
    position: static !important;
    display: block;
    margin: 1.5rem auto 0 !important;
    width: 110px !important;
    max-width: 35vw !important;
  }
}

/* Cacher UNIQUEMENT sur mobile (iPhone et petits téléphones) */
@media (max-width: 600px) {
  img.hero-avatar {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Ajustements pour desktop + iPad */
@media (min-width: 601px) {
  img.hero-avatar {
    display: block;
    margin-left: 0;        /* Enlève tout centrage */
    margin-right: auto;    /* Pousse l’image à gauche */
    transform: translateX(-30px); /* Ajuste encore la position vers le bouton si tu veux */
  }
}

/* ===================== */
/*   Grille de recettes   */
/* ===================== */
.recipes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

/* ===================== */
/*        Cartes         */
/* ===================== */
.recipe-card {
  display: flex;
  flex-direction: column;
  background: #d4af37;        /* 🔶 fond or */
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: #111827;              /* texte foncé pour bon contraste */
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  transition: transform .25s ease, box-shadow .25s ease;
}

/* Effet hover */
.recipe-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.35);
}

/* ===================== */
/*   Image (desktop)     */
/* ===================== */
.recipe-card .thumb-container {
  position: relative;
  width: 100%;
  padding-bottom: 75%;    /* 📐 Ratio 4:3 sur desktop */
  overflow: hidden;
  background: #e5e7eb;
}

.recipe-card .thumb-container img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .35s ease;
}

/* Zoom image au survol */
.recipe-card:hover .thumb-container img {
  transform: scale(1.05);
}

/* ===================== */
/*       Titre           */
/* ===================== */
.recipe-card h3 {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
  padding: 0.9rem;
  color: #111827;          /* texte noir légèrement doux */
}

/* ===================== */
/*     Mobile (ratio)    */
/* ===================== */
@media (max-width: 768px) {
  .recipe-card .thumb-container {
    padding-bottom: 55%;    /* 📱 Ratio 3:2 sur mobile */
  }
}

/* ===== Liens OR – forçage ciblé recettes ===== */
.recipe-grid a,
.recipe-grid a:link,
.recipe-grid a:visited {
  color: #D4AF37 !important;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color .2s ease, text-decoration-color .2s ease;
}

.recipe-grid a:hover,
.recipe-grid a:focus {
  color: #F2D675 !important;
  text-decoration-color: #F2D675;
}

/* =========================
   NAV (desktop + hamburger GPGE)
   ========================= */

/* Desktop: liens visibles sur fond OR */
.header .nav a{
  color:#0a0a0a;
  text-decoration:none;
  font-weight:800;
  letter-spacing:.2px;
  display:inline-flex;
  align-items:center;
  padding:.45rem .7rem;
  border-radius:.75rem;
  transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.header .nav a:hover{
  background: rgba(0,0,0,.10);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.95);
  transform: translateY(-1px);
}

.header .nav a[aria-current="page"]{
  background: rgba(0,0,0,.12);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,1);
}

.header .nav a:focus{ outline:none; }
.header .nav a:focus-visible{
  outline: 3px solid #000;
  outline-offset: 3px;
  background: rgba(0,0,0,.12);
}

/* Desktop nav wrapper */
.nav-desktop{
  display:flex;
  align-items:center;
  gap:.9rem;
  flex-wrap:wrap;
}

/* Hamburger (desktop caché) */
.nav-toggle{
  display:none;
  width:44px;
  height:44px;
  border-radius:50%;
  background:#D4AF37;     /* OR */
  border:2px solid #000;  /* bordure noire */
  cursor:pointer;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:6px;
  padding:0;
}

.nav-toggle span{
  display:block;
  width:18px;
  height:2px;
  background:#000;        /* lignes noires */
  border-radius:2px;
}

/* ===== Défaut desktop : mobile menu totalement caché ===== */
.nav-backdrop{ display:none; }

.nav-mobile{
  display:none;            /* empêche le X et les liens d’apparaitre sur desktop */
}

/* hamburger caché sur desktop (force) */
.nav-toggle{
  display:none !important;
}

/* ===== Mobile – menu fermé par défaut ===== */
@media (max-width: 768px){

  /* Desktop caché */
  .nav-desktop{ display:none !important; }

  /* Hamburger visible */
  .nav-toggle{ display:flex !important; }

  /* Backdrop – CACHÉ par défaut */
  .nav-backdrop{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(2,6,23,.55);
    z-index:998;
  }

  /* Menu mobile – CACHÉ par défaut */
  .nav-mobile{
    display:none;
    position:fixed;
    top:72px;
    left:50%;
    transform:translate(-50%, -16px);
    width:calc(100% - 2rem);
    max-width:520px;

    background:linear-gradient(180deg,#0b1220,#020617);
    border-radius:18px;
    padding:1rem;

    flex-direction:column;
    gap:.35rem;

    z-index:999;
  }

  /* ===== ÉTAT OUVERT ===== */
  
  body.menu-open{
  overflow: hidden;
}
  
  body.menu-open .nav-backdrop{
    display:block;
  }

  body.menu-open .nav-mobile{
    display:flex;
    transform:translate(-50%, 0);
  }

  .nav-mobile a{
    font-size:1.1rem;
    font-weight:800;
    color:#F8FAFC;
    text-decoration:none;
    padding:.65rem .75rem;
    border-radius:.75rem;
  }

  .nav-mobile a:hover{
    background:rgba(248,250,252,.10);
  }

  .nav-mobile a[aria-current="page"]{
    background:rgba(248,250,252,.12);
    box-shadow: inset 0 -3px 0 rgba(212,175,55,1);
  }

  .nav-close{
    align-self:flex-end;
    background:none;
    border:none;
    font-size:1.4rem;
    color:#F8FAFC;
    cursor:pointer;
    margin-bottom:.25rem;
  }
}

/* Accessibilité bouton hamburger */
.nav-toggle:focus{ outline:none; }
.nav-toggle:focus-visible{
  outline:3px solid #000;
  outline-offset:3px;
}

/* =========================
   BREADCRUMBS (anti-numérotation)
   ========================= */
.breadcrumbs{ margin: .75rem 0 1rem; }

.breadcrumbs__list{
  list-style: none !important;   /* <-- empêche 1., 2., etc. */
  display:flex !important;
  flex-wrap:wrap !important;
  gap:.35rem !important;
  padding:0 !important;
  margin:0 !important;
  font-size:.95rem !important;
}

.breadcrumbs__item{ display:flex !important; align-items:center !important; }

.breadcrumbs__link{
  color: inherit !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  text-decoration-thickness: 2px !important;
}

.breadcrumbs__sep{ opacity:.6 !important; padding: 0 .2rem !important; }
.breadcrumbs__current{ font-weight: 800 !important; }

.breadcrumbs{
  margin: .75rem 0 1rem;
}

/* ===== Breadcrumbs – ajustement desktop ===== */
@media (min-width: 769px){

  .breadcrumbs + h1,
  .breadcrumbs + .page-title h1{
    margin-top: 0;
  }

  .breadcrumbs{
    margin-top: 1.25rem;   /* espace sous le header */
    margin-bottom: 1.25rem;/* espace avant le titre h1 */
  }

  /* Optionnel : légère remontée si le header est très haut */
  .header + .breadcrumbs{
    margin-top: 1rem;
  }
}

/* ===== Positionnement desktop du fil d’Ariane ===== */
@media (min-width: 769px){
  .breadcrumbs-wrap{
    padding-top: 2.25rem; /* même rythme que .section */
  }
  .breadcrumbs{
    margin: 0 0 .75rem;   /* plus propre avant le titre */
  }
}

.recipe-extras-grid{
display:grid;
grid-template-columns: repeat(2,1fr);
gap:1.5rem;
margin-top:2rem;
}

@media (max-width:768px){
.recipe-extras-grid{
grid-template-columns:1fr;
}
}
.faq-item{
border-top:1px solid #e5e5e5;
}

.faq-question{
width:100%;
color:#D4AF37;
background:none;
border:none;
padding:16px;
font-size:1rem;
font-weight:600;
text-align:left;
cursor:pointer;
}

.faq-question:hover{
background:#2E323B;
}

.faq-answer{
display:none;
padding:0 16px 16px 16px;
color:#444;
}

.faq-item.active .faq-answer{
display:block;
}

/* ==============================================
   Bloc commentaires – style final responsive
   ============================================== */

/* Container global */
.recipe-comments {
    background: #2E323B; /* fond sombre */
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.4);
    margin: 2rem 0;
    color: #ffffff;
    width: 100%; /* suit le container parent */
    border: 2px solid #D4AF37; /* contour doré */
}

/* Titre du bloc */
.recipe-comments h3 {
    color: #D4AF37;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid #D4AF37;
    padding-bottom: 0.25rem;
}

/* Moyenne des notes */
#avg-rating p {
    font-weight: bold;
    color: #fff;
    margin-bottom: 1rem;
}

/* Cartes commentaires */
#comments-list .comment {
    background: #3a3f4b;
    border: 1px solid #555;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 1rem;
    transition: transform 0.1s ease, box-shadow 0.2s ease;
}

#comments-list .comment:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.6);
}

/* Nom et date */
#comments-list .comment strong {
    color: #D4AF37;
}

#comments-list .comment span {
    color: #eee;
    font-size: 0.85rem;
    display: block;
    margin-top: 2px;
}

/* Texte du commentaire */
#comments-list .comment p {
    margin-top: 0.5rem;
    line-height: 1.5;
    color: #f0f0f0;
}

/* Zone de saisie */
.recipe-comments input#comment-name,
.recipe-comments textarea#comment-text {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #555;
    border-radius: 8px;
    margin-bottom: 10px;
    background: #3a3f4b;
    color: #fff;
    font-family: inherit;
    font-size: 1rem;
    box-sizing: border-box;
}

/* Bouton publier */
.recipe-comments button.button-primary {
    background-color: #D4AF37;
    color: #2E323B;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s ease;
}

.recipe-comments button.button-primary:hover {
    background-color: #b9912c;
}

/* Étoiles de notation */
#star-rating .star {
    font-size: 1.6rem;
    cursor: pointer;
    color: #555;
    margin-right: 4px;
}

#star-rating .star.selected,
#star-rating .star.hover {
    color: #D4AF37;
}

/* ==============================================
   Responsive – tablettes et mobiles
   ============================================== */

/* Tablettes <= 768px */
@media (max-width: 768px) {
    .recipe-comments {
        padding: 1rem;
    }
    #comments-list .comment {
        padding: 10px 12px;
    }
    .recipe-comments input#comment-name,
    .recipe-comments textarea#comment-text,
    .recipe-comments button.button-primary {
        width: 100%;
        box-sizing: border-box;
    }
}

/* Mobiles <= 480px */
@media (max-width: 480px) {
    #star-rating .star {
        font-size: 1.3rem;
        margin-right: 2px;
    }
}