/* TechBazar — styles du thème. Mobile d'abord : les règles de base visent le téléphone, les @media élargissent. */

:root {
  --papier: #f3f4f1;
  --blanc: #ffffff;
  --encre: #212530;
  --gris: #56616b;
  --trait: #cdd2cc;
  /* Couleurs de la marque : encre et orange. L'orange ne passe pas en texte sur fond clair
     (contraste 2,5:1) : en aplat, sur fond encre, ou en version foncée pour les tracés. */
  --orange: #f47a00;
  --orange-fonce: #c45f00;

  --police: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --gouttiere: 20px;
  --mesure: 34rem;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--police);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-stretch: 100%;
}

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

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--encre);
  outline-offset: 3px;
}

h1, h2, h3 {
  margin: 0;
  font-stretch: 112%;
  font-weight: 760;
  line-height: 1.08;
  letter-spacing: -0.015em;
}

h1 { font-size: clamp(2rem, 6.4vw, 3.6rem); }
h2 { font-size: clamp(1.55rem, 4.2vw, 2.4rem); }
h3 { font-size: 1.2rem; line-height: 1.2; }

p { margin: 0; }

.enveloppe {
  width: 100%;
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 var(--gouttiere);
}

.discret { color: var(--gris); }

/* ---------- En-tête ---------- */

.entete {
  border-bottom: 1px solid var(--trait);
  background: var(--papier);
}

.entete .enveloppe {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 64px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-right: auto;
}

.logo img { width: auto; height: 26px; }

.logo-signature {
  display: none;
  font-size: 0.85rem;
  color: var(--gris);
  border-left: 1px solid var(--trait);
  padding-left: 10px;
}

/* Mobile : le menu s'ouvre au-dessus de la barre du bas, sous le pouce, en lignes faciles à toucher.
   À partir de 760 px, les liens reviennent en ligne dans l'en-tête et la barre du bas disparaît. */
.nav {
  display: none;
  position: fixed;
  inset: auto 0 calc(var(--hauteur-barre) + env(safe-area-inset-bottom)) 0;
  z-index: 30;
  flex-direction: column;
  background: var(--papier);
  border-top: 1px solid var(--encre);
  box-shadow: 0 -12px 24px rgba(33, 37, 48, 0.12);
  font-size: 1.05rem;
}

.nav.ouvert { display: flex; }

.nav a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 var(--gouttiere);
  border-top: 1px solid var(--trait);
  text-decoration: none;
}

.nav a:first-child { border-top: 0; }

/* Barre du bas : les cinq gestes du client, à portée de pouce. */
:root { --hauteur-barre: 62px; }

body { padding-bottom: calc(var(--hauteur-barre) + env(safe-area-inset-bottom)); }

.barre-mobile {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  height: calc(var(--hauteur-barre) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--blanc);
  border-top: 1px solid var(--trait);
}

.barre-mobile a,
.barre-mobile button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 0;
  background: none;
  color: var(--gris);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.barre-mobile svg { width: 23px; height: 23px; }

.barre-mobile [aria-current="page"],
.barre-mobile [aria-expanded="true"] { color: var(--encre); }

.barre-mobile [aria-current="page"] svg { stroke-width: 2.25; }

/* Commander au centre : la pastille orange, l'action principale. */
.barre-commander { color: var(--encre) !important; }

.barre-commander svg {
  box-sizing: content-box;
  padding: 9px;
  margin-top: -18px;
  border: 3px solid var(--blanc);
  border-radius: 50%;
  background: var(--orange);
}

/* Fiche produit : pas de barre, le bandeau prix + Commander tient le bas de l'écran. */
.single-product { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

.lien-icone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-size: 0.95rem;
}

.lien-icone svg { width: 22px; height: 22px; }

.compteur-panier {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--encre);
  color: var(--papier);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

