/* =========================================
   WpZone – Base CSS (rev C)
   - Tokens
   - Reset + a11y
   - Typo
   - Layout + utils
   - Header (burger L / logo C / user R) + Drawer
   - Dark mode auto
========================================= */

/* ========== TOKENS ========== */
:root{
  --brand-50:#eff6ff; --brand-100:#dbeafe; --brand-200:#bfdbfe;
  --brand-300:#93c5fd; --brand-400:#60a5fa; --brand-500:#3b82f6;
  --brand:#2563eb; --brand-600:#1d4ed8; --brand-700:#1e40af;

  --ink:#0f172a; --ink-700:#0b1220;
  --muted:#64748b;

  --bg:#ffffff; --surface:#f8fafc; --border:#e2e8f0;

  --ff-sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  --ff-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;

  --fs-xs:.8125rem; --fs-sm:.9375rem; --fs-base:1rem;
  --fs-lg:1.125rem; --fs-xl:1.25rem; --fs-2xl:1.5rem; --fs-3xl:2rem;

  --container: clamp(16px, 4vw, 32px);
  --radius: 12px; --radius-sm:10px;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08);
  --focus: 0 0 0 3px rgba(37,99,235,.35);

  /* Z-layers (hauts pour éviter tout recouvrement) */
  --z-header:100; 
  --z-drawer:10010; 
  --z-backdrop:10000;

  --safe-top: env(safe-area-inset-top, 0px);
  --adminbar-offset: 0px;
}



/* ========== RESET + A11Y ========== */
*{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
html,body{height:100%}
body{
  margin:0; color:var(--ink); background:var(--bg);
  font-family:var(--ff-sans); font-size:var(--fs-base); line-height:1.7;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img,svg,video{max-width:100%;height:auto;vertical-align:middle}
table{border-collapse:collapse;border-spacing:0}
a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--brand-600)}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:6px}

/* ========== TYPO ========== */
h1,h2,h3,h4,h5,h6{margin:1.5rem 0 .75rem;line-height:1.2;font-weight:700}
h1{font-size:clamp(2rem,3vw,2.5rem)}
h2{font-size:clamp(1.75rem,2.5vw,2rem)}
h3{font-size:clamp(1.5rem,2vw,1.75rem)}
h4{font-size:1.25rem} h5{font-size:1.125rem} h6{font-size:1rem}
p{margin:0 0 1rem} small{font-size:var(--fs-xs);color:var(--muted)}

ul,ol{padding-left:1.25rem;margin:0 0 1rem}
blockquote{margin:1.25rem 0;padding:1rem 1.25rem;background:var(--surface);border-left:4px solid var(--brand);border-radius:var(--radius)}
hr{border:none;border-top:1px solid var(--border);margin:2rem 0}

