/* Piguet Digital Studio. Système graphique B2, mouvement B3. Aucune dépendance. */

:root {
  --bg: #F6F4EF;
  --surface: #ECEAE4;
  --ink: #1B1B1A;
  --muted: #5B5955;
  --line: #D7D4CC;
  --signature: #E4482E;
  --signature-text: #C63620;
  --block-bg: #1B1B1A;
  --block-fg: #F6F4EF;
  --block-muted: #B4B2AC;
  --block-signature: #EC583E;
  --block-line: color-mix(in srgb, #F6F4EF 20%, transparent);
  --block-xxx-bg: color-mix(in srgb, #F6F4EF 12%, transparent);
  color-scheme: light;

  --font: "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --gutter: 1.5rem;
  --side: clamp(1.25rem, 5vw, 4rem);
  --wrap: 80rem;
  --section: clamp(3.5rem, 2rem + 4vw, 6.5rem);
  --measure: 36rem;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 180ms;
  --t-base: 600ms;
  --t-slow: 900ms;
  --rise: 16px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--t-texte);
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, table, address, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: currentColor; transition: text-decoration-color var(--t-fast) var(--ease), text-decoration-thickness var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
a:hover { text-decoration-color: var(--signature); text-decoration-thickness: 2px; }
strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--signature); outline-offset: 3px; }
::selection { background: var(--signature); color: var(--bg); }

.skip { position: absolute; left: var(--side); top: -100%; padding: 0.5rem 0.75rem; background: var(--ink); color: var(--bg); z-index: 100; }
.skip:focus { top: 0.5rem; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--side); }

/* ---------- Typographie ---------- */
.display, h1 { font-size: var(--t-titre); font-weight: 500; line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
.display { font-size: var(--t-display); line-height: 1.05; letter-spacing: -0.022em; }
h2, .h2 { font-size: var(--t-titre); font-weight: 500; line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; }
h3, .h3 { font-size: var(--t-sous-titre); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.lead { font-size: var(--t-chapo); line-height: 1.45; max-width: 40rem; }
.small { font-size: var(--t-petit); font-weight: 500; line-height: 1.4; letter-spacing: 0.01em; }
.muted { color: var(--muted); }
.accent { color: var(--signature); }
.measure { max-width: var(--measure); }
.measure > p + p, .prose > p + p { margin-top: 1.1em; }

.label {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: var(--t-etiquette); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--signature-text);
}
.label::after { content: ""; width: 2rem; height: 2px; background: var(--signature); }

/* Phrase forte : objet graphique. Chaque ligne dans un masque. */
.lines { display: block; }
.lines .line { display: block; overflow: hidden; padding-block: 0.03em; }
.lines .line > span { display: block; }

/* XXX : visiblement un emplacement */
.xxx { color: var(--muted); font-weight: 500; background: var(--surface); padding: 0 0.3em; border-radius: 2px; white-space: nowrap; }
.on-dark .xxx, .site-footer .xxx { background: var(--block-xxx-bg); color: var(--block-muted); }

/* Cadre d'emplacement image */
.frame {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  background: var(--surface); border: 1px solid var(--line); border-radius: 2px;
  padding: 0.75rem; color: var(--muted); font-size: var(--t-petit); line-height: 1.35;
}
.frame .frame-tag { font-weight: 600; }
.frame .frame-note { font-weight: 400; }
.frame-43 { aspect-ratio: 4 / 3; }
.frame-1610 { aspect-ratio: 16 / 10; }
.frame-11 { aspect-ratio: 1 / 1; }
.frame-logo { height: 3rem; padding: 0.5rem 1rem; justify-content: center; align-items: center; min-width: 8rem; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.9em 1.5em; border-radius: 2px; border: 1.5px solid var(--ink);
  background: var(--ink); color: var(--bg); font: inherit; font-weight: 600; line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.btn:hover { background: var(--signature); border-color: var(--signature); color: var(--bg); }
.btn-outline { background: transparent; color: var(--ink); }
.btn-outline:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.on-dark .btn { background: var(--block-fg); border-color: var(--block-fg); color: var(--block-bg); }
.on-dark .btn:hover { background: var(--signature); border-color: var(--signature); color: var(--block-bg); }
.on-dark .btn-outline { background: transparent; color: var(--block-fg); }
.on-dark .btn-outline:hover { background: var(--block-fg); color: var(--block-bg); }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; margin-top: 2rem; }

.arrow { text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 0.4em; }
.arrow::after { content: "→"; transition: transform var(--t-fast) var(--ease); }
.arrow:hover::after { transform: translateX(4px); }
.arrow:hover { color: var(--signature-text); }

/* ---------- En-tête ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 4.5rem; }
.wordmark { display: inline-flex; align-items: baseline; gap: 0.6em; text-decoration: none; }
.wm-name { font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1; }
.wm-sub { font-weight: 400; color: var(--muted); line-height: 1; }
.wordmark-light .wm-name { color: var(--block-fg); }
.wordmark-light .wm-sub { color: var(--block-muted); }

.site-nav ul { display: flex; gap: 2rem; }
.site-nav a { text-decoration: none; font-weight: 500; padding-block: 0.25rem; border-bottom: 2px solid transparent; transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.site-nav a:hover { border-color: var(--signature); }
.site-nav a[aria-current="page"] { border-color: var(--signature); }

.menu-toggle { display: none; font: inherit; font-weight: 600; background: none; border: 0; padding: 0.5rem 0; color: var(--ink); cursor: pointer; }
.menu-toggle .menu-close { display: none; }
.menu-toggle[aria-expanded="true"] .menu-open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-close { display: inline; }

@media (max-width: 60rem) {
  .menu-toggle { display: inline-block; position: relative; z-index: 60; }
  .site-nav { position: fixed; inset: 4.5rem 0 0 0; background: var(--bg); padding: 2rem var(--side); display: none; z-index: 55; overflow-y: auto; }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav li { border-bottom: 1px solid var(--line); }
  .site-nav a { display: block; font-weight: 600; letter-spacing: -0.02em; padding: 1rem 0; border-bottom: 0; }
  .site-nav a[aria-current="page"] { color: var(--signature-text); }
  .js .site-nav.is-open li { opacity: 0; transform: translateY(var(--rise)); animation: rise var(--t-base) var(--ease) forwards; animation-delay: calc(var(--i, 0) * 70ms); }
}
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- Sections et grille ---------- */
section, .section { padding-block: var(--section); }
.section-tight { padding-block: calc(var(--section) * 0.6); }
.surface { background: var(--surface); }
.on-dark { background: var(--block-bg); color: var(--block-fg); }
.on-dark .muted { color: var(--block-muted); }
.on-dark .label { color: var(--signature); }
.on-dark a:hover { color: var(--signature); }

.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }
.col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-10 { grid-column: span 10; } .col-12 { grid-column: 1 / -1; }
.col-5.start-2 { grid-column: 2 / span 5; } .col-7.start-5 { grid-column: 5 / span 7; } .col-6.start-5 { grid-column: 5 / span 6; }
.col-5.start-7 { grid-column: 7 / span 5; } .col-6.start-7 { grid-column: 7 / span 6; } .col-4.start-9 { grid-column: 9 / span 4; }
.section-head { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section-head .label { margin-bottom: 1.25rem; }
.section-head .lead, .section-head .prose { margin-top: 1.5rem; }

@media (max-width: 52rem) {
  .grid { grid-template-columns: repeat(4, 1fr); }
  .grid > *, .grid > [class*="col-"], .grid > [class*="start-"] { grid-column: 1 / -1; }
  .col-4.keep, .col-6.keep { grid-column: span 2; }
}

/* ---------- Hero ---------- */
.hero { padding-block: clamp(3rem, 8vh, 6rem) clamp(2.5rem, 6vh, 5rem); display: flex; align-items: center; }
.hero > .wrap { width: 100%; }
.hero .display { grid-column: 1 / span 9; justify-self: start; }
.hero .hero-text { grid-column: 1 / span 6; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
@media (max-width: 52rem) { .hero { min-height: 0; } .hero .display, .hero .hero-text { grid-column: 1 / -1; } .hero .hero-text { margin-top: 2rem; } }

/* ---------- Listes de cartes ---------- */
.cards { display: grid; gap: var(--gutter); }
.cards-2 { grid-template-columns: repeat(2, 1fr); }
.cards-3 { grid-template-columns: repeat(3, 1fr); }
.cards-4 { grid-template-columns: repeat(4, 1fr); }
.card { border-top: 1px solid var(--line); padding-top: 1.25rem; transition: border-color var(--t-fast) var(--ease); }
.card:hover, .card:focus-within { border-top-color: var(--signature); }
.card .num { font-size: var(--t-etiquette); font-weight: 600; color: var(--signature-text); letter-spacing: 0.08em; }
.card h3 { margin-top: 0.5rem; }
.card p { margin-top: 0.5rem; }
.card .frame { margin-bottom: 1rem; }
.card .arrow { margin-top: 1rem; }
.card ul.list { margin-top: 0.75rem; }
.card ul.list li { padding: 0.35rem 0; border-top: 1px solid var(--line); font-size: var(--t-petit); }
.card ul.list li:first-child { border-top: 0; }
.card .price { margin-top: 0.75rem; font-weight: 600; }
.on-dark .card { border-top-color: var(--block-line); }
@media (max-width: 64rem) { .cards-4 { grid-template-columns: repeat(2, 1fr); } .cards-3 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 52rem) { .cards-3, .cards-2 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 36rem) { .cards-2, .cards-3, .cards-4 { grid-template-columns: 1fr; } }

/* ---------- Tableaux ---------- */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 0.9rem 1rem 0.9rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.table thead th { font-size: var(--t-etiquette); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--ink); }
.table .hi { color: var(--signature-text); font-weight: 600; }
.table-wrap { overflow-x: auto; }
.sources { margin-top: 1rem; }
@media (max-width: 36rem) { .table th, .table td { padding: 0.7rem 0.6rem 0.7rem 0; font-size: var(--t-petit); } }

/* ---------- Processus et parcours (ligne qui se dessine) ---------- */
.steps { display: grid; gap: var(--gutter); position: relative; padding-top: 1.5rem; }
.steps-5 { grid-template-columns: repeat(5, 1fr); }
.steps-6 { grid-template-columns: repeat(6, 1fr); }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--line); }
.steps::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--signature); transform-origin: left; transform: scaleX(0); transition: transform 1200ms var(--ease); }
.steps.is-in::after { transform: scaleX(1); }
.step .num { font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--signature); }
.step .step-text { margin-top: 0.75rem; font-size: var(--t-sous-titre); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; }
.step .step-note { margin-top: 0.4rem; color: var(--muted); font-size: var(--t-petit); }
@media (max-width: 52rem) {
  .steps-5, .steps-6 { grid-template-columns: 1fr; padding-top: 0; padding-left: 1.75rem; gap: 1.75rem; }
  .steps::before, .steps::after { top: 0; bottom: 0; left: 0; right: auto; width: 2px; height: auto; transform-origin: top; }
  .steps::after { transform: scaleY(0); }
  .steps.is-in::after { transform: scaleY(1); }
}
/* version verticale compacte (accueil, colonne latérale) */
.steps-v { grid-template-columns: 1fr; padding-top: 0; padding-left: 1.75rem; gap: 1.25rem; }
.steps-v::before, .steps-v::after { top: 0; bottom: 0; left: 0; right: auto; width: 2px; height: auto; transform-origin: top; }
.steps-v::after { transform: scaleY(0); }
.steps-v.is-in::after { transform: scaleY(1); }
.steps-v .step .num { font-size: var(--t-etiquette); letter-spacing: 0.08em; color: var(--signature-text); }
.steps-v .step .step-text { margin-top: 0.2rem; }

/* ---------- Infographie 1 : le modèle, deux branches ---------- */
.model { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }
.branch { grid-column: span 5; display: flex; flex-direction: column; }
.branch + .branch { grid-column: 8 / span 5; }
.node { position: relative; padding: 1.1rem 0 1.1rem 1.75rem; font-size: var(--t-sous-titre); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; }
.node::before { content: ""; position: absolute; left: 0; top: 1.55rem; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--ink); }
.node + .node::after { content: ""; position: absolute; left: calc(0.375rem - 1px); top: -1.1rem; height: 1.85rem; width: 2px; background: var(--signature); transform-origin: top; transform: scaleY(0); transition: transform var(--t-slow) var(--ease); }
.is-in .node + .node::after { transform: scaleY(1); }
.branch-title { font-size: var(--t-etiquette); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.5rem; }
.model-join { grid-column: 1 / -1; margin-top: 1rem; display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); align-items: start; }
.join-line { grid-column: 1 / span 6; height: 2px; background: var(--signature); transform-origin: left; transform: scaleX(0); transition: transform var(--t-slow) var(--ease); margin-top: 2rem; }
.join-line.r { grid-column: 7 / span 6; transform-origin: right; }
.is-in .join-line { transform: scaleX(1); }
.join-node { grid-column: 4 / span 6; text-align: center; margin-top: 0; }
.join-node::before { content: ""; display: block; width: 2px; height: 2.5rem; margin: 0 auto 0.75rem; background: var(--signature); transform-origin: top; transform: scaleY(0); transition: transform var(--t-slow) var(--ease) 600ms; }
.is-in .join-node::before { transform: scaleY(1); }
.join-node span { display: inline-block; background: var(--signature); color: var(--bg); font-weight: 600; letter-spacing: -0.02em; padding: 0.7em 1.4em; border-radius: 2px; }
@media (max-width: 52rem) {
  .model { grid-template-columns: 1fr; }
  .branch, .branch + .branch { grid-column: 1 / -1; }
  .model-join { grid-template-columns: 1fr; }
  .join-line { display: none; }
  .join-node { grid-column: 1 / -1; text-align: left; }
  .join-node::before { margin: 0 0 0.75rem 0.3rem; }
}

/* ---------- Infographie 2 : deux colonnes ---------- */
.two-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(var(--gutter) * 2); }
.two-cols h3 { padding-bottom: 1rem; border-bottom: 1px solid var(--ink); }
.two-cols ul li { padding: 0.8rem 0; border-bottom: 1px solid var(--line); font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; }
.two-cols .col-tools li { color: var(--muted); }
.two-cols .col-human li { display: flex; gap: 0.75rem; align-items: baseline; }
.two-cols .col-human li::before { content: ""; flex: 0 0 0.6rem; height: 0.6rem; background: var(--signature); border-radius: 50%; transform: translateY(-0.1em); }
@media (max-width: 36rem) { .two-cols { grid-template-columns: 1fr; } }