@media (min-width: 760px) {
  .logo-signature { display: inline; }
  .nav {
    display: flex;
    position: static;
    flex-direction: row;
    gap: 22px;
    background: none;
    border: 0;
    box-shadow: none;
    font-size: 0.95rem;
  }
  .nav a { min-height: 0; padding: 0; border: 0; }
  .nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
  .barre-mobile { display: none; }
  body, .single-product { padding-bottom: 0; }
}

/* ---------- Boutons ---------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 22px;
  border: 2px solid var(--encre);
  border-radius: 4px;
  background: transparent;
  color: var(--encre);
  font: inherit;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
}

.bouton svg { width: 22px; height: 22px; flex: none; }

.bouton:hover { background: var(--encre); color: var(--papier); }

.bouton-whatsapp {
  border-color: var(--orange);
  background: var(--orange);
  color: var(--encre);
}

.bouton-whatsapp:hover {
  border-color: var(--encre);
  background: var(--encre);
  color: var(--papier);
}

.bouton[aria-live] { transition: background-color 0.2s, color 0.2s; }

/* ---------- Accueil : ouverture ---------- */

/* Mobile : la photo au-dessus, cadrée sur la main et la souris, le texte dessous.
   Desktop : deux colonnes, le texte sur le fond papier, la photo à droite jusqu'au bord. */
.ouverture { display: grid; }

.ouverture-photo {
  width: 100%;
  /* 2:1 sur mobile : avec la barre du bas, le bouton doit tenir dans le premier écran d'un iPhone SE. */
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: 72% 62%;
}

.ouverture-texte { max-width: var(--mesure); padding: 28px 0 44px; }
.ouverture-texte h1 { margin-bottom: 14px; }
.ouverture-texte p { font-size: 1.125rem; margin-bottom: 26px; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; }

.ouverture-points {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  font-size: 0.95rem;
  font-weight: 600;
}

.ouverture-points li { border-left: 3px solid var(--orange); padding-left: 8px; }

@media (min-width: 960px) {
  .ouverture {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    min-height: min(78vh, 720px);
  }
  .ouverture-photo { order: 2; height: 100%; aspect-ratio: auto; object-position: 70% center; }
  .ouverture .enveloppe {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 48px;
  }
  .ouverture-texte { max-width: 30rem; padding: 56px 0; }
}

/* ---------- Accueil : pourquoi l'angle (rapporteur) ---------- */

.pourquoi { display: grid; gap: 8px; }

@media (min-width: 960px) {
  .pourquoi { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: start; }
}

.rapporteur {
  background: var(--encre);
  color: var(--papier);
  border-top: 4px solid var(--orange);
  padding: 20px 20px 24px;
}

.rapporteur-lecture {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-height: 3.4rem;
}

.rapporteur-angle {
  font-stretch: 125%;
  font-weight: 800;
  font-size: clamp(2.8rem, 9vw, 4.2rem);
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--orange);
}

.rapporteur-nom { font-weight: 650; font-size: 1.05rem; }

.rapporteur svg {
  display: block;
  width: 100%;
  height: auto;
  margin: 8px 0 12px;
  overflow: visible;
}

