/* Polices hébergées sur le site (aucune requête vers Google Fonts) */
@font-face { font-family: "Vollkorn"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/vollkorn-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Vollkorn"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/vollkorn-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Vollkorn"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/vollkorn-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Vollkorn"; font-style: italic; font-weight: 600; font-display: swap; src: url("fonts/vollkorn-latin-600-italic.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/nunito-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/nunito-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/nunito-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/nunito-sans-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/playfair-display-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 600; font-display: swap; src: url("fonts/playfair-display-latin-600-italic.woff2") format("woff2"); }
@font-face { font-family: "Syne"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/syne-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Syne"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/syne-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Bebas Neue"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/bebas-neue-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url("fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 600; font-display: swap; src: url("fonts/cormorant-garamond-latin-600-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Serif Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/dm-serif-display-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/fraunces-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/fraunces-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Josefin Sans"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/josefin-sans-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Josefin Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/josefin-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Josefin Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/josefin-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/lora-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-style: italic; font-weight: 500; font-display: swap; src: url("fonts/lora-latin-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/lora-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/montserrat-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/montserrat-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/montserrat-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/poppins-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/poppins-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/poppins-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/poppins-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Quicksand"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/quicksand-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Quicksand"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/quicksand-latin-700-normal.woff2") format("woff2"); }

/* Rchdaa Design — charte : bleu nuit, crème, beige doux, blanc cassé · Vollkorn (titres) + Nunito Sans (texte)
   Layout : pages séparées, colonne centrale aérée, une seule bande pleine couleur par page pour l'appel à l'action. */
:root {
  --navy: #0A1128;
  --creme: #F5F1EA;
  --beige: #E8DFD3;
  --casse: #E0E1DD;

  /* Mode clair : papier crème, encre bleu nuit */
  --bg: #F5F1EA;
  --surface: #EDE5D9;
  --raised: #FBF8F3;
  --fg: #0A1128;
  --muted: #4B5169;
  --soft: #E8DFD3;
  --line: rgba(10, 17, 40, .14);
  --line-strong: rgba(10, 17, 40, .32);
  --control: #767B8E;
  --btn: #0A1128;
  --on-btn: #F5F1EA;
  --accent-text: #2E3A63;
  --band: #0A1128;
  --on-band: #F5F1EA;
  --on-band-muted: rgba(245, 241, 234, .74);
  --glow: rgba(232, 223, 211, 0);
  --watermark: rgba(10, 17, 40, .07);
  --shadow: 0 1px 0 rgba(10, 17, 40, .04), 0 12px 32px -18px rgba(10, 17, 40, .28);
  --ok: #2F6B4F;

  --f-title: "Vollkorn", Georgia, "Times New Roman", serif;
  --f-body: "Nunito Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --radius: 18px;
  --wrap: 1120px;
  --gutter: clamp(16px, 4vw, 40px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Mode foncé : nuit bleue, texte crème, bande de conversion en beige */
    --bg: #0A1128;
    --surface: #111A39;
    --raised: #16214A;
    --fg: #F5F1EA;
    --muted: #B8BBC4;
    --soft: #1C2852;
    --line: rgba(224, 225, 221, .13);
    --line-strong: rgba(224, 225, 221, .34);
    --control: #7F87A6;
    --btn: #F5F1EA;
    --on-btn: #0A1128;
    --accent-text: #E8DFD3;
    --band: #E8DFD3;
    --on-band: #0A1128;
    --on-band-muted: rgba(10, 17, 40, .72);
    --glow: rgba(232, 223, 211, .07);
    --watermark: rgba(245, 241, 234, .06);
    --shadow: 0 1px 0 rgba(0, 0, 0, .2), 0 18px 40px -20px rgba(0, 0, 0, .7);
    --ok: #9BD3B4;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0A1128;
  --surface: #111A39;
  --raised: #16214A;
  --fg: #F5F1EA;
  --muted: #B8BBC4;
  --soft: #1C2852;
  --line: rgba(224, 225, 221, .13);
  --line-strong: rgba(224, 225, 221, .34);
  --control: #7F87A6;
  --btn: #F5F1EA;
  --on-btn: #0A1128;
  --accent-text: #E8DFD3;
  --band: #E8DFD3;
  --on-band: #0A1128;
  --on-band-muted: rgba(10, 17, 40, .72);
  --glow: rgba(232, 223, 211, .07);
  --watermark: rgba(245, 241, 234, .06);
  --shadow: 0 1px 0 rgba(0, 0, 0, .2), 0 18px 40px -20px rgba(0, 0, 0, .7);
  --ok: #9BD3B4;
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  transition: background-color .35s ease, color .35s ease;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

.skip { position: absolute; left: -999px; top: 8px; background: var(--btn); color: var(--on-btn); padding: 8px 14px; border-radius: 999px; z-index: 100; }
.skip:focus { left: 16px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* Typo */
h1, h2, h3 { font-family: var(--f-title); font-weight: 600; line-height: 1.12; margin: 0; text-wrap: balance; letter-spacing: -.01em; }
h1 { font-size: clamp(2.3rem, 6vw, 4.2rem); }
h2 { font-size: clamp(1.75rem, 3.8vw, 2.6rem); }
h3 { font-size: 1.35rem; }
p { margin: 0; }
em, .italic { font-family: var(--f-title); font-style: italic; font-weight: 400; color: var(--accent-text); }
.eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.lede { font-size: clamp(1.08rem, 2vw, 1.22rem); color: var(--muted); max-width: 60ch; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }

/* Marques (monogramme + logo colorés par le thème) */
.mono, .logo-mark {
  display: inline-block;
  background: currentColor;
  -webkit-mask: url("monogramme-creme.png") center / contain no-repeat;
  mask: url("monogramme-creme.png") center / contain no-repeat;
}
.logo-mark { -webkit-mask-image: url("logo-creme.png"); mask-image: url("logo-creme.png"); aspect-ratio: 1021 / 641; width: 120px; }

/* En-tête */
.top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.top-in { display: flex; align-items: center; gap: 16px; min-height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; flex-shrink: 0; }
.brand img { width: 36px; height: 36px; object-fit: contain; }
.brand-name { font-family: var(--f-title); font-weight: 600; font-size: 1.25rem; white-space: nowrap; }
.nav { display: flex; align-items: center; gap: 2px; min-width: 0; }
.nav a { white-space: nowrap; text-decoration: none; font-size: .94rem; padding: 8px 8px; border-radius: 999px; color: var(--muted); transition: color .2s, background-color .2s; }
.nav a:hover { color: var(--fg); background: var(--soft); }
.nav a[aria-current="page"] { color: var(--fg); font-weight: 700; }
.nav .nav-cta { margin-left: 6px; padding-inline: 14px; color: var(--on-btn); background: var(--btn); }
.nav .nav-cta:hover { color: var(--on-btn); background: var(--btn); opacity: .9; }
.top-actions { display: flex; gap: 8px; align-items: center; }
.pill-btn {
  font: inherit; font-size: .9rem; font-weight: 600; color: var(--fg);
  background: transparent; border: 1px solid var(--control); border-radius: 999px;
  padding: 8px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
}
.pill-btn:hover { background: var(--soft); }
.theme-ico { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.menu-btn { display: none; }
@media (max-width: 1240px) {
  .menu-btn { display: inline-flex; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 12px var(--gutter) 20px; display: none;
  }
  .nav.open { display: flex; }
  .nav a { padding: 12px 14px; font-size: 1.05rem; }
  .nav .nav-cta { margin: 10px 0 0; text-align: center; }
}
/* Si le menu ne tient pas sur une ligne (écran ou zoom particulier), il passe en bouton « Menu » */
html.nav-compact .menu-btn { display: inline-flex; }
html.nav-compact .nav { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 2px; background: var(--bg); border-bottom: 1px solid var(--line); padding: 12px var(--gutter) 20px; display: none; }
html.nav-compact .nav.open { display: flex; }
html.nav-compact .nav a { padding: 12px 14px; font-size: 1.05rem; }
html.nav-compact .nav .nav-cta { margin: 10px 0 0; text-align: center; }
@media (max-width: 420px) { .brand-name { display: none; } }

/* Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer;
  padding: 14px 24px; border-radius: 999px; border: 1.5px solid var(--btn);
  transition: transform .15s ease, opacity .2s, background-color .2s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--btn); color: var(--on-btn); }
.btn-primary:hover { opacity: .9; }
.btn-ghost { background: transparent; color: var(--fg); border-color: var(--control); }
.btn-ghost:hover { background: var(--soft); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Sections */
main { display: block; }
.section { padding-block: clamp(56px, 9vw, 104px); }
.section-tight { padding-block: clamp(40px, 6vw, 64px); }
.head { display: grid; gap: 14px; margin-bottom: clamp(28px, 4vw, 48px); max-width: 720px; }
.page-hero { position: relative; overflow: hidden; padding-block: clamp(48px, 8vw, 96px) clamp(24px, 4vw, 40px); }
.page-hero .head { margin-bottom: 0; }
.page-hero::before {
  content: ""; position: absolute; inset: -30% -10% auto auto; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px;
  background: radial-gradient(closest-side, var(--glow), transparent); pointer-events: none;
}

/* Accueil */
.hero { position: relative; overflow: hidden; padding-block: clamp(56px, 10vw, 128px) clamp(48px, 8vw, 96px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 40px; align-items: center; }
.hero-copy { display: grid; gap: 22px; min-width: 0; }
.hero-mark { color: var(--fg); justify-self: center; width: min(100%, 380px); aspect-ratio: 1; opacity: .92; }
.hero-mark img { width: 100%; height: 100%; object-fit: contain; }
.hero .slogan { font-family: var(--f-title); font-style: italic; font-size: clamp(1.4rem, 3vw, 1.8rem); line-height: 1.2; color: var(--accent-text); margin-bottom: -6px; }
.hero::before {
  content: ""; position: absolute; left: 50%; top: -20%; width: 120vw; height: 90%; transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--glow), transparent); pointer-events: none;
}
@media (max-width: 820px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-mark { order: -1; width: 120px; justify-self: start; }
}

.doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .doors { grid-template-columns: 1fr; } }
.door {
  display: grid; gap: 10px; align-content: start; text-decoration: none;
  padding: 28px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line);
  transition: transform .2s ease, border-color .2s;
}
.door:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.door .eyebrow { color: var(--accent-text); }
.door h3 { font-size: 1.5rem; }
.door p { color: var(--muted); }
.door .go { font-weight: 700; margin-top: 6px; }
@media (max-width: 680px) { .doors { grid-template-columns: 1fr; } .door { padding: 22px; } }

.statement { display: grid; gap: 18px; max-width: 820px; }
.statement p.big { font-family: var(--f-title); font-size: clamp(1.5rem, 3.4vw, 2.2rem); line-height: 1.3; }

/* Bande d'appel à l'action */
.band { background: var(--band); color: var(--on-band); border-radius: calc(var(--radius) + 6px); padding: clamp(32px, 6vw, 64px); display: grid; gap: 18px; position: relative; overflow: hidden; }
.band p { color: var(--on-band-muted); max-width: 56ch; }
.band .btn-primary { background: var(--on-band); color: var(--band); border-color: var(--on-band); }
.band .btn-ghost { color: var(--on-band); border-color: currentColor; }
.band .btn-ghost:hover { background: transparent; opacity: .8; }
.band .mono { position: absolute; right: -40px; bottom: -60px; width: 260px; height: 260px; color: var(--on-band); opacity: .08; }
.band h2 { position: relative; }

/* Méthode */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: step; }
.step { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 20px; padding-block: 26px; border-top: 1px solid var(--line); }
.step:last-child { border-bottom: 1px solid var(--line); }
.step-n { font-family: var(--f-title); font-style: italic; font-size: 2.6rem; line-height: 1; color: var(--accent-text); }
.step h3 { margin-bottom: 6px; }
.step p { color: var(--muted); max-width: 60ch; }
.tag { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; background: var(--soft); color: var(--fg); margin-left: 8px; vertical-align: middle; }
.note { display: grid; gap: 6px; padding: 22px 24px; border-radius: var(--radius); border: 1px dashed var(--line-strong); margin-top: 28px; }

/* Offres */
.packs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.pack { display: grid; grid-template-rows: auto auto 1fr auto; gap: 14px; padding: 30px; border-radius: var(--radius); background: var(--raised); border: 1px solid var(--line); box-shadow: var(--shadow); }
.pack.featured { background: var(--band); color: var(--on-band); border-color: transparent; }
.pack.featured .muted, .pack.featured li { color: var(--on-band-muted); }
.pack.featured .price { color: var(--on-band); }
.pack.featured .btn-primary { background: var(--on-band); color: var(--band); border-color: var(--on-band); }
.pack .for { font-family: var(--f-title); font-style: italic; }
.price { font-family: var(--f-title); font-size: 2.6rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.price small { font-family: var(--f-body); font-size: .9rem; font-weight: 600; margin-right: 4px; }
.pack ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.pack li { padding-left: 22px; position: relative; color: var(--muted); }
.pack li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 9px; height: 1.5px; background: currentColor; }
.pack .btn { justify-self: start; }
.pack-foot { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.pack.featured .pack-more { color: var(--on-band); }
@media (max-width: 760px) { .packs { grid-template-columns: 1fr; } .pack { padding: 24px; } }

.rates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.rate { padding: 24px; border-radius: var(--radius); background: var(--surface); }
.rate h3 { margin-bottom: 12px; }
.rate dl { margin: 0; display: grid; }
.rate .row { display: flex; justify-content: space-between; gap: 12px; padding-block: 9px; border-top: 1px solid var(--line); }
.rate dt { color: var(--muted); min-width: 0; }
.rate dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 900px) { .rates { grid-template-columns: 1fr; } }
.legal-line { margin-top: 22px; font-size: .9rem; color: var(--muted); }

/* Simulateur */
.sim { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
.sim-block { padding: 26px; border-radius: var(--radius); background: var(--surface); display: grid; gap: 14px; }
.sim-block + .sim-block { margin-top: 18px; }
.sim-block header { display: grid; gap: 4px; }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice > span { display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--control); background: var(--raised); transition: border-color .2s, background-color .2s; height: 100%; }
.choice b { font-weight: 700; }
.choice i { font-style: normal; color: var(--muted); font-size: .92rem; font-variant-numeric: tabular-nums; }
.choice input:checked + span { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.choice input:focus-visible + span { outline: 2px solid var(--fg); outline-offset: 2px; }
.qty-list { display: grid; }
.qty { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding-block: 10px; border-top: 1px solid var(--line); }
.qty:first-child { border-top: 0; }
.qty .lbl { display: grid; min-width: 0; }
.qty .lbl span { color: var(--muted); font-size: .9rem; font-variant-numeric: tabular-nums; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--control); border-radius: 999px; overflow: hidden; }
.stepper button { font: inherit; font-size: 1.15rem; width: 40px; height: 38px; border: 0; background: transparent; color: var(--fg); cursor: pointer; }
.stepper button:hover { background: var(--soft); }
.stepper output { min-width: 30px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.summary { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 88px); padding: 26px; border-radius: var(--radius); background: var(--band); color: var(--on-band); display: grid; gap: 14px; }
.summary .lines { display: grid; gap: 6px; font-size: .95rem; }
.summary .line { display: flex; justify-content: space-between; gap: 12px; color: var(--on-band-muted); }
.summary .line b { color: var(--on-band); font-variant-numeric: tabular-nums; white-space: nowrap; }
.summary .total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid currentColor; padding-top: 14px; }
.summary .total b { font-family: var(--f-title); font-size: 2.4rem; font-variant-numeric: tabular-nums; }
.summary .saving { background: color-mix(in srgb, var(--on-band) 12%, transparent); border-radius: 12px; padding: 10px 12px; font-size: .92rem; }
.summary .btn-primary { background: var(--on-band); color: var(--band); border-color: var(--on-band); width: 100%; }
.summary .btn-ghost { color: var(--on-band); border-color: currentColor; width: 100%; }
.summary small { color: var(--on-band-muted); }
@media (max-width: 900px) { .sim { grid-template-columns: 1fr; } .summary { position: static; } }
@media (max-width: 520px) { .choices { grid-template-columns: 1fr; } .sim-block { padding: 20px; } }

/* Quiz */
.quiz { max-width: 760px; }
.progress { height: 4px; background: var(--line); border-radius: 999px; overflow: hidden; margin-bottom: 26px; }
.progress span { display: block; height: 100%; background: var(--fg); width: 0; transition: width .35s ease; }
.q { display: grid; gap: 18px; }
.q h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
.answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.answer { font: inherit; text-align: left; padding: 16px 18px; border-radius: 14px; border: 1.5px solid var(--control); background: var(--raised); color: var(--fg); cursor: pointer; transition: border-color .2s, transform .15s; }
.answer:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.answer small { display: block; color: var(--muted); font-size: .88rem; }
@media (max-width: 560px) { .answers { grid-template-columns: 1fr; } }
.q-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.linkish { font: inherit; background: none; border: 0; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 4px 0; }
.result { display: grid; gap: 22px; padding: clamp(24px, 4vw, 40px); border-radius: var(--radius); background: var(--raised); border: 1px solid var(--line); box-shadow: var(--shadow); }
.swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.swatch { display: grid; gap: 6px; }
.swatch div { aspect-ratio: 1 / 1.1; border-radius: 12px; border: 1px solid var(--line); }
.swatch code { font-size: .78rem; color: var(--muted); font-family: ui-monospace, Menlo, monospace; }
.type-sample { padding: 20px; border-radius: 14px; display: grid; gap: 6px; }
.type-sample .t { font-size: 2rem; line-height: 1.1; }
.result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 600px) { .result-grid { grid-template-columns: 1fr; } }

