/* Genere par construire_module.py. Ne pas modifier ici : corriger la
   maquette puis relancer le script. Tout est enferme sous #btt-club pour
   ne pas repeindre le reste de la boutique. */

#btt-club{
  --accent:#2fb5d2; --accent-h:#2592a9; --accent-bg:#fbfeff;
  --txt:#414141; --gris:#878787; --gris-c:#acaaa6;
  --bd:#ebebeb; --fond:#f6f6f6; --noir:#000;
  --ok:#2e8b57;
  --shadow:2px 2px 11px 0 rgba(0,0,0,.1);
  --w:1140px;
  /* Une couleur par textile, pour repérer en un coup d'œil dans quelle étape
     on se trouve : polo bleu (couleur d'accent d'origine, inchangée), veste
     rose, t-shirt vert, accessoire orange. --accent/--accent-h/--accent-bg
     sont redéfinies en ligne sur la case à cocher de l'étape 1 et sur le
     bloc racine de chaque étape « le flocage »/« choisissez votre... » : tout
     ce qui, dans la feuille de style, référence var(--accent) en hérite
     automatiquement dans ce sous-arbre, sans règle dupliquée par couleur. */
  --c-polo:#2fb5d2;     --c-polo-h:#2592a9;     --c-polo-bg:#fbfeff;
  --c-veste:#d6336c;    --c-veste-h:#ad2856;    --c-veste-bg:#fdf1f5;
  --c-ts:#2f9e44;       --c-ts-h:#237a34;       --c-ts-bg:#f1faf2;
  --c-acc:#d9720f;      --c-acc-h:#b25c0c;      --c-acc-bg:#fdf4e9;
}
#btt-club, #btt-club *{box-sizing:border-box}
#btt-club [hidden]{display:none!important}
#btt-club{margin:0;font-family:"Noto Sans",sans-serif;font-size:16px;line-height:1.45;color:var(--txt);background:#fff;text-align:left;-webkit-font-smoothing:antialiased}
#btt-club img{max-width:100%;display:block;vertical-align:baseline}
#btt-club a{color:var(--txt);text-decoration:none}
/* Ce que le navigateur laissait par defaut et que le theme du site, lui,
   impose : sans ces declarations, la page rend differemment une fois posee
   dans le gabarit PrestaShop. Mesure faite avec module/_essai-theme.html :
   le theme justifiait tout le texte, alignait les libelles a droite, serrait
   l'interligne des titres et imposait sa propre taille aux boutons.
   Les champs de saisie et les boutons prennent desormais la police de la page
   au lieu de l'Arial 13 px des reglages d'usine du navigateur : c'est la seule
   difference volontaire avec la premiere maquette, et elle va dans le bon
   sens, les champs etaient les seuls elements a jurer. */
#btt-club button, #btt-club input, #btt-club select, #btt-club textarea{font:inherit;line-height:normal}
#btt-club label{text-align:left;font-size:inherit;font-weight:inherit;display:inline;color:inherit}
#btt-club h1, #btt-club h2, #btt-club h3, #btt-club h4, #btt-club h5, #btt-club h6{line-height:1.45}
#btt-club h1{line-height:1.12}
#btt-club a:hover{color:var(--accent)}
#btt-club .wrap{max-width:var(--w);margin:0 auto;padding:0 15px}

/* ---------- entête site (reproduction) ---------- */
#btt-club .topbar{border-bottom:1px solid var(--bd);font-size:13px;color:var(--gris-c)}
#btt-club .topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:38px}
#btt-club .topbar .right{display:flex;gap:22px;align-items:center}
#btt-club .hdr .wrap{display:flex;align-items:center;gap:26px;padding-top:14px;padding-bottom:14px}
#btt-club .hdr img{width:81px;height:50px;object-fit:contain}
#btt-club .nav{display:flex;gap:20px;flex-wrap:wrap;font-size:15px;font-weight:100;text-transform:uppercase;letter-spacing:.2px}
#btt-club .nav .on{color:var(--accent);font-weight:400}
#btt-club .search{margin-left:auto;border:1px solid var(--bd);background:var(--fond);padding:7px 12px;font-size:13px;color:var(--gris-c);min-width:190px}
#btt-club .hdr{border-bottom:1px solid var(--bd)}

/* ---------- titres ---------- */
#btt-club .bc{font-size:13px;color:var(--gris);padding:14px 0}
#btt-club .bc a{color:var(--gris)}
#btt-club h1{font-size:38px;font-weight:600;text-transform:uppercase;color:var(--noir);margin:0 0 12px;letter-spacing:-.3px;line-height:1.12}
#btt-club h2{font-size:26px;font-weight:600;text-transform:uppercase;color:var(--noir);margin:0 0 6px}
#btt-club h3{font-size:17px;font-weight:600;color:var(--noir);margin:0 0 6px}
#btt-club .chapo{font-size:17px;color:var(--gris);max-width:760px;margin:0 0 6px}
#btt-club .sect{padding:44px 0;border-top:1px solid var(--bd)}
#btt-club .sect-hd{margin-bottom:26px}
#btt-club .sect-hd p{color:var(--gris);margin:6px 0 0;max-width:760px;font-size:16px;line-height:1.45}

/* ---------- hero et question de quantité ---------- */
#btt-club .hero{padding-top:6px}
#btt-club .hero h1{font-size:42px;margin-bottom:10px}
#btt-club .hero .chapo{font-size:17px;max-width:640px;margin-bottom:24px}
/* ---------- étape 2 : quels textiles, choix multiple ---------- */
/* auto-fit plutot que 4 colonnes fixes : les cartes se replacent selon la
   place reellement disponible, pas selon la largeur de l'ecran. Les deux
   media queries plus bas restent maitresses sur petit ecran. */
#btt-club .type-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
#btt-club .type-card{position:relative;display:block;border:1px solid var(--bd);background:#fff;cursor:pointer;
  padding:16px 16px 16px 44px;transition:border-color .15s,box-shadow .15s}
#btt-club .type-card:hover{border-color:var(--gris-c)}
#btt-club .type-card.on{border-width:2px;border-color:var(--accent);box-shadow:var(--shadow);background:var(--accent-bg)}
#btt-club .type-card input{position:absolute;left:16px;top:18px;width:17px;height:17px;accent-color:var(--accent)}
#btt-club .type-card b{display:block;font-size:15px;color:var(--noir);margin-bottom:4px}
#btt-club .type-card span{display:block;font-size:12.5px;color:var(--gris);line-height:1.4}
@media (max-width:900px){ #btt-club .type-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ #btt-club .type-grid{grid-template-columns:1fr} }

/* ---------- étapes 3/4 répétées : flocage puis modèle, par textile coché ---------- */
#btt-club .bloc-suite{margin-bottom:34px}
#btt-club .bloc-suite .step-hd .hint{margin-left:0}
/* le texte en gras de l'encadré d'intro (ex. « Le logo au cœur... sont
   compris ») suit la couleur du textile, comme le reste de --accent dans ce
   bloc ; .note b ailleurs sur le site reste neutre (var(--noir)). */
#btt-club .bloc-suite .note b{color:var(--accent)}
/* bouton secondaire générique, utilisable en dehors d'une carte */
#btt-club .btn.sec{display:inline-block;width:auto;background:#fff;color:var(--gris);box-shadow:none;
  border:1px solid var(--bd);font-size:13px;font-weight:600;text-transform:none;padding:9px 16px;margin-top:0}
