/* ═══════════════════════════ 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;
}

/* ── Les règles de l'apéro : quatre styles à elle (Minimal reste celui de la salle de bain) ──
 *
 * Deux sont d'époque (Réclame : l'affiche publicitaire lithographiée des années 50 ; Émaillé : la plaque de
 * bistrot, bleu émail et liseré crème), deux sont des terrasses retravaillées (Pastis, Bistrot).
 *
 * --b-liquide / --b-nuage : le verre de l'en-tête, dont l'eau fait un nuage (rien ailleurs) ;
 * --b-store : la seconde rayure de l'auvent du bistrot ;
 * --b-ombre : l'ombre dure du grand titre et de la plaque ; --b-rayon : la seconde teinte des rayons de la
 * Réclame ; --b-moutarde : le ruban et le chiffre de la Réclame ; --b-trame : les points de trame ;
 * --b-ecaille : le fer qui apparaît sous le liseré d'un bord écaillé. */
[data-style="Pastis"] {
  --b-fond: #2a6db0; --b-joint: #f7f2e1; --b-plaque: #f3e7a3; --b-bord: #1b4f8a; --b-filet: #1b4f8a;
  --b-bandeau: #1b4f8a; --b-bandeau-texte: #fdf8e4; --b-titre: #123e72; --b-regle: #1c2b3a;
  --b-num-fond: #1b4f8a; --b-num-texte: #fdf8e4; --b-accent: #1b4f8a; --b-liquide: #f0dc6a; --b-nuage: #fffbe6;
  --b-ombre: #0d2f5c;
}
[data-style="Réclame"] {
  --b-fond: #1c2848; --b-joint: #1c2848; --b-plaque: #f5e7c2; --b-bord: #f2b93b; --b-filet: #1c2848;
  --b-bandeau: #94241a; --b-bandeau-texte: #fbf1d6; --b-titre: #1c2848; --b-regle: #2a2433;
  --b-num-fond: #1c2848; --b-num-texte: #f2b93b; --b-accent: #a32a1b; --b-liquide: #f2b93b; --b-nuage: #fbf1d6;
  --b-rayon: #c8442c; --b-ombre: #131b34; --b-moutarde: #f2b93b; --b-trame: #e6b79b;
}
[data-style="Émaillé"] {
  --b-fond: #d9cbab; --b-joint: #c9b992; --b-plaque: #17407e; --b-bord: #f6eed8; --b-filet: #f6eed8;
  --b-bandeau: #9c2019; --b-bandeau-texte: #fbf5e4; --b-titre: #f6eed8; --b-regle: #fdf9ee;
  --b-num-fond: #c4301f; --b-num-texte: #fdf9ee; --b-accent: #f2c75c; --b-liquide: #f2c75c; --b-nuage: #fdf9ee;
  --b-ombre: #5b4b33; --b-ecaille: #6a645a;
}
[data-style="Bistrot"] {
  --b-fond: #1d1b19; --b-joint: #f3ecdc; --b-plaque: #f7edd2; --b-bord: #7a1e2b; --b-filet: #7a1e2b;
  --b-bandeau: #f7edd2; --b-bandeau-texte: #7a1e2b; --b-titre: #7a1e2b; --b-regle: #2b2320;
  --b-num-fond: #7a1e2b; --b-num-texte: #f7edd2; --b-accent: #7a1e2b; --b-store: #ffffff; --b-ombre: #3d0e16;
}

/* ── Les règles du bord : les quatre palettes, en tête avec les autres (couleurs de produit, point 6 quater) ──
 * Refaites le 9 nov. 2026 (Fred : « moches, vieillottes ») : plus de parchemin, de laiton ni de planches, des aplats
 * francs. --b-hublot / --b-hublot-2 : l'anneau et le filet du hublot ; --b-hublot-fond / --b-barre : son fond et la barre à roue
 * quand il n'a pas de photo ; --b-accent-2 : la seconde couleur (le rouge de la marinière, le corail du lagon, l'ambre du
 * couchant, l'orange de la bouée) ; --b-carte : le fond d'un article quand il en a un ; --b-ciel-1 à --b-ciel-5 : les cinq
 * crans du dégradé du couchant. */
