@charset "UTF-8";
/* Yelloo, project management : maquette B, « le coût d'une décision ».
   Magazine d'architecture en clair. Une seule famille, Archivo variable, poussée aux
   extrêmes de ses axes : large et maigre pour la voix, étroit et noir pour l'accent.
   Le jaune Yelloo est la jauge du coût d'un changement, et rien d'autre. */

@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;
  --paper: #f2efe7;     /* papier couché chaud */
  --paper-2: #e7e2d6;
  --ink: #121212;       /* 17:1 sur papier */
  --ink-2: #45443f;     /* 8,6:1 */
  --ink-3: #64625b;     /* 5,4:1 */
  --rule: #121212;
  --hair: rgba(18, 18, 18, .18);
  --y: #e9df36;         /* jaune Yelloo, commun avec le site énergie ; encre dessus 14:1 */
  --y-soft: #f5efa6;
  /* Jaune vers vert : jaune = le projet qui démarre, vert = le bâtiment livré qui tient ses promesses.
     Rampe oklch du jaune Yelloo au vert, un cran par phase. Toujours en aplat sous l'encre (8,5:1 au minimum),
     jamais en texte sur le papier : pour du texte vert sur clair, --g-ink. */
  --g: #8cff70;         /* vert d'aboutissement = vert Loxone (valeur à confirmer) ; encre dessus 8,5:1 */
  --g-ink: #2f6a1f;     /* vert assombri pour le texte sur papier, 5,7:1 (5,1:1 sur papier-2) */
  --ph1: #e9df36; --ph2: #d2e744; --ph3: #baef53; --ph4: #a3f761; --ph5: #8cff70; /* vert LOXONE depuis la charte d'octobre 2026 */
  --night: #121212;
  --night-ink: #f2efe7;
  --night-2: #a9a69c;   /* 7,9:1 sur nuit */
  --font: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --max: 1520px;
  --pad: clamp(1rem, 4.2vw, 4rem);
  --gut: max(var(--pad), calc((100% - var(--max)) / 2));
  --sy: clamp(4.5rem, 11vw, 10rem);
  --ease: cubic-bezier(.16, .84, .24, 1);
  --mast: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--mast) + 1.5rem); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font); font-size: clamp(1.02rem, .97rem + .22vw, 1.14rem); line-height: 1.58; font-weight: 400;
  font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
p { margin: 0 0 1em; max-width: 64ch; }
h1, h2, h3 { margin: 0; font-weight: 300; font-stretch: 112%; letter-spacing: -.035em; line-height: .98; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 1.2rem + 6.6vw, 8.6rem); }
h2 { font-size: clamp(2rem, 1.1rem + 3.9vw, 5.4rem); }
h3 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem); letter-spacing: -.02em; line-height: 1.1; font-stretch: 105%; font-weight: 400; }
.b { font-weight: 800; font-stretch: 62%; letter-spacing: -.01em; }
.kick { display: block; margin: 0 0 1.1rem; font-size: .76rem; line-height: 1.3; font-weight: 650; font-stretch: 72%; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); max-width: none; }
.chapo { font-size: clamp(1.18rem, 1rem + .7vw, 1.6rem); line-height: 1.38; font-weight: 400; font-stretch: 96%; letter-spacing: -.01em; max-width: 34ch; }
.small { font-size: .88rem; color: var(--ink-2); }
.hl, .y { background: linear-gradient(transparent 12%, var(--y) 12%, var(--y) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .08em; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--ink); color: var(--paper); padding: .7rem 1rem; }
.skip:focus { top: 1rem; }
.hp { position: absolute; left: -9999px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 7px var(--y); }

/* boutons et liens */
.btn { display: inline-flex; align-items: center; gap: .8rem; min-height: 52px; padding: .8rem 1.4rem; border: 2px solid var(--ink); background: var(--ink); color: var(--paper);
  font: inherit; font-weight: 650; font-stretch: 85%; font-size: 1rem; letter-spacing: .01em; text-decoration: none; cursor: pointer; transition: background .25s, color .25s; }
.btn:hover { background: var(--y); color: var(--ink); }
.btn--y { background: var(--y); color: var(--ink); border-color: var(--ink); }
.btn--y:hover { background: var(--ink); color: var(--y); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn[disabled] { opacity: .6; cursor: wait; }
.arr { width: 1.25em; height: 1.25em; flex: none; transition: transform .3s var(--ease); }
a:hover .arr, button:hover .arr { transform: translateX(4px); }
.lnk { display: inline-block; background: none; border: 0; padding: 0 0 .15rem; font: inherit; font-weight: 600; font-stretch: 90%; color: inherit; cursor: pointer;
  text-decoration: none; background-image: linear-gradient(var(--ink), var(--ink)); background-size: 100% 2px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .3s var(--ease); }
.lnk:hover { background-image: linear-gradient(var(--y), var(--y)); background-size: 100% 45%; }

/* ---------------- en-tête ---------------- */
.mast { position: sticky; top: 0; z-index: 50; background: rgba(242, 239, 231, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); view-transition-name: mast; }
.mast__in { display: flex; align-items: center; gap: 1.5rem; height: var(--mast); padding-inline: var(--gut); }
.logo { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; }
.logo__w { font-weight: 800; font-stretch: 62%; font-size: 1.9rem; letter-spacing: -.02em; line-height: 1; position: relative; padding-right: .55rem; }
.logo__w::after { content: ''; position: absolute; right: 0; bottom: .3rem; width: .38rem; height: .38rem; background: var(--y); outline: 1px solid var(--ink); }
.logo__t { font-size: .62rem; line-height: 1.15; font-weight: 650; font-stretch: 72%; letter-spacing: .1em; text-transform: uppercase; border-left: 1px solid var(--ink); padding-left: .7rem; }
.nav ul { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.nav a { font-size: .82rem; font-weight: 600; font-stretch: 80%; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; padding: .4rem 0; background-image: linear-gradient(var(--y), var(--y)); background-size: 0 6px; background-position: 0 85%; background-repeat: no-repeat; transition: background-size .3s var(--ease); }
.nav a:hover, .nav a[aria-current] { background-size: 100% 6px; }
.mast__folio { margin: 0; font-size: .72rem; font-weight: 500; font-stretch: 80%; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); border-left: 1px solid var(--hair); padding-left: 1.2rem; white-space: nowrap; display: none; }
.mast__cta { font-size: .82rem; font-weight: 650; font-stretch: 80%; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; background: var(--ink); color: var(--paper); padding: .62rem 1rem; }
.mast__cta:hover { background: var(--y); color: var(--ink); }
.burger { display: none; align-items: center; gap: .6rem; min-height: 44px; padding: 0 .2rem; background: none; border: 0; font: inherit; font-weight: 650; font-stretch: 80%; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); cursor: pointer; }
.burger span { width: 22px; height: 10px; border-block: 2px solid var(--ink); transition: transform .3s var(--ease); }
.burger[aria-expanded="true"] span { transform: scaleY(.2); }
.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--y); transform-origin: 0 50%; transform: scaleX(var(--read, 0)); }
@supports (animation-timeline: scroll()) {
  .progress { animation: read linear both; animation-timeline: scroll(root); }
  @keyframes read { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
.menu { position: fixed; inset: var(--mast) 0 0 0; z-index: 49; background: var(--paper); padding: 1.5rem var(--pad) 2rem; overflow-y: auto; display: flex; flex-direction: column; gap: 2rem; }
.menu[hidden] { display: none; }
.menu ol { list-style: none; margin: 0; padding: 0; }
.menu li a { display: flex; align-items: baseline; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--ink); text-decoration: none; font-weight: 800; font-stretch: 62%; font-size: clamp(2.4rem, 11vw, 4rem); line-height: 1; letter-spacing: -.01em; }
.menu li a span { font-size: .8rem; font-weight: 600; font-stretch: 75%; letter-spacing: .1em; color: var(--ink-2); width: 1.6rem; }
.menu li a[aria-current] { background: linear-gradient(transparent 55%, var(--y) 55%); }
.menu__cta { align-self: flex-start; }
.menu__cta { display: inline-flex; align-items: center; gap: .7rem; background: var(--y); border: 2px solid var(--ink); padding: .9rem 1.2rem; font-weight: 650; text-decoration: none; }
@media (max-width: 1023px) { .nav, .mast__cta { display: none; } .burger { display: inline-flex; } }
@media (min-width: 1280px) { .mast__folio { display: block; } }

.crumbs { padding: 1.4rem var(--gut) 0; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .3rem .6rem; list-style: none; margin: 0; padding: 0; font-size: .76rem; font-weight: 600; font-stretch: 75%; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); }
.crumbs li + li::before { content: '/'; margin-right: .6rem; color: var(--ink-3); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* ---------------- mise en page commune ---------------- */
main > section, article > section, article > header, .pager { padding-inline: var(--gut); }
.ph { padding-top: clamp(2.5rem, 7vw, 6.5rem); padding-bottom: clamp(3rem, 7vw, 6rem); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(.8rem, 2vw, 2rem); border-bottom: 1px solid var(--ink); }
.ph > * { grid-column: 1 / -1; }
.ph h1 { grid-column: 1 / span 11; }
.ph .chapo { margin-top: clamp(1.6rem, 3vw, 3rem); }
@media (min-width: 900px) { .ph .chapo { grid-column: 7 / -1; } }
.ph--tight { padding-bottom: 2.5rem; }
.split { display: grid; gap: 1.5rem clamp(1rem, 4vw, 4rem); padding-block: var(--sy); border-top: 1px solid var(--ink); }
@media (min-width: 900px) { .split { grid-template-columns: 5fr 7fr; } }
.split h2 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.8rem); }
.prose p { font-size: 1.1em; }
.cols { columns: 1; column-gap: clamp(1.5rem, 3vw, 3rem); }
.cols p { break-inside: avoid; max-width: none; }
@media (min-width: 900px) { .cols { columns: 2; } }
.drop::first-letter { float: left; font-weight: 800; font-stretch: 62%; font-size: 4.6em; line-height: .78; margin: .06em .1em 0 0; padding: .02em .08em 0; background: var(--y); }

