/* Page Design — Le Grand May (pages/design.py).
   Reprend le système de site.css : échelle en quarte (--t0…--t7), espacements de Fibonacci (--e1…--e7),
   grille de 12 colonnes au-delà de 60rem. Palette de la page : pierre #EDE9E2, taupe #5E5448, brun #2B2621.
   Contrastes : taupe sur pierre 6,0:1 ; #4F4740 sur pierre 7,6:1 ; #CFC6B8 sur brun 8,8:1. */
.page-design{--filet-d:#D2CABD;--brun:#2B2621;--gris-d:#4F4740;--clair-d:#CFC6B8;color:var(--brun)}
.page-design .pied .marque{color:var(--brun)}

/* ——— Planches (image + légende) ——— */
.oeuvre{margin:0}
.oeuvre .vue{overflow:hidden;border-radius:.25rem;background:var(--pierre-2)}
.oeuvre .vue img{width:100%;height:auto;transition:transform 1.4s var(--ease)}
.oeuvre .vue:hover img{transform:scale(1.025)}
.page-design .oeuvre figcaption{border-bottom:0;padding-bottom:0}
.oeuvre figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.15rem var(--e3);padding-top:var(--e2)}
.legende-tete{display:inline-flex;align-items:baseline;gap:var(--e2)}
.oeuvre .num{font-family:var(--serif);font-style:italic;font-size:.9375rem;line-height:1;color:var(--taupe);font-variant-numeric:lining-nums tabular-nums}
.oeuvre .collection-nom{font-size:.75rem;letter-spacing:.18em}
.oeuvre .piece-nom{font-size:var(--t1);line-height:1.15;letter-spacing:-.01em;font-variation-settings:"SOFT" 100,"WONK" 0}

/* ——— Ouverture ——— */
.page-design .design-hero{padding:var(--e4) 0 var(--e6)}
.page-design .design-hero .cadre{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--e4);align-items:start}
.hero-texte{display:contents}
.page-design .design-hero .etiquette{letter-spacing:.24em}
.page-design .design-hero .titre-geant{font-size:clamp(var(--t4),12vw,var(--t6));line-height:.92;letter-spacing:-.04em}
.page-design .design-hero .chapeau{margin:var(--e4) 0 0;color:var(--gris-d);max-width:28rem}
.oeuvre-ouverture{order:2}
.sommaire{order:3}
.sommaire ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--filet-d)}
.sommaire a{display:grid;grid-template-columns:2.4rem minmax(0,1fr) auto;align-items:baseline;gap:var(--e2);min-height:3.25rem;padding:var(--e2) 0;border-bottom:1px solid var(--filet-d);text-decoration:none}
.sommaire-num{font-family:var(--serif);font-style:italic;color:var(--taupe)}
.sommaire-nom{font-family:var(--serif);font-size:var(--t1);line-height:1.2;transition:color .3s}
.sommaire-pl{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--taupe)}
.sommaire a:hover .sommaire-nom,.sommaire a:focus-visible .sommaire-nom{color:var(--taupe);font-style:italic}

/* ——— Démarche ——— */
.demarche{padding:0 0 var(--e5)}
.demarche .cadre{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--e4);border-top:1px solid var(--filet-d);padding-top:var(--e5)}
.page-design .demarche h2{font-family:var(--texte);margin:0}
.demarche-texte{font-family:var(--serif);font-weight:380;font-size:clamp(var(--t1),2.3vw,var(--t2));line-height:1.32;letter-spacing:-.012em;margin:0;max-width:40rem}

/* ——— Chapitres ——— */
.page-design .chapitre{border-top:0;padding:var(--e5) 0 var(--e6);scroll-margin-top:var(--e4)}
.compo{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--e5) var(--e4);border-top:1px solid var(--filet-d);padding-top:var(--e5)}
.page-design .compo .chapitre-tete{display:block;margin:0}
.page-design .chapitre-tete .numero{font-size:var(--t4);line-height:1;margin:0 0 var(--e2);font-variation-settings:"SOFT" 100,"WONK" 1}
.page-design .compo .chapitre-tete h2{font-size:clamp(var(--t4),5vw,var(--t5));line-height:.96;letter-spacing:-.035em;margin:0 0 var(--e3)}
.page-design .chapitre-tete .ligne{font-family:var(--serif);font-size:var(--t1);line-height:1.3;color:var(--gris-d);max-width:22rem;margin:0 0 var(--e4)}
.page-design .chapitre-tete .meta{font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--taupe);max-width:none;padding-top:var(--e2);border-top:1px solid var(--filet-d)}