[data-style="Marinière"] {
  --b-fond: #f6f1e7; --b-joint: #1d3157; --b-plaque: #f6f1e7; --b-bord: #1d3157; --b-filet: #cfd5e0;
  --b-bandeau: #1d3157; --b-bandeau-texte: #f6f1e7; --b-titre: #1d3157; --b-regle: #34405a;
  --b-num-fond: #d63a2b; --b-num-texte: #ffffff; --b-accent: #c8321f; --b-accent-2: #d63a2b;
  --b-hublot: #f6f1e7; --b-hublot-2: #d63a2b; --b-hublot-fond: #e4e9f2; --b-barre: #1d3157;
}
[data-style="Sunset"] {
  --b-fond: #6b2a8a; --b-joint: #ffe29a; --b-plaque: #6b2a8a; --b-bord: #ffb067; --b-filet: #ffe29a;
  --b-bandeau: #c23a7e; --b-bandeau-texte: #ffffff; --b-titre: #ffe29a; --b-regle: #ffffff;
  --b-num-fond: #ffe29a; --b-num-texte: #2a1650; --b-accent: #ffe29a; --b-accent-2: #ffb067;
  --b-hublot: #ffffff; --b-hublot-2: #ffb067; --b-hublot-fond: #4a2170; --b-barre: #ffe29a;
  --b-carte: rgba(36, 16, 72, .74);
  --b-ciel-1: #2a1650; --b-ciel-2: #6b2a8a; --b-ciel-3: #a82f74; --b-ciel-4: #ff6b57; --b-ciel-5: #ffb067;
}
[data-style="Lagon"] {
  --b-fond: #f7f0e1; --b-joint: #0a7f86; --b-plaque: #f7f0e1; --b-bord: #0a7f86; --b-filet: #d9cfb8;
  --b-bandeau: #0a7f86; --b-bandeau-texte: #ffffff; --b-titre: #0b4c56; --b-regle: #3b4a52;
  --b-num-fond: #d43b25; --b-num-texte: #ffffff; --b-accent: #b8381f; --b-accent-2: #ff6a55;
  --b-hublot: #ffffff; --b-hublot-2: #ff6a55; --b-hublot-fond: #e3f4f2; --b-barre: #086a70;
  --b-carte: #ffffff;
}
[data-style="Bouée"] {
  --b-fond: #ffffff; --b-joint: #111111; --b-plaque: #ffffff; --b-bord: #111111; --b-filet: #111111;
  --b-bandeau: #ff5a1f; --b-bandeau-texte: #111111; --b-titre: #111111; --b-regle: #2b2b2b;
  --b-num-fond: #ff5a1f; --b-num-texte: #111111; --b-accent: #111111; --b-accent-2: #ff5a1f;
  --b-hublot: #111111; --b-hublot-2: #ff5a1f; --b-hublot-fond: #ffe6da; --b-barre: #111111;
}

/* ── 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: .9cqw; }
.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; }

/* ═══════════ Les règles de l'apéro : quatre styles à elle, même panneau ═══════════
 *
 * Le verre de l'en-tête est dessiné par le gabarit ; le liquide et le nuage ne se colorent que là où une variable
 * les définit (Pastis, Réclame, Émaillé), ailleurs ils restent au trait.
 *
 * **Ce qui est dessiné ici est imprimé** : tout passe par des fonds, des bordures et des pseudo-éléments de la plaque
 * (jamais un `box-shadow` de l'affiche elle-même, que `cssDeRendu` remet à zéro à la fabrication). Rien n'est un
 * filtre, rien n'est une image : ce qui se rend à l'écran se rend à 300 dpi. */
.rb__liquide { fill: var(--b-liquide, none); stroke: none; }
.rb__nuage { fill: var(--b-nuage, none); stroke: none; }
.rb__icone--verre { stroke-width: 1.9; width: 13cqw; }

/* Damion pour le nom écrit à la main de la Réclame (déclarée ici, comme Anton : elle ne charge que sur cette fiche). */
@font-face {
  font-family: "Damion";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/damion-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: "Damion";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/damion-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;
}

/* L'accent d'un É majuscule d'Anton monte plus haut que sa ligne : sans air entre le surtitre et le titre, il mord sur le
 * surtitre (« L'APÉRO » sous « LES RÈGLES DE »). Mesuré à l'encre dans l'essai, pas à la boîte. */
.rb[data-variante="apero"] .rb__kicker { margin-bottom: 1.6cqw; }
.rb[data-variante="apero"] .rb__titre { padding-top: 1.6cqw; }
/* L'anneau d'une pastille déborde de sa boîte : l'article (qui coupe ce qui dépasse) lui laisse un peu de place à gauche. */
.rb[data-variante="apero"] .rb__article { padding-left: .9cqw; }
/* Ce qui se pose sur le fond de la plaque passe devant ses décors (`::before`, premier enfant). */
.rb[data-variante="apero"] .rb__articles, .rb[data-variante="apero"] .rb__mention { position: relative; }

