/* Vitrine odeeria.com — base. L'identité par site vient des variables via themes.css.
   Les valeurs ci-dessous sont celles du thème 1 (Moderne), minimal lumineux. */
:root {
  --bg: #f5f7fa;
  --surface: #ffffff;
  --ink: #0e1320;
  --muted: #64748b;
  --soft: #eef2f7;
  --line: #e4e9f1;
  --accent: #2563eb;
  --accent-2: #1d4ed8;
  --accent-soft: #e8f0fe;
  --danger: #dc2626;
  --ok: #16a34a;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(15, 23, 42, .08);
  --shadow-strong: 0 20px 44px rgba(15, 23, 42, .14);
  --ph: rgba(37, 99, 235, .28);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.muted { color: var(--muted); }
a { color: var(--accent-2); text-decoration: none; }

/* ---- header ---- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 14px; padding-bottom: 14px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 13px;
  background: var(--accent); color: var(--surface);
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 24px; font-weight: 700;
  text-transform: uppercase;
}
.brand-logo { max-height: 42px; max-width: 180px; object-fit: contain; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-family: var(--serif); font-size: 19px; letter-spacing: .2px; }
.brand-text small { color: var(--muted); font-size: 12px; }
.header-cta {
  font-size: 14px; font-weight: 600;
  padding: 9px 18px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-2);
  transition: background .2s;
}
.header-cta:hover { background: var(--soft); }

/* ---- hero ---- */
.hero {
  text-align: center;
  padding: 64px 0 52px;
}
.hero h1 {
  font-family: var(--serif);
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.15; font-weight: 700;
  letter-spacing: -.5px;
}
.hero h1 em { font-style: italic; color: var(--accent); }
.hero p {
  margin: 14px auto 0; max-width: 520px;
  color: var(--muted); font-size: 17px;
}

/* ---- grille produits ---- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 26px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-strong); }
.card-img {
  position: relative; aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--accent-soft), var(--soft));
  display: grid; place-items: center;
}
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.card-img .ph-letter {
  font-family: var(--serif); font-size: 64px; color: var(--ph);
}
.badge {
  position: absolute; top: 12px; left: 12px;
  background: var(--ok); color: #fff;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  padding: 4px 10px; border-radius: 999px;
}
.card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.card-nom { font-family: var(--serif); font-size: 17.5px; line-height: 1.3; }
.card-couleurs { font-size: 12.5px; color: var(--muted); }
.card-foot { margin-top: auto; padding-top: 10px; display: flex; align-items: baseline; justify-content: space-between; }
.prix { font-weight: 700; color: var(--accent); font-size: 18px; }
/* Ancien prix « barré » (`.prix.ancien`) : libellé « Ancien Prix » + montant
   rouge barré, juste après le nom de la fiche produit. */
.ancien-prix { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 2px 0 10px; }
.ancien-prix-lbl { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--danger); }
.ancien-prix .prix.ancien { font-size: 16px; margin-right: 0; }
.prix.ancien { color: var(--danger); text-decoration: line-through; text-decoration-color: var(--danger); text-decoration-thickness: 2px; font-size: 13.5px; font-weight: 500; margin-right: 6px; }

/* --- load more / empty --- */
.load-more { text-align: center; padding: 34px 0 10px; }
.loader { color: var(--muted); font-size: 14px; animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.end-note { color: var(--muted); text-align: center; font-size: 14px; padding: 30px 0 6px; }

.empty-state {
  text-align: center; padding: 70px 20px 90px;
  border: 2px dashed var(--soft); border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
}
.empty-state .dot {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--accent-soft); margin: 0 auto 18px;
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 26px; color: var(--accent);
}
.empty-state h2 { font-family: var(--serif); font-size: 24px; margin-bottom: 6px; }
.empty-state p { color: var(--muted); max-width: 380px; margin: 0 auto; }

/* ---- detail produit ---- */
.detail-top { padding: 26px 0 10px; }
.retour { font-size: 13.5px; color: var(--muted); }
.detail-grid {
  /* 1.12 / .88 plutôt que 1.05 / .95 : la photo prend la largeur gagnée,
     l'info en perd un peu — le formulaire reste à ~460px, largement suffisant
     pour ses champs. Sur mobile, la media query suivante annule tout. */
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: 34px; align-items: start; margin-top: 8px;
}
/* Deux colonnes dès 641px, et non 861px : sur tablette, la colonne unique
   étirait la photo (presque plein écran) puis les champs sur toute la largeur
   — un rendu « mobile agrandi », peu professionnel. En dessous de 641px on
   reste en une colonne avec le carrousel plein bord (voir la règle mobile). */
