/* ============================================================
   sanscuisiner.fr — charte graphique "Vert profond & citron"
   Version 1b — septembre 2026
   Ordre : tokens > base > layout > composants > utilitaires
   Règle d'or : AUCUNE bordure décorative, AUCUNE ombre décalée,
   AUCUN fond à motif. La hiérarchie vient des aplats.
   ============================================================ */

:root {
  /* --- Couleurs de marque --- */
  --sc-ink:        #0B2A26; /* vert-noir : fonds pleins, titres, texte fort */
  --sc-ink-soft:   #12564C; /* vert moyen : liens, libellés secondaires sur clair */
  --sc-lime:       #DCEB6A; /* accent acide : CTA principal, chiffres, emphase */
  --sc-lime-deep:  #C8D855; /* accent au survol */

  /* --- Neutres --- */
  --sc-surface:    #FFFFFF; /* fond de page et des cartes sur fond coloré */
  --sc-mist:       #EFF2EC; /* fond de carte sur fond blanc, zones calmes */
  --sc-mist-deep:  #E4E9DF; /* survol des surfaces mist */
  --sc-text:       #24322F; /* texte courant */
  --sc-text-muted: #6B7573; /* texte secondaire (min. 14px) */
  --sc-on-ink:     #FFFFFF; /* texte sur --sc-ink */
  --sc-on-ink-mut: #A8C3BE; /* texte secondaire sur --sc-ink */

  /* --- Sémantique --- */
  --sc-danger:     #B3341C;
  --sc-success:    #1E6B3A;

  /* --- Typographie --- */
  --sc-font-title: "Grandstander", "Baloo 2", system-ui, sans-serif;
  --sc-font-text:  "Nunito Sans", system-ui, -apple-system, sans-serif;

  /* --- Rayons --- */
  --sc-r-sm: 12px;
  --sc-r-md: 18px;
  --sc-r-lg: 22px;
  --sc-r-pill: 999px;

  /* --- Ombres (douces, jamais décalées) --- */
  --sc-shadow-1: 0 1px 2px rgba(11,42,38,.05);
  --sc-shadow-2: 0 1px 2px rgba(11,42,38,.05), 0 8px 28px rgba(11,42,38,.10);
  --sc-shadow-3: 0 20px 60px rgba(11,42,38,.16);

  /* --- Rythme (multiples de 4) --- */
  --sc-s1: 4px;  --sc-s2: 8px;  --sc-s3: 12px; --sc-s4: 16px;
  --sc-s5: 20px; --sc-s6: 24px; --sc-s8: 32px; --sc-s10: 40px;
  --sc-s12: 48px; --sc-s16: 64px;

  --sc-page: 1180px; /* largeur de contenu max */
}

/* ============================ BASE ============================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--sc-surface);
  color: var(--sc-text);
  font-family: var(--sc-font-text);
  font-size: 16px;
  line-height: 1.55;
  text-wrap: pretty;
}

h1, h2, h3, .sc-title {
  font-family: var(--sc-font-title);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: var(--sc-ink);
  margin: 0;
}
h1 { font-size: clamp(32px, 4.4vw, 54px); }
h2 { font-size: clamp(24px, 2.6vw, 32px); }
h3 { font-size: 18px; letter-spacing: -.01em; }

p { margin: 0; }

a { color: var(--sc-ink-soft); text-decoration: none; font-weight: 600; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

img { max-width: 100%; height: auto; display: block; }

:focus-visible { outline: 3px solid var(--sc-ink-soft); outline-offset: 2px; border-radius: var(--sc-r-sm); }

/* ============================ LAYOUT ============================ */

.sc-page { max-width: var(--sc-page); margin: 0 auto; padding: 0 var(--sc-s6); }

.sc-section { padding: var(--sc-s12) 0; }
.sc-section--mist { background: var(--sc-mist); }
.sc-section--ink  { background: var(--sc-ink); color: var(--sc-on-ink); }
.sc-section--ink h1, .sc-section--ink h2, .sc-section--ink h3 { color: var(--sc-on-ink); }
.sc-section--lime { background: var(--sc-lime); }

/* Une seule couleur de section pleine par page, en plus du blanc. */