/* ── Pastis : la terrasse du Sud — nappe vichy, plaque jaune opalin en relief, auvent festonné, verre dont l'eau fait un nuage ── */
.rb[data-style="Pastis"] {
  padding: 6cqw;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .3) 0 4cqw, transparent 4cqw 8cqw),
    repeating-linear-gradient(90deg, var(--b-fond) 0 4cqw, var(--b-joint) 4cqw 8cqw);
}
.rb[data-style="Pastis"] .rb__plaque {
  border-radius: 2.4cqw;
  box-shadow: 1.4cqw 1.6cqw 0 var(--b-ombre), inset 0 0 0 1cqw var(--b-plaque), inset 0 0 0 1.3cqw var(--b-bord);
  background-image: radial-gradient(rgba(255, 255, 255, .45) .18cqw, transparent .24cqw);
  background-size: 1.7cqw 1.7cqw;
}
.rb[data-style="Pastis"] .rb__tete {
  position: relative; 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;
}
/* Les festons de l'auvent, sous le bandeau : un demi-cercle toutes les 3 unités. */
.rb[data-style="Pastis"] .rb__tete::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1.55cqw; height: 1.6cqw;
  background: radial-gradient(circle at 50% 0, var(--b-bandeau) 0 1.45cqw, transparent 1.5cqw) 0 0 / 3cqw 1.6cqw repeat-x;
}
.rb[data-style="Pastis"] .rb__kicker, .rb[data-style="Pastis"] .rb__titre, .rb[data-style="Pastis"] .rb__nom { color: var(--b-bandeau-texte); }
.rb[data-style="Pastis"] .rb__titre { text-shadow: .45cqw .45cqw 0 var(--b-ombre); }
.rb[data-style="Pastis"] .rb__icone { stroke: var(--b-bandeau-texte); width: 17cqw; }
.rb[data-style="Pastis"] .rb__articles { margin-top: 3.4cqw; }
.rb[data-style="Pastis"] .rb__article + .rb__article { border-top: .3cqw dotted var(--b-bord); padding-top: .8cqw; }
/* Les pastilles sont des glaçons jetés sur la table : un peu de travers, un anneau crème et un anneau bleu. */
.rb[data-style="Pastis"] .rb__num { box-shadow: 0 0 0 .35cqw var(--b-plaque), 0 0 0 .65cqw var(--b-bord); }
.rb[data-style="Pastis"] .rb__article:nth-child(odd) .rb__num { transform: rotate(-7deg); }
.rb[data-style="Pastis"] .rb__article:nth-child(even) .rb__num { transform: rotate(6deg); }
/* Une vaguelette au-dessus de la ligne du bas. */
.rb[data-style="Pastis"] .rb__mention::before {
  content: ""; display: block; height: 1.2cqw; margin-bottom: 1.2cqw;
  background: radial-gradient(circle at 50% 0, transparent 0 .85cqw, var(--b-bord) .9cqw 1.3cqw, transparent 1.35cqw) 0 0 / 2.4cqw 1.2cqw repeat-x;
}
.rb[data-style="Pastis"] .rb__mention { font-weight: 700; }

/* ── Réclame : l'affiche publicitaire lithographiée des années 50 — rayons, ruban, ombre dure, trame de points ── */
.rb[data-style="Réclame"] { padding: 4.6cqw; font-family: "Roboto Condensed", system-ui, sans-serif; }
.rb[data-style="Réclame"] .rb__plaque {
  border: .8cqw solid var(--b-bord); border-radius: 1cqw; padding: 0 4.6cqw 3cqw;
  box-shadow: inset 0 0 0 .6cqw var(--b-plaque), inset 0 0 0 .9cqw var(--b-filet);
  background-image: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(150, 105, 35, .2));
}
/* La trame de points (Ben-Day) dans les deux coins du bas, qui s'estompent vers le centre. */
.rb[data-style="Réclame"] .rb__plaque::before {
  content: ""; position: absolute; inset: 1cqw; pointer-events: none;
  background: radial-gradient(circle, var(--b-trame) 0 .32cqw, transparent .38cqw) 0 0 / 1.5cqw 1.5cqw;
  -webkit-mask: radial-gradient(circle at 0 100%, black 4cqw, transparent 17cqw), radial-gradient(circle at 100% 100%, black 4cqw, transparent 17cqw);
  mask: radial-gradient(circle at 0 100%, black 4cqw, transparent 17cqw), radial-gradient(circle at 100% 100%, black 4cqw, transparent 17cqw);
}
.rb[data-style="Réclame"] .rb__tete {
  position: relative; margin: 0 -4.6cqw; padding: 2.4cqw 4.6cqw 2cqw; color: var(--b-bandeau-texte);
  background: repeating-conic-gradient(from 0deg at 50% 34%, var(--b-rayon) 0 5deg, var(--b-bandeau) 5deg 10deg);
  border-bottom: .9cqw solid var(--b-filet);
}
.rb[data-style="Réclame"] .rb__icone { stroke: var(--b-bandeau-texte); width: 13cqw; }
/* Le ruban : une bande moutarde aux bouts fourchus. */
.rb[data-style="Réclame"] .rb__kicker {
  margin: .8cqw 0 1.8cqw; padding: .8cqw 7cqw; font-size: 2.3cqw; background: var(--b-moutarde); color: var(--b-fond);
  clip-path: polygon(0 0, 100% 0, 96.5% 50%, 100% 100%, 0 100%, 3.5% 50%);
}
.rb[data-style="Réclame"] .rb__titre { font-size: 12.5cqw; color: var(--b-bandeau-texte); text-shadow: .6cqw .6cqw 0 var(--b-ombre); }
.rb[data-style="Réclame"] .rb__nom {
  font-family: "Damion", "Brush Script MT", cursive; font-weight: 400; text-transform: none; letter-spacing: .02em; line-height: 1.2;
  font-size: calc(6cqw * var(--ech, 1)); color: var(--b-bandeau-texte); text-shadow: .3cqw .3cqw 0 var(--b-ombre); margin-top: .4cqw;
}
.rb[data-style="Réclame"] .rb__articles { margin-top: 2cqw; }
.rb[data-style="Réclame"] .rb__article + .rb__article { border-top: .25cqw dotted var(--b-filet); padding-top: .8cqw; }
.rb[data-style="Réclame"] .rb__num { box-shadow: 0 0 0 .35cqw var(--b-plaque), 0 0 0 .65cqw var(--b-filet); }
.rb[data-style="Réclame"] .rb__intitule { letter-spacing: .04em; }
.rb[data-style="Réclame"] .rb__regle { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 700; font-size: calc(4.3cqw * var(--rb-t)); line-height: 1.1; font-variant-numeric: lining-nums; }
.rb[data-style="Réclame"] .rb__mention {
  margin-top: 1.4cqw; padding-top: 1.2cqw; border-top: .55cqw double var(--b-filet);
  font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; font-size: 3.6cqw;
}

