/* ============================================================
   atelier.css — PORTÉE sous .preset-atelier (preset « Atelier »).
   Généré : toutes les règles sont préfixées ; variables sur le wrapper.
   ============================================================ */
.preset-atelier { position: relative; display: block; width: 100%; min-height: 100%; }
/* ============================================================
   Dorian Bouchet — atelier.css
   « L'atelier » : style éditorial-suisse, encre & papier.
   L'espace blanc est un composant à part entière.
   MOBILE-FIRST. Interactions : atelier.js
   ============================================================ */
.preset-atelier {
  /* — palette : papier chaud, encre, bleu d'ingénieur — */
  --paper: #f4f2ea;
  --paper-2: #ebe7db;        /* bloc teinté */
  --paper-clear: #ffffff;    /* bas de page : blanc (lavis vertical) */
  --ink: #1a1813;
  --ink-2: #38342b;
  --ink-soft: #75705f;
  --hair: #d6d0bf;           /* filets */
  --hair-soft: #e2ddce;
  --accent: #234c6e;         /* bleu encre */
  --accent-2: #45708f;       /* bleu clair */
  --accent-ink: #0e2a40;
  --paper-rgb: 244, 242, 234;
  --ink-rgb: 26, 24, 19;

  /* — typographie (commutée par le tweak « Typographie ») — */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-text: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --display-weight: 400;
  --display-tracking: -0.012em;

  /* — espace : « Air » est piloté par le tweak Densité — */
  --air: 1;
  --section-pad: calc(clamp(84px, 15vw, 160px) * var(--air));
  --gutter: 22px;
  --max: 1180px;
  --rule: 1px;
  --header-h: 60px;
}

.preset-atelier * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

@media (prefers-reduced-motion: reduce) { }
.preset-atelier {
  background:
    linear-gradient(180deg,
      var(--paper-2) 0%,
      var(--paper) 12%,
      color-mix(in srgb, var(--paper) 46%, var(--paper-clear)) 48%,
      var(--paper-clear) 100%);
  background-attachment: scroll;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.62;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.preset-atelier ::selection { background: color-mix(in srgb, var(--accent) 22%, var(--paper)); color: var(--ink); }

.preset-atelier img { max-width: 100%; display: block; }

.preset-atelier a { color: inherit; text-decoration: none; }

.preset-atelier em { font-style: italic; }


/* fond : voile lumineux très discret, fixe sous le contenu */
.preset-atelier::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 80% at 84% -8%, color-mix(in oklch, var(--accent) 8%, transparent) 0%, transparent 46%),
    radial-gradient(90% 60% at 6% 102%, color-mix(in oklch, var(--accent) 5%, transparent) 0%, transparent 50%);
}

/* grain : voile filmique pré-rendu (PNG, specks sombres + clairs avec alpha propre),
   fixe, PAR-DESSUS le contenu. Se compose normalement sur le papier comme sur l'encre,
   sans dépendre d'un mode de fusion. N'intercepte pas les clics. */
.preset-atelier::after {
  content: ""; position: fixed; inset: 0; z-index: 80; pointer-events: none;
  background-image: url("grain.png");
  background-size: 220px 220px;
  background-repeat: repeat;
  opacity: 0.6;
}


/* ---------- structure ---------- */
.preset-atelier .wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); position: relative; }

.preset-atelier .section { padding-block: var(--section-pad); position: relative; }
/* Beats : les sections « pause » respirent ~30 % de plus que les sections denses */
.preset-atelier .constat,
.preset-atelier .valeur,
.preset-atelier .contact { padding-block: calc(var(--section-pad) * 1.32); }

.preset-atelier .rule { height: var(--rule); background: var(--hair); border: 0; }


/* ---------- libellés mono / index ---------- */
.preset-atelier .eyebrow {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 11px;
}

.preset-atelier .eyebrow .idx { color: var(--accent); }

.preset-atelier .eyebrow .tick { width: 22px; height: 1px; background: var(--accent); display: inline-block; }

.preset-atelier .sec-head { display: flex; flex-direction: column; gap: 26px; }

.preset-atelier .sec-label {
  display: flex; align-items: baseline; gap: 14px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-soft);
  padding-bottom: clamp(30px, 5vw, 52px);
}

.preset-atelier .sec-label .n { color: var(--accent); font-weight: 500; }

.preset-atelier .sec-label .ln { flex: 1; height: 1px; background: var(--hair); align-self: center; }


