/* =============================================================================
   site.css - écrans de l'application (boutique, compte, panier, tunnel de commande).

   Mobile d'abord : les règles de base visent le téléphone, puis deux points de
   rupture seulement, 640 px (tablette) et 1024 px (bureau). Aucune ressource
   tierce : polices servies depuis /assets/fonts (licence OFL-Poppins.txt).
   Compatible CSP stricte : aucun style en ligne n'est attendu des gabarits.

   Chargée APRÈS coquille.css, seulement sur les écrans de l'application (jamais sur une
   page capturée). L'en-tête et le pied sont ceux du site actuel (legacy-shell.css) ; leurs
   règles, les polices, les jetons de design, le mini-panier, le tiroir, les flashs, les
   boutons et les champs sont dans coquille.css.

   Sommaire
     3. Base
     4. Gabarit : conteneur, zone principale
     5. Composants : fil d'Ariane, prix, badges de stock, carte produit, grille,
        champ quantité, surface
     7. Compte client : cartes centrées, formulaires, tableau de bord
     7b. Vitrine : boutique, catégories, fiche produit
     7d. Choix du point relais (modale de relais.js)
     7e. Tunnel de commande : frise des étapes, /paiement, page de paiement
     8. Préférences : mouvement réduit
   ========================================================================== */

/* 3. Base ------------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* Tiroir ouvert : la page derrière ne défile plus. */
html:has(dialog[open]) { overflow: hidden; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--couleur-fond);
  color: var(--couleur-texte);
  font-family: var(--police);
  font-size: var(--taille-base);
  font-weight: var(--graisse-normale);
  line-height: var(--interligne);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--espace-3);
  font-weight: var(--graisse-forte);
  line-height: var(--interligne-serre);
  letter-spacing: -0.015em;
  text-wrap: balance;
  color: var(--couleur-texte);
}
h1 { font-size: var(--taille-2xl); letter-spacing: -0.02em; }
h2 { font-size: var(--taille-xl); }
h3 { font-size: var(--taille-lg); }
h4 { font-size: var(--taille-md); }
* + h2, * + h3 { margin-top: var(--espace-6); }

p { margin: 0 0 var(--espace-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--couleur-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { color: var(--couleur-accent-fonce); }

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--couleur-focus);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }


/* 4. Gabarit (l'en-tête et le pied sont capturés : voir coquille.css) ------- */
.conteneur {
  width: 100%;
  max-width: calc(var(--largeur-max) + 2 * var(--gouttiere));
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.principal {
  flex: 1 0 auto;
  padding-block: var(--espace-5) var(--espace-8);
}
.principal:focus { outline: none; }
@media (min-width: 1024px) {
  .principal { padding-block: var(--espace-6) var(--espace-9); }
}




/* 5. Composants ------------------------------------------------------------ */



/* Fil d'Ariane. */
.fil-ariane { margin-bottom: var(--espace-4); font-size: var(--taille-sm); }
.fil-ariane__liste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fil-ariane__miette { display: inline-flex; align-items: center; min-width: 0; }
.fil-ariane a {
  display: inline-flex;
  align-items: center;
  min-height: var(--cible-min);
  color: var(--couleur-texte-attenue);
  text-decoration: none;
}
.fil-ariane a:hover { color: var(--couleur-accent); text-decoration: underline; }
.fil-ariane [aria-current="page"] {
  overflow: hidden;
  color: var(--couleur-texte);
  font-weight: var(--graisse-moyenne);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fil-ariane__separateur { width: 1rem; height: 1rem; margin-inline: var(--espace-1); color: var(--couleur-texte-secondaire); }

/* Prix TTC : .prix (carte) ou .prix--grand (fiche). */
.prix {
  margin: 0;
  color: var(--couleur-texte);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.prix__montant { font-size: var(--taille-md); font-weight: var(--graisse-forte); letter-spacing: -0.01em; }
.prix__mention { color: var(--couleur-texte-attenue); font-size: var(--taille-xs); font-weight: var(--graisse-moyenne); }
.prix--grand .prix__montant { font-size: var(--taille-xl); }
.prix--grand .prix__mention { font-size: var(--taille-sm); }

/* Badge de stock : --dispo (vert), --bas et --commande (orange), --rupture (gris).
   Le point coloré double le libellé, jamais l'inverse. */
.badge-stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 3px 10px 3px 8px;
  border-radius: 12px; /* pilule sur une ligne, reste propre si le libellé passe à la ligne */
  font-size: var(--taille-xs);
  font-weight: var(--graisse-moyenne);
  line-height: 1.4;
}
.badge-stock::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
}
.badge-stock--dispo    { background: var(--couleur-succes-fond); color: var(--couleur-succes); }
.badge-stock--bas,
.badge-stock--commande { background: var(--couleur-alerte-fond); color: var(--couleur-alerte); }
.badge-stock--rupture  { background: var(--couleur-neutre-fond); color: var(--couleur-neutre); }

/* Grille de produits : 2 colonnes, 3 dès 640 px, 4 dès 1024 px. Une <ul> dont
   chaque <li> contient une .carte-produit. */
.grille-produits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espace-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.grille-produits > li { display: flex; min-width: 0; }
@media (min-width: 640px) {
  .grille-produits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espace-5); }
}
@media (min-width: 1024px) {
  .grille-produits { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Carte produit : image carrée, nom (lien étiré sur toute la carte), prix TTC,
   badge, bouton d'ajout au-dessus du lien étiré. */
.carte-produit {
  container-type: inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: var(--espace-2);
  border-radius: var(--rayon-grand);
  background: var(--couleur-surface);
  box-shadow: var(--ombre-1);
  transition: box-shadow var(--duree) var(--courbe-sortie), transform var(--duree) var(--courbe-sortie);
}
.carte-produit__media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: calc(var(--rayon-grand) - var(--espace-2) + 2px);
  background: var(--couleur-fond-alt);
}
.carte-produit__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--courbe-sortie);
}
.carte-produit__sans-image { width: 40%; height: 40%; color: var(--couleur-texte-secondaire); stroke-width: 1.25; }
.carte-produit__corps {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--espace-2);
  padding: var(--espace-3) var(--espace-2) var(--espace-2);
}
.carte-produit__nom {
  margin: 0;
  font-size: var(--taille-sm);
  font-weight: var(--graisse-moyenne);
  line-height: 1.4;
  letter-spacing: 0;
}
.carte-produit__lien {
  color: var(--couleur-texte);
  text-decoration: none;
}
.carte-produit__lien::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--rayon-grand);
}
.carte-produit__lien:focus-visible { outline: none; }
.carte-produit__lien:focus-visible::after { outline: 3px solid var(--couleur-focus); outline-offset: 2px; }
.carte-produit__infos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-2);
  margin-bottom: var(--espace-1);
}
.carte-produit__action { position: relative; z-index: 2; margin-top: auto; }
.carte-produit__action .btn { padding-inline: var(--espace-3); font-size: var(--taille-sm); }
/* Libellé du bouton selon la largeur de la CARTE (requête de conteneur) :
   « Ajouter » sous 220 px, « Ajouter au panier » au-delà. Le libellé long
   reste lu par les lecteurs d'écran dans tous les cas. */
