/* ============================================================================
   BANDEAU FORMAKA (logo + onglets) — UN SEUL fichier de style pour TOUTES les pages :
   site public, TMS, connexion et gestion. Le balisage vient aussi d'un seul endroit (includes/bandeau.php).
   Dans la gestion, c'est le même bandeau en version compacte (.site-header--gestion).
   ============================================================================ */
.site-header{
  --bg:#F4E7CB; --paper:#FFFCF5; --ink:#1D160E; --ink-soft:#5A4E3D; --accent:#E8571A;
  --teal:#0B3634; --teal-light:#188579; --gold:#EFA61C; --peach:#FBDEB2; --line:#E3D1A6;
  padding:48px 0 36px; text-align:center; background:var(--paper); color:var(--ink); border-bottom:1px solid var(--line);
  font-family:'Work Sans', 'Segoe UI', system-ui, sans-serif; font-size:16px; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased; view-transition-name:entete-site;
}
.site-header, .site-header *, .site-header *::before, .site-header *::after{box-sizing:border-box;}
.site-header .logo{display:inline-flex; align-items:center; gap:12px; font-family:'Fraunces', Georgia, serif; font-size:34px; font-weight:700; letter-spacing:0.01em; text-decoration:none; color:var(--ink);}
.site-header .logo img{height:50px; width:auto; display:block;}
.tabnav{display:flex; align-items:center; justify-content:center; gap:18px; margin-top:30px; flex-wrap:wrap;}
.tabnav .rule{flex:1; max-width:60px; height:1px; background:var(--line);}
.tabnav .pills{list-style:none; margin:0; display:flex; gap:6px; flex-wrap:wrap; justify-content:center; background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:10px; box-shadow:0 2px 6px rgba(34,28,21,0.06);}
.tab-btn{
  font-family:inherit; font-size:15px; letter-spacing:0.05em; text-transform:uppercase; font-weight:700; line-height:1.6;
  padding:16px 28px; border-radius:999px; border:none; background:transparent; color:var(--ink-soft);
  cursor:pointer; transition:background .2s, color .2s; text-decoration:none; display:inline-block; white-space:nowrap;
}
.tabnav .pills li{list-style:none; margin:0; padding:0;}
.tabnav .pills.many .tab-btn{padding:14px 16px; font-size:13.5px;}
.tab-btn.active{background:var(--accent); color:#fff; box-shadow:0 2px 6px rgba(226,103,42,0.35);}
.tab-btn:not(.active):hover{background:var(--peach); color:var(--ink);}
.tab-btn.tab-account{background:var(--teal); color:#fff;}
.tab-btn.tab-account:hover{background:var(--teal-light); color:#fff;}
.tab-btn.tab-account.active{background:var(--accent); color:#fff;}
.tab-btn:focus-visible, .site-header .logo:focus-visible, .tabnav .back-btn:focus-visible{outline:3px solid #E8571A; outline-offset:2px;}
@media (max-width:760px){.tabnav .rule{display:none;}}

/* ---------- Le bandeau se réduit au défilement (site public) ---------- */
.site-header-sticky{position:sticky; top:0; z-index:120; transition:padding .25s ease, box-shadow .25s ease;}
.site-header-sticky.scrolled{padding:20px 0 16px; box-shadow:0 6px 18px rgba(34,28,21,0.08);}
.site-header .logo img{transition:height .25s ease;}
.site-header .logo{transition:font-size .25s ease;}
.site-header-sticky.scrolled .logo img{height:36px;}
.site-header-sticky.scrolled .logo{font-size:24px;}
.site-header-sticky.scrolled .tabnav{margin-top:14px;}
.site-header-sticky.scrolled .tabnav .pills{padding:6px;}
.site-header-sticky.scrolled .tab-btn{padding:10px 22px; font-size:13.5px;}
.site-header-sticky.scrolled .pills.many .tab-btn{padding:10px 16px;}
.tabnav{transition:margin-top .25s ease;}
@media (prefers-reduced-motion: reduce){.site-header-sticky, .site-header-sticky.scrolled, .site-header .logo, .site-header .logo img, .tabnav{transition:none;}}

/* ---------- Tablette et téléphone : onglets plus compacts ---------- */
@media (max-width:900px){
  .site-header .tabnav .pills{padding:8px;}
  .site-header .tabnav .pills .tab-btn{padding:12px 18px; font-size:13px;}
}
@media (max-width:640px){
  .site-header{padding:22px 0 16px;}
  .site-header .logo{font-size:26px;}
  .site-header .tabnav{margin-top:16px; gap:0;}
  .site-header .tabnav .pills{padding:6px; gap:2px;}
  .site-header .tabnav .pills .tab-btn{padding:10px 12px; font-size:11.5px; letter-spacing:.03em;}
  /* Téléphone : le logo défile puis disparaît, les onglets restent collés en haut.
     La hauteur du bandeau ne change pas au défilement : pas de saut de page. */
  .site-header-sticky{top:-80px; padding-bottom:12px;}
  .site-header-sticky.scrolled{padding:22px 0 12px; box-shadow:0 4px 12px rgba(34,28,21,0.08);}
  .site-header-sticky.scrolled .logo{font-size:26px;}
  .site-header-sticky.scrolled .logo img{height:50px;}
  .site-header-sticky.scrolled .tabnav{margin-top:16px;}
}

/* ---------- Jamais de puces ni de points noirs, même si une page a ses propres règles de listes ---------- */
.tabnav .pills, .tabnav .pills li, .site-header ul, .site-header li{list-style:none !important; margin-left:0;}
.tabnav .pills li::marker, .site-header li::marker{content:'' !important; font-size:0;}
.tabnav .pills li::before, .tabnav .pills li::after{content:none !important;}

/* ---------- Bouton « page précédente » (à la place du trait de gauche des onglets) ---------- */
.tabnav .back-btn{flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); text-decoration:none; background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:9px 14px; box-shadow:0 2px 6px rgba(34,28,21,.06); white-space:nowrap;}
.tabnav .back-btn:hover{background:var(--peach); color:var(--ink);}
/* Téléphone : « page précédente » devient la première pastille des onglets */
.tabnav .pills .back-li{display:none;}
@media (max-width:760px){
  .tabnav .back-btn{display:none;}
  .tabnav .pills .back-li{display:list-item;}
  .tabnav .pills .back-in{background:var(--peach); color:var(--ink);}
}

/* ---------- Raccourcis vers la gestion (site public, administrateur connecté) ---------- */
.site-header .admin-sub{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 6px; margin:12px auto 0; max-width:980px; background:#0B3634; border-radius:12px; padding:6px 10px;}
.site-header .admin-sub a{color:#fff; text-decoration:none; font-size:13px; font-weight:600; padding:6px 11px; border-radius:8px; white-space:nowrap;}
.site-header .admin-sub a:hover{background:#188579;}
.site-header .admin-sub .admin-sub-titre{color:#F4E7CB; font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; margin-right:6px;}
@media (max-width:760px){
  .site-header .admin-sub{flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; margin:8px 8px 0; scrollbar-width:none;}
  .site-header .admin-sub::-webkit-scrollbar{display:none;}
}
@media (max-width:640px){.site-header-sticky.scrolled .admin-sub{display:none;}}
.site-header-sticky.scrolled .admin-sub{margin-top:8px; padding:4px 8px;}

/* ---------- Version de la GESTION : exactement le même bandeau (mêmes onglets, mêmes couleurs), en plus compact.
   Le logo défile puis disparaît ; les onglets restent collés en haut avec le menu de la gestion. ---------- */
.site-header.site-header--gestion{padding:8px 0 8px;}
.site-header--gestion .logo{font-size:22px; gap:9px;}
.site-header--gestion .logo img{height:30px;}
.site-header.site-header--gestion .tabnav{margin-top:8px; gap:14px;}
.site-header.site-header--gestion .tabnav .pills{padding:4px;}
.site-header.site-header--gestion .tabnav .pills .tab-btn{padding:8px 18px; font-size:13px;}
.site-header.site-header--gestion .tabnav .pills.many .tab-btn{padding:8px 14px; font-size:12.5px;}
.site-header.site-header--gestion .tabnav .back-btn{padding:7px 12px; font-size:12.5px;}
@media (max-width:640px){
  .site-header.site-header--gestion{padding:6px 0 6px;}
  .site-header--gestion .logo{font-size:20px;}
  .site-header--gestion .logo img{height:26px;}
  .site-header.site-header--gestion .tabnav{margin-top:6px; gap:0;}
  .site-header.site-header--gestion .tabnav .pills{padding:3px; gap:2px;}
  .site-header.site-header--gestion .tabnav .pills .tab-btn, .site-header.site-header--gestion .tabnav .pills.many .tab-btn{padding:8px 10px; font-size:11px; letter-spacing:.02em;}
  /* Dans la gestion, sur téléphone : les onglets défilent sur une seule ligne (l'onglet en cours est centré) pour garder de la place */
  .site-header.site-header--gestion .tabnav{flex-wrap:nowrap; padding:0 8px;}
  .site-header.site-header--gestion .tabnav .pills{flex-wrap:nowrap; overflow-x:auto; min-width:0; max-width:100%; scrollbar-width:none;}
  .site-header.site-header--gestion .tabnav .pills::-webkit-scrollbar{display:none;}
  .site-header--gestion .tabnav .pills li{flex:0 0 auto;}
}

@media print{.site-header, .tabnav .back-btn{display:none !important;}}