/* À propos */
.about { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 6vw, 72px); align-items: start; }
.about-mark { color: var(--fg); aspect-ratio: 1; border-radius: calc(var(--radius) + 8px); background: var(--surface); display: grid; place-items: center; }
.about-mark img { width: 62%; height: 62%; object-fit: contain; }
.about-copy { display: grid; gap: 20px; min-width: 0; }
.values { display: flex; flex-wrap: wrap; gap: 8px; }
.values span { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--control); font-weight: 600; font-size: .95rem; }
blockquote { margin: 0; font-family: var(--f-title); font-style: italic; font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.3; color: var(--accent-text); border-left: 2px solid var(--line-strong); padding-left: 20px; }
@media (max-width: 820px) { .about { grid-template-columns: 1fr; } .about-mark { max-width: 220px; } }

/* Rendez-vous */
.rdv { display: grid; gap: 22px; max-width: 820px; }
.rdv-step { padding: clamp(22px, 4vw, 32px); border-radius: var(--radius); background: var(--surface); display: grid; gap: 16px; }
.rdv-step h2 { font-size: 1.55rem; display: flex; gap: 12px; align-items: baseline; }
.rdv-step h2 .n { font-style: italic; font-weight: 400; color: var(--accent-text); }
.formats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 560px) { .formats { grid-template-columns: 1fr; } }
.field { display: grid; gap: 6px; }
.field label, .field .lab { font-weight: 700; font-size: .95rem; }
.field input, .field textarea {
  font: inherit; color: var(--fg); background: var(--raised); border: 1.5px solid var(--control); border-radius: 12px; padding: 12px 14px; width: 100%;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--fg); }