/* ---------- titres ---------- */
.preset-atelier h1,
.preset-atelier h2,
.preset-atelier h3 { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); line-height: 1.04; text-wrap: balance; }

.preset-atelier .display {
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: clamp(34px, 8.6vw, 60px); line-height: 1.06;
  letter-spacing: var(--display-tracking); text-wrap: balance;
}

.preset-atelier .serif-it { font-family: var(--font-display); font-style: italic; }

.preset-atelier .accent { color: var(--accent); }


/* ---------- liens & boutons ---------- */
.preset-atelier .btn {
  font-family: var(--font-text); font-weight: 600; font-size: 15.5px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 2px;
  cursor: pointer; border: 0; position: relative;
  letter-spacing: 0; transition: transform 0.18s ease, background 0.2s ease, color 0.2s ease;
}

.preset-atelier .btn:active { transform: translateY(1px); }

.preset-atelier .btn--fill { background: var(--ink); color: var(--paper); }

.preset-atelier .btn--fill:hover { background: var(--accent-ink); }

.preset-atelier .btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

.preset-atelier .btn--ghost:hover { background: var(--ink); color: var(--paper); }

.preset-atelier .btn--block { width: 100%; }

.preset-atelier .link-arrow {
  font-family: var(--font-text); font-weight: 600; font-size: 15.5px;
  display: inline-flex; align-items: center; gap: 9px; color: var(--ink);
  padding-bottom: 3px; position: relative;
}

.preset-atelier .link-arrow::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1.5px;
  background: var(--accent); transform: scaleX(1); transform-origin: left; transition: transform 0.3s ease;
}

.preset-atelier .link-arrow .a { transition: transform 0.25s ease; }

.preset-atelier .link-arrow:hover .a { transform: translateX(4px); }


/* ============================================================
   HEADER
   ============================================================ */
.preset-atelier .site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter);
  transition: background 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease;
}

.preset-atelier .site-header.is-scrolled {
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 var(--hair);
}

.preset-atelier .wordmark {
  font-family: var(--font-display); font-size: 19px; font-weight: var(--display-weight);
  letter-spacing: -0.01em; line-height: 1; color: var(--ink);
  display: inline-flex; align-items: baseline; gap: 1px;
}

.preset-atelier .wordmark .dot { color: var(--accent); }

.preset-atelier .header-right { display: flex; align-items: center; gap: 18px; }

.preset-atelier .avail {
  display: none; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-soft);
}

.preset-atelier .avail .pip { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); position: relative; flex: none; }

.preset-atelier .avail .pip::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--accent); animation: pip 2.4s ease-out infinite; }

@keyframes pip { 0% { transform: scale(0.5); opacity: 0.8; } 80%, 100% { transform: scale(1.5); opacity: 0; } }
.preset-atelier .header-cta {
  font-family: var(--font-text); font-weight: 600; font-size: 13.5px;
  min-height: 38px; padding: 0 16px; border-radius: 2px;
  background: var(--ink); color: var(--paper);
  display: inline-flex; align-items: center; transition: background 0.2s ease;
}

.preset-atelier .header-cta:hover { background: var(--accent-ink); }


/* ============================================================
   HERO  (00)
   ============================================================ */
.preset-atelier .hero { padding-top: clamp(56px, 12vh, 104px); padding-bottom: calc(var(--section-pad) * 0.6); min-height: min(820px, 100svh); display: flex; flex-direction: column; justify-content: center; }

.preset-atelier .hero .wrap { display: flex; flex-direction: column; }

.preset-atelier .hero-kicker {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-soft);
  margin-bottom: clamp(40px, 8vw, 76px);
}

.preset-atelier .hero-kicker .sep { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; }

.preset-atelier .hero-tag {
  display: flex; align-items: center; gap: 12px;
  margin-top: clamp(20px, 4.5vw, 30px);
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft);
}

.preset-atelier .hero-tag .sep { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }

.preset-atelier .hero-title {
  font-size: clamp(42px, 10.4vw, 96px); line-height: 1.0; letter-spacing: -0.022em;
  max-width: 16ch;
}

.preset-atelier .hero-title .ln { display: block; }

.preset-atelier .hero-title .resolve { color: var(--accent); font-style: italic; }

.preset-atelier .hero-lede {
  font-family: var(--font-text); font-size: clamp(17px, 4.4vw, 21px);
  line-height: 1.58; color: var(--ink-2); max-width: 38ch; text-wrap: pretty;
  margin-top: clamp(34px, 6vw, 54px);
}

.preset-atelier .hero-lede .hl { color: var(--ink); font-weight: 600; }