/* ── Émaillé : la plaque de bistrot, bleu émail, liseré crème, rivets, bords écaillés, reflet — sur un mur de plâtre ── */
.rb[data-style="Émaillé"] {
  padding: 5.4cqw;
  background-color: var(--b-fond);
  background-image:
    radial-gradient(rgba(90, 70, 40, .16) .22cqw, transparent .3cqw),
    radial-gradient(rgba(255, 255, 255, .28) .2cqw, transparent .28cqw);
  background-size: 2.6cqw 2.6cqw, 2.6cqw 2.6cqw;
  background-position: 0 0, 1.3cqw 1.3cqw;
}
.rb[data-style="Émaillé"] .rb__plaque {
  border: .95cqw solid var(--b-bord); border-radius: 4.6cqw; padding: 3.8cqw 6cqw 2.8cqw;
  box-shadow: 1.2cqw 1.8cqw 0 rgba(70, 50, 25, .32), inset 0 0 0 1.1cqw var(--b-plaque), inset 0 0 0 1.45cqw var(--b-filet);
  background-image:
    radial-gradient(circle at 4.6cqw 4.6cqw, var(--b-bord) 0 .7cqw, transparent .85cqw),
    radial-gradient(circle at calc(100% - 4.6cqw) 4.6cqw, var(--b-bord) 0 .7cqw, transparent .85cqw),
    radial-gradient(circle at 4.6cqw calc(100% - 4.6cqw), var(--b-bord) 0 .7cqw, transparent .85cqw),
    radial-gradient(circle at calc(100% - 4.6cqw) calc(100% - 4.6cqw), var(--b-bord) 0 .7cqw, transparent .85cqw);
}
/* Les éclats d'émail (le fer apparaît sous le liseré) et le reflet en biais, légers : ils ne changent aucune lecture.
   Posés sur l'affiche et calés sur la plaque (même retrait que son padding) : un pseudo-élément de la plaque qui
   déborderait de sa boîte ferait croire à la fabrication que les dernières lignes sont coupées. */
.rb[data-style="Émaillé"] { position: relative; }
.rb[data-style="Émaillé"]::after {
  content: ""; position: absolute; inset: 5.4cqw; border-radius: 4.6cqw; pointer-events: none;
  background-image:
    radial-gradient(ellipse .85cqw .45cqw at 13% .5cqw, var(--b-ecaille) 0 70%, transparent 78%),
    radial-gradient(ellipse .55cqw .35cqw at 71% .45cqw, var(--b-ecaille) 0 70%, transparent 78%),
    radial-gradient(ellipse .8cqw .45cqw at 34% calc(100% - .5cqw), var(--b-ecaille) 0 70%, transparent 78%),
    radial-gradient(ellipse .6cqw .4cqw at 88% calc(100% - .45cqw), var(--b-ecaille) 0 70%, transparent 78%),
    radial-gradient(ellipse .45cqw .85cqw at .5cqw 23%, var(--b-ecaille) 0 70%, transparent 78%),
    radial-gradient(ellipse .35cqw .6cqw at .45cqw 66%, var(--b-ecaille) 0 70%, transparent 78%),
    radial-gradient(ellipse .45cqw .8cqw at calc(100% - .5cqw) 41%, var(--b-ecaille) 0 70%, transparent 78%),
    radial-gradient(ellipse .4cqw .55cqw at calc(100% - .45cqw) 82%, var(--b-ecaille) 0 70%, transparent 78%),
    linear-gradient(112deg, transparent 0 33%, rgba(255, 255, 255, .06) 33% 40%, transparent 40% 45%, rgba(255, 255, 255, .04) 45% 48%, transparent 48%);
}
.rb[data-style="Émaillé"] .rb__icone { stroke: var(--b-bord); width: 11cqw; }
.rb[data-style="Émaillé"] .rb__kicker { color: var(--b-accent); }
.rb[data-style="Émaillé"] .rb__titre { font-size: 12cqw; text-shadow: .4cqw .4cqw 0 rgba(0, 0, 0, .35); }
/* Le nom entre deux filets, comme la ligne d'une enseigne. */
.rb[data-style="Émaillé"] .rb__nom {
  color: var(--b-accent); border-block: .3cqw solid var(--b-filet); padding: .6cqw 0; margin-top: 1.8cqw;
}
.rb[data-style="Émaillé"] .rb__articles { margin-top: 2cqw; }
.rb[data-style="Émaillé"] .rb__article + .rb__article { border-top: .25cqw dotted var(--b-filet); padding-top: .8cqw; }
.rb[data-style="Émaillé"] .rb__num { box-shadow: 0 0 0 .35cqw var(--b-plaque), 0 0 0 .65cqw var(--b-filet); }
.rb[data-style="Émaillé"] .rb__intitule { color: var(--b-accent); }
/* La ligne du bas : un bandeau rouge qui va d'un bord à l'autre du liseré, comme celui d'une plaque de comptoir. */
.rb[data-style="Émaillé"] .rb__mention {
  margin: 1.2cqw -2.8cqw -.4cqw; padding: .8cqw 2cqw; background: var(--b-bandeau); color: var(--b-bandeau-texte); border-radius: .8cqw;
  font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 2.6cqw;
}

