/* Composants (charte « Seuil », §6) : un composant lit des rôles, n'a aucune marge externe, et tout panneau à fond
   ou bordé a un padding intérieur (--pad-panneau). Sommaire : icônes et badges, boutons et liens, prix, cartes,
   tuiles de gamme, vignettes de matière, en-tête de section, réassurance, FAQ, champs, lettre d'information,
   quantité, calculateur, fil d'Ariane, état vide, pagination, panneau, avis, tiroir panier. */

/* ---------- Icônes ---------- */
.icone {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
}
.icone[width="16"] {
  width: 1rem;
  height: 1rem;
}
.icone[width="20"] {
  width: 1.25rem;
  height: 1.25rem;
}
.icone[width="28"] {
  width: 1.75rem;
  height: 1.75rem;
}
.icone[width="32"] {
  width: 2rem;
  height: 2rem;
}
.icone[width="48"] {
  width: 3rem;
  height: 3rem;
}

/* ---------- Badge ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  padding: var(--e-1) calc(var(--e-2) * 1.25);
  border-radius: var(--r-pilule);
  background: var(--lin);
  color: var(--encre);
  font-family: var(--police-texte);
  font-size: var(--fs-mini);
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}
.badge--plein {
  background: var(--sapin);
  color: var(--platre);
}
.badge--alerte {
  background: var(--blanc);
  color: var(--erreur);
  box-shadow: inset 0 0 0 1px currentColor;
}
.ton-sapin .badge--neutre {
  background: var(--sapin-profond);
  color: var(--platre);
}

/* ---------- Boutons (pilule, 52 px ; 44 px en compact) ---------- */
.bouton {
  --btn-fond: var(--action);
  --btn-texte: var(--action-texte);
  --btn-survol: var(--action-survol);
  --btn-contour: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: var(--hauteur-champ);
  padding: 0 var(--e-6);
  border: 1px solid var(--btn-contour);
  border-radius: var(--r-pilule);
  background: var(--btn-fond);
  color: var(--btn-texte);
  font-family: var(--police-texte);
  font-size: var(--fs-texte);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duree-retour) var(--courbe), color var(--duree-retour) var(--courbe), border-color var(--duree-retour) var(--courbe);
}
.bouton:hover {
  background: var(--btn-survol);
  text-decoration: none;
}
.bouton:focus-visible {
  outline-offset: 3px;
}
.bouton--sm {
  min-height: var(--hauteur-compacte);
  padding-inline: var(--e-5);
  font-size: var(--fs-petit);
}
.bouton--plein {
  width: 100%;
}
.bouton--secondaire {
  --btn-fond: transparent;
  --btn-texte: var(--texte);
  --btn-survol: color-mix(in srgb, var(--texte) 6%, transparent);
  --btn-contour: var(--texte);
}
.bouton--discret {
  --btn-fond: transparent;
  --btn-survol: transparent;
  --btn-texte: var(--lien);
  padding-inline: 0;
  min-height: var(--hauteur-compacte);
  font-weight: 500;
}
.bouton--discret .bouton__libelle {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.bouton--discret:hover .bouton__libelle {
  text-decoration-thickness: 2px;
}
.bouton[disabled],
.bouton[aria-disabled="true"] {
  cursor: not-allowed;
}
/* Action pas encore possible (calculateur vide) : bouton lin neutre plutôt qu'un sapin délavé qui a l'air cassé */
.bouton--primaire[disabled] {
  --btn-fond: var(--lin);
  --btn-texte: var(--gris-pierre);
  --btn-survol: var(--lin);
}
.bouton.is-ajoute {
  --btn-fond: var(--succes);
  --btn-texte: var(--blanc);
  --btn-survol: var(--succes);
  --btn-contour: var(--succes);
}
.bouton.is-ajoute .bouton__icone {
  display: none;
}
.coche {
  display: inline-block;
  width: 0.4rem;
  height: 0.75rem;
  margin-inline: var(--e-1) var(--e-2);
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(calc(-1 * var(--e-1) / 2)) rotate(45deg);
}

/* Lien d'action en texte (classe historique lien-fleche, sans flèche dessinée) */
.lien-fleche {
  display: inline-flex;
  align-items: center;
  min-height: var(--hauteur-compacte);
  color: var(--lien);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.lien-fleche:hover {
  text-decoration-thickness: 2px;
}
.lien-fleche .icone {
  display: none;
}
.chapo + .lien-fleche {
  align-self: flex-start;
}

/* ---------- Prix : au m² en vedette (Hanken 600), boîte en petit ---------- */
.prix {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
}
.prix__principal {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--e-1);
}
.prix__montant {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.prix__unite {
  color: var(--texte-2);
  font-size: var(--fs-petit);
}
.prix__secondaire {
  color: var(--texte-2);
  font-size: var(--fs-petit);
  line-height: 1.45;
}
.prix__barre {
  color: var(--texte-2);
  font-size: var(--fs-petit);
}
.prix--sm .prix__montant {
  font-size: var(--fs-texte);
}
.prix--lg .prix__montant {
  font-size: var(--fs-h3);
}
.prix--lg .prix__unite {
  font-size: var(--fs-texte);
}

/* ---------- Carte produit : image 4:5 sans cadre, aucun zoom, seul le nom se souligne ---------- */
.carte-produit {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  min-width: 0;
}
.carte-produit__media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--lin);
  overflow: hidden;
}
.carte-produit__media picture,
.carte-produit__media img {
  width: 100%;
  height: 100%;
}
.carte-produit__media img {
  object-fit: cover;
}
.carte-produit__badges {
  position: absolute;
  top: var(--e-3);
  left: var(--e-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1);
}
.carte-produit__corps {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-2);
}
.carte-produit__titre {
  font-size: var(--fs-carte);
  line-height: 1.2;
}
.carte-produit__titre a {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  text-decoration: none;
}
.carte-produit__titre a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.carte-produit__titre a:focus-visible {
  outline: none;
}
.carte-produit:has(.carte-produit__titre a:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: var(--e-1);
}
.carte-produit:hover .carte-produit__nom {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.carte-produit__variante,
.carte-produit__specs {
  color: var(--texte-2);
  font-family: var(--police-texte);
  font-size: var(--fs-petit);
  line-height: 1.45;
}
.carte-produit__variante::first-letter {
  text-transform: uppercase;
}
.carte-produit .prix {
  padding-top: var(--e-1);
}
.carte-produit__ajout {
  position: relative;
  z-index: 1;
}

/* ---------- Carte article (conseils) ---------- */
.carte-article {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}
.carte-article__media {
  aspect-ratio: 3 / 2;
  background: var(--lin);
  overflow: hidden;
}
.carte-article__media picture,
.carte-article__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.carte-article__rubrique {
  color: var(--texte-2);
  font-size: var(--fs-petit);
}
.carte-article__titre {
  font-size: var(--fs-h3);
  line-height: 1.2;
}
.carte-article__titre a {
  text-decoration: none;
}
.carte-article__titre a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.carte-article:hover .carte-article__titre a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}
.carte-article__titre a:focus-visible {
  outline: none;
}
.carte-article:has(a:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: var(--e-1);
}
.carte-article__infos {
  color: var(--texte-2);
  font-size: var(--fs-petit);
}
.carte-article__extrait {
  color: var(--texte-2);
  max-width: var(--mesure);
}