@media (max-width: 640px) { .detail-grid { grid-template-columns: 1fr; } }
/* Sur tablette (et petits portables jusqu'à 900px), colonnes à parts égales :
   dans le ratio 1.12/.88 la colonne d'infos tombait à ~305px, ce qui serrait
   les cartes d'offres et le titre. À 50/50 la photo reste généreuse et le
   résumé respire. Au-delà de 900px, le ratio large de la galerie reprend. */
@media (min-width: 641px) and (max-width: 900px) { .detail-grid { grid-template-columns: 1fr 1fr; } }

/* Section « Commander » : le formulaire a quitté la colonne d'infos et prend
   la largeur sous la grille. Sur écran large on borne la colonne de saisie
   (des champs de 1100px seraient illisibles) et on la centre sous le hero. */
.commande-section { margin-top: 26px; }
@media (min-width: 641px) {
  .commande-section { margin-top: 34px; }
  .commande-section .form { max-width: 720px; margin-left: auto; margin-right: auto; }
}

.carousel {
  position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); background: var(--soft);
}
.carousel-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  /* 4/3.8 et non 4/3.4 : le cadre est plus haut, donc les photos aussi —
     surtout les portraits (photo de telephone), que `contain` limite par la
     HAUTEUR : gagner 12 % de hauteur, c'est 12 % de produit visible. Le cadre
     garde un ratio fixe, la fiche ne saute pas d'un produit à l'autre. */
  aspect-ratio: 4 / 3.8;
}
.carousel-track::-webkit-scrollbar, .carousel::-webkit-scrollbar { display: none; }
.slide {
  min-width: 100%; scroll-snap-align: start;
  display: grid; place-items: center; position: relative;
  /* Aplat neutre : avec `contain`, des bandes laterales apparaissent quand
     la photo est plus haute que large. Le degrade d'origine les mettait en
     evidence et se lisait comme un defaut d'affichage. */
  background: var(--soft);
}
/* `contain` et non `cover` : les photos produits arrivent tres souvent en
   portrait ou en carre (photo prise au telephone). `cover` recadrait le
   produit en haut et en bas, si bien que le visiteur ne voyait plus ce
   qu'il achetait. Le cadre conserve son ratio : la hauteur de la fiche
   reste identique d'un produit a l'autre, donc pas de saut de mise en page. */
.slide img { width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0; }
.slide .ph-letter { font-family: var(--serif); font-size: 120px; color: var(--ph); }
.carousel-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--ink); font-size: 18px; cursor: pointer;
  display: grid; place-items: center; z-index: 5;
}
.carousel-btn:hover { background: var(--surface); }
.carousel-btn.prev { left: 12px; }
.carousel-btn.next { right: 12px; }
.carousel-dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; gap: 6px; justify-content: center; z-index: 5; }
.carousel-dots span { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--surface) 60%, transparent); }
.carousel-dots span.on { background: var(--accent); width: 18px; border-radius: 999px; }

.detail-info h1 {
  font-family: var(--serif); font-size: clamp(26px, 4vw, 34px);
  line-height: 1.2; letter-spacing: -.4px;
}
.prix-ligne { margin: 14px 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.prix-ligne .prix { font-size: 27px; }
.prix-ligne .prix.ancien { font-size: 16px; }
.desc { color: color-mix(in srgb, var(--ink) 72%, gray); font-size: 15.5px; }
.dims { margin-top: 10px; font-size: 13.5px; color: var(--muted); }
.dims b { color: var(--ink); font-weight: 600; }

.pick { margin-top: 18px; }
.pick label { display: block; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 8px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  padding: 8px 16px; border-radius: 999px; font-size: 13.5px; cursor: pointer;
  transition: all .15s;
}
.pill.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-2); font-weight: 600; }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.qty button { width: 42px; height: 42px; border: 0; background: transparent; font-size: 19px; color: var(--accent-2); cursor: pointer; }
.qty button:hover { background: var(--accent-soft); }
.qty input { width: 52px; height: 42px; border: 0; text-align: center; font-size: 15px; font-weight: 600; background: transparent; color: var(--ink); }
.qty input:focus { outline: none; }

