/* Composants : boutons, cartes, grilles, badges, estampe (calage + cartouche), réassurance, champs, accordéons, pastilles. Spec : charte/composants.md */
/* Marque : sceau rouge, motif de vagues (seigaiha, très discret) et fond plein avec marge interne généreuse */
.sceau { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: var(--sg-sceau); color: #fff; border-radius: 2px; font: 400 16px/1 var(--sg-serif); flex: none; }
.vagues { background-color: var(--sg-encre); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Cg fill='none' stroke='%239DB8D6' stroke-opacity='.16'%3E%3Ccircle cx='0' cy='24' r='22'/%3E%3Ccircle cx='0' cy='24' r='15'/%3E%3Ccircle cx='0' cy='24' r='8'/%3E%3Ccircle cx='48' cy='24' r='22'/%3E%3Ccircle cx='48' cy='24' r='15'/%3E%3Ccircle cx='48' cy='24' r='8'/%3E%3Ccircle cx='24' cy='36' r='22'/%3E%3Ccircle cx='24' cy='36' r='15'/%3E%3Ccircle cx='24' cy='36' r='8'/%3E%3C/g%3E%3C/svg%3E"); }
.plein { background: var(--sg-encre); color: var(--sg-papier); padding: var(--sg-7); }
@media (max-width: 767px) { .plein { padding: var(--sg-6) var(--sg-5); } }
.cadre { background: var(--sg-blanc); border: 1px solid var(--sg-trait); padding: 14px; }
.kanji-v { writing-mode: vertical-rl; font: 400 15px/1 var(--sg-serif); letter-spacing: 4px; color: var(--sg-encre); }

/* Bandeau de titre : bleu de Prusse, motif de vagues autour d'un bloc plein. Une seule taille pour toutes les pages (même hauteur, même place du titre).
   Contenu : fil d'Ariane, H1 sur 2 lignes, une accroche. Les raccourcis vont dans .barre-outils, sous le bandeau. Contrastes : papier 11,8, lien sombre 6,6 */
:root { --sg-bandeau-h: 224px; }
@media (min-width: 768px) { :root { --sg-bandeau-h: 232px; } }
@media (min-width: 1024px) { :root { --sg-bandeau-h: 240px; } }
.bandeau { padding-block: var(--sg-6); }
.bandeau .plein { height: var(--sg-bandeau-h); padding: var(--sg-5) var(--sg-7); display: flex; flex-direction: column; justify-content: flex-start; overflow: clip; }
.bandeau .ariane { padding: 0 0 var(--sg-3); color: var(--sg-lien-sombre); }
.bandeau .ariane a { color: var(--sg-lien-sombre); text-decoration: underline; text-underline-offset: 3px; }
.bandeau h1, .bandeau .kanji-v { color: var(--sg-papier); }
.bandeau .lead { color: var(--sg-papier); margin-top: var(--sg-3); }
@media (max-width: 767px) { .bandeau { padding-block: var(--sg-5); } .bandeau .plein { padding: var(--sg-5); } }
/* Barre d'outils sous le bandeau : sous-navigation, sommaire, recherche */
.barre-outils { background: var(--sg-papier); border-bottom: 1px solid var(--sg-ecume); padding-block: var(--sg-4); }
.barre-outils > .wrap > * { margin-top: 0; }
.barre-outils .recherche { max-width: 560px; }
.barre-outils .recherche + .themes { margin-top: var(--sg-3); }

.btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px; border-radius: var(--sg-rayon); font: 600 16px/1 var(--sg-sans); border: 1.5px solid var(--sg-encre); cursor: pointer; transition: background var(--sg-duree) var(--sg-courbe), transform var(--sg-duree); }
.btn:active { transform: scale(.98); }
.btn-p { background: var(--sg-encre); color: var(--sg-blanc); }
.btn-p:hover { background: var(--sg-encre-survol); }
.btn-s { background: transparent; color: var(--sg-encre); }
.btn-s:hover { background: var(--sg-ecume); }
.fond-encre .btn-p, .plein .btn-p { background: var(--sg-papier); color: var(--sg-encre); border-color: var(--sg-papier); }
.btn-plein { width: 100%; }
.actions { display: flex; flex-wrap: wrap; gap: var(--sg-5); align-items: center; margin-top: var(--sg-6); }
@media (max-width: 767px) { .actions { flex-direction: column; align-items: stretch; text-align: center; } }

.grille { display: grid; gap: var(--sg-5); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1023px) { .grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .grille, .grille-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sg-4); } }