#btt-club .btn.sec:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- formules ---------- */
/* complément accessoire */
#btt-club .compl{display:flex;align-items:center;gap:18px;border:1px solid var(--bd);background:#fff;padding:14px 18px;margin-top:18px}
#btt-club .compl img{width:56px;height:56px;object-fit:contain;background:var(--fond);mix-blend-mode:multiply;flex:0 0 56px}
#btt-club .compl .t{flex:1}
#btt-club .compl b{display:block;font-size:14.5px;color:var(--noir)}
#btt-club .compl span{font-size:12.5px;color:var(--gris)}
#btt-club .compl .pz{font-weight:600;color:var(--accent);white-space:nowrap;font-size:15px}
#btt-club .compl input{width:17px;height:17px;accent-color:var(--accent)}

/* Toutes les vues du produit affichées en même temps (plus de bascule
   Face/Dos par bouton), avec les mêmes calques de flocage que sur la page
   principale. Cases agrandies (modal élargi à 1400px, aucun espace ni
   bordure perdus entre elles : gap:0, pas de padding, une seule bordure
   extérieure sur .fiche-vues) pour que les 4 photos collées ne forment
   plus qu'un seul bloc visuel, comme demandé, plutôt que 4 vignettes
   séparées. 4 colonnes (Face, Dos, Bras droit, Bras gauche) quand le modèle
   a une vue Côté fournisseur, sinon 2 (accessoires, ou modèle sans vue Côté
   comme le t-shirt Léger bio) via .n2.
   Les 4 vues sont zoomées (FICHE_ZOOM/BRAS_ZOOM dans ficheVuesHtml, plus
   fort sur Bras droit/gauche) pour ronger le vide gris tout autour du
   vêtement ; leurs colonnes sont réduites d'autant (16fr 16fr 13fr 13fr,
   soit très exactement 1/FICHE_ZOOM et 1/BRAS_ZOOM les unes des autres)
   pour que ce rognage libère vraiment de la place au lieu de laisser un
   vide gris tout autour.
   Alignement en hauteur des 4 vues : les cases Face/Dos/Bras (.vue) n'ont
   plus d'aspect-ratio propre — chacune s'étire par défaut à la hauteur de
   la rangée, celle-ci étant naturellement dictée par la plus large des 4
   colonnes (Face/Dos). Le contenu de chaque case (.vue-zoom, lui à ratio 3/4
   selon la largeur propre à SA colonne, donc plus petit pour Bras) est
   centré verticalement dedans (display:flex;align-items:center) AVANT
   d'être zoomé : zoomer un bloc déjà centré dans sa case l'étend
   symétriquement vers le haut ET le bas et finit par remplir exactement la
   même hauteur que les autres cases (le calage en haut utilisé avant cette
   retouche étendait au contraire le zoom deux fois plus vers le haut, hors
   cadre et perdu, que vers le bas, laissant un vide gris en dessous). Les
   cases sans .vue (accessoires, modèle sans photo) gardent l'ancien
   comportement (aspect-ratio:3/4 direct), inchangé. */
/* --k-bras : compense la case des bras, plus etroite que celle de Face/Dos
   (13fr contre 16fr), pour que le vetement y ait la meme hauteur. Remis a 1
   des que la grille repasse a des colonnes egales. */
/* transform sur .vue-zoom crée un nouveau contexte d'empilement : le
   mix-blend-mode:multiply de l'image qu'il contient ne se mélangerait sinon
   qu'avec le fond DE CE contexte (transparent), plus avec le gris clair de
   la case parente — d'où un fond blanc (celui, brut, de la photo) au lieu de
   gris. Lui redonner le même fond (var(--fond)) localement restaure le rendu
   gris attendu. */
/* Étiquettes Face/Dos/Bras droit/Bras gauche : texte gris simple, sans le
   fond/cadre sombre utilisé sur la page principale (.modrow-lib) — demandé
   explicitement pour la fiche, qui n'a pas ce même besoin de contraste
   puisque les vues y sont beaucoup plus grandes. */
/* Description/puces/sélecteur de flocage, en 3 colonnes sur une seule ligne
   plutôt qu'empilés (le reste occupait beaucoup de hauteur verticale sous
   les vues, redondant avec des images déjà grandes). 3e colonne : le
   sélecteur de flocage (grille .marks, cf. blocFlocage) à la place du
   tableau de prix par tranche — sur une seule ligne défilable horizontalement
   (demandé), la grille par défaut (6 colonnes, qui repasse à la ligne) étant
   prévue pour la pleine largeur de la page, pas pour cette colonne étroite. */
/* Puces de tailles sur leur propre ligne, sous les puces de matière/
   grammage, elles aussi toutes sur une seule ligne (défilable si trop
   nombreuses pour la largeur de la colonne, plutôt que de repasser à la
   ligne). */
/* Puces de couleur légèrement réduites (24px, contre 30px par défaut) pour
   cette colonne étroite. */
/* Vignettes de flocage rétrécies : la case est réduite (128px → 92px) et
   l'icône, plutôt que de simplement rapetisser avec elle (illisible), passe
   de object-fit:contain à cover à largeur pleine — elle est rognée à gauche
   et à droite pour continuer à remplir toute la largeur de la case réduite. */
/* ---------- parcours par étapes ---------- */
#btt-club .et{border:1px solid var(--bd);margin-bottom:14px;background:#fff}
#btt-club .et.on{border-color:var(--accent)}
#btt-club .card .voir{margin-top:6px;font-size:12.5px;padding:8px;box-shadow:none;border:1px solid var(--bd);
  background:#fff;color:var(--gris);width:100%;text-transform:none;letter-spacing:0}
#btt-club .card .voir:hover{border-color:var(--accent);color:var(--accent);background:#fff}
/* défilement des coloris sur la vitrine */
/* bandeau de tranche */
/* lignes de commande */
/* sélecteur de famille puis de modèle */
/* trois tiers égaux : les deux photos (accolées, une seule colonne 2fr
   pour la paire) et le reste (une seule colonne, tout empilé) */
/* deux photos par produit, collées l'une à l'autre : face+dos par défaut,
   bras droit+gauche en variante (le bras gauche est le bras droit reflété,
   une seule vraie photo suffit). Les flèches passent de l'une à l'autre paire.
   `align-items:start` sur .modrow (ci-dessus) + pas de height:100% ici :
   sans ça, quand la colonne de droite grandit (sous-total qui apparaît,
   champ 3XL qui apparaît), la grille étirait la case photo à la même
   hauteur — et comme cette case n'a que sa largeur de fixée (aspect-ratio
   3/4), l'étirer changeait aussi sa largeur, donc la taille et la position
   réelles de la photo, sans que les calques de flocage (positionnés en %
   de cette même case) ne suivent. La case photo garde maintenant toujours
   la même taille, quoi qu'il se passe dans la colonne de droite. */
/* le reste : nom, description, coloris puis quantité, tout dans une seule
   colonne étroite, donc des puces de couleur et des espacements resserrés */
/* 24 px minimum : choisir sa couleur est une etape obligatoire du parcours,
   et une pastille de 16 px ne se vise pas au doigt sur un telephone. */