/* ---------- Avant / Après ---------- */
.before-after { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gutter); position: relative; }
.before-after .frame { min-height: 12rem; }
.ba-tag { position: absolute; top: 0.75rem; right: 0.75rem; font-size: var(--t-etiquette); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.ba-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gutter); margin-top: 1.5rem; }
@media (max-width: 36rem) { .before-after, .ba-meta { grid-template-columns: 1fr; } }

/* ---------- Témoignages ---------- */
.quote { border-top: 1px solid var(--line); padding-top: 1.25rem; }
.quote .mark { line-height: 0.6; color: var(--signature); font-weight: 600; display: block; margin-bottom: 1rem; }
.quote p { font-size: var(--t-chapo); line-height: 1.4; }
.quote footer { margin-top: 1rem; color: var(--muted); font-size: var(--t-petit); }

/* ---------- Fiche projet ---------- */
.project { padding-block: var(--section); border-top: 2px solid var(--ink); }
.project:first-of-type { border-top: 0; }
.project-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 2rem; margin-bottom: 2.5rem; }
.field { margin-top: 1.5rem; }
.field:first-child { margin-top: 0; }
.field dt { font-size: var(--t-etiquette); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--signature-text); margin-bottom: 0.6rem; }
.field dd { margin: 0; }
.people { display: grid; gap: var(--gutter); margin-top: 1.25rem; }
.person { display: grid; grid-template-columns: 6rem 1fr; gap: 1.25rem; align-items: start; border-top: 1px solid var(--line); padding-top: 1rem; }
.person .frame { padding: 0.5rem; }
.person p { font-size: var(--t-petit); }
.person .name { font-size: var(--t-texte); font-weight: 600; }

/* ---------- Formulaire ---------- */
.form { display: grid; gap: 1.75rem; }
.form label { display: block; font-size: var(--t-petit); font-weight: 600; letter-spacing: 0.01em; margin-bottom: 0.35rem; }
.form label .opt { font-weight: 400; color: var(--muted); }
.form input, .form textarea { display: block; width: 100%; font: inherit; color: var(--ink); background: transparent; border: 0; border-bottom: 1.5px solid var(--ink); border-radius: 0; padding: 0.6rem 0; transition: border-color var(--t-fast) var(--ease); }
.form textarea { min-height: 8rem; resize: vertical; }
.form input:focus, .form textarea:focus { outline: none; border-bottom: 2px solid var(--signature); }
.form .error { display: none; margin-top: 0.4rem; font-size: var(--t-petit); color: var(--signature-text); }
.form .is-invalid .error { display: block; }
.form .is-invalid input, .form .is-invalid textarea { border-bottom-color: var(--signature-text); }
.form-note { margin-top: 1rem; }
.form-status { margin-top: 1rem; font-weight: 500; }
.form-status:empty { display: none; }

/* ---------- Pied de page ---------- */
.site-footer { background: var(--block-bg); color: var(--block-fg); padding-block: 4rem 3rem; font-size: var(--t-petit); }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--signature); }
.footer-grid { display: grid; grid-template-columns: 4fr 2fr 3fr 3fr; gap: var(--gutter); }
.footer-brand p { margin-top: 0.75rem; color: var(--block-muted); }
.site-footer li + li, .site-footer address p + p, .footer-legal p + ul { margin-top: 0.4rem; }
.footer-legal ul { margin-top: 1.25rem; }
@media (max-width: 52rem) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 36rem) { .footer-grid { grid-template-columns: 1fr; gap: 2rem; } }

/* ---------- Mouvement (B3) ---------- */
.js .reveal { opacity: 0; transform: translateY(var(--rise)); transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .lines .line > span { transform: translateY(105%); transition: transform var(--t-slow) var(--ease); }
.js .lines .line:nth-child(2) > span { transition-delay: 90ms; }
.js .lines .line:nth-child(3) > span { transition-delay: 180ms; }
.js .lines.is-in .line > span { transform: none; }
.js .stagger > * { opacity: 0; transform: translateY(var(--rise)); transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease); }
.js .stagger.is-in > * { opacity: 1; transform: none; }
.js .stagger.is-in > :nth-child(1) { transition-delay: 0ms; }
.js .stagger.is-in > :nth-child(2) { transition-delay: 70ms; }
.js .stagger.is-in > :nth-child(3) { transition-delay: 140ms; }
.js .stagger.is-in > :nth-child(4) { transition-delay: 210ms; }
.js .stagger.is-in > :nth-child(5) { transition-delay: 280ms; }
.js .stagger.is-in > :nth-child(6) { transition-delay: 350ms; }
.js .stagger.is-in > :nth-child(7) { transition-delay: 420ms; }
.js .stagger.is-in > :nth-child(8) { transition-delay: 490ms; }
.js .stagger.is-in > :nth-child(n+9) { transition-delay: 490ms; }
.js .stagger-slow.is-in > * { transition-delay: calc(var(--n, 0) * 140ms); }
.js .stagger-late.is-in > * { transition-delay: calc(300ms + var(--n, 0) * 70ms); }
.js .stagger-line.is-in > * { transition-delay: calc(200ms + var(--n, 0) * 200ms); }
.js main { animation: fade 300ms var(--ease); }
.js main.is-leaving { opacity: 0; transition: opacity 180ms var(--ease); }
@keyframes fade { from { opacity: 0; } }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; animation-timing-function: var(--ease); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; animation-delay: 0ms !important; transition-delay: 0ms !important; }
  html { scroll-behavior: auto; }
  .js .reveal, .js .stagger > *, .js .lines .line > span { opacity: 1; transform: none; }
  .steps::after, .join-line, .node + .node::after, .join-node::before { transform: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---------- Utilitaires ---------- */
[hidden] { display: none !important; }
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Accueil ---------- */
.statement { margin-top: clamp(3rem, 6vw, 5rem); font-size: var(--t-titre); font-weight: 600; line-height: 1; letter-spacing: -0.025em; text-wrap: balance; }
.ba-meta .field { margin-top: 0; }
.sticky { position: sticky; top: 6rem; }
.figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
.figure-num { font-size: var(--t-display); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
@media (max-width: 36rem) { .figures { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Notre modèle ---------- */
.statement.h1 { font-size: var(--t-titre); }
.statement.h2 { font-size: var(--t-titre); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; margin-top: clamp(2.5rem, 5vw, 4rem); }
.statement .indent { padding-left: clamp(0rem, 8vw, 6rem); }
.tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
.tool-cat h3 { font-size: var(--t-etiquette); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-bottom: 0.75rem; border-bottom: 1px solid var(--ink); margin-bottom: 1rem; }
.tool-cat .frame + .frame { margin-top: 0.75rem; }
.frame-logo { background: var(--bg); }
@media (max-width: 52rem) { .tools { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 36rem) { .tools { grid-template-columns: 1fr; } .statement .indent { padding-left: 0; } }

/* ---------- Pages intérieures ---------- */
.hero-page { padding-block: clamp(3rem, 7vh, 5rem) clamp(2rem, 4vh, 3rem); }
.before-after-v { grid-template-columns: 1fr; }
.frame-pds { background: var(--ink); color: var(--bg); justify-content: center; align-items: center; font-weight: 700; }
.frame-pds .frame-tag { font-weight: 700; }
.people .person:first-child { border-top: 0; padding-top: 0; }
.logos { display: flex; flex-wrap: wrap; gap: var(--gutter); margin-top: 1.5rem; }
.legal h2 { margin-top: 2.5rem; }
.legal h2:first-child { margin-top: 0; }
.legal p { margin-top: 0.5rem; }
.contact-direct p + p { margin-top: 0.5rem; }
@media (max-width: 52rem) { .contact-direct { margin-top: 3rem; } }


/* ---------- Passe design 2 : plus calme, plus fini ---------- */
/* XXX : discret, lisible, visiblement un emplacement, sans boîte */
.xxx { background: none; padding: 0; border-radius: 0; color: var(--muted); font-weight: 500; letter-spacing: 0.08em; border-bottom: 1px dotted var(--muted); white-space: nowrap; }
.on-dark .xxx, .site-footer .xxx { background: none; color: var(--block-muted); border-bottom-color: var(--block-line); }
h1 .xxx, h2 .xxx, .display .xxx { font-weight: 500; letter-spacing: 0.06em; }

/* Cadres d'emplacement : fins, vides, deux diagonales légères, légende dessous */
.ph { margin: 0; }
.frame { padding: 0; display: grid; place-items: center; justify-content: center; align-content: center; border: 1px solid var(--line); background:
  linear-gradient(to top right, transparent calc(50% - 0.5px), var(--line) calc(50% - 0.5px), var(--line) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
  linear-gradient(to top left, transparent calc(50% - 0.5px), var(--line) calc(50% - 0.5px), var(--line) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
  var(--surface); }
.frame .frame-tag { font-size: var(--t-etiquette); font-weight: 600; letter-spacing: 0.12em; color: var(--muted); background: var(--surface); padding: 0.25rem 0.6rem; }
.ph .frame-note { display: block; margin-top: 0.6rem; line-height: 1.4; color: var(--muted); }
.ba-tag { top: 0.6rem; right: 0.75rem; background: var(--surface); padding: 0 0.3rem; }
.frame-logo { background: var(--bg); border: 1px solid var(--line); }
.frame-logo .frame-tag { background: none; }
.card .frame { margin-bottom: 0; }
.card .ph { margin-bottom: 1rem; }
.person .frame .frame-tag { padding: 0.15rem 0.4rem; }
.person .ph .frame-note { margin-top: 0.4rem; }
.before-after .frame { min-height: 0; }

/* Cartes plus calmes */
.card { padding-top: 1rem; }
.card h3 { margin-top: 0.35rem; font-weight: 500; }
.card p { margin-top: 0.35rem; }
.specs { margin-top: 0.9rem; display: grid; gap: 0.35rem; font-size: var(--t-petit); font-weight: 400; }
.specs div { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.5rem; }
.specs dt { color: var(--muted); font-weight: 500; }
.specs dd { margin: 0; }
.pds-note { margin-top: 1.25rem; font-size: var(--t-petit); color: var(--muted); border-top: 1px solid var(--line); padding-top: 0.75rem; }

/* Phrases fortes : présentes, pas hurlées */
.statement, .statement.h1 { font-weight: 500; line-height: 1.12; letter-spacing: -0.018em; margin-top: clamp(2.5rem, 5vw, 4rem); max-width: 30ch; }
.statement.h2 { font-weight: 500; line-height: 1.18; }
.statement .indent { padding-left: clamp(0rem, 6vw, 4.5rem); }
.section-head .label { margin-bottom: 1rem; }
.section-head h2.mt-1 { margin-top: 0.75rem; }
.join-node span { padding: 0.6em 1.2em; }
.figure-num { font-size: var(--t-titre); }


/* ---------- Passe design 3 ---------- */
/* 1, 9 : hero pleine largeur, texte dessous, colonne droite habitée, bas réduit */
.hero { padding-block: clamp(3rem, 8vh, 6rem) clamp(1.5rem, 4vh, 3rem); }
.hero-page { padding-block: clamp(3rem, 7vh, 5rem) clamp(1.5rem, 3vh, 2.5rem); }
.hero .display { grid-column: 1 / -1; }
.hero .hero-text { grid-column: 1 / span 7; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.hero .hero-aside { grid-column: 9 / span 4; margin-top: clamp(1.5rem, 3vw, 2.5rem); padding-top: 0.35rem; border-top: 1px solid var(--ink); }
.hero .hero-aside .label { margin-bottom: 0.75rem; }
.hero .hero-aside p { font-size: var(--t-texte); }
.hero-page .hero-text { grid-column: 1 / span 7; }
@media (max-width: 52rem) { .hero .hero-aside { grid-column: 1 / -1; margin-top: 1.5rem; } }

/* 2, 17 : corail réservé au mot des titres, aux lignes qui se dessinent, au survol */
.label { color: var(--muted); }
.label::after { background: var(--signature); }
.card .num { color: var(--muted); }
.two-cols .col-human li::before { background: var(--ink); }
.field dt { color: var(--muted); }
.quote .mark { color: var(--ink); }
.site-nav a[aria-current="page"] { border-color: var(--ink); }
@media (max-width: 60rem) { .site-nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--signature); text-underline-offset: 0.15em; } }
.on-dark .label { color: var(--block-muted); }
.branch-title { color: var(--muted); }

/* 3 : une seule section grise par page, sinon un filet */
main > section + section:not(.on-dark):not(.surface), main > .projects + section:not(.on-dark) { border-top: 1px solid var(--line); }
main > .surface + section { border-top: 0; }

/* 4 : fin de page légère hors accueil */
.cta-light { border-top: 1px solid var(--ink) !important; padding-block: clamp(2.5rem, 2rem + 3vw, 5rem); }
.cta-light h2 { font-size: var(--t-titre); max-width: 26ch; }
.cta-light .actions { margin-top: 1.25rem; gap: 1.5rem 2.5rem; }
.cta-light .arrow { font-size: var(--t-chapo); }


/* 5 : services de l'accueil en liste serrée */
.rows { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--gutter); }
.rows li { display: flex; align-items: baseline; gap: 1rem; padding: 0.8rem 0; border-bottom: 1px solid var(--line); transition: border-color var(--t-fast) var(--ease); }
.rows li:hover { border-bottom-color: var(--signature); }
.rows .num { font-size: var(--t-etiquette); font-weight: 600; color: var(--muted); letter-spacing: 0.08em; min-width: 1.5rem; }
.rows h3 { font-size: var(--t-texte); font-weight: 500; margin: 0; }
.rows .xxx { margin-left: auto; }
@media (max-width: 36rem) { .rows { grid-template-columns: 1fr; } }

/* 6 : outils, même cadre que les images, 3:1 */
.frame-logo { height: auto; aspect-ratio: 3 / 1; min-width: 0; padding: 0; background:
  linear-gradient(to top right, transparent calc(50% - 0.5px), var(--line) calc(50% - 0.5px), var(--line) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
  linear-gradient(to top left, transparent calc(50% - 0.5px), var(--line) calc(50% - 0.5px), var(--line) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
  var(--surface); }
.frame-logo .frame-tag { background: var(--surface); }
.logos .frame-logo { width: 12rem; }

/* 8 : wordmark plus affirmé */
.wm-name { letter-spacing: 0.08em; }
.wm-sub { text-transform: uppercase; letter-spacing: 0.14em; font-weight: 500; }
.wordmark { gap: 0.9em; }

/* 10 : infographie 1, nœuds numérotés, ligne continue, barre pleine largeur */
.branch { counter-reset: n; position: relative; }
.branch::before { content: ""; position: absolute; left: 0.95rem; top: 3.2rem; bottom: 1.4rem; width: 2px; background: var(--line); }
.branch::after { content: ""; position: absolute; left: 0.95rem; top: 3.2rem; bottom: 1.4rem; width: 2px; background: var(--signature); transform-origin: top; transform: scaleY(0); transition: transform 1200ms var(--ease); }
.model.is-in .branch::after, .is-in .branch::after { transform: scaleY(1); }
.node { padding: 0.9rem 0 0.9rem 3.25rem; }
.node::before { content: counter(n, decimal-leading-zero); counter-increment: n; width: 2rem; height: 2rem; border-radius: 50%; background: var(--bg); border: 2px solid var(--signature); color: var(--signature-text); font-size: var(--t-etiquette); font-weight: 600; display: grid; place-items: center; top: 0.85rem; z-index: 1; }
.surface .node::before { background: var(--surface); }
.node + .node::after { display: none; }
.model-join { margin-top: 0.5rem; }
.join-node { grid-column: 1 / -1; }
.join-node span { display: block; width: 100%; text-align: center; font-size: var(--t-sous-titre); padding: 0.9em 1em; }
@media (max-width: 52rem) { .join-node span { text-align: center; } }


/* 12 : un témoignage en grand, deux en ligne */
.quote-lead { border-top: 1px solid var(--ink); padding-top: 1.5rem; max-width: 44rem; }
.quote-lead p { line-height: 1.35; font-weight: 500; letter-spacing: -0.01em; }
.quotes-small { margin-top: 2.5rem; }
.quotes-small .quote p { font-size: var(--t-texte); }

/* 13 : la colonne du résultat sur fond léger */
.table .hi { background: var(--surface); color: var(--ink); font-weight: 600; padding-left: 1rem; }
.table thead th:last-child { background: var(--surface); padding-left: 1rem; }
.table td.hi, .table thead th:last-child { padding-right: 1rem; }

/* 14 : menu mobile, contact en bas */
.nav-foot { display: none; }
@media (max-width: 60rem) {
  .nav-foot { display: block; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--ink); font-size: var(--t-petit); color: var(--muted); }
  .nav-foot p + p { margin-top: 0.35rem; }
  .nav-foot .wordmark { margin-top: 1.5rem; display: inline-flex; }
}

/* 15 : pied de page, la phrase d'ouverture */
.footer-brand .tagline { margin-top: 1rem; color: var(--block-fg); font-size: var(--t-texte); max-width: 22rem; line-height: 1.4; }
.footer-brand .tagline .accent { color: var(--signature); }
.footer-brand p { margin-top: 0.75rem; }

/* 16 : parcours en 3 × 2 sur tablette */
@media (min-width: 52.01rem) and (max-width: 64rem) { .steps-6 { grid-template-columns: repeat(3, 1fr); row-gap: 2.5rem; } }

.wm-sub { white-space: nowrap; }
.site-footer .wordmark { flex-wrap: wrap; row-gap: 0.25rem; }


/* ---------- Wordmark : PIGUET. (27 août, demande du fondateur) ---------- */
.wm-dot { color: var(--signature); letter-spacing: 0; }
.wordmark-full { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; }
.wordmark-full .wm-sub { line-height: 1.35; white-space: normal; }
.site-footer .wordmark { flex-wrap: nowrap; }
.nav-foot .wordmark { margin-top: 1.5rem; }

.wordmark-full .wm-sub { white-space: nowrap; }


/* ---------- Mode sombre (27 août). Clair par défaut, choix mémorisé. ---------- */
html[data-theme="dark"] {
  --bg: #161614;
  --surface: #1F1E1C;
  --ink: #F1EFE9;
  --muted: #A6A39B;
  --line: #34332F;
  --signature: #EC583E;
  --signature-text: #F26A4F;
  --block-bg: #242320;
  --block-fg: #F1EFE9;
  --block-muted: #A6A39B;
  --block-signature: #EC583E;
  --block-line: color-mix(in srgb, #F1EFE9 18%, transparent);
  --block-xxx-bg: color-mix(in srgb, #F1EFE9 10%, transparent);
  color-scheme: dark;
}
html[data-theme="dark"] .on-dark, html[data-theme="dark"] .site-footer { border-top: 1px solid var(--line); }
html[data-theme="dark"] .frame-pds { background: var(--surface); color: var(--ink); }

/* le bouton : un soleil en clair, une lune en sombre, trait fin */
.theme-toggle { display: inline-grid; place-items: center; width: 2rem; height: 2rem; margin-left: 1.5rem; padding: 0; background: none; border: 0; cursor: pointer; color: var(--muted); border-radius: 50%; transition: color var(--t-fast) var(--ease); }
.theme-toggle svg { display: block; }
.theme-toggle:hover { color: var(--ink); }
.theme-toggle .icon-moon { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
.header-tools { display: flex; align-items: center; }
@media (max-width: 60rem) { .theme-toggle { margin-left: 0; margin-right: 1rem; } }

@media (max-width: 60rem) { .site-header .header-tools { order: 2; } .site-header .site-nav { order: 3; } }


/* ---------- Modèles : vraies vignettes (27 août) ---------- */
.card-modele .modele-link { display: block; margin-bottom: 1rem; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; background: var(--surface); transition: border-color var(--t-fast) var(--ease); }
.card-modele .modele-link img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.card-modele:hover .modele-link { border-color: var(--ink); }
.card-modele:hover .modele-link img { transform: scale(1.02); }
html[data-theme="dark"] .card-modele .modele-link img { filter: brightness(0.92); }
@media (prefers-reduced-motion: reduce) { .card-modele:hover .modele-link img { transform: none; } }

.card-modele .character { margin-top: 0.35rem; font-size: var(--t-chapo); font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; }

/* Revue du 27 août : champs du formulaire plus proches de leur étiquette */
.form { gap: 1.25rem; }
.form label { margin-bottom: 0.1rem; }
.form input, .form textarea { padding: 0.45rem 0; }


/* ---------- Services : six familles, dix-huit lignes (27 août) ---------- */
.rows-fam li { align-items: flex-start; padding: 0.9rem 0; }
.rows-fam h3 a { text-decoration: none; }
.rows-fam h3 a:hover { color: var(--signature-text); }
.rows-fam .small { margin-top: 0.15rem; }
.rows-fam .arrow { margin-left: auto; align-self: center; }
.rows-fam .num { padding-top: 0.2rem; }
.family { padding-block: clamp(2.5rem, 2rem + 2.5vw, 4.5rem); }
.family .section-head { margin-bottom: clamp(1rem, 2vw, 1.75rem); }
.family .lead { font-size: var(--t-texte); color: var(--muted); max-width: 30rem; }
.svc { border-top: 1px solid var(--ink); }
.svc-row { display: grid; grid-template-columns: 3rem 1fr auto; column-gap: 1rem; align-items: baseline; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.svc-row .num { font-size: var(--t-etiquette); font-weight: 600; color: var(--muted); letter-spacing: 0.08em; }
.svc-main h3 { font-weight: 500; }
.svc-main p { margin-top: 0.15rem; font-size: var(--t-petit); font-weight: 400; }
.svc-side { display: flex; align-items: baseline; gap: 1.25rem; font-size: var(--t-petit); white-space: nowrap; }
.svc-tag { font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.svc-price { font-weight: 600; }
.svc-more { grid-column: 2 / -1; margin-top: 0.35rem; font-size: var(--t-petit); }
.svc-more summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 0.5rem; color: var(--muted); font-weight: 500; }
.svc-more summary::-webkit-details-marker { display: none; }
.svc-more summary::before { content: "+"; display: inline-grid; place-items: center; width: 1rem; height: 1rem; border: 1px solid var(--line); border-radius: 50%; line-height: 1; color: var(--ink); transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.svc-more[open] summary::before { content: "−"; border-color: var(--ink); }
.svc-more summary:hover { color: var(--ink); }
.svc-more summary:hover::before { border-color: var(--signature); }
.svc-more p { margin-top: 0.5rem; color: var(--muted); }
.svc-more[open] p:first-of-type { margin-top: 0.75rem; }
@media (max-width: 36rem) {
  .svc-row { grid-template-columns: 2.25rem 1fr; }
  .svc-side { grid-column: 2; margin-top: 0.35rem; white-space: normal; }
  .svc-more { grid-column: 2; }
}


/* ============================================================
   CHARTE TYPOGRAPHIQUE — 28 août 2026
   Référence : _travail/CHARTE_TYPOGRAPHIQUE.md
   Neuf tailles. Ce bloc fait autorité sur tout ce qui précède.
   Ne s'applique jamais aux sept modèles (src/modeles/), qui ont
   leur propre identité et leur propre CSS.
   ============================================================ */

:root {
  --t-display:    clamp(2.5rem, 1rem + 3.4vw, 4rem);        /* 40 a 64 */
  --t-phrase:     clamp(1.875rem, 1rem + 2.2vw, 2.875rem);  /* 30 a 46 */
  --t-titre:      clamp(1.625rem, 1rem + 1.5vw, 2.25rem);   /* 26 a 36 */
  --t-wordmark:   1.375rem;                                  /* 22 */
  --t-wordmark-l: 1.75rem;                                   /* 28 */
  --t-sous-titre: 1.375rem;                                  /* 22 */
  --t-chapo:      1.25rem;                                   /* 20 */
  --t-texte:      1.125rem;                                  /* 18 */
  --t-petit:      0.9375rem;                                 /* 15 */
  --t-etiquette:  0.75rem;                                   /* 12 */
}

/* 1 · DISPLAY — la declaration de la page */
.hero .display,
.on-dark .display { font-size: var(--t-display); font-weight: 500; line-height: 1.05; letter-spacing: -0.022em; }

/* 2 · PHRASE — la ponctuation dans le flux */
.statement,
.statement.h1,
.statement.h2 { font-size: var(--t-phrase); font-weight: 500; line-height: 1.12; letter-spacing: -0.018em; }

/* 3 · TITRE — l entree d une section */
h2, .h2,
.cta-light h2 { font-size: var(--t-titre); font-weight: 500; line-height: 1.15; letter-spacing: -0.015em; }
.step .num { font-size: var(--t-titre); font-weight: 600; line-height: 1; letter-spacing: -0.03em; color: var(--signature); }
.quote .mark { font-size: var(--t-titre); font-weight: 600; line-height: 0.6; }
.join-node span { font-size: var(--t-titre); font-weight: 600; letter-spacing: -0.02em; }
.figure-num { font-size: var(--t-titre); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }

/* 4 · WORDMARK — le logo */
.wm-name { font-size: var(--t-wordmark); font-weight: 700; letter-spacing: 0.08em; line-height: 1; }
.site-footer .wm-name,
.nav-foot .wm-name { font-size: var(--t-wordmark-l); }

/* 5 · SOUS-TITRE — le titre d un element */
.card h3,
.two-cols h3,
.two-cols ul li,
h2.h3,
.quote-lead p { font-size: var(--t-sous-titre); font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; }
.two-cols ul li { font-weight: 500; }

/* 6a · CHAPO — l introduction, graisse 400 */
.lead, .lead.mt-1, .lead.muted,
.family .lead,
.character { font-size: var(--t-chapo); font-weight: 400; line-height: 1.45; letter-spacing: 0; }
.character { font-weight: 500; }

/* 6b · LIBELLE — le mot qui accompagne un chiffre ou une ligne, graisse 500 */
.svc-main h3,
.step .step-text,
.steps-v .step .step-text,
.node { font-size: var(--t-chapo); font-weight: 500; line-height: 1.25; letter-spacing: -0.005em; }

/* 7 · TEXTE — tout ce qui se lit */
body { font-size: var(--t-texte); line-height: 1.55; }
p, .prose p, .measure p,
.hero .hero-aside p,
.person .name,
.quote p,
.rows h3,
td, .table td,
.skip { font-size: var(--t-texte); }
.btn, button.btn,
.arrow, .cta-light .arrow,
.card .arrow,
.rows-fam h3 a { font-size: var(--t-texte); }
.site-nav a { font-size: var(--t-texte); font-weight: 500; }
.form input, .form textarea { font-size: var(--t-texte); }
.tagline { font-size: var(--t-texte); }
.rows h3 { font-weight: 500; }
.person .name { font-weight: 600; }

/* 8 · PETIT — ce qui accompagne */
.small, .small.muted,
.svc-main p,
.card p.muted,
.svc-price,
.site-footer, .site-footer a, .site-footer p,
.quote footer,
.form label,
.form .error, .form-note, .form-status,
.svc-more, .svc-more p, summary,
.sources,
.person p,
.pds-note,
.ph .frame-note, .person .ph .frame-note, figcaption.frame-note,
.specs,
.card ul.list li,
.step .step-note,
.hero .hero-aside .mt-1 { font-size: var(--t-petit); line-height: 1.45; letter-spacing: 0; }
.svc-price, .form label { font-weight: 600; }

/* 9 · ETIQUETTE — le repere */
.label,
.card .num, .rows .num, .steps-v .step .num, .svc-row .num,
.svc-tag,
.frame .frame-tag, .person .frame .frame-tag,
.ba-tag,
.wm-sub,
.table thead th, .table th, th,
.field dt,
.branch-title,
.tool-cat h3 { font-size: var(--t-etiquette); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.3; }
.card .num, .rows .num, .steps-v .step .num, .svc-row .num,
.field dt { color: var(--muted); }
.person .frame { font-size: var(--t-etiquette); }

/* Couleurs : la regle des 24 px, appliquee */
.wm-dot { color: var(--signature-text); }
.on-dark .accent, .site-footer .accent, .on-dark .wm-dot, .site-footer .wm-dot { color: var(--block-signature); }
.on-dark .muted, .site-footer .muted, .footer-brand p, .wordmark-light .wm-sub { color: var(--block-muted); }
.on-dark .xxx, .site-footer .xxx { color: var(--block-muted); border-bottom-color: var(--block-muted); }

/* Menu mobile : les liens prennent la taille Titre */
@media (max-width: 60rem) {
  .site-nav a { font-size: var(--t-titre); font-weight: 500; letter-spacing: -0.015em; }
  .nav-foot p { font-size: var(--t-petit); }
}

/* La colonne du hero s elargit pour absorber les 18 px (regle 15) */
.hero .lead { max-width: 44rem; }


/* Corrections de specificite — la charte doit gagner sur les couches anciennes.
   Un `.display` hors du hero et hors d un bloc sombre est une phrase forte
   dans le flux : il prend la taille Phrase, pas Display. */
.display { font-size: var(--t-phrase); }
.hero .display, .on-dark .display { font-size: var(--t-display); }
.card-modele .character { font-size: var(--t-chapo); }
.footer-brand .tagline { font-size: var(--t-texte); }
.quotes-small .quote p, .quote p { font-size: var(--t-texte); }
.quote-lead p { font-size: var(--t-sous-titre); }
.footer-brand .tagline .accent,
.site-footer .accent,
.on-dark .accent { color: var(--block-signature); }


/* ---------- Ce que nous vous devons (28 aout) ----------
   Quatre encadres. Une forme que le site n a pas ailleurs : la diversite
   du layout vient de la boite, pas d une icone. */
.pledges { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
.pledge { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 2px; padding: 1.5rem 1.375rem 1.625rem; transition: border-color var(--t-fast) var(--ease); }
.pledge::before { content: ""; position: absolute; top: 1.5rem; left: 1.375rem; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--signature); }
.pledge .label { padding-left: 1rem; margin-bottom: 1.5rem; }
.pledge .label::after { display: none; }
.pledge h3 { margin-bottom: 0.5rem; text-wrap: balance; }
.pledge p { color: var(--muted); }
.pledge:hover { border-color: var(--ink); }
html[data-theme="dark"] .pledge { background: var(--surface); }
@media (max-width: 64rem) { .pledges { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 36rem) { .pledges { grid-template-columns: 1fr; } }

/* Le menu principal est du mobilier, pas du texte : jeton Petit.
   Mesuré le 28 août : apple 12, linear 13, stripe 14, infomaniak 14, pentagram 16.
   Aucun n'est à 18. Le mobile garde sa taille Titre. */
.site-nav a { font-size: var(--t-petit); }
@media (max-width: 60rem) { .site-nav a { font-size: var(--t-titre); } }


/* ---------- Fiche projet, version en ligne (28 aout) ----------
   Pas de client, pas d avant/apres, pas de temoignage : le site parle.
   L image prend toute la largeur, c est elle la preuve. */
.project-live .project-head { margin-bottom: 1.5rem; }
.project-shot { margin: clamp(2rem, 4vw, 3rem) 0 clamp(1.5rem, 3vw, 2.25rem); }
.project-shot a { display: block; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; background: var(--surface); transition: border-color var(--t-fast) var(--ease); }
.project-shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.project-shot a:hover { border-color: var(--ink); }
.project-shot a:hover img { transform: scale(1.01); }
html[data-theme="dark"] .project-shot img { filter: brightness(0.94); }
.project-foot .field { margin-top: 0; }
.project-foot .arrow { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .project-shot a:hover img { transform: none; } }

/* La capture vit dans la colonne de droite, a la place de l avant/apres. */
.project-live .project-shot { margin: 0; }
.project-live .project-shot figcaption { margin-top: 0.6rem; }


/* Etiquette de champ : 10 px avant son contenu, pas 6. */
.field dt { margin-bottom: 0.6rem; }

/* ============================================================
   CHARTE DES ESPACES — 28 août 2026
   Référence : _travail/11_AUDIT_ESPACES.md
   Huit espaces. Ce bloc fait autorité sur tout ce qui précède.
   Ne s'applique jamais aux sept modèles (src/modeles/).
   ============================================================ */

:root {
  --e-1: 0.25rem;   /* 4  micro : entre une puce et son mot */
  --e-2: 0.5rem;    /* 8  serré : deux éléments collés */
  --e-3: 0.75rem;   /* 12 étiquette -> son contenu */
  --e-4: 1rem;      /* 16 entre deux éléments d une liste */
  --e-5: 1.5rem;    /* 24 entre deux paragraphes, entre deux champs */
  --e-6: 2.5rem;    /* 40 titre -> son contenu */
  --e-7: clamp(2.5rem, 2rem + 1.5vw, 4rem);   /* 40 a 64  entre deux blocs */
  --e-8: clamp(4rem, 3rem + 2.5vw, 6rem);     /* 64 a 96  padding de section */
}

/* 8 · SECTION — le rythme de la page */
section, .section, .project, .family { padding-block: var(--e-8); }
.section-tight, .cta-light { padding-block: var(--e-7); }

/* 7 · BLOC — entre deux blocs d une même section */
.section-head { margin-bottom: var(--e-7); }
.espace-bloc { margin-top: var(--e-7); }
.statement, .statement.h1, .statement.h2 { margin-top: var(--e-7); }
.mt-3 { margin-top: var(--e-7); }

/* 6 · TITRE — un titre et le texte qui le suit */
.section-head .lead, .section-head .prose { margin-top: var(--e-3); }
.section-head h2.mt-1, .section-head .mt-1 { margin-top: var(--e-3); }

/* 5 · PARAGRAPHE — le geste le plus répété du site */
.measure > p + p,
.prose > p + p,
.prose p + p,
.legal p + p { margin-top: var(--e-5); }
.field + .field, .project .field:not(:first-child) { margin-top: var(--e-5); }
.mt-2 { margin-top: var(--e-5); }

/* 4 · LISTE — deux éléments d une même liste */
.mt-1 { margin-top: var(--e-4); }
.hero .actions, .actions { margin-top: var(--e-5); }
.hero .hero-text .actions { margin-top: var(--e-5); }
.tool-cat .frame + .frame { margin-top: var(--e-3); }
.person + .person, .people { gap: var(--e-4); }
.quotes-small { margin-top: var(--e-7); }

/* 3 · ÉTIQUETTE — partout, sans exception */
.label { margin-bottom: var(--e-3); }
.section-head .label { margin-bottom: var(--e-3); }
.pledge .label { margin-bottom: var(--e-3); }
.field dt { margin-bottom: var(--e-3); }
.etiquette-colonne { margin-bottom: var(--e-3); }
.branch-title { margin-bottom: var(--e-3); }
.tool-cat h3 { margin-bottom: var(--e-3); padding-bottom: var(--e-3); }
.two-cols h3 { padding-bottom: var(--e-3); }

/* 2 · SERRÉ — un titre d élément et sa description */
.card h3, .card p, .card .num + h3 { margin-top: var(--e-2); }
.card .num { margin-top: 0; }
.svc-main p { margin-top: var(--e-1); }
.rows-fam .small { margin-top: var(--e-1); }
.step .step-text { margin-top: var(--e-3); }
.steps-v .step .step-text { margin-top: var(--e-1); }
.pledge h3 { margin-bottom: var(--e-2); }
.quote footer, .quote p { margin-top: var(--e-4); }
.quote .mark { margin-bottom: var(--e-3); }
.ph .frame-note, .project-shot figcaption { margin-top: var(--e-3); }
.card .ph { margin-bottom: var(--e-4); }
.card .arrow { margin-top: var(--e-4); }
.sources { margin-top: var(--e-4); }
.form-note, .form-status { margin-top: var(--e-4); }
.pds-note { margin-top: var(--e-5); padding-top: var(--e-3); }
.specs { margin-top: var(--e-4); }
.svc-more { margin-top: var(--e-2); }
.svc-more p { margin-top: var(--e-3); }
.contact-direct p + p { margin-top: var(--e-2); }
.footer-brand p { margin-top: var(--e-3); }
.footer-brand .tagline { margin-top: var(--e-4); }
.site-footer li + li, .site-footer address p + p { margin-top: var(--e-1); }
.footer-legal ul { margin-top: var(--e-4); }
.logos { margin-top: var(--e-4); }
.hero .hero-aside p { margin-top: 0; }
.hero .hero-aside .mt-1 { margin-top: var(--e-3); }

/* L étiquette porte seule l espace qui la suit. L élément suivant n en ajoute pas.
   Sans cette règle, deux marges s additionnent et l écart varie de 12 à 54 px. */
.label + *, .field dt + * { margin-top: 0; }

/* Un titre d élément et sa description : 12 px, pas 4.
   Mesure du 31 aout : CFF 8, apple 10, stripe 24, linear 24, nous 4 a 6.
   Notre texte courant fait 18 px, plus haut que la moyenne mesuree :
   12 px est l equivalent proportionnel des 10 px d Apple. */
.card h3, .card p, .card .num + h3 { margin-top: var(--e-3); }
.svc-main p { margin-top: var(--e-3); }
.rows-fam .small { margin-top: var(--e-3); }
.pledge h3 { margin-bottom: var(--e-3); }
.card .num { margin-top: 0; }


/* ============================================================
   OFFRES : CINQ LIGNES — 4 septembre 2026, seconde version
   Référence : _travail/18_CONCEPT_OFFRE.md §13 à §16.
   Le fondateur a refusé les cartes et les boutons. Une offre par ligne,
   pleine largeur, toute la ligne est le lien. Aucun jeton nouveau.
   ============================================================ */
.offres { border-top: 1px solid var(--ink); }
.offre-lien {
  display: grid; grid-template-columns: 3rem 3fr 6fr 13rem 2rem; column-gap: var(--gutter); align-items: baseline;
  padding-block: var(--e-6); border-bottom: 1px solid var(--line); text-decoration: none; color: inherit;
  transition: border-color var(--t-fast) var(--ease);
}
.offre-lien:hover, .offre-lien:focus-visible { border-bottom-color: var(--signature); }
.offre-lien .num { font-size: var(--t-etiquette); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.3; color: var(--muted); }
.offre-nom { font-size: var(--t-titre); font-weight: 500; line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; transition: color var(--t-fast) var(--ease); }
.offre-lien:hover .offre-nom, .offre-lien:focus-visible .offre-nom { color: var(--signature-text); }
.offre-ligne { font-size: var(--t-texte); line-height: 1.55; }
.faits { display: flex; flex-wrap: wrap; column-gap: var(--e-2); margin-top: var(--e-3); }
.faits li { font-size: var(--t-petit); font-weight: 500; line-height: 1.45; letter-spacing: 0; color: var(--muted); }
.faits li:not(:last-child)::after { content: "·"; margin-left: var(--e-2); }
.offre-prix { font-size: var(--t-titre); font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.offre-lien .offre-prix { justify-self: end; text-align: right; white-space: nowrap; }
.offre-prix .devise { font-size: var(--t-petit); font-weight: 600; line-height: 1.45; letter-spacing: 0; color: var(--muted); }
.offre-prix .xxx { font-weight: 600; letter-spacing: 0.06em; }
.offre-prix.offre-prix-texte { font-size: var(--t-texte); font-weight: 500; line-height: 1.55; letter-spacing: 0; white-space: normal; }
.offre-fleche { justify-self: end; font-size: var(--t-texte); font-weight: 600; line-height: 1; transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.offre-lien:hover .offre-fleche, .offre-lien:focus-visible .offre-fleche { transform: translateX(4px); color: var(--signature-text); }
.hero .hero-aside .offre-prix { margin-top: 0; font-size: var(--t-titre); }
.hero .hero-aside .offre-prix-texte { font-size: var(--t-texte); }
.steps-3 { grid-template-columns: repeat(3, 1fr); }
.rows-1 { grid-template-columns: 1fr; }
.rows-1 h3 { font-weight: 500; }
@media (max-width: 64rem) {
  .offre-lien { grid-template-columns: 2.5rem 3fr 4fr auto; }
  .offre-fleche { display: none; }
}
@media (max-width: 52rem) {
  .offre-lien { grid-template-columns: 2.25rem 1fr auto; row-gap: var(--e-3); padding-block: var(--e-5); }
  .offre-nom { grid-column: 2; grid-row: 1; }
  .offre-lien .offre-prix { grid-column: 3; grid-row: 1; }
  .offre-texte { grid-column: 2 / -1; grid-row: 2; }
  .offre-prix.offre-prix-texte { white-space: nowrap; }
  .steps-3 { grid-template-columns: 1fr; padding-top: 0; padding-left: 1.75rem; gap: 1.75rem; }
}
@media (max-width: 36rem) {
  .offre-lien { grid-template-columns: 2.25rem 1fr; }
  .offre-lien .offre-prix { grid-column: 2; grid-row: 3; justify-self: start; text-align: left; }
  .offre-texte { grid-row: 2; }
}

/* La bande sombre de Services : la méthode en trois lignes Display (4 septembre, soir) */
.on-dark .methode-note { margin-top: var(--e-6); max-width: 40rem; color: var(--block-muted); }
.on-dark .methode-note strong { color: var(--block-fg); font-weight: 500; }

/* ---------- Modèles sur téléphone : un diaporama, des flèches (4 septembre, soir) ----------
   Défilement natif, un modèle par écran, aimanté. Sans JS : on glisse au doigt, les flèches n'existent pas. */
.slides-nav { display: none; align-items: center; gap: var(--e-4); margin-top: var(--e-5); }
.slides-nav button { font: inherit; font-size: var(--t-texte); font-weight: 600; line-height: 1; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; background: none; border: 1.5px solid var(--ink); border-radius: 50%; color: var(--ink); cursor: pointer; transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.slides-nav button:hover, .slides-nav button:focus-visible { border-color: var(--signature); color: var(--signature-text); }
.slides-nav button[disabled] { opacity: 0.35; cursor: default; }
.slides-nav .slides-count { font-size: var(--t-etiquette); font-weight: 600; letter-spacing: 0.1em; line-height: 1.3; color: var(--muted); min-width: 4.5rem; text-align: center; }
@media (max-width: 36rem) {
  .cards.slides { display: flex; grid-template-columns: none; gap: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--side)); padding-inline: var(--side); scroll-padding-inline: var(--side); scrollbar-width: none; }
  .cards.slides::-webkit-scrollbar { display: none; }
  .cards.slides > li { flex: 0 0 82vw; scroll-snap-align: start; }
  .js .slides-nav { display: flex; }
}

/* ---------- Accueil : les cinq offres, en compact (4 septembre, soir) ----------
   Le même composant que Services, sans les trois faits, nom et prix en Sous-titre. */
.offres-compact .offre-lien { padding-block: var(--e-5); grid-template-columns: 3rem 3fr 6fr 13rem 2rem; }
.offres-compact .offre-nom { font-size: var(--t-sous-titre); font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; }
.offres-compact .offre-prix { font-size: var(--t-sous-titre); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.offres-compact .offre-prix.offre-prix-texte { font-size: var(--t-texte); font-weight: 500; }
@media (max-width: 64rem) { .offres-compact .offre-lien { grid-template-columns: 2.5rem 3fr 4fr auto; } }
@media (max-width: 52rem) { .offres-compact .offre-lien { grid-template-columns: 2.25rem 1fr auto; } }
@media (max-width: 36rem) { .offres-compact .offre-lien { grid-template-columns: 2.25rem 1fr; } }