.rapporteur .graduation { stroke: rgba(243, 244, 241, 0.3); stroke-width: 1.5; }
.rapporteur .graduation-forte { stroke: var(--papier); stroke-width: 2; }
.rapporteur .chiffre { font: 600 12px var(--police); fill: #b4bac4; }
.rapporteur .bureau { stroke: var(--papier); stroke-width: 2; }
.rapporteur .secteur { fill: rgba(244, 122, 0, 0.15); }
.rapporteur .fantome { fill: none; stroke: #8b919c; stroke-width: 1.5; stroke-dasharray: 4 5; }
.rapporteur .main-forme { fill: var(--papier); }
.rapporteur .main-pouce { fill: var(--papier); }
.rapporteur .rayon { stroke: var(--orange); stroke-width: 2.5; }

.rapporteur-texte { min-height: 4.8em; color: #c9ced6; max-width: 32rem; }

.selecteur {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 2px solid var(--papier);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 18px;
}

.selecteur button {
  min-height: 56px;
  padding: 6px 4px;
  border: 0;
  border-left: 2px solid var(--papier);
  background: transparent;
  color: var(--papier);
  font: inherit;
  font-size: 0.85rem;
  line-height: 1.2;
  cursor: pointer;
}

.selecteur button:first-child { border-left: 0; }
.selecteur button strong { display: block; font-stretch: 120%; font-size: 1.1rem; }
.selecteur button[aria-pressed="true"] { background: var(--orange); color: var(--encre); }

/* ---------- Sections ---------- */

.section { padding: 64px 0; border-top: 1px solid var(--trait); }
.section-tete { max-width: var(--mesure); margin-bottom: 36px; }
.section-tete p { margin-top: 14px; color: var(--gris); }

@media (min-width: 960px) {
  .section { padding: 96px 0; }
}

/* Comparatif des deux souris : un tableau, parce que c'est une comparaison. */

.comparatif {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--blanc);
  border-top: 3px solid var(--encre);
}

.comparatif-col { display: flex; flex-direction: column; padding: 18px 14px 22px; }
.comparatif-col + .comparatif-col { border-left: 1px solid var(--trait); }

.comparatif-col img {
  aspect-ratio: 1;
  object-fit: contain;
  width: 100%;
  margin-bottom: 14px;
}

.comparatif-angle {
  font-stretch: 125%;
  font-weight: 800;
  font-size: clamp(2.2rem, 7vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--encre);
  border-bottom: 4px solid var(--orange);
  width: max-content;
  padding-bottom: 4px;
}

.comparatif-col h3 { margin: 6px 0 10px; }
.comparatif-col h3 a { text-decoration: none; }
.comparatif-col h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }

.comparatif dl { margin: 16px 0 18px; font-size: 0.95rem; }
.comparatif dt { color: var(--gris); font-size: 0.85rem; }
.comparatif dd { margin: 0 0 10px; }

.prix { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.prix-actuel { font-weight: 750; font-size: 1.35rem; font-stretch: 110%; }
.prix-barre { color: var(--gris); text-decoration: line-through; }

.comparatif .bouton { width: 100%; margin-top: auto; padding: 0 12px; }
.comparatif dl { flex: 1; }

@media (min-width: 760px) {
  .comparatif-col { padding: 28px 32px 32px; }
  .comparatif-col img { max-width: 340px; }
}

/* Repose-poignets : liste sobre, pas de carte. */

.complements {
  display: grid;
  gap: 32px;
}

.complements-image { background: var(--blanc); max-width: 300px; }

.complements ul { list-style: none; margin: 0; padding: 0; }

.complements li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--trait);
}

.complements li:first-child { border-top: 1px solid var(--encre); }
.complements li p { grid-column: 1 / -1; color: var(--gris); font-size: 0.95rem; }
.complements .lien-commande { color: var(--encre); font-weight: 650; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }

@media (min-width: 960px) {
  .complements { grid-template-columns: 4fr 5fr; gap: 64px; align-items: start; }
}

/* Étapes de commande : une vraie séquence, donc numérotée. */

.etapes {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: etape;
  display: grid;
  gap: 28px;
  max-width: 62rem;
}

.etapes li {
  counter-increment: etape;
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 4px 12px;
}

.etapes li::before {
  content: counter(etape);
  grid-row: span 2;
  font-stretch: 125%;
  font-weight: 800;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--encre);
}

.etapes p { color: var(--gris); }

@media (min-width: 960px) {
  .etapes { grid-template-columns: repeat(3, 1fr); gap: 40px; }
}

/* Garanties */

.garanties {
  display: grid;
  gap: 24px;
}

.garantie {
  border-left: 4px solid var(--orange);
  padding-left: 18px;
}

.garantie h3 { margin-bottom: 8px; }
.garantie p { color: var(--gris); max-width: 28rem; }

@media (min-width: 760px) {
  .garanties { grid-template-columns: repeat(3, 1fr); gap: 36px; }
}

/* Questions */

.questions { max-width: 48rem; }

.questions details { border-bottom: 1px solid var(--trait); }
.questions details:first-of-type { border-top: 1px solid var(--encre); }

.questions summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}

.questions summary::-webkit-details-marker { display: none; }

.questions summary svg { width: 20px; height: 20px; flex: none; transition: transform 0.2s; }
.questions details[open] summary svg { transform: rotate(45deg); }
.questions details p { padding: 0 0 20px; color: var(--gris); max-width: var(--mesure); }

/* ---------- Pied de page ---------- */

.pied {
  background: var(--blanc);
  border-top: 4px solid var(--orange);
  padding: 48px 0 96px;
  font-size: 0.95rem;
}

.pied .enveloppe { display: grid; gap: 28px; }
.pied p { color: var(--gris); max-width: 24rem; margin-top: 10px; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

@media (min-width: 760px) {
  .pied .enveloppe { grid-template-columns: 2fr 1fr 1fr; }
  .pied { padding-bottom: 48px; }
}

/* ---------- Fiche produit ---------- */

.fil {
  padding: 18px 0 0;
  font-size: 0.9rem;
  color: var(--gris);
}

.fil a { text-decoration: none; }
.fil a:hover { text-decoration: underline; }

.fiche {
  display: grid;
  gap: 28px;
  padding: 18px 0 56px;
}

@media (min-width: 960px) {
  .fiche {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 56px;
    padding: 28px 0 88px;
    align-items: start;
  }
  .fiche-infos { position: sticky; top: 24px; }
}

.galerie-principale {
  background: var(--blanc);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.galerie-principale img { max-height: 100%; object-fit: contain; }

.galerie-vignettes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 8px;
}

.galerie-vignettes button {
  padding: 0;
  border: 2px solid transparent;
  background: var(--blanc);
  aspect-ratio: 1;
  cursor: pointer;
}

.galerie-vignettes button[aria-pressed="true"] { border-color: var(--encre); }
.galerie-vignettes img { width: 100%; height: 100%; object-fit: contain; }

.fiche-infos h1 { font-size: clamp(1.7rem, 4.4vw, 2.5rem); margin-bottom: 18px; }

.modeles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 2px solid var(--encre);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 20px;
}

.modeles a {
  display: block;
  padding: 10px 14px;
  text-decoration: none;
  line-height: 1.25;
}

.modeles a + a { border-left: 2px solid var(--encre); }
.modeles a strong { display: block; font-stretch: 120%; font-size: 1.15rem; }
.modeles a span { font-size: 0.85rem; }
.modeles a[aria-current="page"] { background: var(--encre); color: var(--papier); }

.fiche-accroche { margin: 18px 0 20px; }

.stock {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  margin-bottom: 18px;
}

.stock::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--orange);
}

.achat { display: grid; gap: 10px; }

.quantite {
  display: inline-grid;
  grid-template-columns: 48px 48px 48px;
  border: 2px solid var(--encre);
  border-radius: 4px;
  width: max-content;
}

.quantite button {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 1.3rem;
  cursor: pointer;
}

.quantite output {
  display: grid;
  place-items: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.achat .bouton { width: 100%; }

.rassurance {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  font-size: 0.95rem;
}

.rassurance li {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--trait);
}

.rassurance svg { width: 20px; height: 20px; flex: none; color: var(--encre); margin-top: 2px; }

/* Bandeau d'achat collé en bas, sur mobile, quand le bouton principal sort de l'écran. */

.bandeau-achat {
  position: fixed;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px var(--gouttiere) calc(10px + env(safe-area-inset-bottom));
  background: var(--papier);
  border-top: 1px solid var(--trait);
  transform: translateY(110%);
  transition: transform 0.25s ease-out;
}

.bandeau-achat.visible { transform: none; }
.bandeau-achat .prix-actuel { font-size: 1.15rem; }
.bandeau-achat .prix-barre { display: none; }
.bandeau-texte { font-size: 0.85rem; line-height: 1.25; }
.bandeau-texte strong { font-size: 1.05rem; }
.bandeau-achat .bouton { flex: 1; min-height: 48px; }

@media (min-width: 960px) {
  .bandeau-achat { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bandeau-achat { transition: none; }
}

/* Corps de la fiche */

.benefices {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  max-width: 48rem;
}

.benefices li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 18px 0;
  border-bottom: 1px solid var(--trait);
}

.benefices li:first-child { border-top: 1px solid var(--encre); }
.benefices strong { font-weight: 650; }
.benefices span { color: var(--gris); }

@media (min-width: 760px) {
  .benefices li { grid-template-columns: 16rem 1fr; gap: 24px; }
}

.choix {
  display: grid;
  gap: 28px;
  align-items: center;
}

.choix svg { max-width: 420px; width: 100%; height: auto; }
.choix .graduation { stroke: var(--trait); stroke-width: 1.5; }
.choix .bureau { stroke: var(--encre); stroke-width: 2; }
.choix .chiffre { font: 600 12px var(--police); fill: var(--gris); }
.choix .rayon-s44 { stroke: var(--orange-fonce); stroke-width: 3; }
.choix .rayon-l57 { stroke: var(--encre); stroke-width: 3; stroke-dasharray: 7 6; }
.choix .etiquette { font: 700 14px var(--police); }

.choix p + p { margin-top: 14px; }
.choix-texte { max-width: var(--mesure); }

@media (min-width: 960px) {
  .choix { grid-template-columns: 1fr 1fr; gap: 64px; }
}

.caracteristiques {
  display: grid;
  grid-template-columns: 1fr;
  margin: 0;
  max-width: 48rem;
  border-top: 1px solid var(--encre);
}

.caracteristiques div {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--trait);
}

.caracteristiques dt { color: var(--gris); }
.caracteristiques dd { margin: 0; }

.avec {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 20px;
  align-items: center;
  max-width: 40rem;
  background: var(--blanc);
  padding: 16px;
}

.avec h3 { margin-bottom: 6px; }
.avec .bouton { margin-top: 12px; min-height: 44px; }

/* ---------- Thème WordPress : compléments à la maquette ---------- */

.lecteur,
.lien-evitement:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.lien-evitement:focus {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 20;
  padding: 10px 14px;
  background: var(--encre);
  color: var(--papier);
}

/* wp_nav_menu produit des <li> : on les efface pour que les liens restent les enfants du menu. */
.nav li { display: contents; }

.comparatif-col > a { display: block; }

.stock-epuise::before { background: var(--gris); }

/* Choix de la couleur, en boutons larges faciles à toucher. */
.couleurs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 6px;
  padding: 0;
  border: 0;
}

.couleurs legend { font-weight: 650; margin-bottom: 8px; }

.couleurs label { position: relative; }

.couleurs input {
  position: absolute;
  opacity: 0;
  inset: 0;
}

.couleurs span {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 20px;
  border: 2px solid var(--trait);
  border-radius: 4px;
  cursor: pointer;
}

.couleurs input:checked + span { border-color: var(--encre); background: var(--encre); color: var(--papier); }
.couleurs input:focus-visible + span { outline: 3px solid var(--encre); outline-offset: 3px; }

.quantite input {
  width: 48px;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 700;
  text-align: center;
  -moz-appearance: textfield;
}

.quantite input::-webkit-outer-spin-button,
.quantite input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.galerie-principale img { width: 100%; height: 100%; object-fit: contain; }

/* Description saisie dans WooCommerce : même rendu que la liste « ce que ça change ». */
.contenu-fiche { max-width: 48rem; }
.contenu-fiche p { color: var(--gris); margin-bottom: 16px; }
.contenu-fiche ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--encre); }
.contenu-fiche li { padding: 14px 0; border-bottom: 1px solid var(--trait); }

/* Boutique */
.boutique-tete { padding-top: 28px; }

.boutique {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px 14px;
  list-style: none;
  margin: 0 0 64px;
  padding: 0;
}

.boutique-produit a { display: block; text-decoration: none; }
.boutique-produit img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--blanc); margin-bottom: 10px; }
.boutique-produit h2 { font-size: 1.05rem; line-height: 1.25; margin-bottom: 6px; }
.boutique-produit p { color: var(--gris); font-size: 0.9rem; margin-top: 6px; }

@media (min-width: 760px) {
  .boutique { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
}

/* Pages simples (panier, paiement, mon compte) : on laisse WooCommerce faire, avec nos marges. */
.page-simple { padding: 32px var(--gouttiere) 72px; }
.page-simple h1 { margin-bottom: 24px; }

/* Messages WooCommerce (ajout au panier, erreurs). */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  list-style: none;
  margin: 16px 0 0;
  padding: 14px 16px;
  border-left: 4px solid var(--orange);
  background: var(--blanc);
}

.woocommerce-message .button { margin-left: 12px; font-weight: 650; }

/* Panier (bloc WooCommerce) sur petit écran : le prix est déjà sous le nom du produit,
   la colonne des totaux débordait de l'écran. */
@media (max-width: 480px) {
  .wc-block-cart-items .wc-block-cart-item__total { display: none; }
  .wc-block-cart-items .wc-block-cart-item__wrap { padding-right: 0; }
}

/* ---------- Formulaire de commande (fiche produit) ---------- */

.commande { scroll-margin-top: 16px; }
.commande:focus { outline: none; }

.achat .champ { display: grid; gap: 6px; }

.achat label,
.etiquette-champ { font-weight: 650; font-size: 0.95rem; }

.achat input[type="text"],
.achat input[type="tel"],
.achat select {
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  border: 2px solid var(--trait);
  border-radius: 4px;
  background: var(--blanc);
  color: var(--encre);
  font: inherit;
  font-size: 1.05rem; /* 16 px minimum : iOS ne zoome pas sur le champ */
}

.achat input:focus,
.achat select:focus { border-color: var(--encre); outline: none; }

.achat input:user-invalid,
.achat select:user-invalid { border-color: #b3261e; }

.option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 2px dashed var(--orange);
  border-radius: 4px;
  background: var(--blanc);
  cursor: pointer;
}

.option input { width: 22px; height: 22px; accent-color: var(--encre); flex: none; }
.option span { font-weight: 500 !important; }

.bouton-commande {
  border-color: var(--orange);
  background: var(--orange);
  color: var(--encre);
  font-size: 1.05rem;
}

.bouton-commande:hover { border-color: var(--encre); background: var(--encre); color: var(--papier); }
.bouton-commande[aria-busy="true"] { opacity: 0.6; cursor: progress; }

.commande-note { font-size: 0.9rem; color: var(--gris); text-align: center; }

.commande-erreur {
  padding: 12px 14px;
  border-left: 4px solid #b3261e;
  background: #fbeaea;
  color: #7a1b16;
  font-weight: 600;
}

.commande-whatsapp { margin-top: 14px; font-size: 0.95rem; color: var(--gris); }

.lien-whatsapp { color: var(--encre); font-weight: 650; text-underline-offset: 4px; }
.lien-whatsapp svg { display: none; }

.commande-confirmee {
  padding: 20px;
  border-top: 4px solid var(--orange);
  background: var(--blanc);
}

.commande-confirmee h2 { font-size: 1.35rem; margin-bottom: 10px; }
.commande-confirmee p { color: var(--gris); margin-bottom: 16px; }

[hidden] { display: none !important; }