/* Fil de Vigne par Quodao — styles du site (repris à l’identique de la maquette). */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}
/* Layout : un site vitrine en bandes pleine largeur, contenu centré sur 1120 px. Charte Quodao 2022 : gris bleuté + orange en accent, bordeaux réservé aux textiles. */
:root {
  --ink: #2E383E; --ink-2: #5A6468; --bg: #EEEAE2; --paper: #FBFAF6; --cream: #E6DFD3; --sand: #D6CCBB;
  --orange: #6E1E30; --orange-ink: #6E1E30; --wine: #6E1E30; --line: #DCD4C6; --slate-deep: #26333A;
  --f-display: "Barlow Semi Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Barlow", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }
body { background: var(--bg); color: var(--ink); font: 400 15.5px/1.55 var(--f-body); margin: 0 }
h1, h2, h3, .hh { font-family: var(--f-display); margin: 0; text-wrap: balance }
p { margin: 0 }
a { color: inherit }
button { font: inherit; cursor: pointer }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 4px }
.wrap { max-width: 1120px; margin: 0 auto; padding-inline: 20px }
.caps { font-weight: 700; letter-spacing: .02em }
.eyebrow { font: 700 13px/1.2 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2) }
.eyebrow b { color: var(--orange-ink) }
svg.art { display: block; width: 100%; height: 100% }

/* en-tête */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line) }
.top .wrap { display: flex; align-items: center; gap: 24px; min-height: 68px }
.top img { height: 34px; width: auto; display: block }
.top nav { display: flex; gap: 22px; margin-left: auto; font-weight: 600; font-size: 14.5px }
.top nav a { text-decoration: none; color: var(--ink-2); flex: none }
.top nav a:hover { color: var(--ink) }
.btn { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 10px 18px; font: 700 14px/1 var(--f-body); text-decoration: none; background: var(--ink); color: #fff }
.btn:hover { background: var(--slate-deep) }
.btn.alt { background: var(--orange); color: var(--slate-deep) }
.btn.alt:hover { background: #FFB02E }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink) }
@media (max-width: 960px) { .top .wrap { flex-wrap: wrap; row-gap: 6px; padding-block: 8px } .top nav { order: 3; width: 100%; margin-left: 0; overflow-x: auto; gap: 18px; white-space: nowrap; padding-bottom: 6px; scrollbar-width: none } .top .btn { margin-left: auto } }
@media (max-width: 760px) { .top .btn { padding: 10px 14px; font-size: 14px } }

/* hero */
.hero .wrap { display: grid; grid-template-columns: 1.08fr .92fr; gap: 40px; align-items: center; padding-block: 64px 56px }
.hero :is(h1, .hh) { font-size: clamp(34px, 4.6vw, 56px); line-height: .98; font-weight: 800; letter-spacing: -.01em; margin-top: 14px }
.hero :is(h1, .hh) em { font-style: normal; color: var(--wine); display: block }
.hero .lead { font-size: 17px; max-width: 34em; margin-top: 22px }
.badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px }
.badge { display: inline-flex; align-items: center; gap: 8px; background: var(--cream); border-radius: 999px; padding: 7px 14px; font-size: 14.5px; font-weight: 600 }
.badge i { width: 20px; height: 13px; border-radius: 2px; background: linear-gradient(90deg, #1E3A8A 33%, #fff 33% 66%, #D72638 66%); box-shadow: 0 0 0 1px #d8d8d8; flex: none }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px }
.collage { position: relative; aspect-ratio: 1 / 1.08; max-width: 100%; background: var(--cream); border-radius: 28px }
.collage figure { position: absolute; margin: 0; background: #FBF7EF; border: 1px solid #D9C9A8; padding: 3% 3% 0; box-shadow: 0 12px 28px rgba(38,51,58,.2) }
.collage img { width: 100%; display: block; object-fit: cover }
.collage figcaption { text-align: center; padding: 9px 4px 11px; display: grid; gap: 2px }
.collage figcaption b { font: 700 12.5px/1.2 Georgia, "Times New Roman", serif; letter-spacing: .18em; text-transform: uppercase; color: var(--wine) }
.collage figcaption b::before, .collage figcaption b::after { content: "—"; margin: 0 .5em; color: #C9B48F; font-weight: 400 }
.collage figcaption u { text-decoration: none; font: 600 13px/1.25 Georgia, "Times New Roman", serif; color: var(--ink) }
.collage figcaption i { font: italic 12.5px/1.3 Georgia, "Times New Roman", serif; color: var(--ink-2) }
.collage .ph1 { left: 4%; top: 6%; width: 54%; transform: rotate(-4deg); z-index: 1 }
.collage .ph1 img { aspect-ratio: 27 / 17 }
.collage .ph3 { right: 4%; top: 3%; width: 37%; transform: rotate(5deg); z-index: 2 }
.collage .ph3 figcaption b { letter-spacing: .1em } .collage .ph3 figcaption b::before, .collage .ph3 figcaption b::after { display: none }
.collage .ph3 img { aspect-ratio: 20 / 21; object-position: 50% 15% }
.collage .ph2 { left: 17%; bottom: 3.5%; width: 58%; transform: rotate(-1.5deg); z-index: 3 }
.collage .ph2 img { aspect-ratio: 25 / 14 }
@media (max-width: 860px) { .collage { max-width: 480px; width: 100%; margin: 0 auto } }
@media (max-width: 480px) { .collage figcaption u { font-size: 11px } .collage figcaption b { font-size: 10px; letter-spacing: .1em } .collage figcaption i { font-size: 10.5px } .collage figcaption b::before, .collage figcaption b::after { display: none } }
.stage { position: relative; aspect-ratio: 1 / .92; max-width: 100% }
.stage::before { content: ""; position: absolute; inset: 6% 2% 0 8%; background: var(--cream); border-radius: 46% 54% 50% 50% / 52% 46% 54% 48% }
.stage svg { position: absolute }
.stage .a1 { left: 0; top: 8%; width: 58%; height: 58% }
.stage .a2 { left: 30%; top: 22%; width: 68%; height: 68% }
.stage .a3 { left: 4%; top: 64%; width: 30%; height: 30% }
@media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr; padding-block: 40px 32px } .stage { max-width: 420px; width: 100%; margin: 0 auto } }

/* clients */
.trust { border-block: 1px solid var(--line) }
.trust .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; padding-block: 18px }
.trust .eyebrow { color: var(--wine) }
.trust ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px }
.trust li { font: 700 17px/1.2 var(--f-display); white-space: nowrap }
.trust li.more { font: italic 400 15px var(--f-body); color: var(--ink-2) }

/* inspirations */
section.block { padding-block: 72px }
.head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 28px }
.head :is(h1, h2) { font-size: clamp(26px, 3vw, 36px); font-weight: 800; line-height: 1.02 }
.head p { color: var(--ink-2); max-width: 36em; margin-top: 10px }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px }
.shop { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 26px; align-items: start }
.shop.nofilters { grid-template-columns: minmax(0, 1fr) }
.shop.nofilters .sfilters { display: none }
.sfilters { position: sticky; top: 90px; background: var(--paper); border: 1.5px solid var(--line); border-radius: 18px; padding: 14px 16px 10px; max-height: calc(100vh - 110px); overflow: auto }
.sf-head { display: none; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 18px }
.sf-close { border: 0; background: var(--cream); width: 34px; height: 34px; border-radius: 50%; font-size: 20px }
.sf-clear { width: 100%; border: 1.5px solid var(--line); background: var(--paper); border-radius: 999px; padding: 8px 12px; font-weight: 600; font-size: 13.5px; color: var(--ink-2); margin-bottom: 6px; cursor: pointer }
.sf-sec { border-bottom: 1px solid var(--line); padding: 10px 0 }
.sf-sec:last-of-type { border-bottom: 0 }
.sf-sec > summary { list-style: none; cursor: pointer; font-weight: 800; font-size: 15px; display: flex; justify-content: space-between; align-items: center }
.sf-sec > summary::-webkit-details-marker { display: none }
.sf-sec > summary::after { content: "⌃"; font-size: 14px; transform: rotate(180deg); transition: transform .15s; color: var(--ink-2) }
.sf-sec[open] > summary::after { transform: none }
.sf-body { display: grid; gap: 2px; padding-top: 8px }
.sf-link { text-align: left; border: 0; background: none; padding: 5px 6px; border-radius: 8px; font-size: 14px; color: var(--ink); cursor: pointer }
.sf-link small, .sf-chk small { color: var(--ink-2); font-size: 12.5px }
.sf-link:hover { background: var(--cream) }
.sf-link.on { font-weight: 700; color: var(--wine, #6E1E30); background: var(--cream) }
.sf-link.sub { padding-left: 20px; font-size: 13.5px }
.sf-chk { display: flex; align-items: center; gap: 8px; padding: 4px 4px; font-size: 14px; cursor: pointer }
.sf-chk input { width: 17px; height: 17px; accent-color: var(--wine, #6E1E30) }
.sf-chk.off { opacity: .45 }
.sf-price { display: flex; align-items: center; gap: 6px }
.sf-price input { width: 72px; font: 15px var(--f-body); border: 1.5px solid var(--line); border-radius: 8px; padding: 6px 8px; text-align: right; background: var(--paper); color: var(--ink) }
.sf-price .eu { color: var(--ink-2) }
.sf-cols { display: flex; flex-wrap: wrap; gap: 8px }
.sf-col { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--line); padding: 3px; background: var(--paper); cursor: pointer }
.sf-col i { display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12) }
.sf-col[aria-pressed="true"] { border-color: var(--wine, #6E1E30); box-shadow: 0 0 0 2px var(--wine, #6E1E30) }
.sf-see { display: none }
.sbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; font-size: 14px }
.sb-toggle { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; font-weight: 700; font-size: 14px; color: var(--ink); cursor: pointer; padding: 6px 0 }
.sb-toggle .m { display: none }
.sb-sort { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: var(--ink-2) }
.sb-sort select { font: 600 14px var(--f-body); border: 1.5px solid var(--line); border-radius: 999px; padding: 6px 12px; background: var(--paper); color: var(--ink) }
.sb-n { font-weight: 700 }
.shop .grid { grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)) }
@media (max-width: 899px) {
  .shop, .shop.nofilters { grid-template-columns: minmax(0, 1fr) }
  .shop .sfilters, .shop.nofilters .sfilters { display: none }
  .shop.sf-open .sfilters { display: block; position: fixed; inset: 0 auto 0 0; top: 0; width: min(88vw, 360px); max-height: none; height: 100%; z-index: 1001; border-radius: 0 18px 18px 0; padding: 16px 18px 90px; box-shadow: 0 0 0 100vmax rgba(20,24,28,.45) }
  .sf-head { display: flex }
  .sf-see { display: block; position: sticky; bottom: 0; width: 100%; margin-top: 12px }
  .sb-toggle { border: 1.5px solid var(--line); border-radius: 999px; padding: 7px 14px; background: var(--paper) }
  .sb-toggle .d { display: none } .sb-toggle .m { display: inline }
  .sb-sort span { display: none }
  .sb-n { width: 100%; order: 3; font-size: 13px; color: var(--ink-2) }
}
body.sf-lock { overflow: hidden }
.tagsedit { display: grid; gap: 8px } .tagsedit fieldset { margin: 0 }
.famnav { margin-bottom: 22px }
.famnav[hidden] { display: none }
.ftiles-wrap { position: relative }
.ftiles { display: flex; gap: 13px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 6px }
.ftiles::-webkit-scrollbar { display: none }
.ftiles.sub { gap: 12px; margin-top: 14px; padding: 12px; background: var(--cream); border-radius: 18px }
.ftile-w { position: relative; flex: 0 0 auto; scroll-snap-align: start }
.ftile { flex: 0 0 auto; scroll-snap-align: start; display: grid; gap: 10px; justify-items: center; width: 120px; border: 0; background: none; padding: 0; color: var(--ink); cursor: pointer; text-align: center }
.ftile.small { width: 90px; gap: 6px }
.ftile .ft-img { display: block; width: 100%; aspect-ratio: 5 / 6; border-radius: 21px; overflow: hidden; background: #ebe3d6; box-shadow: 0 0 0 2px transparent; transition: box-shadow .15s, transform .15s }
.ftile.small .ft-img { border-radius: 16px; aspect-ratio: 1 }
.ftile .ft-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block }
.ftile .ft-ph { display: grid; place-items: center; height: 100%; font: 800 34px var(--f-head, inherit); color: var(--ink-2) }
.ftile .ft-l { font-weight: 700; font-size: 13.5px; line-height: 1.25 }
.ftile.small .ft-l { font-size: 12.5px }
.ftile .ft-l .n { color: var(--ink-2); font-weight: 600 }
.ftile:hover .ft-img { transform: translateY(-2px) }
.ftile[aria-pressed="true"] .ft-img { box-shadow: 0 0 0 3px var(--wine, #6E1E30) }
.ftile[aria-pressed="true"] .ft-l { color: var(--wine, #6E1E30) }
.ft-edit { position: absolute; top: 8px; right: 8px; padding: 4px 8px }
.ft-arrow { position: absolute; top: 38%; transform: translateY(-50%); z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(40,44,48,.55); color: #fff; font-size: 28px; line-height: 1; display: grid; place-items: center; cursor: pointer }
.ft-arrow.prev { left: -8px } .ft-arrow.next { right: -8px }
.ft-arrow[hidden] { display: none }
@media (max-width: 680px) { .ftile { width: 96px } .ftile .ft-img { border-radius: 17px } .ftile .ft-l { font-size: 13px } .ftile.small { width: 80px } .ft-arrow { display: none } }
.subchips { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; padding: 8px 10px; background: var(--cream); border-radius: 14px }
.chip.sub { padding: 5px 12px; font-size: 13px; background: var(--paper) }
.chip .dd { margin-left: 5px; font-size: 11px; opacity: .7 }
.chip { border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 999px; padding: 7px 14px; font-weight: 600; font-size: 14px }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff }
.chip .n { font-size: 12.5px; font-weight: 700; opacity: .6 }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 22px }
.card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; min-width: 0 }
.card .media { position: relative; aspect-ratio: 4 / 3.4; background: var(--cream); display: grid; place-items: center; overflow: hidden }
.card .media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block }
.card .media svg { width: 64%; height: 64% }
.fr { position: absolute; bottom: 10px; right: 10px; display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.92); border-radius: 999px; padding: 3px 8px 3px 6px; font-size: 11px; font-weight: 700; line-height: 1.2; box-shadow: 0 1px 4px rgba(38,51,58,.15) }
.realb { position: absolute; top: 10px; left: 10px; background: var(--wine); color: #fff; border-radius: 999px; padding: 3px 9px; font-size: 11.5px; font-weight: 700; line-height: 1.3; box-shadow: 0 1px 4px rgba(0,0,0,.2) }
.fr i { width: 13px; height: 9px; border-radius: 2px; background: linear-gradient(90deg, #1E3A8A 33%, #fff 33% 66%, #D72638 66%); box-shadow: 0 0 0 1px #ddd }
.card .body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1 }
.card h3 { font-size: 19px; font-weight: 700; line-height: 1.1 }
.cprice { font-size: 13.5px; color: var(--ink-2) } .cprice.note { font-weight: 600; color: var(--wine) } .price.small { font-size: 16px; color: var(--wine) } .cprice b { font: 700 17px var(--f-display); color: var(--wine) }
.card .desc { color: var(--ink-2); font-size: 14.5px; line-height: 1.5 }
.card .meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px }
.tag { font-size: 12.5px; font-weight: 600; padding: 3px 9px; border-radius: 6px; background: var(--cream); color: var(--ink) }
.tag.perso { background: transparent; box-shadow: inset 0 0 0 1px var(--sand); color: var(--ink-2) }
.card .want { margin-top: auto; padding-top: 10px; align-self: flex-start; background: none; border: 0; padding-inline: 0; font-weight: 700; color: var(--wine); font-size: 15px; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px }
.empty { grid-column: 1 / -1; border: 1.5px dashed var(--sand); border-radius: 18px; padding: 40px 20px; text-align: center; color: var(--ink-2) }

/* plus */
.plus { background: var(--cream) }
.rows { display: grid; gap: 18px }
.row { display: grid; grid-template-columns: 76px 1fr 120px; gap: 26px; align-items: center; background: var(--paper); border-radius: 20px; padding: 24px 28px }
.row .n { font: 800 38px/1 var(--f-display); color: var(--orange) }
.row h3 { font-size: 21px; font-weight: 700; margin-bottom: 6px }
.row p { color: var(--ink-2) }
.row .pic { width: 110px; height: 110px; justify-self: end }
@media (max-width: 680px) { .row { grid-template-columns: 1fr; gap: 10px; padding: 22px } .row .pic { display: none } .row .n { font-size: 36px } }

/* étapes */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 28px; margin-top: 8px; counter-reset: s; list-style: none; padding: 0 }
.steps li { border-top: 3px solid var(--ink); padding-top: 16px }
.steps b { display: block; font: 700 19px/1.15 var(--f-display); margin-bottom: 6px }
.steps b::before { counter-increment: s; content: counter(s) ". "; color: var(--orange-ink) }
.steps p { color: var(--ink-2) }

/* équipe */
.team { display: grid; margin-top: 56px; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: center }
.team img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 22px; display: block }
.team h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 800; line-height: 1.04; margin-bottom: 14px }
.team p { color: var(--ink-2) }
@media (max-width: 860px) { .team { grid-template-columns: 1fr; gap: 26px } }