.field textarea { min-height: 120px; resize: vertical; }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 560px) { .row2 { grid-template-columns: 1fr; } }
.search { display: flex; gap: 10px; flex-wrap: wrap; }
.search input { flex: 1 1 220px; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip > span { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--control); background: var(--raised); font-size: .93rem; }
.chip input:checked + span { background: var(--btn); color: var(--on-btn); border-color: var(--btn); }
.chip input:focus-visible + span { outline: 2px solid var(--fg); outline-offset: 2px; }
.places { display: grid; gap: 10px; }
.place { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 14px; background: var(--raised); border: 1.5px solid var(--line); }
.place input { width: 18px; height: 18px; accent-color: var(--fg); }
.place .meta { color: var(--muted); font-size: .9rem; }
.place a { font-size: .9rem; white-space: nowrap; }
.place:has(input:checked) { border-color: var(--fg); }
.status { font-size: .95rem; color: var(--muted); }
.coffee { padding: 14px 16px; border-radius: 14px; background: var(--soft); font-size: .95rem; }
.attached { display: grid; gap: 8px; }
.att { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--raised); border: 1px solid var(--line); font-size: .95rem; }
.att > span { min-width: 0; }
.done { display: grid; gap: 14px; padding: clamp(22px, 4vw, 32px); border-radius: var(--radius); background: var(--band); color: var(--on-band); }
.done p { color: var(--on-band-muted); }
.done .btn-primary { background: var(--on-band); color: var(--band); border-color: var(--on-band); }
.err { color: #B3261E; font-size: .92rem; }
:root[data-theme="dark"] .err { color: #F2B8B5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .err { color: #F2B8B5; } }

/* Pages légales */
.legal { max-width: 760px; display: grid; gap: 28px; }
.legal section { display: grid; gap: 8px; }
.legal h2 { font-size: 1.4rem; }
.legal p { color: var(--muted); }

/* Pied de page */
.foot { border-top: 1px solid var(--line); padding-block: 48px 40px; margin-top: clamp(40px, 8vw, 80px); }
.foot-grid { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 1.3fr); gap: 28px 48px; align-items: end; }
.foot .logo-img { width: 132px; height: auto; }
.foot .slogan { font-family: var(--f-title); font-style: italic; color: var(--accent-text); margin-top: 6px; }
.foot-info { color: var(--muted); font-size: .9rem; display: grid; gap: 4px; margin-top: 18px; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 18px; font-size: .92rem; }
.foot-links a { color: var(--muted); text-underline-offset: 3px; }
.foot-links a:hover { color: var(--fg); }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr; } .foot-links { justify-content: flex-start; } }

