@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* =============================================================================
   entete.css — feuille AUTONOME de l'entête TripCooking (.tcHeader)
   Chargée par haut/entete.php lui-même → l'entête est stylé de façon IDENTIQUE
   sur TOUTES les pages (index.php, pays.php, recette.php, …), sans dépendre de
   homeIndex.css.

   Choix technique : l'entête est en position:sticky (donc DANS le flux). Il prend
   sa propre hauteur en haut de page : le contenu ne passe jamais dessous, quelle
   que soit la page, et l'entête reste épinglé au défilement. On neutralise tout
   padding-top résiduel du body (certaines pages en ajoutaient pour un entête
   « fixed ») afin d'éviter un double décalage.
   ========================================================================== */

/* un seul décalage : celui de l'entête sticky lui-même */
body{ padding-top:0 !important; }

.tcHeader{
  position:sticky; top:0; z-index:1000;
  display:flex; align-items:center; gap:16px;
  height:58px; padding:0 20px; box-sizing:border-box;
  background:rgba(10,10,13,.86);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
          backdrop-filter:blur(14px) saturate(1.25);
  border-bottom:1px solid rgba(255,255,255,.07);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:#f3f3f6;
}

/* ── GAUCHE : burger + marque ─────────────────────────────────────────────── */
.tcHeader__left{ display:flex; align-items:center; gap:12px; flex:0 0 auto; min-width:0; }