/* ---------------- accueil : couverture ---------------- */
.cover { position: relative; overflow: clip; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(.8rem, 2vw, 2rem); padding-top: clamp(1rem, 3vw, 2rem); padding-bottom: clamp(3rem, 6vw, 6rem); border-bottom: 1px solid var(--ink); min-height: calc(100svh - var(--mast)); align-content: space-between; }
.cover > * { grid-column: 1 / -1; position: relative; z-index: 1; }
.cover__issue { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; justify-content: space-between; border-bottom: 1px solid var(--ink); padding-bottom: .8rem; }
.cover__issue span:nth-child(n+2) { display: none; }
@media (min-width: 700px) { .cover__issue span:nth-child(n+2) { display: inline; } }
.cover__h { font-size: clamp(2.9rem, .4rem + 7.6vw, 10rem); line-height: .9; letter-spacing: -.045em; font-weight: 250; font-stretch: 118%; margin-top: clamp(2rem, 4.5vw, 4rem); }
.cover__h > span { display: block; }
.cover__h .l2 { font-weight: 800; font-stretch: 62%; letter-spacing: -.015em; font-size: 1.22em; line-height: .88; }
.cover__h .l3 { font-size: .52em; letter-spacing: -.03em; margin-top: .35em; max-width: 18ch; font-weight: 300; }
.cover__side { margin-top: clamp(2rem, 4vw, 3.5rem); }
.cover__side .chapo { max-width: 30ch; }
.cover__act { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2rem; margin-top: 1.6rem; }
.cover__toc { margin-top: clamp(2.5rem, 5vw, 4rem); }
.cover__toc ol { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.cover__toc a { display: grid; grid-template-columns: 3.4rem 1fr; column-gap: 1rem; align-items: baseline; padding: .7rem 0; border-bottom: 1px solid var(--ink); text-decoration: none; transition: background .25s, padding .3s var(--ease); }
.cover__toc a:hover { background: var(--y); padding-left: .6rem; }
.cover__n { font-weight: 800; font-stretch: 62%; font-size: 2rem; line-height: 1; grid-row: span 2; }
.cover__name { font-weight: 600; font-stretch: 95%; font-size: 1.1rem; line-height: 1.2; }
.cover__when { font-size: .85rem; color: var(--ink-2); }
.cover__big { position: absolute !important; z-index: 0 !important; right: -.06em; top: 50%; transform: translateY(-50%); font-weight: 800; font-stretch: 62%; font-size: clamp(22rem, 62vw, 64rem); line-height: .7; color: var(--y); letter-spacing: -.05em; pointer-events: none; user-select: none; grid-column: auto !important; }
@media (min-width: 1000px) {
  .cover__side { grid-column: 1 / span 5; }
  .cover__toc { grid-column: 7 / -1; align-self: end; margin-top: 0; }
  .cover__side, .cover__toc { grid-row: 3; }
  .cover__big { font-size: min(66vw, 66rem); right: -1vw; top: 50%; }
}
@media (max-width: 699px) { .cover__big { top: 3.2rem; transform: none; right: -.12em; font-size: 78vw; } @keyframes big { from { opacity: 0; transform: translateY(-12%); } } }

/* ---------------- accueil : le coût d'une décision ---------------- */
.cost { padding-block: var(--sy) clamp(3rem, 6vw, 5rem); border-bottom: 1px solid var(--ink); }
.cost__head { display: grid; gap: 1.5rem clamp(1rem, 4vw, 4rem); margin-bottom: clamp(2rem, 6vw, 5rem); }
@media (min-width: 900px) { .cost__head { grid-template-columns: 7fr 5fr; align-items: end; } .cost__head .kick { grid-column: 1 / -1; margin: 0; } }
.cost__head h2 { font-size: clamp(2.4rem, 1rem + 6vw, 7.6rem); }
.cost__body { display: grid; gap: 0 clamp(1rem, 4vw, 5rem); }
.cost__steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.cost__step { padding: 2.2rem 0 2.6rem; border-top: 1px solid var(--ink); }
.cost__step h3 { font-size: clamp(1.8rem, 1rem + 3vw, 3.4rem); font-weight: 300; font-stretch: 110%; letter-spacing: -.035em; line-height: 1.02; margin-bottom: 1.2rem; }
.cost__step h3 .hl { font-weight: 800; font-stretch: 62%; letter-spacing: -.01em; }
.cost__step > p:not(.kick) { max-width: 44ch; }
.cost__mini { height: 18px; border: 1.5px solid var(--ink); margin: 1.4rem 0 1.2rem; max-width: 36rem; }
.cost__mini span { display: block; height: 100%; width: var(--lvl); background: var(--y); border-right: 1.5px solid var(--ink); transform-origin: 0 50%; }
.js .cost__step:not(.is-in) .cost__mini span { transform: scaleX(0); }
.cost__mini span { transition: transform 1.1s var(--ease) .1s; }
.cost__mission { font-size: .9rem; color: var(--ink-2); }
.cost__stage { display: none; }
.cost__note { margin: 2.5rem 0 0; font-size: .82rem; color: var(--ink-2); max-width: 60ch; }
@media (min-width: 1000px) {
  .cost__body { grid-template-columns: 6fr 5fr; }
  .cost__step { min-height: 78vh; padding-top: 3rem; display: flex; flex-direction: column; justify-content: flex-start; }
  .js .cost__mini { display: none; }
  .js .cost__step { opacity: .65; transition: opacity .5s; }
  .js .cost__step.is-on { opacity: 1; }
  .js .cost__stage { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; gap: 1.5rem 2.5rem; position: sticky; top: calc(var(--mast) + 4vh); height: calc(92vh - var(--mast)); padding: 2rem 0; }
  .cost__num { grid-column: 1 / -1; font-weight: 800; font-stretch: 62%; font-size: clamp(7rem, 12vw, 13rem); line-height: .75; letter-spacing: -.04em; overflow: hidden; height: .78em; }
  .cost__num span { display: block; }
  .cost__gauge { position: relative; width: clamp(4rem, 5.5vw, 6rem); border: 2px solid var(--ink); background: repeating-linear-gradient(0deg, transparent 0 9px, var(--hair) 9px 10px); }
  .cost__fill { position: absolute; left: 0; right: 0; bottom: 0; height: var(--h, 7%); background: var(--y); border-top: 2px solid var(--ink); transition: height .45s var(--ease); }
  .cost__ticks { position: absolute; left: 100%; top: 0; bottom: 0; list-style: none; margin: 0; padding: 0; width: 12rem; }
  .cost__ticks li { position: absolute; left: 0; transform: translateY(50%); display: flex; align-items: center; gap: .5rem; font-size: .74rem; font-weight: 600; font-stretch: 75%; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; transition: color .3s; }
  .cost__ticks li::before { content: ''; width: 1rem; height: 2px; background: currentColor; }
  .cost__ticks li[data-t="1"] { bottom: 7%; } .cost__ticks li[data-t="2"] { bottom: 19%; } .cost__ticks li[data-t="3"] { bottom: 41%; } .cost__ticks li[data-t="4"] { bottom: 68%; } .cost__ticks li[data-t="5"] { bottom: 100%; }
  .cost__ticks li.on { color: var(--ink); }
  .cost__word { align-self: end; margin: 0; padding-left: 8.5rem; }
  .cost__word strong { display: block; font-weight: 800; font-stretch: 62%; font-size: clamp(2.6rem, 4.4vw, 4.8rem); line-height: .92; letter-spacing: -.015em; max-width: 9ch; }
}

/* ---------------- accueil : distribution ---------------- */
.cast { padding-block: var(--sy); display: grid; gap: 2rem clamp(1rem, 4vw, 5rem); }
@media (min-width: 1000px) { .cast { grid-template-columns: 5fr 7fr; } .cast__h { position: sticky; top: calc(var(--mast) + 2rem); align-self: start; } }
.cast__h h2 { font-size: clamp(2rem, 1rem + 3.2vw, 4.4rem); margin-bottom: 1.6rem; }
.cast__list { margin: 0; border-top: 2px solid var(--ink); }
.cast__list > div { display: grid; gap: .3rem 2rem; padding: 1.4rem 0; border-bottom: 1px solid var(--ink); }
@media (min-width: 640px) { .cast__list > div { grid-template-columns: minmax(12rem, 1fr) 1.3fr; align-items: baseline; } }
.cast__list dt { font-weight: 300; font-stretch: 112%; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem); letter-spacing: -.03em; line-height: 1.05; }
.cast__list dd { margin: 0; color: var(--ink-2); }
.cast__list .you { background: var(--y); margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); border-bottom: 2px solid var(--ink); }
.cast__list .you dt { font-weight: 800; font-stretch: 62%; letter-spacing: -.01em; }
.cast__list .you dd { color: var(--ink); font-weight: 500; }

