/* =========================================================================
   Yuki — feuille de style commune (accueil + boutique)
   Reprend la charte de la landing page d'origine : fond crème, accent
   terracotta, typo Dancing Script / Nunito, cartes beige, pattes en décor.
   ========================================================================= */

:root {
  --creme:       #FBF6EC;  /* fond général */
  --carte:       #FDFAF3;  /* fond des cartes */
  --carte-forte: #FFFDF7;  /* fond des encarts mis en avant */
  --terracotta:  #B85F2E;  /* accent */
  --terracotta-f:#A0501F;  /* accent survol */
  --texte:       #2E2A24;
  --texte-2:     #4A4239;
  --texte-3:     #6B6055;
  --texte-4:     #8A7E70;
  --bord:        #E0CFAE;
  --bord-champ:  #DCC9A6;
  --bord-fin:    #E7D9BC;
  --violet:      #8676BE;
  --sable:       #F2E7D4;
  --erreur:      #B03A2E;
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
* { box-sizing: border-box; }

/* Plusieurs éléments masqués via l'attribut [hidden] portent aussi un
   display:flex/grid, qui l'emporterait sur la feuille de style du navigateur. */
[hidden] { display: none !important; }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--creme);
  color: var(--texte);
  font-family: Nunito, system-ui, sans-serif;
}

a { color: var(--terracotta); text-decoration: none; }
a:hover { color: #8F4620; }

img { max-width: 100%; }
input, select, button, textarea { font-family: inherit; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--terracotta); outline-offset: 1px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ------------------------------------------------------------------ cadre */

.page { min-height: 100vh; background: var(--creme); padding: 10px; }
.page-frame-outer { border: 1px solid var(--violet); padding: 5px; border-radius: 2px; }
.page-frame-inner { border: 1px solid var(--violet); padding: 22px 16px 0; position: relative; overflow: hidden; }
.wrap { max-width: 760px; margin: 0 auto; position: relative; }
.wrap-large { max-width: 920px; }

/* ------------------------------------------------------------- navigation */

.nav {
  display: flex; flex-wrap: wrap; gap: 10px 18px;
  align-items: center; justify-content: space-between;
  padding-bottom: 18px; margin-bottom: 6px;
  border-bottom: 1px solid var(--bord-fin);
}
.nav-brand {
  font-family: 'Dancing Script', cursive; font-weight: 700;
  font-size: 34px; line-height: 1; color: var(--terracotta);
}
.nav-links { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.nav-links a { font-size: 15px; font-weight: 600; color: var(--texte-2); }
.nav-links a:hover { color: var(--terracotta); }
.nav-links a.nav-shop {
  background: var(--terracotta); color: var(--creme);
  padding: 8px 18px; border-radius: 999px; font-weight: 700;
  box-shadow: 0 6px 14px rgba(184, 95, 46, .24);
}
.nav-links a.nav-shop:hover { background: var(--terracotta-f); color: var(--creme); }
.nav-links a[aria-current="page"] { color: var(--terracotta); text-decoration: underline; text-underline-offset: 4px; }
/* La pastille Boutique garde son texte crème même quand elle est la page courante. */
.nav-links a.nav-shop[aria-current="page"] { color: var(--creme); text-decoration: none; }

/* ----------------------------------------------------------------- badges */

.badges { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin-top: 26px; }
.badge {
  display: inline-block; padding: 6px 16px; border-radius: 999px;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
}
.badge-dashed { border: 1px dashed var(--terracotta); color: var(--terracotta); }
.badge-solid { background: var(--sable); color: var(--texte); }

/* --------------------------------------------------------------- polaroid */

.polaroid-row { display: flex; justify-content: center; margin-top: 26px; }
.polaroid {
  position: relative; transform: rotate(-2.2deg);
  background: var(--carte); padding: 14px 14px 58px; border-radius: 3px;
  box-shadow: 0 14px 34px rgba(46, 42, 36, .18), 0 2px 6px rgba(46, 42, 36, .10);
  max-width: 520px; width: 100%;
}
.polaroid-tape {
  position: absolute; top: -16px; left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 118px; height: 34px; background: #EDE0C4; opacity: .92;
  box-shadow: 0 2px 5px rgba(46, 42, 36, .14);
  clip-path: polygon(3% 8%, 97% 0%, 100% 88%, 0% 100%);
}
.polaroid-img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: 1px; }

/* Diaporama du polaroid de l'accueil (assets/diaporama.js). La première photo
   reste dans le flux et donne la taille du cadre (4/3, inchangée) ; les
   suivantes se superposent exactement, recadrées au centre, et passent de
   l'une à l'autre par un fondu. */
.diaporama { position: relative; }
.diaporama .polaroid-img + .polaroid-img { position: absolute; inset: 0; height: 100%; }
.diaporama .polaroid-img { opacity: 0; transition: opacity 1.2s ease-in-out; }
.diaporama .polaroid-img.diaporama-visible { opacity: 1; }
.polaroid-caption {
  position: absolute; left: 0; right: 0; bottom: 16px; text-align: center;
  font-family: 'Dancing Script', cursive; font-size: 24px; color: #6B5C4A;
}

/* Variante réduite, utilisée pour les vignettes des cartes événement. */
.polaroid-sm { max-width: 260px; padding: 11px 11px 46px; }
.polaroid-sm .polaroid-tape { top: -13px; width: 92px; height: 28px; }
.polaroid-sm .polaroid-caption { bottom: 13px; font-size: 21px; }
.polaroid-droite { transform: rotate(2deg); }
.polaroid-img-carre { aspect-ratio: 1/1; }

/* ------------------------------------------------------------------- hero */

.hero { position: relative; text-align: center; margin-top: 34px; }
.hero-deco { position: absolute; top: -34px; left: calc(50% - 190px); width: 52px; height: auto; transform: rotate(-8deg); pointer-events: none; }
.h1 {
  margin: 0; font-family: 'Dancing Script', cursive; font-weight: 700;
  font-size: clamp(42px, 11vw, 78px); line-height: .98; letter-spacing: .01em;
}
.hero-sub {
  margin: 10px 0 0; font-family: 'Dancing Script', cursive; font-weight: 500;
  font-size: clamp(26px, 7vw, 40px); color: var(--terracotta); line-height: 1.1;
}
.accent { color: var(--terracotta); }

.wave-row { display: flex; justify-content: center; margin-top: 6px; }
.wave { width: min(300px, 80%); height: auto; }
.wave-sm { width: min(240px, 70%); }
.wave-xs { width: min(200px, 60%); }

.lead {
  margin: 14px auto 0; max-width: 560px; font-size: 17px; line-height: 1.7;
  color: var(--texte-2); text-align: center; text-wrap: pretty;
}

/* ---------------------------------------------------------------- boutons */

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 22px; }
.cta-row-left { justify-content: flex-start; }
.btn {
  display: inline-block; font-weight: 700; font-size: 17px;
  padding: 16px 30px; border-radius: 999px; transition: background .15s, color .15s;
}
.btn-sm { font-size: 15px; padding: 13px 24px; }
.btn-fill { background: var(--terracotta); color: var(--creme); box-shadow: 0 8px 20px rgba(184, 95, 46, .30); }
.btn-fill:hover { background: var(--terracotta-f); color: var(--creme); }
.btn-outline { border: 1px solid var(--terracotta); color: var(--terracotta); background: none; }
.btn-outline:hover { background: #F5E7D8; color: var(--terracotta-f); }

.btn-primary {
  margin-top: 4px; display: block; width: 100%; max-width: 100%;
  background: var(--terracotta); color: var(--creme); border: none;
  font-weight: 700; font-size: 18px; padding: 17px 24px; border-radius: 999px;
  cursor: pointer; box-shadow: 0 8px 20px rgba(184, 95, 46, .30);
}
.btn-primary:hover { background: var(--terracotta-f); }
.btn-primary[disabled] { opacity: .7; cursor: default; }

.btn-ghost {
  margin-top: 20px; background: none; border: 1px solid var(--terracotta);
  color: var(--terracotta); font-weight: 700; font-size: 15px;
  padding: 11px 24px; border-radius: 999px; cursor: pointer;
}
.btn-ghost:hover { background: #F5E7D8; }

/* --------------------------------------------------------------- sections */

.section { margin-top: 56px; }
.section-center { text-align: center; }
.eyebrow {
  margin: 0 0 2px; text-align: center; font-size: 12px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--texte-3);
}
.h2 { margin: 0; text-align: center; font-family: 'Dancing Script', cursive; font-weight: 700; font-size: clamp(34px, 8vw, 44px); line-height: 1.1; }
.h2-sm { margin: 0 0 4px; font-family: 'Dancing Script', cursive; font-weight: 700; font-size: 34px; }

.card { border: 1px solid var(--bord); background: var(--carte); border-radius: 6px; box-shadow: 0 4px 14px rgba(46, 42, 36, .05); }
.card-pad { padding: 26px clamp(16px, 4vw, 24px); margin-top: 20px; }

.p { margin: 0 0 14px; font-size: 16px; line-height: 1.7; color: var(--texte-2); text-wrap: pretty; }
.p-last { margin-bottom: 0; }

.pills { display: grid; gap: 14px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--bord-fin); }
.pill-item { display: flex; gap: 14px; align-items: flex-start; }
.pill-title { font-weight: 700; font-size: 16px; line-height: 1.4; }
.pill-text { font-size: 14px; color: var(--texte-3); line-height: 1.55; }

