/* ==================================================================
   Ruban Pro — guides (matières, largeurs) et pages métier.
   Repris de la maquette validée maquettes/j-nouveau-style/style.css
   (bloc « GUIDES ET PAGES MÉTIER »), chargé seulement sur les pages
   qui utilisent l'un des trois modèles (inc/guides.php).
   ================================================================== */
.j-note {
  display: flex; gap: 10px;
  margin-top: 14px; padding: 10px 12px;
  border: 1px solid var(--j-trait); border-radius: 6px;
  background: var(--j-fond-2);
  color: var(--j-gris); font-size: 12.5px; line-height: 1.45;
}
.j-note .j-ico { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--j-bleu); }
.j-hero--metier .j-hero__vis .rpc-rendu, .j-reco__img .rpc-rendu, .j-mos__case .rpc-rendu, .j-composer__vis .rpc-rendu { position: absolute; inset: 0; }
.j-seo__html p + p { margin-top: 12px; }
.j-h2--bas { margin-bottom: 20px; }
.j-centre { margin-top: 18px; text-align: center; }
.j-legende-tab { margin-top: 10px; color: var(--j-gris); font-size: 12.5px; }
.j-grille-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.j-hero--guide .j-hero__vis img, .j-hero--metier .j-hero__vis img { object-position: center; }
/* Le titre des guides s'arrête avant l'illustration (étiquettes « 15 mm »…). */
.j-hero--guide .j-h1 { max-width: 12ch; }
.j-hero--metier .j-hero__vis canvas { position: absolute; inset: 0; }
.j-mention {
  display: inline-block; margin-left: 6px; padding: 2px 8px;
  border-radius: 999px; background: var(--j-bleu-pale); color: var(--j-bleu);
  font-size: 11.5px; font-weight: 600; vertical-align: middle;
}

