/* ============================================================================
 * indexPage.css — TripCooking · Vue MEMBRE « Feed social »
 * ----------------------------------------------------------------------------
 * Thème CLAIR d'après la maquette.
 *   • Entête réelle (.tcHeader) restylée en clair (barre du haut) — ces règles
 *     ne sont chargées QUE pour le membre (cette feuille n'est incluse que dans
 *     la branche membre d'index.php), donc la vue visiteur n'est pas touchée.
 *   • Sidebar gauche : position: fixed, scroll interne.
 *   • Colonne de droite : fixée sur le bord droit de la page.
 *   • Colonne centrale : seule zone qui défile avec la page.
 *   Le moteur de recherche (#rechercheEntete / #resultEntete) et la modale
 *   #indexCapture ne sont PAS modifiés (id/class inchangés, on ne fait que styler).
 *
 * Repères de gabarit :
 *   --tcf-side : largeur sidebar        (264px)
 *   --tcf-head : hauteur entête          (72px)
 *   --tcf-rail : largeur colonne droite  (336px)
 * ========================================================================== */

:root {
  --tcf-side: 264px;
  --tcf-head: 72px;
  --tcf-rail: 336px;
  --tcf-railgap: 28px;
}

body {
  margin: 0 !important;
  background: #f5f6f8;
}


/* ============================================================================
 * ENTÊTE (.tcHeader) — restyle CLAIR façon maquette  (membre uniquement)
 * !important pour passer devant la feuille d'entête existante.
 * ========================================================================== */
body .tcHeader {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: var(--tcf-head) !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  /* padding-gauche = largeur sidebar : le contenu de l'entête commence toujours
     à droite de la colonne fixe, sans dépendre d'un 'left' que l'ancienne
     feuille d'entête pourrait écraser. La sidebar (z plus haut) recouvre la
     zone vide à gauche. */
  padding: 0 28px 0 calc(var(--tcf-side) + 28px) !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e9eaf0 !important;
  box-shadow: none !important;
  z-index: 1000 !important;
}

/* Logo dans l'entête masqué : il vit dans la sidebar (maquette). */
.tcHeader__left { display: flex; align-items: center; }
.tcHeader__brand { display: none !important; }
.tcHeader__burger {
  display: none;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: #f2f3f7;
  color: #14141b;
  font-size: 18px;
  align-items: center;
  justify-content: center;
}

/* Centre : recherche (pilule claire) + bouton « + » collé à droite du centre */
.tcHeader__center {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 0 !important;
}
.tcHeaderSearch {
  flex: 0 1 600px !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  height: 46px !important;
  padding: 0 18px !important;
  background: #f2f3f7 !important;
  border: 1px solid #e9eaf0 !important;
  border-radius: 999px !important;
}
.tcHeaderSearch__icon { margin-right: 10px; opacity: .45; font-size: 15px; }
.tcHeaderSearch input,
#rechercheEntete {
  flex: 1 !important;
  height: 100% !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  color: #14141b !important;
  font-size: 14px !important;
  font-family: inherit !important;
}
.tcHeaderSearch input::placeholder { color: #8a8b99; }
/* Dropdown de résultats du moteur : rendu clair sous la barre. */
#resultEntete.search-dropdown,
.tcHeaderSearch .search-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #e9eaf0;
  border-radius: 14px;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .28);
  overflow: hidden;
  z-index: 30;
}

