/* Genere par app/site/scripts/feuille-o.ts depuis 2-CE-QU-ON-VA-CONSTRUIRE/maquettes/marque-konigin.html (sha256 82496da2a4947188556ee54e99fc51141bdbae9db44171f5ee6114e82364490f) : ne pas editer, regenerer (D-325). */

[hidden] { display: none !important; }
html, body { background: var(--o-cire); color: var(--o-encre); }
body { font: 16px/1.55 "Commissioner", "Segoe UI", Arial, sans-serif; }
.o :focus-visible { outline: 2px solid var(--brun); outline-offset: 3px; }
.o .repere { display: none; }













 
.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; }
.o .entete .marque { line-height: 0; flex: none; }
.o .entete .outils a { display: inline-flex; align-items: center; gap: 8px; min-height: var(--o-taille-touche); text-decoration: none; color: var(--brun); }
.o .entete .outils svg { width: 20px; height: 20px; }
.o .entete details.compte { position: relative; }
.o .entete details.compte summary .mot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.o .entete details.compte summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: var(--o-taille-touche); cursor: pointer; color: var(--brun); font-weight: 600; font-size: 14px; }
.o .entete details.compte summary::-webkit-details-marker { display: none; }
.o .entete details.compte ul { position: absolute; right: 0; top: 100%; z-index: 20; list-style: none; margin: 6px 0 0; padding: 8px 0; min-width: 220px; background: var(--bloc); box-shadow: 0 12px 30px -12px rgba(42,18,9,.35); border-top: 3px solid var(--jaune); }
.o .entete details.compte ul a { display: flex; min-height: var(--o-taille-touche); align-items: center; padding: 0 18px; font-size: 14px; }
.o .entete details.compte ul a:hover { background: var(--cire); }
.o .services a { text-decoration: none; color: var(--second); }
.o .services a.pro-lien { color: var(--nuit); }
.o h2.etiq-c { font-family: var(--corps); font-variation-settings: normal; font-weight: 700; font-size: 12px; letter-spacing: .14em; line-height: 1.3; color: var(--brun); }
.o .ouverture-claire h1 { font-size: 58px; max-width: 15ch; }
.o .ouverture-claire h1 .h1-suite { display: block; margin-top: 14px; font-size: 26px; line-height: 1.2; letter-spacing: -.01em; color: var(--encre); max-width: 26ch; }
.o .ouv-photo { position: relative; }
.o .retrait-o { position: relative; margin: 30px 0 0; padding-top: 18px; border-top: 1px solid var(--trait); display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14.5px; color: var(--second); max-width: 46ch; }
.o .retrait-o b { color: var(--encre); }
.o .fine-saison { position: relative; margin: 22px 0 0; font-size: 14.5px; color: var(--second); max-width: 46ch; }
.o .rayons .aussi { display: flex; flex-wrap: wrap; gap: 10px 30px; margin: 22px 0 0; }
.o .rail-fleches { display: flex; gap: 8px; }
.o .rail-fleches button { width: var(--o-taille-touche); height: var(--o-taille-touche); border-radius: var(--o-rayon-rond); border: 0; background: var(--bloc); box-shadow: inset 0 0 0 1px var(--trait); color: var(--brun); font-size: 18px; cursor: pointer; }
.o .rail-fleches button:hover { background: var(--brun); color: var(--sur-brun); }
.o .btn-brun, .o .btn-nuit { border: 0; cursor: pointer; font-family: var(--corps); }
.o .pro-fait { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; font-size: 14.5px; }
.o .konigin-o { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding-top: 10px; padding-bottom: 80px; }
.o .konigin-o .a-photographier { min-height: 520px; }
.o .konigin-o h2 { margin: 0 0 14px; font-size: 38px; line-height: 1.1; color: var(--brun); letter-spacing: -.018em; }
.o .konigin-o > div > p.intro-k { margin: 0 0 22px; color: var(--second); font-size: 17px; }
.o .konigin-o > div > p.intro-k b { color: var(--encre); }
.o .familles-o { margin: 0 0 26px; }
.o .familles-o .etiq-c { margin: 14px 0 6px; }
.o .deux-o { padding-top: 70px; padding-bottom: 20px; }
.o .deux-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.o .monde { background: var(--bloc); display: grid; grid-template-rows: auto 1fr; }
.o .monde > a { display: grid; grid-template-columns: 200px 1fr; gap: 22px; align-items: center; padding: 22px 26px; text-decoration: none; }
.o .monde .objet { height: 210px; }
.o .monde .objet > img { max-width: 70%; max-height: 80%; }
.o .monde h3 { margin: 0 0 8px; font-size: 28px; color: var(--brun); font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-weight: 700; }
.o .monde em { font-style: normal; color: var(--second); font-size: 15px; }
.o .monde .univers-liste { border-top: 1px solid var(--trait); }
.o .monde .univers-liste li { padding: 12px 26px; }
.o .monde .univers-liste li span { color: var(--second); font-size: 14px; text-align: right; }
.o .porte-pro { margin: 20px 0 0; font-size: 15px; color: var(--second); }
.o .a-photographier { position: relative; margin: 0; min-height: 300px; display: grid; place-items: center; overflow: hidden; box-shadow: inset 0 0 0 1.5px #CDBB92; }
.o .ap-centre { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 26px 26px 120px; --fond-picto: var(--o-creux); }
.o .a-photographier:not(:has(.ap-avantage)) .ap-centre { padding-bottom: 26px; }
.o .ap-tag { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--nuit); background: var(--jaune); padding: 3px 9px; }
.o .ap-sujet { font-size: 15px; color: var(--second); max-width: 30ch; }
.o .ap-avantage { position: absolute; left: 18px; right: 18px; bottom: 18px; background: var(--bloc); border-top: 4px solid var(--jaune); padding: 16px 18px; display: grid; gap: 4px; text-align: left; }
.o .ap-avantage small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--brun); }
.o .ap-avantage b { 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 .ap-avantage > span { font-size: 14px; color: var(--second); }
.o .galerie-o { position: relative; background: var(--bloc); }
.o .galerie-piste { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.o .galerie-piste::-webkit-scrollbar { display: none; }
.o .galerie-piste > * { scroll-snap-align: start; height: 540px; }
.o .galerie-piste .objet-grand { height: 540px; }
.o .galerie-piste .a-photographier { min-height: 0; box-shadow: none; }
.o .galerie-bas { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--trait); }
.o .vignettes { display: flex; gap: 8px; flex-wrap: wrap; }
.o .vignettes button { font: 600 13px var(--corps); color: var(--second); background: var(--cire); border: 0; box-shadow: inset 0 0 0 1px var(--trait); padding: 8px 12px; min-height: 40px; cursor: pointer; }
.o .vignettes button[aria-current="true"] { background: var(--brun); color: var(--sur-brun); box-shadow: none; }
.o .dc-pro { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 18px; font-size: 14.5px; color: var(--second); }
.o .dc-pro b { color: var(--encre); } .o .dc-pro a { color: var(--brun); font-weight: 600; }
.o .qte-ligne { display: flex; gap: 14px; align-items: end; margin: 0; }
.o .qte-ligne .btn-brun { flex: 1; text-align: center; padding: 16px 22px; font-size: 15px; }
.o .epuise-o { background: var(--creux); padding: 18px 20px; display: grid; gap: 8px; margin: 0 0 18px; font-size: 15px; }
.o .epuise-o form { display: grid; gap: 10px; }
.o .epuise-o label { display: grid; gap: 6px; font-size: 13px; color: var(--second); }
.o .epuise-o input { font: inherit; padding: 12px; border: 1.5px solid var(--second); background: var(--bloc); }
.o .bloc-faq details.faq-q { display: block; padding: 0; }
.o .bloc-faq details.faq-q summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 18px 24px; }
.o .bloc-faq details.faq-q summary::-webkit-details-marker { display: none; }
.o .bloc-faq details.faq-q p { margin: 0; padding: 0 24px 18px; font-size: 15px; }
.o .avis-titre { margin: 0 0 14px; font-size: 26px; color: var(--brun); grid-column: 1 / -1; }
.o .barre-geste { position: sticky; bottom: 0; z-index: 8; display: none; background: var(--bloc); border-top: 4px solid var(--jaune); padding: 10px 20px; grid-template-columns: 1fr auto; align-items: center; gap: 14px; }
.o .article-o { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; padding-top: 26px; padding-bottom: 60px; align-items: start; }
.o .article-o h1 { margin: 0 0 18px; font-size: 56px; line-height: 1.03; color: var(--brun); letter-spacing: -.02em; }
.o .deux-phrases { margin: 0 0 16px; font-size: 20px; line-height: 1.5; color: var(--encre); max-width: 60ch; }
.o .modeles { margin: 0 0 30px; font-size: 15px; color: var(--second); }
.o .modeles a { color: var(--brun); font-weight: 700; }
.o .photo-article { min-height: 340px; }
.o .schema-o { background: var(--bloc); padding: 26px 28px 22px; margin: 34px 0 40px; border-top: 4px solid var(--jaune); }
.o .schema-o h2 { margin: 0 0 12px; font-size: 30px; color: var(--brun); }
.o .schema-o > p { margin: 0 0 18px; color: var(--second); }
.o .schema-o figure { margin: 0; }
.o .schema-o figcaption { margin-top: 14px; font-size: 14px; color: var(--second); }
.o .schema-o figcaption b { color: var(--encre); }
.o .schema-o figcaption .source { display: block; margin-top: 8px; font-size: 12.5px; }
.o .corps-o { max-width: 70ch; font-size: 17px; line-height: 1.7; }
.o .corps-o h2 { margin: 44px 0 14px; font-size: 32px; line-height: 1.12; color: var(--brun); }
.o .corps-o p { margin: 0 0 18px; }
.o .corps-o p.chapo { font-size: 19px; color: var(--encre); }
.o .corps-o a { color: var(--brun); font-weight: 600; }
.o .corps-o > a { display: block; margin: 20px 0 4px; }
.o .corps-o ul.list { list-style: none; margin: 0 0 22px; padding: 18px 22px; background: var(--bloc); display: grid; gap: 10px; }
.o .corps-o ul.list li { position: relative; padding-left: 26px; }
.o .corps-o ul.list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 12px; height: 13px; background: var(--jaune); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.o .corps-o ol { list-style: none; margin: 0 0 22px; padding: 0; counter-reset: av; display: grid; gap: 12px; }
.o .corps-o ol li { counter-increment: av; display: grid; grid-template-columns: 34px 1fr; gap: 16px; background: var(--bloc); padding: 18px 20px; }
.o .corps-o ol li::before { content: counter(av); width: 34px; height: 34px; border-radius: var(--o-rayon-rond); background: var(--jaune); color: var(--nuit); font: 700 15px/34px var(--corps); text-align: center; }
.o .corps-o ol li p { margin: 0; }
.o .citation-o { margin: 8px 0 30px; }
.o .citation-o blockquote { margin: 0; font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-weight: 700; font-size: 26px; line-height: 1.25; color: var(--sur-brun); }
.o .cote-o { position: sticky; top: 20px; display: grid; gap: 18px; }
.o .cote-o .horaires h2 { margin: 0 0 4px; font-size: 22px; color: var(--brun); }
.o .cote-o h2.etiq-c { margin: 0 0 10px; }
.o .pied-article-o { padding-bottom: 70px; }
.o .pied-article-o h2 { margin: 0 0 18px; font-size: 34px; color: var(--brun); }
.o .pied-article-o ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.o .pied-article-o a { background: var(--bloc); padding: 20px 22px; text-decoration: none; display: flex; gap: 14px; align-items: center; border-left: 4px solid var(--jaune); height: 100%; --fond-picto: var(--o-bloc); }
.o .pied-article-o b { display: block; font-size: 17px; color: var(--encre); }
.o .pied-article-o em { font-style: normal; font-size: 14px; color: var(--second); }
.o .legal { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--brun); }
.o .legal a { display: inline; color: var(--second-brun); font-size: 13px; }
@media (max-width: 960px) {
  .o .w, .maquette .mw { padding-left: 20px; padding-right: 20px; }
  .o .ouverture-claire { overflow-x: clip; }
  .o .ouv-grille, .o .rayons-grille, .o .pro-grille, .o .jan-grille, .o .fiche-grille, .o .cartes-avantages, .o .fiche-bas2, .o .bloc-conseils,
  .o .fiche-avec, .o .bloc-avis-partage, .o .konigin-o, .o .deux-grille, .o .article-o, .o .pied-article-o ul, .o .magasin-carte { grid-template-columns: 1fr; gap: 22px; }
  .o .marques-rang, .o .reassurance, .o .chiffres-rang, .o .ft-3, .o .pied-grille { grid-template-columns: 1fr 1fr; }
  .o .chiffres-rang div:nth-child(3) { background: none; padding-left: 0; } .o .chiffres-rang b { font-size: 44px; }
  .o .ouv-texte { padding: 30px 0; } .o .ouv-photo { margin: 0 -20px; order: -1; } .o .ouv-photo > img { width: 100%; height: 340px; object-fit: cover; }
  .o .ouverture-claire h1, .o .article-o h1 { font-size: 40px; } .o .ouverture-claire h1 .h1-suite { font-size: 21px; }
  .o .rayon-grand { grid-row: auto; } .o .rail-piste { grid-auto-columns: 72%; } .o .rail-campagne { grid-column: span 1; grid-template-columns: 1fr; grid-template-rows: 200px auto; }
  .o .rail-fleches { display: none; } .o .monde > a { grid-template-columns: 1fr; } .o .monde .objet { height: 180px; } .o .konigin-o .a-photographier { min-height: 300px; }
  .o .galerie-piste > *, .o .galerie-piste .objet-grand { height: 380px; }
  .o .decision-o h1 { font-size: 34px; } .o .cote-o { position: static; } .o .barre-geste { display: grid; }
  body:has(.o .barre-geste) .cookies { bottom: 96px; }   /* 18/09 — relecture UX : le bandeau ne recouvre plus la barre d’achat */
  .o .pied-grille > img { display: none; }
  .o .bloc-logistique { grid-template-columns: 1fr; } .o .objet-grand { height: 360px; } .o .dc-prix { gap: 6px; } .o .prix-grand { font-size: 42px; }
  .o .fiche-grille, .o .fiche-bas2, .o .fiche-avec { overflow-wrap: anywhere; } .o .qte input { width: 72px; }
}

