/* Style unique, en deux modes choisis par data-theme sur <html> :
   "sombre" → fond noir, accent citron vert
   "clair"  → fond blanc cassé, même accent pour les boutons, vert foncé pour les textes
   Le citron vert ne se lit pas sur fond blanc : --accent sert aux textes et traits,
   --accent-fond aux surfaces pleines (boutons, pastilles, remises). */

:root, [data-theme="sombre"] {
  --bg: #09090C;
  --surface: #111217;
  --surface-2: #16181F;
  --line: #22252E;
  --line-2: #2E323D;
  --text: #F3F4F6;
  --muted: #8D92A1;
  --faint: #5D6271;
  --accent: #C8F25A;
  --accent-fond: #C8F25A;
  --accent-hover: #D6FA74;
  --accent-ink: #10130A;
  --warn: #FFB547;
  --ok: #5BE38B;
  --erreur: #F06A6A;
  --teinte-base: #FFFFFF;      /* nom des produits : couleur de marque mêlée à cette base */
  --teinte-part: 45%;
  --halo: rgba(200, 242, 90, .13);
  --halo-fort: rgba(200, 242, 90, .18);
  --lueur-marque: 0 0 18px #C8F25A;
  --ombre-logo: 0 0 0 1px rgba(255, 255, 255, .08), 0 8px 20px rgba(0, 0, 0, .45);
  --ombre-toast: 0 18px 40px rgba(0, 0, 0, .4);
  color-scheme: dark;
}

[data-theme="clair"] {
  --bg: #F6F6F3;
  --surface: #FFFFFF;
  --surface-2: #EFF0EB;
  --line: #E4E5DF;
  --line-2: #D2D4CC;
  --text: #111318;
  --muted: #5A5F6C;
  --faint: #858A96;
  --accent: #4B7600;
  --accent-fond: #C8F25A;
  --accent-hover: #BDEB45;
  --accent-ink: #10130A;
  --warn: #B45309;
  --ok: #15803D;
  --erreur: #C93838;
  --teinte-base: #14161C;
  --teinte-part: 62%;
  --halo: rgba(160, 215, 40, .20);
  --halo-fort: rgba(160, 215, 40, .32);
  --lueur-marque: none;
  --ombre-logo: 0 0 0 1px rgba(17, 19, 24, .06), 0 6px 16px rgba(17, 19, 24, .12);
  --ombre-toast: 0 14px 34px rgba(17, 19, 24, .22);
  color-scheme: light;
}

