/* Kiébon — « affiche pop » */

/* Polices auto-hébergées (RGPD : aucun appel à Google Fonts).
   Anton et Bricolage Grotesque, SIL Open Font License 1.1 — licences dans public/fonts/. */
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/anton-latin-400.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/anton-latin-ext-400.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/bricolage-grotesque-latin-var.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/bricolage-grotesque-latin-ext-var.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
  --noir: #000;
  --papier: #fff;
  --jaune: #ffd23f;
  --rose: #ff8ac5;
  --vert: #44e0a0;
  --bleu: #7b96ff;
  --orange: #ff8a3d;
  --lilas: #c3a6ff;
  --fond: var(--papier);
  --texte: var(--noir);
  --doux: #4a4a4a;
  --trait: var(--noir);
  --ok: #0a7f52;
  --ko: #c0261b;
  --ombre: 5px 5px 0 var(--noir);
  --large: 1240px;
  --etroit: 760px;
  --ui: "Bricolage Grotesque", system-ui, sans-serif;
  --affiche: "Anton", Impact, "Arial Narrow", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --fond: #000; --texte: #fff; --doux: #c8c8c8; --trait: #fff; --ombre: 5px 5px 0 #fff; --ok: #5fd6a0; --ko: #ff9b8f; color-scheme: dark; }
}
:root[data-theme="dark"] { --fond: #000; --texte: #fff; --doux: #c8c8c8; --trait: #fff; --ombre: 5px 5px 0 #fff; --ok: #5fd6a0; --ko: #ff9b8f; color-scheme: dark; }

[data-c="jaune"] { --c: var(--jaune); } [data-c="rose"] { --c: var(--rose); } [data-c="vert"] { --c: var(--vert); }
[data-c="bleu"] { --c: var(--bleu); } [data-c="orange"] { --c: var(--orange); } [data-c="lilas"] { --c: var(--lilas); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--texte); font: 400 1.0625rem/1.55 var(--ui); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--texte); outline-offset: 3px; }
h1, h2, h3 { line-height: 1.05; margin: 0 0 .5em; text-wrap: balance; }
h1 { font: 800 clamp(2rem, 1.3rem + 3vw, 3.6rem)/1 var(--ui); letter-spacing: -0.035em; }
h2 { font: 800 clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem)/1.02 var(--ui); letter-spacing: -0.03em; }
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0 0 1em; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--jaune); color: #000; padding: 8px 14px; z-index: 10; }
.skip:focus { left: 8px; }

