/* ==========================================================================
   Jserre Consulting — direction F « Ardoise »
   Schibsted Grotesk (titres) + Onest (texte), angles nets, un bandeau ardoise.
   Généré le : 2026-11-07 (Europe/Paris)
   ========================================================================== */

/* ---------- Polices (auto-hébergées, fichiers variables 400–500) ---------- */
@font-face { font-family: "Schibsted Grotesk"; src: url("../fonts/schibsted-grotesk-latin-400-500.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Onest"; src: url("../fonts/onest-latin-400-500.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; }

/* ---------- Jetons ---------- */
:root {
  color-scheme: light dark;
  --bg: #EEF1F5; --surface: #FFFFFF; --soft: #E4E9F0;
  --ink: #0F1726; --muted: #4A5870; --line: #D5DCE6;
  --accent: #2A4F8A; --accent-ink: #FFFFFF; --ok: #1F7A56; --err: #A8281F;
  --slate: #182338; --s-ink: #EEF2F8; --s-muted: #AAB7CC; --s-accent: #8FB6F0; --s-line: #2B3850; --s-raise: #1F2C45; --s-deep: #101829;
  --font-display: "Schibsted Grotesk", system-ui, sans-serif;
  --font-body: "Onest", system-ui, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --r: 6px; --r-sm: 4px;
  --gut: clamp(20px, 4vw, 80px); --wrap: 1280px;
  --nav-h: 64px;
  --t-in: .4s cubic-bezier(.2, .7, .2, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B111C; --surface: #141C2B; --soft: #1A2334;
    --ink: #E8EDF5; --muted: #A2AEC2; --line: #253149;
    --accent: #8FB6F0; --accent-ink: #0B111C; --ok: #5CC894; --err: #F0A49C;
    --slate: #101829; --s-line: #263450; --s-raise: #172238; --s-deep: #0B1322;
  }
}
:root[data-theme="dark"] {
  --bg: #0B111C; --surface: #141C2B; --soft: #1A2334;
  --ink: #E8EDF5; --muted: #A2AEC2; --line: #253149;
  --accent: #8FB6F0; --accent-ink: #0B111C; --ok: #5CC894; --err: #F0A49C;
  --slate: #101829; --s-line: #263450; --s-raise: #172238; --s-deep: #0B1322;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--font-body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; letter-spacing: -.02em; line-height: 1.08; margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.wrap { width: min(100% - 2 * var(--gut), var(--wrap)); margin-inline: auto; }
.muted { color: var(--muted); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* Lien d'évitement */
.skip { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--surface); color: var(--ink); padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- En-tête (ardoise, fixé) ---------- */
.top { position: sticky; top: 0; z-index: 50; background: var(--slate); color: var(--s-ink); border-bottom: 1px solid var(--s-line); }
.top .wrap { min-height: var(--nav-h); display: flex; align-items: center; gap: 24px; }
.brand { font-family: var(--font-display); font-weight: 500; font-size: 18px; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.brand i { width: 10px; height: 10px; background: var(--s-accent); border-radius: 2px; }
.menu { margin-left: auto; display: flex; align-items: center; gap: 24px; }
.menu > summary { display: none; }
/* Sur bureau, le contenu du <details> doit rester visible même fermé (navigateurs récents) ; main.js l'ouvre aussi en repli. */
.menu::details-content { display: block; content-visibility: visible; }
.menu ul { list-style: none; display: flex; gap: 26px; font-weight: 500; font-size: 15px; }
.menu ul a { text-decoration: none; color: var(--s-muted); padding: 6px 0; position: relative; }
.menu ul a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--s-accent); transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.menu ul a:hover, .menu ul a:focus-visible { color: var(--s-ink); }
.menu ul a:hover::after, .menu ul a:focus-visible::after { transform: scaleX(1); }
.theme-btn { width: 40px; height: 40px; border-radius: var(--r); border: 1px solid var(--s-line); background: transparent; color: var(--s-ink); display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; }
.theme-btn:hover { background: var(--s-raise); }
.theme-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.theme-btn .ico-lune { display: none; }
html.js .theme-btn { display: grid; }
html:not(.js) .theme-btn { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-btn .ico-soleil { display: none; } :root:not([data-theme="light"]) .theme-btn .ico-lune { display: block; } }
:root[data-theme="dark"] .theme-btn .ico-soleil { display: none; } :root[data-theme="dark"] .theme-btn .ico-lune { display: block; }
:root[data-theme="light"] .theme-btn .ico-soleil { display: block; } :root[data-theme="light"] .theme-btn .ico-lune { display: none; }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: var(--r); text-decoration: none; font-weight: 500; font-size: 16px; border: 1px solid var(--line); color: var(--ink); background: var(--surface); cursor: pointer; transition: transform .15s, background .15s, border-color .15s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--p { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn--t { border-color: transparent; background: transparent; color: var(--accent); text-decoration: underline; text-underline-offset: 4px; padding-inline: 8px; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
/* sur l'ardoise */
.on-slate .btn { border-color: var(--s-line); color: var(--s-ink); background: transparent; }
.on-slate .btn:hover { background: var(--s-raise); }
.on-slate .btn--p { background: var(--s-accent); color: var(--slate); border-color: var(--s-accent); }
.on-slate .btn--p:hover { background: #A8C8F6; }
.on-slate .btn--t { border-color: transparent; background: transparent; color: var(--s-accent); }
.on-slate :focus-visible { outline-color: var(--s-ink); }

/* ---------- Hero (bandeau ardoise) ---------- */
.hero { background: var(--slate); color: var(--s-ink); padding: clamp(48px, 7vw, 104px) 0 clamp(48px, 6vw, 88px); }
.hero .wrap { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: end; }
.dispo { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--s-muted); margin: 0 0 32px; padding-left: 14px; border-left: 2px solid var(--s-accent); }
.hero h1 { font-size: clamp(38px, 4.8vw, 66px); letter-spacing: -.03em; line-height: 1; }
.accroche { font-family: var(--font-display); font-size: clamp(22px, 2.2vw, 30px); font-weight: 400; line-height: 1.25; margin: 24px 0 0; letter-spacing: -.01em; max-width: 24ch; }
.sous { font-size: 19px; color: var(--s-muted); max-width: 44ch; margin: 16px 0 0; }
.hero .btns { margin: 36px 0 0; }
.cite { margin: 40px 0 0; padding: 20px 0 0; border-top: 1px solid var(--s-line); font-size: 15px; color: var(--s-muted); font-style: italic; max-width: 52ch; }
.hero .nom { display: flex; align-items: center; gap: 18px; }
.hero .face { display: none; }
.portrait { position: relative; justify-self: end; width: min(100%, 300px); }
.portrait img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%; border-radius: var(--r); border: 1px solid var(--s-line); background: var(--s-raise); }
.portrait .tag { position: absolute; left: -1px; bottom: -1px; background: var(--slate); border: 1px solid var(--s-line); border-radius: 0 var(--r) 0 var(--r); padding: 12px 16px; font-size: 13px; color: var(--s-muted); line-height: 1.4; }
.portrait .tag b { display: block; color: var(--s-ink); font-weight: 500; font-size: 15px; }

/* Séquence d'arrivée (une seule, au chargement, avec JS) */
html.js .hero [data-arrive] { opacity: 0; transform: translateY(10px); animation: arrive .6s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes arrive { to { opacity: 1; transform: none; } }

/* ---------- Sections ---------- */
.section { padding: clamp(56px, 7vw, 104px) 0; }
.section + .section { border-top: 1px solid var(--line); }
.section--alt { background: var(--surface); }
.head { display: grid; grid-template-columns: 7fr 5fr; gap: 24px; align-items: end; margin: 0 0 40px; }
.head h2 { font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -.025em; }
.head .lead { color: var(--muted); font-size: 18px; max-width: 46ch; }
.kicker { font-size: 13px; font-weight: 500; color: var(--accent); margin: 0 0 12px; display: flex; align-items: center; gap: 10px; }
.kicker::before { content: ""; width: 18px; height: 2px; background: currentColor; }

/* Révélation discrète au défilement (avec JS, hors mouvement réduit) */
html.js.motion .reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .2, 1); }
html.js.motion .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Ce que je fais ---------- */
.offres { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.offre { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start; }
.offre svg { width: 56px; height: 56px; fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.offre h3 { font-size: 24px; letter-spacing: -.02em; margin: 0 0 10px; }
.offre p { color: var(--muted); }

/* ---------- Ma façon de travailler ---------- */
.postures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.posture { padding: 28px; border-right: 1px solid var(--line); }
.posture:last-child { border-right: 0; }
.posture .num { font-family: var(--font-mono); font-size: 13px; color: var(--accent); margin: 0 0 14px; }
.posture h3 { font-size: 21px; letter-spacing: -.015em; margin: 0 0 10px; }
.posture p { color: var(--muted); font-size: 15.5px; }

/* ---------- Pilotage : cycle ---------- */
.cycle { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; }
.phases { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.phases::before { content: ""; position: absolute; left: 24px; right: 24px; top: 18px; height: 2px; background: var(--line); }
.phase { position: relative; display: grid; align-content: start; gap: 12px; }
.phase__num { width: 38px; height: 38px; display: grid; place-items: center; font-family: var(--font-mono); font-size: 13px; background: var(--surface); border: 2px solid var(--accent); color: var(--accent); border-radius: var(--r-sm); position: relative; z-index: 1; }
.phase__title { font-size: 20px; letter-spacing: -.015em; }
.phase__title small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 14px; color: var(--muted); margin-top: 2px; }
.phase details { border-top: 1px solid var(--line); padding-top: 10px; }
.phase summary { cursor: pointer; font-weight: 500; font-size: 14px; color: var(--accent); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.phase summary::-webkit-details-marker { display: none; }
.phase summary::after { content: "+"; font-family: var(--font-display); font-size: 18px; line-height: 1; color: var(--muted); }
.phase details[open] summary::after { content: "–"; }
.phase ul { list-style: none; margin: 10px 0 0; display: grid; gap: 6px; font-size: 15px; }
.phase li { padding-left: 14px; position: relative; }
.phase li::before { content: ""; position: absolute; left: 0; top: 11px; width: 6px; height: 2px; background: var(--accent); }
.bandes { display: grid; gap: 8px; margin: 32px 0 0; }
.bande { display: grid; grid-template-columns: 220px 1fr; align-items: center; gap: 16px; }
.bande span { font-size: 14px; font-weight: 500; }
.bande i { display: block; height: 10px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 35%, var(--line))); }
.bande:nth-child(2) i { opacity: .8; } .bande:nth-child(3) i { opacity: .6; }
.env { margin: 28px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; }
.env b { font-weight: 500; color: var(--ink); }

/* ---------- Expériences ---------- */
.xp { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line); }
.xp > li { display: grid; grid-template-columns: 240px 1fr; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.xp__when { font-family: var(--font-mono); font-size: 13px; color: var(--accent); line-height: 1.6; }
.xp__when small { display: block; color: var(--muted); font-family: var(--font-body); font-size: 13px; }
.xp h3 { font-size: 22px; letter-spacing: -.015em; }
.xp .org { color: var(--muted); margin: 4px 0 0; }
.xp .syn { margin: 12px 0 0; }
.xp .cats { margin: 14px 0 0; display: grid; gap: 6px; }
.cat { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.cat summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; font-weight: 500; font-size: 15px; }
.cat summary::-webkit-details-marker { display: none; }
.cat summary::after { content: "+"; font-family: var(--font-display); font-size: 18px; line-height: 1; color: var(--muted); }
.cat[open] summary::after { content: "–"; }
.cat summary .n { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-left: auto; margin-right: 8px; font-weight: 400; }
.cat--on summary { color: var(--accent); }
.cat strong { font-weight: 500; color: var(--ink); }
.cat > div, .cat > ul { padding: 0 14px 14px; font-size: 15px; color: var(--ink); }
.cat ul { list-style: none; display: grid; gap: 6px; }
.cat li { padding-left: 14px; position: relative; }
.cat li::before { content: ""; position: absolute; left: 0; top: 11px; width: 6px; height: 2px; background: var(--accent); }
.cat .more { padding: 0 14px 14px; }
.cat .more p + p { margin-top: 8px; }

/* ---------- Réalisations ---------- */
.filters { display: flex; flex-wrap: wrap; margin: 0 0 32px; border: 1px solid var(--line); border-radius: var(--r); width: max-content; max-width: 100%; overflow: hidden; background: var(--surface); }
.filters button { height: 40px; padding: 0 16px; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; font-weight: 500; font-size: 14px; }
.filters button:last-child { border-right: 0; }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.filters button:focus-visible { outline-offset: -3px; }
html:not(.js) .filters { display: none; }
.cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s; grid-column: span 2; }
.card--wide { grid-column: span 6; }
.card--half { grid-column: span 3; }
.card[hidden] { display: none; }
.card:hover { transform: translateY(-2px); }
.card .body { padding: 22px 24px 20px; display: grid; gap: 0; }
.status { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: var(--accent); margin: 0 0 10px; }
.status::before { content: ""; width: 18px; height: 2px; background: currentColor; flex: 0 0 auto; }
.card h3 { font-size: 24px; letter-spacing: -.02em; }
.card .one { margin: 8px 0 0; color: var(--muted); }
.card details { margin: 18px 0 0; border-top: 1px solid var(--line); padding-top: 12px; }
.card summary { cursor: pointer; font-weight: 500; font-size: 15px; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.card summary::-webkit-details-marker { display: none; }
.card summary::after { content: "+"; font-family: var(--font-display); font-size: 20px; line-height: 1; color: var(--muted); }
.card details[open] summary::after { content: "–"; }
.card dl { margin: 14px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 15px; }
.card dt { color: var(--muted); }
.card dd { margin: 0; }
.card dd ul { list-style: none; display: grid; gap: 4px; }
.card dd li { padding-left: 14px; position: relative; }
.card dd li::before { content: ""; position: absolute; left: 0; top: 11px; width: 6px; height: 2px; background: var(--accent); }
.card .links { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 15px; }
.card .links a { color: var(--accent); text-underline-offset: 4px; }
.shot { background: var(--slate); border-bottom: 1px solid var(--line); overflow: hidden; position: relative; aspect-ratio: 16 / 9; }
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .4s; }
.card:hover .shot img { transform: scale(1.02); }
.shot--phone { display: grid; justify-items: center; align-items: start; padding: 24px 24px 0; }
.shot--phone .slides { width: min(62%, 300px); display: grid; }
.shot--phone img { grid-area: 1 / 1; width: 100%; height: auto; border: 1px solid var(--s-line); border-bottom: 0; border-radius: 10px 10px 0 0; object-fit: unset; animation: slide 12s linear infinite; }
.shot--phone img:nth-child(2) { animation-delay: -8s; }
.shot--phone img:nth-child(3) { animation-delay: -4s; }
@keyframes slide { 0%, 28% { opacity: 1; } 33%, 94% { opacity: 0; } 100% { opacity: 1; } }
.shot--duo img.inset { position: absolute; right: 20px; bottom: 0; width: 38%; height: auto; border: 1px solid var(--s-line); border-bottom: 0; border-radius: 6px 6px 0 0; box-shadow: -8px 0 24px -8px rgba(0, 0, 0, .45); object-fit: unset; }
.shot--anim { aspect-ratio: auto; background: transparent; border-bottom: 1px solid var(--line); padding: 16px; }
.card--wide:hover { transform: none; }
.card--wide .shot--anim { padding: 0; border-bottom: 0; }
.card--wide .body { border-bottom: 1px solid var(--line); }
/* Piste A (retenue le 2026-11-07) : affiche fixe + « Voir l'outil en action » qui ouvre l'animation dans un <dialog> */
.shot--poster img { object-position: top; }
.shot--poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(16, 24, 41, .88)); pointer-events: none; }
.play { position: absolute; left: 20px; bottom: 18px; z-index: 1; display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 16px; border-radius: var(--r); background: var(--s-accent); color: var(--slate); border: 0; font: inherit; font-weight: 500; font-size: 14px; cursor: pointer; transition: transform .15s, background .15s; }
.play svg { width: 13px; height: 13px; fill: currentColor; }
.play:hover { background: #A8C8F6; transform: translateY(-1px); }
/* Léger clignotement lent pour attirer l'œil : halo qui s'élargit et fond qui s'éclaircit (coupé sous mouvement réduit) */
@keyframes play-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(143, 182, 240, .6); background: var(--s-accent); }
  45% { background: #BBD4F8; }
  70% { box-shadow: 0 0 0 12px rgba(143, 182, 240, 0); }
}
.play { animation: play-pulse 2.8s ease-out infinite; }
.play:hover, .play:focus-visible { animation: none; }
dialog.demo { width: min(1120px, 94vw); max-height: 92vh; overflow: auto; padding: 0; border: 1px solid var(--s-line); border-radius: var(--r); background: var(--slate); color: var(--s-ink); }
dialog.demo--light { background: var(--surface); color: var(--ink); border-color: var(--line); }
dialog.demo::backdrop { background: rgba(5, 9, 17, .72); }
.demo__bar { display: flex; justify-content: flex-end; padding: 10px 12px 0; }
.demo__close { height: 36px; padding: 0 14px; border-radius: var(--r); border: 1px solid var(--s-line); background: transparent; color: inherit; font: inherit; font-weight: 500; font-size: 14px; cursor: pointer; }
.demo--light .demo__close { border-color: var(--line); }
.demo__in { padding: 0 16px 16px; }
.demo__in .dr, .demo__in .fx { border: 0; }
html:not(.js) .play { display: none; }
html:not(.js) dialog.demo { display: block; position: static; width: auto; max-width: none; max-height: none; margin: 24px 0 0; }
html:not(.js) .demo__bar { display: none; }
.card .pitch { margin: 12px 0 0; font-style: italic; color: var(--ink); }
.card .links--up { margin: 10px 0 0; }
.card .links--up a::after { content: " ↗"; font-size: .85em; }
/* carte sans capture : schéma des activités */
.schema { background: var(--slate); color: var(--s-ink); border-bottom: 1px solid var(--line); aspect-ratio: 16 / 9; padding: 24px; display: grid; align-content: center; gap: 10px; }
.schema li { list-style: none; display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: center; font-size: 14px; }
.schema li i { font-family: var(--font-mono); font-size: 12px; color: var(--s-accent); border: 1px solid var(--s-line); border-radius: var(--r-sm); width: 28px; height: 28px; display: grid; place-items: center; }
.schema li span { border-bottom: 1px solid var(--s-line); padding: 6px 0; }
.schema li:last-child span { border-bottom: 0; }
.empty { display: none; color: var(--muted); padding: 24px 0; }
.empty.is-on { display: block; }

/* ---------- Compétences ---------- */
.skills { display: grid; gap: 0; border-top: 1px solid var(--line); }
.skills > div { display: grid; grid-template-columns: 240px 1fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.skills h3 { font-family: var(--font-body); font-size: 15px; font-weight: 500; color: var(--muted); padding-top: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.chips li { font-size: 14px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-sm); padding: 6px 10px; }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; }
.contact h2 { font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -.025em; }
.contact .lead { color: var(--muted); font-size: 18px; margin: 12px 0 0; max-width: 44ch; }
.contact .btns { margin: 28px 0 0; }
.contact .mail { margin: 20px 0 0; font-size: 15px; }
.contact .mail a { color: var(--accent); text-underline-offset: 4px; }
.zone { border-left: 1px solid var(--line); padding-left: 48px; }
.zone h3 { font-size: 20px; margin: 0 0 14px; }
.zone dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; }
.zone dt { color: var(--muted); } .zone dd { margin: 0; }
/* Formulaire de contact (ajouté le 2026-11-07) : envoi par fetch vers un webhook n8n ; sans JS, boutons mailto à la place */
.form { margin: 28px 0 0; display: grid; gap: 16px; max-width: 560px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 14px; font-weight: 500; color: var(--muted); }
.field input, .field textarea { font: inherit; font-size: 16px; line-height: 1.4; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 11px 14px; min-height: 48px; width: 100%; transition: border-color .15s; }
.field textarea { resize: vertical; min-height: 140px; }
.field input:hover, .field textarea:hover { border-color: var(--muted); }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); border-radius: var(--r); }
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--err); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .btns { margin: 4px 0 0; }
.form__note { margin: 0; font-size: 14px; color: var(--muted); }
.form__note a { color: var(--accent); text-underline-offset: 4px; }
.form__status { display: none; margin: 0; padding: 12px 14px; font-size: 15px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.form__status.is-ok { display: block; border-color: var(--ok); color: var(--ok); }
.form__status.is-err { display: block; border-color: var(--err); color: var(--ink); }
.form__status a { color: var(--accent); text-underline-offset: 4px; }
.form.is-sent .field, .form.is-sent .btns, .form.is-sent .form__note { display: none; }
.form .btn[disabled] { opacity: .6; cursor: progress; transform: none; }
html:not(.js) .form { display: none; }
html.js .nojs-contact { display: none; }
.contact .nojs-contact { margin: 28px 0 0; }

/* ---------- Pied de page ---------- */
.foot { background: var(--slate); color: var(--s-muted); padding: 28px 0; font-size: 14px; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: center; justify-content: space-between; }
.foot a { color: var(--s-ink); text-underline-offset: 4px; }
.foot nav { display: flex; gap: 20px; }

/* ---------- Pages annexes ---------- */
.page { padding: clamp(48px, 7vw, 96px) 0; max-width: 72ch; }
.page h1 { font-size: clamp(34px, 4.5vw, 56px); letter-spacing: -.03em; margin: 0 0 24px; }
.page h2 { font-size: 22px; margin: 32px 0 10px; }
.page p + p { margin-top: 10px; }
.page a:not(.btn) { color: var(--accent); }
.page .btns { margin-top: 28px; }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.js .hero [data-arrive] { opacity: 1; transform: none; }
  html.js .reveal { opacity: 1; transform: none; }
  .card:hover, .btn:hover { transform: none; }
  .card:hover .shot img { transform: none; }
  .shot--phone img:not(:first-child) { opacity: 0; }
}