/* ── Bistrot : le damier du sol, l'auvent rayé, une plaque crème en Cormorant, double filet et fleuron ── */
.rb[data-style="Bistrot"] {
  font-family: "Cormorant Garamond", Georgia, serif;
  background-image: conic-gradient(var(--b-fond) 25%, var(--b-joint) 0 50%, var(--b-fond) 0 75%, var(--b-joint) 0);
  background-size: 10cqw 10cqw;
}
.rb[data-style="Bistrot"] .rb__plaque {
  border: .5cqw solid var(--b-bord); border-radius: 1.6cqw; padding-top: 10.4cqw;
  box-shadow: 0 1cqw 0 rgba(0, 0, 0, .3), inset 0 0 0 1cqw var(--b-plaque), inset 0 0 0 1.3cqw var(--b-filet);
  background-image: radial-gradient(rgba(122, 30, 43, .07) .2cqw, transparent .26cqw);
  background-size: 1.9cqw 1.9cqw;
}
.rb[data-style="Bistrot"] .rb__plaque::before {
  content: ""; position: absolute; z-index: 1; top: -.5cqw; left: -.5cqw; right: -.5cqw; height: 6.6cqw;
  background:
    linear-gradient(rgba(255, 255, 255, .24), transparent 55%, rgba(0, 0, 0, .14)),
    repeating-linear-gradient(90deg, var(--b-bord) 0 4.4cqw, var(--b-store) 4.4cqw 8.8cqw);
  border-radius: 1.6cqw 1.6cqw 0 0;
  -webkit-mask: linear-gradient(black, black) 0 0 / 100% 4.4cqw no-repeat, radial-gradient(circle at 50% 0, black 2.2cqw, transparent 2.3cqw) 0 4.3cqw / 4.4cqw 2.3cqw repeat-x;
  mask: linear-gradient(black, black) 0 0 / 100% 4.4cqw no-repeat, radial-gradient(circle at 50% 0, black 2.2cqw, transparent 2.3cqw) 0 4.3cqw / 4.4cqw 2.3cqw repeat-x;
  filter: drop-shadow(0 .5cqw 0 rgba(0, 0, 0, .22));
}
.rb[data-style="Bistrot"] .rb__kicker { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; font-size: 2.7cqw; }
/* « —— LES RÈGLES DE —— » : un filet de chaque côté du surtitre. */
.rb[data-style="Bistrot"] .rb__kicker::before, .rb[data-style="Bistrot"] .rb__kicker::after {
  content: ""; display: inline-block; width: 7cqw; height: .25cqw; margin: 0 1.8cqw; background: currentColor; vertical-align: middle;
}
.rb[data-style="Bistrot"] .rb__titre { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; font-size: 11cqw; letter-spacing: .06em; text-shadow: .3cqw .3cqw 0 rgba(122, 30, 43, .2); }
.rb[data-style="Bistrot"] .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)); }
/* Le fleuron sous le nom : un losange. */
.rb[data-style="Bistrot"] .rb__nom::after {
  content: ""; display: block; width: 1.3cqw; height: 1.3cqw; margin: 1.1cqw auto 0; background: var(--b-bord); transform: rotate(45deg);
}
.rb[data-style="Bistrot"] .rb__article + .rb__article { border-top: .25cqw solid var(--b-filet); padding-top: .8cqw; }
.rb[data-style="Bistrot"] .rb__num { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; font-size: 4.2cqw; border-radius: .6cqw; width: 5.8cqw; height: 6.4cqw; padding-bottom: .3cqw; font-variant-numeric: lining-nums; box-shadow: 0 0 0 .3cqw var(--b-plaque), 0 0 0 .5cqw var(--b-filet); }
.rb[data-style="Bistrot"] .rb__intitule { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; letter-spacing: .08em; font-size: calc(4.6cqw * var(--rb-t)); }
.rb[data-style="Bistrot"] .rb__regle { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600; font-size: calc(3.9cqw * var(--rb-t)); font-variant-numeric: lining-nums; }
.rb[data-style="Bistrot"] .rb__mention { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 3.4cqw; }

/* ═══════════ Les règles du bord : quatre styles à elle, un hublot en tête ═══════════
 *
 * Refaits le 9 nov. 2026 (Fred : « moches, vieillottes ») : quatre aplats francs, de grands titres, de l'air, plus
 * de parchemin, de laiton ni de planches. Marinière (rayures bretonnes, ouvre la fiche), Sunset (un ciel de fin de journée,
 * dégradé), Lagon (turquoise, carte blanche aux coins ronds), Bouée (blanc, noir et orange vif, aligné à gauche).
 * Le hublot de l'en-tête porte la photo du capitaine quand le client en dépose une, la barre à roue sinon. Il est dessiné
 * par le gabarit ; son anneau et son fond sont des variables de style. **Rien n'est un filtre ni une image** : des
 * dégradés, des bordures et des ombres pleines, qui se rendent à 300 dpi comme à l'écran, et rien qui déborde de
 * l'affiche (point 18 : un pseudo-élément plus grand que sa boîte ferait croire à la fabrication que les dernières lignes
 * sont coupées). */
