/* Page publique « preuve d'abord » (profile_proof.html), 2026-10-29.
   Reprise de la maquette validée par Benjamin (proto.css + v2.css du
   prototype) : un seul système, pensé d'abord pour le téléphone, la plaque
   noire au nom de la PERSONNE, jamais de la marque. Feuille autonome : elle
   ne dépend ni du Tailwind purgé ni de base.html, pour qu'aucune règle de
   l'ancienne page ne s'y glisse. Les polices viennent de fonts.css (locales). */

/* Manrope est un fichier variable 200-800 ; fonts.css ne déclare que
   400-600, ce qui faisait synthétiser le gras des boutons. */
@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 400 800;
  src: url("/static/fonts/manrope-latin-wght-normal.woff2") format("woff2"); }


: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); }
}

/* ── Couche « preuve d'abord » (v2) ── */
/* v2 « preuve » : tailles mobiles de Codex (texte 17, méta 14, promesse 40-44),
   cartes de preuve complètes, feuilles plein écran pour vérifier. */
.v2 { font-size: 17px; }
.v2 .status { font-size: 14px; }
.v2 .promise { font-size: clamp(38px, 10.4vw, 44px); line-height: 1.04; }
.v2 .stack { font-size: 14px; }
.v2 .proof span, .v2 .case-meta, .v2 .facts-line { font-size: 14px; }
.v2 .kicker { font-size: 13px; }
.v2 .sec h2 { font-size: 30px; line-height: 1.15; }
.ident-btn { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0; border: 0; background: none;
  font: 500 15px/1.3 var(--sans); color: var(--accent); cursor: pointer; }
.ident-btn svg { width: 16px; height: 16px; }
.localnav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 28px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter);
  border-bottom: 1px solid var(--hair); }
.localnav::-webkit-scrollbar { display: none; }
.localnav a { flex: none; min-height: 48px; display: inline-flex; align-items: center; padding: 0 12px; text-decoration: none;
  font: 600 15px/1 var(--sans); color: var(--ink-soft); border-bottom: 2px solid transparent; }
.localnav a:first-child { padding-left: 0; }
.pcards { display: grid; gap: 14px; }
.pcard { background: var(--paper-raised); border: 1px solid var(--hair); border-radius: 20px; padding: 18px 18px 16px; }
.pcard h3 { margin: 4px 0 10px; font: 600 21px/1.28 var(--sans); letter-spacing: -0.012em; }
.pcard .pc-result { margin: 0 0 14px; color: var(--ink-soft); font-size: 16px; line-height: 1.5; }
.pcard .case-nums { margin-bottom: 12px; }
.pcard .chips { margin-bottom: 14px; }
.badge.declared { color: var(--muted); }
.open-proof, .more-btn, .nav-proof { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 18px; border-radius: 999px;
  border: 0; background: var(--accent-wash); color: var(--accent); font: 700 15.5px/1 var(--sans); cursor: pointer; }
.open-proof svg, .more-btn svg { width: 17px; height: 17px; }
.more-btn { margin-top: 16px; background: transparent; padding: 0; text-align: left; line-height: 1.3; }
.skill-top, .skill-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.skill-top li, .skill-list li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.skill-top b, .skill-list b { font-weight: 600; font-size: 16px; } .skill-top span, .skill-list span { color: var(--muted); font-size: 14px; white-space: nowrap; }
.tl li p { margin: 4px 0 6px; font-size: 15px; color: var(--ink-soft); line-height: 1.45; }
.tl .chips { margin-top: 4px; }
.v2 .path li { grid-template-columns: 92px 1fr; } .v2 .path time { font-size: 13.5px; }
.v2 .path b { font-size: 16px; } .v2 .path span { font-size: 14.5px; }
.facts-line { margin: 14px 0 0; color: var(--muted); line-height: 1.5; }
.linkrow { display: flex; flex-wrap: wrap; gap: 10px; }
.linkrow a { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; border-radius: 14px;
  border: 1px solid var(--hair-strong); background: var(--paper-raised); text-decoration: none; font-weight: 600; font-size: 15px; color: var(--ink); }
.linkrow svg { width: 16px; height: 16px; color: var(--muted); }
/* ── Feuille plein écran ── */
.sheet { position: fixed; inset: 0; z-index: 60; background: var(--paper); overflow-y: auto; overscroll-behavior: contain;
  animation: monte .26s cubic-bezier(.2,.8,.2,1); }
.sheet:not(.open) { display: none; }  /* pas d'attribut hidden : le texte reste lisible par les IA */
@keyframes monte { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.sh-head { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; gap: 6px;
  min-height: 60px; padding: 6px 8px; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hair); }
.sh-head button { width: 48px; height: 48px; border: 0; background: none; border-radius: 50%; display: grid; place-items: center; color: var(--ink); cursor: pointer; }
.sh-head svg { width: 22px; height: 22px; }
.sh-title { font: 700 15.5px/1.2 var(--sans); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-body { max-width: 680px; margin: 0 auto; padding: 18px var(--gutter) calc(40px + env(safe-area-inset-bottom)); }
.sh-body h2 { font: 500 28px/1.15 var(--serif); letter-spacing: -0.015em; margin: 6px 0 16px; }
.case-nums.big div b { font-size: 26px; }
.sh-sources { margin: 22px 0; padding: 16px; border-radius: 18px; background: var(--paper-raised); border: 1px solid var(--hair); }
.src { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; text-decoration: none; color: var(--ink);
  border-top: 1px solid var(--hair); min-height: 56px; }
.src:first-of-type { border-top: 0; }
.src b { display: block; font-size: 15.5px; line-height: 1.35; } .src em { display: block; font-style: normal; color: var(--ink-soft); font-size: 14px; margin-top: 2px; }
.src i { display: block; font-style: normal; color: var(--accent); font-size: 13.5px; margin-top: 3px; }
.src svg { flex: none; width: 18px; height: 18px; color: var(--muted); }
.sh-note { margin: 20px 0; padding: 14px 16px; border-radius: 16px; background: var(--paper-raised); color: var(--ink-soft); font-size: 15px; }
.sh-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.sh-toc a { min-height: 40px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; border: 1px solid var(--hair-strong);
  text-decoration: none; color: var(--ink-soft); font-size: 14px; font-weight: 600; }
.sh-body section { margin-top: 26px; scroll-margin-top: 76px; }
.sh-body h4 { margin: 0 0 8px; font: 600 13px/1 var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sh-body section p, .sh-body .story { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink); max-width: 62ch; }
.sh-body .story + .story { margin-top: 14px; }
.story-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; min-height: 48px; font-weight: 700; color: var(--accent); text-decoration: none; }
.story-link svg { width: 18px; height: 18px; }
.sh-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--hair); }
.nav-proof { background: transparent; padding: 0; font-size: 14.5px; }
.sh-contact { margin-top: 22px; width: 100%; }
.ident { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--hair);
  text-decoration: none; color: var(--ink); min-height: 64px; }
