/* NORMA — page de l'outil en ligne (norma.science). Propre à body.page-norma ; s'appuie sur site.css.
   Palette : graphite presque noir, papier, vert acide du symbole NORMA, et les aplats primaires de Construct.
   Contrastes mesurés (WCAG AA) : papier/graphite 16,9:1 · gris clair/graphite 7,9:1 · gris/papier 5,8:1 ·
   encre/vert acide 16,3:1 · vert acide/graphite 15,7:1. Grille de site.css (Fibonacci, quarte). */

.page-norma{
  --n-nuit:#121311; --n-nuit-2:#1C1D1A; --n-papier:#F2EFE7; --n-papier-2:#E8E4D9;
  --n-encre:#151613; --n-gris:#5B5D56; --n-gris-clair:#A9AAA1; --n-lune:#D4D2C8;
  --n-filet:#CDC8B8; --n-filet-sombre:rgba(242,239,231,.17);
  --n-acide:#C9FF2E; --n-rose:#FF2E93; --n-orange:#FF641F; --n-lime:#D5F200;
  --n-grotesque:var(--texte);
  background:var(--n-papier);color:var(--n-encre)
}

/* — En-tête et focus — */
.page-norma .entete{background:color-mix(in srgb,var(--n-nuit) 88%,transparent);border-bottom-color:var(--n-filet-sombre);color:var(--n-papier)}
.page-norma .langues{border-left-color:var(--n-filet-sombre)}
.page-norma :focus-visible{outline-color:var(--n-encre);box-shadow:0 0 0 5px var(--n-papier)}
.page-norma .entete :focus-visible,.page-norma .sombre :focus-visible{outline-color:var(--n-acide);box-shadow:0 0 0 5px var(--n-nuit)}
.page-norma .n-fin :focus-visible{outline-color:var(--n-encre);box-shadow:0 0 0 5px var(--n-acide)}

/* — Typographie commune — */
.page-norma .etiquette{color:var(--n-encre);display:flex;align-items:center;gap:.7em}
.page-norma .etiquette::before{content:"";width:.62em;height:.62em;background:currentColor;flex:none}
.page-norma .sombre .etiquette{color:var(--n-papier)}
.page-norma .sombre .etiquette::before{background:var(--n-acide)}
.page-norma h2 em,.page-norma .n-h3 em{font-style:italic;font-variation-settings:"SOFT" 100,"WONK" 1}
.page-norma .sombre h2 em,.page-norma .sombre .n-h3 em{color:var(--n-acide)}
.page-norma .chapeau{color:var(--n-gris)}
.page-norma .sombre .chapeau{color:var(--n-lune)}
.n-texte-sourd{color:var(--n-gris)}
.sombre .n-texte-sourd{color:var(--n-gris-clair)}
.n-h3{font-family:var(--serif);font-weight:380;font-size:clamp(var(--t2),3.2vw,var(--t4));line-height:1.04;letter-spacing:-.025em;margin:0 0 var(--e3)}
.n-grand-texte{font-family:var(--serif);font-weight:360;font-size:clamp(var(--t1),2.3vw,var(--t2));line-height:1.22;letter-spacing:-.015em;margin:0 0 var(--e3)}
.n-pas{font-family:var(--n-grotesque);font-size:.8125rem;font-weight:600;letter-spacing:.14em;font-variant-numeric:tabular-nums;color:var(--n-gris)}
.sombre .n-pas{color:var(--n-gris-clair)}
.page-norma figcaption{display:flex;justify-content:space-between;gap:var(--e2);padding:var(--e2) 0 0;margin-top:var(--e2);border-top:1px solid var(--n-filet);font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--n-gris)}
.page-norma .sombre figcaption{border-top-color:var(--n-filet-sombre);color:var(--n-gris-clair)}
.page-norma figure{margin:0}