.carte-produit__libelle-long {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
@container (min-width: 220px) {
  .carte-produit__libelle-long { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .carte-produit__libelle-court { display: none; }
}
.carte-produit--rupture .carte-produit__media img { opacity: 0.55; filter: grayscale(0.6); }
@media (hover: hover) {
  .carte-produit:hover { box-shadow: var(--ombre-2); transform: translateY(-2px); }
  .carte-produit:hover .carte-produit__media img { transform: scale(1.04); }
  .carte-produit:hover .carte-produit__lien { color: var(--couleur-accent); }
}
@media (min-width: 640px) {
  .carte-produit { padding: var(--espace-3); }
  .carte-produit__media { border-radius: calc(var(--rayon-grand) - var(--espace-3) + 4px); }
  .carte-produit__corps { padding: var(--espace-4) var(--espace-1) var(--espace-1); }
  .carte-produit__nom { font-size: var(--taille-base); }
}

/* Message d'ajout au panier posé par site.js sous le bouton d'une carte ou
   d'une fiche (role="status" ; .message-ajout--erreur en cas de refus). */
.message-ajout {
  margin: var(--espace-2) 0 0;
  font-size: var(--taille-xs);
  line-height: 1.4;
  color: var(--couleur-succes);
}
.message-ajout:empty { display: none; }
.message-ajout--erreur { color: var(--couleur-erreur); }

/* Champ quantité : <div class="quantite"><input type="number" data-quantite …></div>.
   site.js ajoute les boutons − / + autour du champ ; sans JS, champ numérique seul. */
.quantite {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--couleur-bordure-champ);
  border-radius: var(--rayon);
  background: var(--couleur-surface);
  overflow: hidden;
}
.quantite:focus-within { border-color: var(--couleur-accent); box-shadow: 0 0 0 3px rgb(70 105 163 / 0.25); }
.quantite__bouton {
  display: inline-grid;
  place-items: center;
  width: var(--cible-min);
  min-height: var(--cible-min);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--couleur-texte);
  transition: background-color var(--duree-courte) ease;
}
.quantite__bouton:hover:not(:disabled) { background: var(--couleur-fond-alt); }
.quantite__bouton:disabled { color: var(--couleur-bordure-champ); cursor: not-allowed; }
.quantite__bouton:focus-visible { outline-offset: -3px; border-radius: var(--rayon); }
.quantite input {
  width: 3.5rem;
  min-height: var(--cible-min);
  padding: 0 var(--espace-1);
  border: 0;
  background: transparent;
  font-weight: var(--graisse-moyenne);
  text-align: center;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
.quantite input:focus { outline: none; }
.quantite input::-webkit-outer-spin-button,
.quantite input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }


/* Surface générique (encadré blanc) pour les blocs de page des Tasks 5 à 7. */
.surface {
  padding: var(--espace-5);
  border-radius: var(--rayon-grand);
  background: var(--couleur-surface);
  box-shadow: var(--ombre-1);
}
@media (min-width: 640px) { .surface { padding: var(--espace-6); } }


/* 7. Compte client ---------------------------------------------------------
   Connexion, inscription, mot de passe, confirmation : une carte centrée
   (.compte > .compte__carte.surface). Profil et tableau de bord : .compte--large.
   Les champs et boutons sont ceux de la section 5. */
.compte {
  width: 100%;
  max-width: 30rem;
  margin: var(--espace-5) auto var(--espace-6);
}
.compte--large { max-width: 46rem; }
@media (min-width: 640px) {
  .compte { margin-top: var(--espace-7); }
}
.compte__carte { padding: var(--espace-5); }
@media (min-width: 640px) { .compte__carte { padding: var(--espace-7); } }
.compte__titre { margin-bottom: var(--espace-2); font-size: var(--taille-xl); }
.compte--large > .compte__titre { font-size: var(--taille-2xl); }
.compte__aide { color: var(--couleur-texte-attenue); font-size: var(--taille-sm); }
.compte__carte > .compte__aide { margin-bottom: var(--espace-5); }
.compte__adresse {
  margin: 0 0 var(--espace-4);
  font-weight: var(--graisse-moyenne);
  overflow-wrap: anywhere;
}
.compte__bas {
  margin: var(--espace-5) 0 0;
  text-align: center;
  font-size: var(--taille-sm);
}
.compte__valeur { min-height: 24px; font-weight: var(--graisse-moyenne); }
.compte .formulaire { max-width: none; }
.formulaire__rangee { display: grid; gap: var(--espace-5); }
@media (min-width: 640px) {
  .formulaire__rangee { grid-template-columns: 1fr 1fr; }
}
.champ__facultatif { color: var(--couleur-texte-attenue); font-weight: var(--graisse-normale); }
.champ__saisie--code {
  max-width: 12rem;
  text-align: center;
  font-size: var(--taille-lg);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3em;
}

