/* Polices auto-hébergées — voir la note en bas de ce fichier. */
@font-face{font-family:'Permanent Marker';src:url('fonts/permanent-marker.woff2')format('woff2');font-display:swap;font-style:normal;font-weight:400}
@font-face{font-family:'Patrick Hand';src:url('fonts/patrick-hand.woff2')format('woff2');font-display:swap;font-style:normal;font-weight:400}

/* ================================================================
   ALLSTORE — feuille de style globale
   ================================================================
   Direction : SITE DESSINÉ (demande client). Tout doit sembler
   tracé à la main : typo manuscrite (Permanent Marker pour les
   titres, Patrick Hand pour le texte), bordures irrégulières
   (border-radius asymétriques), traits ondulés, cartes légèrement
   inclinées, ombres décalées façon crayon.

   Pour rebrander : changer les variables ci-dessous + rechercher
   "ALLSTORE" dans le projet (voir CHEATSHEET.md).
   ================================================================ */

:root {
  --bg:      #f6f4ef;   /* fond papier */
  --paper:   #ffffff;   /* surfaces */
  --ink:     #111111;   /* encre : texte + traits */
  --muted:   #5f5c56;   /* texte secondaire */
  --grey:    #eceae4;   /* blocs image */
  --grey-2:  #e3e0d8;   /* variante blocs */
  --accent:  #e10600;   /* rouge feutre — soulignés, étiquettes */
  --f-display: 'Permanent Marker', 'Comic Sans MS', cursive;
  --f-body: 'Patrick Hand', 'Segoe Print', 'Comic Sans MS', cursive;
  --gutter: 24px;
  --max: 1440px;
  /* coins « tracés à la main » : asymétriques, jamais réguliers */
  --wonky-sm: 12px 5px 14px 6px / 6px 14px 5px 12px;
  --wonky-md: 18px 8px 22px 9px / 9px 22px 8px 18px;
  --wonky-lg: 255px 25px 225px 25px / 25px 225px 25px 255px;
  /* trait ondulé façon crayon (séparateurs) */
  --squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='7' viewBox='0 0 120 7'%3E%3Cpath d='M0 3.5 Q15 1 30 3.5 T60 3.5 T90 3.5 T120 3.5' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: auto; }

/* Filet de sécurité : coupe tout débordement horizontal, quelle qu'en
   soit la source (un futur ajout de contenu large, une image mal
   dimensionnée...). Sans danger pour le header en position:sticky
   (l'ancre du scroll reste html/body). Chaque cause de débordement
   doit quand même être corrigée à la racine — voir .table-scroll et
   la note sur svg.doodle dans sketch-fx.css — ceci n'est qu'un filet. */
html, body { overflow-x: hidden; }

body {
  background: var(--bg) url('assets/ui/ui-paper.jpg') repeat;
  background-size: 900px 690px;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--ink); }

::selection { background: var(--ink); color: var(--bg); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--wonky-sm); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* séparateur crayonné réutilisable */

/* ── Topbar ──────────────────────────────────────────────────── */

.topbar {
  background: var(--ink);
  color: #fff;
  font-size: 15px;
  letter-spacing: .02em;
  text-align: center;
  padding: 8px var(--gutter) 14px;
  /* bord bas irrégulier — coup de marqueur, pas une bande droite */
  clip-path: polygon(0 0, 100% 0, 100% 76%, 94% 92%, 87% 78%, 79% 95%, 71% 80%, 62% 97%, 53% 82%, 44% 96%, 35% 79%, 26% 94%, 17% 80%, 9% 95%, 3% 82%, 0 92%);
}

/* ── Header ──────────────────────────────────────────────────── */

header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--bg) url('assets/ui/ui-paper.jpg') repeat;
  background-size: 900px 690px;
}

header::after { content: ""; display: block; height: 7px; background: var(--squiggle) repeat-x center; }

