/* Gliveo Sites web : base commune aux 3 modèles (mise en page). Chaque modèle ajoute son style (templates/<modèle>/style.css). */
:root {
  --c-bg: #ffffff; --c-surface: #f6f5f2; --c-text: #1d1b20; --c-accent: #b4862f; --c-accent-text: #ffffff; --c-header: #ffffff; --c-footer: #1d1b20;
  --f-head: system-ui, sans-serif; --f-body: system-ui, sans-serif; --radius: 12px;
  --c-muted: color-mix(in srgb, var(--c-text) 62%, var(--c-bg));
  --c-line: color-mix(in srgb, var(--c-text) 13%, transparent);
  --c-soft: color-mix(in srgb, var(--c-accent) 12%, var(--c-bg));
  --max: 1180px; --gap: clamp(16px, 2.4vw, 28px); --sec: clamp(48px, 7vw, 96px);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--c-bg); color: var(--c-text); font-family: var(--f-body); font-size: 16.5px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--f-head); line-height: 1.15; margin: 0 0 .5em; text-wrap: balance; }
p { margin: 0 0 1em; }
button, input, select, textarea { font: inherit; color: inherit; }
.ico { flex: none; vertical-align: -0.2em; }
.wrap { width: min(var(--max), calc(100% - 32px)); margin-inline: auto; }
.narrow { max-width: 760px; }
.muted { color: var(--c-muted); } .small { font-size: 14px; }
.skip { position: absolute; left: -9999px; } .skip:focus { left: 16px; top: 16px; z-index: 999; background: var(--c-accent); color: var(--c-accent-text); padding: 10px 14px; border-radius: 8px; }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: var(--radius); border: 1px solid var(--c-accent); background: var(--c-accent); color: var(--c-accent-text);
  font-weight: 600; text-decoration: none; cursor: pointer; transition: transform .15s, filter .15s, background .15s; line-height: 1.2; }
.btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.btn--ghost { background: transparent; color: inherit; border-color: color-mix(in srgb, currentColor 35%, transparent); }
.btn--ghost:hover { background: color-mix(in srgb, currentColor 8%, transparent); filter: none; }
.btn--sm { padding: 8px 14px; font-size: 14px; } .btn--lg { padding: 15px 28px; font-size: 17px; width: 100%; }

/* En-tête */
.hd { position: sticky; top: 0; z-index: 50; background: var(--c-header); color: var(--c-header-text, var(--c-text)); transition: box-shadow .2s; }
.hd.is-scrolled { box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.hd__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 74px; }
.hd__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.hd__logo { width: 42px; height: 42px; border-radius: calc(var(--radius) * .8); display: grid; place-items: center; font-weight: 800; background: var(--c-accent); color: var(--c-accent-text); flex: none; font-family: var(--f-head); }
.hd__logo--img { width: auto; height: 48px; max-width: 180px; object-fit: contain; background: none; border-radius: 0; }
.hd__name { font-family: var(--f-head); font-weight: 700; font-size: 19px; line-height: 1.15; display: block; }
.hd__tag { font-size: 12.5px; color: var(--c-muted); display: block; }
.hd__nav { display: flex; gap: 4px; align-items: center; }
.hd__nav a { text-decoration: none; padding: 9px 13px; border-radius: calc(var(--radius) * .7); font-weight: 500; font-size: 15px; }
.hd__nav a:hover, .hd__nav a.is-on { background: color-mix(in srgb, currentColor 9%, transparent); }
.hd__tools { display: flex; align-items: center; gap: 8px; }
.hd__cart { position: relative; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; padding: 9px 12px; border-radius: 99px; border: 1px solid var(--c-line); font-weight: 600; font-size: 14px; }
.hd__cart i { font-style: normal; background: var(--c-accent); color: var(--c-accent-text); border-radius: 99px; min-width: 20px; height: 20px; display: grid; place-items: center; font-size: 12px; padding: 0 5px; }
.hd__burger { display: none; background: none; border: 1px solid var(--c-line); border-radius: 10px; padding: 8px; cursor: pointer; }
@media (max-width: 920px) {
  .hd__burger { display: inline-flex; }
  .hd__nav { position: fixed; inset: 0 0 0 auto; width: min(320px, 86vw); flex-direction: column; align-items: stretch; gap: 2px; padding: 84px 18px 24px; background: var(--c-header); transform: translateX(100%); transition: transform .25s, visibility .25s; z-index: 60; overflow-y: auto; visibility: hidden; }
  .hd__nav a { font-size: 17px; padding: 13px 14px; }
  body.nav-open .hd { z-index: 70; }
  body.nav-open .hd__nav { transform: none; visibility: visible; box-shadow: -20px 0 50px rgba(0,0,0,.25); }
  body.nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 55; }
  .hd__close { display: inline-flex !important; position: absolute; top: 18px; right: 18px; }
}
.hd__close { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }

/* Haut de page (accueil) */
.hero { position: relative; overflow: hidden; }
.hero__inner, .slide__inner { position: relative; z-index: 2; display: grid; gap: var(--gap); align-items: center; }
.hero__kicker { text-transform: uppercase; letter-spacing: .14em; font-size: 13px; font-weight: 700; margin-bottom: 12px; color: var(--c-accent); }
.hero__title { font-size: clamp(34px, 5.4vw, 64px); margin-bottom: 16px; }
.hero__sub { font-size: clamp(17px, 1.6vw, 20px); max-width: 620px; opacity: .88; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }
.hero__media { margin: 0; }
.hero__media img { width: 100%; object-fit: cover; }
[data-slider] .slide { display: none; } [data-slider] .slide.is-on { display: block; animation: swfade .5s ease; }
@keyframes swfade { from { opacity: 0; } to { opacity: 1; } }
.slider__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.35); color: #fff; display: grid; place-items: center; cursor: pointer; }
.slider__arrow--prev { left: 14px; } .slider__arrow--next { right: 14px; }
.slider__dots { position: absolute; bottom: 16px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; z-index: 5; }
.slider__dots button { width: 9px; height: 9px; border-radius: 99px; border: 0; background: rgba(255,255,255,.45); cursor: pointer; padding: 0; transition: width .2s; }
.slider__dots button.is-on { width: 26px; background: var(--c-accent); }

