/* Polices auto-hébergées (plus d'appel à Google Fonts) + polices de secours calées sur leurs métriques pour éviter les sauts de texte */
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-grotesque.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: optional; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: optional; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: optional; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: optional; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-600.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: optional; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: optional; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2"); font-weight: 500 700; font-style: normal; font-display: optional; }
@font-face { font-family: "Bricolage fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); size-adjust: 104.5%; ascent-override: 89%; descent-override: 25.8%; line-gap-override: 0%; }
@font-face { font-family: "Plex fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); size-adjust: 102.8%; ascent-override: 99.7%; descent-override: 26.8%; line-gap-override: 0%; }
@font-face { font-family: "Plex Mono fallback"; src: local("Courier New"), local("Liberation Mono"); size-adjust: 100%; ascent-override: 82.3%; descent-override: 22.1%; line-gap-override: 0%; }

/* Layout: une feuille de route de production. Papier gris chaud, encre bleu nuit, et une seule couleur forte : l'ambre des jalons, réservée aux temps forts et aux actions. Les métiers ont des teintes sourdes. Peu de cartes : des filets et des colonnes. */
:root {
  --paper: #eceae5;
  --sheet: #f8f7f4;
  --ink: #1a1c2b;
  --muted: #5a5c6b;
  --line: #d3d0c8;
  --green: #f3a712;      /* ambre des jalons : aplats, avec texte encre */
  --green-ink: #8a5300;  /* liens et texte ambre sur papier */
  --d-content: #1a1c2b;  /* production */
  --d-art: #b48bb5;      /* freelances */
  --d-tech: #6aa39b;     /* assets marketing */
  --d-com: #d4683f;      /* communication */
  --d-lead: #1a1c2b;
  --tag-teal: #2f6b63;
  --tag-mauve: #7a4a7c;
  --tag-coral: #9a3e1c;
  --band: #1a1c2b;
  --on-band: #eceae5;
  --f-display: "Bricolage Grotesque", "Bricolage fallback", sans-serif;
  --f-body: "IBM Plex Sans", "Plex fallback", sans-serif;
  --f-mono: "IBM Plex Mono", "Plex Mono fallback", monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #13141c; --sheet: #1c1e29; --ink: #ecebe6; --muted: #a3a4b2; --line: #343747;
    --green: #f5b235; --green-ink: #f5b84a; --d-content: #ecebe6; --d-art: #c9a2ca; --d-tech: #7dbbb2; --d-com: #e58262; --d-lead: #ecebe6;
    --tag-teal: #8fd0c6; --tag-mauve: #d9b6da; --tag-coral: #f0a184; --band: #0d0e14; --on-band: #ecebe6; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #13141c; --sheet: #1c1e29; --ink: #ecebe6; --muted: #a3a4b2; --line: #343747;
    --green: #f5b235; --green-ink: #f5b84a; --d-content: #ecebe6; --d-art: #c9a2ca; --d-tech: #7dbbb2; --d-com: #e58262; --d-lead: #ecebe6;
    --tag-teal: #8fd0c6; --tag-mauve: #d9b6da; --tag-coral: #f0a184; --band: #0d0e14; --on-band: #ecebe6; color-scheme: dark;
}

body { background: var(--paper); color: var(--ink); font-family: var(--f-body); font-size: 17px; line-height: 1.6; }
.wrap { max-width: 1120px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
a { color: var(--green-ink); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--green-ink); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--f-display); text-wrap: balance; margin: 0; line-height: 1.08; }
p { margin: 0; }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
[hidden] { display: none !important; }
img { height: auto; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; background: var(--sheet); padding: 8px 12px; z-index: 20; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--f-body); font-weight: 600; font-size: 16px; padding: 13px 20px; border-radius: 6px; text-decoration: none; border: 2px solid var(--ink); cursor: pointer; line-height: 1.2; }
.btn.go { background: var(--green); color: #17140f; border-color: #17140f; box-shadow: 3px 3px 0 var(--ink); }
.btn.go:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink); }
.btn.go:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }
.btn.line { background: transparent; color: var(--ink); }
.btn.line:hover { background: var(--sheet); }
.btn.small { font-size: 14px; padding: 8px 14px; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .btn.go:hover, .btn.go:active { transform: none; } }

/* Header */
header.top { border-bottom: 1px solid var(--line); background: var(--paper); }
@media (min-width: 901px) { header.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; } body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--paper); } section[id] { scroll-margin-top: 76px; } }
header.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 14px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); min-width: 0; }
.brand img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.brand b { font-family: var(--f-display); font-size: 17px; display: block; line-height: 1.2; }
.brand span { font-size: 13px; color: var(--muted); }
nav.links { display: flex; gap: 16px; font-size: 14px; align-items: center; white-space: nowrap; }
.brand b { white-space: nowrap; }
@media (max-width: 1100px) { nav.links { gap: 12px; font-size: 13px; } }
nav.links a { color: var(--ink); text-decoration: none; }
nav.links a:hover { text-decoration: underline; }
@media (max-width: 900px) { header.top .wrap { flex-wrap: wrap; row-gap: 10px; } nav.links { order: 3; width: 100%; overflow-x: auto; padding-bottom: 6px; font-size: 14px; gap: 16px; } nav.links a:not(.btn) { padding-block: 8px; } }
@media (max-width: 420px) { .brand span { display: none; } }

/* Hero */
.hero .wrap { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; padding-block: 56px 72px; align-items: center; }
.hero h1 { font-size: clamp(36px, 5vw, 60px); font-weight: 800; letter-spacing: -.025em; margin-top: 16px; }
.hero h1 mark { background: none; color: inherit; box-shadow: inset 0 -.28em 0 var(--green); }
.lead { font-size: 19px; color: var(--muted); max-width: 33em; margin-top: 22px; }
.cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.facts { display: flex; gap: 20px 28px; flex-wrap: wrap; margin-top: 40px; padding-top: 22px; border-top: 2px solid var(--ink); }
.facts div { min-width: 0; max-width: 10em; font-size: 14px; color: var(--muted); line-height: 1.4; }
.facts strong { display: block; font-family: var(--f-display); font-size: 30px; color: var(--ink); line-height: 1.1; margin-bottom: 4px; }