/* Étiquettes grises (largeurs, tenue…). */
.j-etiqs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.j-etiqs li { padding: 4px 9px; border: 1px solid var(--j-trait); border-radius: 5px; background: #fff; color: #3a4353; font-size: 12px; }

/* Notes sur 5 en points. */
.j-points { display: inline-flex; gap: 4px; vertical-align: middle; }
.j-points i { width: 8px; height: 8px; border-radius: 50%; background: #d3dae5; }
.j-points i.est-plein { background: var(--j-bleu); }
.j-oui { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; color: var(--j-bleu); font-weight: 600; }
.j-comparer { position: relative; }
.j-comparer .j-oui .j-ico, .j-comparer td > .j-oui { width: 18px; height: 18px; color: var(--j-bleu); }
.j-non { color: var(--j-gris-2); }

/* Tuiles « Quel rendu / quelle largeur ». */
.j-rendus { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.j-rendus--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.j-rendu .j-carte__img { aspect-ratio: 4 / 3; }
.j-rendu__t { display: grid; gap: 2px; padding: 10px 8px 12px; text-align: center; }
.j-rendu__t b { color: var(--j-encre); font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.j-rendu__t small { color: var(--j-gris); font-size: 12.5px; }

/* Fiches matières. */
.j-mats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.j-mat { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); scroll-margin-top: 20px; }
.j-mat .j-carte__img { min-height: 220px; }
.j-mat__corps { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; }
.j-mat__corps .j-h3 { font-size: 18px; }
.j-mat__accroche { margin-top: -6px; color: var(--j-gris); font-size: 14px; }
.j-mat__dl { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 7px 12px; margin: 4px 0 6px; font-size: 13.5px; line-height: 1.45; }
.j-mat__dl dt { color: var(--j-encre); font-weight: 700; }
.j-mat__dl dd { margin: 0; color: var(--j-texte); }
.j-mat .j-btn { align-self: flex-start; min-height: 42px; margin-top: auto; font-size: 14px; }
/* Une seule matière en ligne : la carte prend toute la largeur. */
@media (min-width: 621px) {
  .j-mats:has(> .j-mat:only-child) { grid-template-columns: minmax(0, 1fr); }
  .j-mats > .j-mat:only-child { grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); }
  .j-mats > .j-mat:only-child .j-mat__corps { padding: 24px 28px; }
}

.j-comparer--7 table { min-width: 980px; }
.j-comparer--7 thead td { width: 13%; }
.j-comparer thead th a { color: var(--j-encre); text-decoration: none; }
.j-comparer thead th a:hover { color: var(--j-bleu); }
.j-comparer--7 tbody td { font-size: 13px; }

/* Bandeau bleu « Besoin d'aide / Trouvez votre largeur / Composez ». */
.j-trouver { background: var(--j-bleu); color: #fff; }
.j-trouver__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: center; gap: 28px; padding-block: 36px; }
.j-trouver .j-h2 { color: #fff; margin-bottom: 20px; }
.j-trouver__champs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.j-trouver__champ label { display: block; margin-bottom: 7px; color: #fff; font-size: 13px; font-weight: 500; }
.j-champ-ico { position: relative; }
.j-champ-ico > .j-ico { position: absolute; left: 12px; top: 50%; width: 19px; height: 19px; color: var(--j-bleu); transform: translateY(-50%); pointer-events: none; }
.j-champ-ico .j-champ-sel { width: 100%; padding-left: 40px; background-color: #fff; color: var(--j-encre); }
.j-reco { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 18px; border-radius: var(--j-r); background: #fff; color: var(--j-texte); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .45); }
.j-reco small { display: block; color: var(--j-gris); font-size: 12px; }
.j-reco b { display: block; margin: 2px 0 4px; color: var(--j-encre); font-size: 16px; }
.j-reco p { color: var(--j-gris); font-size: 13px; line-height: 1.45; }
.j-reco .j-btn { min-height: 40px; margin: 12px 0 8px; font-size: 13.5px; }
.j-reco .j-lien { display: inline-flex; align-self: flex-start; justify-self: start; font-size: 13px; }
.j-reco__img { position: relative; overflow: hidden; align-self: start; aspect-ratio: 1 / 1; border-radius: 6px; background: #eef1f4; }
.j-reco__img img, .j-reco__img canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Comparaison proportionnelle des largeurs. */
.j-lcomp { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.j-lcomp__bandes { display: grid; gap: 10px; padding: 20px 22px 16px; }
.j-lrang { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 12px; padding: 4px 6px; border: 1px solid transparent; border-radius: 6px; background: none; text-align: left; }
.j-lrang:hover { background: var(--j-bleu-voile); }
.j-lrang.est-choisi { border-color: var(--j-bleu); background: var(--j-bleu-voile); }
.j-lrang__mm { color: var(--j-encre); font-size: 14px; font-weight: 700; }
.j-bande {
  --h: calc(var(--mm) * 1.45px);
  display: flex; align-items: center; justify-content: space-around; gap: 12px;
  height: var(--h); overflow: hidden; border-radius: 2px;
  background: var(--c); color: var(--e);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -1px 0 rgba(0, 0, 0, .18);
  font: 800 calc(var(--h) * .36)/1 var(--j-police); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.est-grosgrain .j-bande { background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, .1) 0 1px, transparent 1px 3px); background-color: var(--c); }
.j-bande span { display: inline-flex; align-items: center; gap: .45em; }
.j-bande i { width: calc(var(--h) * .5); height: calc(var(--h) * .5); border-radius: 50% 0; background: currentColor; transform: rotate(-35deg); }
.j-lcomp__panneau { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 20px; }
.j-lcomp__panneau .j-h3 { margin-bottom: 4px; font-size: 18px; }
.j-lcomp__panneau label { margin-top: 4px; color: var(--j-encre); font-size: 13px; font-weight: 600; }
.j-lcomp__panneau .j-champ-sel, .j-lcomp__panneau .j-saisie { width: 100%; }
.j-lcomp__panneau .j-btn { margin-top: 10px; min-height: 44px; font-size: 14px; white-space: normal; text-align: center; }

/* Cartes des largeurs. */
.j-largs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.j-larg { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); scroll-margin-top: 20px; }
.j-larg--large { grid-column: 1 / -1; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.j-larg .j-carte__img { min-height: 240px; }
.j-larg__corps { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; font-size: 14px; }
.j-larg__corps .j-h3 { font-size: 18px; }
.j-larg__titre { color: var(--j-encre); font-size: 15px; font-weight: 600; }
.j-larg__corps > p { color: var(--j-gris); }
.j-larg__t { margin-top: 6px; color: var(--j-encre) !important; font-size: 13px; font-weight: 700; }
.j-larg__ex { display: grid; gap: 3px; margin: 0; padding-left: 18px; color: var(--j-texte); font-size: 13.5px; }
.j-larg__marq { display: flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--j-texte) !important; font-size: 13px; }
.j-larg__marq .j-ico { color: var(--j-bleu); }
.j-larg .j-btn { align-self: flex-start; min-height: 42px; margin-top: 10px; font-size: 14px; }
.j-comparer--larg table { min-width: 720px; }
.j-comparer--larg thead th a { font-size: 15px; }
.j-comparer .est-marque { background: var(--j-bleu-voile); }
.j-comparer thead th.est-marque { box-shadow: inset 0 3px 0 var(--j-bleu); }

/* Logo lisible. */
.j-lisible { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: center; }
.j-lisible__carres { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px 28px; }
.j-lisible__carres figure { display: grid; justify-items: center; gap: 8px; margin: 0; color: var(--j-gris); font-size: 13px; font-weight: 600; }
.j-logo-carre {
  --t: calc(var(--mm) * 2.1px);
  display: grid; place-items: center; align-content: center; gap: calc(var(--t) * .06);
  width: calc(var(--t) * 1.25); height: var(--t);
  border-radius: 3px; background: #1d4dbd; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), var(--j-ombre);
}
.j-logo-carre i { width: calc(var(--t) * .28); height: calc(var(--t) * .28); border-radius: 50% 0; background: #fff; transform: rotate(-35deg); }
.j-logo-carre b { font: 800 calc(var(--t) * .1)/1 var(--j-police); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.j-lisible__regles { padding: 20px; }
.j-lisible__regles ul { display: grid; gap: 12px; margin: 0 0 18px; padding: 0; list-style: none; font-size: 14px; }
.j-lisible__regles li { display: flex; align-items: center; gap: 10px; }
.j-lisible__regles .j-ico { color: var(--j-bleu); }

/* Calculateur de longueur. */
.j-calcul { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 28px; align-items: start; }
.j-calcul__form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.j-calcul__form label { display: grid; gap: 6px; color: var(--j-encre); font-size: 13px; font-weight: 600; }
.j-calcul__form .j-champ-sel, .j-calcul__form .j-saisie { width: 100%; }
.j-calcul__res { display: grid; gap: 6px; padding: 20px; }
.j-calcul__res small { color: var(--j-gris); font-size: 12px; }
.j-calcul__piece { color: var(--j-texte); font-size: 15px; }
.j-calcul__piece b, .j-calcul__total b { color: var(--j-encre); }
.j-calcul__total { color: var(--j-texte); font-size: 20px; }
.j-calcul__total b { font-size: 26px; }
.j-calcul__detail { color: var(--j-gris); font-size: 13px; }
.j-calcul__res .j-btn { margin-top: 8px; min-height: 44px; font-size: 14px; }

/* Pages métier : tuiles d'usage. */
.j-tuiles-usage { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
a.j-tuile-usage { display: flex; flex-direction: column; }
.j-tuile-usage .j-carte__img { aspect-ratio: 1 / .92; }
.j-tuile-usage__t { display: grid; gap: 4px; padding: 10px 12px 12px; }
.j-tuile-usage__t b { color: var(--j-encre); font-size: 14px; }
.j-tuile-usage__t small { color: var(--j-gris); font-size: 12px; line-height: 1.35; }
.j-tuile-usage__t .j-lien { font-size: 12.5px; }
.j-tuile-usage__t .j-lien .j-ico { width: 15px; height: 15px; }

/* Mosaïque « … jusque dans les détails ». */
.j-mos { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 2fr) minmax(0, 2fr) minmax(0, 4fr); grid-template-rows: 250px 190px; gap: 10px; }
.j-mos__case { position: relative; overflow: hidden; margin: 0; border-radius: var(--j-r); background: #eef1f4; }
.j-mos__case img, .j-mos__case canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.j-mos__grand { grid-row: 1 / 3; }
.j-mos__a { grid-column: 2 / 4; }
.j-mos__b { grid-column: 4; }
.j-mos__c { grid-column: 2; grid-row: 2; }
.j-mos__d { grid-column: 3; grid-row: 2; }
.j-mos__txt { grid-column: 4; grid-row: 2; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 4px 8px; }
.j-mos__txt p { color: #3a4353; font-size: 16px; line-height: 1.45; }
.j-mos__txt .j-btn { align-self: flex-start; min-height: 42px; font-size: 14px; }
.j-mos__leg {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 36px 16px 14px;
  background: linear-gradient(0deg, rgba(8, 12, 20, .62), rgba(8, 12, 20, 0));
  color: #fff; font-size: 16px; font-weight: 600;
}

.j-comparer--combos table { min-width: 720px; table-layout: auto; }
.j-comparer--combos thead th { background: var(--j-bleu-voile); font-size: 13px; }
.j-comparer--combos thead th:first-child { text-align: left; }
.j-comparer--combos tbody th { background: #fff !important; }
.j-comparer--combos td .j-lien { font-size: 13px; white-space: nowrap; }

/* Composer. */
.j-composer__in { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 3fr); gap: 24px; align-items: center; padding-block: 34px; }
.j-composer__champs { display: grid; gap: 12px; }
.j-composer__vis { position: relative; overflow: hidden; align-self: stretch; min-height: 300px; border-radius: var(--j-r); background: #eef1f4; }
.j-composer__vis canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.j-reco--col { display: flex; flex-direction: column; gap: 4px; }
.j-reco__img--bande { align-self: stretch; aspect-ratio: 16 / 7; margin-top: 8px; }

/* Exigences du métier. */
.j-exig { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.j-exig li { display: flex; align-items: flex-start; gap: 14px; }
.j-exig .j-ico { width: 30px; height: 30px; color: var(--j-bleu); }
.j-exig span { display: grid; gap: 3px; }
.j-exig b { color: var(--j-encre); font-size: 14.5px; }
.j-exig small { color: var(--j-gris); font-size: 13px; line-height: 1.4; }

/* Volumes importants. */
.j-volumes { position: relative; overflow: hidden; background: var(--j-fond-2); }
.j-volumes__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 300px; align-items: center; }
.j-volumes__txt { position: relative; z-index: 2; padding-block: 34px; }
.j-volumes__txt > p { max-width: 460px; margin-top: 10px; color: var(--j-texte); font-size: 15.5px; }
.j-volumes__txt ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 18px 0 4px; padding: 0; list-style: none; font-size: 13.5px; }
.j-volumes__txt li { display: flex; align-items: center; gap: 8px; }
.j-volumes__txt li .j-ico { color: var(--j-bleu); }
.j-volumes__vis { position: absolute; inset: 0 0 0 50%; }
.j-volumes__vis::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--j-fond-2) 0%, rgba(236, 243, 249, 0) 25%); }

/* Renvois vers les guides. */
a.j-guide-carte { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 18px; align-items: center; padding-right: 18px; }
.j-guide-carte .j-carte__img { align-self: stretch; min-height: 130px; }
.j-guide-carte b { display: block; color: var(--j-encre); font-size: 17px; }
.j-guide-carte p { margin: 6px 0 10px; }
.j-autres-t { margin-top: 22px !important; color: var(--j-encre) !important; font-weight: 600; }
.j-metiers-liens { align-items: center; }
.j-metiers-liens > span { color: var(--j-encre); font-size: 13.5px; font-weight: 600; }


@media (max-width: 1100px) {
  .j-rendus { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .j-rendus--6, .j-tuiles-usage { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .j-mats { grid-template-columns: minmax(0, 1fr); }
  .j-composer__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .j-composer__in .j-trouver__form { grid-column: 1 / -1; }
  .j-composer__champs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .j-mos { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 240px 170px auto; }
  .j-mos__grand { grid-row: 1 / 3; grid-column: 1; }
  .j-mos__a { grid-column: 2 / 4; grid-row: 1; }
  .j-mos__b { grid-column: 2; grid-row: 2; }
  .j-mos__c { grid-column: 3; grid-row: 2; }
  .j-mos__d { display: none; }
  .j-mos__txt { grid-column: 1 / -1; grid-row: 3; flex-direction: row; align-items: center; flex-wrap: wrap; }
}
@media (max-width: 900px) {
  .j-trouver__in, .j-lcomp, .j-lisible, .j-calcul, .j-volumes__in { grid-template-columns: minmax(0, 1fr); }
  .j-trouver__champs { grid-template-columns: minmax(0, 1fr); }
  .j-largs { grid-template-columns: minmax(0, 1fr); }
  .j-exig { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .j-grille-2 { grid-template-columns: minmax(0, 1fr); }
  .j-volumes__vis { position: relative; inset: auto; height: 220px; }
  .j-volumes__vis::before { display: none; }
  .j-composer__champs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .j-rendus, .j-rendus--6, .j-tuiles-usage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .j-mat, .j-larg, .j-larg--large { grid-template-columns: minmax(0, 1fr); }
  .j-mat .j-carte__img, .j-larg .j-carte__img { min-height: 0; aspect-ratio: 16 / 9; }
  .j-mat__dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .j-mat__dl dd { margin-bottom: 6px; }
  .j-calcul__form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .j-composer__in { grid-template-columns: minmax(0, 1fr); }
  .j-composer__vis { min-height: 220px; }
  .j-exig { grid-template-columns: minmax(0, 1fr); }
  .j-volumes__txt ul { grid-template-columns: minmax(0, 1fr); }
  .j-reco { grid-template-columns: 92px minmax(0, 1fr); }
  .j-mos { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 220px 150px 150px auto; }
  .j-mos__grand { grid-column: 1 / -1; grid-row: 1; }
  .j-mos__a { grid-column: 1 / -1; grid-row: 2; }
  .j-mos__b { grid-column: 1; grid-row: 3; }
  .j-mos__c { grid-column: 2; grid-row: 3; }
  .j-mos__txt { grid-row: 4; }
  a.j-guide-carte { grid-template-columns: 110px minmax(0, 1fr); }
  .j-lcomp__bandes { padding: 14px 12px; }
  .j-lrang { grid-template-columns: 46px minmax(0, 1fr); gap: 8px; }
}

/* Recommandations : un visuel par choix, un seul affiché. */
.j-reco__un { position: absolute; inset: 0; }
.j-reco__un > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }