/* Tondazur - CSS maison, hors chaine Tailwind. Ne jamais recompiler ce fichier. */

/* Bannieres d'article : hauteur harmonisee sur tout le site,
   nettement plus genereuse a partir du grand ecran. */
.jb-banner-body{padding:1.5rem;min-height:190px}
@media(min-width:768px){
  .jb-banner-body{padding:2.75rem 3rem;min-height:320px}
}

/* Images de contenu : plus de legende de credit sous l'image. */
.jb-prose figure figcaption{display:none}

/* ---- Banniere d accueil, refonte du 26/09/2026 ----
   Trois reproches de Ben : texte pas assez vendeur, tout tasse a gauche donc la
   largeur n est pas utilisee, et image trop sombre. */
.jb-home-hero{position:relative;width:100%;display:flex;align-items:center;overflow:hidden;background-color:#0b2415;min-height:440px}
.jb-home-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 38%;
  filter:brightness(1.12) saturate(1.08)}
/* Voile en deux temps : sombre derriere le titre, presque nul au milieu pour
   que le bassin et le coucher de soleil restent visibles. */
.jb-home-hero-veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,26,15,.66) 0%,rgba(5,26,15,.30) 34%,rgba(5,26,15,.06) 58%,rgba(5,26,15,.24) 100%)}
.jb-home-hero-inner{position:relative;width:100%;max-width:1200px;margin:0 auto;padding:3rem 1rem;
  display:grid;grid-template-columns:1fr;gap:2rem;align-items:center}
.jb-home-hero-texte{min-width:0}
/* Relief : une ombre portee douce ET un halo sombre derriere le bloc, pour que le
   texte tienne meme sur la partie claire de la photo. */
.jb-home-hero-inner h1{color:#fff;max-width:17ch;
  text-shadow:0 1px 0 rgba(0,0,0,.35), 0 3px 14px rgba(0,0,0,.55), 0 10px 40px rgba(0,0,0,.35)}
.jb-home-hero-text{color:#fff;max-width:46ch;margin-top:1.1rem;font-size:1.0625rem;line-height:1.6;
  text-shadow:0 1px 10px rgba(0,0,0,.6), 0 2px 24px rgba(0,0,0,.4)}
.jb-home-hero-cta{margin-top:1.9rem;display:flex;flex-wrap:wrap;gap:.75rem}
.jb-home-hero-cta2{background-color:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.6);color:#fff;backdrop-filter:blur(4px)}
.jb-home-hero-cta2:hover{background-color:rgba(255,255,255,.28)}

/* Le panneau qui occupe la moitie droite, restee vide jusqu ici. */
.jb-home-hero-panneau{border-radius:1rem;padding:1.15rem 1.3rem;
  background:rgba(4,22,13,.40);border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 18px 48px -22px rgba(0,0,0,.7)}
.jb-home-hero-panneau-titre{color:rgba(255,255,255,.72);font-size:.75rem;letter-spacing:.09em;
  text-transform:uppercase;margin:0 0 .9rem}
.jb-home-hero-panneau ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.jb-home-hero-panneau li a{display:flex;align-items:baseline;gap:.85rem;color:#fff;text-decoration:none;
  padding:.45rem .55rem;margin:0 -.55rem;border-radius:.6rem;transition:background-color .15s ease}