/* contact */
.contact { background: var(--ink); color: #fff }
.contact .wrap { display: grid; grid-template-columns: 1fr auto; gap: 36px; align-items: center; padding-block: 64px }
.contact h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; line-height: 1 }
.contact .who { margin-top: 12px; color: #D7DEE2 }
.contact .hint { margin-top: 18px; background: rgba(255,255,255,.08); border-left: 3px solid var(--orange); padding: 10px 14px; border-radius: 0 8px 8px 0; color: #fff; max-width: 34em }
.lines { display: grid; gap: 12px; min-width: 0 }
.line { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.07); border-radius: 14px; padding: 12px 14px; min-width: 0 }
.line svg { width: 22px; height: 22px; flex: none }
.line span, .line a { font-weight: 600; font-size: 15.5px; user-select: all; overflow-wrap: anywhere; color: #fff; text-decoration: none }
.line button { margin-left: auto; background: transparent; border: 1px solid rgba(255,255,255,.35); color: #fff; border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 600 }
.line button:hover { border-color: var(--orange) }
@media (max-width: 760px) { .contact .wrap { grid-template-columns: 1fr } }
a.line { text-decoration: none; transition: background .15s } a.line:hover, a.line:focus-visible { background: rgba(255,255,255,.14) } a.line span { user-select: auto }
footer { background: var(--slate-deep); color: #AEBBC2; font-size: 14px }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-block: 18px }
.stripe { height: 6px; background: var(--orange) }

/* mode édition (visible seulement pour Quodao) */
.admin-fab { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 20; box-shadow: 0 8px 22px rgba(38,51,58,.28) }
.pending { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 21; background: var(--slate-deep); color: #fff; border-radius: 16px; padding: 10px 10px 10px 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.3); max-width: calc(100% - 32px) }
.pending .btn { padding: 9px 16px; font-size: 14px }
.pending .btn.ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5) }
.tools { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; border-top: 1px dashed var(--sand); background: #FBF8F3 }
.tools button { border: 1px solid var(--line); background: var(--paper); border-radius: 8px; padding: 5px 10px; font-size: 13.5px; font-weight: 600; color: var(--ink) }
.tools button.danger { color: #A3261F }
.tools button.bstar.on { background: #F6E7C8; border-color: #D9B464; color: #7A5418 }
.best-hint { margin: -6px 0 12px; color: var(--wine) }
.tools button.danger.armed { background: #A3261F; color: #fff; border-color: #A3261F }
.dragc { cursor: grab } .dragc.dragging { opacity: .4 }
.dragc.drop-before { box-shadow: -5px 0 0 var(--orange) } .dragc.drop-after { box-shadow: 5px 0 0 var(--orange) }
.addcard { border: 2px dashed var(--sand); border-radius: 18px; background: var(--paper); min-height: 260px; display: grid; place-items: center; text-align: center; color: var(--ink); font: 700 20px var(--f-display) }
.addcard span { display: block; font: 400 14px var(--f-body); color: var(--ink-2); margin-top: 6px }
.modal { position: fixed; inset: 0; z-index: 30; background: rgba(38,51,58,.55); display: grid; place-items: center; padding: 16px }
.sheet { background: var(--paper); border-radius: 20px; width: min(560px, 100%); max-height: calc(100% - 20px); overflow: auto; padding: 24px; display: grid; gap: 14px }
.sheet h3 { font-size: 22px }
.sheet label { display: grid; gap: 6px; font-weight: 600; font-size: 14px; color: var(--ink-2) }
.sheet input[type=text], .sheet textarea, .sheet select { font: 16px var(--f-body); color: var(--ink); border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; width: 100%; background: var(--paper) }
.sheet textarea { min-height: 84px; resize: vertical }
.sheet fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px }
.sheet legend { font-weight: 600; font-size: 14px; color: var(--ink-2); margin-bottom: 6px; padding: 0 }
.check { display: inline-flex !important; grid-auto-flow: column; align-items: center; gap: 8px; background: var(--cream); border-radius: 999px; padding: 6px 12px; color: var(--ink) !important; font-weight: 600 }
.photo { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: center }
.photo .prev { width: 120px; aspect-ratio: 4 / 3.4; border-radius: 12px; background: var(--cream); overflow: hidden; display: grid; place-items: center }
.photo .prev img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20% }
.photo .prev svg { width: 70%; height: 70% }
.sheet .acts { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap }
.toast { position: fixed; left: 50%; transform: translateX(-50%); top: calc(84px + env(safe-area-inset-top, 0px)); z-index: 40; background: var(--slate-deep); color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 600; font-size: 15px; max-width: calc(100% - 32px) }
.restore { background: #FFF4DE; border-bottom: 1px solid #F1D49B }
.restore .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-block: 10px; font-size: 15px }
.view-off { display: none !important }
.cartbtn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 15px; margin-left: 4px; white-space: nowrap }
.cartbtn svg { width: 20px; height: 20px; color: var(--wine); flex: none }
#cartcount { background: var(--orange); color: var(--slate-deep); border-radius: 999px; font-size: 12px; padding: 1px 7px }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--ink-2); margin-bottom: 18px }
.crumbs a { color: var(--ink-2) }
.price { font: 700 19px var(--f-display); color: var(--ink) }
.more { color: var(--wine); font-weight: 600; font-size: 15px }
.pd-perks { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 6px; font-size: 14.5px; color: var(--ink-2) }
.pd-perks li::before { content: "✓ "; color: var(--orange-ink); font-weight: 700 }
.step { display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 16px }
.step h2 { font: 700 17px/1.2 var(--f-display) }
.fine { font-size: 13.5px; color: var(--ink-2) }
.swatches.big .sw { width: 30px; height: 30px }
.clines { display: grid; gap: 10px }
.cline.active { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange) }
.cn[role=button] { cursor: pointer }
.addcolor { justify-self: start }
.swatches.big .sw.active { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--orange) }
.cline { border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: grid; gap: 10px }
.chead { display: flex; align-items: center; gap: 8px }
.chead i, .citem li i { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(38,51,58,.25); display: inline-block; flex: none }
.chead .cnt, .citem .cnt { margin-left: auto; font-size: 13.5px; color: var(--ink-2) }
.x { border: 0; background: var(--cream); width: 28px; height: 28px; border-radius: 50%; font-size: 16px; line-height: 1; color: var(--ink) }
.sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px 8px }
.szc { display: grid; gap: 4px }
.szc label { font: 700 14px var(--f-body); color: var(--ink) }
.stepper { display: grid; grid-template-columns: 26px 1fr 26px; align-items: center; border: 1.5px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--paper) }
.stepper button { border: 0; background: var(--cream); height: 36px; font-size: 16px; color: var(--ink); padding: 0 }
.stepper input { border: 0 !important; border-radius: 0 !important; padding: 7px 0 !important; -moz-appearance: textfield }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 }
@keyframes flash { from { box-shadow: 0 0 0 3px var(--orange) } to { box-shadow: 0 0 0 3px transparent } }
.cline.flash { animation: flash 1.4s ease-out }
@media (prefers-reduced-motion: reduce) { .cline.flash { animation: none; box-shadow: 0 0 0 2px var(--orange) } }
.thumb { width: 44px; height: 44px; border-radius: 10px; background: var(--cream); display: grid; place-items: center; overflow: hidden; flex: none }
.thumb svg { width: 80%; height: 80% }
.thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20% }
.cn { display: grid; gap: 3px; justify-items: start; min-width: 0 }
.pill { background: var(--cream); border-radius: 6px; padding: 2px 8px; font-size: 12.5px; font-weight: 700 }
.chev, .trash { border: 0; background: none; font-size: 16px; color: var(--ink); padding: 4px; cursor: pointer }
.chev { width: 32px; height: 32px; border-radius: 50%; background: var(--cream); font-size: 20px; line-height: 1; display: grid; place-items: center; padding: 0; flex: none }
.chev:hover { background: var(--sand) }
.trash { margin-left: auto }
.swatches.big .sw { position: relative }
.swatches.big .sw[aria-pressed="true"]::after { content: "✓"; position: absolute; right: -5px; bottom: -5px; width: 15px; height: 15px; border-radius: 50%; background: var(--orange); color: var(--slate-deep); font-size: 10px; font-weight: 800; display: grid; place-items: center; line-height: 1 }
.szp { display: block; font-size: 11px; font-weight: 600; color: var(--ink-2) }
.sizes label { display: grid; gap: 3px; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--ink-2) }
.sizes input { width: 100%; min-width: 0; font: 16px var(--f-body); text-align: center; border: 1.5px solid var(--line); border-radius: 8px; padding: 7px 4px; color: var(--ink); background: var(--paper) }
.sizes input:focus { border-color: var(--ink) }
.zones { display: grid; gap: 8px }
.gmark { display: grid; grid-template-columns: 76px 1fr; gap: 6px 12px; align-items: start; padding: 10px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--paper) }
.gmark > .fine { grid-column: 2; margin: 0 }
.gpimg { display: block; width: 76px; height: 76px; border-radius: 8px; overflow: hidden; background: var(--cream) }
.gpimg img { width: 100%; height: 100%; object-fit: cover; display: block }
.gmark { position: relative; padding-right: 44px }
.gx { position: absolute; top: 8px; right: 8px }
.gzone { grid-template-columns: 1.3fr 1.1fr .8fr }
.gcol { display: grid; gap: 4px; align-content: start; font-size: 12.5px; font-weight: 700; color: var(--ink-2) }
.gcol b { display: block; font: 600 14px var(--f-body); color: var(--ink); padding: 9px 0 }
@media (max-width: 680px) { .gmark { grid-template-columns: 56px 1fr } .gpimg { width: 56px; height: 56px } .gzone { grid-template-columns: 1fr } }
.zone { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 8px; align-items: end }
.zone label, .qform label { display: grid; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); min-width: 0 }
.zone select, .qform input, .qform textarea { font: 15px var(--f-body); border: 1.5px solid var(--line); border-radius: 8px; padding: 8px; color: var(--ink); background: var(--paper); width: 100% }
.addzone { justify-self: start; border: 1.5px dashed var(--sand); background: var(--paper); border-radius: 999px; padding: 7px 14px; font-weight: 600; font-size: 14px; color: var(--ink) }
@media (max-width: 560px) { .zone { grid-template-columns: 1fr 1fr; } .zone label:first-child { grid-column: 1 / -1 } }
.sumbox { background: var(--cream); border: 0; border-radius: 16px; padding: 16px }
.csum { display: grid; grid-template-columns: 1.3fr .8fr 1fr 1.2fr; gap: 10px }
.csum .tot b { color: var(--wine) }
@media (max-width: 520px) { .csum { grid-template-columns: 1fr 1fr } }
.csum div { display: grid; gap: 2px }
.csum span { font-size: 12.5px; color: var(--ink-2); font-weight: 600 }
.csum b { font: 700 19px var(--f-display) }
.csum b.small { font-size: 17px; line-height: 1.3 }
.csum .fine { grid-column: 1 / -1 }
.added { font-weight: 600 }
.added a { color: var(--wine) }
.pd-specs { margin-top: 56px; display: grid; gap: 18px; max-width: 760px }
.pd-specs h2 { font-size: 24px; font-weight: 800 }
.cartgrid { display: grid; grid-template-columns: 1.3fr .9fr; gap: 32px; align-items: start }
@media (max-width: 860px) { .cartgrid { grid-template-columns: 1fr } }
.citems { display: grid; gap: 12px }
.citem { border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: grid; gap: 8px }
.citem-h { display: flex; align-items: center; gap: 10px }
.citem-h a { font: 700 18px var(--f-display); color: var(--ink); text-decoration: none }
.citem ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 15px }
.citem li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap }
.ctot { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: end; gap: 6px 28px; background: var(--cream); border-radius: 14px; padding: 14px 16px }
.ctot div { display: grid; gap: 2px } .ctot span { font-size: 12.5px; color: var(--ink-2); font-weight: 600 }
.ctot b { font: 700 19px var(--f-display) } .ctot .big b { font-size: 24px; color: var(--wine) } .ctot .fine { flex-basis: 100% }
.cprix { display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: 14px; color: var(--ink-2) } .cprix b { color: var(--ink); font-weight: 700; margin-left: 4px }
.ctot { display: grid; gap: 12px; align-items: stretch }
.ctot-q { display: flex; justify-content: space-between; align-items: baseline }
.ctot-t { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums }
.ctot-t th { text-align: left; font-weight: 500; color: var(--ink-2); padding: 4px 0 }
.ctot-t td { text-align: right; font-weight: 700; white-space: nowrap; padding: 4px 0 4px 12px }
.ctot-t tr.rem td { color: var(--wine) }
.ctot-t tr.tot th, .ctot-t tr.tot td { color: var(--ink); font-weight: 800; border-top: 1px solid var(--sand); padding-top: 8px }
.ctot-t tr.tot:last-child td { font-size: 18px; color: var(--wine) }
.promo { display: grid; gap: 6px; border-top: 1px dashed var(--sand); padding-top: 10px }
.promo label { font-size: 12.5px; font-weight: 700; color: var(--ink-2) }
.promo-row { display: flex; gap: 8px } .promo-row input { flex: 1; min-width: 0; font: 15px var(--f-body); border: 1.5px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--paper); color: var(--ink); text-transform: none }
.promo.on { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-weight: 600; color: var(--wine) }
.linkbtn { background: none; border: 0; padding: 0; color: var(--ink-2); text-decoration: underline; font: 600 13px var(--f-body); cursor: pointer }
.csum .paliers { grid-column: 1 / -1 } .paliers td:first-child { white-space: nowrap } .ctot > .ctot-q { display: flex; justify-content: space-between; align-items: baseline }
.paliers { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: 13px }
.paliers summary { cursor: pointer; font-weight: 600; color: var(--wine) }
.paliers table { width: 100%; border-collapse: collapse; margin-top: 6px; font-variant-numeric: tabular-nums }
.paliers td { padding: 3px 0; color: var(--ink-2) } .paliers td + td { text-align: right; font-weight: 600; color: var(--ink) }
.paliers tr.on td { color: var(--wine); font-weight: 800 }
.from-note { margin-top: -6px }
.qform { background: var(--cream); border-radius: 18px; padding: 18px; display: grid; gap: 10px }
.dgrid { display: grid; grid-template-columns: 1.5fr .9fr; gap: 32px; align-items: start }
@media (max-width: 860px) { .dgrid { grid-template-columns: 1fr } }
.dform { background: var(--cream); border-radius: 20px; padding: 22px; display: grid; gap: 14px; min-width: 0 }
.drow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
@media (max-width: 560px) { .drow { grid-template-columns: 1fr } }
.dform label { display: grid; gap: 6px; font-weight: 700; font-size: 14px; color: var(--ink); min-width: 0 }
.dform input, .dform textarea { font: 16px var(--f-body); color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: 10px; padding: 11px 12px; width: 100% }
.dform textarea { resize: vertical; min-height: 140px }
.dform input:focus, .dform textarea:focus { border-color: var(--ink); outline: none }
.dform [aria-invalid="true"] { border-color: #A3261F }
.dform .btn { justify-self: start }
.req { color: var(--orange-ink) }
.dside { display: grid; gap: 10px; background: var(--ink); color: #fff; border-radius: 20px; padding: 22px }
.dside h3 { font: 700 21px var(--f-display) }
.dside .who { color: #D7DEE2; margin-bottom: 4px }
.dline { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.08); border-radius: 12px; padding: 11px 14px; color: #fff; text-decoration: none; font-weight: 600; overflow-wrap: anywhere }
.dline:hover { background: rgba(255,255,255,.14) }
.dline svg { width: 22px; height: 22px; flex: none }
.qform h3, .qout h3 { font: 700 19px var(--f-display) }
.qout { margin-top: 28px; display: grid; gap: 12px; border-top: 1px solid var(--line); padding-top: 22px }
.qout pre { white-space: pre-wrap; background: var(--cream); border-radius: 12px; padding: 14px; font: 14px/1.5 ui-monospace, Menlo, Consolas, monospace; margin: 0; overflow-x: auto }
.specedit { display: grid; gap: 8px }
.specrow { display: grid; grid-template-columns: minmax(110px, .8fr) 1.6fr auto auto auto; gap: 6px; align-items: start }
.specrow textarea { resize: none; overflow: hidden; line-height: 1.35 }
.specrow input, .specrow textarea { font: 15px var(--f-body); border: 1.5px solid var(--line); border-radius: 8px; padding: 8px 10px; color: var(--ink); background: var(--paper); width: 100%; min-width: 0 }
.specrow .mini { border: 1px solid var(--line); background: var(--paper); border-radius: 8px; width: 32px; height: 36px; color: var(--ink); font-weight: 700 }
.specrow .mini.danger { color: #A3261F }
.specrow .mini:disabled { opacity: .35 }
@media (max-width: 560px) { .specrow { grid-template-columns: 1fr auto auto auto } .specrow input:first-child { grid-column: 1 / -1 } }
.pd-specs.editing { background: var(--paper); border: 1.5px dashed var(--sand); border-radius: 18px; padding: 20px }
.card-top { position: relative }
.pgal { display: flex; align-items: center; gap: 10px; margin-top: 12px }
.gth { width: 84px; height: 72px; padding: 0; border: 2px solid var(--line); border-radius: 12px; background: var(--cream); overflow: hidden; cursor: pointer; display: grid; place-items: center; flex: none }
.gth img { width: 100%; height: 100%; object-fit: cover }
.gth > svg:not(.ph) { width: 70%; height: 70% }
.gth[aria-pressed="true"] { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange) }
.gname { font-size: 14px; color: var(--ink-2); font-weight: 600 }
svg.ph { width: 100% !important; height: 100% !important; display: block }
.lsheet { width: min(720px, 100%) }
.lstage { width: 100%; height: auto; aspect-ratio: 800 / 680; background: var(--cream); border-radius: 14px; touch-action: none; cursor: crosshair; display: block }
.lstage .lmark { cursor: grab }
.lopts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.lopts .sw { width: 30px; height: 30px }
.lopts input[type=color] { width: 40px; height: 32px; padding: 2px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--paper) }
.lrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.lnudge { display: flex; gap: 6px }
.lnudge .mini { border: 1px solid var(--line); background: var(--paper); border-radius: 8px; width: 36px; height: 34px; font-size: 16px; color: var(--ink) }
.thumbedit { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; flex-wrap: wrap; gap: 6px; z-index: 2 }
.tbtn { display: inline-flex; align-items: center; border: 0; background: var(--slate-deep); color: #fff; border-radius: 999px; padding: 7px 12px; font: 600 13px var(--f-body); cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.2) }
.tbtn:hover { background: var(--ink) }
.media-link { display: block; color: inherit }
.media-link:hover .media { filter: brightness(.97) }
.plink { color: inherit; text-decoration: none }
.plink:hover { text-decoration: underline; text-underline-offset: 4px }
.links { margin-top: auto; padding-top: 10px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center }
.links .want { margin-top: 0; padding-top: 0 }
.want.soft { color: var(--ink-2) }
#produit { padding-block: 40px 72px }
.backlink { display: inline-block; margin-bottom: 18px; color: var(--ink-2); text-decoration: none; font-weight: 600 }
.backlink:hover { color: var(--ink) }
.pd { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: start }
.pd-media .media { aspect-ratio: 1 / 1; border-radius: 22px; position: relative; background: var(--cream); display: grid; place-items: center; overflow: hidden }
.pd-media .media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20% }
.pd-media .media svg { width: 66%; height: 66% }
@media (min-width: 861px) { .pd-media { position: sticky; top: calc(90px + env(safe-area-inset-top, 0px)) } }
.pd-info { display: grid; gap: 16px; min-width: 0 }
.pd-info h1 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.1 !important; font-weight: 800; line-height: 1 }
.pd-info .lead { font-size: 15.5px; color: var(--ink-2) }
.genre { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 4px 0 14px; padding: 9px 12px; border: 1px solid var(--line, rgba(0,0,0,.12)); border-radius: 10px; font-size: 14px }
.gtag { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-style: normal }
.gtag i, i.gtag { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font: 700 14px/1 system-ui, sans-serif; font-style: normal; color: #fff; background: #555 }
.g-h i, i.g-h { background: #1F2A44 } .g-f i, i.g-f { background: #8C2F4B } .g-u i, i.g-u { background: #2F4A35 } .g-enfant i, i.g-enfant { background: #B8862E }
.genre .fine { margin: 0 }
.glink { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--wine); text-decoration: none; margin-left: 4px }
.glink:hover { text-decoration: underline }
.pd-info .swatches { gap: 8px }
.pd-info .sw { width: 28px; height: 28px }
.pd-h { font: 700 15px/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px }
.specs { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; border-top: 1px solid var(--line); padding-top: 12px }
.specs dt { font-weight: 700 }
.specs dd { margin: 0; color: var(--ink-2) }
.specs dd.full { grid-column: 1 / -1 }
.pd-note { background: var(--cream); border-radius: 12px; padding: 12px 14px; font-size: 15.5px }
@media (max-width: 860px) { .pd { grid-template-columns: 1fr; gap: 24px } .specs { grid-template-columns: 1fr; gap: 2px } .specs dd { margin-bottom: 8px } }
[hidden] { display: none !important }
.colors { display: grid; gap: 6px; margin-top: 2px }
.cname { font-size: 13.5px; color: var(--ink-2) }
.cname b { color: var(--ink); font-weight: 600 }
.swatches { display: flex; flex-wrap: wrap; gap: 7px }
.sw { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(38,51,58,.22); padding: 0; cursor: pointer; box-shadow: 0 0 0 2px var(--paper) }
.more-sw { height: 24px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: 600 12.5px var(--f-body); padding: 0 9px; cursor: pointer }
.sw[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink) }
.colsedit { display: grid; gap: 10px; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px }
.colsedit .title { font-weight: 600; font-size: 14px; color: var(--ink-2) }
.collist, .presets { display: flex; flex-wrap: wrap; gap: 6px }
.colchip { display: inline-flex; align-items: center; gap: 6px; background: var(--cream); border-radius: 999px; padding: 4px 6px 4px 5px; font-size: 13.5px; font-weight: 600 }
.colchip i, .preset i { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(38,51,58,.25); display: inline-block; flex: none }
.colchip .mini { border: 0; background: var(--paper); border-radius: 999px; padding: 2px 7px; font-size: 12.5px; cursor: pointer; color: var(--ink) }
.preset { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 4px 10px 4px 6px; font-size: 13px; color: var(--ink) }
.preset[aria-pressed="true"] { border-color: var(--ink) }
.addcol { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.addcol input[type=color] { width: 44px; height: 38px; padding: 2px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--paper) }
.addcol input[type=text] { flex: 1 1 160px; width: auto }
.top nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--orange) }
.atelier { padding-top: 8px }
.pbanner[hidden] { display: none }
.head:has(+ .pbanner:not([hidden]):not(.empty)) p { display: none }
.pbanner { position: relative; margin: 0 0 22px; border-radius: 18px; overflow: hidden; min-height: 190px; display: flex; align-items: flex-end; background: var(--slate-deep, #2f3d44) }
.pbanner .pb-img, .pbanner .pb-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.pbanner .pb-ph { display: block; background: repeating-linear-gradient(45deg, #e9dfcf, #e9dfcf 12px, #efe7da 12px, #efe7da 24px); color: #fff; font-weight: 600; font-size: 13px; padding: 18px 20px; z-index: 2 }
.pbanner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,24,28,.72) 0%, rgba(20,24,28,.45) 45%, rgba(20,24,28,.05) 85%); pointer-events: none }
.pbanner.empty::after { background: linear-gradient(90deg, rgba(20,24,28,.55), rgba(20,24,28,.1)) }
.pbanner .pb-txt { position: relative; z-index: 1; padding: 26px 30px; max-width: 640px; color: #fff }
.pbanner .pb-t { margin: 0 0 6px; font: 800 15px/1.2 var(--f-head, inherit); letter-spacing: .08em; text-transform: uppercase }
.pbanner .pb-d { margin: 0; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.92) }
.pbanner .pb-edit { position: absolute; top: 12px; right: 12px; z-index: 3; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end }
.pbanner .aedit { outline: 1px dashed rgba(255,255,255,.6); outline-offset: 3px; border-radius: 4px }
@media (max-width: 680px) { .pbanner { min-height: 170px; border-radius: 14px } .pbanner .pb-txt { padding: 18px } .pbanner .pb-d { font-size: 14px } .pbanner::after { background: linear-gradient(0deg, rgba(20,24,28,.78) 0%, rgba(20,24,28,.35) 70%, rgba(20,24,28,.1) 100%) } }
.agrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 22px }
.acard { background: #FBF8F3; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column }
.amedia { position: relative; aspect-ratio: 16 / 9.2; background: var(--cream) }
.amedia img { width: 100%; height: 100%; object-fit: cover; display: block }
.aph { width: 100%; height: 100%; display: grid; place-content: center; justify-items: center; gap: 4px; color: var(--ink-2); border-bottom: 1.5px dashed var(--sand) }
.aph span { font-size: 30px; opacity: .55 } .aph small { font-weight: 600; font-size: 13px }
.abody { padding: 16px 18px 18px; display: grid; gap: 10px; align-content: start; flex: 1 }
.abody h3 { font: 700 16.5px/1.3 var(--f-body); margin: 0 }
.adate { font-size: 14px; color: var(--ink-2) }
.aedit { outline: 1.5px dashed var(--sand); outline-offset: 3px; border-radius: 4px; cursor: text }
.aedit:focus { outline-color: var(--orange) }
.tiles-wrap { padding-block: 48px 64px }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 18px }
.tile { display: flex; gap: 14px; align-items: center; text-decoration: none; color: var(--ink); background: var(--cream); border-radius: 18px; padding: 16px 18px; min-width: 0 }
.tile:hover { background: var(--sand) }
.tile svg { width: 64px; height: 64px; flex: none }
.tile b { display: block; font: 700 18px/1.1 var(--f-display) }
.tile small { display: block; color: var(--ink-2); font-size: 14px; margin-top: 4px }