/* ---------------- accueil : engagement ---------------- */
.pledge { background: var(--y); padding-block: var(--sy); border-block: 2px solid var(--ink); position: relative; overflow: clip; }
.pledge .kick { color: var(--ink); }
.pledge h2 { font-size: clamp(1.8rem, 1rem + 2.4vw, 3.2rem); font-weight: 300; }
.pledge h2 > span { display: block; }
.pledge__big { font-weight: 850; font-stretch: 62%; font-size: clamp(4.4rem, 1rem + 15vw, 18rem); line-height: .82; letter-spacing: -.03em; margin-top: .15em; margin-left: -.04em; }
.pledge__list { list-style: none; margin: clamp(2.5rem, 5vw, 4.5rem) 0 2.5rem; padding: 0; display: grid; gap: 0 2rem; border-top: 2px solid var(--ink); }
@media (min-width: 800px) { .pledge__list { grid-template-columns: repeat(3, 1fr); } }
.pledge__list li { padding: 1.2rem 0; border-bottom: 1px solid var(--ink); font-size: 1.1rem; font-weight: 500; }
@media (min-width: 800px) { .pledge__list li { border-bottom: 0; } }
.pledge__list span { display: block; font-weight: 800; font-stretch: 62%; font-size: 2.6rem; line-height: 1; margin-bottom: .6rem; }
.lnk--ink:hover { background-image: linear-gradient(var(--ink), var(--ink)); background-size: 100% 2px; text-decoration: none; }
.lnk--ink:hover { color: var(--ink); }

/* ---------------- accueil : index du terrain ---------------- */
.index { padding-block: var(--sy); display: grid; gap: 2.5rem clamp(1rem, 4vw, 5rem); }
@media (min-width: 1000px) { .index { grid-template-columns: 4fr 8fr; } .index__h { position: sticky; top: calc(var(--mast) + 2rem); align-self: start; } }
.index__h h2 { font-size: clamp(2rem, 1rem + 3.2vw, 4.4rem); margin-bottom: 1.6rem; }
.index__list { margin: 0; display: grid; column-gap: clamp(1.5rem, 3vw, 3rem); }
@media (min-width: 640px) { .index__list { grid-template-columns: 1fr 1fr; } }
.index__list > div { padding: 1.2rem 0 1.4rem; border-top: 1px solid var(--ink); }
.index__list dt { font-weight: 800; font-stretch: 62%; font-size: 1.7rem; line-height: 1.05; margin-bottom: .45rem; letter-spacing: -.005em; }
.index__list dd { margin: 0; color: var(--ink-2); font-size: .98rem; }

/* ---------------- accueil : pour qui ---------------- */
.who { padding-block: var(--sy); border-top: 1px solid var(--ink); }
.who h2 { max-width: 18ch; font-size: clamp(2rem, 1rem + 3.4vw, 4.8rem); }
.who__list { list-style: none; margin: clamp(2.5rem, 5vw, 5rem) 0 0; padding: 0; display: grid; gap: 2.5rem clamp(1rem, 2.5vw, 2.5rem); }
@media (min-width: 700px) { .who__list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .who__list { grid-template-columns: repeat(4, 1fr); } .who__list li:nth-child(2n) { margin-top: 5rem; } }
.who__list li { border-top: 6px solid var(--ink); padding-top: 1.2rem; }
.who__list h3 { font-weight: 800; font-stretch: 62%; font-size: clamp(1.7rem, 1.3rem + 1vw, 2.3rem); letter-spacing: -.01em; margin-bottom: 1rem; }
.who__case { margin-top: 1.4rem; padding: 1rem; background: var(--paper-2); font-weight: 500; font-size: .98rem; }
.who__case .kick { margin-bottom: .4rem; }


/* ---------------- accueil : portrait ---------------- */
.about { padding-block: var(--sy); border-top: 1px solid var(--ink); display: grid; gap: 2.5rem clamp(1rem, 4vw, 5rem); }
@media (min-width: 1000px) { .about { grid-template-columns: 4fr 8fr; } }
.about__img { display: block; aspect-ratio: 1; max-height: 70vh; max-width: 34rem; background: var(--paper-2); border: 1.5px solid var(--ink); overflow: hidden; }
.about__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.about__txt .fold__in > .kick { margin-top: 1.6rem; }
.parcours { margin: .5rem 0 0; }
.about__txt h2 { font-size: clamp(2rem, 1rem + 3.4vw, 4.8rem); margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }

/* ---------------- appel à l'orientation ---------------- */
.cta { position: relative; overflow: clip; background: var(--night); color: var(--night-ink); padding-block: var(--sy); }
.cta .kick { color: var(--night-2); }
.cta h2 { font-size: clamp(2.4rem, 1rem + 5.4vw, 7rem); max-width: 12ch; position: relative; z-index: 1; }
.cta__x { margin: 1.6rem 0 2.2rem; color: var(--night-2); max-width: 46ch; position: relative; z-index: 1; }
.cta .btn { position: relative; z-index: 1; }
.cta__q { position: absolute; right: -.04em; bottom: -.16em; font-weight: 800; font-stretch: 62%; font-size: clamp(14rem, 40vw, 40rem); line-height: .8; color: var(--y); letter-spacing: -.05em; opacity: .95; pointer-events: none; }
@media (max-width: 699px) { .cta__q { opacity: .22; } }

