/* La feuille des BLOCS, partagee par la vitrine et par l'apercu du
 * back-office.
 *
 * POURQUOI PARTAGEE ET PAS RECOPIEE. L'apercu de l'editeur doit montrer ce que
 * le client verra. Deux feuilles qui decrivent les memes classes divergent au
 * premier reglage — et c'est l'apercu qui ment, donc le marchand publie une
 * page qu'il n'a pas vue. Un seul fichier, servi par la vitrine et importe
 * par l'admin.
 *
 * Elle ne depend que de jetons que les deux surfaces definissent : l'echelle
 * d'espacement `--s1`...`--s6`, la hauteur tactile `--touch`, et les couleurs
 * du theme. */
/* ---------- Blocs de l'editeur visuel ----------
 *
 * UN JEU DE CLASSES FINI, et c'est la contrepartie assumee de l'editeur : la
 * CSP de la vitrine interdit `style=""`, donc chaque reglage doit exister ici
 * a l'avance. Un marchand ne peut pas inventer une valeur, et c'est tant
 * mieux — des pixels saisis a la main cassent la coherence au premier
 * changement de theme. */
.b { box-sizing: border-box; }
.b-mt-s1 { margin-top: var(--s1); } .b-mt-s2 { margin-top: var(--s2); } .b-mt-s3 { margin-top: var(--s3); }
.b-mt-s4 { margin-top: var(--s4); } .b-mt-s5 { margin-top: var(--s5); } .b-mt-s6 { margin-top: var(--s6); }
.b-mb-s1 { margin-bottom: var(--s1); } .b-mb-s2 { margin-bottom: var(--s2); } .b-mb-s3 { margin-bottom: var(--s3); }
.b-mb-s4 { margin-bottom: var(--s4); } .b-mb-s5 { margin-bottom: var(--s5); } .b-mb-s6 { margin-bottom: var(--s6); }
.b-p-s1 { padding: var(--s1); } .b-p-s2 { padding: var(--s2); } .b-p-s3 { padding: var(--s3); }
.b-p-s4 { padding: var(--s4); } .b-p-s5 { padding: var(--s5); } .b-p-s6 { padding: var(--s6); }

.b-w-contenue { max-width: 68ch; margin-left: auto; margin-right: auto; }
.b-w-large { max-width: 1080px; margin-left: auto; margin-right: auto; }
.b-w-pleine { max-width: none; }
.b-a-centre { text-align: center; }
.b-a-droite { text-align: right; }

.b-f-surface { background: var(--surface); }
.b-f-marque { background: var(--brand); color: var(--brand-ink); }
.b-f-bandeau { background: var(--banner-bg); color: var(--banner-ink); }
/* Sur un fond de marque, le prix et les titres heritent de l'encre du fond :
 * la couleur de marque sur la couleur de marque ne se lit pas. */
.b-f-marque .price, .b-f-marque .b-titre, .b-f-bandeau .price, .b-f-bandeau .b-titre { color: inherit; }
.b-r { border-radius: var(--radius); }

/* `b-sans-tel` / `b-sans-ord` : la SEULE facon de masquer un bloc. Ecrire
 * `display:none` a la main ne doit pas etre le chemin. */
@media (max-width: 719px) { .b-sans-tel { display: none; } }
@media (min-width: 720px) { .b-sans-ord { display: none; } }

.b-titre { margin: 0; }
.b-texte > :first-child { margin-top: 0; }
.b-texte > :last-child { margin-bottom: 0; }
.b-t-petit { font-size: .875rem; }
.b-t-normal { font-size: 1rem; }
.b-t-grand { font-size: clamp(1.25rem, 3.2vw, 1.75rem); }
.b-t-tres-grand { font-size: clamp(1.75rem, 6vw, 3rem); line-height: 1.1; }

.b-image { width: 100%; height: auto; border-radius: inherit; }
.b-bouton { display: inline-flex; align-items: center; min-height: var(--touch); }
.b-separateur { border: 0; border-top: 1px solid var(--line); margin: 0; }
.b-espace { height: var(--s6); }

.b-colonnes { display: grid; gap: var(--s4); }
@media (min-width: 720px) { .b-colonnes { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); } }
.b-achat { display: grid; gap: var(--s3); }