/* ---------- Tuile de gamme : grande photo, titre et lien SOUS l'image ---------- */
.tuile-gamme {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
}
.tuile-gamme__media {
  aspect-ratio: 4 / 5;
  background: var(--lin);
  overflow: hidden;
}
.tuile-gamme--majeur .tuile-gamme__media,
.tuile-gamme--mineur .tuile-gamme__media {
  aspect-ratio: 4 / 3;
}
.tuile-gamme__media picture,
.tuile-gamme__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tuile-gamme.is-bientot .tuile-gamme__media img {
  filter: saturate(0.7);
}
.tuile-gamme__corps {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-3);
}
.tuile-gamme__titre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3);
  font-size: var(--fs-h2);
}
.tuile-gamme--mineur .tuile-gamme__titre,
.tuile-gamme--portrait .tuile-gamme__titre {
  font-size: var(--fs-h3);
}
.tuile-gamme__titre a {
  text-decoration: none;
}
.tuile-gamme__lien::after {
  content: "";
  position: absolute;
  inset: 0;
}
.tuile-gamme:hover .tuile-gamme__lien {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
.tuile-gamme__lien:focus-visible {
  outline: none;
}
.tuile-gamme:has(.tuile-gamme__lien:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: var(--e-1);
}
.tuile-gamme__accroche {
  max-width: 48ch;
  color: var(--texte-2);
}
.tuile-gamme__detail {
  color: var(--lien);
  font-size: var(--fs-petit);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.tuile-gamme .attente {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* ---------- Vignette de matière : carré, nom dessous, actif = filet encre 2 px décalé de 4 px ---------- */
.matiere {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  color: var(--texte);
  font-size: var(--fs-petit);
  line-height: 1.3;
  text-decoration: none;
}
.matiere__carre {
  display: block;
  aspect-ratio: 1;
  background: var(--lin);
  overflow: hidden;
  outline: 2px solid transparent;
  outline-offset: var(--e-1);
  transition: outline-color var(--duree-retour) var(--courbe);
}
.matiere__carre picture,
.matiere__carre img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.matiere:hover .matiere__carre {
  outline-color: var(--trait);
}
.matiere[aria-current="true"] .matiere__carre,
.matiere[aria-pressed="true"] .matiere__carre {
  outline-color: var(--texte);
}
.matiere:focus-visible {
  outline: none;
}
.matiere:focus-visible .matiere__carre {
  outline-color: var(--focus);
}

/* ---------- En-tête de section (titre + chapô + lien) ---------- */
.entete-section {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}
.entete-section__titre {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}
.entete-section__titre :is(h1, h2, h3) {
  max-width: 24ch;
}
.entete-section__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-3);
}
@media (min-width: 64rem) {
  /* Titre et chapô alignés en haut : la première ligne du chapô part du haut du titre, quelle que soit leur longueur */
  .entete-section--scindee {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
    gap: var(--e-8);
  }
}
.entete-section--centree {
  align-items: center;
  text-align: center;
}
.entete-section--centree .entete-section__titre,
.entete-section--centree .entete-section__aside {
  align-items: center;
}

/* ---------- Réassurance : pictogramme trait + phrase courte, sans encadré ---------- */
.reassurance__liste {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-5);
}
.reassurance__item {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
}
.reassurance__icone {
  color: var(--texte);
}
.reassurance__corps {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
}
.reassurance__titre {
  font-weight: 600;
  line-height: 1.4;
}
.reassurance__titre a {
  text-decoration: none;
}
.reassurance__titre a:hover {
  text-decoration: underline;
}
.reassurance__texte {
  color: var(--texte-2);
  font-size: var(--fs-petit);
  line-height: 1.5;
}
.reassurance--bandeau {
  padding-block: var(--e-6);
  border-block: 1px solid var(--trait);
}
@media (min-width: 48rem) {
  .reassurance--bandeau .reassurance__liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e-5) var(--gap-grille);
  }
}
@media (min-width: 80rem) {
  .reassurance--bandeau .reassurance__liste {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.reassurance--liste .reassurance__liste {
  gap: var(--e-4);
}

/* ---------- FAQ (<details> natifs) ---------- */
.faq {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--trait);
}
.faq__titre {
  padding-bottom: var(--e-5);
}
.faq__item {
  border-bottom: 1px solid var(--trait);
}
.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  min-height: var(--hauteur-champ);
  padding-block: var(--e-4);
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}
.faq__question::-webkit-details-marker {
  display: none;
}
.faq__question:hover span:first-child {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.faq__signe {
  position: relative;
  flex: none;
  width: var(--e-4);
  height: var(--e-4);
}
.faq__signe::before,
.faq__signe::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--duree-etat) var(--courbe);
}
.faq__signe::after {
  transform: rotate(90deg);
}
.faq__item[open] .faq__signe::after {
  transform: rotate(0deg);
}
.faq__reponse {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  max-width: var(--mesure);
  padding-bottom: var(--e-5);
  color: var(--texte-2);
}
.faq__item::details-content {
  block-size: 0;
  overflow-y: clip;
  transition: block-size var(--duree-etat) var(--courbe), content-visibility var(--duree-etat) allow-discrete;
}
.faq__item[open]::details-content {
  block-size: auto;
}