/* Bouton voyant plutôt qu'un lien texte discret : ouvre la fiche produit
   agrandie (vues + prix), le zoom est ce que ce bouton met le plus en avant
   pour le client. */
/* coloris */
/* Le bandeau bas garde ses libelles tels quels : le theme du site met un
   `white-space:nowrap` sur ces elements, qui les empecherait de passer a la
   ligne sur un ecran etroit. */
#btt-club .bar .lg, #btt-club .bar .sm{white-space:normal}

/* Le piege a robots doit sortir du flux sans etre « display:none », que
   certains robots savent reconnaitre et ignorer. */
#btt-club .piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#btt-club .consent{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--gris);line-height:1.45;cursor:pointer}
#btt-club .consent input{width:16px;height:16px;margin:2px 0 0;accent-color:var(--accent);flex:0 0 auto}
#btt-club .consent a{color:var(--accent);text-decoration:underline}
#btt-club .erreur-form{margin-top:12px;padding:11px 14px;border:1px solid #e4b3b3;background:#fdf4f4;color:#a33;font-size:13.5px;border-radius:2px}
#btt-club .btn[disabled]{opacity:.55;cursor:default}

/* ---------- appel au devis et fenêtre ---------- */
#btt-club .devis-appel{text-align:center;padding:12px 0}
#btt-club .devis-appel h2{font-size:26px;margin-bottom:8px}
#btt-club .devis-appel p{font-size:14.5px;color:var(--gris);max-width:560px;margin:0 auto 18px}
#btt-club .devis-appel .btn{max-width:300px;margin:0 auto;font-size:16px;padding:15px 20px}
#btt-club .mentions{font-size:12.5px;color:var(--gris);line-height:1.5;margin:18px 0 0;
  padding:11px 13px;background:var(--fond);border-left:3px solid var(--bd)}
#btt-club .mentions b{color:var(--noir)}
#btt-club .devis-tel{font-size:13.5px;color:var(--gris);margin-top:16px!important}
#btt-club .devis-tel b{color:var(--noir)}
#btt-club .modale{position:fixed;inset:0;background:rgba(20,20,20,.72);z-index:220;display:flex;
  align-items:center;justify-content:center;padding:24px;overflow:auto}
#btt-club .mod-box{background:#fff;max-width:880px;width:100%;position:relative;max-height:92vh;overflow:auto;padding:28px}
#btt-club .mod-hd{margin-bottom:20px;padding-right:40px}
#btt-club .mod-hd h3{font-size:22px;margin-bottom:4px}
#btt-club .mod-hd p{font-size:13.5px;color:var(--gris);margin:0}
#btt-club .mod-box .devis-cols{gap:28px}
#btt-club .mod-box .form-side{background:var(--fond)}
@media (max-width:700px){ #btt-club .mod-box{padding:20px} }

/* ---------- fiche produit ---------- */
#btt-club .fiche{position:fixed;inset:0;background:rgba(20,20,20,.72);z-index:210;display:flex;
  align-items:center;justify-content:center;padding:24px;overflow:auto}
#btt-club .fiche-box{background:#fff;max-width:1400px;width:100%;position:relative;max-height:90vh;overflow:auto}
#btt-club .fiche-x{position:absolute;top:8px;right:12px;background:none;border:0;font-size:30px;line-height:1;
  color:var(--gris);cursor:pointer;z-index:2}
#btt-club .fiche-x:hover{color:var(--noir)}
/* Toutes les vues du produit affichées en même temps (plus de bascule
   Face/Dos par bouton), avec les mêmes calques de flocage que sur la page
   principale. Cases agrandies (modal élargi à 1400px, aucun espace ni
   bordure perdus entre elles : gap:0, pas de padding, une seule bordure
   extérieure sur .fiche-vues) pour que les 4 photos collées ne forment
   plus qu'un seul bloc visuel, comme demandé, plutôt que 4 vignettes
   séparées. 4 colonnes (Face, Dos, Bras droit, Bras gauche) quand le modèle
   a une vue Côté fournisseur, sinon 2 (accessoires, ou modèle sans vue Côté
   comme le t-shirt Léger bio) via .n2.
   Les 4 vues sont zoomées (FICHE_ZOOM/BRAS_ZOOM dans ficheVuesHtml, plus
   fort sur Bras droit/gauche) pour ronger le vide gris tout autour du
   vêtement ; leurs colonnes sont réduites d'autant (16fr 16fr 13fr 13fr,
   soit très exactement 1/FICHE_ZOOM et 1/BRAS_ZOOM les unes des autres)
   pour que ce rognage libère vraiment de la place au lieu de laisser un
   vide gris tout autour.
   Alignement en hauteur des 4 vues : les cases Face/Dos/Bras (.vue) n'ont
   plus d'aspect-ratio propre — chacune s'étire par défaut à la hauteur de
   la rangée, celle-ci étant naturellement dictée par la plus large des 4
   colonnes (Face/Dos). Le contenu de chaque case (.vue-zoom, lui à ratio 3/4
   selon la largeur propre à SA colonne, donc plus petit pour Bras) est
   centré verticalement dedans (display:flex;align-items:center) AVANT
   d'être zoomé : zoomer un bloc déjà centré dans sa case l'étend
   symétriquement vers le haut ET le bas et finit par remplir exactement la
   même hauteur que les autres cases (le calage en haut utilisé avant cette
   retouche étendait au contraire le zoom deux fois plus vers le haut, hors
   cadre et perdu, que vers le bas, laissant un vide gris en dessous). Les
   cases sans .vue (accessoires, modèle sans photo) gardent l'ancien
   comportement (aspect-ratio:3/4 direct), inchangé. */
/* --k-bras : compense la case des bras, plus etroite que celle de Face/Dos
   (13fr contre 16fr), pour que le vetement y ait la meme hauteur. Remis a 1
   des que la grille repasse a des colonnes egales. */
#btt-club .fiche-vues{display:grid;grid-template-columns:16fr 16fr 13fr 13fr;gap:0;padding:0;border:1px solid var(--bd);--k-bras:1.230769}
#btt-club .fiche-vues.n2{grid-template-columns:repeat(2,1fr);max-width:800px;margin:0 auto}
#btt-club .fiche-vues > div{position:relative;aspect-ratio:3/4;background:var(--fond);overflow:hidden}
#btt-club .fiche-vues > div.vue{aspect-ratio:auto;display:flex;align-items:center}
#btt-club .fiche-vues > div img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
#btt-club .fiche-vues > div img.miroir{transform:scaleX(-1)}
/* transform sur .vue-zoom crée un nouveau contexte d'empilement : le
   mix-blend-mode:multiply de l'image qu'il contient ne se mélangerait sinon
   qu'avec le fond DE CE contexte (transparent), plus avec le gris clair de
   la case parente — d'où un fond blanc (celui, brut, de la photo) au lieu de
   gris. Lui redonner le même fond (var(--fond)) localement restaure le rendu
   gris attendu. */
#btt-club .fiche-vues .vue-zoom{position:relative;width:100%;aspect-ratio:3/4;background:var(--fond)}
/* Étiquettes Face/Dos/Bras droit/Bras gauche : texte gris simple, sans le
   fond/cadre sombre utilisé sur la page principale (.modrow-lib) — demandé
   explicitement pour la fiche, qui n'a pas ce même besoin de contraste
   puisque les vues y sont beaucoup plus grandes. */