/* — Boutons et liens — */
.page-norma .bouton.plein{background:var(--n-encre);border-color:var(--n-encre);color:var(--n-papier)}
.page-norma .bouton.plein:hover{background:#2C2E28;border-color:#2C2E28}
.page-norma .sombre .bouton{color:var(--n-papier)}
.page-norma .sombre .bouton.plein{background:var(--n-acide);border-color:var(--n-acide);color:var(--n-encre)}
.page-norma .sombre .bouton.plein:hover{background:#DDFF7A;border-color:#DDFF7A}
.page-norma .sombre .lien-fleche{color:var(--n-acide)}

/* — Ouverture — */
.n-ouverture{background:var(--n-nuit);color:var(--n-papier);padding:var(--e3) 0 var(--e5);overflow:hidden}
.n-regle{display:flex;justify-content:space-between;align-items:center;gap:var(--e3);border-bottom:1px solid var(--n-filet-sombre);font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--n-gris-clair)}
.n-regle-marque{display:inline-flex;align-items:center;gap:.7rem}
.n-regle-marque img{width:1.375rem;height:1.375rem}
.n-regle a{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;text-decoration:none;color:var(--n-papier);letter-spacing:.08em;text-transform:none;font-size:.9375rem}
.n-regle a:hover{color:var(--n-acide)}
.n-regle-milieu{display:none}
.n-ouverture-grille{display:grid;grid-template-columns:1fr;gap:var(--e5);padding-top:var(--e5);align-items:end}
.n-titre{font-family:var(--n-grotesque);font-weight:760;font-stretch:75%;font-size:clamp(5.5rem,39vw,14rem);line-height:.78;letter-spacing:-.025em;margin:var(--e2) 0 var(--e4) -.04em;text-transform:uppercase}
.n-devise{font-family:var(--serif);font-weight:340;font-size:clamp(var(--t3),5vw,var(--t5));line-height:1;letter-spacing:-.03em;margin:0 0 var(--e4)}
.n-devise em{font-style:italic;color:var(--n-acide);font-variation-settings:"SOFT" 100,"WONK" 1}
.n-ouverture .chapeau{max-width:33rem}
.n-ouverture-image .agrandir{background:var(--n-nuit-2)}
.n-fiche{display:grid;grid-template-columns:1fr 1fr;margin:var(--e5) 0 0;border-top:1px solid var(--n-filet-sombre)}
.n-fiche div{padding:var(--e2) var(--e2) var(--e2) 0;border-bottom:1px solid var(--n-filet-sombre)}
.n-fiche dt{font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--n-gris-clair);margin-bottom:.2rem}
.n-fiche dd{margin:0;font-size:1rem;line-height:1.35;color:var(--n-papier)}
.n-fiche div:last-child{grid-column:1/-1}

/* — Mises en page à deux colonnes (5/7 : coupe de site.css) — */
.n-deux{display:grid;grid-template-columns:1fr;gap:var(--e4) var(--e5)}

/* — Principe — */
.n-principe{padding:var(--e6) 0}
.n-principe h2{margin:0}
.n-index{list-style:none;padding:0;margin:var(--e4) 0 0;border-top:1.5px solid var(--n-encre)}
.n-index a{display:grid;grid-template-columns:2.4rem 1fr auto;grid-template-areas:"num nom fleche" "num role fleche";gap:.1rem var(--e2);align-items:baseline;padding:var(--e3) 0;min-height:44px;text-decoration:none;border-bottom:1px solid var(--n-filet)}
.n-index-num{grid-area:num;font-size:.8125rem;font-weight:600;letter-spacing:.14em;color:var(--n-gris)}
.n-index-nom{grid-area:nom;font-family:var(--n-grotesque);font-weight:750;font-stretch:80%;font-size:var(--t2);line-height:1;letter-spacing:-.025em}
.n-index-role{grid-area:role;color:var(--n-gris);font-size:.9375rem}
.n-index-fleche{grid-area:fleche;font-size:var(--t1);transition:transform .35s var(--ease)}
.n-index a:hover .n-index-fleche{transform:translateY(5px)}
.n-index a:hover .n-index-nom{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.15em}

