/* ============================================================
   metals.css - pages metal, brief § 7 / § 9

   Les jetons du brief sont poses sur .metal-page, JAMAIS sur :root.
   site.css definit deja --ink (#15161a, une couleur de TEXTE) et le
   brief definit --ink (#F5F4F2, une couleur de FOND) : les deux sont
   inverses. Les redeclarer globalement retournerait le header.
   Portes ici, ils ne descendent que dans <main>. Le header et le
   footer restent sur la palette de site.css, intacts.
   ============================================================ */

.metal-page{
  --ink:#F5F4F2;                    /* fond */
  --paper:#141414;                  /* texte */
  --dim:#6B6B69;                    /* texte secondaire */
  --accent:#C8102E;                 /* liens d'action */
  --line:rgba(20,20,20,.22);        /* filets */
  --thread:rgba(20,20,20,.46);      /* traits appuyes */
  --display:'Instrument Serif',Georgia,serif;
  --body:'Inter',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --pad:clamp(20px,4vw,64px);
  --bleed:clamp(80px,12vw,180px);   /* le vide qui fait le rythme */

  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
}
body.metal{background:#F5F4F2}
body.metal{overflow-x:hidden}

.metal-page .mp-wrap{
  max-width:1480px;margin-left:auto;margin-right:auto;margin-inline:auto;padding-left:var(--pad);padding-right:var(--pad);padding-inline:var(--pad);
}
@media (min-width:1900px){.metal-page .mp-wrap{max-width:1640px}}

/* ---------- 2. retour ---------- */
.metal-page .mp-back{
  display:inline-block;margin-top:clamp(28px,5vw,56px);
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);text-decoration:none;
  padding:6px 0;min-height:24px;
}
.metal-page .mp-back:hover,
.metal-page .mp-back:focus-visible{color:var(--accent)}

/* ---------- 2 bis. anneau de focus ----------
   site.css:879-881 peint l anneau en `var(--ink)` : sur le reste du site --ink
   est l ENCRE, un gris tres sombre, donc l anneau se voit. Ici, dans
   .metal-page, --ink est redefini ligne 13 comme le FOND (#F5F4F2) et la page
   pose `background:var(--ink)`. L anneau etait donc peint exactement dans la
   couleur du fond : invisible sur les huit pages metal, pour toute navigation
   au clavier. C est le meme piege que celui documente pour approach.html.
   On ne touche NI a --ink NI a la regle globale : on redonne seulement une
   couleur a l anneau a l interieur de <main>, avec --paper (#141414, la
   couleur de texte de ces pages), qui tranche sur le fond clair.
   Specificite (0,2,1) contre (0,1,1) : gagne sans !important. */
.metal-page a:focus-visible,
.metal-page button:focus-visible,
.metal-page summary:focus-visible,
.metal-page input:focus-visible,
.metal-page select:focus-visible,
.metal-page textarea:focus-visible{outline-color:var(--paper)}

/* ---------- 3. stage ---------- */
.metal-page .mp-stage{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,72px);align-items:end;
  padding-top:clamp(24px,4vw,48px);padding-bottom:var(--bleed);padding-block:clamp(24px,4vw,48px) var(--bleed);
}
.metal-page .mp-kicker{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);margin-bottom:clamp(14px,2vw,22px);
}
.metal-page h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(40px,6vw,92px);line-height:1.02;letter-spacing:-.015em;
  color:var(--paper);margin:0;
}
.metal-page .mp-shot{margin:0;aspect-ratio:16/9;background:var(--line);overflow:hidden}
/* aspect-ratio n existe qu a partir de Safari 15. Sans elle la figure retombe a
   une hauteur automatique, la photo sort a son rapport naturel et copper.html,
   dont le fichier est un portrait 900x1350, affichait un pave vertical au milieu
   de la page. Le vieux truc du padding en pourcentage donne exactement le meme
   16/9. Sous @supports NOT : aucun navigateur moderne ne le voit. */
@supports not (aspect-ratio:16/9){
 .metal-page .mp-shot{position:relative;height:0;padding-top:56.25%}
 .metal-page .mp-shot img{position:absolute;top:0;left:0}
}
.metal-page .mp-shot img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- 4. filet pleine largeur ---------- */
.metal-page .mp-rule{
  border:0;border-top:1px solid var(--line);margin:0;width:100%;
}

/* ---------- 5. intro ---------- */
/* Texte a gauche, les trois constantes en face a droite. La colonne de
   chiffres est bornee : sans borne elle prend 1fr et pousse la colonne de
   texte sous les 62ch imposes par le § 7. */
.metal-page .mp-intro{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(170px,17vw,250px);
  gap:clamp(28px,5vw,80px);
  align-items:start;
}
.metal-page .mp-facts{display:grid;gap:clamp(24px,3.2vw,44px)}

/* Le vide du § 7 s applique UNE fois entre deux blocs, pas deux (padding
   bas + padding haut se seraient additionnes a 360px). */
.metal-page .mp-flow{padding-top:var(--bleed);padding-bottom:var(--bleed);padding-block:var(--bleed)}
.metal-page .mp-flow > * + *{margin-top:var(--bleed)}
.metal-page .mp-lead{
  font-family:var(--display);font-weight:400;
  font-size:clamp(24px,2.9vw,40px);line-height:1.22;letter-spacing:-.01em;
  max-width:26ch;margin:0 0 clamp(36px,5vw,64px);
}
.metal-page .mp-body p{
  font-size:clamp(16px,1.3vw,19px);line-height:1.55;max-width:62ch;
  margin:0 0 1.35em;color:var(--paper);
}
.metal-page .mp-body p:last-child{margin-bottom:0}