#btt-club .fiche-vues .modrow-lib{background:none;color:var(--gris);padding:0;font-weight:600}
/* Description/puces/sélecteur de flocage, en 3 colonnes sur une seule ligne
   plutôt qu'empilés (le reste occupait beaucoup de hauteur verticale sous
   les vues, redondant avec des images déjà grandes). 3e colonne : le
   sélecteur de flocage (grille .marks, cf. blocFlocage) à la place du
   tableau de prix par tranche — sur une seule ligne défilable horizontalement
   (demandé), la grille par défaut (6 colonnes, qui repasse à la ligne) étant
   prévue pour la pleine largeur de la page, pas pour cette colonne étroite. */
#btt-club .fiche-info{padding:20px 28px 28px;display:grid;grid-template-columns:minmax(142px,.713fr) minmax(86px,.432fr) minmax(320px,1.8fr);gap:26px;align-items:start}
#btt-club .fiche-info .tags{position:static;flex-direction:row;flex-wrap:wrap;margin-bottom:8px}
#btt-club .fiche-info h3{font-size:22px;margin-bottom:4px}
#btt-club .fiche-compo{font-size:14px;font-weight:600;color:var(--noir);margin:0 0 8px}
#btt-club .fiche-mat{font-size:12.5px;color:var(--gris-c);margin:0 0 10px}
/* Puces de tailles sur leur propre ligne, sous les puces de matière/
   grammage, elles aussi toutes sur une seule ligne (défilable si trop
   nombreuses pour la largeur de la colonne, plutôt que de repasser à la
   ligne). */
#btt-club .fiche-info .tags-tailles{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}
#btt-club .fiche-info .swatches{margin:0;align-content:flex-start}
/* Puces de couleur légèrement réduites (24px, contre 30px par défaut) pour
   cette colonne étroite. */
#btt-club .fiche-info .swatches .sw{width:24px;height:24px}
#btt-club .fiche-info .marks{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;padding-bottom:6px}
/* Vignettes de flocage rétrécies : la case est réduite (128px → 92px) et
   l'icône, plutôt que de simplement rapetisser avec elle (illisible), passe
   de object-fit:contain à cover à largeur pleine — elle est rognée à gauche
   et à droite pour continuer à remplir toute la largeur de la case réduite. */
