/* =======================================================================
   USPSO — Boutique : design system partagé (façon uspso.fr / Apple)
   Dominante claire · sobriété · espace · typographie en majesté.
   Marine #0B1A2E · Bleu #0072CE · Or #C9A227 (réservé distinctions FFF).
   Titres : Oswald · Texte : Source Sans 3.
   ======================================================================= */

:root{
  --navy:#0B1A2E; --bleu:#0072CE; --bleu-d:#005BA8;
  --or:#C9A227; --ink:#1A1A1A; --muted:#6B6B6B;
  --line:#EAEAEA; --pale:#E6F2FB; --bg:#ffffff; --soft:#F6F8FB;
  --r:18px; --r-sm:12px;
  --sh-sm:0 1px 2px rgba(11,26,46,.05), 0 2px 8px rgba(11,26,46,.05);
  --sh-md:0 14px 36px rgba(11,26,46,.12);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Source Sans 3', system-ui, -apple-system, "Segoe UI", sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3{font-family:'Oswald', sans-serif; font-weight:600; letter-spacing:.2px;}
img{max-width:100%;}

/* ===================== TOP BAR (verre dépoli, Apple) ===================== */
.bq-top{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line);
}
.bq-top-inner{
  max-width:1180px; margin:0 auto; padding:.7rem 1.25rem;
  display:flex; align-items:center; gap:1rem;
}
.bq-brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; flex-shrink:0;}
.bq-crest{width:38px; height:38px; border-radius:10px; object-fit:cover; box-shadow:var(--sh-sm);}
.bq-word{font-family:'Oswald',sans-serif; font-weight:500; font-size:18px; color:var(--navy); letter-spacing:.6px; text-transform:uppercase;}
.bq-word b{font-weight:700;}

.bq-nav{display:flex; gap:1.6rem; margin-left:1rem; flex:1;}
.bq-nav a{
  text-decoration:none; color:var(--ink); font-weight:600; font-size:14.5px;
  padding:.3rem 0; position:relative; opacity:.82; transition:opacity .15s, color .15s;
}
.bq-nav a:hover{opacity:1; color:var(--bleu);}
.bq-nav a.is-active{color:var(--bleu); opacity:1;}
.bq-nav a.is-active::after{content:""; position:absolute; left:0; right:0; bottom:-.72rem; height:2.5px; background:var(--bleu); border-radius:2px;}