.paw { width: 20px; height: 20px; flex: none; margin-top: 3px; }
.paw-sm { width: 15px; height: 15px; margin-top: 4px; }

/* ------------------------------------------------------------------ livres */

.books { display: grid; gap: 20px; margin-top: 24px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.book {
  display: flex; flex-direction: column;
  border: 1px solid var(--bord); background: var(--carte); border-radius: 8px;
  overflow: hidden; box-shadow: 0 4px 14px rgba(46, 42, 36, .06);
}
.book-cover { background: #F4EBDA; border-bottom: 1px solid var(--bord-fin); }
.book-cover img { display: block; width: 100%; height: auto; aspect-ratio: 1/1; object-fit: contain; }
.book-body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.book-title { margin: 8px 0 2px; font-family: 'Dancing Script', cursive; font-weight: 700; font-size: 26px; line-height: 1.15; color: var(--terracotta); }
.book-meta { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-4); }
.book-text { margin: 0 0 16px; font-size: 15px; line-height: 1.6; color: var(--texte-2); flex: 1; }
.book-link { font-weight: 700; font-size: 15px; border-bottom: 1px solid currentColor; align-self: flex-start; }

.tag {
  display: inline-block; align-self: flex-start; padding: 4px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.tag-ok { background: #E6EFE2; color: #4B6B3C; }
.tag-soon { background: var(--sable); color: #8A6A32; }

/* --------------------------------------------------------------- signature */

.signature { display: grid; gap: 22px; margin-top: 24px; grid-template-columns: minmax(180px, 260px) 1fr; align-items: start; }
.signature-cover { border: 1px solid var(--bord); background: #F4EBDA; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 14px rgba(46, 42, 36, .06); }
.signature-cover img { display: block; width: 100%; height: auto; }
.signature-body { display: flex; flex-direction: column; }
.check-list { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 9px; }
.check-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.55; color: var(--texte-2); }

@media (max-width: 620px) {
  .signature { grid-template-columns: 1fr; }
  .signature-cover { max-width: 260px; margin: 0 auto; }
}

/* -------------------------------------------------------------- événements */

.event {
  margin-top: 28px; scroll-margin-top: 20px;
  border: 1px solid var(--bord); background: var(--carte);
  border-radius: 10px; padding: 24px clamp(14px, 4vw, 24px);
  box-shadow: 0 4px 14px rgba(46, 42, 36, .05);
}
.event-head { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.event-title { margin: 16px 0 0; text-align: center; font-family: 'Dancing Script', cursive; font-weight: 700; font-size: clamp(28px, 7vw, 38px); line-height: 1.1; }
/* Vignette photo de la carte. Le ruban adhésif déborde de 13px au-dessus du
   polaroid : la marge doit donc être nettement plus grande que l'écart voulu,
   sinon le ruban vient toucher le titre — surtout sur mobile, où le titre passe
   sur deux lignes. 46px de marge laissent ~33px d'air visible sous le texte. */
.event-photo { display: flex; justify-content: center; margin-top: 46px; }

.facts { display: grid; gap: 14px; margin-top: 22px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.fact { display: flex; gap: 14px; align-items: flex-start; }
.fact-title { font-weight: 700; font-size: 16px; line-height: 1.4; }
.fact-text { font-size: 14px; color: var(--texte-3); line-height: 1.5; }

.programme { margin-top: 24px; padding: 20px 16px; border-top: 1px solid var(--bord-fin); border-bottom: 1px solid var(--bord-fin); }
.programme-title { text-align: center; font-family: 'Dancing Script', cursive; font-weight: 700; font-size: 28px; color: var(--terracotta); }
.programme-grid { display: grid; gap: 12px; margin-top: 12px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.programme-item { text-align: center; font-weight: 700; font-size: 15px; line-height: 1.4; }
.programme-emoji { display: block; font-size: 26px; margin-bottom: 6px; }

/* ------------------------------------------------------------------ agenda */

.agenda-etat { margin: 18px auto 0; max-width: 520px; text-align: center; font-size: 16px; line-height: 1.6; color: var(--texte-3); }
.agenda-etat[hidden] { display: none; }
.agenda-liste { display: grid; gap: 22px; margin-top: 26px; }
/* Encart « à venir » : titre en premier, plus gros et en gras, puis date,
   horaires, lieu, et le bouton d'inscription. */
.agenda-carte {
  border: 1px solid var(--bord); background: var(--carte); border-radius: 10px;
  padding: 22px clamp(16px, 4vw, 26px); box-shadow: 0 4px 14px rgba(46, 42, 36, .05);
  scroll-margin-top: 20px;
}
.agenda-titre { margin: 0; font-size: clamp(22px, 5.5vw, 27px); font-weight: 700; line-height: 1.25; color: var(--texte); }
.agenda-infos { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.agenda-info { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.45; color: var(--texte-2); }
.agenda-info:first-child { font-weight: 700; color: var(--texte); }
.agenda-bouton { margin-top: 20px; border: 0; cursor: pointer; font-family: inherit; }
.agenda-clos { margin: 18px 0 0; font-weight: 700; color: var(--terracotta); }
.agenda-carte { position: relative; }
/* En-tête d'encart : badge rond compact (ateliers, coloriage) à gauche du titre. */
.agenda-entete { display: flex; align-items: center; gap: 14px; }
.agenda-badge {
  flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
  background: var(--carte); box-shadow: 0 3px 10px rgba(46, 42, 36, .12);
}
@media (min-width: 640px) { .agenda-badge { width: 84px; height: 84px; } }
/* Places limitées : pastille « 7 places restantes » au-dessus du bouton. */
.agenda-places {
  display: block; width: fit-content; margin: 16px 0 0; padding: 4px 14px;
  border: 1px dashed var(--terracotta); border-radius: 999px;
  font-size: 15px; font-weight: 700; color: var(--terracotta); background: var(--carte-forte);
}
/* Complet : ruban de masking tape terracotta posé de biais sur l'encart, comme
   le ruban adhésif des polaroids (bords irréguliers par clip-path). */
.agenda-ruban {
  position: absolute; top: 16px; right: 12px; z-index: 1;
  transform: rotate(6deg); padding: 5px 26px 7px;
  background: var(--terracotta); color: var(--creme);
  font-family: 'Dancing Script', cursive; font-weight: 700; font-size: 27px; line-height: 1;
  box-shadow: 0 4px 10px rgba(184, 95, 46, .28);
  clip-path: polygon(3% 10%, 97% 0%, 100% 90%, 1% 100%);
  pointer-events: none;
}
/* Encart complet : le ruban prend sa place au-dessus du titre et de son badge. */
.agenda-carte-complete { padding-top: 60px; }
.agenda-carte-complete .agenda-infos { opacity: .75; }
.agenda-complet { margin: 18px 0 0; font-weight: 700; color: var(--texte-3); }
@media (max-width: 480px) {
  .agenda-ruban { top: 12px; right: 8px; font-size: 23px; padding: 4px 18px 6px; }
  .agenda-carte-complete { padding-top: 54px; }
}
.agenda-formulaire[hidden] { display: none; }
.agenda-formulaire { scroll-margin-top: 16px; }
.agenda-form-rappel { margin: 8px 0 0; text-align: center; font-weight: 700; font-size: 16px; line-height: 1.45; color: var(--terracotta); }
/* Événements passés : liste compacte, titre et date seulement. */
.agenda-passes-titre { margin: 0; text-align: center; font-size: 20px; font-weight: 700; color: var(--texte-3); }
.agenda-passes { list-style: none; margin: 14px auto 0; padding: 0; max-width: 560px; }
.agenda-passe {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 14px;
  padding: 10px 2px; border-bottom: 1px solid var(--bord-fin); font-size: 15px; color: var(--texte-3);
}
.agenda-passe:last-child { border-bottom: 0; }
.agenda-passe-titre { font-weight: 700; color: var(--texte-2); }
@media (max-width: 480px) {
  .agenda-bouton { display: block; width: 100%; text-align: center; }
}

/* ---------------------------------------------------------- formulaires */

.form-box {
  margin-top: 26px; border: 2px solid var(--terracotta); background: var(--carte-forte);
  border-radius: 10px; padding: 26px clamp(14px, 4vw, 22px);
  overflow: hidden; box-shadow: 0 12px 30px rgba(184, 95, 46, .14);
}
.form-title { margin: 0; text-align: center; font-family: 'Dancing Script', cursive; font-weight: 700; font-size: clamp(30px, 8vw, 42px); line-height: 1.05; }

.form { margin-top: 20px; display: grid; gap: 16px; width: 100%; max-width: 100%; min-width: 0; }
.form[hidden] { display: none; }
.field { display: grid; gap: 6px; min-width: 0; max-width: 100%; }
.label { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-3); }
.field input, .field select, .field textarea {
  display: block; width: 100%; max-width: 100%; min-width: 0;
  padding: 14px 16px; font-size: 16px; color: var(--texte);
  background: var(--creme); border: 1px solid var(--bord-champ); border-radius: 8px;
}
.tel-row { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; min-width: 0; }
.indicatif { flex: 0 1 128px; width: 128px; min-width: 0; max-width: 100%; padding: 14px 10px; font-size: 16px; color: var(--texte); background: var(--creme); border: 1px solid var(--bord-champ); border-radius: 8px; }
.tel { flex: 1 1 140px; min-width: 0; max-width: 100%; }

.field-error { color: var(--erreur); font-size: 13px; margin: 2px 0 0; display: none; }
.field-error.show { display: block; }
.form-status { text-align: center; font-size: 14px; margin: 0; min-height: 0; }
.form-status.error { color: var(--erreur); }
.form-note { margin: 0; text-align: center; font-size: 13px; color: var(--texte-4); }
.hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

.success-state { text-align: center; padding: 18px 4px 6px; }
.success-state[hidden] { display: none; }
.success-title { margin: 0; font-family: 'Dancing Script', cursive; font-weight: 700; font-size: 42px; color: var(--terracotta); line-height: 1.1; }
.success-text { margin: 12px auto 0; max-width: 440px; font-size: 16px; line-height: 1.65; color: var(--texte-2); }

/* ----------------------------------------------------------------- contact */

.contact-sub { margin: 0 0 18px; font-size: 15px; color: var(--texte-3); }
.contacts { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.contact-card { border: 1px solid var(--bord); background: var(--carte); border-radius: 6px; padding: 16px; }
.contact-name { font-weight: 700; font-size: 16px; }
.contact-tel { display: inline-block; margin-top: 4px; font-size: 16px; font-weight: 600; }

/* ------------------------------------------------------------------ footer */

.footer { margin-top: 56px; padding: 26px 0 30px; border-top: 1px solid var(--bord-fin); text-align: center; }
.footer-paws { display: flex; gap: 10px; justify-content: center; align-items: flex-end; opacity: .5; margin-bottom: 14px; }
.fp1 { width: 16px; height: 16px; transform: rotate(-14deg); }
.fp2 { width: 22px; height: 22px; transform: rotate(8deg); }
.fp3 { width: 14px; height: 14px; transform: rotate(-4deg); }
.footer-script { margin: 0; font-family: 'Dancing Script', cursive; font-size: 26px; line-height: 1.3; }
.footer-links { margin: 12px 0 0; font-size: 14px; color: var(--texte-3); }
.footer-legal { margin: 10px 0 0; font-size: 13px; color: var(--texte-4); }

/* =========================================================================
   Boutique
   ========================================================================= */

.shop-note {
  margin: 20px auto 0; max-width: 620px; text-align: center;
  font-size: 14px; line-height: 1.6; color: var(--texte-3);
  border: 1px dashed var(--bord-champ); border-radius: 8px; padding: 12px 16px;
}

.menu { margin-top: 24px; display: grid; gap: 14px; }
.menu-group-title {
  margin: 10px 0 0; font-family: 'Dancing Script', cursive; font-weight: 700;
  font-size: 28px; color: var(--terracotta);
}

/* une ligne d'offre, façon carte de restaurant */
.offer {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center;
  border: 1px solid var(--bord); background: var(--carte); border-radius: 10px;
  padding: 14px 16px; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s;
}
.offer:hover { border-color: var(--terracotta); background: var(--carte-forte); }
.offer.is-selected { border-color: var(--terracotta); border-width: 2px; padding: 13px 15px; box-shadow: 0 6px 18px rgba(184, 95, 46, .14); background: var(--carte-forte); }
.offer input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--terracotta); cursor: pointer; flex: none; }
.offer-main { min-width: 0; }
.offer-name { font-weight: 700; font-size: 16px; line-height: 1.35; }
.offer-desc { font-size: 14px; color: var(--texte-3); line-height: 1.5; margin-top: 2px; }
.offer-gift { display: inline-block; margin-top: 5px; font-size: 13px; font-weight: 700; color: var(--terracotta); }
.offer-price { font-family: 'Dancing Script', cursive; font-weight: 700; font-size: 28px; color: var(--terracotta); white-space: nowrap; line-height: 1; }

.offer-qty { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.offer-qty label { font-size: 13px; color: var(--texte-3); font-weight: 600; }
.offer-qty input { width: 68px; padding: 6px 8px; font-size: 15px; border: 1px solid var(--bord-champ); border-radius: 6px; background: var(--creme); color: var(--texte); }

/* ---------------------------------------- fiches produit (sections 1 à 3) */

/* Largeur de fiche identique dans toutes les sections, quel que soit leur
   nombre d'articles : 3 par rangée (2, puis 1 sur écran étroit), calculée sur
   la largeur de la zone et jamais étirée pour combler une rangée incomplète,
   qui est centrée. Mêmes seuils que l'ancienne grille minmax(240px, 1fr).
   Le -0.5px absorbe les arrondis qui feraient passer la 3e fiche à la ligne. */
.fiches {
  container-type: inline-size;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 18px; margin-top: 24px;
}
.fiches > * { flex: 0 0 100%; min-width: 0; }
@container (min-width: 498px) {
  .fiches > * { flex-basis: calc((100% - 18px) / 2 - .5px); }
}
@container (min-width: 756px) {
  .fiches > * { flex-basis: calc((100% - 36px) / 3 - .5px); }
}

.fiche {
  display: flex; flex-direction: column;
  border: 1px solid var(--bord); background: var(--carte); border-radius: 10px;
  overflow: hidden; cursor: pointer;
  box-shadow: 0 4px 14px rgba(46, 42, 36, .06);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.fiche:hover { border-color: var(--terracotta); background: var(--carte-forte); }
.fiche.is-selected {
  border-color: var(--terracotta); border-width: 2px;
  box-shadow: 0 8px 22px rgba(184, 95, 46, .18); background: var(--carte-forte);
}

.fiche-visuel { background: #F4EBDA; border-bottom: 1px solid var(--bord-fin); }
.fiche-visuel img { display: block; width: 100%; height: auto; aspect-ratio: 1/1; object-fit: contain; }

.fiche-corps { padding: 16px 16px 18px; display: flex; flex-direction: column; flex: 1; gap: 8px; }
.fiche-entete { display: flex; gap: 10px; align-items: flex-start; }
.fiche-entete input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--terracotta); cursor: pointer; flex: none; margin: 1px 0 0; }
.fiche-nom { font-weight: 700; font-size: 16px; line-height: 1.35; }
.fiche-desc { margin: 0; font-size: 14px; line-height: 1.55; color: var(--texte-3); flex: 1; }

.fiche-prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 2px; }
.fiche-prix-valeur { font-family: 'Dancing Script', cursive; font-weight: 700; font-size: 30px; color: var(--terracotta); line-height: 1; }
.fiche-prix-note { font-size: 13px; color: var(--texte-4); }

/* Section précommande : renvois vers la fiche du tome, où se fait l'achat. */
.fiche-renvoi { color: inherit; text-decoration: none; border-style: dashed; }
.fiche-renvoi:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; }
.fiche-renvoi-lien { font-size: 13px; font-weight: 700; color: var(--terracotta); }
.fiche-renvoi:hover .fiche-renvoi-lien { text-decoration: underline; }

/* Fiche atteinte depuis un renvoi : signalée un court instant. */
.fiche.is-cible { animation: fiche-cible 1.6s ease-out; }
@keyframes fiche-cible {
  0%, 35% { border-color: var(--terracotta); box-shadow: 0 0 0 4px rgba(184, 95, 46, .28); }
  100% { box-shadow: 0 4px 14px rgba(46, 42, 36, .06); }
}
@media (prefers-reduced-motion: reduce) {
  .fiche.is-cible { animation: none; border-color: var(--terracotta); }
}

/* ------------------------------------ section « Packs » : illustrative seule */

.packs { display: grid; gap: 18px; margin-top: 24px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.pack {
  border: 1px dashed var(--bord-champ); background: var(--carte);
  border-radius: 10px; padding: 16px; text-align: center;
  /* Aucun curseur pointeur, aucun hover : cette section ne se clique pas. */
}
.pack-images { display: flex; justify-content: center; align-items: flex-end; gap: 6px; min-height: 96px; margin-bottom: 12px; }
/* Les vignettes ne dépassent jamais du cadre : jusqu'à 3, elles rapetissent
   ensemble (proportions gardées) pour tenir sur une ligne ; à partir de 4,
   elles passent à la ligne, 3 au plus par rangée, plutôt que de devenir
   minuscules. */
.pack-images img {
  flex: 0 1 auto; min-width: 0;
  width: auto; height: auto; max-width: 100%; max-height: 90px;
  border-radius: 4px; object-fit: contain;
  background: #F4EBDA; border: 1px solid var(--bord-fin);
}
.pack-images:has(> img:nth-child(4)) { flex-wrap: wrap; }
.pack-images:has(> img:nth-child(4)) img { max-width: calc((100% - 12px) / 3); }
.pack-titre { font-weight: 700; font-size: 16px; line-height: 1.35; }
.pack-compo { font-size: 13px; color: var(--texte-3); line-height: 1.5; margin-top: 3px; }
.pack-prix { font-family: 'Dancing Script', cursive; font-weight: 700; font-size: 32px; color: var(--terracotta); line-height: 1.1; margin-top: 8px; }
.pack-cadeau { font-size: 13px; font-weight: 700; color: var(--terracotta); }

/* ------------------------------------------- décomposition du tarif (panier) */

.recap-tarif { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--bord-champ); }
.recap-tarif[hidden] { display: none; }
.recap-tarif-titre { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-4); }
.recap-detail { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.recap-line-note { color: var(--texte-3); font-size: 14px; white-space: nowrap; }
.recap-line-remise { color: #4B6B3C; font-weight: 700; }

/* mode de livraison (panier) */
.livraison { margin: 16px 0 0; padding: 14px 0 0; border: 0; border-top: 1px dashed var(--bord-champ); min-width: 0; }
.livraison[hidden] { display: none; }
.livraison legend { padding: 0; float: left; width: 100%; }
.livraison-choix { clear: both; display: grid; gap: 8px; }
.livraison-option {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 11px 12px; border: 1px solid var(--bord-champ); border-radius: 8px;
  background: var(--creme); cursor: pointer; font-size: 15px; line-height: 1.35; color: var(--texte-2);
}
.livraison-option:has(input:checked) { border-color: var(--terracotta); box-shadow: inset 0 0 0 1px var(--terracotta); }
.livraison-option input { width: 20px; height: 20px; margin: 0; accent-color: var(--terracotta); cursor: pointer; flex: none; }
.livraison-option-nom { flex: 1 1 auto; min-width: 0; }
.livraison-option-prix { flex: none; white-space: nowrap; font-weight: 700; color: var(--texte); }
.livraison-option-prix.contact { font-weight: 400; font-size: 14px; color: var(--texte-3); }
.livraison-note { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--texte-3); }
.livraison-note.alerte { color: var(--erreur); }
/* Un montant ne se coupe jamais en deux (« 9.59 / CHF ») : c'est le libellé qui passe à la ligne. */
.recap-detail .recap-line > span:last-child, .recap-total-value { white-space: nowrap; }

/* vignettes produits */
.products { display: grid; gap: 18px; margin-top: 24px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.product { border: 1px solid var(--bord); background: var(--carte); border-radius: 8px; overflow: hidden; text-align: center; }
.product-img { background: #F4EBDA; }
.product-img img { display: block; width: 100%; height: auto; aspect-ratio: 1/1; object-fit: contain; }
.product-placeholder {
  display: flex; align-items: center; justify-content: center; text-align: center;
  aspect-ratio: 1/1; background: repeating-linear-gradient(45deg, #F4EBDA, #F4EBDA 10px, #EFE4CE 10px, #EFE4CE 20px);
  font-size: 13px; font-weight: 700; color: var(--texte-4); padding: 10px; line-height: 1.4;
}
.product-name { padding: 12px 10px 14px; font-weight: 700; font-size: 15px; line-height: 1.35; }
.product-name span { display: block; font-weight: 400; font-size: 13px; color: var(--texte-3); margin-top: 3px; }

/* récapitulatif / panier */
.recap {
  margin-top: 28px; border: 2px solid var(--terracotta); background: var(--carte-forte);
  border-radius: 10px; padding: 24px clamp(14px, 4vw, 22px); box-shadow: 0 12px 30px rgba(184, 95, 46, .14);
  scroll-margin-top: 20px;
}
.recap-title { margin: 0 0 12px; text-align: center; font-family: 'Dancing Script', cursive; font-weight: 700; font-size: clamp(30px, 8vw, 40px); line-height: 1.05; }
.recap-lines { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.recap-line { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--texte-2); }
.recap-line-gift { color: var(--terracotta); font-weight: 700; }
.recap-empty { margin: 0; text-align: center; font-size: 15px; color: var(--texte-3); }
.recap-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--bord-fin); }
.recap-total-label { font-weight: 700; font-size: 17px; }
.recap-total-value { font-family: 'Dancing Script', cursive; font-weight: 700; font-size: 38px; color: var(--terracotta); line-height: 1; }

.sticky-bar {
  position: sticky; bottom: 10px; z-index: 5; margin-top: 18px;
  display: flex; justify-content: center; pointer-events: none;
}
.sticky-bar a {
  pointer-events: auto; background: var(--terracotta); color: var(--creme);
  font-weight: 700; font-size: 16px; padding: 13px 26px; border-radius: 999px;
  box-shadow: 0 8px 22px rgba(46, 42, 36, .26);
}
.sticky-bar a:hover { background: var(--terracotta-f); color: var(--creme); }
.sticky-bar[hidden] { display: none; }

/* page de remerciement */
.merci { text-align: center; margin-top: 40px; }
.merci-card { margin-top: 24px; text-align: left; }
.merci-titre { margin-top: 30px; }
.merci-recap { margin-top: 8px; }

.hero-boutique { margin-top: 38px; }

/* =========================================================================
   Compte (connexion par lien magique, espace personnel)
   ========================================================================= */

.compte-etat {
  display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: center;
  margin-top: 18px; font-size: 14px; color: var(--texte-3);
}
.compte-etat[hidden] { display: none; }
.compte-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--sable); color: var(--texte); border-radius: 999px;
  padding: 7px 16px; font-weight: 700; font-size: 13px;
}
.compte-badge::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #4B6B3C; flex: none;
}

.compte-bloc {
  margin-top: 26px; border: 2px solid var(--terracotta); background: var(--carte-forte);
  border-radius: 10px; padding: 26px clamp(14px, 4vw, 22px);
  box-shadow: 0 12px 30px rgba(184, 95, 46, .14);
}
.compte-bloc[hidden] { display: none; }

.compte-lignes { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.compte-lignes li { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; color: var(--texte-2); }

.compte-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; margin-top: 24px; }
/* La marge haute de .btn-ghost décalait la rangée et étirait le bouton voisin. */
.compte-actions .btn-ghost { margin-top: 0; }
.btn-danger {
  background: none; border: 1px solid #B03A2E; color: #B03A2E;
  font-weight: 700; font-size: 15px; padding: 11px 24px; border-radius: 999px; cursor: pointer;
}
.btn-danger:hover { background: #F7E7E4; }

.compte-danger {
  margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--bord-fin);
}
.compte-danger h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.compte-danger p { margin: 0 0 14px; font-size: 14px; line-height: 1.6; color: var(--texte-3); }

/* suivi de commande : code, commandes et statut */
.field-hint { margin: 0; font-size: 13px; line-height: 1.5; color: var(--texte-4); }
.field textarea { min-height: 160px; resize: vertical; line-height: 1.55; }
.field[hidden] { display: none; }
.lien-discret {
  display: block; margin: 2px auto 0; padding: 4px 0; background: none; border: 0;
  color: var(--terracotta); font-weight: 700; font-size: 14px; line-height: 1.5; text-align: center;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.compte-texte { margin: 6px 0 0; font-size: 15px; line-height: 1.6; color: var(--texte-3); }
.compte-code { margin-top: 26px; }
.compte-code .form { margin-top: 12px; gap: 10px; }
.compte-code .btn-ghost { margin-top: 0; justify-self: start; }
.commandes { margin: 8px 0 18px; padding: 0; list-style: none; display: grid; gap: 12px; }
.commande {
  display: grid; gap: 8px; padding: 14px 16px; min-width: 0;
  border: 1px solid var(--bord-fin); border-radius: 8px; background: var(--carte);
}
.commande-entete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; }
.commande-ref { font-size: 13px; color: var(--texte-3); }
.statut {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border-radius: 999px;
  background: var(--sable); color: var(--texte); font-size: 13px; font-weight: 700; white-space: nowrap;
}
.statut::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--terracotta); flex: none; }
.statut-fini::before { background: #4B6B3C; }
.commande-articles { margin: 0; font-size: 15px; line-height: 1.5; color: var(--texte-2); overflow-wrap: anywhere; }
.commande-precommandes {
  margin: 0; padding: 10px 12px; list-style: none; display: grid; gap: 10px;
  border: 1px dashed var(--bord-champ); border-radius: 8px; background: var(--creme);
}
.precommande { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; }
.precommande-texte { display: grid; gap: 2px; min-width: 0; flex: 1 1 200px; }
.precommande-nom { font-size: 15px; line-height: 1.45; color: var(--texte-2); }
.precommande-note { font-size: 13px; line-height: 1.45; color: var(--texte-4); }
.commande-pied { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 14px; color: var(--texte-3); }
.commande-pied strong { color: var(--texte); font-size: 15px; white-space: nowrap; }

.compte-message { margin: 16px 0 0; text-align: center; font-size: 15px; line-height: 1.6; }
.compte-message.error { color: var(--erreur); }
.compte-message.ok { color: #4B6B3C; }
.compte-message[hidden] { display: none; }

/* =========================================================================
   Politique de confidentialité
   ========================================================================= */

.legal { margin-top: 30px; }
.legal h2 { margin: 34px 0 10px; font-family: 'Dancing Script', cursive; font-weight: 700; font-size: 30px; color: var(--terracotta); }
.legal h3 { margin: 22px 0 6px; font-size: 16px; font-weight: 700; }
.legal p, .legal li { font-size: 16px; line-height: 1.7; color: var(--texte-2); }
.legal ul { padding-left: 22px; }
.legal li { margin-bottom: 8px; }
.legal table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.legal th, .legal td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--bord-fin); font-size: 15px; vertical-align: top; }
.legal th { font-weight: 700; color: var(--texte); }
.legal td { color: var(--texte-2); }
.legal-maj { font-size: 14px; color: var(--texte-4); }

/* =========================================================================
   Tableau de bord interne (page à adresse non publiée, protégée par mot de passe)
   ========================================================================= */

.tdb-page { background: var(--creme); }
.tdb { max-width: 1120px; margin: 0 auto; padding: 24px 16px 48px; }
.tdb-entete {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
  gap: 14px 20px; padding-bottom: 16px; border-bottom: 1px solid var(--bord-fin);
}
.tdb-marque { margin: 0; font-family: 'Dancing Script', cursive; font-weight: 700; font-size: 26px; color: var(--terracotta); line-height: 1; }
.tdb-titre { margin: 4px 0 0; font-size: 26px; font-weight: 700; color: var(--texte); }
.tdb-maj { margin: 6px 0 0; font-size: 13px; color: var(--texte-4); }
.tdb-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tdb-actions[hidden] { display: none; }
.tdb-actions .btn-ghost { margin-top: 0; padding: 8px 16px; font-size: 14px; }
.tdb-connexion { max-width: 440px; margin: 32px auto 0; }
.tdb-connexion[hidden], #tdb-contenu[hidden] { display: none; }

.tdb-chiffres { display: grid; gap: 14px; margin-top: 22px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.tdb-carte {
  padding: 16px 18px; border: 1px solid var(--bord); border-radius: 10px; background: var(--carte-forte);
  box-shadow: 0 6px 18px rgba(184, 95, 46, .08); min-width: 0;
}
.tdb-carte-titre { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-3); }
.tdb-carte-valeur { margin: 8px 0 0; font-size: 30px; font-weight: 700; line-height: 1.1; color: var(--terracotta); overflow-wrap: anywhere; }
.tdb-carte-note { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: var(--texte-3); }
.tdb-note { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--texte-3); }
.tdb-note[hidden] { display: none; }