.compte__details {
  margin-top: var(--espace-4);
  border-top: 1px solid var(--couleur-bordure);
  padding-top: var(--espace-4);
  font-size: var(--taille-sm);
}
.compte__details summary {
  min-height: var(--cible-min);
  display: flex;
  align-items: center;
  color: var(--couleur-accent);
  cursor: pointer;
}
.compte__details[open] summary { margin-bottom: var(--espace-3); }

/* Profil : trois blocs empilés, chacun un fieldset sur fond blanc. */
.formulaire--large { max-width: none; gap: var(--espace-5); }
.compte__groupe { display: grid; gap: var(--espace-5); min-width: 0; margin: 0; border: 0; }
.compte__groupe legend {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0 0 var(--espace-1);
  font-size: var(--taille-lg);
  font-weight: var(--graisse-forte);
}
.compte__groupe legend + * { clear: both; }
.compte__groupe .champ__aide { margin: 0; }
.compte__actions { display: flex; flex-wrap: wrap; gap: var(--espace-3); }

/* Tableau de bord */
.compte__tuiles {
  display: grid;
  gap: var(--espace-4);
  margin: var(--espace-5) 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) { .compte__tuiles { grid-template-columns: 1fr 1fr; } }
.compte__tuile {
  position: relative;
  display: grid;
  gap: var(--espace-1);
  height: 100%;
  padding-right: var(--espace-8);
  color: var(--couleur-texte);
  text-decoration: none;
  transition: box-shadow var(--duree-courte) ease, transform var(--duree-courte) ease;
}
.compte__tuile:hover { color: var(--couleur-texte); box-shadow: var(--ombre-2); transform: translateY(-2px); }
.compte__tuile-titre { font-weight: var(--graisse-forte); font-size: var(--taille-md); }
.compte__tuile-texte { color: var(--couleur-texte-attenue); font-size: var(--taille-sm); }
.compte__tuile-fleche {
  position: absolute;
  top: 50%;
  right: var(--espace-5);
  translate: 0 -50%;
  color: var(--couleur-accent);
}
.compte__sortie { margin: 0; }

/* 7b. Vitrine : boutique, catégories, fiche produit ----------------------- */

.page-vitrine { padding-block: var(--espace-4) var(--espace-8); }

/* Bandeau de la page boutique (pleine largeur). */
.bandeau-boutique {
  padding-block: var(--espace-6) var(--espace-5);
  background: var(--couleur-fond-alt);
}
.bandeau-boutique__titre { margin: 0 0 var(--espace-2); font-size: var(--taille-2xl); line-height: var(--interligne-serre); }
.bandeau-boutique__accroche { max-width: 40rem; margin: 0 0 var(--espace-4); font-size: var(--taille-md); }

/* Réassurance : deux garanties, en colonne sur téléphone, en ligne ensuite. */
.reassurance {
  display: flex;
  flex-direction: column;
  gap: var(--espace-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--taille-sm);
  font-weight: var(--graisse-moyenne);
}
.reassurance__item { display: flex; align-items: flex-start; gap: var(--espace-2); }
.reassurance__item .icone { flex: none; margin-top: 0.1em; color: var(--couleur-succes); }
@media (min-width: 640px) {
  .bandeau-boutique .reassurance { flex-direction: row; flex-wrap: wrap; gap: var(--espace-2) var(--espace-5); }
}

.vitrine-section + .vitrine-section { margin-top: var(--espace-7); }
.vitrine-section__titre { margin: 0 0 var(--espace-4); font-size: var(--taille-lg); line-height: var(--interligne-serre); }
.vitrine-vide { color: var(--couleur-texte-attenue); }

/* Tuiles de catégorie : image du premier produit visible, ou aplat. */
.tuiles-categories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espace-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Refonte, lot 2 : les tuiles occupent la largeur disponible (deux catégories = deux grandes tuiles, plus de vignettes
   perdues dans une grille de quatre colonnes), 18 rem au moins chacune. */
@media (min-width: 640px) { .tuiles-categories { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--espace-5); } }
.tuile-categorie {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: var(--rayon-grand);
  background: var(--couleur-surface);
  box-shadow: var(--ombre-1);
  color: var(--couleur-texte);
  text-decoration: none;
  transition: box-shadow var(--duree) var(--courbe-sortie);
}
.tuile-categorie:hover { box-shadow: var(--ombre-2); }
.tuile-categorie:focus-visible { outline: 3px solid var(--couleur-focus); outline-offset: 2px; }
.tuile-categorie__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--couleur-fond-alt); }
.tuile-categorie__media--aplat { background: var(--couleur-accent-pale); }
.tuile-categorie__media img { width: 100%; height: 100%; object-fit: cover; }
.tuile-categorie__nom { padding: var(--espace-3); font-size: var(--taille-sm); font-weight: var(--graisse-forte); }

/* En-tête d'une page catégorie. */
.entete-categorie { margin-bottom: var(--espace-5); }
.entete-categorie__titre { margin: 0 0 var(--espace-2); font-size: var(--taille-2xl); line-height: var(--interligne-serre); }
.entete-categorie__texte { max-width: 44rem; color: var(--couleur-texte-attenue); }
.entete-categorie__texte p { margin: 0 0 var(--espace-2); }