/* Le hublot : un rond qui rogne la photo, un anneau et un filet (des ombres pleines), aucune ombre de verre. */
/* **Le bloc** porte la taille et la place (`--hs`), le rond est dedans, plein : la tête du capitaine détouré passe devant son anneau (voir plus bas). */
.rb__hublot-bloc { position: relative; flex: none; width: var(--hs, 14cqw); height: var(--hs, 14cqw); margin: 0 auto 3.4cqw; }
.rb__hublot {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  background: var(--b-hublot-fond);
  box-shadow: 0 0 0 1cqw var(--b-hublot), 0 0 0 1.5cqw var(--b-hublot-2);
}
.rb__hublot img {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover;
  object-position: var(--photo-x, 50%) var(--photo-y, 30%);
  transform: scale(var(--photo-zoom, 1)); transform-origin: var(--photo-x, 50%) var(--photo-y, 30%);
}
.rb__hublot[data-photo] { touch-action: pan-y; cursor: grab; }
/* Le capitaine détouré : l'image, recadrée au plus juste sur la personne, est posée au bas du rond — d'un quart plus haute que lui, donc la tête dépasse d'un
   quart de son diamètre, et les épaules s'arrêtent à son bord —, et sa partie haute est redessinée par-dessus, non rognée : la tête passe devant l'anneau. Le
   cadrage au doigt n'a plus lieu d'être : la personne est déjà cadrée. */
.rb__hublot-bloc[data-portrait] .rb__hublot { cursor: default; touch-action: auto; }
.rb__hublot-bloc[data-portrait] .rb__hublot img,
.rb__hublot-haut {
  position: absolute; inset: auto; left: 50%; bottom: 0; height: 125%; width: auto; max-width: 150%;
  object-fit: contain; object-position: 50% 100%; transform: translateX(-50%);
}
.rb__hublot-haut { z-index: 2; pointer-events: none; clip-path: inset(-10% -40% 56% -40%); }
.rb__hublot-haut[hidden] { display: none; }
.rb__hublot-bloc:not([data-portrait]) .rb__hublot-haut { display: none; }
.rb__hublot-vide { position: absolute; inset: 0; display: grid; place-items: center; cursor: pointer; }
.rb__barre { width: 74%; height: auto; fill: none; stroke: var(--b-barre); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rb__barre circle { fill: var(--b-hublot-fond); }

/* Ce que les quatre styles ont en commun : pas de cadre, la tête et les six articles posés à même l'affiche. */
.rb[data-variante="bateau"] { padding: 0; font-family: "Inter", "Roboto Condensed", system-ui, sans-serif; }
.rb[data-variante="bateau"] .rb__plaque { border: 0; border-radius: 0; background: transparent; box-shadow: none; padding: 0 7cqw 5cqw; }
.rb[data-variante="bateau"] .rb__tete { position: relative; }
.rb[data-variante="bateau"] .rb__kicker { font-weight: 700; font-size: 2.4cqw; letter-spacing: .34em; margin: 0 0 1cqw; }
.rb[data-variante="bateau"] .rb__titre { font-size: 11cqw; line-height: 1; padding: 0; letter-spacing: .02em; }
.rb[data-variante="bateau"] .rb__nom { font-size: calc(4.4cqw * var(--ech, 1)); letter-spacing: .16em; margin-top: 1.6cqw; }
.rb[data-variante="bateau"] .rb__articles { margin-top: 3.6cqw; gap: 0; position: relative; }
.rb[data-variante="bateau"] .rb__article { gap: 3cqw; padding: .6cqw 0; }
.rb[data-variante="bateau"] .rb__textes { gap: .5cqw; }
.rb[data-variante="bateau"] .rb__intitule { font-size: calc(4cqw * var(--rb-t)); letter-spacing: .06em; }
.rb[data-variante="bateau"] .rb__regle { font-size: calc(3.4cqw * var(--rb-t)); font-weight: 500; line-height: 1.18; }
.rb[data-variante="bateau"] .rb__mention { position: relative; margin-top: 2.4cqw; font-style: normal; font-weight: 600; font-size: 3cqw; letter-spacing: .02em; }

/* ── Marinière : des rayures bretonnes en bandeau, le hublot à cheval dessus, un rouge franc ── */
.rb[data-style="Marinière"] .rb__plaque { padding-top: 0; padding-bottom: 7cqw; }
.rb[data-style="Marinière"] .rb__tete { padding-top: 13.5cqw; }
.rb[data-style="Marinière"] .rb__hublot-bloc { --hs: 13cqw; margin-bottom: 3cqw; }
.rb[data-style="Marinière"] .rb__hublot-bloc:has(.rb__hublot[data-photo]) { --hs: 29cqw; }
.rb[data-style="Marinière"] .rb__tete::before {
  content: ""; position: absolute; top: 0; left: -7cqw; right: -7cqw; height: 20cqw; z-index: 0;
  background: repeating-linear-gradient(180deg, var(--b-bord) 0 2.8cqw, var(--b-plaque) 2.8cqw 4cqw);
}
.rb[data-style="Marinière"] .rb__tete > * { position: relative; z-index: 1; }
.rb[data-style="Marinière"] .rb__plaque::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3.6cqw; background: var(--b-bord); }
.rb[data-style="Marinière"] .rb__kicker { color: var(--b-accent); }
.rb[data-style="Marinière"] .rb__titre { font-size: 12cqw; color: var(--b-titre); }
.rb[data-style="Marinière"] .rb__nom { color: var(--b-num-texte); background: var(--b-accent-2); padding: .9cqw 3.4cqw; border-radius: 99cqw; width: auto; max-width: 100%; }
.rb[data-style="Marinière"] .rb__article + .rb__article { border-top: .2cqw solid var(--b-filet); padding-top: 1.3cqw; }
.rb[data-style="Marinière"] .rb__num { width: 6.8cqw; height: 6.8cqw; font-size: 3.9cqw; }
.rb[data-style="Marinière"] .rb__regle { color: var(--b-regle); }
.rb[data-style="Marinière"] .rb__mention { color: var(--b-accent); }

