/* By Pam Pam — charte : constante BRAND de app/src/services/pdf-generator.ts + §6.8 de CONTENU-BOUTIQUE.md.
   Trois polices (Beattle en capitales pour les titres · Karla pour le texte · Beth Ellen pour la signature).
   Interdits de la charte : ombres portées, dégradés, emojis. */

@font-face { font-family: 'Beattle'; src: url('/fonts/beattle.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Karla'; src: url('/fonts/karla-variable.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'BethEllen'; src: url('/fonts/bethellen.woff2') format('woff2'); font-display: swap; }

:root {
  --creme: #F7F6EC;
  --creme-2: #E3DDCB;
  --creme-3: #EFEBDD;
  --terracotta: #A15F50;
  --terracotta-2: #8E5040;
  --sauge: #A3A37F;
  --sauge-2: #555A3E;
  --peche: #FFD0C5;
  --bleu-gris: #D6E1E0;
  --texte: #3D3D37;
  --texte-clair: #8A8578;
  --filet: rgba(163, 163, 127, .42);
  --blanc: #FFFDF8;
  --maxw: 1080px;
  --r: 3px;
  --filet-dessine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='5' viewBox='0 0 120 5'%3E%3Cpath d='M0 2.6 Q 10 1.5 20 2.6 T 40 2.7 T 60 2.4 T 80 2.8 T 100 2.5 T 120 2.6' fill='none' stroke='%23C9C2AC' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--creme); color: var(--texte);
  font-family: 'Karla', 'Helvetica Neue', Arial, sans-serif; font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--terracotta); text-decoration-thickness: 1px; text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Typographie de marque ---- */
.display {
  font-family: 'Beattle', Didot, 'Times New Roman', serif; font-weight: 400;
  text-transform: uppercase; letter-spacing: .07em; color: var(--terracotta); line-height: 1.12;
}
.eyebrow { font-size: .78rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--sauge); margin: 0 0 12px; }
.legend {
  margin: 0 0 22px; font-family: 'Beattle', serif; font-weight: 400; font-size: .95rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--texte-clair);
  display: flex; align-items: center; gap: 18px; text-align: center;
}
.legend::before, .legend::after { content: ""; flex: 1; height: 5px; background: var(--filet-dessine) repeat-x center; }
.script { font-family: 'BethEllen', cursive; font-weight: 400; }

/* ---- En-tête ---- */
.top { display: flex; align-items: center; justify-content: space-between; padding: 22px 0 6px; }
.brand img { width: 170px; display: block; }
.lang { display: flex; border: 1px solid var(--filet); border-radius: 999px; overflow: hidden; }
.lang button { background: transparent; border: 0; padding: 6px 14px; font-size: .8rem; letter-spacing: .12em; cursor: pointer; color: var(--texte-clair); }
.lang button[aria-pressed="true"] { background: var(--terracotta); color: var(--creme); }

/* ---- Hero ---- */
.hero { text-align: center; padding: 40px 0 34px; }
.hero h1 { font-size: clamp(1.7rem, 4.4vw, 2.7rem); margin: 0 0 16px; text-wrap: balance; }
.hero .lead { max-width: 620px; margin: 0 auto; font-size: 1.08rem; color: var(--texte-clair); font-style: italic; text-wrap: pretty; }

/* ---- Le chercheur ---- */
.finder {
  background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--r);
  padding: 26px 24px 20px; display: grid; gap: 22px;
}
@media (min-width: 760px) { .finder { grid-template-columns: 1.1fr 1fr; padding: 30px 30px 24px; } .finder .field--full { grid-column: 1 / -1; } }
.field .label, .field label { display: block; font-weight: 600; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sauge-2); margin-bottom: 10px; }
.select-wrap { position: relative; }
.select-wrap::after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 9px; height: 9px;
  border-right: 1.5px solid var(--terracotta); border-bottom: 1.5px solid var(--terracotta);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
select {
  width: 100%; appearance: none; -webkit-appearance: none; background: var(--creme); color: var(--texte);
  border: 1px solid var(--filet); border-radius: var(--r); padding: 13px 44px 13px 16px; font: inherit; font-size: 1.05rem; cursor: pointer;
}
.hint { margin: 10px 0 0; font-size: .9rem; color: var(--texte-clair); font-style: italic; min-height: 1.4em; }
.seg, .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.seg button, .chips button {
  background: transparent; border: 1px solid var(--filet); border-radius: 999px; padding: 9px 16px;
  font-size: .95rem; cursor: pointer; color: var(--texte); transition: background .15s, color .15s, border-color .15s;
}
.seg button:hover, .chips button:hover { border-color: var(--terracotta); }
.seg button[aria-checked="true"], .chips button[aria-pressed="true"] { background: var(--terracotta); border-color: var(--terracotta); color: var(--creme); }