/* ===== Version épurée : moins d'espace, tailles plus fines ===== */
body { font-size: 14.5px; line-height: 1.5 }
.wrap { max-width: 1200px }
.top .wrap { min-height: 58px; gap: 20px }
.top img { height: 28px }
.top nav { font-size: 13.5px; gap: 18px }
.cartbtn { font-size: 13.5px }
.btn { padding: 9px 16px; font-size: 13px; font-weight: 600 }
.eyebrow { font-size: 11.5px; letter-spacing: .12em }
.hero .wrap { padding-block: 28px 28px; gap: 36px }
@media (min-width: 861px) { .hero .wrap { grid-template-columns: 1.25fr .75fr } }
@media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr } .collage { margin: 0 auto } }
.hero :is(h1, .hh) { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.02; margin-top: 10px }
.hero .lead { font-size: 15px; margin-top: 14px }
.badges { margin-top: 16px; gap: 8px } .badge { font-size: 13px; padding: 5px 12px }
.hero .ctas { margin-top: 20px; gap: 10px }
.collage { width: 100%; max-width: 400px; margin-left: auto }
.trust .wrap { padding-block: 10px; gap: 10px 24px } .trust li { font-size: 15px } .trust li.more { font-size: 13.5px }
section.block { padding-block: 44px }
.tiles-wrap { padding-block: 28px 20px }
.tiles { gap: 12px } .tile { padding: 12px 14px; border-radius: 12px; gap: 12px } .tile svg { width: 46px; height: 46px } .tile b { font-size: 16px } .tile small { font-size: 12.5px; margin-top: 2px }
.head { margin-bottom: 18px; gap: 12px }
.head :is(h1, h2) { font-size: clamp(22px, 2.3vw, 28px); line-height: 1.1 }
.head p { font-size: 14px; margin-top: 6px }
.chips { margin-bottom: 18px; gap: 6px } .chip { padding: 5px 12px; font-size: 13px; border-width: 1px }
.grid { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 16px 14px }
.card { border-radius: 10px; border-color: #EEE6D8 }
.card .body { padding: 10px 12px 12px; gap: 5px }
.card h3 { font-size: 14.5px; line-height: 1.25; font-weight: 700; font-family: var(--f-body) }
.card .desc { font-size: 12.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.card .meta { display: none }
.cprice { font-size: 12px } .cprice b { font-size: 14.5px }
.cname { font-size: 12px }
.card .sw { width: 16px; height: 16px; box-shadow: 0 0 0 1.5px var(--paper) } .card .swatches { gap: 5px } .card .more-sw { height: 16px; font-size: 10.5px; padding: 0 6px }
.card .want, .links .want { font-size: 12.5px; text-decoration-thickness: 1px; text-underline-offset: 3px }
.links { gap: 12px; padding-top: 6px }
.fr { font-size: 10px; padding: 2px 7px 2px 5px; bottom: 8px; right: 8px }
.realb { font-size: 10px; padding: 2px 8px; top: 8px; left: 8px }
.row { padding: 16px 20px; gap: 18px; border-radius: 12px } @media (min-width: 681px) { .row { grid-template-columns: 56px 1fr 90px } } .row .n { font-size: 28px } .row h3 { font-size: 17px } .row .pic { width: 80px; height: 80px } .rows { gap: 12px }
.steps { gap: 20px } .steps b { font-size: 16px }
.team { margin-top: 36px; gap: 32px } .team h2 { font-size: clamp(22px, 2.3vw, 28px) }
.contact .wrap { padding-block: 36px } .contact h2 { font-size: clamp(24px, 2.6vw, 32px) } .line { padding: 9px 12px } .line span, .line a { font-size: 14px }
.agrid { gap: 14px } .acard { border-radius: 10px } .abody { padding: 12px 14px 14px; gap: 6px } .abody h3 { font-size: 14px } .adate { font-size: 13px; line-height: 1.45 }
/* fiche produit */
#produit { padding-block: 20px 44px }
.crumbs { font-size: 12.5px; margin-bottom: 12px }
.pd { gap: 32px } @media (min-width: 861px) { .pd { grid-template-columns: 1fr 1fr } } @media (max-width: 860px) { .pd { gap: 20px } }
.pd-media .media { border-radius: 12px }
.pd-info { gap: 12px }
.pd-info h1 { font-size: clamp(20px, 2vw, 25px) }
.price { font-size: 16px } .price.small { font-size: 14px }
.pd-info .lead { font-size: 14px }
.genre { font-size: 12.5px; padding: 7px 10px; margin: 0 } .gtag i, i.gtag { width: 18px; height: 18px; font-size: 12px }
.more { font-size: 13px }
.step { padding-top: 12px; gap: 8px } .step h2 { font-size: 14.5px }
.fine { font-size: 12.5px }
.swatches.big .sw, .pd-info .sw { width: 24px; height: 24px }
.cline { padding: 10px; border-radius: 10px }
.sizes { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px 6px }
.szc label { font-size: 12.5px } .stepper button { height: 30px } .stepper input { font-size: 14px !important; padding: 5px 0 !important }
.zone select { font-size: 13.5px; padding: 6px }
.sumbox { padding: 12px; border-radius: 10px } .csum b { font-size: 16px } .csum b.small { font-size: 14px } .csum span { font-size: 11.5px }
.pd-perks { font-size: 13px }
.pd-specs { margin-top: 36px; gap: 12px } .pd-specs h2 { font-size: 19px } .specs { font-size: 13.5px; gap: 6px 16px }
.gth { width: 66px; height: 56px; border-radius: 8px }
.citem-h a { font-size: 15.5px } .citem { padding: 12px 14px; border-radius: 10px } .ctot .big b { font-size: 20px }
.dform, .dside, .qform { border-radius: 12px }
.card .links .want.soft { display: none }
@media (max-width: 760px) { .top .wrap { min-height: 0 } .top .btn { padding: 7px 12px; font-size: 12.5px } .top nav { gap: 14px; font-size: 13px } }
@media (max-width: 600px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px } .card .desc { display: none } section.block { padding-block: 32px } }
.proof { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 8px }
.gavis { display: inline-flex; align-items: center; gap: 7px; justify-self: start; text-decoration: none; color: var(--ink); font-size: 13px }
.gavis svg { width: 17px; height: 17px; flex: none }
.gavis .stars { color: #F5B400; letter-spacing: 1px; font-size: 14px }
.gavis b { font-weight: 700 } .gavis span:last-child { color: var(--ink-2) }
.gavis:hover span:last-child { text-decoration: underline }
.refs { font-size: 12.5px; color: var(--ink-2); line-height: 1.5 } .refs span { font-weight: 700; color: var(--wine); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; margin-right: 4px }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex: none }
.tagline { font: 600 11px/1.2 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); padding-left: 12px; border-left: 1px solid var(--line); white-space: nowrap }
@media (max-width: 1100px) { .tagline { font-size: 10px; letter-spacing: .1em } }
@media (max-width: 420px) { .brand { gap: 8px } .tagline { padding-left: 8px; font-size: 9px; letter-spacing: .06em } }
.cdd { position: relative; flex: none }
.cdd-btn { background: none; border: 0; padding: 0; font: 600 13.5px var(--f-body); color: var(--ink-2); cursor: pointer }
.cdd-btn:hover, .cdd-btn[aria-expanded="true"] { color: var(--ink) }
.cdd-btn::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg) }
.cdd-panel { position: absolute; right: 0; top: calc(100% + 14px); z-index: 30; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(38,51,58,.16); padding: 8px; min-width: 250px; display: grid; gap: 2px }
.cdd-panel[hidden] { display: none !important }
.cdd-panel a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 14px }
.cdd-panel a:hover { background: var(--cream) }
.cdd-panel svg { width: 20px; height: 20px; flex: none }
.cdd-panel small { display: block; font-size: 11px; font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: .08em }
.cdd-panel .cdd-form { border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; margin-top: 4px; padding-top: 10px; font-size: 13px; color: var(--wine) }
.top .wrap { gap: 22px }
.cartbtn { background: var(--ink); color: #fff !important; padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: 13px; margin-left: 0 }
.cartbtn:hover { background: var(--slate-deep) }
#cartcount { background: var(--orange); color: var(--slate-deep); font-weight: 700 }
@media (max-width: 960px) { .cdd { margin-left: auto } .cdd-panel { right: -60px } }
.tiles { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)) } .tile svg { width: 50px; height: 50px }
.collage figcaption { padding: 6px 3px 8px; gap: 1px }
.collage figcaption b { font-size: 9.5px; letter-spacing: .12em }
.collage figcaption b::before, .collage figcaption b::after { display: none }
.collage figcaption u { font-size: 11px }
.collage figcaption i { font-size: 10.5px }
.collage .ph3 figcaption b { letter-spacing: .06em }
.head p.oneline { max-width: none }
.amedia { overflow: hidden } .amedia img { position: absolute; inset: 0 }
.tagline { display: grid; line-height: 1.25 } .tagline em { font-style: normal; color: inherit }
.abody h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .adate { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em }
a.collage { display: block; text-decoration: none; color: inherit; cursor: pointer }
a.collage figure { transition: transform .25s ease }
a.collage:hover .ph1 { transform: rotate(-5deg) translateY(-3px) } a.collage:hover .ph3 { transform: rotate(6deg) translateY(-3px) } a.collage:hover .ph2 { transform: rotate(-2deg) translateY(-3px) }
.collage-cta { position: absolute; right: 12px; bottom: 10px; z-index: 4; background: var(--ink); color: #fff; font: 600 11.5px var(--f-body); padding: 5px 11px; border-radius: 999px; opacity: .92 }
a.collage:hover .collage-cta { background: var(--wine); opacity: 1 }
@media (prefers-reduced-motion: reduce) { a.collage figure { transition: none } }
.collage { aspect-ratio: 1 / 1.16 } .collage .ph2 { bottom: 10% } .collage-cta { right: auto; left: 50%; transform: translateX(-50%); bottom: 3%; white-space: nowrap }
.tile-logo { height: 74px; width: auto; flex: none; margin: -6px 4px -6px 6px }
/* hero en largeur */
.hero .wrap { display: block; padding-block: 30px 18px }
.hero-top { display: grid; grid-template-columns: 1fr 1.05fr; gap: 16px 48px; align-items: end }
.hero-l :is(h1, .hh) { margin-top: 10px }
.hero-r .lead { margin-top: 0 }
.hero-r .badges { margin-top: 12px }
.hero-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 14px }
.hero-act .ctas { margin-top: 0 }
.hero-act .proof { margin: 0; padding: 0; border: 0 }
.collage.strip { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 26px; align-items: center; aspect-ratio: auto; width: 100%; max-width: none; margin: 22px 0 0; padding: 18px 26px; border-radius: 18px; background: var(--cream) }
.collage.strip figure { position: relative; inset: auto; width: auto; padding: 8px 8px 0; z-index: auto }
.collage.strip figure img { aspect-ratio: 16 / 10 !important; height: auto; object-position: 50% 30% }
.collage.strip .ph1 { transform: rotate(-2deg) } .collage.strip .ph3 { transform: rotate(1.5deg) } .collage.strip .ph2 { transform: rotate(-1deg) }
a.collage.strip:hover .ph1 { transform: rotate(-3deg) translateY(-3px) } a.collage.strip:hover .ph3 { transform: rotate(2.5deg) translateY(-3px) } a.collage.strip:hover .ph2 { transform: rotate(-2deg) translateY(-3px) }
.collage.strip .ph3 img { object-position: 50% 20% }
.collage.strip figcaption b { font-size: 10.5px; letter-spacing: .14em } .collage.strip figcaption u { font-size: 12px } .collage.strip figcaption i { font-size: 11.5px }
.collage.strip .collage-cta { position: static; transform: none; left: auto; bottom: auto; justify-self: end; white-space: nowrap; font-size: 12.5px; padding: 8px 14px }
@media (max-width: 960px) { .hero-top { grid-template-columns: 1fr; gap: 12px } .collage.strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 14px } .collage.strip .collage-cta { grid-column: 1 / -1; justify-self: center } }
@media (max-width: 600px) { .collage.strip { grid-template-columns: 1fr 1fr } .collage.strip .ph2 { grid-column: 1 / -1; width: 70%; justify-self: center } }
.hero-top { align-items: center }
.hero-r .badges { display: flex; flex-wrap: wrap; gap: 8px } .hero-r .badge { white-space: nowrap }
.collage.strip figure img { aspect-ratio: 16 / 9 !important }
.collage.strip .ph3 img { object-position: 50% 8% }
.collage.strip { padding: 14px 24px }
@media (min-width: 961px) { .hero-top { grid-template-columns: .92fr 1.08fr; column-gap: 40px } }
.gtop { font-size: 12px; gap: 5px; padding-left: 16px; border-left: 1px solid var(--line); flex: none }
.gtop .stars { font-size: 12px; letter-spacing: 0 } .gtop svg { width: 15px; height: 15px }
.hero-act .proof { display: none }
@media (max-width: 1440px) { .gtop span:last-child { display: none } }
.top nav { gap: 16px } .top .wrap { gap: 18px }
@media (max-width: 1060px) { .gtop { display: none } .hero-act .proof { display: grid } }
.hero-act { margin-top: 10px }
/* ===== Identité Fil de Vigne : bordeaux + anthracite, sans orange ===== */
.fdv-logo { height: 54px; width: auto; display: block; margin-block: -4px }
.top img { display: none }
.btn.alt { background: var(--wine); color: #fff } .btn.alt:hover { background: #5E1A2B }
#cartcount { background: #fff; color: var(--wine) }
.swatches.big .sw[aria-pressed="true"]::after { color: #fff }
.contact .line svg, .dside svg, .contact svg use { color: #E9B9C4 }
.cdd-panel svg { color: var(--wine) }
.stripe { background: var(--wine) }
.row .n { color: var(--wine) }
@media (max-width: 760px) { .fdv-logo { height: 34px } }
/* ===== Architecture façon grande image ===== */
.annonce { background: var(--ink); color: #E7ECEF; text-align: center; font: 600 11.5px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; padding: 9px 16px }
.hero.big { position: relative; min-height: min(78vh, 620px); display: grid; align-items: end; overflow: hidden; background: var(--ink) }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38% }
.hero.big::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,26,30,.05) 25%, rgba(20,26,30,.72) 100%) }
.hero.big .hero-ov { position: relative; z-index: 1; display: block; padding-block: 0 48px; color: #fff }
.hero.big .eyebrow { color: #F3EBDD }
.hero.big :is(h1, .hh) { color: #fff; font-size: clamp(34px, 4.6vw, 60px); line-height: 1.02; margin-top: 10px; text-shadow: 0 2px 18px rgba(0,0,0,.25) }
.hero.big .lead { color: #F1F1F1; font-size: 16px; max-width: 36em; margin-top: 12px }
.hero.big .ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px }
.btn.light { background: #fff; color: var(--ink) } .btn.light:hover { background: var(--cream) }
.btn.outline { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.85) } .btn.outline:hover { background: rgba(255,255,255,.12) }
.assure { border-bottom: 1px solid var(--line); background: #FBF8F3 }
.assure .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 22px; padding-block: 12px; font-size: 13px; font-weight: 600; color: var(--ink) }
.assure span { display: inline-flex; align-items: center; gap: 7px } .assure span::before { content: "✓"; color: var(--wine); font-weight: 800 }
.assure .gavis span::before, .assure .gavis .stars::before { content: none }
.assure .flag { display: none }
.row-head { align-items: end }
.row-head .more { font-weight: 600; font-size: 13.5px; text-decoration: none }
.row-head .more:hover { text-decoration: underline }
.hscroll { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, calc((100% - 4 * 14px) / 5)); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin }
.hscroll > * { scroll-snap-align: start }
.reals .collage.strip { margin-top: 0; grid-template-columns: repeat(3, minmax(0, 1fr)) }
.tiles-wrap { padding-block: 26px 6px }
section.block.best, section.block.reals { padding-block: 30px }
@media (max-width: 700px) { .hero.big { min-height: 72vh } .hero.big .hero-ov { padding-bottom: 32px } .assure .wrap { justify-content: flex-start; font-size: 12px } .hscroll { grid-auto-columns: 70% } }
@media (max-width: 700px) { .hide-m { display: none } .annonce { font-size: 10.5px } }
.hero-bg { object-position: 62% 50% }
.hero.big::after { background: linear-gradient(90deg, rgba(20,26,30,.82) 0%, rgba(20,26,30,.55) 38%, rgba(20,26,30,0) 62%) }
.hero.big { align-items: center; min-height: min(70vh, 560px) }
.hero.big .hero-ov { padding-block: 40px }
.hero.big .hero-ov > * { max-width: 560px }
@media (max-width: 700px) { .hero-bg { object-position: 72% 50% } .hero.big::after { background: linear-gradient(180deg, rgba(20,26,30,.25) 0%, rgba(20,26,30,.8) 70%) } .hero.big { align-items: end } }
.hero.big .hero-ov { width: 100%; max-width: 1200px; margin-inline: auto; justify-self: stretch; padding-inline: 20px; box-sizing: border-box }
.assure span::before { content: none } .assure .ai { width: 19px; height: 19px; color: var(--wine); flex: none }
.agv { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap }
.agv svg { width: 12px; height: 12px; background: #fff; border-radius: 50%; padding: 1px }
.agv .st { color: #F5B400; letter-spacing: 0 }
.agv:hover { text-decoration: underline }
.annonce { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0 4px }
.assure .wrap { justify-content: space-around }
@media (max-width: 700px) { .annonce .hide-m + .agv { margin-left: 8px } .assure .wrap { justify-content: flex-start } }
@media (min-width: 701px) { .hero.big .hero-ov > * { max-width: none } .hero.big :is(h1, .hh) { white-space: nowrap } }
@media (max-width: 700px) { .br-d { display: none } }
.avis-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px }
.avis { margin: 0; background: #FBF8F3; border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px }
.avis-st { color: #F5B400; font-size: 14px; letter-spacing: 1px }
.avis blockquote { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink); flex: 1 }
.avis figcaption { display: grid; gap: 1px; font-size: 12.5px } .avis figcaption b { color: var(--ink) } .avis figcaption span { color: var(--ink-2) }
.gnote { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--ink); font-size: 13px } .gnote svg { width: 16px; height: 16px } .gnote .st { color: #F5B400 } .gnote span:last-child { color: var(--ink-2) }
.avis-more { margin-top: 12px; text-align: center; font-size: 13px } .avis-more a { color: var(--wine); font-weight: 600 }
section.block.avis-sec { padding-block: 30px }
@media (max-width: 860px) { .avis-grid { grid-template-columns: 1fr } }
.avis blockquote strong { color: var(--wine); font-weight: 700 }
.tech-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px }
.tech { display: flex; flex-direction: column; text-decoration: none; color: var(--ink) }
.tech-img { display: block; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--cream) }
.tech-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease }
.tech:hover .tech-img img { transform: scale(1.04) }
.tech-b { display: grid; gap: 6px; padding: 12px 2px 0 }
.tech-k { font: 700 11px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--wine) }
.tech-b b { font: 700 16px/1.25 var(--f-body); text-transform: uppercase; letter-spacing: .01em }
.tech-d { font-size: 13.5px; line-height: 1.5; color: var(--ink-2) }
.tech-l::after { content: " →" }
.tech-l { font-size: 13px; font-weight: 600; color: var(--wine); text-decoration: underline; text-underline-offset: 3px; margin-top: 2px }
section.block.techs { padding-block: 30px }
@media (max-width: 860px) { .tech-grid { grid-template-columns: 1fr } .tech-img { aspect-ratio: 16 / 9 } }
@media (prefers-reduced-motion: reduce) { .tech-img img { transition: none } }
.techpage { padding-block: 24px 44px }
.tp { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start }
.tp-img { border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3.3; background: var(--cream) }
.tp-img img { width: 100%; height: 100%; object-fit: cover; display: block }
.tp-txt h1 { font-size: clamp(26px, 2.6vw, 34px); margin-top: 8px }
.tp-acc { font: 700 15px/1.3 var(--f-body); text-transform: uppercase; letter-spacing: .02em; color: var(--wine); margin-top: 8px }
.tp-p { margin-top: 12px; color: var(--ink-2); font-size: 14.5px }
.tp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line) }
.tp-cols h2 { font: 700 13px/1.2 var(--f-body); text-transform: uppercase; letter-spacing: .08em; color: var(--ink); margin-bottom: 8px }
.tp-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; color: var(--ink-2) }
.tp-cols li::before { content: "✓ "; color: var(--wine); font-weight: 800 }
.tp-note { margin-top: 16px; background: var(--cream); border-radius: 10px; padding: 11px 13px; font-size: 13px; color: var(--ink) }
.tp .ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px }
@media (max-width: 860px) { .tp { grid-template-columns: 1fr; gap: 20px } .tp-cols { grid-template-columns: 1fr } }
.tp-bloc { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; margin-top: 44px; padding-top: 44px; border-top: 1px solid var(--line) }
.tb-img { aspect-ratio: 4 / 3 }
.tb-img .aph { border: 1.5px dashed var(--sand); border-radius: 12px }
.tb-txt h2 { font: 700 clamp(20px, 2vw, 26px)/1.15 var(--f-display); text-transform: uppercase; letter-spacing: .01em; color: var(--ink) }
.tb-txt .tp-p { margin-top: 10px; max-width: 36em }
.tb-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px }
.tb-add { display: block; margin: 28px auto 0 }
@media (max-width: 860px) { .tp-bloc { grid-template-columns: 1fr; gap: 16px; margin-top: 28px; padding-top: 28px } .tp-bloc:not(.rev) .tb-img { order: -1 } }
/* recherche instantanée (en-tête) */
.srch { position: relative; flex: 1 1 240px; max-width: 340px; min-width: 170px }
.srch-f { display: flex; align-items: center; gap: 8px; background: var(--paper); border: 1.5px solid var(--line); border-radius: 999px; padding: 0 6px 0 14px; height: 40px; transition: border-color .15s, box-shadow .15s }
.srch-f:focus-within { border-color: var(--wine); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wine) 14%, transparent) }
.srch-f > svg { width: 17px; height: 17px; flex: none; color: var(--ink-2) }
.srch-f input { flex: 1; min-width: 0; border: 0; background: transparent; font: 500 14.5px var(--f-body); color: var(--ink); outline: none; padding: 0; height: 100% }
.srch-f input::placeholder { color: var(--ink-2); opacity: .85 }
.srch-f input::-webkit-search-cancel-button { display: none }
.srch-x { border: 0; background: var(--cream); width: 26px; height: 26px; border-radius: 50%; font-size: 16px; line-height: 1; color: var(--ink); flex: none; display: grid; place-items: center; padding: 0 }
.srch-x[hidden] { display: none }
.srch-panel { position: absolute; left: 0; top: calc(100% + 10px); z-index: 40; width: min(600px, calc(100vw - 32px)); max-height: min(72vh, 640px); overflow: auto; overscroll-behavior: contain; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 18px 50px rgba(38,51,58,.18); padding: 14px }
.srch-panel[hidden] { display: none }
.sr-g { display: grid; gap: 4px }
.sr-g + .sr-g { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line) }
.sr-h { font: 700 12px/1.2 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin: 2px 6px 6px }
.sr-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px }
.sr-chip { border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 999px; padding: 6px 12px; font: 600 13.5px var(--f-body); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; text-decoration: none }
.sr-chip:hover, .sr-chip.act { border-color: var(--wine); color: var(--wine) }
.sr-chip .dot { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(38,51,58,.2) }
.sr-chip small { color: var(--ink-2); font-weight: 500 }
.sr-it { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 6px; border-radius: 12px; text-decoration: none; color: var(--ink) }
.sr-it:hover, .sr-it.act { background: var(--cream) }
.sr-th { width: 56px; height: 56px; border-radius: 10px; background: var(--cream); overflow: hidden; display: grid; place-items: center }
.sr-th img, .sr-th svg { width: 100%; height: 100%; object-fit: cover; display: block }
.sr-n { font-weight: 700; font-size: 14.5px; line-height: 1.25 }
.sr-n mark { background: color-mix(in srgb, var(--wine) 16%, transparent); color: inherit; border-radius: 3px; padding: 0 1px }
.sr-m { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center }
.sr-m .sw1 { width: 12px; height: 12px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 1px rgba(38,51,58,.25); vertical-align: -1px; margin-right: 4px }
.sr-p { font-size: 13px; color: var(--ink-2); text-align: right; white-space: nowrap }
.sr-p b { display: block; color: var(--wine); font-size: 14.5px }
.sr-more { width: 100%; margin-top: 8px; border: 0; background: var(--cream); color: var(--ink); border-radius: 999px; padding: 10px; font: 700 14px var(--f-body); cursor: pointer }
.sr-more:hover { background: var(--sand) }
.sr-empty { padding: 10px 8px; font-size: 14.5px; color: var(--ink-2) }
.sr-empty a { color: var(--wine); font-weight: 700 }
@media (max-width: 960px) { .srch { max-width: none } }
@media (max-width: 640px) {
  .srch { order: 3; flex-basis: 100%; max-width: none }
  .top nav { order: 4 }
  .srch-panel { position: fixed; left: 16px; right: 16px; width: auto; top: auto; max-height: 70vh }
  .sr-it { grid-template-columns: 48px 1fr; } .sr-th { width: 48px; height: 48px } .sr-p { grid-column: 2; text-align: left } .sr-p b { display: inline; margin-left: 4px }
}