/* Pagination. */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--espace-3);
  margin-top: var(--espace-6);
}
.pagination__pages { display: flex; flex-wrap: wrap; gap: var(--espace-1); margin: 0; padding: 0; list-style: none; }
.pagination__page {
  display: inline-grid;
  place-items: center;
  min-width: var(--cible-min);
  min-height: var(--cible-min);
  padding-inline: var(--espace-2);
  border-radius: var(--rayon);
  color: var(--couleur-texte);
  font-weight: var(--graisse-moyenne);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
a.pagination__page:hover { background: var(--couleur-fond-alt); }
.pagination__page--courante { background: var(--couleur-accent); color: #fff; }

/* Fiche produit : galerie puis informations (côte à côte dès 1024 px). */
.fiche { display: grid; gap: var(--espace-5); }
@media (min-width: 1024px) {
  .fiche { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--espace-7); align-items: start; }
}
.galerie__principale {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--rayon-grand);
  background: var(--couleur-fond-alt);
  touch-action: pan-y;
}
.galerie__principale img { width: 100%; height: 100%; object-fit: cover; }
.galerie__sans-image { width: 30%; height: 30%; color: var(--couleur-texte-secondaire); stroke-width: 1.25; }
.galerie__vignettes {
  display: flex;
  gap: var(--espace-2);
  margin: var(--espace-2) 0 0;
  padding: 0 0 var(--espace-1);
  overflow-x: auto;
  list-style: none;
}
.galerie__vignette {
  display: block;
  width: 4.5rem;
  height: 4.5rem;
  flex: none;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--rayon);
  background: var(--couleur-fond-alt);
}
.galerie__vignette img { width: 100%; height: 100%; object-fit: cover; }
.galerie__vignette[aria-current="true"] { border-color: var(--couleur-accent); }
.galerie__vignette:focus-visible { outline: 3px solid var(--couleur-focus); outline-offset: 2px; }

.fiche__nom { margin: 0 0 var(--espace-3); font-size: var(--taille-2xl); line-height: var(--interligne-serre); }
.fiche__prix { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-3); margin-bottom: var(--espace-4); }
.fiche__courte { margin-bottom: var(--espace-5); }
.fiche__achat { margin: 0 0 var(--espace-5); }
.fiche__formulaire { display: grid; gap: var(--espace-3); }
.fiche__quantite { display: grid; gap: var(--espace-1); justify-items: start; }
.fiche__bouton { width: 100%; }
.fiche__formulaire .message-ajout { margin: 0; }
@media (min-width: 640px) {
  .fiche__formulaire { grid-template-columns: auto 1fr; align-items: end; }
  .fiche__formulaire .message-ajout { grid-column: 1 / -1; }
}

.fiche-section { margin-top: var(--espace-7); }

/* Avis clients de la fiche produit (lot 3d) : résumé, liste de cartes, réponse de la boutique. */
.avis { scroll-margin-top: calc(var(--hauteur-entete) + var(--espace-4)); }
.avis__resume { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--espace-2) var(--espace-3); margin: 0 0 var(--espace-4); }
.avis__moyenne { font-size: var(--taille-md); font-weight: var(--graisse-forte); }
.avis__nombre { color: var(--couleur-texte-attenue); font-size: var(--taille-sm); }
.avis__etoiles { color: var(--couleur-accent); font-size: var(--taille-md); letter-spacing: 0.1em; line-height: 1; }
.avis__liste { display: grid; gap: var(--espace-4); max-width: 46rem; margin: 0 0 var(--espace-5); padding: 0; list-style: none; }
.avis__avis { display: grid; gap: var(--espace-2); padding: var(--espace-4); }
.avis__note { margin: 0; }
.avis__texte { margin: 0; overflow-wrap: anywhere; }
.avis__signature { margin: 0; overflow-wrap: anywhere; color: var(--couleur-texte-attenue); font-size: var(--taille-sm); }
.avis__reponse { display: grid; gap: var(--espace-1); margin-top: var(--espace-2); padding: var(--espace-3) var(--espace-4); border-left: 3px solid var(--couleur-accent); border-radius: var(--rayon-petit); background: var(--couleur-accent-pale); }
.avis__reponse-titre { margin: 0; font-size: var(--taille-sm); font-weight: var(--graisse-forte); }
.avis__tous { margin: 0 0 var(--espace-4); }
.avis__intro, .avis__vide { margin: 0 0 var(--espace-4); color: var(--couleur-texte-attenue); }
.avis__produit { margin: 0; overflow-wrap: anywhere; font-size: var(--taille-sm); }
/* Mon compte > Mes avis. */
.mes-avis__titre { margin: var(--espace-7) 0 var(--espace-3); font-size: var(--taille-lg); }
.mes-avis__liste { display: grid; gap: var(--espace-4); max-width: 40rem; margin: 0 0 var(--espace-5); padding: 0; list-style: none; }
.mes-avis__carte { display: grid; gap: var(--espace-2); padding: var(--espace-4); }
.mes-avis__entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--espace-2); }
.mes-avis__produit { margin: 0; font-weight: var(--graisse-forte); overflow-wrap: anywhere; }
.mes-avis__meta { margin: 0; overflow-wrap: anywhere; color: var(--couleur-texte-attenue); font-size: var(--taille-sm); }
.mes-avis__texte { margin: 0; overflow-wrap: anywhere; }
.mes-avis__suppression summary { cursor: pointer; color: var(--couleur-erreur); font-size: var(--taille-sm); }
.mes-avis__suppression form { display: grid; gap: var(--espace-2); justify-items: start; margin-top: var(--espace-2); }
.mes-avis__suppression p { margin: 0; font-size: var(--taille-sm); }

/* Caractéristiques : tableau libellé / valeur. */
.caracteristiques { width: 100%; max-width: 44rem; border-collapse: collapse; font-size: var(--taille-sm); }
.caracteristiques th,
.caracteristiques td { padding: var(--espace-2) var(--espace-3); border-bottom: 1px solid var(--couleur-bordure); text-align: left; vertical-align: top; }
.caracteristiques th { width: 40%; font-weight: var(--graisse-moyenne); color: var(--couleur-texte-attenue); }