#btt-club .fiche-info .marks .mark{flex:0 0 103px;padding:6px 4px 8px}
#btt-club .fiche-info .marks .mark img{width:100%;aspect-ratio:.85;object-fit:cover}
@media (max-width:900px){ #btt-club .fiche-info{grid-template-columns:1fr} #btt-club .fiche-info .swatches{margin-bottom:18px} }
@media (max-width:820px){ #btt-club .fiche-vues{grid-template-columns:repeat(2,1fr);--k-bras:1} }
@media (max-width:480px){ #btt-club .fiche-vues{grid-template-columns:1fr} #btt-club .fiche-info{padding:16px 20px 20px} }

/* ---------- marquage de démonstration sur les visuels ---------- */
#btt-club .ph{position:relative}
#btt-club .mk{position:absolute;pointer-events:none;opacity:.96}
/* ---------- couleurs du club ---------- */
#btt-club .coul{display:flex;gap:32px;align-items:center;border:1px solid var(--bd);background:var(--fond);padding:20px 22px;margin-top:18px;flex-wrap:wrap}
/* ---------- réalisations ---------- */
#btt-club .real{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
#btt-club .real figure{margin:0}
#btt-club .real img{width:100%;aspect-ratio:1;object-fit:cover;border:1px solid var(--bd)}
#btt-club .real figcaption{font-size:12px;color:var(--gris);margin-top:6px;line-height:1.35}

/* ---------- ce qui est compris ---------- */
#btt-club .compris{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
#btt-club .compris > div{border-top:3px solid var(--accent);padding-top:13px}
#btt-club .compris b{display:block;font-size:15px;color:var(--noir);margin-bottom:5px}
#btt-club .compris span{font-size:13.5px;color:var(--gris);line-height:1.45}

/* ---------- échantillon ---------- */
#btt-club .ech{background:var(--fond);border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);margin-top:44px}
#btt-club .ech .wrap{display:flex;gap:40px;align-items:center;padding-top:36px;padding-bottom:36px}
#btt-club .ech-txt{flex:1}
#btt-club .ech-txt .k{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.7px;color:var(--accent);margin:0 0 6px}
#btt-club .ech-txt h2{font-size:24px;margin-bottom:10px}
#btt-club .ech-txt p{font-size:14px;color:var(--gris);margin:0 0 8px;max-width:660px;line-height:1.5}
#btt-club .ech-cond{background:#fff;border-left:3px solid var(--accent);padding:10px 13px;font-size:13px!important;color:var(--txt)!important}
#btt-club .ech-cta{flex:0 0 210px;text-align:center;background:#fff;border:1px solid var(--bd);padding:20px}
#btt-club .ech-prix{display:block;font-size:34px;font-weight:600;color:var(--accent);line-height:1}
#btt-club .ech-sub{display:block;font-size:12px;color:var(--gris);margin-top:4px}

/* ---------- bandeau arguments ---------- */
#btt-club .arg{display:flex;gap:12px;align-items:flex-start}
#btt-club .arg .n{color:var(--accent);font-size:26px;font-weight:600;line-height:1}
#btt-club .arg b{display:block;font-weight:600;color:var(--noir);font-size:14px;text-transform:uppercase}
#btt-club .arg span{font-size:13px;color:var(--gris);display:block;margin-top:2px}

/* ---------- vitrine gamme ---------- */
#btt-club .card{border:1px solid var(--bd);background:#fff;position:relative;display:flex;flex-direction:column;transition:box-shadow .15s}
#btt-club .card:hover{box-shadow:var(--shadow)}
#btt-club .card .ph{background:var(--fond);aspect-ratio:2/3;overflow:hidden;position:relative}
#btt-club .card .ph img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
/* défilement des coloris sur la vitrine */
#btt-club .card .ph .arw{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:44px;border:0;
   background:rgba(255,255,255,.86);color:var(--txt);font-size:17px;line-height:1;cursor:pointer;
   display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s;z-index:2;padding:0}
#btt-club .card:hover .ph .arw{opacity:1}
#btt-club .card .ph .arw:hover{background:var(--accent);color:#fff}
#btt-club .card .ph .arw.l{left:0}
#btt-club .card .ph .arw.r{right:0}
@media (hover:none){ #btt-club .card .ph .arw{opacity:1} }
#btt-club .card .bd{padding:12px 13px 14px;display:flex;flex-direction:column;flex:1}
#btt-club .card h3{font-size:15px;margin:0 0 2px}
#btt-club .card .meta{font-size:12px;color:var(--gris);margin-bottom:8px}
#btt-club .card .argu{font-size:12.5px;color:var(--gris);line-height:1.4;margin:0 0 10px}
#btt-club .card .px{font-size:13px;color:var(--noir);font-weight:600;border-top:1px solid var(--bd);padding-top:9px;margin-top:auto}
#btt-club .card .px em{font-style:normal;font-size:19px;color:var(--accent)}
#btt-club .card .compo{font-size:12px;color:var(--noir);margin:0 0 8px;font-weight:600}
#btt-club .card .px{display:block}
#btt-club .card .px .lib{display:block;font-size:11px;color:var(--gris-c);text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px}
#btt-club .card .px i{font-style:normal}
#btt-club .card .ph.vide{display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,#f6f6f6,#f6f6f6 10px,#f0f0f0 10px,#f0f0f0 20px)}
#btt-club .card .ph.vide{flex-direction:column;gap:14px}
#btt-club .card .ph.vide span{font-size:12px;color:var(--gris-c);text-transform:uppercase;letter-spacing:.5px}
#btt-club .card .ph.vide i{width:74px;height:74px;border:1px solid rgba(0,0,0,.2);display:block}
#btt-club .badge{position:absolute;top:0;right:0;background:var(--accent);color:#fff;font-size:10.5px;font-weight:600;text-transform:uppercase;padding:4px 9px;letter-spacing:.4px;z-index:2}
#btt-club .tags{position:absolute;top:0;left:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px;z-index:2}
#btt-club .tags.right{left:auto;right:0;align-items:flex-end}
/* `tag` existe aussi dans le theme du site, qui lui met un interligne de 10 px
   et l'empeche de passer a la ligne : on declare les deux ici pour ne pas
   dependre de qui gagne. */
#btt-club .tag{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;padding:3px 8px;color:#fff;line-height:1.45;white-space:normal;text-align:left}
#btt-club .tag.bicolore{background:#6a3fb5}
#btt-club .tag.coton{background:#4d8a3f}
#btt-club .tag.bio{background:#2e8b57}
#btt-club .tag.conv{background:#6f8f3f}
#btt-club .tag.info{background:rgba(25,25,25,.68)}

/* ---------- configurateur ---------- */
/* minmax(0,1fr) et pas 1fr : une piste de grille refuse par defaut de
   descendre sous la largeur minimale de son contenu. Dans le gabarit du
   site, ou la zone de contenu est plus etroite que les 1140 px prevus par
   la maquette, la colonne de gauche restait bloquee a 589 px et poussait
   le panneau recapitulatif hors de la page : debordement horizontal reel,
   constate en ligne a 1000 px de large. */
#btt-club .cfg{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px;align-items:stretch}
#btt-club .cfg > aside{align-self:stretch}
#btt-club .step{margin-bottom:34px}
#btt-club .step-hd{display:flex;align-items:baseline;gap:12px;margin-bottom:16px;border-bottom:1px solid var(--bd);padding-bottom:10px}
#btt-club .step-num{background:var(--accent);color:#fff;width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;flex:0 0 26px}
#btt-club .step-hd h2{font-size:19px;margin:0}
#btt-club .step-hd .hint{margin-left:auto;font-size:13px;color:var(--gris)}

/* bandeau de tranche */
#btt-club .tranche-info{background:#eef8fb;border-left:3px solid var(--accent);padding:12px 15px;font-size:13.5px;color:#1c6a7d}
#btt-club .tr-l{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#btt-club .tr-l + .tr-l{margin-top:8px;padding-top:8px;border-top:1px solid #d5e9f0}
#btt-club .tr-l.alerte{color:#7a5510}
#btt-club .tr-note{margin-top:9px;padding-top:8px;border-top:1px solid #d5e9f0;font-size:12.5px;color:var(--gris)}
#btt-club .tranche-info b{color:var(--noir)}
#btt-club .tranche-info .paliers{display:flex;margin-left:auto;flex-wrap:wrap}
#btt-club .tranche-info .pal{font-size:11px;padding:3px 9px;border:1px solid #cde7ef;background:#fff;color:var(--gris);white-space:nowrap}
#btt-club .tranche-info .pal.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}

/* lignes de commande */
#btt-club .ligne{border:1px solid var(--bd);margin-bottom:14px;background:#fff}
#btt-club .ligne.open{border-color:var(--accent);box-shadow:var(--shadow)}
#btt-club .lg-part{margin-bottom:24px}
#btt-club .lg-part > h4{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--gris);font-weight:600;
              margin:0 0 11px;padding-bottom:7px;border-bottom:1px solid var(--bd);display:flex;align-items:baseline;gap:8px}
#btt-club .lg-part > h4 span{margin-left:auto;text-transform:none;letter-spacing:0;color:var(--gris-c);font-weight:400;font-size:12px}

/* sélecteur de famille puis de modèle */
#btt-club .fams{display:flex;gap:8px;margin-bottom:12px}
#btt-club .fam{border:1px solid var(--bd);background:#fff;font-family:inherit;font-size:13px;font-weight:600;
     text-transform:uppercase;letter-spacing:.3px;color:var(--gris);padding:9px 20px;cursor:pointer}
#btt-club .fam:hover{border-color:var(--accent);color:var(--accent)}
#btt-club .fam.on{background:var(--accent);border-color:var(--accent);color:#fff}
/* ---------- « choisissez votre... » : 3 modèles par ligne, avec toutes les
   infos, le choix de couleur et le choix de vue directement sur la carte ---------- */
/* ---------- « choisissez votre... » v2 : un modèle par ligne, avec son
   propre champ de quantité ---------- */
#btt-club .modrows{display:flex;flex-direction:column;gap:14px}
/* trois tiers égaux : les deux photos (accolées, une seule colonne 2fr
   pour la paire) et le reste (une seule colonne, tout empilé) */
#btt-club .modrow{display:grid;grid-template-columns:2fr 1fr;gap:20px;border:1px solid var(--bd);
  background:#fff;padding:16px;transition:border-color .15s,box-shadow .15s;align-items:start}
#btt-club .modrow.actif{border-color:var(--accent);box-shadow:var(--shadow);background:var(--accent-bg)}
/* deux photos par produit, collées l'une à l'autre : face+dos par défaut,
   bras droit+gauche en variante (le bras gauche est le bras droit reflété,
   une seule vraie photo suffit). Les flèches passent de l'une à l'autre paire.
   `align-items:start` sur .modrow (ci-dessus) + pas de height:100% ici :
   sans ça, quand la colonne de droite grandit (sous-total qui apparaît,
   champ 3XL qui apparaît), la grille étirait la case photo à la même
   hauteur — et comme cette case n'a que sa largeur de fixée (aspect-ratio
   3/4), l'étirer changeait aussi sa largeur, donc la taille et la position
   réelles de la photo, sans que les calques de flocage (positionnés en %
   de cette même case) ne suivent. La case photo garde maintenant toujours
   la même taille, quoi qu'il se passe dans la colonne de droite. */
#btt-club .modrow-ph{position:relative;min-width:0}
#btt-club .modrow-paire{display:flex;gap:0}
#btt-club .modrow-paire > div{flex:1;min-width:0;position:relative;aspect-ratio:3/4;background:var(--fond);overflow:hidden}
#btt-club .modrow-paire img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
#btt-club .modrow-paire img.miroir{transform:scaleX(-1)}
#btt-club .modrow-lib{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);font-size:9.5px;font-weight:600;
  color:#fff;background:rgba(25,25,25,.68);padding:3px 9px;text-transform:uppercase;letter-spacing:.4px;
  white-space:nowrap;z-index:2}
