/* ============================================================
   CRESCENDO — Thème clair + bouton de bascule clair/sombre
   Activé via html[data-theme="light"] (géré par /theme.js).
   Le thème sombre reste le style de base des feuilles existantes.
   ============================================================ */

/* ---------- Bouton de bascule (visible dans les deux thèmes) ---------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--hair);
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  transition: color .22s ease, border-color .22s ease, background .22s ease, transform .3s var(--ease-fluid, ease);
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink); transform: translateY(-1px); }
.theme-toggle:active { transform: scale(.94); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .icon-moon { display: none; }
html[data-theme="light"] .theme-toggle .icon-sun { display: none; }
html[data-theme="light"] .theme-toggle .icon-moon { display: block; }

/* ---------- Palette claire ---------- */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #eef1f7;
  --ink: #131a2c;
  --muted: #4d5975;
  --faint: #707d9d;
  --hair: rgba(19, 26, 44, .16);
  --hair-soft: rgba(19, 26, 44, .08);
  --hair2: rgba(19, 26, 44, .08);
  --gold: #2c4272;
  --amber: #233457;
  --orange: #41537c;
  --orange-deep: #5c6885;
  --green: #177a43;
  --red: #c03a3a;
  --stock-amber: #9a6b0f;
  --glass-surface:
    linear-gradient(140deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .6) 46%, rgba(226, 232, 244, .55)),
    rgba(255, 255, 255, .5);
  --glass:
    linear-gradient(145deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .62)),
    rgba(255, 255, 255, .45);
  --liquid-fill:
    linear-gradient(138deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .62) 38%, rgba(226, 232, 244, .5) 100%),
    rgba(255, 255, 255, .45);
  --liquid-fill-soft:
    linear-gradient(145deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .58) 64%, rgba(228, 233, 244, .5)),
    rgba(255, 255, 255, .4);
  --liquid-edge: rgba(19, 26, 44, .14);
  --liquid-edge-hot: rgba(19, 26, 44, .32);
  --liquid-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 24px 50px -30px rgba(24, 36, 66, .3);
  --liquid-shadow-hover:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 32px 64px -34px rgba(24, 36, 66, .4);
}