/* ---------------- pied de page : colophon ---------------- */
.colo { background: var(--night); color: var(--night-ink); padding: 0 var(--gut) 2rem; border-top: 1px solid #2c2c2a; overflow: clip; }
.colo a { color: var(--night-ink); }
a[href^="tel:"] { white-space: nowrap; }
.colo .kick { color: var(--night-2); }
.colo__big { font-weight: 800; font-stretch: 125%; font-size: 26.5vw; line-height: .78; letter-spacing: -.06em; color: #2b2b28; margin: 0 -.04em; padding-top: 2.5rem; white-space: nowrap; }
.colo__grid { display: grid; gap: 2rem clamp(1rem, 3vw, 3rem); padding: 2.5rem 0; border-top: 1px solid #3a3a37; margin-top: 1.5rem; }
@media (min-width: 800px) { .colo__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .colo__grid { grid-template-columns: 1.3fr 1.6fr 1fr 1fr; } }
.colo__lead p:not(.kick) { color: var(--night-2); max-width: 34ch; }
.colo dl { margin: 0; display: grid; gap: 1.2rem; }
.colo dt { font-size: .72rem; font-weight: 650; font-stretch: 72%; letter-spacing: .1em; text-transform: uppercase; color: var(--night-2); }
.colo dd { margin: .25rem 0 0; }
.colo ul { list-style: none; margin: 0; padding: 0; }
.colo li { padding: .3rem 0; }
.colo__miss a { text-decoration: none; display: flex; gap: .7rem; }
.colo__miss a span { font-weight: 800; font-stretch: 62%; color: var(--y); }
.colo__miss a:hover, .colo__links a:hover { text-decoration: underline; }
.colo__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem 2rem; padding-top: 1.4rem; border-top: 1px solid #3a3a37; font-size: .82rem; color: var(--night-2); }
.colo__ll { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }

/* ---------------- missions : sommaire ---------------- */
.ml-wrap { padding-block: 0 var(--sy); }
.ml { list-style: none; margin: 0; padding: 0; }
.ml a { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.4rem; padding: 1.8rem 0; border-bottom: 1px solid var(--ink); text-decoration: none; position: relative; transition: background .3s; }
.ml__n { font-weight: 800; font-stretch: 62%; font-size: clamp(4rem, 2rem + 8vw, 10rem); line-height: .78; letter-spacing: -.04em; grid-row: span 2; min-width: 1.15em; }
.ml__name { display: block; font-weight: 300; font-stretch: 112%; font-size: clamp(1.6rem, 1rem + 2.2vw, 3.2rem); letter-spacing: -.035em; line-height: 1; margin-bottom: .7rem; }
.ml__body .kick { margin-bottom: .5rem; }
.ml__lede { display: block; color: var(--ink-2); max-width: 54ch; }
.ml__gate { font-weight: 600; font-stretch: 90%; }
.ml__gate .kick { margin-bottom: .2rem; }
.ml__cost { display: none; }
.ml a:hover { background: linear-gradient(90deg, var(--y) 0, var(--y) 100%) no-repeat 0 0 / 100% 100%; }
@media (min-width: 1000px) {
  .ml a { grid-template-columns: 11rem 1fr 15rem 2.4rem; align-items: end; column-gap: 2.5rem; }
  .ml__n { grid-row: auto; }
  .ml__cost { display: block; align-self: stretch; border: 1.5px solid var(--ink); position: relative; min-height: 8rem; }
  .ml__cost span { position: absolute; left: 0; right: 0; bottom: 0; height: var(--lvl); background: var(--y); border-top: 1.5px solid var(--ink); }
  .ml a:hover .ml__cost span { background: var(--ink); }
}
.ml__legend { display: flex; gap: .8rem; align-items: center; margin-top: 1.4rem; font-size: .85rem; color: var(--ink-2); max-width: none; }
.ml__legend-bar { width: 1rem; height: 1.6rem; border: 1.5px solid var(--ink); background: linear-gradient(transparent 50%, var(--y) 50%); flex: none; }

/* ---------------- mission : article ---------------- */
.feat__head { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(.8rem, 2vw, 2rem); padding-top: clamp(1.5rem, 4vw, 3rem); padding-bottom: clamp(3rem, 6vw, 5rem); border-bottom: 1px solid var(--ink); overflow: clip; }
.feat__head > * { grid-column: 1 / -1; position: relative; z-index: 1; }
.feat__n { z-index: 0 !important; font-weight: 800; font-stretch: 62%; font-size: clamp(11rem, 64vw, 38rem); line-height: .74; letter-spacing: -.05em; color: var(--y); margin-left: -.05em; margin-bottom: -.1em; pointer-events: none; user-select: none; -webkit-text-stroke: 2px var(--ink); }
.feat__title h1 { font-size: clamp(2.6rem, 1rem + 6vw, 8rem); }
.feat__title .chapo { margin-top: 1.6rem; max-width: 36ch; }
.jauge { max-width: 30rem; }
.jauge__bar { height: 22px; border: 2px solid var(--ink); background: repeating-linear-gradient(90deg, transparent 0 11px, var(--hair) 11px 12px); }
.jauge__bar span { display: block; height: 100%; width: var(--lvl); background: var(--y); border-right: 2px solid var(--ink); transform-origin: 0 50%; animation: fill 1.2s var(--ease) .3s both; }
@keyframes fill { from { transform: scaleX(0); } }
.jauge__ticks { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: .35rem; }
.jauge__ticks i { height: 6px; border-left: 1.5px solid var(--ink-3); }
.jauge__ticks i.on { border-color: var(--ink); }
.jauge__txt { margin: .9rem 0 0; }
.jauge__txt .kick { margin-bottom: .2rem; }
.jauge__txt strong { font-weight: 800; font-stretch: 62%; font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.8rem); line-height: 1; letter-spacing: -.01em; }
.jauge--feat { margin-top: clamp(2rem, 4vw, 3rem); }
.fiche { margin: clamp(2rem, 4vw, 3rem) 0 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--ink); border-left: 1px solid var(--ink); background: var(--paper); }
.fiche > div { padding: .9rem 1rem 1rem; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.fiche dt { font-size: .7rem; font-weight: 650; font-stretch: 72%; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: .3rem; }
.fiche dd { margin: 0; font-size: .95rem; line-height: 1.4; }
.fiche__print { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.fiche__print dt { margin: 0; }
@media (max-width: 520px) { .fiche { grid-template-columns: 1fr; } }
@media (min-width: 1000px) {
  .feat__n { grid-column: 1 / span 8; grid-row: 1 / span 2; margin: 0 0 0 -.05em; align-self: start; font-size: min(44vw, 44rem); }
  .feat__title { grid-column: 5 / -1; grid-row: 1; padding-top: clamp(8rem, 22vw, 24rem); }
  .jauge--feat { grid-column: 1 / span 4; grid-row: 3; align-self: end; }
  .fiche { grid-column: 6 / -1; grid-row: 3; grid-template-columns: repeat(4, 1fr); }
  .fiche__print { grid-column: 1 / -1; }
}
.feat__pb { padding-block: var(--sy); }
.feat__pb h2 { margin-bottom: clamp(2rem, 4vw, 3.5rem); max-width: 14ch; }
.feat__pb .cols p { font-size: 1.08em; }
.feat__st { padding-block: var(--sy); border-top: 1px solid var(--ink); display: grid; gap: 2.5rem clamp(1rem, 4vw, 5rem); }
@media (min-width: 1000px) { .feat__st { grid-template-columns: 4fr 8fr; } .feat__st-h { position: sticky; top: calc(var(--mast) + 2rem); align-self: start; } }
.st { list-style: none; margin: 0; padding: 0; display: grid; column-gap: 2.5rem; }
@media (min-width: 700px) { .st { grid-template-columns: 1fr 1fr; } }
.st li { display: grid; grid-template-columns: 3.6rem 1fr; gap: 1rem; padding: 1.4rem 0; border-top: 1px solid var(--ink); }
.st__n { font-weight: 800; font-stretch: 62%; font-size: 2.6rem; line-height: .85; }
.st h3 { margin-bottom: .5rem; font-weight: 600; font-stretch: 95%; font-size: 1.2rem; letter-spacing: -.01em; }
.st p { margin: 0; color: var(--ink-2); font-size: .98rem; }
.feat__lv { padding-block: var(--sy); background: var(--paper-2); border-block: 1px solid var(--ink); }
.feat__lv-h { display: grid; gap: 1.2rem clamp(1rem, 4vw, 4rem); margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
@media (min-width: 900px) { .feat__lv-h { grid-template-columns: 7fr 5fr; align-items: end; } .feat__lv-h .kick { grid-column: 1 / -1; margin: 0; } }
.pls { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.4rem, 3vw, 2.6rem); }
@media (min-width: 800px) { .pls { grid-template-columns: repeat(3, 1fr); } }
.pl { background: #fbfaf6; border: 1px solid var(--ink); padding: 1.3rem 1.3rem 1.6rem; box-shadow: 6px 6px 0 var(--ink); transform: rotate(calc((var(--i) - 1) * -.8deg)); transition: transform .4s var(--ease); }
.pl:hover { transform: rotate(0) translateY(-4px); }
.pl__head { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .6rem; margin-bottom: 1.4rem; border-bottom: 1.5px solid var(--ink); font-size: .7rem; font-weight: 650; font-stretch: 72%; letter-spacing: .1em; text-transform: uppercase; max-width: none; }
.pl h3 { font-weight: 800; font-stretch: 62%; font-size: 2rem; letter-spacing: -.01em; margin-bottom: .8rem; }
.pl > p:not(.pl__head) { color: var(--ink-2); font-size: .95rem; }
.pl__toc { margin: 1.2rem 0 0; padding: 0; list-style: none; counter-reset: t; font-size: .9rem; }
.pl__toc li { counter-increment: t; display: flex; gap: .6rem; padding: .35rem 0; border-top: 1px dotted var(--ink-3); }
.pl__toc li::before { content: counter(t, decimal-leading-zero); font-weight: 700; font-stretch: 70%; }
.gate { background: var(--y); padding-block: clamp(3.5rem, 8vw, 7rem); border-bottom: 1px solid var(--ink); position: relative; }
.gate .kick { color: var(--ink); }
.gate h2 { font-size: clamp(2rem, 1rem + 4vw, 5.6rem); max-width: 20ch; margin-bottom: 1.6rem; }
.gate::before { content: ''; position: absolute; right: var(--gut); top: clamp(3.5rem, 8vw, 7rem); width: clamp(2.2rem, 4vw, 3.4rem); aspect-ratio: 1; background: var(--ink); transform: rotate(45deg); }
.scope { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.scope li { position: relative; padding: 1.1rem 0 1.1rem 2.6rem; border-bottom: 1px solid var(--ink); }
.scope li::before { content: ''; position: absolute; left: 0; top: 1.35rem; width: 1.3rem; height: 1.3rem; border: 1.5px solid var(--ink); background: linear-gradient(45deg, transparent 46%, var(--ink) 46% 54%, transparent 54%), linear-gradient(-45deg, transparent 46%, var(--ink) 46% 54%, transparent 54%); }
.pager { display: grid; border-top: 1px solid var(--ink); }
@media (min-width: 800px) { .pager { grid-template-columns: 1fr 1fr; } }
.pg { display: block; padding: 2.2rem 0; text-decoration: none; border-bottom: 1px solid var(--ink); }
@media (min-width: 800px) { .pg { border-bottom: 0; } .pg--next { text-align: right; border-left: 1px solid var(--ink); padding-left: 2rem; } .pg--prev { padding-right: 2rem; } }
.pg__name { display: flex; align-items: center; gap: .8rem; font-weight: 300; font-stretch: 112%; font-size: clamp(1.5rem, 1rem + 2vw, 2.8rem); letter-spacing: -.035em; line-height: 1.05; }
.pg--next .pg__name { justify-content: flex-end; }
.pg:hover .pg__name { background: linear-gradient(transparent 60%, var(--y) 60%); }

/* ---------------- méthode ---------------- */
.flow-wrap { padding-block: var(--sy); display: grid; gap: 2.5rem clamp(1rem, 4vw, 5rem); }
@media (min-width: 1000px) { .flow-wrap { grid-template-columns: 4fr 8fr; } .flow__h { position: sticky; top: calc(var(--mast) + 2rem); align-self: start; } }
.flow__h h2 { font-size: clamp(2rem, 1rem + 3vw, 4.2rem); }
.flow { list-style: none; margin: 0; padding: 0; }
.flow li { display: grid; grid-template-columns: clamp(4.5rem, 10vw, 9rem) 1fr; gap: 1.2rem; padding: 1.8rem 0; border-top: 1px solid var(--ink); }
.flow__n { font-weight: 800; font-stretch: 62%; font-size: clamp(3.6rem, 2rem + 5vw, 7rem); line-height: .78; color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.flow li.is-gate .flow__n { color: var(--y); }
.flow h3 { margin-bottom: .7rem; font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); font-weight: 300; font-stretch: 112%; letter-spacing: -.03em; }
.flow__out { display: inline-block; margin: .4rem 0 0; padding: .3rem .6rem; background: var(--y); font-weight: 600; }
.fees { padding-block: var(--sy); }
.fees__h { display: grid; gap: 1.2rem clamp(1rem, 4vw, 4rem); margin-bottom: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 900px) { .fees__h { grid-template-columns: 7fr 5fr; align-items: end; } .fees__h .kick { grid-column: 1 / -1; margin: 0; } }
.fees__h h2 { font-size: clamp(2rem, 1rem + 3.4vw, 4.8rem); }
.fees__grid { display: grid; gap: 0 clamp(1.5rem, 4vw, 4rem); border-top: 2px solid var(--ink); margin-bottom: 1.6rem; }
@media (min-width: 800px) { .fees__grid { grid-template-columns: 1fr 1fr; } }
.fees__note { max-width: 46rem; font-size: 1.05rem; margin-top: 1.4rem; }
.fee { padding: 1.6rem 0 2rem; border-bottom: 1px solid var(--ink); }
.fee__n { font-weight: 800; font-stretch: 62%; font-size: 6rem; line-height: .8; margin: 0 0 .6rem; }
.fee h3 { margin-bottom: 1.2rem; font-weight: 300; font-stretch: 112%; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.6rem); }
.fee dl { margin: 0; }
.fee dl div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding: .8rem 0; border-top: 1px solid var(--hair); }
.fee dt { font-size: .72rem; font-weight: 650; font-stretch: 72%; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); padding-top: .2rem; }
.fee dd { margin: 0; }
.pls--6 { margin-bottom: 2.5rem; }

/* ---------------- orientation ---------------- */
.orient { padding-block: 0 var(--sy); }
.orient__rail { list-style: none; margin: 0 0 clamp(2rem, 4vw, 3.5rem); padding: .8rem 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; position: sticky; top: var(--mast); z-index: 5; background: var(--paper); }
.orient__rail li { border-top: 8px solid var(--paper-2); outline: 1px solid var(--hair); padding-top: .45rem; font-size: .68rem; font-weight: 650; font-stretch: 72%; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); transition: border-color .3s; }
.orient__rail li.done { border-top-color: var(--ink); color: var(--ink-2); }
.orient__rail li.now { border-top-color: var(--y); color: var(--ink); outline-color: var(--ink); }
@media (max-width: 599px) { .orient__rail li span { display: none; } }
.orient__main { max-width: 64rem; }
.q { border: 0; margin: 0; padding: 0; min-width: 0; }
.q legend { padding: 0; margin-bottom: .8rem; }
.q__count { margin-bottom: .8rem; }
.q__title { display: block; font-weight: 300; font-stretch: 112%; font-size: clamp(2rem, 1rem + 4.4vw, 5rem); letter-spacing: -.04em; line-height: .98; outline: none; }
.q__title:focus-visible { box-shadow: none; outline: none; background: linear-gradient(transparent 70%, var(--y) 70%); }
.q__hint { color: var(--ink-2); margin-bottom: 1.6rem; }
.opts { border-top: 2px solid var(--ink); }
.opt { display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; align-items: center; padding: 1rem .4rem; border-bottom: 1px solid var(--ink); cursor: pointer; position: relative; transition: background .2s, padding .25s var(--ease); min-height: 56px; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt__k { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 1.5px solid var(--ink); font-weight: 800; font-stretch: 62%; font-size: 1.3rem; }
.opt__l { font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem); font-weight: 450; line-height: 1.3; }
.opt:hover { background: var(--paper-2); padding-left: .9rem; }
.opt:has(input:checked) { background: var(--y); padding-left: .9rem; }
.opt:has(input:checked) .opt__k { background: var(--ink); color: var(--y); }
.opt:has(input:checked) .opt__l { font-weight: 650; }
.opt:has(input:checked) .opt__l::after { content: ' ✓'; }
.opt:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: -3px; }
.q__err { margin-top: 1rem; padding: .6rem .9rem; border-left: 6px solid var(--ink); background: var(--y-soft); font-weight: 600; }
.q__nav { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.result { outline: none; }
.result__name { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .2rem 1.5rem; font-weight: 800; font-stretch: 62%; font-size: clamp(2.8rem, 1rem + 7vw, 8rem); line-height: .86; letter-spacing: -.02em; margin: 0 0 2rem; max-width: none; }
.result__n { color: var(--y); -webkit-text-stroke: 2px var(--ink); font-size: 1.4em; line-height: .75; }
.result__grid { display: grid; gap: 2rem clamp(1.5rem, 4vw, 4rem); border-top: 2px solid var(--ink); padding-top: 1.6rem; }
@media (min-width: 800px) { .result__grid { grid-template-columns: 7fr 5fr; } }
.result__why { font-size: 1.15rem; }
.result__then { color: var(--ink-2); }
.result__list { list-style: none; margin: 0 0 2rem; padding: 0; }
.result__list li { padding: .5rem 0; border-top: 1px solid var(--hair); font-weight: 600; }
.jauge--res .jauge__bar span { animation: none; }
.rdv { margin-top: clamp(3rem, 6vw, 5rem); padding-top: 2rem; border-top: 6px solid var(--ink); }
.rdv h2 { font-size: clamp(2rem, 1rem + 3vw, 4rem); margin-bottom: 1rem; }

/* ---------------- formulaires ---------------- */
.form { display: grid; gap: 1.6rem clamp(1rem, 3vw, 2.5rem); margin-top: 2rem; }
@media (min-width: 700px) { .form { grid-template-columns: 1fr 1fr; } .field--full { grid-column: 1 / -1; } }
.field label { display: block; margin-bottom: .3rem; font-size: .74rem; font-weight: 650; font-stretch: 72%; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.field .fac { text-transform: none; letter-spacing: 0; font-weight: 400; font-stretch: 100%; color: var(--ink-3); }
.field input, .field textarea, .field select { width: 100%; min-height: 50px; padding: .6rem 0; border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink); font: inherit; font-size: 1.2rem; }
.field textarea { resize: vertical; min-height: 7rem; border: 2px solid var(--ink); padding: .7rem; }
.field select { appearance: none; background: linear-gradient(45deg, transparent 50%, var(--ink) 50%) calc(100% - 14px) 55% / 7px 7px no-repeat, linear-gradient(-45deg, transparent 50%, var(--ink) 50%) calc(100% - 7px) 55% / 7px 7px no-repeat; padding-right: 2rem; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; box-shadow: 0 4px 0 var(--y); }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { box-shadow: 0 4px 0 var(--y), 0 0 0 0 transparent; background: rgba(233, 223, 54, .12); }
.field [aria-invalid="true"] { border-color: #a1150b; }
.field__err { margin: .4rem 0 0; color: #8c1209; font-weight: 600; font-size: .92rem; }
.check { display: grid; grid-template-columns: 1.6rem 1fr; gap: .8rem; align-items: start; font-size: .95rem; cursor: pointer; }
.check input { width: 1.4rem; height: 1.4rem; margin: .1rem 0 0; accent-color: var(--ink); }
.form__status { padding: 1rem 1.2rem; border: 2px solid var(--ink); outline: none; }
.form__status.is-ok { background: var(--y); }
.form__status.is-err { background: var(--y-soft); }

/* ---------------- FAQ ---------------- */
.faq-wrap { padding-block: clamp(2rem, 5vw, 4rem) var(--sy); }
.faq-g { display: grid; gap: 1rem clamp(1rem, 4vw, 5rem); padding-block: 2rem; }
@media (min-width: 1000px) { .faq-g { grid-template-columns: 4fr 8fr; } .faq-g__h { position: sticky; top: calc(var(--mast) + 2rem); align-self: start; } }
.faq-g__h { font-weight: 800; font-stretch: 62%; font-size: clamp(2rem, 1.2rem + 2.4vw, 3.4rem); letter-spacing: -.01em; }
.faq-g__h .kick { font-size: .74rem; }
.faq { border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--ink); }
.faq summary { display: grid; grid-template-columns: 3.2rem 1fr 2rem; gap: .8rem; align-items: baseline; padding: 1.3rem 0; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq__n { font-weight: 800; font-stretch: 62%; font-size: 1.3rem; color: var(--ink-2); }
.faq__q { font-weight: 400; font-stretch: 105%; font-size: clamp(1.15rem, 1rem + .7vw, 1.6rem); letter-spacing: -.02em; line-height: 1.2; }
.faq__x { position: relative; width: 1.4rem; height: 1.4rem; align-self: center; }
.faq__x::before, .faq__x::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--ink); transition: transform .3s var(--ease); }
.faq__x::after { transform: rotate(90deg); }
.faq details[open] .faq__x::after { transform: rotate(0); }
.faq details[open] summary .faq__q { background: linear-gradient(transparent 62%, var(--y) 62%); }
.faq summary:hover .faq__q { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.faq__a { padding: 0 0 1.6rem 4rem; color: var(--ink-2); }
@media (max-width: 599px) { .faq__a { padding-left: 0; } }

/* ---------------- contact, 404 ---------------- */
.contact { padding-block: clamp(2.5rem, 5vw, 4rem) var(--sy); display: grid; gap: 2.5rem clamp(1.5rem, 5vw, 5rem); }
@media (min-width: 1000px) { .contact { grid-template-columns: 4fr 8fr; } }
.direct { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.direct li { padding: 1.1rem 0; border-bottom: 1px solid var(--ink); }
.direct li .kick { margin-bottom: .3rem; }
.direct a, .direct li > span:not(.kick) { font-size: 1.2rem; font-weight: 500; overflow-wrap: anywhere; }
.direct__orient a { font-size: 1rem; }
.big404 { font-weight: 800; font-stretch: 62%; font-size: clamp(9rem, 40vw, 30rem); line-height: .75; color: var(--y); -webkit-text-stroke: 2px var(--ink); margin: 0 0 1rem -.04em; max-width: none; }
.list404 { list-style: none; margin: 2rem 0; padding: 0; border-top: 2px solid var(--ink); max-width: 44rem; grid-column: 1 / -1; }
.list404 a { display: flex; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--ink); text-decoration: none; font-size: 1.15rem; }
.list404 a span { font-weight: 800; font-stretch: 62%; }
.list404 a:hover { background: var(--y); }

/* ---------------- mouvement ---------------- */
/* Passe « less is more » (03/11) : une seule signature animée, la jauge. Plus de rideau ni d'apparitions. */
.js .rv { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .rv { opacity: 1; transform: none; }
  .js .cost__step:not(.is-in) .cost__mini span { transform: none; }
  .progress { transform: scaleX(var(--read, 0)); }
}

/* ---------------- impression des fiches ---------------- */
@media print {
  @page { size: A4; margin: 16mm 14mm; }
  body { background: #fff; font-size: 10.5pt; }
  .mast, .menu, .colo, .cta, .pager, .crumbs, .skip, .fiche__print, .feat__n, .jauge__ticks { display: none !important; }
  main > section, article > section, article > header { padding: 0 !important; border: 0 !important; background: none !important; }
  .feat__head { display: block; }
  .feat__title { padding: 0 !important; }
  h1 { font-size: 26pt; } h2 { font-size: 16pt; margin: 10mm 0 3mm; }
  .feat__pb, .feat__st, .feat__lv, .gate, .split { display: block; padding-block: 4mm !important; break-inside: avoid-page; }
  .pl { box-shadow: none; transform: none; break-inside: avoid; margin-bottom: 4mm; }
  .pls { display: block; }
  .cols { columns: 1; }
  .gate::before { display: none; }
  .js .rv { opacity: 1 !important; transform: none !important; }
  a { text-decoration: none; }
}
.p-orient .ph h1 { font-size: clamp(2.3rem, 1rem + 4.2vw, 5.4rem); }
.p-orient .ph .chapo { margin-top: 1.2rem; }
.p-orient .ph { padding-top: clamp(2rem, 4vw, 3.5rem); }

/* ==========================================================================
   Jaune vers vert (passe du 03/11, retour de Laurent)
   La jauge garde son sens (le coût d'un changement monte) ; sa couleur dit
   l'avancement du projet : jaune à la faisabilité, vert à la performance après
   livraison. Couverture, logo, engagement, surligneur et rideau restent jaunes.
   --ph = couleur de la phase de l'élément ; --ph-now = phase en cours (cost.js).
   ========================================================================== */
@property --ph-now { syntax: '<color>'; inherits: true; initial-value: #e9df36; }
.cost__step[data-step='1'], .cost__ticks li[data-t='1'], .ml li:nth-child(1), .cover__toc li:nth-child(1), .orient__rail li:nth-child(1), .q[data-q='0'] { --ph: var(--ph1); }
.cost__step[data-step='2'], .cost__ticks li[data-t='2'], .ml li:nth-child(2), .cover__toc li:nth-child(2), .orient__rail li:nth-child(2), .q[data-q='1'] { --ph: var(--ph2); }
.cost__step[data-step='3'], .cost__ticks li[data-t='3'], .ml li:nth-child(3), .cover__toc li:nth-child(3), .orient__rail li:nth-child(3), .q[data-q='2'] { --ph: var(--ph3); }
.cost__step[data-step='4'], .cost__ticks li[data-t='4'], .ml li:nth-child(4), .cover__toc li:nth-child(4), .orient__rail li:nth-child(4), .q[data-q='3'] { --ph: var(--ph4); }
.cost__step[data-step='5'], .cost__ticks li[data-t='5'], .ml li:nth-child(5), .cover__toc li:nth-child(5), .orient__rail li:nth-child(5), .q[data-q='4'] { --ph: var(--ph5); }
/* Fiche mission : la page prend la couleur de sa phase (la dernière règle vraie l'emporte) */
.p-mission:has(.jauge--feat .jauge__ticks i:nth-child(1).on) { --ph: var(--ph1); }
.p-mission:has(.jauge--feat .jauge__ticks i:nth-child(2).on) { --ph: var(--ph2); }
.p-mission:has(.jauge--feat .jauge__ticks i:nth-child(3).on) { --ph: var(--ph3); }
.p-mission:has(.jauge--feat .jauge__ticks i:nth-child(4).on) { --ph: var(--ph4); }
.p-mission:has(.jauge--feat .jauge__ticks i:nth-child(5).on) { --ph: var(--ph5); }

/* Barre de lecture : du jaune au vert sur la longueur de la page (découpe, le dégradé reste fixe) */
.progress { background: linear-gradient(90deg, var(--ph1), var(--ph3) 50%, var(--ph5)); transform: none; clip-path: inset(0 calc((1 - var(--read, 0)) * 100%) 0 0); }

/* Jauges : le remplissage part du jaune et finit à la couleur de la phase */
.cost__mini span, .jauge__bar span { background: linear-gradient(90deg, var(--ph1), var(--ph, var(--y))); }
.ml__cost span { background: linear-gradient(0deg, var(--ph1), var(--ph)); }
@media (min-width: 1000px) {
  .cost__fill { background: linear-gradient(0deg, var(--ph1), var(--ph-now)); transition: height .45s var(--ease), --ph-now .45s var(--ease); }
  .cost__ticks li.on::before { background: var(--ph); height: 4px; outline: 1px solid var(--ink); }
  .ml__cost span { background: linear-gradient(0deg, var(--ph1), var(--ph)); }
  .ml a:hover .ml__cost span { background: var(--ink); }
}
.ml__legend-bar { background: linear-gradient(transparent 50%, var(--ph1) 50%, var(--ph5)); }
.ml a:hover, .cover__toc a:hover { background: var(--ph); }

/* Fiche mission : grand numéro et point de décision à la couleur de la phase */
.p-mission .feat__n { color: var(--ph); }
.p-mission .gate { background: var(--ph); }

/* Orientation : la question 1 est jaune, chaque question verdit, la recommandation est verte */
.orient__rail li.now { border-top-color: var(--ph); }
.q .opt:has(input:checked) { background: var(--ph); }
.q .opt:has(input:checked) .opt__k { color: var(--ph); }
.q .btn:hover { background: var(--ph); }
.result { --ph: var(--g); }
.result > .kick { color: var(--g-ink); }
.result__n { color: var(--g); }

@media (prefers-reduced-motion: reduce) {
  .progress { transform: none; }
}

/* ==========================================================================
   Less is more (03/11) : dévoilement progressif. Replis natifs details/summary,
   lisibles sans JS et au clavier ; le contenu replié reste dans le HTML.
   ========================================================================== */
.fold { border-top: 1px solid var(--ink); }
.fold:last-child { border-bottom: 1px solid var(--ink); }
.fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 56px; padding: 1rem 0; cursor: pointer; list-style: none; }
.fold > summary::-webkit-details-marker, .pick > summary::-webkit-details-marker, .faq-g--fold > summary::-webkit-details-marker { display: none; }
.fold__t { font-weight: 300; font-stretch: 112%; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.2rem); letter-spacing: -.03em; line-height: 1.1; }
.fold > summary:hover .fold__t { background: linear-gradient(transparent 62%, var(--y) 62%); }
.fold__x, .faq__x { position: relative; flex: none; width: 1.4rem; height: 1.4rem; }
.fold__x::before, .fold__x::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--ink); }
.fold__x::after { transform: rotate(90deg); }
details[open] > summary .fold__x::after, details[open] > summary .faq__x::after { transform: rotate(0); }
.fold__in { padding: .4rem 0 2.2rem; }
.fold--s { border: 0 !important; margin-top: 1rem; }
.fold--s > summary { min-height: 44px; padding: .5rem 0; }
.fold--s .fold__t { font-size: 1rem; font-weight: 650; font-stretch: 90%; letter-spacing: 0; }
.fold--s .fold__in { padding: .2rem 0 .6rem; }
.fold .pls { margin-top: 1.6rem; }
.fold .fiche { margin-top: 0; grid-template-columns: 1fr 1fr; }
@media (min-width: 1000px) { .fold .fiche { grid-template-columns: repeat(4, 1fr); } }