/* ---------- en-tête ---------- */
.entete { background: var(--fond); border-bottom: 3px solid var(--trait); position: sticky; top: 0; z-index: 6; }
.entete__in { max-width: var(--large); margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; gap: 28px; }
.logo { font: 800 2rem/1 var(--ui); letter-spacing: -0.06em; text-decoration: none; margin: 0; }
.logo__pt { color: var(--orange); }
.nav { flex: 1; overflow-x: auto; scrollbar-width: none; }
.nav ul { display: flex; gap: 22px; margin: 0; padding: 0; list-style: none; white-space: nowrap; }
.nav a { text-decoration: none; font-weight: 700; }
.nav a:hover, .nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--orange); }
.panier-lien { text-decoration: none; font-weight: 800; display: inline-flex; align-items: center; gap: 8px; background: var(--texte); color: var(--fond); padding: 9px 14px 9px 18px; border-radius: 999px; white-space: nowrap; }
.panier-lien__n { background: var(--jaune); color: #000; min-width: 1.6em; height: 1.6em; border-radius: 999px; display: inline-grid; place-items: center; font-size: .85rem; padding: 0 .4em; }
@media (max-width: 720px) {
  .entete__in { flex-wrap: wrap; gap: 10px 16px; }
  .nav { order: 3; flex-basis: 100%; }
  .panier-lien { margin-left: auto; }
}

/* ---------- bandeau défilant ---------- */
.defile { background: var(--noir); color: #fff; overflow: hidden; border-bottom: 3px solid var(--trait); }
.defile__in { display: flex; width: max-content; animation: defile 38s linear infinite; }
.defile:hover .defile__in, .defile:focus-within .defile__in { animation-play-state: paused; }
.defile__piste { display: flex; margin: 0; padding: 0; list-style: none; }
.defile li { display: flex; align-items: center; }
.defile li::after { content: "✷"; color: var(--jaune); padding: 0 18px; }
.defile a { font: 400 1.35rem/1 var(--affiche); text-transform: uppercase; letter-spacing: .02em; text-decoration: none; padding: 12px 0; }
.defile a:hover { color: var(--jaune); }
@keyframes defile { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .defile__in { animation: none; } .defile { overflow-x: auto; } }

/* ---------- blocs ---------- */
.bloc { max-width: var(--large); margin: 0 auto; padding: 56px 16px; }
.bloc--etroit { max-width: var(--etroit); }
.bloc__tete { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.bloc__tete h2 { margin: 0; }
.bloc__tete a { font-weight: 800; }

/* ---------- hero ---------- */
.hero { background: var(--c, var(--jaune)); color: #000; border-bottom: 3px solid var(--trait); transition: background-color .35s ease; overflow: hidden; }
.hero__in { max-width: var(--large); margin: 0 auto; padding: 40px 16px 48px; display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px; align-items: center; }
.hero h1 { font: 700 1.05rem/1.3 var(--ui); letter-spacing: 0; margin-bottom: 18px; max-width: 30ch; }
.hero__slogan { font: 400 var(--fs, 6rem)/.9 var(--affiche); text-transform: uppercase; letter-spacing: -.005em; margin: 0 0 32px; text-wrap: balance; min-height: 1.8em; }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 0; }
.hero__tee { position: relative; display: block; width: min(100%, 440px); justify-self: center; }
.hero__tee .tee { transform: rotate(4deg); }
.hero__tee .tee path { stroke: #000; stroke-width: 6; filter: drop-shadow(10px 10px 0 #000); }
.hero .sticker { position: absolute; left: -6%; bottom: 14%; transform: rotate(-12deg); }
.pop { animation: pop .4s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes pop { 0% { transform: scale(.94) rotate(-2deg); opacity: .4; } 100% { transform: none; opacity: 1; } }
.hero__tee .tee.pop { animation-name: popTee; }
@keyframes popTee { 0% { transform: rotate(-6deg) scale(.92); } 100% { transform: rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .pop, .hero__tee .tee.pop { animation: none; } .hero { transition: none; } }
@media (max-width: 820px) {
  .hero__in { grid-template-columns: 1fr; padding-top: 28px; }
  .hero__tee { width: min(70vw, 320px); order: -1; }
}

/* ---------- boutons, stickers ---------- */
/* Un bouton prend ses couleurs de la SURFACE qui le porte, pas du thème de la page.
   La plupart des surfaces suivent le thème (--trait, --texte, --fond), mais deux familles
   gardent la même couleur dans les deux modes : les blocs à fond coloré clair (héros,
   en-tête de catégorie, visuel de fiche) et les blocs toujours noirs (pied de page,
   bandeau des engagements). Sans ça, le bouton plein devient noir sur noir en mode sombre,
   et noir sur le pied de page noir en mode clair. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 3px solid var(--btn-bord, var(--trait)); border-radius: 999px; padding: .85em 1.5em; font: 800 1.05rem/1 var(--ui); text-decoration: none; cursor: pointer; box-shadow: 4px 4px 0 var(--btn-bord, var(--trait)); transition: transform .12s, box-shadow .12s; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--btn-bord, var(--trait)); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--btn-bord, var(--trait)); }
.btn--noir { background: var(--btn-plein-fond, var(--texte)); color: var(--btn-plein-texte, var(--fond)); }
.btn--blanc { background: var(--btn-vide-fond, var(--fond)); color: var(--btn-vide-texte, var(--texte)); }
/* Surfaces toujours claires (fond coloré dans les deux modes). */
.hero, .cat-tete, .fiche__visuel, .poster, .tuiles a {
  --btn-bord: #000; --btn-plein-fond: #000; --btn-plein-texte: #fff; --btn-vide-fond: #fff; --btn-vide-texte: #000;
}
/* Surfaces toujours noires. */
.pied, .bande {
  --btn-bord: #fff; --btn-plein-fond: #fff; --btn-plein-texte: #000; --btn-vide-fond: #000; --btn-vide-texte: #fff;
}
.btn--jaune { background: var(--jaune); color: #000; }
.btn:disabled { opacity: .6; cursor: progress; }
.sticker { display: inline-grid; place-items: center; text-align: center; width: 6.6rem; height: 6.6rem; padding: 10px; border-radius: 50%; background: #000; color: var(--jaune); font: 400 1rem/1.05 var(--affiche); text-transform: uppercase; margin: 0; }

/* ---------- affiches (cartes produits) ---------- */
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 230px), 1fr)); gap: 32px 20px; margin: 24px 0; padding: 0; list-style: none; }
.card a { display: block; text-decoration: none; position: relative; }
.poster { position: relative; container-type: inline-size; aspect-ratio: 4 / 5; background: var(--c); color: #000; border: 3px solid #000; border-radius: 6px; box-shadow: var(--ombre); display: flex; align-items: center; justify-content: center; padding: 10%; overflow: hidden; transition: transform .15s, box-shadow .15s; }
.poster__txt { font: 400 var(--fs, 14cqw)/.92 var(--affiche); text-transform: uppercase; text-align: center; text-wrap: balance; overflow-wrap: normal; }
.mini-tee { position: absolute; right: 8px; bottom: 8px; width: 20%; }
.mini-tee path { fill: #fff; stroke: #000; stroke-width: 14; stroke-linejoin: round; }
.card a:hover .poster { transform: translate(-3px, -3px) rotate(-1deg); box-shadow: 8px 8px 0 var(--trait); }
.card__prix { position: absolute; top: -10px; left: -8px; background: #000; color: #fff; font: 800 .9rem/1 var(--ui); padding: 7px 10px; border-radius: 999px; transform: rotate(-6deg); z-index: 1; }
.card__titre { font-size: 1rem; font-weight: 700; margin: 16px 0 2px; line-height: 1.25; }
.card a:hover .card__titre { text-decoration: underline; }
.card__meta { color: var(--doux); font-size: .92rem; margin: 0; }
@media (prefers-reduced-motion: reduce) { .poster, .btn { transition: none; } }

/* ---------- occasions ---------- */
.tuiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 0; margin: 0; list-style: none; }
.tuiles a { display: flex; flex-direction: column; justify-content: space-between; min-height: 150px; padding: 18px; background: var(--c); color: #000; border: 3px solid #000; border-radius: 6px; text-decoration: none; box-shadow: var(--ombre); transition: transform .15s; }
.tuiles a:hover { transform: rotate(-1.5deg); }
.tuiles span { font: 400 clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem)/.95 var(--affiche); text-transform: uppercase; }
.tuiles small { font-weight: 700; }
.tuiles li:nth-child(1) { grid-column: span 2; }
.tuiles li:nth-child(6), .tuiles li:nth-child(7), .tuiles li:nth-child(8) { grid-column: span 2; }
.tuiles li:nth-child(7) { grid-column: span 2; }
@media (max-width: 820px) { .tuiles { grid-template-columns: 1fr 1fr; } .tuiles li:nth-child(n+2) { grid-column: auto; } }

/* ---------- bande engagements ---------- */
.bande { background: #000; color: #fff; border-block: 3px solid var(--trait); }
.bande ul { max-width: var(--large); margin: 0 auto; padding: 44px 16px; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.bande strong { display: inline-block; background: var(--c); color: #000; font: 400 1.3rem/1 var(--affiche); text-transform: uppercase; padding: 8px 12px; transform: rotate(-2deg); margin-bottom: 12px; }
.bande li:nth-child(even) strong { transform: rotate(2deg); }
.bande span { display: block; color: #d6d6d6; }
@media (max-width: 900px) { .bande ul { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .bande ul { grid-template-columns: 1fr; } }

/* ---------- faits (fiche produit) ---------- */
.faits { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 0; border-top: 3px solid var(--trait); padding-top: 22px; }
.faits dt { font-weight: 800; }
.faits dd { margin: 0; color: var(--doux); font-size: .95rem; }

/* ---------- articles ---------- */
.articles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 0; margin: 0; list-style: none; }
.articles a { display: block; height: 100%; text-decoration: none; border: 3px solid var(--trait); border-radius: 6px; padding: 20px; }
.articles a:hover { background: var(--jaune); color: #000; }
.articles a:hover p { color: #000; }
.articles p { color: var(--doux); margin: 0; }
.articles--liste { grid-template-columns: 1fr; gap: 20px; margin-top: 24px; }
.articles--liste h2 { font-size: 1.45rem; }
@media (max-width: 820px) { .articles { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq details { border-bottom: 3px solid var(--trait); }
.faq summary { cursor: pointer; padding: 18px 40px 18px 0; font-weight: 800; font-size: 1.15rem; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 12px; width: 30px; height: 30px; display: grid; place-items: center; background: var(--jaune); color: #000; border: 2px solid #000; border-radius: 50%; font-size: 1.2rem; }
.faq details[open] summary::after { content: "−"; background: var(--rose); }
.faq details p { color: var(--doux); }

/* ---------- catégorie ---------- */
.ariane ol { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 20px; list-style: none; font-size: .92rem; font-weight: 600; }
.ariane li + li::before { content: "→"; margin-right: 6px; }
.cat-tete { position: relative; background: var(--c); color: #000; border: 3px solid #000; border-radius: 6px; box-shadow: var(--ombre); padding: 40px 28px; margin-bottom: 28px; }
.cat-tete h1 { font: 400 clamp(2.4rem, 1.4rem + 4.5vw, 5.2rem)/.92 var(--affiche); text-transform: uppercase; letter-spacing: 0; margin: 0; max-width: 16ch; }
.cat-tete__page { font: 700 1rem var(--ui); text-transform: none; }
.sticker--cat { position: absolute; right: 22px; top: -22px; transform: rotate(10deg); width: 5.6rem; height: 5.6rem; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 8px; padding: 0; list-style: none; }
.chip { display: inline-block; border: 2.5px solid var(--trait); border-radius: 999px; padding: .4em 1em; font-weight: 700; text-decoration: none; }
.chip:hover { background: var(--jaune); color: #000; border-color: #000; }
/* index alphabétique des prénoms et maillage des fiches */
.az h3 { font: 800 1.15rem/1 var(--ui); margin: 20px 0 10px; }
.az__lettres { margin-bottom: 14px; }
.az__lettres .chip { min-width: 2.4em; text-align: center; padding: .3em .6em; }
.az__groupe { margin-bottom: 6px; }
.az .chips { margin-bottom: 14px; }
.prose { max-width: 68ch; }
.prose--intro { color: var(--doux); font-size: 1.08rem; margin-bottom: 20px; }
.prose h2 { margin-top: 1.6em; font-size: 1.6rem; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .4em; }
.prose__photo { display: block; width: min(320px, 100%); margin: 24px 0; }
.prose__photo img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border: 3px solid #000; border-radius: 6px; background: #fff; }
.guide { border-top: 3px solid var(--trait); }
.pages ul { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 0; margin: 16px 0 0; list-style: none; }
.pages a, .pages span { display: inline-grid; place-items: center; min-width: 46px; height: 46px; padding: 0 12px; border-radius: 999px; text-decoration: none; font-weight: 800; border: 2.5px solid var(--trait); }
.pages span[aria-current] { background: var(--texte); color: var(--fond); }
.pages a:hover { background: var(--jaune); color: #000; border-color: #000; }

/* ---------- le T-shirt ---------- */
.tee { position: relative; container-type: inline-size; aspect-ratio: 300 / 330; width: 100%; }
.tee svg { width: 100%; height: 100%; overflow: visible; }
.tee path { fill: #fff; stroke: #000; stroke-width: 5; stroke-linejoin: round; }
.tee__txt { position: absolute; inset: 24% 27% 26%; display: flex; align-items: center; justify-content: center; text-align: center; font: 400 var(--fs, 8cqw)/1 var(--affiche); text-transform: uppercase; color: #000; text-wrap: balance; overflow-wrap: normal; }
.tee--femme .tee__txt { inset: 25% 29% 26%; }

/* ---------- fiche produit ---------- */
.fiche { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: start; }
.fiche__visuel { position: sticky; top: 90px; background: var(--c); border: 3px solid #000; border-radius: 6px; box-shadow: var(--ombre); padding: 9% 13%; }
.fiche__visuel .tee path { filter: drop-shadow(8px 8px 0 #000); }
.sticker--prix { position: absolute; right: -14px; top: -18px; transform: rotate(12deg); z-index: 1; font-size: 1.25rem; }
.fiche h1 { font: 400 clamp(2rem, 1.3rem + 2.4vw, 3.2rem)/.98 var(--affiche); text-transform: uppercase; letter-spacing: 0; }
.fiche__prix { font: 800 1.7rem/1 var(--ui); margin-bottom: 24px; }
.fiche__prix span { font-size: .95rem; font-weight: 600; color: var(--doux); }
.fiche__form { display: grid; gap: 20px; margin-bottom: 32px; }
.fiche__form .btn { width: 100%; font-size: 1.15rem; padding: 1.05em; }
.choix { border: 0; padding: 0; margin: 0; }
.choix legend { font-weight: 800; margin-bottom: 8px; }
.choix__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.choix input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choix span { display: inline-grid; place-items: center; min-width: 54px; height: 48px; padding: 0 18px; border: 2.5px solid var(--trait); border-radius: 999px; font-weight: 800; cursor: pointer; }
.choix label:hover span { background: var(--jaune); color: #000; border-color: #000; }
.choix input:checked + span { background: var(--texte); border-color: var(--texte); color: var(--fond); }
.choix input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 2px; }
@media (max-width: 820px) {
  .fiche { grid-template-columns: 1fr; gap: 32px; }
  .fiche__visuel { position: relative; top: 0; padding: 8% 16%; }
  .fiche__form .btn { position: sticky; bottom: 12px; z-index: 4; }
}

/* ---------- panier ---------- */
.lignes { padding: 0; margin: 0 0 24px; list-style: none; border-top: 3px solid var(--trait); }
.ligne { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 2px solid var(--trait); }
.ligne a { font-weight: 800; }
.ligne p { margin: 2px 0 0; color: var(--doux); font-size: .95rem; }
.ligne__prix { font-weight: 800; color: var(--texte) !important; min-width: 5.5em; text-align: right; }
.qte { display: inline-flex; align-items: center; border: 2.5px solid var(--trait); border-radius: 999px; }
.qte button { width: 40px; height: 40px; border: 0; background: none; color: inherit; font-size: 1.2rem; cursor: pointer; border-radius: 999px; }
.qte span { min-width: 1.5em; text-align: center; font-weight: 800; }
.panier__total dl { margin: 0 0 12px; }
.panier__total dl div { display: flex; justify-content: space-between; padding: 6px 0; }
.panier__total dt { color: var(--doux); }
.panier__total dd { margin: 0; font-weight: 700; }
.panier__total .total { border-top: 3px solid var(--trait); margin-top: 6px; padding-top: 12px; font-size: 1.3rem; }
.panier__total .total dt { color: var(--texte); font-weight: 800; }
.panier__seuil { display: inline-block; background: var(--jaune); color: #000; font-weight: 800; padding: 6px 12px; border-radius: 999px; }
.panier__note { color: var(--doux); font-size: .92rem; margin-top: 14px; }
.panier .btn { width: 100%; }
.erreur { color: var(--ko); font-weight: 700; }
.vide { font-size: 1.15rem; }
.date { color: var(--doux); }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); width: min(560px, calc(100% - 32px)); background: var(--jaune); color: #000; padding: 14px 18px; border: 3px solid #000; border-radius: 8px; box-shadow: 5px 5px 0 #000; font-weight: 600; z-index: 20; }
.toast a { font-weight: 800; }

/* ---------- pied ---------- */
.pied { background: #000; color: #e8e8e8; margin-top: 48px; border-top: 3px solid var(--trait); }
.pied__in { max-width: var(--large); margin: 0 auto; padding: 48px 16px 24px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.pied ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pied a { text-decoration: none; }
.pied a:hover { color: var(--jaune); }
.pied__titre { font: 400 1.2rem var(--affiche); text-transform: uppercase; color: #fff; margin-bottom: 12px; }
.logo--pied { color: #fff; font-size: 2.6rem; margin-bottom: 12px; }
.pied__marque p:last-child { max-width: 32ch; opacity: .85; }
.pied__copy { max-width: var(--large); margin: 0 auto; padding: 16px 16px 32px; opacity: .7; font-size: .9rem; }
@media (max-width: 820px) { .pied__in { grid-template-columns: 1fr 1fr; } .pied__marque { grid-column: 1 / -1; } }

/* ---------- contenus réécrits ---------- */
.accroche { font: 700 clamp(1.25rem, 1.1rem + .6vw, 1.6rem)/1.3 var(--ui); letter-spacing: -0.01em; border-left: 8px solid var(--jaune); padding-left: 18px; }
.pourqui { list-style: none; padding: 0 !important; display: grid; gap: 10px; }
.pourqui li { position: relative; padding-left: 34px; font-weight: 600; }
.pourqui li::before { content: "✷"; position: absolute; left: 0; top: -2px; font-size: 1.3rem; color: var(--orange); }
.tech { display: grid; grid-template-columns: 1fr 1fr; border: 3px solid var(--trait); border-radius: 6px; margin: 0; }
.tech div { padding: 12px 16px; border-bottom: 2px solid var(--trait); }
.tech div:nth-child(odd) { border-right: 2px solid var(--trait); }
.tech div:nth-last-child(-n+2) { border-bottom: 0; }
.tech dt { font-weight: 800; font-size: .9rem; }
.tech dd { margin: 0; color: var(--doux); }
@media (max-width: 560px) { .tech { grid-template-columns: 1fr; } .tech div:nth-child(odd) { border-right: 0; } .tech div:nth-last-child(2) { border-bottom: 2px solid var(--trait); } }

/* ---------- photos produits ---------- */
/* Les images produits sont détourées (fond transparent) : le fond derrière le T-shirt est
   la couleur de l'affiche du produit, var(--c), posée ici. En grille elle n'apparaît qu'au
   survol, en même temps que la photo ; sur la fiche, qui montre la photo en permanence,
   c'est l'état normal. D'où le data-c sur .card__visuel : --c n'était déclaré que sur
   .poster, dont la photo n'est pas descendante.
   Le cadre existe pour la loupe : il la retient dans l'arrondi de l'image, sans clore
   .card__visuel ni .fiche__visuel, qui laissent volontairement déborder la pastille promo,
   les stickers et l'ombre portée de l'affiche au survol. */
.card__visuel { position: relative; }
.card__cadre { position: absolute; inset: 0; border: 3px solid #000; border-radius: 6px; background: var(--c); overflow: hidden; opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.card__photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.card a:hover .card__cadre:has(.card__photo[srcset]), .card a:focus-visible .card__cadre:has(.card__photo[srcset]), .card a:active .card__cadre:has(.card__photo[srcset]) { opacity: 1; }
.fiche__visuel--photo { padding: 0; overflow: visible; background: var(--c); }
.fiche__cadre { display: block; position: relative; overflow: hidden; border-radius: 3px; }
.fiche__photo { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }

/* Loupe : un encadré rond suit le curseur et montre la zone survolée agrandie, prise dans
   la plus grande largeur du srcset. L'image affichée, elle, ne bouge pas — c'est tout
   l'intérêt par rapport à un scale() sur la photo entière. Posée par cart.js, qui calcule
   left/top et background-position ; le CSS ne fait que la dessiner.
   background-color: var(--c) n'est pas décoratif : l'image est détourée, et c'est lui qui
   remplit le hors-champ quand la loupe déborde du T-shirt ou du cadre. */
.loupe { position: absolute; aspect-ratio: 1; border: 3px solid #000; border-radius: 50%; background-color: var(--c); background-repeat: no-repeat; pointer-events: none; opacity: 0; transition: opacity .12s ease; z-index: 3; }
.loupe--on { opacity: 1; }
.card__cadre .loupe { width: 58%; }
.fiche__cadre .loupe { width: 40%; }
@media (prefers-reduced-motion: reduce) { .card__cadre, .loupe { transition: none; } }

/* ---------- promotions, avis, newsletter, suivi ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.card__prix s, .fiche__prix s { color: var(--doux); text-decoration-thickness: 2px; font-weight: 600; margin-right: 2px; }
.card__promo { position: absolute; top: -10px; right: -8px; background: var(--rose); color: #000; border: 3px solid #000; font: 800 .75rem/1 var(--ui); text-transform: uppercase; padding: 6px 9px; border-radius: 999px; transform: rotate(8deg); z-index: 2; }
.sticker--promo { position: absolute; left: -14px; top: -18px; transform: rotate(-12deg); z-index: 1; width: 5rem; height: 5rem; background: var(--rose); color: #000; font-size: 1rem; }
.fiche__promo { background: var(--rose); color: #000; font: 800 .8rem/1 var(--ui); text-transform: uppercase; padding: 6px 10px; border-radius: 999px; vertical-align: 4px; }
.card__note { margin: 2px 0 0; font-size: .85rem; font-weight: 700; color: var(--doux); }
.fiche__note { margin: -6px 0 14px; }
.fiche__note a { color: var(--doux); font-weight: 700; text-decoration-thickness: 2px; }
.etoiles { color: var(--orange); letter-spacing: 1px; }

.avis__moyenne { font-size: 1.15rem; margin: 0 0 18px; }
.avis__moyenne span { color: var(--doux); font-size: .95rem; }
.avis__liste { list-style: none; padding: 0; display: grid; gap: 16px; }
.avis__liste li { border: 3px solid var(--trait); border-radius: 6px; padding: 14px 16px; box-shadow: var(--ombre); }
.avis__liste p { margin: 0; }
.avis__liste p + p { margin-top: 8px; }
.avis__tete { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.avis__date { color: var(--doux); font-size: .82rem; }
.avis-form { border-top: 3px solid var(--trait); padding-top: 18px; margin-top: 18px; }
.avis-form textarea, .avis-form input[type="text"] { width: 100%; font: inherit; padding: 10px 12px; border: 3px solid var(--trait); border-radius: 6px; background: var(--fond); color: var(--texte); }

.newsletter { max-width: 1180px; margin: 0 auto; padding: 26px 22px; border-bottom: 3px solid var(--trait); }
.newsletter__titre { font: 400 clamp(1.4rem, 1.1rem + 1vw, 2rem)/1.05 var(--affiche); text-transform: uppercase; margin: 0 0 4px; }
.newsletter__txt { color: var(--doux); margin: 0 0 12px; font-size: .95rem; }
.newsletter__champs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.newsletter input { flex: 1 1 15rem; font: inherit; padding: 12px 14px; border: 3px solid var(--btn-bord, var(--trait)); border-radius: 6px; background: var(--btn-vide-fond, var(--fond)); color: var(--btn-vide-texte, var(--texte)); }
.newsletter__msg { margin: 10px 0 0; font-weight: 700; font-size: .95rem; }
.newsletter__msg[data-etat="ok"] { color: var(--ok); }
.newsletter__msg[data-etat="ko"] { color: var(--ko); }

/* `display: flex` sur les lignes du récapitulatif l'emporte sur [hidden] : il faut le dire. */
.panier__total dl div[hidden] { display: none; }
.panier__code { display: grid; gap: 8px; margin: 0 0 18px; padding-bottom: 18px; border-bottom: 2px solid var(--trait); }
.panier__code label { font-weight: 800; font-size: .9rem; }
.panier__code__champs { display: flex; gap: 8px; }
.panier__code input { flex: 1; font: inherit; text-transform: uppercase; padding: 10px 12px; border: 3px solid var(--trait); border-radius: 6px; background: var(--fond); color: var(--texte); }
.panier__code__msg { font-weight: 700; font-size: .9rem; color: var(--doux); }
.panier__code__msg[data-etat="ok"] { color: var(--ok); }
.panier__code__msg[data-etat="ko"] { color: var(--ko); }
.panier__champ { display: grid; gap: 6px; margin: 14px 0 10px; }
.panier__champ label { font-weight: 800; font-size: .9rem; }
.panier__champ input { font: inherit; padding: 12px 14px; border: 3px solid var(--trait); border-radius: 6px; background: var(--fond); color: var(--texte); }
/* Coordonnées de livraison : deux colonnes dès qu'il y a la place, une seule au téléphone. */
.panier__coord { margin: 18px 0 6px; padding-top: 18px; border-top: 2px solid var(--trait); display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.panier__coord h2 { grid-column: 1 / -1; font-size: 1.15rem; margin: 0; }
.panier__champ--large { grid-column: 1 / -1; }
.panier__aide { font-size: .85rem; font-weight: 400; color: var(--doux); }
.panier__champ input[aria-invalid="true"] { border-color: var(--ko); }
@media (max-width: 560px) { .panier__coord { grid-template-columns: 1fr; } }
.panier__case { font-size: .92rem; color: var(--doux); margin: 0 0 16px; }
.panier__case input { width: 1.1rem; height: 1.1rem; margin-right: 6px; vertical-align: -2px; accent-color: #000; }

.suivi { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.suivi li { flex: 1 1 8rem; text-align: center; border: 3px solid var(--trait); border-radius: 999px; padding: 8px 10px; font-weight: 700; font-size: .85rem; color: var(--doux); text-transform: capitalize; }
.suivi .suivi--fait { background: var(--jaune); color: #000; border-color: #000; }