.buybar {
  position: sticky; bottom: 0; z-index: 30;
  margin-top: 22px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 16px;
  padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  box-shadow: 0 -8px 30px rgba(122, 88, 40, .08);
}
@media (min-width: 861px) { .buybar { position: static; border: 0; background: transparent; box-shadow: none; padding: 0; } }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; cursor: pointer;
  background: var(--accent); color: var(--surface);
  font-size: 16px; font-weight: 700;
  padding: 15px 26px; border-radius: 14px;
  transition: background .18s, transform .12s;
}
.btn:hover { background: var(--accent-2); }
.btn:disabled { opacity: .55; cursor: wait; }
.btn-lg { flex: 1; width: 100%; max-width: 340px; }

/* ---- formulaire ---- */
.form {
  margin-top: 14px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
}
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 12px;
  font-size: 15px; font-family: var(--font); color: var(--ink);
  background: var(--surface);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.field select:disabled { background: var(--soft); color: var(--muted); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }
.bandeau-paiement {
  display: flex; gap: 8px; align-items: center;
  background: var(--accent-soft); color: var(--accent-2);
  border-radius: 12px; padding: 10px 14px; font-size: 13.5px; margin-bottom: 14px;
}

.totaux { margin-top: 8px; border-top: 1px dashed var(--line); padding-top: 12px; }
.totaux .row { display: flex; justify-content: space-between; padding: 3px 0; font-size: 14.5px; }
.totaux .row.total { font-weight: 800; font-size: 17px; padding-top: 8px; border-top: 1px solid var(--line); margin-top: 6px; }
.erreur { color: var(--danger); font-size: 13.5px; margin-top: 10px; }

.reassurance { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
@media (max-width: 620px) { .reassurance { grid-template-columns: 1fr; } }
.reass { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; font-size: 13px; }
.reass b { display: block; color: var(--accent-2); font-size: 14.5px; margin-bottom: 2px; }

/* ---- section savoir-faire (detail) ---- */
.savoir {
  margin: 56px 0 30px; padding-top: 40px; border-top: 1px solid var(--line);
}
.savoir h2 { font-family: var(--serif); font-size: clamp(24px, 3.6vw, 32px); text-align: center; margin-bottom: 8px; }
.savoir > p.intro { text-align: center; color: var(--muted); max-width: 560px; margin: 0 auto 34px; }
.stack { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 760px) { .stack { grid-template-columns: 1fr; } }
.stack-card {
  border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface);
  box-shadow: var(--shadow);
  padding: 26px 22px; text-align: center;
}
.stack-card::before {
  content: ""; display: block; width: 34px; height: 4px;
  border-radius: 999px; background: var(--accent); margin: 0 auto 14px;
}
.stack-card b { font-family: var(--serif); font-size: 17px; display: block; margin-bottom: 6px; color: var(--ink); }
.stack-card p { font-size: 13.5px; color: var(--muted); margin: 0; }

/* ---- confirmation ---- */
.confirm {
  max-width: 560px; margin: 46px auto 70px; text-align: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 40px 30px; box-shadow: var(--shadow);
}
.confirm .check {
  width: 74px; height: 74px; border-radius: 50%;
  background: var(--ok); color: #fff; font-size: 34px;
  display: grid; place-items: center; margin: 0 auto 18px;
}
.confirm h1 { font-family: var(--serif); font-size: 26px; }
.confirm .num { color: var(--accent); font-weight: 800; }
.recap { text-align: left; background: var(--bg); border-radius: 14px; padding: 14px 18px; margin: 18px 0; font-size: 14.5px; }
.recap .row { display: flex; justify-content: space-between; padding: 2px 0; }
.recap .row.total { font-weight: 800; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 8px; }

/* ---- footer ---- */
.site-footer { margin-top: 60px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--soft) 40%, transparent); }
.footer-inner { padding: 30px 20px 34px; text-align: center; }
.footer-inner strong { font-family: var(--serif); font-size: 18px; }
.footer-inner p { color: var(--muted); font-size: 13.5px; max-width: 460px; margin: 6px auto 0; }
.footer-inner .muted { margin-top: 12px; font-size: 12.5px; }

/* ---- sélecteur de langue (header) ---- */
.header-actions { display: flex; align-items: center; gap: 10px; }
/* Bouton « trois points » : visible seulement sur mobile (media query), où il
   replie langue / suivi / boutique dans un panneau. */