/* Sections */
.sec { padding: var(--sec) 0; }
.sec + .sec { padding-top: 0; }
.sec__head { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: clamp(20px, 3vw, 34px); flex-wrap: wrap; }
.sec__title { font-size: clamp(26px, 3vw, 38px); margin: 0; }
.sec__lead { color: var(--c-muted); margin: 8px 0 0; max-width: 640px; }
.sec__more { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; text-decoration: none; color: var(--c-accent); }
.pg-head { padding: clamp(40px, 6vw, 80px) 0 clamp(8px, 2vw, 20px); }
.pg-title { font-size: clamp(32px, 4.6vw, 54px); margin: 0 0 10px; }
.pg-lead { font-size: 18px; color: var(--c-muted); max-width: 720px; }
.pg-head + .sec, .pg-head + div + .sec { padding-top: clamp(24px, 3vw, 40px); }
.grid { display: grid; gap: var(--gap); grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.grid--1 { --cols: 1; max-width: 860px; } .grid--2 { --cols: 2; } .grid--3 { --cols: 3; } .grid--4 { --cols: 4; }
@media (max-width: 900px) { .grid--3, .grid--4 { --cols: 2; } }
@media (max-width: 600px) { .grid--2, .grid--3, .grid--4 { --cols: 1; } }
.rich > *:last-child { margin-bottom: 0; }
.rich a { color: var(--c-accent); }
.rich blockquote { margin: 1em 0; padding-left: 18px; border-left: 3px solid var(--c-accent); font-style: italic; }
.intro { max-width: 800px; font-size: 18px; margin: 0 auto clamp(28px, 4vw, 48px); text-align: center; }
.empty { color: var(--c-muted); padding: 28px; border: 1px dashed var(--c-line); border-radius: var(--radius); text-align: center; }
.notice { padding: 14px 18px; border-radius: var(--radius); margin: 18px 0; font-weight: 500; }
.notice--ok { background: color-mix(in srgb, #2f9e62 16%, var(--c-bg)); border: 1px solid color-mix(in srgb, #2f9e62 40%, transparent); }
.notice--error { background: color-mix(in srgb, #d0453a 14%, var(--c-bg)); border: 1px solid color-mix(in srgb, #d0453a 40%, transparent); }
.badge { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 12.5px; font-weight: 700; background: var(--c-accent); color: var(--c-accent-text); vertical-align: middle; }
.badge--off { background: color-mix(in srgb, var(--c-text) 14%, var(--c-bg)); color: var(--c-text); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; border-radius: 99px; border: 1px solid var(--c-line); background: transparent; cursor: pointer; text-decoration: none; font-size: 14.5px; font-weight: 500; }
.chip.is-on, .chip:hover { background: var(--c-accent); color: var(--c-accent-text); border-color: var(--c-accent); }
.chips--nav { margin: 18px 0 0; }

/* Cartes */
.card { display: flex; flex-direction: column; background: var(--c-surface); border-radius: var(--radius); overflow: hidden; }
.card__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.card:hover .card__img img { transform: scale(1.04); }
.card__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card__title { font-size: 20px; margin: 0; }
.card__meta { font-size: 13px; color: var(--c-muted); margin: 0; text-transform: uppercase; letter-spacing: .06em; }
.card__text { color: var(--c-muted); margin: 0; }
.card__link { margin-top: auto; padding-top: 8px; font-weight: 600; text-decoration: none; color: var(--c-accent); display: inline-flex; gap: 6px; align-items: center; }

/* À propos */
.about { display: grid; gap: clamp(24px, 5vw, 64px); align-items: center; }
.about--img { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.about--right .about__img { order: 2; }
.about__img { margin: 0; } .about__img img { width: 100%; border-radius: var(--radius); object-fit: cover; max-height: 640px; }
.about__quote { font-family: var(--f-head); font-size: clamp(20px, 2.2vw, 26px); margin: 0 0 20px; line-height: 1.35; }
@media (max-width: 800px) { .about--img { grid-template-columns: 1fr; } .about--right .about__img { order: 0; } }

/* Photos et lightbox */
.gal { columns: 4 240px; column-gap: 12px; }
.gal__item { display: block; margin-bottom: 12px; break-inside: avoid; border-radius: calc(var(--radius) * .7); overflow: hidden; cursor: zoom-in; }
.gal__item img { width: 100%; transition: transform .4s, opacity .3s; }
.gal__item:hover img { transform: scale(1.03); }
.gal__item.is-hidden, .prod.is-hidden { display: none; }
[hidden] { display: none !important; }
.lb { position: fixed; inset: 0; z-index: 200; background: rgba(8,8,10,.92); display: grid; place-items: center; padding: 56px 16px; }
.lb img { max-width: 100%; max-height: 82vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lb figcaption { color: #eee; text-align: center; margin-top: 12px; font-size: 15px; }
.lb button { position: absolute; background: rgba(255,255,255,.12); border: 0; color: #fff; width: 46px; height: 46px; border-radius: 12px; cursor: pointer; display: grid; place-items: center; }
.lb__close { top: 14px; right: 14px; } .lb__prev { left: 14px; top: 50%; } .lb__next { right: 14px; top: 50%; }

/* Vidéos */
.video__frame { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; border-radius: var(--radius); overflow: hidden; background: #000; cursor: pointer; }
.video__frame img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity .2s; }
.video__frame:hover img { opacity: 1; }
.video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__play { position: absolute; inset: 0; margin: auto; width: 68px; height: 68px; border-radius: 50%; background: var(--c-accent); color: var(--c-accent-text); display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.video__title { font-size: 18px; margin: 14px 0 4px; } .video__text { color: var(--c-muted); }

/* Documents */
.docs { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.doc { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--radius); background: var(--c-surface); text-decoration: none; }
.doc img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.doc__ico { width: 56px; height: 56px; border-radius: 8px; display: grid; place-items: center; background: var(--c-soft); color: var(--c-accent); }
.doc__body { flex: 1; display: grid; } .doc__body small { color: var(--c-muted); } .doc__dl { color: var(--c-accent); }

/* Agenda */
.events { display: grid; gap: 12px; }
.ev { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 18px 20px; border-radius: var(--radius); background: var(--c-surface); }
.ev__date { text-align: center; line-height: 1.05; display: grid; padding: 10px 6px; border-radius: calc(var(--radius) * .8); background: var(--c-accent); color: var(--c-accent-text); }
.ev__date b { font-size: 30px; font-family: var(--f-head); } .ev__date span { text-transform: uppercase; font-size: 13px; font-weight: 700; letter-spacing: .05em; } .ev__date small { font-size: 11.5px; opacity: .85; }
.ev__title { font-size: 19px; margin: 0 0 4px; } .ev__meta { margin: 0; color: var(--c-muted); font-size: 14.5px; display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; }
.ev__text { margin: 8px 0 0; font-size: 15px; }
.ev--annule .ev__title { text-decoration: line-through; opacity: .7; }
.events--past .ev { opacity: .7; } .events--past .ev__date { background: color-mix(in srgb, var(--c-text) 18%, var(--c-bg)); color: var(--c-text); }
@media (max-width: 640px) { .ev { grid-template-columns: 64px minmax(0, 1fr); } .ev .btn { grid-column: 1 / -1; } .ev__date b { font-size: 24px; } }

/* Musique */
.albums { display: grid; gap: clamp(20px, 3vw, 32px); }
.album { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; padding: clamp(16px, 2vw, 24px); border-radius: var(--radius); background: var(--c-surface); }
.album__cover { aspect-ratio: 1; border-radius: calc(var(--radius) * .8); overflow: hidden; background: var(--c-soft); display: grid; place-items: center; color: var(--c-accent); }
.album__cover img { width: 100%; height: 100%; object-fit: cover; }
.album__year { margin: 0; color: var(--c-accent); font-weight: 700; font-size: 14px; } .album__title { font-size: clamp(22px, 2.4vw, 30px); margin: 2px 0 8px; } .album__text { color: var(--c-muted); }
.sc-player { width: 100%; height: 166px; border: 0; border-radius: calc(var(--radius) * .7); margin-top: 14px; }
.album__links { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; align-items: center; }
.tracks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 2px; }
.track { position: relative; display: grid; grid-template-columns: 36px 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 10px; overflow: hidden; }
.track:hover, .track.is-on { background: color-mix(in srgb, var(--c-text) 6%, transparent); }
.track__play { width: 34px; height: 34px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--c-accent); color: var(--c-accent-text); cursor: pointer; }
.track__n { color: var(--c-muted); font-size: 14px; text-align: right; } .track__time { color: var(--c-muted); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.track__bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; } .track__bar i { display: block; height: 100%; width: 0; background: var(--c-accent); }
@media (max-width: 700px) { .album { grid-template-columns: 1fr; } .album__cover { max-width: 320px; } }

/* Produits */
.prods { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.prod { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; background: var(--c-surface); }
.prod__img { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--c-soft); }
.prod__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; } .prod:hover .prod__img img { transform: scale(1.04); }
.prod__noimg { display: block; width: 100%; height: 100%; min-height: 160px; background: linear-gradient(135deg, var(--c-soft), color-mix(in srgb, var(--c-accent) 25%, var(--c-bg))); }
.prod__badge { position: absolute; top: 10px; left: 10px; }
.prod__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.prod__cat { margin: 0; font-size: 12.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--c-muted); }
.prod__title { font-size: 18px; margin: 0; } .prod__title a { text-decoration: none; }
.prod__text { color: var(--c-muted); font-size: 14.5px; margin: 0; }
.prod__foot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.price b { font-size: 19px; } .price s { color: var(--c-muted); font-size: 14px; margin-right: 4px; }
.crumbs { color: var(--c-muted); font-size: 14px; margin-bottom: 18px; } .crumbs a { color: var(--c-accent); text-decoration: none; }
.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: start; }
.product__main { display: block; border-radius: var(--radius); overflow: hidden; cursor: zoom-in; } .product__main img { width: 100%; }
.product__thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 8px; } .product__thumbs img { aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.product__price { font-size: 22px; margin: 6px 0 18px; } .product__price b { font-size: 30px; }
.product__buy { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; margin-bottom: 24px; }
.qty { display: grid; gap: 4px; font-size: 13px; color: var(--c-muted); } .qty input { width: 84px; }
.product__desc { margin-top: 10px; } .product__ask { margin-top: 28px; padding: 22px; border-radius: var(--radius); background: var(--c-surface); }
.product__ask .sec__title { font-size: 22px; margin-bottom: 12px; }
@media (max-width: 800px) { .product { grid-template-columns: 1fr; } }

/* Formulaires */
.form { display: grid; gap: 14px; }
.form__row { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; } .form__row--3 { grid-template-columns: 1fr 2fr 1fr; }
@media (max-width: 600px) { .form__row, .form__row--3 { grid-template-columns: 1fr; } }
.field { display: grid; gap: 6px; font-weight: 600; font-size: 14px; } .field small { font-weight: 400; color: var(--c-muted); }
.field input, .field textarea, .field select, .qty input { width: 100%; padding: 12px 14px; border-radius: calc(var(--radius) * .7); border: 1px solid var(--c-line); background: color-mix(in srgb, var(--c-bg) 92%, var(--c-text)); font-weight: 400; font-size: 16px; }
.field input:focus, .field textarea:focus { outline: 2px solid color-mix(in srgb, var(--c-accent) 60%, transparent); border-color: var(--c-accent); }
.form__legal { font-size: 13px; color: var(--c-muted); margin: 0; }
.form .btn { justify-self: start; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; } .check input { margin-top: 4px; }

/* Contact */
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 64px); align-items: start; }
.contact__list { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 14px; }
.contact__list li { display: flex; gap: 12px; align-items: flex-start; } .contact__list .ico { color: var(--c-accent); margin-top: 2px; } .contact__list a { text-decoration: none; }
.contact__form { padding: clamp(20px, 3vw, 32px); border-radius: var(--radius); background: var(--c-surface); }
.socials { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.socials a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--c-line); text-decoration: none; transition: background .15s, color .15s; }
.socials a:hover { background: var(--c-accent); color: var(--c-accent-text); border-color: var(--c-accent); }
.map { margin-top: var(--gap); border-radius: var(--radius); overflow: hidden; } .map iframe { width: 100%; height: 360px; border: 0; display: block; }
@media (max-width: 800px) { .contact { grid-template-columns: 1fr; } }

/* Encadré d'appel */
.cta-box { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: clamp(24px, 4vw, 44px); border-radius: var(--radius); background: var(--c-soft); flex-wrap: wrap; margin-top: var(--gap); }
.cta-box h2, .cta-box h3 { margin: 0 0 6px; font-size: clamp(22px, 2.6vw, 30px); } .cta-box p { margin: 0; color: var(--c-muted); }
.cta-box .form { flex: 1 1 380px; max-width: 560px; }

/* Panier et commande */
.cart { display: grid; gap: 10px; }
.cart__line { display: grid; grid-template-columns: 72px minmax(0, 1fr) 90px 100px 36px; gap: 14px; align-items: center; padding: 12px; border-radius: var(--radius); background: var(--c-surface); }
.cart__img { width: 72px; height: 72px; border-radius: 8px; overflow: hidden; background: var(--c-soft); } .cart__img img { width: 100%; height: 100%; object-fit: cover; }
.cart__title { display: grid; } .cart__title a { text-decoration: none; font-weight: 600; } .cart__title small { color: var(--c-muted); }
.cart__qty input { width: 80px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--c-line); background: transparent; }
.cart__sum { text-align: right; } .cart__rm { background: none; border: 0; cursor: pointer; color: var(--c-muted); padding: 6px; }
.cart__total { display: flex; justify-content: space-between; font-size: 22px; padding: 18px 12px; border-top: 2px solid var(--c-text); margin-top: 16px; }
.cart__actions { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
@media (max-width: 640px) { .cart__line { grid-template-columns: 56px minmax(0, 1fr) 70px; } .cart__img { width: 56px; height: 56px; } .cart__sum { grid-column: 2; text-align: left; } }
.checkout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.checkout .sec__title { font-size: 22px; margin: 8px 0 4px; }
.checkout__sum { position: sticky; top: 96px; padding: 22px; border-radius: var(--radius); background: var(--c-surface); }
.sum__line { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 8px; } .sum__total { border-top: 1px solid var(--c-line); padding-top: 10px; font-size: 20px; }
.paylist { display: grid; gap: 8px; }
.payopt { display: flex; gap: 12px; padding: 14px 16px; border: 1px solid var(--c-line); border-radius: var(--radius); cursor: pointer; align-items: flex-start; }
.payopt:has(input:checked) { border-color: var(--c-accent); background: var(--c-soft); } .payopt span { display: grid; } .payopt small { color: var(--c-muted); }
.thanks { text-align: center; } .thanks__ico { width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; background: var(--c-accent); color: var(--c-accent-text); }
@media (max-width: 860px) { .checkout { grid-template-columns: 1fr; } .checkout__sum { position: static; order: -1; } }

/* Pied de page */
.ft { background: var(--c-footer); color: var(--c-footer-text, #f4f2ee); padding: clamp(40px, 6vw, 72px) 0 24px; margin-top: var(--sec); }
.ft a { text-decoration: none; } .ft a:hover { text-decoration: underline; }
.ft__cols { display: grid; grid-template-columns: 2fr 1fr 1.4fr; gap: var(--gap); }
.ft__title { font-family: var(--f-head); font-size: 20px; margin: 0 0 10px; } .ft h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; opacity: .7; margin: 0 0 12px; font-family: var(--f-body); }
.ft ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ft .socials a { border-color: color-mix(in srgb, currentColor 30%, transparent); }
.ft__legal { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 36px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); font-size: 13.5px; opacity: .75; }
@media (max-width: 760px) { .ft__cols { grid-template-columns: 1fr; } }

/* Lecteur audio flottant */
.player { position: fixed; left: 50%; bottom: 16px; transform: translate(-50%, 140%); z-index: 90; display: flex; gap: 12px; align-items: center; padding: 10px 16px 10px 10px; border-radius: 99px; background: var(--c-text); color: var(--c-bg); box-shadow: 0 14px 40px rgba(0,0,0,.35); transition: transform .3s; max-width: calc(100% - 24px); }
.player.is-on { transform: translate(-50%, 0); }
.player button { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--c-accent); color: var(--c-accent-text); display: grid; place-items: center; cursor: pointer; flex: none; }
.player span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14.5px; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Carte « Merci » après l'envoi d'un formulaire */
.sent { scroll-margin-top: 110px; text-align: center; padding: clamp(28px, 5vw, 48px) clamp(18px, 4vw, 36px); background: var(--c-surface); border-radius: var(--radius); animation: sent-in .45s ease-out both; }
.sent__icon { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--c-accent); color: var(--c-accent-text, #fff); margin-bottom: 18px; box-shadow: 0 0 0 10px color-mix(in srgb, var(--c-accent) 16%, transparent); }
.sent__title { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2; margin: 0 0 10px; }
.sent__text { margin: 0 auto 14px; max-width: 46ch; color: var(--c-muted); font-size: 16.5px; }
.sent__mail { margin: 0 auto 22px; font-size: 15px; }
.sent__mail small { color: var(--c-muted); }
@keyframes sent-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sent { animation: none; } }

/* Avis clients */
.stars { display: inline-flex; gap: 1px; color: #e3a21a; vertical-align: -3px; }
.rv-avg { margin: 6px 0 0; color: var(--c-muted); } .rv-avg b { color: var(--c-text); }
.rv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(14px, 2vw, 22px); }
.rv { margin: 0; display: flex; flex-direction: column; gap: 14px; padding: clamp(18px, 2.4vw, 26px); background: var(--c-surface); border-radius: var(--radius); }
.rv__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.rv__src { font-size: 12px; font-weight: 600; color: var(--c-muted); border: 1px solid var(--c-line); border-radius: 99px; padding: 2px 10px; }
.rv__text { margin: 0; font-size: 16px; line-height: 1.65; flex: 1; }
.rv__text::before { content: "“"; display: block; font: 700 46px/0.6 Georgia, serif; color: var(--c-accent); margin-bottom: 6px; opacity: .55; }
.rv__who { display: flex; gap: 12px; align-items: center; } .rv__who span:last-child { display: grid; } .rv__who small { color: var(--c-muted); font-size: 13px; }
.rv__ini { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: color-mix(in srgb, var(--c-accent) 18%, var(--c-bg)); color: var(--c-text); }
.rv-empty { color: var(--c-muted); }
.rv-form { margin-top: clamp(24px, 4vw, 40px); text-align: center; scroll-margin-top: 110px; }
.rv-form > summary { list-style: none; display: inline-flex; cursor: pointer; } .rv-form > summary::-webkit-details-marker { display: none; }
.rv-form[open] > summary { display: none; }
.rv-form > form { max-width: 720px; margin: 0 auto; text-align: left; padding: clamp(18px, 3vw, 32px); background: var(--c-surface); border-radius: var(--radius); }
.rv-form .sent { max-width: 720px; margin: 0 auto; }
.rv-pick { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.rv-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rv-pick label { font-size: 34px; line-height: 1; cursor: pointer; color: color-mix(in srgb, var(--c-text) 22%, transparent); transition: color .15s, transform .15s; }
.rv-pick label:hover, .rv-pick label:hover ~ label, .rv-pick input:checked ~ label { color: #e3a21a; }
.rv-pick input:focus-visible + label { outline: 2px solid var(--c-accent); outline-offset: 2px; border-radius: 4px; }
.rv-pick label:hover { transform: scale(1.12); }

/* Prestations (4 blocs au plus) */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: clamp(18px, 3vw, 34px); }
.svc { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.svc__ico { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: var(--c-accent); color: var(--c-accent-text); margin-bottom: 6px; }
.svc__img { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; margin-bottom: 6px; background: var(--c-surface); }
.svc__img img { width: 100%; height: 100%; object-fit: cover; }
.svc__title { margin: 0; font-size: clamp(19px, 1.7vw, 23px); }
.svc__text { margin: 0; color: var(--c-muted); line-height: 1.6; max-width: 34ch; }
.svc__link { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; color: var(--c-accent); text-decoration: none; margin-top: 4px; }

/* Aperçu de « Mon site » : bloc coché mais encore vide */
.pv-empty { padding: 20px 0; }
.pv-empty__box { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 26px 18px; border: 2px dashed color-mix(in srgb, var(--c-text) 25%, transparent); border-radius: var(--radius); color: var(--c-text); }
.pv-empty__box span { color: var(--c-muted); } .pv-empty__box small { font-size: 12px; color: var(--c-muted); opacity: .8; }

/* ---------------- Plugin Partitions ---------------- */
.sc-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 18px; }
.sc-find { display: flex; align-items: center; gap: 8px; flex: 1 1 340px; max-width: 560px; padding: 4px 4px 4px 14px; border: 1px solid var(--c-line); border-radius: 99px; background: var(--c-surface); color: var(--c-muted); }
.sc-find:focus-within { border-color: var(--c-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 18%, transparent); }
.sc-find input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 9px 4px; font: inherit; font-size: 16px; color: var(--c-text); outline: none; }
.sc-count { margin: 0; color: var(--c-muted); font-size: 15px; } .sc-count b { color: var(--c-text); }
.sc-cats .chip small { opacity: .65; font-size: 12.5px; }
.sc-az { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 2px; padding: 8px 0; margin-bottom: 10px; background: var(--c-bg); border-bottom: 1px solid var(--c-line); }
.sc-az a, .sc-az span { min-width: 28px; padding: 4px 6px; text-align: center; border-radius: 6px; font-weight: 600; font-size: 14px; text-decoration: none; }
.sc-az a:hover { background: var(--c-soft); color: var(--c-accent); }
.sc-az span, .sc-az a.is-off { color: var(--c-line); pointer-events: none; }
.sc-group { display: contents; }
/* La lettre est une case de la grille : les partitions s'enchaînent sans trous, A, B, C… restent bien visibles */
.sc-letter { margin: 0; scroll-margin-top: 70px; display: grid; place-items: center; aspect-ratio: 1 / 1.3; border-radius: var(--radius); background: var(--c-soft); color: var(--c-accent); border: 1px solid color-mix(in srgb, var(--c-accent) 25%, transparent); font-family: var(--f-head); font-size: clamp(40px, 5vw, 64px); line-height: 1; }
.sc-letter span { opacity: .95; }
.sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 18px; }
.sc-card { display: grid; grid-template-rows: auto 1fr auto; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-surface); overflow: hidden; transition: transform .15s, box-shadow .15s; }
.sc-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.08); }
.sc-card__pv { position: relative; display: block; aspect-ratio: 1 / 1.3; background: #fff; overflow: hidden; border-bottom: 1px solid var(--c-line); }
.sc-card__pv img, .sc-card__pv canvas { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.sc-card__ph { width: 100%; height: 100%; display: grid; place-items: center; background: var(--c-soft); color: var(--c-accent); }
.sc-card__zoom { position: absolute; inset: auto 8px 8px auto; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 99px; background: var(--c-accent); color: var(--c-accent-text); font-size: 13px; font-weight: 600; opacity: 0; transform: translateY(4px); transition: .15s; }
.sc-card__pv:hover .sc-card__zoom, .sc-card__pv:focus-visible .sc-card__zoom { opacity: 1; transform: none; }
@media (hover: none) { .sc-card__zoom { opacity: 1; transform: none; } }
.sc-card__body { padding: 10px 12px 4px; min-width: 0; }
.sc-card__body h3 { margin: 0; font-size: 15.5px; line-height: 1.3; overflow-wrap: anywhere; }
.sc-card__body p { margin: 3px 0 0; font-size: 13px; color: var(--c-muted); }
.sc-card__dl { display: flex; align-items: center; gap: 6px; padding: 8px 12px 12px; font-size: 14px; font-weight: 600; color: var(--c-accent); text-decoration: none; }
.sc-card__dl:hover span { text-decoration: underline; }
.sc-viewer { width: min(1000px, 94vw); height: 92vh; padding: 0; border: 0; border-radius: var(--radius); background: var(--c-surface); color: var(--c-text); overflow: hidden; }
.sc-viewer[open] { display: grid; grid-template-rows: auto 1fr; }
.sc-viewer::backdrop { background: rgba(10, 8, 14, .7); }
.sc-viewer__head { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 18px; border-bottom: 1px solid var(--c-line); }
.sc-viewer__head b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-viewer__x { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.sc-viewer__x:hover { background: var(--c-soft); }
.sc-viewer iframe { width: 100%; height: 100%; border: 0; background: #525659; }
@media (max-width: 560px) { .sc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .sc-card__body h3 { font-size: 14.5px; } .sc-letter { font-size: 40px; } }