/* Polices hébergées sur le site (licence SIL OFL, voir assets/fonts) */
@font-face { font-family: "Figtree"; src: url("/assets/fonts/figtree-var.woff") format("woff"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/assets/fonts/figtree-italic-var.woff") format("woff"); font-weight: 300 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/assets/fonts/instrument-serif.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/assets/fonts/instrument-serif-italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }

/* Studio DG — feuille de style principale
   Direction provisoire : tout se règle depuis les variables ci-dessous. */

:root {
  --paper: #EEEAE7;       /* fond : papier légèrement rosé */
  --card: #FFFFFF;        /* cartes */
  --offset: #E4DFDB;      /* panneaux secondaires */
  --ink: #0E0E10;         /* encre */
  --ink-2: #57545A;       /* texte secondaire */
  --rule: rgba(14,14,16,.12);
  --accent: #FFE234;      /* jaune quadri : la pastille Studio DG+ */
  --accent-ink: #0E0E10;
  --c: #00A3E0; --m: #E6007E; --y: #FFE234;   /* trois encres CMJ pour les dégradés */
  --danger: #B3261E;
  --ok: #1E6B3A;

  --font: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --wide: 100%;

  --s-1: .875rem; --s0: 1.0625rem; --s1: 1.25rem; --s2: 1.625rem;
  --s3: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  --s4: clamp(2.4rem, 1.7rem + 3vw, 3.9rem);
  --s5: clamp(3rem, 1.9rem + 4.6vw, 5.4rem);

  --gutter: clamp(16px, 4vw, 40px);
  --max: 1180px;
  --section: clamp(64px, 9vw, 120px);
  --radius: 10px;
  --radius-l: 22px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font); font-size: var(--s0); line-height: 1.55;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 6px var(--accent); }
::selection { background: var(--accent); color: var(--ink); }

h1, h2, h3, .display {
  font-stretch: var(--wide); font-variation-settings: "wdth" 125;
  font-weight: 800; letter-spacing: -.025em; line-height: 1; margin: 0;
}
h1 { font-size: var(--s5); line-height: .92; }
h2 { font-size: var(--s4); }
h3 { font-size: var(--s2); line-height: 1.1; letter-spacing: -.015em; }
p { margin: 0 0 1em; max-width: 64ch; }
.lead { font-size: var(--s1); line-height: 1.45; max-width: 46ch; }
.muted { color: var(--ink-2); }
.small { font-size: var(--s-1); }

.skip { position: absolute; left: -999px; top: 8px; background: var(--accent); padding: 10px 14px; z-index: 100; }
.skip:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section--offset { background: var(--offset); }
.section--ink { background: var(--ink); color: var(--paper); }
.section--ink .muted { color: #B9BBC4; }
.section-head { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; margin-bottom: clamp(40px, 6vw, 80px); align-items: end; }
.section-head h2 { grid-column: 1 / span 8; }
.section-head p { grid-column: 9 / span 4; margin: 0; }
@media (max-width: 900px) { .section-head > * { grid-column: 1 / -1 !important; } }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 52px; padding: 0 26px; border: 2px solid var(--ink); border-radius: var(--radius);
  font: inherit; font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer;
  background: transparent; color: var(--ink);
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn--primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn--primary:hover { background: var(--ink); border-color: var(--ink); color: var(--accent); }
.section--ink .btn { border-color: var(--paper); color: var(--paper); }
.section--ink .btn:hover { background: var(--paper); color: var(--ink); }
.section--ink .btn--primary { color: var(--ink); border-color: var(--accent); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.link { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .25em; }
.link:hover { text-decoration-color: var(--accent); }

/* ---------- Bandeau d'aperçu ---------- */
.preview-bar { background: var(--ink); color: var(--paper); font-size: var(--s-1); }
.preview-bar .wrap { display: flex; gap: 12px; align-items: center; min-height: 36px; padding-block: 6px; }
.preview-bar b { background: var(--accent); color: var(--ink); padding: 1px 8px; border-radius: 2px; font-weight: 700; }

/* ---------- En-tête ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.94); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.site-header.is-scrolled { border-color: var(--rule); }
.site-header .wrap { display: flex; align-items: center; gap: 24px; min-height: 76px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; font-variation-settings: "wdth" 125; }
.logo svg { width: 28px; height: 28px; }
.logo span small { font-weight: 800; background: var(--accent); padding: 0 4px; margin-left: 1px; }
.nav { margin-left: auto; display: flex; align-items: center; gap: clamp(16px, 2.2vw, 32px); }
.nav a { text-decoration: none; font-weight: 600; padding-block: 6px; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-color: var(--ink); }
.nav .nav-client { font-weight: 500; color: var(--ink-2); display: inline-flex; gap: 6px; align-items: center; }
.nav .btn { min-height: 44px; padding: 0 18px; border-bottom-width: 2px; }
.nav-toggle { display: none; margin-left: auto; background: none; border: 0; padding: 10px; cursor: pointer; font: inherit; font-weight: 700; align-items: center; gap: 10px; color: var(--ink); }
.nav-toggle i { display: block; width: 22px; height: 2px; background: currentColor; position: relative; transition: background .2s; }
.nav-toggle i::before, .nav-toggle i::after { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; transition: transform .25s var(--ease); }
.nav-toggle i::before { top: -7px; } .nav-toggle i::after { top: 7px; }
.nav-toggle[aria-expanded="true"] i { background: transparent; }
.nav-toggle[aria-expanded="true"] i::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] i::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }
  .nav { position: fixed; inset: 76px 0 0 0; background: var(--paper); flex-direction: column; align-items: stretch; gap: 0; padding: 12px var(--gutter) 32px; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .2s, transform .25s var(--ease), visibility 0s .25s; overflow-y: auto; }
  .nav.is-open { transform: none; opacity: 1; visibility: visible; transition: opacity .2s, transform .25s var(--ease); }
  .nav a:not(.btn) { font-size: 2rem; font-weight: 800; font-variation-settings: "wdth" 125; letter-spacing: -.02em; padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .nav .nav-client { font-size: 1.1rem !important; font-weight: 600 !important; font-variation-settings: "wdth" 100 !important; color: var(--ink); }
  .nav .btn { margin-top: 24px; min-height: 56px; }
  body.nav-open { overflow: hidden; }
}

/* ---------- Héros de l'accueil ---------- */
.hero { padding-top: clamp(40px, 7vw, 104px); }
.hero h1 { max-width: 11ch; }
.hero-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; margin-top: clamp(28px, 4vw, 48px); align-items: end; }
.hero-grid .lead { grid-column: 1 / span 6; margin: 0; }
.hero-grid .hero-actions { grid-column: 7 / span 6; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.hero-how { font-size: var(--s-1); color: var(--ink-2); max-width: 44ch; margin: 0; }
.direct { display: inline-flex; align-items: center; gap: 12px; font-size: var(--s-1); }
.direct .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--offset); border: 1px dashed var(--ink-2); display: grid; place-items: center; font-weight: 800; font-size: .8rem; }
@media (max-width: 900px) { .hero-grid > * { grid-column: 1 / -1 !important; } }

/* La bande des douze mois : le détail signature (traits de coupe d'imprimerie) */
.year { margin-top: clamp(48px, 7vw, 96px); padding-bottom: 8px; }
.year-track { --edge: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); display: flex; gap: clamp(28px, 3vw, 40px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge); padding: 18px var(--edge) 26px; scrollbar-width: thin; }
.year-track::after { content: ""; flex: 0 0 1px; }
.year-track::-webkit-scrollbar { height: 6px; } .year-track::-webkit-scrollbar-thumb { background: var(--rule); }
.month { flex: 0 0 clamp(190px, 21vw, 280px); scroll-snap-align: start; margin: 0; }
.month figcaption { margin-top: 14px; display: flex; justify-content: space-between; gap: 8px; font-size: var(--s-1); }
.month figcaption b { font-variation-settings: "wdth" 125; font-weight: 800; font-size: 1rem; }
.year-note { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: var(--s-1); color: var(--ink-2); }

.crop { position: relative; }
.crop::before {
  content: ""; position: absolute; inset: -14px; pointer-events: none; --c: var(--ink);
  background:
    linear-gradient(var(--c),var(--c)) 0 13px / 9px 1px,
    linear-gradient(var(--c),var(--c)) 13px 0 / 1px 9px,
    linear-gradient(var(--c),var(--c)) 100% 13px / 9px 1px,
    linear-gradient(var(--c),var(--c)) calc(100% - 13px) 0 / 1px 9px,
    linear-gradient(var(--c),var(--c)) 0 calc(100% - 13px) / 9px 1px,
    linear-gradient(var(--c),var(--c)) 13px 100% / 1px 9px,
    linear-gradient(var(--c),var(--c)) 100% calc(100% - 13px) / 9px 1px,
    linear-gradient(var(--c),var(--c)) calc(100% - 13px) 100% / 1px 9px;
  background-repeat: no-repeat;
}
.js .year .month { opacity: 0; transform: translateY(28px); }
.js .year.is-in .month { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i) * 70ms); }
@media (prefers-reduced-motion: reduce) { .js .year .month { opacity: 1; transform: none; transition: none !important; } }

/* ---------- Étapes ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); counter-reset: step; }
.steps--4 { grid-template-columns: repeat(4, 1fr); }
.steps li { counter-increment: step; border-top: 2px solid var(--ink); padding-top: 20px; }
.steps li::before { content: counter(step); display: block; font-weight: 800; font-variation-settings: "wdth" 125; font-size: var(--s4); line-height: 1; margin-bottom: 20px; }
.steps h3 { font-size: var(--s1); font-variation-settings: "wdth" 112; margin-bottom: 10px; }
.steps p { color: var(--ink-2); margin: 0; }
.section--offset .steps p { color: #4C4F59; }
@media (max-width: 900px) { .steps, .steps--4 { grid-template-columns: 1fr; } .steps li::before { font-size: var(--s3); } }

/* ---------- Projets ---------- */
.projects { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(24px, 3vw, 40px); }
.project { grid-column: span 4; text-decoration: none; display: block; }
.projects--home .project:first-child { grid-column: span 7; grid-row: span 2; }
.projects--home .project:nth-child(2), .projects--home .project:nth-child(3) { grid-column: span 5; }
.project-media { background: var(--offset); overflow: hidden; }
.project-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .6s var(--ease); }
.projects--home .project:nth-child(n+2) .project-media img { aspect-ratio: 16 / 9; }
.project:hover .project-media img { transform: scale(1.025); }
.project-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; align-items: baseline; }
.project-meta h2, .project-meta h3 { font-size: var(--s1); font-variation-settings: "wdth" 112; letter-spacing: -.015em; line-height: 1.15; }
.project-meta span { color: var(--ink-2); font-size: var(--s-1); text-align: right; }
@media (max-width: 900px) { .project, .projects--home .project { grid-column: 1 / -1 !important; grid-row: auto !important; } .projects--home .project:nth-child(n+2) .project-media img { aspect-ratio: 16 / 9; } }