/* Contenu riche saisi en admin (déjà assaini côté serveur). */
.contenu-riche { max-width: 46rem; overflow-wrap: anywhere; }
.contenu-riche > :first-child { margin-top: 0; }
.contenu-riche > :last-child { margin-bottom: 0; }
.contenu-riche img { max-width: 100%; height: auto; border-radius: var(--rayon); }
.contenu-riche a { color: var(--couleur-accent); }
.contenu-riche ul,
.contenu-riche ol { padding-left: 1.25em; }
.contenu-riche table { max-width: 100%; border-collapse: collapse; }
.contenu-riche th,
.contenu-riche td { padding: var(--espace-1) var(--espace-2); border: 1px solid var(--couleur-bordure); }

/* Pages maison (lot 4, tâche 8) : texte courant dans la colonne de .conteneur (gouttière de 16 px au moins), lecture confortable. */
.page-texte { padding-block: var(--espace-6) var(--espace-8); line-height: 1.7; }
.page-texte h1 { margin: 0 0 var(--espace-4); font-size: var(--taille-2xl); line-height: var(--interligne-serre); }
.page-texte p { margin: 0 0 var(--espace-3); }

/* Mentions légales (lot 4, tâche 7) : liste libellé / valeur, empilée sur mobile. */
.mentions { padding-block: var(--espace-6); }
.mentions__liste { margin: 0; }
.mentions__ligne { display: grid; grid-template-columns: 1fr; gap: var(--espace-1); padding: var(--espace-3) 0; border-bottom: 1px solid var(--couleur-bordure); }
.mentions__ligne dt { font-weight: var(--graisse-moyenne); color: var(--couleur-texte-attenue); }
.mentions__ligne dd { margin: 0; }
@media (min-width: 40em) {
  .mentions__ligne { grid-template-columns: 16rem 1fr; gap: var(--espace-4); }
}

/* Page introuvable / état vide. */
.page-vide { max-width: 34rem; margin-inline: auto; padding-block: var(--espace-8); text-align: center; }
.page-vide__titre { margin: 0 0 var(--espace-3); font-size: var(--taille-xl); }
.page-vide__texte { margin: 0 0 var(--espace-5); color: var(--couleur-texte-attenue); }

/* 7c. Panier --------------------------------------------------------------- */

.page-panier { padding-block: var(--espace-5) var(--espace-8); }
.page-panier__titre { margin: 0 0 var(--espace-4); font-size: var(--taille-2xl); line-height: var(--interligne-serre); }
.page-panier__titre:focus { outline: none; }
.page-panier__alertes { display: grid; gap: var(--espace-2); }
.page-panier__alertes:not(:empty) { margin-bottom: var(--espace-4); }
.page-panier__complements { margin-top: var(--espace-8); }

/* Panier vide. */
.panier-vide {
  display: grid;
  justify-items: center;
  gap: var(--espace-2);
  padding-block: var(--espace-8);
  text-align: center;
}
.panier-vide__icone {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: var(--espace-2);
  border-radius: 50%;
  background: var(--couleur-accent-pale);
  color: var(--couleur-accent);
}
.panier-vide__icone .icone { width: 32px; height: 32px; }
.panier-vide__titre { margin: 0; font-size: var(--taille-lg); font-weight: var(--graisse-forte); }
.panier-vide__aide { max-width: 34ch; margin: 0 0 var(--espace-4); color: var(--couleur-texte-attenue); }

/* Disposition : lignes puis récapitulatif sur téléphone, deux colonnes ensuite. */
.panier { display: grid; gap: var(--espace-5); }
@media (min-width: 1024px) {
  .panier { grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--espace-7); align-items: start; }
  .panier__recap { position: sticky; top: calc(var(--hauteur-entete) + var(--espace-4)); }
}
.panier__nombre { margin: 0 0 var(--espace-3); color: var(--couleur-texte-attenue); font-size: var(--taille-sm); }
.liste-lignes { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--espace-3); }

/* Une ligne : image, nom et prix, actions, total. */
.ligne-panier {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  grid-template-areas:
    "media corps"
    "actions actions"
    "total total";
  gap: var(--espace-3) var(--espace-4);
  padding: var(--espace-4);
  border-radius: var(--rayon-grand);
  background: var(--couleur-surface);
  box-shadow: var(--ombre-1);
  transition: opacity var(--duree-courte) ease;
}
.ligne-panier[aria-busy="true"] { opacity: 0.6; }
.ligne-panier__media {
  grid-area: media;
  display: grid;
  place-items: center;
  align-self: start;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--rayon);
  background: var(--couleur-fond-alt);
  color: var(--couleur-texte-attenue);
}
.ligne-panier__media img { width: 100%; height: 100%; object-fit: cover; }
.ligne-panier__corps { grid-area: corps; min-width: 0; }
.ligne-panier__nom { margin: 0 0 var(--espace-1); font-size: var(--taille-base); font-weight: var(--graisse-moyenne); line-height: var(--interligne-serre); }
.ligne-panier__nom a { color: inherit; text-decoration: none; }
.ligne-panier__nom a:hover { color: var(--couleur-accent); text-decoration: underline; }
.ligne-panier__unitaire { margin: 0; color: var(--couleur-texte-attenue); font-size: var(--taille-sm); }
.ligne-panier__etat { display: flex; align-items: center; gap: var(--espace-2); margin: var(--espace-1) 0 0; font-size: var(--taille-sm); }
.ligne-panier__etat--ajustee { color: var(--couleur-alerte); }
.ligne-panier__etat--indisponible { color: var(--couleur-neutre); font-weight: var(--graisse-moyenne); }
.ligne-panier__actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-3);
}
.ligne-panier__quantite { display: flex; align-items: center; gap: var(--espace-2); margin: 0; }
.ligne-panier__retirer { color: var(--couleur-texte-attenue); }
.ligne-panier__retirer:hover { color: var(--couleur-erreur); background: var(--couleur-erreur-fond); }
.ligne-panier__total {
  grid-area: total;
  margin: 0;
  text-align: right;
  font-size: var(--taille-md);
  font-weight: var(--graisse-forte);
  font-variant-numeric: tabular-nums;
}
/* Ligne retirée du catalogue : grisée, sans quantité ni total. */
.ligne-panier--indisponible { background: var(--couleur-fond-alt); box-shadow: none; }
.ligne-panier--indisponible .ligne-panier__media img { filter: grayscale(1); opacity: 0.6; }
.ligne-panier--indisponible .ligne-panier__nom { color: var(--couleur-texte-attenue); }
.ligne-panier--indisponible .ligne-panier__actions { justify-content: flex-end; }

