: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{font-size:clamp(26px,3.8vw,38px);font-weight:800;margin:0}
.section{padding:2.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/logo-gd.png) center/contain 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;
  }
}

/* --- 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 */
  }
}