.tcHeader__brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.tcHeader__logo{
  width:34px; height:34px; flex:0 0 auto; border-radius:10px;
  display:grid; place-items:center;
  font-weight:800; font-size:13px; letter-spacing:.02em; color:#fff;
  background:linear-gradient(135deg,#f8517a,#ff7d9e);
  box-shadow:0 6px 18px -8px rgba(248,81,122,.8);
}
.tcHeader__brandText{
  display:inline-flex; gap:.06em;
  font-size:18px; font-weight:800; letter-spacing:-.01em; color:#f3f3f6; white-space:nowrap;
}
.tcHeader__brandText span{ color:#f8517a; }

/* ── CENTRE : recherche (centrée) + bouton Créer ──────────────────────────── */
.tcHeader__center{
  flex:1 1 auto; min-width:0;
  display:flex; align-items:center; justify-content:center; gap:12px;
}
.tcHeaderSearch{
  position:relative; display:flex; align-items:center;
  width:100%; max-width:520px; height:38px; padding:0 12px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09); border-radius:12px;
}
.tcHeaderSearch:focus-within{ border-color:rgba(248,81,122,.5); background:rgba(255,255,255,.07); }
.tcHeaderSearch__icon{ font-size:13px; opacity:.7; margin-right:8px; flex:0 0 auto; }
.tcHeaderSearch input{
  flex:1; min-width:0; height:100%;
  background:transparent; border:0; outline:0;
  color:#f3f3f6; font-size:14px; font-family:inherit;
}
.tcHeaderSearch input::placeholder{ color:#8a8a96; }

/* liste de résultats de la recherche */
.tcHeaderSearch .search-dropdown{
  position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:60;
  background:#15151b; border:1px solid rgba(255,255,255,.1); border-radius:12px;
  overflow:hidden; box-shadow:0 24px 60px -22px rgba(0,0,0,.85);
}
.tcHeaderSearch .search-dropdown ul{ list-style:none; margin:0; padding:6px; }
.tcHeaderSearch .search-dropdown li{ border-radius:8px; }
.tcHeaderSearch .search-dropdown li a,
.tcHeaderSearch .search-dropdown li{ color:#e6e6ec; }
.tcHeaderSearch .search-dropdown li:hover{ background:rgba(255,255,255,.06); }

.tcCreateBtn{
  display:inline-flex; align-items:center; gap:7px; flex:0 0 auto; cursor:pointer;
  background:linear-gradient(135deg,#f8517a,#e23a64); color:#fff;
  border:1px solid rgba(248,81,122,.6); border-radius:11px;
  padding:9px 15px; font-size:13.5px; font-weight:700; font-family:inherit; line-height:1;
  box-shadow:0 8px 22px -10px rgba(248,81,122,.85);
}
.tcCreateBtn:hover{ filter:brightness(1.06); }
.tcCreateBtn__plus{ font-size:15px; line-height:1; }

/* ── DROITE : langue + horloge + icônes + profil  |  connexion/inscription ── */
.tcHeader__right{ display:flex; align-items:center; gap:12px; flex:0 0 auto; margin-left:auto; }

.tcLangSwitch{
  display:inline-flex; align-items:center; gap:2px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  border-radius:9px; padding:3px;
}
.tcLangSwitch a{
  padding:4px 9px; border-radius:7px; text-decoration:none;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:12px; font-weight:700; letter-spacing:.04em; color:#9a9aa6;
}
.tcLangSwitch a:hover{ color:#f3f3f6; }
.tcLangSwitch a.is-on{ background:rgba(248,81,122,.16); color:#ff7d9e; }

.tcClock{ display:inline-flex; align-items:center; gap:8px; font-family:'JetBrains Mono',ui-monospace,monospace; }
.tcClock__live{ display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:700; letter-spacing:.08em; color:#f8517a; }
.tcClock__pulse{
  width:6px; height:6px; border-radius:50%; background:#f8517a;
  box-shadow:0 0 0 0 rgba(248,81,122,.6); animation:tcHeadPulse 1.8s infinite;
}
.tcClock__time{ font-size:12.5px; font-weight:600; letter-spacing:.02em; color:#d8d8e0; }
@keyframes tcHeadPulse{
  0%{ box-shadow:0 0 0 0 rgba(248,81,122,.55); }
  70%{ box-shadow:0 0 0 7px rgba(248,81,122,0); }
  100%{ box-shadow:0 0 0 0 rgba(248,81,122,0); }
}

.tcIconBtn{
  position:relative; display:inline-grid; place-items:center;
  width:38px; height:38px; flex:0 0 auto; border-radius:10px; cursor:pointer;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  color:#f3f3f6; font-size:16px; text-decoration:none;
}
.tcIconBtn:hover{ background:rgba(255,255,255,.1); }
/* pastille de compteur (notifs / messages) si > 0 */
.tcIconBtn[data-count]:not([data-count="0"]):not(.is-empty)::after{
  content:attr(data-count); position:absolute; top:-4px; right:-4px;
  min-width:16px; height:16px; padding:0 4px; border-radius:9px;
  background:#f8517a; color:#fff; font-size:10px; font-weight:700;
  display:grid; place-items:center; font-family:'Inter',sans-serif;
}

.tcProfile{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; padding:4px 6px; border-radius:10px; }
.tcProfile:hover{ background:rgba(255,255,255,.05); }
.tcProfile__photo,.tcProfile__avatar{ width:34px; height:34px; flex:0 0 auto; border-radius:9px; }
.tcProfile__photo{ object-fit:cover; }
.tcProfile__avatar{
  display:grid; place-items:center; font-weight:700; font-size:13px; color:#fff;
  background:linear-gradient(135deg,#8b5cf6,#6d28d9);
}
.tcProfile > div{ display:flex; flex-direction:column; line-height:1.15; }
.tcProfile__name{ font-size:13px; font-weight:700; color:#f3f3f6; }
.tcProfile__handle{ font-size:11px; color:#9a9aa6; }

/* visiteur */
.tcHeader__btnLogin,.tcHeader__btnRegister{
  display:inline-flex; align-items:center; flex:0 0 auto;
  padding:8px 15px; border-radius:10px; font-size:13px; text-decoration:none;
}
.tcHeader__btnLogin{ font-weight:600; color:#f3f3f6; border:1px solid rgba(255,255,255,.14); }
.tcHeader__btnLogin:hover{ background:rgba(255,255,255,.06); }
.tcHeader__btnRegister{
  font-weight:700; color:#fff;
  background:linear-gradient(135deg,#f8517a,#e23a64); border:1px solid rgba(248,81,122,.6);
  box-shadow:0 8px 22px -10px rgba(248,81,122,.85);
}
.tcHeader__btnRegister:hover{ filter:brightness(1.06); }

/* burger : caché sur grand écran (la colonne est visible), montré en mobile */
.tcHeader__burger{ display:none; }

/* =============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:900px){
  .tcHeader__burger{ display:inline-grid; }   /* ouvre la colonne (#rail) */
}

@media (max-width:720px){
  /* la recherche passe sur sa propre ligne pour ne plus recouvrir le nom du site */
  .tcHeader{ flex-wrap:wrap; height:auto; row-gap:8px; column-gap:10px; padding-top:8px; padding-bottom:8px; }
  .tcHeader__left{ order:1; }
  .tcHeader__right{ order:2; margin-left:auto; }
  .tcHeader__center{ order:3; flex:1 1 100%; width:100%; justify-content:flex-start; }
  .tcHeaderSearch{ max-width:none; }
  .tcHeader__brandText{ display:inline-flex; }   /* nom du site toujours visible */
}

@media (max-width:560px){
  .tcClock{ display:none; }                 /* on gagne de la place */
  .tcProfile > div{ display:none; }         /* on garde l'avatar, pas le texte */
}

@media (max-width:420px){
  .tcHeader{ padding-left:12px; padding-right:12px; }
  .tcHeader__right{ gap:6px; }
  .tcHeader__brandText{ font-size:16px; }
  .tcHeader__logo{ width:30px; height:30px; }
}

@media (prefers-reduced-motion:reduce){
  .tcClock__pulse{ animation:none; }
}