.preset-atelier .hero-ctas { display: flex; flex-direction: column; gap: 13px; margin-top: clamp(30px, 6vw, 46px); }

.preset-atelier .hero-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: clamp(46px, 10vw, 80px); padding-top: 18px; border-top: 1px solid var(--hair);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; color: var(--ink-soft);
}

.preset-atelier .hero-meta .r { color: var(--accent); }


/* ============================================================
   01 — LE CONSTAT
   ============================================================ */
.preset-atelier .constat .wrap { display: flex; flex-direction: column; }

.preset-atelier .constat-open {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(30px, 8.4vw, 58px); line-height: 1.08; letter-spacing: -0.014em;
  text-wrap: balance; max-width: 17ch; margin-top: 0;
}

.preset-atelier .constat-body {
  font-family: var(--font-text); font-size: clamp(16.5px, 4.2vw, 19px);
  line-height: 1.66; color: var(--ink-soft); max-width: 40ch; text-wrap: pretty;
  margin-top: clamp(38px, 7vw, 60px);
}

.preset-atelier .constat-body em { color: var(--ink); font-style: italic; }

.preset-atelier .constat-punch {
  font-family: var(--font-display); font-size: clamp(23px, 6vw, 38px);
  line-height: 1.24; text-wrap: balance; max-width: 22ch; margin-top: clamp(44px, 8vw, 68px);
}

.preset-atelier .constat-punch .accent { font-style: italic; }
/* Le constat « flotte » : large vide à gauche sur grand écran */
@media (min-width: 900px) {
  .preset-atelier .constat .wrap { padding-left: clamp(0px, 15vw, 220px); }
}


/* ============================================================
   02 — VOTRE VALEUR (manifeste)
   ============================================================ */
.preset-atelier .valeur { background: color-mix(in srgb, var(--paper-2) 60%, transparent); border-block: 1px solid var(--hair); }

.preset-atelier .valeur .wrap { display: flex; flex-direction: column; gap: clamp(30px, 7vw, 52px); }

.preset-atelier .valeur-lead {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-soft);
}

.preset-atelier .valeur-nots { display: flex; flex-direction: column; gap: 14px; }

.preset-atelier .valeur-nots li {
  list-style: none; display: flex; align-items: center; gap: 16px;
  font-family: var(--font-display); font-size: clamp(22px, 6vw, 36px);
  line-height: 1.18; color: var(--ink-soft);
}

.preset-atelier .valeur-nots li .strike { position: relative; }

.preset-atelier .valeur-nots li .strike::after {
  content: ""; position: absolute; left: -2px; right: -2px; top: 54%; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}

.preset-atelier .valeur-nots li.is-in .strike::after { transform: scaleX(1); }

.preset-atelier .valeur-nots li .x { font-family: var(--font-mono); color: var(--accent); font-size: 0.5em; flex: none; opacity: 0.7; }

.preset-atelier .valeur-claim {
  font-family: var(--font-display); font-size: clamp(34px, 10vw, 76px);
  line-height: 1.0; letter-spacing: -0.02em; text-wrap: balance;
}

.preset-atelier .valeur-claim .accent { font-style: italic; }

.preset-atelier .valeur-rest {
  font-family: var(--font-text); font-size: clamp(18px, 4.8vw, 24px); color: var(--ink-2);
  max-width: 30ch;
}

.preset-atelier .valeur-rest em { font-family: var(--font-display); font-style: italic; color: var(--ink); }


/* ============================================================
   03 — CE QUE JE FAIS  (cas)
   ============================================================ */
.preset-atelier .faire h2 { font-size: clamp(30px, 7.6vw, 56px); line-height: 1.06; max-width: 16ch; }

.preset-atelier .faire h2 .accent { font-style: italic; }

.preset-atelier .faire-intro {
  font-family: var(--font-text); font-size: clamp(16.5px, 4.2vw, 19px); line-height: 1.62;
  color: var(--ink-soft); max-width: 52ch; text-wrap: pretty; margin-top: 22px;
}

.preset-atelier .cases { display: flex; flex-direction: column; margin-top: clamp(42px, 9vw, 72px); }

.preset-atelier .case {
  display: flex; flex-direction: column; gap: 26px;
  padding-block: clamp(34px, 7vw, 52px); border-top: 1px solid var(--hair);
}

.preset-atelier .case:last-of-type { border-bottom: 1px solid var(--hair); }

.preset-atelier .case-head { display: flex; flex-direction: column; gap: 12px; }