.nav {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Wordmark ALLSTORE rendu en texte (police Permanent Marker) — look
   dessiné, sans artefact d'image ni inversion. */
.logo {
  font-family: var(--f-display);
  font-size: 26px;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  transform: rotate(-2deg);
  display: inline-block;
  color: var(--ink);
}

.nav-links { display: flex; align-items: center; gap: 28px; list-style: none; }

.nav-links a {
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-decoration: none;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  text-decoration: underline wavy var(--accent) 2px;
  text-underline-offset: 6px;
}

.nav-right { display: flex; align-items: center; gap: 24px; }

.cart-link {
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-decoration: none;
}

.cart-link:hover { text-decoration: underline wavy var(--accent) 2px; text-underline-offset: 6px; }

.burger {
  display: none;
  background: none;
  border: 2px solid var(--ink);
  border-radius: var(--wonky-sm);
  font: inherit;
  font-size: 15px;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 14px;
}

.mobile-menu {
  display: none;
  background: transparent;
}

.mobile-menu.open { display: block; }

.mobile-menu a {
  display: block;
  padding: 14px var(--gutter);
  font-size: 17px;
  text-transform: uppercase;
  text-decoration: none;
  border-top: 1px dashed rgba(17,17,17,.35);
}

@media (max-width: 820px) {
  .nav-links { display: none; }
  .burger { display: block; }
}

/* ── Hero ────────────────────────────────────────────────────── */

.hero { padding: 72px 0 64px; }

.hero::after { content: ""; display: block; height: 7px; background: var(--squiggle) repeat-x center; margin-top: 56px; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 48px;
  align-items: center;
}

.hero-copy { position: relative; }

.hero-art img {
  width: 100%;
  border: 2px solid var(--ink);
  border-radius: var(--wonky-md);
  background: #fff;
  box-shadow: 5px 5px 0 rgba(17,17,17,.18);
  transform: rotate(0.8deg);
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-art { max-width: 520px; }
}

.hero-label {
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
  margin-bottom: 18px;
  transform: rotate(-1deg);
  display: inline-block;
}

.hero-title {
  font-family: var(--f-display);
  font-size: clamp(38px, 7.5vw, 104px);
  line-height: 1.08;
  text-transform: uppercase;
  margin-bottom: 26px;
}

.hero-title em {
  font-style: normal;
  text-decoration: underline wavy var(--accent) 4px;
  text-underline-offset: 10px;
}

.hero-sub {
  font-size: 19px;
  color: var(--muted);
  max-width: 48ch;
  margin-bottom: 34px;
}

@media (max-width: 600px) { .hero { padding: 56px 0 40px; } .hero::after { margin-top: 44px; } }

/* ── Boutons ─────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  background: var(--ink);
  color: #fff;
  border: 2px solid var(--ink);
  border-radius: var(--wonky-lg);
  box-shadow: 3px 3px 0 rgba(17,17,17,.85);
  font-family: var(--f-body);
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-decoration: none;
  padding: 12px 30px;
  cursor: pointer;
  transform: rotate(-0.4deg);
}

.btn:hover { background: var(--paper); color: var(--ink); transform: rotate(0.4deg) translate(1px, 1px); box-shadow: 2px 2px 0 rgba(17,17,17,.85); }

.btn--ghost { background: var(--paper); color: var(--ink); }

.btn--ghost:hover { background: var(--ink); color: #fff; }

.btn[disabled], .btn.is-disabled {
  background: var(--grey);
  color: var(--muted);
  border-color: var(--muted);
  border-style: dashed;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.link-arrow {
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-decoration: underline wavy currentColor 2px;
  text-underline-offset: 6px;
}

/* ── Têtes de section ────────────────────────────────────────── */

.section { padding: 56px 0; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 30px;
}

.section-label {
  font-family: var(--f-display);
  font-size: clamp(24px, 3.2vw, 36px);
  text-transform: uppercase;
  transform: rotate(-0.8deg);
}

.section-count { font-size: 16px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

/* ── Grille produits ─────────────────────────────────────────── */

.grid-products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}

@media (max-width: 1080px) { .grid-products { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
@media (max-width: 720px)  { .grid-products { grid-template-columns: repeat(2, 1fr); gap: 16px; } }

.p-card {
  background: var(--paper);
  text-decoration: none;
  display: block;
  border: 2px solid var(--ink);
  border-radius: var(--wonky-md);
  box-shadow: 4px 4px 0 rgba(17,17,17,.18);
  overflow: hidden;
  transform: rotate(-0.7deg);
  transition: transform .15s ease, box-shadow .15s ease;
}

.p-card:nth-child(even) { transform: rotate(0.6deg); }

.p-card:hover { transform: rotate(0deg); box-shadow: 6px 6px 0 rgba(17,17,17,.25); }

.p-media {
  aspect-ratio: 3 / 4;
  background: var(--grey);
  position: relative;
  overflow: hidden;
  border-bottom: 2px solid var(--ink);
}

.p-card:nth-child(even) .p-media { background: var(--grey-2); }

.p-media img { width: 100%; height: 100%; object-fit: cover; }

.p-num {
  font-family: var(--f-display);
  font-size: clamp(34px, 4vw, 52px);
  color: rgba(17,17,17,.22);
  position: absolute;
  top: 8px;
  left: 14px;
  line-height: 1;
  transform: rotate(-4deg);
}

.p-caption { padding: 12px 16px 16px; }

.p-name { font-size: 18px; text-transform: uppercase; letter-spacing: .03em; }

.p-meta { font-size: 15px; color: var(--muted); margin-top: 0; }

.p-price { font-size: 17px; margin-top: 6px; }

.p-price.is-soon { color: var(--muted); }

.p-card:hover .p-name { text-decoration: underline wavy var(--accent) 2px; text-underline-offset: 5px; }

/* ── Bande statement ─────────────────────────────────────────── */

.band {
  background: var(--ink) url('assets/ui/ui-band.jpg') center / cover no-repeat;
  color: #fff;
  padding: 92px 0;
  position: relative;
  /* bords haut et bas arrachés — la section semble collée sur le carnet */
  clip-path: polygon(0 14px, 7% 3px, 16% 15px, 27% 2px, 38% 13px, 49% 4px, 60% 15px, 71% 3px, 82% 14px, 92% 4px, 100% 12px,
                     100% calc(100% - 13px), 93% calc(100% - 2px), 83% calc(100% - 14px), 72% calc(100% - 4px), 61% calc(100% - 15px), 50% calc(100% - 3px), 39% calc(100% - 13px), 28% calc(100% - 2px), 17% calc(100% - 14px), 8% calc(100% - 4px), 0 calc(100% - 12px));
}

/* voile sombre pour garder le titre lisible sur l'ardoise dessinée */
.band::before { content: ""; position: absolute; inset: 0; background: rgba(10,10,10,.78); }

.band .wrap { position: relative; }

.band-title {
  font-family: var(--f-display);
  font-size: clamp(28px, 5vw, 64px);
  line-height: 1.15;
  text-transform: uppercase;
  max-width: 24ch;
  margin-bottom: 30px;
  transform: rotate(-0.6deg);
}

.band-title em { font-style: normal; color: var(--accent); }

.band .link-arrow { color: #fff; }

/* ── Rangée infos ────────────────────────────────────────────── */

.info-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  padding: 44px 0;
  position: relative;
}

.info-row::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 7px; background: var(--squiggle) repeat-x center; }

@media (max-width: 720px) { .info-row { grid-template-columns: 1fr; gap: 26px; } }

.info-icon { height: 58px; width: auto; margin-bottom: 10px; transform: rotate(-1deg); }

.info-row h3 {
  font-family: var(--f-display);
  font-size: 19px;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-bottom: 6px;
  transform: rotate(-0.6deg);
}

.info-row p { font-size: 16px; color: var(--muted); }

/* ── Têtes de pages intérieures ──────────────────────────────── */

.page-head { padding: 56px 0 36px; }

.page-head::after { content: ""; display: block; height: 7px; background: var(--squiggle) repeat-x center; margin-top: 36px; }

.page-label {
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
  margin-bottom: 10px;
  transform: rotate(-1deg);
  display: inline-block;
}

.page-title {
  font-family: var(--f-display);
  font-size: clamp(34px, 5.5vw, 76px);
  line-height: 1.05;
  text-transform: uppercase;
}

.page-intro { font-size: 18px; color: var(--muted); max-width: 56ch; margin-top: 16px; }

/* ── Contenu éditorial / légal ───────────────────────────────── */

.prose { max-width: 720px; padding: 40px 0 88px; }

.prose section { padding: 26px 0; position: relative; }

.prose section:not(:last-child)::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 7px; background: var(--squiggle) repeat-x left center; opacity: .45; }

.prose h2 {
  font-family: var(--f-display);
  font-size: 21px;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-bottom: 10px;
  transform: rotate(-0.5deg);
}

.prose p, .prose li { font-size: 17px; line-height: 1.7; color: #3d3a35; margin-bottom: 8px; }

.prose ul, .prose ol { padding-left: 22px; }

.prose a { text-decoration: underline wavy var(--accent) 1.5px; text-underline-offset: 4px; }

/* le tableau défile dans SON conteneur sur petit écran plutôt que
   d'élargir toute la page (ce qui poussait aussi le bandeau cookies
   position:fixed hors de l'écran par ricochet) */
.table-scroll { overflow-x: auto; margin: 12px 0; -webkit-overflow-scrolling: touch; }
.prose table { width: 100%; min-width: 480px; border-collapse: separate; border-spacing: 0; font-size: 16px; margin: 0; border: 2px solid var(--ink); border-radius: var(--wonky-md); overflow: hidden; }

.prose th, .prose td { border-bottom: 1px dashed rgba(17,17,17,.4); border-right: 1px dashed rgba(17,17,17,.4); padding: 10px 12px; text-align: left; vertical-align: top; }

.prose th:last-child, .prose td:last-child { border-right: 0; }

.prose tbody tr:last-child td { border-bottom: 0; }

.prose th { font-family: var(--f-display); font-size: 14px; text-transform: uppercase; letter-spacing: .04em; }

/* champ administratif à compléter avant mise en ligne */
/* contraste 2,64:1 avec #9b9791 (insuffisant, WCAG AA demande 4,5:1) ;
   --muted est prévu pour le texte secondaire et passe à 6,06:1 */
.tbc { color: var(--muted); font-style: italic; }

/* ── Formulaires ─────────────────────────────────────────────── */

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 5px; }

.field--full { grid-column: 1 / -1; }

.field label { font-size: 15px; text-transform: uppercase; letter-spacing: .05em; }

.field input, .field textarea, .field select {
  border: 2px solid var(--ink);
  border-radius: var(--wonky-sm);
  background: var(--paper);
  font: inherit;
  font-size: 17px;
  padding: 11px 14px;
  appearance: none;
}

.field textarea { min-height: 140px; resize: vertical; }

/* ── Cases à cocher ───────────────────────────────────────────
   La règle ci-dessus s'applique à TOUS les champs d'un .field, y compris
   les cases : `appearance: none` supprimait la coche native et le padding
   les transformait en gros carrés vides. La case se cochait bien — le
   formulaire partait — mais RIEN ne l'indiquait à l'écran.

   C'est un défaut coûteux là où il se trouvait : sur l'acceptation des CGV,
   le client doit VOIR qu'il a accepté (art. L221-14). Une acceptation
   invisible ne vaut rien en cas de litige, et un client qui croit que son
   clic n'a pas marché abandonne sa commande.

   On garde le carré dessiné, qui va avec le reste du site, mais l'état
   coché devient impossible à rater : fond encre et coche blanche. */
.field input[type="checkbox"],
.field input[type="radio"] {
  width: 24px;
  height: 24px;
  min-width: 24px;
  padding: 0;
  flex: none;
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  transition: background .12s ease;
}

.field input[type="radio"] { border-radius: 50%; }

.field input[type="checkbox"]::after {
  content: '';
  width: 11px;
  height: 6px;
  border-left: 3px solid var(--paper);
  border-bottom: 3px solid var(--paper);
  transform: rotate(-45deg) translate(1px, -2px);
  opacity: 0;
  transition: opacity .12s ease;
}

.field input[type="checkbox"]:checked,
.field input[type="radio"]:checked { background: var(--ink); }

.field input[type="checkbox"]:checked::after { opacity: 1; }

.field input[type="radio"]::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--paper);
  opacity: 0;
}
.field input[type="radio"]:checked::after { opacity: 1; }

