/* =========================================================
   RECETTE – CSS COMPLET (ARRONDIS FORCÉS + plein écran)
   Page: .pageRecette / .feedRecette
========================================================= */

/* ---------- Variables ---------- */
:root{
  --r-bg: #f4efff;
  --r-bg2: #efe8ff;

  --r-card: rgba(255,255,255,0.74);
  --r-card2: rgba(255,255,255,0.62);

  --r-text: #1f1f2e;
  --r-muted: rgba(31,31,46,0.62);

  --r-accent: #7a5cff;
  --r-accent2: #9e8bff;

  --r-border: rgba(122,92,255,0.18);
  --r-border2: rgba(122,92,255,0.12);

  --r-shadow: 0 22px 48px rgba(40, 18, 120, 0.12);
  --r-shadowSoft: 0 12px 28px rgba(40, 18, 120, 0.08);

  --r-xl: 26px;
  --r-lg: 22px;
  --r-md: 18px;
  --r-sm: 14px;

  --r-gap: 18px;
  --r-pad: 18px;
}

/* ---------- Reset local safe ---------- */
.pageRecette *{ box-sizing:border-box; }
.pageRecette img{ max-width:100%; display:block; }
.pageRecette a{ color:inherit; text-decoration:none; }
.pageRecette button, .pageRecette input, .pageRecette textarea{ font:inherit; }
.pageRecette button{ cursor:pointer; }

/* ---------- Fond ---------- */
body{
  margin:0;
  color: var(--r-text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  background:
    radial-gradient(1400px 800px at 15% 0%, rgba(122,92,255,0.22), transparent 60%),
    radial-gradient(1100px 800px at 95% 10%, rgba(158,139,255,0.20), transparent 58%),
    linear-gradient(180deg, var(--r-bg2), var(--r-bg));
}

/* =========================================================
   Force FULL WIDTH
========================================================= */
.pageRecette{
  width:100%;
  min-height:100%;
}

.feedRecette{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding: 18px 26px 46px !important;
}

/* Empêche un wrapper global de centrer */
.pageRecette main,
.pageRecette .feedRecette{
  width:100% !important;
  max-width:none !important;
}

/* =========================================================
   FORCER LES ARRONDIS (le point clé)
   -> on force le border-radius + overflow hidden sur toutes
      les cartes de la page recette.
========================================================= */
.pageRecette .card{
  background: var(--r-card) !important;
  border: 1px solid var(--r-border) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--r-shadowSoft) !important;
  backdrop-filter: blur(10px);
  overflow: hidden; /* IMPORTANT pour voir les coins */
}

/* Les blocs padding ne doivent pas casser les arrondis */
.pageRecette .block{
  padding: var(--r-pad);
}

/* Si un CSS global met des coins à 0 sur section/div */
.pageRecette section.card,
.pageRecette aside.card,
.pageRecette article.card{
  border-radius: var(--r-xl) !important;
  overflow: hidden !important;
}

/* =========================================================
   Headers / boutons / empty
========================================================= */
.pageRecette .block-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.pageRecette .block-header h2{
  margin:0;
  font-size: 20px;
  letter-spacing: 0.2px;
}
.pageRecette .block-header-right{
  display:flex;
  align-items:center;
  gap: 10px;
}

.pageRecette .emptyState{
  padding: 12px;
  border-radius: var(--r-lg) !important;
  border: 1px dashed rgba(122,92,255,0.28);
  background: rgba(122,92,255,0.06);
  color: rgba(31,31,46,0.72);
}

.pageRecette .btnSmall{
  border-radius: 999px;
  border: 1px solid rgba(122,92,255,0.22);
  background: rgba(122,92,255,0.10);
  color: var(--r-text);
  padding: 8px 12px;
  font-weight: 700;
  font-size: 13px;
}
.pageRecette .btnSmall:hover{ background: rgba(122,92,255,0.14); }

.pageRecette .btnIcon{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(122,92,255,0.22);
  background: rgba(122,92,255,0.10);
  color: var(--r-text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.pageRecette .btnIcon:hover{ background: rgba(122,92,255,0.14); }

.pageRecette .pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 700;
  font-size: 13px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.14);
  color:#fff;
}
.pageRecette .pill:hover{ filter: brightness(1.06); }

/* =========================================================
   Layout
========================================================= */
.recette-shell{ width:100%; }

