/* ---------- LES POLICES, HÉBERGÉES ICI ---------- */
/* Archivo et Newsreader sont sous licence SIL Open Font License 1.1, dont le
   texte est déposé dans /fonts/. Elles sont servies par ce site et non par
   Google : aucune adresse de lecteur ne part chez un tiers.
   Les deux fichiers sont variables et portent tous leurs axes :
   Archivo wght 100 à 900 et wdth 62 à 125, Newsreader wght 200 à 800 et
   opsz 6 à 72. */

@font-face{
  font-family:"Archivo";
  font-style:normal;
  font-weight:100 900;
  font-stretch:62% 125%;
  font-display:swap;
  src:url("/fonts/archivo-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Archivo";
  font-style:normal;
  font-weight:100 900;
  font-stretch:62% 125%;
  font-display:swap;
  src:url("/fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Newsreader";
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url("/fonts/newsreader-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Newsreader";
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url("/fonts/newsreader-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* SOCLE : ce qui vaut sur toutes les pages */
:root{
  --encre:#14110E;--papier:#F2EBDF;
  --rouge:#C1362B;--ocre:#D89B2C;--bleu:#2F4B7C;--vert:#3F5D4A;
  --an:16vh;              /* la largeur d'une annee, unite de toute la page */
  --sol:26vh;             /* hauteur du sol colore, ou vit la regle graduee */
  --haut-bandeau:50px;
  --bord:14px;
  --haut-regle:38px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--papier);color:var(--encre);font-family:"Archivo",system-ui,sans-serif;font-size:19px}
/* Le filet qui borde le site. Pose en superposition, il ne gene aucun clic et
   ne change aucun calcul de hauteur. */
.bord{position:fixed;inset:var(--bord);border:1px solid var(--encre);pointer-events:none;z-index:45}

.bandeau{
  position:fixed;top:var(--bord);left:var(--bord);right:var(--bord);z-index:30;height:var(--haut-bandeau);
  display:flex;justify-content:space-between;align-items:center;
  padding:0 26px;background:var(--papier);border-bottom:1px solid var(--encre);
}
.enseigne{font-family:"Newsreader",Georgia,serif;font-variation-settings:"opsz" 20;font-size:21px;font-weight:600;white-space:nowrap}
.rubriques{display:flex;gap:20px;font-size:12px;text-transform:uppercase;letter-spacing:.14em}
.rubriques a{color:inherit;text-decoration:none;white-space:nowrap;flex:0 0 auto}

/* ---------- APRES LA FRESQUE : la page redevient un magazine ---------- */
.page{padding:0 66px;max-width:1680px;margin:0 auto}
.filet{height:1px;background:var(--encre);opacity:.35}
.chapitre{
  display:grid;grid-template-columns:repeat(12,1fr);gap:24px;
  padding:74px 0 22px;align-items:baseline;
}
.chapitre h2{
  grid-column:1 / 6;
  font-family:"Newsreader",Georgia,serif;font-variation-settings:"opsz" 72;font-weight:600;
  font-size:clamp(40px,5.4vw,86px);line-height:.92;letter-spacing:-0.035em;
}
.chapitre .dit{grid-column:8 / 12;font-size:16px;line-height:1.6}

/* Le pied de page */
.pied{
  margin:96px var(--bord) var(--bord);background:var(--encre);color:var(--papier);padding:60px 66px 30px;
  display:grid;grid-template-columns:repeat(12,1fr);gap:24px;
}
.pied .ens{
  grid-column:1 / 5;
  font-family:"Newsreader",Georgia,serif;font-variation-settings:"opsz" 72;font-weight:600;
  font-size:clamp(46px,6vw,96px);line-height:.9;letter-spacing:-0.04em;
}
.pied .ens em{display:block;font-size:13px;font-style:normal;letter-spacing:.18em;
  text-transform:uppercase;margin-top:18px;font-family:"Archivo",sans-serif;font-weight:400}
.pied nav{grid-column:6 / 9;display:flex;flex-direction:column;gap:9px}
.pied nav.deux{grid-column:9 / 12}
.pied a{color:inherit;text-decoration:none;font-size:15px}
.pied a:hover{font-style:italic}
.pied .bas{grid-column:1 / 13;margin-top:52px;padding-top:16px;
  border-top:1px solid rgba(242,235,223,.35);font-size:12px;letter-spacing:.1em}


/* LA LIGNE D'ARTICLE, la meme partout */
.art{display:grid;grid-template-columns:repeat(10,1fr);gap:24px;align-items:baseline;
  padding:22px 0;border-top:1px solid var(--encre);text-decoration:none;color:inherit}
.art .an{grid-column:1 / 2;font-size:13px;letter-spacing:.1em}
.art .tit{grid-column:2 / 8;font-family:"Newsreader",Georgia,serif;font-variation-settings:"opsz" 40;
  font-weight:600;font-size:clamp(21px,2vw,31px);line-height:1.12;letter-spacing:-0.02em}
.art .ru{grid-column:8 / 10;font-size:12px;text-transform:uppercase;letter-spacing:.14em}
.art .fl{grid-column:10 / 11;text-align:right;font-size:15px}
.art:hover .tit{font-style:italic}

@media (max-width:700px){
  .art .an{grid-column:1 / 4}
  .art .tit{grid-column:1 / 11;margin-top:6px}
  .art .ru{grid-column:1 / 10;margin-top:8px}
  .art .fl{grid-column:10 / 11}
}

/* LA FRESQUE, page d'accueil seulement */
/* La scene : on descend, le temps avance. Sa hauteur est calculee sur la largeur reelle de la frise. */
.scene{position:relative;margin:0 var(--bord)}
.cadre{
  position:sticky;top:var(--bord);height:calc(100vh - var(--bord) * 2);overflow:hidden;
  padding:var(--haut-bandeau) 0 var(--haut-regle);
}
.piste{
  position:relative;height:100%;
  transform:translate3d(calc(var(--x,0) * -1px),0,0);
  will-change:transform;
}

/* Le sol : une bande de couleur large de dix ans. La couleur EST la decennie. */
.sol{position:absolute;bottom:0;height:var(--sol);border-right:1px solid var(--encre)}
.s70{background:var(--rouge)}
.s80{background:var(--ocre)}
.s90{background:var(--bleu)}
.s00{background:var(--vert)}

/* Le millesime, registre affiche, pose sur son sol */
.mill{
  position:absolute;bottom:calc(var(--sol) * 0.06);
  font-family:"Newsreader",Georgia,serif;font-variation-settings:"opsz" 72;
  font-weight:600;font-size:calc(var(--sol) * 0.78);line-height:.78;letter-spacing:-0.05em;
  color:var(--papier);pointer-events:none;
}
.mill.sombre{color:var(--encre)}
.mot{
  position:absolute;top:0;z-index:2;
  font-size:12px;text-transform:uppercase;letter-spacing:.16em;max-width:76ch;line-height:1.6;
}

/* La regle graduee, dans la frise, donc exactement sous les annees qu'elle mesure */
.tic{position:absolute;bottom:var(--sol);width:1px;background:var(--encre);opacity:.45}
.tic.cinq{opacity:.75}
.lab{position:absolute;bottom:calc(var(--sol) - 20px);font-size:11px;letter-spacing:.12em;color:var(--papier);opacity:.8}
.lab.sombre{color:var(--encre)}

/* Une piece : l'image, sa legende, et le fil qui la plante sur son annee */
.piece{
  position:absolute;bottom:var(--sol);transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;
}
.piece canvas{display:block;height:40vh;width:30vh;background:var(--papier)}
.piece figcaption{
  font-size:11px;text-transform:uppercase;letter-spacing:.13em;
  padding:6px 0 4px;white-space:nowrap;
}
.fil{width:1px;background:var(--encre);height:var(--fil,3vh)}

/* Les deux textes de bout de frise */
.borne{
  position:absolute;bottom:var(--sol);display:flex;flex-direction:column;justify-content:flex-end;
  height:62vh;padding:0 0 4vh;
}
.borne h1{
  font-family:"Newsreader",Georgia,serif;font-variation-settings:"opsz" 72;font-weight:600;
  font-size:clamp(52px,10.4vh,116px);line-height:.92;letter-spacing:-0.04em;max-width:12ch;
}
.borne p{margin-top:16px;font-size:12px;text-transform:uppercase;letter-spacing:.16em;max-width:30ch;line-height:1.7}

/* La reglette fixe : l'annee lue, la position, et les quatre sauts */
.reglette{
  transition:opacity .25s linear;
  position:fixed;left:var(--bord);right:var(--bord);bottom:var(--bord);z-index:30;height:var(--haut-regle);
  border-top:1px solid var(--encre);background:var(--papier);
  display:flex;align-items:center;padding:0 26px;gap:16px;
}
.lu{font-family:"Newsreader",Georgia,serif;font-variation-settings:"opsz" 20;font-weight:600;font-size:19px;width:5ch}
.jauge{flex:1;height:1px;background:var(--encre);opacity:.28;position:relative}
.jauge i{position:absolute;left:0;top:-2px;height:5px;background:var(--encre);width:calc(var(--t,0) * 100%)}
.sauts{display:flex;gap:6px}
.sauts button{
  font:inherit;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  background:none;border:1px solid var(--encre);color:inherit;padding:3px 9px;cursor:pointer;
}
.sauts button[aria-current="true"]{background:var(--encre);color:var(--papier)}
.reglette[hidden]{display:flex!important;opacity:0;pointer-events:none}

@media (max-width:700px){
  :root{--an:15vh;--haut-bandeau:64px}
  .bandeau{flex-direction:column;justify-content:center;align-items:flex-start;gap:5px;padding:7px 0 7px 16px}
  .rubriques{gap:14px;font-size:10px;letter-spacing:.1em;overflow-x:auto;max-width:100%;padding-right:16px;scrollbar-width:none}
  .rubriques::-webkit-scrollbar{display:none}
  .reglette{padding:0 14px;gap:10px}
  .sauts{gap:4px}
  .sauts button{padding:3px 6px;font-size:10px;letter-spacing:.08em}
  .piece canvas{height:32vh;width:24vh}
  .borne{height:56vh}
}

/* ---------- LA TETE : accroche, ligne de comprehension ---------- */
.borne .sur{font-size:12px;text-transform:uppercase;letter-spacing:.2em;margin-bottom:18px}
.borne .comprendre{
  margin-top:22px;font-size:18px;line-height:1.55;max-width:38ch;
  padding-top:16px;border-top:1px solid var(--encre);
  text-transform:none;letter-spacing:0;
}
.borne p.mode{margin-top:14px;font-size:12px;text-transform:uppercase;letter-spacing:.16em}


/* L'ACCUEIL */
/* Le sommaire des rubriques : des lignes de table des matieres, pas des cartes */
.rub{
  display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:baseline;
  padding:26px 0;border-top:1px solid var(--encre);text-decoration:none;color:inherit;
}
.rub:first-of-type{border-top:none}
.sommaire{display:block}
.rub .no{grid-column:1 / 2;font-size:12px;letter-spacing:.16em;padding-top:12px}
.rub .nom{
  grid-column:2 / 8;
  font-family:"Newsreader",Georgia,serif;font-variation-settings:"opsz" 72;font-weight:600;
  font-size:clamp(34px,4.4vw,68px);line-height:1;letter-spacing:-0.03em;
}
.rub .quoi{grid-column:8 / 12;font-size:16px;line-height:1.6}
.rub .cbn{grid-column:12 / 13;text-align:right;font-size:12px;letter-spacing:.14em;padding-top:12px}
.rub:hover .nom{font-style:italic}

/* Les articles : une liste editoriale, filtrable par decennie */
.tri{display:flex;gap:8px;padding:0 0 30px;flex-wrap:wrap}
.tri button{
  font:inherit;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  background:none;border:1px solid var(--encre);color:inherit;padding:5px 13px;cursor:pointer;
}
.tri button[aria-pressed="true"]{background:var(--encre);color:var(--papier)}
.art{
  display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:baseline;
  padding:22px 0;border-top:1px solid var(--encre);text-decoration:none;color:inherit;
}
.art .an{grid-column:1 / 2;font-size:13px;letter-spacing:.1em}
.art .tit{
  grid-column:2 / 9;
  font-family:"Newsreader",Georgia,serif;font-variation-settings:"opsz" 40;font-weight:600;
  font-size:clamp(22px,2.3vw,34px);line-height:1.12;letter-spacing:-0.02em;
}
.art .ru{grid-column:9 / 12;font-size:12px;text-transform:uppercase;letter-spacing:.14em}
.art .fl{grid-column:12 / 13;text-align:right;font-size:15px}
.art:hover .tit{font-style:italic}
.art[hidden]{display:none}
.compte{font-size:12px;text-transform:uppercase;letter-spacing:.16em;padding:22px 0 0}

/* ---------- LA TETE : accroche, ligne de comprehension ---------- */
.borne .sur{font-size:12px;text-transform:uppercase;letter-spacing:.2em;margin-bottom:18px}
.borne .comprendre{
  margin-top:22px;font-size:18px;line-height:1.55;max-width:38ch;
  padding-top:16px;border-top:1px solid var(--encre);
  text-transform:none;letter-spacing:0;
}
.borne p.mode{margin-top:14px;font-size:12px;text-transform:uppercase;letter-spacing:.16em}


/* L'ARTICLE */
/* ---------- LE GABARIT D'ARTICLE ---------- */
.tete{display:grid;grid-template-columns:repeat(12,1fr);gap:24px 30px;padding:82px 0 0;
  align-items:start;border-bottom:1px solid var(--encre);padding-bottom:46px}
.fil-ariane{grid-column:1 / 13;grid-row:1;font-size:12px;text-transform:uppercase;
  letter-spacing:.16em;padding-bottom:30px}
.fil-ariane a{color:inherit;text-decoration:none}
.fil-ariane a:hover{font-style:italic}
.tete h1{
  grid-column:1 / 8;grid-row:2;
  font-family:"Newsreader",Georgia,serif;font-variation-settings:"opsz" 72;font-weight:600;
  font-size:clamp(44px,7.8vw,124px);line-height:.9;letter-spacing:-0.04em;
}
.chapeau{grid-column:1 / 7;grid-row:3;margin-top:22px;font-size:21px;line-height:1.45}
.signature{grid-column:1 / 4;grid-row:4;margin-top:26px;font-size:12px;text-transform:uppercase;
  letter-spacing:.16em;line-height:2;border-top:1px solid var(--encre);padding-top:12px}
/* L'image de tete entre dans la tete, a droite du titre, et sa hauteur est bornee. */
.tete .vignette{grid-column:8 / 13;grid-row:2 / span 3;align-self:start}
.tete .vignette canvas{display:block;width:100%;height:62vh;object-fit:cover}
.tete .vignette figcaption{font-size:11px;text-transform:uppercase;letter-spacing:.14em;
  padding-top:10px;border-top:1px solid var(--encre);margin-top:12px}

/* L'image de tete deborde en pleine largeur */
.pleine{
  margin:66px 0 0;display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end;
}
.pleine canvas{grid-column:6 / 13;display:block;width:100%;height:auto}
.pleine figcaption{
  grid-column:1 / 4;font-size:11px;text-transform:uppercase;letter-spacing:.14em;
  border-top:1px solid var(--encre);padding-top:12px;line-height:1.7;
}

/* Le corps : texte en colonnes 2 a 7, notes en 9 a 11 */
.corps{display:grid;grid-template-columns:repeat(12,1fr);gap:24px 30px;padding:56px 0 0;
  position:relative}
.corps::before{
  content:"";position:absolute;top:0;bottom:0;
  left:calc(58.333% + 4px);width:1px;background:var(--encre);opacity:.4;
}
.corps > *{grid-column:1 / 7}
.corps p{font-size:19px;line-height:1.66;margin-bottom:24px}
.corps p.lettrine::first-letter{
  font-family:"Newsreader",Georgia,serif;font-weight:600;font-size:4.6em;line-height:.82;
  float:left;padding:6px 12px 0 0;
}
.corps h2{
  font-family:"Newsreader",Georgia,serif;font-variation-settings:"opsz" 40;font-weight:600;
  font-size:clamp(28px,3vw,44px);line-height:1.05;letter-spacing:-0.022em;
  margin:44px 0 20px;padding-top:22px;border-top:1px solid var(--encre);
}
.corps blockquote{
  grid-column:1 / 8;margin:44px 0;padding:26px 0;
  border-top:1px solid var(--encre);border-bottom:1px solid var(--encre);
  font-family:"Newsreader",Georgia,serif;font-variation-settings:"opsz" 72;font-weight:600;
  font-size:clamp(30px,4vw,58px);line-height:1.02;letter-spacing:-0.03em;
}
.note{
  grid-column:8 / 13;font-size:14px;line-height:1.55;
  border-top:1px solid var(--encre);padding-top:12px;margin-top:4px;
}
.note b{display:block;text-transform:uppercase;letter-spacing:.14em;font-size:11px;
  font-weight:400;margin-bottom:8px}
.corps figure{grid-column:1 / 13;margin:48px 0;display:grid;
  grid-template-columns:repeat(12,1fr);gap:24px;align-items:end}
.corps figure canvas{grid-column:1 / 5;display:block;width:100%;height:auto}
.corps figure figcaption{grid-column:6 / 10;font-size:11px;text-transform:uppercase;
  letter-spacing:.14em;border-top:1px solid var(--encre);padding-top:12px;line-height:1.7}
.reperes{
  grid-column:1 / 8;border-top:1px solid var(--encre);border-bottom:1px solid var(--encre);
  padding:30px 0;margin:52px 0;
}
.reperes h3{font-size:12px;text-transform:uppercase;letter-spacing:.18em;font-weight:400;
  margin-bottom:20px}
.reperes ol{list-style:none;counter-reset:r;display:grid;grid-template-columns:1fr 1fr;gap:16px 30px}
.reperes li{counter-increment:r;font-size:16px;line-height:1.55;padding-left:34px;position:relative}
.reperes li::before{content:counter(r,decimal-leading-zero);position:absolute;left:0;top:2px;
  font-size:11px;letter-spacing:.12em}

/* La suite, en fin d'article */
.suite{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:62px 0 0;
  border-top:1px solid var(--encre);margin-top:56px}
.suite .quoi{grid-column:1 / 3;font-size:12px;text-transform:uppercase;letter-spacing:.16em}
.suite .liste{grid-column:3 / 13}

@media (max-width:700px){
  .tete{padding:94px 0 0}
  .tete h1, .chapeau, .signature{grid-column:1 / 13}
  .tete h1{grid-row:2}
  .chapeau{grid-row:3}
  .tete .vignette{grid-column:1 / 13;grid-row:4}
  .signature{grid-row:5}
  .tete .vignette canvas{height:auto;max-height:56vh}
  .pleine canvas, .pleine figcaption{grid-column:1 / 13}
  .pleine figcaption{margin-top:12px}
  .corps figure canvas, .corps figure figcaption{grid-column:1 / 13}
  .chapeau{font-size:19px;margin-top:22px}
  .corps > *, .corps blockquote, .note, .reperes{grid-column:1 / 13}
  .corps p{font-size:17px}
  .reperes ol{grid-template-columns:1fr}
  .suite .quoi, .suite .liste{grid-column:1 / 13}
}


/* LE HUB */
/* ---------- LE GABARIT DE HUB ---------- */
.tete-hub{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:78px 0 0}
.fil-ariane{grid-column:1 / 13;grid-row:1;font-size:12px;text-transform:uppercase;
  letter-spacing:.16em;padding-bottom:30px}
.fil-ariane a{color:inherit;text-decoration:none}
.fil-ariane a:hover{font-style:italic}
.tete-hub h1{
  grid-column:1 / 13;grid-row:2;
  font-family:"Newsreader",Georgia,serif;font-variation-settings:"opsz" 72;font-weight:600;
  font-size:clamp(64px,12vw,208px);line-height:.84;letter-spacing:-0.048em;
}
.tete-hub .dit{grid-column:7 / 12;grid-row:3;margin-top:26px;padding-top:16px;
  border-top:1px solid var(--encre);font-size:19px;line-height:1.6}
.tete-hub .cbn{grid-column:12 / 13;grid-row:3;margin-top:26px;padding-top:16px;
  border-top:1px solid var(--encre);text-align:right;font-size:12px;
  text-transform:uppercase;letter-spacing:.14em}

/* Les quatre decennies : les memes aplats que la fresque, en portes d'entree */
.portes{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:70px 0 0;
  border-top:1px solid var(--encre);border-bottom:1px solid var(--encre)}
.porte{
  position:relative;min-height:44vh;padding:26px;display:flex;flex-direction:column;
  justify-content:space-between;text-decoration:none;border-right:1px solid var(--encre);
}
.porte:last-child{border-right:none}
.porte .an{
  font-family:"Newsreader",Georgia,serif;font-variation-settings:"opsz" 72;font-weight:600;
  font-size:clamp(46px,6.4vw,104px);line-height:.82;letter-spacing:-0.045em;
}
.porte .quoi{font-size:15px;line-height:1.55;max-width:24ch;margin-top:auto;padding-top:24px}
.porte .cb{font-size:11px;text-transform:uppercase;letter-spacing:.16em;margin-top:16px}
.p70{background:var(--rouge);color:var(--papier)}
.p80{background:var(--ocre);color:var(--encre)}
.p90{background:var(--bleu);color:var(--papier)}
.p00{background:var(--vert);color:var(--papier)}
.porte:hover .an{font-style:italic}

@media (max-width:900px){
  .portes{grid-template-columns:repeat(2,1fr)}
  .porte{min-height:34vh;border-bottom:1px solid var(--encre)}
  .porte:nth-child(2n){border-right:none}
}
@media (max-width:700px){
  .tete-hub{padding:94px 0 0}
  .tete-hub h1{grid-column:1 / 13;grid-row:2}
  .tete-hub .dit{grid-column:1 / 13;grid-row:3;margin-top:22px}
  .tete-hub .cbn{grid-column:1 / 13;grid-row:4;text-align:left;margin-top:14px;border-top:none;padding-top:0}
  .portes{grid-template-columns:1fr;margin-top:44px}
  .porte{min-height:0;border-right:none}
}

/* LA PAGE DE SERVICE */
/* ---------- LE GABARIT DE PAGE DE SERVICE ---------- */
.tete.service h1{grid-column:1 / 9;font-size:clamp(44px,6.6vw,108px)}
.service ~ .corps{padding:54px 0 0}
.corps p:last-child{margin-bottom:0}
.jointe{
  grid-column:2 / 12;
  display:grid;grid-template-columns:repeat(10,1fr);gap:24px;margin:64px 0 0;
  border-top:1px solid var(--encre);padding-top:30px;
}
.jointe dt{grid-column:1 / 3;font-size:12px;text-transform:uppercase;letter-spacing:.16em;
  padding-top:5px}
.jointe dd{grid-column:3 / 8;margin:0 0 22px;font-size:18px;line-height:1.5}
@media (max-width:700px){
  .tete.service h1{grid-column:1 / 13}
  .jointe dt, .jointe dd{grid-column:1 / 13}
  .jointe dd{margin-bottom:26px}
}

/* RESPONSIVE */
@media (max-width:700px){
  :root{--an:15vh;--haut-bandeau:64px}
  .bandeau{flex-direction:column;justify-content:center;align-items:flex-start;gap:5px;padding:7px 0 7px 16px}
  .rubriques{gap:14px;font-size:10px;letter-spacing:.1em;overflow-x:auto;max-width:100%;padding-right:16px;scrollbar-width:none}
  .rubriques::-webkit-scrollbar{display:none}
  .reglette{padding:0 14px;gap:10px}
  .sauts{gap:4px}
  .sauts button{padding:3px 6px;font-size:10px;letter-spacing:.08em}
  .piece canvas{height:32vh;width:24vh}
  .borne{height:56vh}
}

/* ---------- LA TETE : accroche, ligne de comprehension ---------- */
.borne .sur{font-size:12px;text-transform:uppercase;letter-spacing:.2em;margin-bottom:18px}
.borne .comprendre{
  margin-top:22px;font-size:18px;line-height:1.55;max-width:38ch;
  padding-top:16px;border-top:1px solid var(--encre);
  text-transform:none;letter-spacing:0;
}
.borne p.mode{margin-top:14px;font-size:12px;text-transform:uppercase;letter-spacing:.16em}

/* ---------- APRES LA FRESQUE : la page redevient un magazine ---------- */
.page{padding:0 66px;max-width:1680px;margin:0 auto}
.filet{height:1px;background:var(--encre);opacity:.35}
.chapitre{
  display:grid;grid-template-columns:repeat(12,1fr);gap:24px;
  padding:74px 0 22px;align-items:baseline;
}
.chapitre h2{
  grid-column:1 / 6;
  font-family:"Newsreader",Georgia,serif;font-variation-settings:"opsz" 72;font-weight:600;
  font-size:clamp(40px,5.4vw,86px);line-height:.92;letter-spacing:-0.035em;
}
.chapitre .dit{grid-column:8 / 12;font-size:16px;line-height:1.6}

/* Le sommaire des rubriques : des lignes de table des matieres, pas des cartes */
.rub{
  display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:baseline;
  padding:26px 0;border-top:1px solid var(--encre);text-decoration:none;color:inherit;
}
.rub:first-of-type{border-top:none}
.sommaire{display:block}
.rub .no{grid-column:1 / 2;font-size:12px;letter-spacing:.16em;padding-top:12px}
.rub .nom{
  grid-column:2 / 8;
  font-family:"Newsreader",Georgia,serif;font-variation-settings:"opsz" 72;font-weight:600;
  font-size:clamp(34px,4.4vw,68px);line-height:1;letter-spacing:-0.03em;
}
.rub .quoi{grid-column:8 / 12;font-size:16px;line-height:1.6}
.rub .cbn{grid-column:12 / 13;text-align:right;font-size:12px;letter-spacing:.14em;padding-top:12px}
.rub:hover .nom{font-style:italic}

/* Les articles : une liste editoriale, filtrable par decennie */
.tri{display:flex;gap:8px;padding:0 0 30px;flex-wrap:wrap}
.tri button{
  font:inherit;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  background:none;border:1px solid var(--encre);color:inherit;padding:5px 13px;cursor:pointer;
}
.tri button[aria-pressed="true"]{background:var(--encre);color:var(--papier)}
.art{
  display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:baseline;
  padding:22px 0;border-top:1px solid var(--encre);text-decoration:none;color:inherit;
}
.art .an{grid-column:1 / 2;font-size:13px;letter-spacing:.1em}
.art .tit{
  grid-column:2 / 9;
  font-family:"Newsreader",Georgia,serif;font-variation-settings:"opsz" 40;font-weight:600;
  font-size:clamp(22px,2.3vw,34px);line-height:1.12;letter-spacing:-0.02em;
}
.art .ru{grid-column:9 / 12;font-size:12px;text-transform:uppercase;letter-spacing:.14em}
.art .fl{grid-column:12 / 13;text-align:right;font-size:15px}
.art:hover .tit{font-style:italic}
.art[hidden]{display:none}
.compte{font-size:12px;text-transform:uppercase;letter-spacing:.16em;padding:22px 0 0}

/* Le pied de page */
.pied{
  margin:96px var(--bord) var(--bord);background:var(--encre);color:var(--papier);padding:60px 66px 30px;
  display:grid;grid-template-columns:repeat(12,1fr);gap:24px;
}
.pied .ens{
  grid-column:1 / 5;
  font-family:"Newsreader",Georgia,serif;font-variation-settings:"opsz" 72;font-weight:600;
  font-size:clamp(46px,6vw,96px);line-height:.9;letter-spacing:-0.04em;
}
.pied .ens em{display:block;font-size:13px;font-style:normal;letter-spacing:.18em;
  text-transform:uppercase;margin-top:18px;font-family:"Archivo",sans-serif;font-weight:400}
.pied nav{grid-column:6 / 9;display:flex;flex-direction:column;gap:9px}
.pied nav.deux{grid-column:9 / 12}
.pied a{color:inherit;text-decoration:none;font-size:15px}
.pied a:hover{font-style:italic}
.pied .bas{grid-column:1 / 13;margin-top:52px;padding-top:16px;
  border-top:1px solid rgba(242,235,223,.35);font-size:12px;letter-spacing:.1em}

@media (max-width:700px){
  .page{padding:0 22px}
  .corps::before{display:none}
  .chapitre{padding:48px 0 16px}
  .chapitre h2{grid-column:1 / 13}
  .chapitre .dit{grid-column:1 / 13;margin-top:14px}
  .rub .no{display:none}
  .rub .nom{grid-column:1 / 13}
  .rub .quoi{grid-column:1 / 12;margin-top:10px}
  .rub .cbn{grid-column:12 / 13}
  .art .an{grid-column:1 / 3}
  .art .tit{grid-column:1 / 13;margin-top:6px}
  .art .ru{grid-column:1 / 11;margin-top:8px}
  .art .fl{grid-column:12 / 13}
  .pied{padding:44px 22px 26px;margin:56px var(--bord) var(--bord)}
  .pied .ens{grid-column:1 / 13}
  .pied nav, .pied nav.deux{grid-column:1 / 13;margin-top:26px}
}

/* ---------- LE DISPLAY SUR TELEPHONE ---------- */
/* Regle de l'art : on garde la mesure, huit a douze signes par ligne, pas le
   seuil en pixels d'un ecran large. Rapport au texte courant conserve. */
@media (max-width:700px){
  .tete h1{font-size:68px;line-height:.88;letter-spacing:-0.044em}
  .tete.service h1{font-size:72px;line-height:.88;letter-spacing:-0.044em}
  .tete-hub h1{font-size:82px;line-height:.84;letter-spacing:-0.05em}
  .borne h1{font-size:78px;line-height:.88;letter-spacing:-0.046em}
  .chapitre h2{font-size:52px;line-height:.94;letter-spacing:-0.038em}
  .corps h2{font-size:34px;line-height:1.02;letter-spacing:-0.028em}
  .corps blockquote{font-size:38px;line-height:1;letter-spacing:-0.034em}
  .rub .nom{font-size:44px;letter-spacing:-0.036em}
  .art .tit{font-size:26px;letter-spacing:-0.024em}
  .porte .an{font-size:64px;letter-spacing:-0.046em}
  .pied .ens{font-size:64px;letter-spacing:-0.044em}
}

/* ---------- LE MAILLAGE : les autres rubriques, en fin de hub ---------- */
.liens-rub{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid var(--encre);border-bottom:1px solid var(--encre);
}
.liens-rub .lien-rub{
  display:flex;flex-direction:column;justify-content:space-between;gap:26px;
  padding:26px 24px 22px 0;border-right:1px solid var(--encre);
  text-decoration:none;color:inherit;
}
.liens-rub .lien-rub:last-child{border-right:none}
.liens-rub .n{
  font-family:"Newsreader",Georgia,serif;font-variation-settings:"opsz" 40;font-weight:600;
  font-size:clamp(24px,2.6vw,40px);line-height:1;letter-spacing:-0.026em;
}
.liens-rub .c{font-size:11px;text-transform:uppercase;letter-spacing:.16em}
.liens-rub .lien-rub:hover .n{font-style:italic}
/* ---------- LE BANDEAU COMME MATIÈRE ---------- */
/* Archivo est servi en fichier variable, avec ses axes de graisse (100 à 900)
   et de largeur (62 à 125). Le repos est écrit ici, donc le bandeau reste
   exactement lisible sans le script : rien n'est porté par le mouvement.
   /js/bandeau.js ne fait qu'écrire ces deux axes lettre par lettre selon la
   distance au curseur. */
.rubriques a{font-variation-settings:"wght" 400,"wdth" 100}
.rubriques a .l{display:inline-block;will-change:font-variation-settings}

/* La page courante se repère à sa graisse et à son filet, pas à un faux
   italique : le fichier Archivo servi ne porte pas d'axe d'inclinaison, et le
   navigateur penchait donc les lettres mécaniquement. */
.bandeau .rubriques a[aria-current="page"]{
  font-variation-settings:"wght" 640,"wdth" 100;
  box-shadow:0 3px 0 -2px var(--rouge);
}
.bandeau .rubriques a[aria-current="page"] .l{font-variation-settings:inherit}
.fil-ariane [aria-current="page"]{opacity:.55}
@media (max-width:700px){
  .liens-rub{grid-template-columns:1fr}
  .liens-rub .lien-rub{border-right:none;border-bottom:1px solid var(--encre);
    flex-direction:row;align-items:baseline;gap:16px;padding:18px 0}
  .liens-rub .lien-rub:last-child{border-bottom:none}
}

/* --- ILLUSTRATIONS SOUS LICENCE LIBRE ------------------------------------ */
.illustration{margin:56px 0 0;display:grid;grid-template-columns:repeat(12,1fr);gap:24px 30px}
.illustration img{grid-column:1 / 5;display:block;width:auto;max-width:100%;height:auto;max-height:44vh}
.illustration figcaption{grid-column:5 / 9;align-self:end;font-size:11px;text-transform:uppercase;
  letter-spacing:.14em;line-height:1.7;border-top:1px solid var(--encre);padding:12px 0 24px}
.illustration .credit{display:block;margin-top:10px;text-transform:none;letter-spacing:0;opacity:.62}
@media (max-width:700px){.illustration{display:block}
  .illustration figcaption{margin-top:14px;padding-bottom:0}}