/* ---- Résultats ---- */
.results { padding: 44px 0 10px; }
.results-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; margin-bottom: 18px; }
.results-head h2 { margin: 0; font-size: clamp(1.15rem, 2.6vw, 1.5rem); }
.results-head .count { color: var(--texte-clair); font-size: .95rem; }
.country-note { margin: 0 0 22px; background: var(--creme-3); border-left: 3px solid var(--sauge); font-size: .97rem; color: var(--texte); }
.country-note summary { cursor: pointer; padding: 12px 18px; font-size: .74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--sauge-2); list-style: none; display: flex; align-items: center; gap: 10px; }
.country-note summary::-webkit-details-marker { display: none; }
.country-note summary::before { content: "+"; font-weight: 400; font-size: 1rem; width: 1em; text-align: center; color: var(--terracotta); }
.country-note[open] summary::before { content: "–"; }
.country-note p { margin: 0; padding: 0 18px 14px; }
.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }

.printer {
  position: relative; background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--r);
  padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 14px;
}
.printer--pick { border-color: var(--terracotta); }
.pick-tag {
  position: absolute; top: -11px; left: 18px; background: var(--terracotta); color: var(--creme);
  font-family: 'Beattle', serif; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; padding: 4px 10px 3px;
}
.printer h3 { margin: 0; font-size: 1.25rem; font-weight: 600; line-height: 1.25; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.badge { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--filet); color: var(--texte-clair); }
.badge--seg { background: var(--creme-3); border-color: transparent; color: var(--sauge-2); }
.badge--local { background: var(--peche); border-color: transparent; color: var(--terracotta-2); }

.scores { margin: 0; display: grid; grid-template-columns: repeat(3, auto); gap: 8px 18px; justify-content: start; font-size: .9rem; }
.scores div { display: flex; flex-direction: column; gap: 3px; }
.scores dt { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--texte-clair); }
.scores dd { margin: 0; }
.dots { display: inline-flex; gap: 4px; align-items: center; height: 1.2em; }
.dots i {
  width: 10px; height: 10px; display: inline-block; border: 1.2px solid var(--terracotta);
  border-radius: 48% 52% 50% 50% / 52% 48% 52% 48%;
}
.dots i:nth-child(even) { border-radius: 52% 48% 49% 51% / 47% 53% 48% 52%; transform: rotate(12deg); }
.dots i.on { background: var(--terracotta); }
.euros { letter-spacing: .05em; font-weight: 600; color: var(--terracotta); font-variant-numeric: tabular-nums; }
.euros span { color: var(--creme-2); }
.tp { font-variant-numeric: tabular-nums; }
.tp b { font-weight: 600; }
.tp .muted, .muted { color: var(--texte-clair); font-style: italic; }

.ask { margin: 0; padding: 10px 14px; background: var(--creme-3); border-radius: var(--r); font-size: .95rem; }
.ask b { font-weight: 600; color: var(--terracotta); }
.facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .88rem; color: var(--texte-clair); }
.facts li::before { content: "·"; color: var(--sauge); margin-right: 6px; }
.facts li:first-child::before { content: none; }
.customs { margin: 0; font-size: .85rem; color: var(--texte-clair); font-style: italic; }

.printer details { border-top: 1px solid var(--filet); padding-top: 10px; font-size: .93rem; }
.printer summary { cursor: pointer; color: var(--terracotta); font-weight: 600; list-style: none; display: flex; align-items: center; gap: 8px; }
.printer summary::-webkit-details-marker { display: none; }
.printer summary::before { content: "+"; font-weight: 400; width: 1em; text-align: center; }
.printer details[open] summary::before { content: "–"; }
.proscons { display: grid; gap: 10px; margin-top: 10px; }
.proscons h4 { margin: 0 0 4px; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sauge-2); font-weight: 600; }
.proscons ul { margin: 0; padding-left: 18px; }
.proscons li { margin-bottom: 3px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; align-self: flex-start; margin-top: auto;
  background: var(--terracotta); color: var(--creme); text-decoration: none; border: 1px solid var(--terracotta); border-radius: 999px;
  padding: 10px 20px; font-weight: 600; font-size: .95rem; cursor: pointer; transition: background .15s;
}
.btn:hover { background: var(--terracotta-2); }
.btn--ghost { background: transparent; color: var(--terracotta); }
.btn--ghost:hover { background: var(--peche); }
.btn svg { width: 14px; height: 14px; }

.btn--more { grid-column: 1 / -1; justify-self: center; margin-top: 6px; }

