/* ═══════════════════════════ Le règlement de la salle de bain ═══════════════════════════
 *
 * Servie **seulement** sur sa fiche (`views/product-affiche.liquid`).
 *
 * ── Le panneau de règles d'une maison, quatre identités ──
 *
 * Le contenu et la structure ne bougent pas : l'enseigne « Règlement intérieur — Salle de bain », le nom
 * de la maison, six articles numérotés (un titre, une règle) et une ligne du bas facultative. Chaque
 * style est un panneau qu'on reconnaît sans le nommer :
 * - **Piscine** : le règlement affiché à l'entrée d'une piscine, bandeau marine sur carrelage aqua ;
 * - **Laiton** : la plaque gravée d'un hôtel ou d'un spa, lettres claires sur fond sombre, rivets ;
 * - **Émail** : la vieille plaque émaillée, ivoire, double bord noir et rouge, vis aux coins ;
 * - **Minimal** : noir et blanc, une police, des filets fins.
 *
 * Polices servies par nous (point 2) : Roboto Condensed, Cormorant Garamond et Inter par `theme.css`,
 * Anton ici. **Aucune marque** de produit d'hygiène, de plateforme de location ni d'entreprise.
 *
 * ── Les palettes ──
 *
 * **Ce sont des couleurs de produit, pas de charte** (point 6 quater) : en clair, toutes ici, en tête,
 * et nulle part ailleurs. `[data-style]` ne nomme pas `.rb` exprès, pour que les échantillons du
 * formulaire se colorent avec les mêmes variables.
 */
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/anton-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/anton-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --b-fond : le mur ou le carrelage derrière la plaque ; --b-joint : le joint du carrelage ; --b-plaque :
   le fond du panneau ; --b-bord : son bord ; --b-filet : le filet intérieur ; --b-bandeau /
   --b-bandeau-texte : l'enseigne ; --b-titre : le nom de la maison et les titres des articles ;
   --b-regle : le texte d'une règle ; --b-num-fond / --b-num-texte : la pastille numérotée ;
   --b-accent : le surtitre, la ligne du bas et le dessin de la baignoire. */
[data-style="Piscine"] {
  --b-fond: #bfe6ea; --b-joint: #8fcdd4; --b-plaque: #ffffff; --b-bord: #14456f; --b-filet: #14456f;
  --b-bandeau: #14456f; --b-bandeau-texte: #ffffff; --b-titre: #14456f; --b-regle: #1e2b37;
  --b-num-fond: #d3392f; --b-num-texte: #ffffff; --b-accent: #14456f;
}
[data-style="Laiton"] {
  --b-fond: #0d0c0a; --b-joint: #0d0c0a; --b-plaque: #1b1814; --b-bord: #c9a45c; --b-filet: #c9a45c;
  --b-bandeau: #1b1814; --b-bandeau-texte: #ecd7a1; --b-titre: #ecd7a1; --b-regle: #f3ead2;
  --b-num-fond: #c9a45c; --b-num-texte: #1b1814; --b-accent: #d9bb7a;
}
[data-style="Émail"] {
  --b-fond: #e6dfcf; --b-joint: #e6dfcf; --b-plaque: #fbf8f1; --b-bord: #23201d; --b-filet: #b3261e;
  --b-bandeau: #fbf8f1; --b-bandeau-texte: #23201d; --b-titre: #23201d; --b-regle: #3a3631;
  --b-num-fond: #b3261e; --b-num-texte: #fbf8f1; --b-accent: #b3261e;
}
[data-style="Minimal"] {
  --b-fond: #ffffff; --b-joint: #ffffff; --b-plaque: #ffffff; --b-bord: #111111; --b-filet: #d6d6d6;
  --b-bandeau: #ffffff; --b-bandeau-texte: #111111; --b-titre: #111111; --b-regle: #3a3a3a;
  --b-num-fond: #111111; --b-num-texte: #ffffff; --b-accent: #555555;
}

/* ── L'affiche ──
 *
 * Tout est en `cqw`. La plaque prend toute la hauteur de l'affiche ; l'écart entre les formats
 * s'absorbe dans la hauteur des six articles (une grille de six rangées égales), jamais dans une taille
 * de texte. `--rb-t` est la taille du texte des articles, 1 ou moins : le serveur l'estime, le script la
 * reprend au pixel. */