/* rendu serveur (avant le chargement de l’application) */
.ssr-list { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--ink-2) }
.pd-ssr .specs-ssr { margin-top: 18px; display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 14.5px }
.pd-ssr .specs-ssr dt { font-weight: 700 } .pd-ssr .specs-ssr dd { margin: 0 }
.cgv-note { font-size: 12.5px; color: var(--ink-2); margin: 0 } .cgv-note a { color: var(--wine) }
.page-std table { width: 100%; border-collapse: collapse; margin: 14px 0 22px; font-size: 14.5px; background: var(--paper) } .page-std th, .page-std td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top } .page-std th { background: var(--cream) }
@media (min-width: 961px) and (max-width: 1100px) { .top .wrap { flex-wrap: wrap; row-gap: 6px; padding-block: 8px } .top nav { order: 3; width: 100%; margin-left: 0; overflow-x: auto; white-space: nowrap; padding-bottom: 6px; scrollbar-width: none } .cdd { margin-left: auto } .srch { max-width: 420px } }
.ico-trash { width: 18px; height: 18px; display: block } .trash { display: inline-grid; place-items: center; color: var(--ink-2); border-radius: 8px } .trash:hover { color: var(--wine); background: var(--cream) } .sf-clear { display: inline-flex; align-items: center; justify-content: center; gap: 6px } .sf-clear .ico-trash { width: 16px; height: 16px }
.lp { display: grid; gap: 6px; font-size: 12.5px } .lp-l { font-weight: 700; color: var(--ink-2) } .lp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px } .lp-list:empty { display: none } .lp-list li { display: flex; align-items: center; gap: 8px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font-size: 13.5px } .lp-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--ink) } .lp-list small { color: var(--ink-2) } .lp-x { border: 0; background: none; font-size: 18px; line-height: 1; cursor: pointer; color: var(--ink-2); padding: 0 4px } .lp-x:hover { color: var(--wine) } .lp-add { justify-self: start; border: 1.5px dashed var(--sand); background: var(--paper); border-radius: 999px; padding: 7px 14px; font: 600 13.5px var(--f-body); color: var(--ink); cursor: pointer } .lp-add:hover { border-color: var(--wine); color: var(--wine) } .lp-add[hidden] { display: none } .lp-h { color: var(--ink-2); font-size: 12px; line-height: 1.4 }
.cdd-panel .cdd-faq { font-size: 13px; color: var(--ink-2); padding-top: 4px }
.page-std details.faq { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; margin: 0 0 8px; padding: 0 16px }
.page-std details.faq summary { cursor: pointer; list-style: none; padding: 13px 28px 13px 0; font-weight: 700; position: relative }
.page-std details.faq summary::-webkit-details-marker { display: none }
.page-std details.faq summary::after { content: "+"; position: absolute; right: 0; top: 10px; font-size: 20px; color: var(--wine); font-weight: 400 }
.page-std details.faq[open] summary::after { content: "−" }
.page-std details.faq summary:hover { color: var(--wine) }
.page-std .faq-a { padding: 0 0 12px } .page-std .faq-a > *:first-child { margin-top: 0 } .page-std .faq-a table { margin: 10px 0 }
.page-std .faq-lead { font-size: 16px; margin-bottom: 8px } .page-std .faq-more { margin-top: 18px }
.zmap { margin-top: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: grid; gap: 8px }
.zmap[hidden] { display: none }
.zm-views { display: flex; gap: 10px; justify-content: center }
.zm-v { margin: 0; flex: 0 1 190px; text-align: center } .zm-v svg { width: 100%; height: auto; display: block }
.zm-v figcaption { font-size: 12px; font-weight: 700; color: var(--ink-2); letter-spacing: .06em; text-transform: uppercase }
.zm-body { fill: var(--cream); stroke: var(--ink-2); stroke-width: 1.4; stroke-linejoin: round } .zm-x { fill: var(--sand) }
.zm-z rect { fill: transparent; stroke: var(--ink-2); stroke-width: 1.2; stroke-dasharray: 4 3; cursor: pointer }
.zm-z:hover rect { fill: color-mix(in srgb, var(--wine) 12%, transparent); stroke: var(--wine) }
.zm-z.on rect { fill: var(--wine); fill-opacity: .88; stroke: var(--wine); stroke-dasharray: none; cursor: default }
.zm-z text { fill: #fff; font: 700 12px var(--f-body); text-anchor: middle; pointer-events: none }
.zm-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px }
.zm-l li { display: grid; grid-template-columns: 22px 1fr; gap: 2px 8px; align-items: center }
.zm-l b { width: 20px; height: 20px; border-radius: 50%; background: var(--wine); color: #fff; font-size: 11.5px; display: grid; place-items: center }
.zm-l small { grid-column: 2; color: var(--wine); font-weight: 600 }
.gpimg { width: 96px; height: 96px } .gmark { grid-template-columns: 96px 1fr } .gmark > .fine { grid-column: 1 / -1 }

/* ===== Ajouts WordPress ===== */
/* barre d'administration WordPress (comptes connectés) */
body.admin-bar .top { top: 32px }
@media (max-width: 782px) { body.admin-bar .top { top: 46px } }
@media (max-width: 600px) { body.admin-bar .top { top: 0 } }
/* demande envoyée */
.qout.sent { border-top: 0; background: var(--cream); border-radius: 12px; padding: 18px }
.qout.sent h3 { color: var(--wine) }
/* pages classiques (mentions légales, confidentialité…) */
.page-std { padding-block: 36px 56px }
.page-std .wrap { max-width: 820px }
.page-std h1 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; margin-bottom: 18px }
.page-std h2 { font-size: 20px; margin: 26px 0 8px }
.page-std h3 { font-size: 17px; margin: 20px 0 6px }
.page-std p, .page-std li { color: var(--ink-2); margin-bottom: 10px }
.page-std a { color: var(--wine) }
.page-std img { height: auto; border-radius: 10px }
footer .legal { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; margin: 0; padding: 0 }
footer .legal a { color: #AEBBC2 }
footer .legal a:hover { color: #fff }