/* Genere par app/site/scripts/feuille-o.ts depuis 2-CE-QU-ON-VA-CONSTRUIRE/da/la-page-chaines.html (sha256 c1962465284a389d0c153b8ead7adcfaa5696ebab259f5caacbe463c35028d12) : 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; }

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

/* ══ 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; }
}
/* ══ LE PANNEAU « CRITÈRES » DES LISTES FILTRABLES — 03/10, Ruben (30/09-03/10 : « applique ce genre de règle de manière
   générale afin d'améliorer les expériences mobile et PC », « continue le reste ») ; audit
   _rapports/ux/2026-09-30-regle-rangees-et-hauteurs.md, REC-1. konigin.css le colle partout (`position: sticky; top: 12px`),
   sans fond : au téléphone, une fois la liste en une colonne, il passait PAR-DESSUS les produits (64 à 98 % de l'écran).
   · Au téléphone (sous 960 px, là où .k-liste-zone passe en une colonne, plus haut) : il n'est plus collé, il reste dans le flux.
   · À l'ordinateur : il reste collé dans sa colonne, sur le fond de la page (var(--cire), celui de .o, qu'il recouvre à
     l'identique) ; sa hauteur est bornée à l'écran (12 px au-dessus, son `top`, 12 px au-dessous) et il défile en lui-même s'il
     est plus haut. Les 6 px de retrait, rendus par une marge négative, gardent la place des pastilles au pixel près et laissent
     voir leur contour de focus (3 px + 2 px de décalage) que le défilement interne rognerait.
   SEULE règle de ce fichier qui vaut au-dessus de 960 px : elle ne touche que .k-filtres, présent sur les six planches. ══ */
.o .k-filtres { background: var(--cire); max-height: calc(100vh - 24px); overflow-y: auto; overscroll-behavior: contain;
  padding: 0 6px 6px; margin: 0 -6px -6px; }
@media (max-width: 960px) {
  .o .k-filtres { position: static; background: none; max-height: none; overflow: visible; padding: 0; margin: 0; }
}