/* ——— Fin ——— */
.page-design .design-fin{padding:var(--e6) 0}
.design-fin .cadre{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--e4)}
.page-design .design-fin h2{font-size:clamp(var(--t4),6vw,var(--t6));line-height:.96;letter-spacing:-.035em;margin:0}
.design-fin .chapeau{margin:0}
.design-fin .actions{margin:var(--e4) 0 0}
.design-fin .colophon{margin:var(--e5) 0 0;padding-top:var(--e2);border-top:1px solid rgba(207,198,184,.28);font-size:.875rem;color:var(--clair-d)}
.design-fin :focus-visible{outline-color:var(--pierre);box-shadow:0 0 0 5px var(--brun)}

/* ——— Téléphones : une colonne, pièces secondaires décalées ——— */
@media (max-width:39.99rem){
  .compo .oeuvre-seconde,.compo .oeuvre-quarte{width:84%;margin-left:auto}
  .compo .oeuvre-tierce{width:84%}
  .demarche .oeuvre-detail{width:72%;margin-left:auto}
}

/* ——— Tablettes ——— */
@media (min-width:40rem){
  .compo{grid-template-columns:repeat(2,minmax(0,1fr))}
  .compo .chapitre-tete,.compo .oeuvre-principale{grid-column:1/-1}
  .compo .oeuvre-principale{max-width:38rem}
  .compo .oeuvre-tierce{margin-top:var(--e5)}
  .oeuvre-ouverture{max-width:38rem;justify-self:end;width:100%}
  .demarche .cadre{grid-template-columns:repeat(2,minmax(0,1fr))}
  .demarche h2,.demarche-texte{grid-column:1/-1}
  .demarche .oeuvre-detail{grid-column:2}
}

/* ——— Grands écrans : grille de 12 colonnes, compositions asymétriques ——— */
@media (min-width:60rem){
  .page-design .design-hero .cadre{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--e4);align-items:stretch}
  .hero-texte{display:flex;flex-direction:column;justify-content:space-between;gap:var(--e5);grid-column:1/span 5;padding:var(--e4) 0 var(--e5)}
  .oeuvre-ouverture{grid-column:6/span 7;max-width:none;order:0}
  .sommaire{order:0}

  .demarche .cadre{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--e4);align-items:start}
  .demarche h2{grid-column:1/span 2;grid-row:1;padding-top:.6rem}
  .demarche-texte{grid-column:3/span 6;grid-row:1}
  .demarche .oeuvre-detail{grid-column:10/span 3;grid-row:1}

  .compo{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--e4);row-gap:var(--e5);align-items:start}
  .compo .oeuvre-principale{max-width:none}
  .compo .oeuvre-tierce{margin-top:0}

  /* I. Andromeda — grande pièce à gauche, gros plan aligné sur son pied, deux pièces en quinconce */
  .compo-i .chapitre-tete{grid-column:9/span 4;grid-row:1}
  .compo-i .oeuvre-principale{grid-column:1/span 7;grid-row:1/span 2}
  .compo-i .oeuvre-detail{grid-column:9/span 4;grid-row:2;align-self:end}
  .compo-i .oeuvre-seconde{grid-column:1/span 5;grid-row:3}
  .compo-i .oeuvre-tierce{grid-column:8/span 4;grid-row:3;margin-top:var(--e6)}

  /* II. Velvet Knot — en miroir */
  .compo-ii .chapitre-tete{grid-column:1/span 4;grid-row:1}
  .compo-ii .oeuvre-principale{grid-column:6/span 7;grid-row:1/span 2}
  .compo-ii .oeuvre-detail{grid-column:1/span 4;grid-row:2;align-self:end}
  .compo-ii .oeuvre-seconde{grid-column:8/span 5;grid-row:3}
  .compo-ii .oeuvre-tierce{grid-column:2/span 4;grid-row:3;margin-top:var(--e6)}

  /* III. Axolo — pièce et gros plan presque à parts égales (6:5), puis un triptyque aligné sur ses légendes */
  .compo-iii .chapitre-tete{grid-column:8/span 5;grid-row:1}
  .compo-iii .oeuvre-principale{grid-column:1/span 6;grid-row:1/span 2}
  .compo-iii .oeuvre-detail{grid-column:8/span 5;grid-row:2;align-self:end}
  .compo-iii .oeuvre-seconde{grid-column:1/span 4;grid-row:3;align-self:end}
  .compo-iii .oeuvre-tierce{grid-column:5/span 4;grid-row:3;align-self:end}
  .compo-iii .oeuvre-quarte{grid-column:9/span 4;grid-row:3;align-self:end}

  .design-fin .cadre{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--e4);align-items:end}
  .fin-appel{grid-column:1/span 7}
  .fin-texte{grid-column:8/span 5}
}