/* ---------- Index des créations (liste typographique) ---------- */
.index { list-style: none; margin: 0; padding: 0; border-top: 1px solid currentColor; }
.index li { border-bottom: 1px solid var(--rule); }
.section--ink .index li { border-color: #3A3D48; }
.index a { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr) 40px; gap: 24px; align-items: center; padding: clamp(18px, 2.4vw, 30px) 0; text-decoration: none; }
.index a h3 { font-size: var(--s3); transition: transform .35s var(--ease); }
.index a p { margin: 0; color: var(--ink-2); }
.section--ink .index a p { color: #B9BBC4; }
.index a svg { width: 32px; transition: transform .35s var(--ease); }
.index a:hover h3 { transform: translateX(10px); }
.index a:hover svg { transform: translateX(6px); }
.index a:hover { background: linear-gradient(var(--accent), var(--accent)) left bottom / 100% 3px no-repeat; }
@media (max-width: 760px) { .index a { grid-template-columns: 1fr 28px; } .index a p { grid-column: 1; } .index a svg { grid-row: 1; grid-column: 2; } }

/* ---------- Bénéfices ---------- */
.benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(24px, 3vw, 48px); }
.benefit { padding: 28px 0; border-top: 1px solid var(--rule); }
.benefit h3 { font-size: var(--s1); font-variation-settings: "wdth" 112; margin-bottom: 10px; }
.benefit p { margin: 0; color: var(--ink-2); }
@media (max-width: 900px) { .benefits { grid-template-columns: 1fr; } }

/* ---------- Formules ---------- */
.plans-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.plans-table th, .plans-table td { text-align: left; vertical-align: top; padding: 18px 20px; border-bottom: 1px solid var(--rule); }
.plans-table thead th { vertical-align: bottom; border-bottom: 2px solid var(--ink); padding-top: 28px; }
.plans-table tbody th { font-weight: 600; width: 28%; }
.plans-table tbody th small { display: block; font-weight: 400; color: var(--ink-2); margin-top: 4px; font-size: var(--s-1); line-height: 1.4; }
.plans-table .plan-name { font-size: var(--s2); font-weight: 800; font-variation-settings: "wdth" 125; letter-spacing: -.02em; display: block; }
.plans-table .plan-for { font-weight: 400; font-size: var(--s-1); color: var(--ink-2); display: block; margin-top: 8px; min-height: 3em; }
.plans-table .is-featured { background: #FFFBDA; }
.plans-table thead .is-featured { box-shadow: inset 0 6px 0 var(--accent); }
.plans-table tfoot td { border: 0; padding-top: 24px; }
.plan-badge { display: inline-block; background: var(--accent); font-size: .78rem; font-weight: 700; padding: 2px 8px; margin-bottom: 10px; border-radius: 2px; }
.plans-cards { display: none; }
.plan-card { border-top: 2px solid var(--ink); padding: 24px 0 32px; }
.plan-card.is-featured { border-top: 6px solid var(--accent); background: #FFFBDA; padding-inline: 16px; margin-inline: -16px; }
.plan-card h3 { font-size: var(--s3); }
.plan-card dl { margin: 20px 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.plan-card dt, .plan-card dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: .98rem; }
.plan-card dt { color: var(--ink-2); padding-right: 12px; }
@media (max-width: 900px) { .plans-table { display: none; } .plans-cards { display: block; } }

.todo { display: inline-block; font-size: .85em; font-weight: 600; color: var(--ink-2); border: 1px dashed #9A9CA4; padding: 1px 8px; border-radius: 2px; background: repeating-linear-gradient(-45deg, transparent 0 6px, rgba(26,28,36,.04) 6px 12px); }

.scope { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); margin-top: clamp(48px, 6vw, 80px); }
.scope h3 { font-size: var(--s1); font-variation-settings: "wdth" 112; margin-bottom: 16px; }
.scope ul { list-style: none; margin: 0; padding: 0; }
.scope li { padding: 12px 0 12px 32px; border-bottom: 1px solid var(--rule); position: relative; }
.scope li::before { content: ""; position: absolute; left: 0; top: 18px; width: 16px; height: 9px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); }
.scope .not li::before { width: 16px; height: 2px; border: 0; background: var(--ink); transform: none; top: 24px; }
.scope .not { background: var(--paper); padding: 28px; border: 2px solid var(--ink); }
.section--offset .scope .not { background: var(--paper); }
@media (max-width: 760px) { .scope { grid-template-columns: 1fr; } }

/* Demandes vs créations en cours */
.queue { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.queue-visual { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.queue-visual span { min-width: 64px; padding: 0 8px; height: 70px; text-align: center; line-height: 1.1; border: 2px solid var(--ink); background: var(--paper); display: grid; place-items: center; font-weight: 700; font-size: .8rem; }
.queue-visual span.on { background: var(--accent); border-color: var(--ink); height: 86px; }
.queue-legend { display: flex; gap: 20px; margin-top: 16px; font-size: var(--s-1); flex-wrap: wrap; }
.queue-legend i { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--ink); vertical-align: -2px; margin-right: 6px; }
.queue-legend i.on { background: var(--accent); }
@media (max-width: 760px) { .queue { grid-template-columns: 1fr; } }

/* ---------- Boutique ---------- */
.shop-split { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
@media (max-width: 900px) { .shop-split { grid-template-columns: 1fr; } }
.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: clamp(28px, 3vw, 40px) clamp(20px, 2.4vw, 32px); }
.products--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 560px) { .products--2 { grid-template-columns: 1fr 1fr; gap: 20px 14px; } }
.product-card { text-decoration: none; display: block; }
.product-card .project-media img { aspect-ratio: 1; }
.product-card:hover .project-media img { transform: scale(1.03); }
.product-card h3 { font-size: 1.15rem; font-variation-settings: "wdth" 112; margin-top: 14px; }
.product-card p { font-size: var(--s-1); color: var(--ink-2); margin: 6px 0 0; }
.product-card .price { display: block; margin-top: 8px; font-size: var(--s-1); font-weight: 700; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.filters button { font: inherit; font-weight: 600; font-size: .95rem; padding: 9px 16px; background: transparent; border: 1.5px solid var(--rule); color: var(--ink); cursor: pointer; border-radius: 999px; }
.filters button:hover { border-color: var(--ink); }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.family { margin-bottom: clamp(56px, 7vw, 96px); }
.family-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-bottom: 2px solid var(--ink); padding-bottom: 14px; margin-bottom: 28px; flex-wrap: wrap; }
.family-head h2 { font-size: var(--s3); }
.family-head p { margin: 0; color: var(--ink-2); }
.empty { border: 1.5px dashed var(--rule); padding: 28px; color: var(--ink-2); }

/* Deux chemins (fichier / création) */
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--ink); border: 2px solid var(--ink); }
.paths > div { background: var(--paper); padding: clamp(22px, 3vw, 36px); }
.paths h3 { font-size: var(--s1); font-variation-settings: "wdth" 112; margin-bottom: 10px; }
.paths p { margin: 0; color: var(--ink-2); }
.paths .price-line { margin-top: 18px; font-size: var(--s-1); color: var(--ink); font-weight: 600; }
@media (max-width: 700px) { .paths { grid-template-columns: 1fr; } }

/* ---------- Fiche produit ---------- */
.crumbs { font-size: var(--s-1); color: var(--ink-2); padding-top: 28px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--rule); }
.crumbs a { text-decoration: none; } .crumbs a:hover { text-decoration: underline; }
.pdp { display: grid; grid-template-columns: 6fr 6fr; gap: clamp(32px, 5vw, 80px); padding-top: 32px; align-items: start; }
.pdp-media { position: sticky; top: 100px; }
.pdp-media .main { background: var(--offset); }
.pdp-media .main img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.pdp h1 { font-size: var(--s3); margin-bottom: 20px; }
@media (max-width: 960px) { .pdp { grid-template-columns: 1fr; } .pdp-media { position: static; } .pdp-media .main img { aspect-ratio: 4/3; } }

/* ---------- Formulaires ---------- */
.form { display: grid; gap: 28px; }
.fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 18px; min-width: 0; }
.fieldset > legend { font-weight: 800; font-variation-settings: "wdth" 125; font-size: var(--s1); letter-spacing: -.01em; margin-bottom: 4px; padding: 0; display: flex; gap: 12px; align-items: baseline; }
.fieldset > legend .n { display: inline-grid; place-items: center; width: 28px; height: 28px; background: var(--ink); color: var(--paper); font-size: .85rem; border-radius: 50%; font-variation-settings: "wdth" 100; transform: translateY(-2px); }
.field { display: grid; gap: 8px; min-width: 0; }
.field label, .field .label { font-weight: 600; font-size: .95rem; }
.field .hint { font-size: var(--s-1); color: var(--ink-2); margin: 0; }
.field .opt { font-weight: 400; color: var(--ink-2); }
.input, select.input, textarea.input {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper);
  border: 1.5px solid #B9BAB3; border-radius: var(--radius); padding: 13px 14px; min-height: 52px;
  transition: border-color .15s, box-shadow .15s;
}
textarea.input { min-height: 140px; resize: vertical; line-height: 1.5; }
.input:hover { border-color: var(--ink-2); }
.input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--accent); }
.input[aria-invalid="true"] { border-color: var(--danger); }
.error-msg { color: var(--danger); font-size: var(--s-1); font-weight: 600; margin: 0; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 600px) { .row-2 { grid-template-columns: 1fr; } }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border: 1.5px solid #B9BAB3; border-radius: var(--radius); font-size: .95rem; cursor: pointer; transition: border-color .15s, background .15s; }
.chip input:hover + span { border-color: var(--ink); }
.chip input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--accent); }

.choice-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice-card { position: relative; }
.choice-card input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice-card span { display: block; height: 100%; padding: 18px; border: 2px solid #B9BAB3; border-radius: var(--radius); cursor: pointer; }
.choice-card b { display: block; font-size: 1.05rem; margin-bottom: 4px; }
.choice-card small { color: var(--ink-2); font-size: var(--s-1); line-height: 1.4; display: block; }
.choice-card input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink), 6px 6px 0 var(--accent); }
.choice-card input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 3px; }
@media (max-width: 480px) { .choice-cards { grid-template-columns: 1fr; } }

.sizes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.sizes label { display: grid; gap: 4px; text-align: center; font-size: .85rem; font-weight: 600; }
.sizes input { text-align: center; padding: 10px 4px; min-height: 46px; }
@media (max-width: 480px) { .sizes { grid-template-columns: repeat(3, 1fr); } }

.dropzone { border: 2px dashed #9A9CA4; border-radius: var(--radius); padding: 24px; text-align: center; position: relative; transition: background .15s, border-color .15s; }
.dropzone.is-over { background: #FFFBDA; border-color: var(--ink); }
.dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone p { margin: 0 auto; }
.file-list { list-style: none; padding: 0; margin: 10px 0 0; font-size: var(--s-1); display: grid; gap: 4px; }
.file-list li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 10px; background: var(--offset); }

.check { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--ink); flex: 0 0 auto; }
.hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }

/* Récapitulatif façon bon de commande */
.ticket { border: 2px solid var(--ink); background: var(--paper); }
.ticket-head { padding: 16px 20px; border-bottom: 2px solid var(--ink); display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.ticket-head b { font-variation-settings: "wdth" 125; font-weight: 800; font-size: 1.1rem; }
.ticket-head span { font-size: var(--s-1); color: var(--ink-2); }
.ticket dl { margin: 0; padding: 4px 20px; }
.ticket .line { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px dashed var(--rule); font-size: .95rem; }
.ticket .line:last-child { border-bottom: 0; }
.ticket dt { color: var(--ink-2); }
.ticket dd { margin: 0; text-align: right; font-weight: 600; }
.ticket .totals { border-top: 2px solid var(--ink); padding: 14px 20px; display: grid; gap: 8px; }
.ticket .totals .line { border: 0; padding: 0; }
.ticket .ticket-foot { padding: 16px 20px; background: var(--offset); font-size: var(--s-1); }
.ticket .ticket-foot p { margin: 0; }
.ticket-actions { padding: 20px; display: grid; gap: 12px; border-top: 2px solid var(--ink); }
.ticket-actions .btn { width: 100%; }

.notice { border-left: 4px solid var(--accent); background: #FFFBDA; padding: 14px 18px; font-size: .95rem; }
.notice--demo { border-left-color: var(--ink); background: var(--offset); }
.notice p { margin: 0; }
.notice p + p { margin-top: 6px; }
.form-status { min-height: 1px; }
.form-status .error { border-left: 4px solid var(--danger); background: #FCEDEC; padding: 14px 18px; color: #7E1A14; font-weight: 600; }
.btn .spinner { width: 18px; height: 18px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; display: none; }
.btn.is-loading .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

.confirm { border: 2px solid var(--ink); padding: clamp(24px, 4vw, 48px); }
.confirm h2 { font-size: var(--s3); margin-bottom: 16px; }
.confirm .ref { display: inline-block; background: var(--accent); font-weight: 800; padding: 4px 10px; margin-bottom: 20px; font-variant-numeric: tabular-nums; }
.confirm:focus { outline: none; }
.confirm ol { padding-left: 1.2em; }
.confirm li { margin-bottom: 6px; }

/* ---------- Pages de contenu ---------- */
.page-head { padding-top: clamp(40px, 7vw, 96px); padding-bottom: clamp(40px, 6vw, 80px); }
.page-head h1 { font-size: var(--s4); max-width: 16ch; }
.page-head .lead { margin-top: 24px; }
.cols { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.cols > .c-4 { grid-column: span 4; } .cols > .c-5 { grid-column: span 5; } .cols > .c-6 { grid-column: span 6; } .cols > .c-7 { grid-column: span 7; } .cols > .c-8 { grid-column: span 8; }
.cols > .push-1 { grid-column-start: auto; }
@media (max-width: 900px) { .cols > * { grid-column: 1 / -1 !important; } }
.list-plain { list-style: none; margin: 0; padding: 0; }
.list-plain li { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.list-plain li:first-child { border-top: 1px solid var(--rule); }
.tag-provisoire { display: inline-block; font-size: .8rem; font-weight: 700; background: var(--offset); border: 1px dashed var(--ink-2); padding: 2px 8px; border-radius: 2px; }
.placeholder-text { background: repeating-linear-gradient(-45deg, transparent 0 8px, rgba(26,28,36,.035) 8px 16px); padding: 14px 16px; border: 1px dashed #9A9CA4; color: var(--ink-2); }

.project-hero img { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--offset); }
.project-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); }
.project-gallery img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
@media (max-width: 700px) { .project-gallery { grid-template-columns: 1fr; } }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; border-top: 2px solid var(--ink); padding-top: 20px; }
.facts dt { font-size: var(--s-1); color: var(--ink-2); }
.facts dd { margin: 4px 0 0; font-weight: 600; }
@media (max-width: 700px) { .facts { grid-template-columns: 1fr 1fr; } }

/* Articles */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 40px); }
.post-card { text-decoration: none; display: flex; flex-direction: column; gap: 10px; border-top: 2px solid var(--ink); padding-top: 18px; }
.post-card .cat { font-size: var(--s-1); color: var(--ink-2); display: flex; gap: 10px; align-items: center; }
.post-card h3 { font-size: var(--s1); font-variation-settings: "wdth" 112; line-height: 1.15; }
.post-card p { color: var(--ink-2); margin: 0; font-size: .98rem; }
.post-card:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
.badge-draft { background: var(--accent); color: var(--ink); font-weight: 700; font-size: .75rem; padding: 1px 7px; border-radius: 2px; }
@media (max-width: 900px) { .posts { grid-template-columns: 1fr; } }