/* ---------- Champs : libellé au-dessus, 52 px, rayon 8 px ---------- */
.champ {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  min-width: 0;
}
.champ__label {
  display: block;
  font-size: var(--fs-petit);
  font-weight: 500;
  line-height: 1.3;
}
.champ__saisie {
  width: 100%;
  min-width: 0;
  min-height: var(--hauteur-champ);
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--trait);
  border-radius: var(--r-champ);
  background: var(--blanc);
  color: var(--encre);
  line-height: 1.3;
  transition: border-color var(--duree-retour) var(--courbe);
}
.champ__saisie::placeholder {
  color: var(--gris-pierre);
  opacity: 0.8;
}
.champ__saisie:hover {
  border-color: var(--gris-pierre);
}
.champ__saisie:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-color: var(--texte);
}
.champ__saisie[aria-invalid="true"] {
  border-color: var(--erreur);
}
.champ__erreur {
  color: var(--erreur);
  font-size: var(--fs-petit);
  font-weight: 500;
}
.champ__erreur:empty {
  display: none;
}
.champ__aide {
  color: var(--texte-2);
  font-size: var(--fs-petit);
  line-height: 1.45;
}
.champ__facultatif {
  color: var(--texte-2);
  font-weight: 400;
}
.ton-sapin .champ__saisie {
  border-color: transparent;
}
.champ__saisie:is(input, select) {
  height: var(--hauteur-champ);
}
.champ__saisie--grand {
  font-size: var(--fs-h3);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.champ__avec-unite {
  position: relative;
}
.champ__avec-unite .champ__saisie {
  padding-right: var(--e-8);
}
.champ__unite {
  position: absolute;
  top: 50%;
  right: var(--e-4);
  transform: translateY(-50%);
  color: var(--gris-pierre);
  pointer-events: none;
}
.champ__select-enveloppe {
  position: relative;
}
.champ__select-enveloppe::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--e-4);
  width: var(--e-2);
  height: var(--e-2);
  border-right: 1.5px solid var(--encre);
  border-bottom: 1.5px solid var(--encre);
  transform: translateY(-75%) rotate(45deg);
  pointer-events: none;
}
.champ__select {
  appearance: none;
  padding-right: var(--e-8);
  cursor: pointer;
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.champ-groupe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}
.champ-groupe .champ__saisie {
  flex: 1 1 12rem;
}
.champ-groupe .bouton {
  flex: 0 0 auto;
}
/* Case à cocher native (consentements) : case à gauche, texte à droite, lien souligné */
.case {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  align-items: start;
  gap: var(--e-3);
  font-size: var(--fs-petit);
  line-height: 1.5;
  cursor: pointer;
}
.case__saisie {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  translate: 0 0.0625rem;
  accent-color: var(--action);
}
.case__saisie:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.case__saisie[aria-invalid="true"] {
  outline: 2px solid var(--erreur);
  outline-offset: 2px;
}
.case__texte a {
  color: var(--lien);
}
.form-statut:empty {
  display: none;
}
.form-statut {
  font-size: var(--fs-petit);
  font-weight: 500;
}
.form-statut.is-succes {
  color: var(--succes);
}
.form-statut.is-erreur {
  color: var(--erreur);
}
.ton-sapin .form-statut.is-succes,
.ton-sapin .form-statut.is-erreur {
  color: var(--chene-clair);
}