/* Images de marque : version bleu nuit en mode clair, version crème en mode foncé */
.th-dark { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .th-light { display: none !important; }
  :root:not([data-theme="light"]) .th-dark { display: block !important; }
}
:root[data-theme="dark"] .th-light { display: none !important; }
:root[data-theme="dark"] .th-dark { display: block !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Aperçu des cafés avec photo */
.place.has-photo { grid-template-columns: auto minmax(0, 1fr); }
.place.has-photo .place-photo { grid-column: 2; }
.place.has-photo > span:last-of-type:empty { display: none; }
.place-photo { margin: 0; display: grid; gap: 4px; }
.place-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; }
.place-photo figcaption { font-size: .75rem; color: var(--muted); }
.place.has-photo > span:not(:empty) { grid-column: 2; }

/* Quiz : résultats */
.q-input { display: flex; gap: 10px; flex-wrap: wrap; }
.q-input input { flex: 1 1 240px; min-width: 0; font: inherit; color: var(--fg); background: var(--raised); border: 1.5px solid var(--control); border-radius: 12px; padding: 14px 16px; }
.q-input input:focus { outline: none; border-color: var(--fg); }
.detected { padding: 12px 16px; border-radius: 12px; background: var(--soft); }
.palettes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.palette { display: grid; gap: 8px; }
.palette-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.palette-strip div { aspect-ratio: 1 / 1.3; }
.palette-codes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); font-size: .7rem; color: var(--muted); font-family: ui-monospace, Menlo, monospace; }
.palette h3, .typo h3 { font-family: var(--f-body); font-size: .95rem; font-weight: 700; }
.typos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.typo { display: grid; gap: 8px; align-content: start; padding: 18px; border-radius: 14px; background: var(--surface); }
.typo .t { font-size: 1.9rem; line-height: 1.1; color: var(--fg); }
.typo .b { font-size: .95rem; color: var(--muted); }
.typo small { font-size: .8rem; color: var(--muted); }
.disclaimer { padding: 14px 16px; border-radius: 12px; border: 1px dashed var(--control); font-size: .95rem; }
@media (max-width: 760px) { .palettes, .typos { grid-template-columns: 1fr; } }