.preset-atelier .case-meta { display: flex; align-items: center; gap: 13px; }

.preset-atelier .case-n { font-family: var(--font-mono); font-size: 12px; color: var(--accent); font-weight: 500; }

.preset-atelier .case-sector {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft); padding: 4px 10px; border: 1px solid var(--hair); border-radius: 2px;
}

.preset-atelier .case-title { font-size: clamp(24px, 6.4vw, 36px); line-height: 1.1; }

.preset-atelier .case-line { font-family: var(--font-text); font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); max-width: 44ch; text-wrap: pretty; }

.preset-atelier .case-line .before { color: var(--ink-soft); }

.preset-atelier .case-line .arr { color: var(--accent); margin: 0 6px; font-weight: 600; }

.preset-atelier .case-line .after { color: var(--ink); font-weight: 600; }


/* — vignette : mini-interface, monochrome + accent — */
.preset-atelier .vignette {
  background: color-mix(in srgb, var(--paper) 70%, #fff);
  border: 1px solid var(--hair); border-radius: 4px;
  box-shadow: 0 18px 40px -28px rgba(var(--ink-rgb), 0.4);
  overflow: hidden; font-family: var(--font-text);
}

.preset-atelier .vg-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--hair-soft);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft);
}

.preset-atelier .vg-top .tag { color: var(--accent); font-weight: 500; }

.preset-atelier .vg-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; }


/* devis */
.preset-atelier .vg-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; font-size: 13.5px; color: var(--ink-2); }

.preset-atelier .vg-row .p { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); white-space: nowrap; }

.preset-atelier .vg-row + .vg-row { padding-top: 9px; border-top: 1px dashed var(--hair-soft); }

.preset-atelier .vg-total { display: flex; align-items: baseline; justify-content: space-between; margin-top: 4px; padding-top: 12px; border-top: 1.5px solid var(--ink); }

.preset-atelier .vg-total .lab { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }

.preset-atelier .vg-total .sum { font-family: var(--font-display); font-size: 22px; color: var(--ink); white-space: nowrap; }


/* agenda */
.preset-atelier .vg-week { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }

.preset-atelier .vg-day { display: flex; flex-direction: column; gap: 5px; }

.preset-atelier .vg-day .d { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }

.preset-atelier .vg-ev { height: 22px; border-radius: 2px; background: color-mix(in srgb, var(--accent) 14%, transparent); border-left: 2px solid var(--accent); }

.preset-atelier .vg-ev.t { height: 38px; }

.preset-atelier .vg-ev.lite { background: color-mix(in srgb, var(--ink) 6%, transparent); border-left-color: var(--ink-soft); }


/* relances */
.preset-atelier .vg-rel { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--ink-2); }

.preset-atelier .vg-rel + .vg-rel { padding-top: 9px; border-top: 1px solid var(--hair-soft); }

.preset-atelier .vg-rel .who { color: var(--ink); }

.preset-atelier .vg-rel .amt { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); margin-left: auto; margin-right: 12px; }

.preset-atelier .vg-pill { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 8px; border-radius: 2px; white-space: nowrap; }

.preset-atelier .vg-pill.ok { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-ink); }

.preset-atelier .vg-pill.wait { border: 1px solid var(--hair); color: var(--ink-soft); }


/* cockpit */
.preset-atelier .vg-kpis { display: flex; gap: 18px; align-items: flex-end; flex-wrap: wrap; }

.preset-atelier .vg-kpi { display: flex; flex-direction: column; gap: 3px; }

.preset-atelier .vg-kpi .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }

.preset-atelier .vg-kpi .v { font-family: var(--font-display); font-size: 30px; line-height: 1; color: var(--ink); }

.preset-atelier .vg-kpi .delta { font-family: var(--font-mono); font-size: 11px; color: var(--accent); }

.preset-atelier .vg-spark { margin-top: 4px; width: 100%; height: 46px; }

.preset-atelier .vg-spark .area { fill: color-mix(in srgb, var(--accent) 12%, transparent); }

.preset-atelier .vg-spark .ln { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }

.preset-atelier .faire-close {
  margin-top: clamp(40px, 8vw, 64px);
  font-family: var(--font-display); font-size: clamp(22px, 5.6vw, 34px);
  line-height: 1.28; text-wrap: balance; max-width: 24ch;
}

.preset-atelier .faire-close .accent { font-style: italic; }

.preset-atelier .faire-close .muted { color: var(--ink-soft); }


/* ============================================================
   04 — LA PREUVE
   ============================================================ */