/* — Chapitres — */
.n-chapitre{padding:var(--e6) 0}
.n-construct{background:var(--n-nuit);color:var(--n-papier)}
.n-tete{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"num role" "outil outil";align-items:baseline;border-top:2px solid currentColor;padding-top:var(--e2);margin-bottom:var(--e5)}
.n-num{grid-area:num;margin:0;font-size:.8125rem;font-weight:600;letter-spacing:.16em;font-variant-numeric:tabular-nums}
.n-role{grid-area:role;margin:0;text-align:right;font-size:.8125rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.n-outil{grid-area:outil;font-family:var(--n-grotesque);font-weight:760;font-stretch:75%;font-size:clamp(4.5rem,21vw,11.5rem);line-height:.8;letter-spacing:-.025em;margin:var(--e3) 0 0 -.035em}
.n-texte>p:last-child{margin-bottom:0}
.page-norma .n-bloc{margin-top:var(--e6)}

/* Captures d'écran : cadre au filet */
.n-capture .agrandir,.n-atelier .agrandir{border:1px solid var(--n-filet);border-radius:.75rem;overflow:hidden;background:#F4F2EC}
.n-atelier .agrandir{border-color:var(--n-filet-sombre);background:#161714}

/* Boucle de Create */
.n-boucle{list-style:none;padding:0;margin:var(--e6) 0 0;display:grid;grid-template-columns:1fr;border-top:1px solid var(--n-encre)}
.n-boucle li{padding:var(--e3) 0 var(--e4);border-bottom:1px solid var(--n-filet)}
.n-marque{display:block;width:9.5rem;height:auto;margin:var(--e3) 0 var(--e4);box-shadow:0 18px 36px -18px rgba(21,22,19,.35)}
.n-marque .n-a{fill:var(--n-rose)}
.n-marque .n-b{fill:var(--n-orange)}
.n-marque .n-c{fill:var(--n-lime)}
.n-boucle h4,.n-gestes h4,.n-usages h4{font-family:var(--n-grotesque);font-weight:700;font-stretch:85%;font-size:var(--t1);line-height:1.1;letter-spacing:-.015em;margin:0 0 var(--e1)}
.n-boucle p,.n-gestes p{margin:0;color:var(--n-gris);max-width:22rem}

/* Photo Remix */
.n-remix{display:grid;grid-template-columns:1fr;gap:var(--e4) var(--e5);margin-top:var(--e6);align-items:end}
.n-sources{display:flex;align-items:center;gap:var(--e2);margin-top:var(--e4)}
.n-sources ol{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e1);flex:1}
.n-sources li span{display:block;margin-top:.35rem;font-size:.75rem;font-weight:600;letter-spacing:.14em;color:var(--n-gris)}
.n-sources img{aspect-ratio:1;object-fit:cover;width:100%}
.n-vers{font-size:var(--t2);line-height:1;padding-bottom:1.2rem}
.n-citation{font-family:var(--serif);font-weight:360;font-size:clamp(var(--t1),2.6vw,var(--t3));line-height:1.18;letter-spacing:-.02em;margin:var(--e5) 0 0;padding-top:var(--e3);border-top:1px solid var(--n-encre);max-width:52rem}
.n-citation em{font-style:italic;font-variation-settings:"SOFT" 100,"WONK" 1}
.sombre .n-citation{border-top-color:var(--n-filet-sombre)}
.sombre .n-citation em{color:var(--n-acide)}

/* — Construct — */
.n-champ .agrandir{background:#1B1B1B}
.n-preuves{list-style:none;padding:0;margin:var(--e4) 0;display:flex;flex-wrap:wrap;border-top:1px solid var(--n-filet-sombre)}
.n-preuves li{flex:1 1 9rem;padding:var(--e2) var(--e2) var(--e2) 0;font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--n-papier);border-bottom:1px solid var(--n-filet-sombre)}
.n-devise-large{font-family:var(--serif);font-weight:340;font-size:clamp(var(--t2),4.2vw,var(--t5));line-height:1.04;letter-spacing:-.03em;margin:var(--e6) 0 0;padding:var(--e4) 0;border-top:1px solid var(--n-filet-sombre);border-bottom:1px solid var(--n-filet-sombre)}
.n-devise-large em{font-style:italic;color:var(--n-acide);font-variation-settings:"SOFT" 100,"WONK" 1}
.n-gestes{list-style:none;padding:0;margin:var(--e4) 0 0;display:grid;grid-template-columns:1fr;gap:var(--e4)}
.n-gestes img{width:100%;margin-bottom:var(--e3)}
.n-gestes .n-pas{display:block;margin-bottom:var(--e1)}
.n-gestes p{color:var(--n-gris-clair)}
.n-systemes{display:grid;grid-template-columns:1fr;gap:var(--e4) var(--e5);align-items:start}
.n-systemes-image .agrandir{background:#1B1B1B}
.n-usages ol{list-style:none;padding:0;margin:var(--e4) 0 0;border-top:1px solid var(--n-papier)}
.n-usages li{display:grid;grid-template-columns:2.4rem 1fr;gap:.2rem var(--e2);padding:var(--e3) 0;border-bottom:1px solid var(--n-filet-sombre)}
.n-usages h4{grid-column:2;margin:0}
.n-usages p{grid-column:2;margin:0;color:var(--n-gris-clair)}
.n-usages .n-pas{padding-top:.35rem}

/* — Galerie — */
.n-galerie{padding:var(--e6) 0}
.n-galerie-tete{align-items:end;margin-bottom:var(--e5)}
.n-galerie-tete h2{margin:0}
.n-galerie-tete .chapeau{margin:0}
.n-murs{columns:2;column-gap:var(--e2);margin-bottom:var(--e4)}
.n-rang{display:contents}
.n-murs figure{break-inside:avoid;margin:0 0 var(--e3)}
.n-murs .agrandir{background:var(--n-papier-2)}
.n-murs img{width:100%}
.n-murs figcaption{display:block;border-top:0;padding:0;margin-top:var(--e1);text-transform:none;letter-spacing:0;font-weight:400}
.n-murs figcaption i{display:block;font-family:var(--serif);font-size:1rem;line-height:1.25;color:var(--n-encre);letter-spacing:-.005em}
.n-murs figcaption span{display:block;font-size:.8125rem;color:var(--n-gris);margin-top:.15rem}

/* — Fin — */
.n-fin{background:var(--n-acide);color:var(--n-encre);padding:var(--e6) 0}
.n-fin h2{margin:0}
.n-fin .chapeau{color:var(--n-encre)}
.n-fin .bouton{color:var(--n-encre)}
.n-fin .bouton.plein{background:var(--n-encre);border-color:var(--n-encre);color:var(--n-acide)}
.n-fin .bouton.plein:hover{background:#2C2E28;border-color:#2C2E28}

/* — Tablettes — */
@media (min-width:40rem){
  .n-regle-milieu{display:inline}
  .n-fiche{grid-template-columns:repeat(3,1fr)}
  .n-fiche div:last-child{grid-column:auto}
  .n-boucle{grid-template-columns:repeat(3,1fr)}
  .n-boucle li{padding:var(--e3) var(--e3) var(--e4);border-bottom:0;border-right:1px solid var(--n-filet)}
  .n-boucle li:first-child{padding-left:0}
  .n-boucle li:last-child{border-right:0}
  .n-gestes{grid-template-columns:repeat(3,1fr)}
  .n-murs{columns:3;column-gap:var(--e3)}
}
/* — Grands écrans : rangs justifiés de la galerie, coupes 5/7 — */
@media (min-width:60rem){
  .n-ouverture{padding-bottom:var(--e6)}
  .n-ouverture-grille{grid-template-columns:1fr 1fr;gap:var(--e5)}
  .n-titre{font-size:clamp(9rem,18.6vw,17.6rem);margin-top:var(--e3)}
  .n-fiche{grid-template-columns:repeat(5,1fr);margin-top:var(--e6)}
  .n-fiche div{padding-right:var(--e3)}
  .n-fiche div+div{padding-left:var(--e3);border-left:1px solid var(--n-filet-sombre)}
  .n-deux{grid-template-columns:5fr 7fr}
  .n-principe .n-deux{grid-template-columns:5fr 7fr}
  .n-create-intro{align-items:center}
  .n-construct-intro{grid-template-columns:6fr 6fr;align-items:center}
  .n-chapitre{padding:var(--e7) 0}
  .n-remix{grid-template-columns:5fr 7fr}
  .n-systemes{grid-template-columns:4fr 8fr}
  .n-galerie-tete{grid-template-columns:7fr 5fr}
  .n-fin .n-deux{grid-template-columns:7fr 5fr;align-items:end}
  .n-usages li{grid-template-columns:3rem 5fr 7fr;align-items:baseline}
  .n-usages h4{grid-column:2}
  .n-usages p{grid-column:3}
  .n-murs{columns:auto}
  .n-rang{display:flex;gap:var(--e3);align-items:flex-start;margin-bottom:var(--e4)}
  .n-murs figure{margin:0;min-width:0;flex-basis:0;flex-shrink:1}
  /* largeur ∝ rapport largeur/hauteur : même hauteur dans un rang */
  .g-athenee-royal-tow-explode,.g-two-men-terracotta-axis{flex-grow:1.4995}
  .g-counterweight-in-cobalt{flex-grow:.8281}
  .g-three-cats-modular{flex-grow:.8}
  .g-altoviti-blue-measure{flex-grow:.8659}
  .g-quiet-root-three-study{flex-grow:.577}
  .g-silver-girl-double-frame{flex-grow:.8948}
  .g-poussin-field-notes{flex-grow:1.3245}
  .g-hothocleana-green-archive{flex-grow:.7637}
}
/* — Téléphones — */
@media (max-width:40rem){
  .n-regle{font-size:.75rem;letter-spacing:.1em}
  .n-chapitre{padding:var(--e5) 0}
  .page-norma .n-bloc{margin-top:var(--e5)}
  .n-devise-large{margin-top:var(--e5)}
  .page-norma figcaption{flex-direction:column;gap:.2rem}
  .page-norma .n-murs figcaption{gap:0}
  /* gestes et boucle : dessin à gauche, texte à droite, pour ne pas empiler trois grands carrés */
  .n-boucle li,.n-gestes li{display:grid;grid-template-columns:6.5rem 1fr;gap:0 var(--e3);align-items:start}
  .n-boucle li>*,.n-gestes li>*{grid-column:2}
  .n-boucle .n-marque,.n-gestes img{grid-column:1;grid-row:1/span 3;width:100%;margin:0}
  .n-boucle .n-pas,.n-gestes .n-pas{margin-bottom:var(--e1)}
  .n-gestes{gap:0;border-top:1px solid var(--n-filet-sombre)}
  .n-gestes li{padding:var(--e3) 0;border-bottom:1px solid var(--n-filet-sombre)}
  .n-boucle li{padding:var(--e3) 0}
}