/*
 * Mes créations — la barre au-dessus du configurateur, et la page « Mes créations » du compte.
 *
 * Les boutons gardent les classes du thème (btn, btn-primary) : ils prennent son style. Ici, seulement
 * ce que le thème ne connaît pas. Mesures relevées sur la boutique : titres 42 px / 500, filets #e5e5e5.
 */

/* ======================================================================
   La barre, au-dessus du cadre du configurateur
   ====================================================================== */
.bpmc-barre {
  display: flex;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
  margin: 0 0 8px;
  padding: 14px 18px 14px 16px;
  border: 1px solid #d5dfe9;
  border-left: 4px solid #226caa;
  background: #eef6fd;
  color: #444;
  font-size: 14px;
  line-height: 1.45;
  text-align: left;        /* certains thèmes justifient le texte des pages : ici, jamais */
}
.bpmc-barre--ok { border-color: #d3e7dc; border-left-color: #2a9461; background: #edf9f2; }
.bpmc-barre--alerte { border-color: #efdcc4; border-left-color: #c4650a; background: #fff6ea; }
.bpmc-barre--neutre { border-color: #dfe3e7; border-left-color: #8a949e; background: #f4f6f8; }

.bpmc-barre__icone {
  flex: 0 0 auto;
  display: block;
  width: 26px;
  height: 26px;
  color: #226caa;
}
.bpmc-barre--ok .bpmc-barre__icone { color: #2a9461; }
.bpmc-barre--alerte .bpmc-barre__icone { color: #c4650a; }
.bpmc-barre--neutre .bpmc-barre__icone { color: #8a949e; }
.bpmc-barre__icone svg { display: block; width: 100%; height: 100%; }

.bpmc-barre__texte { flex: 1 1 auto; min-width: 0; }
.bpmc-barre__titre { display: block; font-weight: 600; color: #222; letter-spacing: .2px; }
.bpmc-barre__detail { display: block; color: #666; }

.bpmc-barre__actions { flex: 0 0 auto; display: flex; align-items: center; gap: 22px; }
.bpmc-barre__lien { color: #226caa; text-decoration: underline; white-space: nowrap; cursor: pointer; }
/* Quand le lien est un bouton (« Enregistrer une copie ») : il doit ressembler à un lien. */
button.bpmc-barre__lien { background: none; border: 0; padding: 0; margin: 0; font: inherit; line-height: inherit; }
.bpmc-barre__lien:hover { text-decoration: none; }
.bpmc-barre__bouton { white-space: nowrap; margin: 0; }
.bpmc-barre__bouton[aria-disabled="true"] { opacity: .55; cursor: default; pointer-events: none; }

/* Un bouton qui est un lien (<a class="btn btn-primary">) : le thème colore les liens et son texte devenait
   illisible. Le texte reste celui d'un bouton du thème : blanc, sans soulignement, dans tous les états.
   (Relevé sur la boutique : « Voir mes créations » dans la barre, « Rouvrir… » et « Ouvrir… » dans la page.) */
.bpmc-barre a.btn.btn-primary,
.bpmc-barre a.btn.btn-primary:visited,
.bpmc-barre a.btn.btn-primary:hover,
.bpmc-barre a.btn.btn-primary:focus,
.bpmc-barre a.btn.btn-primary:active,
.bpmc-page a.btn.btn-primary,
.bpmc-page a.btn.btn-primary:visited,
.bpmc-page a.btn.btn-primary:hover,
.bpmc-page a.btn.btn-primary:focus,
.bpmc-page a.btn.btn-primary:active { color: #fff; text-decoration: none; }

/* Sur téléphone : l'icône et le texte sur une ligne, les gestes dessous. Le libellé du bouton peut passer
   à la ligne et le lien et le bouton se rangent l'un sous l'autre s'ils ne tiennent pas côte à côte
   (relevé à 390 px : « Enregistrer dans mon compte » débordait à droite). */
@media (max-width: 767px) {
  .bpmc-barre { flex-wrap: wrap; align-items: flex-start; padding: 12px 14px; gap: 10px 12px; }
  .bpmc-barre__texte { flex: 1 1 0; min-width: 0; }
  .bpmc-barre__actions { flex: 1 1 100%; flex-wrap: wrap; justify-content: space-between; gap: 10px 14px; min-width: 0; }
  .bpmc-barre__bouton { flex: 1 1 auto; min-width: 0; max-width: 100%; white-space: normal; text-align: center; }
}

/* ======================================================================
   La page « Mes créations »
   ====================================================================== */
.bpmc-page { color: #444; }
.bpmc-intro { text-align: center; color: #666; font-size: 14px; margin: 6px 0 22px; }
.bpmc-plafond {
  margin: 0 0 20px;
  padding: 12px 16px;
  border: 1px solid #efdcc4;
  border-left: 4px solid #c4650a;
  background: #fff6ea;
  color: #5a3a12;
  text-align: left;
}

.bpmc-grille {
  display: grid;
  /* minmax(0, 1fr) : une colonne ne s'élargit jamais pour son contenu (un bouton, un nom long) ; sans le 0,
     les trois colonnes débordaient de la page entre 992 et 1 050 px de large. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0 0 0;
}
@media (max-width: 991px) { .bpmc-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Une seule colonne en dessous de 660 px : à 2 colonnes, la carte (247 px à 576 px d'écran) est trop étroite
   pour le texte du bouton. */
@media (max-width: 659px) { .bpmc-grille { grid-template-columns: minmax(0, 1fr); } }

.bpmc-carte {
  position: relative;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #e5e5e5;
  padding: 20px 20px 16px;
  text-align: center;
}
.bpmc-vue {
  display: block;
  width: 210px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 0 auto 12px;
  background: #eef1f6;
}
.bpmc-nom {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .3px;
  color: #444;
  text-transform: none;
  overflow-wrap: anywhere;
  /* Deux lignes au plus (le titre de la carte garde le nom entier). Sans « subgrid » (voir plus bas), on
     réserve les deux lignes pour que la date et le bouton ne se décalent pas d'une carte à l'autre. */
  min-height: 2.6em;
  max-height: 2.6em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.bpmc-date { margin: 2px 0 14px; font-size: 13px; color: #888; }

/* Les cartes d'une même ligne partagent leurs lignes (« subgrid ») : l'image, le nom, la date, le bouton et les
   liens sont chacun à la même hauteur d'une carte à l'autre, et un nom qui passe sur deux lignes agrandit sa
   ligne pour toutes les cartes sans laisser de vide aux autres. Un navigateur sans subgrid garde la mise en
   page ci-dessus (nom réservé sur deux lignes). */
@supports (grid-template-rows: subgrid) {
  .bpmc-grille { row-gap: 0; }
  .bpmc-carte {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: 0;
    margin-bottom: 20px;
  }
  .bpmc-nom { min-height: 0; }
}
.bpmc-rouvrir {
  /* Le bouton d'une carte : sur toute la largeur de la carte, et assez petit pour que « Rouvrir dans le
     configurateur » tienne sur UNE ligne : tous les boutons ont la même forme et la même hauteur. Le thème les
     veut à 16 px, soit 309 px pour ce texte, plus large que la place de la carte. Relevé sur la boutique, la
     carte la plus étroite fait 297 px à 992 px d'écran (255 px utiles) : à 14 px le texte et les marges font
     239 px, il tient. */
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  font-size: 14px;
  letter-spacing: .3px;
  line-height: 20px;
  white-space: normal;
  text-align: center;
}
.bpmc-rouvrir[aria-disabled="true"] { opacity: .55; cursor: default; pointer-events: none; }
/* Sur téléphone la carte fait 258 px à 320 px d'écran (216 px utiles) : texte à 13 px, marges réduites, et une
   hauteur minimale qui sert aussi de cible au doigt. */
@media (max-width: 659px) {
  .bpmc-rouvrir {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 6px 6px;
    font-size: 13px;
    letter-spacing: .2px;
  }
}

.bpmc-liens { margin-top: 12px; font-size: 14px; }
.bpmc-telecharger { font-weight: 700; color: #222; }
.bpmc-effacer { display: inline-block; margin-left: 14px; text-align: left; vertical-align: top; }
.bpmc-carte--ancienne .bpmc-effacer { margin-left: 0; }   /* seul sur sa ligne : centré, sans le décalage du lien d'à côté */
.bpmc-effacer > summary { cursor: pointer; color: #870706; list-style: none; }
.bpmc-effacer > summary::-webkit-details-marker { display: none; }
.bpmc-effacer[open] > summary { text-decoration: underline; }
.bpmc-effacer form { margin: 10px 0 0; padding: 10px 12px; border: 1px solid #e5d3d3; background: #fbf5f5; font-size: 13px; }
.bpmc-effacer form p { margin: 0 0 8px; }

.bpmc-vide { text-align: center; padding: 18px 0 6px; }
.bpmc-vide p { margin: 0 0 12px; color: #666; }

/* Une image de l'ancien configurateur : une étiquette dans le coin de la carte, rien d'autre ne change. */
.bpmc-origine {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  padding: 2px 8px;
  border: 1px solid #d5dbe5;
  background: #eef1f6;
  color: #4a5563;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .4px;
  text-transform: uppercase;
}
.bpmc-vue--absente { display: flex; align-items: center; justify-content: center; color: #888; font-size: 13px; }

/* Le bouton « Ouvrir le configurateur » quand il n'y a que des images de l'ancien configurateur. */
.bpmc-cta { text-align: center; margin: 0 0 22px; }