.ident b { font-size: 17px; } .ident span { grid-row: 2; color: var(--muted); font-size: 14.5px; }
.ident i { grid-row: 1 / 3; grid-column: 2; font-style: normal; font-size: 13px; color: var(--accent); font-weight: 700; }
.ident svg { grid-row: 1 / 3; grid-column: 2; width: 18px; height: 18px; color: var(--muted); }
.sheet .field input, .sheet .field textarea { background: var(--paper-raised); color: var(--ink); border-color: var(--hair-strong); }
.sheet .field span { color: var(--muted); } .sheet .privacy { color: var(--muted); } .sheet .form-ok b { color: var(--ink); } .sheet .form-ok p { color: var(--ink-soft); }
.sheet .err-msg { color: #b3261e; }
html.locked, html.locked body { overflow: hidden; }
@media (min-width: 1024px) {
  .v2 .promise { font-size: clamp(48px, 4.4vw, 64px); }
  .localnav { margin: 0; padding: 0; }
  .pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .pcards .lead-case { grid-column: 1 / -1; }
  .sheet { inset: 0 0 0 auto; width: min(760px, 62vw); box-shadow: -30px 0 80px -40px #0007; border-left: 1px solid var(--hair); }
  .sheet::before { content: none; }
  .skill-top { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
}

.v2 .case-nums div span { font-size: 14px; }
.ident-btn { min-height: 44px; }
.pcard { padding: 16px 16px 14px; } .pcard h3 { font-size: 20px; margin-bottom: 8px; } .pcard .pc-result { margin-bottom: 12px; }
.pcard .case-nums { gap: 6px 18px; } .pcard .case-nums div b { font-size: 24px; }

@media (min-width: 1024px) {
  html.locked::after { content: ""; position: fixed; inset: 0; z-index: 55; background: #1b1c1a59; backdrop-filter: blur(2px); animation: fond .2s ease; }
  @keyframes fond { from { opacity: 0; } to { opacity: 1; } }
}

.sh-ref { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--hair); font-size: 15px; color: var(--ink-soft); }

.positioning { margin: -6px 0 12px; font-size: 16.5px; line-height: 1.5; color: var(--ink-soft); max-width: 60ch; }
.employers { margin: 0 0 10px; font: 600 14px/1.4 var(--label); letter-spacing: .02em; color: var(--ink); }
.pc-role { margin: -2px 0 8px; font-size: 15px; font-weight: 600; color: var(--ink); }
.also-used { margin: 14px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.also-used b { color: var(--ink); font-weight: 600; }

.ai-version { font-weight: 600; color: var(--muted) !important; font-size: 13.5px; }
/* ── Grand écran (Full HD et au-delà) : la page prend la largeur ── */
@media (min-width: 1600px) {
  .page { max-width: 1720px; }
  .v2 .promise { font-size: 68px; max-width: 16ch; }
  .layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 72px; }
  .pcards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pcards .lead-case { grid-column: span 2; }
  .skill-top { grid-template-columns: repeat(3, 1fr); }
  .tl { columns: 2; column-gap: 48px; } .tl li { break-inside: avoid; }
}
@media (min-width: 1600px) {
  .positioning { font-size: 19px; max-width: 54ch; }
  .employers, .v2 .stack { font-size: 15.5px; }
  .v2 .status { font-size: 15px; }
  .hero .proofs, .hero-cta { max-width: 640px; }
  .hero .proof b { font-size: 46px; } .hero .proof span { font-size: 15.5px; }
}

/* ── Visuels de preuve, quand ils existent ── */
.pc-visual { aspect-ratio: 16 / 8; margin: -16px -16px 14px; border-radius: 20px 20px 0 0; background-size: cover; background-position: center top; }
.sh-visual { display: block; width: 100%; border-radius: 16px; margin: 4px 0 16px; border: 1px solid var(--hair); }
/* ── Le menu de la page d'origine, qui suit le défilement ── */
.localnav { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(8px); }
.localnav a.on { color: var(--accent); border-bottom-color: var(--accent); }
.sec { scroll-margin-top: 64px; }
/* ── Carte de contact : par-dessus le contenu, jamais à côté ── */
@media (min-width: 1024px) {
  .layout { display: block; }
  .side { position: fixed; right: 28px; bottom: 28px; top: auto; margin: 0; width: 320px; z-index: 40; }
  .side-card { position: relative; box-shadow: 0 24px 60px -24px #0005; }

  .localnav { margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
}
.side-close { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent;
  font: 400 24px/1 var(--sans); color: var(--muted); cursor: pointer; }
.side-close:hover { background: var(--hair); color: var(--ink); }
/* Même hauteur dans une rangée ; l'espace en trop va au-dessus des boutons,
   qui s'alignent tous sur le bord bas. */
.pcards { align-items: stretch; }
.pcard { display: flex; flex-direction: column; }
.pcard .pc-actions { margin-top: auto; padding-top: 4px; }

/* Déplier sur place : la suite est dans la page (lisible par une IA), le style
   la masque à l'humain tant qu'il ne la demande pas. Pas d'attribut hidden. */
.sec:not(.expanded) .extra { display: none; }
.extra .skill-top { border-top: 0; }
.kicker.sub { margin: 22px 0 10px; }
.more-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.more-btn svg { transition: transform .2s ease; }
/* ── Ordinateur : la preuve s'ouvre en modal au milieu de l'écran ── */
@media (min-width: 1024px) {
  .sheet { inset: 6vh 0 auto 0; margin: 0 auto; width: min(840px, calc(100vw - 96px)); max-height: 88vh;
           border-radius: 24px; border: 1px solid var(--hair); box-shadow: 0 40px 120px -40px #0008;
           animation: modal .22s cubic-bezier(.2,.8,.2,1); }
  @keyframes modal { from { transform: translateY(12px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }
  .sheet .sh-head { border-radius: 24px 24px 0 0; }
  .sheet .sh-body { padding: 24px 40px 40px; }
  #contact-sheet { width: min(620px, calc(100vw - 96px)); }
}

.sh-x { display: none; font: 300 30px/1 var(--sans); }
@media (min-width: 1024px) {
  .sheet .sh-head { grid-template-columns: 48px 1fr 48px; }
  .sheet .sh-back svg { display: none; } .sheet .sh-x { display: block; }
  .sheet .sh-back { grid-column: 3; grid-row: 1; } .sheet .sh-share { grid-column: 1; grid-row: 1; } .sheet .sh-title { grid-column: 2; grid-row: 1; }
}

.pc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.story-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 48px; padding: 0 4px; font: 700 15.5px/1 var(--sans);
  color: var(--ink); text-decoration: none; }
.story-btn svg { width: 17px; height: 17px; color: var(--accent); }
.story-btn:hover { color: var(--accent); }

/* La carte flottante, de 1 024 px à l'infini (une ancienne règle la masquait
   entre 1 024 et 1 199 px, sans barre de téléphone à la place : aucun contact). */
@media (min-width: 1024px) {
  .side { display: block !important; }
  .side .side-reopen { display: none; }
  /* Refermée : il reste un petit bouton « Contact », jamais plus rien. */
  .side.side--closed { width: auto; }
  .side.side--closed .side-card { display: none; }
  .side.side--closed .side-reopen { display: inline-flex; }
}
.side-reopen { align-items: center; gap: 8px; min-height: 52px; padding: 0 20px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--accent); color: var(--accent-ink); font: 700 15.5px/1 var(--sans); box-shadow: 0 16px 40px -16px #0007; }
.side-reopen svg { width: 18px; height: 18px; }

/* ── Fiche de preuve sur grand écran : 2 colonnes, lecture à gauche, repères à droite ── */
.sh-stack { margin-top: 22px; } .sh-stack p { margin: 0 0 10px; font-size: 14px; color: var(--muted); }
.sh-aside .sh-contact { margin-top: 18px; }
@media (min-width: 1200px) {
  .sheet.sheet-proof { width: min(1240px, calc(100vw - 96px)); }
  .sheet-proof .sh-body { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) 360px; column-gap: 48px; align-items: start; padding: 28px 44px 44px; }
  .sheet-proof .sh-top { grid-column: 1 / -1; }
  .sheet-proof .sh-top h2 { font-size: 34px; max-width: 30ch; }
  .sheet-proof .sh-visual { max-height: 420px; object-fit: cover; object-position: top; }
  .sheet-proof .sh-main { grid-column: 1; grid-row: 2; }
  .sheet-proof .sh-main section:first-child { margin-top: 0; }
  .sheet-proof .sh-main section p { font-size: 17.5px; max-width: 68ch; }
  .sheet-proof .sh-aside { grid-column: 2; grid-row: 2; position: sticky; top: 76px; }
  .sheet-proof .sh-aside .sh-sources { margin-top: 18px; }
  .sheet-proof .sh-toc { flex-direction: column; gap: 2px; margin-top: 18px; }
  .sheet-proof .sh-toc a { border: 0; padding: 0; min-height: 34px; color: var(--accent); }
}



/* ── Carte de contact seule en bas à droite ── */
@media (min-width: 1024px) {
  .localnav { position: static; background: none; backdrop-filter: none; }
  .side .side-reopen { display: none; }
  .side.side--closed { width: auto; }
  .side.side--closed .side-card { display: none; }
  .side.side--closed .side-reopen { display: inline-flex; }
  html.locked .side, html.locked .rail-toc { opacity: 0; pointer-events: none; }
}
/* ── Table des matières : un rail fin sur le bord gauche ──
   Un point par section reliés par un trait ; la section lue a un point plus
   gros, coloré, et son nom ; survoler le rail montre tous les noms. */
.rail-toc { display: none; }
@media (min-width: 1024px) {
  .rail-toc { display: flex; flex-direction: column; position: fixed; left: 22px; top: 50%; z-index: 44; transform: translate(-12px, -50%);
    opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; padding: 6px 0; }
  .rail-toc.on { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
  .rail-toc::before { content: ""; position: absolute; left: 13px; top: 22px; bottom: 22px; width: 1.5px; background: var(--hair-strong); }
  .rail-toc a { position: relative; display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px 0 8px; text-decoration: none; }
  .rail-toc i { flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--outline, #a89f90);
    transition: transform .2s ease, background .2s ease, border-color .2s ease; z-index: 1; }
  .rail-toc span { font: 600 14px/1 var(--sans); color: var(--ink-soft); white-space: nowrap; padding: 6px 10px; border-radius: 999px;
    background: color-mix(in srgb, var(--paper-raised) 92%, transparent); box-shadow: 0 6px 18px -10px #0005;
    opacity: 0; transform: translateX(-6px); transition: opacity .18s ease, transform .18s ease; }
  .rail-toc a.on i { background: var(--accent); border-color: var(--accent); transform: scale(1.35); }
  .rail-toc a.on span { color: var(--accent); }  /* les noms ne paraissent qu'au survol : au repos, le rail tient dans la marge */
  .rail-toc:hover span { opacity: 1; transform: none; }
  .rail-toc a:hover span { color: var(--ink); }
}

@media (min-width: 1024px) { .rail-toc { left: max(10px, calc((100vw - 1720px) / 4)); } }

/* ── La plaque : ce qui STRUCTURE est sur le noir, ce qui SE LIT reste sur crème
   (règle « échafaudage vs lecture », 2026-08-02). Blanc plein pour ce qui porte,
   blanc .5 pour le secondaire, bleu seulement en gros. ── */
/* La bande des chiffres du haut, sur plaque */
.v2 .hero .proofs { gap: 0; background: var(--plate); border-radius: 20px; overflow: hidden; }
.v2 .hero .proof { background: transparent; border: 0; border-radius: 0; padding: 18px 18px 16px; }
.v2 .hero .proof + .proof { border-left: 1px solid var(--plate-line); }
.v2 .hero .proof b { color: #fff; }
.v2 .hero .proof span { color: #ffffff80; }
/* La carte de contact flottante, sur plaque */
.v2 .side-card { background: var(--plate); border-color: var(--plate); color: #fff; }
.v2 .side-card .who-name { color: #fff; } .v2 .side-card .who-trade { color: #ffffff80; }
.v2 .side-proofs b { color: #fff; } .v2 .side-proofs span { color: #ffffff80; }
.v2 .side-close { color: #ffffff99; } .v2 .side-close:hover { background: #ffffff1a; color: #fff; }
.v2 .side-reopen { background: var(--plate); color: #fff; }
/* Le pied de page, sur plaque, pleine largeur */
.v2 .foot { display: none; }
.v2 .page { padding-bottom: 0; }

/* 1. Panneau de contact qui clôt la page */
.plate-contact-band { background: var(--plate); color: #fff; border-radius: 28px; margin: 72px 0 0; padding: 32px 22px 26px; }
.plate-contact-band h2 { margin: 0 0 10px; font: 500 30px/1.12 var(--serif); letter-spacing: -0.015em; color: #fff; }
.plate-contact-band p { margin: 0 0 20px; color: #ffffffcc; font-size: 16.5px; line-height: 1.55; max-width: 56ch; }
.plate-contact-band .cta { width: 100%; }
@media (min-width: 1024px) {
  .plate-contact-band { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 48px; padding: 44px 48px; }
  .plate-contact-band h2 { font-size: 40px; grid-column: 1; } .plate-contact-band p { grid-column: 1; margin: 0; }
  .plate-contact-band .cta { grid-column: 2; grid-row: 1 / 3; width: auto; min-width: 260px; min-height: 60px; }
}
.plate-foot { margin-top: 40px; }
/* 2. Cadre des fenêtres (preuve, contact) sur plaque ; l'intérieur reste crème */
.sheet .sh-head { background: var(--plate); border-bottom-color: var(--plate); }
.sheet .sh-head button, .sheet .sh-title { color: #fff; }
.sheet .sh-head button:hover { background: #ffffff1a; }
/* 3. Barre du bas sur téléphone : une bande noire qui porte le bouton */
@media (max-width: 1023px) {
  .v2 .bar { background: var(--plate); padding-top: 10px; box-shadow: 0 -10px 30px -18px #0007; }
  .v2 .bar .cta { box-shadow: none; }
}
/* 4. Noms du rail au survol : blanc sur plaque */
@media (min-width: 1024px) {
  .rail-toc span { background: var(--plate); color: #fff; box-shadow: 0 8px 22px -12px #0008; }
  .rail-toc a.on span { color: #fff; }
  .rail-toc a:hover span { color: #fff; background: #1d1d20; }
}

.side { transition: opacity .2s ease, transform .2s ease; }
.side.side--away { opacity: 0 !important; transform: translateY(12px) !important; pointer-events: none !important; }

.v2 .plate-bar .plate-in { min-height: 64px; }
.v2 .hero-text > .status:first-child { margin-top: 6px; }

/* ── Production (2026-10-29) : ce que la maquette n'avait pas. ── */
.form-err { margin: 10px 0 0; font-size: 14px; color: #b3261e; min-height: 0; }
.form-err:empty { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.owner-note { background: #fff7d6; color: #4a3d0a; font-size: 14.5px; }
.owner-note .plate-in { min-height: 44px; justify-content: center; gap: 12px; flex-wrap: wrap; }
.owner-note a { font-weight: 700; color: inherit; }
.headline-lines { margin: -6px 0 16px; color: var(--ink-soft); font-size: 15px; line-height: 1.5; }
.headline-lines span { display: block; }
.ld-only { display: none; }
/* Sélecteur de langue, dans la plaque. */
.lang-pick { position: relative; }
.lang-pick summary { list-style: none; min-width: 44px; height: 44px; display: grid; place-items: center; padding: 0 10px; border-radius: 999px; border: 1px solid #ffffff33;
  color: #fff; font: 700 13px/1 var(--label); letter-spacing: .06em; cursor: pointer; }
.lang-pick summary::-webkit-details-marker { display: none; }
.lang-pick summary:hover { background: #ffffff14; }
.lang-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 70; min-width: 150px; padding: 6px; border-radius: 14px; background: #fff; box-shadow: 0 20px 50px -20px #0008; display: grid; }
.lang-menu a { min-height: 44px; display: flex; align-items: center; padding: 0 12px; border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; }
.lang-menu a:hover { background: var(--paper); }
.lang-menu a[aria-current] { color: var(--accent); }
.example-note { background: #eef3fb; color: #1d3550; }
/* L'accroche se resserre quand elle est longue (corps ramené de 44 à 34, puis 28). */
.v2 .promise.promise-l { font-size: clamp(28px, 7.4vw, 46px); }
.v2 .promise.promise-xl { font-size: clamp(24px, 6.2vw, 38px); }
/* Couverture d'une page de preuves : un visuel réel du travail, légendé, ou le
   portrait. Mobile seulement (le visuel du héros prend le relais au-delà). */
.work-cover, .portrait-cover { margin-top: 0; }
.work-cover { background-position: 40% 40%; }
.portrait-cover { background-position: center 22%; }
.work-cover::after, .portrait-cover::after { background: linear-gradient(180deg, #0b0b0c66 0%, transparent 30%, transparent 55%, var(--paper) 100%); }
.work-cover figcaption { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 74px; z-index: 1; margin: 0;
  padding: 8px 12px; border-radius: 12px; background: #0b0b0cd9; color: #fff; font: 500 13px/1.35 var(--sans); }
button.soc { background: var(--paper-raised); border: 1px solid var(--hair); cursor: pointer; font: inherit; }
@media (min-width: 1024px) { .v2 .hero .socials { margin-top: 16px; } }
@media (min-width: 1024px) { .v2 .hero .socials { justify-content: flex-start; } }
.v2 .hero .headline-lines { margin: 18px 0 10px; }
/* Pièces d'une identité : tuiles au format papier (A4), aperçu réel si présent. */
.sec-sub { margin: -4px 0 14px; color: var(--ink-soft); font-size: 15.5px; max-width: 60ch; }
.docs-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: -4px 0 22px; }
.docs-head .sec-sub { margin: 0; }
.doc-zip-btn { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--paper-raised);
  border: 1px solid var(--hair-strong); color: var(--ink); font: 700 12px/1 var(--label); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.doc-zip-btn:hover { border-color: var(--accent); }
.doc-group { display: flex; align-items: center; gap: 8px; margin: 30px 0 0; padding-bottom: 12px; border-bottom: 1px solid var(--hair);
  font: 700 13px/1.2 var(--label); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); }
.doc-group:first-of-type { margin-top: 0; }
.doc-group svg { width: 18px; height: 18px; color: var(--accent); flex: none; }
.doc-group span { font: 500 13px/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted); }
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; padding-top: 16px; }
.doc-tile { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: var(--paper-raised); border: 1px solid var(--hair);
  color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s; }
a.doc-tile:hover { border-color: var(--accent); transform: translateY(-2px); }
.doc-shot { position: relative; display: block; aspect-ratio: 1 / 1.2; background: var(--paper); border-bottom: 1px solid var(--hair); overflow: hidden; }
.doc-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.doc-title { display: block; padding: 10px 12px 12px; font-size: 13px; font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Galerie */
.pf-grid { columns: 2 160px; column-gap: 12px; }
.pf-tile { display: block; margin: 0 0 12px; break-inside: avoid; border-radius: 14px; overflow: hidden; background: var(--paper-raised); border: 1px solid var(--hair); text-decoration: none; color: var(--ink-soft); }
.pf-tile img { display: block; width: 100%; height: auto; }
.pf-tile span { display: block; padding: 8px 10px; font-size: 13.5px; }
@media (min-width: 1024px) { .pf-grid { columns: 3 220px; } }
/* Produits */
.prod-grid { display: grid; gap: 14px; }
@media (min-width: 900px) { .prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.prod { padding: 18px; border-radius: var(--radius); background: var(--paper-raised); border: 1px solid var(--hair); }
.prod h3 { margin: 6px 0 8px; font: 500 21px/1.2 var(--serif); }
.prod p { margin: 0 0 10px; color: var(--ink-soft); font-size: 15px; line-height: 1.5; }
/* Une pièce sans aperçu a l'allure d'une page : lignes et coin replié. */
.doc-tile:not(.has-shot) .doc-shot { background:
  linear-gradient(135deg, transparent calc(100% - 22px), var(--hair-strong) calc(100% - 22px), var(--hair-strong) calc(100% - 21px), var(--paper) calc(100% - 21px)) top right / 100% 100% no-repeat,
  repeating-linear-gradient(180deg, transparent 0 14px, var(--hair) 14px 15px) 14px 28px / calc(100% - 28px) 45% no-repeat,
  var(--paper-raised); }
/* La barre du propriétaire, au-dessus de la plaque : claire, pour qu'on ne la
   prenne jamais pour une partie de la page que voient les visiteurs. */
.owner-bar { background: #fff7d6; color: #3d3206; font-size: 14px; border-bottom: 1px solid #e9d98a; }
.owner-bar.preview { background: #eef3fb; color: #1d3550; border-color: #c9d8ee; }
.owner-bar .plate-in { min-height: 52px; flex-wrap: wrap; gap: 8px; justify-content: flex-start; padding-top: 6px; padding-bottom: 6px; }
.ob-spacer { flex: 1; }
.ob-state { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; }
.ob-state i { width: 9px; height: 9px; border-radius: 50%; background: #9c968a; }
.ob-state.on i { background: #2e9e5b; }
.ob-btn { min-height: 40px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; border: 1px solid #00000022; background: #fff;
  color: inherit; font: 600 13.5px/1 var(--sans); text-decoration: none; cursor: pointer; }
.ob-btn.ob-main { background: #1b1c1a; border-color: #1b1c1a; color: #fff; }
.ob-btn.armed { background: #b3261e; border-color: #b3261e; color: #fff; }
.ob-switch { position: relative; }
.ob-switch summary { list-style: none; min-height: 40px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border-radius: 999px; background: #fff;
  border: 1px solid #00000022; font-weight: 700; cursor: pointer; max-width: 46vw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ob-switch summary::-webkit-details-marker { display: none; }
.ob-switch summary::after { content: "▾"; font-size: 11px; }
.ob-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 80; min-width: 260px; padding: 6px; border-radius: 14px; background: #fff; box-shadow: 0 20px 50px -20px #0008; display: grid; }
.ob-menu p { margin: 6px 10px; font: 600 11.5px/1 var(--label); letter-spacing: .08em; text-transform: uppercase; color: #6b6257; }
.ob-menu a { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 10px; border-radius: 10px; color: #1b1c1a; text-decoration: none; font-weight: 600; }
.ob-menu a:hover { background: #f7f5ef; } .ob-menu a[aria-current] { color: var(--accent); }
.ob-menu em { font-style: normal; font: 600 11px/1 var(--label); padding: 3px 7px; border-radius: 999px; background: #ece8e0; color: #6b6257; }
/* Avec une couverture, la plaque se pose sur la photo (position absolue) : elle
   recouvrait la barre du propriétaire et le bandeau d'exemple. Elle reprend sa
   place juste APRÈS eux (top: auto = sa position dans le flux). */
@media (max-width: 1023px) {
  .has-cover .owner-bar + .plate-bar, .has-cover .owner-note + .plate-bar,
  .has-cover .owner-bar + .owner-bar + .plate-bar { top: auto; }
}

/* Liens ajoutés (blocks.links) : réservation et boutique en boutons, réseaux en icônes. */
.link-acts { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.link-act { min-height: 48px; }
.socials-left { justify-content: flex-start; margin: 0 0 14px; }

/* Offres (blocks.offers) : une liste lisible, prix aligné à droite. */
.offers { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 900px) { .offers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.offer { padding: 16px 18px; border-radius: var(--radius); background: var(--paper-raised); border: 1px solid var(--hair); display: grid; gap: 6px; }
.offer-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.offer-top b { font-size: 16.5px; line-height: 1.3; }
.offer-price { flex: none; font: 600 16px/1.2 var(--serif); color: var(--ink); white-space: nowrap; }
.offer p { margin: 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.45; }
.offer-dur { color: var(--muted); }
.offer-go { justify-self: start; margin-top: 4px; color: var(--accent); font-weight: 700; font-size: 14.5px; text-decoration: none; }

/* Le crayon du propriétaire (haut de page), et la feuille d'édition. */
.own-edit { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 14px; padding: 6px 12px; min-height: 36px; border-radius: 999px;
  border: 1px dashed var(--hair-strong, #d8d1c2); background: transparent; color: inherit; font: 600 13.5px/1 var(--sans); cursor: pointer; opacity: .85; }
.own-edit:hover { opacity: 1; border-style: solid; }
.own-edit svg { width: 15px; height: 15px; }
.field-hint { display: block; margin-top: 6px; font-size: 12.5px; color: #8f897d; }
.stats-edit { border: 0; padding: 0; margin: 0 0 10px; }
.stats-edit .stat-row { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 8px; margin-bottom: 8px; }

/* La page de départ (/start-preview) : des cases à compléter, pas du contenu. */
.start-ph .start-add { margin: 0; padding: 22px 20px; border-radius: 18px; border: 1.5px dashed var(--hair-strong, #d8d1c2);
  color: var(--muted, #6b6257); font-size: 15.5px; text-align: center; }

/* 1. Entre le téléphone et l'ordinateur (moitié d'écran Full HD, tablette) :
      la page prend la largeur au lieu d'une colonne de téléphone centrée. */
@media (min-width: 720px) and (max-width: 1023px) {
  .page { max-width: none; }
  .hero .proofs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .positioning, .hero .stack { max-width: none; }
}
/* 2. Les chiffres du haut de page en bleu, comme sur l'ancienne page. */
.v2 .hero .proof b { color: color-mix(in srgb, var(--accent) 55%, #ffffff); }
/* 3. La ligne de faits : une icône par fait. */
.status svg { width: 16px; height: 16px; flex: none; color: var(--muted); }
.status .dot + svg { display: none; }
/* 5. Les titres de section : le gabarit de l'ancienne page (semi-gras, 30 puis 36 px). */
.sec h2 { font-weight: 600; font-size: 30px; line-height: 1.15; letter-spacing: -0.015em; }
@media (min-width: 768px) { .sec h2 { font-size: 36px; } }
/* Les lignes d'une expérience : la puce ronde bleue de l'ancienne page. */
.tl li p { position: relative; padding-left: 16px; }
.tl li p::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.tl-stack { display: block; margin-top: 3px; font-size: 13.5px; color: var(--muted); }
/* Pièce avec aperçu : le dessin de l'ancienne page. La tuile est un A4 que
   l'aperçu remplit ; le titre, en blanc, se pose en bas sur un fondu sombre
   qui va d'un bord à l'autre, lisible quelle que soit la page dessous. */
.doc-tile.has-shot { position: relative; aspect-ratio: 1 / 1.414; justify-content: flex-end; }
.doc-tile.has-shot .doc-shot { position: absolute; inset: 0; aspect-ratio: auto; border-bottom: 0; }
.doc-tile.has-shot .doc-title { position: relative; z-index: 1; padding: 2.4rem 10px 0; border-bottom: 10px solid rgba(0,0,0,.82); color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.82) 38%, rgba(0,0,0,0)); font-size: 12.5px; line-height: 1.3; }
/* Sur ordinateur, le texte du haut de page occupe TOUTE sa colonne : le titre
   n'est plus bridé à 14 caractères, ni les chiffres, la présentation, les
   outils et le bouton à 560-640 px, dans une colonne qui en fait 690 à 900. */
@media (min-width: 1024px) {
  .hero .promise { max-width: none; }
  .hero .proofs, .hero .positioning, .hero .stack, .hero-cta, .hero .socials { max-width: none; }
  .v2 .hero .proofs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Le parcours se lit de haut en bas, comme une chronologie : une seule
   colonne à toutes les largeurs (deux colonnes de journal faisaient remonter
   l'œil en haut de la seconde et perdaient la suite des dates). Les dates
   restent à gauche ; les lignes de texte gardent une longueur lisible. */
.tl { columns: auto !important; }
@media (min-width: 1024px) {
  .v2 .path.tl li { grid-template-columns: 150px minmax(0, 1fr); }
  .tl li > div { max-width: 82ch; }
}

/* Drapeaux du sélecteur de langue partagé (2026-10-30), comme sur l'ancienne page. */
.lang-flag { width: 20px; height: 15px; object-fit: cover; border-radius: 2px; display: block; }
.lang-menu a .lang-flag { width: 18px; height: 13px; margin-right: 10px; flex: none; }
/* Le bouton Contact du bandeau : plein, en bleu, comme sur l'ancienne page. */
.plate-contact { background: var(--accent); border-color: var(--accent); border-radius: 10px; min-height: 44px; padding: 0 20px; }
/* Le drapeau se suffit : pas de cercle autour. */
.plate-bar .lang-pick summary { border: 0; }
.plate-contact:hover { background: color-mix(in srgb, var(--accent) 86%, #000); }
/* Haut de page sur ordinateur, à la manière de l'ancienne page (préférée le
   2026-10-30) : nom en surtitre, accroche, présentation entière en
   paragraphes, un bouton « Me contacter » à sa taille, la photo à droite en
   haut ; les chiffres sortent dans un bandeau sombre pleine largeur, dessous.
   Le téléphone garde son haut de page : extrait, chiffres sur plaque. */
.hero-bio, .proofs-band { display: none; }
@media (min-width: 1024px) {
  .hero { grid-template-columns: minmax(0, 1fr) clamp(280px, 22vw, 340px); gap: clamp(40px, 4vw, 72px);
          align-items: start; min-height: 0; padding: 44px 0 56px; }
  /* Une ligne par élément, sauf le bouton et les icônes de liens, côte à côte. */
  .hero-text { display: flex; flex-flow: row wrap; align-items: center; }
  .hero-text > * { min-width: 0; flex: 0 0 100%; }
  .hero-text > .hero-cta, .hero .socials, .own-edit { flex: none; }
  .hero .status { order: 1; margin: 0 0 22px; }
  .hero .promise { order: 3; font-size: clamp(40px, 3vw, 54px); line-height: 1.08; margin: 0 0 22px; }
  .own-edit { order: 4; align-self: flex-start; }
  .hero .headline-lines { order: 5; }
  .hero .positioning { order: 6; }
  .hero-text:has(.hero-bio) .positioning { display: none; }
  .hero-bio { order: 6; display: block; color: var(--ink-soft); font-size: 18px; line-height: 1.6; }
  .hero-bio p { margin: 0 0 4px; }
  .hero .stack { order: 7; margin: 14px 0 0; }
  /* Sous la présentation entière, la ligne des compétences répète la section
     Expertise juste en dessous : on ne la garde que sans présentation. */
  .hero-text:has(.hero-bio) .stack { display: none; }
  .hero-cta { order: 8; justify-content: flex-start; margin-top: 30px; }
  .hero-cta .cta, .hero-cta .cta-2 { flex: none; width: auto; min-height: 52px; padding: 0 26px; font-size: 16px; }
  .hero .socials, .v2 .hero .socials { order: 9; margin: 30px 0 0 14px; }
  .hero .proofs { display: none; }
  .hero-visual { align-self: start; min-height: 0; aspect-ratio: 4 / 5; border-radius: 22px; }
  /* Le bandeau : la plaque déborde de la colonne jusqu'aux bords de l'écran
     sans créer de défilement horizontal (border-image-outset ne compte pas
     dans le débordement). */
  .proofs-band { display: block; margin: 0 0 8px; padding: 46px 0 50px;
                 border-image: conic-gradient(var(--plate) 0 0) fill 0 / 0 / 0 100vmax; }
  .hero .socials .soc[data-open] { display: none; }
  .proofs-band-in { display: flex; justify-content: center; gap: clamp(28px, 4vw, 72px); }
  .proofs-band .proof { flex: 0 1 240px; background: none; border: 0; padding: 0; text-align: center; }
  .proofs-band .proof b { font: 600 40px/1 var(--serif); color: color-mix(in srgb, var(--accent) 70%, #ffffff); }
  .proofs-band .proof span { margin-top: 10px; color: #ffffffd9; font-size: 15px; line-height: 1.35; }
}
/* L'accroche : le dessin de l'ancienne page (Fraunces semi-gras, taille
   optique automatique, serrée), plus lisible que le corps 500 en « opsz 96 »
   aux pleins et déliés très contrastés. Le thème Nuit garde son maigre. */
.hero .promise { font-variation-settings: normal; letter-spacing: -0.025em; }
body:not(.theme-nuit) .hero .promise { font-weight: 600; }
@media (min-width: 1024px) {
  .v2 .hero .promise, .v2 .hero .promise.promise-l { font-size: 48px; line-height: 1.05; }
  .v2 .hero .promise.promise-xl { font-size: 42px; line-height: 1.08; }
}
/* Le pied de page de l'ancienne page (base.html) : une ligne sur la plaque,
   la marque, deux liens, le © à droite. Sur téléphone, il laisse la place de
   la barre de contact fixe. */
.site-footer { background: var(--plate); color: #cfd4da; margin-top: 56px; padding-bottom: calc(var(--bar) + env(safe-area-inset-bottom)); }
.site-footer .in { max-width: 1720px; margin: 0 auto; padding: 20px var(--gutter); display: flex; align-items: center; gap: 20px; flex-wrap: wrap; font: 400 13px/1.4 var(--sans); }
.site-footer .iampro-logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.site-footer .iampro-logo img { width: 24px; height: 24px; border-radius: 6px; }
.site-footer .wordmark { font-weight: 600; color: #fff; }
.site-footer .wordmark span { color: #0A7CD5; }
.site-footer .make { color: #cfd4da; text-decoration: none; font-weight: 600; }
.site-footer .make:hover { color: #fff; }
.site-footer .copy { margin-left: auto; color: rgba(255, 255, 255, .45); }
@media (min-width: 1024px) { .site-footer { padding-bottom: 0; } }
.theme-nuit .site-footer { border-top: 1px solid var(--hair); }
@media (max-width: 640px) { .site-footer .in { gap: 14px 20px; } .site-footer .copy { margin-left: 0; flex-basis: 100%; } }
/* Le parcours, au dessin de l'ancienne page : fil vertical, un point par
   poste (bleu pour le poste en cours), date, « poste · employeur » en Fraunces
   semi-gras, outils en gris, lignes à puce bleue. Toute la largeur. */
.career { list-style: none; margin: 0; padding: 0 0 0 30px; border-left: 1px solid var(--hair); }
.career > li { position: relative; scroll-margin-top: 1.5rem; }
.career > li + li { margin-top: 36px; }
.career > li::before { content: ""; position: absolute; left: -41px; top: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 14%, var(--paper)); border: 4px solid var(--paper); box-sizing: border-box; }
.career > li.now::before { background: var(--accent); }
.career time { display: block; font-size: 14px; color: var(--muted); }
.career > li.now time { color: var(--accent); }
.career h3 { margin: 4px 0 0; font: 600 20px/1.3 var(--serif); letter-spacing: -0.01em; color: var(--ink); }
.career h3 span { font-weight: 400; color: var(--ink-soft); }
.career-stack { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.career ul { list-style: none; margin: 8px 0 0; padding: 0; }
.career ul li { position: relative; padding-left: 16px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.career ul li + li { margin-top: 6px; }
.career ul li::before { content: ""; position: absolute; left: 0; top: .66em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
@media (max-width: 640px) { .career { padding-left: 24px; } .career > li::before { left: -35px; } .career h3 { font-size: 18px; } }
/* Sur ordinateur, le premier bloc de la présentation est déjà en haut de
   page : « À propos » n'en garde que la suite, et disparaît s'il n'y en a pas. */
@media (min-width: 1024px) {
  .about-lead { display: none; }
  .about-lead-only { display: none !important; }
}
/* Le mode édition (?edit=1) : une barre qui le dit, ce qui est masqué aux
   visiteurs grisé, et un bouton discret à côté de ce qu'il commande. */
.edit-bar { background: color-mix(in srgb, var(--accent) 12%, var(--paper)); border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, var(--paper)); color: var(--ink); }
.edit-bar .plate-in { min-height: 48px; flex-wrap: wrap; gap: 8px; justify-content: flex-start; padding-top: 6px; padding-bottom: 6px; font-size: 14px; }
.edit-bar .plate-in > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.edit-bar svg { width: 16px; height: 16px; color: var(--accent); }
.edit-bar .ob-btn { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 25%, transparent); cursor: pointer; }
.vis-btn { display: inline-flex; align-items: center; min-height: 30px; margin: 8px 8px 0 0; padding: 0 12px; border-radius: 8px; border: 1px solid var(--hair);
  background: var(--paper-raised); color: var(--ink-soft); font: 600 12.5px/1 var(--sans); cursor: pointer; }
.vis-btn:hover { border-color: var(--accent); color: var(--accent); }
.vis-btn.sm { min-height: 24px; margin: 0 0 0 6px; padding: 0 8px; font-size: 11.5px; vertical-align: 1px; }
.vis-btn.failed, .soc-edit.failed { border-color: #c0392b; color: #c0392b; }
.off-note { font-style: normal; font-size: 12.5px; color: var(--muted); }
.career > li.is-off > time, .career > li.is-off > h3, .career > li.is-off > .career-stack, .career ul li.is-off { opacity: .45; }
.career ul li.is-off { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); }
.soc-edit { position: relative; cursor: pointer; }
.soc-edit.is-off > svg { opacity: .35; }
.soc-badge { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: var(--paper); font: 700 12px/1 var(--sans); font-style: normal; }
.soc-edit.is-off .soc-badge { background: var(--accent); color: #fff; }
.career > li.is-off ul li { opacity: .45; }
/* Mode édition, second lot : pièces, récits, recadrage. */
.edit-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 18px; }
.edit-row .vis-btn { margin: 0; text-decoration: none; }
.vis-btn svg { width: 14px; height: 14px; margin-right: 6px; }
.vis-btn.danger { color: #b3261e; border-color: color-mix(in srgb, #b3261e 35%, transparent); }
.doc-edit { cursor: pointer; position: relative; outline-offset: 3px; }
.doc-edit:hover { outline: 2px solid var(--accent); }
.doc-move { position: absolute; top: 6px; right: 6px; z-index: 2; display: flex; gap: 4px; }
.doc-move button { width: 28px; height: 28px; border-radius: 8px; border: 0; background: rgba(0,0,0,.72); color: #fff; font: 700 14px/1 var(--sans); cursor: pointer; }
.doc-move button:hover { background: var(--accent); }
.doc-add-btn { cursor: pointer; }
.doc-preview { margin: 0 0 16px; text-align: center; }
.doc-preview img { max-width: 100%; max-height: 46vh; border-radius: 10px; border: 1px solid var(--hair); }
.piece-list { display: grid; gap: 8px; }
.piece { text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--hair); background: var(--paper-raised); color: var(--ink); font: 500 15px/1.35 var(--sans); cursor: pointer; }
.piece:hover { border-color: var(--accent); }
.card-img img { display: block; max-width: 100%; max-height: 240px; border-radius: 12px; margin: 4px 0 8px; }
.crop-box { max-width: 560px; margin: 0 auto 16px; }
.crop-box img { display: block; max-width: 100%; }
.path li.is-off > time, .path li.is-off > div > b, .path li.is-off > div > span, .path li.is-off > div > a { opacity: .45; }
/* Mode édition, dernier lot : galerie, liens privés. */
.pf-edit { position: relative; }
.pf-tools { display: flex; gap: 4px; align-items: center; padding: 6px; background: var(--paper-raised); border-top: 1px solid var(--hair); }
.pf-tools input { flex: 1; min-width: 0; height: 30px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--hair); background: var(--paper); color: var(--ink); font: 400 13px/1 var(--sans); }
.pf-tools input.failed { border-color: #b3261e; }
.pf-tools button { flex: none; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--hair); background: var(--paper); color: var(--ink); font: 700 13px/1 var(--sans); cursor: pointer; }
.pf-tools button.danger { color: #b3261e; }
.pl-list { display: grid; gap: 8px; margin-top: 18px; }
.pl-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--hair); background: var(--paper-raised); }
.pl-row > div { flex: 1; min-width: 200px; } .pl-row b { display: block; font-size: 14px; } .pl-row span { display: block; font-size: 12.5px; color: var(--muted); }
.pl-row.is-off { opacity: .55; } .pl-row .vis-btn { margin: 0; }
.vis-btn.armed { background: #b3261e; border-color: #b3261e; color: #fff; }
.sheet .field select { width: 100%; }
.sheet .field select { background-color: var(--paper-raised); color: var(--ink); border-color: var(--hair-strong); }