#btt-club .modrow-arw{position:absolute;top:50%;transform:translateY(-50%);width:24px;height:40px;
  border:1px solid var(--bd);background:rgba(255,255,255,.92);color:var(--txt);font-size:16px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:3;padding:0}
#btt-club .modrow-arw:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
#btt-club .modrow-arw.l{left:2px} #btt-club .modrow-arw.r{right:2px}
/* le reste : nom, description, coloris puis quantité, tout dans une seule
   colonne étroite, donc des puces de couleur et des espacements resserrés */
#btt-club .modrow-reste{display:flex;flex-direction:column;gap:2px}
#btt-club .modrow-reste h5{font-size:14.5px;margin:0 0 1px;color:var(--noir);font-weight:600}
#btt-club .modrow-reste .meta{font-size:11px;color:var(--gris);margin:0 0 3px}
#btt-club .modrow-reste .compo{font-size:11.5px;font-weight:600;color:var(--noir);margin:0 0 2px}
#btt-club .modrow-reste .argu{font-size:11.5px;color:var(--gris);line-height:1.35;margin:0 0 6px}
/* 24 px minimum : choisir sa couleur est une etape obligatoire du parcours,
   et une pastille de 16 px ne se vise pas au doigt sur un telephone. */
#btt-club .modrow-reste .swatches{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:5px}
#btt-club .modrow-reste .sw{width:24px;height:24px;border:1px solid rgba(0,0,0,.16);cursor:pointer;padding:0}
#btt-club .modrow-reste .sw.on{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
#btt-club .modrow-reste .sw-name{font-size:11px;color:var(--gris);margin:0}
#btt-club .modrow-reste .sw-name b{color:var(--noir);font-weight:600}
/* Bouton voyant plutôt qu'un lien texte discret : ouvre la fiche produit
   agrandie (vues + prix), le zoom est ce que ce bouton met le plus en avant
   pour le client. */
#btt-club .modrow-reste .lien-fiche{display:inline-flex;align-items:center;gap:6px;background:var(--accent);
  color:#fff;border:0;padding:8px 18px;font-family:inherit;font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.6px;cursor:pointer;margin-top:8px;box-shadow:var(--shadow)}
#btt-club .modrow-reste .lien-fiche::before{content:'🔍';font-size:13px}
#btt-club .modrow-reste .lien-fiche:hover{background:var(--accent-h)}
#btt-club .modrow-qte{display:flex;flex-direction:column;gap:4px;margin-top:10px;padding-top:10px;border-top:1px solid var(--bd)}
#btt-club .modrow-qte label{font-size:10.5px;text-transform:uppercase;letter-spacing:.3px;color:var(--gris-c);font-weight:600}
#btt-club .modrow-qte label.petit{margin-top:3px}
#btt-club .modrow-qte label.petit i{font-style:normal;text-transform:none;letter-spacing:0}
#btt-club .modrow-qte input{width:100%;padding:9px;border:1px solid var(--bd);font-family:inherit;font-size:17px;
  font-weight:600;text-align:center;color:var(--noir)}
#btt-club .modrow-qte input:focus{outline:0;border-color:var(--accent)}

/* Les boutons + et - encadrent le champ. Ils existent parce que les champs de
   quantite sont en `type="text"` et n'ont donc pas les fleches d'un champ
   numerique : ce type avait ete abandonne pour reparer la saisie sur Android,
   et la souris s'est retrouvee sans moyen de changer une quantite. */
#btt-club .qte{display:flex;align-items:stretch}
#btt-club .modrow-qte .qte{width:100%}
#btt-club .sub-field .qte{width:150px}
#btt-club .modrow-qte .qte input, #btt-club .sub-field .qte input{width:auto;flex:1 1 auto;min-width:0;border-left:0;border-right:0}
#btt-club .qte .pas{flex:0 0 auto;width:38px;padding:0;border:1px solid var(--bd);border-radius:0;background:#fff;
  font-family:inherit;font-size:17px;font-weight:600;line-height:1;color:var(--gris);cursor:pointer;
  text-transform:none;box-shadow:none;height:auto;min-height:0;-webkit-appearance:none;appearance:none}
#btt-club .qte .pas:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
#btt-club .qte .pas:focus{outline:0;border-color:var(--accent);color:var(--accent)}
#btt-club .qte .pas:disabled{opacity:.35;cursor:default}
#btt-club .sub-field .qte .pas{width:32px;font-size:15px}
#btt-club .modrow-qte .px{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--gris);
  margin:8px 0 0;padding-top:8px;border-top:1px solid var(--bd)}
#btt-club .modrow-qte .px .lib{font-size:10.5px;color:var(--gris-c);text-transform:uppercase}
#btt-club .modrow-qte .px b{font-size:16px;color:var(--noir)}
#btt-club .modrow-qte .px i{font-style:normal;font-size:10.5px;color:var(--gris-c)}
#btt-club .modrow-qte .sous-total{font-size:12.5px;color:var(--accent);font-weight:600;margin:4px 0 0}
#btt-club .modrow-qte .sous-total b{font-size:15px}
#btt-club .modrow-qte .palier{font-size:11px;color:var(--gris);margin:4px 0 0}
#btt-club .modrow-qte .palier b{color:var(--accent)}
@media (max-width:760px){
  #btt-club .modrow{grid-template-columns:1fr}
  /* width:100% explicite, pas seulement max-width : en grille CSS, une marge
     "auto" (ici margin:0 auto, pour centrer) désactive l'étirement par
     défaut de la colonne et repasse l'élément en largeur "auto" ; combiné à
     l'absence de height:100% (retiré plus haut pour ne plus étirer la case
     avec la colonne de droite) et à aspect-ratio:3/4 sur les photos, plus
     aucune des deux dimensions n'est déterminée : la case s'effondrait à
     0×0 sur mobile. width:100% lève l'ambiguïté (largeur déterminée, donc
     la hauteur se déduit bien du ratio), max-width garde la même taille
     plafond qu'avant. */
  #btt-club .modrow-ph{width:100%;max-width:320px;margin:0 auto}
}
@media (max-width:480px){
  #btt-club .modrow-qte{flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:10px}
  #btt-club .modrow-qte input{width:90px}
  #btt-club .modrow-qte .qte{width:166px}
  #btt-club .modrow-qte .px, #btt-club .modrow-qte .sous-total{flex:1 0 100%}
}

/* coloris */
/* zoom plein écran */
#btt-club .sw-name{font-size:13px;color:var(--gris);margin:0 0 12px}
#btt-club .sw-name b{color:var(--noir);font-weight:600}
#btt-club .swatches{display:flex;flex-wrap:wrap;gap:7px}
#btt-club .sw{width:30px;height:30px;border:1px solid rgba(0,0,0,.16);cursor:pointer;padding:0}
#btt-club .sw.on{outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)}