.carte { display: block; }
.carte img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--sg-blanc); border: 1px solid var(--sg-ecume); }
.carte h3 { font-size: var(--sg-t-carte); margin-top: var(--sg-3); }
.carte .sens { font-size: var(--sg-t-petit); color: var(--sg-gris); }
.carte .prix { font-weight: 600; margin-top: var(--sg-1); }
.carte:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
.badge { display: inline-block; background: var(--sg-ocre); color: var(--sg-encre); font: 600 12px/1 var(--sg-sans); padding: 5px 8px; border-radius: var(--sg-rayon); margin-bottom: var(--sg-2); }

.estampe { position: relative; padding: 22px; }
.estampe img { width: 100%; background: var(--sg-blanc); }
.estampe::before, .estampe::after { content: ""; position: absolute; border: solid var(--sg-encre); }
.estampe::before { left: 0; bottom: 0; width: 34px; height: 34px; border-width: 0 0 var(--sg-calage) var(--sg-calage); }
.estampe::after { left: 46px; bottom: 0; width: 60px; border-width: 0 0 var(--sg-calage) 0; }
.cartouche { position: absolute; top: 0; right: 0; writing-mode: vertical-rl; background: var(--sg-papier); border: 1.5px solid var(--sg-encre); padding: 14px 8px; font: 400 17px/1 var(--sg-serif); letter-spacing: 4px; }
@media (max-width: 767px) { .cartouche { font-size: 14px; padding: 10px 6px; } }

.reass { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sg-5); padding-block: 20px; border-block: 1px solid var(--sg-trait); font-size: var(--sg-t-petit); color: var(--sg-gris); }
.reass b { display: block; color: var(--sg-encre); font-weight: 600; font-size: 15px; }
@media (max-width: 767px) { .reass { grid-template-columns: 1fr; gap: var(--sg-3); } }
.puces { display: grid; gap: 6px; font-size: var(--sg-t-petit); }
.puces li::before { content: ""; display: inline-block; width: 8px; height: 8px; border: 1.5px solid var(--sg-lave); margin-right: 10px; vertical-align: 1px; }

label { display: block; font-weight: 500; margin-bottom: var(--sg-2); }
.champ, input[type=email], input[type=text], select { width: 100%; height: 48px; border: 1px solid var(--sg-champ); border-radius: var(--sg-rayon); background: var(--sg-blanc); padding: 0 14px; font-size: 16px; }
.aide { font-size: var(--sg-t-legende); color: var(--sg-gris); margin-top: 6px; }
.erreur .champ { border-color: var(--sg-erreur); }
.erreur .aide { color: var(--sg-erreur); }
.case { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.case input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--sg-encre); }

.pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
.pastilles input { position: absolute; opacity: 0; }
.pastilles label { margin: 0; border: 1px solid var(--sg-champ); background: var(--sg-blanc); padding: 10px 14px; min-height: 44px; font-weight: 500; cursor: pointer; border-radius: var(--sg-rayon); }
.pastilles input:checked + label { background: var(--sg-encre); color: var(--sg-blanc); border-color: var(--sg-encre); }
.pastilles input:focus-visible + label { box-shadow: var(--sg-focus); }

.accordeon details { border-top: 1px solid var(--sg-trait); }
.accordeon details:last-child { border-bottom: 1px solid var(--sg-trait); }
.accordeon summary { cursor: pointer; padding: 18px 0; font: 400 var(--sg-t-h3)/1.3 var(--sg-serif); list-style: none; display: flex; justify-content: space-between; gap: var(--sg-4); }
.accordeon summary::after { content: "+"; font-family: var(--sg-sans); }
.accordeon details[open] summary::after { content: "–"; }
.accordeon details > div { padding-bottom: var(--sg-5); max-width: var(--sg-mesure); }