.tdb-sous-titre { margin: 18px 0 0; font-family: 'Dancing Script', cursive; font-weight: 700; font-size: 30px; color: var(--terracotta); }

/* Onglets : Inscriptions / Commandes / Précommandes */
.tdb-onglets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 28px; border-bottom: 1px solid var(--bord-fin); }
.tdb-onglets [role="tab"] {
  margin-bottom: -1px; padding: 10px 16px; border: 1px solid transparent; border-radius: 8px 8px 0 0;
  background: none; font: inherit; font-size: 15px; font-weight: 700; color: var(--texte-3); cursor: pointer;
}
.tdb-onglets [role="tab"]:hover { color: var(--terracotta); }
.tdb-onglets [role="tab"][aria-selected="true"] {
  color: var(--terracotta); background: var(--carte-forte); border-color: var(--bord-fin); border-bottom-color: var(--carte-forte);
}
.tdb-vue[hidden], .tdb-fiche[hidden] { display: none; }
.tdb-vue-entete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px 16px; }
.tdb-filtre { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--texte-3); }
.tdb-filtre select {
  max-width: 100%; padding: 8px 12px; font-size: 15px; color: var(--texte); background: var(--carte-forte);
  border: 1px solid var(--bord-champ); border-radius: 8px;
}
.tdb-filtre-actif { margin: 8px 0 0; font-size: 14px; font-weight: 700; color: var(--terracotta); }
.tdb-filtre-actif[hidden] { display: none; }
/* Filtre par événement : 16 px minimum, sinon l'iPhone zoome à l'ouverture du
   menu ; sur téléphone, menu pleine largeur sous le titre. */