@media (min-width: 640px) {
  .ligne-panier {
    grid-template-columns: 96px minmax(0, 1fr) auto 7rem;
    grid-template-areas: "media corps actions total";
    align-items: center;
  }
  .ligne-panier__media { align-self: center; }
  .ligne-panier__actions { flex-direction: column; align-items: flex-end; justify-content: center; gap: var(--espace-1); }
  .ligne-panier__quantite { flex-wrap: wrap; justify-content: flex-end; }
  .ligne-panier--indisponible { grid-template-areas: "media corps actions actions"; }
}

/* Récapitulatif. */
.panier__recap { display: grid; gap: var(--espace-3); }
.panier__recap-titre { margin: 0; font-size: var(--taille-lg); line-height: var(--interligne-serre); }
.recap { display: grid; gap: var(--espace-2); margin: 0 0 var(--espace-2); }
.recap__ligne { display: flex; align-items: baseline; justify-content: space-between; gap: var(--espace-3); }
.recap dt { margin: 0; }
.recap dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.recap__ligne--total { font-size: var(--taille-md); font-weight: var(--graisse-forte); }
.recap__ligne[hidden] { display: none; }
.paiement__promo [hidden] { display: none; }
.paiement__promo-saisie { display: flex; gap: var(--espace-2); }
.paiement__promo-saisie .champ__saisie { flex: 1 1 auto; min-width: 0; }
.recap__note { color: var(--couleur-texte-attenue); font-size: var(--taille-sm); }

/* 7d. Choix du point relais (modale de relais.js) ------------------------- */
.relais {
  width: min(960px, calc(100vw - 2 * var(--espace-4)));
  max-width: none;
  max-height: calc(100dvh - 2 * var(--espace-4));
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--rayon-grand);
  background: var(--couleur-surface);
  color: var(--couleur-texte);
  box-shadow: var(--ombre-3);
  overflow: hidden;
}
.relais::backdrop { background: rgb(30 34 42 / 0.45); }
.relais[open] { display: flex; }
.relais__panneau {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: inherit;
  min-height: 0;
  padding: var(--espace-4);
  gap: var(--espace-3);
}
.relais__tete { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-3); }
.relais__titre { margin: 0; font-size: var(--taille-md); }
.relais__autour { margin: 0; color: var(--couleur-texte-attenue); font-size: var(--taille-sm); }
.relais__statut { margin: 0; font-size: var(--taille-sm); }
.relais__statut:empty { display: none; }
.relais__statut--erreur {
  padding: var(--espace-3);
  border-radius: var(--rayon);
  background: var(--couleur-erreur-fond);
  color: var(--couleur-erreur);
}
.relais__contenu {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--espace-3);
  min-height: 0;
  overflow: hidden;
}
.relais__contenu[hidden] { display: none; }
/* Mobile : la carte au-dessus de la liste, la liste défile. */
.relais__carte { order: -1; height: 220px; border-radius: var(--rayon); background: var(--couleur-fond-alt); }
.relais__carte[hidden] { display: none; }
.relais__liste {
  display: grid;
  gap: var(--espace-2);
  min-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
}
.relais__point {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--espace-3);
  padding: var(--espace-3);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
}
.relais__point.is-actif { border-color: var(--couleur-accent); box-shadow: 0 0 0 1px var(--couleur-accent); }
.relais__infos { display: grid; gap: 2px; min-width: 0; font-size: var(--taille-sm); }
.relais__nom { font-size: var(--taille-base); overflow-wrap: anywhere; }
.relais__distance { color: var(--couleur-texte-attenue); }
.relais__horaires { margin-top: var(--espace-1); font-size: var(--taille-xs); }
.relais__horaires summary { cursor: pointer; color: var(--couleur-accent); }
.relais__jours { margin: var(--espace-1) 0 0; padding: 0; list-style: none; }
.relais__jour { display: inline-block; min-width: 6.5em; font-weight: var(--graisse-moyenne); }
@media (min-width: 720px) {
  .relais__panneau { padding: var(--espace-5); height: min(640px, calc(100dvh - 2 * var(--espace-4))); }
  .relais__contenu { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: minmax(0, 1fr); }
  .relais__carte { order: 0; height: auto; min-height: 320px; }
  .relais__contenu:has(.relais__carte[hidden]) { grid-template-columns: minmax(0, 1fr); }
}

/* 7e. Tunnel de commande : frise des étapes, /paiement, page de paiement --- */

/* Frise : quatre étapes en ligne dès 640 px ; sur téléphone « Étape 2 sur 4 »
   et une barre en quatre segments. Étape faite : pastille verte à coche ;
   en cours : accent. */