/* Formulaire de recherche (searchForm : page de recherche, page d'erreur) : champ et bouton sur une ligne */
.recherche {
  width: 100%;
}
.recherche .champ-groupe .champ__saisie {
  flex-basis: 14rem;
}
@media (max-width: 29.99rem) {
  .recherche .champ-groupe .bouton {
    flex: 1 1 100%;
  }
}

/* ---------- Lettre d'information et liste d'attente ---------- */
.newsletter {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-6);
}
.newsletter__texte {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}
.newsletter__titre {
  font-size: var(--fs-h2);
}
.newsletter__chapo {
  max-width: 48ch;
  color: var(--texte-2);
}
.newsletter__form {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}
.newsletter__mention {
  color: var(--texte-2);
  font-size: var(--fs-petit);
}
.newsletter--pied {
  gap: var(--e-5);
}
.newsletter--pied .newsletter__titre {
  font-size: var(--fs-h3);
}
.newsletter--pied .newsletter__chapo {
  font-size: var(--fs-petit);
}
@media (min-width: 64rem) {
  .newsletter--bloc {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    gap: var(--e-9);
  }
}
.attente {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

/* ---------- Quantité (− champ +) ---------- */
.quantite {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}
.quantite__controle {
  display: inline-grid;
  grid-template-columns: var(--hauteur-champ) minmax(3.5rem, 5rem) var(--hauteur-champ);
  align-items: stretch;
  width: max-content;
  border: 1px solid var(--trait);
  border-radius: var(--r-pilule);
  background: var(--blanc);
  color: var(--encre);
}
.quantite__bouton {
  display: grid;
  place-items: center;
  min-height: var(--hauteur-champ);
  padding: 0;
  border: 0;
  border-radius: var(--r-pilule);
  background: transparent;
}
.quantite__bouton:hover {
  background: var(--lin);
}
.quantite__saisie {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.quantite__saisie:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}
.quantite__aide {
  color: var(--texte-2);
  font-size: var(--fs-petit);
}
.quantite--compacte .quantite__controle {
  grid-template-columns: var(--hauteur-compacte) 3rem var(--hauteur-compacte);
}
.quantite--compacte .quantite__bouton {
  min-height: var(--hauteur-compacte);
}

/* ---------- Calculateur de surface (panneau) ---------- */
.calculateur {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-6);
  padding: var(--pad-panneau);
  border-radius: var(--r-champ);
  background: var(--surface);
  color: var(--texte);
}
.calculateur__titre {
  font-size: var(--fs-h3);
}
.calculateur__saisie {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-4);
}
@media (min-width: 48rem) {
  .calculateur__saisie {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: end;
  }
}
.calculateur__resultat {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}
.calculateur__boites {
  display: flex;
  align-items: baseline;
  gap: var(--e-2);
}
.calculateur__nombre {
  font-family: var(--police-titre);
  font-size: var(--fs-h1);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.calculateur__unite {
  font-size: var(--fs-chapo);
  color: var(--texte-2);
}
.calculateur__detail {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--trait);
}
.calculateur__detail > div {
  display: flex;
  justify-content: space-between;
  gap: var(--e-4);
  padding-block: var(--e-3);
  border-bottom: 1px solid var(--trait);
}
.calculateur__detail dt {
  color: var(--texte-2);
}
.calculateur__detail dd {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.calculateur__total dd {
  font-size: var(--fs-chapo);
}
.calculateur__invite {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}
.calculateur__invite-titre {
  font-size: var(--fs-petit);
  font-weight: 500;
}
.calculateur__invite-texte {
  max-width: 48ch;
  color: var(--texte-2);
  font-size: var(--fs-petit);
}
/* Les surfaces d'exemple n'existent qu'avec le script (le formulaire porte alors data-ready) */
.calculateur__exemples {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  padding-top: var(--e-2);
  font-size: var(--fs-petit);
}
.calculateur[data-ready] .calculateur__exemples {
  display: flex;
}
.calculateur__exemples-label {
  color: var(--texte-2);
}
.calculateur__exemple {
  min-height: var(--hauteur-compacte);
  padding: 0 var(--e-4);
  border: 1px solid var(--trait);
  border-radius: var(--r-pilule);
  background: var(--fond);
  color: var(--texte);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.calculateur__exemple:hover {
  border-color: var(--texte);
}
.calculateur.is-vide .calculateur__detail dd:not([data-calc-waste]) {
  color: var(--texte-2);
  font-weight: 500;
}
@media (prefers-reduced-motion: no-preference) {
  .calculateur .apparait {
    animation: apparition var(--duree-etat) var(--courbe);
  }
}
@keyframes apparition {
  from { opacity: 0; }
}
.calculateur__ajout {
  width: 100%;
}
.calculateur__note {
  color: var(--texte-2);
  font-size: var(--fs-mini);
}
/* Variante compacte : encart sur fond de page posé dans un autre panneau (colonne d'achat de la fiche produit).
   Padding fixe --e-5 (panneau imbriqué), une colonne, chiffres et détail resserrés. */
.calculateur--compact {
  gap: var(--e-4);
  padding: var(--e-5);
  background: var(--fond);
}
.calculateur--compact .calculateur__titre {
  font-size: var(--fs-carte);
}
.calculateur--compact .calculateur__saisie {
  grid-template-columns: minmax(0, 1fr);
}
.calculateur--compact .calculateur__nombre {
  font-size: var(--fs-h2);
}
.calculateur--compact .calculateur__detail {
  font-size: var(--fs-petit);
}
.calculateur--compact .calculateur__detail > div {
  padding-block: var(--e-2);
}
.calculateur--compact .calculateur__total dd {
  font-size: var(--fs-texte);
}
.calculateur--compact .calculateur__exemple {
  background: var(--surface);
}

/* ---------- Pastilles : filtres, tri, rubriques (liste de liens en pilule, l'active en action) ---------- */
.pastilles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}
.pastille {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--hauteur-compacte);
  padding: 0 var(--e-4);
  border: 1px solid var(--trait);
  border-radius: var(--r-pilule);
  background: var(--surface);
  color: var(--texte);
  font-size: var(--fs-petit);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--duree-retour) var(--courbe), background-color var(--duree-retour) var(--courbe);
}
.pastille:hover {
  border-color: var(--texte);
}
.pastille[aria-current] {
  border-color: var(--action);
  background: var(--action);
  color: var(--action-texte);
}
.pastille__compte {
  color: var(--texte-2);
  font-variant-numeric: tabular-nums;
}
.pastille[aria-current] .pastille__compte {
  color: inherit;
  opacity: 0.75;
}

