/* Gravure RF — feuille de style partagée pour les pages qui utilisent la
   nouvelle direction "verre & lumière" (fond clair, panneaux de verre
   dépoli, accent violet, Space Grotesk pour les titres / Work Sans pour le
   texte courant) : boutique.html (le parcours continu) ET index.html
   (la page d'accueil). Volontairement séparée de css/style.css (look
   complètement différent) — les autres pages du site (galerie, panier,
   commande, etc.) gardent pour l'instant leur apparence actuelle.
*/

* { box-sizing: border-box; }

:root {
  --bt-accent: #5b57e0;
  --bt-encre: #221f26;
  --bt-encre-douce: #5c5964;
  --bt-fond: #f5f2ef;
  --bt-verre: rgba(255,255,255,0.6);
  --bt-verre-bord: rgba(255,255,255,0.8);
  --bt-radius: 20px;
  /* Alias — js/avis.js (partagé avec personnalisation.html, qui définit
     --lin-dim via css/style.css) utilise cette variable dans deux styles
     inline ; index.html ne charge pas css/style.css, donc on la redéfinit
     ici avec la même valeur que --bt-encre-douce. */
  --lin-dim: #5c5964;
}

body.boutique {
  margin: 0;
  background:
    radial-gradient(760px 520px at 88% 4%, rgba(110,123,255,0.14), transparent 60%),
    radial-gradient(820px 560px at 4% 42%, rgba(255,180,150,0.16), transparent 60%),
    var(--bt-fond);
  color: var(--bt-encre);
  font-family: 'Work Sans', sans-serif;
  min-height: 100vh;
}

.bt-display { font-family: 'Space Grotesk', sans-serif; }
.bt-caps { text-transform: uppercase; letter-spacing: 0.1em; }

.bt-glass {
  background: var(--bt-verre);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid var(--bt-verre-bord);
}

.bt-wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }

/* Empêche la page en arrière-plan de défiler pendant que le tiroir panier
   est ouvert (demandé par Remy, mobile ET ordi) — la classe est posée sur
   <html> par ouvrirPanier()/fermerPanier() (js/boutique.js et
   js/panier-tiroir.js), qui fige aussi <body> en position fixe (nécessaire
   pour bloquer le "rubber-band scroll" de Safari iOS, qu'un simple
   overflow:hidden ne suffit pas à empêcher). */
html.bt-scroll-bloque { overflow: hidden; }
html.bt-scroll-bloque body { overflow: hidden; }

/* --- NAV --- */
/* Même entête que le reste du site (voir .site-header dans css/style.css) :
   barre collante avec fond de verre, hauteur ~76px, liens en petites
   capitales espacées, bouton Devis en pilule "cta". */
.bt-site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(245,242,239,0.86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  /* Se cache en glissant vers le haut quand on défile vers le bas, revient
     quand on défile vers le haut (demandé par Remy) — piloté par
     js/entete-scroll.js qui pose/retire .bt-entete-cachee. */
  transition: transform 0.28s ease;
}
.bt-site-header.bt-entete-cachee { transform: translateY(-100%); }
.bt-nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 76px;
}
/* Le bouton panier est un enfant flex direct de .bt-nav (pas de
   .bt-nav-links) : sur desktop "order" le remet à sa place habituelle, tout
   à la fin ; sur mobile (voir media query plus bas), on le fait passer juste
   après le logo, à la demande de Remy. */
.bt-logo { order: 1; font-size: 20px; font-weight: 600; letter-spacing: 0.02em; color: var(--bt-encre); text-decoration: none; }
.bt-nav-links { order: 2; display: flex; align-items: center; gap: clamp(16px, 3vw, 32px); }
/* .bt-lang-switch (sélecteur FR/EN/ES, voir js/i18n.js) — présent sur
   TOUTES les pages pour que l'en-tête reste identique partout (demandé par
   Remy), même si sur index.html il ne traduit encore rien (cette page n'a
   pas de contenu marqué data-i18n) : les boutons restent affichés pour la
   cohérence visuelle, ils sont juste sans effet là où i18n.js n'est pas
   chargé. La classe "lang-switch" (sans préfixe bt-) reste nécessaire :
   c'est elle que js/i18n.js cible pour brancher les clics. */