.preset-atelier .preuve { background: var(--ink); color: var(--paper); }

.preset-atelier .preuve .sec-label { color: color-mix(in srgb, var(--paper) 55%, transparent); }

.preset-atelier .preuve .sec-label .n { color: var(--accent-2); }

.preset-atelier .preuve .sec-label .ln { background: rgba(var(--paper-rgb), 0.16); }

.preset-atelier .preuve h2 { font-size: clamp(30px, 7.6vw, 56px); color: var(--paper); max-width: 16ch; }

.preset-atelier .preuve h2 .accent { color: var(--accent-2); font-style: italic; }

.preset-atelier .preuve-intro { font-family: var(--font-text); font-size: clamp(16.5px, 4.2vw, 19px); color: rgba(var(--paper-rgb), 0.62); margin-top: 20px; max-width: 40ch; }

.preset-atelier .avis { display: flex; flex-direction: column; margin-top: clamp(44px, 9vw, 72px); }

.preset-atelier .avis-item {
  display: flex; flex-direction: column; gap: 18px;
  padding-block: clamp(34px, 7vw, 50px); border-top: 1px solid rgba(var(--paper-rgb), 0.16);
}

.preset-atelier .avis-item:last-child { border-bottom: 1px solid rgba(var(--paper-rgb), 0.16); }

.preset-atelier .avis-claim {
  font-family: var(--font-display); font-size: clamp(24px, 6.6vw, 40px); line-height: 1.12;
  letter-spacing: -0.014em; color: var(--paper); text-wrap: balance; max-width: 20ch;
}

.preset-atelier .avis-claim .q { color: var(--accent-2); }

.preset-atelier .avis-text { font-family: var(--font-text); font-size: 16.5px; line-height: 1.66; color: rgba(var(--paper-rgb), 0.78); max-width: 52ch; text-wrap: pretty; }

.preset-atelier .avis-who { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(var(--paper-rgb), 0.55); }

.preset-atelier .avis-who .ava {
  width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 15px; color: var(--paper);
  background: color-mix(in srgb, var(--accent) 70%, var(--ink)); box-shadow: inset 0 0 0 1px rgba(var(--paper-rgb), 0.18);
}

.preset-atelier .avis-who .role { color: rgba(var(--paper-rgb), 0.4); }

.preset-atelier .chiffres { display: grid; grid-template-columns: 1fr; margin-top: clamp(40px, 8vw, 60px); }

.preset-atelier .chiffre { padding-block: 26px; border-top: 1px solid rgba(var(--paper-rgb), 0.16); display: flex; flex-direction: column; gap: 8px; }

.preset-atelier .chiffre:last-child { border-bottom: 1px solid rgba(var(--paper-rgb), 0.16); }

.preset-atelier .chiffre .num { font-family: var(--font-display); font-size: clamp(48px, 14vw, 80px); line-height: 0.92; color: var(--accent-2); letter-spacing: -0.02em; }

.preset-atelier .chiffre .lab { font-family: var(--font-text); font-size: 14.5px; line-height: 1.5; color: rgba(var(--paper-rgb), 0.62); max-width: 34ch; }


/* ============================================================
   05 — EST-CE POUR VOUS ?
   ============================================================ */
.preset-atelier .pour .wrap { display: flex; flex-direction: column; gap: clamp(28px, 6vw, 44px); }

.preset-atelier .pour-stance { display: flex; flex-direction: column; gap: 16px; padding-top: 26px; border-top: 1px solid var(--hair); }

.preset-atelier .pour-stance .tag {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
}

.preset-atelier .pour-stance .tag .mk { font-size: 14px; }

.preset-atelier .pour-yes .tag { color: var(--accent); }

.preset-atelier .pour-no .tag { color: var(--ink-soft); }

.preset-atelier .pour-stance p { font-family: var(--font-display); font-size: clamp(21px, 5.4vw, 32px); line-height: 1.26; text-wrap: balance; }

.preset-atelier .pour-stance p .accent { font-style: italic; }

.preset-atelier .pour-stance .note { font-family: var(--font-text); font-size: 16px; line-height: 1.6; color: var(--ink-soft); max-width: 46ch; }

.preset-atelier .pour-stance .note em { font-family: var(--font-display); font-style: italic; color: var(--ink); }


/* ============================================================
   06 — QUI JE SUIS
   ============================================================ */
.preset-atelier .qui .wrap { display: flex; flex-direction: column; gap: clamp(34px, 7vw, 52px); }