.sc-stack   { display: flex; flex-direction: column; gap: var(--sc-s4); }
.sc-row     { display: flex; align-items: center; gap: var(--sc-s4); flex-wrap: wrap; }
.sc-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sc-s4); flex-wrap: wrap; }
.sc-grid-3  { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sc-s4); }

/* ============================ EN-TÊTE ============================ */

.sc-header {
  background: var(--sc-ink);
  color: var(--sc-on-ink);
  padding: var(--sc-s5) 0;
}
/* Le logo est un mot-symbole dans la typo des titres : ni cadre, ni bordure. */
.sc-logo {
  font-family: var(--sc-font-title);
  font-weight: 900;
  font-size: 21px;
  letter-spacing: -.02em;
  color: var(--sc-on-ink);
  text-decoration: none;
}
.sc-logo:hover { text-decoration: none; opacity: .85; }

.sc-nav { display: flex; align-items: center; gap: var(--sc-s6); font-size: 14px; font-weight: 600; }
.sc-nav a { color: var(--sc-on-ink-mut); }
.sc-nav a:hover { color: var(--sc-on-ink); text-decoration: none; }
.sc-nav a[aria-current="page"] { color: var(--sc-on-ink); }

/* ============================ BOUTONS ============================ */

.sc-btn {
  display: inline-flex; align-items: center; gap: var(--sc-s2);
  padding: 14px 24px;
  border: 0; border-radius: var(--sc-r-pill);
  font-family: var(--sc-font-text); font-size: 15px; font-weight: 700;
  cursor: pointer; text-decoration: none;
  transition: background-color .15s ease, transform .15s ease;
}
.sc-btn:hover { text-decoration: none; transform: translateY(-1px); }
.sc-btn--primary   { background: var(--sc-lime); color: var(--sc-ink); }
.sc-btn--primary:hover { background: var(--sc-lime-deep); }
.sc-btn--ink       { background: var(--sc-ink); color: var(--sc-on-ink); }
.sc-btn--ghost     { background: var(--sc-mist); color: var(--sc-ink); }
.sc-btn--ghost:hover { background: var(--sc-mist-deep); }
.sc-btn--sm        { padding: 10px 18px; font-size: 13.5px; }
.sc-btn--icon      { padding: 12px 14px; }

/* ============================ CARTES ============================ */

.sc-card {
  background: var(--sc-mist);
  border-radius: var(--sc-r-lg);
  overflow: hidden;
}
.sc-card--white  { background: var(--sc-surface); box-shadow: var(--sc-shadow-2); }
.sc-card--ink    { background: var(--sc-ink); color: var(--sc-on-ink); }
.sc-card__media  { display: flex; justify-content: center; padding: var(--sc-s3) 0 0; }
.sc-card__media img { width: 80%; }
.sc-card__body   { padding: var(--sc-s3) var(--sc-s4) var(--sc-s4); display: flex; flex-direction: column; gap: var(--sc-s2); }
.sc-card__title  { font-family: var(--sc-font-text); font-size: 15px; font-weight: 700; color: var(--sc-ink); }
.sc-card__desc   { font-size: 13.5px; color: var(--sc-text-muted); }
a.sc-card:hover  { text-decoration: none; box-shadow: var(--sc-shadow-2); }

/* Étapes numérotées */
.sc-step__num {
  font-family: var(--sc-font-title); font-weight: 800; font-size: 13px;
  color: var(--sc-ink-soft); letter-spacing: .04em;
}

/* ============================ PASTILLES ============================ */
/* Plus de contours multicolores : fond plein discret, une seule emphase. */