.lang-switch.bt-lang-switch {
  order: 3; display: flex; align-items: center; gap: 2px;
  border: 1px solid rgba(0,0,0,0.1); border-radius: 100px; overflow: hidden; background: #fff;
}
.lang-switch.bt-lang-switch button {
  background: none; border: none; cursor: pointer; padding: 7px 11px;
  font-size: 11px; letter-spacing: 0.04em; color: var(--bt-encre-douce); font-family: 'Work Sans', sans-serif;
}
.lang-switch.bt-lang-switch button.active { background: var(--bt-accent); color: #fff; border-radius: 100px; }
.bt-cart-btn { order: 4; }
.bt-nav-links a { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bt-encre-douce); text-decoration: none; }
.bt-nav-links a:hover { color: var(--bt-encre); }
/* Souligne le lien de la page actuelle dans le menu (demandé par Remy) —
   classe posée par js/nav-actif.js au chargement de chaque page. */
.bt-nav-links a.bt-lien-actif { color: var(--bt-encre); text-decoration: underline; text-underline-offset: 4px; }
.bt-cart-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 22px; border-radius: 100px; font-size: 13px; color: var(--bt-encre);
  cursor: pointer; border: 1px solid var(--bt-verre-bord); background: var(--bt-verre);
  font-family: 'Work Sans', sans-serif;
}
.bt-cart-btn svg { flex-shrink: 0; }

@media (max-width: 640px) {
  /* Panier toujours à droite du logo, sur la même ligne, à TOUTES les
     largeurs mobiles (demandé par Remy — l'ancienne version en flex-wrap
     dépendait d'un calcul de largeur qui ne passait plus en dessous de
     ~383px : sur son iPhone réel, plus étroit que le viewport de test
     initial, le panier retombait sous le logo). Une grille CSS élimine ce
     calcul : logo + panier partagent toujours la 1re ligne (logo prend
     l'espace restant, panier garde sa largeur naturelle), liens de nav et
     sélecteur de langue occupent chacun toute la largeur sur leur propre
     ligne en dessous. */
  .bt-wrap { padding: 0 16px; }
  .bt-nav {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "logo cart" "links links";
    align-items: center;
    gap: 10px;
    height: auto;
    padding: 14px 0;
  }
  .bt-logo { grid-area: logo; min-width: 0; }
  /* Le logo est une image de forme très allongée (proche de 7:1) ; on la
     réduit un peu plus sur mobile pour garantir de la place à côté du
     panier même sur les téléphones les plus étroits (320px). */
  .bt-logo img { height: 22px !important; width: auto !important; max-width: 100%; }
  .bt-cart-btn { grid-area: cart; justify-self: end; }
  .bt-nav-links { grid-area: links; flex-wrap: wrap; gap: 12px; }
  /* Sélecteur de langue retiré sur mobile (demandé par Remy) — reste
     disponible sur ordi (voir la règle non préfixée plus haut). */
  .lang-switch.bt-lang-switch { display: none; }
  .bt-nav-links a { font-size: 11px; }
  .bt-cart-btn { padding: 9px 14px; font-size: 11px; }

}

/* Cache l'en-tête pendant que le tiroir panier est ouvert, mobile ET
   ordinateur (demandé par Remy) — la classe est posée/retirée par
   ouvrirPanier()/fermerPanier() dans js/boutique.js ET js/panier-tiroir.js
   (tiroir partagé des autres pages), donc ce comportement est le même
   partout. Hors de la media query ci-dessus (@media max-width:640px) pour
   s'appliquer à TOUTES les largeurs, pas seulement mobile. */
body.bt-panier-ouvert .bt-site-header { display: none; }

/* --- HERO --- */
.bt-hero { padding: 20px 0 8px; }
.bt-hero h1 {
  font-size: clamp(40px, 5.4vw, 64px); line-height: 1.03; font-weight: 400; margin: 16px 0 0; max-width: 780px;
}
.bt-hero .accent { font-weight: 700; color: var(--bt-accent); }
.bt-hero p { max-width: 520px; font-size: 16px; color: var(--bt-encre-douce); margin: 18px 0 0; line-height: 1.6; }