.jb-home-hero-panneau li a:hover{background-color:rgba(255,255,255,.12)}
.jb-home-hero-e{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.jb-home-hero-e-titre{font-weight:700;font-size:.9375rem;line-height:1.3;color:#fff}
.jb-home-hero-e-sous{font-size:.8125rem;line-height:1.35;color:rgba(255,255,255,.74)}

@media(min-width:768px){
  .jb-home-hero{min-height:560px}
  .jb-home-hero-inner{padding:3.75rem 1rem;grid-template-columns:minmax(0,1.4fr) minmax(250px,300px);gap:3rem}
  .jb-home-hero-img{object-position:center 44%}
  /* Voile nettement plus clair a droite, pour que la photo respire sous le panneau. */
  .jb-home-hero-veil{background:linear-gradient(100deg,rgba(5,26,15,.70) 0%,rgba(7,36,21,.30) 32%,rgba(7,36,21,.04) 58%,rgba(7,36,21,0) 80%)}
}
@media(max-width:767px){
  /* Sur telephone, la photo servait de fond derriere un contenu tres haut :
     « cover » ne pouvait en montrer qu'une bande verticale de 17 % de large,
     tombee sur la masse d'arbres sombre. Resultat, un aplat vert et un texte
     blanc illisible. On la sort donc en bandeau, visible en entier, et le texte
     passe dessous sur un fond plein. */
  .jb-home-hero{display:block;min-height:0}
  .jb-home-hero-img{position:relative;inset:auto;height:auto;aspect-ratio:16/10;
    object-position:58% 52%;filter:brightness(1.04) saturate(1.06)}
  .jb-home-hero-veil{display:none}
  .jb-home-hero-inner{padding:1.75rem 1rem 2.25rem;background:#0b2415}
  .jb-home-hero-inner h1{text-shadow:none;max-width:none}
  .jb-home-hero-text{text-shadow:none}
  .jb-home-hero-panneau{padding:.85rem .95rem;background:rgba(255,255,255,.07);
    border-color:rgba(255,255,255,.18);backdrop-filter:none;-webkit-backdrop-filter:none}
  .jb-home-hero-panneau-titre{margin:0 0 .6rem;font-size:.6875rem}
  .jb-home-hero-panneau ul{grid-template-columns:1fr 1fr;gap:.3rem}
  .jb-home-hero-panneau li a{padding:.4rem .45rem;margin:0 -.45rem;gap:.4rem;align-items:center}
  .jb-home-hero-e-sous{display:none}
  .jb-home-hero-e-titre{font-size:.8125rem;line-height:1.25}
  .jb-home-hero-inner{gap:1.5rem;padding:2.5rem 1rem}
  .jb-home-hero-text{font-size:1rem;margin-top:.9rem}
  .jb-home-hero-cta{margin-top:1.4rem}
  .jb-home-hero-n{font-size:1.5rem}
}

/* ===== Vue 3D produit (articles de test) ===== */
.jb-3d{margin:1.75rem 0;border:1px solid var(--color-border);border-radius:16px;overflow:hidden;background:linear-gradient(160deg,#F2F7F3 0%,#E7EFE9 100%)}
.jb-3d-stage{position:relative;width:100%;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center}
.jb-3d-poster{max-width:62%;max-height:82%;object-fit:contain;filter:drop-shadow(0 18px 26px rgba(0,0,0,.22))}
.jb-3d-btn{position:absolute;left:50%;bottom:1rem;transform:translateX(-50%);display:inline-flex;align-items:center;gap:.5rem;
  padding:.65rem 1.15rem;border-radius:999px;border:none;cursor:pointer;font-weight:700;font-size:.95rem;color:#fff;
  background-color:var(--color-primary);box-shadow:0 6px 18px rgba(0,0,0,.22);transition:transform .15s,box-shadow .15s}
.jb-3d-btn:hover{transform:translateX(-50%) translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.28)}
.jb-3d-btn[disabled]{opacity:.7;cursor:progress}
.jb-3d-viewer{width:100%;height:100%;--poster-color:transparent;background:transparent}
.jb-3d.jb-3d-on .jb-3d-poster,.jb-3d.jb-3d-on .jb-3d-btn{display:none}
.jb-3d-note{margin:0;padding:.7rem 1rem;font-size:.8rem;line-height:1.45;color:var(--color-muted);border-top:1px solid var(--color-border);background-color:var(--color-surface)}

/* Vue 3D : chargement automatique, indication discrete */
.jb-3d-hint{position:absolute;right:.9rem;bottom:.9rem;display:inline-flex;align-items:center;gap:.4rem;
  padding:.4rem .75rem;border-radius:999px;font-size:.78rem;font-weight:600;color:#fff;
  background-color:rgba(12,32,20,.62);backdrop-filter:blur(4px);pointer-events:none;opacity:0;transition:opacity .4s}
.jb-3d.jb-3d-on .jb-3d-hint{opacity:1}
.jb-3d.jb-3d-on .jb-3d-poster{display:none}
.jb-3d-loading .jb-3d-poster{opacity:.55;transition:opacity .3s}
.jb-3d-loading .jb-3d-stage::after{content:"";position:absolute;width:34px;height:34px;border-radius:50%;
  border:3px solid rgba(31,122,61,.25);border-top-color:var(--color-primary);animation:jb3dspin .8s linear infinite}
@keyframes jb3dspin{to{transform:rotate(360deg)}}

/* ===== Plaque de logo de marque ===== */
.jb-logo-plaque{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:200px;min-height:86px;background-color:#fff;border-radius:16px;padding:.85rem 1.1rem;
  box-shadow:0 12px 30px rgba(0,0,0,.24)}
.jb-logo-plaque img{display:block;width:100%;height:auto;max-height:58px;object-fit:contain}
@media(min-width:768px){
  .jb-logo-plaque{width:270px;min-height:112px;padding:1.1rem 1.5rem}
  .jb-logo-plaque img{max-height:76px}
}

/* ---- Pages marque : prose, CTA et renvois (26/09/2026) ---- */
.jb-marque-prose { margin-top: 1.5rem; }
.jb-marque-prose h2 {
  font-family: var(--font-heading, inherit); font-weight: 800;
  font-size: 1.5rem; line-height: 1.25; margin: 2.5rem 0 .75rem;
}
.jb-marque-prose p { margin: 0 0 1rem; line-height: 1.7; }
.jb-marque-prose p:last-child { margin-bottom: 0; }
.jb-marque-prose a { color: var(--color-primary); text-decoration: underline; }

.jb-marque-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin: 1.5rem 0 0; padding: 1rem 1.25rem;
  border: 1px solid var(--color-border); border-radius: .875rem;
  background-color: var(--color-surface);
  color: inherit; text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.jb-marque-cta:hover {
  border-color: var(--color-primary);
  box-shadow: 0 6px 20px -10px rgba(15, 23, 42, .28);
  transform: translateY(-1px);
}
.jb-marque-cta-txt { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.jb-marque-cta-sur { font-size: .8125rem; color: var(--color-ink-muted); }
.jb-marque-cta-lib { font-weight: 700; color: var(--color-primary); }
.jb-marque-cta svg { color: var(--color-primary); }

.jb-marque-alire { list-style: none; margin: 0; padding: 0; display: grid; gap: .875rem; }
.jb-marque-alire li {
  padding: .875rem 1rem; border: 1px solid var(--color-border);
  border-radius: .75rem; background-color: var(--color-surface);
}
.jb-marque-alire a { font-weight: 700; color: var(--color-primary); text-decoration: none; }
.jb-marque-alire a:hover { text-decoration: underline; }
.jb-marque-alire p {
  margin: .35rem 0 0; font-size: .875rem; line-height: 1.6; color: var(--color-ink-muted);
}
@media (min-width: 768px) { .jb-marque-alire { grid-template-columns: repeat(3, 1fr); } }

/* ---- Pages de test : bandeau marque et maillage constructeur (26/09/2026) ---- */
.jb-test-marque {
  display: flex; align-items: center; gap: 1rem;
  margin: 1.25rem 0 0; padding: .75rem 1rem;
  border: 1px solid var(--color-border); border-radius: .875rem;
  background-color: var(--color-surface);
  color: inherit; text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.jb-test-marque:hover {
  border-color: var(--color-primary);
  box-shadow: 0 6px 20px -12px rgba(15, 23, 42, .3);
}
.jb-test-marque .jb-logo-plaque { flex: 0 0 auto; }
.jb-test-marque-txt { display: flex; flex-direction: column; gap: .1rem; min-width: 0; flex: 1 1 auto; }
.jb-test-marque-sur {
  font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-ink-muted);
}
.jb-test-marque-lib { font-weight: 700; color: var(--color-primary); line-height: 1.3; }
.jb-test-marque-nom { font-family: var(--font-heading, inherit); font-weight: 800; font-size: 1.125rem; }
.jb-test-marque svg { color: var(--color-primary); }

/* plaque reduite pour le bandeau, la taille par defaut est calibree pour la banniere */
.jb-logo-plaque.jb-logo-sm { width: 116px; padding: .4rem .6rem; }
.jb-logo-plaque.jb-logo-sm img { max-height: 34px; }

.jb-test-autres { font-size: .875rem; color: var(--color-ink-muted); margin-top: .75rem; }
.jb-test-autres a { color: var(--color-primary); text-decoration: underline; }

/* ---- Embleme de la redaction (26/09/2026) ---- */
.jb-redac-logo{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  border-radius:999px;background-color:var(--color-surface);border:1px solid var(--color-border);
  box-shadow:0 1px 3px rgba(15,23,42,.08);overflow:hidden}
.jb-redac-logo svg{display:block}

/* ---- Actualites (26/09/2026) ---- */
.jb-actu-datation{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:.85rem;
  font-size:.875rem;color:var(--color-ink-muted)}
.jb-actu-tag{display:inline-flex;align-items:center;font-size:.6875rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:#fff;background-color:var(--color-primary);
  border-radius:999px;padding:.2rem .6rem}
.jb-actu-sources ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.jb-actu-sources li{padding-left:1.1rem;position:relative;font-size:.9375rem;line-height:1.5}
.jb-actu-sources li::before{content:"";position:absolute;left:0;top:.55em;width:.4rem;height:.4rem;
  border-radius:999px;background-color:var(--color-primary)}
.jb-actu-sources a{color:var(--color-primary);text-decoration:underline;word-break:break-word}

/* ---- Comparateur interactif (26/09/2026) ---- */
.jb-cmp{margin-top:1.75rem}
.jb-cmp-choix{padding:1.25rem;border:1px solid var(--color-border);border-radius:1rem;
  background-color:var(--color-surface)}
.jb-cmp-silo{display:inline-flex;gap:.25rem;padding:.25rem;border-radius:999px;
  background-color:var(--color-bg);border:1px solid var(--color-border);margin-bottom:1rem}
.jb-cmp-silo button{border:none;background:none;cursor:pointer;font:inherit;font-weight:600;
  font-size:.9375rem;padding:.45rem 1rem;border-radius:999px;color:var(--color-ink-muted);
  transition:background-color .15s ease,color .15s ease}
.jb-cmp-silo button.is-actif{background-color:var(--color-primary);color:#fff}
.jb-cmp-silo button:disabled{opacity:.4;cursor:not-allowed}
.jb-cmp-label{display:block;font-size:.8125rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--color-ink-muted);margin-bottom:.4rem}
.jb-cmp-choix select{width:100%;max-width:480px;padding:.65rem .8rem;border-radius:.65rem;
  border:1px solid var(--color-border);background-color:var(--color-bg);font:inherit;color:inherit}
.jb-cmp-aide{margin:.6rem 0 0;font-size:.875rem;color:var(--color-ink-muted)}
.jb-cmp-jetons{list-style:none;margin:.9rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.jb-cmp-jeton{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .35rem .35rem .75rem;
  border-radius:999px;background-color:var(--color-bg);border:1px solid var(--c);
  box-shadow:inset 3px 0 0 var(--c)}
.jb-cmp-jeton-nom{font-size:.875rem;font-weight:600}
.jb-cmp-jeton button{border:none;background:rgba(15,23,42,.08);cursor:pointer;width:1.4rem;height:1.4rem;
  border-radius:999px;line-height:1;font-size:1rem;color:var(--color-ink-muted)}
.jb-cmp-jeton button:hover{background:rgba(15,23,42,.16)}

.jb-cmp-radar-bloc{margin-top:2.5rem}
.jb-cmp-radar{max-width:560px;margin:0 auto}
.jb-cmp-radar svg{width:100%;height:auto;display:block}
.jb-cmp-legende{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-wrap:wrap;
  gap:.5rem 1.25rem;justify-content:center;font-size:.9375rem}
.jb-cmp-legende li{display:inline-flex;align-items:center;gap:.5rem}
.jb-cmp-puce{width:.7rem;height:.7rem;border-radius:999px;flex:0 0 auto}
.jb-cmp-note{color:var(--color-ink-muted)}

.jb-cmp-table-wrap{overflow-x:auto;border:1px solid var(--color-border);border-radius:.875rem}
.jb-cmp-table{width:100%;border-collapse:collapse;background-color:var(--color-surface);font-size:.9375rem}
.jb-cmp-table th,.jb-cmp-table td{padding:.7rem .85rem;text-align:left;vertical-align:top}
.jb-cmp-table thead th{background-color:var(--color-bg);border-bottom:1px solid var(--color-border);
  font-family:var(--font-heading,inherit)}
.jb-cmp-table tbody tr{border-top:1px solid var(--color-border)}
.jb-cmp-table tbody th{font-weight:600;color:var(--color-ink-muted);white-space:nowrap}
.jb-cmp-th{display:block;font-weight:800;box-shadow:inset 0 -3px 0 var(--c);padding-bottom:.15rem}
.jb-cmp-th-marque{display:block;font-size:.75rem;font-weight:500;color:var(--color-ink-muted);margin-top:.2rem}
/* Une ligne ou les modeles different est ce que le lecteur cherche : on la marque. */
.jb-cmp-differe{background-color:rgba(31,122,61,.045)}
.jb-cmp-nc{color:var(--color-ink-muted);font-style:italic}
.jb-cmp-table a{color:var(--color-primary);text-decoration:underline}
.jb-cmp-achat{display:inline-block;padding:.4rem .8rem;border-radius:.5rem;background-color:var(--color-cta);
  color:#fff !important;font-weight:700;font-size:.875rem;text-decoration:none !important;white-space:nowrap}
.jb-cmp-achat:hover{background-color:var(--color-cta-hover)}

.jb-cmp-verdicts{display:grid;gap:1rem}
@media(min-width:768px){.jb-cmp-verdicts{grid-template-columns:repeat(2,1fr)}}
.jb-cmp-verdict{padding:1.1rem 1.25rem;border:1px solid var(--color-border);border-radius:.875rem;
  background-color:var(--color-surface);border-top:3px solid var(--c)}
.jb-cmp-verdict h3{display:flex;align-items:center;gap:.55rem;font-family:var(--font-heading,inherit);
  font-weight:800;font-size:1.0625rem;margin:0 0 .6rem}
.jb-cmp-verdict p{margin:0 0 .6rem;font-size:.9375rem;line-height:1.6}
.jb-cmp-pour{color:var(--color-ink-muted)}
.jb-cmp-pc{display:grid;gap:.5rem;margin:.75rem 0}
@media(min-width:480px){.jb-cmp-pc{grid-template-columns:1fr 1fr}}
.jb-cmp-pc ul{list-style:none;margin:0;padding:0;display:grid;gap:.3rem;font-size:.875rem;line-height:1.45}
.jb-cmp-pc li{padding-left:1.15rem;position:relative}
.jb-cmp-pros li::before{content:"\2713";position:absolute;left:0;color:var(--color-success);font-weight:700}
.jb-cmp-cons li::before{content:"\2715";position:absolute;left:0;color:var(--color-danger);font-weight:700}

.jb-cmp-index{list-style:none;margin:0;padding:0;display:grid;gap:.35rem;font-size:.9375rem}
@media(min-width:640px){.jb-cmp-index{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.jb-cmp-index{grid-template-columns:repeat(3,1fr)}}
.jb-cmp-index a{color:var(--color-primary);text-decoration:underline}
.jb-cmp-noscript{margin-top:1rem;padding:.9rem 1rem;border-radius:.75rem;
  background-color:var(--color-bg);border:1px solid var(--color-border);font-size:.9375rem}

/* ---- Tableau des codes erreur constructeur (26/09/2026) ---- */
.jb-codes{margin-top:2rem}
.jb-codes-wrap{overflow-x:auto;border:1px solid var(--color-border);border-radius:.875rem}
.jb-codes-table{width:100%;border-collapse:collapse;background-color:var(--color-surface);font-size:.9375rem}
.jb-codes-table th,.jb-codes-table td{padding:.7rem .85rem;text-align:left;vertical-align:top;line-height:1.55}
.jb-codes-table thead th{background-color:var(--color-bg);border-bottom:1px solid var(--color-border);
  font-family:var(--font-heading,inherit);white-space:nowrap}
.jb-codes-table tbody tr{border-top:1px solid var(--color-border)}
.jb-codes-table tbody tr:nth-child(even){background-color:rgba(15,23,42,.017)}
.jb-codes-num{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;
  font-size:.9375rem;padding:.15rem .5rem;border-radius:.4rem;
  background-color:var(--color-primary);color:#fff;white-space:nowrap}
.jb-codes-serie{font-size:.875rem;color:var(--color-ink-muted);min-width:11rem}
.jb-codes-table td:last-child{min-width:20rem}
.jb-codes-source{margin-top:.75rem;font-size:.8125rem;color:var(--color-ink-muted);line-height:1.5}
.jb-codes-source a{color:var(--color-primary);text-decoration:underline}

/* ---- Recherche (refonte du 26/09/2026) ---- */
.jb-rech-badge{display:inline-block;margin-left:.4rem;font-size:.6875rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:#fff;background-color:var(--color-primary);
  border-radius:999px;padding:.12rem .5rem;vertical-align:.08em}
.jb-rech-vide{margin-top:1.5rem;padding:1.15rem 1.35rem;border-radius:.875rem;
  background-color:var(--color-surface);border:1px solid var(--color-border)}
.jb-rech-vide p{margin:0 0 .5rem}
.jb-rech-vide ul{list-style:none;margin:.75rem 0 0;padding:0;display:grid;gap:.4rem}
.jb-rech-vide a{color:var(--color-primary);text-decoration:underline}

/* suggestions en direct dans le bandeau */
.jb-sugg{margin-top:.75rem;border-radius:.75rem;overflow:hidden;border:1px solid var(--color-border)}
.jb-sugg:empty{display:none;border:none}
.jb-sugg a{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;
  padding:.6rem .85rem;text-decoration:none;color:inherit;background-color:var(--color-surface);
  border-bottom:1px solid var(--color-border);font-size:.9375rem}
.jb-sugg a:last-child{border-bottom:none}
.jb-sugg a:hover,.jb-sugg a:focus{background-color:var(--color-bg)}
.jb-sugg-groupe{font-size:.75rem;color:var(--color-ink-muted);white-space:nowrap;flex:0 0 auto}
.jb-sugg-code{color:var(--color-primary);font-weight:700}

/* ---- Recherche de code sur les fiches depannage (26/09/2026) ---- */
.jb-codes-chercher{margin:0 0 1rem;padding:1rem 1.15rem;border-radius:.875rem;
  background-color:var(--color-surface);border:1px solid var(--color-border)}
.jb-codes-chercher label{display:block;font-size:.9375rem;font-weight:600;margin-bottom:.55rem}
.jb-codes-champ{display:flex;gap:.5rem;flex-wrap:wrap}
.jb-codes-champ input{flex:1 1 220px;min-width:0;padding:.6rem .85rem;border-radius:.6rem;
  border:1px solid var(--color-border);background-color:var(--color-bg);font:inherit;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1rem}
.jb-codes-champ input:focus{outline:2px solid var(--color-primary);outline-offset:1px}
.jb-codes-champ button{border:1px solid var(--color-border);background-color:var(--color-bg);
  border-radius:.6rem;padding:.6rem .9rem;font:inherit;font-size:.875rem;cursor:pointer;color:var(--color-ink-muted)}
.jb-codes-champ button:hover{background-color:var(--color-surface)}
.jb-codes-compte{margin:.6rem 0 0;font-size:.875rem;color:var(--color-ink-muted)}
.jb-codes-table tbody tr.est-trouve{background-color:rgba(31,122,61,.09)}
.jb-codes-table tbody tr.est-trouve .jb-codes-num{box-shadow:0 0 0 3px rgba(31,122,61,.25)}

/* ---- En-tete des panneaux du megamenu (26/09/2026) ----
   Remplace un bandeau photo de 64 px qui alourdissait le panneau. */
.jb-mega-tete{display:flex;align-items:center;padding:.85rem 1.25rem .7rem;
  border-bottom:1px solid var(--color-border);background-color:var(--color-bg)}
.jb-mega-tete span{position:relative;font-family:var(--font-heading,inherit);font-weight:800;
  font-size:.9375rem;letter-spacing:.01em;color:var(--color-ink);padding-bottom:.3rem}
.jb-mega-tete span::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;
  border-radius:2px;background-color:var(--color-primary)}
.jb-mega-tete.est-piscine span::after{background-color:var(--color-pool)}

/* vignettes produits dans le comparateur */
.jb-cmp-vignette{display:block;width:100%;max-width:120px;aspect-ratio:1;object-fit:contain;margin:0 auto .5rem;background-color:var(--color-bg);border-radius:.5rem;padding:.25rem}
.jb-cmp-verdict-img{display:block;width:100%;max-width:150px;aspect-ratio:4/3;object-fit:contain;margin:0 auto .75rem;background-color:var(--color-bg);border-radius:.6rem;padding:.35rem}

/* ---- Calculateur : aides de saisie (26/09/2026) ---- */
.jb-calc-aide{display:block;margin-top:.15rem;font-size:.8125rem;font-weight:400;line-height:1.4;color:var(--color-ink-muted)}

/* ===== Le bleu du robot de piscine =====
   Le site parle de deux familles de machines. Le vert est celui de la pelouse,
   il ne veut rien dire au bord d'un bassin. On redefinit ici les trois variables
   de couleur porteuses : notes, liens, boutons, filets, puces et icones suivent
   sans qu'aucun gabarit n'ait besoin d'etre touche.
   Le orange du bouton d'achat ne bouge pas : c'est la couleur de l'action, elle
   doit rester reconnaissable d'un silo a l'autre. */
/* Posee sur n'importe quel element, pas seulement sur le body : un bloc de
   robots de piscine garde sa couleur meme au milieu d'une page tondeuse.
   C'est le cas de l'encart « Et pour la piscine ? » de l'accueil. */
.jb-silo-piscine {
  --color-primary: #0e7490;
  --color-primary-dark: #155e75;
  --color-accent: #38bdf8;
  --color-success: #0e7490;
}
.jb-silo-tondeuse {
  --color-primary: #1f7a3d;
  --color-primary-dark: #14532d;
  --color-accent: #84cc16;
  --color-success: #15803d;
}

/* Le megamenu est commun aux deux familles : la rubrique piscine porte sa
   couleur meme quand on la survole depuis une page tondeuse. */
[data-jb-panneau].est-piscine,
[data-jb-menu].est-piscine {
  --color-primary: #0e7490;
  --color-primary-dark: #155e75;
}
[data-jb-menu].est-piscine:hover { color: var(--color-primary); }

/* Le comparateur bascule sans rechargement quand on verrouille une famille. */
body.jb-comparateur-piscine {
  --color-primary: #0e7490;
  --color-primary-dark: #155e75;
  --color-accent: #38bdf8;
  --color-success: #0e7490;
}

/* ===== Codes d'erreur : fiches empilees =====
   Remplace le tableau a quatre colonnes, qui debordait de la colonne de texte
   et coupait la colonne du geste a faire. */
.jb-codes-liste{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;counter-reset:none}
.jb-code{background-color:var(--color-surface);border:1px solid var(--color-border);
  border-radius:.875rem;padding:.9rem 1.05rem;scroll-margin-top:5rem}
.jb-code-tete{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin:0 0 .5rem}
.jb-code-num{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:700;font-size:1rem;letter-spacing:.02em;color:#fff;background-color:var(--color-primary);
  border-radius:.45rem;padding:.2rem .55rem}
.jb-code-num.est-phrase{font-family:inherit;font-size:.9375rem;letter-spacing:0;
  background-color:transparent;color:var(--color-ink);padding:0;
  border-bottom:2px solid var(--color-primary);border-radius:0}
.jb-code-serie{font-size:.8125rem;color:var(--color-ink-muted)}
.jb-code-ligne{margin:.35rem 0 0;font-size:.9375rem;line-height:1.6}
.jb-code-quoi{display:block;font-size:.6875rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--color-ink-muted);margin-bottom:.1rem}
.jb-code-ligne a{color:var(--color-primary);text-decoration:underline}
.jb-code.est-trouve{border-color:var(--color-primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 18%,transparent)}
@media (max-width:480px){
  .jb-code{padding:.8rem .9rem}
  .jb-code-num{font-size:.9375rem}
}

/* Pastille « modele arrete ». Sobre et grise : c'est une information, pas une alerte. */
.jb-statut{display:inline-block;margin-top:.35rem;font-size:.6875rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;color:var(--color-ink-muted);
  background-color:rgba(15,23,42,.06);border-radius:999px;padding:.15rem .55rem;cursor:help}

/* ===== Cotes du modele 3D =====
   Une vue 3D ne dit rien de la taille tant qu'on n'a pas de reference. Deux
   fleches discretes posent la longueur et la hauteur directement sur la scene,
   la legende reprend les trois mesures sous le bloc. */
.jb-3d-cotes{position:absolute;inset:0;pointer-events:none;z-index:2}
.jb-3d-cote{position:absolute;display:flex;align-items:center;gap:.4rem;width:max-content;
  font-size:.6875rem;font-weight:700;letter-spacing:.02em;color:var(--color-ink-muted)}
.jb-3d-val{background-color:rgba(255,255,255,.88);border-radius:999px;padding:.1rem .45rem;
  box-shadow:0 1px 3px rgba(15,23,42,.12);white-space:nowrap}
.jb-3d-fleche{background-color:var(--color-ink-muted);opacity:.55;display:block}
.jb-3d-fleche-h{height:1px;width:clamp(70px,34%,190px);position:relative}
.jb-3d-fleche-h::before,.jb-3d-fleche-h::after{content:"";position:absolute;top:-3px;
  border:3px solid transparent}
.jb-3d-fleche-h::before{left:0;border-right-color:var(--color-ink-muted)}
.jb-3d-fleche-h::after{right:0;border-left-color:var(--color-ink-muted)}
.jb-3d-fleche-v{width:1px;height:clamp(50px,30%,120px);position:relative}
.jb-3d-fleche-v::before,.jb-3d-fleche-v::after{content:"";position:absolute;left:-3px;
  border:3px solid transparent}
.jb-3d-fleche-v::before{top:0;border-bottom-color:var(--color-ink-muted)}
.jb-3d-fleche-v::after{bottom:0;border-top-color:var(--color-ink-muted)}
.jb-3d-cote-l{left:50%;transform:translateX(-50%);bottom:.7rem;flex-direction:column;gap:.25rem}
.jb-3d-cote-h{left:.7rem;top:50%;transform:translateY(-50%);flex-direction:row;gap:.35rem}
.jb-3d-dims{display:flex;flex-wrap:wrap;gap:.35rem .9rem;margin:.6rem 0 0;
  font-size:.8125rem;color:var(--color-ink-muted)}
.jb-3d-dims b{color:var(--color-ink);font-weight:700}
@media(max-width:480px){
  .jb-3d-cote{font-size:.625rem}
  .jb-3d-dims{font-size:.75rem;gap:.25rem .6rem}
}

/* ===== Bloc 3D : bouton de manipulation libre et legende (29/09/2026) ===== */
.jb-3d-libre{position:absolute;right:.75rem;bottom:.75rem;z-index:4;display:inline-flex;align-items:center;gap:.4rem;
  padding:.45rem .8rem;border:1px solid var(--color-border);border-radius:999px;cursor:pointer;
  background-color:rgba(255,255,255,.93);color:var(--color-ink);font-size:.78rem;font-weight:600;line-height:1.2;
  box-shadow:0 2px 8px rgba(0,0,0,.14);transition:background-color .15s,box-shadow .15s,transform .15s}
.jb-3d-libre:hover{background-color:#fff;box-shadow:0 5px 14px rgba(0,0,0,.2);transform:translateY(-1px)}
.jb-3d-libre:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.jb-3d-libre span{font-size:.95rem;line-height:1}
.jb-3d-libre[aria-pressed="true"]{background-color:var(--color-primary);border-color:var(--color-primary);color:#fff}
.jb-3d-libre[aria-pressed="true"]:hover{background-color:var(--color-primary-dark,var(--color-primary))}
.jb-3d-libre-on .jb-3d-viewer{cursor:grab}
.jb-3d-libre-on .jb-3d-viewer:active{cursor:grabbing}
.jb-3d-libre-on .jb-3d-cotes{opacity:.35;transition:opacity .2s}
.jb-3d-legende{margin:0;padding:.55rem 1rem .7rem;font-size:.8rem;line-height:1.4;
  color:var(--color-muted);border-top:1px solid var(--color-border);background-color:var(--color-surface)}
@media(max-width:560px){
  /* Sur petit ecran le bouton en bas a droite chevauchait la cote de longueur,
     centree en bas de la scene. Il devient une pastille : l intitule passe en
     aria-label, pose par le script. */
  .jb-3d-libre{right:.5rem;bottom:.5rem;padding:.5rem;font-size:0;gap:0;line-height:0}
  .jb-3d-libre span{font-size:1.05rem;line-height:1}
  .jb-3d-legende{font-size:.75rem;padding:.5rem .75rem .6rem}
}