/* marquages */
#btt-club .marks{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
#btt-club .mark{border:1px solid var(--bd);cursor:pointer;background:#fff;text-align:center;padding:6px 5px 9px;transition:border-color .15s;position:relative}
#btt-club .mark:hover{border-color:var(--gris-c)}
#btt-club .mark.on{border-width:2px;border-color:var(--accent);box-shadow:var(--shadow)}
#btt-club .mark img{width:76%;margin:0 auto;aspect-ratio:1.16;object-fit:contain;mix-blend-mode:multiply}
#btt-club .mark b{display:block;font-size:12px;color:var(--noir);font-weight:600;line-height:1.25}
#btt-club .mark .d{display:block;font-size:10.5px;color:var(--gris-c);min-height:14px;line-height:1.25}
#btt-club .mark .p{display:block;font-size:12px;color:var(--accent);font-weight:600;margin-top:4px}
#btt-club .mark .p i{font-style:normal;font-weight:400;color:var(--gris-c);font-size:10.5px}
#btt-club .mark .p-next{display:block;font-size:10px;color:var(--gris-c);margin-top:2px}
#btt-club .mark.fixe{border-color:var(--accent);background:var(--accent-bg)}
#btt-club .mark .lock{position:absolute;top:0;left:0;background:var(--accent);color:#fff;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;padding:2px 5px}
#btt-club .mark .lock.alt{background:#6a3fb5}
@media (max-width:900px){ #btt-club .marks{grid-template-columns:repeat(3,1fr)} }
@media (max-width:560px){ #btt-club .marks{grid-template-columns:repeat(2,1fr)} }

/* options */
#btt-club .opt-block{border:1px solid var(--bd);margin-top:14px}
#btt-club .opt{display:flex;gap:12px;align-items:flex-start;padding:13px 15px;cursor:pointer;border-bottom:1px solid var(--bd)}
#btt-club .opt:last-child{border-bottom:0}
#btt-club .opt input{margin-top:3px;accent-color:var(--accent);width:16px;height:16px;flex:0 0 16px}
#btt-club .opt .t{flex:1}
#btt-club .opt b{font-size:14px;color:var(--noir);font-weight:600;display:block}
#btt-club .opt span{font-size:12.5px;color:var(--gris);display:block;margin-top:1px}
#btt-club .opt .pz{font-weight:600;font-size:14px;white-space:nowrap;color:var(--accent)}
#btt-club .opt .pz.neg{color:var(--ok)}
#btt-club .opt.bet{background:#f2faf5;border-color:#cfe8d9}
#btt-club .sub-field{padding:0 15px 14px 43px;font-size:13px;color:var(--gris);display:flex;align-items:center;gap:9px;flex-wrap:wrap;border-bottom:1px solid var(--bd)}
#btt-club .sub-field:last-child{border-bottom:0}
#btt-club .sub-field input{width:74px;padding:6px 8px;border:1px solid var(--bd);font-family:inherit;font-size:14px;text-align:center}
#btt-club .sub-field .mini{border:1px solid var(--bd);background:#fff;padding:6px 12px;font-family:inherit;font-size:13px;color:var(--gris);cursor:pointer;white-space:nowrap}
#btt-club .sub-field .mini:hover{border-color:var(--accent);color:var(--accent)}
#btt-club .sub-field .mini.on{border-color:var(--accent);background:var(--accent);color:#fff;font-weight:600}

/* quantité */
#btt-club .qty-row{display:flex;gap:22px;align-items:flex-end;flex-wrap:wrap}
#btt-club .field label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--gris);margin-bottom:6px;font-weight:600}
#btt-club .field input{padding:10px 12px;border:1px solid var(--bd);font-family:inherit;font-size:19px;font-weight:600;width:110px;text-align:center;color:var(--noir)}
#btt-club .field input:focus{outline:0;border-color:var(--accent)}
#btt-club .note{font-size:12.5px;color:var(--gris);background:var(--fond);border-left:3px solid var(--gris-c);padding:10px 13px;margin-top:14px}
#btt-club .note b{color:var(--noir)}

/* zone visuels */
#btt-club .visuels{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
#btt-club .vis{border:1px solid var(--bd);padding:14px 15px;cursor:pointer;background:#fff;transition:border-color .15s}
#btt-club .vis:hover{border-color:var(--gris-c)}
#btt-club .vis.on{border-color:var(--accent);box-shadow:var(--shadow)}
#btt-club .vis b{display:block;font-size:14px;color:var(--noir);font-weight:600;margin-bottom:3px}
#btt-club .vis span{font-size:12.5px;color:var(--gris);line-height:1.4;display:block}
#btt-club .vis .pz{display:block;margin-top:8px;font-size:13px;font-weight:600;color:var(--accent)}
#btt-club .vis .pz.free{color:var(--ok)}
#btt-club .qm{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--accent);color:#fff;font-size:11px;font-weight:700;margin-left:5px;cursor:help;vertical-align:1px}
#btt-club .tip{border:1px solid var(--bd);background:var(--fond);padding:13px 15px;font-size:12.5px;color:var(--gris);margin-top:12px;line-height:1.5}
#btt-club .tip b{color:var(--noir)}

/* récapitulatif */
#btt-club .recap{position:sticky;top:16px;border:1px solid var(--bd);background:#fff}
#btt-club .recap .hd{background:var(--noir);color:#fff;padding:12px 16px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
#btt-club .recap .bd{padding:16px}
#btt-club .r-item{border-bottom:1px solid var(--bd);padding-bottom:10px;margin-bottom:10px}
#btt-club .r-item:last-of-type{border-bottom:0}
#btt-club .r-item .t{display:flex;justify-content:space-between;gap:10px;font-size:13px}
#btt-club .r-item .t b{color:var(--noir);font-weight:600}
#btt-club .r-item .t span:last-child{white-space:nowrap;font-weight:600;color:var(--noir)}
#btt-club .r-item .s{font-size:12px;color:var(--gris);margin-top:2px}
#btt-club .r-line{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:3px 0;color:var(--gris)}
#btt-club .r-line span:last-child{color:var(--txt);white-space:nowrap}
#btt-club .r-line.neg span:last-child{color:var(--ok)}
#btt-club .r-tot{display:flex;justify-content:space-between;align-items:baseline;margin-top:8px;padding-top:12px;border-top:2px solid var(--noir)}
#btt-club .r-tot span{font-size:13px;text-transform:uppercase;letter-spacing:.4px;font-weight:600;color:var(--gris)}
#btt-club .r-tot b{font-size:23px;color:var(--accent);font-weight:600}
#btt-club .r-eco{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:8px;
   background:#eef8f2;border-left:3px solid var(--ok);padding:8px 11px;font-size:12.5px;color:#24603f}
#btt-club .r-eco b{font-size:15px;font-weight:600;color:#1d5334;white-space:nowrap}
#btt-club .r-eco span i{font-style:normal;display:block;font-size:11.5px;color:#3d7a57}
#btt-club .r-port{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--gris);margin-top:7px;padding-top:7px;border-top:1px dashed var(--bd)}
#btt-club .r-port b{color:var(--txt);font-weight:600;white-space:nowrap}
#btt-club .btn{display:block;width:100%;text-align:center;border:0;background:var(--accent);color:#fff;font-family:inherit;font-size:15px;font-weight:600;text-transform:uppercase;padding:13px 20px;cursor:pointer;box-shadow:var(--shadow);margin-top:16px;white-space:normal;vertical-align:baseline}
#btt-club .btn:hover{background:var(--accent-h);color:#fff}
/* `alert` est aussi une classe de Bootstrap, que le theme du site embarque :
   il lui ajoute une bordure et des coins arrondis. On les remet a zero. */
#btt-club .alert{font-size:12.5px;padding:10px 12px;margin-top:12px;line-height:1.4;border:0;border-radius:0}
#btt-club .alert.eco{background:#eef8f2;border-left:3px solid var(--ok);color:#24603f}
#btt-club .alert.warn{background:#fff6e6;border-left:3px solid #e0a63a;color:#7a5510}
#btt-club .alert.next{background:#eef8fb;border-left:3px solid var(--accent);color:#1c6a7d}
#btt-club .free{font-size:11.5px;color:var(--gris);margin-top:12px;text-align:center;line-height:1.5}

/* tableau tarifs */
#btt-club details.grid-prix{border:1px solid var(--bd);margin-top:8px}
#btt-club details.grid-prix>summary{cursor:pointer;padding:14px 18px;font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.4px;background:var(--fond);list-style:none;display:block}
#btt-club details.grid-prix>summary::-webkit-details-marker{display:none}
#btt-club details.grid-prix>summary::before{content:"+ ";color:var(--accent);font-weight:700}
#btt-club details.grid-prix[open]>summary::before{content:"– "}
#btt-club .tw{overflow-x:auto;padding:0 18px 18px}
#btt-club table{border-collapse:collapse;width:100%;font-size:13.5px;min-width:620px}
#btt-club th, #btt-club td{padding:9px 10px;text-align:right;border-bottom:1px solid var(--bd);white-space:nowrap}
#btt-club th:first-child, #btt-club td:first-child{text-align:left}
#btt-club thead th{font-size:11.5px;text-transform:uppercase;color:var(--gris);letter-spacing:.4px;border-bottom:2px solid var(--bd)}
#btt-club tbody tr:hover{background:var(--fond)}
#btt-club tr.cat td{background:var(--fond);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--gris)}
#btt-club td.px{font-weight:600;color:var(--noir)}
#btt-club td.neg{color:var(--ok);font-weight:600}

/* étapes / faq / formulaire */
#btt-club .how{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
#btt-club .how .it{border-top:3px solid var(--accent);padding-top:14px}
#btt-club .how .n{font-size:12px;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:.6px;margin-bottom:5px}
#btt-club .how p{font-size:13.5px;color:var(--gris);margin:4px 0 0}
#btt-club .faq{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
#btt-club .faq details{border-bottom:1px solid var(--bd)}
#btt-club .faq summary{cursor:pointer;padding:14px 0;font-weight:600;font-size:14.5px;color:var(--noir);list-style:none;display:block}
#btt-club .faq summary::-webkit-details-marker{display:none}
#btt-club .faq summary::after{content:"+";float:right;color:var(--accent);font-weight:700}
#btt-club .faq details[open] summary::after{content:"–"}
#btt-club .faq p{margin:0 0 14px;font-size:13.5px;color:var(--gris);max-width:92%}
#btt-club .devis{background:var(--fond);border-top:1px solid var(--bd);border-bottom:1px solid var(--bd)}
#btt-club .devis .wrap{padding:44px 15px}
#btt-club .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
#btt-club .form-grid .full{grid-column:1/-1}
#btt-club .form-grid label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--gris);margin-bottom:5px;font-weight:600}
#btt-club .form-grid input, #btt-club .form-grid textarea{width:100%;padding:11px 12px;border:1px solid var(--bd);font-family:inherit;font-size:15px;background:#fff}
#btt-club .form-grid input:focus, #btt-club .form-grid textarea:focus{outline:0;border-color:var(--accent)}
#btt-club .form-side{background:#fff;border:1px solid var(--bd);padding:18px}
#btt-club .form-side h3{font-size:13px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px}
#btt-club .devis-cols{display:grid;grid-template-columns:1fr 330px;gap:34px;align-items:start}
#btt-club .confirm{background:#eef8f2;border:1px solid #bfe3cd;color:#24603f;padding:14px 16px;font-size:14px;margin-top:16px}
#btt-club .acc-list{display:flex;gap:10px;flex-wrap:wrap}
#btt-club .acc-list label{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--bd);padding:11px 15px;
  cursor:pointer;font-size:14px;color:var(--txt);text-transform:none;letter-spacing:0;font-weight:400;margin:0}
#btt-club .acc-list label:hover{border-color:var(--accent)}
#btt-club .acc-list input{width:16px;height:16px;accent-color:var(--accent);margin:0}
#btt-club .acc-list label:has(input:checked){border-color:var(--accent);background:#f2fbfd}

/* pied */
#btt-club .ft{background:var(--fond);border-top:1px solid var(--bd);padding:34px 0;font-size:13px;color:var(--gris)}
#btt-club .ft .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
#btt-club .ft b{display:block;color:var(--noir);text-transform:uppercase;font-size:12px;letter-spacing:.5px;margin-bottom:8px}
#btt-club .ft p{margin:3px 0}
#btt-club .ft .copy{border-top:1px solid var(--bd);margin-top:26px;padding-top:16px;font-size:12px;color:var(--gris-c);text-align:center}
#btt-club .mockup{background:#333;color:#ddd;font-size:12px;padding:11px 15px;text-align:center;letter-spacing:.3px}
#btt-club .mockup b{color:#fff}

/* barre de rappel */
#btt-club .bar{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--bd);
     box-shadow:0 -2px 14px rgba(0,0,0,.12);z-index:50;transform:translateY(100%);transition:transform .22s ease}