.etapes { margin: 0 0 var(--espace-5); }
.etapes__liste { display: none; margin: 0; padding: 0; list-style: none; }
.etapes__etape {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espace-1);
  text-align: center;
  font-size: var(--taille-sm);
  color: var(--couleur-texte-attenue);
}
/* Trait entre deux pastilles. */
.etapes__etape + .etapes__etape::before {
  content: "";
  position: absolute;
  top: 15px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: var(--couleur-bordure);
  z-index: 0;
}
.etapes__etape.is-faite + .etapes__etape::before,
.etapes__etape.is-courante::before { background: var(--couleur-succes); }
.etapes__pastille {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--couleur-fond-alt);
  color: var(--couleur-texte-attenue);
  font-weight: var(--graisse-forte);
}
.etapes__etape.is-faite .etapes__pastille { background: var(--couleur-succes); color: #fff; }
.etapes__etape.is-courante .etapes__pastille { background: var(--couleur-accent); color: #fff; }
.etapes__etape.is-courante .etapes__nom { color: var(--couleur-texte); font-weight: var(--graisse-forte); }
.etapes__etape.is-faite .etapes__nom { color: var(--couleur-texte); }
.etapes__mobile { margin: 0 0 var(--espace-2); font-size: var(--taille-sm); }
.etapes__barre { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.etapes__barre i { height: 4px; border-radius: 2px; background: var(--couleur-bordure); }
.etapes__barre i.is-faite { background: var(--couleur-succes); }
.etapes__barre i.is-courante { background: var(--couleur-accent); }
@media (min-width: 640px) {
  .etapes__liste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .etapes__mobile,
  .etapes__barre { display: none; }
}

/* Pages du tunnel : saisie puis récapitulatif sur téléphone, deux colonnes ensuite. */
.page-paiement { padding-block: var(--espace-5) var(--espace-8); }
.page-paiement__titre { margin: 0 0 var(--espace-4); font-size: var(--taille-2xl); line-height: var(--interligne-serre); }
.page-paiement__numero { margin: calc(-1 * var(--espace-2)) 0 var(--espace-4); color: var(--couleur-texte-attenue); }
.page-paiement .flash { margin-bottom: var(--espace-4); }
.paiement { display: grid; gap: var(--espace-5); max-width: none; }
.paiement__saisie { display: grid; gap: var(--espace-5); min-width: 0; align-content: start; }
.paiement__recap { display: grid; gap: var(--espace-4); align-content: start; min-width: 0; }
@media (min-width: 1024px) {
  .paiement { grid-template-columns: minmax(0, 1fr) 24rem; gap: var(--espace-7); align-items: start; }
  .paiement__recap { position: sticky; top: calc(var(--hauteur-entete) + var(--espace-4)); }
}
.paiement__relais-resume {
  margin: 0;
  padding: var(--espace-3) var(--espace-4);
  border-radius: var(--rayon);
  background: var(--couleur-succes-fond);
  color: var(--couleur-succes);
  font-weight: var(--graisse-moyenne);
  overflow-wrap: anywhere;
}
.paiement__relais-resume[hidden] { display: none; }
.paiement__garantie {
  display: flex;
  align-items: flex-start;
  gap: var(--espace-2);
  padding: var(--espace-3) var(--espace-4);
  border-radius: var(--rayon);
  background: var(--couleur-accent-pale);
  font-size: var(--taille-sm);
}
.paiement__garantie p { margin: 0; }
.paiement__garantie .icone { flex: none; margin-top: 0.15em; color: var(--couleur-succes); }
.paiement__bientot { display: flex; align-items: flex-start; gap: var(--espace-3); }
.paiement__bientot p { margin: 0; }
.paiement__bientot .icone { flex: none; margin-top: 0.2em; color: var(--couleur-accent); }
.paiement__emplacement:empty,
.paiement__emplacement:not(:has(*)) { display: none; }
.paiement__adresses { display: grid; gap: var(--espace-4); }
.paiement__sous-titre { margin: 0 0 var(--espace-1); font-size: var(--taille-base); }
.paiement__adresse { margin: 0; overflow-wrap: anywhere; }

/* Lignes du récapitulatif. */
.recap-articles { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--espace-3); }
.recap-article { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: var(--espace-3); }
.recap-article__media {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  overflow: hidden;
  border-radius: var(--rayon-petit);
  background: var(--couleur-fond-alt);
  color: var(--couleur-texte-attenue);
}
.recap-article__media img { width: 100%; height: 100%; object-fit: cover; }
.recap-article__corps { display: grid; gap: 2px; min-width: 0; }
.recap-article__nom { font-weight: var(--graisse-moyenne); overflow-wrap: anywhere; }
.recap-article__quantite { color: var(--couleur-texte-attenue); font-size: var(--taille-sm); }
.recap-article__prix { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 8. Préférences : 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;
  }
  .carte-produit:hover,
  .carte-produit:hover .carte-produit__media img,
  .compte__tuile:hover { transform: none; }
}

/* 7f. Paiement par carte (Stripe) et confirmation de commande (lot 3b, tâche 5). */
.stripe__formulaire { display: grid; gap: var(--espace-3); }
.stripe__element { min-height: 3rem; }
.stripe__erreur:empty { display: none; }
.stripe__securite { margin: var(--espace-3) 0 0; }
/* Bouton PayPal (lot 3b, tâche 6) : le SDK PayPal y insère son bouton ; */
.paypal { margin-top: var(--espace-5); }
.paypal__bouton { min-height: 3rem; }
.paypal__bouton:empty { min-height: 0; }
.paypal__erreur:empty { display: none; }
.paypal__securite { margin: var(--espace-3) 0 0; }
.confirmation { display: grid; gap: var(--espace-2); justify-items: start; margin-bottom: var(--espace-5); }
.confirmation p { margin: 0; }
.confirmation__icone { width: 3rem; height: 3rem; color: var(--couleur-succes); }
.confirmation__actions { display: flex; flex-wrap: wrap; gap: var(--espace-3); margin-top: var(--espace-3); }

/* 7g. Mes commandes, détail d'une commande, téléchargements (lot 3b, tâche 7). */
.commandes { display: grid; gap: var(--espace-3); margin: var(--espace-5) 0; padding: 0; list-style: none; }
.commandes__ligne {
  display: grid;
  gap: var(--espace-2) var(--espace-4);
  align-items: center;
  grid-template-columns: 1fr auto;
}
.commandes__infos { grid-column: 1 / -1; min-width: 0; }
.commandes__numero { margin: 0; font-size: var(--taille-md); overflow-wrap: anywhere; }
.commandes__numero a { color: var(--couleur-texte); text-decoration: none; }
.commandes__numero a:hover { color: var(--couleur-accent); text-decoration: underline; }
.commandes__date { margin: 0; color: var(--couleur-texte-attenue); font-size: var(--taille-sm); }
.commandes__statut, .commandes__total, .commandes__actions { margin: 0; }
.commandes__total { justify-self: end; font-weight: var(--graisse-forte); }
.commandes__ttc { color: var(--couleur-texte-attenue); font-size: var(--taille-xs); font-weight: normal; }
.commandes__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--espace-2); }
@media (min-width: 720px) {
  .commandes__ligne { grid-template-columns: minmax(0, 1fr) 11rem 8rem auto; }
  .commandes__infos { grid-column: auto; }
  .commandes__actions { grid-column: auto; justify-content: flex-end; }
}
.commandes__vide { display: grid; gap: var(--espace-3); justify-items: start; margin: var(--espace-5) 0; }
.commandes__vide p { margin: 0; }
.statut {
  display: inline-block;
  padding: 0.125rem var(--espace-3);
  border-radius: var(--rayon-pilule);
  font-size: var(--taille-sm);
  font-weight: var(--graisse-moyenne);
}
.statut--ok { background: var(--couleur-succes-fond); color: var(--couleur-succes); }
.statut--attente { background: var(--couleur-alerte-fond); color: var(--couleur-alerte); }
.statut--erreur { background: var(--couleur-erreur-fond); color: var(--couleur-erreur); }
.statut--neutre { background: var(--couleur-neutre-fond); color: var(--couleur-neutre); }
/* Assistance (Mon compte) : formulaire, puis historique des messages et des réponses. */
.assistance__formulaire { padding: var(--espace-5); max-width: 40rem; }
.assistance__titre-liste { margin: var(--espace-7) 0 var(--espace-3); font-size: var(--taille-lg); }
.assistance__liste { display: grid; gap: var(--espace-4); max-width: 40rem; margin: 0 0 var(--espace-5); padding: 0; list-style: none; }
.assistance__message { display: grid; gap: var(--espace-2); padding: var(--espace-4); }
.assistance__entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--espace-2); }
.assistance__sujet { margin: 0; font-weight: var(--graisse-forte); }
.assistance__meta { margin: 0; color: var(--couleur-texte-attenue); font-size: var(--taille-sm); }
.assistance__texte { margin: 0; overflow-wrap: anywhere; }
.assistance__reponse { display: grid; gap: var(--espace-2); margin-top: var(--espace-2); padding: var(--espace-3) var(--espace-4); border-left: 3px solid var(--couleur-accent); border-radius: var(--rayon-petit); background: var(--couleur-accent-pale); }
.commande-detail__payer { display: grid; gap: var(--espace-2); justify-items: start; margin: var(--espace-4) 0; }
.commande-detail__payer p { margin: 0; }
.documents { margin: 0; padding-left: var(--espace-5); }