.recette-grid{
  width:100%;
  display:grid;
  grid-template-columns: minmax(760px, 1.2fr) minmax(480px, 0.8fr);
  gap: var(--r-gap);
  align-items:start;
}

.recette-left{
  display:flex;
  flex-direction:column;
  gap: var(--r-gap);
}

.recette-left-blocks{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--r-gap);
  align-items:start;
}

.recette-notes{ grid-column: 1 / -1; }

.recette-right{
  position: sticky;
  top: 14px;
  align-self:start;
}

/* =========================================================
   HERO (arrondis garantis)
========================================================= */
.recette-hero{ overflow:hidden !important; }
.recette-hero-media{
  position:relative;
  border-radius: var(--r-xl) !important;
  overflow:hidden !important;
}
.recette-hero-img{
  width:100%;
  height: 360px;
  object-fit: cover;
  transform: scale(1.02);
}
.recette-hero-gradient{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.58) 0%, rgba(0,0,0,0.18) 55%, rgba(0,0,0,0.06) 100%),
    radial-gradient(700px 320px at 18% 70%, rgba(0,0,0,0.42), transparent 70%);
}
.recette-hero-content{
  position:absolute;
  left: 22px;
  right: 22px;
  bottom: 18px;
  color:#fff;
  z-index:2;
}
.recette-hero-heading{
  margin:0 0 10px 0;
  font-size: clamp(28px, 2.4vw, 44px);
  line-height:1.06;
}
.recette-hero-sub{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin: 0 0 12px 0;
}
.recette-hero-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.30);
  border: 1px solid rgba(255,255,255,0.18);
  font-size: 13px;
}
.recette-hero-tags{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}

/* =========================================================
   Ingrédients (arrondis table + container interne)
========================================================= */
.recette-composeBar{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px;
  border-radius: var(--r-lg) !important;
  background: rgba(122,92,255,0.06);
  border: 1px solid var(--r-border2);
  margin-bottom: 10px;
}
.recette-composeTitle{ font-weight: 800; font-size: 14px; }

.recette-ingredientSearch input{
  width:100%;
  padding: 12px;
  border-radius: var(--r-lg) !important;
  border: 1px solid rgba(122,92,255,0.16);
  background: rgba(255,255,255,0.62);
  outline:none;
  margin-bottom: 10px;
}
.recette-ingredientSearch input:focus{
  border-color: rgba(122,92,255,0.36);
  box-shadow: 0 0 0 4px rgba(122,92,255,0.10);
}

/* IMPORTANT : border-radius sur table + wrapper effectif */
.recette-ingredients-table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--r-xl) !important; /* plus visible */
  overflow: hidden !important;
  border: 1px solid var(--r-border2);
  background: rgba(255,255,255,0.62);
}
.recette-ingredients-table thead th{
  text-align:left;
  font-size: 12px;
  color: rgba(31,31,46,0.68);
  padding: 10px 12px;
  background: rgba(122,92,255,0.06);
  border-bottom: 1px solid var(--r-border2);
  white-space: nowrap;
}
.recette-ingredients-table tbody td{
  padding: 12px;
  font-size: 14px;
  border-bottom: 1px solid rgba(122,92,255,0.10);
  vertical-align: middle;
}
.recette-ingredients-table tbody tr:last-child td{ border-bottom:none; }