/* ---------- Fil d'Ariane ---------- */
.fil {
  font-size: var(--fs-petit);
}
.fil__liste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-1) var(--e-2);
}
.fil__item {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  color: var(--texte-2);
}
.fil__item + .fil__item::before {
  content: "/";
  color: var(--trait);
}
.fil__item a {
  color: var(--texte-2);
  text-decoration: none;
}
.fil__item a:hover {
  color: var(--texte);
  text-decoration: underline;
}
.fil__item [aria-current] {
  color: var(--texte);
}
/* Mobile : le fil tient sur une ligne. Au-delà de deux niveaux, la page courante (déjà nommée par le H1) est omise ;
   sinon elle est abrégée par des points de suspension si elle ne tient pas. */
@media (max-width: 47.99rem) {
  .fil__item:last-child:nth-child(n + 3) {
    display: none;
  }
  .fil__liste {
    flex-wrap: nowrap;
  }
  .fil__item {
    flex: none;
    white-space: nowrap;
  }
  .fil__item:last-child {
    flex: 0 1 auto;
    min-width: 0;
  }
  .fil__item [aria-current] {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ---------- État vide ---------- */
.etat-vide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-4);
  max-width: 36rem;
  margin-inline: auto;
  padding: var(--pad-panneau);
  text-align: center;
}
.etat-vide__icone {
  color: var(--chene);
}
.etat-vide__titre {
  font-size: var(--fs-h2);
}
.etat-vide__texte {
  color: var(--texte-2);
}
.etat-vide__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e-3);
  padding-top: var(--e-2);
}
/* Mobile : actions empilées, pleine largeur, de même taille */
@media (max-width: 47.99rem) {
  .etat-vide__actions {
    flex-direction: column;
    align-self: stretch;
  }
}