/* ── Sunset : un ciel de fin de journée, un soleil en halos autour du hublot, des cartes sombres translucides ── */
.rb[data-style="Sunset"] {
  background-image:
    radial-gradient(circle at 50% 14cqw, rgba(255, 226, 154, .5) 0 11cqw, rgba(255, 176, 103, .26) 11.2cqw 17cqw, rgba(255, 176, 103, .13) 17.2cqw 25cqw, transparent 25.2cqw),
    linear-gradient(180deg, var(--b-ciel-1) 0, var(--b-ciel-2) 22%, var(--b-ciel-3) 48%, var(--b-ciel-4) 76%, var(--b-ciel-5) 100%);
}
.rb[data-style="Sunset"] .rb__plaque { padding-top: 5.6cqw; padding-bottom: 4.4cqw; }
.rb[data-style="Sunset"] .rb__hublot-bloc { --hs: 14cqw; }
.rb[data-style="Sunset"] .rb__hublot-bloc:has(.rb__hublot[data-photo]) { --hs: 29cqw; }
.rb[data-style="Sunset"] .rb__kicker { color: var(--b-bandeau-texte); }
.rb[data-style="Sunset"] .rb__titre { font-size: 12cqw; color: var(--b-bandeau-texte); }
.rb[data-style="Sunset"] .rb__nom { color: var(--b-titre); }
.rb[data-style="Sunset"] .rb__articles { gap: 1cqw; margin-top: 3cqw; }
.rb[data-style="Sunset"] .rb__article { background: var(--b-carte); border-radius: 2.6cqw; padding: .6cqw 2.4cqw; gap: 2.6cqw; }
.rb[data-style="Sunset"] .rb__num { width: 6.4cqw; height: 6.4cqw; background: transparent; border: .35cqw solid var(--b-num-fond); color: var(--b-num-fond); font-size: 3.4cqw; }
.rb[data-style="Sunset"] .rb__intitule { color: var(--b-titre); }
.rb[data-style="Sunset"] .rb__mention { color: var(--b-ciel-1); font-weight: 700; }

/* ── Lagon : un bandeau turquoise aux coins du bas arrondis, des cartes blanches sur le sable, du corail ── */
.rb[data-style="Lagon"] .rb__plaque { padding-top: 0; }
.rb[data-style="Lagon"] .rb__hublot-bloc { --hs: 12.4cqw; margin-bottom: 3cqw; }
.rb[data-style="Lagon"] .rb__hublot-bloc:has(.rb__hublot[data-photo]) { --hs: 29cqw; }
.rb[data-style="Lagon"] .rb__tete { margin: 0 -7cqw; padding: 5.6cqw 7cqw 4.8cqw; background: var(--b-bandeau); border-radius: 0 0 8cqw 8cqw; color: var(--b-bandeau-texte); }
.rb[data-style="Lagon"] .rb__kicker, .rb[data-style="Lagon"] .rb__titre, .rb[data-style="Lagon"] .rb__nom { color: var(--b-bandeau-texte); }
.rb[data-style="Lagon"] .rb__titre { font-family: "Montserrat", "Inter", system-ui, sans-serif; font-weight: 800; font-size: 11.4cqw; letter-spacing: 0; }
.rb[data-style="Lagon"] .rb__nom { text-transform: none; letter-spacing: .04em; font-size: calc(5.2cqw * var(--ech, 1)); font-family: "Montserrat", "Inter", system-ui, sans-serif; }
.rb[data-style="Lagon"] .rb__articles { gap: 1cqw; margin-top: 3cqw; }
.rb[data-style="Lagon"] .rb__article { background: var(--b-carte); border-radius: 2.4cqw; padding: .6cqw 2.4cqw; gap: 2.6cqw; box-shadow: 0 .5cqw 0 rgba(10, 79, 86, .1); }
.rb[data-style="Lagon"] .rb__num { width: 6.4cqw; height: 6.4cqw; border-radius: 1.8cqw; font-family: "Montserrat", "Inter", system-ui, sans-serif; font-weight: 800; font-size: 3.4cqw; }
.rb[data-style="Lagon"] .rb__intitule { font-family: "Montserrat", "Inter", system-ui, sans-serif; font-weight: 800; letter-spacing: .02em; font-size: calc(3.7cqw * var(--rb-t)); }
.rb[data-style="Lagon"] .rb__mention { color: var(--b-accent); }

/* ── Bouée : blanc, noir et orange vif, tout à gauche, le hublot en haut à droite — l'allure d'une affiche suisse ── */
.rb[data-style="Bouée"] .rb__plaque { padding-top: 8cqw; padding-bottom: 6cqw; }
.rb[data-style="Bouée"] .rb__tete { align-items: flex-start; text-align: left; border-bottom: 1.2cqw solid var(--b-accent-2); padding-bottom: 4cqw; }
.rb[data-style="Bouée"] .rb__hublot-bloc { --hs: 22cqw; position: absolute; right: 0; top: 0; margin: 0; }
.rb[data-style="Bouée"] .rb__hublot { box-shadow: 0 0 0 1cqw var(--b-hublot), 0 0 0 2cqw var(--b-plaque), 0 0 0 3cqw var(--b-hublot-2); }
.rb[data-style="Bouée"] .rb__kicker { color: var(--b-titre); letter-spacing: .3em; margin-bottom: 1.2cqw; }
.rb[data-style="Bouée"] .rb__titre { font-family: "Inter", system-ui, sans-serif; font-weight: 900; font-size: min(15.5cqw, calc(52cqw / (var(--rb-tl, 4) * .8))); letter-spacing: -.045em; line-height: .95; }
.rb[data-style="Bouée"] .rb__nom { font-size: calc(4.6cqw * var(--ech, 1)); letter-spacing: .1em; font-weight: 800; margin-top: 2.2cqw; }
.rb[data-style="Bouée"] .rb__articles { margin-top: 1cqw; }
.rb[data-style="Bouée"] .rb__article + .rb__article { border-top: .22cqw solid var(--b-filet); padding-top: 1.1cqw; }
.rb[data-style="Bouée"] .rb__num { width: 8cqw; height: auto; background: transparent; border-radius: 0; color: var(--b-num-fond); font-family: "Inter", system-ui, sans-serif; font-weight: 900; font-size: 7.4cqw; justify-content: flex-start; }
.rb[data-style="Bouée"] .rb__intitule { font-family: "Inter", system-ui, sans-serif; font-weight: 900; letter-spacing: .04em; font-size: calc(3.6cqw * var(--rb-t)); }
.rb[data-style="Bouée"] .rb__mention { text-align: left; color: var(--b-titre); font-weight: 800; letter-spacing: .01em; font-size: 3cqw; }
.rb[data-style="Bouée"] .rb__mention::before { content: ""; display: block; width: 8cqw; height: 1cqw; background: var(--b-accent-2); margin-bottom: 1.4cqw; }

/* ── 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)); } }

/* La casquette du capitaine : le bouton, ses messages, et l'attente pendant que la casquette se pose. Un `[hidden]` doit l'emporter sur `.button`. */
.affiche__capitaine { display: grid; gap: .6rem; margin: .8rem 0; }
.affiche__capitaine [hidden] { display: none !important; }
.rb__hublot[data-attente] img { opacity: .55; }
.rb__hublot[data-attente]::after {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: 3; width: 42%; height: 42%; margin: -21% 0 0 -21%;
  box-sizing: border-box; border-radius: 50%; border: 1.1cqw solid var(--b-bord); border-top-color: transparent;
  background: var(--b-plaque); animation: tourne .9s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .rb__hublot[data-attente]::after { animation-duration: 2.4s; } }

/* Avec une photo, la tête dépasse du rond d'un tiers de son diamètre au plus : de l'air au-dessus, par style (rien ne sort de l'affiche). */
.rb[data-style="Sunset"] .rb__plaque:has(.rb__hublot[data-photo]) { padding-top: 11cqw; }
.rb[data-style="Lagon"] .rb__tete:has(.rb__hublot[data-photo]) { padding-top: 11cqw; }
.rb[data-style="Bouée"] .rb__plaque:has(.rb__hublot[data-photo]) { padding-top: 13cqw; }
.rb[data-style="Sunset"]:has(.rb__hublot[data-photo]) {
  background-image:
    radial-gradient(circle at 50% 25cqw, rgba(255, 226, 154, .5) 0 15cqw, rgba(255, 176, 103, .26) 15.2cqw 22cqw, rgba(255, 176, 103, .13) 22.2cqw 31cqw, transparent 31.2cqw),
    linear-gradient(180deg, var(--b-ciel-1) 0, var(--b-ciel-2) 22%, var(--b-ciel-3) 48%, var(--b-ciel-4) 76%, var(--b-ciel-5) 100%);
}
/* Avec une photo la tête est grande : le titre cède un peu de sa hauteur aux trois styles centrés, pour que les six articles gardent leur place. */
.rb[data-style="Marinière"] .rb__tete:has(.rb__hublot[data-photo]) .rb__titre { font-size: 9.6cqw; }
.rb[data-style="Sunset"] .rb__tete:has(.rb__hublot[data-photo]) .rb__titre { font-size: 9.6cqw; }
.rb[data-style="Lagon"] .rb__tete:has(.rb__hublot[data-photo]) .rb__titre { font-size: 9cqw; }
.rb[data-style="Bouée"] .rb__hublot-bloc:has(.rb__hublot[data-photo]) { --hs: 34cqw; }
/* Marinière : le rond, plus grand, remonte dans le bandeau de rayures (la tête dépasse sur lui), les rayures restent à 20 cqw. */
.rb[data-style="Marinière"] .rb__tete:has(.rb__hublot[data-photo]) { padding-top: 9cqw; }
.rb[data-style="Marinière"] .rb__tete:has(.rb__hublot[data-photo]) .rb__hublot-bloc { margin-bottom: 2.2cqw; }
.rb[data-style="Marinière"] .rb__plaque:has(.rb__hublot[data-photo]) { padding-bottom: 6cqw; }