/* Production sheet (Gantt) */
.sheet { background: var(--sheet); border: 2px solid var(--ink); border-radius: 4px; padding: 22px 22px 18px; min-width: 0; box-shadow: 8px 8px 0 var(--line); }
.sheet-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.sheet-head strong { font-family: var(--f-display); font-size: 18px; }
.sheet-head span { font-size: 13px; color: var(--muted); }
.gantt { display: grid; grid-template-columns: 104px repeat(12, minmax(0, 1fr)); column-gap: 3px; row-gap: 9px; align-items: center; margin-top: 12px; font-size: 12px; }
.gantt .mo { font-family: var(--f-mono); font-size: 11px; color: var(--muted); text-align: center; }
.gantt .rl { grid-column: 1; font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 6px; }
.gantt .b { height: 24px; border-radius: 3px; font-size: 11px; font-weight: 600; line-height: 24px; padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #17140f; min-width: 0; }
.b.c { background: var(--d-content); }
.b.a { background: var(--d-art); }
.b.t { background: var(--d-tech); }
.b.m { background: transparent; border: 1.5px dashed var(--d-com); color: var(--d-com); line-height: 21px; }
.b.l { background: var(--d-lead); color: var(--paper); }
.b.p { background: var(--d-content); color: var(--paper); }
.gantt .ms { justify-self: center; width: 22px; height: 22px; display: grid; place-items: center; }
.gantt .ms b { width: 16px; height: 16px; background: var(--green); border: 1.5px solid var(--ink); transform: rotate(45deg); display: grid; place-items: center; }
.gantt .ml { justify-self: center; font-size: 10px; font-weight: 600; white-space: nowrap; color: var(--ink); line-height: 1.1; }
.gantt .rl[style*="2/5"] { align-self: center; white-space: normal; line-height: 1.2; }
.moments { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; font-size: 13px; }
.moments li { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.moments li b { font-family: var(--f-mono); font-size: 11px; color: var(--green-ink); min-width: 1.5em; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.sheet-note { font-size: 13px; color: var(--muted); margin-top: 10px; }
@media (max-width: 480px) {
  .gantt { grid-template-columns: 62px repeat(12, minmax(0, 1fr)); column-gap: 2px; }
  .gantt .rl { font-size: 10px; }
  .gantt .b { font-size: 0; padding: 0; height: 18px; }
  .gantt .ms b { width: 12px; height: 12px; }
  .gantt .ml { font-size: 8.5px; }
  .moments { grid-template-columns: 1fr; }
  .gantt .mo { font-size: 9px; }
  .sheet { padding: 16px 12px 14px; box-shadow: 5px 5px 0 var(--line); }
}

/* Sections */
section.block { padding-block: 80px; border-top: 2px solid var(--ink); }
.head { display: grid; grid-template-columns: 260px 1fr; gap: 16px 40px; margin-bottom: 44px; }
.head h2 { font-size: clamp(30px, 4vw, 46px); font-weight: 800; letter-spacing: -.02em; }
.head .intro { color: var(--muted); max-width: 36em; margin-top: 14px; font-size: 18px; }
.head > * { min-width: 0; }

/* Projects */
.dd-gallery { display: grid; grid-template-columns: 1fr; gap: 10px; }
.dd-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 3px; background: var(--line); }
.dd-gallery .main { aspect-ratio: 920 / 430; height: auto; }
.dd-gallery .side { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dd-gallery .side img { aspect-ratio: 16 / 9; height: auto; }
.proj { display: grid; grid-template-columns: 260px 1fr 250px; gap: 32px 40px; padding-top: 28px; }
.proj > * { min-width: 0; }
.proj h3 { font-size: 30px; font-weight: 800; }
.proj .role { font-size: 14px; color: var(--muted); margin-top: 8px; line-height: 1.5; }
.proj .body p + p, .proj .body ul { margin-top: 14px; }
.proj ul { padding-left: 20px; display: grid; gap: 8px; }
.kv { display: grid; gap: 0; align-content: start; font-size: 15px; border-top: 2px solid var(--ink); }
.kv div { display: flex; justify-content: space-between; gap: 12px; padding-block: 8px; border-bottom: 1px solid var(--line); }
.kv span:first-child { color: var(--muted); }
.kv span:last-child { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.tag { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 99px; border: 1.5px solid currentColor; }
.tag.c, .tag.t { color: var(--tag-teal); } .tag.a { color: var(--tag-mauve); } .tag.m { color: var(--tag-coral); } .tag.l { color: var(--ink); }
.proj .act { margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap; }
.herr { margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px; }
.herr > * { min-width: 0; }
.herr .pics { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; align-content: start; }
.herr .pics img { width: 100%; object-fit: cover; border-radius: 3px; display: block; background: var(--line); }
.herr .pics img:first-child { aspect-ratio: 920 / 518; }
.herr .pics img:last-child { aspect-ratio: 640 / 596; }
.herr .kv { margin-top: 22px; }
.also { margin-top: 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.also > div { border-top: 2px solid var(--ink); padding-top: 16px; min-width: 0; }
.also h3 { font-size: 22px; }
.also p { margin-top: 8px; color: var(--muted); font-size: 16px; }

/* Templates */
.tpl { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; }
.tpl > * { min-width: 0; }
.tlist { border-top: 2px solid var(--ink); }
.trow { display: grid; grid-template-columns: 1fr auto; gap: 8px 20px; align-items: center; padding-block: 18px; border-bottom: 1px solid var(--line); }
.trow > div { min-width: 0; }
.trow h3 { font-size: 20px; font-weight: 700; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.trow h3 small { font-family: var(--f-mono); font-size: 12px; font-weight: 400; color: var(--muted); }
.trow p { color: var(--muted); font-size: 15px; margin-top: 4px; }
.side-panel { background: var(--sheet); border: 2px solid var(--ink); border-radius: 4px; padding: 26px; align-self: start; display: grid; gap: 14px; }
.side-panel h3 { font-size: 24px; }
.side-panel p { color: var(--muted); font-size: 16px; }
.status { font-size: 14px; color: var(--muted); min-height: 1.4em; }
.dl-note { font-size: 14px; color: var(--muted); }

/* AI */
.ai-principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-bottom: 56px; }
.ai-principles div { border-top: 2px solid var(--ink); padding-top: 14px; min-width: 0; }
.ai-principles strong { display: block; font-family: var(--f-display); font-size: 22px; line-height: 1.2; }
.ai-principles p { color: var(--muted); font-size: 15px; margin-top: 8px; }
.ai-talk { display: grid; gap: 24px; margin-bottom: 56px; padding-bottom: 40px; border-bottom: 1px solid var(--line); }
.ai-talk .big { font-family: var(--f-display); font-size: clamp(24px, 3.2vw, 36px); font-weight: 700; line-height: 1.2; max-width: 26em; text-wrap: balance; }
.ai-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; font-size: 18px; }
.ai-cols p { min-width: 0; }
.ai-cols p + p { color: var(--muted); }
.tools { margin-top: 28px; }
.tools dl { margin: 12px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; }
.tools dl div { border-top: 1px solid var(--line); padding-top: 8px; min-width: 0; }
.tools dt { font-weight: 600; }
.tools dd { margin: 2px 0 0; font-size: 14px; color: var(--muted); }
@media (max-width: 620px) { .ai-cols, .tools dl { grid-template-columns: 1fr; gap: 16px; } }
.voice { margin: 22px 0 0; padding: 18px 20px; border-left: 4px solid var(--green); background: var(--sheet); }
.voice .q { font-family: var(--f-display); font-size: 20px; font-weight: 500; line-height: 1.35; margin-top: 6px; }
.voice footer { font-size: 14px; color: var(--muted); margin-top: 10px; }
.uses { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; }
.uses > * { min-width: 0; }
.use { display: grid; grid-template-columns: 8px 1fr; gap: 18px; padding-block: 18px; border-bottom: 1px solid var(--line); }
.use:first-child { border-top: 2px solid var(--ink); }
.use i { border-radius: 2px; }
.use h3 { font-size: 20px; }
.use p { color: var(--muted); font-size: 15px; margin-top: 6px; }
.week { background: var(--sheet); border: 2px solid var(--ink); border-radius: 4px; padding: 20px; align-self: start; }
.week-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.week-head strong { font-family: var(--f-display); font-size: 17px; color: var(--ink); }
.wk { display: grid; grid-template-columns: 38px 90px 1fr auto; gap: 10px; align-items: center; font-size: 14px; padding-block: 8px; border-bottom: 1px dashed var(--line); }
.wk > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk .d { font-family: var(--f-mono); font-size: 12px; color: var(--muted); }
.wk .n { font-weight: 600; }
.wk .s { font-size: 12px; color: var(--green-ink); font-weight: 600; }
.week-foot { font-size: 13px; color: var(--muted); margin-top: 12px; }

/* Missions */
.missions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.mission { border-top: 6px solid var(--d-lead); padding-top: 18px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.mission.m1, .mission.m2, .mission.m3 { border-top-color: var(--ink); }
.mission h3 { font-size: 26px; }
.mission .pitch { color: var(--muted); }
.mission dl { margin: 0; display: grid; gap: 10px; }
.mission dt { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mission dd { margin: 2px 0 0; font-size: 16px; }
.deliv { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 15px; }
.price { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); font-family: var(--f-display); font-size: 24px; font-weight: 700; }
.price small { display: block; font-family: var(--f-body); font-size: 13px; font-weight: 400; color: var(--muted); }
.fit { margin-top: 56px; display: grid; grid-template-columns: 260px 1fr; gap: 16px 40px; }
.tpl.solo { grid-template-columns: 1fr; }
.fit + .fit { margin-top: 32px; }
.dd-block { margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px; align-items: start; }
.dd-block > * { min-width: 0; }
.dd-block .dd-gallery .side { gap: 8px; }
.dd-block .proj { grid-template-columns: 1fr; gap: 20px; padding-top: 0; }
.herr.first { margin-top: 0; padding-top: 0; border-top: 0; }
.daily-lead { margin: 14px 0 0; color: var(--muted); max-width: 36em; }
.fit ul { margin: 0; padding-left: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 32px; }
@media (max-width: 760px) { .fit ul { grid-template-columns: 1fr; } }

/* Method */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); border: 2px solid var(--ink); border-radius: 4px; background: var(--sheet); }
.steps li { list-style: none; padding: 16px; border-right: 1px solid var(--line); min-width: 0; }
.steps li:last-child { border-right: 0; }
.steps b { display: block; font-family: var(--f-mono); font-size: 12px; color: var(--muted); font-weight: 400; }
.steps strong { display: block; font-family: var(--f-display); font-size: 19px; margin-top: 4px; }
.steps span { display: block; font-size: 14px; color: var(--muted); margin-top: 4px; }
.steps li:last-child strong { box-shadow: inset 0 -.3em 0 var(--green); display: inline; }
ol.steps { margin: 0; padding: 0; }
.method-note { margin-top: 16px; color: var(--muted); font-size: 15px; max-width: 52em; }
details.more { margin-top: 28px; }
.sources { margin-top: 28px; font-size: 14px; color: var(--muted); }
details.more summary { cursor: pointer; font-weight: 600; }
.daily { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 40px; margin-top: 20px; }
.daily div { min-width: 0; }
.daily h3 { font-size: 19px; }
.daily p { color: var(--muted); font-size: 15px; margin-top: 6px; }

/* Call */
.call { background: var(--band); color: var(--on-band); }
.call .wrap { padding-block: 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.call .wrap > * { min-width: 0; }
.call .eyebrow { color: var(--green); }
.call h2 { font-size: clamp(32px, 4.4vw, 52px); font-weight: 800; letter-spacing: -.02em; margin-top: 12px; color: var(--on-band); }
.call .lead { color: var(--on-band); opacity: .8; }
.call ol { margin: 28px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.call ol li { display: grid; grid-template-columns: 76px 1fr; gap: 12px; border-top: 1px solid rgba(127,127,127,.35); padding-top: 12px; }
.call ol strong { color: var(--green); font-family: var(--f-display); }
.form { background: var(--sheet); color: var(--ink); border-radius: 4px; padding: 26px; display: grid; gap: 14px; border: 2px solid var(--green); }
.form h3 { font-size: 22px; }
.field { display: grid; gap: 5px; }
.field label { font-size: 14px; font-weight: 600; }
.field input, .field select, .field textarea { font: inherit; font-size: 16px; padding: 10px 12px; border: 1.5px solid var(--muted); border-radius: 4px; background: var(--paper); color: var(--ink); min-width: 0; width: 100%; box-sizing: border-box; }
.field textarea { min-height: 76px; resize: vertical; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row2 > * { min-width: 0; }
.out { display: grid; gap: 12px; }
.out pre { margin: 0; white-space: pre-wrap; font-family: var(--f-mono); font-size: 13px; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: 12px; overflow-wrap: anywhere; }
.addr { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-family: var(--f-mono); font-size: 15px; }
.addr span { user-select: all; overflow-wrap: anywhere; }
.form .fine { font-size: 13px; color: var(--muted); }

/* About */
.about { display: grid; grid-template-columns: 280px 1fr; gap: 48px; }
.about > * { min-width: 0; }
.about img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--green); }
.about .cap { font-size: 14px; color: var(--muted); margin-top: 18px; font-style: italic; }
.why { font-size: 20px; line-height: 1.55; max-width: 34em; display: grid; gap: 16px; }
.why p:first-child { font-family: var(--f-display); font-size: clamp(24px, 3vw, 32px); font-weight: 700; line-height: 1.2; }
.cv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.cv div { border-top: 2px solid var(--ink); padding-top: 12px; min-width: 0; }
.cv b { font-size: 13px; color: var(--muted); font-weight: 600; }
.cv strong { display: block; font-family: var(--f-display); font-size: 19px; margin: 4px 0; }
.cv p { color: var(--muted); font-size: 15px; }

footer { border-top: 2px solid var(--ink); }
footer .wrap { padding-block: 28px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 15px; color: var(--muted); }
footer .addr { font-size: 14px; }

@media (max-width: 960px) {
  .hero .wrap, .tpl, .uses, .call .wrap, .herr, .dd-block { grid-template-columns: 1fr; }
  .head, .fit { grid-template-columns: 1fr; }
  .proj { grid-template-columns: 1fr 1fr; }
  .proj .body { grid-column: 1 / -1; grid-row: 2; }
  .missions { grid-template-columns: 1fr; gap: 44px; }
  .steps { grid-template-columns: 1fr; }
  .steps li { border-right: 0; border-bottom: 1px solid var(--line); }
  .steps li:last-child { border-bottom: 0; }
  .cv { grid-template-columns: 1fr 1fr; }
  .about { grid-template-columns: 1fr; }
  .about .photo { max-width: 260px; }
  .ai-principles { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 620px) {
  section.block { padding-block: 56px; }
  .hero .wrap { padding-block: 36px 52px; gap: 40px; }
  .proj { grid-template-columns: 1fr; }
  .proj .body { grid-row: auto; }
  .also, .daily, .cv, .row2 { grid-template-columns: 1fr; }
  .dd-gallery { grid-template-columns: 1fr; }
  .dd-gallery .main { grid-row: auto; }
  .dd-gallery .side { grid-template-columns: repeat(3, 1fr); }
  .trow { grid-template-columns: 1fr; }
  .wk { grid-template-columns: 34px 80px 1fr; }
  .wk .s { display: none; }
  .call ol li { grid-template-columns: 1fr; gap: 2px; }
}

/* Calendrier à rebours */
.cal { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: start; }
.cal > * { min-width: 0; }
.cal-in { background: var(--sheet); border: 2px solid var(--ink); border-radius: 4px; padding: 22px; display: grid; gap: 14px; }
.cal-in label { font-weight: 600; font-size: 15px; }
.cal-in input, .cal-in select { font: inherit; font-size: 16px; padding: 10px 12px; border: 2px solid var(--ink); border-radius: 6px; background: var(--paper); color: var(--ink); width: 100%; box-sizing: border-box; }
.cal-in .hint { font-size: 13px; color: var(--muted); }
.cal-out { border-top: 2px solid var(--ink); }
.cal-row { display: grid; grid-template-columns: 112px 1fr auto; gap: 6px 18px; align-items: baseline; padding-block: 12px; border-bottom: 1px solid var(--line); }
.cal-row > * { min-width: 0; }
.cal-row .dt { font-family: var(--f-mono); font-size: 14px; font-variant-numeric: tabular-nums; }
.cal-row .what strong { display: block; }
.cal-row .what span { font-size: 14px; color: var(--muted); }
.cal-row .src { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 99px; border: 1.5px solid currentColor; white-space: nowrap; }
.cal-row .src.rule { color: var(--tag-coral); }
.cal-row .src.tip { color: var(--tag-teal); }
.cal-row.past .dt { color: var(--tag-coral); }
.cal-row.past .dt::after { content: " · dépassé"; font-family: var(--f-body); font-size: 12px; }
.cal-row.ms .dt { color: var(--green-ink); font-weight: 600; }
.cal-foot { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 18px; }
.cal-foot p { font-size: 14px; color: var(--muted); flex: 1 1 260px; }
@media (max-width: 860px) { .cal { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 520px) { .cal-row { grid-template-columns: 1fr auto; } .cal-row .dt { grid-column: 1 / -1; } }

/* Checklist */
.chk { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px 40px; }
.chk fieldset { border: 0; border-top: 2px solid var(--ink); margin: 0; padding: 14px 0 0; min-width: 0; }
.chk legend { font-family: var(--f-display); font-weight: 700; font-size: 19px; padding: 0; }
.chk legend small { display: block; font-family: var(--f-body); font-weight: 400; font-size: 14px; color: var(--muted); margin-top: 2px; }
.chk label { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; padding-block: 8px; border-bottom: 1px solid var(--line); font-size: 15px; cursor: pointer; }
.chk input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--green-ink); }
.chk label:has(input:checked) span { color: var(--muted); text-decoration: line-through; }
.chk-bar { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 0 0 22px; }
.chk-bar .meter { flex: 1 1 200px; height: 10px; border: 2px solid var(--ink); border-radius: 99px; background: var(--sheet); overflow: hidden; }
.chk-bar .meter i { display: block; height: 100%; width: 0; background: var(--green); transition: width .2s; }
.chk-bar b { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .chk { grid-template-columns: 1fr; } }
/* Kit form */
.kit { background: var(--sheet); border: 2px solid var(--ink); border-radius: 4px; padding: 22px; display: grid; gap: 12px; margin-top: 20px; }
.kit h3 { font-size: 22px; }
.kit p { color: var(--muted); font-size: 15px; }
.kit .row { display: flex; gap: 10px; flex-wrap: wrap; }
.kit input[type=email] { flex: 1 1 220px; min-width: 0; font: inherit; font-size: 16px; padding: 11px 12px; border: 2px solid var(--ink); border-radius: 6px; background: var(--paper); color: var(--ink); }
.hp { position: absolute; left: -9999px; }
/* CTA band */
.band { margin-top: 56px; padding: 22px 24px; border: 2px solid var(--ink); border-radius: 4px; display: flex; gap: 16px 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--sheet); }
.band p { font-family: var(--f-display); font-weight: 700; font-size: 20px; flex: 1 1 280px; }
.lang { font-size: 14px; font-weight: 600; text-decoration: none; border: 1.5px solid var(--ink); border-radius: 6px; padding: 5px 9px; color: var(--ink) !important; }

/* Motion: one orchestrated moment on load, and quiet feedback after */
@media (prefers-reduced-motion: no-preference) {
  .gantt .b { transform-origin: left center; animation: grow .7s cubic-bezier(.2,.7,.2,1) both; }
  .gantt .ms b { animation: pop .45s cubic-bezier(.3,1.6,.5,1) both; }
  .gantt > :nth-child(n+20) { animation-delay: .15s; } .gantt > :nth-child(n+30) { animation-delay: .3s; } .gantt > :nth-child(n+40) { animation-delay: .45s; } .gantt > :nth-child(n+50) { animation-delay: .6s; }
  @keyframes grow { from { transform: scaleX(.05); } to { transform: none; } }
  @keyframes pop { from { transform: rotate(45deg) scale(.2); } to { transform: rotate(45deg) scale(1); } }
  .cal-out.fresh .cal-row { animation: rowin .35s ease both; }
  .cal-out.fresh .cal-row:nth-child(2){animation-delay:.03s}.cal-out.fresh .cal-row:nth-child(3){animation-delay:.06s}.cal-out.fresh .cal-row:nth-child(4){animation-delay:.09s}.cal-out.fresh .cal-row:nth-child(5){animation-delay:.12s}.cal-out.fresh .cal-row:nth-child(6){animation-delay:.15s}.cal-out.fresh .cal-row:nth-child(7){animation-delay:.18s}.cal-out.fresh .cal-row:nth-child(8){animation-delay:.21s}.cal-out.fresh .cal-row:nth-child(9){animation-delay:.24s}.cal-out.fresh .cal-row:nth-child(10){animation-delay:.27s}
  @keyframes rowin { from { transform: translateY(6px); opacity: .3; } to { transform: none; opacity: 1; } }
  .chk-bar .meter i { transition: width .35s cubic-bezier(.2,.7,.2,1); }
  .btn.go { transition: transform .12s, box-shadow .12s; }
}

/* Repères */
.reps { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 36px 48px; }
.rep { border-top: 2px solid var(--ink); padding-top: 14px; min-width: 0; }
.rep .eyebrow { font-size: 12px; }
.rep h3 { font-size: 22px; margin-top: 6px; }
.rep p { margin-top: 10px; font-size: 16px; }
.rep p + p { margin-top: 8px; }
.rep .when { font-size: 13px; color: var(--muted); margin-top: 10px; font-family: var(--f-mono); }
@media (max-width: 760px) { .reps { grid-template-columns: 1fr; gap: 28px; } }

.chk.fund { gap: 0 40px; }
.chk.fund label { padding-block: 10px; }
/* Galerie Herringen : robuste même si une image tarde */
.herr .dd-gallery { min-width: 0; align-content: start; align-self: start; }
.herr .dd-gallery img { width: 100%; height: auto; }
.dd-gallery .side { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.rep .do { margin-top: 10px; padding-left: 12px; border-left: 3px solid var(--green); font-size: 15px; }
.rep .when a { color: var(--muted); }
.libg { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 32px 40px; }
.libcol { display: grid; gap: 0; align-content: start; border-top: 2px solid var(--ink); padding-top: 12px; min-width: 0; }
.libi { display: grid; gap: 2px; padding-block: 12px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.libi strong { font-family: var(--f-display); font-size: 18px; }
.libi .by { font-size: 13px; color: var(--muted); }
.libi span:last-child { font-size: 15px; color: var(--muted); }
.libi:hover strong { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px) { .libg { grid-template-columns: 1fr; } }
.film-g { display: grid; grid-template-columns: minmax(0,460px) minmax(0,1fr); gap: 48px; align-items: center; }
.film-v { width: 100%; aspect-ratio: 1; border: 2px solid var(--ink); border-radius: 10px; box-shadow: 5px 5px 0 var(--ink); background: #eceae5; display: block; }
@media (max-width: 860px) { .film-g { grid-template-columns: 1fr; gap: 28px; } .film-v { max-width: 460px; } }
/* Revue de forme, nov. 2026 */
.call :focus-visible { outline-color: var(--green); }
.libi strong::after { content: " \2197"; font-weight: 500; color: var(--muted); }
@media (max-width: 620px) { .btn.small, .lang { min-height: 44px; } }
.offers { display: grid; gap: 0; align-self: start; }
.off { display: grid; grid-template-columns: 22px minmax(0,1fr) auto; gap: 4px 12px; align-items: baseline; padding-block: 13px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.off:last-of-type { border-bottom: 0; }
.off .dia { width: 12px; height: 12px; background: var(--green); border: 1.5px solid var(--ink); transform: rotate(45deg); align-self: center; }
.off strong { font-family: var(--f-display); font-size: 18px; display: block; line-height: 1.2; }
.off small { display: block; font-size: 14px; color: var(--muted); }
.off em { font-style: normal; font-family: var(--f-mono); font-size: 15px; font-weight: 500; color: var(--green-ink); white-space: nowrap; }
.off:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.offers .sheet-note { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 0; }
.cal-in .opt { display: flex; gap: 10px; align-items: center; font-weight: 500; font-size: 15px; cursor: pointer; }
.cal-in .opt input { width: 18px; height: 18px; padding: 0; margin: 0; flex: none; accent-color: var(--green-ink); }
.cal-row .src.none { display: none; }
.cal-mail { margin-top: 24px; }
.mission .act { display: flex; gap: 10px; flex-wrap: wrap; }
.avail { margin-top: 32px; color: var(--muted); font-size: 15px; }
.who { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 14px; margin-top: 28px; align-items: start; }
.who img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid var(--green); }
.who p { font-size: 15px; line-height: 1.5; color: var(--on-band); opacity: .85; }
.who b { display: block; opacity: 1; }
details.more summary { color: var(--green-ink); }
.film-mini { margin: 18px 0 0; max-width: 260px; }
.film-mini video { width: 100%; aspect-ratio: 1; border: 2px solid var(--ink); border-radius: 6px; background: var(--sheet); display: block; }
.film-mini figcaption { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-top: 8px; font-size: 13px; color: var(--muted); line-height: 1.35; }
.film-mini button { font: inherit; font-weight: 600; color: var(--ink); background: none; border: 1.5px solid var(--ink); border-radius: 6px; padding: 4px 10px; cursor: pointer; flex: none; min-height: 32px; }
@media (max-width: 620px) { .film-mini { max-width: 200px; } }
.film-hero { margin: 0; align-self: center; justify-self: center; width: 100%; max-width: 480px; }
.film-hero video { width: 100%; aspect-ratio: 1; border: 2px solid var(--ink); border-radius: 8px; background: var(--sheet); display: block; box-shadow: 8px 8px 0 var(--line); }
.film-hero figcaption { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-top: 10px; font-size: 14px; color: var(--muted); line-height: 1.35; }
.film-hero button { font: inherit; font-weight: 600; color: var(--ink); background: none; border: 1.5px solid var(--ink); border-radius: 6px; padding: 4px 10px; cursor: pointer; flex: none; min-height: 32px; }

/* V2, nov. 2026 : preuves nommées, ponts vers l'appel, pages guides */
.proofs { list-style: none; margin: 36px 0 0; padding: 18px 0 0; border-top: 2px solid var(--ink); display: grid; gap: 10px; font-size: 15px; }
.proofs li { display: grid; grid-template-columns: 14px minmax(0,1fr); gap: 12px; align-items: baseline; min-width: 0; }
.proofs li::before { content: ""; width: 10px; height: 10px; background: var(--green); border: 1.5px solid var(--ink); transform: rotate(45deg); }
.proofs b { font-weight: 600; }
.bridge { margin-top: 22px; padding: 18px 20px; border: 2px solid var(--ink); border-radius: 4px; background: var(--sheet); display: flex; gap: 14px 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.bridge p { flex: 1 1 280px; font-size: 16px; }
.bridge p b { font-family: var(--f-display); font-size: 19px; display: block; margin-bottom: 2px; }
.mission .more-link { font-size: 15px; }
.field .opt-l { font-weight: 400; color: var(--muted); }
.field input[type=file] { padding: 8px; font-size: 14px; }
.call .alt { margin-top: 18px; font-size: 15px; opacity: .85; }
.call .alt a { color: var(--green); }
.foot-links { display: flex; gap: 8px 18px; flex-wrap: wrap; font-size: 14px; }
.foot-links a { color: var(--muted); }

/* Pages guides */
.crumb { font-size: 14px; color: var(--muted); padding-top: 28px; }
.crumb a { color: var(--muted); }
.guide-hero .wrap { padding-block: 28px 48px; max-width: 860px; }
.guide-hero h1 { font-size: clamp(32px, 4.6vw, 52px); font-weight: 800; letter-spacing: -.02em; margin-top: 12px; }
.guide-hero .lead { margin-top: 18px; }
.guide { max-width: 860px; }
.guide section { padding-block: 40px; border-top: 2px solid var(--ink); }
.guide h2 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; letter-spacing: -.015em; }
.guide h3 { font-size: 21px; margin-top: 26px; }
.guide p, .guide ul, .guide ol, .guide table { margin-top: 14px; }
.guide ul, .guide ol { padding-left: 22px; display: grid; gap: 8px; }
.guide .note { font-size: 15px; color: var(--muted); }
.guide .do { margin-top: 14px; padding-left: 14px; border-left: 3px solid var(--green); }
.tbl-wrap { overflow-x: auto; margin-top: 16px; border-top: 2px solid var(--ink); }
.guide table { border-collapse: collapse; width: 100%; font-size: 15px; margin-top: 0; min-width: 560px; }
.guide th, .guide td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); }
.guide th { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.guide td:first-child { font-weight: 600; }
.toc { margin-top: 28px; padding: 16px 20px; border: 2px solid var(--ink); border-radius: 4px; background: var(--sheet); font-size: 15px; }
.toc ol { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.guide .bridge { margin-top: 28px; }
.related { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 32px; margin-top: 14px; }
.related a { display: block; padding-block: 12px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); font-weight: 600; }
.related a span { display: block; font-weight: 400; font-size: 14px; color: var(--muted); }
@media (max-width: 620px) { .related { grid-template-columns: 1fr; } .guide section { padding-block: 32px; } }

/* Coherence avec les fichiers à télécharger : mêmes étiquettes de format que le kit */
.ext { display: inline-block; font: 600 11px/1.4 var(--f-mono); letter-spacing: .02em; padding: 2px 6px; border-radius: 3px; color: #17140f; background: var(--d-tech); vertical-align: .2em; margin-right: 4px; }
.ext.w { background: var(--d-art); }
.ext.n { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); padding: 1px 5px; }
.trow h3 { align-items: center; }

/* Pages guides alignées sur la grille de l'accueil */
.guide-hero .wrap { max-width: 1120px; }
.guide-hero .wrap > * { max-width: 820px; }
.guide section { max-width: 860px; }
.guide section:first-child { border-top: 0; padding-top: 0; }
.guide .toc { max-width: 860px; }

/* En-tête mobile : le bouton Réserver reste visible, la navigation défile dessous */
header.top .wrap { position: relative; }
@media (max-width: 900px) {
  header.top nav.links .btn.go { position: absolute; top: 14px; right: max(16px, env(safe-area-inset-right, 0px)); }
  header.top .brand { padding-right: 150px; }
}
@media (max-width: 480px) {
  header.top .brand img { display: none; }
  header.top .brand b { font-size: 15px; }
  header.top .brand { padding-right: 132px; }
  header.top nav.links .btn.go { font-size: 13px; padding: 8px 10px; }
}

/* Aperçu interactif du kit production : mêmes couleurs que le classeur */
.kitprev { margin: 0 0 40px; background: var(--sheet); border: 2px solid var(--ink); border-radius: 4px; box-shadow: 8px 8px 0 var(--line); padding: 18px 20px 20px; min-width: 0; }
.kp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 16px; flex-wrap: wrap; padding-bottom: 12px; }
.kp-head b { font-family: var(--f-display); font-size: 18px; }
.kp-note { font-size: 13px; color: var(--muted); }
.kp-tabs { display: flex; gap: 0; overflow-x: auto; border-bottom: 2px solid var(--ink); scrollbar-width: thin; }
.kp-tabs button { font: 600 14px var(--f-body); background: transparent; color: var(--muted); border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; padding: 10px 14px; cursor: pointer; white-space: nowrap; min-height: 44px; }
.kp-tabs button:hover { color: var(--ink); }
.kp-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--green); }
.kp-panel { padding-top: 14px; display: grid; gap: 12px; min-width: 0; }
.kp-why { font-size: 15px; color: var(--muted); max-width: 60ch; }
.kp-two { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.kp-tbl { overflow-x: auto; border: 1.5px solid var(--line); border-radius: 4px; background: var(--paper); min-width: 0; }
.kp-tbl table { border-collapse: collapse; width: 100%; font-size: 14px; font-variant-numeric: tabular-nums; }
.kp-tbl th, .kp-tbl td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.kp-tbl th { font-size: 12px; font-weight: 600; color: var(--muted); }
.kp-tbl .n { text-align: right; }
.kp-tbl td.in { background: color-mix(in srgb, var(--green) 24%, transparent); }
.kp-tbl td.warn { background: color-mix(in srgb, var(--green) 40%, transparent); }
.kp-tbl td.over { background: color-mix(in srgb, var(--d-com) 42%, transparent); font-weight: 600; }
.kp-tbl tr.tot td { font-weight: 600; border-top: 2px solid var(--ink); border-bottom: 0; }
.kp-gantt { display: grid; gap: 6px; font-size: 12px; overflow-x: auto; }
.kp-g-row { display: grid; grid-template-columns: 118px repeat(12, minmax(14px, 1fr)); gap: 3px; align-items: center; min-width: 380px; }
.kp-g-h span { font-family: var(--f-mono); font-size: 11px; color: var(--muted); text-align: center; }
.kp-g-l { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 6px; }
.kp-g-row .m { height: 18px; border-radius: 2px; display: grid; place-items: center; }
.kp-g-row .m.on.t { background: var(--d-tech); }
.kp-g-row .m.on.a { background: var(--d-art); }
.kitprev .dia { display: inline-block; width: 10px; height: 10px; transform: rotate(45deg); background: var(--green); border: 1.5px solid var(--ink); }
.kp-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--muted); }
.kp-legend span { display: inline-flex; gap: 6px; align-items: center; }
.kp-legend .sw { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }
.kp-legend .sw.t { background: var(--d-tech); } .kp-legend .sw.a { background: var(--d-art); }
@media (max-width: 620px) { .kp-two { grid-template-columns: 1fr; } .kitprev { padding: 14px 12px 16px; box-shadow: 5px 5px 0 var(--line); } }
@media (prefers-reduced-motion: no-preference) { .kp-panel:not([hidden]) { animation: rowin .3s ease both; } }

/* Corrections issues de l'audit visuel */
:root { --shadow: #1a1c2b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --shadow: #000; } }
:root[data-theme="dark"] { --shadow: #000; }
body { margin: 0; }
.btn { box-sizing: border-box; }
.btn.go { box-shadow: 3px 3px 0 var(--shadow); border-color: var(--shadow); }
.btn.go:hover { box-shadow: 4px 4px 0 var(--shadow); }
.btn.go:active { box-shadow: 1px 1px 0 var(--shadow); }
.lang, .film-hero button, .film-mini button { min-height: 40px; padding-inline: 12px; display: inline-flex; align-items: center; }
nav.links a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--green); }
@media (max-width: 900px) { header.top nav.links { padding-right: 0; } }

/* Guides : un seul bord gauche, aligné sur l'accueil */
.wrap.guide { max-width: 1120px; }
.guide > *, .guide section { max-width: 860px; }
.guide .toc { margin-bottom: 8px; }
.guide .toc + section { border-top: 0; padding-top: 32px; }
.guide section:has(> .cal), .guide section:has(> .reps) { border-top: 0; }
.guide h2 .ext { font-size: 13px; padding: 3px 7px; vertical-align: .4em; }
.guide h2 .note { font: 400 13px/1 var(--f-mono); color: var(--muted); letter-spacing: 0; }
.guide td { font-variant-numeric: tabular-nums; }
.guide thead th { border-bottom: 2px solid var(--ink); }
.rep .do { font-size: 16px; }

/* Champs : comme les cases à saisir des modèles, surlignées en ambre */
.field input, .field select, .field textarea, .cal-in input, .cal-in select, .kit input[type=email] { background: color-mix(in srgb, var(--green) 12%, var(--sheet)); border: 2px solid var(--ink); border-radius: 6px; color: var(--ink); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible, .cal-in input:focus-visible, .cal-in select:focus-visible, .kit input:focus-visible { background: color-mix(in srgb, var(--green) 22%, var(--sheet)); }
.field input[type=file] { background: transparent; border-style: dashed; }
::placeholder { color: var(--muted); opacity: 1; }
.chk-bar .meter i { box-shadow: inset -2px 0 0 var(--ink); }

/* Jalons du calendrier : le losange ambre des supports */
.cal-row.ms .dt::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; background: var(--green); border: 1.5px solid var(--ink); transform: rotate(45deg); }

/* Vidéo en mode sombre */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .film-hero video { box-shadow: none; border-color: var(--line); } }
:root[data-theme="dark"] .film-hero video { box-shadow: none; border-color: var(--line); }

