/* Prototype — page publique iampro.io, pensée d'abord pour un téléphone.
   Un seul système ; deux ordres de page (offre d'abord / preuve d'abord).
   L'accent change par identité, rien d'autre. */

:root {
  --paper: #f7f5ef;
  --paper-raised: #fdfcf9;
  --ink: #1b1c1a;
  --ink-soft: #4a463f;
  --muted: #6b6257;
  --hair: #e7e2d6;
  --hair-strong: #d8d1c2;
  --accent: #0A7CD5;
  --accent-ink: #ffffff;
  --accent-wash: #e8f1fa;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Manrope", system-ui, sans-serif;
  --label: "Space Grotesk", ui-monospace, monospace;
  --gutter: 20px;
  --bar: 76px;
  --radius: 18px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; }

.page {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 var(--gutter) calc(var(--bar) + 40px + env(safe-area-inset-bottom));
}

/* ── Premier écran ─────────────────────────────────────────── */
.top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0 6px;
}
.who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mono {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-wash); color: var(--accent);
  font: 600 22px/1 var(--serif);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}
.who-name { font-weight: 700; font-size: 16px; line-height: 1.2; letter-spacing: -0.005em; }
.who-trade { color: var(--muted); font-size: 14px; line-height: 1.3; margin-top: 2px; }
.icon-btn {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid var(--hair);
  background: var(--paper-raised); color: var(--ink-soft); cursor: pointer;
}
.icon-btn svg { width: 19px; height: 19px; }

.status {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  margin: 22px 0 14px;
  font: 500 13px/1.3 var(--label); letter-spacing: 0.02em; color: var(--muted);
}
.status span { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: #2f9e5b; box-shadow: 0 0 0 3px #2f9e5b22; }

.promise {
  font: 500 clamp(28px, 8.15vw, 33px)/1.08 var(--serif);
  letter-spacing: -0.022em;
  margin: 0 0 22px;
  font-variation-settings: "opsz" 48;
  text-wrap: balance;
}
.stack { margin: -8px 0 20px; font: 500 13px/1.45 var(--label); letter-spacing: 0.01em; color: var(--ink-soft); }
.promise em { font-style: italic; color: var(--accent); }

.proofs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin: 0 0 8px;
}
.proof {
  background: var(--paper-raised); border: 1px solid var(--hair);
  border-radius: var(--radius); padding: 14px 14px 13px;
}
.proof b {
  display: block; font: 600 28px/1 var(--serif); letter-spacing: -0.02em;
  font-variation-settings: "opsz" 48; color: var(--ink);
}
.proof span { display: block; margin-top: 7px; font-size: 13px; line-height: 1.35; color: var(--muted); text-wrap: pretty; }

/* ── Sections ──────────────────────────────────────────────── */
.sec { margin-top: 52px; }
.sec + .sec { margin-top: 64px; }
@media (max-width: 379px) { .sec { margin-top: 44px; } .sec + .sec { margin-top: 52px; } }
.kicker {
  font: 600 11.5px/1 var(--label); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 14px;
}
.sec h2 {
  font: 500 23px/1.18 var(--serif); letter-spacing: -0.012em; margin: 0 0 16px;
  font-variation-settings: "opsz" 36;
}
.lead { color: var(--ink-soft); margin: 0; font-size: 16px; }