.preset-atelier .qui-photo { position: relative; align-self: flex-start; width: 100%; max-width: 460px; }

.preset-atelier .qui-photo .frame { position: relative; overflow: hidden; background: var(--ink); border-radius: 3px; box-shadow: 0 36px 70px -38px rgba(var(--ink-rgb), 0.6); }

.preset-atelier .qui-photo img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 4.6; object-fit: cover; object-position: 50% 28%; }

.preset-atelier .qui-photo .cap {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-soft);
}

.preset-atelier .qui-photo .cap .r { color: var(--accent); }

.preset-atelier .qui-text { display: flex; flex-direction: column; }

.preset-atelier .qui-text h2 { font-size: clamp(30px, 8vw, 54px); line-height: 1.04; max-width: 14ch; }

.preset-atelier .qui-text h2 .accent { font-style: italic; }

.preset-atelier .qui-text .body { display: flex; flex-direction: column; gap: 18px; margin-top: clamp(24px, 5vw, 36px); }

.preset-atelier .qui-text .body p { font-family: var(--font-text); font-size: 16.5px; line-height: 1.66; color: var(--ink-2); text-wrap: pretty; max-width: 50ch; }

.preset-atelier .qui-text .body p strong { font-weight: 600; color: var(--ink); }

.preset-atelier .qui-text .body p em { font-family: var(--font-display); font-style: italic; }

.preset-atelier .qui-sign {
  display: flex; align-items: center; gap: 14px; margin-top: clamp(26px, 5vw, 38px);
  padding-top: 22px; border-top: 1px solid var(--hair);
}

.preset-atelier .qui-sign .nm { font-family: var(--font-display); font-size: 22px; }

.preset-atelier .qui-sign .ttl { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }


/* ============================================================
   07 — PARLONS-EN
   ============================================================ */
.preset-atelier .contact { text-align: center; }

.preset-atelier .contact .wrap { display: flex; flex-direction: column; align-items: center; gap: clamp(28px, 4vw, 40px); }

.preset-atelier .contact .eyebrow { color: var(--ink-soft); }

.preset-atelier .contact h2 { font-size: clamp(38px, 11vw, 88px); line-height: 1.0; letter-spacing: -0.02em; max-width: 14ch; }

.preset-atelier .contact h2 .accent { font-style: italic; }

.preset-atelier .contact-lede { font-family: var(--font-text); font-size: clamp(17px, 4.4vw, 20px); line-height: 1.58; color: var(--ink-2); max-width: 44ch; text-wrap: pretty; }

.preset-atelier .contact .btn { margin-top: 8px; }

.preset-atelier .contact-note { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-soft); }


/* ============================================================
   FAQ
   ============================================================ */
.preset-atelier .faq h2 { font-size: clamp(28px, 7vw, 48px); }

.preset-atelier .faq-list { margin-top: clamp(34px, 7vw, 54px); border-top: 1px solid var(--hair); }

.preset-atelier .faq-item { border-bottom: 1px solid var(--hair); }

.preset-atelier .faq-item summary {
  list-style: none; cursor: pointer; padding: 24px 40px 24px 0; position: relative;
  font-family: var(--font-display); font-size: clamp(19px, 5vw, 26px); line-height: 1.22; color: var(--ink);
}

.preset-atelier .faq-item summary::-webkit-details-marker { display: none; }

.preset-atelier .faq-item summary::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 13px; height: 13px;
  background:
    linear-gradient(var(--accent), var(--accent)) center/13px 1.5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center/1.5px 13px no-repeat;
  transform: translateY(-50%) rotate(0deg); transition: transform 0.3s ease;
}

.preset-atelier .faq-item[open] summary::after { transform: translateY(-50%) rotate(135deg); }

.preset-atelier .faq-item .ans { padding: 0 0 26px; max-width: 52ch; }

.preset-atelier .faq-item .ans p { font-family: var(--font-text); font-size: 16.5px; line-height: 1.62; color: var(--ink-soft); }

.preset-atelier .faq-item .ans .flag { display: inline-block; margin-top: 10px; font-family: var(--font-mono); font-size: 11px; color: var(--accent); }


/* ============================================================
   FOOTER
   ============================================================ */
.preset-atelier .footer { padding-block: clamp(48px, 9vw, 80px); border-top: 1px solid var(--hair); }

.preset-atelier .footer .wrap { display: flex; flex-direction: column; gap: 28px; }

.preset-atelier .footer .fm { font-family: var(--font-display); font-size: 30px; }

