/* Fiche produit sans bannière : fil d'Ariane fin, galerie à gauche, bloc d'achat collant à droite, barre d'achat mobile.
   Spec : reports/redesign/fiche-produit-structure.md. Valeurs via tokens.css. */
.fiche-tete { background: var(--sg-papier); }
.fiche-tete .ariane { padding-block: var(--sg-4) 0; }
.fiche-tete .ariane .court { display: none; }
.section.fiche { padding-block: var(--sg-5) var(--sg-8); }
.fiche-grille { display: grid; gap: var(--sg-6); grid-template-columns: minmax(0, 1fr); align-items: start; }

/* Galerie : une vue à la fois, miniatures dessous */
.vues > .vue[hidden] { display: none; }
.vue img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: var(--sg-blanc); border: 1px solid var(--sg-ecume); }
.vue.estampe { padding: 0 0 22px; } /* la photo démarre au même point que sur les autres fiches ; les repères de calage restent dessous */
.vue.estampe img { border: 0; }
.bureau-fiche { margin: 0; }
.miniatures { display: flex; gap: var(--sg-3); margin-top: var(--sg-4); flex-wrap: wrap; }
.miniature { width: 76px; height: 76px; padding: 0; border: 1px solid var(--sg-ecume); background: var(--sg-blanc); cursor: pointer; overflow: hidden; display: grid; place-items: center; }
.miniature img { width: 100%; height: 100%; object-fit: contain; }
.miniature[aria-current="true"] { border-color: var(--sg-encre); box-shadow: 0 0 0 1px var(--sg-encre); }
.miniature:focus-visible { box-shadow: var(--sg-focus); }
.miniature-bureau { font-size: var(--sg-t-legende); font-weight: 600; line-height: 1.2; padding: var(--sg-2); text-align: center; }

/* Bloc d'achat */
.achat h1 { font-size: clamp(22px, 2vw, 28px); line-height: 1.2; margin-bottom: var(--sg-3); }
.sens-ligne { color: var(--sg-gris); }
.avis-ligne { margin-top: var(--sg-2); font-size: var(--sg-t-petit); }
.avis-ligne a { color: var(--sg-lien); text-decoration: underline; text-underline-offset: 3px; }
.points-cles { display: grid; gap: var(--sg-2); margin-top: var(--sg-4); padding-top: var(--sg-4); border-top: 1px solid var(--sg-ecume); }
.points-cles li { padding-left: var(--sg-5); position: relative; }
.points-cles li::before { content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 2px; background: var(--sg-sceau); }
.prix-gros { font: 600 var(--sg-t-h3)/1.2 var(--sg-sans); margin-block: var(--sg-5); }
.prix-gros s { color: var(--sg-gris); font-weight: 400; font-size: var(--sg-t-corps); margin-right: var(--sg-1); }
.formats { border: 0; padding: 0; margin: 0 0 var(--sg-5); min-width: 0; }
.formats legend { font-weight: 500; padding: 0; margin-bottom: var(--sg-2); }
.formats .aide { margin-top: var(--sg-3); }
.formats .aide a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; color: var(--sg-lien); }
.livraison { margin-top: var(--sg-4); font-weight: 600; }
.reassurance { display: grid; gap: var(--sg-2); margin-top: var(--sg-4); padding-top: var(--sg-4); border-top: 1px solid var(--sg-ecume); font-size: var(--sg-t-petit); }
.reassurance li::before { content: "✓"; color: var(--sg-succes); font-weight: 700; margin-right: var(--sg-2); }
.confirmer { color: var(--sg-gris); font-size: var(--sg-t-legende); font-style: italic; }
.confirmer::before { content: "("; }
.confirmer::after { content: ")"; }

/* Barre d'ancres sous la zone d'achat */
.ancres { background: var(--sg-papier); border-block: 1px solid var(--sg-ecume); position: sticky; top: 56px; z-index: 10; }
.ancres .wrap { display: flex; gap: var(--sg-5); overflow-x: auto; scrollbar-width: none; }
.ancres a { display: inline-flex; align-items: center; min-height: 48px; white-space: nowrap; font-weight: 600; font-size: var(--sg-t-petit); border-bottom: 2px solid transparent; }
.ancres a:hover { border-color: var(--sg-sceau); }
section[id], .section[id] { scroll-margin-top: 112px; }
@media (min-width: 1024px) { .ancres { top: 72px; } section[id], .section[id] { scroll-margin-top: 136px; } }