/* Offres : carrousel à aperçu, on voit qu'il y a une suite */
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(82%, 300px);
  gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.offer {
  scroll-snap-align: start;
  background: var(--paper-raised); border: 1px solid var(--hair);
  border-radius: 22px; overflow: hidden; display: flex; flex-direction: column;
}
.offer-art { aspect-ratio: 16 / 8; position: relative; }
.art-label { position: absolute; left: 12px; bottom: 10px; padding: 6px 10px; border-radius: 999px; background: #ffffffe6; color: var(--ink); font: 600 12px/1 var(--label); letter-spacing: 0.04em; }
.offer { cursor: pointer; }
.offer-body { padding: 15px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.offer h3 { margin: 0; font: 600 17px/1.25 var(--sans); letter-spacing: -0.01em; }
.offer p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; flex: 1; }
.go {
  margin-top: 10px; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px; min-height: 46px;
  padding: 0 16px; border-radius: 999px;
  background: var(--accent-wash); color: var(--accent);
  font: 700 14px/1 var(--sans); text-decoration: none;
}
.go svg { width: 15px; height: 15px; }

/* Galerie : deux colonnes, une grande vignette pour rythmer */
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gallery .tile { border-radius: 14px; aspect-ratio: 1; position: relative; overflow: hidden; }
.gallery .tile.big { grid-row: span 2; aspect-ratio: auto; }
.tile-note {
  position: absolute; left: 10px; bottom: 9px;
  font: 500 11px/1 var(--label); letter-spacing: 0.06em; color: #ffffffd9;
}

/* Faits : liste nette, chiffres en sérif */
.facts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.facts li {
  display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: baseline;
  padding: 15px 0; border-bottom: 1px solid var(--hair);
}
.facts b { font: 600 24px/1 var(--serif); letter-spacing: -0.02em; color: var(--accent); font-variation-settings: "opsz" 40; }
.facts span { font-size: 15px; line-height: 1.45; color: var(--ink-soft); }
.source { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }

/* Travaux choisis (salarié) */
.work { display: grid; gap: 12px; }
.work + details.more { margin-top: 8px; }
.case {
  background: var(--paper-raised); border: 1px solid var(--hair); border-radius: 20px;
  padding: 18px 18px 6px;
}
.case-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-bottom: 10px;
  font: 500 12px/1.2 var(--label); letter-spacing: 0.03em; color: var(--muted); }
.badge { display: inline-flex; align-items: center; gap: 5px; color: #24794a; }
.badge svg { width: 13px; height: 13px; }
.case h3 { margin: 0 0 12px; font: 600 18px/1.3 var(--sans); letter-spacing: -0.012em; }
.case-nums { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 14px; }
.case-nums div b { display: block; font: 600 21px/1 var(--serif); letter-spacing: -0.02em; font-variation-settings: "opsz" 36; }
.case-nums div span { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); }

/* Compétences regroupées */
.skills { display: grid; gap: 14px; }
.skill-row b { display: block; font: 600 13px/1.3 var(--sans); margin-bottom: 7px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 6px 10px; border-radius: 8px; background: transparent; cursor: default;
  border: 1px solid var(--hair-strong); font-size: 13.5px; line-height: 1; color: var(--ink-soft);
}