/* Accueil : le visiteur choisit son problème, la réponse s'ouvre sur place */
.cover__side.chapo { margin-top: clamp(1.4rem, 3vw, 2.5rem); }
.picks { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.picks > li { border-bottom: 1px solid var(--ink); background: var(--paper); }
.pick > summary { display: grid; grid-template-columns: 2.6rem 1fr 1.4rem; gap: .9rem; align-items: center; min-height: 56px; padding: .8rem .2rem; cursor: pointer; list-style: none; transition: background .2s; }
.pick > summary:hover, .pick[open] > summary { background: var(--ph, var(--y)); }
.pick__n { font-weight: 800; font-stretch: 62%; font-size: 1.8rem; line-height: 1; }
.pick__pb { font-weight: 500; font-stretch: 98%; font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem); line-height: 1.25; }
.pick__a { padding: 1rem .2rem 1.6rem 3.5rem; }
.pick__a p { margin-bottom: .6rem; }
.pick__a .cost__mini { margin: .9rem 0 .5rem; max-width: 22rem; }
.pick__a .cost__mini span { transform: none !important; }
.pick__cost strong { font-weight: 800; font-stretch: 62%; font-size: 1.4em; }
.pick__a .btn { margin-top: .8rem; }
.cover__else { margin: 1.2rem 0 0; }
.picks > li:nth-child(1) { --ph: var(--ph1); } .picks > li:nth-child(2) { --ph: var(--ph2); } .picks > li:nth-child(3) { --ph: var(--ph3); } .picks > li:nth-child(4) { --ph: var(--ph4); } .picks > li:nth-child(5) { --ph: var(--ph5); }
@media (min-width: 1000px) { .cover__toc { align-self: start; margin-top: clamp(1.4rem, 3vw, 2.5rem); } }
@media (max-width: 599px) { .pick__a { padding-left: .2rem; } }