/* l'image à venir : un fond uni, ce qu'elle montre, ce qu'elle dit */
.o .image-a-venir { position: relative; margin: 0; display: grid; place-items: center; overflow: hidden;
  background-color: #EFE4CA; background-image: linear-gradient(135deg, #F4EBD6 0%, #E7D7B3 100%); }
.o .image-a-venir::after { content: ""; position: absolute; inset: 10px; border: 1.5px dashed rgba(85,37,19,.28); pointer-events: none; }
.o .iav-cadre { position: relative; z-index: 1; display: grid; justify-items: center; gap: 6px; padding: 18px 22px; text-align: center; max-width: 46ch; }
.o .iav-tag { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--nuit); background: var(--jaune); padding: 3px 9px; }
.o .iav-sujet { font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-weight: 700; font-size: 17px; line-height: 1.25; color: var(--brun); }
.o .iav-dit { font-size: 13px; color: var(--second); }
.o .image-a-venir.mini .iav-sujet { font-size: 13px; } .o .image-a-venir.mini .iav-dit { display: none; } .o .image-a-venir.mini .iav-cadre { padding: 10px; }
.o .objet > img { mix-blend-mode: multiply; }
/* le diaporama plein pied de l'accueil */
.o .diaporama { position: relative; background-color: var(--nuit); color: var(--sur-brun); }
.o .diapo { position: relative; height: min(76vh, 700px); min-height: 520px; background-color: var(--nuit); overflow: hidden; }
.o .diapo:not([hidden]) { animation: diapo-entre .7s ease both; }
@keyframes diapo-entre { from { opacity: 0; } to { opacity: 1; } }
.o .diapo > .image-a-venir, .o .diapo > img, .o .diapo > picture, .o .diapo > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.o .diapo > .image-a-venir { place-items: start end; }
.o .diapo > .image-a-venir .iav-cadre { margin: 22px 26px 0 0; background: rgba(255,255,255,.72); justify-items: end; text-align: right; }
/* ✏️ 23/09, Ruben : « le dégradé marron trop contrasté, ça met moins l'image en valeur » -> option B : sur ordinateur, le voile
   ne couvre que le côté du texte et s'efface avant le sujet de la photo ; sur téléphone (≤ 960 px), le voile de bas en haut reste.
   ✏️ 23/09 (« un bug de dimension ») : sur ordinateur le voile prend TOUTE la hauteur de la photo (top: 0), le texte reste en bas. */