.article { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.article-body { grid-column: 3 / span 7; font-size: 1.125rem; line-height: 1.65; }
.article-aside { grid-column: 10 / span 3; font-size: var(--s-1); }
.article-aside nav { position: sticky; top: 110px; }
.article-aside ol { padding-left: 1.1em; margin: 10px 0 0; }
.article-aside li { margin-bottom: 8px; }
.article-body h2 { font-size: var(--s2); margin: 1.8em 0 .6em; font-variation-settings: "wdth" 112; scroll-margin-top: 100px; }
.article-body ul, .article-body ol { padding-left: 1.2em; } .article-body li { margin-bottom: .5em; }
.article-body p, .article-body li { max-width: 66ch; }
@media (max-width: 960px) { .article-body, .article-aside { grid-column: 1 / -1; } .article-aside { order: -1; } .article-aside nav { position: static; } }

/* FAQ */
.faq { border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 22px 0; font-weight: 700; font-size: 1.15rem; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: 0 0 18px; height: 18px; background: linear-gradient(var(--ink),var(--ink)) center/18px 2px no-repeat, linear-gradient(var(--ink),var(--ink)) center/2px 18px no-repeat; transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer { padding: 0 0 24px; color: var(--ink-2); max-width: 70ch; }
.faq .answer p { margin: 0; }

/* Studio / Dimitri */
.about { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 96px); align-items: center; }
.about img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.about blockquote { margin: 0 0 28px; font-size: var(--s2); font-weight: 800; font-variation-settings: "wdth" 112; line-height: 1.15; letter-spacing: -.015em; max-width: 22ch; }
@media (max-width: 900px) { .about { grid-template-columns: 1fr; } .about img { max-width: 420px; aspect-ratio: 1; } }

/* Appel à l'action final */
.cta-final { background: var(--accent); padding-block: clamp(80px, 12vw, 176px); }
.cta-final h2 { font-size: var(--s5); max-width: 12ch; line-height: .92; }
.cta-final .row { display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; margin-top: 40px; }
.cta-final p { margin: 0; max-width: 40ch; font-size: var(--s1); line-height: 1.4; }
.cta-final .btn { border-color: var(--ink); }
.cta-final .btn--primary { background: var(--ink); color: var(--accent); border-color: var(--ink); }
.cta-final .btn--primary:hover { background: transparent; color: var(--ink); }

/* Bannière croisée boutique / abonnement */
.cross { display: grid; grid-template-columns: 7fr 5fr; gap: 32px; align-items: center; border: 2px solid var(--ink); padding: clamp(24px, 4vw, 48px); }
.cross h2 { font-size: var(--s3); }
.cross .btn-row { justify-content: flex-end; }
@media (max-width: 800px) { .cross { grid-template-columns: 1fr; } .cross .btn-row { justify-content: flex-start; } }

/* Espace client */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.timeline li { display: grid; grid-template-columns: 28px 1fr auto; gap: 16px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.timeline .dot { width: 18px; height: 18px; border: 2px solid var(--ink); border-radius: 50%; margin-top: 3px; }
.timeline .done .dot { background: var(--ink); }
.timeline .current .dot { background: var(--accent); box-shadow: 0 0 0 4px #FFF4A8; }
.timeline .when { font-size: var(--s-1); color: var(--ink-2); }
.timeline h3 { font-size: 1.05rem; font-variation-settings: "wdth" 100; letter-spacing: 0; font-weight: 700; margin: 0 0 4px; }
.timeline p { margin: 0; font-size: .95rem; color: var(--ink-2); }
.gates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--ink); border: 2px solid var(--ink); }
.gates > div { background: var(--paper); padding: 24px; }
.gates h3 { font-size: 1.15rem; font-variation-settings: "wdth" 112; margin-bottom: 8px; }
.gates p { margin: 0; color: var(--ink-2); font-size: .95rem; }
@media (max-width: 800px) { .gates { grid-template-columns: 1fr; } }

/* Pied de page */
.site-footer { background: var(--ink); color: #D7D8DD; padding-block: clamp(64px, 8vw, 112px) 32px; font-size: .95rem; }
.site-footer a { text-decoration: none; color: #fff; } .site-footer a:hover { text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: 4fr 2fr 2fr 2fr 2fr; gap: 32px; }
.footer-grid h2 { font-size: .95rem; font-variation-settings: "wdth" 100; letter-spacing: 0; font-weight: 700; color: #fff; margin-bottom: 14px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-brand .logo { color: #fff; font-size: 1.6rem; margin-bottom: 16px; }
.footer-brand p { color: #B9BBC4; max-width: 34ch; }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 64px; padding-top: 24px; border-top: 1px solid #3A3D48; color: #9A9CA6; font-size: var(--s-1); }
.site-footer .todo { color: #C9CAD0; border-color: #6E7180; background: none; }
@media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }

/* Gestion locale des demandes */
.admin-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.admin-table th, .admin-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.admin-table select { font: inherit; padding: 6px; }

.mt-0 { margin-top: 0; } .mt-1 { margin-top: 16px; } .mt-2 { margin-top: 32px; } .mt-3 { margin-top: 56px; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 32px; }
[hidden] { display: none !important; }
.input, .chip input, .choice-card input, .check input { scroll-margin-top: 120px; }

.legal { max-width: 860px; padding-bottom: var(--section); }

/* =====================================================================
   THÈME 2 — « abonnement » : colonne encadrée, Figtree + serif italique,
   cartes arrondies, dégradés CMJ. Surcharge le thème de base ci-dessus.
   ===================================================================== */
body { font-variation-settings: normal; font-size: 1rem; line-height: 1.55; }
h1, h2, h3, .display { font-stretch: normal; font-variation-settings: normal; font-weight: 500; letter-spacing: -.045em; line-height: .98; }
h3 { letter-spacing: -.025em; line-height: 1.15; font-weight: 600; }
h1 em, h2 em, h3 em, .display em, blockquote em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; font-size: 1.1em; line-height: .8; }
.lead { font-size: 1.15rem; color: var(--ink-2); }

.frame { max-width: var(--max); margin-inline: auto; border-inline: 1px solid var(--rule); min-height: 100vh; }
.frame .wrap { max-width: none; }

/* En-tête */
.site-header { background: color-mix(in srgb, var(--paper) 88%, transparent); }
.site-header .wrap { min-height: 72px; }
.logo { font-variation-settings: normal; font-weight: 700; letter-spacing: -.03em; }
.nav a { font-weight: 500; font-size: .95rem; }
.nav a:hover, .nav a[aria-current="page"] { border-color: transparent; color: var(--ink); text-decoration: underline; text-underline-offset: .4em; }
.nav .btn { min-height: 40px; padding: 0 16px; font-size: .92rem; }
@media (max-width: 960px) {
  .nav { background: var(--paper); }
  .nav a:not(.btn) { font-variation-settings: normal; font-weight: 500; letter-spacing: -.035em; text-decoration: none; }
}

/* Boutons : petits, arrondis, noir plein ou contour */
.btn { min-height: 46px; padding: 0 20px; border-radius: var(--radius); border: 1px solid var(--ink); font-weight: 600; font-size: .95rem; background: transparent; }
.btn:hover { background: var(--ink); color: #fff; }
.btn--primary, .btn--dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--primary:hover, .btn--dark:hover { background: #2B2B30; color: #fff; border-color: #2B2B30; }
.btn--white { background: #fff; color: var(--ink); border-color: #fff; }
.btn--white:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.btn--lg { min-height: 60px; font-size: 1.1rem; padding: 0 28px; }
.btn--block { width: 100%; }
.section--ink .btn { border-color: rgba(255,255,255,.4); }

/* Bandeau d'aperçu */
.preview-bar { background: var(--ink); }
.preview-bar b { border-radius: 6px; }

/* Panneaux arrondis à la place des sections pleine largeur */
.section--offset, .section--ink { background: none; color: inherit; padding-block: 12px; }
.section--offset > .wrap, .section--ink > .wrap { width: auto; margin-inline: var(--gutter); border-radius: var(--radius-l); padding-block: clamp(40px, 6vw, 80px); padding-inline: clamp(20px, 4vw, 56px); }
.section--offset > .wrap { background: rgba(255,255,255,.5); border: 1px solid var(--rule); }
.section--ink > .wrap { background: var(--ink); color: #fff; }
.section--ink .muted { color: #A9A7AD; }
@media (max-width: 600px) { .section--offset > .wrap, .section--ink > .wrap { margin-inline: 10px; } }

.section-head { margin-bottom: clamp(32px, 5vw, 56px); }
.section-head h2 { font-size: var(--s4); }
.center { text-align: center; }
.center .lead, .center p { margin-inline: auto; }

/* Médias arrondis */
.project-media, .pdp-media .main, .project-hero img, .project-gallery img, .about img { border-radius: 16px; overflow: hidden; }
.project-hero .crop::before { display: none; }
.project-meta h2, .project-meta h3 { font-variation-settings: normal; font-weight: 600; letter-spacing: -.02em; }
.product-card h3, .post-card h3, .benefit h3, .steps h3, .paths h3, .scope h3, .gates h3, .plan-card h3 { font-variation-settings: normal; }

/* Index, étapes, cartes simples */
.index { border-top-color: var(--rule); }
.index a h3 { font-size: var(--s2); font-weight: 500; letter-spacing: -.035em; }
.index a:hover { background: none; }
.steps li { border-top: 1px solid var(--rule); }
.steps li::before { font-variation-settings: normal; font-weight: 400; font-family: var(--serif); font-style: italic; letter-spacing: 0; }

/* Formulaires */
.input, select.input, textarea.input { border-radius: var(--radius); border: 1px solid rgba(14,14,16,.2); background: #fff; }
.input:focus { box-shadow: 0 0 0 3px rgba(255,226,52,.9); }
.chip span { border-radius: 999px; border: 1px solid rgba(14,14,16,.2); background: #fff; }
.choice-card span { border-radius: 14px; border: 1px solid rgba(14,14,16,.2); background: #fff; }
.choice-card input:checked + span { box-shadow: inset 0 0 0 2px var(--ink); }
.dropzone { border-radius: 14px; background: rgba(255,255,255,.6); border: 1.5px dashed rgba(14,14,16,.3); }
.fieldset > legend { font-variation-settings: normal; font-weight: 600; letter-spacing: -.02em; }
.file-list li { border-radius: 8px; background: #fff; }
.ticket { border: 1px solid var(--rule); border-radius: 18px; background: #fff; overflow: hidden; }
.ticket-head { border-bottom: 1px solid var(--rule); }
.ticket-head b { font-variation-settings: normal; font-weight: 700; }
.ticket .totals, .ticket-actions { border-top: 1px solid var(--rule); }
.notice { border-radius: 12px; border-left: 0; background: #FFF6C2; }
.notice--demo { background: rgba(255,255,255,.6); border: 1px solid var(--rule); }
.form-status .error { border-radius: 12px; border-left: 0; }
.confirm { border: 1px solid var(--rule); border-radius: var(--radius-l); background: #fff; }
.confirm .ref { border-radius: 8px; }
.paths { background: none; border: 0; gap: 12px; }
.paths > div { border-radius: 18px; border: 1px solid var(--rule); background: #fff; }
.gates { background: none; border: 0; gap: 12px; }
.gates > div { border-radius: 18px; border: 1px solid var(--rule); background: #fff; }
.cross { border: 1px solid var(--rule); border-radius: var(--radius-l); background: #fff; }
.scope .not { border: 1px solid var(--rule); border-radius: 18px; }
.empty, .placeholder-text { border-radius: 12px; }
.filters button { border: 1px solid rgba(14,14,16,.2); background: #fff; }
.tag-provisoire, .todo { border-radius: 6px; }
.plans-table { background: #fff; border-radius: var(--radius-l); overflow: hidden; }
.plans-table .plan-name { font-variation-settings: normal; font-weight: 600; }
.plans-table thead .is-featured { box-shadow: inset 0 4px 0 var(--ink); }
.plans-table .is-featured { background: #FFFBE0; }
.faq { border-top: 0; display: grid; gap: 10px; }
.faq details { border: 1px solid var(--rule); border-radius: 14px; background: #fff; padding: 0 22px; }
.faq summary { font-weight: 600; font-size: 1.05rem; padding: 20px 0; }
.faq .answer { padding-bottom: 20px; }
.page-head h1 { font-size: var(--s5); }
.page-head h1, .pdp h1 { font-variation-settings: normal; }
.pdp h1 { font-size: var(--s4); }
.crumbs li + li::before { color: rgba(14,14,16,.3); }
.timeline .current .dot { box-shadow: 0 0 0 4px #FFF2A0; }

/* Pied de page */
.site-footer { background: var(--ink); }
.footer-grid h2 { font-variation-settings: normal; }

/* ---------------------------------------------------------------- Accueil v2 */
.hero2 { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 4vw, 56px); align-items: center; padding-block: clamp(36px, 6vw, 88px) clamp(48px, 7vw, 96px); }
.hero2 h1 { font-size: var(--s5); max-width: 9ch; }
.hero2 .lead { margin-top: 22px; max-width: 34ch; color: var(--ink); }
.hero2 .small { margin-top: 14px; color: var(--ink-2); }
.hero2 .btn-row { margin-top: 28px; }
@media (max-width: 900px) { .hero2 { grid-template-columns: 1fr; } }

/* La carte d'adhésion : dégradé d'encres CMJ, propre à Studio DG */
.join-card { position: relative; border-radius: var(--radius-l); overflow: hidden; color: #fff; min-height: 460px; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; isolation: isolate; background: #1B1340; box-shadow: 0 30px 60px -30px rgba(40,20,80,.5); }
.join-card::before { content: ""; position: absolute; inset: -30%; z-index: -1; background:
  radial-gradient(40% 35% at 25% 30%, var(--m) 0%, transparent 70%),
  radial-gradient(45% 40% at 80% 25%, var(--c) 0%, transparent 70%),
  radial-gradient(35% 35% at 70% 80%, var(--y) 0%, transparent 70%),
  radial-gradient(50% 50% at 20% 85%, #5B2BFF 0%, transparent 70%);
  filter: blur(18px) saturate(1.2); animation: drift 22s ease-in-out infinite alternate; }
@keyframes drift { to { transform: rotate(12deg) scale(1.08) translate(3%, -2%); } }
@media (prefers-reduced-motion: reduce) { .join-card::before { animation: none; } }
.pill { display: inline-flex; align-items: center; gap: 8px; background: rgba(14,14,16,.85); color: #fff; font-size: .82rem; font-weight: 500; padding: 6px 12px 6px 10px; border-radius: 999px; align-self: flex-start; }
.pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.join-card h2 { font-size: clamp(2.4rem, 1.6rem + 3vw, 3.6rem); color: #fff; margin-top: auto; }
.join-card p { margin: 10px 0 22px; font-weight: 500; }
.join-card .btn { background: rgba(255,255,255,.22); border-color: transparent; color: #fff; backdrop-filter: blur(8px); }
.join-card .btn:hover { background: #fff; color: var(--ink); }
.call-link { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: rgba(14,14,16,.55); text-decoration: none; color: #fff; backdrop-filter: blur(8px); }
.call-link .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: var(--ink); display: grid; place-items: center; font-weight: 700; font-size: .8rem; flex: 0 0 auto; }
.call-link b { display: block; font-weight: 600; font-size: .95rem; }
.call-link span { font-size: .82rem; opacity: .75; }
.call-link:hover { background: rgba(14,14,16,.75); }

/* Bandeau clients (noms en mots-symboles, pas de faux logos) */
.clients { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px clamp(28px, 5vw, 64px); padding-block: 36px; opacity: .85; }
.clients span { font-size: 1.25rem; font-weight: 700; letter-spacing: -.03em; white-space: nowrap; }
.clients span:nth-child(2) { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.5rem; letter-spacing: 0; }
.clients span:nth-child(3) { text-transform: uppercase; letter-spacing: .12em; font-size: 1rem; }

.note-box { max-width: 640px; margin: 0 auto; text-align: center; padding: 28px clamp(20px, 4vw, 40px); border-radius: 18px; border: 1px solid var(--rule); background: rgba(255,255,255,.45); color: var(--ink-2); font-size: 1.05rem; }
.note-box p { margin: 0 auto; }
.note-box em { font-family: var(--serif); font-size: 1.15em; color: var(--ink); }
.note-box a { color: var(--ink); }

/* Fonctionnement */
.how { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); }
.how-step .ico { width: 44px; height: 44px; border-radius: 12px; background: #fff; border: 1px solid var(--rule); display: grid; place-items: center; margin-bottom: 18px; }
.how-step .ico svg { width: 22px; height: 22px; }
.how-step h3 { font-size: 1.4rem; margin-bottom: 8px; }
.how-step p { color: var(--ink-2); margin: 0; }
@media (max-width: 900px) { .how { grid-template-columns: 1fr; } }

.marquee { overflow: hidden; margin-top: 40px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); display: grid; gap: 10px; }
.marquee-row { display: flex; gap: 10px; width: max-content; animation: slide 45s linear infinite; }
.marquee-row:nth-child(2) { animation-direction: reverse; animation-duration: 55s; }
.marquee:hover .marquee-row { animation-play-state: paused; }
.marquee-row span { background: #fff; border: 1px solid var(--rule); border-radius: 999px; padding: 9px 16px; font-weight: 500; font-size: .95rem; white-space: nowrap; }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-row { animation: none; flex-wrap: wrap; width: auto; } .marquee { -webkit-mask-image: none; mask-image: none; } .marquee-row [aria-hidden] { display: none; } }

/* Cartes bénéfices en carrousel */
.carousel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
.carousel::-webkit-scrollbar { display: none; }
.bcard { scroll-snap-align: start; }
.bcard .art { aspect-ratio: 4/3; border-radius: 18px; margin-bottom: 16px; position: relative; overflow: hidden; display: grid; place-items: center; }
.bcard .art svg { width: 38%; color: #fff; filter: drop-shadow(0 8px 18px rgba(0,0,0,.18)); }
.bcard h3 { font-size: 1.2rem; margin-bottom: 6px; }
.bcard p { color: var(--ink-2); font-size: .95rem; margin: 0; }
.art--1 { background: radial-gradient(80% 80% at 20% 20%, var(--y), #FF8A00 60%, var(--m)); }
.art--2 { background: radial-gradient(80% 80% at 80% 20%, var(--c), #3B4BFF 60%, #1B1340); }
.art--3 { background: radial-gradient(80% 80% at 30% 80%, var(--m), #FF4D6D 55%, var(--y)); }
.art--4 { background: radial-gradient(80% 80% at 70% 30%, #7CF0C8, var(--c) 55%, #2B2BD9); }
.art--5 { background: radial-gradient(80% 80% at 20% 70%, #B07CFF, var(--m) 60%, #FF8A00); }
.art--6 { background: radial-gradient(80% 80% at 60% 40%, var(--y), #9BE15D 55%, var(--c)); }
.carousel-nav { display: flex; gap: 8px; margin-top: 22px; }
.carousel-nav button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--rule); background: #fff; cursor: pointer; display: grid; place-items: center; color: var(--ink); }
.carousel-nav button:hover { background: var(--ink); color: #fff; }
.carousel-nav svg { width: 18px; }

/* Avis (affichés seulement si confirmés) */
.quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; text-align: center; }
.quotes blockquote { margin: 0; font-family: var(--serif); font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); line-height: 1.05; letter-spacing: -.01em; }
.quotes figcaption { margin-top: 16px; font-size: .95rem; color: var(--ink-2); }
@media (max-width: 800px) { .quotes { grid-template-columns: 1fr; } }

/* Réalisations */
.work { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.work .project-media img { aspect-ratio: 16/11; }
.work .project:first-child { grid-column: 1 / -1; }
.work .project:first-child .project-media img { aspect-ratio: 16/8; }
@media (max-width: 700px) { .work { grid-template-columns: 1fr; } .work .project .project-media img { aspect-ratio: 4/3 !important; } }

/* Tarifs */
.pricing { display: grid; grid-template-columns: .85fr 1.15fr; gap: 16px; align-items: stretch; }
.join-light { border-radius: var(--radius-l); background: #fff; border: 1px solid var(--rule); padding: 28px; display: flex; flex-direction: column; }
.join-light .pill { background: var(--paper); color: var(--ink); }
.join-light h3 { font-size: clamp(2.2rem, 1.6rem + 2vw, 3rem); font-weight: 500; letter-spacing: -.045em; line-height: 1; margin: auto 0 12px; padding-top: 80px; }
.join-light p { color: var(--ink-2); margin: 0 0 20px; }
.join-light .call-link { background: var(--paper); color: var(--ink); }
.join-light .call-link:hover { background: var(--offset); }
.price-card { position: relative; border-radius: var(--radius-l); background: var(--ink); color: #fff; padding: 28px; overflow: hidden; }
.tabs { display: inline-flex; gap: 4px; padding: 4px; background: rgba(255,255,255,.08); border-radius: 12px; flex-wrap: wrap; }
.tabs button { font: inherit; font-size: .92rem; font-weight: 600; color: #CFCDD2; background: none; border: 0; padding: 9px 14px; border-radius: 9px; cursor: pointer; }
.tabs button[aria-selected="true"] { background: #fff; color: var(--ink); }
.tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; }
.price { display: flex; align-items: baseline; gap: 10px; margin: 26px 0 6px; flex-wrap: wrap; }
.price strong { font-size: clamp(2.6rem, 2rem + 2vw, 3.4rem); font-weight: 500; letter-spacing: -.045em; line-height: 1; }
.price span { color: #A9A7AD; }
.price .todo { color: #fff; border-color: rgba(255,255,255,.4); background: none; font-size: 1.1rem; padding: 6px 12px; }
.plan-for2 { color: #CFCDD2; margin: 0 0 20px; max-width: 42ch; }
.included { border-radius: 16px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); padding: 18px 20px; margin-bottom: 20px; }
.included b { display: inline-block; font-size: .75rem; font-weight: 600; background: rgba(255,255,255,.12); padding: 3px 8px; border-radius: 6px; margin-bottom: 12px; }
.included ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; font-size: .92rem; }
.included li { display: flex; flex-direction: column; }
.included li small { color: #A9A7AD; font-size: .8rem; }
.included .todo { color: #E8E6EA; border-color: rgba(255,255,255,.3); background: none; font-size: .8rem; align-self: flex-start; margin-top: 2px; }
.price-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; position: relative; z-index: 1; }
.sticker { position: absolute; right: -34px; bottom: -34px; width: 150px; height: 150px; border-radius: 50%; background: var(--accent); color: var(--ink); display: grid; place-items: center; font-weight: 800; font-size: 1.6rem; letter-spacing: -.04em; animation: spin 30s linear infinite; }
.sticker svg { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); }
.sticker span { animation: spin 30s linear infinite reverse; }
@media (prefers-reduced-motion: reduce) { .sticker, .sticker span { animation: none; } }
.under-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.under-cards > div { border-radius: 18px; border: 1px solid var(--rule); background: rgba(255,255,255,.5); padding: 20px 22px; }
.under-cards h3 { font-size: 1.1rem; margin-bottom: 6px; display: flex; align-items: center; gap: 10px; }
.under-cards p { margin: 0; color: var(--ink-2); font-size: .95rem; }
.under-cards a { color: var(--ink); }
@media (max-width: 900px) { .pricing, .under-cards { grid-template-columns: 1fr; } .join-light h3 { padding-top: 24px; } .included ul { grid-template-columns: 1fr; } .sticker { width: 110px; height: 110px; font-size: 1.2rem; right: -30px; bottom: -30px; } }

/* Boutique (accueil) */
.shop2 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 16px; }
.shop2 .product-card { background: #fff; border-radius: 18px; padding: 10px 10px 16px; border: 1px solid var(--rule); }
.shop2 .product-card .project-media { border-radius: 12px; }
.shop2 .product-card h3, .shop2 .product-card p, .shop2 .product-card .price { padding-inline: 6px; }
@media (max-width: 900px) { .shop2 { grid-template-columns: 1fr 1fr; } }
.products .product-card .project-media { border-radius: 16px; }

/* Dimitri */
.me { display: grid; grid-template-columns: 300px 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.me img { border-radius: 18px; width: 100%; aspect-ratio: 1; object-fit: cover; }
.me blockquote { margin: 0 0 18px; font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.5rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.05; }
@media (max-width: 800px) { .me { grid-template-columns: 1fr; } .me img { max-width: 240px; } }

/* FAQ deux colonnes */
.faq2 { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.faq2 h2 { font-size: var(--s4); margin-bottom: 24px; }
@media (max-width: 900px) { .faq2 { grid-template-columns: 1fr; } }

/* Appel final */
.cta-final { background: none; padding-block: 12px clamp(40px, 6vw, 72px); }
.cta-final > .wrap { width: auto; margin-inline: var(--gutter); background: var(--ink); color: #fff; border-radius: var(--radius-l); padding: clamp(48px, 8vw, 104px) clamp(24px, 5vw, 64px); position: relative; overflow: hidden; }
.cta-final h2 { font-size: var(--s5); color: #fff; max-width: 13ch; }
.cta-final p { color: #CFCDD2; }
.cta-final .btn { border-color: rgba(255,255,255,.4); color: #fff; }
.cta-final .btn--primary { background: #fff; color: var(--ink); border-color: #fff; }
.cta-final .btn--primary:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.cta-final .btn:not(.btn--primary):hover { background: rgba(255,255,255,.1); }
@media (max-width: 600px) { .cta-final > .wrap { margin-inline: 10px; } }
.work .project { grid-column: auto; grid-row: auto; }
.work .project:first-child { grid-column: 1 / -1; }
.under-cards h3 svg { width: 22px; height: 22px; flex: 0 0 auto; }
.sticker { bottom: auto; top: -38px; right: -38px; }
.section-head.center h2 + .lead { margin-top: 20px; }
@media (max-width: 900px) { .sticker { top: -34px; right: -34px; bottom: auto; } .price-card .tabs { margin-right: 60px; } }
.post-card { border-top: 1px solid var(--rule); } .badge-draft { border-radius: 6px; }

/* Bandeau Suisse romande */
.swiss-band { display: flex; align-items: center; gap: 16px; margin-top: 16px; padding: 16px 20px; border-radius: 18px; background: #fff; border: 1px solid var(--rule); }
.swiss-band p { margin: 0; flex: 1; color: var(--ink-2); }
.swiss-band p b { color: var(--ink); }
.swiss-band .flag { flex: 0 0 34px; height: 34px; border-radius: 8px; background: #DA291C; position: relative; }
.swiss-band .flag::before, .swiss-band .flag::after { content: ""; position: absolute; background: #fff; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.swiss-band .flag::before { width: 20px; height: 6px; } .swiss-band .flag::after { width: 6px; height: 20px; }
@media (max-width: 700px) { .swiss-band { flex-wrap: wrap; } .swiss-band .btn { width: 100%; } }
.paths h2 { font-size: var(--s1); letter-spacing: -.025em; line-height: 1.15; font-weight: 600; margin-bottom: 10px; }
.benefits--2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 900px) { .benefits--2 { grid-template-columns: 1fr; } }
.price-note { color: #A9A7AD; font-size: .85rem; margin: -2px 0 16px; }
.price .tag-provisoire { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.4); align-self: center; }

/* =====================================================================
   THÈME 3 — « noir » : mode sombre haut de gamme (par défaut), logo,
   animation d'arrivée, héros vidéo, bandeau de réalisations.
   Le mode clair reste celui du thème 2 (data-theme="light").
   ===================================================================== */
[data-theme="dark"] {
  --paper: #0B0B0C; --card: #151517; --offset: #1C1C1F;
  --ink: #F2F0ED; --ink-2: #A3A0A6; --rule: rgba(255,255,255,.1);
  color-scheme: dark;
}
.theme-anim, .theme-anim * { transition: background-color .4s ease, color .4s ease, border-color .4s ease !important; }

/* Logo */
.logo-svg { display: block; height: 28px; width: auto; }
.logo { color: var(--ink); }
.logo--footer { color: #fff; margin-bottom: 18px; }
.logo--footer .logo-svg { height: 58px; }
@media (max-width: 600px) { .site-header .logo-svg { height: 24px; } }

/* Bascule de thème */
.theme-toggle { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rule); background: transparent; color: var(--ink); display: inline-grid; place-items: center; cursor: pointer; flex: 0 0 auto; }
.theme-toggle:hover { border-color: var(--ink); }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.theme-toggle .i-moon { fill: currentColor; stroke: none; }
[data-theme="dark"] .theme-toggle .i-moon, [data-theme="light"] .theme-toggle .i-sun { display: none; }
@media (max-width: 960px) { .nav .theme-toggle { margin-top: 20px; } }

/* --- Composants en mode sombre --- */
[data-theme="dark"] .btn:hover { background: var(--ink); color: var(--paper); }
[data-theme="dark"] .btn--primary, [data-theme="dark"] .btn--dark { background: #F2F0ED; color: #0B0B0C; border-color: #F2F0ED; }
[data-theme="dark"] .btn--primary:hover, [data-theme="dark"] .btn--dark:hover { background: #FFE234; border-color: #FFE234; color: #0B0B0C; }
[data-theme="dark"] .preview-bar { background: #1B1B1E; color: #CFCDD2; }
[data-theme="dark"] .section--offset > .wrap { background: rgba(255,255,255,.025); border-color: rgba(255,255,255,.08); }
[data-theme="dark"] :is(.input, .chip span, .choice-card span, .file-list li, .ticket, .confirm, .paths > div, .gates > div, .cross, .filters button, .plans-table, .faq details, .swiss-band, .join-light, .shop2 .product-card, .marquee-row span, .how-step .ico, .carousel-nav button, .call-link--card) { background: var(--card); color: var(--ink); border-color: var(--rule); }
[data-theme="dark"] .input { border-color: rgba(255,255,255,.16); }
[data-theme="dark"] .input::placeholder { color: #6E6B72; }
[data-theme="dark"] select.input option { background: #151517; }
[data-theme="dark"] .carousel-nav button:hover { background: var(--ink); color: var(--paper); }
[data-theme="dark"] :is(.note-box, .under-cards > div, .dropzone) { background: rgba(255,255,255,.03); }
[data-theme="dark"] .dropzone.is-over { background: rgba(255,226,52,.08); }
[data-theme="dark"] .price-card { background: #141416; border: 1px solid rgba(255,255,255,.08); }
[data-theme="dark"] .tabs button[aria-selected="true"] { color: #0B0B0C; }
[data-theme="dark"] .sticker { color: #0E0E10; }
[data-theme="dark"] .notice { background: rgba(255,226,52,.08); color: var(--ink); }
[data-theme="dark"] .notice--demo { background: rgba(255,255,255,.03); }
[data-theme="dark"] :is(.plans-table .is-featured, .plan-card.is-featured) { background: rgba(255,226,52,.05); }
[data-theme="dark"] .plans-table thead .is-featured { box-shadow: inset 0 4px 0 #FFE234; }
[data-theme="dark"] .form-status .error { background: rgba(179,38,30,.16); color: #FFB4AB; }
[data-theme="dark"] .error-msg { color: #FF8A80; }
[data-theme="dark"] .section--offset .steps p { color: var(--ink-2); }
[data-theme="dark"] .todo { border-color: #55525A; background: none; }
[data-theme="dark"] .site-footer { background: #070708; border-top: 1px solid rgba(255,255,255,.06); }
[data-theme="dark"] .frame { border-color: rgba(255,255,255,.07); }
[data-theme="dark"] .project-media, [data-theme="dark"] .pdp-media .main { background: #18181B; }
[data-theme="dark"] .choice-card input:checked + span { box-shadow: inset 0 0 0 2px #F2F0ED; }
[data-theme="dark"] .timeline .current .dot { box-shadow: 0 0 0 4px rgba(255,226,52,.25); }
[data-theme="dark"] .plan-badge, [data-theme="dark"] .badge-draft { color: #0B0B0C; }

/* Grain très léger pour la matière */
[data-theme="dark"] body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 90; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Lueur CMJ derrière le titre */
.hero2 { position: relative; isolation: isolate; }
[data-theme="dark"] .hero2::before { content: ""; position: absolute; z-index: -1; left: -10%; top: 0; width: 70%; height: 90%; background: radial-gradient(40% 40% at 30% 40%, rgba(230,0,126,.22), transparent 70%), radial-gradient(40% 40% at 60% 60%, rgba(0,163,224,.18), transparent 70%); filter: blur(30px); pointer-events: none; }
[data-theme="dark"] .hero2 .lead { color: #D9D6DC; }

/* Héros vidéo */
.reel-card { background: #0B0B0C; min-height: 560px; box-shadow: 0 40px 80px -40px rgba(0,0,0,.8); }
.reel-card::before { display: none; }
.reel-card .reel-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.reel-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.15) 50%, rgba(0,0,0,.82) 100%); }
.reel-card .btn { background: rgba(255,255,255,.16); }
@media (max-width: 900px) { .reel-card { min-height: 520px; } }

/* Bandeau de réalisations qui défile */
.work-strip { overflow: hidden; padding: 8px 0 28px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.work-strip-track { display: flex; gap: 14px; width: max-content; animation: slide 70s linear infinite; }
.work-strip:hover .work-strip-track, .work-strip:focus-within .work-strip-track { animation-play-state: paused; }
.strip-item { flex: 0 0 auto; width: clamp(180px, 22vw, 280px); aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: var(--offset); }
.strip-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), filter .4s; }
.strip-item:hover img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) { .work-strip-track { animation: none; } .work-strip { overflow-x: auto; } }

/* Réalisations : survol plus vivant */
.project .project-media { position: relative; }
.project .project-media::after { content: "Voir le projet"; position: absolute; left: 16px; bottom: 16px; padding: 8px 14px; border-radius: 999px; background: rgba(11,11,12,.8); color: #fff; font-size: .85rem; font-weight: 600; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s var(--ease); backdrop-filter: blur(6px); }
.project:hover .project-media::after, .project:focus-visible .project-media::after { opacity: 1; transform: none; }
.work .project-media img { transition: transform .8s var(--ease); }
.work .project:hover .project-media img { transform: scale(1.04); }

/* Dimitri */
.me-visual { margin: 0; }
.me-visual img { border-radius: 18px; width: 100%; aspect-ratio: 1; object-fit: cover; }
.me-visual figcaption { margin-top: 10px; font-size: .85rem; color: var(--ink-2); }
.about .me-visual img { aspect-ratio: 4/5; }

/* Appel final : l'ampoule de la charte Studio DG */
.cta-final > .wrap { background: linear-gradient(90deg, rgba(11,11,12,.97) 30%, rgba(11,11,12,.55) 60%, rgba(11,11,12,.15)), url("/img/realisations/studio-ampoule.webp") right 30% / auto 150% no-repeat, #0B0B0C; border: 1px solid rgba(255,255,255,.06); }
@media (max-width: 700px) { .cta-final > .wrap { background: linear-gradient(180deg, rgba(11,11,12,.6), rgba(11,11,12,.96) 55%), url("/img/realisations/studio-ampoule.webp") center top / 140% auto no-repeat, #0B0B0C; } }
.call-link--card { max-width: 380px; border: 1px solid var(--rule); background: #fff; color: var(--ink); }

/* ---------- Animation d'arrivée ---------- */
.intro { display: none; }
.intro-on body { overflow: hidden; }
.intro-on .intro { display: grid; place-items: center; position: fixed; inset: 0; z-index: 300; background: #070708; color: #fff; cursor: pointer; }
.intro-logo { position: relative; width: min(78vw, 600px); height: auto; overflow: visible; fill: #fff; transition: transform .6s var(--ease), opacity .5s; }
.intro .i-mono path { fill: transparent; stroke: #fff; stroke-width: .35; stroke-dasharray: 1; stroke-dashoffset: 1; animation: dg-draw .95s cubic-bezier(.6,0,.2,1) .15s forwards, dg-fill .35s ease 1s forwards; }
.intro .i-studio path { opacity: 0; transform-box: fill-box; transform: translateY(40%); animation: dg-rise .55s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(1.05s + var(--i) * .06s); }
.intro .i-by { opacity: 0; animation: dg-fade .5s ease 1.5s forwards; }
.intro .i-band { clip-path: inset(0 100% 0 0); animation: dg-wipe .6s cubic-bezier(.6,0,.2,1) 1.4s forwards; }
.intro .i-reg { opacity: 0; animation: dg-fade .3s ease 1.8s forwards; }
.intro-glow { position: absolute; width: 70vmin; height: 70vmin; border-radius: 50%; background: radial-gradient(circle, rgba(230,0,126,.4), rgba(0,163,224,.28) 40%, rgba(255,226,52,.12) 60%, transparent 72%); filter: blur(50px); opacity: 0; animation: dg-glow 1.8s ease .5s forwards; }
.intro-skip { position: absolute; right: 24px; bottom: 22px; font-size: .82rem; color: rgba(255,255,255,.45); letter-spacing: .02em; }
.intro-out .intro { animation: dg-lift .7s cubic-bezier(.7,0,.2,1) forwards; }
.intro-out .intro-logo { transform: translateY(-24px) scale(.97); opacity: 0; }
@keyframes dg-draw { to { stroke-dashoffset: 0; } }
@keyframes dg-fill { to { fill: #fff; stroke-width: 0; } }
@keyframes dg-rise { to { opacity: 1; transform: none; } }
@keyframes dg-fade { to { opacity: 1; } }
@keyframes dg-wipe { to { clip-path: inset(0 0 0 0); } }
@keyframes dg-glow { 55% { opacity: 1; transform: scale(1.12); } to { opacity: .55; transform: scale(1); } }
@keyframes dg-lift { to { clip-path: inset(0 0 100% 0); } }
@media (prefers-reduced-motion: reduce) { .intro-on .intro { display: none; } .intro-on body { overflow: auto; } }
.logo .logo-svg { width: auto; height: 30px; }
.logo--footer .logo-svg { height: 58px; }
@media (max-width: 600px) { .site-header .logo .logo-svg { height: 25px; } }
.reel-card::after { background: linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,.25) 45%, rgba(0,0,0,.88) 72%, rgba(0,0,0,.94) 100%); }
.reel-card h2 { text-shadow: 0 2px 24px rgba(0,0,0,.5); }
[data-theme="dark"] .btn--white { color: #0B0B0C; }
[data-theme="dark"] .preview-bar b { color: #0B0B0C; }
.call-link .avatar { color: #0B0B0C; }
.call-link .avatar svg { width: 20px; height: auto; }
[data-theme="dark"] .join-light { background: radial-gradient(60% 50% at 80% 10%, rgba(0,163,224,.12), transparent 70%), url("/assets/brand/monogramme-dg-blanc.svg") right -40px top 30px / 70% auto no-repeat, var(--card); }
[data-theme="dark"] .join-light h3 { position: relative; }
.join-light { background-image: none; }
[data-theme="dark"] .join-light { background-blend-mode: normal; }
[data-theme="dark"] .join-light::before { content: none; }
html[data-theme="dark"] .pricing .join-light { background: radial-gradient(60% 45% at 85% 5%, rgba(0,163,224,.14), transparent 70%), url("/assets/brand/monogramme-dg-blanc.svg") right -30px top 40px / 62% auto no-repeat, var(--card); }
html[data-theme="light"] .pricing .join-light { background: url("/assets/brand/monogramme-dg-noir.svg") right -30px top 40px / 62% auto no-repeat, #fff; }
/* Nouveau logo (monogramme + « Studio DG ») */
.logo .logo-svg { height: 30px; }
.logo--footer .logo-svg { height: 44px; }
.intro-logo { width: min(80vw, 640px); }
.intro .i-mono path { stroke-width: 1.4; }
.intro .i-studio path { transform: translateY(18%); }
@media (max-width: 600px) { .site-header .logo .logo-svg { height: 24px; } }

/* ---------- Carte de droite du héros : variantes ---------- */
.hc { min-height: 560px; }
.hc::before { animation-duration: 18s; }
/* Variante « monogramme » */
.hc-mono { flex: 1; display: grid; place-items: center; padding: 20px 0; }
.hc-mono svg { width: 62%; max-width: 260px; overflow: visible; filter: drop-shadow(0 20px 40px rgba(0,0,0,.35)); }
.hc-shine { animation: hc-shine 5.5s ease-in-out infinite; }
@keyframes hc-shine { 0%, 55% { transform: skewX(-20deg) translateX(0); } 100% { transform: skewX(-20deg) translateX(200px); } }
/* Variante « carte de membre » */
.member { flex: 1; display: grid; place-items: center; perspective: 900px; padding: 18px 0; }
.member-card { position: relative; width: 82%; max-width: 330px; aspect-ratio: 85 / 54; border-radius: 16px; padding: 18px 20px; background: linear-gradient(135deg, #1A1A1D, #0B0B0C 60%); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 30px 60px -20px rgba(0,0,0,.7); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; transform: rotateX(12deg) rotateY(-16deg) rotateZ(3deg); animation: member-float 7s ease-in-out infinite; color: #fff; }
@keyframes member-float { 50% { transform: rotateX(6deg) rotateY(-8deg) rotateZ(1deg) translateY(-8px); } }
.member-top { display: flex; justify-content: space-between; align-items: center; }
.member-top svg { width: 38px; }
.member-top span { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.member-name { font-size: 1.9rem; font-weight: 500; letter-spacing: -.04em; }
.member-name b { color: #FFE234; font-weight: 600; }
.member-foot { display: flex; justify-content: space-between; font-size: .78rem; color: rgba(255,255,255,.55); }
.member-holo { position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 35%, rgba(230,0,126,.35) 45%, rgba(0,163,224,.35) 52%, rgba(255,226,52,.3) 58%, transparent 68%); mix-blend-mode: screen; animation: holo 6s ease-in-out infinite; pointer-events: none; }
@keyframes holo { 0% { transform: translateX(-30%); } 60%, 100% { transform: translateX(35%); } }
/* Variante « tableau » */
.board { flex: 1; margin: 18px 0 20px; border-radius: 16px; background: rgba(11,11,12,.72); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(10px); padding: 14px; }
.board-head { display: flex; justify-content: space-between; align-items: center; font-size: .8rem; color: rgba(255,255,255,.6); padding: 2px 4px 10px; }
.board-dot { width: 8px; height: 8px; border-radius: 50%; background: #3DDC84; box-shadow: 0 0 0 0 rgba(61,220,132,.6); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(61,220,132,0); } 100% { box-shadow: 0 0 0 0 rgba(61,220,132,0); } }
.board ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.board li { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.06); color: #fff; }
.board li b { display: block; font-size: .92rem; font-weight: 600; }
.board li small { font-size: .76rem; color: rgba(255,255,255,.6); }
.b-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: .8rem; font-weight: 700; background: rgba(255,255,255,.1); }
.b-done .b-ico { background: #3DDC84; color: #0B0B0C; }
.b-bat .b-ico { background: #FFE234; } .b-bat .b-ico::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #0B0B0C; animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: .25; } }
.b-bat em { font-style: normal; font-size: .72rem; font-weight: 700; padding: 3px 8px; border-radius: 6px; background: rgba(255,226,52,.18); color: #FFE234; }
.b-run .b-ico { background: #00A3E0; } .b-run .b-ico::before { content: ""; width: 12px; height: 12px; border: 2px solid #fff; border-right-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; }
.b-bar { width: 60px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.15); overflow: hidden; }
.b-bar i { display: block; height: 100%; width: 40%; background: #00A3E0; animation: bar 4s ease-in-out infinite; }
@keyframes bar { 0% { width: 15%; } 80%, 100% { width: 90%; } }
.b-wait { opacity: .7; }
@media (prefers-reduced-motion: reduce) { .hc-shine, .member-card, .member-holo, .board-dot, .b-bar i, .b-bat .b-ico::before, .b-run .b-ico::before { animation: none; } }
.board { margin: 14px 0 16px; padding: 12px; }
.board li { padding: 8px 12px; }

/* Espace client : étapes */
.ec-steps { list-style: none; counter-reset: ec; margin: 0 0 8px; padding: 0; display: grid; gap: 12px; max-width: 720px; }
.ec-steps li { counter-increment: ec; position: relative; padding: 16px 18px 16px 62px; border-radius: 16px; background: var(--card); border: 1px solid var(--rule); color: var(--ink-2); }
.ec-steps li b { display: block; color: var(--ink); margin-bottom: 2px; }
.ec-steps li::before { content: counter(ec); position: absolute; left: 18px; top: 16px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: #FFE234; color: #0B0B0C; }

/* =====================================================================
   FINITION PREMIUM (oct. 2026)
   ===================================================================== */
html { scroll-behavior: smooth; }
::selection { background: #FFE234; color: #0B0B0C; }

/* Surtitres numérotés */
.eyebrow { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 12px; font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 18px; }
.eyebrow b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.eyebrow b::after { content: ""; display: inline-block; width: 28px; height: 1px; background: currentColor; opacity: .4; vertical-align: middle; margin-left: 12px; }
.section-head.center .eyebrow { justify-content: center; display: flex; }
.eyebrow--hero { text-transform: none; letter-spacing: .01em; font-size: .9rem; font-weight: 500; padding: 7px 14px 7px 10px; border-radius: 99px; border: 1px solid var(--rule); background: rgba(255,255,255,.03); margin-bottom: 28px; }
.eyebrow--hero i { width: 8px; height: 8px; border-radius: 50%; background: #3DDC84; box-shadow: 0 0 0 4px rgba(61,220,132,.15); }

/* Phrase manifeste */
.statement { max-width: 980px; margin: clamp(56px, 8vw, 110px) auto 0; text-align: center; }
.statement p { font-size: clamp(1.6rem, 3.4vw, 2.7rem); line-height: 1.18; letter-spacing: -.03em; font-weight: 500; color: var(--ink); margin: 0 0 22px; text-wrap: balance; }
.statement em { font-family: var(--serif); font-style: italic; font-weight: 400; }

/* Clients : plus discrets, éclairés au survol */
.clients span { opacity: .55; transition: opacity .3s; }
.clients span:hover { opacity: 1; }

/* Avantages, version sombre raffinée */
.carousel { counter-reset: bc; }
.bcard { counter-increment: bc; }
[data-theme="dark"] .bcard .art { background: radial-gradient(90% 90% at 0% 0%, color-mix(in srgb, var(--a) 30%, transparent), transparent 60%), radial-gradient(70% 70% at 100% 100%, color-mix(in srgb, var(--a) 14%, transparent), transparent 60%), #141416; border: 1px solid var(--rule); }
[data-theme="dark"] .bcard .art svg { width: 26%; color: var(--a); filter: drop-shadow(0 0 28px color-mix(in srgb, var(--a) 60%, transparent)); }
[data-theme="dark"] .bcard .art::before { content: "0" counter(bc); position: absolute; left: 18px; top: 14px; font-size: .8rem; font-weight: 600; letter-spacing: .1em; color: var(--ink-2); }
.art--1 { --a: #E6007E; } .art--2 { --a: #00A3E0; } .art--3 { --a: #FFE234; } .art--4 { --a: #7B2FF7; } .art--5 { --a: #3DDC84; } .art--6 { --a: #FF8A00; }

/* Méthode : icônes cerclées */
[data-theme="dark"] .how-step .ico { border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1px var(--rule); }

/* Boutons : lueur discrète */
.btn { transition: transform .25s var(--ease, ease), box-shadow .3s, background-color .25s, color .25s; }
.btn:hover { transform: translateY(-1px); }
[data-theme="dark"] .btn--primary:hover, [data-theme="dark"] .btn--white:hover { box-shadow: 0 10px 40px -10px rgba(255,255,255,.35); }

/* Visuels produits : format portrait, fond studio */
.product-card .project-media img[src*="/img/boutique/"] { aspect-ratio: 4 / 5; object-position: center; }
[data-theme="dark"] .shop2 .product-card { background: #121214; }
.product-card .project-media img { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.product-card:hover .project-media img { transform: scale(1.045); }
.work .project-media img { transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.work .project:hover .project-media img { transform: scale(1.03); }

/* Carte de membre : inclinaison au survol */
.member-tilt { transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2,.7,.2,1); width: 82%; max-width: 330px; display: grid; place-items: center; }
.member-tilt .member-card { width: 100%; }

/* Grand logo en pied de page */
.footer-mark { margin: clamp(48px, 7vw, 90px) 0 8px; color: var(--ink); opacity: .07; line-height: 0; }
.footer-mark svg { width: 100%; height: auto; }
.footer-mark .logo-svg { height: auto; }

/* Apparition au défilement */
.js-rv .rv { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
.js-rv .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js-rv .rv { opacity: 1; transform: none; transition: none; } .member-tilt { transition: none; } html { scroll-behavior: auto; } }
@media (prefers-reduced-motion: reduce) { .marquee-row > span[aria-hidden] { display: none !important; } }

/* Menu mobile : plein écran (le flou de l'en-tête bloquait la hauteur du menu) */
@media (max-width: 960px) {
  body.nav-open .site-header { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: var(--paper) !important; }
  .nav { top: var(--nav-top, 76px) !important; bottom: 0 !important; left: 0 !important; right: 0 !important; height: auto; overscroll-behavior: contain; }
}

/* ---------- Abonnement : ergonomie mobile ---------- */
.plans-switch { display: none; }
@media (max-width: 900px) {
  .plans-cards.is-switch .plans-switch { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; margin-bottom: 8px; background: var(--card, rgba(0,0,0,.05)); border: 1px solid var(--rule); }
  .plans-switch button { color: var(--ink-2); padding: 12px 6px; }
  .plans-switch button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
  .plans-cards.is-switch .plan-card { border-radius: 20px; border: 1px solid var(--rule); border-top-width: 1px; padding: 22px 18px 24px; margin: 0; background: var(--card, transparent); }
  .plans-cards.is-switch .plan-card.is-featured { border-top: 4px solid var(--accent); }
  .plans-cards.is-switch .plan-card .btn { width: 100%; justify-content: center; }
  .plans-cards.is-switch .plan-card .plan-badge { margin-bottom: 8px; }
}
@media (max-width: 700px) {
  .pricing { gap: 12px; }
  .pricing .price-card { order: -1; padding: 18px; }
  .pricing .join-light { padding: 20px; }
  .pricing .join-light h3 { padding-top: 8px; font-size: 2rem; margin-top: 14px; }
  .pricing .join-light p { font-size: .95rem; margin-bottom: 16px; }
  html[data-theme="dark"] .pricing .join-light { background-size: auto, 44% auto, auto; background-position: 0 0, right -20px top 20px, 0 0; }
  .price-card .sticker { display: none; }
  .price-card .tabs { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; margin-right: 0 !important; }
  .price-card .tabs button { padding: 11px 4px; text-align: center; }
  .price-card .price { margin-top: 18px; flex-wrap: wrap; row-gap: 6px; }
  .price-card .price strong { font-size: 2.6rem; }
  .price-card .plan-for2 { font-size: .98rem; margin: 10px 0 14px; }
  .included { padding: 12px 14px; margin-bottom: 16px; }
  .included b { margin-bottom: 4px; }
  .included ul { grid-template-columns: 1fr !important; gap: 0; }
  .included li { flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .included li:last-child { border-bottom: 0; }
  .included li small { font-size: .85rem; }
  .included .todo { margin-top: 0; white-space: nowrap; }
  .price-actions { flex-direction: column; align-items: stretch; gap: 14px; }
  .price-actions .btn { width: 100%; justify-content: center; font-size: 1rem; min-height: 54px; }
  .price-actions .link { align-self: center; }
  .under-cards { gap: 10px; margin-top: 10px; }
  .under-cards > div { padding: 16px; }
  .under-cards h3 { font-size: 1rem; }
  .under-cards p { font-size: .9rem; }
  .plan-card dl { grid-template-columns: 1.2fr 1fr; }
  .plan-card dt, .plan-card dd { padding: 10px 0; font-size: .92rem; }
  .queue-visual { flex-wrap: nowrap; gap: 6px; }
  .queue-visual span { min-width: 0; flex: 1; height: 56px; font-size: .7rem; padding: 0 2px; }
  .queue-visual span.on { height: 70px; }
}
@media (max-width: 700px) { .plan-card dt { padding-right: 14px; } .plan-card dd { text-align: right; } .plan-card dd .tag-provisoire, .plan-card dd .todo { margin-left: auto; } }

/* ---------- Avis Google et Instagram ---------- */
.g-summary { grid-column: 9 / span 4; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.g-score { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.g-score b { font-size: 2.6rem; font-weight: 500; letter-spacing: -.04em; line-height: 1; }
.g-score span:last-child { color: var(--ink-2); font-size: .9rem; }
.stars { color: #FFB400; letter-spacing: 2px; }
.stars i { font-style: normal; color: var(--rule); }
.g-reviews { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.g-card { margin: 0; padding: 20px; border-radius: 18px; border: 1px solid var(--rule); background: var(--card, #fff); display: flex; flex-direction: column; gap: 10px; }
.g-head { display: flex; gap: 10px; align-items: center; }
.g-head img, .g-av { width: 36px; height: 36px; border-radius: 50%; background: var(--offset); flex: 0 0 auto; }
.g-head b { display: block; font-size: .95rem; } .g-head b a { color: inherit; text-decoration: none; }
.g-head small { color: var(--ink-2); font-size: .8rem; }
.g-card blockquote { margin: 0; color: var(--ink-2); font-size: .95rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.ig-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ig-item { position: relative; display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 1; background: var(--offset); }
.ig-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.ig-item:hover img { transform: scale(1.05); }
.ig-cap { position: absolute; inset: auto 0 0 0; padding: 30px 12px 10px; font-size: .78rem; line-height: 1.35; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.75)); opacity: 0; transition: opacity .3s; }
.ig-item:hover .ig-cap, .ig-item:focus-visible .ig-cap { opacity: 1; }
.ig-play { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: grid; place-items: center; font-size: .7rem; }
@media (max-width: 900px) { .g-summary { grid-column: 1 / -1; } .ig-grid { grid-template-columns: repeat(2, 1fr); } }

/* Encart Avis Google */
.g-section { padding-top: clamp(40px, 6vw, 80px); }
.g-box { display: grid; grid-template-columns: minmax(260px, .8fr) 2fr; gap: clamp(24px, 4vw, 56px); padding: clamp(24px, 4vw, 44px); border-radius: 28px; border: 1px solid var(--rule); background: radial-gradient(70% 90% at 0% 0%, rgba(255,226,52,.08), transparent 60%), var(--card, #fff); }
.g-side h2 { font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem); letter-spacing: -.04em; line-height: 1; margin: 0 0 22px; }
.g-side h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; }
.g-side .eyebrow { margin-bottom: 14px; }
.g-empty { color: var(--ink-2); margin: 0; }
.g-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.g-box .g-reviews { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); align-content: start; }
.g-av { display: grid; place-items: center; font-weight: 700; color: var(--ink); }
.g-card--ph { border-style: dashed; justify-content: center; min-height: 160px; }
.g-section .wrap > .small { padding: 0; }
@media (max-width: 900px) { .g-box { grid-template-columns: 1fr; } .g-box .g-reviews { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 6px; } .g-box .g-card { flex: 0 0 82%; scroll-snap-align: start; } }

/* Deux façons de travailler ensemble */
.ways { padding-top: clamp(56px, 8vw, 110px); }
.ways-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.way { position: relative; display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 3.5vw, 40px); border-radius: 28px; border: 1px solid var(--rule); background: var(--card, #fff); overflow: hidden; }
.way h3 { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.4rem); letter-spacing: -.04em; line-height: 1.05; margin: 4px 0 0; }
.way h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; }
.way p { color: var(--ink-2); margin: 0; }
.way ul { list-style: none; margin: 4px 0 10px; padding: 0; display: grid; gap: 10px; }
.way li { display: flex; gap: 10px; align-items: flex-start; font-size: .97rem; }
.way li svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 3px; color: #3DDC84; }
.way .btn { margin-top: auto; align-self: flex-start; }
.way .pill { align-self: flex-start; }
.way--sub { background: radial-gradient(90% 80% at 100% 0%, rgba(230,0,126,.18), transparent 60%), radial-gradient(70% 70% at 0% 100%, rgba(0,163,224,.14), transparent 60%), var(--card, #fff); }
.way--sub .pill i { background: #FFE234; }
.way--one .pill i { background: #3DDC84; }
.hero-oneshot a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 800px) { .ways-grid { grid-template-columns: 1fr; } .way .btn { align-self: stretch; justify-content: center; } }

/* Note globale mise en avant */
.g-score--big { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 20px; background: rgba(255,226,52,.07); border: 1px solid rgba(255,226,52,.22); }
.g-score--big b { font-size: clamp(3.4rem, 2.6rem + 3vw, 4.6rem); line-height: .9; font-weight: 500; letter-spacing: -.05em; color: var(--ink); }
.g-score--big .stars { font-size: 1.35rem; letter-spacing: 3px; display: block; }
.g-score--big span:last-child { display: block; color: var(--ink-2); font-size: .88rem; margin-top: 4px; }
.hero-rating { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 8px 14px; border-radius: 99px; border: 1px solid var(--rule); text-decoration: none; color: var(--ink-2); font-size: .92rem; background: rgba(255,255,255,.03); transition: border-color .2s; }
.hero-rating:hover { border-color: rgba(255,226,52,.5); }
.hero-rating .stars { letter-spacing: 1px; }
.hero-rating b { color: var(--ink); font-weight: 700; }
.hero-rating + .hero-oneshot { margin-top: 14px; }

/* ---------- Articles : images et animations ---------- */
.post-card.has-img { border-top: 0; padding-top: 0; }
.post-img { display: block; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--offset); margin-bottom: 6px; }
.post-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.post-card:hover .post-img img { transform: scale(1.05); }
.art-cover { margin: 0 auto clamp(40px, 6vw, 72px); }
.art-cover-in { border-radius: 24px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--offset); }
.art-cover img { width: 100%; height: 112%; object-fit: cover; transform: translateY(var(--par, 0px)) scale(1.02); will-change: transform; animation: cover-in 1.4s cubic-bezier(.2,.7,.2,1) both; }
@keyframes cover-in { from { opacity: 0; transform: scale(1.12); filter: blur(6px); } to { opacity: 1; filter: none; } }
.art-fig { margin: 2em 0; }
.art-fig img { width: 100%; border-radius: 18px; display: block; background: var(--offset); }
.art-fig figcaption { font-size: .85rem; color: var(--ink-2); margin-top: 10px; }
.read-progress { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 60; pointer-events: none; }
.read-progress i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, #E6007E, #7B2FF7, #00A3E0, #FFE234); }
.article-aside a.is-active { color: var(--ink); font-weight: 700; text-decoration: none; }
.article-aside a { transition: color .2s; }
.article-body h2 { position: relative; }
.article-body h2::before { content: ""; position: absolute; left: -22px; top: .45em; width: 8px; height: 8px; border-radius: 50%; background: #FFE234; transform: scale(0); transition: transform .5s cubic-bezier(.2,.7,.2,1) .15s; }
.article-body h2.in::before, html:not(.js-rv) .article-body h2::before { transform: scale(1); }
.article-body strong { background: linear-gradient(transparent 62%, rgba(255,226,52,.28) 62%); }
@media (prefers-reduced-motion: reduce) { .art-cover img { animation: none; transform: none; } .read-progress { display: none; } }
@media (max-width: 960px) { .article-body h2::before { display: none; } }
.art-fig img { width: auto; max-width: 100%; max-height: 640px; margin: 0 auto; }

/* Réalisations issues d'Instagram */
.project--ig .project-media { position: relative; }
.projects .project--ig .project-media img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.work .project--ig .project-media img { object-fit: cover; width: 100%; }
.ig-badge { position: absolute; top: 12px; left: 12px; padding: 5px 10px; border-radius: 99px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; color: #fff; background: rgba(11,11,12,.7); backdrop-filter: blur(6px); }
.ig-dialog-txt .ig-badge { position: static; display: inline-block; background: linear-gradient(90deg, #E6007E, #7B2FF7); }
.ig-dialog { width: min(1000px, calc(100% - 32px)); max-height: calc(100% - 48px); padding: 0; border: 1px solid var(--rule); border-radius: 24px; background: var(--card, #fff); color: var(--ink); overflow: auto; }
.ig-dialog::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(4px); }
.ig-dialog-in { display: grid; grid-template-columns: 1.1fr 1fr; }
.ig-dialog img { width: 100%; height: 100%; max-height: 80vh; object-fit: cover; display: block; background: var(--offset); }
.ig-dialog-txt { padding: 28px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.ig-dialog-txt h2 { font-size: 1.5rem; letter-spacing: -.03em; margin: 0; }
.ig-date { color: var(--ink-2); font-size: .85rem; margin: 0; }
.ig-caption { white-space: pre-line; color: var(--ink-2); font-size: .95rem; line-height: 1.6; flex: 1; }
.ig-close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(11,11,12,.7); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; }
@media (max-width: 760px) { .ig-dialog-in { grid-template-columns: 1fr; } .ig-dialog img { max-height: 55vh; } }

/* ---- Boutique : produits « sur devis » avec visuel */
.extras-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin: 40px 0 16px; }
.extras-head h3 { font-size: 1.05rem; margin: 0; }
.extras-head p { margin: 0; font-size: var(--s-1); }
.extras { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 720px) { .extras { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 1040px) { .extras { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.extra { display: flex; flex-direction: column; gap: 6px; height: 100%; text-decoration: none; color: inherit; border-radius: 16px; padding: 8px 8px 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); transition: border-color .25s, transform .25s; }
.extra:hover, .extra:focus-visible { border-color: rgba(255,255,255,.22); transform: translateY(-2px); }
.extra-media { display: block; overflow: hidden; border-radius: 10px; margin-bottom: 6px; }
.extra-media img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; transition: transform .5s; }
.extra:hover .extra-media img { transform: scale(1.04); }
.extra-name { font-weight: 600; font-size: .98rem; line-height: 1.25; padding: 0 6px; }
.extra-cta { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: var(--s-1); color: var(--ink-2); padding: 0 6px; }
.extra-cta svg { width: 22px; height: 11px; }
[data-theme="light"] .extra { background: rgba(0,0,0,.02); border-color: rgba(0,0,0,.08); }