.rb {
  --fond: var(--b-fond); --texte: var(--b-regle);
  --rb-t: 1;
  display: flex; flex-direction: column; padding: 4.4cqw;
  background-color: var(--b-fond); color: var(--b-regle); font-family: "Roboto Condensed", system-ui, sans-serif; line-height: 1.15;
}
.rb :where(p, ol) { margin: 0; padding: 0; }
.rb__plaque {
  flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative;
  background: var(--b-plaque); border: .6cqw solid var(--b-bord); border-radius: 1.6cqw; padding: 3.4cqw 4.6cqw 3cqw;
}

/* La tête : la baignoire, le surtitre, « Salle de bain » en très grand, le nom de la maison dessous. */
.rb__tete { flex: none; display: flex; flex-direction: column; align-items: center; text-align: center; }
.rb__icone { width: 11cqw; height: auto; fill: none; stroke: var(--b-accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rb__kicker { margin-top: 1cqw; font-weight: 700; font-size: 2.3cqw; letter-spacing: .3em; text-transform: uppercase; color: var(--b-accent); }
.rb__titre {
  font-family: "Anton", Impact, sans-serif; font-weight: 400; font-size: 11.5cqw; line-height: 1.02; letter-spacing: .04em;
  text-transform: uppercase; color: var(--b-titre); padding-top: .4cqw;
}
.rb__nom {
  width: 100%; white-space: nowrap; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--b-titre);
  font-size: calc(4.2cqw * var(--ech, 1)); line-height: 1.25; margin-top: .6cqw;
}

/* Les six articles : une grille de six rangées égales. */
.rb__articles {
  flex: 1; min-height: 0; list-style: none; margin: 2.8cqw 0 0; display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(6, minmax(0, 1fr)); gap: 1.2cqw;
}
.rb__article { min-width: 0; min-height: 0; display: flex; align-items: center; gap: 2.6cqw; overflow: hidden; padding: .4cqw 0; }
.rb__num {
  flex: none; width: 6.4cqw; height: 6.4cqw; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--b-num-fond); color: var(--b-num-texte); font-family: "Anton", Impact, sans-serif; font-size: 3.7cqw; line-height: 1;
}
.rb__textes { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3cqw; }
.rb__intitule {
  font-family: "Anton", Impact, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .05em; color: var(--b-titre);
  font-size: calc(4.4cqw * var(--rb-t)); line-height: 1.05; overflow-wrap: anywhere;
}
.rb__regle { font-size: calc(3.5cqw * var(--rb-t)); line-height: 1.15; font-weight: 500; color: var(--b-regle); overflow-wrap: anywhere; text-wrap: pretty; }

/* La ligne du bas : facultative, en italique, au pied de la plaque. */
.rb__mention { flex: none; margin-top: 1.8cqw; text-align: center; font-style: italic; font-size: 3cqw; color: var(--b-accent); overflow-wrap: anywhere; }
.rb__mention[hidden] { display: none; }

/* ── Piscine : le règlement de l'entrée du bassin, sur carrelage aqua ── */
.rb[data-style="Piscine"] {
  background-image: linear-gradient(var(--b-joint) .35cqw, transparent .35cqw), linear-gradient(90deg, var(--b-joint) .35cqw, transparent .35cqw);
  background-size: 8.2cqw 8.2cqw;
}
.rb[data-style="Piscine"] .rb__plaque { border-radius: 2.4cqw; box-shadow: 0 1.2cqw 0 rgba(0, 0, 0, .16); }
.rb[data-style="Piscine"] .rb__tete {
  margin: -3.4cqw -4.6cqw 0; padding: 3cqw 4.6cqw 2.4cqw; background: var(--b-bandeau); color: var(--b-bandeau-texte);
  border-radius: 1.6cqw 1.6cqw 0 0;
}
.rb[data-style="Piscine"] .rb__icone, .rb[data-style="Piscine"] .rb__kicker, .rb[data-style="Piscine"] .rb__titre, .rb[data-style="Piscine"] .rb__nom { color: var(--b-bandeau-texte); stroke: currentColor; }
.rb[data-style="Piscine"] .rb__icone { stroke: var(--b-bandeau-texte); }
.rb[data-style="Piscine"] .rb__article + .rb__article { border-top: .25cqw dashed var(--b-bord); padding-top: .8cqw; }

