/* ── FIESTA — Site client (catalogue) ─────────────────────────────────────────
   Mise en forme alignée sur mafiesta.com : minimaliste, élégant, fond blanc,
   texte gris/charbon, typographie serif (titres/nav en majuscules espacées),
   beaucoup d'air, un seul accent couleur = le rose de la marque. */

/* ── MADE Mirage — police de la marque ───────────────────────────────────────
   Police COMMERCIALE (MadeType) : les fichiers ne sont pas dans le dépôt, il faut
   acheter la licence *webfont* et les déposer dans `fonts/` (voir fonts/LISEZMOI.md).
   Tant qu'ils manquent, `src` échoue et le navigateur descend SILENCIEUSEMENT la pile
   de `--serif` / `--body` : on retrouve exactement le rendu actuel, rien ne casse.
   C'est aussi pour ça que les liens Google Fonts restent dans index.html. */
@font-face {
  font-family: 'MADE Mirage';
  src: url('../fonts/made-mirage-regular.woff2') format('woff2'),
       url('../fonts/made-mirage-regular.woff')  format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'MADE Mirage';
  src: url('../fonts/made-mirage-medium.woff2') format('woff2'),
       url('../fonts/made-mirage-medium.woff')  format('woff');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'MADE Mirage';
  src: url('../fonts/made-mirage-bold.woff2') format('woff2'),
       url('../fonts/made-mirage-bold.woff')  format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --bg:       #ffffff;
  --bg-soft:  #fbfaf9;
  --ink:      #3a3a3a;   /* gris charbon (texte) */
  --ink-2:    #5a5a5a;
  --muted:    #9a9a9a;   /* gris clair */
  --line:     #ececec;
  --rose:     #c2185b;   /* rose de la marque (logo) — accent, à petites doses */
  --rose-dk:  #9e1449;
  --vert:     #2e7d32;   /* ce qui est acquis : remise obtenue, étape franchie */
  /* MADE Mirage en tête des deux piles ; les Garamond restent en repli tant que les
     fichiers sous licence ne sont pas déposés. */
  --serif:    'MADE Mirage', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --body:     'MADE Mirage', 'EB Garamond', Georgia, serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Les contrôles de formulaire ne suivent PAS la police du document : sans cette
   règle, la recherche du catalogue ou un bouton reste dans la police du navigateur
   — du sans-serif système au milieu d'une page en MADE Mirage. Seule la FAMILLE est
   héritée : hériter aussi la taille casserait les champs calibrés à 16 px (en
   dessous, iOS zoome à la mise au point). */
input, select, textarea, button { font-family: inherit; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 26px; }

/* ── En-tête ─────────────────────────────────────────────────────────────── */
.hdr { background: var(--bg); border-bottom: 1px solid var(--line); }
.hdr-top {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 16px; padding: 20px 26px;
}
.hdr-logo { justify-self: center; }
.hdr-logo img { height: 92px; width: auto; }
.hdr-spacer { display: block; }

.hdr-right { justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.hdr-icons { display: flex; align-items: center; gap: 22px; color: var(--ink); }
.ic {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 2px; cursor: pointer; color: var(--ink);
  text-decoration: none; transition: color .15s;
}
.ic:hover { color: var(--rose); }
.ic-cart .cart-badge {
  position: absolute; top: -6px; right: -9px; min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--muted); color: #fff; border-radius: 20px;
  font-family: var(--body); font-size: 10px; line-height: 16px; text-align: center;
}
.hdr-links { display: flex; gap: 26px; }
.hdr-links a {
  font-family: var(--serif); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-2); text-decoration: none; transition: color .15s;
}
.hdr-links a:hover { color: var(--rose); }

/* Menu déroulant « Programme Étoiles » — tout en CSS, aucun JS : ces liens vivent
   dans le HTML statique de chaque page, un survol suffit. `focus-within` ouvre le
   même menu au clavier. Le conteneur enveloppe le lien ET le panneau, donc passer
   de l'un à l'autre ne referme rien (même principe que le ruban de sous-catégories). */