/* ---------- section : sur-titre + h2 ---------- */
.metal-page .mp-h{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);margin:0 0 clamp(24px,3vw,40px);
}
.metal-page h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(28px,3.4vw,48px);line-height:1.08;letter-spacing:-.015em;
  margin:0 0 clamp(30px,4vw,52px);color:var(--paper);
}

/* ---------- 6. at a glance ---------- */
.metal-page .mp-glance{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:clamp(28px,4vw,56px);
}
.metal-page .mp-fig{
  font-family:var(--display);font-weight:400;
  font-size:clamp(34px,4.4vw,64px);line-height:1;letter-spacing:-.02em;
  border-bottom:1px solid var(--line);padding-bottom:14px;
  font-variant-numeric:tabular-nums;   /* sinon la largeur saute au comptage */
}
/* L unite suivait la taille du chiffre en em : a 430px elle tombait a 10,3px,
   sous le seuil de lisibilite. Plancher a 11px. */
.metal-page .mp-fig .u{font-size:max(11px,.46em);margin-left:.14em;color:var(--dim)}
.metal-page .mp-cap{
  margin:14px 0 0;font-size:14px;line-height:1.4;color:var(--dim);
}

/* ---------- 7. uses ---------- */
.metal-page .mp-uses p{
  font-size:clamp(16px,1.3vw,19px);line-height:1.55;max-width:62ch;
  margin:0 0 1.35em;
}
.metal-page .mp-uses p:last-child{margin-bottom:0}

/* ---------- 8. tous les metaux ---------- */

.metal-page .mp-all-row{
  display:flex;flex-wrap:wrap;column-gap:clamp(18px,2.4vw,34px);row-gap:10px;
  border-top:1px solid var(--line);padding-top:clamp(22px,3vw,34px);
}
.metal-page .mp-all-row a{
  font-size:15px;color:var(--paper);text-decoration:none;
  padding:6px 0;min-height:24px;display:inline-flex;align-items:center;
  border-bottom:1px solid transparent;
}
.metal-page .mp-all-row a:hover,
.metal-page .mp-all-row a:focus-visible{color:var(--accent);border-bottom-color:var(--accent)}

/* ---------- § 6.1 revelation ---------- */
@media (prefers-reduced-motion:no-preference){
  /* Gate html.js : sans JavaScript, ou si site.js ne se charge pas, le
     contenu doit rester VISIBLE. Sans ce garde-fou opacity:0 ne serait
     jamais leve et la page serait blanche. */
  html.js .metal-page [data-reveal]{
    opacity:0;transform:translateY(24px);
    transition:opacity 700ms cubic-bezier(.2,.7,.2,1),transform 700ms cubic-bezier(.2,.7,.2,1);
    transition-delay:calc(var(--i,0) * 90ms);
  }
  html.js .metal-page [data-reveal][data-revealed]{opacity:1;transform:none}
}

/* ---------- § 9 responsive ---------- */
@media (max-width:900px){
  .metal-page .mp-stage{
    grid-template-columns:1fr;align-items:start;
    padding-top:clamp(20px,4vw,32px);padding-bottom:clamp(56px,10vw,110px);padding-block:clamp(20px,4vw,32px) clamp(56px,10vw,110px);
  }
  .metal-page .mp-shot{order:-1}          /* image au-dessus du titre */
  .metal-page .mp-intro{grid-template-columns:1fr}
  .metal-page .mp-facts{
    grid-template-columns:repeat(3,1fr);
    gap:clamp(10px,3vw,22px);
    margin-top:clamp(38px,6vw,60px);
  }
  /* 11.34 + son unite ne tiennent pas dans un tiers de 430px a la taille
     de bureau : la police suit la largeur de colonne, pas celle de page. */
  .metal-page .mp-facts .mp-fig{font-size:clamp(22px,5.2vw,34px)}
}
@media (max-width:420px){
  .metal-page{--pad:16px}
  .metal-page h1{font-size:clamp(34px,11vw,52px)}
  .metal-page .mp-glance{grid-template-columns:1fr}
  .metal-page .mp-facts{grid-template-columns:1fr;gap:26px}
  .metal-page .mp-facts .mp-fig{font-size:clamp(30px,9vw,40px)}
}
@media (max-height:560px) and (orientation:landscape){
  .metal-page .mp-stage{min-height:0;padding-top:20px;padding-bottom:clamp(40px,8vw,80px);padding-block:20px clamp(40px,8vw,80px)}
  /* Sous 900px le hero passe en une colonne et la photo remonte AU-DESSUS du
     titre (regle .mp-shot{order:-1} plus haut). En paysage telephone, un 16/9
     sur toute la largeur est alors plus haut que l ecran : 776px de large
     donnent 436px de haut sur un iPhone 13 couche, pour 390px de hauteur
     utile, soit 112%. Le <h1> de la page tombait donc entierement sous la
     ligne de flottaison : on arrivait sur une photo, sans titre.
     On plafonne la hauteur. object-fit:cover est deja pose sur l img, donc le
     cadrage se resserre sans jamais deformer. padding-top:0 neutralise le
     repli @supports not (aspect-ratio), qui ajouterait sinon ses 56,25%
     par-dessus la hauteur fixee ici. */
  .metal-page .mp-shot{aspect-ratio:auto;height:38vh;max-height:38vh;padding-top:0}
  /* Le retour "Home" garde 42px de marge haute en portrait, ou la page a la
     place. Couche, ces 42px sont pris directement sur le seul ecran
     disponible et repoussaient le titre sous la ligne de flottaison. La
     typographie ne change pas, seul le blanc se resserre. */
  .metal-page .mp-back{margin-top:12px}
}

@media print{
  .metal-page{background:#fff;color:#000}
  .metal-page [data-reveal]{opacity:1;transform:none}
}