/* ── Laiton : la plaque gravée d'un hôtel, quatre rivets ── */
.rb[data-style="Laiton"] .rb__plaque {
  border: .5cqw solid var(--b-bord); border-radius: .8cqw; padding: 4.4cqw 6cqw 3.4cqw;
  box-shadow: inset 0 0 0 1.5cqw var(--b-plaque), inset 0 0 0 1.8cqw var(--b-filet);
  background-image:
    radial-gradient(circle at 2.9cqw 2.9cqw, var(--b-bord) 0 .6cqw, transparent .75cqw),
    radial-gradient(circle at calc(100% - 2.9cqw) 2.9cqw, var(--b-bord) 0 .6cqw, transparent .75cqw),
    radial-gradient(circle at 2.9cqw calc(100% - 2.9cqw), var(--b-bord) 0 .6cqw, transparent .75cqw),
    radial-gradient(circle at calc(100% - 2.9cqw) calc(100% - 2.9cqw), var(--b-bord) 0 .6cqw, transparent .75cqw);
}
.rb[data-style="Laiton"] { font-family: "Cormorant Garamond", Georgia, serif; }
.rb[data-style="Laiton"] .rb__titre { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; font-size: 8.6cqw; letter-spacing: .06em; white-space: nowrap; }
.rb[data-style="Laiton"] .rb__nom { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; font-style: italic; text-transform: none; letter-spacing: .06em; font-size: calc(5cqw * var(--ech, 1)); }
.rb[data-style="Laiton"] .rb__kicker { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; font-size: 2.6cqw; }
.rb[data-style="Laiton"] .rb__num { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; font-size: 3.8cqw; border-radius: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); width: 7cqw; height: 7cqw; padding-bottom: .3cqw; font-variant-numeric: lining-nums; }
.rb[data-style="Laiton"] .rb__intitule { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; letter-spacing: .08em; font-size: calc(4.4cqw * var(--rb-t)); }
.rb[data-style="Laiton"] .rb__regle { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600; font-size: calc(3.9cqw * var(--rb-t)); }
.rb[data-style="Laiton"] .rb__mention { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 3.4cqw; }

/* ── Émail : la vieille plaque émaillée, double bord, quatre vis ── */
.rb[data-style="Émail"] .rb__plaque {
  border: 1cqw solid var(--b-bord); border-radius: 4cqw; padding: 4.6cqw 6cqw 3.4cqw;
  box-shadow: inset 0 0 0 1.3cqw var(--b-plaque), inset 0 0 0 1.8cqw var(--b-filet);
  background-image:
    radial-gradient(circle at 4.4cqw 4.4cqw, var(--b-bord) 0 .65cqw, transparent .8cqw),
    radial-gradient(circle at calc(100% - 4.4cqw) 4.4cqw, var(--b-bord) 0 .65cqw, transparent .8cqw),
    radial-gradient(circle at 4.4cqw calc(100% - 4.4cqw), var(--b-bord) 0 .65cqw, transparent .8cqw),
    radial-gradient(circle at calc(100% - 4.4cqw) calc(100% - 4.4cqw), var(--b-bord) 0 .65cqw, transparent .8cqw);
}
.rb[data-style="Émail"] .rb__titre { font-size: 12cqw; }
.rb[data-style="Émail"] .rb__nom { color: var(--b-accent); }
.rb[data-style="Émail"] .rb__article + .rb__article { border-top: .3cqw solid var(--b-filet); padding-top: .8cqw; }
.rb[data-style="Émail"] .rb__num { border-radius: .8cqw; width: 5.6cqw; height: 6.4cqw; }
.rb[data-style="Émail"] .rb__mention { font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 2.6cqw; }