#btt-club .bar.show{transform:translateY(0)}
#btt-club .bar .wrap{display:flex;align-items:center;gap:20px;padding-top:11px;padding-bottom:11px}
#btt-club .bar .who{font-size:13px;color:var(--gris);line-height:1.35;min-width:0}
#btt-club .bar .who b{color:var(--noir);font-weight:600;display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#btt-club .bar .pv{margin-left:auto;text-align:right;line-height:1.2;white-space:nowrap}
#btt-club .bar .pv .u{font-size:12px;color:var(--gris);text-transform:uppercase;letter-spacing:.4px;font-weight:600}
#btt-club .bar .pv .t{font-size:21px;font-weight:600;color:var(--accent)}
#btt-club .bar .btn{margin-top:0;width:auto;flex:0 0 auto;padding:11px 22px;font-size:14px}
#btt-club .bar .btn .sm{display:none}

@media (max-width:980px){
  #btt-club .cfg{grid-template-columns:1fr}
  #btt-club .recap{position:static}
  #btt-club .how, #btt-club .ft .cols{grid-template-columns:repeat(2,1fr)}
  #btt-club .faq, #btt-club .devis-cols{grid-template-columns:1fr}
  #btt-club .nav, #btt-club .search, #btt-club .topbar{display:none}
  #btt-club h1{font-size:28px}
}
@media (max-width:700px){
  #btt-club .bar .who b{font-size:12px;line-height:1.3;white-space:normal}
  #btt-club .bar .who span{display:none}
  #btt-club .bar .wrap{gap:10px;padding-left:12px;padding-right:12px}
  #btt-club .bar .btn{padding:10px 12px;font-size:12px}
  #btt-club .bar .btn .lg{display:none} #btt-club .bar .btn .sm{display:inline}
  #btt-club .bar .pv .t{font-size:17px} #btt-club .bar .pv .u{font-size:10px}
}
@media (max-width:560px){
  #btt-club .how, #btt-club .ft .cols, #btt-club .form-grid, #btt-club .visuels{grid-template-columns:1fr}
  #btt-club .marks{grid-template-columns:repeat(2,1fr);gap:8px}
  }