@charset "UTF-8";

/* ==========================================================
   IPM TOOLS-DESIGN | marque-lavenir.css
   Surcouche L'Avenir de la fiche marque (marque.css).
   Lato self-hostée (OFL). Ambit est payante : montrée en image.
   ========================================================== */

@font-face { font-family: "Lato"; src: url("../fonts/Lato-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/Lato-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/Lato-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/Lato-Black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/Lato-BlackItalic.woff2") format("woff2"); font-weight: 900; font-style: italic; font-display: swap; }

.marque-shell[data-brand="lavenir"] {
  --b-primary: #0a3623;
  --b-accent: #0a3623;
  --b-accent2: #00e25d;
  --lav-web: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --lav-print: Georgia, "Times New Roman", serif;
}
[data-theme="dark"] .marque-shell[data-brand="lavenir"] { --b-accent: #00e25d; }
[data-brand="lavenir"] ::selection { background: #00e25d; color: #0a3623; }
[data-brand="lavenir"] .marque-nav a:hover::before,
[data-brand="lavenir"] .marque-nav a.is-active::before { background: #00e25d; }

/* ---------- Hero ---------- */
.lav-hero__logo { margin-bottom: 34px; display: flex; width: fit-content; align-items: center; justify-content: center; background: #0a3623; padding: 22px 30px; }
.lav-hero__logo img { height: 52px; width: auto; max-height: none; }
.lav-hero__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; display: flex; }
.lav-hero__bar span { flex: 1; }
.lav-meta { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 30px 0 0; padding: 0; list-style: none; }
.lav-meta li { font-family: var(--f-mono); font-size: 12px; color: var(--muted); letter-spacing: 0.04em; }
.lav-meta b { color: var(--ink); font-weight: 600; }

.lav-note { border-left: 3px solid #00e25d; padding: 14px 18px; background: var(--bg-2); font-size: 14px; line-height: 1.6; color: var(--ink-soft); max-width: 72ch; margin: 18px 0 26px; }
.lav-note strong { color: var(--ink); }
.lav-mt { margin-top: 48px; }
.marque-sec--last { border-bottom: 0; }
[data-brand="lavenir"] .marque-sec__text code, [data-brand="lavenir"] .lav-note code { font-family: var(--f-mono); font-size: 0.88em; padding: 1px 5px; background: var(--bg-2); border: 1px solid var(--line); }
[data-brand="lavenir"] .swatches + .marque-sec__title,
[data-brand="lavenir"] .lav-note + .marque-sec__title { margin-top: 48px; }

/* ---------- Logo ---------- */
.lav-board { margin: 30px 0; padding: 60px; border: 1px solid var(--line); display: grid; place-items: center; min-height: 260px; }
.lav-board--foret { background: #0a3623; }
.lav-board--light { background: var(--bg-2); }
.lav-board img { height: 96px; width: auto; }
.lav-duo figure, .lav-ambit { margin-left: 0; margin-right: 0; }
.lav-duo figure { margin: 0; }
.lav-duo { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; margin: 26px 0; }
@media (max-width: 720px) { .lav-duo { grid-template-columns: 1fr; } }
.lav-duo .lav-board { margin: 0; min-height: 220px; }
.lav-duo .lav-board img { height: 80px; }
.lav-duo figcaption { font-family: var(--f-mono); font-size: 11px; color: var(--muted); margin-top: 8px; letter-spacing: 0.04em; }

.lav-angle { position: relative; display: inline-block; }
.lav-angle img { height: 80px; width: auto; }
.lav-angle__line { position: absolute; left: 50%; top: -24px; bottom: -24px; width: 0; border-left: 1px dashed #00e25d; transform: rotate(9.5deg); transform-origin: center; }
.lav-angle__tag { position: absolute; right: -64px; top: -18px; font-family: var(--f-mono); font-size: 12px; color: #00e25d; }

.lav-clear { position: relative; display: inline-block; padding: 34px 40px; outline: 1px dashed currentColor; color: #0a3623; }
[data-theme="dark"] .lav-clear { color: #00e25d; }
.lav-clear img { height: 64px; width: auto; }
.lav-clear__tag { position: absolute; top: -10px; left: 12px; background: var(--bg-2); padding: 0 6px; font-family: var(--f-mono); font-size: 11px; }

.logo-variant img { max-height: 34px; max-width: 72%; width: auto; }
.logo-variant { position: relative; }
.logo-variant__cap { position: absolute; left: 10px; bottom: 8px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.06em; color: rgba(255,255,255,.8); }
.logo-variant--light .logo-variant__cap, .logo-variant--vert .logo-variant__cap { color: rgba(10,54,35,.75); }
.logo-variant--foret { background: #0a3623; }
.logo-variant--vert { background: #00e25d; }
.logo-variant--photo { background: linear-gradient(180deg, rgba(10,54,35,.1), rgba(10,54,35,.55)), linear-gradient(135deg, #c7a77e, #6b7d5e 45%, #2b3a33); }

[data-brand="lavenir"] .donts { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { [data-brand="lavenir"] .donts { grid-template-columns: repeat(2, 1fr); } }
[data-brand="lavenir"] .dont { display: flex; flex-direction: column; align-items: center; gap: 4px; }

/* ---------- Couleurs ---------- */
.swatches--4 { grid-template-columns: repeat(4, 1fr); }
.swatches--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .swatches--4, .swatches--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .swatches--4, .swatches--3 { grid-template-columns: 1fr; } }
.swatch__chip { position: relative; display: flex; align-items: flex-end; padding: 12px 14px; }
.swatch__chip--line { border-bottom: 1px solid var(--line); }
.swatch__var { font-family: var(--f-mono); font-size: 11px; color: rgba(255,255,255,.85); }
.swatch__chip--light .swatch__var { color: rgba(0,0,0,.6); }
.swatch__aa { font-family: var(--f-mono); font-size: 10px; margin-top: 8px; color: var(--muted); }

button.copy { all: unset; cursor: pointer; font-family: var(--f-mono); font-size: 12px; color: var(--ink-soft); border-bottom: 1px dotted var(--line-strong); }
button.copy:hover, button.copy:focus-visible { color: var(--b-accent); border-color: var(--b-accent); }
button.copy.is-copied { color: #2f8f4e; border-color: transparent; }

.lav-slant { position: relative; height: 220px; margin: 26px 0 8px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.lav-slant span { position: absolute; top: 0; bottom: 0; }
.lav-slant__v { left: 0; width: 58%; background: #00e25d; }
.lav-slant__f { left: 38%; width: 46%; background: #0a3623; transform: skewX(-9.5deg); }
.lav-slant b { position: absolute; bottom: 14px; font-family: var(--f-mono); font-size: 12px; font-weight: 600; z-index: 1; }
.lav-slant .t1 { left: 16px; color: #0a3623; } .lav-slant .t2 { left: 48%; color: #00e25d; } .lav-slant .t3 { right: 16px; color: #0a3623; }

/* Puces */
.c-vert { background: #00e25d; } .c-foret { background: #0a3623; } .c-white { background: #fff; }
.c-bleu { background: #007fff; } .c-azure { background: #00ece5; } .c-dore { background: #ffd735; }
.c-violet { background: #a748f9; } .c-rose { background: #ff6e97; } .c-rouge { background: #ff001a; }
.c-ink { background: #141415; } .c-text { background: #23272c; } .c-grey { background: #656565; }
.c-grey-light { background: #d1d8dd; } .c-surface { background: #f3f3f3; } .c-sauge { background: #6c867b; }
.c-pay { background: #fed80b; } .c-pay-dark { background: #f7b500; } .c-pay-ink { background: #1d1d1b; } .c-pay-light { background: #ffe559; }

/* ---------- Rubriques ---------- */
.lav-rubs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 26px 0; }
@media (max-width: 820px) { .lav-rubs { grid-template-columns: repeat(2, 1fr); } }
.lav-rub { border: 1px solid var(--line); overflow: hidden; }
.lav-rub__chip { height: 96px; padding: 12px 14px; display: flex; align-items: flex-end; font-family: var(--lav-web); font-weight: 900; font-size: 20px; color: #fff; }
.lav-rub__chip--ink { color: #141415; }
.lav-rub__body { padding: 12px 14px; }
.lav-rub__row { display: flex; justify-content: space-between; gap: 10px; font-family: var(--f-mono); font-size: 12px; color: var(--ink-soft); padding: 3px 0; border-top: 1px solid var(--line); }
.lav-rub__row:first-child { border-top: 0; }
.lav-rub__row span:first-child { color: var(--muted); text-transform: uppercase; font-size: 10px; letter-spacing: 0.08em; }

/* ---------- Typographie ---------- */
.lav-ambit { border: 1px solid var(--line); margin: 24px 0; background: #00e25d; }
.lav-ambit img { width: 100%; height: auto; }
.lav-ambit figcaption { background: var(--bg-2); padding: 10px 14px; font-family: var(--f-mono); font-size: 12px; color: var(--muted); }

.specimen--lato .specimen__big { font-family: var(--lav-web); font-weight: 900; letter-spacing: -0.01em; }
.specimen--lato .specimen__set { font-family: var(--lav-web); font-weight: 400; }
.specimen--georgia .specimen__big { font-family: var(--lav-print); font-weight: 400; }
.specimen--georgia .specimen__set { font-family: var(--lav-print); }
.specimen__meta { font-family: var(--f-mono); font-size: 12px; color: var(--muted); margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px 18px; }

.type-role__w { flex: 0 0 260px; font-size: 19px; }
.tw-l9 { font-family: var(--lav-web); font-weight: 900; } .tw-l9i { font-family: var(--lav-web); font-weight: 900; font-style: italic; }
.tw-l7 { font-family: var(--lav-web); font-weight: 700; } .tw-l4 { font-family: var(--lav-web); font-weight: 400; }
.tw-l4i { font-family: var(--lav-web); font-weight: 400; font-style: italic; }

.scale { margin: 26px 0; border-top: 1px solid var(--line); }
.scale__group { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--b-accent); padding: 22px 0 6px; }
.scale__row { display: grid; grid-template-columns: 1fr 230px; gap: 20px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); }
.scale__sample { color: var(--ink); overflow-wrap: anywhere; font-family: var(--lav-web); }
.scale__spec { font-family: var(--f-mono); font-size: 11px; color: var(--muted); line-height: 1.5; }
.scale__spec b { display: block; color: var(--ink-soft); font-weight: 600; font-size: 12px; }
@media (max-width: 640px) { .scale__row { grid-template-columns: 1fr; gap: 6px; } }

/* ---------- Ton ---------- */
.lav-tone { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 26px 0; }
@media (max-width: 760px) { .lav-tone { grid-template-columns: 1fr; } }
.lav-tone__card { background: #0a3623; color: #fff; padding: 26px 24px 28px; position: relative; overflow: hidden; }
.lav-tone__card::after { content: "\2019"; position: absolute; right: 14px; top: -28px; font-family: Georgia, serif; font-size: 140px; color: #00e25d; opacity: .9; line-height: 1; }
.lav-tone__card h3 { font-family: var(--lav-web); font-weight: 900; font-size: 26px; color: #00e25d; margin: 0 0 12px; line-height: 1.1; }
.lav-tone__card p { font-family: var(--lav-web); font-size: 15px; line-height: 1.6; margin: 0; color: rgba(255,255,255,.88); }

/* ---------- Composants ---------- */
.comp-board { border: 1px solid var(--line); background: #fff; color: #23272c; padding: 30px; margin: 22px 0; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.lav-btn { font-family: var(--lav-web); font-weight: 400; font-size: 16px; line-height: 1; padding: 0.5rem 0.75rem; border-radius: 0.25rem; border: 1px solid #d1d8dd; background: #fff; color: #141415; cursor: pointer; transition: all .3s cubic-bezier(.4,0,.2,1); }
.lav-btn--primary { background: #141415; border-color: #141415; color: #00e25d; box-shadow: 0 1px 1px 0 rgba(0,0,0,.22), 0 3px 4px 0 hsla(0,0%,40%,.21); }
.lav-btn--primary:hover { background: #000; box-shadow: inset 0 2px 3px 0 rgba(0,0,0,.5); }
.lav-btn--pay { background: #fed80b; border-width: 0; color: #1d1d1b; box-shadow: 0 1px 1px 0 rgba(0,0,0,.22), 0 3px 4px 0 hsla(0,0%,40%,.21); }
.lav-btn--pay:hover { background: #f7b500; }
.lav-btn--brand { background: #00e25d; border-color: #00e25d; color: #0a3623; font-weight: 700; }
.lav-btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(80,170,80,.5); }
.lav-pill { font-family: var(--lav-web); font-size: 13px; line-height: 1; padding: .3rem .75rem; border-radius: 9999px; }
.lav-pill--gift { background: #f7b500; color: #1d1d1b; }
.lav-pill--app { background: #00e25d; color: #0a3623; font-weight: 700; }
.lav-pill--live { background: #df0000; color: #fff; border-radius: 3px; font-weight: 700; font-size: 12px; text-transform: uppercase; }

.teasers { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); background: #fff; color: #141415; margin: 22px 0; }
@media (max-width: 760px) { .teasers { grid-template-columns: 1fr; } }
.teaser { padding: 18px; border-right: 1px solid #e7e7e7; }
.teaser:last-child { border-right: 0; }
.teaser__img { aspect-ratio: 16/10; margin-bottom: 12px; }
.teaser__img--1 { background: linear-gradient(135deg, #8bd6a0, #0a3623); }
.teaser__img--2 { background: linear-gradient(135deg, #ff6b7a, #a30012); }
.teaser__img--3 { background: linear-gradient(135deg, #7ad8de, #126a70); }
.teaser__tags { font-family: var(--lav-web); font-size: 12px; color: #656565; margin-bottom: 6px; }
.teaser__tags b { color: #0a3623; font-weight: 700; }
.teaser__title { font-family: var(--lav-web); font-weight: 700; font-size: 18px; line-height: 24px; margin: 0; }
.teaser__title .lock { display: inline-block; background: #f7b500; color: #1d1d1b; font-size: 10px; font-weight: 900; padding: 2px 5px; border-radius: 2px; vertical-align: 2px; margin-right: 4px; }

.lav-chain { border: 1px solid var(--line); margin: 22px 0; background: #fff; padding: 20px; }
.lav-chain__title { font-family: var(--lav-web); font-weight: 700; font-size: 20px; line-height: 26px; text-align: center; color: #0a3623; margin: 0 0 14px; }
.lav-chain__title::before { content: "\2019"; color: #00e25d; font-weight: 900; margin-right: 4px; }
.lav-chain__bar { height: 4px; background: linear-gradient(90deg, #00e25d 0 40%, #0a3623 40%); }

/* ---------- Dev ---------- */
.code { position: relative; border: 1px solid var(--line); background: #0a3623; color: #e8f5ec; margin: 22px 0; }
.code pre { margin: 0; padding: 22px; overflow-x: auto; font-family: var(--f-mono); font-size: 13px; line-height: 1.65; }
.code .k { color: #00e25d; } .code .v { color: #ffd735; } .code .c { color: #8fb3a0; }
.code__copy { position: absolute; top: 10px; right: 10px; font-family: var(--f-mono); font-size: 11px; color: #e8f5ec; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); padding: 5px 10px; cursor: pointer; }
.code__copy:hover { background: #00e25d; color: #0a3623; border-color: #00e25d; }

[data-brand="lavenir"] .dl-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) { [data-brand="lavenir"] .dl-grid { grid-template-columns: repeat(2, 1fr); } }
.dl-item__prev--foret { background: #0a3623; } .dl-item__prev--vert { background: #00e25d; }
.dl-item__prev--code { background: #0a3623; color: #00e25d; font-family: var(--f-mono); font-size: 22px; font-weight: 600; }
.dl-item__prev img { width: auto; max-height: 34px; }
a.dl-item { display: block; color: inherit; }

@media (max-width: 900px) {
  [data-brand="lavenir"] .marque-main { width: 100%; }
  [data-brand="lavenir"] .spec-list li { flex-wrap: wrap; gap: 4px 20px; }
  [data-brand="lavenir"] .spec-list li span:last-child { overflow-wrap: anywhere; }
}

/* ---------- Easter egg 1918 ---------- */
.lav-1918 { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 20px; background: rgba(6,32,21,.78); backdrop-filter: blur(4px); opacity: 0; transition: opacity .5s ease; }
.lav-1918.is-on { opacity: 1; }
.lav-1918__paper { max-width: 560px; width: 100%; background: #efe8d6; color: #1f1a12; padding: 32px 30px 26px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6); transform: rotate(9.5deg) scale(.96); transition: transform .9s cubic-bezier(.22,1,.36,1); font-family: Georgia, serif; }
.lav-1918.is-on .lav-1918__paper { transform: rotate(-1deg) scale(1); }
.lav-1918__mast { text-align: center; border-top: 3px double #1f1a12; border-bottom: 3px double #1f1a12; padding: 10px 0; margin-bottom: 18px; }
.lav-1918__mast b { display: block; font-weight: 700; font-size: clamp(30px, 6vw, 46px); line-height: 1; letter-spacing: .01em; }
.lav-1918__mast small { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.lav-1918__paper p { font-size: 16px; line-height: 1.55; margin: 0 0 12px; }
.lav-1918__close { margin-top: 8px; font-family: var(--f-mono); font-size: 12px; background: #0a3623; color: #00e25d; border: 0; padding: 8px 14px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .lav-1918, .lav-1918__paper { transition: none; } }

/* ---------- Généré : rubriques et échelle ---------- */
.lav-rub__chip[data-c="#555555"] { background: #555555; }
.lav-rub__chip[data-c="#E1001A"] { background: #E1001A; }
.lav-rub__chip[data-c="#C43C8A"] { background: #C43C8A; }
.lav-rub__chip[data-c="#21B3BE"] { background: #21B3BE; }
.lav-rub__chip[data-c="#E2BE41"] { background: #E2BE41; }
.lav-rub__chip[data-c="#500E70"] { background: #500E70; }
.lav-rub__chip[data-c="#42B846"] { background: #42B846; }
.lav-rub__chip[data-c="#4A88A7"] { background: #4A88A7; }
.lav-rub__chip[data-c="#223754"] { background: #223754; }
.s-tag { font-size: 13px; color: #0a3623; } [data-theme="dark"] .s-tag { color: #00e25d; }
.s-h1 { font-weight: 900; font-size: 35px; line-height: 40px; }
.s-chapo { font-weight: 400; font-size: 21px; line-height: 28px; }
.s-date { font-size: 13px; line-height: 18px; color: var(--muted); }
.s-text { font-weight: 400; font-size: 20px; line-height: 30px; }
.s-h2 { font-weight: 700; font-size: 27px; line-height: 32px; }
.s-quote { font-weight: 900; font-style: italic; font-size: 24px; line-height: 34px; }
.s-cap { font-style: italic; font-size: 13px; line-height: 18px; }
.s-page { font-weight: 900; font-size: 24px; line-height: 32px; }
.s-chain { font-weight: 700; font-size: 20px; line-height: 26px; color: #0a3623; } [data-theme="dark"] .s-chain { color: #00e25d; }
.s-teaser { font-weight: 700; font-size: 18px; line-height: 24px; }
.s-desc { font-size: 14px; line-height: 19px; }
.s-tags { font-size: 12px; line-height: 22px; color: var(--muted); }
.s-top { font-weight: 900; font-size: 36px; line-height: 1; color: #00e25d; }