.bq-actions{display:flex; align-items:center; gap:.55rem; margin-left:auto;}
.bq-user{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.42rem .85rem; background:var(--soft); border:1px solid var(--line);
  border-radius:99px; font-size:13.5px; font-weight:600; color:var(--navy);
}
.bq-user svg{width:15px; height:15px; opacity:.7;}
.bq-icon{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%;
  background:var(--soft); border:1px solid var(--line); color:var(--navy);
  text-decoration:none; transition:background .15s, color .15s, border-color .15s;
}
.bq-icon:hover{background:var(--bleu); border-color:var(--bleu); color:#fff;}
.bq-icon svg{width:20px; height:20px;}
.bq-badge{
  position:absolute; top:-5px; right:-5px; min-width:20px; height:20px; padding:0 5px;
  border-radius:99px; background:var(--bleu); color:#fff; font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center; border:2px solid #fff;
}
.bq-logout{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem .9rem; border-radius:99px; border:1px solid var(--line);
  background:#fff; color:var(--navy); text-decoration:none; font-weight:600; font-size:13.5px;
  transition:all .15s;
}
.bq-logout:hover{background:var(--navy); border-color:var(--navy); color:#fff;}
.bq-logout svg{width:16px; height:16px;}

/* ===================== HERO (clair, Apple) ===================== */
.bq-hero{position:relative; overflow:hidden; background:var(--soft); border-bottom:1px solid var(--line);}
.bq-hero::before{content:""; position:absolute; inset:0; background:radial-gradient(60% 120% at 50% -20%, rgba(0,114,206,.10), transparent 70%);}
.bq-hero-in{position:relative; max-width:820px; margin:0 auto; padding:4rem 1.25rem 3.5rem; text-align:center;}
.bq-kicker{font-size:14px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--bleu); margin-bottom:.7rem;}
.bq-hero h1{margin:0; font-weight:600; font-size:clamp(32px,5.5vw,54px); line-height:1.05; color:var(--navy); letter-spacing:.5px;}
.bq-hero h1 .accent{color:var(--bleu);}
.bq-hero p{max-width:560px; margin:1rem auto 1.6rem; font-size:17px; color:var(--muted);}
.bq-cta{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.85rem 1.7rem; background:var(--bleu); color:#fff; border-radius:99px;
  text-decoration:none; font-weight:700; font-size:15.5px;
  box-shadow:0 8px 24px rgba(0,114,206,.28); transition:transform .15s, box-shadow .15s, background .15s;
}
.bq-cta:hover{background:var(--bleu-d); transform:translateY(-1px); box-shadow:0 12px 30px rgba(0,114,206,.34);}

/* ===================== SEARCH ===================== */
.bq-search{max-width:1180px; margin:0 auto; padding:1.6rem 1.25rem 0;}
.bq-search input{
  width:100%; padding:.95rem 1.2rem .95rem 3rem; border:1px solid var(--line); border-radius:99px;
  font-size:15.5px; font-family:inherit; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236B6B6B'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E") no-repeat 1.05rem center/19px;
  transition:border-color .15s, box-shadow .15s;
}
.bq-search input:focus{outline:none; border-color:var(--bleu); box-shadow:0 0 0 4px rgba(0,114,206,.12);}

/* ===================== CONTAINER ===================== */
.bq-wrap{max-width:1180px; margin:0 auto; padding:2.2rem 1.25rem 0;}

/* ===================== ORDERS BAR ===================== */
.bq-orders{background:var(--pale); border:1px solid #cfe6fb; border-radius:var(--r); padding:1.1rem 1.3rem; margin-bottom:1.8rem;}
.bq-orders h3{margin:0 0 .7rem; font-size:15px; color:var(--navy); font-weight:600;}
.bq-chip{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.45rem .85rem; background:#fff; border:1px solid var(--line); border-radius:99px;
  margin:0 .4rem .4rem 0; font-size:13px; text-decoration:none; color:var(--ink);
  transition:border-color .15s, transform .15s;
}
.bq-chip:hover{border-color:var(--bleu); transform:translateY(-1px);}
.bq-chip .sep{color:var(--muted);}

/* ===================== SECTION TITLE ===================== */
.bq-sec-title{font-size:26px; color:var(--navy); margin:0 0 .35rem;}
.bq-sec-title .count{font-family:'Source Sans 3'; font-size:15px; color:var(--muted); font-weight:600;}
.bq-sec-sub{display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin:0 0 1.3rem;}
.bq-sec-sub .hint{color:var(--muted); font-size:13px;}

/* guide des tailles */
.bq-tailles{
  display:inline-flex; align-items:center; gap:.5rem; background:var(--navy); color:#fff;
  text-decoration:none; font-family:'Oswald'; font-weight:500; font-size:15px;
  padding:.6rem 1.15rem; border-radius:11px; box-shadow:var(--sh-sm);
  transition:transform .15s, box-shadow .15s;
}
.bq-tailles:hover{transform:translateY(-1px); box-shadow:var(--sh-md);}

/* ===================== FILTERS ===================== */
.bq-filters{display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin-bottom:.7rem;}
.bq-filters-lab{font-size:13px; color:var(--muted); font-weight:600;}
.bq-filter{
  padding:.45rem 1rem; border-radius:99px; background:#fff; border:1px solid var(--line);
  text-decoration:none; color:var(--ink); font-size:13.5px; font-weight:600; transition:all .15s;
}
.bq-filter:hover{border-color:var(--bleu); color:var(--bleu);}
.bq-filter.is-active{background:var(--bleu); border-color:var(--bleu); color:#fff;}

/* ===================== SUBSECTION ===================== */
.bq-sub{margin:2rem 0;}
.bq-sub h3{font-size:19px; margin:0 0 1rem; color:var(--navy);}
.bq-sub h3 .count{font-family:'Source Sans 3'; font-size:13px; color:var(--muted); font-weight:600;}

/* ===================== GRID + CARDS ===================== */
.bq-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(248px, 1fr)); gap:1.5rem;}
.bq-card{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; text-decoration:none; color:inherit; box-shadow:var(--sh-sm);
  transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s, border-color .2s;
}
.bq-card:hover{transform:translateY(-6px); box-shadow:var(--sh-md); border-color:rgba(0,114,206,.4);}
.bq-card-img{position:relative; aspect-ratio:1/1; background:linear-gradient(150deg,#f3f8fd,#e4eef8); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.bq-card-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#fff;}
.bq-ph{font-size:78px; opacity:.28;}
.bq-card-tag{position:absolute; top:.7rem; right:.7rem; padding:3px 10px; border-radius:99px; font-size:11px; font-weight:700; color:#fff; box-shadow:0 1px 3px rgba(0,0,0,.12);}
.bq-card-body{flex:1; display:flex; flex-direction:column; padding:1.05rem 1.15rem 1.2rem;}
.bq-card-name{font-size:18px; margin:0 0 .25rem; color:var(--navy); font-weight:600;}
.bq-card-meta{font-size:11.5px; color:var(--muted); margin-bottom:.45rem;}
.bq-card-desc{font-size:12.5px; color:var(--muted); margin:0 0 .9rem; flex:1; line-height:1.45;}
.bq-card-foot{display:flex; align-items:center; justify-content:space-between; gap:.5rem;}
.bq-price{font-family:'Oswald'; font-size:23px; font-weight:600; color:var(--navy);}
.bq-card-cta{padding:.5rem .95rem; background:var(--soft); color:var(--bleu); border:1px solid var(--line); border-radius:9px; font-size:12.5px; font-weight:700; white-space:nowrap; transition:all .15s;}
.bq-card:hover .bq-card-cta{background:var(--bleu); border-color:var(--bleu); color:#fff;}

/* ===================== NOTE / INFO ===================== */
.bq-note{background:var(--pale); border:1px solid #cfe6fb; color:var(--navy); padding:1.2rem 1.4rem; border-radius:var(--r); margin-top:1rem; font-size:14px; line-height:1.55;}
.bq-note strong{color:var(--navy);}

/* ===================== EMPTY ===================== */
.bq-empty{background:var(--soft); border:1px solid var(--line); border-radius:var(--r); padding:3rem 1.5rem; text-align:center;}
.bq-empty .ico{font-size:56px; opacity:.25; margin-bottom:.4rem;}
.bq-empty p{color:var(--muted); font-size:15px; margin:0;}

/* ===================== ERROR ===================== */
.bq-error{max-width:480px; margin:4rem auto; background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-sm); padding:2.6rem 1.6rem; text-align:center;}
.bq-error h2{color:var(--navy); margin:0 0 .6rem; font-size:22px;}
.bq-error p{color:var(--muted);}
.bq-error .bq-cta{margin-top:1.1rem;}

/* ===================== FOOTER (bande marine, façon PSG) ===================== */
.bq-foot{margin-top:3.5rem; background:var(--navy); color:rgba(255,255,255,.82); padding:2.2rem 1.25rem; display:flex; align-items:center; justify-content:center; gap:1rem; text-align:left; flex-wrap:wrap;}
.bq-foot-crest{width:46px; height:46px; border-radius:10px; object-fit:cover;}
.bq-foot strong{color:#fff; font-weight:600;}
.bq-foot-sub{font-size:13px; color:rgba(255,255,255,.6);}

/* ===================== PANNEAUX / CARTES CONTENU ===================== */
.bq-panel{background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-sm); padding:1.6rem;}
.bq-h1{font-size:1.6rem; color:var(--navy); margin:0;}
.bq-intro{color:var(--muted); font-size:14.5px; margin:.4rem 0 1.3rem;}

/* ===================== BOUTONS ===================== */
.bq-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.8rem 1.5rem; border:1px solid transparent; border-radius:99px;
  font-family:inherit; font-weight:700; font-size:15px; text-decoration:none; cursor:pointer;
  transition:transform .15s, box-shadow .15s, background .15s, border-color .15s, color .15s;
}
.bq-btn--primary{background:var(--bleu); color:#fff; box-shadow:0 6px 18px rgba(0,114,206,.25);}
.bq-btn--primary:hover{background:var(--bleu-d); transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,114,206,.3);}
.bq-btn--ghost{background:#fff; color:var(--navy); border-color:var(--line);}
.bq-btn--ghost:hover{background:var(--navy); border-color:var(--navy); color:#fff;}
.bq-btn--dark{background:var(--navy); color:#fff;}
.bq-btn--dark:hover{background:#06101d; transform:translateY(-1px);}
.bq-btn--block{width:100%;}

/* ===================== CHAMPS DE FORMULAIRE ===================== */
.bq-label{display:block; font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; margin:.9rem 0 .3rem;}
.bq-input{
  width:100%; padding:.75rem .85rem; border:1.5px solid var(--line); border-radius:10px;
  font-size:15px; font-family:inherit; background:#fff; color:var(--ink);
  transition:border-color .15s, box-shadow .15s;
}
.bq-input:focus{outline:none; border-color:var(--bleu); box-shadow:0 0 0 4px rgba(0,114,206,.12);}
select.bq-input{appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236B6B6B'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .6rem center; background-size:20px; padding-right:2.2rem;}
.bq-hint{font-size:12px; color:var(--muted); margin-top:.35rem;}

/* ===================== ONGLETS ===================== */
.bq-tabs{display:flex; gap:.4rem; background:var(--soft); padding:.3rem; border-radius:12px; margin-bottom:1.3rem;}
.bq-tab{flex:1; text-align:center; padding:.6rem .5rem; border-radius:9px; font-weight:700; font-size:14px; cursor:pointer; color:var(--muted); border:none; background:none; font-family:inherit; transition:background .15s, color .15s, box-shadow .15s;}
.bq-tab.is-active{background:#fff; color:var(--navy); box-shadow:var(--sh-sm);}
.bq-pane{display:none;}
.bq-pane.is-active{display:block;}

/* ===================== ALERTES ===================== */
.bq-alert{padding:.85rem 1rem; border-radius:10px; font-size:14px; margin-bottom:1.2rem; border:1px solid;}
.bq-alert--err{background:#fef2f2; border-color:#fecaca; color:#b91c1c;}
.bq-alert--ok{background:#ecfdf5; border-color:#a7f3d0; color:#047857;}
.bq-alert--info{background:var(--pale); border-color:#cfe6fb; color:var(--navy);}

/* ===================== WRAP ÉTROIT (auth, etc.) ===================== */
.bq-authwrap{max-width:480px; margin:2.5rem auto; padding:0 1.25rem;}
.bq-privacy{font-size:12px; color:var(--muted); margin-top:1.3rem; text-align:center; line-height:1.5;}
.bq-foot-note{text-align:center; color:var(--muted); font-size:12px; margin-top:1.4rem; line-height:1.5;}

/* ===================== LIEN RETOUR ===================== */
.bq-back{display:inline-flex; align-items:center; gap:.3rem; color:var(--muted); text-decoration:none; font-size:14px; margin-bottom:1rem; font-weight:600;}
.bq-back:hover{color:var(--bleu);}

/* ===================== EYEBROW (sur-titre de section) ===================== */
.bq-eyebrow{font-family:'Oswald',sans-serif; font-weight:500; font-size:13px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); margin-bottom:.6rem;}

/* ===================== SÉLECTEUR DE TAILLES (radio pills) ===================== */
.bq-sizes{display:flex; flex-wrap:wrap; gap:.5rem;}
.bq-size input{position:absolute; opacity:0; width:0; height:0;}
.bq-size label{display:inline-block; padding:.5rem .95rem; border:1.5px solid var(--line); border-radius:10px; cursor:pointer; font-weight:600; font-size:14px; color:var(--ink); background:#fff; transition:.15s;}
.bq-size label:hover{border-color:var(--bleu);}
.bq-size input:checked + label{border-color:var(--bleu); background:var(--pale); color:var(--navy);}
.bq-size input:focus-visible + label{box-shadow:0 0 0 4px rgba(0,114,206,.12);}

/* ===================== VIGNETTE / MEDIA ===================== */
.bq-media{width:90px; height:90px; border-radius:14px; background:linear-gradient(150deg,#f3f8fd,#e4eef8); display:flex; align-items:center; justify-content:center; font-size:46px; flex-shrink:0;}
.bq-media .bq-ph{opacity:.45; font-size:46px;}

/* ===================== LIGNE DE CHAMPS ===================== */
.bq-row{display:flex; gap:1.4rem; flex-wrap:wrap; align-items:flex-end;}
.bq-field label{display:block; font-size:12px; font-weight:700; color:var(--muted); margin-bottom:.3rem;}
.bq-input--auto{width:auto;}

/* ===================== PRIX (grande taille) ===================== */
.bq-price-lg{font-family:'Oswald',sans-serif; font-weight:600; font-size:1.8rem; color:var(--navy);}
.bq-price-unit{font-size:.8rem; color:var(--muted); font-weight:400;}

/* ===================== RESPONSIVE ===================== */
@media (max-width:720px){
  .bq-top-inner{flex-wrap:wrap;}
  .bq-nav{order:3; flex-basis:100%; margin:.5rem 0 0; gap:1.2rem; overflow-x:auto; padding-bottom:.15rem; -webkit-overflow-scrolling:touch;}
  .bq-nav a.is-active::after{bottom:-.3rem;}
  .bq-user{display:none;}
  .bq-logout-txt{display:none;}
  .bq-logout{padding:0; width:42px; height:42px; justify-content:center; border-radius:50%;}
  .bq-hero-in{padding:3rem 1.1rem 2.6rem;}
  .bq-grid{grid-template-columns:repeat(auto-fill, minmax(155px, 1fr)); gap:1rem;}
  .bq-card-img .bq-ph{font-size:58px;}
  .bq-authwrap{margin:1.6rem auto;}
  .bq-panel{padding:1.3rem;}
}