/* ── 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;
  /* 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%; }
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); }

/* 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: #2e7d32; color: #2e7d32; }
.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: #2e7d32; }
.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: #2e7d32;
  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: #2e7d32; }
.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; justify-content: space-between; align-items: center; gap: 16px;
  list-style: none; margin: 0 0 40px; padding: 0; flex-wrap: wrap;
}
.pp-steps li {
  display: flex; align-items: center; gap: 11px;
  font-family: var(--serif); font-size: 17px; color: var(--muted);
}
.pp-steps li span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; font-size: 15px;
}
.pp-steps li.actif { color: var(--ink); }
.pp-steps li.actif span { border: 1px solid var(--rose); color: var(--rose); }

/* 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: #2e7d32; }

/* 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: #2e7d32; white-space: nowrap;
}
.pp-chip button {
  width: 19px; height: 19px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: #2e7d32; 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: #2e7d32; }
.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); }
.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; }
  .pp-steps li { font-size: 15px; }
  .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); }

/* ── Pied de page ────────────────────────────────────────────────────────── */
.ft { border-top: 1px solid var(--line); background: var(--bg); margin-top: 30px; }
.ft-cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 34px; padding: 48px 26px 30px;
}
.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; }
.ft-social { margin-top: 14px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.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; }
  .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; }
}