/* =========================================================
   Matériel (arrondis sur empty box / items)
========================================================= */
.recette-equipmentList{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.recette-equipmentList li{
  padding: 12px;
  border-radius: var(--r-xl) !important;
  border: 1px solid var(--r-border2);
  background: rgba(255,255,255,0.62);
}
.recette-equipmentList label{ display:flex; align-items:center; gap: 10px; }
.recette-equipmentList input{ width:18px; height:18px; }

/* =========================================================
   Notes
========================================================= */
.recette-notesArea{
  width:100%;
  border-radius: var(--r-xl) !important;
  border: 1px solid rgba(122,92,255,0.16);
  background: rgba(255,255,255,0.62);
  padding: 12px;
  outline:none;
  resize: vertical;
  min-height: 90px;
}
.recette-notesArea:focus{
  border-color: rgba(122,92,255,0.36);
  box-shadow: 0 0 0 4px rgba(122,92,255,0.10);
}

/* =========================================================
   Étapes (arrondis partout : container + gsp + cards)
========================================================= */
.recette-etapes{
  border-radius: var(--r-xl) !important;
  overflow:hidden !important;
}

.recette-gsp{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px;
  border-radius: var(--r-xl) !important;
  border: 1px solid var(--r-border2);
  background: rgba(255,255,255,0.62);
  margin-bottom: 12px;
}

.recette-stepsList{
  display:flex;
  flex-direction:column;
  gap: 12px;
}

/* Step card (arrondis + overflow caché) */
.recette-stepCard{
  border-radius: var(--r-xl) !important;
  overflow:hidden !important;
  border: 1px solid var(--r-border2);
  background: rgba(255,255,255,0.62);
  box-shadow: 0 10px 22px rgba(35, 10, 110, 0.06);
}

/* head */
.recette-stepHead{
  padding: 12px 12px 0 12px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
}
.recette-stepHeadLeft{ display:flex; flex-direction:column; gap: 4px; }
.recette-stepMeta{ font-weight: 900; }
.recette-stepState{ font-size: 13px; color: rgba(31,31,46,0.65); }
.recette-stepHeadRight{ display:flex; gap: 8px; flex-wrap:wrap; }

/* body */
.recette-stepBody{
  padding: 12px;
  display:grid;
  grid-template-columns: 1fr 240px;
  gap: 12px;
  align-items:start;
}
.recette-stepText{
  font-size: 14px;
  line-height: 1.45;
  color: rgba(31,31,46,0.92);
}

.recette-stepMedia{ display:flex; flex-direction:column; gap: 8px; }
.recette-stepMainImg{
  width:100%;
  height: 140px;
  object-fit: cover;
  border-radius: var(--r-xl) !important;
  border: 1px solid var(--r-border2);
}
.recette-stepPlaceholder{
  width:100%;
  height: 140px;
  border-radius: var(--r-xl) !important;
  border: 1px dashed rgba(122,92,255,0.28);
  background: rgba(122,92,255,0.06);
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(31,31,46,0.58);
  font-weight: 800;
}

.recette-stepThumbs{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.recette-stepThumb{
  width:100%;
  height: 56px;
  object-fit: cover;
  border-radius: 14px !important;
  border: 1px solid var(--r-border2);
}

/* footer */
.recette-stepControls{
  padding: 0 12px 12px;
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap:wrap;
}
.sp-play{
  border-radius: 999px;
  border: 1px solid rgba(122,92,255,0.35);
  background: rgba(122,92,255,0.18);
  color: var(--r-text);
  padding: 8px 12px;
  font-weight: 900;
  font-size: 13px;
}
.sp-status{
  font-size: 13px;
  color: rgba(31,31,46,0.65);
}

/* =========================================================
   MODAL (arrondis)
========================================================= */
.modalIngredients{
  position: fixed;
  inset: 0;
  display:none;
  z-index: 9999;
}
.modalIngredients[aria-hidden="false"]{ display:block; }
.modalIngredients-overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.45);
}
.modalIngredients-content{
  position: relative;
  width: min(780px, calc(100% - 22px));
  margin: 56px auto;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(122,92,255,0.18);
  border-radius: var(--r-xl) !important;
  box-shadow: var(--r-shadow);
  backdrop-filter: blur(12px);
  overflow:hidden !important;
}

/* =========================================================
   Responsive
========================================================= */
@media (max-width: 1300px){
  .recette-grid{
    grid-template-columns: minmax(620px, 1.05fr) minmax(420px, 0.95fr);
  }
  .recette-hero-img{ height: 330px; }
}
@media (max-width: 1100px){
  .recette-grid{ grid-template-columns: 1fr; }
  .recette-right{ position: static; }
  .recette-left-blocks{ grid-template-columns: 1fr; }
  .recette-stepBody{ grid-template-columns: 1fr; }
  .recette-stepMainImg, .recette-stepPlaceholder{ height: 210px; }
}
@media (max-width: 640px){
  .feedRecette{ padding: 12px 12px 28px !important; }
  .recette-hero-content{ left: 14px; right: 14px; bottom: 14px; }
  .recette-hero-img{ height: 250px; }
  .recette-stepHead{ flex-direction: column; align-items:flex-start; }
}

/* Print */
@media print{
  .modalIngredients, .recette-gsp-controls, .recette-stepControls, .btnSmall, .btnIcon{ display:none !important; }
  .card{ box-shadow:none !important; backdrop-filter:none !important; }
  .recette-grid{ grid-template-columns: 1fr; }
}