/* ============================================================
   Menu de la boutique
   ============================================================ */
/* Le thème du site pose des `display` sur des éléments masqués :
   on verrouille [hidden] tout de suite, sinon les panneaux restent ouverts. */
[hidden] { display: none !important; }

/* Libellé réservé aux lecteurs d'écran (en-tête de colonne sans texte visible). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ⚠️ `--header-h` (72 px, 64 px en petit écran) ne mesure que la RANGÉE du
   logo. L'en-tête complet vaut 6 px de plus : la bande CMJN (5 px) et son
   filet bas (1 px), tous deux fixes à toutes les largeurs. Collée à
   `var(--header-h)` seule, la barre boutique passait 6 px SOUS l'en-tête.
   Si la bande ou le filet changent dans doemo.css, ce 6 px suit. */
:root { --bq-sous-entete: calc(var(--header-h) + 6px);
        /* La barre boutique fait 54 px à TOUTES les largeurs (vérifié de 1280
           à 375 px : sous 1000 px elle passe au burger mais reste sur une
           rangée). Tout panneau collant de la boutique se cale là-dessous. */
        --bq-h-nav: 54px;
        --bq-barres: calc(var(--header-h) + 6px + var(--bq-h-nav)); }
.bq-nav { background: var(--c-black); color: #fff; position: sticky;
  top: var(--bq-sous-entete); z-index: 40; }
.bq-nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--c-cyan) 0 25%, var(--c-magenta) 25% 50%, var(--c-yellow) 50% 75%, #fff 75% 100%); opacity: .9; }
/* ⭐ Remplace le padding qu'apportait `.container` (retiré de _menu.php le
   23/09/2026) : mêmes 1,5rem qu'avant, mais plus jamais plafonné à 1200px. */
.bq-nav-in { display: flex; align-items: stretch; gap: .25rem; min-height: 54px;
  max-width: var(--container-large, 1750px); margin: 0 auto; padding: 0 1.5rem; }
/* Le blanc ne vaut que pour la barre : le panneau déroulant est sur fond clair. */
.bq-nav-accueil, .bq-nav-panier { color: #fff; }
.bq-nav a:hover { text-decoration: none; }

.bq-nav-accueil { display: flex; align-items: center; font-family: var(--font-head); font-size: 1.3rem; letter-spacing: .03em; text-transform: uppercase; padding-right: .9rem; margin-right: .25rem; border-right: 1px solid rgba(255,255,255,.18); white-space: nowrap; transition: color .15s; }
.bq-nav-accueil:hover { color: var(--c-cyan); }

/* ⛔⛔ Repris le 24/09/2026 : Julien a d'abord signalé « le menu est caché, il
   n'est pas en entier » (débord invisible), puis « pas pratique » pour le
   défilement horizontal posé en secours, puis « il ne faut pas de burger, il
   faut le mettre sur la ligne quitte à faire deux lignes » — il préfère un
   menu TOUJOURS visible en barre, sur deux lignes si besoin, à un menu cliqué
   pour s'ouvrir. Donc : `flex-wrap: wrap` fait retomber les rubriques en trop
   sur une deuxième ligne au lieu de déborder ou de défiler, et le seuil du
   burger (plus bas dans ce fichier) est redescendu à une largeur de téléphone
   réelle — la barre à plat reste affichée sur tablette et petit ordinateur
   portable, quitte à occuper deux lignes.
   ⚠️ `.bq-nav` n'est plus garanti à 54px de haut dès que ça retombe sur deux
   lignes : les panneaux latéraux collants (`--bq-barres`) peuvent chevaucher
   de quelques px dans cette tranche de largeur précise. Compromis assumé :
   Julien a explicitement choisi la barre visible plutôt que la hauteur exacte. */
.bq-nav-liste {
  /* ⭐⭐⭐⭐⭐ 13/10/2026, demandé par Julien : la recherche quittant cette
     barre (déplacée dans l'en-tête du haut), les rubriques doivent occuper
     toute la largeur, bord à bord, pas juste tassées à gauche.
     ⛔⛔ 13/10/2026 (2), signalé par Julien (« les deux menus sont n'importe
     comment ») : `justify-content: space-between` sur un flex qui s'enroule
     (`flex-wrap: wrap`) étire CHAQUE LIGNE séparément selon son propre
     nombre d'éléments — une ligne de 11 items et une ligne de 1 item
     n'ont pas du tout le même espacement, rien ne s'aligne d'une ligne à
     l'autre. `space-evenly` aurait le même défaut. Remplacé par
     `justify-content: flex-start` + un `gap` qui porte maintenant tout
     l'espacement : les rubriques se lisent de gauche à droite, dans l'ordre,
     sur autant de lignes que nécessaire — plus de bord à bord forcé, mais un
     menu lisible plutôt qu'un menu qui a l'air cassé. */
  display: flex; flex-wrap: wrap; align-items: stretch; justify-content: flex-start;
  gap: 0 .4rem;
  flex: 1; list-style: none; margin: 0; padding: .3rem 0;
}
.bq-nav-item { display: flex; }
/* ⭐ Posé par menu.js (`poserTraitRangees`) juste avant l'item qui retombe sur
   la deuxième rangée : `flex-basis: 100%` l'étire seul sur toute la largeur,
   ce qui force le retour à la ligne ici et porte le trait sur sa bordure
   haute — la seule façon d'obtenir un vrai séparateur pleine largeur entre
   deux rangées d'un flex qui s'enroule tout seul. */
.bq-nav-diviseur { flex-basis: 100%; height: 0; margin-top: .3rem; padding-top: .3rem;
  border-top: 1px solid rgba(255,255,255,.16); }
.bq-nav-btn { background: none; border: 0; color: #fff; font: inherit; font-size: 1rem; font-weight: 500; padding: 0 .6rem; cursor: pointer; display: flex; align-items: center; gap: .3rem; white-space: nowrap; position: relative; transition: color .15s; }
.bq-nav-btn::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: 10px; height: 2px; background: var(--c-cyan); transform: scaleX(0); transform-origin: left; transition: transform .18s ease; }
.bq-nav-btn:hover, .bq-nav-btn[aria-expanded="true"] { color: var(--c-cyan); }
.bq-nav-btn:hover::after, .bq-nav-btn[aria-expanded="true"]::after { transform: scaleX(1); }
.bq-nav-fleche { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; transition: transform .2s; }
.bq-nav-btn[aria-expanded="true"] .bq-nav-fleche { transform: rotate(180deg); }

/* Le vérificateur : même écriture que les entrées voisines, sans la flèche
   puisqu'il n'ouvre aucun panneau. */
.bq-nav-outil { color: #fff; font-size: .97rem; font-weight: 500; padding: 0 .8rem;
  display: flex; align-items: center; gap: .4rem; white-space: nowrap; position: relative;
  transition: color .15s; }
.bq-nav-outil::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: 10px;
  height: 2px; background: var(--c-cyan); transform: scaleX(0); transform-origin: left;
  transition: transform .18s ease; }
/* En couleur : c'est un outil, pas une famille de produits. Le survol repasse
   au blanc pour garder un retour visuel — sans quoi la couleur de base et la
   couleur de survol seraient la même. */