.attente { background: var(--sg-ecume); border: 1px dashed var(--sg-champ); padding: var(--sg-4); font-size: var(--sg-t-petit); color: var(--sg-gris); }
table.carac { width: 100%; border-collapse: collapse; font-size: var(--sg-t-petit); }
table.carac th, table.carac td { text-align: left; padding: 12px 0; border-bottom: 1px solid var(--sg-trait); vertical-align: top; }
table.carac th { width: 40%; font-weight: 600; }


/* Cartes produit : même cadre d'image pour tous les produits, titre court sur une ligne, sous-titre sur 1 ligne (2 sur mobile, réservées) */
.carte h3 { white-space: nowrap; overflow: hidden; text-overflow: clip; }
.carte .sens { min-height: 1.6em; }
@media (max-width: 767px) { .carte .sens { min-height: calc(2 * 1.6em); } }
@media (max-width: 359px) { .carte h3 { white-space: nowrap; font-size: 12.5px; } .grille, .grille-3 { gap: var(--sg-2); } .bandeau .plein { padding-inline: var(--sg-4); } }

/* Avis d'acheteurs : cartes blanches, filet fin, étoiles ocre avec la note écrite à côté */
.avis-resume { margin: 0 0 var(--sg-5); color: var(--sg-gris); font-size: var(--sg-t-petit); }
.avis-resume b { color: var(--sg-encre); }
.avis-grille { display: grid; grid-template-columns: 1fr; gap: var(--sg-4); }
.avis-carte { margin: 0; padding: var(--sg-5); background: var(--sg-blanc); border: var(--sg-filet); border-radius: var(--sg-rayon); display: flex; flex-direction: column; gap: var(--sg-3); }
.avis-note { color: var(--sg-ocre); letter-spacing: 2px; font-size: 18px; line-height: 1; }
.avis-carte blockquote { margin: 0; }
.avis-carte blockquote p { margin: 0; color: var(--sg-encre); font-size: var(--sg-t-corps); line-height: var(--sg-lh-corps); max-width: none; }
.avis-carte figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: auto; font-size: var(--sg-t-petit); color: var(--sg-gris); }
.avis-carte figcaption b { color: var(--sg-encre); }
.avis-verifie { color: var(--sg-succes); font-weight: 600; }
.avis-verifie::before { content: "✓ "; }
.avis-ligne .etoiles { color: var(--sg-ocre); }
@media (min-width: 768px) { .avis-grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .avis-grille { grid-template-columns: repeat(3, 1fr); } }
.avis-carte figcaption a { color: var(--sg-lien); text-decoration: underline; text-underline-offset: 3px; }
/* Ligne produit d'un avis : jamais sur deux lignes, le nom court et le format restent ensemble */
.avis-carte figcaption span:first-of-type { white-space: nowrap; }
@media (max-width: 400px) { .avis-carte { padding: var(--sg-4); } .avis-carte figcaption { font-size: var(--sg-t-legende); } }

/* Pastilles de format des fiches : grille de 60 colonnes, lignes régulières (voir ordonner et disposition dans produits-gabarit.mjs) */
.formats .pastilles { display: grid; grid-template-columns: repeat(60, minmax(0, 1fr)); gap: 4px 0; margin-inline: -4px; } /* pas de gap de colonne : 59 gouttières feraient déborder la grille, l'écart est dans la marge des pastilles */
.formats .pastilles label { grid-column: span var(--sm, 20); margin: 4px; text-align: center; padding-inline: 6px; white-space: nowrap; }
@media (min-width: 768px) { .formats .pastilles label { grid-column: span var(--sd, 12); } }
@media (max-width: 359px) { .formats .pastilles label { white-space: normal; font-size: 14px; padding-inline: 4px; } }