.o .diapo-voile { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 150px 0 92px; background: linear-gradient(90deg, rgba(42,18,9,.66) 0%, rgba(42,18,9,.38) 38%, rgba(42,18,9,0) 62%); }
.o .diapo-texte { display: grid; gap: 14px; justify-items: start; }
.o .diapo-voile > .diapo-texte { width: 100%; }   /* 23/09 : dans le voile en colonne, les marges auto du .w le centraient */
.o .diapo .etiq-c { color: var(--jaune); margin: 0; }
.o .diapo h1, .o .diapo .diapo-titre { margin: 0; font-family: var(--titres); font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; font-weight: 700;
  font-size: 58px; line-height: 1.03; letter-spacing: -.02em; color: var(--sur-brun); max-width: 16ch; }
.o .diapo h1 .h1-suite { display: block; margin-top: 10px; font-size: 22px; line-height: 1.25; color: var(--second-brun); max-width: 34ch; letter-spacing: 0; }
.o .diapo .diapo-fine { margin: 0; font-size: 17px; color: var(--second-brun); }
.o .diapo .gestes { margin: 8px 0 0; }
.o .diapo .btn-brun { background: var(--jaune); color: var(--nuit); }
.o .diapo-commandes { position: absolute; left: 0; right: 0; bottom: 26px; z-index: 3; display: flex; align-items: center; gap: 10px; }
.o .diapo-commandes button { height: 40px; min-width: 40px; border-radius: 20px; border: 0; background: rgba(252,249,241,.16); color: var(--sur-brun); font: 600 13px var(--corps); cursor: pointer; padding: 0 12px; }
.o .diapo-commandes button:hover, .o .diapo-commandes button[aria-current="true"] { background: var(--sur-brun); color: var(--nuit); }
.o .diapo-points { display: flex; gap: 6px; margin-left: 8px; }
/* l'accueil : l'univers en images */
.o .univers-images { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.o .univers-images a { display: grid; gap: 12px; text-decoration: none; }
.o .univers-images .image-a-venir { aspect-ratio: 4 / 3; }
.o .univers-images b { font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-weight: 700; font-size: 23px; color: var(--brun); line-height: 1.15; }
.o .univers-images span.sous { font-size: 14px; color: var(--second); margin-top: -8px; }
.o .reassurance-3 { grid-template-columns: repeat(3, 1fr); padding-top: 26px; }
/* la fiche : l'ordre de l'acheteur */
.o .fiche-vignettes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.o .fiche-vignettes .image-a-venir { aspect-ratio: 1; }
.o .compat { margin: 0 0 20px; padding: 12px 16px; background: var(--bloc); border-left: 4px solid var(--jaune); font-size: 15px; display: grid; gap: 2px; }
.o .compat b { color: var(--encre); } .o .compat a { color: var(--brun); font-weight: 600; }
.o .sommaire-fiche { position: sticky; top: 0; z-index: 7; background: var(--cire); border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); margin: 0 0 44px; }
.o .sommaire-fiche .w { display: flex; gap: 6px 26px; flex-wrap: wrap; align-items: center; min-height: 54px; font-size: 14.5px; font-weight: 600; }
.o .sommaire-fiche a { text-decoration: none; color: var(--encre); padding: 6px 0; }
.o .sommaire-fiche a:hover { box-shadow: inset 0 -3px var(--jaune); }
.o .sommaire-fiche .sf-prix { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.o .sommaire-fiche .sf-prix b { font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-size: 22px; }
.o .sommaire-fiche .btn-brun { padding: 10px 18px; font-size: 13px; }
.o .cartes-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.o .caracs-seules { grid-template-columns: 1fr; }
.o .ft-4 { grid-template-columns: repeat(4, 1fr); }
.o .completer { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; padding-bottom: 56px; }
.o .completer h2 { margin: 0 0 16px; font-size: 30px; color: var(--brun); grid-column: 1 / -1; }
.o .completer h3 { margin: 0 0 12px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--brun); font-family: var(--corps); font-variation-settings: normal; }
.o .avis-ligne { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; padding-bottom: 56px; }
/* l'article */
.o .article-tete { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; padding-top: 22px; padding-bottom: 40px; }
.o .article-tete h1 { margin: 0 0 18px; font-size: 56px; line-height: 1.03; color: var(--brun); letter-spacing: -.02em; }
.o .article-tete .image-a-venir { min-height: 380px; }
.o .sommaire-article { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 34px; padding: 14px 0; border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); font-size: 14.5px; font-weight: 600; }
.o .sommaire-article a { text-decoration: none; color: var(--brun); }
.o .article-corps { padding-bottom: 50px; }
.o .article-corps .schema-o { margin-top: 0; }
.o .article-corps .corps-o { max-width: 76ch; }
.o .corps-o .cartes-texte { list-style: none; margin: 8px 0 30px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: none; }
.o .corps-o .cartes-texte li { background: var(--bloc); display: grid; grid-template-rows: auto 1fr; font-size: 15.5px; line-height: 1.55; }
.o .corps-o .cartes-texte li { padding-left: 0; border: 0; } .o .corps-o .cartes-texte li::before { display: none; }
.o .corps-o .cartes-texte li > span.txt { padding: 16px 18px 18px; border-top: 4px solid var(--jaune); }
.o .corps-o .cartes-texte .image-a-venir { aspect-ratio: 16 / 9; }
.o .corps-o ol.cartes-num { grid-template-columns: repeat(3, minmax(0, 1fr)); display: grid; }
.o .corps-o ol.cartes-num li { grid-template-columns: 34px 1fr; }
.o .article-magasin { padding-bottom: 60px; }
.o .pied-article-img ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.o .pied-article-img a { display: grid; gap: 10px; text-decoration: none; }
.o .pied-article-img .image-a-venir { aspect-ratio: 16 / 9; }
.o .pied-article-img b { font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-weight: 700; font-size: 21px; color: var(--brun); }
.o .pied-article-img em { font-style: normal; font-size: 14px; color: var(--second); margin-top: -6px; }
.o .pied-article-img h2 { margin: 0 0 18px; font-size: 34px; color: var(--brun); }
@media (max-width: 960px) {
  .o .diapo-voile { top: auto; display: block; background: linear-gradient(180deg, rgba(42,18,9,0) 0%, rgba(42,18,9,.78) 62%); }
  .o .diapo { height: 560px; min-height: 0; } .o .diapo h1, .o .diapo .diapo-titre { font-size: 36px; } .o .diapo h1 .h1-suite { font-size: 17px; }
  .o .diapo > .image-a-venir .iav-cadre { margin: 12px; } .o .diapo > .image-a-venir .iav-dit { display: none; }
  .o .univers-images, .o .reassurance-3, .o .cartes-4, .o .ft-4, .o .completer, .o .avis-ligne, .o .article-tete, .o .corps-o .cartes-texte,
  .o .corps-o ol.cartes-num, .o .pied-article-img ul { grid-template-columns: 1fr; }
  .o .univers-images { grid-template-columns: 1fr 1fr; } .o .ft-4 { grid-template-columns: 1fr 1fr; }
  .o .sommaire-fiche .w { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; } .o .sommaire-fiche .sf-prix { display: none; }
  .o .article-tete h1 { font-size: 40px; } .o .article-tete .image-a-venir { min-height: 240px; order: -1; }
}
@media (prefers-reduced-motion: reduce) { .o .diapo:not([hidden]) { animation: none; } }

