@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;600&family=Manrope:wght@400;500;600;700&family=Schibsted+Grotesk:wght@600;700;800;900&display=swap');
:root{--encre:#131A1D;--encre-2:#293236;--papier:#F5F7F4;--blanc:#FFFFFF;--verre:#56C8B8;--verre-fonce:#167E72;--verre-pale:#DDF6F1;--gris:#657176;--ligne:#BEC8C6;--ombre:#131A1D18;--voile:#131A1DD9;--transparent:#FFFFFF00;--titre:'Schibsted Grotesk',sans-serif;--texte:'Manrope',sans-serif;--mono:'JetBrains Mono',monospace;--max:1280px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--papier);color:var(--encre);font:1rem/1.65 var(--texte)}img{display:block;width:100%}a{color:inherit;text-decoration:none}h1,h2,h3{font-family:var(--titre);line-height:.92;letter-spacing:-.045em;margin-top:0}h1{font-size:clamp(3.5rem,8vw,9rem)}h2{font-size:clamp(2.2rem,4.4vw,4.8rem)}h3{font-size:1.5rem}.skip{position:fixed;top:-5rem;left:1rem;background:var(--verre);padding:.7rem;z-index:100}.skip:focus{top:1rem}.info{height:36px;padding:0 max(3vw,24px);display:flex;align-items:center;justify-content:flex-end;gap:2.5rem;background:var(--verre);font:600 .7rem var(--mono)}.info a{text-decoration:underline}.hd{height:88px;padding:0 max(3vw,24px);display:flex;align-items:center;justify-content:space-between;background:var(--blanc);border-bottom:1px solid var(--ligne);position:relative;z-index:20}.logo{display:grid;font-family:var(--titre);line-height:.9;max-width:180px;transition:transform .25s ease,color .25s ease}.logo:hover{transform:translateY(-2px);color:var(--verre-fonce)}.logo strong{font-size:1.3rem}.logo small{font:500 .55rem var(--mono);letter-spacing:.12em}.hd nav{display:flex;align-items:center;gap:1.25rem;font-size:.8rem;font-weight:700}.hd nav a{min-height:44px;display:flex;align-items:center;border-bottom:2px solid var(--transparent);transition:color .2s ease,border-color .2s ease}.hd nav a:hover{color:var(--verre-fonce);border-color:var(--verre)}.action,.btn,button[type=submit]{background:var(--verre);border:1px solid var(--encre);padding:.85rem 1.1rem;min-height:44px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease}.btn:hover,button[type=submit]:hover{background:var(--encre);color:var(--blanc);transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--verre)}.btn.inverse{background:var(--transparent);color:inherit}.menu-btn{display:none;background:var(--encre);color:var(--blanc);border:0;min-height:44px;padding:.6rem}.nav-total{height:35px;padding:0 max(3vw,24px);display:flex;align-items:center;gap:1rem;overflow:auto;white-space:nowrap;background:var(--encre);color:var(--blanc);font-size:.66rem}.nav-total b{color:var(--verre);font-family:var(--mono)}.nav-total a{opacity:.68;transition:opacity .2s ease,color .2s ease}.nav-total a:hover,.nav-total a[aria-current]{opacity:1;color:var(--verre)}.kicker{font:600 .7rem var(--mono);letter-spacing:.16em;color:var(--verre-fonce);text-transform:uppercase}.actions{display:flex;gap:.6rem;flex-wrap:wrap}.rv{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}.rv.visible{opacity:1;transform:none}.essentiel{display:grid;grid-template-columns:repeat(4,1fr);max-width:var(--max);margin:auto;border-left:1px solid var(--ligne)}.essentiel div{padding:1.5rem;border-right:1px solid var(--ligne);border-bottom:1px solid var(--ligne);display:grid;gap:.4rem}.essentiel b{font:.65rem var(--mono);color:var(--verre-fonce)}.essentiel span{font-size:.8rem}.essentiel a{font:800 1.35rem var(--titre);transition:color .2s ease,letter-spacing .2s ease}.essentiel a:hover{color:var(--verre-fonce);letter-spacing:.02em}.hero-page{min-height:620px;display:grid;grid-template-columns:7fr 5fr;border-bottom:1px solid var(--ligne)}.hero-page>div{padding:clamp(3rem,8vw,8rem);align-self:center}.hero-page h1{font-size:clamp(3.5rem,7vw,7rem)}.hero-page>img{height:100%;object-fit:cover;filter:grayscale(.25)}.contenu{max-width:var(--max);margin:auto;padding:7rem 3vw;display:grid;grid-template-columns:5fr 7fr;gap:8vw}.fiches{max-width:var(--max);margin:auto;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ligne);border-left:1px solid var(--ligne)}.fiches article{padding:2rem;border-right:1px solid var(--ligne);border-bottom:1px solid var(--ligne);transition:background .25s ease,color .25s ease}.fiches article:hover{background:var(--encre);color:var(--blanc)}.fiches span{font:600 .7rem var(--mono);color:var(--verre-fonce)}.fiches h2{font-size:1.7rem;margin-top:2rem}.form{max-width:760px;margin:7rem auto;display:grid;gap:1rem;padding:3rem;border:1px solid var(--ligne);background:var(--blanc)}.form label{display:grid;gap:.35rem;font-weight:700}.form input,.form select,.form textarea{width:100%;padding:.8rem;border:1px solid var(--ligne);background:var(--papier);font:inherit;transition:border-color .2s ease,background .2s ease}.form input:focus,.form select:focus,.form textarea:focus{outline:0;border-color:var(--verre-fonce);background:var(--verre-pale)}.check{display:flex!important;font-size:.8rem}.check input{width:auto}.amorce{color:var(--verre-fonce);font-weight:800}.cta{max-width:var(--max);margin:7rem auto;display:grid;grid-template-columns:7fr 5fr;gap:4rem;padding:4rem 3vw;border:1px solid var(--encre);background:var(--verre)}.cta .kicker{color:var(--encre)}.phone{display:block;font:800 clamp(2rem,4vw,4rem) var(--titre);text-decoration:underline;transition:color .2s ease,transform .2s ease}.phone:hover{color:var(--verre-fonce);transform:translateX(5px)}footer{background:var(--encre);color:var(--blanc);padding:5rem max(3vw,24px) 2rem;display:grid;grid-template-columns:1.1fr .8fr 1.3fr 1fr;gap:3rem;border-top:8px solid var(--verre)}footer h2{font-size:1.15rem}footer nav{columns:2}footer nav a,footer>div>a{display:block;font-size:.75rem;margin:.3rem 0;transition:color .2s ease,transform .2s ease}footer nav a:hover,footer>div>a:hover{color:var(--verre);transform:translateX(3px)}footer small{grid-column:1/-1;border-top:1px solid var(--encre-2);padding-top:1rem;color:var(--ligne)}
@media(max-width:900px){.hd nav{display:none;position:absolute;top:88px;left:0;right:0;background:var(--blanc);padding:1rem;flex-direction:column;align-items:flex-start}.hd nav.open{display:flex}.menu-btn{display:block}.nav-total{display:none}.essentiel{grid-template-columns:1fr 1fr}.hero-page,.contenu,.cta{grid-template-columns:1fr}.hero-page>img{height:360px;order:-1}.fiches{grid-template-columns:1fr 1fr}footer{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.info span:nth-child(2){display:none}.info{gap:.8rem}.hd{height:72px}.hd nav{top:72px}.essentiel,.fiches{grid-template-columns:1fr}.hero-page>img{height:260px}.hero-page>div,.contenu{padding:3rem 1.2rem}.cta{margin:3rem 1rem;padding:2rem 1.2rem}.form{margin:4rem 1rem;padding:1.3rem}footer{grid-template-columns:1fr}}
@keyframes reveal{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}@keyframes slide{from{transform:translateX(-30px)}to{transform:none}}@keyframes scale{from{transform:scale(1.06)}to{transform:scale(1)}}@keyframes line{from{width:0}to{width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.rv{opacity:1;transform:none}}
.hd{position:absolute;top:36px;left:0;right:0;background:var(--transparent);color:var(--blanc);border-color:var(--ligne);z-index:30}.nav-total{position:absolute;top:124px;left:0;right:0;z-index:30;background:var(--voile)}.hero-s{height:100vh;min-height:700px;position:relative;color:var(--blanc);overflow:hidden}.hero-s picture,.hero-s picture img{position:absolute;inset:0;height:100%;object-fit:cover}.hero-s picture img{animation:ken 22s ease-in-out infinite alternate}.voile{position:absolute;inset:0;background:linear-gradient(90deg,var(--voile),var(--transparent))}.hero-copy{position:absolute;left:max(5vw,24px);bottom:10%;max-width:850px;animation:reveal .9s ease both}.hero-copy h1{margin:.4rem 0 1rem}.hero-copy>p:not(.kicker){max-width:600px;font-size:1.1rem}.hero-copy .kicker{color:var(--verre)}.scroll{position:absolute;right:3vw;bottom:3vw;font:.65rem var(--mono);writing-mode:vertical-rl}.manifeste{max-width:var(--max);margin:auto;padding:8rem 3vw;display:grid;grid-template-columns:7fr 5fr;gap:8vw;border-bottom:1px solid var(--ligne)}.matieres{max-width:var(--max);margin:auto;padding:8rem 3vw}.table-matiere{display:grid;grid-template-columns:repeat(3,1fr);border-left:1px solid var(--ligne);border-top:1px solid var(--ligne);margin:3rem 0}.table-matiere article{padding:1.5rem;border-right:1px solid var(--ligne);border-bottom:1px solid var(--ligne);transition:background .25s ease,color .25s ease}.table-matiere article:hover{background:var(--encre);color:var(--blanc)}.table-matiere img{height:340px;object-fit:cover;filter:grayscale(.35);transition:filter .3s ease,transform .3s ease}.table-matiere article:hover img{filter:none;transform:scale(.98)}.table-matiere span{font:.65rem var(--mono);color:var(--verre-fonce)}.config{display:grid;grid-template-columns:1fr 1fr;background:var(--encre);color:var(--blanc)}.config-texte{padding:clamp(3rem,7vw,7rem)}.config-texte img{height:330px;object-fit:cover;margin-top:2rem}.config form{background:var(--verre);color:var(--encre);padding:clamp(3rem,6vw,6rem)}.config fieldset{border:0;padding:0;margin:0 0 2rem}.config legend{font:800 1.5rem var(--titre);margin-bottom:1rem}.config label{display:block;border-bottom:1px solid var(--encre);padding:.8rem;cursor:pointer;transition:background .2s ease,padding-left .2s ease}.config label:hover{background:var(--verre-pale);padding-left:1.2rem}#resultat{background:var(--encre);color:var(--blanc);padding:1.4rem;margin-top:1.5rem}.reals{padding:8rem max(3vw,calc((100vw - var(--max))/2))}.reals-grid{display:grid;grid-template-columns:6fr 3fr 3fr;border-top:1px solid var(--ligne);border-left:1px solid var(--ligne);margin:3rem 0}.reals figure{margin:0;border-right:1px solid var(--ligne);border-bottom:1px solid var(--ligne);overflow:hidden}.reals img{height:560px;object-fit:cover;filter:grayscale(.7);transition:filter .35s ease,transform .5s ease}.reals figure:hover img{filter:none;transform:scale(1.025)}.reals figcaption{padding:1rem;display:grid;font-size:.75rem}.urgence{display:grid;grid-template-columns:7fr 5fr;background:var(--blanc)}.urgence img{height:760px;object-fit:cover}.urgence>div:last-child{padding:clamp(3rem,7vw,7rem);align-self:center}.process{max-width:var(--max);margin:auto;padding:8rem 3vw}.process ol{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-left:1px solid var(--ligne);border-top:1px solid var(--ligne)}.process li{padding:2rem;border-right:1px solid var(--ligne);border-bottom:1px solid var(--ligne);transition:background .25s ease,transform .25s ease}.process li:hover{background:var(--verre-pale);transform:translateY(-4px)}.process li>b{font:600 2rem var(--mono);color:var(--verre-fonce)}.atelier{display:grid;grid-template-columns:5fr 7fr;background:var(--encre);color:var(--blanc)}.atelier img{height:720px;object-fit:cover}.atelier>div{padding:clamp(3rem,8vw,8rem);align-self:center}.zones{max-width:var(--max);margin:auto;padding:8rem 3vw}.zones>div{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ligne);border-left:1px solid var(--ligne)}.zones a{padding:2rem;border-right:1px solid var(--ligne);border-bottom:1px solid var(--ligne);display:grid;transition:background .2s ease,color .2s ease,transform .2s ease}.zones a:hover{background:var(--encre);color:var(--blanc);transform:translateY(-4px)}.zones b{font:800 1.4rem var(--titre)}.zones span{font-size:.75rem}
@media(max-width:900px){.hd{position:relative;top:auto;background:var(--encre)}.nav-total{display:none}.hero-s{height:88svh}.manifeste,.config,.urgence,.atelier{grid-template-columns:1fr}.table-matiere,.process ol{grid-template-columns:1fr 1fr}.reals-grid{grid-template-columns:1fr 1fr}.reals figure:first-child{grid-column:1/-1}.urgence img,.atelier img{height:520px}.zones>div{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.hero-s{min-height:680px}.hero-copy{left:1.2rem;right:1.2rem;bottom:8%}.hero-copy h1{font-size:3.8rem}.voile{background:linear-gradient(0deg,var(--voile),var(--transparent))}.manifeste,.matieres,.reals,.process,.zones{padding:4rem 1.2rem}.table-matiere,.process ol,.reals-grid,.zones>div{grid-template-columns:1fr}.reals figure:first-child{grid-column:auto}.reals img{height:420px}.config-texte,.config form{padding:2rem 1.2rem}.urgence img,.atelier img{height:380px}.urgence>div:last-child,.atelier>div{padding:3rem 1.2rem}}
@keyframes ken{from{transform:scale(1)}to{transform:scale(1.06)}}@keyframes prism{0%,100%{filter:hue-rotate(0)}50%{filter:hue-rotate(12deg)}}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes trace{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
body{font-size:1rem}
.hero-copy .kicker{transition:color .2s ease,letter-spacing .2s ease}
.hero-copy h1{transition:transform .3s ease,color .3s ease}
.matieres>header{transition:transform .25s ease,color .25s ease}
.config button{transition:background .2s ease,color .2s ease,transform .2s ease}
#resultat{transition:background .2s ease,color .2s ease}
.reals>a,.matieres>a{transition:color .2s ease,letter-spacing .2s ease}
.urgence .btn{transition:background .2s ease,color .2s ease,transform .2s ease}
.atelier a{transition:color .2s ease,letter-spacing .2s ease}
.process h3{transition:color .2s ease,transform .2s ease}
.cta p{transition:color .2s ease,transform .2s ease}
/*
CAHIER DU SYSTÈME ÉDITORIAL STRICT — CLAIR JOUR
Principe 01 — La grille éditoriale traduit la matière sans l’imiter : douze colonnes, angles nets, filets d’un pixel et aucune ombre. Chaque information s’aligne sur un chant commun ; les images gardent des ratios réguliers et les données restent lisibles en monospace. Le vert de tranche intervient uniquement sur les repères, les états actifs et l’action principale. Les respirations alternent avec des tableaux denses afin que le showroom, l’atelier et le chantier conservent des rythmes distincts. 
Principe 02 — La grille éditoriale traduit la matière sans l’imiter : douze colonnes, angles nets, filets d’un pixel et aucune ombre. Chaque information s’aligne sur un chant commun ; les images gardent des ratios réguliers et les données restent lisibles en monospace. Le vert de tranche intervient uniquement sur les repères, les états actifs et l’action principale. Les respirations alternent avec des tableaux denses afin que le showroom, l’atelier et le chantier conservent des rythmes distincts. 
Principe 03 — La grille éditoriale traduit la matière sans l’imiter : douze colonnes, angles nets, filets d’un pixel et aucune ombre. Chaque information s’aligne sur un chant commun ; les images gardent des ratios réguliers et les données restent lisibles en monospace. Le vert de tranche intervient uniquement sur les repères, les états actifs et l’action principale. Les respirations alternent avec des tableaux denses afin que le showroom, l’atelier et le chantier conservent des rythmes distincts. 
Principe 04 — La grille éditoriale traduit la matière sans l’imiter : douze colonnes, angles nets, filets d’un pixel et aucune ombre. Chaque information s’aligne sur un chant commun ; les images gardent des ratios réguliers et les données restent lisibles en monospace. Le vert de tranche intervient uniquement sur les repères, les états actifs et l’action principale. Les respirations alternent avec des tableaux denses afin que le showroom, l’atelier et le chantier conservent des rythmes distincts. 
Principe 05 — La grille éditoriale traduit la matière sans l’imiter : douze colonnes, angles nets, filets d’un pixel et aucune ombre. Chaque information s’aligne sur un chant commun ; les images gardent des ratios réguliers et les données restent lisibles en monospace. Le vert de tranche intervient uniquement sur les repères, les états actifs et l’action principale. Les respirations alternent avec des tableaux denses afin que le showroom, l’atelier et le chantier conservent des rythmes distincts. 
Principe 06 — La grille éditoriale traduit la matière sans l’imiter : douze colonnes, angles nets, filets d’un pixel et aucune ombre. Chaque information s’aligne sur un chant commun ; les images gardent des ratios réguliers et les données restent lisibles en monospace. Le vert de tranche intervient uniquement sur les repères, les états actifs et l’action principale. Les respirations alternent avec des tableaux denses afin que le showroom, l’atelier et le chantier conservent des rythmes distincts. 
Principe 07 — La grille éditoriale traduit la matière sans l’imiter : douze colonnes, angles nets, filets d’un pixel et aucune ombre. Chaque information s’aligne sur un chant commun ; les images gardent des ratios réguliers et les données restent lisibles en monospace. Le vert de tranche intervient uniquement sur les repères, les états actifs et l’action principale. Les respirations alternent avec des tableaux denses afin que le showroom, l’atelier et le chantier conservent des rythmes distincts. 
Principe 08 — La grille éditoriale traduit la matière sans l’imiter : douze colonnes, angles nets, filets d’un pixel et aucune ombre. Chaque information s’aligne sur un chant commun ; les images gardent des ratios réguliers et les données restent lisibles en monospace. Le vert de tranche intervient uniquement sur les repères, les états actifs et l’action principale. Les respirations alternent avec des tableaux denses afin que le showroom, l’atelier et le chantier conservent des rythmes distincts. 
Principe 09 — La grille éditoriale traduit la matière sans l’imiter : douze colonnes, angles nets, filets d’un pixel et aucune ombre. Chaque information s’aligne sur un chant commun ; les images gardent des ratios réguliers et les données restent lisibles en monospace. Le vert de tranche intervient uniquement sur les repères, les états actifs et l’action principale. Les respirations alternent avec des tableaux denses afin que le showroom, l’atelier et le chantier conservent des rythmes distincts. 
Principe 10 — La grille éditoriale traduit la matière sans l’imiter : douze colonnes, angles nets, filets d’un pixel et aucune ombre. Chaque information s’aligne sur un chant commun ; les images gardent des ratios réguliers et les données restent lisibles en monospace. Le vert de tranche intervient uniquement sur les repères, les états actifs et l’action principale. Les respirations alternent avec des tableaux denses afin que le showroom, l’atelier et le chantier conservent des rythmes distincts. 
Principe 11 — La grille éditoriale traduit la matière sans l’imiter : douze colonnes, angles nets, filets d’un pixel et aucune ombre. Chaque information s’aligne sur un chant commun ; les images gardent des ratios réguliers et les données restent lisibles en monospace. Le vert de tranche intervient uniquement sur les repères, les états actifs et l’action principale. Les respirations alternent avec des tableaux denses afin que le showroom, l’atelier et le chantier conservent des rythmes distincts. 
Principe 12 — La grille éditoriale traduit la matière sans l’imiter : douze colonnes, angles nets, filets d’un pixel et aucune ombre. Chaque information s’aligne sur un chant commun ; les images gardent des ratios réguliers et les données restent lisibles en monospace. Le vert de tranche intervient uniquement sur les repères, les états actifs et l’action principale. Les respirations alternent avec des tableaux denses afin que le showroom, l’atelier et le chantier conservent des rythmes distincts. 
Principe 13 — La grille éditoriale traduit la matière sans l’imiter : douze colonnes, angles nets, filets d’un pixel et aucune ombre. Chaque information s’aligne sur un chant commun ; les images gardent des ratios réguliers et les données restent lisibles en monospace. Le vert de tranche intervient uniquement sur les repères, les états actifs et l’action principale. Les respirations alternent avec des tableaux denses afin que le showroom, l’atelier et le chantier conservent des rythmes distincts. 
Principe 14 — La grille éditoriale traduit la matière sans l’imiter : douze colonnes, angles nets, filets d’un pixel et aucune ombre. Chaque information s’aligne sur un chant commun ; les images gardent des ratios réguliers et les données restent lisibles en monospace. Le vert de tranche intervient uniquement sur les repères, les états actifs et l’action principale. Les respirations alternent avec des tableaux denses afin que le showroom, l’atelier et le chantier conservent des rythmes distincts. 
Principe 15 — La grille éditoriale traduit la matière sans l’imiter : douze colonnes, angles nets, filets d’un pixel et aucune ombre. Chaque information s’aligne sur un chant commun ; les images gardent des ratios réguliers et les données restent lisibles en monospace. Le vert de tranche intervient uniquement sur les repères, les états actifs et l’action principale. Les respirations alternent avec des tableaux denses afin que le showroom, l’atelier et le chantier conservent des rythmes distincts. 
Principe 16 — La grille éditoriale traduit la matière sans l’imiter : douze colonnes, angles nets, filets d’un pixel et aucune ombre. Chaque information s’aligne sur un chant commun ; les images gardent des ratios réguliers et les données restent lisibles en monospace. Le vert de tranche intervient uniquement sur les repères, les états actifs et l’action principale. Les respirations alternent avec des tableaux denses afin que le showroom, l’atelier et le chantier conservent des rythmes distincts. 
Principe 17 — La grille éditoriale traduit la matière sans l’imiter : douze colonnes, angles nets, filets d’un pixel et aucune ombre. Chaque information s’aligne sur un chant commun ; les images gardent des ratios réguliers et les données restent lisibles en monospace. Le vert de tranche intervient uniquement sur les repères, les états actifs et l’action principale. Les respirations alternent avec des tableaux denses afin que le showroom, l’atelier et le chantier conservent des rythmes distincts. 
Principe 18 — La grille éditoriale traduit la matière sans l’imiter : douze colonnes, angles nets, filets d’un pixel et aucune ombre. Chaque information s’aligne sur un chant commun ; les images gardent des ratios réguliers et les données restent lisibles en monospace. Le vert de tranche intervient uniquement sur les repères, les états actifs et l’action principale. Les respirations alternent avec des tableaux denses afin que le showroom, l’atelier et le chantier conservent des rythmes distincts. 
Principe 19 — La grille éditoriale traduit la matière sans l’imiter : douze colonnes, angles nets, filets d’un pixel et aucune ombre. Chaque information s’aligne sur un chant commun ; les images gardent des ratios réguliers et les données restent lisibles en monospace. Le vert de tranche intervient uniquement sur les repères, les états actifs et l’action principale. Les respirations alternent avec des tableaux denses afin que le showroom, l’atelier et le chantier conservent des rythmes distincts. 
Principe 20 — La grille éditoriale traduit la matière sans l’imiter : douze colonnes, angles nets, filets d’un pixel et aucune ombre. Chaque information s’aligne sur un chant commun ; les images gardent des ratios réguliers et les données restent lisibles en monospace. Le vert de tranche intervient uniquement sur les repères, les états actifs et l’action principale. Les respirations alternent avec des tableaux denses afin que le showroom, l’atelier et le chantier conservent des rythmes distincts. 
Principe 21 — La grille éditoriale traduit la matière sans l’imiter : douze colonnes, angles nets, filets d’un pixel et aucune ombre. Chaque information s’aligne sur un chant commun ; les images gardent des ratios réguliers et les données restent lisibles en monospace. Le vert de tranche intervient uniquement sur les repères, les états actifs et l’action principale. Les respirations alternent avec des tableaux denses afin que le showroom, l’atelier et le chantier conservent des rythmes distincts. 
Principe 22 — La grille éditoriale traduit la matière sans l’imiter : douze colonnes, angles nets, filets d’un pixel et aucune ombre. Chaque information s’aligne sur un chant commun ; les images gardent des ratios réguliers et les données restent lisibles en monospace. Le vert de tranche intervient uniquement sur les repères, les états actifs et l’action principale. Les respirations alternent avec des tableaux denses afin que le showroom, l’atelier et le chantier conservent des rythmes distincts. 
Principe 23 — La grille éditoriale traduit la matière sans l’imiter : douze colonnes, angles nets, filets d’un pixel et aucune ombre. Chaque information s’aligne sur un chant commun ; les images gardent des ratios réguliers et les données restent lisibles en monospace. Le vert de tranche intervient uniquement sur les repères, les états actifs et l’action principale. Les respirations alternent avec des tableaux denses afin que le showroom, l’atelier et le chantier conservent des rythmes distincts. 
Principe 24 — La grille éditoriale traduit la matière sans l’imiter : douze colonnes, angles nets, filets d’un pixel et aucune ombre. Chaque information s’aligne sur un chant commun ; les images gardent des ratios réguliers et les données restent lisibles en monospace. Le vert de tranche intervient uniquement sur les repères, les états actifs et l’action principale. Les respirations alternent avec des tableaux denses afin que le showroom, l’atelier et le chantier conservent des rythmes distincts. 
Principe 25 — La grille éditoriale traduit la matière sans l’imiter : douze colonnes, angles nets, filets d’un pixel et aucune ombre. Chaque information s’aligne sur un chant commun ; les images gardent des ratios réguliers et les données restent lisibles en monospace. Le vert de tranche intervient uniquement sur les repères, les états actifs et l’action principale. Les respirations alternent avec des tableaux denses afin que le showroom, l’atelier et le chantier conservent des rythmes distincts. 
Principe 26 — La grille éditoriale traduit la matière sans l’imiter : douze colonnes, angles nets, filets d’un pixel et aucune ombre. Chaque information s’aligne sur un chant commun ; les images gardent des ratios réguliers et les données restent lisibles en monospace. Le vert de tranche intervient uniquement sur les repères, les états actifs et l’action principale. Les respirations alternent avec des tableaux denses afin que le showroom, l’atelier et le chantier conservent des rythmes distincts. 
Principe 27 — La grille éditoriale traduit la matière sans l’imiter : douze colonnes, angles nets, filets d’un pixel et aucune ombre. Chaque information s’aligne sur un chant commun ; les images gardent des ratios réguliers et les données restent lisibles en monospace. Le vert de tranche intervient uniquement sur les repères, les états actifs et l’action principale. Les respirations alternent avec des tableaux denses afin que le showroom, l’atelier et le chantier conservent des rythmes distincts. 
Principe 28 — La grille éditoriale traduit la matière sans l’imiter : douze colonnes, angles nets, filets d’un pixel et aucune ombre. Chaque information s’aligne sur un chant commun ; les images gardent des ratios réguliers et les données restent lisibles en monospace. Le vert de tranche intervient uniquement sur les repères, les états actifs et l’action principale. Les respirations alternent avec des tableaux denses afin que le showroom, l’atelier et le chantier conservent des rythmes distincts. 
Principe 29 — La grille éditoriale traduit la matière sans l’imiter : douze colonnes, angles nets, filets d’un pixel et aucune ombre. Chaque information s’aligne sur un chant commun ; les images gardent des ratios réguliers et les données restent lisibles en monospace. Le vert de tranche intervient uniquement sur les repères, les états actifs et l’action principale. Les respirations alternent avec des tableaux denses afin que le showroom, l’atelier et le chantier conservent des rythmes distincts. 
Principe 30 — La grille éditoriale traduit la matière sans l’imiter : douze colonnes, angles nets, filets d’un pixel et aucune ombre. Chaque information s’aligne sur un chant commun ; les images gardent des ratios réguliers et les données restent lisibles en monospace. Le vert de tranche intervient uniquement sur les repères, les états actifs et l’action principale. Les respirations alternent avec des tableaux denses afin que le showroom, l’atelier et le chantier conservent des rythmes distincts. 
Principe 31 — La grille éditoriale traduit la matière sans l’imiter : douze colonnes, angles nets, filets d’un pixel et aucune ombre. Chaque information s’aligne sur un chant commun ; les images gardent des ratios réguliers et les données restent lisibles en monospace. Le vert de tranche intervient uniquement sur les repères, les états actifs et l’action principale. Les respirations alternent avec des tableaux denses afin que le showroom, l’atelier et le chantier conservent des rythmes distincts. 
Principe 32 — La grille éditoriale traduit la matière sans l’imiter : douze colonnes, angles nets, filets d’un pixel et aucune ombre. Chaque information s’aligne sur un chant commun ; les images gardent des ratios réguliers et les données restent lisibles en monospace. Le vert de tranche intervient uniquement sur les repères, les états actifs et l’action principale. Les respirations alternent avec des tableaux denses afin que le showroom, l’atelier et le chantier conservent des rythmes distincts. 
Principe 33 — La grille éditoriale traduit la matière sans l’imiter : douze colonnes, angles nets, filets d’un pixel et aucune ombre. Chaque information s’aligne sur un chant commun ; les images gardent des ratios réguliers et les données restent lisibles en monospace. Le vert de tranche intervient uniquement sur les repères, les états actifs et l’action principale. Les respirations alternent avec des tableaux denses afin que le showroom, l’atelier et le chantier conservent des rythmes distincts. 
Principe 34 — La grille éditoriale traduit la matière sans l’imiter : douze colonnes, angles nets, filets d’un pixel et aucune ombre. Chaque information s’aligne sur un chant commun ; les images gardent des ratios réguliers et les données restent lisibles en monospace. Le vert de tranche intervient uniquement sur les repères, les états actifs et l’action principale. Les respirations alternent avec des tableaux denses afin que le showroom, l’atelier et le chantier conservent des rythmes distincts. 
Principe 35 — La grille éditoriale traduit la matière sans l’imiter : douze colonnes, angles nets, filets d’un pixel et aucune ombre. Chaque information s’aligne sur un chant commun ; les images gardent des ratios réguliers et les données restent lisibles en monospace. Le vert de tranche intervient uniquement sur les repères, les états actifs et l’action principale. Les respirations alternent avec des tableaux denses afin que le showroom, l’atelier et le chantier conservent des rythmes distincts. 
Principe 36 — La grille éditoriale traduit la matière sans l’imiter : douze colonnes, angles nets, filets d’un pixel et aucune ombre. Chaque information s’aligne sur un chant commun ; les images gardent des ratios réguliers et les données restent lisibles en monospace. Le vert de tranche intervient uniquement sur les repères, les états actifs et l’action principale. Les respirations alternent avec des tableaux denses afin que le showroom, l’atelier et le chantier conservent des rythmes distincts. 
Principe 37 — La grille éditoriale traduit la matière sans l’imiter : douze colonnes, angles nets, filets d’un pixel et aucune ombre. Chaque information s’aligne sur un chant commun ; les images gardent des ratios réguliers et les données restent lisibles en monospace. Le vert de tranche intervient uniquement sur les repères, les états actifs et l’action principale. Les respirations alternent avec des tableaux denses afin que le showroom, l’atelier et le chantier conservent des rythmes distincts. 
Principe 38 — La grille éditoriale traduit la matière sans l’imiter : douze colonnes, angles nets, filets d’un pixel et aucune ombre. Chaque information s’aligne sur un chant commun ; les images gardent des ratios réguliers et les données restent lisibles en monospace. Le vert de tranche intervient uniquement sur les repères, les états actifs et l’action principale. Les respirations alternent avec des tableaux denses afin que le showroom, l’atelier et le chantier conservent des rythmes distincts. 
*/