/* familles_o : la carte claire (ventes_o, filtrée par classe) */
.o .vt { position: relative; background: var(--bloc); border: 1px solid var(--trait); border-radius: var(--o-rayon-carte); box-shadow: var(--o-ombre-fil); }
.o .vt-lien { display: block; text-decoration: none; color: var(--encre); }
.o .vt-photo { display: grid; place-items: center; background: var(--creux); border-radius: var(--o-rayon-petit); overflow: hidden; }
.o .vt-photo img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.o .vt-photo img.plein { mix-blend-mode: normal; }
.o .vt-infos { display: grid; gap: 4px; }
.o .vt-nom { font-size: 16px; line-height: 1.3; font-weight: 600; color: var(--encre); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.o .vt-lien:hover .vt-nom { text-decoration: underline; text-decoration-color: var(--ambre); text-underline-offset: 3px; }
.o .vt-bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; }
.o .px-vente { font-style: normal; font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-weight: 700; font-size: 28px; line-height: 1; color: var(--brun); letter-spacing: -.01em; white-space: nowrap; }
.o .ajout-o { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--o-taille-touche); padding: 0 18px; border: 0; border-radius: var(--o-rayon-pilule); background: var(--brun); color: var(--sur-brun); font: 700 15px var(--corps); cursor: pointer; transition: transform 150ms cubic-bezier(.2, .8, .3, 1), background-color 150ms; }
.o .ajout-o:hover { transform: translateY(-2px); background: var(--nuit); }
.o .ajout-o svg { flex: none; }
.o .ajout-o .aj-suite { display: none; }
.o .ajout-o.fait { background: var(--etat-ok-fond); color: var(--etat-ok); }
.o .puce { display: inline-flex; align-items: center; gap: 7px; padding: 4px 9px; border-radius: var(--o-rayon-doux); font: 700 12px/1.3 var(--corps); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.o .puce::before { content: ""; width: 10px; height: 11px; flex: none; background: currentColor; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.o .puce-promo { background: var(--jaune); color: var(--brun); letter-spacing: .04em; }
.o .pv-cartes { padding-top: 40px; padding-bottom: 44px; }
.o .pv-cartes .ve { display: flex; flex-direction: column; overflow: hidden; background: var(--bloc); border: 1px solid var(--trait); border-radius: var(--o-rayon-carte); box-shadow: var(--o-ombre-fil); transition: box-shadow 250ms cubic-bezier(.2, .8, .3, 1); }
.o .pv-cartes .ve:hover, .o .pv-cartes .ve:focus-within { box-shadow: var(--o-ombre-survol); }
.o .pv-cartes .ve .vt-lien { display: flex; flex-direction: column; flex: 1; }
.o .pv-cartes .ve .vt-photo { flex: none; aspect-ratio: 1 / 1; background: var(--bloc); border-radius: var(--o-rayon-net); }
.o .pv-cartes .ve .vt-photo img { padding: 24px; mix-blend-mode: normal; transition: transform 250ms cubic-bezier(.2, .8, .3, 1); }
.o .pv-cartes .ve .vt-photo img.plein { padding: 0; }
.o .pv-cartes .ve:hover .vt-photo img { transform: scale(1.03); }
.o .pv-cartes .ve-pastille { position: absolute; left: 12px; top: 12px; z-index: 2; pointer-events: none; font-size: 11px; padding: 3px 8px; letter-spacing: .08em; }
.o .pv-cartes .ve .vt-infos { padding: 18px 20px 0; gap: 7px; border-top: 1px solid var(--trait); }
.o .pv-cartes .ve-rayon { font: 700 11.5px/1.3 var(--corps); letter-spacing: .1em; text-transform: uppercase; color: var(--second); }
.o .pv-cartes .ve .vt-nom { font: 700 18px/1.3 var(--corps); color: var(--encre); min-height: 2.6em; }
.o .pv-cartes .ve .vt-bas { flex-wrap: nowrap; padding: 16px 20px 22px; margin-top: auto; gap: 10px; }
.o .pv-cartes .ve-prix { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; margin: 0; min-width: 0; }
.o .pv-cartes .ve .px-vente { font-size: 17px; color: var(--brun); letter-spacing: 0; }
.o .pv-cartes .ve-prix s { color: var(--second); font-size: 14px; text-decoration-thickness: 1.5px; }
.o .pv-cartes .ve .ajout-o { flex: none; min-height: var(--o-taille-touche); padding: 0 14px; gap: 6px; background: var(--bloc); color: var(--brun); box-shadow: inset 0 0 0 1.5px var(--brun); font-size: 14px; }
.o .pv-cartes .ve .ajout-o svg { width: 16px; height: 16px; }
.o .pv-cartes .ve .ajout-o:hover { transform: none; background: var(--brun); color: var(--sur-brun); }
.o .pv-cartes .ve .ajout-o.fait { background: var(--etat-ok-fond); color: var(--etat-ok); box-shadow: none; }
.o .pv-cartes .ve .ajout-o { background: var(--brun); color: var(--sur-brun); box-shadow: none; }
.o .pv-cartes .ve .ajout-o:hover { background: var(--nuit); color: var(--sur-brun); }
@media (max-width: 960px) {
  .o .pv-cartes { padding-top: 28px; padding-bottom: 32px; }
  .o .pv-cartes .ve .vt-photo { aspect-ratio: auto; height: 184px; }
  .o .pv-cartes .ve .vt-photo img { padding: 14px 18px; }
  .o .pv-cartes .ve .vt-infos { padding: 12px 14px 0; gap: 4px; }
  .o .pv-cartes .ve .vt-nom { font-size: 16px; }
  .o .pv-cartes .ve .px-vente { font-size: 15px; }
  .o .pv-cartes .ve .vt-bas { padding: 10px 14px 14px; }
  .o .pv-cartes .ve:hover .vt-photo img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .o .pv-cartes .ve:hover .vt-photo img { transform: none; }
}
/* familles_o : le modèle A */
.o [data-grille-o] [hidden] { display: none !important; }
/* ── la tête compacte ── */
.o .fp-tete { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 24px; padding-top: 6px; padding-bottom: 14px; }
.o .fp-tete h1 { margin: 0; font-size: 36px; line-height: 1.06; letter-spacing: -.02em; color: var(--brun); }
.o .fp-chapo { grid-column: 1 / -1; grid-row: 2; margin: 6px 0 0; font-size: 16px; line-height: 1.45; color: var(--second); }
.o .fp-compte { grid-column: 2; grid-row: 1; margin: 0; font-size: 15px; color: var(--second); white-space: nowrap; }
.o .fp-compte b { color: var(--encre); }
/* ── la rangée « élément par élément » : des tuiles qui filtrent ── */
.o .fp-elements { padding-bottom: 10px; }
.o .fp-elements h2 { margin: 0 0 4px; font-size: 22px; line-height: 1.15; letter-spacing: -.01em; color: var(--brun); }
.o .fp-el-rangee { display: flex; gap: 0 16px; }
.o .fp-g { min-width: 0; flex: var(--n) 1 0; }
.o .fp-g-titre { margin: 0 0 4px; font-size: 11px; line-height: 16px; }
.o .fp-g-tuiles { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; height: calc(100% - 22px); }
.o .fp-el { position: relative; font: inherit; text-align: left; cursor: pointer; display: grid; align-content: start; justify-items: start; gap: 2px;
  min-height: var(--o-taille-touche); padding: 8px 10px; border: 0; border-radius: var(--o-rayon-carte); background: var(--bloc); color: var(--encre);
  box-shadow: inset 0 0 0 1px var(--trait), 0 1px 0 rgba(42,18,9,.10); transition: background-color 150ms, box-shadow 150ms; }
.o .fp-el:hover { box-shadow: inset 0 0 0 2px var(--brun); }
.o .fp-el:focus-visible { outline: 3px solid var(--brun); outline-offset: 2px; }
.o .fp-el .picto { color: var(--brun); }
.o .fp-el .k-etape { top: 8px; right: 8px; left: auto; width: 22px; height: 24px; font-size: 12px; }
.o .fp-el .picto { width: 30px; height: 30px; }
.o .fp-el b { margin-top: 1px; font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-weight: 700; font-size: 16px; line-height: 1.15; color: var(--brun); }
.o .fp-el-n { font-size: 13px; line-height: 1.35; font-weight: 600; }
.o .fp-el-des, .o .fp-el-ht { font-size: 12.5px; line-height: 1.35; color: var(--second); }
.o .fp-el-tout { align-content: center; }
.o .fp-el-tout b { font-size: 22px; }
.o .fp-el[aria-pressed="true"] { background: var(--brun); color: var(--sur-brun); box-shadow: none; }
.o .fp-el[aria-pressed="true"] .picto, .o .fp-el[aria-pressed="true"] b { color: var(--sur-brun); }
.o .fp-el[aria-pressed="true"] .fp-el-des, .o .fp-el[aria-pressed="true"] .fp-el-ht { color: var(--second-brun); }
/* ── tous les produits ── */
.o .fp-zone { padding-top: 4px; padding-bottom: 56px; }
.o .fp-barre { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; min-height: var(--o-taille-touche); margin: 0 0 8px; }
.o .fp-n { margin: 0; font-size: 15px; color: var(--second); }
.o .fp-n b { font-size: 17px; color: var(--encre); }
.o .fp-tri { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 14px; color: var(--second); }
.o .fp-tri select { font: inherit; font-size: 14px; font-weight: 600; color: var(--encre); min-height: var(--o-taille-touche); padding: 0 12px 0 16px; border: 0; border-radius: var(--o-rayon-pilule);
  background: var(--bloc); box-shadow: inset 0 0 0 1px var(--trait); cursor: pointer; }
.o .fp-tri select:focus-visible { outline: 3px solid var(--brun); outline-offset: 2px; }
.o .fp-btn-filtres, .o .fp-fermer, .o .fp-f-pied { display: none; }
.o .fp-corps { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 0 28px; align-items: start; }
.o .fp-res { min-width: 0; }
.o .fp-grille.pv-cartes { padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.o .fp-grille > .fp-insert { grid-column: 1 / -1; }
.o .fp-grille.pv-cartes .ve .vt-photo { aspect-ratio: auto; height: 132px; }
.o .fp-grille.pv-cartes .ve .vt-photo img { padding: 12px; }
.o .fp-grille.pv-cartes .ve .vt-infos { padding: 12px 14px 0; gap: 4px; }
.o .fp-grille.pv-cartes .ve .vt-nom { font-size: 16px; }
.o .fp-grille.pv-cartes .ve .vt-bas { padding: 10px 14px 14px; gap: 8px; }
.o .fp-grille.pv-cartes .ve .px-vente { font-size: 18px; }
/* la carte : « TTC », le HT dessous, les gestes « Choisir », « Réserver », « Me prévenir » */
.o .pv-cartes .fp-carte a.ajout-o { text-decoration: none; }
.o .pv-cartes .fp-carte .fp-ttc { font: 700 11px var(--corps); letter-spacing: .12em; color: var(--brun); }
.o .pv-cartes .fp-carte .fp-ht { flex-basis: 100%; font-size: 13px; line-height: 1.3; color: var(--second); white-space: nowrap; }
.o .pv-cartes .fp-carte .px-vente small { font: 600 13px var(--corps); color: var(--second); }
.o .pv-cartes .fp-carte .ajout-o.fp-prevenir { background: var(--bloc); color: var(--brun); box-shadow: inset 0 0 0 1.5px var(--brun); }
.o .pv-cartes .fp-carte .ajout-o.fp-prevenir:hover { background: var(--brun); color: var(--sur-brun); }
.o .fp-etat { font-size: 13px; color: var(--second); }
.o .fp-sans-photo { font-size: 13px; color: var(--second); }
.o .fp-vide { margin: 18px 0 0; font-size: 15px; color: var(--second); }
.o .fp-plus-zone { margin: 24px 0 0; text-align: center; }
/* ── le quiz ── */
.o .fp-quiz { padding: 18px 22px; border-radius: var(--o-rayon-plaque); background: var(--creux); box-shadow: inset 0 0 0 1px var(--trait); }
.o .fp-q-tete { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; }
.o .fp-q-tete > div { flex: 1 1 240px; }
.o .fp-q-tete .etiq-c { margin: 0 0 2px; }
.o .fp-q-tete h3 { margin: 0; font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-weight: 700; font-size: 24px; line-height: 1.15; color: var(--brun); }
.o .fp-quiz > .fp-q-tete > .picto { flex: none; color: var(--brun); }
.o .fp-quiz[data-ouvert="1"] #fp-q-ouvrir { display: none; }
.o .fp-q-corps { margin-top: 16px; }
.o .fp-q-corps .k-aide-etapes { margin: 0 0 12px; }
.o .fp-q-corps .k-aide-cadre { padding: 22px 24px 16px; }
.o .fp-q-corps .k-choix-res img { width: 100%; height: 120px; object-fit: contain; background: var(--bloc); border-radius: var(--o-rayon-petit); }
.o .fp-q-corps .k-choix-res-prix .fp-ht { display: block; font-size: 13px; font-weight: 400; color: var(--second); }
@media (max-width: 960px) {
  .o .fp-tete { display: block; padding-bottom: 12px; }
  .o .fp-tete h1 { font-size: 28px; }
  .o .fp-chapo { font-size: 15px; line-height: 1.4; margin-top: 6px; }
  .o .fp-compte { margin-top: 6px; font-size: 14px; }
  .o .fp-elements { padding-bottom: 10px; }
  .o .fp-elements h2 { font-size: 20px; }
  .o .fp-el-rangee { display: flex; gap: 0 14px; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 0 20px 4px; scroll-padding-left: 20px; }
  .o .fp-el-rangee::-webkit-scrollbar { display: none; }
  .o .fp-g { flex: none; }
  .o .fp-g-tuiles { grid-auto-columns: 106px; gap: 8px; height: auto; }
  .o .fp-g:first-child .fp-g-tuiles { grid-auto-columns: 84px; }
  .o .fp-el { padding: 8px 10px 10px; }
  .o .fp-el .picto { width: 32px; height: 32px; }
  .o .fp-el b { font-size: 15px; }
  .o .fp-el-des, .o .fp-el-ht { display: none; }
  .o .fp-zone { padding-top: 2px; }
  .o .fp-barre { margin-bottom: 10px; gap: 8px 10px; }
  .o .fp-n { flex: 1 0 100%; }
  .o .fp-btn-filtres { display: inline-flex; align-items: center; gap: 6px; min-height: var(--o-taille-touche); padding: 0 16px; border: 0; border-radius: var(--o-rayon-pilule); background: var(--brun);
    color: var(--sur-brun); font: 700 14px var(--corps); cursor: pointer; }
  .o .fp-tri { margin-left: 0; }
  .o .fp-tri > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .o .fp-corps { grid-template-columns: minmax(0, 1fr); }
  .o .fp-filtres { display: none; }
  .o .fp-filtres.ouvert { display: block; position: fixed; inset: 0; z-index: 40; overflow-y: auto; margin: 0; padding: 16px 20px 96px; background: var(--cire);
    max-height: none; box-shadow: var(--o-ombre-panneau); }
  .o .fp-filtres.ouvert .k-filtres-tete { align-items: center; }
  .o .fp-filtres.ouvert .fp-fermer { display: inline-flex; align-items: center; min-height: var(--o-taille-touche); padding: 0 14px; border: 0; border-radius: var(--o-rayon-pilule); background: var(--bloc);
    box-shadow: inset 0 0 0 1px var(--trait); color: var(--brun); font: 700 14px var(--corps); cursor: pointer; }
  .o .fp-filtres.ouvert .fp-f-pied { display: block; position: fixed; left: 0; right: 0; bottom: 0; padding: 12px 20px 16px; background: var(--cire); border-top: 1px solid var(--trait); }
  .o .fp-filtres.ouvert .fp-voir { width: 100%; }
  .o .fp-grille.pv-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .o .fp-grille > .fp-insert { order: 1; }
  .o .fp-grille > .fp-carte:nth-child(n+5) { order: 2; }
  .o .fp-grille.pv-cartes .ve .vt-photo { height: 132px; }
  .o .fp-grille.pv-cartes .ve .vt-photo img { padding: 10px; }
  .o .fp-grille.pv-cartes .ve .vt-infos { padding: 10px 10px 0; gap: 3px; }
  .o .fp-grille.pv-cartes .ve .ve-rayon { font-size: 10.5px; letter-spacing: .08em; }
  .o .fp-grille.pv-cartes .ve .vt-nom { font-size: 14.5px; }
  .o .fp-grille.pv-cartes .ve .vt-bas { flex-direction: column; align-items: stretch; flex-wrap: nowrap; padding: 8px 10px 10px; gap: 8px; }
  .o .fp-grille.pv-cartes .ve .px-vente { font-size: 17px; }
  .o .fp-grille.pv-cartes .ve .ajout-o { width: 100%; padding: 0 10px; }
  .o .fp-quiz { padding: 16px; }
  .o .fp-q-tete h3 { font-size: 20px; }
  .o .fp-q-corps .k-aide-cadre { padding: 16px 12px 12px; }
}
@media (prefers-reduced-motion: reduce) { .o .fp-el { transition: none; } }

/* declinaison_familles : les pièces de la déclinaison (03/10) */
/* déclinaison du modèle A (declinaison_familles.py) : la mention sous le geste d'une carte (la loi Évin, Univers gourmand) */
.o .pv-cartes .fp-carte .fp-mention { margin: 0; padding: 0 14px 12px; font-size: 12px; line-height: 1.35; color: var(--second); }
@media (max-width: 960px) { .o .pv-cartes .fp-carte .fp-mention { padding: 0 10px 10px; } }
/* 24/09 — règles EMPRUNTÉES par machine à marque-konigin.html (outils/maquettes/regles_empruntees.py), non retapées */
.o .km-choisir { padding-top: 60px; padding-bottom: 50px; }
.o .km-choisir .k-questions { padding-top: 4px; }
/* 24/09 — règles EMPRUNTÉES par machine à parrainage.html (outils/maquettes/regles_empruntees.py), non retapées */
.o .pr-form { background: var(--bloc); border-radius: var(--o-rayon-plaque); padding: 30px 32px; display: grid; gap: 14px; box-shadow: 0 1px 0 rgba(42,18,9,.12); }
.o .pr-form h2 { margin: 0; font-size: 34px; line-height: 1.1; color: var(--brun); }
.o .pr-form .pr-form-chapo { margin: 0 0 4px; font-size: 16px; color: var(--encre); }
.o .pr-rang { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.o .pr-form label { display: grid; gap: 5px; font-size: 14px; font-weight: 600; color: var(--second); }
.o .pr-form label i { font-weight: 400; }
.o .pr-form input, .o .pr-form select, .o .pr-form textarea { font: inherit; font-size: 16px; min-height: 48px; padding: 10px 12px; border: 1.5px solid var(--second); border-radius: var(--o-rayon-champ); background: var(--bloc); color: var(--encre); min-width: 0; }
.o .pr-form textarea { min-height: 110px; resize: vertical; }
.o .pr-form .pr-consent { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 14px; color: var(--encre); }
.o .pr-form .pr-consent input { min-height: 0; width: 20px; height: 20px; margin-top: 2px; flex: none; }
.o .pr-form .btn-brun { border: 0; cursor: pointer; min-height: var(--o-taille-geste); font: 700 15px var(--corps); padding: 0 24px; justify-self: start; }
@media (max-width: 960px) { .o .pr-form, .o .pr-tel { padding: 22px 20px; } .o .pr-rang { grid-template-columns: 1fr; } .o .pr-form h2 { font-size: 28px; } }

/* ═══ 04/10 — LA PAGE DES CHAÎNES D'EXTRACTION (build_da_chaines.py) : le moins possible, dans les jetons ═══ */
.o .ch-titre { margin: 0 0 8px; font-size: 26px; line-height: 1.1; letter-spacing: -.01em; color: var(--brun); }
/* 2. trouver ma chaîne : la pièce quiz (fp-quiz, k-aide-*), ouverte d'emblée, resserrée */
.o .ch-trouver { padding-bottom: 14px; }
.o .ch-quiz [hidden], .o .ch-compo-zone [hidden] { display: none !important; }
.o.ch-page q { quotes: "«\00a0" "\00a0»"; }
.o .ch-quiz h3[tabindex="-1"]:focus { outline: none; }
.o .ch-quiz { padding: 12px 16px 14px; }
.o .ch-q-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px 18px; flex-wrap: wrap; min-height: 32px; margin: 0 0 8px; }
.o .ch-q-tete h2 { margin: 0; font-size: 24px; line-height: 1.15; color: var(--brun); }
.o .ch-quiz .fp-q-corps { margin-top: 0; }
.o .ch-quiz .k-aide-cadre { padding: 12px 14px 14px; }
.o .ch-quiz .k-aide-pas h3 { margin: 0 0 8px; font-size: 21px; }
.o .ch-quiz .k-rep { padding: 12px 10px; }
.o .ch-quiz .k-rep b { font-size: 19px; }
.o .ch-res { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; align-items: start; }
.o .ch-res-img img { width: 100%; height: 180px; object-fit: contain; background: var(--bloc); border-radius: var(--o-rayon-carte); }
.o .ch-res-txt h3 { margin: 2px 0 8px; }
.o .ch-raisons { margin: 0 0 8px; padding: 0 0 0 18px; display: grid; gap: 4px; font-size: 15px; line-height: 1.45; color: var(--encre); }
.o .ch-raisons span, .o .ch-compo-cite span { color: var(--second); font-size: 13px; }
.o .ch-res .ve-prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin: 8px 0; }
.o .ch-res .px-vente { font-family: var(--titres); font-style: normal; font-weight: 700; font-size: 24px; color: var(--encre); }
.o .ch-res .fp-ttc { font: 700 11px var(--corps); letter-spacing: .12em; color: var(--brun); }
.o .ch-res .fp-ht { flex-basis: 100%; font-size: 13px; color: var(--second); }
.o .ch-res-gestes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.o .ch-jan-res h3 { margin: 0 0 4px; }
.o .ch-jan-tel { margin: 0 0 6px; font-family: var(--titres); font-weight: 700; font-size: 30px; line-height: 1.1; }
.o .ch-jan-tel a { color: var(--brun); text-decoration: none; }
/* 3. les chaînes : la carte claire, et la liste de la fiche dessous */
.o .ch-chaines-zone { padding-bottom: 28px; }
.o .ch-chaines.pv-cartes .ch-chaine { display: flex; flex-direction: column; }
.o .ch-chaines.pv-cartes .ve .vt-photo { height: 112px; }
.o .ch-chaines.pv-cartes .ve .vt-lien { flex: none; }   /* le prix suit le nom : la liste de la fiche vient dessous */
.o .ch-chaines.pv-cartes .ve .vt-bas { margin-top: 0; }
.o .ch-comp { flex: 1; padding: 0 14px 14px; border-top: 1px solid var(--trait); }
.o .ch-comp-tete { margin: 10px 0 4px; font-size: 13px; font-weight: 700; color: var(--brun); }
.o .ch-comp ul { margin: 0 0 8px; padding: 0 0 0 16px; display: grid; gap: 4px; font-size: 13.5px; line-height: 1.4; color: var(--encre); }
.o .ch-note { margin: 0 0 8px; font-size: 13.5px; font-weight: 700; color: var(--brun); }
.o .ch-comp .lien-brun { font-size: 14px; }
/* les prix à quatre et cinq chiffres : la règle des pages de machines (build_propositions_konigin_miellerie.CSS_PAGE_PLUS, 03/10), reprise telle quelle */
@media (min-width: 961px) {
  .o.fm-page .fp-grille.pv-cartes .ve .vt-bas { gap: 6px; }
  .o.fm-page .fp-grille.pv-cartes .ve .ajout-o { padding: 0 12px; }
  /* « 6 909,92 € » touchait encore « Ajouter » dans la grille à colonne de filtres (mesuré le 04/10) : 1 px de prix, 2 px de bouton */
  .o.ch-page .fp-zone .fp-grille.pv-cartes .ve .px-vente { font-size: 17px; }
  .o.ch-page .fp-zone .fp-grille.pv-cartes .ve .ajout-o { padding: 0 10px; }
}
/* 4. composer ma chaîne */
.o .ch-compo-zone { padding: 36px 0 44px; background: var(--creux); }
.o .ch-compo-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 24px; flex-wrap: wrap; margin: 0 0 16px; }
.o .ch-compo-tete h2 { margin: 0; font-size: 30px; line-height: 1.1; color: var(--brun); }
.o .ch-compo-cite { margin: 0; font-size: 15px; color: var(--encre); }
.o .ch-compo-grille { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.o .ch-etape { margin: 0 0 18px; padding: 0; border: 0; min-width: 0; }
.o .ch-etape legend { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 0; font-family: var(--titres); font-weight: 700; font-size: 20px; color: var(--brun); }
.o .ch-etape legend .k-etape { position: static; width: 22px; height: 24px; font-size: 12px; }
.o .ch-lignes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.o .ch-ligne, .o .ch-opt { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--o-rayon-carte); background: var(--bloc);
  box-shadow: inset 0 0 0 1px var(--trait); cursor: pointer; }
.o .ch-ligne:has(input:checked), .o .ch-opt:has(input:checked) { box-shadow: inset 0 0 0 2px var(--brun); }
.o .ch-ligne input, .o .ch-opt input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--brun); }
.o .ch-ligne input:focus-visible, .o .ch-opt input:focus-visible { outline: 3px solid var(--brun); outline-offset: 2px; }
.o .ch-ligne-txt { display: grid; gap: 2px; }
.o .ch-ligne-txt b { font-size: 15px; line-height: 1.3; color: var(--brun); }
.o.ch-page [data-compo-prix] { font-weight: 700; font-size: 15px; color: var(--encre); }
.o .ch-ligne small, .o .ch-opt small { font-size: 13px; color: var(--second); }
.o .ch-options { display: grid; gap: 8px; }
.o .ch-opt { justify-content: space-between; }
.o .ch-opt-txt { flex: 1 1 auto; display: grid; gap: 2px; font-size: 15px; line-height: 1.35; color: var(--encre); }
.o .ch-ref { font-size: 13px; color: var(--second); }
.o .ch-opt-prix { flex: none; display: grid; justify-items: end; text-align: right; }
.o .ch-sous { margin: 4px 0 0; padding: 0; border: 0; display: grid; gap: 8px; min-width: 0; }
.o .ch-sous legend { margin: 0 0 6px; padding: 0; font-size: 14px; font-weight: 700; color: var(--brun); }
.o .ch-cite { font-size: 14px; color: var(--second); }
.o .ch-sous-note { font-size: 13px; color: var(--second); }
.o .ch-sans { margin: 0; font-size: 15px; color: var(--second); }
.o .ch-recap { position: sticky; top: 16px; }
.o .ch-recap h3 { margin: 0; font-family: var(--titres); font-size: 22px; color: var(--brun); }
.o .ch-recap-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.o .ch-recap-liste li { display: flex; justify-content: space-between; gap: 12px; padding: 0 0 6px; border-bottom: 1px solid var(--trait); font-size: 14px; }
.o .ch-recap-liste li b { font-weight: 600; color: var(--encre); }
.o .ch-recap-liste li span { flex: none; font-weight: 700; color: var(--encre); }
.o .ch-somme { margin: 0; font-size: 13px; color: var(--second); }
.o .ch-jan { margin: 0; font-size: 15px; font-weight: 700; color: var(--brun); }
.o .ch-envoye { margin: 0; font-size: 14px; font-weight: 700; color: var(--brun); }
/* 5. vendus seuls ; 6. la documentation */
.o .ch-seuls-tete { padding-top: 36px; }
.o .ch-doc { padding-top: 8px; padding-bottom: 48px; }
.o .ch-doc .chapo-c { margin: 0 0 24px; max-width: 70ch; font-size: 17px; line-height: 1.55; color: var(--encre); }
@media (max-width: 960px) {
  .o .ch-titre { font-size: 22px; }
  .o .ch-quiz { padding: 12px; }
  .o .ch-q-tete h2 { font-size: 21px; }
  .o .ch-q-tete .k-aide-tel { display: none; }
  .o .ch-quiz .k-aide-cadre { padding: 12px; }
  .o .ch-quiz .k-aide-pas h3 { font-size: 18px; }
  .o .ch-quiz .k-reps-3, .o .ch-quiz .k-reps-4 { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .o .ch-quiz .k-rep { justify-items: start; gap: 0; padding: 10px 12px; text-align: left; }
  .o .ch-quiz .k-rep b { font-size: 17px; }
  .o .ch-res { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .o .ch-res-img img { height: 140px; }
  .o .ch-chaines.pv-cartes { grid-template-columns: minmax(0, 1fr); }
  .o .ch-compo-zone { padding: 28px 0 32px; }
  .o .ch-compo-tete h2 { font-size: 24px; }
  .o .ch-compo-grille, .o .ch-lignes { grid-template-columns: minmax(0, 1fr); }
  .o .ch-recap { position: static; }
}

.cookies { position: fixed; left: 20px; bottom: 20px; z-index: 30; max-width: 400px; background: var(--o-bloc); border-top: 4px solid var(--o-jaune); padding: 16px 18px; font: 13.5px/1.5 "Commissioner", sans-serif; box-shadow: 0 10px 30px rgba(42,18,9,.12); }
.cookies p { margin: 0 0 10px; }
.cookies div { display: flex; gap: 10px; }
.cookies button { flex: 1; min-height: var(--o-taille-touche); font: 700 14px "Commissioner", sans-serif; background: var(--o-bloc); color: var(--o-brun); border: 1.5px solid var(--o-brun); cursor: pointer; }
.cookies { color: var(--o-encre); }