@import url('fonts/fonts.css');

/* Barre d'outils commune à toutes les pages d'outils — direction artistique années 70 */
:root{
  --barre:52px;
  --d70-cream:#F6E8C9; --d70-paper:#FFF6DF; --d70-sand:#F0DDB4;
  --d70-brown:#4A2C17; --d70-brown2:#6E4A30;
  --d70-rust:#B5441A; --d70-orange:#D9622B; --d70-mustard:#E6A61F; --d70-avocado:#7D8F2A;
  --d70-display:"Shrikhand","Cooper Black","Arial Rounded MT Bold",Georgia,serif;
  --d70-body:"Nunito","Trebuchet MS",system-ui,sans-serif;
}

.barre-outils{
  position:sticky;top:0;z-index:1000;flex:0 0 auto;box-sizing:border-box;height:var(--barre);
  display:flex;align-items:center;gap:12px;padding:0 12px 6px;
  background:var(--d70-brown);color:var(--d70-cream);
  font:800 14px/1 var(--d70-body);
}
.barre-outils::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:6px;
  background:linear-gradient(to bottom,#B5441A 0 25%,#D9622B 25% 50%,#E6A61F 50% 75%,#7D8F2A 75% 100%);
}
.barre-outils a{color:inherit;text-decoration:none}
.barre-outils .b-retour{
  flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;
  background:var(--d70-cream);color:var(--d70-brown);font-family:var(--d70-display);font-weight:400;font-size:15px;
  box-shadow:3px 3px 0 var(--d70-rust);transition:transform .12s, box-shadow .12s;
}
.barre-outils .b-retour:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--d70-rust)}
.barre-outils .b-retour:focus-visible,.barre-outils .b-outils a:focus-visible{outline:3px solid var(--d70-mustard);outline-offset:2px}
.barre-outils .b-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.75;flex:0 0 auto}
.barre-outils .b-outils{
  display:flex;gap:6px;min-width:0;overflow-x:auto;scrollbar-width:none;padding:3px 2px;
}
.barre-outils .b-outils::-webkit-scrollbar{display:none}
.barre-outils .b-outils a{
  flex:0 0 auto;padding:7px 14px;border-radius:999px;border:2px solid transparent;white-space:nowrap;
}
.barre-outils .b-outils a:hover{border-color:var(--d70-mustard)}
.barre-outils .b-outils a[aria-current="page"]{background:var(--d70-mustard);color:var(--d70-brown)}

@media (max-width:700px){
  .barre-outils{gap:8px;padding-inline:8px}
  .barre-outils .b-retour span{display:none}
  .barre-outils .b-label{display:none}
  .barre-outils .b-outils a{padding:7px 11px;font-size:13px}
}

.barre-outils .b-logo{width:30px;height:30px;margin:-4px 2px -4px -6px;flex:none}