/* Styles propres à la page « marque » (repris de la maquette). */
/* ---- Marque & création : « Ressembler, c'est disparaître » ------------- */
.m-hero { --len: 3.4; }
.m-hero .pin-stage { background: var(--bg); }
.crowd .mk { position: relative; }
.crowd .mk .blob { position: absolute; left: 50%; top: 50%; width: 40%; height: 40%; margin: -20% 0 0 -20%; border-radius: 50%; background: #C9D2D8; transform: scale(0); }
.crowd { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--cols, 6), 1fr); grid-auto-rows: var(--cell, 64px); align-content: center; justify-content: center; }
.crowd .mk { display: grid; place-items: center; }
.crowd .mk svg { width: 68%; height: 68%; }
.crowd .mk svg * { fill: #D5DADE; }
.crowd .mk.us svg * { fill: var(--rouge); }
.crowd .mk.us svg { width: 86%; height: 86%; }
.m-hero__copy { position: absolute; z-index: 3; left: 0; right: 0; top: 50%; transform: translateY(-50%); padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px)); }
@media (min-width: 768px) { .m-hero__copy { padding-inline: 40px; } }
@media (min-width: 1200px) { .m-hero__copy { padding-inline: 64px; } }
.m-hero__copy h1 { max-width: var(--max); margin-inline: auto; display: grid; gap: 18px; }
.m-hero__copy .giant { color: var(--encre); background: linear-gradient(transparent 0 0); }
.m-hero__copy .giant span.l { display: block; }
.m-hero__copy .h1-seo { background: var(--bg); justify-self: start; padding: 4px 0; }
.m-construct { position: absolute; z-index: 2; left: 50%; top: 52%; width: min(78vw, 64svh, 620px); aspect-ratio: 120 / 100; }
@media (min-width: 900px) { .m-construct { top: 43%; width: min(52svh, 520px); } .m-punch2 p { font-size: clamp(3rem, 8vw, 7rem); } }
.m-construct svg { width: 100%; height: 100%; overflow: visible; }
.m-construct .cote { position: absolute; font: 500 .8125rem/1 var(--f-mono); color: var(--encre); padding: 2px 4px; white-space: nowrap; }
.m-construct .cote:nth-of-type(2), .m-construct .cote:nth-of-type(3) { color: var(--rouge-txt); }
.m-construct .guide { fill: none; stroke: var(--encre); stroke-width: 1px; vector-effect: non-scaling-stroke; opacity: .6; }
.m-construct .guide.c { stroke: var(--rouge-txt); stroke-width: 1.5px; opacity: 1; }
.m-construct text { font: 500 3.2px var(--f-mono); fill: var(--encre-2); }
.m-punch2 { position: absolute; z-index: 3; left: 0; right: 0; bottom: clamp(28px, 6svh, 64px); padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px)); }
@media (min-width: 1200px) { .m-punch2 { padding-inline: 64px; } }
.m-punch2 p { max-width: var(--max); margin-inline: auto; font: 800 clamp(3rem, 14vw, 9rem)/.86 var(--f-display); letter-spacing: -.04em; }
.m-punch2 p em { font-style: normal; color: var(--rouge-txt); }
.m-sub { position: absolute; z-index: 3; top: calc(var(--bar-h) + 24px); left: 0; right: 0; padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px)); }
@media (min-width: 1200px) { .m-sub { padding-inline: 64px; } }
.m-sub p { max-width: var(--max); margin-inline: auto; font: 500 .9375rem/1.4 var(--f-mono); color: var(--encre-2); }