/* v5 : les repères de la charte (1 à 15) se montrent avec le bouton « notes » */

.o .sr-seul { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* la charte telle quelle : les réglages des versions précédentes qui la contredisaient sont annulés */
.o .ouverture-claire h1 { font-size: 64px; max-width: 16ch; }
.o form.qte { margin: 0; }
/* l'accueil : les photos défilent dans le cadre photo de la charte */
.o .ouv-photo > .image-a-venir, .o .ouv-photo > img, .o .ouv-photo > picture, .o .ouv-photo > picture > img { position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover; }
.o .photo-commandes { position: absolute; left: 18px; bottom: 18px; z-index: 3; display: flex; gap: 8px; }
.o .photo-commandes button { width: var(--o-taille-touche); height: var(--o-taille-touche); border-radius: var(--o-rayon-rond); border: 0; background: var(--bloc); box-shadow: inset 0 0 0 1px var(--trait); color: var(--brun); font: 700 15px var(--corps); cursor: pointer; }
.o .photo-commandes button:hover { background: var(--brun); color: var(--sur-brun); }
/* l'article, avec les pièces de la charte */
.o .article-ouv .ouv-grille { min-height: 520px; }
.o .article-ouv h1 { max-width: 14ch; }
.o .article-bloc { padding-top: 56px; }
.o .article-bloc .corps-o { max-width: 820px; }
.o .corps-o ul.cartes-avantages { margin: 8px 0 30px; padding: 0; background: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.o .corps-o ul.cartes-avantages li { padding: 24px 24px 26px; }
.o .corps-o ul.cartes-avantages li::before { content: none; }
.o .corps-o .cartes-avantages span b { font-family: var(--corps); font-variation-settings: normal; font-size: inherit; color: var(--encre); }
.o .corps-o ol.etapes { margin: 8px 0 30px; }
.o .corps-o ol.etapes li { display: grid; background: var(--bloc); }
.o .corps-o ol.etapes li::before { content: none; }
.o .rayons-6 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.o .article-bas { padding-top: 40px; padding-bottom: 70px; }
@media (max-width: 960px) {
  .o .rayons-6, .o .corps-o .cartes-avantages { grid-template-columns: 1fr; }
  .o .ouverture-claire h1 { font-size: 40px; } .o .ouv-photo { min-height: 340px; }
}
/* 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 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; }

/* ══ LA PAGE DE MARQUE KÖNIGIN, 14/09 ══ */
.o .sr-seul { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.o .km-lien { font: inherit; font-size: 14px; font-weight: 600; background: none; border: 0; padding: 10px 2px; min-height: var(--o-taille-touche); cursor: pointer; color: var(--brun);
  text-decoration: underline; text-decoration-color: var(--ambre); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.o .km-source { font-size: 13px; color: var(--second); white-space: nowrap; }
.o .km-ref { display: block; font-size: 12px; letter-spacing: .04em; color: var(--second); }
.o .km-chapo-s { margin: 12px 0 0; font-size: 17px; color: var(--encre); max-width: 62ch; }
/* l'ouverture */
.o .km-ouv { background: var(--cire); padding: 26px 0 30px; }
.o .km-ouv-grille { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 52px; align-items: center; }
.o .km-ouv h1 { margin: 0 0 18px; font-size: 48px; line-height: 1.05; letter-spacing: -.02em; color: var(--brun); max-width: 21ch; text-wrap: balance; }
.o .km-chapo { margin: 0 0 22px; font-size: 19px; line-height: 1.5; color: var(--encre); max-width: 46ch; }
.o .km-chapo b { color: var(--brun); }
.o .km-lockup { margin: 0 0 26px; }
.o .km-gestes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.o .km-gestes .btn-brun { min-height: 50px; display: inline-flex; align-items: center; }
.o .km-chiffres { display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 30px 0 0; padding-top: 18px; border-top: 1px solid var(--trait); }
.o .km-chiffres dt { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--second); }
.o .km-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); }
/* l'ouverture : la machine sur un disque blanc, posé sur la coulée de miel de la charte O */
.o .km-plaque { margin: 0; }
.o .km-plaque-fond { position: relative; height: 460px; border-radius: var(--o-rayon-plaque); overflow: hidden; }
.o .km-disque { position: absolute; left: 50%; top: 44%; width: 340px; height: 340px; transform: translate(-50%, -50%); border-radius: var(--o-rayon-rond); background: var(--o-bloc);
  box-shadow: 0 0 0 12px rgba(255,255,255,.35), 0 24px 40px -30px rgba(42,18,9,.55); display: grid; place-items: center; overflow: hidden; }
.o .km-disque img { height: 290px; width: auto; max-width: none; mix-blend-mode: multiply; }
.o .km-cote { position: absolute; left: calc(50% - 150px); width: 300px; bottom: 22px; display: grid; justify-items: center; gap: 4px; }
.o .km-cote-trait { width: 100%; height: 14px; display: block; }
.o .km-cote span { font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--nuit); background: var(--bloc); padding: 2px 12px; border-radius: var(--o-rayon-pilule); margin-top: -2px; }
.o .km-plaque figcaption { margin: 12px 4px 0; display: grid; gap: 2px; font-size: 14px; color: var(--second); }
.o .km-plaque figcaption b { font-size: 15px; color: var(--encre); }
.o .km-sommaire { display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0 0; padding-top: 18px; border-top: 1px solid var(--trait); }
.o .km-sommaire a { display: inline-flex; align-items: center; min-height: var(--o-taille-touche); padding: 0 16px; font-size: 14px; font-weight: 600; color: var(--brun); text-decoration: none;
  background: var(--bloc); border-radius: var(--o-rayon-doux); box-shadow: inset 0 0 0 1px var(--trait); }