/* =============================================================================
   Refonte, lot 2 : parcours d'achat (principes « apple-design » : réponse immédiate, continuité, cohérence spatiale)
   ========================================================================== */

/* Description repliable : coupée à 18 rem avec un fondu, un bouton la déplie. Sans JavaScript, rien n'est coupé
   (la classe est-repliee n'est posée que par produit.js). */
.description-repliable.est-repliee {
  position: relative;
  max-height: 18rem;
  overflow: hidden;
}
.description-repliable.est-repliee::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 6rem;
  background: linear-gradient(to bottom, rgb(251 251 251 / 0), var(--couleur-fond));
  pointer-events: none;
}
.description-repliable__bouton { margin-top: var(--espace-3); }

/* Barre d'achat collante (téléphone seulement) : elle apparaît quand le bouton principal sort de l'écran. Elle glisse
   depuis le bas et repart par le bas (même chemin à l'aller et au retour). */
.barre-achat { display: none; }
@media (max-width: 767.98px) {
  .barre-achat {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 85; /* sous l'en-tête (90) et le bandeau cookies (95) */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espace-3);
    padding: var(--espace-3) var(--gouttiere) calc(var(--espace-3) + env(safe-area-inset-bottom));
    background: rgb(255 255 255 / 0.92);
    border-top: 1px solid var(--couleur-bordure);
    box-shadow: 0 -6px 24px rgb(61 61 61 / 0.12);
    transform: translateY(110%);
    transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  @supports (backdrop-filter: blur(1px)) {
    .barre-achat { background: rgb(255 255 255 / 0.78); backdrop-filter: blur(16px) saturate(180%); }
  }
  .barre-achat[hidden] { display: none; }
  .barre-achat.est-visible { transform: translateY(0); }
  .barre-achat__bouton { flex: 1 1 auto; max-width: 16rem; }
  /* La page ne finit pas sous la barre. */
  .principal:has(.barre-achat:not([hidden])) { padding-bottom: 5rem; }
}
@media (prefers-reduced-transparency: reduce) {
  .barre-achat { background: var(--couleur-surface); backdrop-filter: none; }
}

/* Galerie : l'image suit le doigt (classe posée pendant le geste, transition seulement au relâchement). */
.galerie__principale img { touch-action: pan-y; will-change: transform; }
.galerie__principale img.est-relachee { transition: transform 260ms cubic-bezier(0.32, 0.72, 0, 1), opacity 160ms ease; }

@media (prefers-reduced-motion: reduce) {
  .barre-achat { transition: none; }
  .galerie__principale img.est-relachee { transition: none; }
}