.preset-atelier .footer .fm .dot { color: var(--accent); }

.preset-atelier .footer-links { display: flex; flex-direction: column; gap: 10px; }

.preset-atelier .footer-links a,
.preset-atelier .footer-ph { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-soft); }

.preset-atelier .footer-links a:hover { color: var(--accent); }

.preset-atelier .footer .legal { font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); }


/* ============================================================
   CTA collante mobile
   ============================================================ */
.preset-atelier .sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--hair);
  transform: translateY(120%); transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}

.preset-atelier .sticky-cta.show { transform: translateY(0); }

.preset-atelier .sticky-cta .btn { width: 100%; }


/* ============================================================
   REVEALS
   ============================================================ */
.preset-atelier [data-arv] { opacity: 0; transform: translateY(22px); }

.preset-atelier [data-arv].is-in { opacity: 1; transform: none; transition: opacity 0.7s ease, transform 0.85s cubic-bezier(0.16,1,0.3,1); }

.preset-atelier [data-arv][data-arv-d="1"].is-in { transition-delay: 0.08s; }

.preset-atelier [data-arv][data-arv-d="2"].is-in { transition-delay: 0.16s; }

.preset-atelier [data-arv][data-arv-d="3"].is-in { transition-delay: 0.24s; }


@media (prefers-reduced-motion: reduce) {
.preset-atelier [data-arv] { opacity: 1 !important; transform: none !important; }

.preset-atelier .valeur-nots li .strike::after { transition: none; }

.preset-atelier .avail .pip::after { animation: none; }

}
body[data-motion="reduit"] .preset-atelier [data-arv] { opacity: 1 !important; transform: none !important; transition: none !important; }

body[data-motion="reduit"] .preset-atelier .avail .pip::after { animation: none; }


/* ============================================================
   RESPONSIVE — l'espace s'ouvre
   ============================================================ */
@media (min-width: 720px) {
  .preset-atelier { --gutter: 60px; }
  .preset-atelier .avail { display: inline-flex; }
  .preset-atelier .hero-ctas { flex-direction: row; }
  .preset-atelier .hero-ctas .btn { min-width: 220px; flex: none; }

  .preset-atelier .valeur .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 72px); align-items: start; }
  .preset-atelier .valeur-top { grid-column: 1 / -1; }
  .preset-atelier .valeur-claim { align-self: end; }

  .preset-atelier .case { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 60px); align-items: center; }
  .preset-atelier .vignette { max-width: 460px; }

  .preset-atelier .pour .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 64px); }

  .preset-atelier .qui .wrap { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(44px, 6vw, 80px); align-items: start; }

  .preset-atelier .chiffres { grid-template-columns: repeat(3, 1fr); column-gap: clamp(24px, 4vw, 48px); }
  .preset-atelier .chiffre { border-top: 1px solid rgba(var(--paper-rgb), 0.16); }

  .preset-atelier .footer .wrap { display: grid; grid-template-columns: 1.2fr 1fr 1fr auto; gap: 28px; align-items: start; }
  .preset-atelier .footer-links { flex-direction: column; }

  .preset-atelier .sticky-cta { display: none; }
}


@media (min-width: 1040px) {
.preset-atelier .hero-title { font-size: clamp(72px, 7.6vw, 100px); }

}


/* ============================================================
   BANDEAU DE CONFIANCE (sous le hero)
   ============================================================ */
.preset-atelier .trust-band { border-block: 1px solid var(--hair); background: color-mix(in srgb, var(--paper-2) 55%, transparent); }
.preset-atelier .trust-band .wrap { display: flex; flex-direction: column; }
.preset-atelier .trust-item { display: flex; flex-direction: column; gap: 6px; padding-block: clamp(22px, 6vw, 30px); border-top: 1px solid var(--hair-soft); font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.04em; color: var(--ink-soft); }
.preset-atelier .trust-item:first-child { border-top: 0; }
.preset-atelier .trust-item b { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(36px, 12vw, 54px); line-height: 0.98; color: var(--ink); letter-spacing: -0.02em; white-space: nowrap; }
.preset-atelier .trust-item .ar { color: var(--accent); }
.preset-atelier .trust-item.quote { font-family: var(--font-display); font-style: italic; font-size: clamp(23px, 6.6vw, 30px); line-height: 1.16; color: var(--ink); letter-spacing: 0; }
@media (min-width: 720px) {
  .preset-atelier .trust-band .wrap { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 40px; }
  .preset-atelier .trust-item { border-top: 0; padding-block: clamp(28px, 4vw, 40px); flex: 1; }
  .preset-atelier .trust-item b { font-size: clamp(34px, 3.4vw, 46px); }
}