/* Bouton « + » (Créer) → pastille violette, collée au bloc de droite */
.tcCreateBtn {
  margin-left: auto !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: #6d4aff !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  box-shadow: 0 10px 22px -10px rgba(109, 74, 255, .8) !important;
}
.tcCreateBtn:hover { background: #5a37e8 !important; }
.tcCreateBtn__plus { font-size: 24px !important; line-height: 1 !important; }
.tcCreateBtn__label { display: none !important; }

/* Droite : (langue + horloge masquées) notifs, messages, profil */
.tcHeader__right {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.tcLangSwitch,
.tcClock { display: none !important; }

.tcHeader .tcIconBtn {
  position: relative;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #f2f3f7 !important;
  color: #14141b !important;
  border: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  text-decoration: none;
}
.tcHeader .tcIconBtn:hover { background: #ececf2 !important; }
/* Badge de compteur (>0) façon maquette */
.tcHeader .tcIconBtn[data-count]:not([data-count="0"])::after {
  content: attr(data-count);
  position: absolute;
  top: -2px; right: -2px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #6d4aff;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px #fff;
}

body .tcProfile {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 5px 8px 5px 5px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  color: #14141b !important;
  background: transparent !important;
  border: 0 !important;
}
body .tcProfile:hover { background: #f2f3f7 !important; }
.tcProfile__photo,
.tcProfile__avatar {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: grid !important;
  place-items: center !important;
  background: #6d4aff !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}
.tcProfile__name { font-size: 14px !important; font-weight: 700 !important; color: #14141b !important; }
.tcProfile__handle { display: none !important; }
.tcProfile > div { display: flex; flex-direction: column; line-height: 1.1; }
/* Chevron ▾ */
.tcProfile::after {
  content: "";
  width: 8px; height: 8px;
  margin-left: 2px;
  border-right: 2px solid #8a8b99;
  border-bottom: 2px solid #8a8b99;
  transform: rotate(45deg) translateY(-2px);
}


/* ============================================================================
 * RACINE .tcf — tokens + reset local
 * ========================================================================== */
.tcf {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #f2f3f7;
  --line: #e9eaf0;
  --line-2: #e0e1ea;
  --text: #14141b;
  --text-2: #5b5c6b;
  --text-3: #8a8b99;
  --purple: #6d4aff;
  --purple-d: #5a37e8;
  --purple-soft: #efeaff;
  --gold: #f6b500;
  --heart: #f2385a;
  --green: #17b26a;
  --blue: #1d9bf0;

  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --r: 16px;
  --rs: 12px;

  display: block;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ── FIX position:fixed + pleine largeur ──────────────────────────────────
   homeIndex.css centre le conteneur (.tcMain : max-width + margin auto) et lui
   applique probablement un transform/contain. Or un ancêtre transformé devient
   le référentiel de position:fixed → les colonnes se calaient sur le conteneur
   au lieu de la fenêtre. On neutralise donc, sur le conteneur du feed membre
   uniquement, tout centrage ET toute propriété créant un « containing block ». */
.tcf.tcMain,
.tcf.tcMain--membre,
.tcf {
  max-width: none !important;
  width: auto !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  will-change: auto !important;
  contain: none !important;
}
.tcf .tcf-shell {
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  contain: none !important;
  will-change: auto !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   FIX « colonnes collées aux bords » (façon Facebook)
   Pour qu'une colonne position:fixed se cale sur la FENÊTRE, AUCUN de ses
   ancêtres ne doit créer de « containing block ». Un containing block est
   créé par : transform, perspective, filter, backdrop-filter,
   will-change (transform/…), contain (layout/paint/strict/content) et
   content-visibility. Une autre feuille (layout « console », wrapper ouvert
   par header.php, etc.) en posait un sur un ancêtre de .tcf → les colonnes se
   calaient dessus au lieu de la fenêtre, d'où le grand vide à droite.
   On neutralise donc TOUS les ancêtres du feed membre (html, body ET tout
   wrapper intermédiaire) grâce à *:has(). Scopé au feed membre : sans effet
   ailleurs sur le site. */
*:has(.tcf.tcMain--membre) {
  transform: none !important;
  perspective: none !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  will-change: auto !important;
  contain: none !important;
  content-visibility: visible !important;
}

/* Positionnement DURCI des deux colonnes (classes dédiées tcSideFix / tcRailFix).
   !important pour passer devant toute règle héritée d'une ancienne feuille. */
.tcf .tcSideFix {                 /* colonne GAUCHE — collée au bord gauche */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: var(--tcf-side) !important;
  height: 100vh !important;
  z-index: 1001 !important;
}
.tcf .tcRailFix {                 /* colonne DROITE — collée au bord droit */
  position: fixed !important;
  top: calc(var(--tcf-head) + 20px) !important;
  right: var(--tcf-railgap) !important;
  left: auto !important;
  width: var(--tcf-rail) !important;
  z-index: 900 !important;
}

.tcf *,
.tcf *::before,
.tcf *::after { box-sizing: border-box; }
.tcf a { color: inherit; text-decoration: none; }
.tcf h1, .tcf h2, .tcf h3 { margin: 0; }
.tcf img { display: block; max-width: 100%; }
.tcf button {
  font-family: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
}
.tcf .tcf-ini {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
}


/* ============================================================================
 * GABARIT : sidebar fixe · colonne centrale (défile) · rail fixe à droite
 * ========================================================================== */
.tcf .tcf-shell {
  display: block;
  margin-left: var(--tcf-side);
  padding: calc(var(--tcf-head) + 20px) calc(var(--tcf-rail) + var(--tcf-railgap) + var(--tcf-railgap)) 48px 32px;
}


/* ── SIDEBAR (fixe, scroll interne) ────────────────────────── */
.tcf .tcf-side {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--tcf-side);
  height: 100vh;
  overflow-y: auto;
  z-index: 1001;
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 20px 14px 18px;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
}
.tcf .tcf-side::-webkit-scrollbar { width: 8px; }
.tcf .tcf-side::-webkit-scrollbar-thumb { background: #e2e3ea; border-radius: 8px; }

.tcf .tcf-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 8px 20px;
}
.tcf .tcf-brand__logo {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-size: 24px;
  background: var(--gold);
  box-shadow: 0 8px 18px -8px rgba(246, 181, 0, .8);
}
.tcf .tcf-brand__tx b {
  display: block;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.01em;
}
.tcf .tcf-brand__tx i {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
}

.tcf .tcf-nav { display: flex; flex-direction: column; gap: 3px; }
.tcf .tcf-nav__i {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 11px 15px;
  border-radius: 12px;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
}
.tcf .tcf-nav__i .ic {
  font-size: 19px;
  width: 24px;
  text-align: center;
  line-height: 1;
}
.tcf .tcf-nav__i:hover { background: var(--surface-2); }
.tcf .tcf-nav__i.is-active { background: var(--text); color: #fff; }
.tcf .tcf-nav__b {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--purple);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-grid;
  place-items: center;
}

.tcf .tcf-publish {
  margin: 16px 6px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 16px;
  border-radius: 13px;
  background: var(--gold);
  color: #1a1400;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 10px 22px -10px rgba(246, 181, 0, .85);
}
.tcf .tcf-publish span { font-size: 18px; line-height: 1; }
.tcf .tcf-publish:hover { filter: brightness(1.04); }

.tcf .tcf-side__deco {
  margin: 24px 10px 6px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.tcf .tcf-side__words {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text-2);
  font-style: italic;
}
.tcf .tcf-side__globe { font-size: 36px; line-height: 1; }


/* ── COLONNE CENTRALE (défile avec la page) ────────────────── */
.tcf .tcf-feed {
  max-width: 1080px;
  margin: 0 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tcf .tcf-stories,
.tcf .tcf-composer,
.tcf .tcf-post,
.tcf .tcf-card,
.tcf .tcf-empty {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

/* — Stories — */
.tcf .tcf-stories { padding: 16px 18px 18px; }
.tcf .tcf-stories__head,
.tcf .tcf-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.tcf .tcf-stories__head h2,
.tcf .tcf-card__head h2 {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.tcf .tcf-stories__head a,
.tcf .tcf-card__head a {
  font-size: 13px;
  font-weight: 600;
  color: var(--purple);
}
.tcf .tcf-stories__head a:hover,
.tcf .tcf-card__head a:hover { text-decoration: underline; }

.tcf .tcf-stories__rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.tcf .tcf-stories__rail::-webkit-scrollbar { display: none; }
.tcf .tcf-story {
  position: relative;
  flex: 0 0 auto;
  width: 86px;
  height: 116px;
  border-radius: 14px;
  overflow: hidden;
  background: #22232c;
  display: block;
}
.tcf .tcf-story > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.tcf .tcf-story::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(0, 0, 0, .68), rgba(0, 0, 0, 0) 55%);
}
.tcf .tcf-story__flag {
  position: absolute;
  z-index: 2;
  top: 7px;
  left: 7px;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 13px;
  background: rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.tcf .tcf-story__name {
  position: absolute;
  z-index: 2;
  left: 8px;
  right: 8px;
  bottom: 8px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tcf .tcf-story:hover { transform: translateY(-2px); transition: transform .16s ease; }
.tcf .tcf-story--add {
  background: linear-gradient(160deg, var(--purple), #8b5cf6);
  display: grid;
  place-items: center;
  gap: 6px;
  align-content: center;
}
.tcf .tcf-story--add::after { content: none; }
.tcf .tcf-story__plus {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 22px;
  color: #fff;
  background: rgba(255, 255, 255, .22);
}
.tcf .tcf-story--add .tcf-story__name {
  position: static;
  text-align: center;
}

/* — Composer — */
.tcf .tcf-composer { padding: 16px 18px; }
.tcf .tcf-composer__top { display: flex; align-items: center; gap: 12px; }
.tcf .tcf-ini--me {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
}
.tcf .tcf-composer__field {
  flex: 1;
  text-align: left;
  padding: 13px 18px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-3);
  font-size: 15px;
  font-weight: 500;
}
.tcf .tcf-composer__field:hover { background: #ececf2; }
.tcf .tcf-composer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.tcf .tcf-composer__tools {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.tcf .tcf-composer__tools button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: 10px;
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 600;
}
.tcf .tcf-composer__tools button span { font-size: 16px; }
.tcf .tcf-composer__tools button:hover { background: var(--purple-soft); color: var(--purple-d); }
.tcf .tcf-composer__send {
  flex: 0 0 auto;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--text);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.tcf .tcf-composer__send:hover { background: #000; }


/* ── POST (recette) ───────────────────────────────────────── */
.tcf .tcf-post {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
}
.tcf .tcf-post__av {
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-2);
}
.tcf .tcf-post__av img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.tcf .tcf-post__body { flex: 1; min-width: 0; }
.tcf .tcf-post__head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.tcf .tcf-post__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.tcf .tcf-post__name:hover { text-decoration: underline; }
.tcf .tcf-verif {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  display: grid;
  place-items: center;
}
.tcf .tcf-post__handle,
.tcf .tcf-post__time { font-size: 13.5px; color: var(--text-3); }
.tcf .tcf-post__dot { color: var(--text-3); }
.tcf .tcf-post__more {
  margin-left: auto;
  color: var(--text-3);
  font-size: 18px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 8px;
}
.tcf .tcf-post__more:hover { background: var(--surface-2); color: var(--text); }

.tcf .tcf-post__title {
  display: block;
  margin-top: 8px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
}
.tcf .tcf-post__title:hover { color: var(--purple-d); }
.tcf .tcf-post__flag { font-size: 18px; }
.tcf .tcf-post__text {
  margin: 6px 0 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-2);
}
.tcf .tcf-post__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.tcf .tcf-post__tags a {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--purple);
}
.tcf .tcf-post__tags a:hover { text-decoration: underline; }

.tcf .tcf-post__media {
  display: block;
  position: relative;
  margin-top: 12px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 16 / 10;
  background: var(--surface-2);
}
.tcf .tcf-post__media img,
.tcf .tcf-post__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tcf .tcf-post__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.tcf .tcf-post__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}
.tcf .tcf-act {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 600;
  transition: color .14s ease, background .14s ease;
}
.tcf .tcf-act svg { width: 19px; height: 19px; }
.tcf .tcf-act--c:hover { color: var(--blue);   background: rgba(29, 155, 240, .1); }
.tcf .tcf-act--r:hover { color: var(--green);  background: rgba(23, 178, 106, .1); }
.tcf .tcf-act--l:hover { color: var(--heart);  background: rgba(242, 56, 90, .1); }
.tcf .tcf-act--b:hover { color: var(--purple); background: var(--purple-soft); }
.tcf .tcf-act--s { margin-left: auto; }
.tcf .tcf-act--s:hover { color: var(--purple); background: var(--purple-soft); }

.tcf .tcf-empty {
  padding: 30px 20px;
  text-align: center;
  color: var(--text-2);
  font-size: 14.5px;
}
.tcf .tcf-empty a { color: var(--purple); font-weight: 700; }


/* ── RAIL DROIT (fixé sur le bord droit de la page) ────────── */
.tcf .tcf-rail {
  position: fixed;
  top: calc(var(--tcf-head) + 20px);
  right: var(--tcf-railgap);
  width: var(--tcf-rail);
  max-height: calc(100vh - var(--tcf-head) - 40px);
  overflow-y: auto;
  scrollbar-width: thin;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 8px;
}
.tcf .tcf-rail::-webkit-scrollbar { width: 8px; }
.tcf .tcf-rail::-webkit-scrollbar-thumb { background: #e2e3ea; border-radius: 8px; }
.tcf .tcf-card { padding: 16px 18px; }

/* — Tendances — */
.tcf .tcf-trend {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
}
.tcf .tcf-trend + .tcf-trend { border-top: 1px solid var(--line); }
.tcf .tcf-trend__rank {
  flex: 0 0 auto;
  width: 20px;
  font-size: 16px;
  font-weight: 800;
  color: var(--text-3);
  text-align: center;
}
.tcf .tcf-trend__th {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 11px;
  object-fit: cover;
  background: var(--surface-2);
}
.tcf .tcf-trend__th--ph {
  display: grid;
  place-items: center;
  font-size: 20px;
}
.tcf .tcf-trend__tx { min-width: 0; flex: 1; }
.tcf .tcf-trend__tx b {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tcf .tcf-trend__tx i {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 12.5px;
  color: var(--text-3);
}
.tcf .tcf-trend:hover .tcf-trend__tx b { color: var(--purple-d); }
.tcf .tcf-trend__up {
  flex: 0 0 auto;
  color: var(--green);
  font-size: 15px;
  font-weight: 800;
}

/* — Suggestions à suivre — */
.tcf .tcf-sugg__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
}
.tcf .tcf-sugg__row + .tcf-sugg__row { border-top: 1px solid var(--line); }
.tcf .tcf-sugg__id { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.tcf .tcf-sugg__av {
  position: relative;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-2);
}
.tcf .tcf-sugg__av img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.tcf .tcf-sugg__tx { min-width: 0; }
.tcf .tcf-sugg__tx b {
  display: block;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tcf .tcf-sugg__tx i {
  display: block;
  font-style: normal;
  font-size: 12.5px;
  color: var(--text-3);
}
.tcf .tcf-sugg__id:hover .tcf-sugg__tx b { color: var(--purple-d); }
.tcf .tcf-sugg__btn {
  flex: 0 0 auto;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--purple);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.tcf .tcf-sugg__btn:hover { background: var(--purple-d); }

/* — Encart membre (CTA) — */
.tcf .tcf-cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  padding: 22px 20px;
  color: #fff;
  background: linear-gradient(150deg, #7c5cff, #6d4aff 55%, #5a37e8);
}
.tcf .tcf-cta__inner { position: relative; z-index: 1; }
.tcf .tcf-cta h3 { font-size: 18px; font-weight: 800; }
.tcf .tcf-cta p {
  margin: 8px 0 16px;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .88);
}
.tcf .tcf-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 18px;
  border-radius: 12px;
  background: #fff;
  color: var(--purple-d);
  font-size: 14px;
  font-weight: 800;
}
.tcf .tcf-cta__btn:hover { background: #f3f0ff; }
.tcf .tcf-cta__globe {
  position: absolute;
  right: -6px;
  bottom: -10px;
  z-index: 0;
  font-size: 64px;
  opacity: .28;
  transform: rotate(-8deg);
}


/* ============================================================================
 * RESPONSIVE
 * ========================================================================== */

/* Écrans moyens : on masque le rail droit, le centre s'élargit. */
@media (max-width: 1180px) {
  .tcf .tcf-rail { display: none; }
  .tcf .tcf-shell {
    padding-right: 32px;
  }
}

/* Tablette / mobile : sidebar hors-écran (burger), entête pleine largeur. */
@media (max-width: 860px) {
  body .tcHeader {
    padding: 0 16px !important;
  }
  .tcHeader__burger { display: inline-flex; }
  .tcHeaderSearch { flex: 1 1 auto !important; }
  .tcProfile__name { display: none !important; }
  .tcProfile::after { display: none; }

  .tcf .tcf-shell {
    margin-left: 0;
    padding: calc(var(--tcf-head) + 16px) 16px 70px;
  }
  .tcf .tcf-side {
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: none;
  }
  .tcf .tcf-side.is-open {
    transform: none;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .45);
  }
}

@media (max-width: 520px) {
  .tcf .tcf-composer__tools button span { font-size: 15px; }
  .tcf .tcf-composer__tools button { padding: 8px 9px; }
  .tcf .tcf-post__title { font-size: 15.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .tcf * { animation: none !important; transition: none !important; }
}

/* ============================================================================
 * IDENTITÉ 4 COLONNES — navigation · feed · notifications · Messenger
 * Ajout 2026 : surcharge finale volontaire, sans modifier les sélecteurs PHP.
 * ========================================================================== */
:root {
  --tcf-side: 250px;     /* colonne de navigation (fixe) */
  --tcf-feed: 600px;     /* largeur MAX du feed */
  --tcf-feedmin: 440px;  /* largeur MINI du feed avant que les rails ne rétrécissent */
  --tcf-notif: 330px;    /* colonne notifications */
  --tcf-msg: 322px;      /* colonne messages */
  --tcf-gap: 16px;
  --tcf-edge: 18px;
}

body { background: #f7f7f4 !important; }

/* L'entête suit les trois colonnes de contenu. */
body .tcHeader {
  padding-left: calc(var(--tcf-side) + 26px) !important;
  padding-right: var(--tcf-edge) !important;
  background: rgba(255,255,255,.96) !important;
  backdrop-filter: blur(16px) !important;
}
.tcHeaderSearch { flex-basis: var(--tcf-feed) !important; max-width: var(--tcf-feed) !important; }
.tcHeader__center { flex: 0 1 auto !important; width: var(--tcf-feed) !important; }
.tcHeader__right { margin-left: auto !important; }

.tcf .tcf-shell {
  margin-left: var(--tcf-side) !important;
  padding: calc(var(--tcf-head) + 18px) var(--tcf-edge) 44px var(--tcf-gap) !important;
  display: grid !important;
  /* 4 colonnes façon maquette : nav (fixe) | publications | notifications | messages.
     Le feed prend TOUTE la place restante (1fr) → il est collé près de la nav et
     Messages reste collé au bord droit, sans vide central (le grand espace vide
     venait de justify-content:center qui centrait des colonnes plus étroites que
     la fenêtre). Les 2 rails gardent une largeur fixe. */
  grid-template-columns: minmax(var(--tcf-feedmin), 1fr) var(--tcf-notif) var(--tcf-msg) !important;
  gap: var(--tcf-gap) !important;
  align-items: start !important;
}

.tcf .tcf-feed {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  min-width: 0;
}

/* Les deux rails sociaux (notifications + messages) restent visibles au
   défilement : sticky sous l'entête, chacun dans sa colonne de la grille. */
.tcf .tcNotifFix,
.tcf .tcMessengerFix {
  position: sticky !important;
  top: calc(var(--tcf-head) + 18px) !important;
  width: 100% !important;
  height: calc(100vh - var(--tcf-head) - 36px) !important;
  min-width: 0;
  z-index: 20 !important;
}

.tcf-socialPanel {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(24,28,38,.07);
  border-radius: 20px;
  box-shadow: 0 16px 42px rgba(40,44,58,.06);
}
.tcf-socialPanel--notif { background: linear-gradient(180deg,#fffaf0 0%,#fffdf8 58%,#fff8e8 100%); }
.tcf-socialPanel--messages { background: linear-gradient(180deg,#f4faf5 0%,#f8fcf8 58%,#eef8f1 100%); }

.tcf-socialPanel__head {
  min-height: 76px;
  padding: 18px 18px 12px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.tcf-socialPanel__eyebrow {
  display: block;
  margin-bottom: 2px;
  color: #9a7a31;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.tcf-socialPanel--messages .tcf-socialPanel__eyebrow { color: #447b5b; }
.tcf-socialPanel__head h2 { font-size: 19px; letter-spacing: -.03em; }
.tcf-socialPanel__action,
.tcf-composeMessage {
  color: #6647e8 !important;
  font-size: 12px;
  font-weight: 700;
}
.tcf-composeMessage {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(32,56,42,.1);
  font-size: 18px;
}

.tcf-filterPills { display:flex; gap:7px; padding:0 16px 12px; overflow-x:auto; }
.tcf-filterPills button {
  flex:0 0 auto; padding:8px 12px; border-radius:999px !important;
  background:rgba(255,255,255,.7) !important; color:#66616b !important;
  font-size:11px; font-weight:700; border:1px solid rgba(20,20,25,.05) !important;
}
.tcf-filterPills button.is-active { background:#17181d !important; color:#fff !important; }

.tcf-notifList, .tcf-messageList { flex:1; min-height:0; overflow-y:auto; scrollbar-width:thin; }
.tcf-notif {
  display:grid; grid-template-columns:20px 42px minmax(0,1fr) 44px; gap:9px;
  align-items:start; padding:15px 14px; border-top:1px solid rgba(34,34,40,.055);
  transition:background .18s ease, transform .18s ease;
}
.tcf-notif:hover { background:rgba(255,255,255,.62); }
.tcf-notif__icon { font-size:17px; padding-top:9px; text-align:center; }
.tcf-notif__icon--like { color:#ef315f; }
.tcf-notif__icon--recipe { color:#7051ef; }
.tcf-notif__icon--comment { color:#1f8f65; }
.tcf-notif__avatar, .tcf-message__avatar { position:relative; display:block; border-radius:50%; overflow:visible; }
.tcf-notif__avatar { width:42px; height:42px; }
.tcf-notif__avatar img, .tcf-message__avatar img { position:absolute; inset:0; width:100%; height:100%; border-radius:50%; object-fit:cover; z-index:2; }
.tcf-notif__body { min-width:0; display:flex; flex-direction:column; gap:2px; line-height:1.3; }
.tcf-notif__body b { font-size:12px; }
.tcf-notif__body span { color:#65636c; font-size:11px; }
.tcf-notif__body strong { font-size:11px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tcf-notif__body small { color:#9b98a1; font-size:10px; }
.tcf-notif__thumb { width:44px; height:44px; border-radius:11px; object-fit:cover; }

.tcf-messageSearch {
  margin:0 16px 12px; height:40px; padding:0 13px; display:flex; align-items:center; gap:9px;
  border-radius:999px; background:rgba(255,255,255,.72); border:1px solid rgba(32,56,42,.07);
}
.tcf-messageSearch span { font-size:20px; color:#758079; transform:rotate(-15deg); }
.tcf-messageSearch input { flex:1; min-width:0; border:0; outline:0; background:transparent; font:inherit; color:#23272a; }
.tcf-messageTabs { display:grid; grid-template-columns:repeat(3,1fr); padding:0 14px; border-bottom:1px solid rgba(31,62,44,.08); }
.tcf-messageTabs button { position:relative; padding:11px 3px; font-size:11px; color:#65716a; font-weight:700; }
.tcf-messageTabs button.is-active { color:#193c29; }
.tcf-messageTabs button.is-active::after { content:""; position:absolute; left:16%; right:16%; bottom:-1px; height:2px; background:#23935d; border-radius:2px; }
.tcf-message { display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:10px; align-items:center; padding:14px 15px; border-bottom:1px solid rgba(31,62,44,.06); }
.tcf-message:hover { background:rgba(255,255,255,.64); }
.tcf-message__avatar { width:44px; height:44px; }
.tcf-message__avatar i { position:absolute; right:0; bottom:1px; width:11px; height:11px; border-radius:50%; background:#22b66e; border:2px solid #f3faf5; z-index:3; }
.tcf-message__body { min-width:0; }
.tcf-message__top { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.tcf-message__top b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.tcf-message__top small { color:#7a6ae7; font-size:9px; white-space:nowrap; }
.tcf-message__preview { display:block; margin-top:4px; color:#6a736d; font-size:10.5px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tcf-message.is-unread .tcf-message__preview { color:#24362c; font-weight:650; }
.tcf-message__badge { display:grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:#6747ef; color:#fff; font-size:9px; font-weight:800; }

.tcf-socialPanel__footer {
  flex:0 0 auto; display:block; padding:15px; text-align:center; border-top:1px solid rgba(30,30,35,.06);
  background:rgba(255,255,255,.56); color:#6647e8 !important; font-size:11px; font-weight:800;
}
.tcf-socialPanel--messages .tcf-socialPanel__footer { color:#21704a !important; }
.tcf-panelEmpty { padding:28px 20px; color:#85828b; text-align:center; font-size:12px; }

/* Feed légèrement plus compact pour laisser vivre les deux colonnes sociales. */
.tcf .tcf-stories, .tcf .tcf-composer, .tcf .tcf-post { border-radius:18px !important; }
.tcf .tcf-post__media { max-height:360px; overflow:hidden; }
.tcf .tcf-post__media img, .tcf .tcf-post__media video { width:100%; height:100%; max-height:360px; object-fit:cover; }

/* L'ancien rail droit ne doit jamais réapparaître si un cache CSS subsiste. */
.tcf .tcf-rail, .tcf .tcRailFix { display:none !important; }

/* ── PALIERS : on resserre les largeurs AVANT de masquer une colonne ──────────
   Objectif : garder les 3 colonnes de contenu (feed + notifications + messages)
   comme sur la maquette le plus longtemps possible (jusqu'à ~1260px), puis
   dégrader proprement (2 colonnes, puis 1) sur les petites fenêtres. */

/* Grands portables : léger resserrement, 3 colonnes conservées. */
@media (max-width: 1460px) {
  :root {
    --tcf-side: 240px; --tcf-feed: 560px; --tcf-feedmin: 400px;
    --tcf-notif: 320px; --tcf-msg: 310px; --tcf-gap: 14px;
  }
}

/* Portables 13-14" : resserrement plus marqué, toujours 3 colonnes. */
@media (max-width: 1340px) {
  :root {
    --tcf-side: 228px; --tcf-feed: 520px; --tcf-feedmin: 360px;
    --tcf-notif: 300px; --tcf-msg: 290px; --tcf-gap: 12px;
  }
}

/* Sous ~1260px : plus la place pour la colonne extérieure → Messages masqué,
   le corps central (publications + notifications) occupe toute la largeur. */
@media (max-width: 1260px) {
  :root { --tcf-side: 220px; }
  /* Plus la place pour 4 colonnes -> Messages se retire, feed + notifications restent. */
  .tcf .tcf-shell { grid-template-columns: minmax(0, 1fr) var(--tcf-notif) !important; }
  .tcf .tcMessengerFix { display: none !important; }
  .tcHeader__center { width: auto !important; flex: 1 1 auto !important; }
  .tcHeaderSearch { max-width: 620px !important; }
}

/* Tablette : le corps central ne garde que les publications (feed centré). */
@media (max-width: 940px) {
  .tcf .tcf-shell { grid-template-columns: minmax(0, 720px) !important; justify-content: center !important; }
  .tcf .tcNotifFix { display: none !important; }
  .tcf .tcf-feed { max-width: 720px !important; }
}

/* Mobile : sidebar hors-écran (burger), tout pleine largeur. */
@media (max-width: 760px) {
  .tcf .tcf-shell { margin-left: 0 !important; margin-right: 0 !important; padding-left: 10px !important; padding-right: 10px !important; }
  body .tcHeader { padding-left: 14px !important; }
  .tcHeader__center { width: auto !important; flex: 1 1 auto !important; }
}
/* ============================================================================
 * MODALE « Préparer une recette »  (#indexCapture) + overlay (#overlayCapture)
 * ----------------------------------------------------------------------------
 * Placé ici car index.php ne charge plus aucune feuille : cette CSS est donc
 * fournie par la feuille globale du feed membre. Ouverture/fermeture pilotées
 * par la classe .is-open (ajoutée par entete.php et index.php). NE PAS remettre
 * de <link>/<style> dans index.php.
 * ========================================================================== */
#overlayCapture {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(17, 18, 24, .55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease;
}
#overlayCapture.is-open { opacity: 1; visibility: visible; }

.indexCapture {
  position: fixed;
  z-index: 2001;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -48%) scale(.97);
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #fff;
  color: #14141b;
  border-radius: 18px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.indexCapture.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
body.tc-modal-open,
body.modal-open { overflow: hidden; }

.indexCapture .modalHeader {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  background: #fff;
  border-bottom: 1px solid #e9eaf0;
}
.indexCapture .modalHeader h2 { margin: 0; font-size: 18px; font-weight: 800; }
.indexCapture #closeCapture {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #f2f3f7;
  color: #14141b;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.indexCapture #closeCapture:hover { background: #e6e7ee; }

.indexCapture .modal-body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.indexCapture label {
  display: block;
  margin-bottom: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: #3a3b47;
}
.indexCapture .form-control {
  width: 100%;
  padding: 11px 13px;
  font: inherit;
  color: #14141b;
  background: #f7f8fa;
  border: 1px solid #e3e4ec;
  border-radius: 10px;
  outline: none;
}
.indexCapture .form-control:focus {
  border-color: #6d4aff;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(109, 74, 255, .14);
}
.indexCapture textarea.form-control { resize: vertical; min-height: 96px; }

.indexCapture #resultatPaysModale ul,
.indexCapture #listeActivite ul { list-style: none; margin: 4px 0 0; padding: 0; }

.indexCapture .tcMediaPick { display: flex; gap: 10px; }
.indexCapture .tcMediaPick__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  font: inherit;
  font-weight: 600;
  color: #3a3b47;
  background: #f7f8fa;
  border: 1px solid #e3e4ec;
  border-radius: 10px;
  cursor: pointer;
}
.indexCapture .tcMediaPick__btn.is-active {
  border-color: #6d4aff;
  background: #efeaff;
  color: #5a37e8;
}

.indexCapture .custom-file-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px;
  text-align: center;
  color: #5b5c6b;
  border: 1.5px dashed #cfd1dd;
  border-radius: 12px;
  cursor: pointer;
}
.indexCapture .custom-file-upload:hover { border-color: #6d4aff; background: #faf9ff; }
.indexCapture .custom-file-upload input[type="file"] { display: none; }
.indexCapture .tcMediaHint { font-size: 12px; color: #8a8b99; }
.indexCapture .image-preview img { max-width: 100%; margin-top: 10px; border-radius: 10px; }

.indexCapture .modalFooter {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 20px;
  background: #fff;
  border-top: 1px solid #e9eaf0;
}
.indexCapture #messageCapture { margin-right: auto; font-size: 13px; }
.indexCapture .post-button {
  padding: 11px 22px;
  border: 0;
  border-radius: 999px;
  background: #6d4aff;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.indexCapture .post-button:hover { background: #5a37e8; }
/* ============================================================================
 * footer.css — Pied de page TripCooking (.siteFooter)
 * ----------------------------------------------------------------------------
 * Thème CLAIR, accordé à la page visiteur : fond blanc comme les cartes,
 * texte sombre, accents violet #6d4bd8 + or #f5c518, typo Inter.
 * À charger dans le <head> : <link rel="stylesheet" href="css/footer.css">
 * Tout est scopé sous .siteFooter (aucun impact sur le reste du site).
 * ========================================================================== */

.siteFooter{
  --f-bg:#ffffff;          /* fond (blanc, comme les cartes) */
  --f-purple:#6d4bd8;      /* violet principal */
  --f-purple-d:#5a3cc4;    /* violet foncé (survols) */
  --f-purple-l:#efeafd;    /* violet très clair (pastilles) */
  --f-gold:#f5c518;        /* or (marque, filets) */
  --f-gold-d:#b8860b;      /* or foncé lisible sur fond clair */
  --f-ink:#1b1b22;         /* titres */
  --f-txt:#41414c;         /* texte courant */
  --f-muted:#8b8b96;       /* texte secondaire */
  --f-line:#ecebf0;        /* bordures douces */
  --f-chip:#f6f6f8;        /* fond des chips */
  --f-radius:14px;

  box-sizing:border-box;
  margin-top:40px;
  background:var(--f-bg);
  border-top:1px solid var(--f-line);
  color:var(--f-txt);
  font-family:"Inter","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
.siteFooter *,
.siteFooter *::before,
.siteFooter *::after{ box-sizing:border-box; }
.siteFooter a{ color:inherit; text-decoration:none; transition:color .15s; }
.siteFooter ul{ list-style:none; margin:0; padding:0; }
.siteFooter svg{ display:block; }

/* Filet or en haut du footer */
.siteFooter::before{
  content:""; display:block; height:3px;
  background:linear-gradient(90deg,var(--f-gold),var(--f-purple) 60%,transparent);
}

/* ---------- Zone principale ---------- */
.siteFooter__top{
  max-width:1200px; margin:0 auto;
  padding:48px 28px 32px;
  display:grid; grid-template-columns:minmax(260px,1.4fr) 2fr; gap:44px;
}

/* ---------- Marque ---------- */
.siteFooter__logo{ display:inline-flex; align-items:center; gap:11px; }
.siteFooter__logoMark{
  width:42px; height:42px; flex:0 0 42px; border-radius:12px;
  display:grid; place-items:center; font-weight:800; font-size:16px; color:#3a2b06;
  background:linear-gradient(135deg,var(--f-gold),#ffd75a);
  box-shadow:0 4px 14px rgba(245,197,24,.30);
}
.siteFooter__logoText{ font-size:20px; font-weight:800; color:var(--f-ink); letter-spacing:.2px; }
.siteFooter__tagline{
  margin:14px 0 8px; font-family:Georgia,"Times New Roman",serif; font-style:italic;
  font-size:14px; color:var(--f-purple-d);
}
.siteFooter__desc{ margin:0 0 20px; font-size:14px; color:var(--f-muted); max-width:38ch; }

/* Réseaux sociaux */
.siteFooter__socials{ display:flex; flex-wrap:wrap; gap:10px; }
.siteFooter__social{
  display:inline-flex; align-items:center; gap:9px;
  padding:8px 14px 8px 8px; border-radius:30px;
  background:var(--f-chip); border:1px solid var(--f-line);
  font-size:13px; font-weight:600; color:var(--f-txt);
  transition:transform .12s, background .15s, border-color .15s, box-shadow .15s;
}
.siteFooter__social svg{ width:22px; height:22px; border-radius:50%; }
.siteFooter__social:hover{
  transform:translateY(-2px); background:#fff;
  border-color:var(--f-purple); color:var(--f-ink);
  box-shadow:0 8px 20px rgba(109,75,216,.14);
}

/* ---------- Colonnes de liens ---------- */
.siteFooter__nav{
  display:grid; grid-template-columns:repeat(3,1fr); gap:32px;
}
.siteFooter__title{
  margin:2px 0 16px; font-size:12px; font-weight:700;
  letter-spacing:1.2px; text-transform:uppercase; color:var(--f-ink);
  position:relative; padding-bottom:10px;
}
.siteFooter__title::after{
  content:""; position:absolute; left:0; bottom:0;
  width:28px; height:2px; border-radius:2px; background:var(--f-gold);
}
.siteFooter__nav li{ margin-bottom:11px; }
.siteFooter__nav a{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; color:var(--f-txt);
}
.siteFooter__nav a:hover{ color:var(--f-purple-d); }
.siteFooter__nav a:hover .siteFooter__count{ background:var(--f-purple); color:#fff; border-color:transparent; }

/* Pastille « nombre de recettes » */
.siteFooter__count{
  font-size:11px; font-weight:700; color:var(--f-purple-d);
  background:var(--f-purple-l); border:1px solid transparent;
  padding:1px 8px; border-radius:20px; line-height:1.6;
  transition:background .15s, color .15s, border-color .15s;
}

/* ---------- Barre légale ---------- */
.siteFooter__bar{
  max-width:1200px; margin:0 auto;
  padding:18px 28px; border-top:1px solid var(--f-line);
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.siteFooter__copy{ margin:0; font-size:13px; color:var(--f-muted); }
.siteFooter__barLinks{ display:flex; flex-wrap:wrap; gap:20px; }
.siteFooter__barLinks a{ font-size:13px; color:var(--f-muted); }
.siteFooter__barLinks a:hover{ color:var(--f-purple-d); }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .siteFooter__top{ grid-template-columns:1fr; gap:34px; padding:40px 22px 28px; }
}
@media (max-width:560px){
  .siteFooter__nav{ grid-template-columns:1fr 1fr; gap:26px; }
  .siteFooter__bar{ flex-direction:column; align-items:flex-start; gap:10px; padding:18px 22px; }
}