/* Pourquoi, détail, repères */
.usages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sg-6); }
.usages > div { border-top: 3px solid var(--sg-sceau); padding-top: var(--sg-4); }
.usages h3 { margin-bottom: var(--sg-2); }
.detail { display: grid; gap: var(--sg-6); }
.detail-colonne { display: grid; gap: var(--sg-4); align-content: start; }
.detail-colonne .h3 { margin-top: var(--sg-4); }
.detail-colonne .h3:first-child { margin-top: 0; }
.formats-tab td:last-child { color: var(--sg-gris); }
.formats-tab tr.choisi th, .formats-tab tr.choisi td { background: var(--sg-ecume); color: var(--sg-encre); font-weight: 600; }
.chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sg-4); }
.chiffres > div { border: 1px solid var(--sg-trait); padding: var(--sg-4); background: var(--sg-papier); }
.chiffres dt { font-size: var(--sg-t-legende); color: var(--sg-gris); }
.chiffres dd { margin: var(--sg-1) 0 0; font: 600 var(--sg-t-lead)/1.3 var(--sg-sans); }
.barre-achat { display: none; }

@media (min-width: 768px) { .detail { grid-template-columns: 1fr 1.4fr; gap: var(--sg-8); } .fiche-tete .ariane .court { display: none; } }
@media (min-width: 1024px) {
  .fiche-grille { grid-template-columns: 1.1fr 1fr; column-gap: var(--sg-8); }
  .galerie { position: sticky; top: var(--sg-9); }
  .achat { min-width: 0; }
}
@media (max-width: 1023px) { .usages { grid-template-columns: 1fr; gap: var(--sg-5); } }
@media (max-width: 767px) {
  .fiche-tete .ariane .complet { display: none; }
  .fiche-tete .ariane .court { display: inline; }
  .miniature { width: 64px; height: 64px; }
  #contenu { padding-bottom: var(--sg-9); }
  .barre-achat { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; align-items: center; justify-content: space-between; gap: var(--sg-4); padding: var(--sg-3) var(--sg-gouttiere); background: var(--sg-blanc); border-top: 1px solid var(--sg-ecume); }
  .barre-achat b { display: block; }
}
@media (min-width: 1024px) { .usages h3 { min-height: calc(2 * 1.3em); } }

/* Titres d'usage : même largeur de colonne de texte, donc deux lignes pour tous (34 à 42 caractères) */
.usages h3 { max-inline-size: 22ch; }