/* Monogramme en filigrane dans le fond de chaque section, comme sur la carte de visite */
main > section { position: relative; overflow: hidden; isolation: isolate; }
main > section::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: clamp(240px, 42vw, 480px); aspect-ratio: 1;
  top: 50%; right: -7%; transform: translateY(-50%) rotate(-8deg);
  background: var(--watermark);
  -webkit-mask: url("monogramme-creme.png") center / contain no-repeat;
  mask: url("monogramme-creme.png") center / contain no-repeat;
}
main > section:nth-of-type(even)::after { right: auto; left: -9%; transform: translateY(-50%) rotate(8deg); }
main > section.hero::after { display: none; }
@media (max-width: 700px) { main > section::after { width: 70vw; right: -22%; } main > section:nth-of-type(even)::after { left: -24%; } }
.foot { position: relative; overflow: hidden; isolation: isolate; }
.foot::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; width: 260px; aspect-ratio: 1; right: -40px; bottom: -70px; transform: rotate(-8deg);
  background: var(--watermark);
  -webkit-mask: url("monogramme-creme.png") center / contain no-repeat; mask: url("monogramme-creme.png") center / contain no-repeat;
}

/* Écran de chargement : le monogramme passe du bleu nuit au crème, et le fond s'inverse */
.loader {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: #F5F1EA; color: #0A1128; opacity: 0; pointer-events: none;
  animation: ldShow 0s linear .9s forwards, ldSwap 1.4s ease-in-out .9s infinite alternate;
}
.first-load .loader { opacity: 1; pointer-events: auto; animation: ldSwap 1.4s ease-in-out infinite alternate; }
.loader.out { opacity: 0 !important; pointer-events: none !important; transition: opacity .45s ease; }
.loader-in { display: grid; justify-items: center; gap: 18px; }
.loader-mark {
  width: 110px; aspect-ratio: 1; background: currentColor;
  -webkit-mask: url("monogramme-creme.png") center / contain no-repeat; mask: url("monogramme-creme.png") center / contain no-repeat;
}
.loader-txt { font-family: var(--f-title); font-style: italic; font-size: 1.15rem; letter-spacing: .02em; }
.loader .dots span { animation: ldDot 1.2s infinite; opacity: .2; }
.loader .dots span:nth-child(2) { animation-delay: .2s; }
.loader .dots span:nth-child(3) { animation-delay: .4s; }
@keyframes ldShow { to { opacity: 1; pointer-events: auto; } }
@keyframes ldSwap { 0%, 15% { background: #F5F1EA; color: #0A1128; } 85%, 100% { background: #0A1128; color: #F5F1EA; } }
@keyframes ldDot { 0%, 100% { opacity: .2; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .loader, .first-load .loader { animation-name: ldShow; } .first-load .loader { animation: none; } .loader .dots span { animation: none; opacity: 1; } }

/* Champ piège à robots, invisible pour les visiteurs */
.hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }

/* Quelques créations */
.crea-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.crea { margin: 0; display: grid; grid-template-rows: auto 1fr; background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.crea-img { aspect-ratio: 1; background: var(--surface); border: 0; padding: 0; margin: 0; width: 100%; display: block; cursor: zoom-in; position: relative; overflow: hidden; }
.crea-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.crea-img:hover img { transform: scale(1.03); }
.crea.portrait .crea-img { background: var(--soft); display: grid; place-items: center; }
.crea.portrait .crea-img img { object-fit: contain; height: 78%; width: auto; box-shadow: 0 12px 28px -12px rgba(10, 17, 40, .5); border-radius: 4px; }
.crea-count { position: absolute; right: 10px; bottom: 10px; background: rgba(10, 17, 40, .78); color: #F5F1EA; font-size: .8rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.crea-voir { font-weight: 700; font-size: .92rem; margin-top: 4px; }
.crea figcaption { padding: 18px 20px 20px; display: grid; gap: 6px; align-content: start; }
.crea figcaption h3 { font-size: 1.3rem; }
.crea figcaption p:not(.eyebrow) { color: var(--muted); font-size: .95rem; }


/* Portrait (À propos) */
.about-photo { margin: 0; border-radius: calc(var(--radius) + 8px); overflow: hidden; aspect-ratio: 3 / 4; background: var(--surface); max-width: 420px; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 35%; }
@media (max-width: 820px) { .about-photo { max-width: 280px; } }

/* FAQ */
.faq { display: grid; gap: 28px; max-width: 820px; }
.faq-group { display: grid; gap: 0; }
.faq-group h3 { font-size: 1.25rem; margin-bottom: 8px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 16px 40px 16px 0; font-weight: 700; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-family: var(--f-title); font-size: 1.5rem; font-weight: 400; color: var(--accent-text); }
.faq details[open] summary::after { content: "−"; }
.faq details p { color: var(--muted); padding-bottom: 18px; max-width: 68ch; }

/* Réseaux */
.foot-info .social a { font-weight: 700; }



/* Visionneuse des créations : flèches, clavier et glissement du doigt */
.viewer { border: 0; padding: 0; margin: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; background: rgba(6, 10, 24, .96); color: #F5F1EA; }
.viewer::backdrop { background: rgba(6, 10, 24, .96); }
.viewer[open] { display: grid; grid-template-rows: auto 1fr; }
.viewer-top { display: flex; align-items: center; gap: 12px; padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px; }
.viewer-title { font-family: var(--f-title); font-size: 1.15rem; margin-right: auto; }
.viewer-count { font-size: .9rem; opacity: .8; font-variant-numeric: tabular-nums; }
.viewer-close { font: inherit; font-size: 2rem; line-height: 1; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(245, 241, 234, .35); background: transparent; color: inherit; cursor: pointer; }
.viewer-stage { min-height: 0; display: grid; place-items: center; padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px)); overflow: auto; touch-action: pan-y pinch-zoom; }
.viewer-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; user-select: none; -webkit-user-drag: none; }
.viewer-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(245, 241, 234, .92); color: #0A1128; font-size: 2rem; line-height: 1; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
.viewer-nav.prev { left: 12px; }
.viewer-nav.next { right: 12px; }
.viewer-nav[hidden] { display: none !important; }
.viewer-close:focus-visible, .viewer-nav:focus-visible { outline: 2px solid #F5F1EA; outline-offset: 3px; }
@media (max-width: 700px) {
  .viewer-stage { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .viewer-nav { top: auto; transform: none; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  .viewer-nav.prev { left: calc(50% - 64px); }
  .viewer-nav.next { right: calc(50% - 64px); }
}
.crea.paysage .crea-img { background: var(--soft); display: grid; place-items: center; }
.crea.paysage .crea-img img { object-fit: contain; width: 88%; height: auto; box-shadow: 0 12px 28px -12px rgba(10, 17, 40, .45); border-radius: 4px; }
@media (min-width: 701px) { .viewer-stage { padding-inline: 76px; } }
.faq-teaser { font-size: 1.05rem; padding: 18px 22px; border-radius: var(--radius); background: var(--surface); }
.faq-teaser a { font-weight: 700; }

/* Onglets du portfolio */
.crea-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 22px; scrollbar-width: none; }
.crea-tabs::-webkit-scrollbar { display: none; }
.crea-tabs button { font: inherit; font-weight: 700; font-size: .95rem; white-space: nowrap; padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--control); background: var(--raised); color: var(--fg); cursor: pointer; }
.crea-tabs button span { font-weight: 600; opacity: .65; margin-left: 4px; }
.crea-tabs button[aria-selected="true"] { background: var(--btn); color: var(--on-btn); border-color: var(--btn); }

/* Liste de villes proposées pendant la frappe */
.combo { position: relative; flex: 1 1 220px; min-width: 0; }
.combo input { width: 100%; }
.sug { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 6px; list-style: none; background: var(--raised); border: 1.5px solid var(--control); border-radius: 12px; box-shadow: var(--shadow); max-height: 280px; overflow: auto; }
.sug li { padding: 10px 12px; border-radius: 8px; cursor: pointer; }
.sug li:hover, .sug li.on { background: var(--soft); }
.sug li.hint { cursor: default; color: var(--muted); font-style: italic; }
.sug li.hint:hover { background: transparent; }

/* Page « Mon rendez-vous » */
.mon-rdv { display: grid; gap: 18px; max-width: 640px; }
.mon-rdv h2 { margin: 0; }
.mr-card { background: var(--surface); border-radius: var(--radius); padding: 22px 24px; display: grid; gap: 4px; }
.mr-card .eyebrow { margin: 0; }
.mr-date { font-family: var(--display, "Vollkorn", serif); font-size: 1.5rem; font-weight: 600; margin: 0; }
.mr-heure { margin: 0; color: var(--muted); }
.mr-lieu { margin: 8px 0 0; }
.mr-ok { background: var(--soft); border-radius: 12px; padding: 12px 16px; margin: 0; }

/* Fenêtre « En savoir plus » des packs */
.more-dlg { border: 0; padding: 0; border-radius: var(--radius); background: var(--raised); color: var(--fg); width: min(680px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); box-shadow: var(--shadow); }
.more-dlg::backdrop { background: rgba(10, 17, 40, .55); }
.more-in { padding: 28px 30px 30px; display: grid; gap: 18px; overflow: auto; max-height: calc(100dvh - 32px); }
.more-head { display: flex; justify-content: space-between; gap: 16px; align-items: start; position: sticky; top: -28px; background: var(--raised); padding-top: 4px; }
.more-head h2 { margin: 2px 0 4px; }
.more-head .price { margin: 0; }
.more-x { font: inherit; font-size: 1.8rem; line-height: 1; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line); background: transparent; color: var(--fg); cursor: pointer; flex: none; }
.more-in section h3 { font-size: 1.05rem; margin: 0 0 6px; }
.more-in section p, .more-in section li { color: var(--muted); }
.more-in section ul, .more-in section ol { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.more-in section a { color: var(--fg); }
@media (max-width: 600px) { .more-in { padding: 22px 18px 24px; } }

/* FAQ : recherche et catégories */
.faq-tools { display: grid; gap: 14px; }
.faq-tools input[type="search"] { width: 100%; font: inherit; padding: 14px 18px; border-radius: 999px; border: 1.5px solid var(--control); background: var(--raised); color: var(--fg); }
.faq-cat { font: inherit; font-size: .92rem; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--control); background: transparent; color: var(--fg); cursor: pointer; }
.faq-cat[aria-pressed="true"] { background: var(--btn); color: var(--on-btn); border-color: var(--btn); }
.faq-empty { padding: 18px 22px; border-radius: var(--radius); background: var(--surface); margin: 0; }
.faq-mini { max-width: 820px; }

/* Avis clients */
.avis-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.avis-card { margin: 0; padding: 24px; border-radius: var(--radius); background: var(--raised); border: 1px solid var(--line); display: grid; gap: 12px; align-content: start; }
.avis-card blockquote { margin: 0; font-family: var(--f-title); font-size: 1.08rem; line-height: 1.55; }
.stars { color: #A57820; letter-spacing: 2px; font-size: 1.1rem; }
.stars .off { color: var(--line); }
.avis-legal { margin-top: 24px; max-width: 75ch; }
.avis-form-wrap { max-width: 640px; }
.avis-form { display: grid; gap: 16px; }
.avis-form fieldset { border: 0; margin: 0; padding: 0; }
.star-pick { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.star-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-pick label { font-size: 2.2rem; line-height: 1; color: var(--line); cursor: pointer; padding: 2px; }
.star-pick input:checked ~ label, .star-pick label:hover, .star-pick label:hover ~ label { color: #A57820; }
.star-pick input:focus-visible + label { outline: 2px solid var(--fg); border-radius: 6px; }
.check { display: flex; gap: 10px; align-items: flex-start; }
.check input { margin-top: 4px; width: 18px; height: 18px; flex: none; }

/* Conseils */
.conseil-jour { border-radius: var(--radius); background: var(--raised); border: 1px solid var(--line); box-shadow: var(--shadow); padding: clamp(22px, 4vw, 40px); }
.cj-in { display: grid; gap: 14px; max-width: 760px; }
.cj-in h2 { margin: 0; }
.cj-in .lede { margin: 0; }
.conseil-action { border-left: 4px solid var(--fg); background: var(--surface); border-radius: 0 12px 12px 0; padding: 14px 18px; }
.conseil-action .eyebrow { margin: 0 0 4px; }
.conseil-action p:last-child { margin: 0; }
.conseils-tools { margin-bottom: 20px; }
.conseils-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.conseil-card { display: grid; gap: 8px; align-content: start; padding: 20px; border-radius: var(--radius); background: var(--raised); border: 1px solid var(--line); color: var(--fg); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.conseil-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.conseil-card strong { font-family: var(--f-title); font-size: 1.15rem; line-height: 1.3; }
.conseil-card .eyebrow { margin: 0; }
.conseil-body { display: grid; gap: 16px; max-width: 760px; }
.conseil-body h2 { margin: 12px 0 0; }
.conseil-body > p { color: var(--muted); line-height: 1.75; margin: 0; }
.crumbs { font-size: .9rem; color: var(--muted); margin: 0 0 6px; }
.crumbs a { color: inherit; }
.conseil-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 12px; }
.conseil-nav a { padding: 16px 18px; border-radius: var(--radius); background: var(--surface); color: var(--fg); text-decoration: none; font-weight: 700; }
.conseil-nav .cn-next { text-align: right; }
@media (prefers-reduced-motion: reduce) { .conseil-card { transition: none; } .conseil-card:hover { transform: none; } }

/* Comparateur avant / après (visionneuse) */
.viewer-stage { position: relative; }
.cmp { --pos: 50%; position: relative; width: min(100%, 80dvh, 820px); aspect-ratio: 1; border-radius: 6px; overflow: hidden; user-select: none; touch-action: none; }
.cmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; }
.cmp-apres { background: #FFF7DD; }
.cmp-avant { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); background: #F4F2EE; }
.cmp-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #F5F1EA; box-shadow: 0 0 0 1px rgba(10, 17, 40, .25); pointer-events: none; }
.cmp-knob { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #F5F1EA; color: #0A1128; font-weight: 700; font-size: 1.1rem; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); white-space: nowrap; }
.cmp-lab { position: absolute; top: 14px; padding: 6px 14px; border-radius: 999px; background: rgba(10, 17, 40, .82); color: #F5F1EA; font-weight: 700; font-size: .9rem; pointer-events: none; }
.cmp-lab.l { left: 14px; } .cmp-lab.r { right: 14px; }
.cmp input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent; }
.cmp input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 60px; height: 100vh; }
.cmp input[type="range"]::-moz-range-thumb { width: 60px; height: 100vh; border: 0; }
.cmp:has(input:focus-visible) .cmp-knob { outline: 3px solid #F5F1EA; outline-offset: 3px; }
.cmp-hint { margin: 10px 0 0; font-size: .9rem; opacity: .85; text-align: center; }
.viewer-stage:has(.cmp:not([hidden])) { grid-template-rows: 1fr auto; }
.crea-badge { position: absolute; left: 12px; bottom: 12px; padding: 6px 12px; border-radius: 999px; background: rgba(10, 17, 40, .85); color: #F5F1EA; font-size: .8rem; font-weight: 700; }