/* Page Étiquettes, composant 2 : les matières, en planche d'échantillons. Chaque matière est une petite étiquette
   collée sur son support ; on la soulève par le coin pour lire, dessous, à quoi elle sert. */
.matieres { max-width: 1440px; margin: 0 auto; padding: var(--espace-9) max(var(--espace-7), env(safe-area-inset-right, 0px)) var(--espace-9) max(var(--espace-7), env(safe-area-inset-left, 0px)); border-top: 1px solid var(--filet); }
.matieres__tete { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--espace-7); align-items: end; margin-bottom: var(--espace-7); }
.matieres__tete h2 { margin: 0; font-family: var(--font-titre); font-weight: 700; font-size: clamp(34px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -0.01em; text-wrap: balance; }
.matieres__tete p { margin: 0; max-width: 36em; font-size: 18px; line-height: 28px; }
.matieres__tete .astuce { margin-top: 12px; font-size: 15px; line-height: 22px; color: var(--texte-doux); }

/* La planche : un carton gris chaud, avec son en-tête de nuancier. */
.planche { padding: 34px 40px 44px; background: #e3ded3; box-shadow: inset 0 0 0 1px rgba(10, 10, 11, 0.06), 0 18px 40px -26px rgba(10, 10, 11, 0.4); }
.planche__tete { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; margin-bottom: 26px; border-bottom: 1px solid rgba(10, 10, 11, 0.18); }
.planche__tete img { height: 30px; width: auto; }
.planche__tete p { margin: 0; font-family: var(--font-titre); font-weight: 700; font-size: 16px; line-height: 20px; }
.planche__tete span { margin-left: auto; font-size: 13px; color: var(--texte-doux); }
.planche__rangs { display: grid; grid-template-columns: 3fr 1fr; gap: 34px 30px; }
.planche__groupe h3 { margin: 0 0 14px; font-size: 12.5px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texte-doux); }
.planche__groupe ul { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 26px 22px; margin: 0; padding: 0; list-style: none; }
.planche__groupe--films { grid-column: 1 / -1; }

/* Un échantillon : le support siliconé dessous, l'étiquette dessus, le rabat quand on soulève. */
.echantillon { position: relative; aspect-ratio: 720 / 492; outline: none; cursor: pointer; transform: rotate(var(--r, 0deg)); -webkit-tap-highlight-color: transparent; }
.echantillon__support {
  position: absolute; inset: -5px -6px -6px -5px; background: linear-gradient(160deg, #ded8c8, #d0c9b6); border-radius: 3px;
  box-shadow: 0 1px 2px rgba(10, 10, 11, 0.18);
}
.echantillon__usage { position: absolute; right: 14px; bottom: 12px; max-width: 72%; margin: 0; opacity: var(--vu, 0); text-align: right; font-size: 13px; line-height: 17px; color: #3a372f; }
.echantillon__usage b { display: block; margin-bottom: 2px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #6b665a; }
.echantillon__face { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 1px 1px rgba(10, 10, 11, 0.22)); }
.echantillon__face img { width: 100%; height: 100%; display: block; }
.echantillon__rabat { position: absolute; inset: 0; pointer-events: none; filter: drop-shadow(-3px -4px 5px rgba(10, 10, 11, 0.28)); }
.echantillon__rabat i { position: absolute; inset: 0; background: linear-gradient(315deg, var(--dos-ombre, #d8d6cf), var(--dos, #f4f2ec) 55%, #ffffff); }
.echantillon:focus-visible .echantillon__support { outline: 2px solid var(--focus); outline-offset: 4px; }
.echantillon__nom { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Les options, sous la planche : trois dessins au trait bleu, comme sur une fiche technique. */
.options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espace-6); margin: var(--espace-7) 0 0; padding: 0; list-style: none; }
.options li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; align-items: start; }
.options svg { width: 96px; height: 72px; color: var(--accent); }
.options h3 { margin: 0 0 6px; font-family: var(--font-titre); font-weight: 700; font-size: 19px; line-height: 24px; }
.options p { margin: 0; font-size: 15px; line-height: 22px; color: var(--texte-doux); }

@media (max-width: 1000px) {
  .matieres { padding: var(--espace-8) max(var(--espace-4), env(safe-area-inset-right, 0px)) var(--espace-8) max(var(--espace-4), env(safe-area-inset-left, 0px)); }
  .matieres__tete { grid-template-columns: 1fr; gap: var(--espace-4); margin-bottom: var(--espace-6); }
  .planche { padding: 22px 16px 28px; margin: 0 -4px; }
  .planche__tete span { display: none; }
  .planche__rangs { grid-template-columns: 1fr; gap: 26px; }
  .planche__groupe ul { grid-template-columns: 1fr; gap: 22px; }
  .echantillon__usage { font-size: 13px; line-height: 17px; right: 12px; bottom: 10px; max-width: 78%; }
  .options { grid-template-columns: 1fr; gap: var(--espace-5); }
  .options li { grid-template-columns: 76px minmax(0, 1fr); }
  .options svg { width: 76px; height: 58px; }
}