.pledge__x { margin: clamp(1.6rem, 3vw, 2.6rem) 0 1.4rem; font-size: 1.15rem; font-weight: 500; max-width: 46ch; }
.about__txt .fold { margin-top: 1.6rem; }
.cta h2 { margin-bottom: 2rem; }

/* Fiche mission : problème, ce que je fais en trois lignes, puis le détail sur demande */
.feat__do { padding-block: clamp(3rem, 7vw, 6rem); display: grid; gap: 1.4rem; max-width: 60rem; }
.trois { list-style: none; margin: 0; padding: 0; counter-reset: t; border-top: 2px solid var(--ink); }
.trois li { counter-increment: t; display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; align-items: baseline; padding: 1rem 0; border-bottom: 1px solid var(--ink); font-size: clamp(1.1rem, 1rem + .5vw, 1.45rem); line-height: 1.3; }
.trois li::before { content: counter(t, decimal-leading-zero); font-weight: 800; font-stretch: 62%; font-size: 1.6em; line-height: .9; }
.feat__gate { margin: .6rem 0 .4rem; padding: 1rem 1.2rem; background: var(--ph, var(--y)); border: 2px solid var(--ink); font-weight: 600; font-size: 1.1rem; max-width: none; }
.feat__gate .kick { color: var(--ink); margin-bottom: .3rem; }
.feat__do .btn { justify-self: start; }
.feat__more { padding-bottom: var(--sy); }
.fold--pb .cols p { font-size: 1.05em; }
@media (min-width: 1000px) { .feat__title { padding-top: clamp(6rem, 16vw, 16rem); } }