/* ---------- Tablette ---------- */
@media (max-width: 1023px) {
  .hero .wrap { gap: 40px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .card, .card--half { grid-column: span 1; }
  .card--wide { grid-column: span 2; }
  .phases { grid-template-columns: repeat(2, 1fr); }
  .phases::before { display: none; }
  .postures { grid-template-columns: 1fr; }
  .posture { border-right: 0; border-bottom: 1px solid var(--line); }
  .posture:last-child { border-bottom: 0; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .top .wrap { gap: 12px; }
  .menu { position: static; gap: 8px; }
  .menu > summary { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--s-line); border-radius: var(--r); cursor: pointer; list-style: none; order: 2; }
  .menu > summary::-webkit-details-marker { display: none; }
  .menu > summary svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; fill: none; }
  .menu ul { position: absolute; left: 0; right: 0; top: 100%; background: var(--slate); border-bottom: 1px solid var(--s-line); flex-direction: column; gap: 0; padding: 8px var(--gut) 16px; }
  .menu ul a { display: block; padding: 12px 0; border-bottom: 1px solid var(--s-line); font-size: 16px; }
  .menu ul a::after { display: none; }
  .menu:not([open])::details-content { display: none; content-visibility: hidden; }
  .menu:not([open]) ul { display: none; }
  .theme-btn { order: 1; }
  .hero .wrap { grid-template-columns: 1fr; gap: 36px; }
  .portrait { display: none; }
  .hero .nom { justify-content: space-between; }
  .hero .face { display: block; flex: 0 0 auto; width: 88px; height: 88px; object-fit: cover; object-position: 50% 15%; border-radius: var(--r); border: 1px solid var(--s-line); background: var(--s-raise); }
  .btns .btn { flex: 1 1 auto; }
  .head, .contact { grid-template-columns: 1fr; gap: 12px; }
  .contact { gap: 36px; }
  .zone { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 28px; }
  .offres { grid-template-columns: 1fr; }
  .offre { grid-template-columns: 44px 1fr; padding: 22px; gap: 14px; }
  .offre svg { width: 44px; height: 44px; }
  .cycle { padding: 20px; }
  .phases { grid-template-columns: 1fr; gap: 20px; }
  .bande { grid-template-columns: 1fr; gap: 6px; }
  .xp > li, .skills > div { grid-template-columns: 1fr; gap: 10px; }
  .filters { width: 100%; }
  .filters button { flex: 1 1 auto; }
  .cards { grid-template-columns: 1fr; }
  .card--wide { grid-column: span 1; }
  .card .body { padding: 18px; }
  .foot .wrap { flex-direction: column; align-items: flex-start; }
}