.o .km-sommaire a:hover { box-shadow: inset 0 0 0 2px var(--brun); }
/* « pour qui » sur la gaufre de la charte O ; le texte est dans les cartes, le titre sur un fond assez uni pour se lire */
.o .km-pourqui { padding: 56px 0 64px; }
.o .km-pourqui .titre-section h2 { max-width: 24ch; }
.o .km-paliers { display: grid; gap: 14px; }
.o .km-palier { display: grid; grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; align-items: start; background: var(--bloc); border-radius: var(--o-rayon-carte); padding: 24px 28px 22px 22px;
  box-shadow: 0 0 0 1px rgba(227,214,180,.9), 0 14px 30px -26px rgba(42,18,9,.5); }
.o .km-palier-photo { display: grid; place-items: center; width: 140px; height: 140px; border-radius: var(--o-rayon-petit); background: var(--o-bloc); box-shadow: inset 0 0 0 1px var(--trait); }
.o .km-palier-img { width: 124px; height: 124px; object-fit: contain; mix-blend-mode: multiply; }
.o .km-palier-texte .etiq-c { margin: 0 0 6px; }
.o .km-palier h3 { margin: 0 0 8px; font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-weight: 700; font-size: 27px; line-height: 1.12; color: var(--brun); }
.o .km-palier-texte > p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--encre); max-width: 48ch; }
.o .km-palier-texte .km-loc { margin-top: 12px; font-size: 14.5px; color: var(--second); }
.o .km-echelle { margin: 0 0 12px; }
.o .km-echelle-t { margin: 0 0 8px; font-size: 14px; color: var(--second); } .o .km-echelle-t b { color: var(--encre); font-size: 16px; }
.o .km-jauge { position: relative; height: 12px; border-radius: var(--o-rayon-champ); background: #F1EADB; box-shadow: inset 0 0 0 1px rgba(170,121,43,.18); }
.o .km-barre { position: absolute; top: 0; bottom: 0; border-radius: var(--o-rayon-champ); background: var(--brun); box-shadow: inset 0 3px 0 rgba(253,212,14,.9); }
.o .km-grad { position: relative; height: 18px; margin-top: 4px; }
.o .km-grad span { position: absolute; top: 0; transform: translateX(-50%); font-size: 12px; color: var(--second); }
.o .km-grad span:first-child { transform: none; } .o .km-grad span:last-child { transform: translateX(-100%); }
.o .km-compte { margin: 0 0 8px; font-size: 14.5px; line-height: 1.5; color: var(--second); } .o .km-compte b { color: var(--encre); font-size: 16px; }
.o .km-lignes { list-style: none; margin: 0; padding: 0; }
.o .km-lignes li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline; padding: 10px 0; border-top: 1px solid #EFE6D0; }
.o .km-l-nom { min-width: 0; font-size: 14.5px; line-height: 1.35; }
.o .km-l-nom a { color: var(--encre); font-weight: 600; text-decoration: none; } .o .km-l-nom a:hover { text-decoration: underline; text-decoration-color: var(--ambre); }
.o .km-l-prix { text-align: right; white-space: nowrap; }
.o .km-l-prix b { display: block; font-size: 15.5px; color: var(--encre); } .o .km-l-prix small { font-size: 10px; letter-spacing: .1em; color: var(--second); }
.o .km-l-prix em { display: block; font-style: normal; font-size: 12px; color: var(--second); }
.o .km-d227 { margin: 18px 0 0; font-size: 14px; color: var(--second); background: var(--bloc); display: inline-block; padding: 10px 14px; border-radius: var(--o-rayon-champ); }
.o .km-d227 b { color: var(--encre); }
/* comment choisir */
.o .km-choisir { padding-top: 60px; padding-bottom: 50px; }
.o .km-choisir .k-questions { padding-top: 4px; }
.o .k-q-tete h3 { 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 a.k-choix { text-decoration: none; }
.o .km-entrs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.o .km-entr, .o .km-type { text-decoration: none; background: var(--bloc); border-radius: var(--o-rayon-carte); box-shadow: inset 0 0 0 1px var(--trait); color: var(--brun); }
.o .km-entr:hover, .o .km-type:hover { box-shadow: inset 0 0 0 2px var(--ambre); }
.o .km-entr { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px; align-items: center; padding: 14px 20px 14px 14px; }
.o .km-entr-img { width: 120px; height: 120px; object-fit: contain; mix-blend-mode: multiply; }
.o .km-type-txt { display: grid; gap: 5px; align-content: start; }
.o .km-type-txt b { font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-size: 23px; line-height: 1.1; color: var(--brun); }
.o .km-type-txt > span { font-size: 14.5px; line-height: 1.45; color: var(--encre); }
.o .km-type-txt em { font-style: normal; font-size: 13.5px; font-weight: 700; color: var(--encre); margin-top: 4px; }
.o .km-faces { justify-self: start; font-style: normal; font-size: 13px; font-weight: 700; color: var(--nuit); background: #FFE88A; border-radius: var(--o-rayon-pilule); padding: 3px 11px; }
.o .km-types-bloc { display: grid; gap: 14px; }
.o .km-types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.o .km-type { display: grid; grid-template-rows: auto 1fr; padding: 0 0 18px; overflow: hidden; }
.o .km-type-schema { position: relative; display: grid; place-items: center; background: var(--creux); padding: 10px 10px 22px; margin-bottom: 14px; }
.o .km-schema { width: 100%; max-width: 230px; height: auto; color: var(--brun); }
.o .km-vue { position: absolute; left: 10px; bottom: 6px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--second); }
.o .km-type .km-type-txt { padding: 0 18px; }
.o .km-legende { list-style: none; margin: 0; padding: 10px 16px; display: flex; flex-wrap: wrap; gap: 8px 26px; background: var(--bloc); border-radius: var(--o-rayon-petit); box-shadow: inset 0 0 0 1px var(--trait); font-size: 14px; color: var(--encre); }
.o .km-legende li { display: inline-flex; align-items: center; gap: 8px; }
.o .km-suite { margin: 18px 0 0; font-size: 15px; color: var(--second); }
/* l'aide : un fond uni, la carte blanche de la page de la DA */
.o .km-aide { background: var(--creux); }
.o .km-aide .k-aide-cadre { box-shadow: 0 0 0 1px rgba(227,214,180,.9); }
.o .km-aide .k-choix-res .lien-brun { justify-self: start; }
/* la gamme, dans l'ordre du travail */
.o .km-gamme { padding: 64px 0 60px; background: var(--cire); }
.o .km-chemin { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.o .km-etape { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; }
.o .km-etape::before { content: ""; position: absolute; left: 25px; top: 0; bottom: -14px; width: 2px; background: repeating-linear-gradient(180deg, rgba(170,121,43,.55) 0 6px, transparent 6px 11px); }
.o .km-etape:last-child::before { bottom: 50%; }
.o .km-etape-num { position: relative; z-index: 1; align-self: start; margin-top: 26px; width: var(--o-taille-geste); height: var(--o-taille-geste); display: grid; place-items: center; background: var(--jaune); color: var(--nuit);
  font-weight: 800; font-size: 19px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.o .km-etape-carte { display: grid; grid-template-columns: 116px minmax(0, .85fr) minmax(0, 1.15fr); gap: 26px; align-items: start; background: var(--bloc); border-radius: var(--o-rayon-carte); padding: 20px 26px 16px 18px;
  box-shadow: 0 0 0 1px rgba(227,214,180,.9); }
.o .km-etape-img { width: 116px; height: 116px; display: grid; place-items: center; background: var(--o-bloc); }
.o .km-etape-img img { width: 108px; height: 108px; object-fit: contain; mix-blend-mode: multiply; }
.o .km-etape h3 { margin: 2px 0 4px; font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-weight: 700; font-size: 26px; line-height: 1.12; color: var(--brun); }
.o .km-sous { margin: 0 0 10px; font-size: 15px; color: var(--second); }
.o .km-etape-tete .lien-brun { font-size: 14.5px; display: inline-block; padding: 8px 0; }
.o .km-etape .km-lignes li:first-child { border-top: 0; }
.o .km-autour-titre { margin: 40px 0 12px; }
.o .km-autour { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.o .km-autour-carte { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 18px 14px 14px; background: var(--bloc); border-radius: var(--o-rayon-carte); text-decoration: none;
  box-shadow: 0 0 0 1px rgba(227,214,180,.9); }
.o .km-autour-carte:hover { box-shadow: 0 0 0 2px var(--ambre); }
.o .km-autour-carte img { width: 84px; height: 84px; object-fit: contain; mix-blend-mode: multiply; }
.o .km-autour-carte > span { display: grid; gap: 2px; }
.o .km-autour-carte b { font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-size: 20px; line-height: 1.15; color: var(--brun); }
.o .km-autour-carte em { font-style: normal; font-size: 14px; color: var(--second); }
.o .km-autour-carte span.num { font-size: 13.5px; font-weight: 600; color: var(--encre); margin-top: 4px; }
/* la Konig Line, sur le motif de nuit de la charte O */
.o .km-kl { padding: 70px 0 56px; color: var(--sur-brun); }
.o .km-trajet { margin: 0 0 22px; background: #3A1D11; border-radius: var(--o-rayon-carte); padding: 18px 22px 20px; }
.o .km-trajet .etiq-o { margin: 0 0 14px; }
.o .km-trajet ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.o .km-trajet li { position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 12px; }
.o .km-trajet li + li::before { content: "→"; position: absolute; left: -14px; top: 50%; transform: translate(-50%, -50%); color: var(--jaune); font-size: 20px; font-weight: 700; }
.o .km-trajet-img { grid-row: 1 / span 2; width: 84px; height: 84px; border-radius: var(--o-rayon-rond); background: var(--o-bloc); display: grid; place-items: center; overflow: hidden; }
.o .km-trajet-img img { width: 72px; height: 72px; object-fit: contain; }
.o .km-trajet-num { align-self: end; font-size: 12px; font-weight: 800; color: var(--jaune); letter-spacing: .1em; }
.o .km-trajet b { align-self: start; font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-size: 20px; color: var(--sur-brun); }
.o .km-kl-tete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: end; margin: 0 0 30px; }
.o .km-kl h2 { margin: 0; font-size: 46px; line-height: 1.05; letter-spacing: -.02em; color: var(--jaune); max-width: 16ch; }
.o .km-kl-cite { margin: 14px 0 0; font-family: var(--titres); font-style: italic; font-size: 21px; color: var(--sur-brun); }
.o .km-kl-cite span { font-family: var(--corps); font-style: normal; font-size: 13px; color: var(--second-brun); margin-left: 10px; }
.o .km-kl-carte { background: #3A1D11; border-radius: var(--o-rayon-carte); padding: 24px 26px; }
.o .km-kl-carte p { margin: 0 0 18px; font-size: 16.5px; line-height: 1.6; color: #EADBC4; } .o .km-kl-carte b { color: var(--sur-brun); }
.o .km-btn-jaune { background: var(--jaune) !important; color: var(--nuit) !important; min-height: 48px; display: inline-flex; align-items: center; }
.o .km-chaines { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.o .km-chaine { background: #3A1D11; border-radius: var(--o-rayon-carte); overflow: hidden; display: grid; align-content: start; padding: 0 18px 18px; }
.o .km-chaine-img { margin: 0 -18px 14px; height: 150px; display: grid; place-items: center; background: var(--o-bloc); }
.o .km-chaine-img img { width: auto; height: 132px; max-width: 90%; object-fit: contain; }
.o .km-chaine .km-ref { color: var(--second-brun); margin: 0 0 4px; }
.o .km-chaine h3 { margin: 0 0 8px; font-family: var(--corps); font-size: 16px; line-height: 1.3; font-weight: 700; color: var(--sur-brun); }
.o .km-chaine-cap { margin: 0 0 14px; font-size: 14px; line-height: 1.45; color: #EADBC4; }
.o .km-chaine-prix { margin: auto 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.o .km-chaine-prix b { font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-size: 25px; color: var(--sur-brun); }
.o .km-chaine-prix span { font-size: 11px; letter-spacing: .14em; font-weight: 700; color: var(--jaune); }
.o .km-chaine-prix em { flex-basis: 100%; font-style: normal; font-size: 13px; color: var(--second-brun); }
.o .km-options { list-style: none; margin: 24px 0 0; padding: 16px 20px; display: flex; flex-wrap: wrap; gap: 10px 30px; font-size: 14.5px; color: #EADBC4; background: #3A1D11; border-radius: var(--o-rayon-carte); }
.o .km-options li { display: flex; gap: 10px; } .o .km-options b { color: var(--sur-brun); }
.o .km-options-tete { font-weight: 700; color: var(--jaune) !important; letter-spacing: .12em; text-transform: uppercase; font-size: 12px; align-self: center; }
/* le conseil d'installation */
.o .km-conseil { padding: 64px 0; background: var(--creux); }
.o .km-conseil-grille { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 28px; align-items: stretch; }
.o .km-projet { background: var(--bloc); border-radius: var(--o-rayon-carte); padding: 30px 32px; }
.o .km-projet h2 { margin: 0 0 14px; font-size: 34px; line-height: 1.1; color: var(--brun); max-width: 20ch; }
.o .km-projet > p { margin: 0 0 20px; font-size: 17px; line-height: 1.6; color: var(--encre); max-width: 52ch; }
.o .km-projet-geste { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.o .km-projet-geste .btn-brun { min-height: 48px; display: inline-flex; align-items: center; }
.o .km-avs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.o .km-avs li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; background: var(--bloc); border-radius: var(--o-rayon-carte); padding: 18px 20px; border-left: 4px solid var(--jaune); --fond-picto: var(--o-bloc); }
.o .km-avs span { font-size: 15px; line-height: 1.5; color: var(--encre); }
.o .km-avs b { display: block; margin: 0 0 2px; font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-size: 20px; color: var(--brun); }
/* l'espace pro, sur la bande jaune aux lignes de niveau */
.o .km-pro .km-pro-carte { background: var(--bloc); border-radius: var(--o-rayon-carte); padding: 22px 24px; margin-top: 18px; max-width: 460px; }
.o .km-pro .km-pro-carte p { margin: 0 0 16px; font-size: 16px; color: var(--encre); } .o .km-pro .km-pro-carte b { color: var(--brun); }
.o .km-pro .pro-carte { border-radius: var(--o-rayon-carte); }
.o .km-pro .pro-carte > b { font-size: 21px; }
.o .km-magasin { padding-top: 56px; padding-bottom: 64px; }
.o .km-magasin .magasin-carte h2 { font-size: 26px; }
.o .km-magasin .magasin-carte a { color: var(--brun); }
.o .km-magasin .magasin-carte .btn-brun { color: var(--sur-brun); }
@media (max-width: 960px) {
  .o .km-ouv-grille, .o .km-kl-tete, .o .km-conseil-grille { grid-template-columns: 1fr; gap: 26px; }
  .o .km-ouv h1 { font-size: 34px; } .o .km-plaque-fond { height: 340px; }
  .o .km-disque { width: 250px; height: 250px; } .o .km-disque img { height: 215px; } .o .km-cote { width: 230px; left: calc(50% - 115px); bottom: 14px; }
  .o .km-types { grid-template-columns: 1fr 1fr; } .o .km-entrs { grid-template-columns: 1fr; }
  .o .km-trajet ol { grid-template-columns: 1fr 1fr; gap: 16px 22px; } .o .km-trajet li:nth-child(3)::before { display: none; }
  .o .km-palier { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 20px 18px; }
  .o .km-palier-photo { width: 96px; height: 96px; } .o .km-palier-img { width: 86px; height: 86px; }
  .o .km-palier-faits { grid-column: 1 / -1; }
  .o .km-etape { grid-template-columns: 1fr; } .o .km-etape::before, .o .km-etape-num { display: none; }
  .o .km-etape-carte { grid-template-columns: 84px minmax(0, 1fr); gap: 16px; padding: 18px; }
  .o .km-etape-img, .o .km-etape-img img { width: 84px; height: 84px; }
  .o .km-etape .km-lignes { grid-column: 1 / -1; }
  .o .km-etape h3 { font-size: 22px; }
  .o .km-autour, .o .km-chaines { grid-template-columns: 1fr; }
  .o .km-kl h2 { font-size: 34px; } .o .km-projet { padding: 24px 20px; } .o .km-projet h2 { font-size: 27px; }
  .o .k-q-ligne { grid-template-columns: 1fr; gap: 12px; } .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; }
}
/* 24/09 : 400 -> 560 px, le point de rupture de la charte (build_da_o.py). À 414 et 430 px (grands téléphones), le trait
   de Konig Line (km-trajet li::before) sortait de l'écran (scrollWidth 429 et 437) ; à 390 et 360, rien ne change. */
@media (max-width: 560px) {
  .o .k-choix-2, .o .k-choix-4, .o .k-aide-res, .o .km-types { grid-template-columns: 1fr; }
  .o .km-trajet ol { grid-template-columns: 1fr; } .o .km-trajet li::before { display: none; }
  .o .km-lignes li { grid-template-columns: 1fr; } .o .km-l-prix { text-align: left; }
}