.nav-more {
  display: none;
  align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: background .15s;
}
.nav-more:hover { background: var(--soft); }
.header-cta-outline { background: transparent; border: 1px solid var(--line); }
.lang-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; background: var(--surface); }
.lang-btn {
  display: inline-flex; align-items: center; gap: 5px;
  border: 0; background: transparent; cursor: pointer;
  padding: 6px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--muted);
  transition: all .15s;
}
.lang-btn .flag { font-size: 15px; line-height: 1; }
.lang-btn:hover { background: var(--soft); }
.lang-btn.on { background: var(--accent-soft); color: var(--accent-2); }
@media (max-width: 640px) { .lang-switch .lbl { display: none; } .lang-btn { padding: 6px 8px; } }

/* ---- suivi de colis ---- */
.suivi-view { max-width: 640px; margin: 46px auto 70px; }
.suivi-view h1 { font-family: var(--serif); font-size: 30px; margin-bottom: 6px; }
.suivi-form { display: flex; gap: 10px; margin: 22px 0; }
.suivi-input {
  flex: 1; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px;
  font-size: 15.5px; font-family: var(--font); color: var(--ink); background: var(--surface);
  text-transform: uppercase; letter-spacing: 1px;
}
.suivi-input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.suivi-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 26px; box-shadow: var(--shadow);
}
.suivi-head { display: flex; align-items: center; gap: 12px; border-bottom: 1px dashed var(--line); padding-bottom: 12px; margin-bottom: 4px; }
.suivi-tag {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px;
  background: var(--accent-soft); color: var(--accent-2); border-radius: 999px; padding: 4px 10px;
}
.suivi-code { font-family: var(--serif); font-size: 17px; letter-spacing: .5px; }
.suivi-card .row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; font-size: 14.5px; }
.suivi-box {
  display: flex; align-items: center; gap: 12px; justify-content: center;
  background: var(--accent-soft); border: 1px dashed var(--accent);
  border-radius: 14px; padding: 12px 16px; margin: 14px auto; max-width: 420px;
}
.suivi-box .suivi-code { font-size: 15px; }
.statut-ok { color: var(--ok); }

/* ---- landing (galerie en colonne : photos l'une sous l'autre) ---- */
.landing { margin: 44px 0 0; padding-top: 34px; border-top: 1px solid var(--line); }
.landing h2 { font-family: var(--serif); font-size: clamp(22px, 3.4vw, 30px); text-align: center; }
.landing > p.intro { text-align: center; color: var(--muted); max-width: 560px; margin: 4px auto 22px; }
.landing-stack { display: grid; gap: 18px; }
.landing-slide {
  width: 100%; margin: 0;
  border-radius: 18px; overflow: hidden; border: 1px solid var(--line);
  background: linear-gradient(150deg, var(--accent-soft), var(--soft));
  display: grid; place-items: center;
}
.landing-slide img { width: 100%; height: auto; display: block; object-fit: contain; }
.landing-slide .ph-letter { font-family: var(--serif); font-size: 84px; color: var(--ph); padding: 48px 0; }

/* ---- vidéo produit ----
   Le ratio 16/9 tient compte de la bannière YouTube et de la plupart des
   pins. `background` plutôt qu'un fond blanc dur : les iframes Pinterest
   arrivent souvent en transparent. */