/* ---------- Fond de page ---------- */
html[data-theme="light"] body {
  background:
    radial-gradient(900px 620px at 82% -8%, rgba(60, 110, 220, .1), transparent 60%),
    radial-gradient(840px 600px at 6% 14%, rgba(60, 110, 220, .08), transparent 58%),
    var(--bg);
  background-attachment: fixed;
}
html[data-theme="light"] body::before {
  opacity: .5;
  background:
    repeating-linear-gradient(118deg, rgba(19, 26, 44, .02) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(28deg, transparent 0 9px, rgba(19, 26, 44, .012) 9px 10px);
}
html[data-theme="light"] ::selection { background: rgba(60, 110, 224, .22); }
html[data-theme="light"] .page-auras,
html[data-theme="light"] .auras { opacity: .4; }

/* ---------- Navigation ---------- */
html[data-theme="light"] .site-nav,
html[data-theme="light"] .nav {
  background:
    radial-gradient(42% 180% at 8% 50%, rgba(60, 110, 224, .08), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(243, 246, 252, .92)),
    rgba(255, 255, 255, .92);
  border-color: rgba(19, 26, 44, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 18px 40px -26px rgba(24, 36, 66, .38);
}
html[data-theme="light"] .nav-progress {
  background: linear-gradient(90deg, rgba(62, 107, 224, .85), rgba(29, 43, 77, .9) 52%, rgba(145, 67, 224, .7));
}
html[data-theme="light"] .cart-btn:hover { border-color: rgba(19, 26, 44, .38); box-shadow: inset 0 1px 0 #fff, 0 12px 22px -12px rgba(24, 36, 66, .4); }

/* Focus visibles (les halos clairs deviennent invisibles sur fond clair) */
html[data-theme="light"] a:focus-visible,
html[data-theme="light"] button:focus-visible,
html[data-theme="light"] .ui-btn:focus-visible,
html[data-theme="light"] .faq-item summary:focus-visible { outline-color: rgba(38, 62, 120, .55); }
html[data-theme="light"] .brand:focus-visible { outline-color: rgba(38, 62, 120, .55); }

/* ---------- Cartes & surfaces vitrées ---------- */
html[data-theme="light"] .card,
html[data-theme="light"] .glass-card {
  border-color: rgba(19, 26, 44, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 26px 56px -36px rgba(24, 36, 66, .35);
}
html[data-theme="light"] .card::before,
html[data-theme="light"] .glass-card::before {
  background:
    radial-gradient(85% 70% at 0% 0%, rgba(255, 255, 255, .85), transparent 55%),
    linear-gradient(120deg, transparent 62%, rgba(60, 110, 224, .04));
}
html[data-theme="light"] .step,
html[data-theme="light"] .faq-item,
html[data-theme="light"] .about-card,
html[data-theme="light"] .pickup-card,
html[data-theme="light"] .contact-card {
  border-color: rgba(19, 26, 44, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 24px 48px -32px rgba(24, 36, 66, .3);
}
html[data-theme="light"] .faq-item[open] {
  background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(238, 241, 248, .75));
  border-color: rgba(38, 62, 120, .35);
}
html[data-theme="light"] .faq-item summary:hover::after { background: rgba(19, 26, 44, .06); }
html[data-theme="light"] .about-photo { border-color: rgba(19, 26, 44, .16); box-shadow: 0 28px 54px -32px rgba(24, 36, 66, .5); }
html[data-theme="light"] .about-promise,
html[data-theme="light"] .pickup-address,
html[data-theme="light"] .contact-channel {
  border-color: rgba(38, 62, 120, .25);
  background: linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(233, 238, 248, .75));
}
html[data-theme="light"] .contact-channel:hover {
  border-color: rgba(38, 62, 120, .45);
  background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(226, 233, 246, .85));
}
html[data-theme="light"] .contact-ic {
  background: rgba(19, 26, 44, .05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}
html[data-theme="light"] .drive-step { color: var(--ink); }
html[data-theme="light"] .drive-step > span { color: #f4f6fb; }

/* Sélecteur de période (accueil) */
html[data-theme="light"] .period {
  background:
    radial-gradient(110% 120% at 8% -10%, rgba(255, 255, 255, .95), transparent 46%),
    rgba(255, 255, 255, .68);
  border-color: rgba(19, 26, 44, .16);
  box-shadow: inset 0 1px 0 #fff, 0 30px 64px -34px rgba(24, 36, 66, .35);
}
html[data-theme="light"] .period::before {
  background: linear-gradient(115deg, rgba(255, 255, 255, .75), transparent 28% 76%, rgba(60, 110, 224, .05));
}
html[data-theme="light"] .period.calendar-open::after {
  background: rgba(24, 36, 66, .3);
}

/* ---------- Champs de formulaire ---------- */
html[data-theme="light"] .ui-input,
html[data-theme="light"] .ui-select,
html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="light"] select,
html[data-theme="light"] .inp,
html[data-theme="light"] .date-trigger {
  color: var(--ink);
  border-color: rgba(19, 26, 44, .2);
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(24, 36, 66, .08);
}
html[data-theme="light"] .ui-input:focus,
html[data-theme="light"] .ui-select:focus,
html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] .date-trigger:focus-visible {
  border-color: rgba(38, 62, 120, .6);
  box-shadow: 0 0 0 4px rgba(60, 110, 224, .14), inset 0 1px 2px rgba(24, 36, 66, .06);
  background: #fff;
}
html[data-theme="light"] .date-trigger:hover {
  border-color: rgba(38, 62, 120, .5);
  box-shadow: inset 0 1px 2px rgba(24, 36, 66, .06), 0 10px 20px -16px rgba(24, 36, 66, .35);
}
html[data-theme="light"] input[type="date"] { color-scheme: light; }

/* ---------- Boutons ---------- */
html[data-theme="light"] .ui-btn:hover {
  border-color: rgba(19, 26, 44, .35);
  box-shadow: inset 0 1px 0 #fff, 0 17px 32px -18px rgba(24, 36, 66, .35);
}
html[data-theme="light"] .ui-btn-primary,
html[data-theme="light"] .btn {
  color: #f2f5fb;
  border-color: rgba(19, 26, 44, .55);
  background: linear-gradient(180deg, #24365e, #131f3d);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 12px 26px -14px rgba(19, 31, 61, .6);
}
html[data-theme="light"] .ui-btn-primary:hover,
html[data-theme="light"] .btn:hover {
  background: linear-gradient(180deg, #2c4272, #1a2a52);
  border-color: rgba(19, 26, 44, .65);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 15px 30px -14px rgba(19, 31, 61, .65);
}
html[data-theme="light"] .btn.ghost {
  color: var(--ink);
  background: var(--glass);
  border-color: var(--hair);
  box-shadow: inset 0 1px 0 #fff, 0 6px 14px -8px rgba(24, 36, 66, .3);
}
html[data-theme="light"] .btn.text { color: var(--orange); background: none; border: 0; box-shadow: none; }
html[data-theme="light"] .ui-btn-danger {
  color: #a12f2f;
  border-color: rgba(192, 58, 58, .35);
  background: rgba(192, 58, 58, .1);
}
html[data-theme="light"] .spin { border-color: rgba(255, 255, 255, .35); border-top-color: #fff; }
html[data-theme="light"] .cart-count { color: #f4f6fb; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 3px 8px rgba(24, 36, 66, .35); }
html[data-theme="light"] .step-index {
  color: #f4f6fb;
  border-color: rgba(19, 26, 44, .5);
  background: linear-gradient(180deg, #24365e, #131f3d);
  box-shadow: 0 8px 18px -10px rgba(24, 36, 66, .5);
}

/* Petites surfaces vitrées (boutons ronds, steppers, quantités…) */
html[data-theme="light"] .cart-btn,
html[data-theme="light"] .date-trigger,
html[data-theme="light"] .step-b,
html[data-theme="light"] .qty,
html[data-theme="light"] .close,
html[data-theme="light"] .promo-row button,
html[data-theme="light"] .pinput,
html[data-theme="light"] .promo-row input,
html[data-theme="light"] .calendar-nav {
  background: linear-gradient(150deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .65)), rgba(255, 255, 255, .45);
  border-color: rgba(19, 26, 44, .18);
  box-shadow: inset 0 1px 0 #fff, 0 10px 22px -16px rgba(24, 36, 66, .35);
}
html[data-theme="light"] .step-b:hover { border-color: rgba(38, 62, 120, .45); }
html[data-theme="light"] .qty { background: #fff; box-shadow: inset 0 1px 2px rgba(24, 36, 66, .1); }
html[data-theme="light"] .qty button:hover { background: rgba(19, 26, 44, .06); }
html[data-theme="light"] .calendar-nav:hover:not(:disabled) { background: rgba(19, 26, 44, .06); border-color: rgba(38, 62, 120, .5); }

/* ---------- Calendrier ---------- */
html[data-theme="light"] .calendar-popover {
  background: linear-gradient(180deg, #ffffff 0%, #eef1f8 100%);
  border-color: rgba(19, 26, 44, .18);
  box-shadow: inset 0 1px 0 #fff, 0 34px 78px -24px rgba(24, 36, 66, .5), 0 0 0 1px rgba(255, 255, 255, .6);
}
html[data-theme="light"] .calendar-day { color: #3b4763; }
html[data-theme="light"] .calendar-day:hover:not(:disabled) { color: var(--ink); background: rgba(19, 26, 44, .07); }
html[data-theme="light"] .calendar-day.in-range { background: rgba(60, 110, 224, .13); color: var(--ink); }
html[data-theme="light"] .calendar-day.selected,
html[data-theme="light"] .calendar-day.range-end {
  color: #f4f6fb;
  background: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 8px 16px -8px rgba(24, 36, 66, .5);
}
html[data-theme="light"] .calendar-day.other { color: rgba(19, 26, 44, .3); }
html[data-theme="light"] .calendar-day.unavailable:disabled { color: #a83a4e; background: rgba(192, 58, 58, .08); }
html[data-theme="light"] .calendar-week,
html[data-theme="light"] .calendar-status,
html[data-theme="light"] .calendar-legend { color: #6b7590; }
html[data-theme="light"] .calendar-status.error { color: var(--red); }
html[data-theme="light"] .calendar-legend i { background: #2c4272; box-shadow: none; }
html[data-theme="light"] .calendar-legend i.unavailable { background: rgba(192, 58, 58, .18); }
html[data-theme="light"] .calendar-legend i.unavailable::after { background: #a83a4e; }

/* ---------- Catalogue ---------- */
html[data-theme="light"] .cat-heading { border-bottom-color: rgba(19, 26, 44, .13); }
html[data-theme="light"] .cat-index { color: rgba(19, 26, 44, .55); }
html[data-theme="light"] .cat-rule { background: linear-gradient(90deg, rgba(19, 26, 44, .25), rgba(19, 26, 44, .06)); }
html[data-theme="light"] .prod {
  border-color: rgba(19, 26, 44, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 26px 54px -32px rgba(24, 36, 66, .3);
}
html[data-theme="light"] .prod:hover {
  border-color: rgba(38, 62, 120, .4);
  box-shadow: inset 0 1px 0 #fff, 0 36px 68px -34px rgba(24, 36, 66, .42);
}
html[data-theme="light"] .prod .art {
  background: linear-gradient(148deg, #ffffff 0%, #e9edf6 66%, #dfe5f1 100%);
  border-bottom-color: rgba(19, 26, 44, .08);
}
html[data-theme="light"] .prod .art::before { opacity: .38; }
html[data-theme="light"] .prod .art img { filter: drop-shadow(0 14px 10px rgba(24, 36, 66, .3)); }
html[data-theme="light"] .prod:hover .art img { filter: drop-shadow(0 18px 12px rgba(24, 36, 66, .34)); }
html[data-theme="light"] .prod .body { background: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(233, 237, 246, .55)); }

/* ---------- Packs & tunnel de vente ---------- */
html[data-theme="light"] .pack-flag {
  color: #f4f6fb;
  border-color: rgba(19, 26, 44, .55);
  background: linear-gradient(180deg, #24365e, #131f3d);
  box-shadow: 0 8px 18px -10px rgba(24, 36, 66, .5);
}
html[data-theme="light"] .upsell-overlay { background: rgba(19, 26, 44, .35); }
html[data-theme="light"] .upsell-panel {
  background: linear-gradient(180deg, #ffffff 0%, #eef1f8 100%);
  border-color: rgba(19, 26, 44, .18);
  box-shadow: inset 0 1px 0 #fff, 0 40px 90px -28px rgba(24, 36, 66, .55), 0 0 0 1px rgba(255, 255, 255, .6);
}
html[data-theme="light"] .upsell-close:hover { background: rgba(19, 26, 44, .07); }
html[data-theme="light"] .upsell-added {
  border-color: rgba(23, 122, 67, .35);
  background: rgba(23, 122, 67, .07);
}
html[data-theme="light"] .upsell-added .ok-ico { color: #fff; box-shadow: 0 6px 14px -6px rgba(23, 122, 67, .5); }
html[data-theme="light"] .upsell-item {
  background: rgba(255, 255, 255, .68);
  border-color: rgba(19, 26, 44, .15);
  box-shadow: inset 0 1px 0 #fff;
}
html[data-theme="light"] .upsell-item .ic { background: radial-gradient(circle at 50% 35%, #ffffff, #e6ebf5 62%, transparent 78%); }
html[data-theme="light"] .upsell-item .ic img { filter: drop-shadow(0 4px 5px rgba(24, 36, 66, .25)); }
html[data-theme="light"] .upsell-add {
  color: #f2f5fb;
  border-color: rgba(19, 26, 44, .55);
  background: linear-gradient(180deg, #24365e, #131f3d);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 8px 18px -10px rgba(19, 31, 61, .5);
}
html[data-theme="light"] .upsell-add:hover:not(:disabled) { background: linear-gradient(180deg, #2c4272, #1a2a52); }
html[data-theme="light"] .upsell-add.added {
  color: var(--green);
  border-color: rgba(23, 122, 67, .4);
  background: rgba(23, 122, 67, .09);
  box-shadow: none;
}
html[data-theme="light"] .xsell-item {
  background: rgba(255, 255, 255, .68);
  border-color: rgba(19, 26, 44, .15);
}
html[data-theme="light"] .xsell-item .ic { background: radial-gradient(circle at 50% 35%, #ffffff, #e6ebf5 62%, transparent 78%); }
html[data-theme="light"] .xsell-item .ic img { filter: drop-shadow(0 4px 5px rgba(24, 36, 66, .25)); }

/* ---------- Panier ---------- */
html[data-theme="light"] .trust-strip span { background: rgba(19, 26, 44, .045); }
html[data-theme="light"] .citem {
  background: rgba(255, 255, 255, .68);
  box-shadow: inset 0 1px 0 #fff, 0 12px 26px -22px rgba(24, 36, 66, .4);
  border-color: rgba(19, 26, 44, .15);
}
html[data-theme="light"] .citem .ic { background: radial-gradient(circle at 50% 35%, #ffffff, #e6ebf5 62%, transparent 78%); }
html[data-theme="light"] .citem .ic img { filter: drop-shadow(0 5px 6px rgba(24, 36, 66, .25)); }
html[data-theme="light"] .citem.conflict { border-color: rgba(192, 58, 58, .4); background: linear-gradient(180deg, rgba(192, 58, 58, .07), rgba(255, 255, 255, .6)); }
html[data-theme="light"] .summary-card { border-color: rgba(38, 62, 120, .3); }
html[data-theme="light"] .caution {
  border-color: rgba(38, 62, 120, .22);
  background: rgba(38, 62, 120, .06);
}
html[data-theme="light"] .deliv-choice,
html[data-theme="light"] .service-choice,
html[data-theme="light"] .cgl { background: rgba(255, 255, 255, .6); }
html[data-theme="light"] .deliv-choice:hover,
html[data-theme="light"] .service-choice:hover { border-color: rgba(38, 62, 120, .45); }
html[data-theme="light"] .deliv-choice:has(input:checked) {
  border-color: rgba(38, 62, 120, .5);
  background: rgba(38, 62, 120, .07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
html[data-theme="light"] .deliv-choice input,
html[data-theme="light"] .service-choice input { accent-color: #233457; }
html[data-theme="light"] .deliv-estimate {
  border-color: rgba(38, 62, 120, .25);
  background: rgba(38, 62, 120, .06);
}
html[data-theme="light"] .addr-suggestions {
  background: #fff;
  box-shadow: 0 24px 54px -18px rgba(24, 36, 66, .4);
}
html[data-theme="light"] .addr-suggestions li:hover,
html[data-theme="light"] .addr-suggestions li[aria-selected="true"] { background: rgba(19, 26, 44, .06); }

/* ---------- Toast, statut, suivi ---------- */
html[data-theme="light"] .cart-toast {
  border-color: rgba(19, 26, 44, .18);
  background: linear-gradient(145deg, #ffffff, #eef1f8);
  box-shadow: inset 0 1px 0 #fff, 0 24px 54px -20px rgba(24, 36, 66, .45);
}
html[data-theme="light"] .cart-toast a:hover { color: var(--gold); }
html[data-theme="light"] .status-icon {
  border-color: rgba(38, 62, 120, .3);
  background: rgba(38, 62, 120, .07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 18px 34px -24px rgba(24, 36, 66, .35);
}
html[data-theme="light"] .b-confirmed { background: #d9f2e2; color: #146c3c; }
html[data-theme="light"] .b-pending { background: #f4ecc9; color: #7a6410; }
html[data-theme="light"] .b-cancelled { background: #f6dcdc; color: #a33636; }
html[data-theme="light"] .msg.err { color: var(--red); }

/* ---------- Pages légales & livraison ---------- */
html[data-theme="light"] .legal-card { color: #2a3450; }
html[data-theme="light"] .legal-card p { color: #414e6e; }
html[data-theme="light"] .howto ol { color: #414e6e; }

/* ---------- Typographie décorative ---------- */
html[data-theme="light"] .success-wordmark { -webkit-text-stroke: 1px rgba(19, 26, 44, .16); }
html[data-theme="light"] .outline-word-base { stroke: rgba(19, 26, 44, .26); }
html[data-theme="light"] #outline-word-light stop:nth-child(2) { stop-color: #41537c; }
html[data-theme="light"] #outline-word-light stop:nth-child(3) { stop-color: #1d2b4d; }
html[data-theme="light"] #outline-word-light stop:nth-child(4) { stop-color: #41537c; }
html[data-theme="light"] .loader-half { -webkit-text-stroke: 1px rgba(19, 26, 44, .78); }
html[data-theme="light"] .loader-cut { border-left-color: rgba(19, 26, 44, .5); }

/* ---------- Accessibilité ---------- */
@media (prefers-reduced-transparency: reduce) {
  html[data-theme="light"] .nav,
  html[data-theme="light"] .site-nav,
  html[data-theme="light"] .period,
  html[data-theme="light"] .prod,
  html[data-theme="light"] .step,
  html[data-theme="light"] .about-card,
  html[data-theme="light"] .pickup-card,
  html[data-theme="light"] .faq-item,
  html[data-theme="light"] .calendar-popover,
  html[data-theme="light"] .cart-btn,
  html[data-theme="light"] .date-trigger,
  html[data-theme="light"] .step-b,
  html[data-theme="light"] .qty,
  html[data-theme="light"] .promo-row button,
  html[data-theme="light"] .promo-row input,
  html[data-theme="light"] .pickup-address,
  html[data-theme="light"] .about-promise,
  html[data-theme="light"] .contact-card,
  html[data-theme="light"] .contact-channel,
  html[data-theme="light"] .calendar-nav {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(255, 255, 255, .98);
  }
}