.tdb-filtre-evenement select { font-size: 16px; }
@media (max-width: 640px) {
  .tdb-filtre-evenement { display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: 100%; font-size: 15px; }
  .tdb-filtre-evenement select { width: 100%; min-height: 46px; padding: 10px 12px; }
}
/* Ligne de total en bas de chaque tableau */
.tdb-tableau tfoot td { border-top: 2px solid var(--bord); border-bottom: 0; background: var(--sable); font-weight: 700; color: var(--texte); }
.tdb-vide { margin: 0; padding: 16px; font-size: 14px; color: var(--texte-3); }

/* Email cliquable -> fiche client */
.tdb-lien-client {
  display: block; padding: 0; margin-top: 2px; background: none; border: 0; cursor: pointer; text-align: left;
  font: inherit; font-size: 12px; color: var(--terracotta); text-decoration: underline; text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

/* Fiche client */
.tdb-fiche { margin-top: 20px; }
.tdb-retour { margin: 0; text-align: left; }
.tdb-fiche-nom { margin: 12px 0 0; font-size: 26px; font-weight: 700; color: var(--texte); overflow-wrap: anywhere; }
.tdb-fiche-coordonnees { margin: 4px 0 0; font-size: 15px; color: var(--texte-3); overflow-wrap: anywhere; }
.tdb-fiche-titre { margin: 26px 0 0; font-family: 'Dancing Script', cursive; font-weight: 700; font-size: 26px; color: var(--terracotta); }

/* Sur petit écran, seul le tableau défile horizontalement, jamais la page. */
.tdb-tableau-cadre { margin-top: 12px; overflow-x: auto; border: 1px solid var(--bord-fin); border-radius: 10px; background: var(--carte-forte); }
.tdb-tableau { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 14px; }
/* Récapitulatif par événement : six colonnes, lisible sur téléphone sans défiler. */
.tdb-tableau-recap { min-width: 0; }
.tdb-tableau-recap th, .tdb-tableau-recap td { padding: 9px 8px; }
@media (max-width: 640px) {
  /* La date figure déjà dans le nom de l'événement : colonne masquée sur téléphone. */
  .tdb-tableau-recap thead th:first-child, .tdb-tableau-recap tbody td:first-child { display: none; }
  .tdb-tableau-recap { font-size: 13px; }
  .tdb-tableau-recap th, .tdb-tableau-recap td { padding: 8px 5px; }
}
.tdb-tableau th, .tdb-tableau td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--bord-fin); }
.tdb-tableau tbody tr:last-child td { border-bottom: 0; }
.tdb-tableau th { background: var(--sable); white-space: nowrap; }
.tdb-tableau th button {
  padding: 0; background: none; border: 0; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--texte);
}
.tdb-tableau th button::after { content: " ↕"; color: var(--texte-4); font-weight: 400; }
.tdb-tableau th[aria-sort="ascending"] button::after { content: " ↑"; color: var(--terracotta); }
.tdb-tableau th[aria-sort="descending"] button::after { content: " ↓"; color: var(--terracotta); }
.tdb-tableau td { color: var(--texte-2); }
.tdb-num { text-align: right !important; white-space: nowrap; }
.tdb-date { white-space: nowrap; }
.tdb-client span { display: block; }
.tdb-tableau td.tdb-client { min-width: 180px; }
.tdb-email { font-size: 12px; color: var(--texte-4); overflow-wrap: anywhere; }
.tdb-detail { max-width: 340px; }
.tdb-annulee td { color: var(--texte-4); text-decoration: line-through; }