/* Aperçu du kit sur téléphone : le planning tient sans défiler */
@media (max-width: 620px) {
  .kp-g-row { grid-template-columns: 76px repeat(12, minmax(0, 1fr)); gap: 2px; min-width: 0; }
  .kp-g-l { font-size: 11px; }
  .kp-g-h span { font-size: 9px; }
  .kp-g-row .m { height: 14px; }
  .kitprev .kp-g-row .dia { width: 8px; height: 8px; }
}

/* Pages annexes (merci, mentions) dans le gabarit du site */
.annex { padding-block: 40px 72px; display: grid; gap: 18px; max-width: 760px; }
.annex h1 { font-size: clamp(32px, 4.6vw, 48px); font-weight: 800; letter-spacing: -.02em; }
.annex h2 { font-size: 22px; padding-top: 16px; margin-top: 8px; border-top: 2px solid var(--ink); }
.annex ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.annex .row { display: flex; gap: 12px; flex-wrap: wrap; }
.annex .btn { justify-self: start; }

/* En-tête V2 : bouton Réserver hors du menu, en-tête collant aussi sur mobile */
header.top .brand { padding-right: 0; }
header.top nav.links { margin-left: auto; }
.head-cta { flex: none; }
#callForm { scroll-margin-top: 96px; }
@media (max-width: 900px) {
  header.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; }
  body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--paper); }
  header.top .wrap { flex-wrap: wrap; padding-block: 10px 0; row-gap: 6px; }
  header.top .brand { flex: 1 1 auto; padding-right: 0; }
  header.top .brand span { display: none; }
  header.top .head-cta { order: 2; }
  header.top nav.links { order: 3; width: 100%; margin-left: 0; overflow-x: auto; padding-bottom: 4px; scroll-padding-inline: 16px;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  section[id], #callForm { scroll-margin-top: 112px; }
}
@media (max-width: 480px) {
  header.top .brand img { display: none; }
  header.top .brand b { font-size: 15px; }
  header.top .head-cta { font-size: 13px; padding: 8px 12px; min-height: 40px; }
}