/* ============================================================
   HERO — variante « Nuée » : un seul corps de texte, répété.
   La phrase ne ressort que par la COULEUR, jamais par la taille.
   ============================================================ */
.preset-atelier .hero-nuee { display: none; }
.preset-atelier[data-ahero="nuee"] .hero .hero-standard { display: none; }
.preset-atelier[data-ahero="nuee"] .hero-nuee { display: block; }
.preset-atelier[data-ahero="nuee"] .hero { position: relative; overflow: hidden; min-height: 100svh; padding: 0; }

.preset-atelier .nuee-field {
  position: absolute; inset: 0; margin: 0;
  padding: calc(var(--header-h) + 40px) clamp(18px, 5vw, 64px) clamp(104px, 20vh, 156px);
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: clamp(40px, 12vw, 60px); line-height: 1.16; letter-spacing: -0.012em;
  color: color-mix(in srgb, var(--ink) 19%, var(--paper));
  text-align: justify; word-spacing: 0.03em; -webkit-hyphens: none; hyphens: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 15%, #000 85%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 15%, #000 85%, transparent 100%);
}

/* — deux variantes de densité du champ « Nuée » — */
.preset-atelier .nuee-dense { font-size: clamp(26px, 6.1vw, 46px); line-height: 1.18; letter-spacing: -0.008em; }
.preset-atelier .nuee-aere  { font-size: clamp(34px, 10vw, 50px); line-height: 1.18; letter-spacing: -0.012em; }
.preset-atelier[data-nuee="aere"] .nuee-dense { display: none; }
.preset-atelier[data-nuee="dense"] .nuee-aere { display: none; }

/* mêmes corps, taille identique — seule la couleur distingue */
.preset-atelier .nuee-ask { color: var(--ink); }
.preset-atelier .nuee-pop { color: var(--accent); font-style: normal; }

/* Au chargement : tout est gris, puis les mots « vivants » s'encrent — mot par mot. */
.preset-atelier .nuee-word { display: inline; will-change: filter, color; }

/* « Je m'occupe du reste. » — premium : aucune décoration. La promesse ne ressort
   que par la COULEUR d'accent, posée après un silence. */

@media (prefers-reduced-motion: no-preference) {
  .preset-atelier[data-ahero="nuee"] .nuee-anim .nuee-ask,
  .preset-atelier[data-ahero="nuee"] .nuee-anim .nuee-pop {
    color: color-mix(in srgb, var(--ink) 19%, var(--paper));
  }
  .preset-atelier[data-ahero="nuee"] .nuee-anim .nuee-ask .nuee-word {
    animation: nuee-word-ink 0.62s cubic-bezier(0.22,1,0.36,1) both;
  }
  .preset-atelier[data-ahero="nuee"] .nuee-anim .nuee-pop .nuee-word {
    animation: nuee-word-red 0.8s cubic-bezier(0.22,1,0.36,1) both;
  }
}

/* Chaque mot émerge du bruit gris : focus-pull (flou → net) pendant l'encrage. */
@keyframes nuee-word-ink {
  0%   { color: color-mix(in srgb, var(--ink) 19%, var(--paper)); filter: blur(0); }
  24%  { filter: blur(2.6px); }
  100% { color: var(--ink); filter: blur(0); }
}
/* La chute « Je m'occupe du reste. » — même geste épuré que le reste,
   mais résolue dans l'accent : la couleur seule signe la promesse. */
@keyframes nuee-word-red {
  0%   { color: color-mix(in srgb, var(--ink) 19%, var(--paper)); filter: blur(0); }
  24%  { filter: blur(2.6px); }
  100% { color: var(--accent); filter: blur(0); }
}

.preset-atelier .nuee-cta {
  position: absolute; z-index: 3; left: 50%; bottom: clamp(28px, 6vh, 60px); transform: translateX(-50%);
  width: min(360px, calc(100% - 36px));
}

/* Le bouton n'apparaît qu'une fois les lettres « encrées » — révélation douce. */
@media (prefers-reduced-motion: no-preference) {
  .preset-atelier[data-ahero="nuee"] .nuee-cta.cta-reveal {
    animation: nuee-cta-in 0.72s cubic-bezier(0.22,1,0.36,1) var(--cta-delay, 3.2s) both;
  }
}
@keyframes nuee-cta-in {
  from { opacity: 0; transform: translate(-50%, 18px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}