/* Système : les applications se déploient */
.m-system { --len: 2.2; }
.m-system .pin-stage { background: var(--brume); }
.m-system__head { position: absolute; z-index: 3; top: calc(var(--bar-h) + 28px); left: 0; right: 0; padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px)); }
@media (min-width: 1200px) { .m-system__head { padding-inline: 64px; } }
.m-system__head > div { max-width: var(--max); margin-inline: auto; display: grid; gap: 12px; }
.m-system__head .t1 { max-width: 10em; }
.m-system__head .lead { max-width: 30em; }
.apps { position: absolute; inset: 0; }
.app { position: absolute; left: 0; top: 0; width: var(--w); aspect-ratio: var(--ar); box-shadow: 0 30px 60px -30px rgba(18,26,33,.45); display: grid; overflow: hidden; visibility: hidden; }
.m-tiles { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.m-tile { position: absolute; background: #fff; visibility: hidden; }
.m-tile span { position: absolute; left: 14px; bottom: 12px; font: 500 .75rem/1 var(--f-mono); color: var(--encre-2); }
.app { z-index: 1; }
.app figcaption { position: absolute; left: 0; bottom: -30px; font: 500 .875rem/1 var(--f-mono); color: var(--encre-2); white-space: nowrap; }
.app { overflow: visible; }
.app > .face { overflow: hidden; position: relative; width: 100%; height: 100%; }
.app--carte { --w: min(56vw, 340px); --ar: 85 / 55; }
.app--carte .face { background: #fff; padding: 9%; display: grid; grid-template-columns: 1fr auto; align-content: space-between; }
.app--carte .face b { font: 600 clamp(.8rem, 1.6vw, 1rem)/1.2 var(--f-text); display: block; }
.app--carte .face span { font: 400 clamp(.65rem, 1.2vw, .8rem)/1.4 var(--f-text); color: var(--encre-2); }
.app--carte svg { width: clamp(28px, 5vw, 52px); }
.app--enseigne { --w: min(60vw, 420px); --ar: 16 / 7; }
.app--enseigne .face { background: #000; display: grid; place-items: center; }
.app--enseigne svg { width: 62%; }
.app--post { --w: min(46vw, 280px); --ar: 1 / 1; }
.app--post .face { background: var(--rouge); padding: 10%; display: grid; align-content: space-between; }
.app--post .face p { font: 750 clamp(1.1rem, 3vw, 2rem)/.92 var(--f-display); letter-spacing: -.04em; color: var(--encre); }
.app--post svg { width: 26%; }
.app--phone { --w: min(34vw, 210px); --ar: 9 / 18; border-radius: 28px; }
.app--phone .face { background: #fff; border: 6px solid var(--encre); border-radius: 28px; padding: 18% 10% 10%; display: grid; align-content: start; gap: 10px; }
.app--phone .face i { display: block; height: 8px; background: #E4E8EA; }
.app--phone .face i.s { width: 60%; }
.app--phone .face b { font: 750 clamp(.9rem, 2vw, 1.25rem)/.95 var(--f-display); letter-spacing: -.03em; }
.app--phone .face .bt { height: 22px; background: var(--rouge); width: 70%; margin-top: 6px; }
.app--phone svg { width: 40%; }
.app--charte { --w: min(58vw, 360px); --ar: 4 / 3; }
.app--charte .face { background: #fff; padding: 7%; display: grid; grid-template-rows: auto 1fr; gap: 8%; }
.app--charte .sw { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.app--charte .sw i { aspect-ratio: 1; display: block; }
.app--charte .ty { display: flex; align-items: flex-end; justify-content: space-between; }
.app--charte .ty b { font: 750 clamp(2rem, 6vw, 4.4rem)/.8 var(--f-display); letter-spacing: -.038em; }
.app--charte .ty span { font: 500 clamp(.6rem, 1.1vw, .75rem)/1.4 var(--f-mono); color: var(--encre-2); text-align: right; }
.is-static .m-hero .pin-stage, .is-static .m-system .pin-stage { padding: calc(var(--bar-h) + 40px) 0 80px; display: grid; gap: 32px; }
.is-static .m-hero__copy, .is-static .m-punch2, .is-static .m-sub, .is-static .m-system__head, .is-static .m-construct { position: relative; inset: auto; transform: none; margin-inline: auto; }
.is-static .crowd { display: none; }
.is-static .apps { position: relative; display: flex; flex-wrap: wrap; gap: 48px 24px; justify-content: center; padding: 24px; }
.is-static .app { position: relative; left: auto; top: auto; margin: 0; transform: none; visibility: visible; }

/* Test du plissement d'yeux */
.blur-test { display: grid; gap: 24px; }
.bt-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 800px) { .bt-row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; } }
.bt { aspect-ratio: 1; display: grid; place-items: center; background: var(--brume); overflow: hidden; }
.bt svg { width: 52%; height: 52%; transition: filter .15s linear, transform .15s linear; filter: blur(var(--bl, 0px)); transform: scale(var(--sc, 1)); }
.bt svg * { fill: #8D98A1; }
.bt.us svg * { fill: var(--rouge); }
.bt-ctrl { display: grid; grid-template-columns: auto minmax(0, 1fr) 4.5em; gap: 14px; align-items: center; font: 500 .875rem/1.2 var(--f-mono); color: var(--encre-2); }
@media (max-width: 599px) { .bt-ctrl { grid-template-columns: minmax(0, 1fr) 4.5em; } .bt-ctrl label { grid-column: 1 / -1; } }
.bt-ctrl input { width: 100%; accent-color: var(--rouge); height: 44px; }
.bt-ctrl output { font-weight: 600; color: var(--encre); text-align: right; }
.bt-note { font: 700 clamp(1.4rem, 3.4vw, 2.4rem)/1.1 var(--f-display); letter-spacing: -.025em; max-width: 24em; min-height: 2.2em; }

/* Nuancier */
.swatches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 900px) { .swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.swatch.situation { display: grid; grid-template-rows: auto auto 1fr; gap: 6px; padding: 0 0 16px; background: #fff; border: 0; text-align: left; box-shadow: 0 20px 40px -30px rgba(18,26,33,.4); }
.swatch .chip { aspect-ratio: 4 / 3; background: var(--g, #D6DCE0); position: relative; transition: background .3s var(--ease); display: grid; align-content: end; padding: 0; font: 500 .75rem/1.4 var(--f-mono); color: var(--encre); box-shadow: inset 0 0 0 1px rgba(18,26,33,.08); }
/* Une vraie puce de nuancier : l'aplat de couleur, puis sa bande blanche avec le nom et le code */
.swatch .chip > span { background: #fff; padding: 8px 12px 9px; border-top: 1px solid rgba(18,26,33,.08); }
.swatch .chip::before { content: ""; position: absolute; left: 12px; top: 12px; width: 18px; height: 18px; border: 1.5px solid rgba(18,26,33,.28); }
.swatch .chip .on { display: none; color: var(--encre); }
.swatch[aria-pressed="true"] .chip .on { display: block; }
.swatch[aria-pressed="true"] .chip::before { display: none; }
.swatch[aria-pressed="true"] .chip .off { display: none; }
.swatch[aria-pressed="true"] .chip { background: var(--rouge); }
.swatch[aria-pressed="true"] .chip::after { content: "✓"; position: absolute; left: 12px; top: 8px; font: 700 1.6rem/1 var(--f-display); color: var(--encre); }
.swatch .code { font: 500 .75rem/1.2 var(--f-mono); color: var(--encre-2); padding: 8px 12px 0; }
.swatch .txt { font-size: 1rem; line-height: 1.35; padding: 0 12px; }
.swatch.situation[aria-pressed="true"] { background: #fff; border: 0; }

/* Chapitres */
.chaps { display: grid; gap: 0; border-top: 3px solid var(--encre); }
.chap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 28px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .chap { grid-template-columns: 260px minmax(0, 1fr); gap: 40px; align-items: start; } }
.chap .cn { font: 800 clamp(5rem, 22vw, 11rem)/.8 var(--f-display); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 2px var(--rouge); }
.chap .ck { font: 500 .8125rem/1.2 var(--f-mono); color: var(--rouge-txt); margin-bottom: 6px; }
.chap h3 { font: 700 clamp(1.6rem, 3vw, 2.5rem)/1.02 var(--f-display); letter-spacing: -.03em; margin-bottom: 10px; }
.chap p { color: var(--fg-2); max-width: 36em; }
.chap .livrables { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding: 0; list-style: none; }
.chap .livrables li { font-size: .875rem; padding: 6px 10px; border: 1px solid var(--line); }

/* À faire / à éviter */
.dodont { display: grid; gap: 16px; }
@media (min-width: 900px) { .dodont { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.dd { display: grid; grid-template-rows: 1fr auto; background: #fff; }
.dd .do { padding: 22px; display: grid; gap: 10px; align-content: start; border-top: 6px solid var(--vert-txt); }
.dd .dont { padding: 16px 22px 20px; border-top: 1px dashed var(--line); display: grid; gap: 6px; }
.dd .tag { font: 600 .75rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; }
.dd .do .tag { color: var(--vert-txt); }
.dd .dont .tag { color: var(--rouge-txt); }
.dd .dont .tag::before { content: "✕ "; }
.dd .do .tag::before { content: "✓ "; }
.dd h3 { font: 700 1.375rem/1.15 var(--f-display); letter-spacing: -.02em; }
.dd .do p { color: var(--fg-2); }
.dd .dont p { color: var(--encre-2); text-decoration: line-through; text-decoration-color: var(--rouge); }
.dd .dont p.pale { color: #6B767E; text-decoration: none; }
.dd .dont p.pale::before { content: "Aa"; color: #B9C2C8; font-weight: 700; margin-right: 8px; }

/* Étapes : le D se construit */
.dsteps { display: grid; gap: 28px; }
@media (min-width: 900px) { .dsteps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }
.dstep { display: grid; gap: 10px; align-content: start; }
.dd-svg { width: 100%; max-width: 220px; aspect-ratio: 74 / 78; background: var(--brume); margin-bottom: 6px; }
.dd-svg .g { fill: none; stroke: #B9C2C8; stroke-width: .5; }
.dd-svg .c { fill: none; stroke: var(--rouge-txt); stroke-width: .7; }
.dd-svg .o { fill: none; stroke: var(--encre); stroke-width: 1.2; }
.dd-svg .f { fill: var(--rouge); }
.dstep .n { font: 500 .875rem/1 var(--f-mono); color: var(--encre-2); }
.dstep h3 { font: 700 1.5rem/1.1 var(--f-display); letter-spacing: -.02em; }
.dstep p { color: var(--fg-2); }
.dstep .vous { color: var(--fg); padding: 10px 12px; background: color-mix(in srgb, var(--rouge) 10%, var(--bg)); }