/* Pas de Côté — démonstration de boutique en ligne (ZataLabs, V7.4). */
:root { --orange: #ff4d2e; --encre: #121212; --gris: #f0efec; --doux: #6d6a66; --trait: #dedad4; }
*, *::before, *::after { box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
body { margin: 0; background: #fff; color: var(--encre); font: 400 16px/1.55 "Inter Tight", system-ui, sans-serif; }
h1, h2 { font-family: Unbounded, sans-serif; font-weight: 800; letter-spacing: -.03em; line-height: 1; margin: 0 0 .4em; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.entete { display: flex; align-items: center; gap: 2rem; padding: 1rem clamp(1rem, 4vw, 3rem); border-bottom: 1px solid var(--trait); }
.logo { font: 800 1.1rem/1 Unbounded, sans-serif; text-decoration: none; letter-spacing: -.02em; }
.entete nav { display: flex; gap: 1.2rem; margin-right: auto; }
.entete nav a { text-decoration: none; color: var(--doux); font-weight: 500; }
.entete__icones { display: flex; gap: 1rem; }
.compteur b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: var(--encre); color: #fff; font-size: .75rem; }
@media (max-width: 600px) { .entete nav { display: none; } .entete { justify-content: space-between; } }
.fil { padding: 1rem clamp(1rem, 4vw, 3rem) 0; margin: 0; font-size: .85rem; color: var(--doux); }
.fil a { text-decoration: none; }

.produit { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(1.5rem, 4vw, 4rem); padding: 1rem clamp(1rem, 4vw, 3rem) 3rem; }
@media (max-width: 900px) { .produit { grid-template-columns: 1fr; } }
.scene { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 24px; background: var(--fond, var(--gris)); transition: background .4s; overflow: hidden; }
.scene svg { width: 88%; height: auto; transition: transform .5s cubic-bezier(.3, 1.3, .5, 1); }
.scene.is-change svg { transform: rotate(-4deg) scale(1.03); }
.badge { position: absolute; top: 1rem; left: 1rem; padding: .3rem .7rem; border-radius: 99px; background: var(--encre); color: #fff; font-size: .8rem; font-weight: 600; }
.vues { display: flex; gap: .5rem; margin-top: .8rem; }
.vues button { flex: 1; padding: .6rem; border: 1px solid var(--trait); border-radius: 12px; background: #fff; cursor: pointer; font-weight: 500; }
.vues button[aria-pressed="true"] { border-color: var(--encre); box-shadow: inset 0 0 0 1px var(--encre); }

.infos h1 { font-size: clamp(2rem, 4vw, 2.8rem); }
.prix { font-size: 1.4rem; margin: 0 0 .8rem; }
.prix b { font-family: Unbounded, sans-serif; }
.prix s { color: var(--doux); font-size: 1rem; }
.resume { color: var(--doux); }
.infos fieldset { border: 0; padding: 0; margin: 1.5rem 0 0; }
.infos legend { display: flex; justify-content: space-between; align-items: center; width: 100%; font-weight: 600; margin-bottom: .6rem; }
.guide { border: 0; background: none; text-decoration: underline; cursor: pointer; color: var(--doux); font-weight: 500; font-size: .9rem; }
.coloris { display: flex; gap: .6rem; }
.coloris button { width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; box-shadow: inset 0 0 0 3px #fff, 0 0 0 1px var(--trait); }
.coloris button[aria-pressed="true"] { box-shadow: inset 0 0 0 3px #fff, 0 0 0 2px var(--encre); }
.tailles { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; }
.tailles button { padding: .8rem 0; border: 1px solid var(--trait); border-radius: 10px; background: #fff; cursor: pointer; font-weight: 600; }
.tailles button:hover:not(:disabled) { border-color: var(--encre); }
.tailles button[aria-pressed="true"] { background: var(--encre); color: #fff; border-color: var(--encre); }
.tailles button:disabled { color: #bbb; background: repeating-linear-gradient(135deg, #fff, #fff 6px, #f5f4f1 6px, #f5f4f1 12px); cursor: not-allowed; }
.stock { min-height: 1.4em; margin: .5rem 0 0; font-size: .9rem; color: #b5421f; font-weight: 500; }
.actions { display: flex; gap: .6rem; margin-top: 1.5rem; }
.ajouter { flex: 1; padding: 1.05rem; border: 0; border-radius: 99px; background: var(--encre); color: #fff; font: 600 1rem/1 "Inter Tight", sans-serif; cursor: pointer; transition: background .2s; }
.ajouter:hover { background: var(--orange); }
.favori { width: 56px; border: 1px solid var(--trait); border-radius: 50%; background: #fff; font-size: 1.4rem; cursor: pointer; }
.favori[aria-pressed="true"] { color: var(--orange); border-color: var(--orange); }
.message { min-height: 1.4em; margin: .8rem 0 0; font-weight: 500; }
.plis { border-top: 1px solid var(--trait); padding: 1rem 0; }
.plis:last-of-type { border-bottom: 1px solid var(--trait); }
.plis summary { cursor: pointer; font-weight: 600; }
.plis p { color: var(--doux); margin: .6rem 0 0; }

.aussi { padding: 2rem clamp(1rem, 4vw, 3rem) 4rem; }
.aussi h2 { font-size: 1.6rem; }
.aussi__liste { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 800px) { .aussi__liste { grid-template-columns: 1fr 1fr; } }
.mini { border-radius: 18px; background: var(--gris); padding: 1rem; }
.mini svg { width: 100%; height: auto; }
.mini h3 { margin: .5rem 0 0; font-size: 1rem; }
.mini p { margin: 0; color: var(--doux); font-size: .9rem; }

.guide-tailles { width: min(92vw, 440px); border: 0; border-radius: 22px; padding: 1.6rem; }
.guide-tailles::backdrop { background: rgba(18, 18, 18, .5); }
.guide-tailles h2 { font-size: 1.3rem; }
.guide-tailles label { display: grid; gap: .4rem; font-weight: 600; }
.guide-tailles input { accent-color: var(--orange); }
.guide__resultat { font-size: 1.05rem; }
.guide-tailles table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; font-size: .9rem; }
.guide-tailles th, .guide-tailles td { padding: .35rem; border-bottom: 1px solid var(--trait); text-align: left; }
.guide-tailles tr.is-conseil td { background: #ffe5df; font-weight: 700; }
.guide-tailles .ajouter { width: 100%; }
.pied { padding: 1.5rem; text-align: center; color: var(--doux); font-size: .88rem; border-top: 1px solid var(--trait); }