/* --- GRILLE PRODUITS --- */
.bt-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px;
  padding: 36px 0 0;
}
@media (max-width: 900px) { .bt-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* Fond opaque plutôt que l'effet "verre" (backdrop-filter: blur) : sur
   Safari iOS, ce flou créait une bande grise visible juste au-dessus de la
   photo, sur beaucoup de cartes du catalogue (signalé par Remy sur son
   iPhone). Couleur choisie pour rester visuellement identique à l'ancien
   effet (rgba(255,255,255,0.6) sur le fond --bt-fond #f5f2ef ≈ #fdfcfb). */
.bt-card {
  border-radius: var(--bt-radius); overflow: hidden; cursor: pointer;
  border: 1px solid var(--bt-verre-bord); background: #fff;
  padding: 0; text-align: left; font-family: inherit; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; width: 100%;
  text-decoration: none; color: inherit;
}
.bt-card.selected { border-color: var(--bt-accent); box-shadow: 0 0 0 2px var(--bt-accent); }
/* Fond blanc (et non beige) : les photos produit ont un fond transparent ou
   blanc, donc un fond de carte blanc rend les marges de object-fit:contain
   invisibles au lieu de créer une "ligne" visible d'une autre couleur
   (signalé par Remy — certaines cartes avaient une bande beige au-dessus/
   en-dessous de la photo qui donnait une impression de grille mal alignée). */
.bt-card-photo { height: 196px; flex-shrink: 0; overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center; padding: 14px; box-sizing: border-box; }
.bt-card-photo img { width: 100%; height: 100%; object-fit: contain; }
.bt-card-body { padding: 16px 18px 18px; }
.bt-card-nom { font-size: 14px; color: var(--bt-encre); }
.bt-card-prix { font-family: 'Space Grotesk', sans-serif; font-size: 24px; color: var(--bt-accent); margin-top: 2px; }
.bt-card-stock { font-size: 11px; margin-top: 6px; }
.bt-stock-ok { color: #4a7a5a; }
.bt-stock-bas { color: #b3781f; }
.bt-stock-rupture { color: #b3453b; }

/* 2 colonnes gardées même sur petit mobile (demandé par Remy — 1 seule
   colonne rendait le catalogue trop long à faire défiler) ; on resserre
   juste l'espacement et le texte des cartes pour que ça reste lisible.
   IMPORTANT : ce bloc doit rester APRÈS les règles .bt-card-body/-nom/-prix
   ci-dessus — placé avant (comme c'était le cas), ces surcharges mobiles
   étaient silencieusement ignorées (même spécificité CSS, la règle la plus
   TARDIVE dans le fichier gagne peu importe le media query), donc le prix
   restait à 24px même sur mobile et pouvait faire un retour à la ligne
   disgracieux au milieu ("Dès" / "10,99 $") selon le nombre de chiffres —
   signalé par Remy, comparé visuellement à une carte voisine dont le prix
   tenait sur une seule ligne. */
@media (max-width: 600px) {
  .bt-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  .bt-card-body { padding: 12px; }
  .bt-card-nom { font-size: 13px; }
  .bt-card-prix { font-size: 16px; white-space: nowrap; }
}

/* --- ATELIER --- */
.bt-atelier {
  border-radius: 26px; padding: 30px; margin-top: 34px;
  display: grid; grid-template-columns: 0.85fr 1fr; gap: 32px; align-items: start;
}
@media (max-width: 860px) { .bt-atelier { grid-template-columns: 1fr; } }

.bt-atelier-visuel-col { display: flex; flex-direction: column; min-width: 0; }

.bt-undo-redo-bar { display: flex; gap: 8px; margin-bottom: 10px; }
.bt-undo-redo-btn {
  padding: 8px 14px; border-radius: 100px; font-size: 12.5px; cursor: pointer;
  border: 1px solid rgba(0,0,0,0.14); background: rgba(255,255,255,0.7); color: var(--bt-encre);
  font-family: 'Work Sans', sans-serif;
}
.bt-undo-redo-btn:hover { border-color: var(--bt-accent); color: var(--bt-accent); }

.bt-atelier-visuel {
  /* aspect-ratio (et non plus une hauteur fixe) : les visuels FPD sont tous
     carrés (stageWidth/stageHeight = 700x700 dans assets/fpd/data/*.json).
     Avec une hauteur fixe (ex. 420px) plus grande que la largeur réelle sur
     mobile, le canevas — rendu plus petit pour respecter le carré — se
     retrouvait centré dans une boîte trop haute, laissant un bandeau vide
     au-dessus et en dessous de l'image. */
  position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 1 / 1; width: 100%;
  /* Fond BLANC plutôt que gris beige (#eae6e0) : cette boîte est toujours un
     carré parfait (aspect-ratio 1/1), mais les photos de produit ne le sont
     pas toutes (ex. la bague, plus haute que large) — avec object-fit:contain
     (posé en style inline sur #bt-image-fixe), une photo qui n'est pas
     carrée laisse forcément un peu de vide de chaque côté (ou en haut/bas)
     dans le carré. Ce vide prenait la couleur beige du fond, ce qui créait
     une bande/ligne grise visible de chaque côté de l'image — signalé par
     Remy. Toutes nos photos de produit sont déjà sur fond blanc, donc un
     fond blanc ici rend ce vide invisible, sans avoir à retoucher les
     images elles-mêmes. */
  background: #fff; display: flex; align-items: center; justify-content: center;
}
.bt-atelier-visuel img { width: 100%; height: 100%; object-fit: cover; }

#fpd-target { width: 100%; height: 100%; }

.bt-champ-groupe { margin-top: 18px; }
.bt-champ-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--bt-encre-douce); margin-bottom: 8px; display: block; }
/* Ligne label + icône poubelle (champs "Texte à graver"/"Texte au verso") :
   le label garde son style habituel, l'icône est alignée à droite. */
.bt-champ-label-ligne { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.bt-texte-effacer {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; margin: 0; flex-shrink: 0;
  border: none; background: none; color: var(--bt-encre-douce); cursor: pointer;
  border-radius: 8px; transition: color 0.15s ease, background 0.15s ease;
}
.bt-texte-effacer:hover { color: #b3453b; background: rgba(179,69,59,0.08); }
.bt-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.bt-swatch {
  padding: 9px 16px; border-radius: 100px; font-size: 13px; cursor: pointer;
  border: 1px solid rgba(0,0,0,0.14); background: rgba(255,255,255,0.6); color: var(--bt-encre);
  font-family: 'Work Sans', sans-serif;
}
.bt-swatch.active { border-color: var(--bt-accent); background: var(--bt-accent); color: #fff; }
.bt-swatch.indisponible { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }
/* Dimension (mm) affichée à même le bouton de grandeur/taille (bague,
   plaque pour collier, médaillon) — demandé par Remy pour que le client
   voie la mesure exacte sans avoir à deviner. Discrète (plus petite, plus
   pâle) pour ne pas nuire à la lisibilité du nom de la grandeur. */
.bt-swatch-mm { font-size: 10.5px; opacity: 0.75; }
.bt-swatch.active .bt-swatch-mm { opacity: 0.9; }
.bt-swatch-couleur { width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 2px solid rgba(0,0,0,0.1); }
.bt-swatch-couleur.active { border-color: var(--bt-accent); box-shadow: 0 0 0 2px var(--bt-accent); }
/* Boutons d'alignement du texte (gauche/centre/droite) : icône seule,
   centrée, même pilule que les autres .bt-swatch pour rester cohérent. */
.bt-swatch-icone { padding: 9px 14px; display: inline-flex; align-items: center; justify-content: center; }
.bt-swatch-icone svg { display: block; }

.bt-input, .bt-select {
  width: 100%; padding: 13px 16px; border-radius: 12px; border: 1px solid rgba(0,0,0,0.14);
  background: rgba(255,255,255,0.7);
  /* 16px (pas 14px) : sous ce seuil, Safari iOS zoome automatiquement la
     page au focus d'un champ de texte — Remy l'a remarqué en cliquant dans
     "Texte à graver" sur mobile. 16px est la taille minimale qui évite ce
     zoom, sur CE champ et tous les autres qui partagent .bt-input/.bt-select
     (police, quantité, code postal, textes supplémentaires). */
  font-size: 16px; font-family: 'Work Sans', sans-serif; color: var(--bt-encre);
}
.bt-input:focus, .bt-select:focus { outline: 2px solid var(--bt-accent); }
/* Texte à graver : textarea (plus un simple input) pour permettre les
   retours à la ligne. resize:vertical seulement (jamais horizontal, casserait
   la mise en page) et line-height/font cohérents avec le reste des champs. */
.bt-textarea { resize: vertical; min-height: 54px; line-height: 1.4; font-family: 'Work Sans', sans-serif; }
/* Textes supplémentaires ("+ Ajouter un texte") : une ligne = un champ +
   un bouton retirer, empilées avec un petit espace entre chacune. */
.bt-texte-supp-ligne { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; }
.bt-texte-supp-ligne .bt-textarea { min-height: 42px; }
.bt-texte-supp-retirer { padding: 10px 12px; flex-shrink: 0; }

.bt-face-toggle { display: flex; gap: 8px; }
.bt-face-toggle button.active { border-color: var(--bt-accent) !important; background: var(--bt-accent) !important; color: #fff !important; }

.bt-avertissement { font-size: 12px; margin-top: 8px; }
.bt-avertissement.rupture { color: #b3453b; }
.bt-avertissement.bas { color: #b3781f; }

.bt-atelier-footer {
  display: flex; align-items: center; justify-content: space-between; margin-top: 26px; flex-wrap: wrap; gap: 14px;
}
.bt-prix-total { font-family: 'Space Grotesk', sans-serif; font-size: 26px; color: var(--bt-accent); }

.bt-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 15px 28px;
  border-radius: 100px; font-size: 14px; font-weight: 500; border: none; cursor: pointer;
  font-family: 'Work Sans', sans-serif;
}
.bt-btn-primary { background: var(--bt-accent); color: #fbfaf9; box-shadow: 0 14px 30px -10px rgba(94,90,220,0.45); }
.bt-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.bt-btn-ghost { background: none; color: var(--bt-encre-douce); font-size: 13px; padding: 15px 6px; }

/* Petit badge numéroté rond — repère les 3 étapes du parcours directement
   à l'endroit où elles se déroulent (demandé par Remy) : à côté du bouton
   "Choisis ta pièce" dans le titre de l'accueil (1), à côté de "Tu
   personnalises" dans l'atelier (2), et à côté du titre du tiroir panier
   (3, voir plus bas). Partagé (css/boutique.css) car utilisé sur les pages
   où le tiroir panier apparaît, pas seulement l'accueil. */
.bt-etape-num {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 50%;
  border: none; font-size: 11px; font-weight: 600;
  background: var(--bt-accent); color: #fff; font-family: 'Work Sans', sans-serif;
}

/* --- TIROIR PANIER --- */
.bt-overlay { position: fixed; inset: 0; background: rgba(20,18,22,0.28); z-index: 40; }
.bt-drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: min(420px, 100%);
  z-index: 41; padding: 30px; display: flex; flex-direction: column; overflow-y: auto;
}
.bt-drawer-head { display: flex; align-items: center; justify-content: space-between; }
.bt-drawer-close { background: none; border: none; font-size: 22px; color: var(--bt-encre-douce); cursor: pointer; line-height: 1; padding: 4px; }
.bt-cart-item { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid rgba(0,0,0,0.08); margin-top: 16px; gap: 10px; }
.bt-cart-item-nom { font-size: 14px; }
.bt-cart-item-detail { font-size: 12px; color: var(--bt-encre-douce); margin-top: 3px; }
.bt-cart-item-texte { font-size: 12px; color: var(--bt-encre-douce); font-style: italic; margin-top: 3px; white-space: pre-line; }
.bt-cart-remove { background: none; border: none; color: var(--bt-encre-douce); font-size: 16px; cursor: pointer; padding: 2px; }
.bt-cart-empty { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--bt-encre-douce); font-size: 14px; padding: 0 20px; }

.bt-cart-item-qte { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.bt-qte-btn {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.15);
  background: #fff; color: var(--bt-encre); font-size: 15px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0;
}
.bt-qte-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.bt-qte-valeur { min-width: 18px; text-align: center; font-size: 13px; }
.bt-qte-max { font-size: 11px; color: var(--bt-encre-douce); font-style: italic; }

.bt-livraison { margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(0,0,0,0.1); }
.bt-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--bt-encre-douce); margin-top: 10px; }

.bt-total-ligne { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; font-size: 13px; color: var(--bt-encre-douce); }
.bt-total-ligne.grand { font-size: 15px; color: var(--bt-encre); margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(0,0,0,0.1); }
.bt-total-ligne.grand .bt-total-valeur { font-family: 'Space Grotesk', sans-serif; font-size: 24px; color: var(--bt-accent); }

#bt-checkout-container { margin-top: 16px; }

.bt-confirmation { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; padding: 0 10px; }
.bt-confirmation-icone { width: 56px; height: 56px; border-radius: 50%; background: var(--bt-accent); display: flex; align-items: center; justify-content: center; }

/* --- PIED DE PAGE --- */
/* Même structure que .site-footer / .footer-grid / .footer-bottom du reste
   du site (css/style.css) : barre de confiance, puis colonnes Marque /
   Navigation / Contact, puis ligne de copyright. */
.bt-footer { padding: 56px 0 40px; font-size: 13px; color: var(--bt-encre-douce); }
.bt-trust-bar {
  display: flex; align-items: center; justify-content: center; gap: 26px; flex-wrap: wrap;
  padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid rgba(0,0,0,0.08);
}
.bt-trust-item {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bt-encre-douce);
}
.bt-trust-item strong { color: var(--bt-encre); font-weight: 600; }

.bt-footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; text-align: left;
}
@media (max-width: 720px) { .bt-footer-grid { grid-template-columns: 1fr; gap: 32px; } }
.bt-footer-brand-logo { height: 26px; width: auto; display: block; }
.bt-footer-brand p { color: var(--bt-encre-douce); font-size: 14px; max-width: 340px; margin-top: 14px; line-height: 1.6; }
.bt-footer-grid h4 {
  font-family: 'Space Grotesk', sans-serif; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bt-encre-douce); font-weight: 600; margin: 0 0 16px;
}
.bt-footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bt-footer-grid a { color: var(--bt-encre-douce); font-size: 14px; text-decoration: none; }
.bt-footer-grid a:hover { color: var(--bt-accent); }
.bt-footer-bottom {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(0,0,0,0.08);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 11.5px; color: var(--bt-encre-douce); text-align: left;
}

.bt-erreur { font-size: 13px; color: #b3453b; margin-top: 12px; }

.bt-masque { display: none !important; }

/* Avis clients (js/avis.js), affiché sous l'atelier — voir #bt-section-avis
   dans index.html et grfAfficherAvis() dans js/avis.js. Ce même widget
   tourne aussi sur personnalisation.html, qui le stylise via css/style.css
   (variables --lin-dim, --cuivre-vif, etc.) : on redéfinit ici les mêmes
   noms de classes avec les couleurs "verre & lumière" de cette page, sans
   toucher à js/avis.js. */
.avis-resume-haut {
  display:none; align-items:center; gap:5px; text-decoration:none;
  color: var(--bt-accent); font-size:12.5px;
}
.avis-resume-haut:hover { text-decoration:underline; }
.avis-resume-haut .etoiles-mini { letter-spacing:1px; font-size:12px; }
.avis-resume-haut .etoiles-mini .vide { color: rgba(34,31,38,0.25); }
.avis-entete { display:flex; align-items:center; gap:36px; flex-wrap:wrap; margin-bottom:26px; }
.avis-moyenne { font-family: 'Space Grotesk', sans-serif; font-size: 30px; color: var(--bt-accent); }
.avis-etoiles-moyenne { color: var(--bt-accent); font-size:18px; letter-spacing:2px; }
.avis-etoiles-moyenne .vide { color: rgba(34,31,38,0.18); }
.avis-total { color: var(--bt-encre-douce); font-size: 13.5px; }
.avis-repartition { display:flex; flex-direction:column; gap:4px; flex:1; min-width:200px; max-width:320px; }
.avis-repartition-ligne { display:flex; align-items:center; gap:8px; font-size: 11.5px; color: var(--bt-encre-douce); }
.avis-repartition-etiquette { width:26px; flex-shrink:0; }
.avis-repartition-barre { flex:1; height:6px; border-radius:3px; background: rgba(34,31,38,0.08); overflow:hidden; }
.avis-repartition-barre span { display:block; height:100%; background: var(--bt-accent); border-radius:3px; }
.avis-repartition-compte { width:20px; flex-shrink:0; text-align:right; }
.avis-vote { display:flex; gap:10px; margin-top:12px; }
.avis-vote-bouton {
  display:inline-flex; align-items:center; gap:5px; background:none; cursor:pointer;
  border: 1px solid rgba(34,31,38,0.14); border-radius: 20px; padding: 4px 12px;
  color: var(--bt-encre-douce); font-family: 'Work Sans', sans-serif; font-size: 12.5px;
}
.avis-vote-bouton:hover:not(:disabled) { border-color: var(--bt-accent); color: var(--bt-encre); }
.avis-vote-bouton.actif { border-color: var(--bt-accent); color: var(--bt-accent); }
.avis-vote-bouton:disabled { cursor:default; opacity:.75; }
.avis-grille { display:grid; gap: 14px; margin-bottom: 34px; }
.carte-avis-produit { border: 1px solid rgba(34,31,38,0.1); border-radius: 12px; padding: 18px 20px; background: rgba(255,255,255,0.5); }
.carte-avis-produit .avis-ligne1 { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:8px; align-items:center; }
.carte-avis-produit .etoiles { color: var(--bt-accent); letter-spacing:2px; font-size:14px; }
.carte-avis-produit .etoiles .vide { color: rgba(34,31,38,0.18); }
.carte-avis-produit p { color: var(--bt-encre-douce); font-size:14px; }
.badge-verifie {
  display:inline-block; font-family: 'Work Sans', sans-serif; font-size: 10.5px; text-transform:uppercase;
  letter-spacing:.05em; padding: 3px 9px; border-radius: 20px; border: 1px solid #7fbf7f66; color: #4d9a4d;
}
.avis-meta { font-size: 11px; color: var(--bt-encre-douce); }
.bloc-ecrire-avis { border: 1px solid rgba(34,31,38,0.1); border-radius: 12px; padding: 24px; max-width: 520px; background: rgba(255,255,255,0.5); }
.bloc-ecrire-avis h3 { font-size:17px; margin-bottom:16px; }
.avis-etoiles-saisie { display:flex; gap:6px; margin-bottom: 14px; }
.avis-etoiles-saisie button { background:none; border:none; font-size: 26px; line-height:1; cursor:pointer; color: rgba(34,31,38,0.22); padding:0; }
.avis-etoiles-saisie button.pleine { color: var(--bt-accent); }
.bloc-ecrire-avis .field { margin-bottom: 14px; }
.bloc-ecrire-avis input, .bloc-ecrire-avis textarea {
  width: 100%; background: #fff; border: 1px solid rgba(34,31,38,0.14);
  color: var(--bt-encre); padding: 12px 14px; border-radius: 8px; font-family: 'Work Sans', sans-serif;
  font-size: 15px; resize: vertical;
}
.connecte-toi-avis { border: 1px solid rgba(34,31,38,0.1); border-radius: 12px; padding: 24px; color: var(--bt-encre-douce); max-width:520px; }
.connecte-toi-avis a { color: var(--bt-accent); }
.btn {
  display: inline-flex; align-items: center; gap: 10px; font-family: 'Work Sans', sans-serif;
  font-size: 13.5px; font-weight: 500; letter-spacing: 0.01em; padding: 13px 24px;
  border-radius: 100px; cursor: pointer; transition: all 0.22s ease; border: 1px solid transparent;
}
.btn-primary { background: var(--bt-accent); color: #fbfaf9; box-shadow: 0 14px 30px -12px rgba(91,87,224,0.45); }
.btn-primary:hover { background: #4a46c9; }
.btn:disabled, .btn[disabled] { opacity: 0.35; cursor: not-allowed; pointer-events: none; }

/* Protection de base contre la copie du contenu (voir aussi js/protection.js
   pour le blocage du clic droit et du glisser-déposer d'image). Ceci
   décourage la copie occasionnelle — ça ne peut PAS empêcher une copie
   déterminée (outils de développement, capture d'écran, etc.), aucune
   protection purement web ne le peut. Les champs de formulaire, le contenu
   éditable et l'outil de personnalisation (FPD) restent sélectionnables
   normalement, sinon les clients ne pourraient plus coller de texte, copier
   leur numéro de commande, ou utiliser l'éditeur. */
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
input, textarea, [contenteditable="true"], .gr-selectionnable,
#fpd-target, #fpd-target *, .fpd-container, .fpd-container * {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}
img {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none; /* évite le menu "Enregistrer la photo" en appui long sur iOS */
}