/* ── Minimal : noir et blanc, une police ── */
.rb[data-style="Minimal"] { font-family: "Inter", system-ui, sans-serif; }
.rb[data-style="Minimal"] .rb__plaque { border: 0; border-top: .6cqw solid var(--b-bord); border-bottom: .6cqw solid var(--b-bord); border-radius: 0; padding: 4cqw 1cqw 3cqw; }
.rb[data-style="Minimal"] .rb__icone { width: 8.4cqw; stroke-width: 1.8; }
.rb[data-style="Minimal"] .rb__kicker { font-weight: 600; font-size: 2.1cqw; }
.rb[data-style="Minimal"] .rb__titre { font-family: "Inter", system-ui, sans-serif; font-weight: 300; font-size: 11cqw; letter-spacing: -.02em; text-transform: none; }
.rb[data-style="Minimal"] .rb__nom { font-weight: 600; letter-spacing: .2em; font-size: calc(3.6cqw * var(--ech, 1)); }
.rb[data-style="Minimal"] .rb__article + .rb__article { border-top: .2cqw solid var(--b-filet); padding-top: .8cqw; }
.rb[data-style="Minimal"] .rb__num { width: 5.4cqw; height: 5.4cqw; font-family: "Inter", system-ui, sans-serif; font-weight: 700; font-size: 2.9cqw; }
.rb[data-style="Minimal"] .rb__intitule { font-family: "Inter", system-ui, sans-serif; font-weight: 800; letter-spacing: .08em; font-size: calc(3.5cqw * var(--rb-t)); }
.rb[data-style="Minimal"] .rb__regle { font-weight: 400; font-size: calc(3.2cqw * var(--rb-t)); }
.rb[data-style="Minimal"] .rb__mention { font-style: normal; font-weight: 500; font-size: 2.6cqw; letter-spacing: .06em; }

/* ── Le formulaire ── */
.rb-articles { display: grid; gap: 1.2rem; margin-bottom: 1.6rem; }
.rb-articles__titre { font-weight: 700; font-size: 1.6rem; margin: 0; }
.rb-article { padding: 0; border: 0; margin: 0; min-width: 0; display: grid; gap: .8rem; }
.rb-article legend { font-weight: 700; padding: 0; margin-bottom: .6rem; }
.rb-article__rang { display: flex; gap: .6rem; align-items: end; }
.rb-article__champ { flex: 1; min-width: 0; }
.rb-article__champ label { display: block; font-size: 1.3rem; margin-bottom: .3rem; }
.rb-article__champ input { width: 100%; }
.rb-de {
  width: 4.4rem; height: 4.4rem; display: inline-flex; align-items: center; justify-content: center;
  border: .1rem solid currentColor; border-radius: .8rem; background: transparent; cursor: pointer; flex: none;
}
.rb-de svg { width: 2.2rem; height: 2.2rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
.rb-de svg circle { fill: currentColor; stroke: none; }
.rb-de[hidden], .rb-tout[hidden], .rb-idees[hidden] { display: none; }
.rb-tout { justify-self: start; }
.rb-idees { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }
.rb-idees button {
  min-height: 4.4rem; padding: .4rem 1.2rem; border: .1rem solid currentColor; border-radius: 99rem; background: transparent;
  font: inherit; font-size: 1.3rem; cursor: pointer; text-align: left; max-width: 100%;
}
.rb-styles input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.rb-styles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.rb-styles label {
  display: flex; flex-direction: column; align-items: center; gap: .3rem; cursor: pointer; margin: 0;
  font-size: 1.4rem; font-weight: 600; text-align: center; line-height: 1.25;
  border: .15rem solid rgba(var(--color-foreground), .15); border-radius: .8rem; padding: .8rem .6rem;
}
.rb-styles label small { font-weight: 400; font-size: 1.2rem; opacity: .8; }
.rb-styles input:checked + label { border-color: rgb(var(--color-foreground)); }
.rb-styles input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
.rb-echantillon {
  display: grid; gap: .3rem; width: 100%; max-width: 10rem; padding: .5rem;
  background: var(--b-plaque); border: .2rem solid var(--b-bord); border-radius: .6rem;
}
.rb-echantillon b {
  font-family: "Anton", Impact, sans-serif; font-weight: 400; font-size: 1.3rem; letter-spacing: .06em; text-transform: uppercase;
  background: var(--b-bandeau); color: var(--b-bandeau-texte); border-radius: .3rem; line-height: 1.3;
}
.rb-echantillon i { display: block; height: .8rem; border-radius: .3rem; background: var(--b-num-fond); opacity: .85; }
@media (min-width: 750px) { .rb-styles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }