/* ==========================================================================
   TREZ® — feuille de style unique
   Mobile d'abord. Aucun framework, aucune compilation.
   ========================================================================== */

:root {
  --noir: #000000;
  --blanc: #ffffff;
  --gris-900: #0a0a0a;
  --gris-800: #141414;
  --gris-700: #1f1f1f;
  --gris-500: #6b6b6b;
  --gris-300: #b4b4b4;
  --bordure: rgba(255, 255, 255, 0.14);
  --bordure-forte: rgba(255, 255, 255, 0.3);

  --largeur: 1180px;
  /* Gouttière fluide : 16 px sur un petit téléphone, 40 px sur un grand écran. */
  --gouttiere: clamp(16px, 4vw, 40px);
  --radius: 14px;

  --display: "Anton", "Arial Narrow", Impact, sans-serif;
  --texte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --transition: 0.25s ease;
}

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

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

body {
  margin: 0;
  background: var(--noir);
  color: var(--blanc);
  font-family: var(--texte);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* L'attribut « hidden » doit toujours l'emporter.
   Sans cette règle, tout élément ayant un display explicite (une carte
   produit en display:flex, par exemple) reste affiché malgré hidden :
   c'est exactement ce qui empêchait le filtre de la collection de masquer
   les pièces des autres rayons. */
[hidden] {
  display: none !important;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.95;
  margin: 0;
}

/* Masque visuellement sans masquer aux lecteurs d'écran. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 var(--gouttiere);
}

/* --------------------------------------------------------------------------
   Marque : le 13
   -------------------------------------------------------------------------- */

.marque {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.marque__badge {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--bordure-forte);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  font-family: var(--display);
  font-size: 18px;
  line-height: 1;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.marque__mot {
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.marque__mot sup {
  font-size: 0.5em;
  letter-spacing: normal;
}

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

.entete {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  transition: background var(--transition), border-color var(--transition);
  border-bottom: 1px solid transparent;
}

.entete--pose {
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--bordure);
}

.entete__interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 68px;
}

.nav {
  display: none;
}

.nav__lien {
  position: relative;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gris-300);
  transition: color var(--transition);
}

.nav__lien:hover,
.nav__lien:focus-visible {
  color: var(--blanc);
}

.nav__lien[aria-current="page"] {
  color: var(--blanc);
}

.nav__lien[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: var(--blanc);
}

/* Bouton hamburger : visible uniquement sur mobile. */
.burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--bordure);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--blanc);
  cursor: pointer;
}

.burger__barres,
.burger__barres::before,
.burger__barres::after {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--transition), opacity var(--transition);
}

.burger__barres::before,
.burger__barres::after {
  content: "";
  position: absolute;
}

.burger__barres::before {
  transform: translateY(-6px);
}

.burger__barres::after {
  transform: translateY(6px);
}

.burger[aria-expanded="true"] .burger__barres {
  background: transparent;
}

.burger[aria-expanded="true"] .burger__barres::before {
  transform: rotate(45deg);
}

.burger[aria-expanded="true"] .burger__barres::after {
  transform: rotate(-45deg);
}

/* Menu mobile plein écran. */
.menu-mobile {
  position: fixed;
  inset: 68px 0 0 0;
  z-index: 49;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px var(--gouttiere) 40px;
  background: rgba(0, 0, 0, 0.97);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), transform var(--transition),
    visibility var(--transition);
}

.menu-mobile[data-ouvert="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.menu-mobile a {
  padding: 18px 0;
  border-bottom: 1px solid var(--bordure);
  font-family: var(--display);
  font-size: 28px;
  text-transform: uppercase;
}

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

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--texte);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
    border-color var(--transition), transform var(--transition);
}

.bouton:active {
  transform: translateY(1px);
}

.bouton--plein {
  background: var(--blanc);
  color: var(--noir);
}

.bouton--plein:hover {
  background: var(--gris-300);
}

.bouton--fantome {
  border-color: var(--bordure-forte);
  background: rgba(255, 255, 255, 0.06);
  color: var(--blanc);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.bouton--fantome:hover {
  background: rgba(255, 255, 255, 0.16);
}

.bouton--petit {
  min-height: 42px;
  padding: 0 16px;
  font-size: 13px;
}

/* Anneau de focus visible au clavier, sur toute la page. */
a:focus-visible,
button:focus-visible,
.bouton:focus-visible {
  outline: 2px solid var(--blanc);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Héros (page d'accueil)
   -------------------------------------------------------------------------- */

.heros {
  position: relative;
  min-height: 100svh;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--noir);
}

/* Repli CSS : visible tant que le shader WebGL n'a pas pris la main. */
.heros__repli {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 20% 25%, rgba(255, 255, 255, 0.16), transparent 70%),
    radial-gradient(50% 45% at 80% 30%, rgba(255, 255, 255, 0.1), transparent 70%),
    radial-gradient(70% 60% at 50% 90%, rgba(255, 255, 255, 0.07), transparent 70%),
    var(--noir);
  animation: derive 18s ease-in-out infinite alternate;
}

@keyframes derive {
  from {
    transform: scale(1) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.12) translate3d(0, -2%, 0);
  }
}

.heros__toile {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.heros__toile[data-pret="true"] {
  opacity: 1;
}

.heros__voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.72),
    rgba(0, 0, 0, 0.42) 45%,
    rgba(0, 0, 0, 0.86)
  );
}

.heros__contenu {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 120px var(--gouttiere) 80px;
  text-align: center;
}

.pastille {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--bordure-forte);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 13px;
  font-weight: 500;
}

.heros__titre {
  margin: 22px 0 0;
  font-size: clamp(44px, 13vw, 128px);
}

/* Animation lettre par lettre (remplace framer-motion). */
.lettre {
  display: inline-block;
  opacity: 0;
  transform: translateY(28px);
  animation: monte 0.5s ease forwards;
}

@keyframes monte {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.heros__texte {
  margin: 22px auto 0;
  max-width: 560px;
  color: var(--gris-300);
  font-size: clamp(16px, 4vw, 19px);
}

.heros__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 32px;
}

.heros__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.heros__fleche {
  position: absolute;
  left: 50%;
  bottom: 24px;
  z-index: 2;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.5);
  animation: flotte 2.4s ease-in-out infinite;
}

@keyframes flotte {
  0%,
  100% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-50%, 8px);
  }
}

/* --------------------------------------------------------------------------
   En-tête des pages intérieures
   -------------------------------------------------------------------------- */

.page-entete {
  position: relative;
  padding: 140px 0 56px;
  border-bottom: 1px solid var(--bordure);
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(255, 255, 255, 0.12), transparent 70%),
    var(--noir);
}

.page-entete h1 {
  font-size: clamp(38px, 11vw, 82px);
}

.page-entete p {
  max-width: 560px;
  margin: 16px 0 0;
  color: var(--gris-300);
}

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

.section {
  padding: 72px 0;
}

.section--bordee {
  border-top: 1px solid var(--bordure);
}

.section__entete {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}

.section__titre {
  font-size: clamp(30px, 8vw, 54px);
}

.section__intro {
  max-width: 540px;
  margin: 0;
  color: var(--gris-300);
}

.surtitre {
  margin: 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Grille produits
   -------------------------------------------------------------------------- */

.grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.produit {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  background: var(--gris-900);
  overflow: hidden;
  transition: border-color var(--transition), transform var(--transition);
}

.produit:hover {
  border-color: var(--bordure-forte);
  transform: translateY(-3px);
}

.produit__media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--gris-800);
  overflow: hidden;
}

.produit__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Photos studio de la marque : couleur conservée, c'est tout l'intérêt
     quand le client choisit un coloris. */
  transition: transform 0.5s ease;
}

.produit:hover .produit__media img {
  transform: scale(1.04);
}

.produit__etiquette {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.produit__corps {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
}

.produit__nom {
  font-size: 15px;
  font-weight: 600;
}

.produit__prix {
  color: var(--gris-300);
  font-size: 14px;
}

.produit__note {
  margin: 4px 0 0;
  color: var(--gris-500);
  font-size: 12px;
}

/* Filtres de la collection. */
.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}

.filtre {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--bordure);
  border-radius: 999px;
  background: transparent;
  color: var(--gris-300);
  font-family: var(--texte);
  font-size: 13px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all var(--transition);
}

.filtre[aria-pressed="true"] {
  border-color: var(--blanc);
  background: var(--blanc);
  color: var(--noir);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Cartes (boutiques, arguments, contact)
   -------------------------------------------------------------------------- */

.cartes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.carte {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  background: var(--gris-900);
  overflow: hidden;
}

.carte__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--gris-800);
}

/* L'image est positionnée en absolu, sinon sa hauteur en pourcentage et le
   ratio du cadre se renvoient la balle : le cadre finit par prendre la
   hauteur naturelle de la photo au lieu du format demandé. Invisible tant
   que la photo avait déjà le bon format, flagrant avec une photo verticale. */
.carte__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carte__corps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
}

.carte__titre {
  font-size: 26px;
}

.carte__ligne {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--gris-300);
  font-size: 15px;
}

.carte__ligne svg {
  flex: none;
  margin-top: 3px;
}

.carte__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

/* Champ laissé à compléter par la marque : visiblement provisoire. */
.a-completer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border: 1px dashed var(--bordure-forte);
  border-radius: 6px;
  color: var(--gris-500);
  font-size: 12px;
  font-style: italic;
}

/* --------------------------------------------------------------------------
   Bande d'arguments
   -------------------------------------------------------------------------- */

.arguments {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bordure);
}

.argument {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 22px;
  background: var(--gris-900);
}

.argument__titre {
  font-size: 22px;
}

.argument p {
  margin: 0;
  color: var(--gris-300);
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   Bande d'appel
   -------------------------------------------------------------------------- */

.bande {
  position: relative;
  padding: 64px 0;
  border-top: 1px solid var(--bordure);
  background:
    radial-gradient(60% 120% at 50% 0%, rgba(255, 255, 255, 0.12), transparent 70%),
    var(--noir);
  text-align: center;
}

.bande h2 {
  font-size: clamp(32px, 9vw, 60px);
}

.bande p {
  max-width: 460px;
  margin: 14px auto 26px;
  color: var(--gris-300);
}

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

.pied {
  padding: 48px 0 32px;
  border-top: 1px solid var(--bordure);
  background: var(--noir);
}

.pied__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

.pied__titre {
  margin: 0 0 12px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.pied__liste {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--gris-300);
  font-size: 15px;
}

.pied__liste a:hover,
.pied__bouton:hover {
  color: var(--blanc);
}

.pied__bouton {
  padding: 0;
  border: 0;
  background: none;
  color: var(--gris-300);
  font-family: var(--texte);
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}

.pied__bas {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--bordure);
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
}

/* --------------------------------------------------------------------------
   Contenu éditorial (politique de cookies)
   -------------------------------------------------------------------------- */

.prose {
  max-width: 720px;
}

.prose h2 {
  margin: 44px 0 12px;
  font-size: clamp(24px, 6vw, 34px);
}

.prose p,
.prose li {
  color: var(--gris-300);
}

.prose ul {
  padding-left: 20px;
}

.bloc-info {
  margin: 14px 0;
  padding: 18px;
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  background: var(--gris-900);
}

.bloc-info strong {
  color: var(--blanc);
}

.etiquette-info {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--gris-300);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Bandeau cookies
   -------------------------------------------------------------------------- */

.cookies {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 100;
  padding: 12px;
  transform: translateY(120%);
  transition: transform 0.4s ease;
}

.cookies[data-visible="true"] {
  transform: translateY(0);
}

.cookies__boite {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 18px;
  border: 1px solid var(--bordure);
  border-radius: 18px;
  background: rgba(10, 10, 10, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.cookies__texte {
  margin: 0;
  color: var(--gris-300);
  font-size: 14px;
}

.cookies__texte a {
  color: var(--blanc);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cookies__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Panneau de préférences. */
.panneau {
  position: fixed;
  inset: 0;
  z-index: 101;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}

.panneau[data-ouvert="true"] {
  opacity: 1;
  visibility: visible;
}

.panneau__boite {
  width: 100%;
  max-width: 640px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 24px 20px 28px;
  border: 1px solid var(--bordure);
  border-radius: 18px 18px 0 0;
  background: var(--gris-900);
  transform: translateY(24px);
  transition: transform var(--transition);
}

.panneau[data-ouvert="true"] .panneau__boite {
  transform: translateY(0);
}

.panneau__entete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.panneau__titre {
  margin: 12px 0 6px;
  font-size: 26px;
}

.panneau__intro {
  margin: 0;
  color: var(--gris-300);
  font-size: 14px;
}

.fermer {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--gris-300);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.fermer:hover {
  background: rgba(255, 255, 255, 0.18);
  color: var(--blanc);
}

.categories {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.categorie {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--bordure);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}

.categorie__nom {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
}

.categorie__desc {
  margin: 0;
  color: var(--gris-300);
  font-size: 13px;
}

/* Interrupteur accessible (role="switch"). */
.interrupteur {
  position: relative;
  flex: none;
  width: 46px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--bordure-forte);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.interrupteur::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--blanc);
  transition: transform var(--transition), background var(--transition);
}

.interrupteur[aria-checked="true"] {
  background: var(--blanc);
  border-color: var(--blanc);
}

.interrupteur[aria-checked="true"]::after {
  background: var(--noir);
  transform: translateX(20px);
}

.interrupteur[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.panneau__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* --------------------------------------------------------------------------
   Apparition au défilement
   -------------------------------------------------------------------------- */

/* Sans JavaScript, le contenu reste visible : on ne masque que si la classe
   "js" a été posée par le script en ligne du <head>. */
.js .apparait {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.js .apparait[data-vu="true"] {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Tablette et ordinateur
   -------------------------------------------------------------------------- */

@media (min-width: 640px) {
  .heros__actions {
    flex-direction: row;
    justify-content: center;
  }

  .cookies__actions,
  .panneau__actions {
    flex-direction: row;
    justify-content: flex-end;
  }

  .cookies__boite {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
  }

  .cookies__actions {
    flex: none;
  }

  .grille {
    gap: 16px;
  }

  .cartes {
    grid-template-columns: repeat(2, 1fr);
  }

  .arguments {
    grid-template-columns: repeat(3, 1fr);
  }

  .pied__grille {
    grid-template-columns: 2fr 1fr 1fr;
  }

  .panneau {
    align-items: center;
    padding: 20px;
  }

  .panneau__boite {
    border-radius: 18px;
  }

  .section {
    padding: 96px 0;
  }
}

@media (min-width: 768px) {
  .grille {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 900px) {
  .burger {
    display: none;
  }

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

  .entete__interieur {
    height: 80px;
  }

  .menu-mobile {
    display: none;
  }

  .section__entete {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

/* --------------------------------------------------------------------------
   Accessibilité : mouvement réduit
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .lettre {
    opacity: 1;
    transform: none;
  }

  .apparait {
    opacity: 1;
    transform: none;
  }

  .heros__repli {
    animation: none;
  }
}

/* ==========================================================================
   ÉCRAN DE CHARGEMENT 3D

   Faces opaques et diversement éclairées : le cube se lit comme un objet
   solide. Avec des faces translucides, on voyait au travers et les chiffres
   se superposaient en bouillie.
   ========================================================================== */

.chargement {
  display: none;
}

.js .chargement {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #000;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.chargement[data-fini="true"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.chargement__centre {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(26px, 6vh, 44px);
}

.scene {
  position: relative;
  width: clamp(84px, 22vw, 116px);
  height: clamp(84px, 22vw, 116px);
  perspective: 800px;
}

.cube {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: tourne 4.2s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}

.cube__face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-family: var(--display);
  font-size: clamp(30px, 9vw, 44px);
  line-height: 1;
  color: #fff;
  /* Opaque : on ne voit pas au travers. */
  background: #101010;
}

/* Chaque face reçoit une lumière différente : le volume se lit tout seul. */
.cube__face--devant   { transform: translateZ(var(--demi)); background: #1a1a1a; }
.cube__face--derriere { transform: rotateY(180deg) translateZ(var(--demi)); background: #141414; }
.cube__face--droite   { transform: rotateY(90deg) translateZ(var(--demi)); background: #0b0b0b; color: #d8d8d8; }
.cube__face--gauche   { transform: rotateY(-90deg) translateZ(var(--demi)); background: #0b0b0b; color: #d8d8d8; }
.cube__face--haut     { transform: rotateX(90deg) translateZ(var(--demi)); background: #262626; }
.cube__face--bas      { transform: rotateX(-90deg) translateZ(var(--demi)); background: #050505; }

.scene {
  --demi: clamp(42px, 11vw, 58px);
}

@keyframes tourne {
  0%   { transform: rotateX(-18deg) rotateY(0deg); }
  45%  { transform: rotateX(-18deg) rotateY(90deg); }
  50%  { transform: rotateX(-18deg) rotateY(90deg); }
  95%  { transform: rotateX(-18deg) rotateY(180deg); }
  100% { transform: rotateX(-18deg) rotateY(180deg); }
}

/* Ombre portée au sol : ancre le cube dans l'espace. */
.scene::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -26px;
  width: 78%;
  height: 12px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.16), transparent 70%);
  animation: ombre 4.2s ease-in-out infinite;
}

@keyframes ombre {
  0%, 100% { opacity: 0.5; width: 78%; }
  50%      { opacity: 0.3; width: 62%; }
}

.chargement__marque {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(13px, 3.4vw, 16px);
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  text-transform: uppercase;
  color: #fff;
}

.chargement__piste {
  display: flex;
  align-items: center;
  gap: 14px;
}

.chargement__barre {
  width: clamp(120px, 42vw, 190px);
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}

.chargement__barre span {
  display: block;
  width: 0;
  height: 100%;
  background: #fff;
  transition: width 0.3s linear;
}

.chargement__pourcent {
  min-width: 4ch;
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
}

/* La page n'est volontairement PAS masquée pendant le chargement : l'écran
   noir la recouvre déjà. La masquer retarderait le plus grand affichage de
   contenu (LCP), une mesure que Google prend en compte dans son classement. */

@media (prefers-reduced-motion: reduce) {
  .cube { animation: none; transform: rotateX(-18deg) rotateY(-32deg); }
  .scene::after { animation: none; }
}

/* ==========================================================================
   BOUTIQUE — carte produit, fiche, tunnel de commande
   ========================================================================== */

/* --- Carte de la grille --------------------------------------------------- */

.carte-3d {
  transform-style: preserve-3d;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color var(--transition);
  will-change: transform;
}

.produit__lien {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.produit__voir {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translate(-50%, 14px);
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--noir);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity var(--transition), transform var(--transition);
}

.produit:hover .produit__voir,
.produit__lien:focus-visible .produit__voir {
  opacity: 1;
  transform: translate(-50%, 0);
}

.produit__couleurs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.pastille-couleur {
  width: 13px;
  height: 13px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
}

.produit__couleurs-nb {
  margin-left: 4px;
  color: var(--gris-500);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* --- Page vide / erreur --------------------------------------------------- */

.vide {
  padding: clamp(120px, 22vh, 190px) 0 clamp(80px, 16vh, 140px);
  text-align: center;
}

.vide h1 {
  font-size: clamp(30px, 8vw, 56px);
}

.vide p {
  margin: 14px 0 26px;
  color: var(--gris-300);
}

/* --- Fil d'Ariane --------------------------------------------------------- */

.fil {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: clamp(88px, 14vh, 122px);
  color: var(--gris-500);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.fil a:hover {
  color: var(--blanc);
}

/* ==========================================================================
   FICHE PRODUIT
   ========================================================================== */

.pdp {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  padding: clamp(20px, 4vh, 34px) 0 clamp(50px, 9vh, 84px);
}

/* --- Galerie -------------------------------------------------------------- */

.pdp__galerie,
.pdp__achat,
.tunnel__form,
.tunnel__recap {
  min-width: 0;
}

.pdp__cadre {
  position: relative;
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--gris-800);
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.pdp__cadre img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.pdp__galerie {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.pdp__rail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.pdp__rail::-webkit-scrollbar {
  display: none;
}

.miniature {
  flex: 0 0 auto;
  width: clamp(62px, 17vw, 86px);
  padding: 0;
  border: 1px solid var(--bordure);
  border-radius: 10px;
  background: var(--gris-800);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--transition), opacity var(--transition);
  opacity: 0.6;
}

.miniature img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.miniature:hover {
  opacity: 0.9;
}

.miniature[aria-pressed="true"] {
  border-color: var(--blanc);
  opacity: 1;
}

/* --- Colonne achat -------------------------------------------------------- */

.pdp__marque-ligne {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.pdp__marque-badge {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  background: var(--blanc);
  color: var(--noir);
  font-family: var(--display);
  font-size: 16px;
  line-height: 1;
}

.pdp__marque-nom {
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.pdp__soustitre {
  margin: 0 0 10px;
  color: var(--gris-300);
  font-size: 15px;
}

/* Étoiles : n'apparaissent que si de vrais avis sont renseignés. */
.pdp__avis {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 14px;
}

.etoile {
  color: var(--gris-700);
  font-size: 15px;
}

.etoile--pleine {
  color: #f5c518;
}

.pdp__avis-nb {
  color: var(--gris-300);
  font-size: 13px;
}

.pdp__livraison {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 26px;
  color: var(--gris-300);
  font-size: 14px;
}

.pdp__livraison svg {
  flex: none;
  opacity: 0.8;
}

.pdp__titre {
  margin: 0 0 6px;
  font-size: clamp(28px, 6.4vw, 46px);
}

.pdp__prix {
  margin: 0 0 24px;
  font-family: var(--display);
  font-size: clamp(30px, 7vw, 42px);
}

/* --- Options (couleur, taille, quantité) ---------------------------------- */

.option {
  margin-bottom: 24px;
}

.option__entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.option__label {
  color: var(--gris-300);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.option__valeur {
  color: var(--blanc);
  font-size: 14px;
  font-weight: 600;
}

.option__lien {
  padding: 0;
  border: 0;
  background: none;
  color: var(--gris-300);
  font-family: var(--texte);
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.option__lien:hover {
  color: var(--blanc);
}

.option__note {
  margin: 10px 0 0;
  color: var(--gris-500);
  font-size: 13px;
}

.note-rupture {
  color: var(--blanc);
  font-weight: 600;
}

/* --- Nuancier ------------------------------------------------------------- */

.variantes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.variante {
  position: relative;
  width: clamp(54px, 15vw, 62px);
  padding: 3px;
  border: 1px solid var(--bordure);
  border-radius: 12px;
  background: var(--gris-800);
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--transition), transform var(--transition);
}

.variante img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 9px;
  object-fit: cover;
  object-position: center 30%;
}

.variante__uni {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 9px;
}

.variante:hover {
  transform: translateY(-2px);
}

.variante[aria-pressed="true"] {
  border-color: var(--blanc);
  border-width: 2px;
  padding: 2px;
}

.variante--rupture {
  cursor: not-allowed;
  opacity: 0.5;
}

.variante--rupture::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 50%;
  height: 1.5px;
  background: var(--blanc);
  transform: rotate(-45deg);
}

.nuance {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--bordure);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: border-color var(--transition), transform var(--transition);
}

.nuance:hover {
  transform: scale(1.08);
}

.nuance__puce {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.nuance[aria-pressed="true"] {
  border-color: var(--blanc);
  border-width: 2px;
}

.nuance--rupture {
  cursor: not-allowed;
  opacity: 0.55;
}

.nuance--rupture::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: 50%;
  height: 1.5px;
  background: var(--blanc);
  transform: rotate(-45deg);
}

/* --- Tailles -------------------------------------------------------------- */

.tailles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.taille {
  min-height: 50px;
  padding: 0 8px;
  border: 1px solid var(--bordure);
  border-radius: 10px;
  background: transparent;
  color: var(--gris-300);
  font-family: var(--texte);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}

.taille:hover {
  border-color: var(--bordure-forte);
  color: var(--blanc);
}

.taille[aria-pressed="true"] {
  border-color: var(--blanc);
  background: var(--blanc);
  color: var(--noir);
}

/* --- Quantité ------------------------------------------------------------- */

.quantite {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--bordure);
  border-radius: 10px;
  overflow: hidden;
}

.quantite__bouton {
  width: 48px;
  height: 48px;
  border: 0;
  background: transparent;
  color: var(--blanc);
  font-size: 20px;
  cursor: pointer;
  transition: background var(--transition);
}

.quantite__bouton:hover {
  background: rgba(255, 255, 255, 0.1);
}

.quantite__valeur {
  min-width: 48px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
}

/* --- Actions et réassurance ----------------------------------------------- */

.pdp__actions {
  display: flex;
  gap: 10px;
  margin: 26px 0 18px;
}

.pdp__actions .bouton--large {
  flex: 1 1 auto;
  min-width: 0;
}

.favori {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  flex: none;
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  background: transparent;
  color: var(--blanc);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.favori:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--bordure-forte);
}

.favori[aria-pressed="true"] svg {
  fill: var(--blanc);
}

/* Le prix reste collé au libellé : pas de retour à la ligne disgracieux. */
.pdp__actions .bouton {
  white-space: nowrap;
}

@media (max-width: 400px) {
  .pdp__actions .bouton {
    padding: 0 12px;
    font-size: 14px;
  }
}

.bouton--large {
  width: 100%;
  min-height: 58px;
  font-size: clamp(15px, 3.6vw, 16px);
}

/* --- Accordéons ----------------------------------------------------------- */

.accordeons details {
  border-top: 1px solid var(--bordure);
}

.accordeons details:last-child {
  border-bottom: 1px solid var(--bordure);
}

.accordeons summary {
  padding: 16px 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

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

.accordeons summary::after {
  content: "+";
  float: right;
  color: var(--gris-500);
  font-size: 18px;
  font-weight: 400;
}

.accordeons details[open] summary::after {
  content: "−";
}

.accordeons p,
.accordeons ul {
  margin: 0 0 18px;
  color: var(--gris-300);
  font-size: 15px;
}

.accordeons ul {
  padding-left: 18px;
}

/* --- Suggestions ---------------------------------------------------------- */

.suggestions {
  padding: clamp(44px, 8vh, 80px) 0 clamp(20px, 5vh, 40px);
  border-top: 1px solid var(--bordure);
}

.suggestions__titre {
  margin-bottom: 22px;
  font-size: clamp(24px, 6vw, 38px);
}

.suggestions__grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 2vw, 18px);
}

.suggestion__media {
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--gris-800);
}

.suggestion__media img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.suggestion:hover .suggestion__media img {
  transform: scale(1.05);
}

.suggestion__nom {
  margin: 10px 0 2px;
  font-size: 14px;
  font-weight: 600;
}

.suggestion__prix {
  margin: 0;
  color: var(--gris-300);
  font-size: 13px;
}

/* --- Barre d'achat fixe (mobile) ------------------------------------------ */

.barre-achat {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px var(--gouttiere);
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--bordure);
  background: rgba(0, 0, 0, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform: translateY(110%);
  transition: transform 0.3s ease;
}

.barre-achat[data-visible="true"] {
  transform: translateY(0);
}

.barre-achat__infos {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.barre-achat__nom {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.barre-achat__prix {
  font-family: var(--display);
  font-size: 18px;
}

.barre-achat .bouton {
  flex: none;
  min-height: 46px;
  padding: 0 22px;
}

/* ==========================================================================
   TUNNEL DE COMMANDE
   ========================================================================== */

.tunnel__titre {
  margin-bottom: clamp(20px, 4vh, 30px);
  font-size: clamp(28px, 7vw, 46px);
}

.tunnel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(26px, 4vw, 48px);
  padding: clamp(20px, 4vh, 34px) 0 clamp(60px, 10vh, 100px);
}

.tunnel__recap {
  order: -1;
}

.bloc {
  margin-bottom: 30px;
}

.bloc__entete {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.bloc__numero {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border: 1px solid var(--bordure-forte);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
}

.bloc__titre {
  font-size: clamp(19px, 4.6vw, 24px);
}

.champ {
  margin-bottom: 16px;
}

.champ label {
  display: block;
  margin-bottom: 6px;
  color: var(--gris-300);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.champ input,
.champ textarea {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--bordure);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--blanc);
  font-family: var(--texte);
  font-size: 16px; /* 16 px : empêche iOS de zoomer à la saisie */
  transition: border-color var(--transition), background var(--transition);
}

.champ input:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--blanc);
  background: rgba(255, 255, 255, 0.08);
}

.champ input[aria-invalid="true"] {
  border-color: #ff6b6b;
}

.champ textarea {
  resize: vertical;
}

.champ-duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 14px;
}

.requis {
  color: var(--blanc);
}

.facultatif {
  color: var(--gris-500);
  font-size: 11px;
  letter-spacing: normal;
  text-transform: none;
}

.aide {
  margin: 6px 0 0;
  color: var(--gris-500);
  font-size: 12px;
}

.erreur {
  margin: 6px 0 0;
  color: #ff8c8c;
  font-size: 13px;
}

/* --- Paiement ------------------------------------------------------------- */

.paiement__option {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--blanc);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
}

.paiement__coche {
  position: relative;
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 2px;
  border: 1px solid var(--blanc);
  border-radius: 50%;
}

.paiement__coche::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--blanc);
}

.paiement__nom {
  margin: 0 0 4px;
  font-weight: 600;
}

.paiement__desc {
  margin: 0;
  color: var(--gris-300);
  font-size: 14px;
}

.tunnel__retour {
  display: block;
  margin-top: 16px;
  color: var(--gris-300);
  font-size: 14px;
  text-align: center;
}

.tunnel__retour:hover {
  color: var(--blanc);
}

/* --- Récapitulatif -------------------------------------------------------- */

.recap-carte {
  padding: clamp(18px, 4vw, 24px);
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  background: var(--gris-900);
}

.recap-carte__titre {
  margin-bottom: 18px;
  font-size: 18px;
}

.recap-carte__nb {
  color: var(--gris-500);
  font-family: var(--texte);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

.article {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--bordure);
}

.article:first-child {
  padding-top: 0;
}

/* Réglage de quantité et retrait, directement dans le récapitulatif. */
.article__reglage {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
}

.article__pas {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--bordure);
  border-radius: 7px;
  background: transparent;
  color: var(--blanc);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition);
}

.article__pas:hover {
  background: rgba(255, 255, 255, 0.1);
}

.article__qte {
  min-width: 24px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.article__retirer {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-left: 6px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--gris-500);
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}

.article__retirer:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--blanc);
}

.article__media {
  position: relative;
  width: 66px;
  flex: none;
}

.article__media img {
  width: 100%;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--bordure);
  border-radius: 10px;
  object-fit: cover;
}

.article__badge {
  position: absolute;
  top: -7px;
  right: -7px;
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--blanc);
  color: var(--noir);
  font-size: 12px;
  font-weight: 700;
}

.article__infos {
  flex: 1 1 auto;
  min-width: 0;
}

.article__nom {
  margin: 0 0 3px;
  font-size: 14px;
  font-weight: 600;
}

.article__variante {
  margin: 0;
  color: var(--gris-300);
  font-size: 13px;
}

.article__prix {
  flex: none;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.recap-carte__lignes {
  padding: 16px 0;
  border-bottom: 1px solid var(--bordure);
}

.recap__ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 6px 0;
  color: var(--gris-300);
  font-size: 14px;
}

.recap__ligne small {
  color: var(--gris-500);
}

.recap__ligne--total {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--bordure);
  color: var(--blanc);
  font-size: 16px;
}

.recap__ligne--total strong {
  font-family: var(--display);
  font-size: clamp(22px, 5vw, 26px);
}

.recap-carte__badge {
  margin: 16px 0 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.recap-carte__note {
  margin: 0;
  color: var(--gris-500);
  font-size: 12px;
  text-align: center;
}

/* ==========================================================================
   MODALES (guide des tailles, confirmation)
   ========================================================================== */

.modale {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.84);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.modale[hidden] {
  display: none;
}

.modale__boite {
  width: 100%;
  max-width: 520px;
  max-height: 92vh;
  max-height: 92dvh;
  overflow-y: auto;
  padding: clamp(20px, 5vw, 30px);
  padding-bottom: calc(clamp(20px, 5vw, 30px) + env(safe-area-inset-bottom));
  border: 1px solid var(--bordure);
  border-radius: 20px 20px 0 0;
  background: var(--gris-900);
  outline: none;
  text-align: center;
}

.modale__boite--large {
  max-width: 620px;
}

.modale__titre {
  font-size: clamp(22px, 5.5vw, 30px);
}

.modale__intro {
  margin: 12px 0 18px;
  color: var(--gris-300);
  font-size: 14px;
}

.modale__note {
  margin: 14px 0 18px;
  color: var(--gris-500);
  font-size: 12px;
}

.tableau-enveloppe {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.tableau th,
.tableau td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--bordure);
  text-align: center;
  white-space: nowrap;
}

.tableau th {
  color: var(--gris-300);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.confirmation__coche {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--blanc);
  color: var(--noir);
  font-size: 26px;
  font-weight: 700;
}

.confirmation__recap {
  margin: 0 0 18px;
  padding: 16px;
  border: 1px solid var(--bordure);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--gris-300);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.7;
  text-align: left;
  white-space: pre-wrap;
  word-break: break-word;
}

.confirmation__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ==========================================================================
   RESPONSIVE — du petit téléphone au très grand écran
   ========================================================================== */

/* Très petits téléphones (iPhone SE, Galaxy A0x) : on resserre. */
@media (max-width: 359px) {
  .nuance { width: 40px; height: 40px; }
  .nuance__puce { width: 26px; height: 26px; }
  .taille { min-width: 48px; min-height: 44px; padding: 0 10px; }
  .quantite__bouton { width: 42px; height: 42px; }
  .quantite__valeur { min-width: 40px; }
  .grille { gap: 10px; }
  .barre-achat { gap: 10px; }
  .barre-achat .bouton { padding: 0 16px; font-size: 13px; }
}

/* Téléphones en paysage : le héros ne doit pas forcer un plein écran haut. */
@media (max-height: 520px) and (orientation: landscape) {
  .heros { min-height: 620px; }
  .heros__contenu { padding-top: 96px; padding-bottom: 56px; }
  .heros__meta { margin-top: 26px; }
  .heros__fleche { display: none; }
  .scene { width: 72px; height: 72px; --demi: 36px; }
  .modale__boite { max-height: 96vh; }
}

/* Grands téléphones et petites tablettes. */
@media (min-width: 600px) {
  .champ-duo { grid-template-columns: 1fr 1fr; }
  .confirmation__actions { flex-direction: row; justify-content: center; }
  .modale { align-items: center; padding: 20px; }
  .modale__boite { border-radius: 20px; }
}

/* Tablettes : la fiche produit passe en deux colonnes. */
@media (min-width: 820px) {
  .pdp {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: start;
  }

  .pdp__galerie {
    position: sticky;
    top: 96px;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: start;
  }

  /* Placement explicite : dans le HTML la photo vient avant le rail (c'est
     l'ordre voulu sur mobile), sans quoi la grille mettrait la photo dans la
     colonne de 76 px et le rail dans la grande. */
  .pdp__rail {
    grid-column: 1;
    grid-row: 1;
    flex-direction: column;
    max-height: 560px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .pdp__cadre {
    grid-column: 2;
    grid-row: 1;
  }

  .miniature {
    width: 100%;
  }

  .tunnel {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
    align-items: start;
  }

  .tunnel__recap {
    position: sticky;
    top: 96px;
    order: 0;
  }

  .barre-achat {
    display: none;
  }
}

/* Ordinateurs : la grille passe à quatre colonnes. */
@media (min-width: 1100px) {
  .grille {
    grid-template-columns: repeat(4, 1fr);
  }

  .suggestions__grille {
    gap: 20px;
  }
}

/* Très grands écrans : on élargit plutôt que de laisser des marges vides. */
@media (min-width: 1500px) {
  :root {
    --largeur: 1360px;
  }

  .pdp {
    gap: 72px;
  }
}

@media (min-width: 1900px) {
  :root {
    --largeur: 1520px;
  }

  body {
    font-size: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .carte-3d,
  .pdp__cadre,
  .barre-achat {
    transition: none;
  }
}


/* ==========================================================================
   COMPLÉTER LA COMMANDE — les autres pièces, ajoutables sans quitter la page
   ========================================================================== */

.ajouts {
  padding: clamp(34px, 6vh, 60px) 0 clamp(50px, 9vh, 90px);
  border-top: 1px solid var(--bordure);
}

.ajouts__entete {
  margin-bottom: 22px;
}

.ajouts__titre {
  font-size: clamp(24px, 6vw, 38px);
}

.ajouts__note {
  margin: 8px 0 0;
  color: var(--gris-500);
  font-size: 14px;
}

.ajouts__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.ajout {
  display: flex;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  background: var(--gris-900);
  transition: border-color var(--transition);
}

.ajout:hover {
  border-color: var(--bordure-forte);
}

.ajout__media {
  width: clamp(84px, 24vw, 104px);
  flex: none;
  border-radius: 10px;
  overflow: hidden;
  background: var(--gris-800);
}

.ajout__media img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.ajout:hover .ajout__media img {
  transform: scale(1.04);
}

.ajout__corps {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.ajout__nom {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 600;
}

.ajout__prix {
  margin: 0 0 10px;
  color: var(--gris-300);
  font-size: 14px;
}

.mini-variantes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.mini-variante {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--bordure);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: border-color var(--transition), transform var(--transition);
}

.mini-variante span:first-child {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.mini-variante:hover {
  transform: scale(1.1);
}

.mini-variante[aria-pressed="true"] {
  border-color: var(--blanc);
  border-width: 2px;
}

.ajout__bas {
  display: flex;
  gap: 8px;
  margin-top: auto;
}

.ajout__taille {
  flex: 0 1 96px;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid var(--bordure);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--blanc);
  font-family: var(--texte);
  font-size: 15px;
  cursor: pointer;
}

.ajout__taille:focus {
  outline: none;
  border-color: var(--blanc);
}

.ajout__taille option {
  background: var(--gris-900);
  color: var(--blanc);
}

.ajout__bouton {
  flex: 1 1 auto;
  white-space: nowrap;
}

.ajout__erreur {
  margin-top: 8px;
}

@media (min-width: 700px) {
  .ajouts__grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .ajouts__grille {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ==========================================================================
   PROTECTION DU CONTENU

   La sélection est coupée sur le contenu éditorial mais conservée partout
   où le client en a besoin : sans cette exception, il ne pourrait plus
   corriger son adresse dans le formulaire de commande.
   ========================================================================== */

body {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

input,
textarea,
select,
[contenteditable="true"],
.confirmation__recap {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}

img {
  -webkit-user-drag: none;
  -webkit-touch-callout: none; /* pas de « Enregistrer l'image » sur iPhone */
}

/* ==========================================================================
   CARTE BOUTIQUE CLIQUABLE

   Le lien « Voir l'itinéraire » s'étend sur toute la carte : cliquer
   n'importe où dessus ouvre Google Maps. Les autres liens de la carte
   (téléphone, Instagram) repassent au-dessus pour rester utilisables.
   ========================================================================== */

.carte--lien {
  position: relative;
  cursor: pointer;
}

.carte--lien:hover {
  border-color: var(--bordure-forte);
}

.carte__etendu::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--radius);
}

.carte__tel,
.carte__actions a:not(.carte__etendu) {
  position: relative;
  z-index: 2;
}

.carte__tel {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.carte__tel:hover {
  color: var(--blanc);
}