table{width:100%;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
th,td{padding:.75rem .875rem;text-align:left;border-bottom:1px solid var(--border)}
thead th{background:var(--surface);font-weight:600}

code,kbd,samp{font-family:var(--ff-mono);font-size:90%}
pre{background:var(--ink-700);color:#e6edf3;padding:1rem;border-radius:var(--radius);overflow:auto}

/* ========== FORMULAIRES ========== */
input,select,textarea{
  width:100%; padding:.625rem .75rem; font:inherit; color:inherit; background:#fff;
  border:1px solid var(--border); border-radius:var(--radius-sm); outline:0;
}
input:focus,select:focus,textarea:focus{box-shadow:var(--focus)}
button,.btn{
  display:inline-flex; gap:.5rem; align-items:center; justify-content:center;
  padding:.625rem 1rem; border-radius:var(--radius-sm); border:1px solid transparent;
  background:var(--brand); color:#fff; cursor:pointer; font-weight:600; box-shadow:var(--shadow);
  min-height:44px;
}
button:hover,.btn:hover{background:var(--brand-600)}
.btn-outline{background:transparent;color:var(--brand);border-color:var(--brand)}

/* ========== LAYOUT ========== */
.container{max-width:1200px;margin:0 auto;padding-inline:var(--container)}
.row{display:flex;flex-wrap:wrap;margin-left:-12px;margin-right:-12px}
.col{padding-left:12px;padding-right:12px;flex:1 0 0%}
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:1rem}
.surface{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}




/* ================================
   Breadcrumbs – WpZone
   Élégant, responsive, clair/sombre
================================ */
.container.pz-breadcrumbs{
  margin-top: .5rem;
  margin-bottom: 1.5rem;
  font-size: .875rem; /* taille discrète */
}

.breadcrumbs{
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  white-space: nowrap;
}
.breadcrumbs::-webkit-scrollbar{ display: none; }

.breadcrumbs ol{
  list-style: none;
  margin: 0;
  padding: .25rem .75rem;
  display: flex;
  align-items: center;
  gap: .35rem;
  background: var(--surface, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-sm, 10px);
  box-shadow: var(--shadow, 0 1px 2px rgba(0,0,0,.06));
}

/* items */
.breadcrumbs li{
  color: var(--muted, #64748b);
  display: flex;
  align-items: center;
  font-weight: 400;
}
.breadcrumbs li:last-child{
  font-weight: 600;
  color: var(--ink, #0f172a);
}

/* séparateur */
.breadcrumbs li::after{
  content:"›";
  margin: 0 .35rem;
  color: var(--muted, #64748b);
  font-size: .85em;
}
.breadcrumbs li:last-child::after{ content:""; }

/* liens */
.breadcrumbs li a{
  color: inherit;
  text-decoration: none;
  padding: .2rem .4rem;
  border-radius: 6px;
  transition: all .2s ease;
}
.breadcrumbs li a:hover{
  color: var(--brand, #2563eb);
  background: var(--brand-50, #eff6ff);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Dark mode 
@media (prefers-color-scheme: dark){
  .breadcrumbs ol{
    background: var(--surface, #0f172a);
    border-color: var(--border, #1f2937);
  }
  .breadcrumbs li{ color: var(--muted, #94a3b8); }
  .breadcrumbs li:last-child{ color: #fff; }
  .breadcrumbs li a:hover{
    background: rgba(255,255,255,.06);
    color: var(--brand, #3b82f6);
  }
}*/

/* Accessibilité : si focus clavier */
.breadcrumbs li a:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(37,99,235,.35);
}

/* =========================================
   HEADER + DRAWER (mobile-first)
========================================= */
.site-header{
  position: sticky;
  top: calc(var(--safe-top) + var(--adminbar-offset));
  z-index: var(--z-header);
  background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border);
}

/* grille 1fr | auto | 1fr => centre *exactement* centré */
.header-bar{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:8px;
  padding:.5rem 0;
  padding-inline:var(--container);
  min-height:56px;
}

/* slots */
.header-left{ justify-self:start;  display:flex; align-items:center }
.header-center{ justify-self:center; display:flex; align-items:center }
.header-right{ justify-self:end;   display:flex; align-items:center }

/* boutons icône */
.btn-icon{
  width:44px;height:44px;display:inline-grid;place-items:center;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--ink); cursor:pointer;
  box-shadow:var(--shadow);
  transition:background .2s ease, transform .1s ease;
  vertical-align:middle;
}
.btn-icon svg{display:block} /* évite le décalage baseline */
.btn-icon:hover{ background:var(--brand-50) }
.btn-user{text-decoration:none}

/* logo */
.site-logo{ display:inline-flex; align-items:center; gap:.5rem; min-width:0; text-decoration:none; color:inherit; line-height:1 }
.site-logo img{ display:block; height:auto; width:auto; max-height:36px }
.site-title{ font-size:1.125rem; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* verrou global (Woo, plugins) */
.site-header .custom-logo,
.site-header .custom-logo-link img,
.woocommerce .site-header .custom-logo,
.woocommerce .site-header .custom-logo-link img,
.woocommerce-page .site-header .custom-logo,
.woocommerce-page .site-header .custom-logo-link img{
  height:auto !important; width:auto !important; max-height:36px !important; margin:0 !important; max-width:none !important; transform:none !important;
}

@media (min-width:1024px){
  .header-bar{ min-height:64px }
  .site-logo img,
  .site-header .custom-logo,
  .site-header .custom-logo-link img{ max-height:42px !important }
}
@media (max-width:380px){
  .site-logo img,
  .site-header .custom-logo,
  .site-header .custom-logo-link img{ max-height:30px !important }
}

/* Drawer (placé hors du header dans le DOM) */
.site-drawer{
  position:fixed; inset:0 auto 0 0; width:min(86vw, 360px);
  transform:translateX(-100%); transition:transform .22s ease;
  background:#fff; border-right:1px solid var(--border);
  z-index:var(--z-drawer);
  display:flex; flex-direction:column;
  padding-top:calc(8px + var(--safe-top) + var(--adminbar-offset));
}
.site-drawer[aria-hidden="false"]{ transform:none }
.drawer-inner{ position:relative; display:flex; flex-direction:column; height:100% }
.drawer-close{
  position:absolute; top:10px; right:10px; z-index:2;
  width:44px;height:44px; display:inline-grid; place-items:center;
  border:1px solid var(--border); border-radius:var(--radius-sm); background:#fff; cursor:pointer;
  color: red;
}
.drawer-nav{ padding:64px 12px 16px; overflow:auto; height:100% }
.nav{ list-style:none; margin:0; padding:0 }
.nav li a{ display:block; padding:.625rem .75rem; border-radius:10px; text-decoration:none; color:inherit }
.nav li a:hover{ background:var(--surface) }

/* Backdrop */
.drawer-backdrop{ position:fixed; inset:0; background:rgba(2,8,23,.5); z-index:var(--z-backdrop) }
:where(.drawer-backdrop[hidden]){ display:none !important }

/* Focus visibles */
.btn-icon:focus-visible, .drawer-close:focus-visible, .nav a:focus-visible{ outline:none; box-shadow:var(--focus) }

/* ========== ENTRIES ========== */
.entry-title{margin-top:.5rem}
.entry-hero figcaption{font-size:.875rem;color:var(--muted)}

/* ========== DARK MODE AUTO ========== 
@media (prefers-color-scheme: dark){
  :root{ --bg:#0b1220; --surface:#0f172a; --ink:#e5e7eb; --muted:#94a3b8; --border:#1f2937; }
  body{ background:var(--bg); color:var(--ink) }
  .card,.surface{ background:var(--surface); border-color:var(--border) }
  .site-header{ background:rgba(15,23,42,.86); border-color:var(--border) }
  .btn-icon{ background:var(--surface); color:var(--ink); border-color:var(--border) }
  .nav li a:hover{ background:rgba(255,255,255,.06) }
  pre{ background:#0b1220 }
}*/

/* ========== UTILS ========== */
.mt-0{margin-top:0} .mb-0{margin-bottom:0}
.mt-1{margin-top:.25rem} .mt-2{margin-top:.5rem} .mt-3{margin-top:1rem}
.mb-1{margin-bottom:.25rem} .mb-2{margin-bottom:.5rem} .mb-3{margin-bottom:1rem}
.p-1{padding:.25rem} .p-2{padding:.5rem} .p-3{padding:1rem}
.hidden{display:none !important}


/* --- Sticky header hardening --- */
:root{
  /* will be set by JS; fallback equals your mobile min height */
  --header-h: 56px;
}

/* when JS promotes header to fixed, keep same look */
.site-header.is-fixed{
  position: fixed;
  top: calc(var(--safe-top) + var(--adminbar-offset));
  left: 0; right: 0;
}

/* only add top padding when the header is actually fixed */
.body-has-fixed-header{
  padding-top: var(--header-h);
}

/* if admin-bar is present, padding already includes the offset via top */