/* Cibles tactiles et tableau défilant */
.foot-links a, .crumb a { display: inline-block; padding-block: 6px; }
.toc li { padding-block: 2px; }
.tbl-hint { display: none; font-size: 13px; color: var(--muted); margin-top: 10px; }
@media (max-width: 620px) { .tbl-hint { display: block; } }

.lang { min-height: 36px; padding-block: 4px; }

/* À propos */
.bio { display: grid; grid-template-columns: 1fr; gap: 14px; max-width: 68ch; margin-top: 16px; font-size: 17px; line-height: 1.6; }
.bio-sign { margin-top: 4px; }
.career { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.career li { border-top: 3px solid var(--green); padding-top: 10px; font-size: 15px; line-height: 1.4; }
.career span { display: block; font-family: var(--f-display); font-weight: 700; font-size: 18px; margin-bottom: 4px; }
@media (max-width: 640px) { .career { grid-template-columns: 1fr; } }
.kp-more { margin: 0 0 28px; }
.kp-more[open] summary { margin-bottom: 16px; }
.about h2 { font-size: clamp(30px, 4vw, 46px); font-weight: 800; letter-spacing: -.02em; margin-top: 6px; }
.about .career { margin: 18px 0 6px; }
.mission .meta { font-size: 15px; }

/* Menu V3 : toutes les parties accessibles, sous-menu Guides, menu déroulant sur mobile */
.menu-toggle { display: none; }
nav.links details.navdrop { position: relative; }
nav.links details.navdrop summary { cursor: pointer; list-style: none; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; }
nav.links details.navdrop summary::-webkit-details-marker { display: none; }
nav.links details.navdrop summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
nav.links details.navdrop[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
nav.links details.navdrop.cur summary { box-shadow: inset 0 -3px 0 var(--green); }
.navdrop-panel { position: absolute; right: 0; top: calc(100% + 12px); min-width: 250px; background: var(--sheet); border: 2px solid var(--ink); border-radius: 4px; box-shadow: 6px 6px 0 var(--line); padding: 6px 0; display: grid; z-index: 20; }
.navdrop-panel a { padding: 9px 16px; white-space: nowrap; }
.navdrop-panel a:hover { background: color-mix(in srgb, var(--green) 18%, transparent); text-decoration: none; }
@media (min-width: 901px) and (max-width: 1180px) { header.top .brand span { display: none; } nav.links { gap: 12px; font-size: 13px; } }
@media (min-width: 901px) and (max-width: 1020px) { header.top .brand b { font-size: 15px; } nav.links { gap: 10px; } }

@media (max-width: 900px) {
  .menu-toggle { display: inline-flex; align-items: center; gap: 8px; order: 2; font: 600 14px var(--f-body); color: var(--ink); background: transparent; border: 1.5px solid var(--ink); border-radius: 6px; padding: 8px 12px; min-height: 40px; cursor: pointer; }
  .menu-toggle::before { content: ""; width: 14px; height: 12px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; background: linear-gradient(currentColor 0 0) center / 100% 2px no-repeat; }
  header.top .head-cta { order: 3; }
  header.top .wrap { padding-block: 10px; }
  header.top .brand { min-width: 0; }
  header.top .brand b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  header.top nav.links { display: none; order: 4; width: 100%; flex-direction: column; align-items: stretch; gap: 0; -webkit-mask-image: none; mask-image: none; padding: 6px 0 12px; border-top: 1px solid var(--line); font-size: 16px; white-space: normal; max-height: calc(100vh - 80px); overflow-x: visible; overflow-y: auto; }
  header.top nav.links.open { display: flex; }
  header.top nav.links > a, nav.links details.navdrop summary { padding-block: 11px; border-bottom: 1px solid var(--line); }
  nav.links details.navdrop summary { width: 100%; justify-content: space-between; }
  .navdrop-panel { position: static; min-width: 0; border: 0; box-shadow: none; background: transparent; padding: 0 0 6px 14px; border-left: 3px solid var(--green); margin: 6px 0; }
  .navdrop-panel a { padding: 9px 0; white-space: normal; }
  header.top nav.links .lang { align-self: flex-start; margin-top: 12px; min-height: 36px; padding: 4px 12px; }
  section[id], #callForm, #avis-dr { scroll-margin-top: 76px; }
}
@media (max-width: 480px) {
  .menu-toggle span { display: none; }
  .menu-toggle { padding: 8px 11px; }
  header.top .wrap { column-gap: 8px; }
  header.top .brand b { font-size: 14px; }
  header.top .head-cta { padding: 8px 10px; }
}
#avis-dr { scroll-margin-top: 96px; }

@media (min-width: 901px) and (max-width: 1100px) { header.top .brand > div { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }

/* V3 : bandeau des outils gratuits en fin d'accueil */
.free { display: grid; gap: 14px; }
.free h2 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; letter-spacing: -.015em; }
.free-links { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0 24px; margin-top: 8px; border-top: 2px solid var(--ink); }
.free-links a { display: grid; gap: 4px; padding-block: 14px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); min-width: 0; }
.free-links b { font-family: var(--f-display); font-size: 18px; }
.free-links b::after { content: " \2192"; color: var(--green-ink); }
.free-links span { font-size: 14px; color: var(--muted); }
.free-links a:hover b { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 960px) { .free-links { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .free-links { grid-template-columns: 1fr; } }
#outils.block { padding-block: 56px; }
.guide .libg { margin-top: 18px; }
/* Mobile : galeries des projets réduites à la capsule */
@media (max-width: 620px) { #projets .dd-gallery .side { display: none; } }

.cal-more { margin-top: 14px; }

/* Sous-menu Ressources : deux groupes titrés */
.navdrop-h { margin: 0; padding: 10px 16px 4px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.navdrop-h + a { padding-top: 6px; }
.navdrop-panel a small { display: block; font-size: 12px; color: var(--muted); }
.navdrop-panel .navdrop-h:not(:first-child) { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 12px; }
@media (max-width: 900px) { .navdrop-h { padding: 10px 0 2px; } .navdrop-panel .navdrop-h:not(:first-child) { border-top: 0; } }

/* Utilitaires (remplacent les styles en ligne) */
.u-h22 { font-size: 22px !important; margin-top: 6px !important; }
.u-mt20 { margin-top: 20px !important; }
.u-mt14 { margin-top: 14px !important; }
.u-inline { display: inline !important; }
.u-mt8 { margin-top: 8px !important; }
.u-mt22 { margin-top: 22px !important; }
.u-actrow { margin-top: 20px !important; display: flex !important; gap: 12px !important; flex-wrap: wrap !important; }
.u-mt16 { margin-top: 16px !important; }
.u-h30 { font-size: 30px !important; font-weight: 800 !important; }
.u-role { font-size: 14px !important; color: var(--muted) !important; margin-top: 8px !important; }
.u-ar-capsule { aspect-ratio: 460/215 !important; }
.u-noborder { border-top: 0 !important; padding-top: 0 !important; }

/* Retours d'expérience : encadré commun */
.rex { margin: 18px 0 0; padding: 14px 16px 14px 18px; border-left: 4px solid var(--green); background: var(--sheet); font-size: 15px; line-height: 1.55; max-width: 52em; color: var(--ink); }
.rex::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--green-ink); margin-bottom: 6px; }
.rep .rex { font-size: 15px; margin-top: 10px; }