.video-block { margin: 38px 0 0; }
.video-block h2 { font-family: var(--serif); font-size: clamp(20px, 3vw, 26px); text-align: center; margin-bottom: 16px; }
.video-frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 18px; border: 1px solid var(--line);
  background: linear-gradient(150deg, var(--accent-soft), var(--soft));
}
.video-frame video, .video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border: 0; }
.video-frame video { object-fit: cover; background: #000; }
/* Sur petit écran la vidéo verticale d'un pin est plus lisible en 4/5. */
@media (max-width: 560px) { .video-frame { aspect-ratio: 4 / 5; } }

/* ---- suggestions ---- */
.suggest { margin: 40px 0 0; }
.suggest-collaps {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.suggest-collaps summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 12px;
  padding: 18px 22px; font-family: var(--serif); font-size: 20px;
}
.suggest-collaps summary::-webkit-details-marker { display: none; }
.suggest-collaps summary .ic { color: var(--accent); font-style: normal; font-size: 20px; }
.suggest-collaps summary small { margin-left: auto; font-family: var(--font); font-size: 12.5px; color: var(--muted); font-weight: 400; }
.suggest-body { padding: 0 22px 22px; }
.suggest-strip { display: flex; gap: 14px; overflow-x: auto; scroll-behavior: smooth; padding-bottom: 10px; }
.suggest-strip .suggest-card { flex: 0 0 260px; }
@media (max-width: 560px) { .suggest-strip .suggest-card { flex-basis: 170px; } }
.suggest-collaps[open] summary { border-bottom: 1px solid var(--line); }
.suggest-card {
  display: block; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line); background: var(--surface);
  transition: transform .15s, box-shadow .15s;
}
.suggest-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.suggest-img { aspect-ratio: 4/3; background: linear-gradient(150deg, var(--accent-soft), var(--soft)); display: grid; place-items: center; }
.suggest-img img { width: 100%; height: 100%; object-fit: cover; }
.suggest-img .ph-letter { font-family: var(--serif); font-size: 44px; color: var(--ph); }
.suggest-cap { padding: 10px 12px 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.suggest-cap b { font-size: 13px; line-height: 1.3; }
.suggest-cap .prix { color: var(--accent-2); font-weight: 800; white-space: nowrap; }

/* ---- actions confirmation ---- */
.acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.btn-ghost { background: transparent; color: var(--accent-2); border: 1px solid var(--line); }
.btn-ghost:hover { background: var(--soft); }

/* ---- RTL (arabe) ---- */
[dir="rtl"] .recap { text-align: right; }
[dir="rtl"] .carousel-btn { transform: scaleX(-1); }
[dir="rtl"] .suggest-collaps summary small { margin-left: 0; margin-right: auto; }

/* ---- mobile : header compact, menus repliés derrière les trois points ---- */
@media (max-width: 560px) {
  /* En-tête plus bas : marque, logo et libellés réduits. */
  .header-inner { padding-top: 9px; padding-bottom: 9px; }
  .brand { gap: 9px; }
  .brand-mark { width: 34px; height: 34px; border-radius: 10px; font-size: 19px; }
  .brand-logo { max-height: 34px; }
  .brand-text strong { font-size: 16px; }
  .brand-text small { font-size: 11px; }

  .nav-more { display: inline-flex; }

  /* Langue + suivi + boutique : panneau déroulant ancré sous l'en-tête
     (position: sticky fait office de bloc conteneur). Caché tant que les trois
     points n'ont pas été touchés ; le clic extérieur / la navigation le referme. */
  .header-actions {
    position: absolute;
    top: 100%;
    inset-inline-end: 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    min-width: 210px;
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: none;
  }
  .site-header.menu-open .header-actions { display: flex; }
  .header-actions .lang-switch { justify-content: center; }
  .header-actions .header-cta { text-align: center; }
}
/* Offres volume : tableau des paliers sous le prix de la fiche. */
.offres { margin-top: 16px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--accent-soft); }
.offres h2 { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--accent-2); padding: 11px 14px; }
.offres table { width: 100%; border-collapse: collapse; font-size: 14px; }
.offres th, .offres td { padding: 9px 14px; text-align: start; }
.offres thead th { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); background: rgba(255, 255, 255, .6); }
.offres tbody tr + tr td { border-top: 1px solid var(--line); }
.offres tbody td:first-child { color: color-mix(in srgb, var(--ink) 78%, gray); }
.offres tbody td:last-child b { color: var(--accent-2); font-weight: 800; white-space: nowrap; }

/* ---- Offres volume : cartes --------------------------------------------
   Le conteneur .offres est celui du tableau servi en PHP (seo_offres) : le
   HTML servi et la page repeinte doivent se ressembler, sinon la fiche change
   d'apparence après navigation. Seules les cartes sont propres au JS.
   Tout est exprimé en variables : les dix thèmes de themes.css, dont quatre
   sombres, doivent rester lisibles. */
.offres-list { display: grid; gap: 10px; padding: 0 12px 12px; }
.offre {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 5px;
  width: 100%; text-align: start; padding: 13px 15px 13px 18px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
  cursor: pointer; box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
/* Liseré d'accent à gauche : du poids visuel sans alourdir la fiche. */
.offre::before {
  content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
}
.offre:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(15, 23, 42, .11); }
.offre:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.offre.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow); }

.offre-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.offre-label { font-size: 14px; font-weight: 600; color: var(--ink); }
.offre-pct {
  flex: none; font-size: 12px; font-weight: 800; letter-spacing: .2px;
  padding: 3px 9px; border-radius: 999px;
  color: var(--surface); background: var(--accent-2);
}
.offre-prix { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.offre-now { font-size: 19px; font-weight: 800; color: var(--accent-2); }
.offre-was { font-size: 13.5px; color: var(--muted); }
/* « 6 articles · 2 067 DA l'article » : sans la quantité, « 6 200 DA » se lit
   comme un prix unitaire alors que c'est un total. */
.offre-detail { font-size: 12.5px; color: var(--muted); margin-inline-start: auto; }
.offre-gain { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ok); }
.offre-gain::before { content: '\2713'; font-weight: 800; }
.offre.on .offre-now { color: var(--accent); }

/* ---- Description organisée ----------------------------------------------
   Le texte du marchand arrive avec des sauts de ligne et des puces ; rendu
   dans un seul paragraphe, tout se collait en un bloc informe. */
.desc-bloc {
  margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 12px;
}
.desc-p {
  margin: 0; font-size: 15.5px; line-height: 1.75; overflow-wrap: break-word;
  color: color-mix(in srgb, var(--ink) 74%, gray);
}
.desc-tete {
  margin: 10px 0 0; font-size: 14px; font-weight: 800; color: var(--ink);
  text-transform: uppercase; letter-spacing: .4px;
}
/* Puces : une vraie liste. Un <ul> est compris des robots et des lecteurs
   d'écran, ce qu'un div muni d'une pastille ne l'est pas. */
.desc-ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.desc-ul li {
  position: relative; padding-inline-start: 16px;
  font-size: 15.5px; line-height: 1.7; overflow-wrap: break-word;
  color: color-mix(in srgb, var(--ink) 74%, gray);
}
.desc-ul li::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}

/* Mobilité : les cartes d'offres et la description doivent tenir sans débord
   horizontal, surtout sur Android Chrome. */
@media (max-width: 720px) {
  .offres-list { padding: 0 10px 10px; gap: 8px; }
  .offre { padding: 11px 12px 11px 15px; border-radius: 12px; }
  .offre-top { flex-wrap: wrap; align-items: flex-start; gap: 6px 8px; }
  .offre-label { font-size: 13.5px; }
  .offre-pct { font-size: 11.5px; padding: 2px 7px; }
  .offre-prix { gap: 7px; }
  .offre-now { font-size: 17.5px; }
  .offre-was { font-size: 13px; }
  .offre-detail { margin-inline-start: 0; flex-basis: 100%; order: 3; }
  .offre-gain { font-size: 12.5px; }
  .desc-bloc { margin-top: 20px; padding-top: 18px; }
  .desc-p, .desc-li, .desc-ul li { font-size: 14.5px; line-height: 1.65; }
}

/* ---- Bouton flottant « Acheter maintenant » (fiche produit) ----
   Créé par boutonAchatFlottant() dans app.js : visible seulement quand le
   formulaire de commande (#formulaire-commande) est hors du tiers central de
   l'écran, il s'efface dès que la fiche de commande s'y installe.

   Le centrage passe par `transform`, les déplacements d'état par les
   propriétés `translate` / `scale` : elles se cumulent au lieu de
   s'écraser, donc le bouton reste centré à l'apparition, à desktop (ancré à
   droite, sans transform) et au clic, sans qu'une règle en annule une autre. */
.buy-float {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 50; /* header sticky à 40 : le bouton passe au-dessus */
  display: inline-flex; align-items: center; gap: 9px;
  border: 0; cursor: pointer;
  padding: 15px 28px;
  border-radius: 999px;
  font-family: var(--font);
  font-size: 17px; font-weight: 800; letter-spacing: .2px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 55%, #6d28d9 135%);
  box-shadow: 0 14px 34px rgba(37, 99, 235, .42), 0 4px 10px rgba(15, 23, 42, .22);
  transition: opacity .25s ease, translate .25s ease, scale .15s ease;
  animation: buy-float-in .45s ease-out backwards,
             buy-float-glow 2.6s ease-in-out 1.2s infinite;
}
.buy-float-ic { font-size: 19px; line-height: 1; }
.buy-float:hover { translate: 0 -3px; }
.buy-float:active { scale: .95; }
/* Formulaire à l'écran : le bouton s'efface (pointer-events d'abord, pour
   qu'un tap sur la zone fantôme ne tombe jamais sur un élément caché). */
.buy-float.off { opacity: 0; pointer-events: none; translate: 0 28px; }
@media (min-width: 861px) {
  /* Comme .buybar : au-delà de 861px la fiche n'est plus une colonne unique,
     le bouton rejoint le coin bas-droit pour ne pas couvrir le texte. */
  .buy-float { left: auto; right: 28px; transform: none; }
}
@keyframes buy-float-in {
  from { opacity: 0; translate: 0 28px; }
  to   { opacity: 1; translate: 0 0; }
}
/* halo qui respire : l'objectif est d'être repéré en peripherie de vision,
   pas d'etre clignotant — le mouvement est lent et le fond ne bouge pas. */
@keyframes buy-float-glow {
  0%, 100% { box-shadow: 0 14px 34px rgba(37, 99, 235, .42), 0 4px 10px rgba(15, 23, 42, .22); }
  50%      { box-shadow: 0 14px 46px rgba(37, 99, 235, .62), 0 4px 14px rgba(15, 23, 42, .26); }
}
@media (prefers-reduced-motion: reduce) {
  .buy-float { animation: none; transition: opacity .2s ease; }
}

/* ---- Boutons flottants « Appeler » & « WhatsApp » (accueil & fiche) ----
   Créés par boutonsContactFlottants() dans app.js : visibles seulement quand
   le marchand a renseigné un numéro pour le site. Ancrés en bas à GAUCHE pour
   ne jamais recouvrir le bouton « Acheter maintenant » (centré sur mobile,
   ancré à droite sur desktop). Empilés : appel en bas, WhatsApp au-dessus. */
.contact-float {
  position: fixed;
  left: calc(14px + env(safe-area-inset-left, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 50; /* header sticky à 40 : les boutons passent au-dessus */
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
}
.contact-btn {
  display: inline-flex; align-items: center; gap: 9px;
  width: max-content;
  padding: 13px 18px;
  border-radius: 999px;
  font-family: var(--font);
  font-size: 15px; font-weight: 800; letter-spacing: .2px;
  color: #fff; text-decoration: none;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .28), 0 4px 10px rgba(15, 23, 42, .18);
  transition: translate .25s ease, scale .15s ease;
  animation: buy-float-in .45s ease-out backwards;
}
.contact-btn:hover { translate: 0 -3px; }
.contact-btn:active { scale: .95; }
/* Appel : vert du site. WhatsApp : vert de la marque. */
.call-float { background: linear-gradient(135deg, #16a34a 0%, #22c55e 58%, #15803d 135%); }
.wa-float { background: linear-gradient(135deg, #128c7e 0%, #25d366 62%, #128c7e 135%); }
.call-float-ic { font-size: 18px; line-height: 1; }
.wa-ic { display: block; }
/* Sur écran étroit le libellé disparaît : une pastille ronde reste lisible
   sans empiéter sur le bouton d'achat centré. */
@media (max-width: 560px) {
  .contact-btn { padding: 13px; gap: 0; }
  .contact-lbl { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-btn { animation: none; transition: opacity .2s ease; }
}

/* Le header est sticky (z-index 40) : sans marge d'ancrage, le défilement
   déclenché par le bouton flottant places le bandeau de paiement juste
   SOUS l'en-tête, le premier champ hors de vue. */
#formulaire-commande { scroll-margin-top: 84px; }

/* ---- Smartphones : photo de la fiche presque plein écran ----
   Sur téléphone, la fiche se lit en une colonne : le carrousel est le premier
   écran, et un cadre de catalogue 4/3.8 gaspillait le bas de l'affichage. Le
   carrousel sort des 20px de gouttière de .wrap (plein bord), perd ses
   arrondis latéraux, et occupe TOUTE la hauteur restante sous le bandeau et le
   lien « retour » (~108 px) : la photo domine l'écran, le reste (prix,
   formulaire) suit en dessous.
   dvh en second : vh compte la barre d'adresse des vieux navigateurs
   mobiles, le bas du cadre passerait alors sous les contrôles. 640px et
   non 860px : les tablettes en colonne unique gardent le cadre à ratio. */
@media (max-width: 640px) {
  .detail-top { padding: 10px 0 6px; }
  .carousel {
    margin-inline: -20px;
    border-inline: 0;
    border-radius: 0;
  }
  .carousel-track {
    aspect-ratio: auto;
    /* ~108 px = header compact mobile + lien « retour » + marges. */
    height: calc(100vh - 108px);
    height: calc(100dvh - 108px);
    min-height: 380px;
  }
  /* Flèches plus grandes : doigt, pas souris. */
  .carousel-btn { width: 46px; height: 46px; font-size: 21px; }
}

/* ==========================================================================
   PAGE PRODUIT — refonte : slogan, note/avis, offres en tête de colonne,
   petite description, « Comment l'utiliser » et grande description.
   ========================================================================== */

/* 3ᵉ bloc — slogan produit */
.detail-info .slogan {
  margin: 4px 0 10px;
  font-size: 15px;
  color: var(--muted);
  font-style: italic;
}

/* 4ᵉ bloc — note étoilée + avis */
.avis-bloc { margin: 6px 0 4px; }
.avis-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
/* Carte « Laisser un avis », désormais en bas de page juste avant les
   suggestions (hors colonne d'infos) : on la centre et on l'aère. */
.avis-carte {
  max-width: 720px;
  margin: 44px auto 0;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.avis-carte .avis-toggle { margin-top: 0; }
.stars { display: inline-flex; gap: 1px; line-height: 1; font-size: 17px; letter-spacing: 1px; }
.stars .star { color: var(--line); }
.stars .star.full { color: #f5a623; }
.stars .star.half {
  color: var(--line);
  background: linear-gradient(90deg, #f5a623 50%, transparent 50%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.avis-n { font-size: 13px; color: var(--muted); }
.avis-toggle {
  margin-top: 8px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--accent-2);
  border-radius: 999px;
  padding: 5px 12px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.avis-toggle:hover, .avis-toggle.on { background: var(--soft); }
.avis-form { margin-top: 10px; display: grid; gap: 8px; }
.avis-form input, .avis-form select, .avis-form textarea {
  width: 100%;
  font: inherit;
  font-size: 14px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
}
.avis-form textarea { resize: vertical; }
.avis-form .erreur { font-size: 13px; color: var(--danger); margin: 0; }
.avis-merci { margin-top: 8px; font-size: 13px; color: var(--ok); font-weight: 600; }
.btn-sm { padding: 9px 16px; font-size: 14px; }

/* 5ᵉ bloc — prix remplacé par les paliers d'offres. Le conteneur reprend
   l'habillage .offres du formulaire ; les cartes sont les mêmes .offre, ici en
   lecture seule (la sélection se fait dans le formulaire de commande). */
.prix-offres { margin: 12px 0; }
.offre-static { cursor: default; }
.offre-static:hover { transform: none; box-shadow: 0 1px 3px rgba(15, 23, 42, .06); }

/* 6ᵉ bloc — petite carte de description */
.desc-courte {
  margin: 14px 0;
  padding: 14px 16px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--accent);
  border-radius: 12px;
  font-size: 14px;
  color: color-mix(in srgb, var(--ink) 88%, gray);
}

/* 8ᵉ bloc — Comment l'utiliser : cartes PORTRAIT, défilement horizontal */
.etapes { margin: 44px 0 0; padding-top: 34px; border-top: 1px solid var(--line); }
.etapes h2 { font-family: var(--serif); font-size: clamp(22px, 3.4vw, 30px); text-align: center; }
.etapes > p.intro { text-align: center; color: var(--muted); max-width: 560px; margin: 4px auto 24px; }
.etapes-list {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 4px 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.etapes-list::-webkit-scrollbar { height: 8px; }
.etapes-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.etape {
  position: relative;
  flex: 0 0 250px;
  width: 250px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.etape-img {
  order: -1;
  width: 100%;
  aspect-ratio: 3 / 4;   /* portrait */
  background: linear-gradient(150deg, var(--accent-soft), var(--soft));
  display: grid;
  place-items: center;
  overflow: hidden;
}
.etape-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.etape-img .ph-letter { font-family: var(--serif); font-size: 56px; color: var(--ph); }
.etape-num {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: var(--surface);
  font-weight: 800; font-size: 16px;
  box-shadow: 0 4px 10px rgba(15, 23, 42, .22);
}
.etape-txt { padding: 14px 16px 18px; }
.etape-txt h3 { font-family: var(--serif); font-size: 17px; margin-bottom: 6px; }
.etape-txt p { font-size: 14px; color: color-mix(in srgb, var(--ink) 85%, gray); }

/* 9ᵉ bloc — grande description, pleine largeur */
.grande-desc {
  margin: 44px 0 0;
  padding: 28px 26px 30px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.grande-desc h2 { font-family: var(--serif); font-size: clamp(22px, 3.4vw, 30px); margin-bottom: 14px; }
/* Le desc-bloc portait son propre filet de séparation (hors carte) : dans la
   carte il ferait doublon, on l'aplatit. */
.grande-desc .desc-bloc { max-width: 760px; margin-top: 0; padding-top: 0; border-top: 0; }

@media (max-width: 640px) {
  .etape { flex-basis: 200px; width: 200px; }
}