/* Parcours condensé */
.path { list-style: none; margin: 0; padding: 0; }
.path li { display: grid; grid-template-columns: 84px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.path li:first-child { border-top: 1px solid var(--hair); }
.path time { font: 500 12.5px/1.45 var(--label); color: var(--muted); letter-spacing: 0.02em; }
.path b { display: block; font-weight: 600; font-size: 15px; line-height: 1.35; }
.path span { display: block; font-size: 14px; color: var(--muted); line-height: 1.4; margin-top: 1px; }

/* Repli : la profondeur reste, derrière un geste */
details.more { margin-top: 4px; }
details.more > summary {
  list-style: none; cursor: pointer; min-height: 52px;
  display: flex; align-items: center; justify-content: space-between;
  font: 700 14.5px/1 var(--sans); color: var(--accent);
}
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary svg { width: 18px; height: 18px; transition: transform .2s ease; }
details.more[open] > summary svg { transform: rotate(180deg); }
.case details.more { border-top: 1px solid var(--hair); }
.case details.more > summary { min-height: 50px; }
.case.lead-case { border-color: color-mix(in srgb, var(--accent) 28%, var(--hair)); box-shadow: 0 12px 30px -28px var(--ink); }
.role { margin: 0 0 14px; color: var(--ink-soft); font-size: 15px; }
.badge { text-decoration: none; min-height: 44px; padding: 0 2px; }
.case-meta { min-height: 44px; margin-bottom: 4px !important; }
.case .story { color: var(--ink-soft); font-size: 15px; margin: 0 0 16px; }

/* Contact */
.contact {
  background: var(--ink); color: #f4f1ea; border-radius: 26px;
  padding: 26px 20px 22px; margin-top: 48px;
}
.contact h2 { color: #fff; margin-bottom: 6px; }
.contact .lead { color: #c9c3b8; font-size: 15px; margin-bottom: 18px; }
.field { display: block; margin-bottom: 10px; }
.field span { display: block; font: 600 12px/1 var(--label); letter-spacing: 0.08em; text-transform: uppercase; color: #a9a294; margin-bottom: 7px; }
.field input, .field textarea, .field select {
  width: 100%; border: 1px solid #3a3833; background: #262522; color: #fff;
  border-radius: 14px; padding: 13px 14px; font: 400 16px/1.3 var(--sans);
  min-height: 50px; border-color: #47443e; -webkit-appearance: none; appearance: none;
}
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9c3b8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 44px; }
.field input::placeholder, .field textarea::placeholder { color: #aaa397; opacity: 1; }
.field textarea { min-height: 112px; resize: vertical; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-ok { display: none; padding: 18px 0 4px; }
.form-ok b { display: block; font: 500 21px/1.2 var(--serif); color: #fff; margin-bottom: 6px; }
.form-ok p { margin: 0; color: #c9c3b8; font-size: 15px; }
.contact.sent form { display: none; } .contact.sent .form-ok { display: block; }
.field.err input, .field.err textarea { border-color: #e7a19c; }
.err-msg { display: none; margin-top: 6px; font-size: 13px; color: #f0b3ae; } .field.err .err-msg { display: block; }
.send[disabled] { opacity: .7; }
.send {
  width: 100%; min-height: 52px; border: 0; border-radius: 16px; margin-top: 6px;
  background: var(--accent); color: var(--accent-ink); font: 700 16px/1 var(--sans); cursor: pointer;
}
.privacy { margin: 12px 0 0; font-size: 12.5px; color: #9c968a; line-height: 1.45; }

/* Barre d'action : une seule action principale, sous le pouce */
.bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  padding-top: 8px;
  background: linear-gradient(to top, var(--paper) 70%, color-mix(in srgb, var(--paper) 82%, transparent) 88%, transparent);
  transition: transform .22s ease, opacity .18s ease;
}
.bar--hidden { transform: translateY(110%); opacity: 0; pointer-events: none; }
.bar-in { max-width: 520px; margin: 0 auto; display: flex; gap: 10px; }
.cta {
  flex: 1; min-height: 54px; border-radius: 18px; border: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--accent); color: var(--accent-ink);
  font: 700 16px/1 var(--sans); letter-spacing: -0.005em; text-decoration: none;
  box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--accent) 70%, transparent);
}
.cta svg { width: 18px; height: 18px; }
.cta-2 {
  flex: none; min-width: 54px; min-height: 54px; border-radius: 18px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 14px;
  background: var(--paper-raised); border: 1px solid var(--hair-strong); color: var(--ink);
  font: 700 14.5px/1 var(--sans); text-decoration: none;
}
.cta-2 svg { width: 18px; height: 18px; }

/* Pied : la marque, discrète, et l'invitation à faire la sienne */
.foot {
  margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--hair);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-size: 13px; color: var(--muted);
}
.foot a { font-weight: 700; color: var(--ink); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 4px; }
.mark { font: 800 14px/1 var(--sans); letter-spacing: -0.02em; color: var(--ink); }
.mark i { font-style: normal; color: #0A7CD5; }

:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 10px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* Au-delà du téléphone : la même page, respirée, jamais réorganisée en tableau */
@media (min-width: 720px) {
  :root { --gutter: 32px; }
  .promise { font-size: 40px; font-variation-settings: "opsz" 72; }
  .rail { grid-auto-columns: 46%; }
}

/* Carte de prestations (sur rendez-vous) : une ligne, une action */
.menu { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.menu li { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.menu li > div { flex: 1; min-width: 0; }
.menu b { display: block; font-weight: 700; font-size: 16px; line-height: 1.3; }
.menu span { display: block; color: var(--muted); font-size: 14px; line-height: 1.4; margin-top: 2px; }
.go-sm { margin: 0 !important; flex: none; }

/* Écouter : des lignes de lecture, pas des boutons de réseaux */
.listen { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.listen li { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; background: var(--paper-raised); border: 1px solid var(--hair); }
.listen .play { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); }
.listen .play svg { width: 17px; height: 17px; fill: currentColor; margin-left: 2px; }
.listen b { display: block; font-weight: 700; font-size: 15.5px; line-height: 1.3; }
.listen span:not(.play) { display: block; color: var(--muted); font-size: 13.5px; }

/* Images réelles quand elles existent : elles remplacent le dégradé */
.offer-art.has-img, .tile.has-img { background-size: cover !important; background-position: center !important; }
.mono.has-img { background-size: cover; background-position: center; color: transparent; box-shadow: none; }

/* Questions et conditions : chaque réponse derrière un geste */
.faq { border-top: 1px solid var(--hair); }
.faq .qa { border-bottom: 1px solid var(--hair); margin: 0; }
.faq .qa > summary { color: var(--ink); font-weight: 600; }
.faq .qa .story { margin: 0 0 14px; }

.tile.has-img .tile-note { text-shadow: 0 1px 8px #0008; }
.offer-art.has-img .art-label { box-shadow: 0 2px 10px -4px #0005; }
.tile.has-img::after { content: ""; position: absolute; inset: auto 0 0 0; height: 46%; background: linear-gradient(to top, #0000008c, #0000); }
.tile.has-img .tile-note { z-index: 1; color: #fff; }

/* ── Ordinateur ────────────────────────────────────────────────────────
   Une bande d'ouverture pleine largeur (promesse en grand + une grande image),
   puis deux colonnes : le contenu, et une carte qui suit le défilement avec
   l'action. Sur téléphone, rien de tout cela n'existe : .hero-visual, .side et
   .hero-cta sont masqués. */
.hero-cta, .hero-visual, .side { display: none; }
@media (min-width: 1024px) {
  :root { --gutter: 48px; }
  body { font-size: 17px; }
  .page { max-width: 1360px; padding-bottom: 72px; }
  .bar { display: none; }
  .hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 64px;
          align-items: center; padding: 40px 0 56px; min-height: min(760px, 92vh); }
  .hero .top { padding-top: 0; }
  .hero .mono { width: 60px; height: 60px; }
  .hero .who-name { font-size: 18px; } .hero .who-trade { font-size: 15.5px; }
  .hero .status { margin: 30px 0 18px; font-size: 14px; }
  .hero .promise { font-size: clamp(48px, 4.4vw, 66px); line-height: 1.04; margin-bottom: 26px; font-variation-settings: "opsz" 96; max-width: 14ch; }
  .hero .stack { font-size: 14.5px; margin: -6px 0 26px; max-width: 46ch; }
  .hero .proofs { max-width: 560px; gap: 14px; }
  .hero .proof { padding: 20px 20px 18px; }
  .hero .proof b { font-size: 40px; } .hero .proof span { font-size: 14.5px; }
  .hero-cta { display: flex; gap: 12px; margin-top: 28px; max-width: 560px; }
  .hero-cta .cta { min-height: 60px; font-size: 17px; }
  .hero-cta .cta-2 { min-height: 60px; }
  .hero-visual { display: grid; place-items: center; align-self: stretch; min-height: 560px; border-radius: 32px;
                 background: var(--accent-wash); background-size: cover; background-position: center 30%;
                 box-shadow: 0 30px 80px -40px #0006; }
  .hero-visual span { font: 500 200px/1 var(--serif); color: var(--accent); opacity: .85; }
  .layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; align-items: start; }
  .body { min-width: 0; }
  .body > .sec:first-child { margin-top: 24px; }
  .side { display: block; position: sticky; top: 28px; margin-top: 24px; }
  .side-card { background: var(--paper-raised); border: 1px solid var(--hair); border-radius: 24px; padding: 20px; }
  .side-proofs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0 16px; }
  .side-proofs b { display: block; font: 600 24px/1 var(--serif); letter-spacing: -0.02em; }
  .side-proofs span { display: block; margin-top: 5px; font-size: 12.5px; line-height: 1.35; color: var(--muted); }
  .side-cta { display: flex; gap: 8px; } .side-cta .cta { min-height: 52px; font-size: 15px; } .side-cta .cta-2 { min-height: 52px; }
  .sec { margin-top: 72px; } .sec + .sec { margin-top: 88px; }
  .kicker { font-size: 12.5px; }
  .sec h2 { font-size: 36px; margin-bottom: 22px; }
  .lead { font-size: 17px; }
  .rail { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto;
          overflow: visible; margin: 0; padding: 0; gap: 18px; }
  .offer-art { aspect-ratio: 16 / 9; } .offer h3 { font-size: 19px; } .offer p { font-size: 15.5px; }
  .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .gallery .tile.big { grid-column: span 1; grid-row: span 2; }
  .gallery .tile:not(.big) { aspect-ratio: 4 / 3; }
  .work { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .work .lead-case { grid-column: 1 / -1; padding: 26px 26px 10px; }
  .work .lead-case h3 { font-size: 24px; } .work .lead-case .case-nums b { font-size: 34px; }
  .case h3 { font-size: 19px; } .case-nums div b { font-size: 26px; }
  .facts li { grid-template-columns: 130px 1fr; padding: 20px 0; } .facts b { font-size: 36px; } .facts span { font-size: 16.5px; }
  .path li { grid-template-columns: 120px 1fr; padding: 16px 0; } .path b { font-size: 17px; } .path span { font-size: 15px; }
  .menu li { padding: 18px 0; } .menu b { font-size: 18px; }
  .contact { margin-top: 88px; padding: 44px 44px 36px; }
  .contact h2 { font-size: 34px; }
  .contact form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
  .contact form > * { grid-column: span 2; }
  .foot { margin-top: 56px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .layout { grid-template-columns: minmax(0, 1fr); } .side { display: none; }
  .hero { gap: 40px; }
}
@media (min-width: 1024px) and (max-height: 760px) {
  .hero { min-height: 0; padding-top: 28px; } .hero .promise { font-size: 46px; } .hero-visual { min-height: 460px; }
}
/* ── Thème « Nuit » ────────────────────────────────────────────────────
   Mêmes blocs, même grille : seuls le fond, les surfaces, les traits et
   le poids des titres changent. Pour les métiers de la nuit et de l'image
   (tatouage, musique, scène). L'accent est choisi clair sur fond sombre. */
.theme-nuit {
  --paper: #121214; --paper-raised: #1b1b1f; --ink: #f2efe8; --ink-soft: #cfcac0;
  --muted: #9a958b; --hair: #2a2a30; --hair-strong: #3a3a42;
  color-scheme: dark;
}
body.theme-nuit { background: var(--paper); color: var(--ink); }
.theme-nuit .promise { font-weight: 400; letter-spacing: -0.015em; }
.theme-nuit .sec h2 { font-weight: 400; }
.theme-nuit .proof b, .theme-nuit .facts b, .theme-nuit .case-nums b { font-weight: 500; }
.theme-nuit .mono { box-shadow: inset 0 0 0 1px #ffffff1f; }
.theme-nuit .icon-btn { background: var(--paper-raised); border-color: var(--hair-strong); color: var(--ink-soft); }
.theme-nuit .art-label { background: #121214e0; color: var(--ink); }
.theme-nuit .go { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.theme-nuit .chip { border-color: var(--hair-strong); }
.theme-nuit .badge { color: #7ccf9d; }
.theme-nuit .dot { background: #5fd38d; box-shadow: 0 0 0 3px #5fd38d26; }
/* Le bloc contact ne peut plus être « le noir » de la page : il devient une
   surface bordée, légèrement plus claire. */
.theme-nuit .contact { background: #1d1d22; border: 1px solid var(--hair-strong); }
.theme-nuit .field input, .theme-nuit .field textarea, .theme-nuit .field select { background: #141417; border-color: #34343c; }
.theme-nuit .cta { box-shadow: 0 10px 28px -12px color-mix(in srgb, var(--accent) 55%, transparent); }
.theme-nuit .cta-2 { background: var(--paper-raised); border-color: var(--hair-strong); color: var(--ink); }
.theme-nuit .mark { color: var(--ink); }
.theme-nuit .foot a { color: var(--ink); }
.theme-nuit .tile.has-img::after { background: linear-gradient(to top, #000000b3, #0000); }
@media (min-width: 1024px) {
  .hero .who .mono { display: none; }
  /* La carte n'apparaît qu'une fois la bande d'ouverture sortie de l'écran :
     avant, elle répéterait les preuves et l'action déjà visibles. */
  .side { opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
  .side.side--on { opacity: 1; transform: none; pointer-events: auto; }
}

/* Rangée d'icônes de réseaux, sous l'identité (profils Liinks / Linktree) */
.socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0 0; }
.soc { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; color: var(--ink);
  border: 1px solid var(--hair); background: var(--paper-raised); transition: background .15s ease, color .15s ease; }
.soc svg { width: 22px; height: 22px; }
.soc:hover { background: var(--accent-wash); color: var(--accent); border-color: transparent; }
@media (min-width: 1024px) { .hero .socials { margin: 22px 0 0; max-width: 560px; } .soc { width: 48px; height: 48px; } }

/* Vidéo YouTube : façade 16:9 (la première en grand), Shorts en 9:16 dans un rail. */
.yt { margin: 0; }
.yt-face, .yt-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 20px; background: #111 center / cover; position: relative; cursor: pointer; overflow: hidden; }
.yt-face::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, #0006); border-radius: inherit; }
.yt-play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 1; width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink, #fff); box-shadow: 0 12px 30px -10px #000a; transition: scale .15s; }
.yt-play svg { width: 26px; height: 26px; fill: currentColor; margin-left: 4px; }
.yt-face:hover .yt-play, .yt-face:focus-visible .yt-play { scale: 1.08; }
.yt-face:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.yt-len { position: absolute; right: 12px; bottom: 12px; z-index: 1; padding: 4px 8px; border-radius: 8px; background: #000c; color: #fff; font: 600 13px/1 var(--label); }
.yt figcaption { padding: 12px 4px 0; }
.yt figcaption .yt-title { display: block; font-weight: 700; font-size: 16.5px; line-height: 1.3; color: inherit; text-decoration: none; }
.yt figcaption .yt-title:hover { text-decoration: underline; }
.yt figcaption span { display: block; margin-top: 3px; color: var(--muted); font-size: 14.5px; line-height: 1.45; }
.yt-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.yt-row .yt-play { width: 48px; height: 48px; } .yt-row .yt-play svg { width: 19px; height: 19px; }
.yt-row figcaption .yt-title { font-size: 15px; }
.yt-rail { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 18px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter); }
.yt-rail::-webkit-scrollbar { display: none; }
.yt-v { flex: none; width: 46%; max-width: 220px; scroll-snap-align: start; }
.yt-v .yt-face, .yt-v .yt-frame { aspect-ratio: 9 / 16; border-radius: 18px; }
.yt-v .yt-play { width: 52px; height: 52px; }
.yt-v figcaption .yt-title { font-size: 15px; }
@media (min-width: 1024px) { .yt-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } .yt-v { width: 200px; } }


/* ── La plaque noire : structure (barre, pied) au nom de la PERSONNE, jamais de la marque. ── */
:root { --plate: #0b0b0c; --plate-line: #ffffff1f; }
.plate-bar { background: var(--plate); color: #fff; }
.plate-in { max-width: 1720px; margin: 0 auto; padding: 0 var(--gutter); min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.plate-mark { font: 800 17px/1 var(--sans); letter-spacing: -0.02em; color: #fff; text-decoration: none; }
.plate-mark i { font-style: normal; color: #0A7CD5; }
.plate-contact { display: none; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid #ffffff33;
  background: transparent; color: #fff; font: 700 14.5px/1 var(--sans); cursor: pointer; }
.plate-contact svg { width: 16px; height: 16px; }
.plate-contact:hover { background: #ffffff14; }
@media (min-width: 1024px) { .plate-contact { display: inline-flex; } .plate-in { min-height: 60px; } }
.plate-foot { background: var(--plate); color: #fff; margin-top: 64px; padding: 26px 0 calc(var(--bar) + 30px + env(safe-area-inset-bottom)); }
.plate-foot .plate-in { flex-wrap: wrap; align-items: center; }
.plate-foot nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.plate-foot nav a { min-height: 44px; display: inline-flex; align-items: center; color: #fff; text-decoration: none; font-weight: 600; font-size: 15px; }
.plate-foot nav a.ai-version { color: #ffffff80 !important; font-size: 14px; }
.plate-copy { color: #ffffff80; font-size: 14px; }
@media (min-width: 1024px) { .plate-foot { padding-bottom: 30px; } }
.plate-name { display: flex; flex-direction: column; gap: 3px; color: #fff; text-decoration: none; font: 500 19px/1.1 var(--serif); letter-spacing: -0.01em; }
.plate-name span { font: 500 12.5px/1 var(--label); letter-spacing: .04em; color: #ffffff99; }
.plate-foot nav button { min-height: 44px; background: none; border: 0; padding: 0; color: #fff; font: 600 15px/1 var(--sans); cursor: pointer; }
.plate-made { min-height: 0; margin-top: 14px; padding-top: 14px; border-top: 1px solid #ffffff1f; }
.plate-made a { color: #ffffff80; font-size: 13.5px; text-decoration: none; }
.plate-made a i { font-style: normal; color: #7ab8ee; }
.plate-made a:hover { color: #fff; }
.plate-who { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; }
.plate-avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; background: #222 center/cover; box-shadow: 0 0 0 2px #ffffff26; }
.plate-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.plate-share { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid #ffffff33; background: none; color: #fff; cursor: pointer; }
.plate-share svg { width: 18px; height: 18px; }
.plate-share:hover { background: #ffffff14; }
.plate-made { border-top: 0; background: linear-gradient(#ffffff1f, #ffffff1f) var(--gutter) 0 / calc(100% - 2 * var(--gutter)) 1px no-repeat; }
@media (min-width: 1024px) { .plate-avatar { width: 44px; height: 44px; } .plate-name { font-size: 21px; } }
a.plate-contact { text-decoration: none; }
.theme-nuit .plate-bar { border-bottom: 1px solid var(--hair); }
.theme-nuit .plate-foot { border-top: 1px solid var(--hair); }
.plate-foot { margin-top: 56px; }
.page > .foot { display: none; }

/* Couverture : mobile seulement, hauteur bornée, fondue dans le fond. */
.cover { height: min(42vh, 320px); margin: 0 calc(-1 * var(--gutter)) -64px; background: center 30% / cover; position: relative; }
.cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, var(--paper) 100%); }
.has-cover .hero { position: relative; }
@media (min-width: 1024px) { .cover { display: none; } }

/* Conditions d'une offre : prix, durée, acompte, annulation. */
.terms { list-style: none; margin: 10px 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.terms li { padding: 5px 10px; border-radius: 999px; background: var(--paper); border: 1px solid var(--hair); font: 600 13px/1.2 var(--label); color: var(--ink-soft); }
.menu .terms { margin: 6px 0 0; }

/* Avis : rail sur mobile, trois colonnes sur ordinateur. */
.reviews { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
.reviews::-webkit-scrollbar { display: none; }
.review { flex: none; width: 82%; max-width: 360px; margin: 0; scroll-snap-align: start; padding: 20px; border-radius: var(--radius); background: var(--paper-raised); border: 1px solid var(--hair); display: flex; flex-direction: column; gap: 14px; }
.review blockquote { margin: 0; font: 400 18px/1.45 var(--serif); color: var(--ink); }
.review blockquote::before { content: "“"; display: block; font-size: 40px; line-height: .6; color: var(--accent); margin-bottom: 6px; }
.review figcaption { margin-top: auto; }
.review figcaption b { display: block; font-size: 15px; }
.review figcaption span { display: block; color: var(--muted); font-size: 13.5px; }
@media (min-width: 1024px) { .reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; } .review { width: auto; max-width: none; } }

/* « On parle de moi » : publication, date, titre, extrait. */
.press { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.press a { display: block; padding: 16px 18px; border-radius: var(--radius); background: var(--paper-raised); border: 1px solid var(--hair); text-decoration: none; }
.press a:hover { border-color: var(--hair-strong); }
.press-src { display: block; font: 600 12.5px/1.2 var(--label); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.press b { display: block; font: 500 18px/1.3 var(--serif); }
.press q { display: block; margin-top: 8px; color: var(--ink-soft); font-size: 15px; line-height: 1.5; }
@media (min-width: 1024px) { .press { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plate-made a { min-height: 44px; display: inline-flex; align-items: center; }
.yt figcaption .yt-title { padding: 6px 0; min-height: 44px; }

/* « Teinte » : le fond prend la couleur de la personne, très claire. */
.theme-teinte {
  --paper: color-mix(in srgb, var(--accent) 11%, #fbf8f2); --paper-raised: color-mix(in srgb, var(--accent) 4%, #fffdf9);
  --hair: color-mix(in srgb, var(--accent) 18%, #e7e2d6); --hair-strong: color-mix(in srgb, var(--accent) 28%, #d8d1c2);
  --muted: color-mix(in srgb, var(--accent) 35%, #6b6257);
}
body.theme-teinte { background: var(--paper); }
/* « Profond » : fond sombre dans la couleur de la personne, pas du noir. */
.theme-profond {
  --paper: var(--deep); --paper-raised: color-mix(in srgb, var(--deep) 86%, #ffffff 14%);
  --hair: color-mix(in srgb, var(--deep) 78%, #ffffff 22%); --hair-strong: color-mix(in srgb, var(--deep) 66%, #ffffff 34%);
  --muted: color-mix(in srgb, var(--accent) 30%, #a9a59c); --plate: color-mix(in srgb, var(--deep) 70%, #000);
}
.theme-profond .plate-bar, .theme-profond .plate-foot { background: var(--plate); }

/* Avec une couverture, sur mobile, la barre se pose sur la photo. */
@media (max-width: 1023px) {
  .has-cover .plate-bar { position: absolute; inset: 0 0 auto; z-index: 5; padding-bottom: 28px; background: linear-gradient(180deg, #000000cc 0%, #00000080 55%, #00000000 100%); border-bottom: 0; }
  .has-cover .plate-name, .has-cover .plate-name span { text-shadow: 0 1px 8px #000c; }
  .has-cover .plate-name span { color: #ffffffd9; }
  .has-cover .cover { height: min(48vh, 360px); }
}