/* Navigation au clavier : la case doit rester repérable sans souris. */
.field input[type="checkbox"]:focus-visible,
.field input[type="radio"]:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

/* La case en erreur (CGV non acceptées) doit se distinguer du reste. */
.field input[type="checkbox"].champ-erreur { border-color: #c62828; }

/* ── Toolbar boutique (onglets) ──────────────────────────────── */

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 18px 0;
}

.tabs { display: flex; gap: 22px; flex-wrap: wrap; }

.tab {
  background: none;
  border: 0;
  font: inherit;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  padding: 4px 0;
  cursor: pointer;
}

.tab:hover { color: var(--ink); }

.tab.is-active {
  color: var(--ink);
  text-decoration: underline wavy var(--accent) 2px;
  text-underline-offset: 6px;
}

.sort-select {
  border: 2px solid var(--ink);
  border-radius: var(--wonky-sm);
  background: var(--paper);
  font: inherit;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 7px 12px;
  cursor: pointer;
}

/* ── Panier / récapitulatif ──────────────────────────────────── */

.cart-line {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 20px 0;
  position: relative;
}

.cart-line::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 7px; background: var(--squiggle) repeat-x left center; opacity: .45; }

.cart-thumb { width: 88px; aspect-ratio: 3/4; background: var(--grey); position: relative; border: 2px solid var(--ink); border-radius: var(--wonky-sm); overflow: hidden; }