.bq-nav-outil { color: var(--c-cyan); font-weight: 600; }
.bq-nav-outil:hover { color: #fff; text-decoration: none; }
.bq-nav-outil:hover::after { transform: scaleX(1); }
.bq-nav-outil svg { flex: none; opacity: .75; }

/* ⭐⭐⭐⭐⭐ 13/10/2026 — panier et espace client, tous deux en
   pictogramme, remontés dans l'en-tête du haut (inc/header.php), à droite
   de « Devis gratuit ». Même gabarit rond que .btn-espace-icone, fond gris
   clair au repos (pas magenta — seul Espace client porte la couleur
   d'action), pastille cyan si le panier n'est pas vide. */
/* ⭐⭐⭐⭐⭐ 13/10/2026, demandé par Julien : même style que le picto Espace
   client (rond plein, icône blanche) — pas un rond gris clair à peine
   visible. Cyan plutôt que magenta, pour rester le code couleur du panier
   déjà utilisé ailleurs sur le site (pastille, bouton panier...). */
.bq-nav-panier-icone {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 999px; flex: none;
  background: var(--c-cyan); color: var(--c-white); transition: background .15s;
}
.bq-nav-panier-icone:hover { background: #0099d4; text-decoration: none; }
.bq-nav-panier-icone .bq-nav-pastille {
  position: absolute; top: -.25rem; right: -.25rem; background: var(--c-magenta); color: #fff;
  border-radius: 999px; min-width: 1.2rem; height: 1.2rem; display: inline-grid; place-items: center;
  font-size: .68rem; padding: 0 .3rem; border: 2px solid var(--c-white);
}

.bq-nav-panier { display: flex; align-items: center; gap: .45rem; padding: 0 .3rem 0 1rem; font-weight: 600; white-space: nowrap; transition: color .15s; }
.bq-nav-panier:hover { color: var(--c-cyan); }
.bq-nav-pastille { background: var(--c-cyan); color: #fff; border-radius: 999px; min-width: 1.45rem; height: 1.45rem; display: inline-grid; place-items: center; font-size: .8rem; padding: 0 .38rem; }

/* ⭐⭐⭐⭐⭐ 13/10/2026 — le champ a quitté la barre noire pour l'en-tête
   blanc du haut (header-actions, inc/header.php) : les couleurs ci-dessous
   (fond blanc translucide, texte blanc) y étaient invisibles — fond blanc
   sur fond blanc. Surcharge avec des couleurs sombres adaptées à un fond
   clair, sans toucher aux règles génériques au cas où ce champ revienne un
   jour dans une barre sombre. */
.header-actions .bq-nav-recherche-form {
  background: var(--c-gray-50); border: 1.5px solid #B0B0B0;
}
.header-actions .bq-nav-recherche-form:focus-within { background: #fff; border-color: var(--c-cyan); }
.header-actions .bq-nav-recherche-picto { color: var(--c-muted); }
.header-actions .bq-nav-recherche-form:focus-within .bq-nav-recherche-picto { color: var(--c-black); }
.header-actions .bq-nav-recherche-form input { color: var(--c-text); width: 14rem; min-width: 8rem; }
.header-actions .bq-nav-recherche { margin: 0; }
.header-actions .bq-nav-recherche-form { padding: .3rem .25rem .3rem .65rem; }
.header-actions .bq-nav-recherche-form button { padding: .4rem .75rem; font-size: .82rem; }
.header-actions .bq-nav-recherche-form input::placeholder { color: var(--c-muted); }

/* ⭐⭐⭐ 06/10/2026 — champ de recherche produits, TOUJOURS VISIBLE dans la
   barre (pas une icône à ouvrir : Julien, « trop discret pour un champ de
   recherche »), avec des suggestions en direct dessous (`assets/recherche.js`). */
.bq-nav-recherche { position: relative; display: flex; align-items: center; margin: 0 .5rem; }
.bq-nav-recherche-form { display: flex; align-items: center; gap: .4rem; background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: .35rem .3rem .35rem .8rem;
  transition: background .15s, border-color .15s; }
.bq-nav-recherche-form:focus-within { background: #fff; border-color: #fff; }
.bq-nav-recherche-picto { flex: none; color: #fff; opacity: .85; }
.bq-nav-recherche-form:focus-within .bq-nav-recherche-picto { color: var(--c-black); opacity: 1; }
.bq-nav-recherche-form input { flex: 1; min-width: 7rem; width: 11rem; border: 0; background: transparent;
  color: #fff; font-size: .92rem; padding: .15rem 0; }
.bq-nav-recherche-form:focus-within input { color: var(--c-black); }
.bq-nav-recherche-form input::placeholder { color: rgba(255,255,255,.75); }
.bq-nav-recherche-form:focus-within input::placeholder { color: #888; }
.bq-nav-recherche-form input:focus { outline: none; }
.bq-nav-recherche-form button { background: var(--c-cyan); color: #fff; border: 0; border-radius: 999px;
  padding: .4rem .9rem; font-weight: 600; font-size: .85rem; cursor: pointer; white-space: nowrap; }
.bq-nav-recherche-form button:hover { background: #fff; color: var(--c-black); }

/* --- Panneau de suggestions, affiché pendant la frappe (recherche.js) --- */
.bq-recherche-suggestions { position: absolute; top: 100%; left: 0; margin-top: .5rem; background: #fff;
  color: var(--c-black); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.22); padding: 1rem;
  z-index: 60; width: max(26rem, 100%); max-width: 90vw; }
.bq-sugg-colonnes { display: flex; gap: 1.5rem; }
.bq-sugg-col { flex: 1; min-width: 0; }
.bq-sugg-col h3 { font-size: .85rem; font-weight: 700; margin: 0 0 .6rem; color: #555; }
.bq-sugg-item { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; color: var(--c-black);
  text-decoration: none; }
.bq-sugg-item:hover { color: var(--c-cyan); text-decoration: none; }
.bq-sugg-item img { flex: none; width: 44px; height: 44px; border-radius: 6px; object-fit: cover;
  background: #f1f1f1; }
.bq-sugg-item span { font-size: .9rem; line-height: 1.25; }
.bq-sugg-vide { color: #666; font-size: .9rem; margin: 0; }
.bq-sugg-tous { display: flex; align-items: center; justify-content: center; gap: .4rem; margin-top: 1rem;
  padding-top: .8rem; border-top: 1px solid #eee; font-weight: 600; color: var(--c-black); text-decoration: none; }
.bq-sugg-tous:hover { color: var(--c-cyan); text-decoration: none; }

@media (max-width: 640px) {
  .bq-nav-recherche-form input { width: 6rem; min-width: 5rem; }
  .bq-nav-recherche-form button { display: none; }   /* Entrée suffit, la place manque sur petit écran */
  .bq-recherche-suggestions { left: 50%; transform: translateX(-50%); width: 94vw; }
  .bq-sugg-colonnes { flex-direction: column; gap: 1rem; }
}

.bq-nav-burger { display: none; }

/* --- Panneau déroulant --- */
/* ⛔ z-index ajouté le 24/09/2026, signalé par Julien : « la bande des
   couleurs coupe les sous-menus ». Cause : `.bq-nav::after` (le filet CMJN en
   bas de la barre) est du contenu généré SANS z-index, peint après
   `.bq-nav-in` dans le même « étage » auto — il passait donc AU-DESSUS d'un
   panneau qui, depuis le retour à la ligne du menu, s'ouvre parfois au milieu
   de la barre (juste sous SA rangée) plutôt que sous la barre entière : le
   filet, ancré tout en bas de la barre, tombait alors en plein milieu du
   panneau au lieu d'être sous lui. Un z-index positif fait peindre le panneau
   dans un étage supérieur, toujours au-dessus, quel que soit l'ordre DOM. */
.bq-panneau { position: absolute; left: 0; right: 0; top: 100%; z-index: 2; transform: translateY(-8px); background: #fff; color: var(--c-text); box-shadow: 0 18px 40px rgba(0,0,0,.18); padding: 1.3rem 0 1.5rem; opacity: 0; transition: opacity .16s ease, transform .16s ease;
  /* ⚠️⚠️ 06/10/2026, signalé par Julien (« Objets pub », 20 produits) : le
     panneau grandit avec le nombre de produits de la rubrique, sans limite —
     au-delà de la hauteur de la fenêtre, le bas du panneau sort de l'écran
     et rien ne permet d'y accéder (un survol CSS perd le panneau dès que la
     souris quitte la zone pour atteindre la barre de défilement de la PAGE).
     Un défilement INTERNE au panneau règle ça sans dépendre du scroll de la
     page. 90px ≈ hauteur de la barre .bq-nav (bandeau haut + nav) : marge de
     sécurité pour ne jamais toucher le bord de la fenêtre. */
  max-height: calc(100vh - var(--bq-sous-entete) - var(--bq-h-nav) - 12px); overflow-y: auto; }
.bq-panneau.ouvert { opacity: 1; transform: translateY(0); }
.bq-panneau-in { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 2.2rem; align-items: start; }
/* ⚠️ Colonnes à largeur FIXE et non `auto-fit` : avec `1fr`, deux rubriques
   s'étalaient sur toute la largeur et le panneau devenait illisible. Une
   largeur fixe donne une grille régulière qui se replie proprement. */
/* ⚠️⚠️ TOUTES LES RUBRIQUES SUR UNE SEULE LIGNE. Deux règles de Julien, dans
   l'ordre : ne rien couper des listes, et pas de rubriques qui retombent en bas
   du panneau. Donc ni écrêtage ni repli — une rangée, et les colonnes se
   partagent la largeur disponible.
   ⚠️ `flex-basis: 0` + `min-width: 0` : sans eux, une colonne au nom long
   impose sa largeur et pousse les autres hors du panneau. La famille la plus
   fournie en compte cinq ; au-delà il faudrait revoir la règle. */
.bq-panneau-cols { display: flex; flex-wrap: nowrap; gap: 1.6rem; align-items: start; }
.bq-colonne { flex: 1 1 0; min-width: 0; max-width: 240px; }

/* ⭐ La vignette AU-DESSUS du titre, dans un carré clair : c'est l'image qui
   fait reconnaître la rubrique d'un coup d'œil, pas le mot. Le trait de
   séparation a disparu — l'espace sépare mieux qu'une ligne. */
.bq-nav .bq-colonne-titre { display: block; margin-bottom: .55rem; color: var(--c-text); }
.bq-colonne-titre img {
  width: 56px; height: 56px; object-fit: contain; border-radius: 12px;
  background: var(--c-gray-50); padding: 6px; display: block; margin-bottom: .4rem;
  transition: background .15s, transform .15s;
}
.bq-nav .bq-colonne-titre:hover img { background: #E9F6FD; transform: translateY(-2px); }
.bq-colonne-titre span { font-family: var(--font-head); font-size: 1.05rem; line-height: 1.12; display: block; }
.bq-colonne-titre em { display: none; }   /* « 6 produits » n'aide pas à choisir */
.bq-nav .bq-colonne-titre:hover { color: var(--c-cyan); }

.bq-colonne ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .05rem; }
/* Les sous-liens en gris : le titre porte la rubrique, eux ne font que la
   détailler. Un gris trop foncé leur donnait autant de poids qu'au titre. */
.bq-colonne li a { display: block; padding: .13rem 0; color: var(--c-muted); font-size: .86rem; line-height: 1.3; transition: color .12s, transform .12s; }
.bq-colonne li a:hover { color: var(--c-cyan); transform: translateX(3px); }

/* --- Panneau à plat, une rubrique par panneau (23/09/2026) ---
   ⭐⭐ Remplace la grille à colonnes multiples pour les rubriques : plus de
   270px réservés à l'encart VEDETTES (retiré), une seule colonne pleine
   largeur, et des vignettes AVEC PHOTO façon Realisaprint plutôt qu'une
   liste de texte. */

/* --- Bandeau de produits aléatoires qui défile, en haut des fiches produit
   (13/10/2026, demandé par Julien) --- */
.ex-carousel-bandeau { overflow: hidden; margin: 0 0 1.5rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.ex-carousel-piste { display: flex; gap: 1rem; width: max-content; animation: ex-carousel-defile 42s linear infinite; }
.ex-carousel-bandeau:hover .ex-carousel-piste { animation-play-state: paused; }
@keyframes ex-carousel-defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ex-carousel-carte {
  flex: none; width: 150px; display: flex; flex-direction: column; gap: .35rem;
  color: var(--c-text); border-radius: var(--radius-lg); padding: .5rem;
  transition: background .15s;
}
.ex-carousel-carte:hover { background: var(--c-gray-50); text-decoration: none; }
.ex-carousel-carte img { width: 100%; height: 90px; object-fit: cover; border-radius: var(--radius); background: var(--c-gray-50); }
.ex-carousel-nom { font-size: .82rem; font-weight: 600; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ex-carousel-prix { font-size: .78rem; color: var(--c-muted); }
@media (prefers-reduced-motion: reduce) { .ex-carousel-piste { animation: none; overflow-x: auto; } }

/* --- Panneau « Tous nos produits » A-Z (13/10/2026, demandé par Julien) ---
   Colonnes qui s'écoulent naturellement (CSS columns, pas une grille fixe) :
   chaque lettre garde sa liste groupée (`break-inside: avoid`), le nombre de
   colonnes visibles dépend juste de la largeur disponible. */
.bq-panneau-az { width: 100%; left: 0; right: 0; }
.bq-panneau-az-in { column-width: 220px; column-gap: 2rem; max-width: 1400px; margin: 0 auto; padding: 1.6rem 0; }
.bq-az-colonne { break-inside: avoid; margin-bottom: 1.4rem; }
.bq-az-colonne h3 {
  font-family: var(--font-head); font-size: 1rem; margin: 0 0 .4rem;
  padding-bottom: .3rem; border-bottom: 1px solid var(--c-gray-100); color: var(--c-text);
}
.bq-az-colonne ul { list-style: none; margin: 0; padding: 0; }
.bq-az-colonne li a { display: block; padding: .14rem 0; color: var(--c-muted); font-size: .86rem; line-height: 1.3; }
.bq-az-colonne li a:hover { color: var(--c-cyan); }
.bq-nav-az-icone { font-size: 1.05em; margin-right: .3rem; }

.bq-panneau-simple .bq-panneau-in { grid-template-columns: 1fr; }
.bq-colonne-chapeau {
  font-family: var(--font-head); font-size: 1.15rem; margin: 0 0 1rem;
  padding-bottom: .6rem; border-bottom: 1px solid var(--c-gray-50);
}
.bq-colonne-chapeau em { margin-left: .6rem; font-family: var(--font-body); font-style: normal; font-size: .82rem; font-weight: 400; color: var(--c-muted); }

/* ⭐ Agrandi le 24/09/2026 sur demande de Julien (« afficher le sous-menu en
   plus gros ») : vignettes 74→104px, libellé .84→.95rem, cases plus espacées. */
.bq-colonne-grille {
  list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.5rem 1.2rem;
}
.bq-colonne-grille li a { display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center; color: var(--c-text); }
.bq-colonne-grille img {
  width: 104px; height: 104px; object-fit: contain; border-radius: 14px;
  background: var(--c-gray-50); padding: 10px; transition: background .15s, transform .15s;
}
.bq-colonne-grille li a:hover img { background: #E9F6FD; transform: translateY(-2px); }
.bq-colonne-grille li a:hover span { color: var(--c-cyan); }
.bq-colonne-grille span { font-size: .95rem; line-height: 1.3; transition: color .12s; }
.bq-colonne-grille li a.ici img { background: #E9F6FD; box-shadow: 0 0 0 2px var(--c-cyan); }
.bq-colonne-grille li a.ici span { color: var(--c-cyan); font-weight: 600; }

/* --- Encart mis en avant --- */
.bq-nav .bq-vedette { display: block; background: var(--c-gray-50); border-radius: var(--radius-lg); overflow: hidden; color: var(--c-text); transition: box-shadow .15s, transform .15s; }
.bq-vedette:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.bq-vedette img { width: 100%; height: 150px; object-fit: cover; }
.bq-vedette-etiquette { display: inline-block; margin: .8rem .9rem 0; background: var(--c-magenta); color: #fff; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; padding: .2rem .55rem; border-radius: 999px; }
.bq-vedette-nom { display: block; font-family: var(--font-head); font-size: 1.3rem; line-height: 1.15; margin: .45rem .9rem 0; }
.bq-vedette-txt { display: block; font-size: .87rem; color: var(--c-muted); margin: .3rem .9rem 0; }
.bq-vedette-lien { display: inline-block; margin: .7rem .9rem 1rem; font-weight: 600; color: var(--c-cyan); }
.bq-vedette-lien::after { content: " →"; transition: margin-left .15s; }
.bq-vedette:hover .bq-vedette-lien::after { margin-left: .2rem; }

@media (max-width: 1100px) {
  .bq-panneau-in { grid-template-columns: 1fr; }
  .bq-vedette { display: none; }
}

@media (max-width: 640px) {
  .bq-colonne-chapeau { color: #fff; border-bottom-color: rgba(255,255,255,.18); }
  .bq-colonne-chapeau em { color: rgba(255,255,255,.6); }
  .bq-colonne-grille { grid-template-columns: repeat(auto-fill, minmax(115px, 1fr)); gap: 1.2rem .9rem; }
  .bq-colonne-grille img { width: 80px; height: 80px; }
  .bq-colonne-grille span { color: rgba(255,255,255,.88); }
  .bq-colonne-grille li a:hover span, .bq-colonne-grille li a.ici span { color: var(--c-cyan); }
}

@media (max-width: 640px) {
  .bq-nav-in { flex-wrap: wrap; align-items: center; padding-top: .35rem; padding-bottom: .35rem; }
  .bq-nav-accueil { border-right: 0; padding-right: .6rem; }
  .bq-nav-burger { display: grid; gap: 4px; width: 26px; background: none; border: 0; cursor: pointer; padding: .45rem 0; margin-left: auto; }
  .bq-burger-trait { display: block; width: 22px; height: 2px; background: #fff; transition: transform .2s, opacity .2s; }
  .bq-nav-burger[aria-expanded="true"] .bq-burger-trait:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .bq-nav-burger[aria-expanded="true"] .bq-burger-trait:nth-child(2) { opacity: 0; }
  .bq-nav-burger[aria-expanded="true"] .bq-burger-trait:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .bq-nav-burger-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .bq-nav-panier { margin-left: 1rem; padding: 0; }
  .bq-nav-liste { flex-direction: column; width: 100%; order: 3; }
  .bq-nav-item { display: block; border-top: 1px solid rgba(255,255,255,.14); position: static; }
  .bq-nav-outil { padding: .85rem 0; font-weight: 600; }
  .bq-nav-outil::after { display: none; }
  .bq-nav-btn { width: 100%; justify-content: space-between; padding: .85rem 0; }
  .bq-nav-btn::after { display: none; }
  .bq-panneau { position: static; transform: none; opacity: 1; padding: .2rem 0 1rem; box-shadow: none; background: transparent; max-height: none; overflow-y: visible; }
  .bq-panneau.ouvert { transform: none; }
  .bq-panneau-in { padding: 0; }
  /* ⚠️ Sur téléphone la rangée unique redevient une colonne : cinq rubriques
     côte à côte sur 380 px seraient illisibles. */
  .bq-panneau-cols { display: block; }
  .bq-colonne { max-width: none; margin-bottom: 1rem; }
  /* Sur téléphone la vignette revient À CÔTÉ du titre : empilée, chaque
     rubrique prendrait un écran à elle seule. */
  .bq-nav .bq-colonne-titre { display: flex; align-items: center; gap: .7rem; }
  .bq-colonne-titre img { width: 44px; height: 44px; margin-bottom: 0; padding: 5px; border-radius: 10px; }
  .bq-nav .bq-colonne-titre { border-bottom-color: rgba(255,255,255,.18); color: #fff; }
  .bq-colonne-titre em { color: rgba(255,255,255,.6); }
  .bq-colonne li a { color: rgba(255,255,255,.88); }
  .bq-colonne li a:hover { background: rgba(255,255,255,.08); }

}

/* ============================================================
   Boutique DOEMO PRINT — reprend les variables de doemo.css
   ============================================================ */

.bq-hero { background: var(--c-gray-50); }

/* Rappel panier */
.bq-rappel-panier { background: var(--c-black); color: #fff; padding: .6rem 0; font-size: .95rem; }
.bq-rappel-panier .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.bq-rappel-panier .btn { background: var(--c-cyan); color: #fff; padding: .35rem .9rem; border-radius: var(--radius); font-weight: 600; }
.bq-rappel-panier .btn:hover { text-decoration: none; background: #0098cd; }

/* Arguments */

/* Rubriques */
.bq-rubriques { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; }
.bq-rubrique { position: relative; display: block; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.bq-rubrique img { width: 100%; height: 180px; object-fit: cover; }
.bq-rubrique-nom { position: absolute; inset: auto 0 0 0; background: linear-gradient(transparent, rgba(0,0,0,.8)); color: #fff; font-family: var(--font-head); font-size: 1.35rem; padding: 2rem .9rem .8rem; }

/* Familles & sections produits */
.bq-famille + .bq-famille { padding-top: 0; }
.bq-famille-titre { font-family: var(--font-head); font-size: 2.4rem; line-height: 1.1; padding-bottom: .5rem; border-bottom: 3px solid var(--c-black); margin-bottom: 1.8rem; }
.bq-section-tete h3 { font-family: var(--font-head); font-size: 1.7rem; }
.bq-section-tete h3 a { color: inherit; }
.bq-section-tete h3 a:hover { color: var(--c-cyan); text-decoration: none; }
.bq-grille + .bq-section-tete { margin-top: 2.5rem; }
.bq-carte-txt h4 { font-family: var(--font-head); font-size: 1.3rem; line-height: 1.15; }

/* Sections produits */
.bq-section + .bq-section { padding-top: 0; }
.bq-section-tete { margin-bottom: 1.5rem; }
.bq-section-tete h2 { font-family: var(--font-head); font-size: 2rem; }
.bq-section-tete p { color: var(--c-muted); }

.bq-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.25rem; }
/* ⭐ 06/10/2026, demandé par Julien (présentation produit façon
   helloprint.com/fr-fr) : une rangée en carrousel horizontal, cartes de
   largeur fixe, défilement tactile natif — même carte `.bq-carte` que la
   grille, juste une disposition en ligne qui déborde au lieu de wrapper. */
.bq-grille-scroll { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch; padding-bottom: .4rem; margin-bottom: -.4rem; }
.bq-grille-scroll .bq-carte { flex: 0 0 250px; scroll-snap-align: start; }
.bq-grille-scroll::-webkit-scrollbar { height: 8px; }
.bq-grille-scroll::-webkit-scrollbar-thumb { background: var(--c-gray-100); border-radius: 99px; }
.bq-carte { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--c-gray-100); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow .15s, transform .15s; color: inherit; }
.bq-carte:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; }
.bq-carte-img { background: var(--c-gray-50); }
.bq-carte-img img { width: 100%; height: 170px; object-fit: cover; }
.bq-carte-txt { padding: .9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.bq-carte-txt h3 { font-family: var(--font-head); font-size: 1.3rem; line-height: 1.15; }
.bq-carte-txt p { font-size: .9rem; color: var(--c-muted); flex: 1; }
/* .bq-prix : voir « Prix de vignette » en fin de feuille. */

/* ⭐ 04/10/2026 — puces à coche de la sélection d'accueil (SELECTION_AVANTAGES,
   catalogue.php), sur le modèle de « Mes suggestions produits » vu chez un
   concurrent (demandé par Julien). */
.bq-carte-avantages { list-style: none; margin: 0; padding: 0; font-size: .85rem; color: var(--c-muted); flex: 1; display: flex; flex-direction: column; gap: .3rem; }
.bq-carte-avantages li { display: flex; align-items: flex-start; gap: .4rem; }
.bq-carte-avantages li::before { content: "✓"; color: var(--c-cyan); font-weight: 700; flex: none; line-height: 1.3; }

/* Fiche produit */
.bq-fiche { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 2.5rem; align-items: start; }
@media (max-width: 900px) { .bq-fiche { grid-template-columns: 1fr; } }
.bq-visuel img { width: 100%; border-radius: var(--radius-lg); }
.bq-fiche h2 { font-family: var(--font-head); font-size: 1.6rem; margin-top: 1.8rem; margin-bottom: .5rem; }
.bq-fiche p + p { margin-top: .7rem; }
.bq-usages { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.bq-usages li { background: var(--c-gray-100); border-radius: 999px; padding: .3rem .85rem; font-size: .88rem; }

/* Configurateur */
.bq-config { border: 1px solid var(--c-gray-300); border-radius: var(--radius-lg); padding: 1.4rem; background: #fff; position: sticky; top: calc(var(--bq-barres) + 1rem); }
.bq-config h2 { font-family: var(--font-head); font-size: 1.5rem; margin: 0 0 1rem; }
.bq-champ { margin-bottom: 1.1rem; }
.bq-champ > label, .bq-legende { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .4rem; }
.bq-champ input[type="number"], .bq-champ select { width: 100%; padding: .55rem .7rem; border: 1px solid var(--c-gray-300); border-radius: var(--radius); font: inherit; background: #fff; }
.bq-champ input:focus, .bq-champ select:focus { outline: 2px solid var(--c-cyan); outline-offset: 1px; }
.bq-dims { display: grid; grid-template-columns: 1fr auto 1fr; gap: .5rem; align-items: end; }
.bq-dims .bq-x { padding-bottom: .6rem; color: var(--c-muted); }
.bq-aide { font-size: .82rem; color: var(--c-muted); margin-top: .35rem; }
.bq-presets { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }
.bq-preset { border: 1px solid var(--c-gray-300); background: #fff; border-radius: 999px; padding: .28rem .75rem; font-size: .85rem; cursor: pointer; font: inherit; font-size: .85rem; }
.bq-preset:hover { border-color: var(--c-cyan); color: var(--c-cyan); }
.bq-preset[aria-pressed="true"] { background: var(--c-cyan); border-color: var(--c-cyan); color: #fff; }
.bq-groupes { display: grid; gap: 0; }
.bq-groupes .bq-champ { margin-bottom: .9rem; }
.bq-groupes select { background-image: linear-gradient(45deg, transparent 50%, var(--c-gray-600) 50%), linear-gradient(135deg, var(--c-gray-600) 50%, transparent 50%); background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; appearance: none; padding-right: 2rem; cursor: pointer; }
.bq-groupes select:hover { border-color: var(--c-cyan); }
.bq-groupes .bq-aide { margin-top: .3rem; }

.bq-options { display: grid; gap: .45rem; }
.bq-options label { display: grid; grid-template-columns: auto 1fr auto; gap: .55rem; align-items: baseline; font-size: .92rem; cursor: pointer; line-height: 1.35; }
.bq-options label:hover { color: var(--c-cyan); }
.bq-options input { margin: 0; align-self: center; }
.bq-options .bq-opt-prix { color: var(--c-muted); font-size: .85rem; white-space: nowrap; text-align: right; }

.bq-total { border-top: 2px solid var(--c-black); margin-top: 1.2rem; padding-top: 1rem; }
.bq-total-ht { font-family: var(--font-head); font-size: 2.4rem; line-height: 1; }
.bq-total-ht small { font-family: var(--font-body); font-size: .95rem; font-weight: 500; color: var(--c-muted); }
.bq-total-ttc { color: var(--c-muted); font-size: .95rem; }
.bq-total-detail { font-size: .85rem; color: var(--c-muted); margin-top: .5rem; display: grid; gap: .15rem; }
.bq-total-detail span { display: flex; justify-content: space-between; gap: 1rem; }
.bq-remise { display: inline-block; background: var(--c-yellow); color: var(--c-black); font-weight: 600; font-size: .82rem; padding: .15rem .55rem; border-radius: 999px; margin-left: .4rem; vertical-align: middle; }
.bq-erreur { background: #FDECEC; border-left: 3px solid #D33; color: #922; padding: .6rem .8rem; border-radius: var(--radius); font-size: .9rem; margin-top: .8rem; }

.bq-ajouter { width: 100%; margin-top: 1rem; background: var(--c-cyan); color: #fff; border: 0; border-radius: var(--radius); padding: .95rem 1rem; font-family: var(--font-head); font-size: 1.3rem; letter-spacing: .02em; cursor: pointer; }
.bq-ajouter:hover { background: #0098cd; }
.bq-ajouter[disabled] { background: var(--c-gray-300); cursor: not-allowed; }

/* Tableau des quantités */
.bq-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bq-tableau { width: 100%; border-collapse: collapse; font-size: .92rem; margin-top: .8rem; }
.bq-tableau th, .bq-tableau td { padding: .5rem .6rem; border-bottom: 1px solid var(--c-gray-100); text-align: right; white-space: nowrap; }
.bq-tableau th:first-child { white-space: normal; }
.bq-tableau th:first-child, .bq-tableau td:first-child { text-align: left; }
.bq-tableau thead th { border-bottom: 2px solid var(--c-gray-300); font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; color: var(--c-muted); }
.bq-tableau tbody tr.actif { background: #EAF7FD; font-weight: 600; }

/* Panier */
.bq-ligne { display: grid; grid-template-columns: 90px minmax(0,1fr) auto; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--c-gray-100); align-items: start; }
.bq-ligne img { width: 90px; height: 70px; object-fit: cover; border-radius: var(--radius); }
.bq-ligne-nom { font-family: var(--font-head); font-size: 1.25rem; }
.bq-ligne-conf { font-size: .9rem; color: var(--c-muted); }
.bq-ligne-prix { text-align: right; font-weight: 600; white-space: nowrap; }
.bq-ligne-sup { background: none; border: 0; color: var(--c-muted); text-decoration: underline; cursor: pointer; font: inherit; font-size: .85rem; padding: 0; }
.bq-ligne-sup:hover { color: #D33; }

/* ⭐⭐ 03/10/2026 : « BAT numérique » / « Notification client final », cochés
   sur le panier (voir `panier.php` et l'action `service_ligne`). */
.bq-ligne-services { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .6rem;
  margin-top: .3rem; padding-top: .8rem; border-top: 1px dashed var(--c-gray-100); }
.bq-service { flex: 1 1 220px; min-width: 200px; background: var(--c-gray-50, #fafafa);
  border: 1px solid var(--c-gray-100); border-radius: 8px; padding: .55rem .7rem; }
.bq-service-case { display: flex; align-items: center; gap: .4rem; font-size: .88rem;
  font-weight: 600; cursor: pointer; }
.bq-service-case input[type="checkbox"] { width: 1rem; height: 1rem; flex: none; accent-color: var(--c-cyan, #00AEEF); }
.bq-service-prix { margin-left: auto; font-size: .76rem; font-weight: 700; color: #1a9850;
  background: #e8f5e9; border-radius: 999px; padding: .15rem .55rem; white-space: nowrap; }
.bq-service-aide { display: block; margin: .2rem 0 0 1.4rem; font-size: .76rem; color: var(--c-muted); }
.bq-notif-champ { display: flex; gap: .4rem; margin: .5rem 0 0 1.4rem; }
.bq-notif-champ input[type="email"] { flex: 1 1 auto; min-width: 0; padding: .4rem .55rem;
  border: 1px solid var(--c-gray-200); border-radius: 6px; font-size: .82rem; }
.bq-notif-champ button { flex: none; background: var(--c-cyan, #00AEEF); color: #fff; border: 0;
  border-radius: 6px; padding: .4rem .8rem; font-size: .82rem; font-weight: 600; cursor: pointer; }
@media (max-width: 640px) { .bq-service { flex: 1 1 100%; } }

/* ⭐⭐ 03/10/2026 : « Assurance livraison » (20 € HT), cochée une fois pour
   toute la commande — case + modale d'explication, dans le récapitulatif. */
.bq-assurance { margin: .8rem 0; padding: .7rem .8rem; background: var(--c-gray-50, #fafafa);
  border: 1px solid var(--c-gray-100); border-radius: 8px; display: flex; align-items: center;
  flex-wrap: wrap; gap: .4rem; }
#bq-assurance-case { width: 1.1rem; height: 1.1rem; flex: none; accent-color: var(--c-cyan, #00AEEF); cursor: pointer; }
.bq-assurance-case { display: flex; align-items: center; gap: .4rem; font-size: .92rem; cursor: pointer; }
.bq-assurance-prix { margin-left: auto; font-size: .82rem; font-weight: 700; color: #1a1a1a; }
.bq-assurance-aide { display: block; flex-basis: 100%; margin: .3rem 0 0 1.5rem; font-size: .8rem; color: var(--c-muted); line-height: 1.4; }
.bq-info-bouton { display: inline-flex; align-items: center; justify-content: center;
  width: 1.2rem; height: 1.2rem; margin-left: .2rem; padding: 0; border: none; border-radius: 50%;
  background: var(--c-gray-200, #e6e6e6); color: var(--c-gray-700, #555); font-size: .76rem;
  line-height: 1; cursor: pointer; vertical-align: middle; }
.bq-info-bouton:hover { background: var(--c-cyan, #00AEEF); color: #fff; }

/* Modale générique <dialog> (déjà posée côté fiche produit, reprise ici pour
   le panier qui ne charge pas fiche.css). */
dialog.ex-modale { border: none; border-radius: 10px; padding: 0; max-width: 560px; width: calc(100% - 2rem);
  box-shadow: 0 10px 40px rgba(0,0,0,.25); }
dialog.ex-modale::backdrop { background: rgba(0,0,0,.5); }
.ex-modale-corps { position: relative; padding: 1.5rem; max-height: 80vh; overflow: auto; }
.ex-modale-fermer { position: absolute; top: .6rem; right: .6rem; width: 2rem; height: 2rem;
  border: none; border-radius: 6px; background: var(--c-gray-100, #f4f4f4); color: var(--c-gray-700, #555);
  font-size: 1.3rem; line-height: 1; cursor: pointer; }
.ex-modale-fermer:hover { background: var(--c-gray-200, #e6e6e6); }

.bq-recap { margin-left: auto; max-width: 380px; margin-top: 1.5rem; }
.bq-recap div { display: flex; justify-content: space-between; padding: .4rem 0; }
/* ⚠️ `.bq-recap div { display:flex }` attrape AUSSI le conteneur d'un jeu de
   totaux, qui rangerait alors ses quatre lignes côte à côte. `display:contents`
   l'efface de la mise en page — et il faut la spécificité `.bq-recap .…` pour
   passer devant, sans quoi la règle est simplement ignorée.
   La garde `[hidden]{display:none!important}` en tête de feuille reste au-dessus
   des deux : masquer le jeu inactif fonctionne. */
.bq-recap .bq-recap-jeu { display: contents; }
.bq-recap .bq-recap-total { border-top: 2px solid var(--c-black); margin-top: .4rem; padding-top: .7rem; font-family: var(--font-head); font-size: 1.6rem; }
.bq-recap-soustitre { font-weight: 600; margin: 0 0 .5rem; }
.bq-livraison-panier { border-bottom: 1px solid var(--c-gray-100); padding-bottom: .8rem; margin-bottom: .6rem; }
.bq-livraison-panier .bq-choix:last-of-type { border-bottom: 0; padding-bottom: 0; }
.bq-vide { text-align: center; padding: 3rem 0; color: var(--c-muted); }

/* Formulaire de commande */
.bq-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: 760px; }
.bq-form .bq-large { grid-column: 1 / -1; }
.bq-form label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .3rem; }
.bq-form input, .bq-form textarea, .bq-form select { width: 100%; padding: .6rem .7rem; border: 1px solid var(--c-gray-300); border-radius: var(--radius); font: inherit; }
@media (max-width: 700px) { .bq-form { grid-template-columns: 1fr; } }

/* Étapes & mentions */
.bq-note { background: var(--c-gray-50); }
.bq-mention { font-size: .85rem; color: var(--c-muted); margin-top: 1.2rem; }
.bq-logos-paiement { display: flex; gap: .4rem; margin: .5rem 0 .3rem; }
.bq-logos-paiement img { display: block; border-radius: 4px; box-shadow: 0 0 0 1px var(--c-gray-300); }
.bq-alerte { background: #EAF7FD; border-left: 3px solid var(--c-cyan); padding: .8rem 1rem; border-radius: var(--radius); margin-bottom: 1.4rem; }

/* ============================================================
   Page d'accueil de la boutique
   ============================================================ */

/* --- Bandeau d'entrée --- */

/* --- Calculateur --- */
.bq-calc.en-erreur .bq-calc-prix { color: var(--c-gray-300); }
.bq-calc.en-erreur .bq-calc-sous { color: #C33; }

/* --- Raccourcis par besoin --- */

/* --- Titres de rang --- */

/* --- Mosaïque de rubriques --- */

/* --- Bande des matières --- */

/* ============================================================
   Comptes, adresses, tunnel de commande
   ============================================================ */
.bq-etroit { max-width: 560px; }

.bq-form-simple { display: grid; gap: 1rem; }
.bq-form-simple label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .3rem; }
.bq-form-simple input { width: 100%; padding: .6rem .7rem; border: 1px solid var(--c-gray-300); border-radius: var(--radius); font: inherit; }
.bq-form-simple input:focus, .bq-form input:focus, .bq-form select:focus, .bq-form textarea:focus { outline: 2px solid var(--c-cyan); outline-offset: 1px; }
.bq-form input:disabled { background: var(--c-gray-50); color: var(--c-muted); }
.bq-aide-en-ligne { font-weight: 400; color: var(--c-muted); font-size: .82rem; }

/* Onglets du compte */
.bq-onglets { display: flex; flex-wrap: wrap; gap: .3rem; border-bottom: 2px solid var(--c-gray-100); margin-bottom: 1.6rem; }
.bq-onglet { padding: .6rem 1rem; color: var(--c-muted); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.bq-onglet:hover { color: var(--c-cyan); text-decoration: none; }
.bq-onglet.actif { color: var(--c-black); border-bottom-color: var(--c-cyan); }
.bq-onglet-sortie { margin-left: auto; font-weight: 500; }
.bq-onglet-sortie:hover { color: #D33; }

.bq-sous-titre { font-family: var(--font-head); font-size: 1.6rem; margin: 2.4rem 0 1rem; }

/* Adresses */
.bq-adresses { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.bq-adresse { position: relative; border: 1px solid var(--c-gray-300); border-radius: var(--radius-lg); padding: 1rem 1.1rem; font-size: .93rem; }
.bq-adresse.defaut { border-color: var(--c-cyan); box-shadow: 0 0 0 1px var(--c-cyan) inset; }
.bq-adresse p + p { margin-top: .5rem; }
.bq-adresse-marque { position: absolute; top: -.7rem; right: .8rem; background: var(--c-cyan); color: #fff; font-size: .72rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px; }
.bq-adresse-libelle { font-family: var(--font-head); font-size: 1.15rem; }
.bq-adresse-tel { color: var(--c-muted); }
.bq-adresse-actions { display: flex; gap: 1rem; align-items: center; margin-top: .8rem !important; padding-top: .6rem; border-top: 1px solid var(--c-gray-100); font-size: .87rem; }

/* Lien de compte dans la barre */
.bq-nav-compte { display: flex; align-items: center; gap: .4rem; padding: 0 .9rem; color: #fff; font-weight: 500; white-space: nowrap; font-size: .95rem; }
.bq-nav-compte:hover { color: var(--c-cyan); }
/* Sur grand écran le compte est dans la barre ; sur mobile il rejoint le
   menu déroulant, sinon la barre déborde. */
.bq-nav-item-compte { display: none; }
@media (max-width: 640px) {
  .bq-nav-compte { display: none; }
  .bq-nav-item-compte { display: block; }
  .bq-nav-lien-compte { display: block; padding: .85rem 0; color: #fff; font-weight: 600; }
  .bq-nav-lien-compte:hover { color: var(--c-cyan); }
}

/* Tunnel de commande */
/* ⭐⭐ 03/10/2026, demandé par Julien : plus de cadre de droite — le total et
   le bouton vivent dans le bandeau fixe du bas (`.bq-barre-fixe`), donc la
   grille à deux colonnes n'a plus lieu d'être : une seule colonne, pleine
   largeur. */
.bq-tunnel { display: grid; gap: 2rem; }
.bq-tunnel-gauche { display: grid; gap: 1.4rem; }
.bq-bloc { border: 1px solid var(--c-gray-300); border-radius: var(--radius-lg); padding: 1.3rem 1.4rem; }
.bq-bloc h2 { font-family: var(--font-head); font-size: 1.5rem; display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.bq-etape { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--c-cyan); color: #fff; font-size: 1rem; flex: none; }

.bq-recap-ligne { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--c-gray-100); }
.bq-recap-ligne:last-of-type { border-bottom: 0; }
.bq-recap-nom { font-weight: 600; }
.bq-recap-conf { font-size: .88rem; color: var(--c-muted); }
.bq-recap-prix { font-weight: 600; white-space: nowrap; }

.bq-choix { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; cursor: pointer; padding: .5rem 0; border-bottom: 1px solid var(--c-gray-100); }
.bq-choix:last-of-type { border-bottom: 0; }
.bq-choix input { appearance: none; -webkit-appearance: none; width: 1.05rem; height: 1.05rem; margin: .18rem 0 0; flex: none;
  border: 1px solid var(--c-gray-300); border-radius: 3px; background: #fff; display: grid; place-items: center; cursor: pointer; }
.bq-choix input:checked { border-color: var(--c-cyan); background: var(--c-cyan); }
.bq-choix input:checked::after { content: ""; width: .34rem; height: .62rem; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.bq-choix input:focus-visible { outline: 2px solid var(--c-cyan); outline-offset: 2px; }
.bq-choix:hover strong { color: var(--c-cyan); }
.bq-choix strong { display: block; font-weight: 600; }
.bq-choix em { font-style: normal; font-size: .87rem; color: var(--c-muted); display: block; margin-top: .15rem; line-height: 1.45; }
.bq-choix:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.bq-adresses-choix { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--c-gray-300); }

/* Dépôt des fichiers d'impression */
.bq-depot { margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px dashed var(--c-gray-300); }
.bq-depot-titre { font-weight: 600; margin-bottom: .25rem; }
.bq-depot-champ { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: .8rem; }
.bq-depot-champ input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.bq-depot-bouton { display: inline-block; border: 1px solid var(--c-cyan); color: var(--c-cyan); background: #fff; border-radius: var(--radius); padding: .5rem 1rem; font-weight: 600; cursor: pointer; font-size: .93rem; }
.bq-depot-bouton:hover { background: var(--c-cyan); color: #fff; }
.bq-depot-champ input[type="file"]:focus + .bq-depot-bouton { outline: 2px solid var(--c-cyan); outline-offset: 2px; }
.bq-depot-etat { font-size: .88rem; color: var(--c-muted); }
.bq-depot-liste { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .3rem; }
.bq-depot-liste li { display: flex; justify-content: space-between; gap: 1rem; background: var(--c-gray-50); border-radius: var(--radius); padding: .4rem .7rem; font-size: .9rem; }
.bq-depot-taille { color: var(--c-muted); white-space: nowrap; }
.bq-adresse-saisie { margin-top: 1rem; padding: 1rem; background: var(--c-gray-50); border-radius: var(--radius); }

/* Choix du délai de production */
.bq-delais { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: .9rem; }
@media (max-width: 560px) { .bq-delais { grid-template-columns: 1fr; } }
.bq-delai { cursor: pointer; }
.bq-delai input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bq-delai-carte { display: flex; gap: .9rem; align-items: center; border: 1px solid var(--c-gray-300); border-radius: var(--radius-lg); padding: .9rem 1rem; transition: border-color .14s, background .14s, box-shadow .14s; color: var(--c-muted); }
.bq-delai:hover .bq-delai-carte { border-color: var(--c-cyan); }
.bq-delai input:checked + .bq-delai-carte { border-color: var(--c-cyan); background: #F2FBFE; box-shadow: 0 0 0 1px var(--c-cyan) inset; color: var(--c-cyan); }
.bq-delai input:focus-visible + .bq-delai-carte { outline: 2px solid var(--c-cyan); outline-offset: 2px; }
.bq-delai-carte svg { width: 34px; height: 34px; flex: none; }
.bq-delai-txt { display: block; color: var(--c-text); }
.bq-delai-txt strong { display: block; font-family: var(--font-head); font-size: 1.3rem; line-height: 1.1; }
.bq-delai-txt em { font-style: normal; display: block; font-size: .88rem; color: var(--c-muted); }
.bq-delai-prix { display: inline-block; margin-top: .3rem; font-size: .85rem; font-weight: 600; color: var(--c-cyan); }

/* Rappel du franco de port */
.bq-franco { margin-top: .7rem; font-size: .88rem; background: #FFF8E1; border-left: 3px solid var(--c-yellow); border-radius: var(--radius); padding: .55rem .8rem; }
.bq-franco strong { white-space: nowrap; }
.bq-franco-ok { background: #EAF9F0; border-left-color: #2E9E5B; }

/* ⭐⭐ 03/10/2026, demandé par Julien : plus de cadre de droite au panier non
   plus — même bandeau fixe (`.bq-barre-fixe`) qu'à la commande, une seule
   colonne pleine largeur. */
.bq-panier { display: grid; gap: 2rem; }
.bq-depot-envoyer { background: var(--c-cyan); color: #fff; border: 0; border-radius: var(--radius); padding: .5rem 1.1rem; font-weight: 600; cursor: pointer; font-size: .93rem; }
.bq-depot-envoyer:hover { background: #0098cd; }
.bq-depot-liste a.bq-depot-nom { color: var(--c-cyan); }

/* ============================================================
   Atelier — gestion des commandes
   ============================================================ */
.bq-recherche { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.4rem; }
.bq-recherche input { flex: 1; min-width: 220px; padding: .55rem .7rem; border: 1px solid var(--c-gray-300); border-radius: var(--radius); font: inherit; }
.bq-recherche button { background: var(--c-black); color: #fff; border: 0; border-radius: var(--radius); padding: .55rem 1.1rem; font-weight: 600; cursor: pointer; }
.bq-recherche button:hover { background: var(--c-cyan); }

.bq-tableau-atelier td, .bq-tableau-atelier th { vertical-align: top; }
.bq-tableau-atelier .bq-cell-gauche { text-align: left; }
.bq-tableau-atelier small { color: var(--c-muted); font-weight: 400; }

.bq-etat { display: inline-block; font-size: .78rem; font-weight: 600; padding: .18rem .6rem; border-radius: 999px; white-space: nowrap; }
.bq-etat-a_payer { background: #FFF3D6; color: #8A6100; }
.bq-etat-payee { background: #E3F2FD; color: #0B5C8A; }
.bq-etat-en_fabrication { background: #EAF9F0; color: #1E7A45; }
.bq-etat-expediee { background: #EDEBFA; color: #4A3FA8; }
.bq-etat-annulee { background: #F1F3F5; color: #6A737C; }
.bq-manque { color: #C23; font-weight: 600; }
.bq-urgent { color: #C23; font-weight: 600; }
.bq-finitions { color: var(--c-cyan) !important; }

.bq-atelier { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 2rem; align-items: start; }
@media (max-width: 900px) { .bq-atelier { grid-template-columns: 1fr; } }
.bq-atelier-cote { display: grid; gap: 1rem; }
.bq-atelier-cote .bq-bloc h2 { font-size: 1.25rem; margin-bottom: .7rem; }
.bq-atelier-cote label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .25rem; }
.bq-atelier-cote select { width: 100%; padding: .5rem .6rem; border: 1px solid var(--c-gray-300); border-radius: var(--radius); font: inherit; }
.bq-etat-actuel { margin-bottom: 1rem; }

.bq-suivi { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: .9rem; }
.bq-suivi li { display: flex; gap: .7rem; flex-wrap: wrap; padding: .35rem 0; border-bottom: 1px solid var(--c-gray-100); }
.bq-suivi span { color: var(--c-muted); font-variant-numeric: tabular-nums; }
.bq-suivi em { font-style: normal; color: var(--c-muted); margin-left: auto; font-size: .85rem; }

/* --------------------------------------------------------------- FAQ produit */
.bq-faq { display: grid; gap: .6rem; margin-top: 1.2rem; max-width: 62rem; }
.bq-faq-item { background: #fff; border: 1px solid var(--c-gray-100); border-radius: var(--radius-lg); overflow: hidden; }
.bq-faq-item summary { cursor: pointer; padding: .9rem 1.1rem; font-weight: 600; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.bq-faq-item summary::-webkit-details-marker { display: none; }
.bq-faq-item summary::after { content: '+'; font-size: 1.4rem; line-height: 1; color: var(--c-muted); flex: none; }
.bq-faq-item[open] summary::after { content: '–'; }
.bq-faq-item[open] summary { border-bottom: 1px solid var(--c-gray-100); }
.bq-faq-item p { padding: .9rem 1.1rem; color: var(--c-muted); font-size: .94rem; line-height: 1.6; }

/* ------------------------------------------------------------ pages légales */
.bq-legal { max-width: 58rem; }
.bq-legal h2 { font-family: var(--font-head); font-size: 1.45rem; margin: 2.2rem 0 .8rem; }
.bq-legal p { margin: .7rem 0; line-height: 1.7; }
.bq-legal ul, .bq-legal ol { margin: .7rem 0 .7rem 1.2rem; line-height: 1.7; }
.bq-legal li { margin: .3rem 0; }
.bq-cgv-sommaire { background: var(--c-gray-50); border-radius: var(--radius-lg); padding: 1.2rem 1.6rem 1.4rem; }
.bq-cgv-sommaire h2 { margin-top: 0; font-size: 1.15rem; }
.bq-cgv-sommaire ol { columns: 2; column-gap: 2rem; font-size: .92rem; }
.bq-cgv-article { scroll-margin-top: 6rem; }
.bq-cgv-cadre { background: #EAF7FD; border-left: 3px solid var(--c-primary, #00AEEF); padding: .6rem .9rem; font-size: .93rem; }
.bq-cgv-encadre { border: 2px solid var(--c-gray-300); border-radius: var(--radius-lg); padding: 1rem 1.3rem; margin: 1rem 0; background: #fff; }
.bq-cgv-encadre p:first-child { margin-top: 0; font-size: 1rem; }
.bq-cgv-afaire { background: #FFF4D6; border-left: 3px solid #E9A800; padding: .7rem 1rem; }
@media (max-width: 700px) { .bq-cgv-sommaire ol { columns: 1; } }
.bq-choix-cgv { align-items: flex-start; margin-top: .6rem; }
.bq-choix-cgv em { display: block; margin-top: .25rem; font-style: normal; color: var(--c-muted); font-size: .86rem; line-height: 1.55; }

/* Prix de vignette : HT pour les pros, TTC pour les particuliers — les deux. */
.bq-prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .45rem; }
.bq-prix-avant { flex: 0 0 100%; font-weight: 400; color: var(--c-muted); font-size: .82rem; }
.bq-prix-ht { font-weight: 600; color: var(--c-black); font-size: 1.05rem; }
.bq-prix-ttc { font-weight: 400; color: var(--c-muted); font-size: .85rem; }

.bq-facultatif { font-weight: 400; color: var(--c-muted); font-size: .85em; }
.bq-doli { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .35rem; font-size: .84rem; }
.bq-doli code { font-size: .8rem; color: var(--c-muted); word-break: break-all; }
.bq-doli-etat { display: inline-block; padding: .1rem .45rem; border-radius: 99px; font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; }
.bq-doli-simule { background: var(--c-gray-100); color: #555; }
.bq-doli-a_envoyer { background: #FFF4D6; color: #8A5300; }
.bq-doli-envoye { background: #E4F5E9; color: #1F6B3B; }
.bq-doli-erreur { background: #FDE4E4; color: #9B1C1C; }
.bq-revendeur { background: #E4F5E9; color: #1F6B3B; border-left: 3px solid #1F9D55; }
.bq-recap-remise { color: #1F6B3B; font-weight: 600; }
.bq-prix-public { color: var(--c-muted); text-decoration: line-through; font-size: .84rem; font-weight: 400; }

/* ------------------------------------------------- atelier : comptes clients */
.bq-ligne-revendeur { background: #F2FAF5; }
.bq-role-client { background: var(--c-gray-100); color: #555; }
.bq-role-revendeur { background: #E4F5E9; color: #1F6B3B; }
.bq-role-admin { background: #EAF7FD; color: #06607F; }
.bq-role-form { margin: 0; }
.bq-bouton-role { border: 1px solid var(--c-gray-300); background: #fff; border-radius: var(--radius);
  padding: .35rem .7rem; font-size: .82rem; cursor: pointer; white-space: nowrap; }
.bq-bouton-role:hover { border-color: #1F9D55; color: #1F6B3B; }
.bq-bouton-role.retirer:hover { border-color: #9B1C1C; color: #9B1C1C; }

/* ─────────── encart « ce produit se compose en ligne » ───────────
   Une miniature du support à gauche, l'argument à droite. Le visuel dit en une
   seconde qu'on personnalise un PANNEAU ; le texte ne fait que le préciser. */
.bq-composer {
  display: grid; grid-template-columns: minmax(130px, 34%) 1fr; gap: 1.6rem;
  align-items: center;
  border: 1px solid var(--c-gray-300); border-radius: var(--radius-lg);
  padding: 1.5rem; margin: 0 0 1.8rem;
  background: linear-gradient(135deg, #fff 0%, #fff6fb 100%);
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
@media (max-width: 560px) {
  .bq-composer { grid-template-columns: 1fr; gap: 1.1rem; }
  /* ⚠️ LARGEUR EXPLICITE, pas `max-width` + `margin:auto`. Le panneau porte
     `container-type: inline-size`, qui applique un confinement : sa largeur
     INTRINSÈQUE vaut zéro. Avec une marge automatique le conteneur cesse de
     s'étirer, se cale sur cette largeur intrinsèque… et s'effondre à 2 px. */
  .bq-composer-visuel { width: 200px; max-width: 100%; margin-inline: auto; }
}

/* Le visuel penche légèrement et porte une ombre : on voit un OBJET, pas une
   capture d'écran. */
.bq-composer-visuel { position: relative; transform: rotate(-2deg); }
.bq-composer-visuel > * {
  box-shadow: 0 8px 24px rgba(0,0,0,.16) !important;
  border-radius: 2px;
}
/* ⚠️ Le rendu d'un composeur peut contenir plus que le support — un verdict de
   définition, un compte de série, un avis de découpe. Dans l'encart on ne garde
   QUE le support, toujours en premier.
   Le crayon est exclu NOMMÉMENT : sans ça il ne survivait que parce que sa règle
   vient plus bas dans la feuille, ce qui est un équilibre, pas une intention. */
.bq-composer-visuel > *:not(:first-child):not(.bq-composer-curseur) { display: none; }

/* Le crayon dit « ça se modifie » sans qu'il faille l'écrire. */
.bq-composer-curseur {
  position: absolute; right: -12px; bottom: -12px;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--c-magenta); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; box-shadow: 0 3px 10px rgba(236,0,140,.35);
  transform: rotate(2deg);
}

.bq-composer-tag { display: inline-block; background: var(--c-magenta); color: #fff;
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  padding: .2rem .6rem; border-radius: 99px; margin: 0 0 .55rem; }
.bq-composer h2 { margin: 0 0 .45rem; font-size: 1.4rem; line-height: 1.2; }
.bq-composer p { margin: 0 0 1rem; line-height: 1.6; }
.bq-composer .btn { margin-bottom: .2rem; }
.bq-composer-note { color: var(--c-muted); font-size: .85rem; line-height: 1.5;
  margin: .9rem 0 0 !important; }

/* Relecture des mentions d'un panneau composé, dans le panier. */
.bq-ligne-permis { margin-top: .5rem; font-size: .88rem; }
.bq-ligne-permis summary { cursor: pointer; color: var(--c-magenta); font-weight: 600; }
.bq-ligne-permis dl { margin: .6rem 0 0; padding-left: .9rem; border-left: 2px solid var(--c-gray-300); }
.bq-ligne-permis dt { color: var(--c-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .02em; }
.bq-ligne-permis dd { margin: .1rem 0 .55rem; font-weight: 600; }
.bq-ligne-permis p { color: var(--c-muted); font-size: .84rem; margin: .5rem 0 0; }

/* ─────────── produits composables : panier, cartes, accueil ───────────
   ⚠️ CES RÈGLES VIVENT ICI, pas dans composer.css : le panier, les rubriques
   et l'accueil ne chargent que boutique.css. Mises dans composer.css, elles
   ne s'appliquaient nulle part — la pastille « Composable en ligne » et le
   bouton d'épreuve sont restés sans style jusqu'au 16/09/2026. */

/* Repère sur les cartes produit : sans lui, rien n'annonce qu'un produit se
   compose en ligne, et les pages de composition restent introuvables. */
.bq-carte-img { position: relative; }
.bq-carte-tag { position: absolute; left: .55rem; top: .55rem; z-index: 1;
  background: var(--c-magenta); color: #fff; font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; padding: .2rem .5rem; border-radius: 99px;
  box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.bq-carte-tag-nouveau { background: var(--c-cyan); color: #04222D; }

/* Bloc de découverte sur l'accueil boutique : c'est la porte d'entrée des
   pages de composition, qui n'étaient accessibles que depuis une fiche produit. */
.bq-compo-carte .bq-prix { margin: 0 0 .5rem; }

/* Épreuve PDF depuis le panier : le client doit pouvoir vérifier avant de payer. */
.bq-ligne-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin: .6rem 0 0 !important; font-size: .88rem; }
.bq-ligne-actions span { color: var(--c-gray-300); }
.bq-epreuve { font-weight: 700; }
.bq-ligne-note { font-size: .8rem; color: var(--c-muted); line-height: 1.5; margin: .4rem 0 0 !important; }

/* L'épreuve est une action de premier plan : elle se voit sans rien déplier. */
.bq-ligne-actions { margin: .55rem 0 .45rem !important; }
.bq-epreuve { display: inline-block; background: var(--c-magenta); color: #fff !important;
  padding: .3rem .7rem; border-radius: 99px; font-size: .84rem; font-weight: 700;
  text-decoration: none; }
.bq-epreuve:hover { background: var(--c-black); }

/* Une ligne d'un produit composable qui N'A PAS été composée : il faut le dire,
   sinon l'absence d'épreuve ressemble à une panne. */
.bq-ligne-fichier { font-size: .85rem; color: var(--c-muted); line-height: 1.5;
  margin: .55rem 0 0; padding: .45rem .7rem; border-left: 3px solid var(--c-gray-300);
  background: #f7f7f7; border-radius: 0 6px 6px 0; }
.bq-ligne-fichier a { font-weight: 600; }

/* Deux barres collantes au-dessus : une ancre doit s'arrêter en dessous. */
main [id] { scroll-margin-top: calc(var(--bq-sous-entete) + 62px); }


/* ---------- Vérificateur de fichier ---------------------------------- */
.bq-verif-form { padding: 1.2rem 1.3rem; border: 1px solid var(--c-gray-200, #e6e6e6);
  border-radius: var(--radius-lg, 10px); background: var(--c-gray-50, #fafafa); margin-bottom: 1.8rem; }
.bq-verif-form input[type=file] { width: 100%; padding: .7rem; border: 1px dashed var(--c-gray-300, #ccc);
  border-radius: var(--radius, 6px); background: #fff; }
.bq-verif-resultat { padding: 1.2rem 1.3rem; border-radius: var(--radius-lg, 10px);
  border: 2px solid; margin-bottom: 2rem; }
.bq-verif-resultat h2 { margin: 0 0 .3rem; font-size: 1.25rem; }
.bq-verif-fichier { margin: 0 0 1rem; font-size: .88rem; color: var(--c-gray-600, #666); }
.bq-verif-ok        { border-color: #2e9e5b; background: #f3fbf6; }
.bq-verif-attention { border-color: #e0a300; background: #fffbf0; }
.bq-verif-probleme  { border-color: #d3392b; background: #fdf4f3; }
.bq-verif-points { list-style: none; margin: 0 0 1rem; padding: 0; display: flex;
  flex-direction: column; gap: .7rem; }
.bq-verif-points li { display: grid; grid-template-columns: 1.6rem 1fr; gap: .1rem .6rem;
  align-items: start; }
.bq-verif-points li::before { grid-row: span 2; font-size: 1.05rem; line-height: 1.3; }
.bq-verif-points .bq-verif-ok::before        { content: "✓"; color: #2e9e5b; }
.bq-verif-points .bq-verif-attention::before { content: "!"; color: #e0a300; font-weight: 700; }
.bq-verif-points .bq-verif-probleme::before  { content: "⛔"; }
.bq-verif-points li strong { font-size: .95rem; }
.bq-verif-points li span { font-size: .86rem; color: var(--c-gray-700, #444); line-height: 1.5; }
.bq-verif-points li.bq-verif-ok, .bq-verif-points li.bq-verif-attention,
.bq-verif-points li.bq-verif-probleme { border: none; background: none; padding: 0; }
.bq-verif-aide { border-top: 1px solid var(--c-gray-200, #e6e6e6); padding-top: 1.5rem; }
.bq-verif-aide dt { font-weight: 700; margin-top: .9rem; }
.bq-verif-aide dd { margin: .2rem 0 0; color: var(--c-gray-700, #444); line-height: 1.6; }
.bq-verif-retour { margin: -.6rem 0 1.2rem; font-size: .95rem; font-weight: 600; }
.bq-verif-suite { margin: 0 0 1rem; }


/* ---------- Les deux outils, côte à côte sous l'image ------------------ */
.bq-outils { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.1rem 0 2rem; }
/* Seul sous la photo : le titre et le bouton partagent une ligne, la note tient
   en dessous. C'est ce qui garde l'encadré bas — il ne doit pas concurrencer la
   photo du produit. */
.bq-outils-seul { margin: 1.1rem 0 2rem; }
.bq-outil-rang { display: flex; align-items: center; gap: 1rem; }
.bq-outil-rang .bq-outil-titre { margin: 0; flex: 1; min-width: 0; }
.bq-outils-seul .bq-outil-btn { width: auto; flex: none; margin-top: 0; min-height: 0;
  white-space: nowrap; padding: .7rem 1.6rem; }
.bq-outils-seul .bq-outil-note { margin: .65rem 0 0; }
/* ⚠️ `min-width: 0` : sans lui, le libellé long du second bouton — qui ne se
   coupe pas par défaut — élargissait sa colonne et cassait le 1fr 1fr. */
.bq-outil { display: flex; flex-direction: column; min-width: 0; padding: 1rem 1.1rem;
  border: 1px solid var(--c-gray-200, #e6e6e6); border-radius: var(--radius-lg, 10px); }
.bq-outil-gabarit { background: var(--c-gray-50, #fafafa); }
.bq-outil-titre { margin: 0 0 .7rem; font-weight: 700; font-size: .98rem; line-height: 1.3; }
/* Le bouton est le DERNIER élément de la carte et se colle en bas : titres et
   notes n'ont pas la même longueur d'une colonne à l'autre, et c'est la seule
   façon d'aligner les deux boutons. `white-space: normal` annule le `nowrap`
   hérité de .btn, qui interdisait au libellé long de se couper. */
.bq-outil-btn { width: 100%; margin-top: auto; letter-spacing: .02em; font-size: .9rem;
  padding-left: .8rem; padding-right: .8rem; white-space: normal; text-align: center;
  line-height: 1.25;
  /* ⚠️ Même hauteur imposée : « GABARIT » tient sur une ligne, pas
     « VÉRIFIEZ-LE AVANT DE COMMANDER ». Sans ce plancher les deux boutons
     partagent leur bas mais pas leur haut, et l'œil voit un décalage. */
  min-height: 4.15rem; }
.bq-outils-seul .bq-outil-btn { min-height: 3.2rem; }
.bq-outil-btn svg { flex: none; }
.bq-outil-note { margin: 0 0 .9rem; font-size: .8rem; color: var(--c-gray-600, #666); line-height: 1.5; }
.bq-outil-note a { font-weight: 600; }

@media (max-width: 700px) {
  .bq-outils { grid-template-columns: 1fr; }
}

/* ---- Dépôt de fichier ligne par ligne, dans le tunnel de commande ---------
   ⭐ Le bloc se rattache visuellement au produit qui le précède : un léger
   retrait et un filet à gauche suffisent à dire « ce fichier va avec CET
   article ». Sans ce lien visuel, quatre champs de dépôt à la suite
   redeviennent le champ unique qu'on cherchait à remplacer. */
.bq-depot-ligne { margin: -.2rem 0 1.1rem 1rem; padding-left: .9rem;
                  border-left: 2px solid #e7e7ea; }
.bq-depot-ligne .bq-depot-champ { margin-top: .45rem; }
.bq-depot-ligne .bq-depot-liste { margin: .4rem 0 0; }
.bq-depot-ok { margin: .45rem 0 0; font-size: .92rem; color: #1F6B3B; line-height: 1.5; }
.bq-depot-ok strong { color: #1a1a1a; }
.bq-depot-ok .bq-epreuve { margin-left: .5rem; }
@media (max-width: 700px) {
  .bq-depot-ligne { margin-left: 0; }
}

/* Atelier — page « Fournisseurs ». ⚠️ Préfixe `bq-f-` : `bq-note` existe déjà
   ailleurs comme FOND de ligne de tableau, le réutiliser pour une légende
   plaquait un aplat gris derrière le texte. */
.bq-f-titre { margin: 2.2rem 0 .6rem; display: flex; align-items: baseline; gap: .6rem; }
.bq-f-compte { font-size: .8rem; font-weight: 600; color: var(--c-gray-600);
  background: var(--c-gray-100); border-radius: 999px; padding: .1rem .55rem; }
.bq-f-note { display: block; margin-top: .25rem; font-size: .8rem; line-height: 1.35;
  color: var(--c-gray-600); font-weight: 400; background: none;
  /* ⭐ 13/10/2026, signalé par Julien (« beaucoup de texte dépasse sur les
     fiches dans catalogue ») : `.bq-tableau td` impose `white-space: nowrap`
     — pensé pour des prix courts, jamais annulé ici alors que `.bq-f-note`
     sert aussi à de longues notes de relevé en texte libre (SKU, historique
     fournisseur…), qui débordaient hors de leur cellule au lieu de passer à
     la ligne. */
  white-space: normal; word-break: break-word; }

/* Code promo, sur la page de commande.
   ⚠️ `bq-invisible` et pas `hidden` : les deux formulaires ne contiennent que
   des champs cachés, mais un `hidden` sur un <form> dont des contrôles externes
   dépendent par `form=` a déjà causé des surprises ailleurs dans ce code. */
.bq-invisible { display: none; }
.bq-promo { margin: 1rem 0 .4rem; }
.bq-promo-label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .35rem; }
.bq-promo-saisie { display: flex; gap: .4rem; }
.bq-promo-saisie input { flex: 1 1 auto; min-width: 0; padding: .55rem .7rem;
  border: 1px solid var(--c-gray-300); border-radius: 6px; font-size: .95rem;
  text-transform: uppercase; }
.bq-promo-saisie button { flex: 0 0 auto; padding: .55rem .9rem; border: 1px solid var(--c-gray-300);
  background: #fff; border-radius: 6px; font-size: .9rem; font-weight: 600; cursor: pointer; }
.bq-promo-saisie button:hover { background: var(--c-gray-100); }
.bq-promo-actif { margin: 0; font-size: .9rem; background: #ecfdf5; border-left: 3px solid #059669;
  padding: .6rem .7rem; border-radius: 4px; line-height: 1.45; }
.bq-promo-note { margin: 0; font-size: .82rem; color: var(--c-gray-600); line-height: 1.45; }
.bq-promo-lien { background: none; border: 0; padding: 0; margin-left: .3rem; font-size: .85rem;
  color: var(--c-gray-600); text-decoration: underline; cursor: pointer; }

/* Création d'un code promo, dans l'atelier. */
.bq-code-form { margin-bottom: 2rem; }
.bq-code-champs { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.bq-code-champs label { display: flex; flex-direction: column; gap: .25rem;
  font-size: .82rem; font-weight: 600; color: var(--c-gray-700); }
.bq-code-champs input { padding: .5rem .6rem; border: 1px solid var(--c-gray-300);
  border-radius: 6px; font-size: .95rem; font-weight: 400; }
.bq-code-pc { display: flex; align-items: center; gap: .35rem; }
.bq-code-pc input { width: 5rem; }
.bq-code-aide { margin: .9rem 0; font-size: .84rem; line-height: 1.5; color: var(--c-gray-600); }

/* Le choix % / € HT d'un code promo — deux radios, chacune sa saisie. */
.bq-code-remise { border: 0; padding: 0; margin: 0; grid-column: span 2;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem; }
.bq-code-remise legend { font-size: .82rem; font-weight: 600; color: var(--c-gray-700); padding: 0;
  width: 100%; margin-bottom: .1rem; }
.bq-code-type { flex-direction: row !important; align-items: center; gap: .4rem !important;
  font-weight: 400 !important; }
.bq-code-type input[type=radio] { margin: 0; width: auto; }
.bq-code-type .bq-code-pc input:disabled { background: var(--c-gray-50); color: var(--c-gray-500); }
.bq-promo-hors { margin: .5rem 0 0; font-size: .8rem; line-height: 1.45; color: var(--c-gray-600);
  background: #fff7ed; border-left: 3px solid #ea580c; padding: .5rem .6rem; border-radius: 4px; }

/* Quantité, au panier. ⚠️ Le petit format sort une liste de paliers, le reste
   un champ libre : deux rendus, une seule règle de mise en page. */
.bq-ligne-qte { display: flex; align-items: center; gap: .4rem; margin-top: .6rem; flex-wrap: wrap; }
.bq-ligne-qte label { font-size: .82rem; font-weight: 600; color: var(--c-gray-700); }
.bq-ligne-qte input, .bq-ligne-qte select { width: 6.5rem; padding: .35rem .5rem;
  border: 1px solid var(--c-gray-300); border-radius: 6px; font-size: .9rem; }
.bq-ligne-qte select { width: auto; min-width: 6.5rem; }
.bq-ligne-qte button { padding: .35rem .7rem; border: 1px solid var(--c-gray-300);
  background: #fff; border-radius: 6px; font-size: .82rem; font-weight: 600; cursor: pointer; }
.bq-ligne-qte button:hover { background: var(--c-gray-100); }

/* Consentement : une case qui se lit, pas une ligne de plus dans un formulaire. */
.bq-consent { background:#F7F9FB; border:1px solid #E2E8EE; border-radius:8px; padding:.8rem 1rem; }
.bq-case { display:flex; gap:.7rem; align-items:flex-start; cursor:pointer; }
.bq-case input { margin-top:.25rem; width:17px; height:17px; flex:none; }
.bq-case .bq-aide-en-ligne { display:block; margin-top:.2rem; }

/* ============================================== « vous êtes ici » dans la barre
   ⭐ Julien : « c'est le même menu sur toutes les pages ». La barre ne disait
   jamais où l'on se trouve. Elle le dit maintenant, à trois niveaux : la
   famille dans la barre, la rubrique et le produit dans le panneau. */
/* ⚠️ Un simple trait sous le mot ne se voyait pas : la barre porte déjà un
   liseré coloré sur toute sa largeur, et le repère s'y noyait. Une pastille
   pleine, elle, se lit d'un coup d'œil. */
.bq-nav-btn { position: relative; }
.bq-nav-item.ici > .bq-nav-btn {
  color: #04222D; background: var(--c-cyan); border-radius: 6px; font-weight: 600;
}
.bq-nav-item.ici > .bq-nav-btn .bq-nav-fleche { border-top-color: #04222D; }

.bq-colonne.ici .bq-colonne-titre img { background: #E9F6FD; box-shadow: 0 0 0 2px var(--c-cyan); }
.bq-colonne.ici .bq-colonne-titre span { color: var(--c-cyan); }

/* Le produit affiché se repère sans qu'on ait à le chercher dans la liste. */
.bq-colonne li a.ici {
  color: var(--c-text); font-weight: 600;
  background: var(--c-gray-50); border-radius: var(--radius);
  padding-left: .5rem; margin-left: -.5rem;
}
.bq-colonne li a.ici::before { content: "▸ "; color: var(--c-cyan); }

/* Le lien qui ouvre la rubrique complète, quand la liste a été écrêtée. */
.bq-colonne-tout { color: var(--c-cyan) !important; font-weight: 600; }

/* Le picto du panier, à gauche du mot. Il prend la couleur du texte, donc il
   suit l'état « actif » sans qu'on ait à le redessiner. */
.bq-nav-panier-picto { flex: none; opacity: .9; }
.bq-nav-panier.actif .bq-nav-panier-picto { opacity: 1; }

/* ===================================================== tableau de bord client */
.bq-tb { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; margin: 1.2rem 0; }
.bq-tb-case {
  background: #fff; border: 1px solid var(--c-gray-100); border-radius: var(--radius);
  padding: 1rem 1.15rem; display: flex; flex-direction: column; gap: .2rem;
}
.bq-tb-lib { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--c-muted); }
.bq-tb-case > strong { font-family: var(--font-head); font-size: 1.8rem; line-height: 1.1; }
.bq-tb-case form { margin-top: auto; }
.bq-code {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .92rem; font-weight: 700;
  background: var(--c-gray-50); border: 1px dashed var(--c-gray-100);
  border-radius: 5px; padding: .15rem .45rem; letter-spacing: .04em;
}
.bq-ligne-pale { opacity: .55; }
.bq-ajouter-pale { background: #fff !important; color: var(--c-text) !important; border: 1px solid var(--c-gray-100) !important; }
.bq-ajouter-pale:hover { border-color: var(--c-muted) !important; }

/* ============================================ copie lisible des données client */
.bq-copie { background: #fff; border: 1px solid var(--c-gray-100); border-radius: var(--radius); padding: 1.6rem 1.8rem; }
.bq-copie h2 { font-size: 1.5rem; margin-bottom: .2rem; }
.bq-copie h3 { font-size: 1.1rem; margin: 1.8rem 0 .1rem; padding-top: 1rem; border-top: 2px solid var(--c-gray-100); }
.bq-copie-table { margin: .6rem 0 1rem; font-size: .92rem; }
.bq-copie-table th { width: 42%; font-weight: 500; color: var(--c-muted); vertical-align: top; }
.bq-copie-table td { word-break: break-word; }
.bq-copie-vide { color: var(--c-muted); font-style: italic; margin: .5rem 0 1rem; }
.bq-lien-bouton {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  font-size: .88rem; color: var(--c-cyan); text-decoration: underline; text-align: left;
}
/* ⚠️ À l'impression, on ne veut ni le menu, ni le bandeau promo, ni les liens
   de navigation : la personne imprime SES données, pas notre site. */
@media print {
  .site-header, .bq-nav, .promo-bar, .site-footer, .bq-onglets,
  .page-hero, .bq-sans-impression { display: none !important; }
  .bq-copie { border: 0; padding: 0; }
  .section { padding: 0 !important; }
}

/* ═══════════════════════════════ garder son panier (visiteur, 23/09/2026) ═══
   ⚠️ Écrit ICI, dans la feuille de la boutique, et non dans `doemo.css` : le
   bloc n'existe que sur le panier. Une règle rangée dans la mauvaise feuille
   finit par ne plus être trouvée le jour où on la cherche. */
.bq-garde {
  margin-top: 1.4rem; padding: 1.1rem 1.2rem;
  background: var(--c-gray-50); border: 1px solid var(--c-gray-300);
  border-radius: var(--radius-lg);
}
.bq-garde p { margin: 0; }
.bq-garde-titre { font-weight: 700; font-size: 1.02rem; }
.bq-garde-texte { margin-top: .3rem !important; font-size: .92rem; color: var(--c-muted); line-height: 1.5; }
.bq-garde-saisie { display: flex; gap: .5rem; margin-top: .8rem; flex-wrap: wrap; }
.bq-garde-saisie input {
  flex: 1 1 14rem; min-width: 0; padding: .6rem .75rem; font-size: .95rem;
  border: 1px solid var(--c-gray-300); border-radius: var(--radius); background: #fff;
}
.bq-garde-saisie button {
  padding: .6rem 1.1rem; font-size: .95rem; font-weight: 600; cursor: pointer;
  color: #fff; background: var(--c-black); border: 0; border-radius: var(--radius);
}
.bq-garde-saisie button:hover { background: var(--c-cyan); }
.bq-garde-case {
  display: flex; align-items: flex-start; gap: .5rem; margin-top: .7rem;
  font-size: .88rem; color: var(--c-muted); cursor: pointer;
}
/* ⚠️ `width:auto` : la feuille du site pose `width:100%` sur tout `input`, ce
   qui donnait une case à cocher de 484 px — le texte partait à l'autre bout de
   la ligne. Constaté à l'écran, pas dans le code. */
.bq-garde-case input { margin-top: .15rem; width: auto; flex: 0 0 auto; }
.bq-garde-note { margin-top: .7rem !important; font-size: .8rem; color: var(--c-gray-600); line-height: 1.45; }
.bq-garde-ok { background: #fff; border-color: var(--c-cyan); }
.bq-garde-choix { margin: 0 0 1.2rem; }
.bq-garde-actions { display: flex; align-items: center; gap: .8rem; margin-top: .8rem !important;

/* ⭐ 11/10/2026, demandé par Julien : le bloc "garder son panier" passait
   inaperçu — trop proche visuellement d'un simple encadré gris. Celui-ci
   porte l'offre (un code immédiat), donc il doit se voir comme une offre. */
.bq-garde-offre {
  background: #EAF7FD; border: 1px solid var(--c-cyan); border-width: 2px;
}
.bq-garde-offre .bq-garde-titre { font-size: 1.1rem; }
.bq-garde-promo {
  margin-top: .7rem !important; padding: .7rem .9rem;
  background: #fff; border: 1px dashed var(--c-cyan); border-radius: var(--radius);
  font-size: .92rem; line-height: 1.5;
}
.bq-garde-promo code {
  font-weight: 700; font-size: 1rem; letter-spacing: .03em;
  background: var(--c-gray-50); padding: .1rem .4rem; border-radius: .3rem;
}
  flex-wrap: wrap; font-size: .9rem; color: var(--c-muted); }

/* ═══════════════════════ popup du code de bienvenue (25/09/2026) ═══════════
   ⭐⭐ Demandé par Julien : un rappel plus visible que le bandeau, au panier.
   Même offre, même destination (`/bienvenue.php`), juste un autre habillage —
   voir `vues/panier.php`. */
.bq-popup-fond {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 90;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.bq-popup-fond[hidden] { display: none !important; }
.bq-popup {
  position: relative; background: #fff; border-radius: var(--radius-lg);
  max-width: 380px; width: 100%; padding: 2rem 1.6rem 1.6rem; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.bq-popup-fermer {
  position: absolute; right: .6rem; top: .5rem; background: none; border: 0;
  font-size: 1.5rem; line-height: 1; color: var(--c-muted); cursor: pointer; padding: .3rem .5rem;
}
.bq-popup-fermer:hover { color: var(--c-black); }
.bq-popup-titre { font-family: var(--font-head); font-size: 1.3rem; margin: 0 0 .6rem; }
.bq-popup-texte { font-size: .92rem; color: var(--c-muted); line-height: 1.5; margin: 0 0 1.2rem; }
.bq-popup-hors { display: block; margin-top: .3rem; font-size: .85em; opacity: .8; }
.bq-popup-saisie { display: flex; flex-direction: column; gap: .6rem; }
.bq-popup-saisie input {
  padding: .7rem .8rem; font-size: 1rem; border: 1px solid var(--c-gray-300);
  border-radius: var(--radius); text-align: center;
}
.bq-popup-saisie button {
  padding: .7rem 1rem; font-size: .95rem; font-weight: 700; color: #fff;
  background: var(--c-black); border: 0; border-radius: var(--radius); cursor: pointer;
}
.bq-popup-saisie button:hover { background: var(--c-cyan); }
.bq-popup-mention { margin: 1rem 0 0; font-size: .76rem; color: var(--c-gray-600); }

/* ═══════════════ SAV (25/09/2026) : demande après-vente depuis une commande ═══════════════ */
.bq-sav-statut { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  border-radius: 999px; padding: .16rem .7rem; display: inline-block; }
.bq-sav-statut.nouveau  { background: #FDECEF; color: #9B1B36; }
.bq-sav-statut.en_cours { background: #EAF7FD; color: #06607F; }
.bq-sav-statut.resolu   { background: #E4F4E9; color: #1B6B37; }
.bq-sav-statut.ferme    { background: var(--c-gray-100); color: var(--c-muted); }
.bq-sav-ticket { border: 1px solid var(--c-gray-100); border-radius: var(--radius-lg); padding: 1rem 1.2rem; margin: 0 0 1.2rem; }
.bq-sav-fil { display: flex; flex-direction: column; gap: .7rem; margin: .9rem 0; }
.bq-sav-msg { max-width: 85%; padding: .6rem .8rem; border-radius: 10px; font-size: .9rem; line-height: 1.5; white-space: pre-line; }
.bq-sav-msg.client  { align-self: flex-start; background: var(--c-gray-100); }
.bq-sav-msg.atelier { align-self: flex-end; background: #EAF7FD; }
.bq-sav-msg-meta { font-size: .74rem; color: var(--c-muted); margin: 0 0 .25rem; }
@media (max-width: 640px) { .bq-sav-msg { max-width: 100%; } }

/* ═══════════════ Espace client : mise en page à colonne (25/09/2026) ═══════════════
   Demandé par Julien : « faire la page d'espace client plus jolie », sur le
   modèle d'un tableau de bord avec un menu latéral plutôt qu'une suite
   d'onglets en haut de page. Remplace `.bq-onglets` sur les pages du compte —
   cette dernière reste utilisée ailleurs (codes promo de l'atelier, etc.). */
.bq-espace { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 1.8rem; align-items: start; }
.bq-side { position: sticky; top: calc(var(--bq-barres, var(--header-h)) + 1rem); background: #fff;
  border: 1px solid var(--c-gray-100); border-radius: var(--radius-lg); padding: .9rem;
  display: flex; flex-direction: column; gap: .1rem; }
.bq-side-tableau { display: flex; align-items: center; gap: .55rem; background: var(--c-black); color: #fff;
  font-weight: 700; font-size: .92rem; padding: .7rem .85rem; border-radius: var(--radius); margin-bottom: .7rem; }
.bq-side-tableau:hover, .bq-side-tableau.actif { background: #0089BC; color: #fff; }
.bq-side-groupe { font-size: .72rem; font-weight: 700; letter-spacing: .08em; color: var(--c-muted);
  margin: .9rem .6rem .3rem; }
.bq-side-groupe:first-of-type { margin-top: .1rem; }
.bq-side-nav { display: flex; flex-direction: column; gap: .05rem; }
.bq-side-lien { display: flex; align-items: center; gap: .6rem; padding: .55rem .6rem; border-radius: var(--radius);
  color: var(--c-text); font-size: .89rem; font-weight: 500; }
.bq-side-lien:hover { background: var(--c-gray-50); }
.bq-side-lien.actif { background: #E9F6FD; color: #05506E; font-weight: 700; }
.bq-side-lien.actif .bq-side-picto { color: #05506E; }
.bq-side-picto { flex: none; color: var(--c-muted); }
.bq-side-sortie { display: flex; align-items: center; gap: .6rem; padding: .6rem; margin-top: .9rem;
  border-top: 1px solid var(--c-gray-100); color: var(--c-muted); font-size: .87rem; font-weight: 500; }
.bq-side-sortie:hover { color: #D33; }

@media (max-width: 900px) {
  .bq-espace { grid-template-columns: 1fr; }
  .bq-side { position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .7rem; }
  .bq-side-tableau { margin-bottom: 0; }
  .bq-side-groupe { display: none; }
  .bq-side-nav { flex-direction: row; flex-wrap: wrap; }
  .bq-side-sortie { margin: 0 0 0 auto; padding: .55rem .7rem; border-top: 0; }
}

/* La bannière d'accueil du tableau de bord, avec l'initiale du prénom. */
.bq-accueil { display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--c-gray-100); border-radius: var(--radius-lg);
  padding: 1.5rem 1.7rem; margin-bottom: 1.4rem; position: relative; overflow: hidden; }
.bq-accueil::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--c-cyan) 0 33%, var(--c-magenta) 33% 66%, var(--c-yellow) 66% 100%); }
.bq-accueil-txt h2 { font-family: var(--font-head); font-size: 1.7rem; margin: 0 0 .3rem; }
.bq-accueil-txt p { margin: 0; color: var(--c-muted); font-size: .92rem; }
.bq-accueil-meta { display: flex; gap: 1.1rem; flex-wrap: wrap; margin-top: .8rem; font-size: .84rem; color: var(--c-muted); }
.bq-accueil-meta span { display: inline-flex; align-items: center; gap: .4rem; }
.bq-avatar { flex: none; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-head); font-size: 1.35rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--c-cyan), var(--c-magenta)); }

/* Les alertes du tableau de bord, redessinées en cartes de notification. */
.bq-notifs { display: flex; flex-direction: column; gap: .6rem; margin: 0 0 1.4rem; }
.bq-notif { display: flex; gap: .8rem; align-items: flex-start; background: #fff; border: 1px solid var(--c-gray-100);
  border-left: 3px solid var(--c-cyan); border-radius: var(--radius); padding: .85rem 1rem; font-size: .9rem; }
.bq-notif a { font-weight: 700; }
.bq-notif-icone { flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: #E9F6FD;
  color: #05506E; display: grid; place-items: center; }

/* Les cartes-chiffres du tableau de bord : un repère de couleur par carte. */
.bq-tb-case { border-top: 3px solid var(--c-cyan); }
.bq-tb-case:nth-child(2) { border-top-color: var(--c-magenta); }
.bq-tb-case:nth-child(3) { border-top-color: var(--c-yellow); }
.bq-tb-case:nth-child(4) { border-top-color: var(--c-black); }

/* ═══════════════ Carte « Revendeur / grand compte » sur le tableau de bord
   (25/09/2026), demandé par Julien. ═══════════════ */
.bq-carte-revendeur { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  flex-wrap: wrap; background: var(--c-black); color: #fff; border-radius: var(--radius-lg);
  padding: 1.2rem 1.5rem; margin-bottom: 1.4rem; }
.bq-carte-revendeur-titre { font-family: var(--font-head); font-size: 1.25rem; margin: 0 0 .2rem; }
.bq-carte-revendeur-txt p:last-child { margin: 0; color: #d8d8d8; font-size: .92rem; }
.bq-carte-revendeur .btn { flex: none; white-space: nowrap; }

/* Palier de remise fidélité atteint, dans le tableau du programme revendeur (26/09/2026). */
.bq-ligne-active { background: #E4F4E9; }
.bq-ligne-active th, .bq-ligne-active td { color: #1B6B37; font-weight: 700; }

/* ⭐⭐ 03/10/2026, demandé par Julien : le bandeau fixe du bas, au panier et à
   la commande — remplace le cadre de droite. Reprend le repère visuel d'un
   concurrent (total + bouton toujours visibles), avec le code promo ajouté
   dans la barre (demandé explicitement), et le détail des prix (remise,
   TVA, expédition) replié derrière « Voir le détail » pour rester fin. */
.bq-barre-fixe { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  background: #fff; border-top: 1px solid var(--c-gray-300); box-shadow: 0 -8px 24px rgba(0,0,0,.1); }
/* ⚠️ Le bandeau est FIXE : il flotte au-dessus du bas de page, donc rien ne
   lui réserve de place. Sans cette marge, son dernier geste (Vider le
   panier / mentions de paiement) se retrouverait caché dessous. */
.bq-panier, .bq-tunnel { padding-bottom: 6.5rem; }
.bq-barre-detail { max-width: var(--container); margin: 0 auto; padding: .8rem var(--marge-conteneur, 1rem) 0; }
.bq-barre-detail div { display: flex; justify-content: space-between; padding: .3rem 0; font-size: .9rem; }
.bq-barre-detail .bq-recap-total { border-top: 1px solid var(--c-gray-200, #e5e5e5); margin-top: .3rem; padding-top: .55rem; font-weight: 700; font-size: 1rem; }
.bq-barre-contenu { max-width: var(--container); margin: 0 auto; padding: .7rem var(--marge-conteneur, 1rem);
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.bq-barre-franco { flex: 1 1 160px; margin: 0; font-size: .82rem; color: var(--c-muted); line-height: 1.3; }
.bq-barre-franco strong { color: var(--c-text); white-space: nowrap; }
.bq-barre-promo { flex: 0 1 220px; display: flex; gap: .4rem; }
.bq-barre-promo form { display: flex; gap: .4rem; flex: 1; }
.bq-barre-promo input[type="text"] { flex: 1 1 auto; min-width: 0; padding: .5rem .65rem;
  border: 1px solid var(--c-gray-300); border-radius: var(--radius); font-size: .85rem; }
.bq-barre-promo button { flex: none; padding: .5rem .8rem; border: 1px solid var(--c-gray-300);
  border-radius: var(--radius); background: #fff; font-weight: 600; font-size: .85rem; cursor: pointer; }
.bq-barre-promo button:hover { background: var(--c-gray-100); }
.bq-barre-promo-actif { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem;
  background: #ecfdf5; border-radius: var(--radius); padding: .4rem .6rem; white-space: nowrap; }
.bq-barre-promo-actif button { background: none; border: 0; padding: 0; color: var(--c-muted);
  text-decoration: underline; font-size: .8rem; cursor: pointer; }
.bq-barre-total { flex: none; background: none; border: 0; padding: 0; cursor: pointer; text-align: right;
  display: grid; justify-items: end; line-height: 1.2; }
.bq-barre-total strong { font-family: var(--font-head); font-size: 1.3rem; }
.bq-barre-total-unite { font-size: .75rem; font-weight: 400; color: var(--c-muted); }
.bq-barre-total-ttc { font-size: .78rem; color: var(--c-cyan); text-decoration: underline; white-space: nowrap; }
.bq-barre-cta { flex: none; white-space: nowrap; }
@media (max-width: 700px) {
  .bq-barre-contenu { gap: .6rem; }
  .bq-barre-franco { display: none; }
  .bq-barre-promo { flex-basis: 140px; }
  .bq-barre-cta { padding: .7rem 1.1rem; font-size: .9rem; }
}

/* ⭐ 11/10/2026, demandé par Julien : le bloc « Votre commande » replié par
   défaut sur la page de paiement — voir vues/commande.php. */
.bq-commande-repliable summary {
  cursor: pointer; list-style: none; font-weight: 600; color: var(--c-black);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .4rem 0; font-size: .96rem;
}
.bq-commande-repliable summary::-webkit-details-marker { display: none; }
.bq-commande-repliable summary::after { content: '+'; font-size: 1.3rem; line-height: 1; color: var(--c-muted); flex: none; }
.bq-commande-repliable[open] summary::after { content: '–'; }
.bq-commande-repliable[open] summary { border-bottom: 1px solid var(--c-gray-100); margin-bottom: .8rem; padding-bottom: .8rem; }

/* ⭐ 11/10/2026, demandé par Julien : stepper visuel du tunnel d'achat,
   façon Realisaprint — voir vues/_stepper-commande.php. */
.bq-stepper { display: flex; gap: 1.2rem; margin: 1.4rem 0 1.8rem; }
.bq-stepper-etape { flex: 1 1 0; min-width: 0; }
.bq-stepper-nom {
  display: block; font-size: .86rem; font-weight: 600; color: var(--c-muted);
  margin-bottom: .5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bq-stepper-etape.is-active .bq-stepper-nom { color: var(--c-black); }
.bq-stepper-barre { display: block; height: 4px; border-radius: 99px; background: var(--c-gray-100); }
.bq-stepper-etape.is-acquise .bq-stepper-barre { background: var(--c-cyan); }
@media (max-width: 640px) {
  .bq-stepper { gap: .5rem; }
  .bq-stepper-nom { font-size: .72rem; }
}

/* ⭐ 12/10/2026, demandé par Julien : bouton bascule prix total/unitaire
   sur la grille de prix — voir vues/produit.php. */
.ex-toggle-unitaire {
  display: flex; align-items: center; gap: .5rem; margin: .6rem 0 .8rem;
  font-size: .85rem; color: var(--c-muted); cursor: pointer; user-select: none;
}
.ex-toggle-label-gauche, .ex-toggle-label-droite { transition: color .15s; }
.ex-toggle-piste {
  position: relative; display: inline-block; width: 40px; height: 22px;
  background: var(--c-gray-300); border-radius: 99px; flex: none; transition: background .15s;
}
.ex-toggle-piste input {
  position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.ex-toggle-bille {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  background: #fff; border-radius: 50%; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.ex-toggle-piste input:checked ~ .ex-toggle-bille { transform: translateX(18px); }
.ex-toggle-piste input:checked ~ .ex-toggle-bille,
.ex-toggle-unitaire:has(input:checked) .ex-toggle-piste { background: var(--c-cyan); }
.ex-toggle-unitaire:has(input:checked) .ex-toggle-label-droite { color: var(--c-black); font-weight: 600; }
.ex-toggle-unitaire:not(:has(input:checked)) .ex-toggle-label-gauche { color: var(--c-black); font-weight: 600; }