:root {
  --radius: 18px;
  --radius-sm: 12px;
  --bord: 1px solid var(--line);
  --bord-fort: 1px solid var(--line-2);
  --police: "Geist", system-ui, sans-serif;
  --police-chiffres: "Geist Mono", ui-monospace, monospace;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.55 var(--police); -webkit-font-smoothing: antialiased;
  transition: background-color .25s, color .25s;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .wrap { padding: 0 28px; } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 16px; border-radius: var(--radius-sm);
  border: var(--bord-fort); background: var(--surface);
  font-weight: 600; font-size: 15px; white-space: nowrap; text-align: center;
  transition: border-color .15s, background .15s;
}
.btn:hover { border-color: var(--faint); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn.plein { background: var(--accent-fond); color: var(--accent-ink); border-color: var(--accent-fond); }
.btn.plein:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.grand { height: 52px; padding: 0 22px; font-size: 16px; border-radius: 14px; }
.btn.large { width: 100%; white-space: normal; height: auto; min-height: 52px; padding-block: 12px; line-height: 1.25; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* ---------- Bandeaux et en-tête ---------- */
.demo { padding: 8px 16px; text-align: center; font-size: 13.5px; font-weight: 600; background: var(--accent-fond); color: var(--accent-ink); }
.bandeau {
  border-bottom: var(--bord); padding: 9px 16px; text-align: center;
  font: 500 12.5px/1.4 var(--police-chiffres); color: var(--muted); letter-spacing: .02em;
}
.bandeau b { color: var(--accent); font-weight: 500; }
.entete {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in oklab, var(--bg) 84%, transparent); backdrop-filter: blur(14px);
  border-bottom: var(--bord);
}
.entete .wrap { display: flex; align-items: center; gap: 12px; height: 66px; }
.marque { display: flex; align-items: center; gap: 8px; font: 800 22px/1 var(--police); letter-spacing: -.04em; white-space: nowrap; }
.marque i { width: 10px; height: 10px; border-radius: 3px; background: var(--accent-fond); box-shadow: var(--lueur-marque); flex: none; }
[data-theme="clair"] .marque i { outline: 1px solid rgba(17, 19, 24, .15); }
.entete nav { display: none; gap: 4px; margin-left: 18px; font-size: 14.5px; }
.entete nav a { padding: 8px 12px; border-radius: 99px; color: var(--muted); }
.entete nav a:hover { color: var(--text); }
@media (min-width: 900px) { .entete nav { display: flex; } }
.entete .actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.entete .wa { display: none; }
@media (min-width: 640px) { .entete .wa { display: inline-flex; } }
.pastille-compte {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px;
  background: var(--accent-fond); color: var(--accent-ink);
  font: 600 12px/22px var(--police-chiffres); text-align: center;
}
@media (max-width: 400px) { .marque { font-size: 19px; } .entete .actions { gap: 8px; } }

/* Sélecteur sombre / clair */
.themes { display: inline-flex; gap: 2px; padding: 3px; border-radius: 99px; border: var(--bord-fort); background: var(--surface); }
.themes button {
  width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; color: var(--faint);
  display: grid; place-items: center; transition: background .15s, color .15s;
}
.themes button svg { width: 17px; height: 17px; }
.themes button:hover { color: var(--text); }
.themes button[aria-pressed="true"] { background: var(--surface-2); color: var(--accent); }

/* ---------- Accroche : bande sombre et colorée dans les deux modes (couleurs locales) ---------- */
.accroche {
  --text: #F3F4F6; --muted: #A9AEBB; --faint: #7A7F8E; --line: rgba(255, 255, 255, .09); --line-2: rgba(255, 255, 255, .17);
  --surface: rgba(255, 255, 255, .05); --surface-2: rgba(255, 255, 255, .08); --accent: #C8F25A;
  --bord: 1px solid var(--line); --bord-fort: 1px solid var(--line-2);
  /* Les suggestions de recherche peuvent déborder sous la bande : seul le côté est coupé (le décor l'est dans .accroche-fond). */
  position: relative; padding: 44px 0 64px; overflow: hidden; overflow: clip visible; color: var(--text);
  background:
    radial-gradient(55% 75% at 92% 8%, rgba(200, 242, 90, .16), transparent 70%),
    radial-gradient(50% 70% at 0% 100%, rgba(91, 120, 255, .2), transparent 70%),
    linear-gradient(160deg, #101827, #090C12 62%);
}
.accroche-fond { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.accroche-fond::before {
  content: ""; position: absolute; inset: -40% -10% auto auto; width: 900px; height: 700px;
  background: radial-gradient(closest-side, rgba(200, 242, 90, .12), transparent 70%); pointer-events: none;
}
.accroche-fond::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 44px 44px; mask-image: radial-gradient(70% 80% at 30% 40%, #000, transparent 75%);
}
.accroche .wrap { position: relative; z-index: 1; display: grid; gap: 44px; }
@media (min-width: 980px) { .accroche .wrap { grid-template-columns: 1fr 1.05fr; align-items: center; gap: 56px; } .accroche { padding: 72px 0 84px; } }
.etiquette {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 10px;
  border: var(--bord-fort); border-radius: 99px; font: 500 13px/1 var(--police-chiffres); color: var(--muted); background: var(--surface);
}
.etiquette i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px color-mix(in oklab, var(--ok) 20%, transparent); }
.accroche h1 {
  margin: 22px 0 0; font: 700 clamp(38px, 5vw, 60px)/1 var(--police);
  letter-spacing: -.045em; text-wrap: balance;
}
.accroche h1 em { font-style: normal; color: var(--accent); }
.chapo { margin: 20px 0 0; max-width: 540px; color: var(--muted); font-size: 17.5px; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
/* Chiffres clés sous les boutons (vrais : produits et marques du catalogue) */
.chiffres { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 12px 0; margin-top: 36px; }
.chiffres div { padding: 2px 22px 2px 16px; border-left: 2px solid var(--accent); }
.chiffres b { display: block; font: 700 clamp(20px, 2.2vw, 26px)/1.15 var(--police); letter-spacing: -.03em; }
.chiffres span { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
@media (max-width: 640px) { .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 0; } }

/* Recherche de l'accroche : champ clair sur la bande sombre, suggestions dessous (js/accueil.js) */
.recherche-une {
  --text: #111318; --muted: #5A5F6C; --faint: #858A96; --line: #E4E5DF; --surface-2: #EFF0EB; --accent-texte: #4B7600;
  position: relative; z-index: 20; max-width: 560px; margin-top: 26px; color: var(--text);
}
.recherche-une form {
  display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 6px 0 18px; border-radius: 16px;
  background: #FFFFFF; border: 2px solid transparent; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); transition: border-color .2s, box-shadow .2s;
}
.recherche-une form:focus-within { border-color: #C8F25A; box-shadow: 0 0 0 4px rgba(200, 242, 90, .28), 0 18px 40px rgba(0, 0, 0, .35); }
.recherche-une form > svg { flex: none; width: 22px; height: 22px; color: var(--muted); }
.recherche-une input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font-size: 16.5px; color: var(--text); }
.recherche-une input::placeholder { color: var(--faint); }
.recherche-une .btn { height: 48px; padding: 0 18px; border-radius: 12px; }
.recherche-une .btn svg { display: none; }
@media (max-width: 560px) {
  .recherche-une form { height: 56px; padding-left: 14px; }
  .recherche-une .btn { width: 44px; padding: 0; }
  .recherche-une .btn span { display: none; }
  .recherche-une .btn svg { display: block; }
}
.suggestions {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); padding: 6px; border-radius: 16px; background: #FFFFFF;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .4); max-height: min(440px, 62vh); overflow: auto; animation: monte .25s cubic-bezier(.2, .8, .2, 1);
}
.suggestion { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; color: var(--text); }
.suggestion:hover, .suggestion:focus-visible { background: var(--surface-2); outline: 0; }
.suggestion .logo { width: 38px; height: 38px; box-shadow: none; font-size: 15px; }
.suggestion span { flex: 1; min-width: 0; }
.suggestion b { display: block; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggestion small { display: block; font-size: 12.5px; color: var(--muted); }
.suggestion em { flex: none; font: 600 13px var(--police-chiffres); font-style: normal; white-space: nowrap; }
.suggestion em small { display: inline; margin-right: 3px; font: 400 11.5px var(--police-chiffres); color: var(--faint); }
.suggestion-tout {
  display: block; width: 100%; margin-top: 4px; padding: 11px 10px; border: 0; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px;
  background: none; color: var(--accent-texte); font-weight: 600; font-size: 14px; text-align: center; cursor: pointer;
}
.suggestion-tout:hover { background: var(--surface-2); }
.suggestions-vide { padding: 14px 12px 6px; color: var(--muted); font-size: 14px; }

/* À la une : une carte claire à la fois, sur la bande sombre (points et glisser du doigt dans js/accueil.js) */
.une { display: grid; }
.une-carte {
  --text: #111318; --muted: #5A5F6C; --faint: #858A96; --line: #E4E5DF; --line-2: #D2D4CC; --surface: #FFFFFF; --surface-2: #EFF0EB; --accent: #4B7600;
  --bord: 1px solid var(--line); --bord-fort: 1px solid var(--line-2);
  grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 22px; align-items: center;
  padding: 18px; border-radius: 28px; background: #F7F8F4; color: var(--text); box-shadow: 0 40px 90px rgba(0, 0, 0, .45);
  opacity: 0; visibility: hidden; translate: 30px 0;
  transition: opacity .5s ease, translate .6s cubic-bezier(.2, .8, .2, 1), visibility 0s .6s;
}
.une-carte.active { opacity: 1; visibility: visible; translate: none; transition: opacity .5s ease, translate .6s cubic-bezier(.2, .8, .2, 1); }
.une-visuel {
  position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 22px; overflow: hidden;
  background:
    radial-gradient(90% 80% at 25% 15%, color-mix(in oklab, var(--t) 55%, #fff), transparent 70%),
    linear-gradient(150deg, color-mix(in oklab, var(--t) 85%, #fff), color-mix(in oklab, var(--t) 70%, #000));
}
.une-visuel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%) 0 0 / 250% 100%;
  animation: reflet 6s ease-in-out 1.5s infinite;
}
.une-visuel .logo { width: 46%; height: auto; aspect-ratio: 1; border-radius: 23%; box-shadow: 0 22px 44px rgba(0, 0, 0, .35); font-size: clamp(30px, 5vw, 54px); }
.une-pastille {
  position: absolute; left: 50%; bottom: 14px; translate: -50% 0; padding: 7px 14px; border-radius: 99px; white-space: nowrap;
  background: rgba(10, 12, 16, .62); color: #fff; font: 700 14px var(--police); backdrop-filter: blur(6px);
}
.une-infos { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.une-infos .top { font: 600 11.5px var(--police-chiffres); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.une-infos h2 { margin: 10px 0 0; font: 700 clamp(24px, 2.4vw, 32px)/1.08 var(--police); letter-spacing: -.035em; }
.une-infos h2 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.une-infos p { margin: 10px 0 0; color: var(--muted); font-size: 15px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.une-prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-top: 16px; }
.une-prix b { font: 700 clamp(26px, 2.6vw, 32px)/1 var(--police-chiffres); letter-spacing: -.02em; }
.une-prix s { font: 400 15px var(--police-chiffres); color: var(--faint); }
.une-formule { margin-top: 6px; font-size: 13px; color: var(--muted); }
.une-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.une-actions .btn { height: 46px; }
.une-actions .btn.plein { background: #111318; color: #fff; border-color: #111318; }
.une-actions .btn.plein:hover { background: #2A2E37; border-color: #2A2E37; }
.une-points { grid-area: 2 / 1; justify-self: center; display: flex; gap: 6px; margin-top: 18px; }
.une-points button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .3); cursor: pointer; transition: width .3s, background .3s; }
.une-points button[aria-current="true"] { width: 26px; background: var(--accent); }
/* Téléphone et tablette : le produit à la une juste sous le titre, visible dès l'arrivée. */
@media (max-width: 979px) {
  .accroche .wrap { gap: 0; }
  .accroche .wrap > div:first-child { display: contents; }
  .accroche .etiquette { order: 1; justify-self: start; }
  .accroche h1 { order: 2; }
  .recherche-une { order: 3; }
  .une { order: 4; margin-top: 24px; }
  .chapo { order: 5; }
  .ctas { order: 6; }
  .chiffres { order: 7; }
}
@media (min-width: 980px) {
  .une-carte { gap: 28px; padding: 22px; }
  .une-visuel { aspect-ratio: 4 / 5; }
  .une-infos h2 { font-size: 34px; }
}
@media (max-width: 640px) {
  .une-carte { grid-template-columns: 1fr; gap: 16px; padding: 14px; border-radius: 24px; }
  .une-visuel { aspect-ratio: 16 / 10; }
  .une-visuel .logo { width: 30%; }
}

/* Garanties */
.garanties { border-top: var(--bord); border-bottom: var(--bord); }
.garanties .wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 860px) { .garanties .wrap { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.garantie { padding: 22px 12px; display: flex; gap: 12px; align-items: flex-start; border-left: var(--bord); }
.garantie:nth-child(odd) { border-left: 0; }
@media (min-width: 860px) { .garantie:nth-child(odd) { border-left: var(--bord); } .garantie:first-child { border-left: 0; } }
.garantie svg { width: 20px; height: 20px; color: var(--accent); flex: none; margin-top: 2px; }
.garantie b { display: block; font-size: 14.5px; }
.garantie span { font-size: 13px; color: var(--muted); }

/* Rayons (accueil) : une ligne numérotée par catégorie, avec son icône, ses premières marques et son nombre de produits.
   Au survol, la ligne se teinte de la couleur du rayon et la flèche avance. */
.rayons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; border-top: var(--bord); }
@media (max-width: 760px) { .rayons { grid-template-columns: minmax(0, 1fr); } }
.rayon {
  position: relative; isolation: isolate; display: flex; align-items: center; gap: 16px; width: 100%; padding: 18px 12px 18px 6px;
  border: 0; border-bottom: var(--bord); background: none; color: var(--text); text-align: left; cursor: pointer;
}
.rayon::before {
  content: ""; position: absolute; inset: 6px 0; z-index: -1; border-radius: 14px;
  background: color-mix(in oklab, var(--t) 13%, transparent); transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.rayon:hover::before, .rayon:focus-visible::before { transform: scaleX(1); }
.rayon-num { flex: none; width: 24px; font: 500 12.5px var(--police-chiffres); color: var(--faint); }
.rayon-icone {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  color: color-mix(in oklab, var(--t) 75%, var(--text)); background: color-mix(in oklab, var(--t) 15%, transparent);
  border: 1px solid color-mix(in oklab, var(--t) 35%, transparent); transition: transform .3s cubic-bezier(.2, 1.4, .4, 1);
}
.rayon:hover .rayon-icone { transform: rotate(-6deg) scale(1.06); }
.rayon-icone svg { width: 22px; height: 22px; }
.rayon-texte { flex: 1; min-width: 0; }
.rayon-texte b { display: block; font: 700 18px/1.2 var(--police); letter-spacing: -.02em; }
.rayon-texte small { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rayon-nb { flex: none; font: 600 15px var(--police-chiffres); color: var(--muted); }
.rayon > svg:last-child { flex: none; width: 18px; height: 18px; color: var(--faint); transition: transform .25s, color .25s; }
.rayon:hover > svg:last-child { transform: translateX(4px); color: var(--text); }

/* Bouton WhatsApp flottant (toutes les pages) */
.wa-flottant {
  position: fixed; right: 18px; bottom: 18px; z-index: 40; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%;
  background: #25D366; color: #fff; box-shadow: 0 14px 30px rgba(0, 0, 0, .3); transition: transform .2s;
}
.wa-flottant:hover { transform: scale(1.08); }
.wa-flottant svg { width: 30px; height: 30px; }
.wa-flottant::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: #25D366; z-index: -1;
  animation: onde 2.6s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes onde { 70%, 100% { transform: scale(1.6); opacity: 0; } }
@media (max-width: 560px) { .wa-flottant { right: 14px; bottom: 14px; width: 52px; height: 52px; } }

/* ---------- Sections ---------- */
section.bloc { padding: 72px 0; }
.titre-bloc { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 26px; }
h2.titre { margin: 0; font: 700 clamp(30px, 4.4vw, 46px)/1 var(--police); letter-spacing: -.04em; }
h2.titre small { display: block; margin-bottom: 12px; font: 500 13px var(--police-chiffres); color: var(--accent); letter-spacing: .04em; text-transform: uppercase; }
.sous-titre { margin: 10px 0 0; color: var(--muted); }

/* Recherche et catégories */
.recherche {
  display: flex; align-items: center; gap: 10px; width: 100%; max-width: 380px;
  height: 46px; padding: 0 14px; border-radius: var(--radius-sm); border: var(--bord-fort); background: var(--surface);
}
.recherche:focus-within { border-color: var(--accent); }
.recherche svg { width: 18px; height: 18px; color: var(--faint); flex: none; }
.recherche input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 15px; }
.recherche input::placeholder { color: var(--faint); }
.puces {
  position: sticky; top: 66px; z-index: 10; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding: 12px 0; margin-bottom: 18px; background: var(--bg);
}
.puces::-webkit-scrollbar { display: none; }
@media (min-width: 980px) { .puces { flex-wrap: wrap; overflow: visible; } }
.puce {
  flex: none; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 99px;
  border: var(--bord-fort); background: transparent; font-size: 14px; font-weight: 500; color: var(--muted);
}
.puce b { font: 500 12px var(--police-chiffres); color: var(--faint); }
.puce:hover { color: var(--text); }
.puce[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.puce[aria-pressed="true"] b { color: color-mix(in oklab, var(--bg) 60%, var(--text)); }

/* ---------- Cartes produit ---------- */
.grille { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }
@media (max-width: 560px) { .grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.carte {
  display: flex; flex-direction: column; border-radius: var(--radius); background: var(--surface); border: var(--bord);
  overflow: hidden; transition: border-color .2s, transform .2s;
}
.carte:hover { border-color: var(--line-2); transform: translateY(-2px); }
.tuile {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 10px;
  aspect-ratio: 16 / 10; padding: 14px; border-bottom: var(--bord);
  background:
    radial-gradient(130% 100% at 0% 0%, color-mix(in oklab, var(--t) 34%, transparent), transparent 64%),
    linear-gradient(var(--surface-2), var(--surface-2));
}
.tuile::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 22px 22px; opacity: .35; mask-image: linear-gradient(135deg, transparent 35%, #000);
}
.tuile .nomt {
  position: relative; z-index: 1; font: 700 clamp(19px, 2.4vw, 26px)/.95 var(--police); letter-spacing: -.04em;
  color: color-mix(in oklab, var(--t) var(--teinte-part), var(--teinte-base));
}
.tuile .remise { position: absolute; top: 12px; right: 12px; z-index: 1; }
.remise {
  font: 600 12px/1 var(--police-chiffres); padding: 6px 8px; border-radius: 8px;
  background: var(--accent-fond); color: var(--accent-ink);
}

/* Logo d'un produit (icône carrée arrondie, ou monogramme de secours) */
.logo { display: block; flex: none; width: 46px; height: 46px; border-radius: 23.4%; position: relative; z-index: 1; box-shadow: var(--ombre-logo); }
.logo.mono {
  display: grid; place-items: center; background: var(--t); color: #fff;
  font: 800 20px/1 var(--police); letter-spacing: -.03em; text-transform: uppercase;
}

.corps { flex: 1; display: flex; flex-direction: column; padding: 14px; }
.corps .cat { font: 500 11.5px var(--police-chiffres); text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.corps h3 { margin: 6px 0 0; font-size: 16px; line-height: 1.25; letter-spacing: -.01em; }
.corps h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.corps .duree { margin-top: 4px; font-size: 13.5px; color: var(--muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.corps .stock { margin-top: 8px; align-self: start; display: inline-flex; align-items: center; gap: 6px; font: 500 12px var(--police-chiffres); color: var(--muted); }
.corps .stock::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.corps .stock.peu { color: var(--warn); }
.corps .stock.peu::before { background: var(--warn); }
.corps .bas { margin-top: auto; padding-top: 14px; display: flex; align-items: end; justify-content: space-between; gap: 8px; }
.prix { font: 600 16px/1.2 var(--police-chiffres); }
.prix small { display: block; font: 400 11.5px var(--police-chiffres); color: var(--faint); }
.prix s { display: block; font: 400 12px var(--police-chiffres); color: var(--faint); }
.ajout {
  flex: none; height: 40px; min-width: 40px; padding: 0 10px; border-radius: 12px; border: var(--bord-fort); background: var(--surface-2);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 600; font-size: 14px;
  transition: background .15s, color .15s, border-color .15s;
}
.ajout svg { width: 18px; height: 18px; }
.ajout span { display: none; }
.ajout.choisir span { display: inline; }
.ajout:hover { background: var(--accent-fond); color: var(--accent-ink); border-color: var(--accent-fond); }
/* Carte d'une marque : une ligne par offre, chacune mène à sa page produit. */
.offres { list-style: none; margin: 0; padding: 10px 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
/* « Voir l'autre offre » (lien vers la page produit) et « Voir les … autres formules » : bien visibles
   (teinte de l'accent), pleins au survol. */
.voir-offres {
  display: block; width: 100%; margin-top: 10px; padding: 10px 12px; border-radius: 10px; cursor: pointer;
  border: 1px solid color-mix(in oklab, var(--accent-fond) 60%, transparent);
  background: color-mix(in oklab, var(--accent-fond) 14%, transparent);
  font: 600 14px var(--police); color: var(--accent); text-align: center; transition: background .15s, color .15s, border-color .15s;
}
.voir-offres:hover { background: var(--accent-fond); border-color: var(--accent-fond); color: var(--accent-ink); }
.voir-offres[hidden] { display: none; }
.gamme .voir-offres { margin-top: auto; }
.gamme .offres { margin-bottom: 10px; }
.offres a {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px;
  border: var(--bord); background: var(--surface-2); transition: border-color .15s, background .15s;
}
.offres a:hover { border-color: var(--accent-fond); }
.offres span { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.offres span small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.offres a { flex-wrap: wrap; row-gap: 3px; }
.offres .stock-offre { flex-basis: 100%; color: var(--ok); font: 500 11.5px/1.3 var(--police-chiffres); }
.offres .stock-offre.peu { color: var(--warn); }
.offres b { flex: none; text-align: right; font: 600 13.5px/1.2 var(--police-chiffres); white-space: nowrap; }
.offres b small { display: block; font: 400 11px var(--police-chiffres); color: var(--faint); }
.offres svg { flex: none; width: 15px; height: 15px; color: var(--faint); }
/* Épuisé : toujours en rouge, bien visible (le reste de la carte est grisé, pas la mention). */
.remise.rupture { background: var(--erreur); color: #fff; }
.offres .epuise span, .offres .epuise svg { opacity: .5; }
.offres .epuise b { color: var(--erreur); }
.carte.epuise .tuile { --t: var(--faint); }
.carte.epuise .tuile .logo, .carte.epuise .tuile .nomt { filter: grayscale(1); opacity: .55; }
.carte.epuise .prix { opacity: .5; }
.carte.epuise .ajout { pointer-events: none; color: var(--erreur); border-color: color-mix(in oklab, var(--erreur) 50%, transparent); background: color-mix(in oklab, var(--erreur) 12%, transparent); }
.carte.epuise .ajout span { display: inline; }
@media (max-width: 560px) {
  .corps { padding: 12px; }
  .corps h3 { font-size: 14.5px; }
  .prix { font-size: 14.5px; }
  .tuile { padding: 12px; }
  .tuile .logo { width: 38px; height: 38px; }
  .ajout { height: 36px; min-width: 36px; border-radius: 10px; }
  .ajout.choisir span { display: none; }
  /* Colonne étroite : le prix passe sous le nom de l'offre. */
  .offres a { flex-wrap: wrap; padding: 7px 8px; gap: 2px 6px; }
  .offres span { flex-basis: 100%; font-size: 13px; }
  .offres b { text-align: left; font-size: 13px; }
  .offres b small { display: inline; margin-right: 3px; }
  .offres svg { margin-left: auto; }
  .voir-offres { padding: 9px 6px; font-size: 13px; }
}
.vide { grid-column: 1 / -1; padding: 48px 0; text-align: center; color: var(--muted); }

/* ---------- Étapes, questions, appel ---------- */
.etapes { display: grid; gap: 14px; }
@media (min-width: 860px) { .etapes { grid-template-columns: repeat(3, 1fr); } }
.etape { padding: 26px; border-radius: var(--radius); border: var(--bord); background: var(--surface); }
.etape .num { font: 500 13px var(--police-chiffres); color: var(--accent); }
.etape h3 { margin: 18px 0 8px; font: 700 21px/1.15 var(--police); letter-spacing: -.025em; }
.etape p { margin: 0; color: var(--muted); font-size: 15px; }
.etape code { font: 500 13px var(--police-chiffres); color: var(--text); background: var(--surface-2); padding: 2px 6px; border-radius: 6px; }

.faq { display: grid; gap: 10px; max-width: 860px; }
details.question { border: var(--bord); border-radius: 14px; background: var(--surface); }
details.question summary {
  list-style: none; cursor: pointer; padding: 18px 20px; font-weight: 600; font-size: 16px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
details.question summary::-webkit-details-marker { display: none; }
details.question summary::after { content: "+"; flex: none; font: 400 20px/1 var(--police-chiffres); color: var(--faint); }
details.question[open] summary::after { content: "−"; color: var(--accent); }
details.question p { margin: 0; padding: 0 20px 20px; color: var(--muted); }

.appel {
  border-radius: 24px; padding: clamp(28px, 5vw, 56px); border: var(--bord-fort);
  background: radial-gradient(90% 140% at 100% 0%, var(--halo-fort), transparent 60%), var(--surface);
  display: grid; gap: 22px; align-items: center;
}
@media (min-width: 860px) { .appel { grid-template-columns: 1fr auto; } }
.appel h2 { margin: 0; font: 700 clamp(28px, 4vw, 42px)/1.05 var(--police); letter-spacing: -.04em; }
.appel p { margin: 10px 0 0; color: var(--muted); }

/* ---------- Pied de page ---------- */
.pied { border-top: var(--bord); margin-top: 72px; padding: 36px 0 48px; color: var(--faint); font-size: 13.5px; }
.pied .wrap { display: flex; flex-wrap: wrap; gap: 18px 40px; justify-content: space-between; }
.pied .marque { color: var(--text); font-size: 20px; }
.pied p { margin: 12px 0 0; max-width: 440px; }
.pied a:hover { color: var(--text); }

/* ---------- Panier (tiroir) ---------- */
.voile { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .55); opacity: 0; transition: opacity .25s; }
.voile.ouvert { opacity: 1; }
.tiroir {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 41; width: min(440px, 100%);
  display: flex; flex-direction: column; background: var(--bg); border-left: var(--bord-fort);
  transform: translateX(105%); transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.tiroir.ouvert { transform: none; }
.tiroir-tete { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: var(--bord); }
.tiroir-tete h2 { margin: 0; font: 700 22px var(--police); letter-spacing: -.03em; }
.fermer { width: 40px; height: 40px; border-radius: 12px; border: var(--bord-fort); background: var(--surface); display: grid; place-items: center; }
.fermer svg { width: 18px; height: 18px; }
.tiroir-corps { flex: 1; overflow-y: auto; padding: 8px 20px; }
.ligne { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start; padding: 16px 0; border-bottom: var(--bord); }
.ligne:last-child { border-bottom: 0; }
.ligne .logo { width: 44px; height: 44px; }
.ligne b { display: block; font-size: 15px; line-height: 1.3; }
.ligne .f { display: block; font-size: 13.5px; color: var(--muted); }
.ligne .droite { text-align: right; }
.ligne .montant { font: 600 15px var(--police-chiffres); white-space: nowrap; }
.retirer { margin-top: 8px; border: 0; background: none; padding: 0; font-size: 13px; color: var(--faint); text-decoration: underline; text-underline-offset: 3px; }
.retirer:hover { color: var(--text); }
.quantite { display: inline-flex; align-items: center; margin-top: 10px; border: var(--bord-fort); border-radius: 10px; overflow: hidden; }
.quantite button { width: 32px; height: 32px; border: 0; background: var(--surface); font-size: 17px; line-height: 1; }
.quantite button:hover { background: var(--surface-2); }
.quantite output { min-width: 32px; text-align: center; font: 600 14px var(--police-chiffres); }
.tiroir-pied { padding: 18px 20px calc(18px + env(safe-area-inset-bottom)); border-top: var(--bord); display: grid; gap: 12px; }
.total { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; color: var(--muted); }
.total b { font: 700 22px var(--police-chiffres); color: var(--text); }
.note { margin: 0; text-align: center; font-size: 13px; color: var(--faint); }
.panier-vide { padding: 56px 8px; text-align: center; color: var(--muted); }
.panier-vide b { display: block; margin-bottom: 6px; font-size: 18px; color: var(--text); }
.panier-vide .btn { margin-top: 18px; }

/* ---------- Notification ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 60; transform: translate(-50%, calc(100% + 40px));
  visibility: hidden; transition: transform .3s cubic-bezier(.2, .9, .3, 1.2), visibility 0s .3s;
  display: flex; align-items: center; gap: 12px; max-width: calc(100% - 32px);
  padding: 10px 10px 10px 16px; border-radius: 14px; background: var(--text); color: var(--bg); font-weight: 600; font-size: 14.5px;
  box-shadow: var(--ombre-toast);
}
.toast.vu { transform: translate(-50%, 0); visibility: visible; transition: transform .3s cubic-bezier(.2, .9, .3, 1.2); }
.toast button { height: 34px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--accent-fond); color: var(--accent-ink); font-weight: 700; font-size: 13.5px; white-space: nowrap; }

/* ---------- Page produit ---------- */
.fil { padding: 22px 0 0; font-size: 13.5px; color: var(--faint); }
.fil a:hover { color: var(--text); }
.fil span { margin: 0 8px; }
.produit { display: grid; gap: 32px; padding: 22px 0 64px; }
@media (min-width: 900px) { .produit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; } }
.visuel {
  position: relative; aspect-ratio: 1 / .82; border-radius: 24px; border: var(--bord); overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 22px; padding: 28px;
  background:
    radial-gradient(90% 80% at 30% 20%, color-mix(in oklab, var(--t) 38%, transparent), transparent 66%),
    var(--surface);
}
@media (min-width: 900px) { .visuel { position: sticky; top: 92px; } }
.visuel .logo { width: clamp(96px, 16vw, 132px); height: clamp(96px, 16vw, 132px); }
.visuel .nomt { font: 700 clamp(30px, 4.4vw, 48px)/1 var(--police); letter-spacing: -.04em; text-align: center; color: color-mix(in oklab, var(--t) var(--teinte-part), var(--teinte-base)); }
.visuel .remise { position: absolute; top: 18px; right: 18px; font-size: 14px; padding: 8px 10px; }
.infos .cat { font: 500 12.5px var(--police-chiffres); text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.infos h1 { margin: 12px 0 0; font: 700 clamp(32px, 4.6vw, 50px)/1.02 var(--police); letter-spacing: -.04em; text-wrap: balance; }
.etat-stock { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 14px; color: var(--muted); }
.etat-stock i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.etat-stock.bas i { background: var(--warn); }
.etat-stock.non { color: var(--erreur); font-weight: 600; }
.etat-stock.non i { background: var(--erreur); }
.infos .description { margin: 18px 0 0; font-size: 17px; color: var(--muted); max-width: 540px; }
.etiquette-champ { display: block; margin: 28px 0 10px; font: 600 12.5px var(--police-chiffres); text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.formules { display: grid; gap: 10px; }
.formule {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px;
  border-radius: var(--radius-sm); border: var(--bord-fort); background: var(--surface); cursor: pointer; text-align: left; width: 100%;
}
.formule .rond { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--faint); flex: none; display: grid; place-items: center; }
.formule[aria-checked="true"] { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 8%, var(--surface)); }
.formule[aria-checked="true"] .rond { border-color: var(--accent); }
.formule[aria-checked="true"] .rond::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.formule .g { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.formule .d { font: 600 15px var(--police-chiffres); white-space: nowrap; }
.formule .d.demande { font: 500 13.5px var(--police); color: var(--faint); }
.formule:disabled { cursor: not-allowed; }
.formule:disabled .g { opacity: .5; }
.formule .d.rupture { font: 600 13.5px var(--police); color: var(--erreur); }
.formule .reco {
  display: table; margin-top: 6px; padding: 3px 7px; border-radius: 6px; font: 600 10.5px/1.2 var(--police-chiffres);
  text-transform: uppercase; letter-spacing: .05em; background: var(--accent-fond); color: var(--accent-ink);
}
/* Offres de la même marque, en tuiles : la choisie en surbrillance (comme une formule). */
#offres { scroll-margin-top: 84px; }
.choix-offres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.offre-choix {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; min-width: 0; text-align: left; cursor: pointer;
  border-radius: var(--radius-sm); border: var(--bord-fort); background: var(--surface); transition: border-color .15s, background .15s;
}
.offre-choix:hover { border-color: color-mix(in oklab, var(--accent) 50%, var(--line-2)); }
.offre-choix[aria-checked="true"] { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 8%, var(--surface)); }
.offre-choix .o-nom { font-weight: 700; font-size: 15px; line-height: 1.2; }
.offre-choix .o-prix { font: 600 14px var(--police-chiffres); }
.offre-choix .o-prix small { font: 400 11.5px var(--police-chiffres); color: var(--faint); }
.offre-choix .o-prix .rupture { font: 600 13.5px var(--police); color: var(--erreur); }
.offre-choix .o-info { max-width: 100%; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn.rupture[disabled] { opacity: 1; color: var(--erreur); border-color: color-mix(in oklab, var(--erreur) 50%, transparent); background: color-mix(in oklab, var(--erreur) 12%, transparent); }
.achat { display: flex; flex-wrap: wrap; align-items: end; gap: 18px 28px; margin-top: 26px; }
.prix-grand { font: 700 34px/1 var(--police-chiffres); letter-spacing: -.02em; }
.prix-grand s { display: inline-block; margin-left: 10px; font: 400 16px var(--police-chiffres); color: var(--faint); letter-spacing: 0; }
.economie { margin-top: 8px; font-size: 14px; color: var(--ok); font-weight: 600; }
.quantite.grande button { width: 44px; height: 44px; font-size: 20px; }
.quantite.grande output { min-width: 40px; font-size: 16px; }
.boutons-achat { display: grid; gap: 10px; margin-top: 24px; }
@media (min-width: 520px) { .boutons-achat { grid-template-columns: 1fr 1fr; } }
.rassurance { display: grid; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; font-size: 14.5px; color: var(--muted); }
.rassurance li { display: flex; gap: 10px; align-items: center; }
.rassurance svg { width: 18px; height: 18px; color: var(--accent); flex: none; }
.introuvable { padding: 96px 0; text-align: center; }
.introuvable h1 { font: 700 36px var(--police); letter-spacing: -.03em; margin: 0 0 12px; }
.introuvable p { color: var(--muted); margin: 0 0 24px; }

/* ---------- Paiement ---------- */
.paiement { display: grid; gap: 28px; padding: 32px 0 64px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .paiement { grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: start; } }
@media (max-width: 959px) { .paiement > .recap { order: -1; } }
.retour { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; font-size: 14px; color: var(--muted); }
.retour:hover { color: var(--text); }
.paiement h1 { margin: 0 0 6px; font: 700 clamp(30px, 4.4vw, 44px)/1.05 var(--police); letter-spacing: -.04em; }
.paiement .sous-titre { margin: 0 0 8px; }
.etape-form { margin-top: 22px; padding: 22px; border-radius: var(--radius); border: var(--bord); background: var(--surface); }
.etape-form h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font: 700 19px var(--police); letter-spacing: -.02em; }
.etape-form h2 > span:first-child {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--accent-fond); color: var(--accent-ink); font: 700 14px var(--police-chiffres);
}
.champs { display: grid; gap: 14px; }
@media (min-width: 640px) { .champs.deux { grid-template-columns: 1fr 1fr; } }
.champ label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.champ label small { font-weight: 400; color: var(--faint); }
.champ input {
  width: 100%; height: 48px; padding: 0 14px; border-radius: var(--radius-sm); border: var(--bord-fort); background: var(--bg);
  font-size: 16px; outline: 0;
}
.champ input:focus { border-color: var(--accent); }
.champ .aide { margin-top: 6px; font-size: 13px; color: var(--faint); }
.champ.erreur input { border-color: var(--erreur); }
.champ .msg { display: none; margin-top: 6px; font-size: 13px; color: var(--erreur); font-weight: 600; }
.champ.erreur .msg { display: block; }
.operateurs-choix { display: grid; gap: 10px; }
/* Trois moyens : sur une ligne ; quatre (avec Binance Pay) : deux par deux. */
@media (min-width: 640px) {
  .operateurs-choix { grid-template-columns: repeat(2, 1fr); }
  .operateurs-choix:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
}
.operateur {
  display: flex; align-items: center; gap: 12px; padding: 14px; width: 100%; text-align: left;
  border-radius: var(--radius-sm); border: var(--bord-fort); background: var(--bg);
}
.operateur i {
  min-width: 46px; height: 36px; padding: 0 6px; border-radius: 10px; flex: none; display: grid; place-items: center;
  font: 800 11px var(--police); letter-spacing: -.02em; font-style: normal; color: #111;
}
.operateur b { display: block; font-size: 14.5px; }
.operateur small { font: 500 12.5px var(--police-chiffres); color: var(--faint); }
.operateur[aria-checked="true"] { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 8%, var(--bg)); }
.consignes { margin: 0; padding: 0; list-style: none; counter-reset: c; display: grid; gap: 14px; }
.consignes li { counter-increment: c; display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; }
.consignes li::before {
  content: counter(c); width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
  background: var(--surface-2); font: 600 13px var(--police-chiffres); color: var(--muted);
}
.copier {
  display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 0; padding: 6px 6px 6px 12px; border-radius: 10px;
  border: var(--bord-fort); background: var(--bg); font: 600 16px var(--police-chiffres);
}
.copier button { height: 30px; padding: 0 10px; border: 0; border-radius: 8px; background: var(--surface-2); font: 600 12.5px var(--police); }
.copier button:hover { background: var(--accent-fond); color: var(--accent-ink); }
.reference { margin-top: 18px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: 14px; color: var(--muted); }
.reference b { color: var(--text); font-family: var(--police-chiffres); }
.recap { padding: 22px; border-radius: var(--radius); border: var(--bord); background: var(--surface); }
@media (min-width: 960px) { .recap { position: sticky; top: 92px; } }
.recap h2 { margin: 0 0 6px; font: 700 19px var(--police); }
.recap .ligne { grid-template-columns: auto 1fr auto; padding: 14px 0; }
.recap .ligne .logo { width: 40px; height: 40px; }
.recap .total { margin-top: 6px; padding-top: 16px; border-top: var(--bord-fort); }
/* Paiement automatique (SasPay) : les trois réseaux acceptés, en pastilles qui se chevauchent. */
.paye-auto { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius-sm); border: var(--bord); background: var(--surface-2); }
.paye-auto .pastilles { display: flex; flex: none; }
.paye-auto .pastilles i {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--surface-2);
  font: 800 10.5px var(--police); letter-spacing: -.02em; font-style: normal;
}
.paye-auto .pastilles i + i { margin-left: -10px; }
.paye-auto b { display: block; font-size: 15px; }
.paye-auto small { display: block; margin-top: 2px; font-size: 13px; color: var(--faint); }
.envoi { margin-top: 22px; }
.envoi .note { margin-top: 12px; }
.alerte { margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--erreur); color: var(--erreur); font-size: 14px; font-weight: 600; }

/* ---------- Confirmation ---------- */
.merci { max-width: 640px; margin: 0 auto; padding: 56px 0 64px; text-align: center; }
.coche {
  width: 72px; height: 72px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center;
  background: var(--ok); color: #fff; animation: pop .5s cubic-bezier(.2, 1.4, .4, 1) both;
}
.coche svg { width: 34px; height: 34px; }
/* Paiement automatique en attente de confirmation : sablier qui tourne (merci.html). */
.coche.attente { background: var(--surface-2); color: var(--muted); font: 700 28px var(--police); border: var(--bord-fort); }
.coche .sablier { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--line-2); border-top-color: var(--accent); animation: tourne .9s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
.merci h1 { margin: 22px 0 10px; font: 700 clamp(30px, 5vw, 46px)/1.05 var(--police); letter-spacing: -.04em; }
.merci .ref { font: 600 15px var(--police-chiffres); color: var(--accent); }
.merci p { color: var(--muted); font-size: 16.5px; }
.encadre { margin: 28px 0 0; padding: 22px; text-align: left; border-radius: var(--radius); border: var(--bord); background: var(--surface); }
.encadre h2 { margin: 0 0 6px; font: 700 18px var(--police); }
.encadre p { margin: 0 0 16px; font-size: 15px; }
.merci .liens { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }

/* ---------- Mesure d'audience (js/mesure.js) ---------- */
/* Bandeau de consentement : Refuser et Accepter ont exactement le même poids. */
.mesure {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 39; display: grid; gap: 12px;
  max-width: 540px; padding: 16px; border-radius: var(--radius); border: var(--bord-fort);
  background: var(--surface); box-shadow: var(--ombre-toast); font-size: 14px; line-height: 1.5;
}
.mesure p { margin: 0; color: var(--muted); }
.mesure p b { color: var(--text); }
.mesure a { color: var(--accent); text-decoration: underline; }
.mesure-boutons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 720px) { .mesure { left: 24px; bottom: 24px; } }

/* Case « Me recontacter » de la page de paiement */
.case-rappel { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; font-size: 14.5px; cursor: pointer; }
.case-rappel input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--accent); }
.case-rappel small { display: block; margin-top: 2px; color: var(--faint); font-size: 13px; }
.case-rappel .aide-rappel { color: var(--warn); }

/* Page Confidentialité */
.texte-page { max-width: 760px; padding: 40px 0 72px; }
.texte-page h1 { font: 700 clamp(28px, 5vw, 38px)/1.1 var(--police); letter-spacing: -.03em; margin: 0 0 16px; }
.texte-page h2 { font: 700 19px var(--police); margin: 32px 0 8px; }
.texte-page p, .texte-page li { color: var(--muted); }
.texte-page ul { padding-left: 20px; }
.texte-page a:not(.btn) { color: var(--accent); text-decoration: underline; }
.texte-page .choix { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 14px; }

/* ---------- Animations ----------
   Légères et sur transform / opacity seulement (téléphones modestes). L'apparition au défilement (.revele) n'est
   posée que par JavaScript (js/site.js) : sans lui, tout reste visible. « Moins de mouvement » demandé par
   l'appareil : tout s'arrête (fin du fichier). */
@keyframes monte { from { opacity: 0; translate: 0 22px; } }
@keyframes flotte { 50% { translate: 0 -7px; rotate: -3deg; } }
@keyframes ping { 75%, 100% { transform: scale(2.6); opacity: 0; } }
@keyframes halo { to { translate: -14% 12%; scale: 1.18; } }
@keyframes brille { 0% { background-position: 100% 0; } 45%, 100% { background-position: 0 0; } }
@keyframes reflet { 0%, 55% { background-position: 140% 0; } 100% { background-position: -40% 0; } }
@keyframes defile { to { transform: translateX(-50%); } }
@keyframes saute { 40% { transform: scale(1.45); } }
@keyframes bascule { from { opacity: .25; translate: 0 8px; } }

/* Accroche : entrée en cascade, halo qui dérive, accroche qui brille, point « en direct » qui pulse. */
.accroche .wrap > div:first-child > * { animation: monte .8s cubic-bezier(.2, .8, .2, 1) both; }
.accroche .wrap > div:first-child > :nth-child(2) { animation-delay: .08s; }
.accroche .wrap > div:first-child > :nth-child(3) { animation-delay: .16s; }
.accroche .wrap > div:first-child > :nth-child(4) { animation-delay: .24s; }
.accroche .wrap > div:first-child > :nth-child(5) { animation-delay: .32s; }
.accroche .wrap > div:first-child > :nth-child(6) { animation-delay: .4s; }
.une { animation: monte .9s cubic-bezier(.2, .8, .2, 1) .2s both; }
.accroche-fond::before { animation: halo 14s ease-in-out infinite alternate; }
.accroche h1 em {
  background: linear-gradient(100deg, var(--accent) 40%, #F4FFD6 50%, var(--accent) 60%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: brille 6s ease-in-out 1.2s infinite;
}
.etiquette i, .etat-stock i { position: relative; }
.etiquette i::after, .etat-stock:not(.non) i::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit;
  animation: ping 2.2s cubic-bezier(0, 0, .2, 1) infinite;
}
/* À la une et page produit : logos qui flottent. */
.une-visuel .logo, .visuel .logo { animation: flotte 6s ease-in-out infinite; }

/* Défilé des marques, juste sous l'en-tête : visible dès l'arrivée (deux copies à la suite : la boucle ne se voit pas ;
   pause au survol). */
.defile {
  overflow: hidden; padding: 12px 0; border-bottom: var(--bord); animation: monte .7s cubic-bezier(.2, .8, .2, 1) both;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.defile-piste { display: flex; width: max-content; animation: defile var(--duree, 80s) linear infinite; }
.defile:hover .defile-piste { animation-play-state: paused; }
.defile-marque {
  display: inline-flex; align-items: center; gap: 9px; margin-right: 10px; padding: 6px 14px 6px 6px; border-radius: 99px;
  border: var(--bord); background: var(--surface); font-size: 14px; font-weight: 600; white-space: nowrap; color: var(--muted);
  transition: color .15s, border-color .15s;
}
.defile-marque:hover { color: var(--text); border-color: var(--line-2); }
.defile .logo { width: 28px; height: 28px; border-radius: 8px; box-shadow: none; }
.defile .logo.mono { font-size: 11px; }

/* Apparition au défilement, en cascade (--d posé par js/site.js). « translate » laisse « transform » au survol. */
.revele { opacity: 0; translate: 0 26px; }
.revele.vu {
  opacity: 1; translate: none;
  transition: opacity .6s ease var(--d, 0s), translate .7s cubic-bezier(.2, .8, .2, 1) var(--d, 0s), border-color .2s, transform .2s;
}

/* Cartes : lumière qui suit la souris (--mx, --my posés par js/site.js), logo qui s'incline. */
.carte { position: relative; }
.carte::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), color-mix(in oklab, var(--t) 16%, transparent), transparent 70%);
}
.carte:hover::after { opacity: 1; }
.tuile .logo { transition: transform .4s cubic-bezier(.2, 1.4, .4, 1); }
.carte:hover .tuile .logo { transform: scale(1.08) rotate(-4deg); }

/* Boutons : flèche qui avance, léger enfoncement au clic. */
.btn { transition: border-color .15s, background .15s, transform .12s; }
.btn:active { transform: scale(.97); }
.btn.plein svg { transition: transform .2s; }
.btn.plein:hover svg { transform: translateX(3px); }
.pastille-compte.saute { animation: saute .45s cubic-bezier(.2, 1.6, .4, 1); }

/* Page produit : entrée, formule choisie qui « clique », prix qui bascule quand il change. */
.produit.entree .visuel { animation: monte .8s cubic-bezier(.2, .8, .2, 1) both; }
.produit.entree .infos { animation: monte .8s cubic-bezier(.2, .8, .2, 1) .12s both; }
.formule[aria-checked="true"] .rond::after { animation: pop .35s cubic-bezier(.2, 1.4, .4, 1); }
.prix-grand.change { animation: bascule .35s cubic-bezier(.2, .8, .2, 1); }

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .defile-piste { animation: none; }
  .revele { opacity: 1; translate: none; }
}