.cart-thumb img { width: 100%; height: 100%; object-fit: cover; }

.cart-thumb .p-num { font-size: 20px; top: 4px; left: 7px; }

.cart-line-name { font-size: 18px; text-transform: uppercase; letter-spacing: .03em; }

.cart-line-meta { font-size: 15px; color: var(--muted); margin-top: 0; }

.cart-remove {
  background: none;
  border: 0;
  font: inherit;
  font-size: 15px;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: underline wavy currentColor 1.5px;
  text-underline-offset: 4px;
  cursor: pointer;
  padding: 4px 0;
  margin-top: 6px;
}

.cart-remove:hover { color: var(--accent); }

.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 22px 0;
  font-family: var(--f-display);
  font-size: 19px;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.empty-state { padding: 64px 0 88px; }

.empty-state p { color: var(--muted); margin-bottom: 22px; font-size: 18px; }

/* ── Footer ──────────────────────────────────────────────────── */

footer {
  background: var(--ink);
  color: #fff;
  margin-top: 64px;
  /* bord haut irrégulier, même esprit que la topbar */
  clip-path: polygon(0 12px, 6% 2px, 15% 13px, 25% 1px, 36% 11px, 47% 3px, 58% 13px, 68% 2px, 79% 12px, 89% 1px, 100% 10px, 100% 100%, 0 100%);
}