/* Méthode : déroulé replié par étape */
.flow li { align-items: start; padding: 1rem 0; }
.flow li .fold { border: 0 !important; }
.flow li .fold__in p { color: var(--ink-2); }
.fee > p:not(.fee__n) { margin-bottom: 1rem; }
.feat__lv { padding-block: 0; background: none; border: 0; }
.feat__lv > .fold { margin-bottom: var(--sy); }

/* FAQ : la première partie ouverte en liste, les deux autres repliées */
.faq summary { grid-template-columns: 1fr 2rem; }
.faq__a { padding-left: 0; }
.faq-g--fold { display: block; border-top: 2px solid var(--ink); }
.faq-g--fold > summary { display: flex; align-items: center; gap: 1rem; min-height: 56px; padding: 1.2rem 0; cursor: pointer; list-style: none; }
.faq-g--fold > summary h2 { font: inherit; letter-spacing: inherit; margin: 0; }
.faq-g__c { margin-left: auto; font-size: .76rem; font-weight: 650; font-stretch: 72%; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.faq-g--fold .faq { border-top: 1px solid var(--ink); margin-bottom: 1.4rem; }
.faq-g--fold:last-child { border-bottom: 2px solid var(--ink); }

@media print {
  details > :not(summary) { display: block !important; }
  details summary .fold__x, details summary .faq__x { display: none; }
  .feat__do .btn { display: none; }
}
.cover__else a { display: inline; padding: 0 0 .15rem; border: 0; grid-template-columns: none; }
.cover__else a:hover { padding-left: 0; }
@media (min-width: 1000px) { .cost__step { min-height: 52vh; } }
/* Accueil desktop : le choix du problème remonte au-dessus de la ligne de flottaison */
@media (min-width: 1000px) { .cover { min-height: 0; } .cover__h { font-size: clamp(3rem, 5.4vw, 6.4rem); margin-top: 2rem; } }
.cover__toc .pick__a a.btn { display: inline-flex; grid-template-columns: none; padding: .8rem 1.4rem; border-bottom: 2px solid var(--ink); }
.cover__toc .pick__a a.btn:hover { padding-left: 1.4rem; }
.js .pick__a .cost__mini { display: block; }

/* ---------------- guides (03/11/2026) ----------------
   Page de lecture : question en titre maigre, réponse directe sous un filet jaune, colonne de 64 caractères,
   bloc Yelloo encadré, sources en pied. Mobile : rien ne dépasse, liens de sources coupés au besoin. */
.guide__head { padding-top: clamp(2rem, 5vw, 4.5rem); padding-bottom: clamp(2rem, 5vw, 3.5rem); border-bottom: 1px solid var(--ink); }
.guide__head h1 { font-size: clamp(2.1rem, 1rem + 4.2vw, 5.2rem); max-width: 20ch; overflow-wrap: break-word; hyphens: auto; }
.guide__rep { margin: clamp(1.6rem, 3vw, 2.6rem) 0 0; max-width: 56ch; font-size: clamp(1.12rem, 1rem + .5vw, 1.4rem); line-height: 1.45; font-stretch: 96%;
  padding-left: clamp(.9rem, 2vw, 1.3rem); border-left: 6px solid var(--y); }
.guide__meta { margin: 1.4rem 0 0; font-size: .86rem; color: var(--ink-2); }
.guide__body { padding-block: clamp(2rem, 5vw, 4rem) var(--sy); }
.guide__txt { max-width: 64ch; }
.guide__txt h2 { font-size: clamp(1.4rem, 1.05rem + 1.4vw, 2.2rem); font-weight: 650; font-stretch: 85%; letter-spacing: -.015em; line-height: 1.1;
  margin: clamp(2.2rem, 5vw, 3.2rem) 0 .9rem; max-width: 30ch; }
.guide__txt h2:first-child { margin-top: 0; }
.guide__txt a, .guide__src a { overflow-wrap: anywhere; }
.guide__yelloo { margin-top: clamp(2.6rem, 6vw, 4rem); max-width: 64ch; padding: clamp(1.3rem, 3vw, 2rem); border: 2px solid var(--ink); background: var(--paper-2); }
.guide__yelloo p:last-child { margin-bottom: 0; }
.guide__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 1.2rem; }
.guide__src { margin-top: clamp(2.2rem, 5vw, 3rem); padding-top: 1.2rem; border-top: 1px solid var(--hair); max-width: 64ch; font-size: .88rem; color: var(--ink-2); }
.guide__src ol { margin: 0; padding-left: 1.2rem; }
.guide__src li { margin: .35rem 0; }
.guides-lies { padding: clamp(1.6rem, 3vw, 2.4rem) 0 0; }
.guides-lies ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.guides-lies .lnk { max-width: 60ch; line-height: 1.35; }
.ml--guides .ml__name { font-size: clamp(1.25rem, 1rem + 1.3vw, 2.2rem); }
@media (max-width: 699px) {
  .guide__acts .btn { width: 100%; justify-content: space-between; }
}
@media print { .guide__yelloo { display: none; } }

/* ---------------- pages de référencement (03/11/2026, soir) ----------------
   FAQ repliée en fin de guide (mêmes repliés que /faq/, en plus petit), « À lire aussi », index des guides par thème, FAQ des missions. */
.guide__faq { margin-top: .4rem; }
.guide__faq .faq__q { font-size: clamp(1.05rem, .98rem + .4vw, 1.3rem); }
.guide__faq .faq__a { padding-bottom: 1.2rem; }
.guide__txt .guides-lies { padding-top: clamp(2.2rem, 5vw, 3.2rem); }
.guides-th { padding-top: clamp(1.8rem, 4vw, 3rem); }
.guides-th:first-child { padding-top: 0; }
.guides-th > h2 { font-size: clamp(1.4rem, 1.05rem + 1.4vw, 2.2rem); font-weight: 650; font-stretch: 85%; letter-spacing: -.015em; line-height: 1.1; margin: 0 0 .9rem; }
.fold--faq .faq { border-top: 0; }
.fold--faq .faq__q { font-size: clamp(1.05rem, .98rem + .4vw, 1.3rem); }