/* Impression : les chiffres et le tableau, rien d'autre. */
@media print {
  @page { margin: 14mm; }
  .tdb-page { background: #fff; }
  .tdb { max-width: none; padding: 0; }
  .tdb-actions, .tdb-onglets, .tdb-retour, .tdb-connexion, .tdb-filtre, #tdb-message { display: none !important; }
  .tdb-filtre-actif { color: #000; }
  .tdb-tableau tfoot td { background: #eee; border-top: 1px solid #999; color: #000; }
  .tdb-lien-client { color: #000; text-decoration: none; font-size: inherit; }
  .tdb-fiche-coordonnees a { color: #000; }
  .tdb-entete { border-bottom: 1px solid #999; }
  .tdb-chiffres { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .tdb-carte { box-shadow: none; border-color: #999; background: #fff; padding: 10px 12px; break-inside: avoid; }
  .tdb-carte-valeur { font-size: 20px; color: #000; }
  .tdb-tableau-cadre { overflow: visible; border: 0; background: #fff; }
  .tdb-tableau { min-width: 0; font-size: 10.5px; }
  .tdb-tableau th { background: #eee; }
  .tdb-tableau th button::after { content: none !important; }
  .tdb-tableau thead { display: table-header-group; }
  .tdb-tableau tr { break-inside: avoid; }
  .tdb-tableau th, .tdb-tableau td { padding: 5px 6px; border-bottom: 1px solid #ccc; color: #000; }
  .tdb-detail { max-width: none; }
}