.fallback { margin-top: 22px; padding: 22px 24px; background: var(--creme-3); border: 1px solid var(--filet); border-radius: var(--r); }
.fallback h3 { margin: 0 0 8px; font-size: 1.05rem; }
.fallback p { margin: 0 0 12px; }
.dir-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; }

.walkin { margin-top: 22px; border: 1px solid var(--filet); border-radius: var(--r); background: var(--blanc); }
.walkin summary { cursor: pointer; padding: 14px 18px; font-weight: 600; color: var(--terracotta); }
.walkin p { margin: 0; padding: 0 18px 16px; color: var(--texte); }

/* ---- Conseils ---- */
.tips { padding: 54px 0 10px; }
.tips-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 185px), 1fr)); }
.tips-grid li { background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--r); padding: 20px 18px 18px; display: flex; flex-direction: column; gap: 8px; }
.tips-grid li:nth-child(5) { background: var(--peche); border-color: transparent; }
.tip-num { font-size: .78rem; font-weight: 600; letter-spacing: .12em; color: var(--sauge-2); }
.tips-grid .ico { color: var(--terracotta); width: 34px; height: 34px; }
.tips-grid .ico svg { width: 100%; height: 100%; display: block; }
.tips-grid h3 { margin: 0; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.tips-grid p { margin: 0; font-size: .93rem; color: var(--texte); }

.say { margin-top: 28px; background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--r); padding: 24px; display: grid; gap: 14px; }
@media (min-width: 760px) { .say { grid-template-columns: 1fr 260px; align-items: start; } .say h3, .say blockquote { grid-column: 1; } .say .say-side { grid-column: 2; grid-row: 1 / span 3; } }
.say h3 { margin: 0; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--sauge-2); }
.say blockquote { margin: 0; padding: 14px 18px; background: var(--creme-3); border-left: 3px solid var(--terracotta); font-style: italic; font-size: 1rem; }
.say-side { display: grid; gap: 10px; }
.say-side label { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sauge-2); font-weight: 600; }
.say-side input { width: 100%; padding: 11px 14px; border: 1px solid var(--filet); border-radius: var(--r); background: var(--creme); font: inherit; }
.copied { font-size: .88rem; color: var(--sauge-2); min-height: 1.4em; margin: 0; }

/* ---- Formats ---- */
.formats { padding: 54px 0 10px; }
.formats .lead { margin: 0 auto 22px; max-width: 700px; text-align: center; color: var(--texte-clair); }
.table-wrap { overflow-x: auto; border: 1px solid var(--filet); border-radius: var(--r); background: var(--blanc); }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { text-align: left; padding: 12px 16px; vertical-align: top; border-bottom: 1px solid var(--filet); }
th { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sauge-2); font-weight: 600; background: var(--creme-3); }
tr:last-child td { border-bottom: 0; }
td.ratio { font-family: 'Beattle', serif; font-size: 1.15rem; color: var(--terracotta); white-space: nowrap; letter-spacing: .03em; }
td.frames { color: var(--texte-clair); white-space: nowrap; }
.sizes { display: flex; flex-wrap: wrap; gap: 4px 14px; font-variant-numeric: tabular-nums; }
.sizes span { white-space: nowrap; }
.sizes small { color: var(--texte-clair); margin-left: 4px; }
.formats .note { margin: 14px 0 0; font-size: .93rem; color: var(--texte-clair); font-style: italic; text-align: center; }

/* ---- Annuaires ---- */
.directories { padding: 54px 0 20px; text-align: center; }
.directories p { max-width: 620px; margin: 0 auto 16px; color: var(--texte-clair); }
.directories .dir-links { justify-content: center; }

/* ---- Pied ---- */
footer { margin-top: 40px; padding: 40px 0 56px; border-top: 1px solid var(--filet); text-align: center; color: var(--texte-clair); font-size: .9rem; }
footer .sign { font-size: 1.9rem; color: var(--terracotta); margin: 0 0 14px; }
footer p { margin: 0 0 8px; }
footer .logo { width: 220px; margin: 30px auto 0; display: block; }
footer .copyright { margin: 16px 0 0; font-size: .8rem; color: var(--texte-clair); }

.loading, .load-error { text-align: center; color: var(--texte-clair); font-style: italic; padding: 30px 0; }

@media (max-width: 480px) {
  body { font-size: 16px; }
  .brand img { width: 140px; }
  .hero { padding: 28px 0 26px; }
  .printer { padding: 18px 16px 16px; }
  .scores { grid-template-columns: repeat(2, auto); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
@media print { .lang, .btn, .say-side, .walkin, footer .logo { display: none !important; } body { background: #fff; } }