.hdr-menu { position: relative; display: inline-flex; }
.hdr-menu-pop {
  position: absolute; top: 100%; right: 0; z-index: 70; min-width: 190px;
  display: flex; flex-direction: column; padding: 8px 0; margin-top: 10px;
  background: #fff; border: 1px solid var(--line); box-shadow: 0 14px 30px rgba(0, 0, 0, .1);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
/* Pont invisible entre le lien et le panneau : sans lui, la marge de 10px est une
   zone morte où le survol se perd et le menu se referme sous le curseur. */
.hdr-menu-pop::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.hdr-menu:hover .hdr-menu-pop,
.hdr-menu:focus-within .hdr-menu-pop { opacity: 1; visibility: visible; transform: none; }
.hdr-menu-pop a {
  padding: 8px 20px; font-size: 12.5px; letter-spacing: .1em; white-space: nowrap;
  transition: color .15s, background .15s;
}
.hdr-menu-pop a:hover { color: var(--rose); background: var(--bg-soft); }

/* Nav catégories */
.hdr-nav { border-top: 1px solid var(--line); }
/* Une seule ligne, toujours : « Accueil » et les catégories ne doivent jamais se
   scinder. Trois pièces pour y arriver sans rien casser —
   1. `nowrap` : c'est lui qui garantit la ligne unique ;
   2. taille et gouttière en `clamp()` : la barre se resserre avec la fenêtre au lieu
      de déborder, ce qui suffit à faire tenir les 7 entrées actuelles dès ~1000 px ;
   3. `overflow-x: auto` : filet de sécurité. Les catégories viennent de la base — le
      jour où une 8e apparaît, la barre défile au lieu de repasser sur deux lignes.
   `safe center` évite le piège classique du centrage : avec `center` seul, un contenu
   plus large que le conteneur déborde des DEUX côtés et le début devient
   inatteignable au défilement. La déclaration `center` juste avant sert de repli aux
   navigateurs qui ignorent le mot-clé `safe`. */
.nav-inner {
  display: flex; align-items: center; flex-wrap: nowrap; overflow-x: auto;
  justify-content: center;
  justify-content: safe center;
  gap: clamp(12px, 1.7vw, 22px); padding: 15px 26px;
  -webkit-overflow-scrolling: touch;
}
.navlink {
  font-family: var(--serif); font-size: clamp(12px, 1.15vw, 15px); font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink); text-decoration: none;
  padding: 4px 2px; border-bottom: 2px solid transparent; white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.navlink:hover { color: var(--rose); }
.navlink.active { color: var(--rose); border-bottom-color: var(--rose); }
.nav-zone.subnav-open .navlink.has-sub:hover { border-bottom-color: var(--rose); }

/* Ruban de sous-catégories — en absolu sous l'en-tête : il recouvre le catalogue
   au lieu de le pousser vers le bas, donc aucun sursaut de mise en page. */
.nav-zone { position: relative; }
.subnav {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
  background: var(--bg-soft); border-bottom: 1px solid var(--line);
  box-shadow: 0 14px 26px rgba(0, 0, 0, .07);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav-zone.subnav-open .subnav { opacity: 1; visibility: visible; transform: none; }
.subnav-inner {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 6px 26px; padding: 14px 26px;
}
.sublink {
  font-family: var(--serif); font-size: 15px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-2); text-decoration: none;
  padding: 4px 2px; border-bottom: 1px solid transparent; white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.sublink:hover { color: var(--rose); border-bottom-color: var(--rose); }
.sublink.active { color: var(--rose); font-weight: 600; border-bottom-color: var(--rose); }

/* ── Accueil / catalogue : une vue à la fois ─────────────────────────────────
   Le basculement est porté par une classe du <body> (app.js › majVue). Poser la
   classe sur le body plutôt que de manipuler chaque bloc évite l'écran mixte
   pendant le chargement : la première frame est déjà la bonne. */
body.vue-accueil #hero,
body.vue-accueil #catalogue { display: none; }
body.vue-catalogue #accueil { display: none; }

/* ── Page « VOTRE PANIER » ────────────────────────────────────────────────────
   `vue-panier` est une SURCOUCHE : elle masque accueil, bandeau et catalogue quelle
   que soit l'autre classe de vue, et toute navigation la retire (app.js › majVue). */
/* Les deux étapes du tunnel sont masquées par défaut et révélées par leur classe.
   Les `display: block` viennent AVANT les masquages : à spécificité égale (une classe
   + un id), c'est la dernière règle qui gagne, donc si les deux classes se retrouvaient
   posées ensemble par erreur, le masquage l'emporterait et on ne verrait jamais deux
   pages superposées. Le JS garantit déjà l'exclusivité — ceci est le filet. */
#panierPage, #personnaliserPage, #confirmerPage { display: none; }
body.vue-panier        #panierPage        { display: block; }
body.vue-personnaliser #personnaliserPage { display: block; }
body.vue-confirmer     #confirmerPage     { display: block; }
body.vue-panier #accueil,
body.vue-panier #hero,
body.vue-panier #catalogue,
body.vue-personnaliser #accueil,
body.vue-personnaliser #hero,
body.vue-personnaliser #catalogue,
body.vue-personnaliser #panierPage,
body.vue-confirmer #accueil,
body.vue-confirmer #hero,
body.vue-confirmer #catalogue,
body.vue-confirmer #panierPage,
body.vue-confirmer #personnaliserPage { display: none; }

/* ── Étape 3 : template de devis (calqué sur #page-facture de l'app interne) ── */
.con-actions { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.con-imprimer {
  padding: 9px 18px; background: none; border: 1px solid var(--line); border-radius: 2px;
  cursor: pointer; color: var(--ink-2); font-family: var(--serif); font-size: 14px;
  transition: border-color .15s, color .15s;
}
.con-imprimer:hover { border-color: var(--rose); color: var(--rose); }
.facture-paper {
  background: #fff; border: 1px solid var(--line); padding: 34px 32px 28px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .04);
}
.facture-entete { margin-bottom: 26px; }
.facture-logo { height: 64px; width: auto; }
.facture-infos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 26px; }
.fi-row { display: flex; flex-direction: column; gap: 1px; margin-bottom: 9px; }
.fi-label {
  font-family: var(--serif); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.fi-value { font-size: 15px; color: var(--ink); line-height: 1.35; }
/* Stylo d'édition : discret au repos, rose au survol de la ligne. */
.fi-stylo {
  border: 0; background: none; padding: 0; margin-right: 5px; cursor: pointer;
  color: #cfcac4; font-size: 12px; line-height: 1; transition: color .15s;
}
.fi-row:hover .fi-stylo { color: var(--muted); }
.fi-stylo:hover, .fi-stylo:focus-visible { color: var(--rose); }
/* Édition sur place */
.fi-edit { display: flex; align-items: center; gap: 5px; }
.fi-edit input {
  flex: 1; min-width: 0; border: 1px solid var(--ink); border-radius: 2px; padding: 5px 8px;
  background: #fff; color: var(--ink); font-family: var(--body); font-size: 15px; outline: none;
}
.fi-edit button {
  flex: 0 0 auto; width: 26px; height: 26px; padding: 0; border: 1px solid var(--line);
  border-radius: 2px; background: #fff; cursor: pointer; font-size: 14px; line-height: 1;
  color: var(--ink-2); transition: border-color .15s, color .15s;
}
.fi-edit button[type=submit]:hover { border-color: var(--vert); color: var(--vert); }
.fi-edit button[data-con]:hover { border-color: var(--rose); color: var(--rose); }
.fi-edit button:disabled { opacity: .5; cursor: default; }
.fi-err { flex: 1 0 100%; font-size: 12.5px; color: var(--rose-dk); }
/* À l'impression, aucun stylo : c'est un document, pas un formulaire. */
@media print { .fi-stylo { display: none !important; } }
.facture-type {
  font-family: var(--serif); font-size: 21px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--rose); margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.facture-table { width: 100%; border-collapse: collapse; }
.facture-table th {
  text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--ink-2);
  font-family: var(--serif); font-weight: 600; font-size: 12.5px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
}
.facture-table td { padding: 9px 8px; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--ink-2); }
.facture-table .r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.facture-table .icon-cell { width: 42px; text-align: center; font-size: 17px; }
.facture-table .icon-cell img { width: 34px; height: 34px; object-fit: cover; border: 1px solid var(--line); }
.facture-transport td { color: var(--muted); }
/* Composants d'un pack : rattachés visuellement à leur ligne parente (fond très léger,
   filet interne discret, nom en retrait), et imprimés comme le reste du devis. */
.facture-comp td { background: #fbfaf8; border-bottom: 1px solid #f4f1ec; padding-top: 6px; padding-bottom: 6px; }
.facture-comp td:first-child { color: var(--muted); font-size: 13.5px; }
.facture-comp .icon-cell img { width: 28px; height: 28px; }
.facture-comp-nom { padding-left: 20px !important; font-size: 14px; color: var(--muted); position: relative; }
.facture-comp-nom::before { content: '└'; position: absolute; left: 6px; color: #d8d0c6; }
.facture-totals-wrap { display: flex; justify-content: flex-end; margin-top: 18px; }
.facture-totals { min-width: 320px; max-width: 100%; }
.facture-totals .row {
  display: flex; justify-content: space-between; gap: 18px; padding: 8px 0;
  border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: 15.5px; color: var(--ink-2);
}
.facture-totals .row span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.facture-totals .remise { color: var(--vert); }
.facture-totals .net { font-weight: 700; font-size: 18px; color: var(--ink); border-bottom: 0; }
.facture-note { margin-top: 22px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.con-err:empty { display: none; }
.con-err {
  margin: 14px 0 0; padding: 11px 13px; background: #fdecef; border: 1px solid #f3c6d3;
  border-radius: 2px; font-size: 14.5px; color: var(--rose-dk);
}
.con-ok { border: 1px solid var(--line); margin-top: 20px; }

/* « Confirmer et payer » */
.con-titre {
  margin: 34px 0 16px; text-align: center; font-family: var(--serif); font-weight: 400;
  font-size: clamp(20px, 2.6vw, 26px); letter-spacing: .04em; color: var(--ink);
}
.con-boutons { display: flex; gap: 14px; flex-wrap: wrap; }
.con-btn {
  flex: 1 1 240px; padding: 15px; background: none; border: 1px solid var(--line);
  border-radius: 2px; cursor: pointer; color: var(--ink-2);
  font-family: var(--serif); font-size: 17px; letter-spacing: .02em;
  transition: background .15s, color .15s, border-color .15s;
}
.con-btn:hover { border-color: var(--ink); color: var(--ink); }
/* Le paiement est l'action principale : seul bouton coloré. */
.con-btn--payer { border-color: var(--rose); color: var(--rose); }
.con-btn--payer:hover { background: var(--rose); border-color: var(--rose); color: #fff; }
.con-btn:disabled { opacity: .55; cursor: default; background: none; }

/* Bandeau d'avis global — fixe, donc indépendant de la vue affichée. */
.avis {
  position: fixed; top: 0; left: 0; right: 0; z-index: 150;
  padding: 14px 22px; text-align: center; cursor: pointer;
  background: #f1f8f2; border-bottom: 1px solid #c8e6c9; color: var(--vert);
  font-family: var(--serif); font-size: 16px; letter-spacing: .02em;
  transform: translateY(-100%); transition: transform .3s ease;
}
.avis.visible { transform: none; }
@media print { .avis, .con-titre, .con-boutons { display: none !important; } }

/* À l'impression : que le devis, sans le chrome du site. */
@media print {
  .hdr, .ft, .con-actions, .pp-steps, .pp-surtitre, .pp-titre,
  .pp-suivant, .cart-panel, .cart-overlay { display: none !important; }
  .facture-paper { border: 0; box-shadow: none; padding: 0; }
}

@media (max-width: 700px) {
  .facture-infos { grid-template-columns: 1fr; gap: 4px; }
  .facture-paper { padding: 20px 16px; }
  .facture-totals { min-width: 0; width: 100%; }
}

/* ── Étape 2 « Personnaliser » : libellés à gauche, champs à droite ────────── */
.pp-surtitre {
  text-align: center; margin: 52px 0 -4px; color: var(--muted);
  font-family: var(--serif); font-size: clamp(17px, 2vw, 21px); letter-spacing: .04em;
}
.pp-surtitre + .pp-titre { margin-top: 0; }
.per-bloc { max-width: 760px; margin: 0 auto 34px; }
.per-bloc h2 {
  margin: 0 0 22px; font-family: var(--serif); font-weight: 400; letter-spacing: .02em;
  font-size: clamp(20px, 2.6vw, 26px); color: var(--ink-2);
}
.per-ligne { display: grid; grid-template-columns: 240px 1fr; gap: 18px; align-items: center; margin-bottom: 16px; }
.per-ligne > label { font-family: var(--serif); font-size: 16.5px; color: var(--ink-2); }
.per-champ input {
  width: 100%; border: 1px solid var(--line); border-radius: 2px; padding: 12px 13px;
  background: #fff; color: var(--ink); font-family: var(--body); font-size: 16px;
  outline: none; transition: border-color .15s;
}
.per-champ input:focus { border-color: var(--ink); }
/* Œil : superposé au champ, donc le padding droit de l'input lui laisse la place. */
.per-pass { position: relative; }
.per-pass input { padding-right: 44px; }
.per-pass button {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 32px; height: 32px; border: 0; background: none; cursor: pointer;
  color: var(--muted); transition: color .15s;
}
.per-pass button::before { content: '👁'; font-size: 16px; }
.per-pass button.vu, .per-pass button:hover { color: var(--rose); }
.per-btn {
  width: 100%; padding: 13px; background: none; border: 1px solid var(--rose);
  border-radius: 2px; cursor: pointer; color: var(--rose);
  font-family: var(--serif); font-size: 17px; letter-spacing: .02em;
  transition: background .15s, color .15s;
}
.per-btn:hover { background: var(--rose); color: #fff; }
.per-btn:disabled { opacity: .55; cursor: default; background: none; color: var(--rose); }
.per-lien {
  border: 0; background: none; padding: 0; cursor: pointer; color: inherit;
  font-family: inherit; font-size: inherit; letter-spacing: inherit;
  transition: color .15s;
}
.per-lien:hover { color: var(--rose); }
.per-err:empty { display: none; }
.per-err { margin: 10px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--rose-dk); }
.per-err.est-ok { color: var(--vert); }
.per-connecte { margin: 0 0 20px; font-family: var(--serif); font-size: 18px; color: var(--ink); }

@media (max-width: 640px) {
  .pp-surtitre { margin-top: 32px; }
  .per-ligne { grid-template-columns: 1fr; gap: 6px; align-items: start; }
}

.pp { padding-bottom: 60px; }
.pp-titre {
  text-align: center; margin: 52px 0 40px; color: var(--muted);
  font-family: var(--serif); font-weight: 400; letter-spacing: .06em;
  text-transform: uppercase; font-size: clamp(30px, 4.4vw, 44px);
}
/* Fil d'étapes : numéro cerclé pour l'étape courante, gris pour les suivantes. */
.pp-steps {
  display: flex; align-items: center; gap: 16px;
  list-style: none; margin: 0 0 40px; padding: 0; flex-wrap: wrap;
}
/* Chaque étape occupe une part égale et pousse un trait en pointillés jusqu'à la
   suivante — c'est lui qui donne le sens de lecture 1 → 2 → 3. La dernière ne
   s'étire pas : sans ça, son libellé flotterait loin de sa pastille. */
.pp-steps li {
  flex: 1; display: flex; align-items: center; gap: 11px;
  font-family: var(--serif); font-size: 17px; color: var(--muted);
}
.pp-steps li:last-child { flex: 0 0 auto; }
.pp-steps li:not(:last-child)::after {
  content: ''; flex: 1; min-width: 26px; margin-left: 4px;
  border-top: 2px dotted #d5d5d5;
}
/* Segments déjà franchis, en vert comme les étapes qu'ils relient. */
.pp-steps li:has(~ li.actif)::after { border-top-color: var(--vert); }
/* Pastille de l'étape — trois états, lus dans cet ordre par la cascade :
     à venir  → fond gris clair, chiffre noir   (règle de base ci-dessous)
     franchie → fond vert,       chiffre blanc  (:has — une .actif suit)
     courante → fond rouge,      chiffre blanc  (.actif)
   L'ordre compte : `.actif` est déclarée en DERNIER pour que l'étape courante
   l'emporte, les deux sélecteurs ayant la même spécificité (0,2,1).
   `:has()` non supporté → les étapes franchies restent grises : on perd le repère
   de progression, rien ne casse. */
.pp-steps li span {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 30px; height: 30px; border-radius: 50%; font-size: 15px;
  background: #e8e8e8; color: var(--ink);
}
.pp-steps li:has(~ li.actif) { color: var(--ink-2); }
.pp-steps li:has(~ li.actif) span { background: var(--vert); color: #fff; }
.pp-steps li.actif { color: var(--ink); }
.pp-steps li.actif span { background: var(--rose); color: #fff; }

/* Tableau : défile horizontalement sur mobile plutôt que de déformer la page. */
.pp-tableau { overflow-x: auto; }
.pp-tableau table { width: 100%; border-collapse: collapse; min-width: 620px; }
.pp-tableau thead th {
  text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line);
  font-family: var(--serif); font-weight: 400; font-size: 16px; color: var(--ink-2);
}
.pp-tableau tbody td { padding: 16px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.pp-fig { width: 74px; }
.pp-fig img { width: 58px; height: 58px; object-fit: cover; border: 1px solid var(--line); }
.pp-ph { font-size: 30px; color: #cfcac4; }
.pp-transport .pp-fig { color: var(--ink-2); }
.pp-nom { font-family: var(--serif); font-size: 16.5px; line-height: 1.35; color: var(--ink-2); }
.pp-tag {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border: 1px solid #f3c6d3;
  background: #fdecef; border-radius: 20px; font-family: var(--body);
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--rose);
}
/* Dépliant de composition d'un Pack & Bundle */
.pp-depli {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-right: 9px; vertical-align: 1px;
  border: 1px solid var(--line); border-radius: 2px; background: #fff;
  color: var(--rose); font-family: var(--body); font-size: 15px; line-height: 1;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.pp-depli:hover { border-color: var(--rose); background: #fdecef; }
.pp-comp > td { padding-top: 0 !important; border-bottom: 1px solid var(--line); }
.pp-comp-titre {
  font-family: var(--serif); font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.pp-comp ul { margin: 0 0 6px; padding: 0; list-style: none; max-width: 520px; }
.pp-comp li {
  display: flex; align-items: center; gap: 12px; padding: 5px 0;
  font-size: 15px; color: var(--ink-2);
}
.pp-comp li + li { border-top: 1px solid #f4f1ec; }
.pp-comp-fig {
  flex: 0 0 auto; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: var(--bg-soft); overflow: hidden;
}
.pp-comp-fig img { width: 100%; height: 100%; object-fit: cover; }
.pp-comp-ph { font-size: 19px; color: #cfcac4; }
.pp-comp-nom { flex: 1; min-width: 0; }
.pp-comp-qty { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp-comp-corps { color: var(--muted); font-size: 14px; }
.pp-comp-vide { color: var(--muted); font-size: 14px; }

.pp-pu, .pp-tot, .pp-qte { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.pp-tot { color: var(--ink); }
.pp-del { width: 46px; text-align: right; }
.pp-del button {
  background: none; border: 0; cursor: pointer; font-size: 18px; color: var(--muted);
  padding: 4px; transition: color .15s;
}
.pp-del button:hover { color: var(--rose); }
/* Quantité : deux chevrons empilés à gauche du champ, comme la référence. */
.pp-qty { display: inline-flex; align-items: center; gap: 8px; }
.pp-qty button {
  width: 26px; height: 26px; border: 1px solid var(--line); background: #fff;
  border-radius: 2px; cursor: pointer; font-size: 15px; line-height: 1; color: var(--ink);
  transition: border-color .15s, color .15s;
}
.pp-qty button:hover { border-color: var(--rose); color: var(--rose); }
.pp-qty-val {
  width: 62px; padding: 7px 6px; text-align: center; border: 1px solid var(--line);
  border-radius: 2px; outline: none; color: var(--ink);
  font-family: var(--body); font-size: 16px; font-variant-numeric: tabular-nums;
}
.pp-qty-val:focus { border-color: var(--ink); }

.pp-promo { display: flex; gap: 0; margin: 26px 0 0; }
.pp-promo input {
  flex: 1; min-width: 0; border: 1px solid var(--line); border-right: 0; border-radius: 2px 0 0 2px;
  padding: 13px 14px; outline: none; color: var(--ink); font-family: var(--body); font-size: 16px;
}
.pp-promo input:focus { border-color: var(--ink); }
.pp-promo button {
  border: 1px solid var(--line); background: var(--bg-soft); border-radius: 0 2px 2px 0;
  padding: 0 24px; cursor: pointer; color: var(--muted);
  font-family: var(--serif); font-size: 15px; transition: color .15s, border-color .15s;
}
.pp-promo button:hover { color: var(--rose); border-color: var(--rose); }
.pp-promo-msg:empty { display: none; }
.pp-promo-msg { margin: 9px 0 0; font-size: 13.5px; color: var(--rose-dk); }
.pp-promo-msg.est-ok { color: var(--vert); }

/* Codes appliqués : une pastille par coupon, retirable individuellement. */
.pp-promo-liste { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.pp-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 6px 4px 12px; border: 1px solid #c8e6c9; background: #f1f8f2;
  border-radius: 20px; font-size: 13.5px; color: var(--vert); white-space: nowrap;
}
.pp-chip button {
  width: 19px; height: 19px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--vert); font-size: 15px; line-height: 1; cursor: pointer;
  transition: background .15s;
}
.pp-chip button:hover { background: #d7ead8; }

/* Ligne de réduction dans le bloc de totaux, avec sa croix de retrait. */
.pp-totaux .pp-remise th, .pp-totaux .pp-remise td { color: var(--vert); }
.pp-totaux .pp-remise button {
  margin-left: 8px; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer;
  transition: background .15s, color .15s;
}
.pp-totaux .pp-remise button:hover { background: #eee; color: var(--rose); }

.pp-etoiles { margin: 26px 0 0; }
.pp-etoiles div {
  padding: 13px 0; border-bottom: 1px solid var(--line);
  font-family: var(--serif); font-size: 16px; color: var(--ink-2);
}
.pp-etoiles strong { color: var(--rose); font-weight: 400; }

.pp-recap-liv {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 20px 0 0; padding: 12px 14px; background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: 2px; font-size: 15px; color: var(--ink-2);
}
.pp-recap-liv .pp-manque { color: var(--rose-dk); }
.pp-recap-liv button {
  margin-left: auto; background: none; border: 1px solid var(--line); border-radius: 2px;
  padding: 7px 15px; cursor: pointer; color: var(--ink-2);
  font-family: var(--serif); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase;
  transition: border-color .15s, color .15s;
}
.pp-recap-liv button:hover { border-color: var(--rose); color: var(--rose); }

.pp-totaux { margin-top: 24px; }
.pp-totaux table { width: 100%; border-collapse: collapse; }
.pp-totaux th, .pp-totaux td {
  padding: 14px 10px; border-bottom: 1px solid var(--line);
  font-family: var(--serif); font-weight: 400; font-size: 17px; color: var(--ink-2);
}
.pp-totaux th { text-align: right; }
.pp-totaux td { text-align: right; width: 30%; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pp-totaux .pp-net th, .pp-totaux .pp-net td { font-weight: 700; font-size: 19px; color: var(--ink); }

.pp-note { margin: 14px 0 0; font-size: 13.5px; color: var(--ink-2); }
/* Astérisque de renvoi de la caution : rouge et gras aux DEUX bouts — sur la ligne du
   tableau et devant la note. C'est ce qui relie les deux, et la caution est le seul
   montant du récapitulatif qui soit restituable : le signe doit accrocher l'œil.
   `font-size` relevé car un <sup> tombe à ~0,8 em, où le gras ne se voit plus. */
.pp-ast { color: var(--rose); font-weight: 700; font-size: 1em; }
.pp-avis { margin: 26px 0 0; text-align: center; font-size: 16px; line-height: 1.6; color: var(--ink); }
.pp-suivant {
  display: block; width: 100%; margin: 34px 0 0; padding: 15px;
  background: none; border: 1px solid var(--rose); border-radius: 2px; cursor: pointer;
  color: var(--rose); font-family: var(--serif); font-size: 18px; letter-spacing: .04em;
  transition: background .15s, color .15s;
}
.pp-suivant:hover { background: var(--rose); color: #fff; }
.pp-vide { text-align: center; color: var(--muted); padding: 3rem 1rem; }
.pp-erreur { color: var(--rose-dk); }

@media (max-width: 640px) {
  .pp-titre { margin: 32px 0 26px; }
  .pp-steps { gap: 10px; }
  /* Sous 640px les trois étapes passent à la ligne : un trait de liaison entre deux
     éléments qui ne sont plus côte à côte n'indiquerait plus rien. On le retire et
     on rend leur largeur naturelle aux étapes. */
  .pp-steps li { flex: 0 0 auto; font-size: 15px; }
  .pp-steps li:not(:last-child)::after { display: none; }
  .pp-totaux th, .pp-totaux td { font-size: 15.5px; padding: 11px 6px; }
  .pp-avis { font-size: 14.5px; }
}

/* ── Accueil ─────────────────────────────────────────────────────────────── */
/* Diaporama : la piste porte toutes les images côte à côte et se translate.
   `overflow: hidden` sur le cadre → une seule visible à la fois. */
.diapo { position: relative; overflow: hidden; background: #f2efec; }
.diapo-piste { display: flex; transition: transform .6s cubic-bezier(.4, 0, .2, 1); }
.diapo-piste > img {
  flex: 0 0 100%; width: 100%; height: clamp(200px, 33vw, 500px);
  object-fit: cover; object-position: center;
}
.diapo-fl {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0 0 4px;
  background: rgba(255, 255, 255, .82); border: 0; border-radius: 50%;
  color: var(--ink); font-family: var(--serif); font-size: 30px; line-height: 1;
  cursor: pointer; opacity: 0; transition: opacity .2s, background .15s;
}
.diapo:hover .diapo-fl, .diapo-fl:focus-visible { opacity: 1; }
.diapo-fl:hover { background: #fff; color: var(--rose); }
.diapo-fl--prev { left: 18px; }
.diapo-fl--next { right: 18px; }
.diapo-points {
  position: absolute; left: 0; right: 0; bottom: 16px;
  display: flex; justify-content: center; gap: 9px;
}
.diapo-points button {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .55); cursor: pointer; transition: background .2s;
}
.diapo-points button.actif { background: var(--rose); }

/* Promesse en trois temps */
.promesse { text-align: center; padding: 54px 26px 20px; }
.promesse h2 {
  margin: 0 0 40px; color: var(--rose);
  font-family: var(--serif); font-weight: 500; letter-spacing: .02em;
  font-size: clamp(22px, 3.2vw, 34px);
}
.etapes {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
  margin: 0; padding: 0; list-style: none;
}
.etapes li { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.etapes img { height: 78px; width: auto; opacity: .75; }
.etapes span {
  font-family: var(--serif); font-size: 19px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-2);
}

/* Vitrines de rubrique : titre rose centré au-dessus d'une photo pleine largeur */
.vitrines { padding: 34px 26px 60px; }
.vitrine { display: block; margin-bottom: 44px; text-decoration: none; }
.vitrine-titre {
  display: block; margin-bottom: 16px; text-align: center; color: var(--rose);
  font-family: var(--serif); font-weight: 500; font-size: clamp(19px, 2.4vw, 27px);
  letter-spacing: .06em; text-transform: uppercase;
  transition: color .15s;
}
.vitrine-img { display: block; overflow: hidden; background: var(--bg-soft); }
.vitrine-img img {
  width: 100%; height: clamp(150px, 22vw, 300px);
  object-fit: cover; object-position: center;
  transition: transform .5s ease;
}
.vitrine:hover .vitrine-img img { transform: scale(1.04); }
.vitrine:hover .vitrine-titre { color: var(--rose-dk); }
.vitrine--nue .vitrine-titre {
  margin: 0; padding: 16px 0; border-bottom: 1px solid var(--line);
}

/* ── Bandeau de section ───────────────────────────────────────────────────────
   Sans photo (accueil, ou catégorie sans bannière) : simple titre centré.
   Avec photo (.hero--img) : bandeau pleine largeur calqué sur le `.topMain` de
   mafiesta.com — même structure (sur-titre = catégorie, titre = sous-catégorie). */
.hero { text-align: center; padding: 46px 0 22px; }
.hero h1 {
  font-family: var(--serif); font-weight: 500; letter-spacing: .04em;
  font-size: clamp(34px, 5vw, 52px); margin: 0; color: var(--ink);
}
.hero p { margin: 8px 0 0; color: var(--muted); font-size: 17px; }

/* État photo : trois couches empilées — photo (::before), voile (::after), texte.
   Le fond reste sombre tant que la photo n'est pas décodée, donc le texte blanc est
   lisible dès la première frame ; `is-pret` fait ensuite apparaître la photo en
   fondu. Indispensable ici : certaines bannières pèsent plusieurs Mo (voir le
   commentaire de BANNIERES dans app.js). */
.hero--img {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: clamp(180px, 25vw, 330px); padding: 34px 26px; margin-bottom: 26px;
  background-color: #2f2b28; overflow: hidden;
}
.hero--img::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: var(--hero-img, none) center / cover no-repeat;
  opacity: 0; transition: opacity .5s ease;
}
.hero--img.is-pret::before { opacity: 1; }
/* Voile très léger : ces photos vont du plateau blanc au décor sombre, le texte
   blanc doit rester lisible sur les deux. */
.hero--img::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(rgba(28, 24, 22, .18), rgba(28, 24, 22, .32));
}
.hero--img .hero-txt { position: relative; z-index: 2; }
.hero--img h1, .hero--img .hero-cat { color: #fff; text-shadow: 0 1px 14px rgba(0, 0, 0, .38); }
.hero--img h1 { text-transform: uppercase; letter-spacing: .1em; font-weight: 400; }
.hero-cat {
  margin-bottom: 6px; font-family: var(--body); font-size: 17px; letter-spacing: .02em;
}

/* ── Barre d'outils ──────────────────────────────────────────────────────── */
.toolbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 6px 0 32px; padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.toolbar-search {
  flex: 1 1 240px; max-width: 420px; display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--line); border-radius: 2px; padding: 0 13px; color: var(--muted);
  transition: border-color .15s;
}
.toolbar-search:focus-within { border-color: var(--ink); color: var(--ink); }
#search {
  flex: 1; border: 0; background: transparent; outline: none; color: var(--ink);
  font-family: var(--body); font-size: 16px; padding: 11px 0;
}
.count {
  margin-left: auto; font-family: var(--serif); font-size: 14px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
/* Rappel du filtre actif (catégorie › sous-catégorie) avec sa croix de retrait */
.filtre-actif {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid #f3c6d3; background: #fdecef; border-radius: 20px; padding: 4px 6px 4px 14px;
  font-family: var(--serif); font-size: 14px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--rose); white-space: nowrap;
}
.filtre-actif[hidden] { display: none; }
.filtre-actif button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--rose); font-size: 17px; line-height: 1; cursor: pointer;
  transition: background .15s;
}
.filtre-actif button:hover { background: #f7d6df; }

/* ── Grille produits ─────────────────────────────────────────────────────── */
.grid {
  display: grid; gap: 34px 26px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  padding-bottom: 12px;
}
.card {
  display: flex; flex-direction: column; text-align: center; cursor: default;
  background: #fff; border: 1px solid var(--line); overflow: hidden;
}
/* L'image remplit toute la case, comme les vignettes de mafiesta.com. Là-bas
   WooCommerce recadre les fichiers en carré côté serveur ; ici on reçoit les
   `img_url` brutes (orientations mélangées), donc c'est `cover` qui fait le
   recadrage — au prix d'une rognure sur les photos très larges ou très hautes.
   Aucun padding : le moindre retrait rouvrirait le liseré blanc. */
.card-figure {
  position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--bg-soft); padding: 0;
}
.card-figure img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center;
  transition: transform .4s ease;
}
.card:hover .card-figure img { transform: scale(1.05); }
.card-figure--ph {
  display: flex; align-items: center; justify-content: center; font-size: 54px; color: #cfcac4;
}
/* Pastille « Pack & Bundle » : un pack se loue en un bloc, le client doit le
   distinguer d'une référence à l'unité avant de comparer les prix. */
.card-badge {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  background: var(--rose); color: #fff; border-radius: 20px; padding: 3px 11px;
  font-family: var(--serif); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}
.card--pack { border-color: #e7c9d4; }
/* Bandeau gris : nom, prix, quantité, ajout */
.card-body {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 16px 14px 18px; background: #ededed; border-top: 1px solid var(--line);
}
.card-name {
  margin: 0; font-family: var(--serif); font-weight: 600; font-size: 19px;
  line-height: 1.25; color: var(--ink);
  min-height: 2.5em;   /* réserve 2 lignes → prix/quantité alignés d'une carte à l'autre */
}
.card-price {
  font-family: var(--serif); font-weight: 600; font-size: 19px;
  letter-spacing: .02em; color: var(--ink); font-variant-numeric: tabular-nums;
}

/* Sélecteur de quantité — les 3 commandes forment un seul bloc soudé.
   Le champ n'a pas de bordure latérale : celle des boutons voisins sert de
   séparateur, sinon deux traits de 1px se colleraient et feraient un trait épais. */
.qty {
  display: flex; align-items: stretch; flex-wrap: nowrap;
  width: 100%; max-width: 250px;
}
.qty-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 40px;
  background: #fff; border: 1px solid #d8d8d8; border-radius: 0; color: var(--ink);
  cursor: pointer; transition: border-color .15s, color .15s;
}
.qty-btn:first-child { border-radius: 2px 0 0 2px; }
.qty-btn:last-child  { border-radius: 0 2px 2px 0; }
.qty-btn:hover { border-color: var(--rose); color: var(--rose); position: relative; z-index: 1; }
.qty-val {
  width: 68px; flex: none; text-align: center; padding: 8px 4px;
  background: #fff; border: 1px solid #d8d8d8; border-left: 0; border-right: 0;
  border-radius: 0; outline: none;
  color: var(--ink); font-family: var(--body); font-size: 17px; font-variant-numeric: tabular-nums;
}
.qty-val:focus { border-color: var(--ink); }

/* ── États vides / erreur ────────────────────────────────────────────────── */
.vide {
  grid-column: 1 / -1; text-align: center; color: var(--muted);
  padding: 3.5rem 1rem; font-size: 17px;
}
.vide--erreur { color: var(--rose-dk); }

/* ── Pagination ──────────────────────────────────────────────────────────── */
.pagination { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 40px 0 60px; }
.pg {
  border: 1px solid var(--line); background: none; color: var(--ink);
  border-radius: 2px; padding: 11px 22px; cursor: pointer;
  font-family: var(--serif); font-size: 14px; letter-spacing: .1em; text-transform: uppercase;
  transition: border-color .15s, color .15s;
}
.pg:hover:not(:disabled) { border-color: var(--rose); color: var(--rose); }
.pg:disabled { opacity: .4; cursor: default; }
.pg-info { font-family: var(--serif); font-size: 14px; letter-spacing: .08em; color: var(--muted); }

/* ── Page de texte (conditions générales) ─────────────────────────────────────
   Colonne étroite : un contrat se lit en 70-80 signes par ligne, pas sur toute la
   largeur du catalogue. */
.texte { max-width: 880px; padding-top: 46px; padding-bottom: 72px; }
.texte-alerte {
  margin: 0 0 12px; text-align: center; color: var(--rose);
  font-family: var(--serif); font-weight: 700; font-size: 15px;
  letter-spacing: .2em; text-transform: uppercase;
}
.texte h1 {
  margin: 0 0 38px; text-align: center; color: var(--ink);
  font-family: var(--serif); font-weight: 500; letter-spacing: .04em;
  font-size: clamp(25px, 4vw, 38px);
}
.cgl { margin: 0; padding-left: 28px; }
.cgl li {
  margin-bottom: 21px; padding-left: 6px;
  color: var(--ink-2); font-size: 16.5px; line-height: 1.75;
}
.cgl li::marker { color: var(--rose); font-family: var(--serif); font-weight: 600; }
.cgl-final {
  margin: 32px 0 0; padding-top: 26px; border-top: 1px solid var(--line);
  color: var(--ink-2); font-size: 16.5px; line-height: 1.75;
}
.cgl-ref { margin: 24px 0 0; text-align: right; color: var(--muted); font-style: italic; font-size: 14px; }

/* ── Pages « Programme Étoiles » ──────────────────────────────────────────── */
/* Bandeau photo, repris de mafiesta.com (voile bleu nuit + photo). L'image arrive
   par --banniere, posée en style inline : ces pages sont statiques, une variable
   suffit — pas de classe par visuel. */
.banniere {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: clamp(170px, 24vw, 300px); padding: 42px 26px; margin-bottom: 8px;
  background-color: #2f3f58;
  background-image: linear-gradient(rgba(47, 63, 88, .78), rgba(47, 63, 88, .78)), var(--banniere, none);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.banniere .sur-titre {
  margin: 0 0 8px; color: rgba(255, 255, 255, .82);
  font-family: var(--serif); font-size: 13px; letter-spacing: .22em; text-transform: uppercase;
}
.banniere h1 {
  margin: 0; color: #fff; font-family: var(--serif); font-weight: 400;
  font-size: clamp(26px, 4.2vw, 44px); letter-spacing: .08em; text-transform: uppercase;
}

/* Questions fréquentes : la question porte le poids, la réponse respire. */
.faq { list-style: none; margin: 0; padding: 0; counter-reset: faq; }
.faq > li { counter-increment: faq; margin-bottom: 30px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.faq > li:last-child { border-bottom: 0; }
/* Numéro repris dans le titre plutôt que par une puce : c'est la forme du site
   d'origine (« 1 - Qu'est ce que… ») et ça survit au retrait de la liste à puces. */
.faq h2::before { content: counter(faq) " — "; color: var(--rose); }
.faq h2 {
  margin: 0 0 10px; color: var(--ink);
  font-family: var(--serif); font-weight: 600; font-size: clamp(18px, 2.2vw, 22px);
}
.faq p { margin: 0 0 10px; color: var(--ink-2); font-size: 16.5px; line-height: 1.75; }
.faq p:last-child { margin-bottom: 0; }
.faq ol { margin: 10px 0 0; padding-left: 22px; color: var(--ink-2); font-size: 16.5px; line-height: 1.75; }
.faq ol li { margin-bottom: 8px; }

/* Règlement : articles numérotés, définitions en retrait */
.reglement h2 {
  margin: 38px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
  color: var(--rose); font-family: var(--serif); font-weight: 600;
  font-size: clamp(19px, 2.4vw, 24px);
}
.reglement h2:first-child { margin-top: 0; }
.reglement h3 {
  margin: 22px 0 6px; color: var(--ink);
  font-family: var(--serif); font-weight: 600; font-size: 17.5px; letter-spacing: .03em;
}
.reglement p { margin: 0 0 12px; color: var(--ink-2); font-size: 16.5px; line-height: 1.75; }
.reglement ul { margin: 0 0 12px; padding-left: 20px; color: var(--ink-2); font-size: 16.5px; line-height: 1.75; }
.reglement ul li { margin-bottom: 6px; }
.reglement strong { color: var(--ink); font-weight: 600; }

/* Catalogue des cadeaux : même carte que le catalogue, prix en étoiles */
.cadeaux {
  display: grid; gap: 30px 24px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  margin: 0; padding: 0; list-style: none;
}
.cadeau {
  display: flex; flex-direction: column; text-align: center;
  background: #fff; border: 1px solid var(--line); overflow: hidden;
}
.cadeau-fig { width: 100%; aspect-ratio: 1 / 1; background: var(--bg-soft); overflow: hidden; }
.cadeau-fig img { width: 100%; height: 100%; object-fit: contain; padding: 14px; transition: transform .4s ease; }
.cadeau:hover .cadeau-fig img { transform: scale(1.05); }
.cadeau-corps {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 16px 14px 20px; background: #ededed; border-top: 1px solid var(--line);
}
.cadeau-nom {
  margin: 0; color: var(--ink);
  font-family: var(--serif); font-weight: 600; font-size: 18px; line-height: 1.3;
}
.cadeau-dim { color: var(--muted); font-size: 13.5px; }
.cadeau-etoiles {
  margin-top: auto; padding-top: 8px; color: var(--rose);
  font-family: var(--serif); font-weight: 600; font-size: 19px; letter-spacing: .03em;
}
/* Renvoi vers l'échange : le solde d'étoiles n'existe pas sur ce site, il vit sur
   mafiesta.com — mieux vaut un lien honnête que sept boutons sans effet. */
.echange {
  margin: 44px auto 0; max-width: 620px; padding: 26px; text-align: center;
  border: 1px solid #f3c6d3; background: #fdecef;
}
.echange p { margin: 0 0 16px; color: var(--ink-2); font-size: 16px; line-height: 1.7; }
.lien-bouton {
  display: inline-block; padding: 11px 26px; background: var(--rose); color: #fff;
  text-decoration: none; border-radius: 2px;
  font-family: var(--serif); font-size: 14px; letter-spacing: .12em; text-transform: uppercase;
  transition: background .15s;
}
.lien-bouton:hover { background: var(--rose-dk); }
/* Sur cette page les liens d'en-tête sont la seule navigation : contrairement au
   catalogue, ils ne doivent PAS disparaître en mobile (voir la règle .hdr-links
   du bloc Mobile). */
.page-texte .hdr-links { gap: 20px; }
.page-texte .hdr-links a { white-space: nowrap; }   /* sinon « CONDITIONS COMMERCIALES » se coupe en deux */
.page-texte .hdr-links a.actif { color: var(--rose); }

/* Impression : un contrat, ça s'imprime. On ne garde que le texte. */
@media print {
  .hdr, .ft { display: none; }
  .texte { max-width: none; padding: 0; }
  .cgl li, .cgl-final { color: #000; font-size: 12pt; }
}

/* ── Pied de page ────────────────────────────────────────────────────────── */
.ft { border-top: 1px solid var(--line); background: var(--bg); margin-top: 30px; }
/* Les deux blocs (Showrooms · Infos) forment un GROUPE centré dans la page, et non
   deux colonnes étalées sur toute la largeur : la grille en `1fr` d'origine plaquait
   « Infos » au milieu de l'écran, très loin de « Showrooms », avec un grand vide à
   droite. En flex, chaque bloc prend la largeur de son texte et l'ensemble est centré.
   Le texte, lui, reste aligné à gauche à l'intérieur de chaque bloc : des adresses
   centrées se lisent mal, la marge gauche servant de repère d'une ligne à l'autre. */
.ft-cols {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 34px 64px; padding: 48px 26px 30px;
}
.ft-col { flex: 0 1 auto; min-width: 220px; max-width: 420px; }
/* Empilés sur un téléphone, les deux blocs n'ont pas la même largeur : centrés
   chacun de son côté, leurs bords gauches ne tombent pas au même endroit et la
   colonne paraît de travers. On centre alors LE GROUPE (via le `margin: auto` de
   `.wrap`) et on aligne les blocs à gauche, l'un sous l'autre. */
@media (max-width: 700px) {
  .ft-cols { max-width: 420px; justify-content: flex-start; }
}
.ft-col h4 {
  font-family: var(--serif); font-weight: 600; font-size: 15px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink); margin: 0 0 14px;
}
.ft-col p { margin: 0 0 8px; color: var(--ink-2); font-size: 15.5px; }
/* Showroom administré (js/pied-showrooms.js) : « Quartier, Précision » + épingle.
   L'épingle est portée par le flux du texte et non posée en fin de ligne : sur un
   écran étroit, l'adresse passe à la ligne et l'icône doit suivre son dernier mot. */
.ft-showroom .ft-gps {
  display: inline-flex; align-items: center; vertical-align: -2px;
  padding: 2px 4px;                 /* zone tactile : 15px d'icône seuls sont trop petits au doigt */
  color: var(--muted); text-decoration: none;
}
.ft-showroom .ft-gps:hover, .ft-showroom .ft-gps:focus-visible { color: var(--rose); }
.ft-social { margin-top: 14px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
/* Les liens sociaux sont regroupés dans un conteneur, pas posés à plat dans
   `.ft-social` : js/pied-page.js les remplace tous d'un bloc, sans toucher au
   libellé « Suivez-nous » qui les précède. Un <div> et non un <span>, sinon la
   règle `.ft-social span` ci-dessous le prendrait pour le libellé et passerait
   les liens de repli en majuscules espacées. */
.ft-liens { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
/* Réseau administré : seule l'icône paraît. `object-fit: contain` respecte une
   icône non carrée au lieu de l'étirer. */
.ft-reseau { display: inline-flex; padding: 2px; }   /* zone tactile un peu plus large que l'icône */
.ft-reseau img { width: 22px; height: 22px; object-fit: contain; display: block; }
.ft-reseau:hover, .ft-reseau:focus-visible { opacity: .7; }
.ft-social span { font-family: var(--serif); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ft-social a { color: var(--ink-2); text-decoration: none; font-size: 15px; }
.ft-social a:hover { color: var(--rose); }
.ft-base {
  text-align: center; padding: 18px 26px 30px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 13px; letter-spacing: .04em;
}

/* ── Bouton « Ajouter » sur les cartes ───────────────────────────────────── */
.card-add {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  margin-top: 2px; padding: 9px 20px; background: #fff; border: 1px solid #d8d8d8;
  border-radius: 2px; cursor: pointer; color: var(--rose);
  font-family: var(--serif); font-weight: 600; font-size: 18px; letter-spacing: .02em;
  transition: border-color .15s, color .15s, background .15s;
}
.card-add:hover { border-color: var(--rose); }
.card-add:active { background: var(--rose); color: #fff; border-color: var(--rose); }

/* ── Panier — tiroir latéral ─────────────────────────────────────────────── */
.cart-overlay {
  position: fixed; inset: 0; background: rgba(30, 28, 26, .38); z-index: 90;
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
}
body.cart-open .cart-overlay { opacity: 1; visibility: visible; }
.cart-panel {
  position: fixed; top: 0; right: 0; height: 100%; width: min(400px, 92vw);
  background: #fff; box-shadow: -14px 0 44px rgba(0, 0, 0, .14); z-index: 100;
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .28s ease;
}
body.cart-open .cart-panel { transform: translateX(0); }
.cart-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px; border-bottom: 1px solid var(--line);
}
.cart-head h3 {
  margin: 0; font-family: var(--serif); font-weight: 600; font-size: 20px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}
.cart-close { background: none; border: 0; font-size: 27px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 4px; }
.cart-close:hover { color: var(--rose); }
.cart-body { flex: 1; overflow-y: auto; padding: 6px 22px; }
.cart-vide { text-align: center; color: var(--muted); padding: 3rem 1rem; }
.ci { position: relative; display: flex; gap: 13px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--line); }
.ci-fig {
  width: 66px; height: 66px; flex-shrink: 0; overflow: hidden;
  border: 1px solid var(--line); background: var(--bg-soft);
  display: flex; align-items: center; justify-content: center;
}
.ci-fig img { width: 100%; height: 100%; object-fit: cover; }
.ci-ph { font-size: 28px; color: #cfcac4; }
.ci-info { flex: 1; min-width: 0; padding-right: 18px; }
.ci-name { font-family: var(--serif); font-weight: 600; font-size: 16.5px; line-height: 1.25; color: var(--ink); }
.ci-price { color: var(--rose); font-size: 15px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.ci-qty { display: flex; align-items: center; gap: 12px; margin-top: 9px; }
.qbtn {
  width: 27px; height: 27px; border: 1px solid var(--line); background: none; border-radius: 2px;
  cursor: pointer; font-size: 16px; line-height: 1; color: var(--ink);
  transition: border-color .15s, color .15s;
}
.qbtn:hover { border-color: var(--rose); color: var(--rose); }
.qval { min-width: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.ci-del { position: absolute; top: 14px; right: 0; background: none; border: 0; font-size: 21px; line-height: 1; color: var(--muted); cursor: pointer; }
.ci-del:hover { color: var(--rose); }
.cart-foot { border-top: 1px solid var(--line); padding: 18px 22px 22px; }
.cart-total { display: flex; align-items: baseline; justify-content: space-between; font-family: var(--serif); }
.cart-total span { font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cart-total strong { font-size: 23px; color: var(--rose); font-variant-numeric: tabular-nums; }
.cart-note { font-size: 12.5px; color: var(--muted); line-height: 1.45; margin: 10px 0 16px; }
.cart-cmd {
  width: 100%; padding: 13px; background: var(--rose); color: #fff; border: 0; border-radius: 2px; cursor: pointer;
  font-family: var(--serif); font-size: 15px; letter-spacing: .1em; text-transform: uppercase;
}
.cart-cmd:disabled { background: var(--muted); cursor: default; opacity: .9; }
.cart-vider {
  width: 100%; margin-top: 10px; padding: 9px; background: none; border: 0; color: var(--muted);
  cursor: pointer; font-family: var(--body); font-size: 14px; text-decoration: underline;
}
.cart-vider:hover { color: var(--rose); }
.cart-err { background: #fdecef; color: var(--rose-dk); border: 1px solid #f3c6d3; border-radius: 2px; padding: 10px 12px; font-size: 13.5px; margin-bottom: 12px; }

/* Alerte de disponibilité en tête du tiroir (stock insuffisant sur la période) */
.cart-dispo {
  background: #fff8e6; border: 1px solid #e8d9a8; border-radius: 2px;
  padding: 11px 13px; margin: 10px 0 4px; font-size: 13.5px; line-height: 1.5; color: #6b5518;
}
.cart-dispo strong { display: block; margin-bottom: 6px; font-family: var(--serif); font-size: 14.5px; }
.cart-dispo ul { margin: 0 0 7px; padding-left: 18px; }
.cart-dispo li { margin-bottom: 2px; }

/* ── Étape « commande » (formulaire dans le tiroir) ───────────────────────── */
.cmd { padding: 4px 0 8px; }
.cmd-titre {
  margin: 14px 0 12px; font-family: var(--serif); font-weight: 600; font-size: 14px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.cmd-titre:first-child { margin-top: 6px; }
.cmd-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cmd label { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.cmd-lbl {
  font-family: var(--serif); font-size: 13px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.cmd-opt { text-transform: none; letter-spacing: 0; font-family: var(--body); }
.cmd input, .cmd textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 2px; padding: 10px 12px;
  background: #fff; color: var(--ink); font-family: var(--body); font-size: 16px;
  outline: none; transition: border-color .15s;
}
.cmd textarea { resize: vertical; min-height: 62px; line-height: 1.4; }
.cmd input:focus, .cmd textarea:focus { border-color: var(--ink); }
/* Le sélecteur de date natif : on rend l'icône cliquable sur toute sa zone. */
.cmd input[type="date"] { min-height: 42px; }
.cmd input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .55; }
.cmd input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }
.cmd-duree {
  margin: -4px 0 14px; font-family: var(--serif); font-size: 14px;
  letter-spacing: .04em; color: var(--rose); min-height: 1.2em;
}
.cmd-duree.is-trop { color: var(--rose-dk); font-weight: 600; }
/* Récapitulatif de livraison à l'étape « commande » */
.cmd-rec { border: 1px solid var(--line); border-radius: 2px; background: var(--bg-soft); padding: 12px 14px; }
.cmd-rec-l { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cmd-rec-l + .cmd-rec-l { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line); }
.cmd-rec-l span {
  font-family: var(--serif); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.cmd-rec-l strong { font-size: 14.5px; color: var(--ink); text-align: right; font-weight: 500; }
.cmd-modif {
  width: 100%; margin: 10px 0 16px; padding: 9px; background: none;
  border: 1px solid var(--line); border-radius: 2px; cursor: pointer; color: var(--ink-2);
  font-family: var(--serif); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
  transition: border-color .15s, color .15s;
}
.cmd-modif:hover { border-color: var(--rose); color: var(--rose); }

.cmd-err:empty { display: none; }
.cmd-err {
  background: #fdecef; color: var(--rose-dk); border: 1px solid #f3c6d3; border-radius: 2px;
  padding: 10px 12px; font-size: 14px; line-height: 1.4; margin-top: 4px;
}

/* Confirmation de commande (dans le tiroir) */
.cart-ok { text-align: center; padding: 2.4rem 1rem 1rem; }
.cart-ok-ic { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%; background: var(--rose); color: #fff; font-size: 30px; line-height: 56px; }
.cart-ok h4 { font-family: var(--serif); font-size: 23px; font-weight: 600; margin: 0 0 8px; color: var(--ink); }
.cart-ok p { color: var(--ink-2); font-size: 15px; margin: 0 0 8px; }
.cart-ok-ref { color: var(--muted); font-size: 14px; }
.cart-ok-recap {
  text-align: left; border: 1px solid var(--line); border-radius: 2px;
  background: var(--bg-soft); padding: 12px 14px; margin: 18px 0 14px;
}
.cart-ok-recap div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cart-ok-recap div + div { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.cart-ok-recap span {
  font-family: var(--serif); font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.cart-ok-recap strong { font-family: var(--serif); font-size: 15px; color: var(--ink); text-align: right; }

/* ── Menu compte (dropdown) ──────────────────────────────────────────────── */
.hdr-right { position: relative; }
body.is-auth #btnAccount { color: var(--rose); }
.acct-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 210px;
  background: #fff; border: 1px solid var(--line); border-radius: 2px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .12); padding: 6px; display: none; flex-direction: column;
}
.acct-menu.open { display: flex; }
.acct-name { padding: 10px 12px; font-family: var(--serif); font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line); margin-bottom: 4px; word-break: break-word; }
.acct-menu button { text-align: left; background: none; border: 0; padding: 10px 12px; cursor: pointer; font-family: var(--body); font-size: 15px; color: var(--ink-2); border-radius: 2px; }
.acct-menu button:hover { background: var(--bg-soft); color: var(--rose); }

/* ── Modales (auth / commandes) ──────────────────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; background: rgba(30, 28, 26, .42); z-index: 110; opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
.modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -46%); z-index: 120;
  width: min(420px, 92vw); background: #fff; border-radius: 3px; box-shadow: 0 24px 60px rgba(0, 0, 0, .24);
  padding: 30px; opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s;
}
.modal--wide { width: min(560px, 94vw); }
body.auth-open #authOverlay, body.auth-open #authModal,
body.orders-open #ordersOverlay, body.orders-open #ordersModal,
body.liv-open #livOverlay, body.liv-open #livModal,
body.dispo-open #dispoOverlay, body.dispo-open #dispoModal { opacity: 1; visibility: visible; }
body.auth-open #authModal, body.orders-open #ordersModal,
body.liv-open #livModal, body.dispo-open #dispoModal { transform: translate(-50%, -50%); }

/* « Stock limité » — au-dessus du formulaire de livraison, qui peut être ouvert
   derrière (l'avertissement survient au moment de l'ajout). */
#dispoOverlay { z-index: 130; }
#dispoModal   { z-index: 140; width: min(430px, 92vw); }
.dispo-msg { margin: 0 0 20px; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.dispo-annuler {
  width: 100%; margin-top: 10px; padding: 11px; background: none;
  border: 1px solid var(--line); border-radius: 2px; cursor: pointer; color: var(--ink-2);
  font-family: var(--serif); font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  transition: border-color .15s, color .15s;
}
.dispo-annuler:hover { border-color: var(--ink); color: var(--ink); }
/* La modale de livraison est haute (7 champs + 2 dates) : elle défile au lieu de
   déborder de l'écran sur un petit mobile. */
#livModal { max-height: 92vh; overflow-y: auto; }
.modal-close { position: absolute; top: 12px; right: 14px; background: none; border: 0; font-size: 26px; line-height: 1; color: var(--muted); cursor: pointer; }
.modal-close:hover { color: var(--rose); }
.modal-brand { text-align: center; font-family: var(--serif); font-weight: 700; letter-spacing: .18em; color: var(--rose); font-size: 22px; margin-bottom: 18px; }
.modal-title { font-family: var(--serif); font-weight: 600; font-size: 22px; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 18px; color: var(--ink); }

.auth-tabs { display: flex; gap: 6px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.auth-tab { flex: 1; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 10px 0; cursor: pointer; font-family: var(--serif); font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.auth-tab.active { color: var(--rose); border-bottom-color: var(--rose); }
.auth-msg { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 2px; padding: 10px 12px; font-size: 14px; color: var(--ink-2); margin: 0 0 14px; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form.is-hidden, .is-hidden { display: none; }
.auth-form label { display: flex; flex-direction: column; gap: 5px; font-family: var(--serif); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.auth-form input { border: 1px solid var(--line); border-radius: 2px; padding: 11px 12px; font-family: var(--body); font-size: 16px; color: var(--ink); outline: none; transition: border-color .15s; }
.auth-form input:focus { border-color: var(--ink); }
.btn-primary { margin-top: 4px; padding: 13px; background: var(--rose); color: #fff; border: 0; border-radius: 2px; cursor: pointer; font-family: var(--serif); font-size: 15px; letter-spacing: .1em; text-transform: uppercase; }
.btn-primary:hover { background: var(--rose-dk); }
.btn-primary:disabled { opacity: .7; cursor: default; }
.auth-err { color: var(--rose-dk); font-size: 14px; margin-top: 12px; text-align: center; }

/* ── Modale « Livraison & récupération » ─────────────────────────────────── */
.liv-intro { margin: -8px 0 18px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.liv-bloc { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.liv-titre {
  margin: 0 0 12px; font-family: var(--serif); font-weight: 600; font-size: 13.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
}
/* Deux colonnes sur large, une seule dès que ça serre : un <select> de quartier et
   un sélecteur de date natif ne tiennent pas côte à côte sous ~460 px. */
.liv-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 520px) { .liv-grille { grid-template-columns: 1fr; } }

.liv-champ { display: flex; flex-direction: column; gap: 5px; margin-bottom: 13px; }
.liv-lbl {
  font-family: var(--serif); font-size: 12.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.liv-opt { text-transform: none; letter-spacing: 0; font-family: var(--body); }
.liv-champ input, .liv-champ select {
  width: 100%; border: 1px solid var(--line); border-radius: 2px; padding: 10px 11px;
  background: #fff; color: var(--ink); font-family: var(--body); font-size: 16px;
  outline: none; transition: border-color .15s;
}
.liv-champ input:focus, .liv-champ select:focus { border-color: var(--ink); }
.liv-champ select:disabled { background: var(--bg-soft); color: var(--muted); cursor: not-allowed; }
.liv-champ input[type="date"] { min-height: 42px; }
.liv-champ input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .55; }
.liv-duree {
  margin: -4px 0 4px; font-family: var(--serif); font-size: 14px;
  letter-spacing: .04em; color: var(--rose); min-height: 1.2em;
}
.liv-duree.is-trop { color: var(--rose-dk); font-weight: 600; }
.liv-err:empty { display: none; }
.liv-err {
  background: #fdecef; color: var(--rose-dk); border: 1px solid #f3c6d3; border-radius: 2px;
  padding: 10px 12px; font-size: 14px; line-height: 1.4; margin: 14px 0 0;
}
#livPoursuivre { margin-top: 18px; }

.orders-body { max-height: 60vh; overflow-y: auto; }
.ord { border: 1px solid var(--line); border-radius: 2px; padding: 14px 16px; margin-bottom: 10px; }
.ord-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ord-date { font-family: var(--serif); font-size: 15px; color: var(--ink); }
.ord-statut { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--rose); border: 1px solid #f3c6d3; background: #fdecef; border-radius: 20px; padding: 3px 10px; white-space: nowrap; }
.ord-loc { color: var(--ink-2); font-size: 14.5px; margin-top: 6px; }
.ord-meta { color: var(--muted); font-size: 14px; margin-top: 6px; }
.ord-det { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.ord-det summary {
  cursor: pointer; font-family: var(--serif); font-size: 13px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); list-style: none;
}
.ord-det summary::-webkit-details-marker { display: none; }
.ord-det summary::before { content: '▸ '; }
.ord-det[open] summary::before { content: '▾ '; }
.ord-det summary:hover { color: var(--rose); }
.ord-det ul { margin: 10px 0 0; padding: 0; list-style: none; }
.ord-det li { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; padding: 4px 0; color: var(--ink-2); }
.ord-det li span:last-child { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .hdr-top { grid-template-columns: 1fr auto; padding: 14px 18px; }
  .hdr-spacer { display: none; }
  .hdr-logo { justify-self: start; }
  .hdr-logo img { height: 62px; }
  .hdr-links { display: none; }
  /* …sauf sur la page de texte, où ils sont la seule navigation disponible. */
  .page-texte .hdr-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 16px; }
  .page-texte .hdr-links a { font-size: 11px; }
  .texte { padding-top: 30px; }
  .cgl { padding-left: 22px; }
  .cgl li, .cgl-final { font-size: 15.5px; }
  .nav-inner { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; gap: 22px; padding: 12px 18px; -webkit-overflow-scrolling: touch; }
  .navlink { font-size: 14px; }
  .subnav-inner { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; gap: 20px; padding: 11px 18px; -webkit-overflow-scrolling: touch; }
  .sublink { font-size: 13px; }
  /* Accueil : les trois étapes passent en colonne, les flèches du diaporama
     restent visibles (sans survol au doigt, elles seraient inatteignables). */
  .promesse { padding: 34px 18px 12px; }
  .promesse h2 { margin-bottom: 28px; }
  .etapes { grid-template-columns: 1fr; gap: 26px; }
  .etapes img { height: 62px; }
  .etapes span { font-size: 17px; }
  .diapo-fl { opacity: 1; width: 34px; height: 34px; font-size: 24px; }
  .diapo-fl--prev { left: 10px; }
  .diapo-fl--next { right: 10px; }
  .vitrines { padding: 24px 18px 40px; }
  .vitrine { margin-bottom: 30px; }
  .vitrine-titre { margin-bottom: 11px; }
  .filtre-actif { font-size: 13px; padding: 3px 5px 3px 12px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 20px 14px; }
  .card-badge { top: 7px; left: 7px; font-size: 9.5px; padding: 2px 8px; letter-spacing: .1em; }
  .card-body { padding: 12px 9px 15px; gap: 8px; }
  .card-name { font-size: 17px; }
  .card-price { font-size: 17px; }
  .qty-btn { min-height: 36px; }
  .qty-val { width: 44px; font-size: 16px; padding: 6px 2px; }
  .card-add { font-size: 16px; gap: 7px; padding: 8px 14px; }
  .hero { padding: 30px 0 16px; }
  .hero--img { min-height: 150px; padding: 26px 18px; }
  .hero-cat { font-size: 15px; }
}

/* Petits écrans : deux sélecteurs de date côte à côte deviennent illisibles. */
@media (max-width: 420px) {
  .cmd-duo { grid-template-columns: 1fr; }
}