/* Détail (fiche blanc Kanagawa) : une rangée par sujet, titre à gauche et contenu à droite, séparées par des filets. Pleine largeur comme les autres sections. */
.detail2 { display: grid; }
.d-tete { display: grid; gap: var(--sg-2); margin-bottom: var(--sg-4); }
.d-intro { margin: 0; color: var(--sg-gris); font-size: var(--sg-t-lead); line-height: var(--sg-lh-lead); max-width: 80ch; }
.d-ligne { display: grid; gap: var(--sg-4); padding: var(--sg-6) 0; border-top: 1px solid var(--sg-trait); min-width: 0; }
.d-titre .h3 { margin: 0; }
.d-titre p { margin: var(--sg-2) 0 0; font-size: var(--sg-t-legende); line-height: 1.45; color: var(--sg-gris); }
.cartes-format { display: grid; grid-template-columns: repeat(60, minmax(0, 1fr)); gap: var(--sg-3) 0; margin-inline: calc(var(--sg-1) * -1.5); } /* grille de 60 colonnes : chaque carte couvre 60/k colonnes, l'écart est dans leur marge */
.cartes-format .cf { grid-column: span var(--sm, 20); margin-inline: calc(var(--sg-1) * 1.5); }
.cf { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: var(--sg-1); min-height: 92px; padding: var(--sg-3) 10px; background: var(--sg-blanc); border: 1px solid var(--sg-trait); border-radius: var(--sg-rayon); text-align: left; }
.cf:hover { border-color: var(--sg-lave); }
.cf:focus-visible { box-shadow: var(--sg-focus); }
.cf b { font-size: 14px; font-weight: 600; white-space: nowrap; }
.cf b small { font-size: 12px; font-weight: 400; color: var(--sg-gris); display: block; }
.cf .u { font-size: 12.5px; line-height: 1.35; color: var(--sg-gris); }
.cf .p { margin-top: auto; padding-top: var(--sg-2); font-size: var(--sg-t-petit); font-weight: 600; }
.cf.choisi { background: var(--sg-encre); border-color: var(--sg-encre); color: var(--sg-blanc); }
.cf.choisi b small, .cf.choisi .u { color: var(--sg-ecume); }
.faits-liste { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.faits-liste li { display: flex; justify-content: space-between; gap: var(--sg-3); padding: var(--sg-3) 0; border-bottom: 1px solid var(--sg-trait); font-size: var(--sg-t-corps); }
.faits-liste li span { color: var(--sg-gris); font-size: var(--sg-t-petit); text-align: right; }
.note-attente { margin: var(--sg-4) 0 0; font-size: var(--sg-t-legende); color: var(--sg-gris); }
.histoire-bloc { display: grid; gap: var(--sg-3); }
.histoire-bloc.sans-an { grid-template-columns: minmax(0, 1fr); }
.histoire-bloc .an { margin: 0; font-family: var(--sg-serif); font-size: 44px; line-height: 1; color: var(--sg-sceau); }
.histoire-bloc p:not(.an) { margin: 0 0 var(--sg-3); max-width: 66ch; line-height: 1.65; }
.toutes-carac { border-top: 1px solid var(--sg-trait); }
.toutes-carac summary { cursor: pointer; padding: var(--sg-5) 0; font-weight: 600; }
@media (min-width: 560px) { .cf { padding: var(--sg-4); } .cf b { font-size: 16px; } .cf b small { display: inline; font-size: 13px; } .cf .u { font-size: var(--sg-t-petit); } }
@media (min-width: 768px) {
  .d-ligne { grid-template-columns: 200px minmax(0, 1fr); gap: var(--sg-6); padding: var(--sg-6) 0; }
  .faits-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sg-7); }
  .histoire-bloc { grid-template-columns: auto minmax(0, 1fr); gap: var(--sg-6); align-items: start; }
  .histoire-bloc .an { font-size: 56px; }
}
@media (min-width: 1024px) { .d-ligne { grid-template-columns: 260px minmax(0, 1fr); gap: var(--sg-7); } .cartes-format { row-gap: var(--sg-4); margin-inline: calc(var(--sg-2) * -1); } .cartes-format .cf { margin-inline: var(--sg-2); } .cf b { font-size: var(--sg-t-lead); } .cf { min-height: 96px; } }
@media (max-width: 359px) { .cartes-format { grid-template-columns: repeat(2, minmax(0, 1fr)); } .faits-liste li { flex-direction: column; gap: 2px; } .faits-liste li span { text-align: left; } }
@media (min-width: 768px) { .histoire-bloc.sans-an { grid-template-columns: minmax(0, 1fr); } }
/* 4 ou 5 cartes sur une seule ligne : seulement quand la colonne de droite est assez large (1280 px et plus), sinon 3 par ligne comme sur mobile */
@media (min-width: 1280px) { .cartes-format .cf { grid-column: span var(--sd, 12); } }
@media (max-width: 359px) { .cartes-format { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sg-3); margin-inline: 0; } .cartes-format .cf { grid-column: auto; margin-inline: 0; } .cartes-format .cf:last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* Tailles en plusieurs épaisseurs (tapis RGB, personnalisé) : une ligne par taille, une colonne par épaisseur */
.cartes-format.matrice { display: grid; grid-template-columns: minmax(0, 1fr) !important; gap: var(--sg-2) !important; margin-inline: 0 !important; }
.matrice .m-tete, .matrice .m-ligne { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: var(--sg-2); align-items: center; }
.matrice .m-tete span { font-size: var(--sg-t-legende); color: var(--sg-gris); text-align: center; }
.matrice .m-taille { font-weight: 600; font-size: var(--sg-t-petit); white-space: nowrap; }
.matrice .m-taille small { font-size: 12px; font-weight: 400; color: var(--sg-gris); }
.matrice .cf { grid-column: auto !important; margin: 0 !important; min-height: 44px; flex-direction: row; align-items: center; justify-content: center; padding: var(--sg-2); text-align: center; }
.matrice .cf .p { margin: 0; padding: 0; }
.matrice .m-vide { text-align: center; color: var(--sg-trait); }