/* Genere par app/site/scripts/feuille-o.ts depuis 2-CE-QU-ON-VA-CONSTRUIRE/da/la-page-ruches.html (sha256 01ca25965c6ce311dbf8976910e15a51fb9fbf294bc957b46658bffddfa1790a) : ne pas editer, regenerer (D-325). */
/* La page Königin — inséré tel quel par build_da_konigin.py, après le CSS de la charte O. */

/* ══ LES BOUTONS — quatre propositions ; .btns-a par défaut ══ */
.o .btn { font: inherit; cursor: pointer; border: 0; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  font-weight: 650; font-size: 15px; line-height: 1.2; letter-spacing: .005em; white-space: nowrap; transition: background-color .18s, color .18s, box-shadow .18s, transform .18s, background-size .25s; }
.o .btn:focus-visible { outline: 3px solid var(--brun); outline-offset: 3px; }
.o .btn:disabled { opacity: .45; cursor: not-allowed; }
.o .btn-fleche { display: inline-block; flex: none; width: 26px; height: 26px; border-radius: var(--o-rayon-rond); position: relative; transition: transform .2s; }
.o .btn-fleche::before { content: ""; position: absolute; left: 8px; top: 12px; width: 10px; height: 2px; background: currentColor; }
.o .btn-fleche::after { content: ""; position: absolute; left: 12px; top: 9px; width: 6px; height: 6px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.o .btn:hover .btn-fleche { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .o .btn, .o .btn-fleche { transition: none; } }

/* A — la pilule */
.btns-a .btn { border-radius: var(--o-rayon-pilule); }
.btns-a .btn-1, .btns-a .btn-pro, .btns-a .btn-jaune { padding: 9px 9px 9px 24px; min-height: 50px; }
.btns-a .btn-1 { background: var(--brun); color: #FFF8EA; }
.btns-a .btn-1:hover { background: #3E1A0C; }
.btns-a .btn-pro { background: var(--nuit); color: var(--jaune); }
.btns-a .btn-jaune { background: var(--jaune); color: var(--nuit); }
.btns-a .btn-1 .btn-fleche, .btns-a .btn-pro .btn-fleche { background: var(--jaune); color: var(--nuit); width: 32px; height: 32px; }
.btns-a .btn-jaune .btn-fleche { background: var(--nuit); color: var(--jaune); width: 32px; height: 32px; }
.btns-a .btn-1 .btn-fleche::before, .btns-a .btn-pro .btn-fleche::before, .btns-a .btn-jaune .btn-fleche::before { left: 10px; top: 15px; }
.btns-a .btn-1 .btn-fleche::after, .btns-a .btn-pro .btn-fleche::after, .btns-a .btn-jaune .btn-fleche::after { left: 14px; top: 12px; }
.btns-a .btn-2 { background: var(--o-bloc); color: var(--brun); padding: 12px 22px; min-height: 46px; box-shadow: inset 0 0 0 1.5px rgba(85,37,19,.35); }
.btns-a .btn-2:hover { box-shadow: inset 0 0 0 1.5px var(--brun); }
.btns-a .btn-3 { color: var(--brun); padding: 6px 2px; border-radius: var(--o-rayon-net); background: linear-gradient(#FFE27A, #FFE27A) 0 100% / 100% 2px no-repeat; }
.btns-a .btn-3:hover { background-size: 100% 100%; }

/* B — le bouton doux */
.btns-b .btn { border-radius: var(--o-rayon-carte); }
.btns-b .btn-1 { background-color: var(--brun); color: #FFF8EA; padding: 15px 20px 15px 24px; background-image: linear-gradient(180deg, #6A301A 0%, var(--brun) 55%, #481F10 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 1px rgba(42,18,9,.25), 0 4px 10px -4px rgba(42,18,9,.45); }
.btns-b .btn-1:hover { transform: translateY(-1px); }
.btns-b .btn-2 { background: linear-gradient(180deg, var(--o-bloc), #FBF6EA); color: var(--brun); padding: 13px 20px; box-shadow: inset 0 0 0 1px var(--trait), 0 2px 4px -2px rgba(42,18,9,.18); }
.btns-b .btn-3 { background: transparent; color: var(--brun); padding: 8px 4px; text-decoration: underline; text-decoration-color: var(--ambre); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.btns-b .btn-pro { background-color: var(--nuit); color: var(--jaune); padding: 15px 20px 15px 24px; background-image: linear-gradient(180deg, #3D1D10, var(--nuit)); box-shadow: inset 0 1px 0 rgba(253,212,14,.18), 0 4px 10px -4px rgba(42,18,9,.5); }
.btns-b .btn-jaune { background-color: var(--jaune); color: var(--nuit); padding: 15px 20px 15px 24px; background-image: linear-gradient(180deg, #FFE45A, var(--jaune)); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 4px 10px -4px rgba(0,0,0,.5); }

/* C — la flèche ronde */
.btns-c .btn-1, .btns-c .btn-pro, .btns-c .btn-jaune { position: relative; isolation: isolate; background: transparent; padding: 12px 20px 12px 8px; border-radius: var(--o-rayon-pilule); }
.btns-c .btn-1 { color: var(--brun); }
.btns-c .btn-1::before, .btns-c .btn-pro::before, .btns-c .btn-jaune::before { content: ""; position: absolute; z-index: -1; left: 0; top: 50%; width: 48px; height: 48px; transform: translateY(-50%); border-radius: var(--o-rayon-pilule); background: var(--jaune); transition: width .28s ease; }
.btns-c .btn-1:hover::before, .btns-c .btn-pro:hover::before, .btns-c .btn-jaune:hover::before { width: 100%; }
.btns-c .btn-fleche { order: -1; color: var(--nuit); margin: 0 4px 0 3px; }
.btns-c .btn-pro { color: var(--nuit); } .btns-c .btn-pro::before { background: var(--nuit); } .btns-c .btn-pro .btn-fleche { color: var(--jaune); }
.btns-c .btn-pro:hover { color: var(--jaune); }
.btns-c .btn-jaune { color: var(--sur-brun); } .btns-c .btn-jaune:hover { color: var(--nuit); }
.btns-c .btn-2 { background: transparent; color: var(--brun); padding: 12px 20px; border-radius: var(--o-rayon-pilule); box-shadow: inset 0 0 0 1.5px var(--brun); }
.btns-c .btn-3 { background: transparent; color: var(--brun); padding: 8px 2px; text-decoration: underline; text-decoration-color: var(--jaune); text-decoration-thickness: 3px; text-underline-offset: 6px; }

/* D — le rectangle net */
.btns-d .btn { border-radius: var(--o-rayon-doux); }
.btns-d .btn-1 { background: var(--brun); color: #FFF8EA; padding: 14px 16px 14px 22px; }
.btns-d .btn-1:hover { background: #3E1A0C; }
.btns-d .btn-2 { background: var(--o-bloc); color: var(--brun); padding: 13px 20px; box-shadow: inset 0 0 0 1.5px var(--brun); }
.btns-d .btn-3 { background: transparent; color: var(--brun); padding: 8px 2px; text-decoration: underline; text-decoration-color: var(--ambre); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.btns-d .btn-pro { background: var(--nuit); color: var(--jaune); padding: 14px 16px 14px 22px; }
.btns-d .btn-jaune { background: var(--jaune); color: var(--nuit); padding: 14px 16px 14px 22px; }

/* Avant — le bouton d'aujourd'hui */
.btns-avant .btn { border-radius: var(--o-rayon-net); text-transform: uppercase; letter-spacing: .06em; font-size: 14px; font-weight: 700; }
.btns-avant .btn-fleche { display: none; }
.btns-avant .btn-1, .btns-avant .btn-2 { background: var(--brun); color: var(--sur-brun); padding: 15px 22px; }
.btns-avant .btn-3 { background: transparent; color: var(--brun); padding: 8px 0; text-transform: none; letter-spacing: 0; text-decoration: underline; }
.btns-avant .btn-pro { background: var(--nuit); color: var(--jaune); padding: 15px 22px; }
.btns-avant .btn-jaune { background: var(--jaune); color: var(--nuit); padding: 15px 22px; }

/* ══ LA MARQUE ══ */
.o.k-page .fil a { color: var(--second); }
.o .k-ouv { padding: 26px 0 30px; }
.o .k-ouv-grille { display: grid; grid-template-columns: 1fr 1.05fr; gap: 40px; align-items: center; }
.o .k-ouv h1 { margin: 0 0 18px; font-size: 64px; line-height: 1; letter-spacing: -.026em; color: var(--brun); max-width: 12ch; }
.o .k-ouv .chapo-c { font-size: 19px; max-width: 40ch; }
.o .k-gestes { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.o .k-chiffres { display: flex; gap: 36px; margin: 36px 0 0; padding-top: 18px; border-top: 1px solid var(--trait); }
.o .k-chiffres dt { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--second); }
.o .k-chiffres dd { margin: 2px 0 0; font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-weight: 700; font-size: 30px; color: var(--brun); }
.o .k-ouv-visuel { position: relative; height: 430px; }
.o .k-inox { position: absolute; inset: 0 -40px 0 0; background: radial-gradient(58% 62% at 52% 52%, var(--o-bloc) 0%, #EEF0EE 38%, rgba(232,234,230,.6) 58%, rgba(252,249,241,0) 76%); }
.o .k-inox::after { content: ""; position: absolute; left: 8%; right: 2%; bottom: 5%; height: 2px; background: linear-gradient(90deg, rgba(253,212,14,0), var(--o-jaune) 30%, var(--o-jaune) 70%, rgba(253,212,14,0)); }
.o .k-ouv-visuel img { position: absolute; left: 50%; top: 50%; height: 92%; width: auto; max-width: none; transform: translate(-50%, -50%); mix-blend-mode: multiply; }
.o .k-titre { margin: 0 0 22px; }
.o .k-titre h2 { margin: 0; font-size: 40px; letter-spacing: -.02em; line-height: 1.08; color: var(--brun); }
.o .k-familles { padding-top: 36px; padding-bottom: 70px; }
.o .k-etapes { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 28px 16px; }
.o .k-autour-titre { margin: 44px 0 14px; }
.o .k-autour { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.o .k-tuile { position: relative; background: var(--bloc); text-decoration: none; display: grid; grid-template-rows: 190px auto; border-radius: var(--o-rayon-champ); overflow: hidden; transition: transform .18s, box-shadow .18s; }
.o .k-tuile:hover { transform: translateY(-2px); box-shadow: var(--o-ombre-survol); }
.o .k-tuile-img { background: var(--o-bloc); display: grid; place-items: center; overflow: hidden; }
.o .k-tuile-img img { width: 80%; height: 88%; object-fit: contain; mix-blend-mode: multiply; }
.o .k-tuile-txt { position: relative; padding: 18px 20px 18px; display: grid; gap: 4px; background: linear-gradient(180deg, var(--o-bloc) 0%, #FBF6EA 100%); }
.o .k-tuile b { font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-size: 23px; line-height: 1.15; color: var(--brun); }
.o .k-tuile-txt > span { font-size: 15px; color: var(--second); }
.o .k-tuile-bas { margin: 12px 0 0; padding-top: 10px; display: flex; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--encre); font-weight: 600;
  background: linear-gradient(90deg, rgba(170,121,43,.35), rgba(170,121,43,0)) top left / 100% 1px no-repeat; }
/* ✏️ 23/09, Ruben : « on dirait une catégorie informative, pas interactive » -- la tuile dit qu'elle se clique : le
   compte devient un lien souligné de jaune suivi d'une flèche, le survol pose un contour jaune et pousse la flèche. */
.o a.k-tuile .k-tuile-bas > span:first-child { color: var(--brun); text-decoration: underline; text-decoration-color: var(--jaune); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.o a.k-tuile .k-tuile-bas > span:first-child::after { content: "\2192"; display: inline-block; margin-left: 6px; transition: transform .18s; }
.o a.k-tuile:hover .k-tuile-bas > span:first-child::after { transform: translateX(3px); }
.o a.k-tuile:hover { outline: 2px solid var(--jaune); outline-offset: -2px; }
.o a.k-tuile:focus-visible { outline: 3px solid var(--brun); outline-offset: 2px; }
.o .k-etape { position: absolute; top: -17px; left: 18px; width: 34px; height: 34px; display: grid; place-items: center; font-style: normal; background: var(--jaune); color: var(--nuit); font-weight: 800; font-size: 15px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.o .k-t-extracteurs { grid-column: span 2; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr !important; }
.o .k-t-extracteurs .k-tuile-img { min-height: 250px; }
.o .k-t-extracteurs .k-tuile-txt { align-content: end; background: linear-gradient(90deg, var(--o-bloc) 0%, #FBF3DF 100%); padding: 26px 24px 22px; }
.o .k-t-extracteurs b { font-size: 34px; }
.o .k-t-extracteurs .k-etape { left: auto; right: 18px; top: 18px; }
.o .k-autour .k-tuile { grid-template-rows: 150px auto; }
.o .k-pro .pro-carte { border-radius: var(--o-rayon-champ); }
.o .k-pro .pro-carte > b { font-size: 21px; }

/* ══ LA FAMILLE ══ */
.o .k-f-tete { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: end; padding-top: 22px; padding-bottom: 6px; }
.o .k-f-tete h1 { margin: 0 0 12px; font-size: 64px; line-height: 1.02; color: var(--brun); letter-spacing: -.024em; }
.o .k-f-tete .chapo-c { margin: 0; max-width: 50ch; font-size: 19px; }
.o .k-f-tete .chapo-c b { color: var(--encre); }
.o .k-sommaire { display: grid; padding: 10px 18px; background: var(--bloc); border-radius: var(--o-rayon-champ); min-width: 250px; }
.o .k-sommaire a { font-size: 14px; font-weight: 600; color: var(--brun); text-decoration: none; padding: 8px 0; display: flex; justify-content: space-between; gap: 12px; }
.o .k-sommaire a::after { content: "↓"; color: var(--ambre); }
.o .k-sommaire a + a { background: linear-gradient(90deg, var(--trait), rgba(227,214,180,0)) top left / 100% 1px no-repeat; }
.o .k-questions { padding-top: 36px; display: grid; gap: 22px; }
.o .k-q-ligne { display: grid; grid-template-columns: 230px 1fr; gap: 24px; align-items: stretch; }
.o .k-q-tete { display: grid; align-content: center; gap: 8px; }
.o .k-q-tete h2 { margin: 0; font-size: 27px; line-height: 1.12; color: var(--brun); letter-spacing: -.012em; }
.o .k-q-num { width: 30px; height: 30px; display: grid; place-items: center; font-weight: 800; font-size: 14px; background: var(--brun); color: var(--sur-brun); border-radius: var(--o-rayon-rond); }
.o .k-q-note { margin: 0; font-size: 13px; color: var(--second); }
.o .k-brouillon { margin: 0; font-size: 13px; color: var(--second); padding-left: 254px; }
.o .k-choix-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.o .k-choix-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.o .k-choix { font: inherit; text-align: left; cursor: pointer; border: 0; border-radius: var(--o-rayon-petit); padding: 16px 18px; display: flex; gap: 16px; align-items: center; color: var(--brun);
  background: var(--o-bloc); box-shadow: inset 0 0 0 1px rgba(227,214,180,.8); transition: box-shadow .15s, background-color .15s; }
.o .k-choix:hover { box-shadow: inset 0 0 0 2px var(--ambre); }
.o .k-choix:focus-visible { outline: 3px solid var(--brun); outline-offset: 2px; }
.o .k-choix-on { box-shadow: inset 0 0 0 2px var(--brun); background: #FFF6D6; }
.o .k-choix-v { flex-direction: column; align-items: flex-start; }
.o .k-choix-txt { display: grid; gap: 4px; }
.o .k-choix-txt b { font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-size: 22px; color: var(--brun); line-height: 1.1; }
.o .k-choix-txt span { font-size: 14px; color: var(--second); line-height: 1.45; }
.o .k-choix-txt em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--encre); margin-top: 4px; }
.o .dessin-type { flex: none; color: var(--brun); }

.o .k-liste-zone { display: grid; grid-template-columns: 236px 1fr; gap: 34px; padding-top: 50px; padding-bottom: 60px; }
.o .k-filtres { align-self: start; position: sticky; top: 12px; }
.o .k-filtres-tete { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 6px; }
.o .k-filtres-tete b { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--brun); }
.o .k-raz { font: inherit; font-size: 13px; background: none; border: 0; color: var(--brun); text-decoration: underline; cursor: pointer; padding: 6px 0; }
.o .k-critere { border: 0; margin: 0; padding: 14px 0 12px; display: flex; flex-wrap: wrap; gap: 6px; background: linear-gradient(90deg, rgba(170,121,43,.45), rgba(170,121,43,0)) top left / 100% 1px no-repeat; }
.o .k-critere legend { float: left; width: 100%; padding: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--encre); }
.o .k-pas { font: inherit; font-size: 13px; display: inline-flex; gap: 7px; align-items: center; min-height: 34px; padding: 5px 11px; cursor: pointer; background: var(--o-bloc); color: var(--encre); border: 0; border-radius: 17px; box-shadow: inset 0 0 0 1px var(--trait); }
.o .k-pas i { font-style: normal; font-size: 12px; color: var(--second); }
.o .k-pas[aria-pressed="true"] { background: var(--brun); color: var(--sur-brun); box-shadow: none; }
.o .k-pas[aria-pressed="true"] i { color: var(--second-brun); }
.o .k-pas:disabled { cursor: not-allowed; color: #6E6354; background: transparent; box-shadow: inset 0 0 0 1px rgba(227,214,180,.6); }
.o .k-pas:disabled i { color: #6E6354; }
.o .k-pas:focus-visible { outline: 3px solid var(--brun); outline-offset: 2px; }
.o .k-resultats-tete { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0 0 12px; }
.o .k-resultats-tete p { margin: 0; font-size: 15px; color: var(--second); }
.o .k-resultats-tete p b { font-size: 20px; color: var(--encre); }
.o .k-vue { display: inline-flex; padding: 4px; background: var(--o-bloc); border-radius: var(--o-rayon-pilule); box-shadow: inset 0 0 0 1px var(--trait); }
.o .k-vue button { font: inherit; font-size: 14px; font-weight: 600; border: 0; background: transparent; color: var(--second); padding: 8px 16px; border-radius: var(--o-rayon-pilule); cursor: pointer; }
.o .k-vue button[aria-pressed="true"] { background: var(--brun); color: #FFF8EA; }
.o .k-constat { margin: 0 0 16px; padding: 12px 16px; font-size: 14px; color: var(--second); background: linear-gradient(90deg, #FFF1C4, rgba(255,241,196,0) 90%); border-radius: var(--o-rayon-doux); }
.o .k-constat b { color: var(--encre); }

.o .k-modeles { display: grid; gap: 14px; }
.o .k-modeles[hidden] { display: none; }
.o .k-modele { display: grid; grid-template-columns: 160px 1fr; gap: 22px; background: var(--bloc); border-radius: var(--o-rayon-petit); padding: 18px 22px 16px 16px; }
.o .k-modele[hidden] { display: none; }
.o .k-mod-img { display: grid; align-content: start; justify-items: center; }
.o .k-mod-img img { width: 150px; height: 150px; object-fit: contain; mix-blend-mode: multiply; }
.o .k-photo-note { margin-top: 6px; font-size: 12px; color: var(--second); text-align: center; }
.o .k-mod-sur { margin: 0 0 6px; }
.o .k-badge-n { display: inline-block; font-size: 12px; font-weight: 700; color: var(--nuit); background: #FFE9A0; padding: 3px 10px; border-radius: var(--o-rayon-pilule); }
.o .k-modele h3 { margin: 0 0 6px; font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-size: 25px; line-height: 1.15; color: var(--brun); }
.o .k-modele h3 span { font-family: var(--corps); font-size: 16px; font-weight: 600; color: var(--second); }
.o .k-mod-resume { margin: 0 0 12px; font-size: 15px; color: var(--second); }
.o .k-mod-resume b { color: var(--encre); }
.o .k-versions { width: 100%; border-collapse: collapse; font-family: var(--corps); font-size: 15px; color: var(--encre); }
.o .k-versions th { text-align: left; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--second); font-weight: 700; padding: 0 12px 8px 8px; }
.o .k-versions td { padding: 10px 12px 10px 8px; color: var(--second); border-top: 1px solid #EFE6D0; }
.o .k-versions tr[hidden] { display: none; }
.o .k-versions .k-v-ref { font-size: 13px; width: 112px; }
.o .k-versions th.k-diff { color: #7A4B00; }
.o .k-change { display: inline-block; margin-left: 6px; font-style: normal; font-size: 10px; letter-spacing: .08em; color: var(--nuit); background: #FFE27A; padding: 1px 7px; border-radius: var(--o-rayon-pilule); vertical-align: 1px; }
.o .k-versions td.k-diff { font-weight: 800; font-size: 17px; color: var(--encre); background: #FFF3C4; }
.o .k-v-prix small { font-size: 11px; letter-spacing: .1em; color: var(--brun); font-weight: 700; }
.o .k-v-geste { text-align: right; width: 118px; }
.o .k-coche { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--brun); cursor: pointer; }
.o .k-coche input { width: 18px; height: 18px; accent-color: var(--brun); margin: 0; }
.o .k-coche-mini { font-size: 13px; }
.o .k-textes { margin-top: 10px; }
.o .k-textes summary { cursor: pointer; font-size: 14px; font-weight: 700; color: var(--brun); padding: 6px 0; }
.o .k-textes summary span { font-weight: 500; color: var(--second); }
.o .k-textes-grille { display: grid; grid-template-columns: repeat(var(--n), minmax(0,1fr)); gap: 10px; margin-top: 8px; }
.o .k-texte { background: var(--o-cire); border-radius: var(--o-rayon-champ); padding: 12px 14px; font-size: 14px; line-height: 1.55; color: var(--second); }
.o .k-texte p { margin: 0; }
.o .k-texte-ref { font-size: 12px; font-weight: 700; color: var(--brun) !important; margin-bottom: 6px !important; }
.o mark { background: #FFE27A; color: var(--nuit); padding: 0 2px; border-radius: var(--o-rayon-trace); font-weight: 700; }
.o mark.k-pale { background: #FFF1C4; font-weight: 500; }
.o .k-texte-autre { display: block; margin-top: 6px; font-size: 12px; font-style: italic; color: var(--second); }
.o .k-v-prix { white-space: nowrap; }
.o .k-type-groupe { display: grid; gap: 12px; }
.o .k-type-groupe[hidden] { display: none; }
.o .k-type-groupe + .k-type-groupe { margin-top: 22px; }
.o .k-type-titre { margin: 4px 0 0; font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-size: 30px; color: var(--brun); display: flex; align-items: baseline; gap: 12px; }
.o .k-type-titre span { font-family: var(--corps); font-size: 14px; font-weight: 600; color: var(--second); }
.o .k-modele-seul { grid-template-columns: 96px 1fr; padding: 12px 22px 8px 12px; align-items: center; }
.o .k-modele-seul .k-mod-img img { width: 84px; height: 84px; }
.o .k-modele-seul .k-mod-sur, .o .k-modele-seul thead { display: none; }
.o .k-modele-seul h3 { font-size: 21px; margin: 0; }
.o .k-modele-seul .k-versions td { border-top: 0; padding-top: 2px; padding-bottom: 4px; }

.o .k-grille { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.o .k-grille[hidden] { display: none; }
.o .k-machine { position: relative; background: var(--bloc); border-radius: var(--o-rayon-petit); padding: 0 18px 16px; display: grid; align-content: start; overflow: hidden; }
.o .k-machine[hidden] { display: none; }
.o .k-machine-img { position: relative; height: 180px; margin: 0 -18px 12px; display: grid; place-items: center; background: var(--o-bloc); }
.o .k-machine-img img { width: 72%; height: 88%; object-fit: contain; mix-blend-mode: multiply; }
.o .k-type { position: absolute; left: 12px; top: 12px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--brun); background: #FFF1C4; padding: 4px 9px; border-radius: var(--o-rayon-pilule); }
.o .k-machine-nom { margin: 0 0 10px; font-family: var(--corps); font-size: 15px; line-height: 1.35; font-weight: 700; color: var(--encre); }
.o .k-specs { margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.o .k-specs dt { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--second); }
.o .k-specs dd { margin: 0; font-size: 14px; font-weight: 700; color: var(--encre); white-space: nowrap; }
.o .k-machine .px-a { margin: 0 0 10px; }
.o .k-machine .px-a::before { margin-bottom: 8px; width: var(--o-taille-touche); }
.o .k-machine .px-ht b { font-size: 25px; }
.o .k-machine-pied { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.o .k-plus { margin: 20px auto 0; display: flex; }
.o .k-plus[hidden] { display: none; }
.o .k-vide { padding: 30px; background: var(--bloc); color: var(--second); }

.o .k-cmp-barre { position: sticky; bottom: 0; z-index: 5; background: var(--nuit); color: var(--sur-brun); padding: 10px 0; }
.o .k-cmp-barre[hidden] { display: none; }
.o .k-cmp-barre .w { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.o .k-cmp-barre p { margin: 0; font-size: 15px; }
.o .k-cmp-barre p span { color: var(--second-brun); }
.o .k-cmp-barre .w > div { display: flex; gap: 18px; align-items: center; }
.o .k-cmp-barre .btn-3 { color: var(--sur-brun); }
.o .k-comparer { padding: 40px 0 44px; background: var(--o-bloc); }
.o .k-comparer[hidden] { display: none; }
.o .k-cmp-tete { display: flex; align-items: end; gap: 24px; margin: 0 0 18px; }
.o .k-cmp-tete > div { margin-right: auto; }
.o .k-cmp-tete h2 { margin: 0; font-size: 32px; color: var(--brun); }
.o .k-cmp-table { overflow-x: auto; }
.o .k-cmp-table table { width: 100%; border-collapse: collapse; font-family: var(--corps); font-size: 15px; color: var(--encre); table-layout: fixed; }
.o .k-cmp-table th { width: 180px; text-align: left; vertical-align: top; font-size: 13px; color: var(--second); padding: 12px 14px 12px 0; font-weight: 700; }
.o .k-cmp-table th i { display: block; font-style: normal; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #7A4B00; margin-top: 2px; }
.o .k-cmp-table td { vertical-align: top; padding: 12px 14px; color: var(--encre); border-top: 1px solid #F1EADB; }
.o .k-cmp-table td img { width: 120px; height: 120px; object-fit: contain; mix-blend-mode: multiply; }
.o .k-cmp-table tr.c-diff td { font-weight: 650; }
.o .k-cmp-table tr.c-diff th { color: var(--encre); }
.o .k-cmp-table tr.c-diff th::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; vertical-align: 0; background: #EDB821; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.o .k-cmp-table tr.c-egal td, .o .k-cmp-table tr.c-egal th { color: var(--second); font-weight: 400; }
.o .k-cmp-table tbody tr:hover td { background: #FFFBEF; }
.o .k-cmp-texte td { font-size: 14px; line-height: 1.55; color: var(--second); }
.o .k-cmp-caches { margin: 12px 0 0; font-size: 14px; color: var(--second); }

/* ══ AIDEZ-MOI À CHOISIR ══ */
.o .k-aide { padding: 58px 0 64px; background: linear-gradient(180deg, var(--creux) 0%, #F7F0DE 100%); }
.o .k-aide-tete { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin: 0 0 20px; flex-wrap: wrap; }
.o .k-aide h2 { margin: 0; font-size: 38px; color: var(--brun); max-width: 20ch; line-height: 1.08; }
.o .k-aide-etapes { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.o .k-aide-etapes li { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--second); padding: 6px 12px 6px 6px; border-radius: var(--o-rayon-pilule); background: rgba(255,255,255,.6); }
.o .k-aide-etapes li i { width: 24px; height: 24px; display: grid; place-items: center; border-radius: var(--o-rayon-rond); font-style: normal; font-weight: 800; font-size: 12px; background: var(--o-bloc); color: var(--second); }
.o .k-aide-etapes li.on { background: var(--brun); color: #FFF8EA; }
.o .k-aide-etapes li.on i { background: var(--jaune); color: var(--nuit); }
.o .k-aide-etapes li.fait i { background: var(--brun); color: #FFF8EA; }
.o .k-aide-cadre { background: var(--o-bloc); border-radius: var(--o-rayon-plaque); padding: 30px 32px 22px; box-shadow: 0 18px 40px -28px rgba(42,18,9,.45); }
.o .k-aide-pas[hidden] { display: none; }
.o .k-aide-pas h3 { margin: 0 0 4px; font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-size: 28px; color: var(--encre); }
.o .k-aide-sous { margin: 0 0 20px; font-size: 14px; color: var(--second); }
.o .k-reps { display: grid; gap: 12px; }
.o .k-reps-4 { grid-template-columns: repeat(4, 1fr); } .o .k-reps-5 { grid-template-columns: repeat(5, 1fr); } .o .k-reps-3 { grid-template-columns: repeat(3, 1fr); }
.o .k-rep { font: inherit; cursor: pointer; border: 0; border-radius: var(--o-rayon-carte); background: var(--o-cire); box-shadow: inset 0 0 0 1px var(--trait); padding: 18px 12px 16px; display: grid; justify-items: center; gap: 4px; color: var(--brun); transition: box-shadow .15s, transform .15s, background-color .15s; }
.o .k-rep:hover:not(:disabled) { box-shadow: inset 0 0 0 2px var(--brun); background: #FFF6D6; transform: translateY(-2px); }
.o .k-rep:focus-visible { outline: 3px solid var(--brun); outline-offset: 2px; }
.o .k-rep:disabled { cursor: not-allowed; opacity: .45; }
.o .k-rep b { font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-size: 21px; color: var(--brun); }
.o .k-rep span { font-size: 13px; color: var(--second); }
.o .k-rep em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--encre); background: var(--o-bloc); padding: 2px 9px; border-radius: var(--o-rayon-pilule); margin-top: 6px; box-shadow: inset 0 0 0 1px var(--trait); }
.o .dessin-cadre { width: 78px; height: 90px; color: var(--brun); }
.o .k-points { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; width: 92px; min-height: 42px; align-content: center; }
.o .k-points i { width: 5px; height: 16px; border-radius: 1px; background: var(--brun); }
.o .k-points .k-plus-points { width: auto; height: auto; background: none; font-style: normal; font-weight: 800; color: var(--brun); font-size: 16px; line-height: 16px; }
.o .k-aide-bas { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 22px; padding-top: 16px; border-top: 1px solid #EFE6D0; flex-wrap: wrap; }
.o .k-aide-compte { margin: 0; font-size: 15px; color: var(--second); }
.o .k-aide-compte b { font-size: 24px; color: var(--encre); margin-right: 4px; }
.o .k-aide-nav { display: flex; gap: 16px; align-items: center; }
.o .k-aide-tel { font-size: 14px; color: var(--second); }
.o .k-aide-tel b { color: var(--encre); }
.o .k-aide-res { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.o .k-choix-res { background: var(--cire); border-radius: var(--o-rayon-carte); padding: 16px 18px 18px; display: grid; gap: 6px; align-content: start; box-shadow: inset 0 0 0 1px var(--trait); }
.o .k-choix-res-1 { background: #FFF6D6; box-shadow: inset 0 0 0 2px var(--brun); }
.o .k-choix-res-eti { margin: 0; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: var(--brun); }
.o .k-choix-res img { width: 100%; height: 150px; object-fit: contain; mix-blend-mode: multiply; background: var(--o-bloc); border-radius: var(--o-rayon-champ); }
.o .k-choix-res b { font-size: 15px; line-height: 1.35; color: var(--encre); }
.o .k-pourquoi { margin: 0; font-size: 14px; color: var(--second); }
.o .k-ecart { margin: 0; font-size: 13px; font-weight: 700; color: #7A4B00; }
.o .k-choix-res-prix { margin: 2px 0 8px; font-size: 14px; color: var(--second); }
.o .k-choix-res-prix b { font-family: var(--titres); font-size: 22px; color: var(--encre); }
.o .k-choix-res .btn { justify-self: start; }
.o .k-aide-cmp { grid-column: 1 / -1; justify-self: start; }
.o .k-aide-rien { grid-column: 1 / -1; margin: 0; padding: 18px 20px; background: var(--o-cire); color: var(--second); }

.o .k-konigline { background: var(--nuit); color: var(--sur-brun); padding: 64px 0 40px; }
.o .k-kl-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin: 0 0 30px; }
.o .k-konigline h2 { margin: 0; font-size: 52px; color: var(--jaune); letter-spacing: -.02em; line-height: 1; }
.o .k-kl-cite { margin: 12px 0 0; font-family: var(--titres); font-style: italic; font-size: 20px; color: var(--sur-brun); }
.o .k-kl-cite span { font-family: var(--corps); font-style: normal; font-size: 12px; color: var(--second-brun); margin-left: 10px; }
.o .k-chaines { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.o .k-chaine { background: linear-gradient(180deg, #3A1D11 0%, #2F170C 100%); padding: 0 18px 18px; border-radius: var(--o-rayon-petit); display: grid; align-content: start; overflow: hidden; }
.o .k-chaine img { max-width: none; width: calc(100% + 36px); margin: 0 -18px 14px; height: 150px; object-fit: contain; background: var(--o-bloc); }
.o .k-chaine .k-ref { margin: 0 0 4px; font-size: 12px; letter-spacing: .08em; color: var(--second-brun); }
.o .k-chaine b { font-size: 16px; line-height: 1.3; margin: 0 0 14px; color: var(--sur-brun); }
.o .k-chaine .px-b { margin: 0; }
.o .k-chaine .px-b span { color: var(--second-brun); }
.o .k-chaine .px-b b { color: var(--sur-brun); font-size: 22px; }
.o .k-chaine .px-b > div + div b { color: var(--second-brun); font-size: 17px; }
.o .k-chaine .px-b > div + div { background-image: linear-gradient(180deg, rgba(253,212,14,0), rgba(253,212,14,.5) 50%, rgba(253,212,14,0)); }
.o .k-options { list-style: none; margin: 26px 0 0; padding: 0; display: flex; gap: 30px; flex-wrap: wrap; font-size: 14px; color: var(--second-brun); }
.o .k-options li { display: flex; gap: 10px; }
.o .k-options b { color: var(--sur-brun); }
.o .k-options-tete { font-weight: 700; color: var(--jaune) !important; letter-spacing: .1em; text-transform: uppercase; font-size: 12px; align-self: center; }

/* ══ LA PLANCHE ══ */
.sommaire-planche { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
.sommaire-planche a { font-size: 14px; font-weight: 600; color: var(--lab-encre); text-decoration: none; padding: 8px 14px; border-radius: var(--o-rayon-pilule); border: 1px solid var(--lab-fil); background: var(--lab-sur); }
.props { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.props-5 { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 1100px) { .props, .props-5 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 700px) { .props, .props-5 { grid-template-columns: 1fr; } }
.prop { margin: 0; border: 1px solid var(--lab-fil); background: var(--lab-sur); display: grid; grid-template-rows: auto 1fr; min-width: 0; overflow: hidden; }
.prop-rendu { padding: 22px; background: var(--cire); }
.prop-btns { display: grid; gap: 14px; justify-items: start; }
.prop-sur-miel { display: block; padding: 16px 22px; margin: 4px -22px -22px; width: calc(100% + 44px); }
.prop-carte { background: var(--o-bloc); padding: 20px 22px; border-radius: var(--o-rayon-champ); }
.prop-nom { display: block; font-size: 15px; line-height: 1.3; margin: 0 0 14px; color: var(--encre); }
.prop-rendu:has(.prop-fond) { padding: 0; }
.prop-fond { padding: 34px 30px; min-height: 210px; }
.prop-titre { display: block; font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-size: 28px; line-height: 1.05; color: var(--nuit); max-width: 14ch; margin: 0 0 10px; }
.prop-sous { margin: 0; color: var(--second-jaune); max-width: 36ch; }
.prop figcaption { padding: 14px 16px; display: grid; gap: 4px; align-content: start; font-size: 13px; color: var(--lab-2); }
.prop figcaption b { color: var(--lab-encre); font-size: 15px; }
.essai { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0 0; padding: 12px 14px; border: 1px dashed var(--lab-fil); font-size: 14px; }
.essai b { margin-right: 6px; color: var(--lab-encre); }
.essai button { font: inherit; font-size: 13px; padding: 7px 12px; border-radius: var(--o-rayon-pilule); border: 1px solid var(--lab-fil); background: var(--lab-sur); color: var(--lab-encre); cursor: pointer; }
.essai button[aria-pressed="true"] { background: var(--lab-encre); color: var(--lab); border-color: var(--lab-encre); }
.trouv { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
@media (max-width: 1000px) { .trouv { grid-template-columns: 1fr; } }
.trouv > div { background: var(--lab-sur); border: 1px solid var(--lab-fil); padding: 18px 20px; font-size: 14px; color: var(--lab-2); }
.trouv h4 { margin: 0 0 10px; font-size: 16px; color: var(--lab-encre); }
.trouv b { color: var(--lab-encre); }
.trouv ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
.trouv p { margin: 0 0 10px; }
.trouv-src { font-size: 13px; }

/* v3 — K-063, K-098, K-111 */
.o .k-lockup { margin: 0 0 24px; }
.o .k-docs { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--second); }
.o .k-docs:empty { display: none; }
.o .k-doc { display: inline-flex; gap: 6px; align-items: baseline; font-weight: 600; color: var(--encre); }
.o .k-doc em { font-style: normal; font-weight: 400; color: var(--second); }
.o .k-machine .k-docs { margin: -2px 0 10px; }

/* ══ LA PAGE RUCHES — ce qui s'ajoute à konigin.css ══ */
.o .dessin-ruche { flex: none; color: var(--brun); }
.o .r-tuile .k-tuile-img { position: relative; }
.o .r-place { position: absolute; right: 10px; bottom: 8px; line-height: 0; background: rgba(255,255,255,.85); border-radius: var(--o-rayon-rond); }
.o .r-etapes { grid-template-columns: repeat(3, minmax(0,1fr)); }
.o .r-autour { grid-template-columns: 1fr 1fr 1fr; align-items: stretch; }
.o .r-autour-liste { background: var(--bloc); border-radius: var(--o-rayon-champ); padding: 20px 22px; }
.o .r-autour-liste ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.o .r-autour-liste a { color: var(--brun); font-weight: 600; text-decoration: none; background: linear-gradient(#FFE27A, #FFE27A) 0 100% / 100% 2px no-repeat; padding-bottom: 2px; }
.o .k-choix-6 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.o .k-reps-6 { grid-template-columns: repeat(3, 1fr); }
.o .r-table { overflow-x: auto; }
.o .r-page .k-versions td { font-size: 14px; }
.o .r-page .k-versions td.k-diff { font-size: 15px; }
.o .r-page .k-versions .k-v-ref { width: 118px; }
.o .r-page .k-v-ref .k-coche { display: flex; margin-top: 6px; font-family: var(--corps); }
.o .r-page .k-versions th.k-diff ~ th, .o .r-page .k-versions th { white-space: nowrap; }
.o .r-composer .r-sous { font-style: normal; font-family: var(--corps); font-size: 16px; color: var(--second-brun); }
.o .r-total { text-align: right; }
.o .r-total p { margin: 0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--second-brun); }
.o .r-total b { display: block; font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-size: 48px; color: var(--jaune); line-height: 1.05; }
.o .r-total span { font-size: 15px; color: var(--sur-brun); }
.o .r-couches { display: grid; gap: 8px; }
.o .r-couche { display: grid; grid-template-columns: 52px 190px minmax(0,1fr) 90px 110px; gap: 14px; align-items: center; background: linear-gradient(90deg, #3A1D11 0%, #2F170C 100%); border-radius: var(--o-rayon-petit); padding: 8px 18px 8px 10px; }
.o .r-couche .dessin-ruche { color: var(--sur-brun); }
.o .r-couche-nom { font-weight: 700; color: var(--sur-brun); }
.o .r-couche select { font: inherit; font-size: 14px; min-height: var(--o-taille-touche); padding: 8px 10px; border-radius: var(--o-rayon-champ); border: 0; background: #FFF8EA; color: var(--nuit); max-width: 100%; }
.o .r-qte { font-size: 14px; color: var(--second-brun); }
.o .r-qte input { font: inherit; width: 58px; min-height: var(--o-taille-touche); padding: 6px 8px; border-radius: var(--o-rayon-champ); border: 0; background: #FFF8EA; color: var(--nuit); }
.o .r-couche-prix { text-align: right; font-size: 18px; color: var(--sur-brun); }
.o .r-note { margin: 18px 0 0; font-size: 14px; color: var(--second-brun); }
.o .r-faites { margin-top: 22px; }
.o .r-faites ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 30px; font-size: 14px; color: var(--second-brun); }
.o .r-faites li { display: flex; justify-content: space-between; gap: 14px; padding: 6px 0; border-bottom: 1px solid rgba(253,212,14,.18); }
.o .r-faites b { color: var(--sur-brun); white-space: nowrap; }
@media (max-width: 960px) {
  .o .r-etapes, .o .r-autour, .o .k-choix-6, .o .k-reps-6, .o .r-faites ul { grid-template-columns: 1fr; }
  .o .r-couche { grid-template-columns: 46px 1fr; } .o .r-couche select { grid-column: 1 / -1; }
}
/* ══ LA LISIBILITÉ DES PAGES DE FAMILLE — 13/09, Ruben : « améliore la lisibilité et corrige les erreurs visuelles ».
   Inséré après konigin.css par build_da_ruches.py et build_da_essaims.py. Ce que les captures de la page Ruches ont montré, et la correction :
   1. le jaune posé en aplat sur des cellules entières, en gras de 17 px : la table criait -> une teinte pâle, le poids moyen, la taille du texte ;
   2. le badge « change » collé au libellé, qui cassait l'en-tête sur deux ou trois lignes -> il passe dessous, sur sa ligne ;
   3. les modèles à une seule version, sans en-tête : « arrière », « plat, h105 » sans dire de quoi -> l'en-tête reste ;
   4. la question « Quel format ? » centrée dans la hauteur de sa grille, un grand vide au-dessus -> alignée en haut ;
   5. les vignettes de 84 px -> 120 px, la référence lisible, le prix aligné à droite. ══ */
.o .k-q-tete { align-content: start; padding-top: 6px; }
.o .k-brouillon { padding-left: 0; }
.o .k-versions { table-layout: auto; }
.o .k-versions th { vertical-align: bottom; white-space: normal; line-height: 1.25; padding: 0 14px 10px 10px; }
.o .k-versions th .k-change { display: table; margin: 5px 0 0; }
.o .k-versions td { vertical-align: top; line-height: 1.45; padding: 12px 14px 12px 10px; color: var(--encre); font-size: 15px; text-wrap: pretty; }
.o .k-versions td.k-diff { font-weight: 650; font-size: 15px; color: var(--encre); background: #FFF6D2; }
.o [hidden] { display: none !important; }
.o .k-resultats { min-width: 0; }
.o .k-mod-corps { min-width: 0; }
.o .k-versions .k-v-ref { width: 124px; font-size: 13px; color: var(--second); }
.o .k-versions .k-v-ref b { display: block; font-size: 13px; font-weight: 700; color: var(--encre); letter-spacing: .01em; }
.o .k-versions .k-v-ref .k-coche { display: flex; margin-top: 8px; font-family: var(--corps); }
.o .k-versions .k-v-prix { text-align: right; font-weight: 700; color: var(--encre); }
.o .k-versions th:last-child { text-align: right; }
.o .k-versions tbody tr:hover td { background-color: #FFFCF2; }
.o .k-versions tbody tr:hover td.k-diff { background-color: #FFF4CC; }
.o .k-modele { grid-template-columns: 132px 1fr; gap: 26px; padding: 22px 26px 18px 20px; }
.o .k-mod-img img { width: 124px; height: 124px; }
.o .k-mod-resume { max-width: 70ch; }
.o .k-modele-seul { grid-template-columns: 132px 1fr; padding: 22px 26px 16px 20px; align-items: start; }
.o .k-modele-seul .k-mod-img img { width: 108px; height: 108px; }
.o .k-modele-seul thead { display: table-header-group; }
.o .k-modele-seul .k-mod-sur { display: block; }
.o .k-modele-seul h3 { font-size: 25px; margin: 0 0 10px; }
.o .k-modele-seul .k-versions td { border-top: 1px solid #EFE6D0; padding-top: 12px; padding-bottom: 12px; }
.o .k-badge-seul { display: inline-block; font-size: 12px; font-weight: 700; color: var(--second); background: #F3ECDD; padding: 3px 10px; border-radius: var(--o-rayon-pilule); }
.o .k-constat { font-size: 15px; line-height: 1.5; }

/* ══ LES VERSIONS — ✏️ 15/09 soir : l'essentiel de la différence, en deux lignes (versions.py) ══ */
.o .v-liste { list-style: none; margin: 12px 0 0; padding: 0; }
.o .v-liste > li[hidden] { display: none !important; }
.o .v-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "nom prix cmp" "dit prix cmp";
  column-gap: 18px; row-gap: 2px; align-items: start; padding: 11px 0; border-top: 1px solid #EFE6D0; }
.o .v-ligne:hover { background: #FFFBEF; }
.o .v-nom { grid-area: nom; min-width: 0; font-size: 15px; line-height: 1.3; }
.o .v-nom b, .o .v-lien { color: var(--brun); font-weight: 700; }
.o .v-lien { text-decoration: none; }
.o .v-lien:hover, .o .v-lien:focus-visible { text-decoration: underline; text-decoration-color: var(--jaune); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.o .v-prix { grid-area: prix; text-align: right; font-size: 16px; font-weight: 750; color: var(--encre); white-space: nowrap; line-height: 1.25; }
.o .v-prix small { font-size: 10px; letter-spacing: .1em; font-weight: 700; color: var(--second); }
.o .v-prix .m-ttc, .o .v-prix .v-ttc { display: none; }   /* ✏️ « les mini textes en dessous » : un seul prix par ligne, le second est sur la fiche */
.o .v-dit { grid-area: dit; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.o .v-trait { display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 12px; border-radius: var(--o-rayon-pilule); background: var(--cire);
  box-shadow: inset 0 0 0 1px var(--trait); font-size: 14.5px; line-height: 1.3; color: var(--encre); }
.o .v-trait em { font-style: normal; color: var(--second); }
.o .v-base { color: var(--second); }
.o .v-plus { display: none; }   /* l'écart se lit dans l'ordre des prix ; il n'ajoute plus un petit texte */
.o .v-cmp { grid-area: cmp; align-self: start; margin-top: 2px; justify-self: end; }
@media (max-width: 760px) {
  .o .v-ligne { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nom prix" "dit dit" "cmp cmp"; }
}

/* ══ LE COMPARATEUR (comparateur.js) — ✏️ 15/09 : l'essentiel en grand, le reste replié, aucun petit texte ══ */
.o .k-comparer .k-coche:has(#k-cmp-egal) { display: none; }
.o .k-cmp-table:has(.cmp-o) { overflow-x: auto; }
.o .cmp-o { --col: minmax(11rem, 1fr); font-family: var(--corps); color: var(--encre); min-width: calc(12rem + var(--n) * 14rem); }
.o .cmp-o-tete, .o .cmp-o-rang { display: grid; grid-template-columns: 10rem repeat(var(--n), minmax(0, 1fr)); column-gap: 28px; }
.o .cmp-o-tete { padding: 8px 0 18px; align-items: start; }
.o .cmp-o-produit { display: grid; gap: 8px; align-content: start; }
.o .k-textes summary span { display: none; }   /* « — surligné : ce qui diffère » : un petit texte de moins */
.o .cmp-o-produit img { width: 104px; height: 104px; object-fit: contain; mix-blend-mode: multiply; }
.o .cmp-o-nom, .o .cmp-o-nom b { font-size: 17px; line-height: 1.3; font-weight: 700; color: var(--brun); }
.o .cmp-o-prix { font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-weight: 700; font-size: 28px; line-height: 1.1; color: var(--encre); }
.o .cmp-o-prix small { font-family: var(--corps); font-size: 13px; letter-spacing: .08em; color: var(--second); }
.o .cmp-o-rang { padding: 16px 0; border-top: 1px solid var(--trait); align-items: baseline; }
.o .cmp-o-lib { font-size: 15px; color: var(--second); }
.o .cmp-o-val { font-size: 17px; line-height: 1.4; font-weight: 600; }
.o .cmp-o-rien { margin: 0; padding: 16px 0; border-top: 1px solid var(--trait); font-size: 16px; color: var(--second); }
.o .cmp-o-plie { border-top: 1px solid var(--trait); }
.o .cmp-o-plie summary { cursor: pointer; padding: 16px 0; font-size: 16px; font-weight: 700; color: var(--brun); list-style: none; }
.o .cmp-o-plie summary::-webkit-details-marker { display: none; }
.o .cmp-o-plie summary::before { content: "+"; display: inline-block; width: 22px; font-weight: 700; color: var(--brun); }
.o .cmp-o-plie[open] summary::before { content: "–"; }
.o .cmp-o-plie summary span { font-weight: 500; color: var(--second); }
.o .cmp-o-pareil { margin: 0 0 16px 22px; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 16px; }
.o .cmp-o-pareil span { color: var(--second); margin-right: 6px; }
.o .cmp-o-textes { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 28px; margin: 0 0 18px 22px; font-size: 15.5px; line-height: 1.65; color: var(--encre); }

/* 24/09 — règles EMPRUNTÉES par machine à univers.html (outils/maquettes/regles_empruntees.py), non retapées */
.o .uv-familles-bande { padding: 60px 0 68px; }
.o .uv-familles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.o .uv-famille { background: var(--bloc); border-radius: var(--o-rayon-plaque); padding: 26px 28px 18px; box-shadow: 0 1px 0 rgba(42,18,9,.12); --fond-picto: var(--o-creux); }
.o .uv-f-tete { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: center; margin: 0 0 10px; }
.o .uv-picto { width: 64px; height: 64px; border-radius: var(--o-rayon-rond); background: var(--creux); display: grid; place-items: center; }
.o .uv-famille h2 { margin: 0; font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-weight: 700; font-size: 25px; line-height: 1.15; color: var(--brun); }
.o .uv-rayons { list-style: none; margin: 0; padding: 0; }
.o .uv-rayons li { border-top: 1px solid var(--trait); }
.o .uv-rayons a { display: grid; grid-template-columns: 14px minmax(0, 1fr) 18px; gap: 14px; align-items: center; min-height: 50px; padding: 6px 4px; text-decoration: none; color: var(--encre); font-size: 16.5px; font-weight: 600; }
.o .uv-rayons a svg:last-child { color: var(--ambre); transition: transform .15s; }
.o .uv-rayons a:hover span { color: var(--brun); text-decoration: underline; text-decoration-color: var(--ambre); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.o .uv-rayons a:hover svg:last-child { transform: translateX(3px); color: var(--brun); }
.o .uv-puce { width: 14px; height: 14px; flex: none; color: var(--brun); }
@media (max-width: 960px) { .o .uv-familles { grid-template-columns: 1fr; gap: 16px; } .o .uv-familles-bande { padding: 44px 0 50px; } .o .uv-famille { padding: 20px 20px 12px; } .o .uv-famille h2 { font-size: 22px; } .o .uv-f-tete { grid-template-columns: 56px minmax(0, 1fr); } .o .uv-picto { width: 56px; height: 56px; } }
/* ══ LES PAGES DE FAMILLE AU TÉLÉPHONE — 24/09, Ruben (« tu fais tout sans moi, tu as mon autorisation complète ») :
   les pages famille et liste débordaient en largeur sur téléphone (scrollWidth 540 à 960 px pour un écran de 375 px) ;
   le navigateur élargissait la page puis la rétrécissait, tout devenait minuscule.
   Cause commune : konigin.css et les feuilles des planches n'avaient presque aucune règle sous 960 px, et la charte de
   l'accueil (build_pages_o.py, AJOUTS) n'est pas dans ces planches. Inséré EN DERNIER par les six planches de famille
   (build_da_konigin, _ruches, _essaims, _materiel, _gourmand, _beaute), pas par build_konigin.py (marque-konigin.html
   tient déjà, par ses propres règles).
   Chaque règle reprend un traitement déjà validé ailleurs, avec ses valeurs :
   · la marge de page à 20 px, la grille pro sur une colonne (gap 22 px), le décor d'ouverture rogné (overflow-x: clip),
     le titre d'ouverture à 40 px : l'accueil, build_pages_o.py @media (max-width: 960px) ;
   · les questions, les choix, l'aide, Konig Line (1fr, 28 px, 34 px, padding 22px 16px 16px, gap 26 px), la vignette de
     84 px à côté du texte (gap 16 px, padding 18 px) : marque-konigin.html, build_konigin.py @media (max-width: 960px) ;
   · le passage à une colonne sous 560 px : la charte, build_da_o.py (ventes-grille, services-4) ;
   · la hauteur du visuel d'ouverture à 340 px : build_konigin.py (km-plaque-fond) et build_pages_o.py (ouv-photo).
   Rien au-dessus de 960 px : l'ordinateur ne change pas. Le contenu se replie, il n'est jamais coupé ; seul le décor
   (le halo inox de l'ouverture) est rogné, et les dessins d'ouverture se réduisent à la largeur de leur carte. ══ */
@media (max-width: 960px) {
  .o .w { padding-left: 20px; padding-right: 20px; }
  .o .k-ouv { overflow-x: clip; }
  .o .pro-grille, .o .k-f-tete, .o .k-q-ligne { grid-template-columns: 1fr; gap: 22px; }
  .o .k-ouv-grille, .o .k-liste-zone { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .o .k-ouv h1, .o .k-f-tete h1 { font-size: 40px; }
  .o .k-ouv-visuel { height: 340px; }
  .o .m-ouv-rang > svg { flex: 0 1 auto; min-width: 0; height: auto; }
  .o .k-chiffres { flex-wrap: wrap; }
  .o .k-etapes, .o .k-autour { grid-template-columns: 1fr 1fr; }
  .o .k-t-extracteurs { grid-column: 1 / -1; }
  .o .k-choix-2, .o .k-choix-4 { grid-template-columns: 1fr 1fr; }
  .o .k-reps-4, .o .k-reps-5, .o .k-reps-3, .o .k-aide-res { grid-template-columns: 1fr 1fr; }
  .o .k-aide-cadre { padding: 22px 16px 16px; } .o .k-aide h2 { font-size: 28px; }
  .o .k-chaines { grid-template-columns: 1fr; }
  .o .k-kl-tete { display: grid; grid-template-columns: 1fr; gap: 26px; }
  .o .k-konigline h2 { font-size: 34px; }
  .o .k-grille { grid-template-columns: 1fr 1fr; }
  .o .k-resultats-tete, .o .k-type-titre, .o .k-cmp-barre .w, .o .k-cmp-tete { flex-wrap: wrap; }
  .o .k-textes-grille { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .o .k-etapes, .o .k-autour, .o .k-grille, .o .m-familles { grid-template-columns: 1fr; }
  .o .k-modele, .o .k-modele-seul { grid-template-columns: 84px minmax(0, 1fr); gap: 16px; padding: 18px; }
  .o .k-mod-img img, .o .k-modele-seul .k-mod-img img { width: 84px; height: 84px; }
  .o .v-trait { flex-wrap: wrap; }
  .o .k-choix-2, .o .k-choix-4, .o .k-aide-res { grid-template-columns: 1fr; }
}