.foot {
  max-width: var(--max);
  margin: 0 auto;
  padding: 56px var(--gutter) 0;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
}

@media (max-width: 900px) { .foot { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot { grid-template-columns: 1fr; } }

.foot-brand .logo { color: #fff; font-size: 30px; }

.foot-brand p { font-size: 16px; color: rgba(255,255,255,.65); margin-top: 14px; max-width: 30ch; }

.foot h3 {
  font-family: var(--f-display);
  font-size: 16px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-bottom: 14px;
  transform: rotate(-1deg);
}

.foot ul { list-style: none; }

.foot li { margin-bottom: 8px; }

.foot a { font-size: 16px; color: rgba(255,255,255,.8); text-decoration: none; }

.foot a:hover { color: #fff; text-decoration: underline wavy var(--accent) 1.5px; text-underline-offset: 4px; }

.foot-bottom {
  max-width: var(--max);
  margin: 44px auto 0;
  padding: 18px var(--gutter);
  border-top: 1px dashed rgba(255,255,255,.3);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 14px;
  color: rgba(255,255,255,.55);
}

/* ── Doodles décoratifs (assets/ui/doodle-*.png) ─────────────── */

.doodle { position: absolute; pointer-events: none; opacity: .85; }

.doodle-star-hero { top: -34px; right: 4px; width: 74px; transform: rotate(12deg); }

.doodle-arrow-cta { bottom: -8px; left: 235px; width: 92px; transform: rotate(24deg); }

.doodle-bolt-head { top: -16px; right: -60px; width: 44px; transform: rotate(8deg); }

.doodle-sparkle-band { top: -26px; right: 8%; width: 72px; filter: invert(1); opacity: .9; }

@media (max-width: 900px) {
  .doodle-arrow-cta, .doodle-bolt-head { display: none; }
  .doodle-star-hero { width: 54px; top: -26px; }
}

/* ── Divers ──────────────────────────────────────────────────── */

.notice {
  border: 2px solid var(--ink);
  border-radius: var(--wonky-md);
  background: var(--paper);
  box-shadow: 3px 3px 0 rgba(17,17,17,.15);
  padding: 18px 22px;
  font-size: 16px;
  margin: 22px 0;
  transform: rotate(-0.3deg);
}

.hidden { display: none !important; }

/* ── Thèmes de saison (theme-saison.js) ──────────────────────────
   Le logo image remplace le wordmark texte quand un thème est actif.
   Il garde la même inclinaison pour ne pas casser le rythme dessiné. */
.logo-img { transform: rotate(-2deg); image-rendering: auto; }
.foot-brand .logo-img { filter: invert(1) brightness(2); }


/* ── Pourquoi les polices sont hébergées ici et pas chez Google ──────
   Charger une police depuis fonts.googleapis.com transmet à Google
   l'adresse IP du visiteur ET l'URL de la page consultée — y compris la
   page de commande, où le client saisit son nom et son adresse. Cette
   transmission a lieu AVANT toute bannière de consentement, puisque le
   navigateur télécharge la police pour afficher la page. Des juridictions
   européennes ont jugé cette transmission non conforme.
   En local : rendu identique, une requête réseau de moins, et rien qui
   sorte du domaine. Ne pas remettre de <link> vers Google Fonts. */


/* ════════════════════════════════════════════════════════════════
   Retours de Riyad — 18/08
   ════════════════════════════════════════════════════════════════ */

/**
 * Le bouton d'ajout au panier ne se distinguait pas assez de ce qui
 * l'entoure : « on dirait limite que tu cliques sur retirer l'article ».
 * C'est le seul bouton de la fiche produit qui déclenche un achat — il doit
 * se voir tout de suite et rester atteignable au pouce.
 */
.pdp-actions .btn {
  width: 100%;
  padding: 18px 28px;
  font-size: 17px;
  letter-spacing: .02em;
}
@media (min-width: 900px) {
  .pdp-actions .btn { width: auto; min-width: 300px; }
}

/* Commandes de quantite dans le panier */
.cart-qty {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 8px 0 6px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
}
.cart-qty button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 18px;
  line-height: 1;
  /* 40px : la cible minimale confortable au pouce. En dessous, on rate. */
  min-width: 40px;
  min-height: 40px;
  cursor: pointer;
}
.cart-qty button:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.cart-qty button:disabled { opacity: .3; cursor: default; }
.cart-qty span {
  min-width: 32px;
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Notification passagere */
#amn-toast {
  position: fixed;
  left: 50%;
  top: 22px;
  transform: translate(-50%, -18px);
  z-index: 9999;
  max-width: min(92vw, 420px);
  padding: 13px 20px;
  border: 2px solid var(--ink);
  border-radius: var(--wonky-md, 12px);
  background: var(--ink);
  color: var(--paper);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
#amn-toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  #amn-toast { transition: none; }
}


/* ════════════════════════════════════════════════════════════════
   Tunnel en deux étapes — 18/08
   ════════════════════════════════════════════════════════════════ */

/**
 * ⚠️ `hidden` ne suffit pas quand une règle donne un `display` à l'élément.
 *
 * L'attribut `hidden` n'est qu'un `display: none` posé par le navigateur, à
 * la spécificité la plus basse. `.checkout-grid { display: grid }` le battait
 * : les deux étapes s'affichaient en même temps, et la séparation ne servait
 * à rien. Rien ne le signalait — la page paraissait simplement « comme
 * avant ». Attrapé par verif-etapes.js.
 */
[hidden] { display: none !important; }

/**
 * L'indicateur d'étape n'est pas décoratif : il répond à « où j'en suis »
 * et « combien il en reste », les deux questions qui font abandonner un
 * tunnel de commande quand elles restent sans réponse.
 */
.etapes {
  display: flex;
  gap: 10px;
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  font-size: 15px;
  color: var(--muted);
  flex-wrap: wrap;
}
.etapes li { display: flex; align-items: center; gap: 8px; }
.etapes li + li::before {
  content: '';
  width: 26px; height: 2px;
  background: var(--muted);
  opacity: .4;
  margin-right: 2px;
}
.etapes span {
  display: inline-grid;
  place-content: center;
  width: 26px; height: 26px;
  border: 2px solid currentColor;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
}
.etapes li[aria-current="step"] { color: var(--ink); font-weight: 600; }
.etapes li[aria-current="step"] span { background: var(--ink); color: var(--paper); }
.etapes li.faite { color: var(--ink); }
.etapes li.faite span::after { content: '✓'; }
.etapes li.faite span { font-size: 0; }

/* L'adresse retenue, relisible d'un coup d'œil à l'étape du paiement */
.adresse-retenue {
  border: 2px solid var(--ink);
  border-radius: var(--wonky-md);
  background: #fff;
  padding: 16px 18px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}
.adresse-retenue p { margin: 0; font-size: 15px; line-height: 1.6; }
.adresse-retenue .muet { color: var(--muted); font-size: 14px; }
.lien-modifier {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px;
  flex: none;
}
.lien-modifier:hover { color: var(--accent); }

#vers-paiement { margin-top: 18px; }