/* ---------- Pagination ---------- */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
}
.pagination__liste {
  display: flex;
  align-items: center;
  gap: var(--e-1);
}
.pagination__page,
.pagination__fleche {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-width: var(--hauteur-compacte);
  min-height: var(--hauteur-compacte);
  padding-inline: var(--e-3);
  border-radius: var(--r-pilule);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.pagination__page:hover,
.pagination__fleche:hover {
  background: color-mix(in srgb, var(--texte) 6%, transparent);
}
.pagination__page.is-courante {
  background: var(--action);
  color: var(--action-texte);
}
.pagination__fleche.is-inactif {
  color: var(--texte-2);
  opacity: 0.5;
}
.pagination__ellipse {
  padding-inline: var(--e-2);
  color: var(--texte-2);
}
@media (max-width: 30rem) {
  .pagination__fleche span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
}

/* ---------- Panneau : fond --surface, rayon 8 px, padding --e-5 puis --e-7 ---------- */
.panneau {
  padding: var(--pad-panneau);
  border-radius: var(--r-champ);
  background: var(--surface);
}
.panneau--borde {
  background: transparent;
  border: 1px solid var(--trait);
}

/* ---------- Avis clients ---------- */
.avis-clients__synthese {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3);
}
.avis-clients__moyenne {
  font-weight: 600;
  font-size: var(--fs-chapo);
}
.avis-clients__sur,
.avis-clients__nombre,
.avis-clients__mention {
  color: var(--texte-2);
  font-size: var(--fs-petit);
}
.avis-clients__corps {
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
}
.avis-clients__liste {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--gap-grille);
}
@media (min-width: 64rem) {
  .avis-clients__liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 80rem) {
  .avis-clients__liste:has(> :nth-child(3)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.avis {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--pad-panneau);
  border-radius: var(--r-champ);
  background: var(--surface);
}
.avis__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-3);
}
.avis__auteur {
  font-weight: 600;
}
.avis__date {
  color: var(--texte-2);
  font-size: var(--fs-petit);
}
.avis__texte {
  font-family: var(--police-titre);
  font-size: var(--fs-chapo);
  line-height: 1.45;
}
.avis__reponse {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  padding-left: var(--e-4);
  border-left: 2px solid var(--chene);
  color: var(--texte-2);
  font-size: var(--fs-petit);
}
.avis__reponse-titre {
  color: var(--texte);
  font-weight: 600;
}
.avis-note {
  display: inline-flex;
  gap: 1px;
  color: var(--trait);
  letter-spacing: 0;
}
.avis-note__etoile.is-pleine {
  color: var(--chene);
}
/* Demi-étoile : moitié gauche chêne, moitié droite filet (4,5 ne s'affiche pas comme 5) */
.avis-note__etoile.is-demi {
  background: linear-gradient(90deg, var(--chene) 50%, var(--trait) 50%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Tiroir panier (<dialog>, panneau blanc à droite) ---------- */
.tiroir {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(28rem, 100vw);
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--blanc);
  color: var(--encre);
  box-shadow: var(--ombre-flottante);
  transform: translateX(100%);
  transition: transform var(--duree-etat) var(--courbe), overlay var(--duree-etat) allow-discrete, display var(--duree-etat) allow-discrete;
}
.tiroir[open] {
  transform: none;
}
@starting-style {
  .tiroir[open] {
    transform: translateX(100%);
  }
}
.tiroir::backdrop {
  background: rgb(29 36 33 / 0.4);
}
.tiroir__panneau {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.tiroir__haut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-3) var(--e-3) var(--e-3) var(--e-5);
  border-bottom: 1px solid var(--filet);
}
.tiroir__titre {
  font-size: var(--fs-h3);
}
.tiroir__statut:empty {
  display: none;
}
.tiroir__statut {
  display: flex;
  align-items: center;
  gap: var(--e-1);
  padding: var(--e-3) var(--e-5);
  border-bottom: 1px solid var(--filet);
  color: var(--succes);
  font-size: var(--fs-petit);
  font-weight: 600;
}
.tiroir__corps {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--e-2) var(--e-5);
}
.tiroir__chargement,
.tiroir__vide {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-4);
  padding-block: var(--e-5);
  color: var(--gris-pierre);
}
/* Alertes du devis (mêmes messages que la page panier) : encadré lin, filet rouge si la commande est bloquée */
.tiroir__alertes > .form-statut {
  padding: var(--e-4) var(--e-5);
  border-radius: var(--r-champ);
  background: var(--lin);
  color: var(--encre);
}
.tiroir__alertes > .form-statut.is-erreur {
  background: var(--blanc);
  box-shadow: inset 0 0 0 1px var(--erreur);
  color: var(--erreur);
}
.ligne-panier {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--e-4);
  padding-block: var(--e-4);
  border-bottom: 1px solid var(--filet);
}
.ligne-panier__image {
  display: block;
  width: 4.5rem;
  aspect-ratio: 4 / 5;
  height: auto;
  background: var(--lin);
  object-fit: cover;
}
.ligne-panier__infos {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-2);
  min-width: 0;
}
.ligne-panier__nom {
  font-family: var(--police-titre);
  font-size: var(--fs-carte);
  line-height: 1.2;
  text-decoration: none;
}
.ligne-panier__nom:hover {
  text-decoration: underline;
}
.ligne-panier__detail {
  color: var(--gris-pierre);
  font-size: var(--fs-petit);
}
.ligne-panier__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  width: 100%;
}
.ligne-panier__total {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ligne-panier__retirer {
  min-height: var(--hauteur-compacte);
  padding: 0;
  border: 0;
  background: none;
  color: var(--gris-pierre);
  font-size: var(--fs-petit);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.ligne-panier__retirer:hover {
  color: var(--encre);
}
.tiroir__pied {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  padding: var(--e-5);
  border-top: 1px solid var(--filet);
  background: var(--platre);
}
.tiroir__totaux > div {
  display: flex;
  justify-content: space-between;
  gap: var(--e-4);
  font-size: var(--fs-chapo);
}
.tiroir__totaux dd {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.tiroir__note {
  color: var(--gris-pierre);
  font-size: var(--fs-petit);
}
.tiroir__actions {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}