.sc-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--sc-r-pill);
  background: var(--sc-surface); color: #4C5A5B;
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.sc-tag--strong { background: var(--sc-ink); color: var(--sc-lime); }  /* la caractéristique clé */
.sc-tag--onwhite { background: var(--sc-mist); }                        /* pastille sur fond blanc */
.sc-tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* Filtres (liste de recettes) */
.sc-filter {
  padding: 10px 18px; border: 0; border-radius: var(--sc-r-pill);
  background: var(--sc-mist); color: var(--sc-ink);
  font-family: var(--sc-font-text); font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.sc-filter[aria-pressed="true"] { background: var(--sc-ink); color: var(--sc-lime); }

/* ============================ CALENDRIER ============================ */
/* Les cases vides sont des aplats, jamais des pointillés. */

.sc-week { display: grid; grid-template-columns: 64px repeat(7, minmax(0, 1fr)); gap: var(--sc-s2); }
.sc-week__dow { font-size: 12px; font-weight: 700; color: var(--sc-text-muted); text-align: center; }
.sc-week__dow--we { color: var(--sc-ink-soft); }
.sc-week__label { font-size: 11.5px; font-weight: 700; color: var(--sc-text-muted); align-self: center; letter-spacing: .06em; }
.sc-slot {
  min-height: 72px; border: 0; border-radius: var(--sc-r-md);
  background: var(--sc-mist); color: var(--sc-text-muted);
  font-family: var(--sc-font-text); font-size: 12.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: var(--sc-s2); cursor: pointer;
}
.sc-slot:hover { background: var(--sc-mist-deep); }
.sc-slot--filled { background: var(--sc-ink); color: var(--sc-on-ink); }

/* ============================ LISTE DE COURSES ============================ */

.sc-aisle { font-family: var(--sc-font-title); font-weight: 800; font-size: 15px; color: var(--sc-ink-soft); letter-spacing: .02em; }
.sc-line {
  display: flex; align-items: center; gap: var(--sc-s3);
  padding: 14px var(--sc-s4); border-radius: var(--sc-r-md);
  background: var(--sc-mist); font-size: 15px; min-height: 52px;
}
.sc-line--done { color: var(--sc-text-muted); text-decoration: line-through; background: var(--sc-surface); }
.sc-check {
  width: 24px; height: 24px; flex: 0 0 24px; border-radius: 8px;
  background: var(--sc-surface); box-shadow: inset 0 0 0 2px rgba(11,42,38,.18);
}
.sc-check--on { background: var(--sc-ink); box-shadow: none; }
.sc-qty { margin-left: auto; font-size: 13.5px; font-weight: 700; color: var(--sc-text-muted); }

/* ============================ FORMULAIRES ============================ */

.sc-field { display: flex; flex-direction: column; gap: 6px; }
.sc-label { font-size: 13px; font-weight: 700; color: var(--sc-ink); }
.sc-input {
  padding: 14px var(--sc-s4); border: 0; border-radius: var(--sc-r-md);
  background: var(--sc-mist); color: var(--sc-text);
  font-family: var(--sc-font-text); font-size: 15px; width: 100%;
}
.sc-input::placeholder { color: #939C9A; }
.sc-input:focus { background: var(--sc-surface); box-shadow: inset 0 0 0 2px var(--sc-ink-soft); outline: none; }
.sc-hint { font-size: 12.5px; color: var(--sc-text-muted); }

/* ============================ PIED DE PAGE ============================ */

.sc-footer { background: var(--sc-ink); color: var(--sc-on-ink-mut); padding: var(--sc-s10) 0; font-size: 14px; }
.sc-footer a { color: var(--sc-on-ink-mut); }
.sc-footer a:hover { color: var(--sc-on-ink); }

/* ============================ UTILITAIRES ============================ */

.sc-muted  { color: var(--sc-text-muted); }
.sc-lede   { font-size: 17px; color: var(--sc-text-muted); max-width: 38ch; }
.sc-lede--on-ink { color: var(--sc-on-ink-mut); }
.sc-num    { font-family: var(--sc-font-title); font-weight: 900; font-size: 44px; color: var(--sc-lime); line-height: 1; }
.sc-hero-accent { color: var(--sc-lime); }
.sc-shadow { box-shadow: var(--sc-shadow-2); }
.sc-lift   { margin-top: -28px; position: relative; z-index: 1; } /* cartes chevauchant un bloc ink */

@media (max-width: 860px) {
  .sc-section { padding: var(--sc-s8) 0; }
  .sc-week { grid-template-columns: 1fr; }
  .sc-week__dow { text-align: left; }
  .sc-lift { margin-top: var(--sc-s4); }
}