:root{
  --encre:#14171a;
  --os:#c9c7c3;
  --os-faible:rgba(201,199,195,.30);
  --os-tres-faible:rgba(201,199,195,.14);
  --os-eteint:rgba(201,199,195,.62);

  --pas:clamp(1rem,2.2vw,1.6rem);
  
  --laisse:min(1040px,92vw);
  
  --mesure:44rem;

  
  --pose:cubic-bezier(.62,0,.18,1.28);
  --t1:150ms; --t2:340ms; --t3:700ms;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Sarabun','Sarabun repli',system-ui,sans-serif;
  font-weight:400;
  font-size:clamp(.95rem,.35vw + .88rem,1.05rem);
  line-height:1.62;
  color:var(--os);
  background-color:var(--encre);
  
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.035'/%3E%3C/svg%3E");
  background-size:120px 120px;
}


.affiche,h1,h2,h3,h4{
  font-family:'Pathway Gothic One',Impact,sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:-.015em;
  line-height:.94;
  margin:0 0 .5em;
}
h1{font-size:clamp(2.4rem,6.2vw,4.6rem)}
h2{font-size:clamp(1rem,1.4vw,1.2rem);letter-spacing:.06em}
h3{font-size:clamp(1.3rem,2.4vw,1.9rem)}
p{margin:0 0 1.1em;max-width:var(--mesure);text-align:justify;text-justify:inter-word;
  hyphens:auto;-webkit-hyphens:auto;text-wrap:pretty}

.date-publication,figcaption,.registre td,.registre th{text-align:left;hyphens:manual}
.chapo{font-size:1.06rem;color:var(--os-eteint);max-width:var(--mesure)}


.laisse{width:var(--laisse);margin-inline:auto}
.encadre-feuille{border-inline:1px solid var(--os-tres-faible)}
main{padding-block:clamp(2rem,5vw,4rem)}
section{margin-block-end:clamp(2.5rem,6vw,5rem)}


.tete{border-bottom:1px solid var(--os-faible)}
.tete-haut{display:flex;align-items:center;gap:1.2rem;padding-block:1.1rem;flex-wrap:wrap}
.marque{display:flex;align-items:center;gap:.9rem;text-decoration:none;color:inherit}
.marque svg{width:54px;height:54px;flex:0 0 auto}
.marque-nom{font-family:'Pathway Gothic One',Impact,sans-serif;text-transform:uppercase;
  font-size:clamp(1.4rem,3vw,2rem);line-height:1;letter-spacing:.01em}
.marque-sous{display:block;font-family:'Sarabun',sans-serif;font-size:.62rem;letter-spacing:.28em;
  color:var(--os-eteint);text-transform:uppercase;margin-top:.35rem}
.edition{margin-left:auto;border:2px solid var(--os);padding:.45rem .7rem;
  font-family:'Pathway Gothic One',Impact,sans-serif;text-transform:uppercase;font-size:.78rem;
  letter-spacing:.08em;transform:rotate(-1.5deg)}
.nav-principale ul{display:flex;flex-wrap:wrap;gap:1.4rem;list-style:none;margin:0;
  padding:0 0 .9rem;font-family:'Pathway Gothic One',Impact,sans-serif;text-transform:uppercase;
  font-size:.86rem;letter-spacing:.11em}
.nav-principale a{color:var(--os-eteint)}
.nav-principale .actif > a,.nav-principale a:hover{color:var(--os)}


a{color:var(--os);text-decoration:none;
  background-image:linear-gradient(var(--os),var(--os));
  background-repeat:no-repeat;background-position:0 100%;background-size:100% 1px;
  transition:background-size var(--t1) var(--pose)}
a:hover,a:focus-visible{background-size:100% 2px}
.contenu a{color:#fff}
:focus-visible{outline:2px solid var(--os);outline-offset:3px}
::selection{background:var(--os);color:var(--encre)}
::marker{color:var(--os-eteint)}
html{scrollbar-color:var(--os-faible) var(--encre)}
hr{border:0;border-top:1px solid var(--os-faible);margin-block:2.4rem}


.bandeau{background:var(--os);color:var(--encre);padding:.18rem .6rem;display:block;
  font-size:.86rem;letter-spacing:.1em;margin-bottom:1.4rem;position:relative;isolation:isolate;
  
  max-width:var(--mesure)}


.registre{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.registre caption{text-align:left;color:var(--os-eteint);font-size:.85rem;padding-bottom:.6rem}
.registre th{text-align:left;font-family:'Pathway Gothic One',Impact,sans-serif;text-transform:uppercase;
  font-size:.82rem;letter-spacing:.09em;color:var(--os-eteint);border-bottom:1px solid var(--os-faible);
  padding:.5rem .8rem .5rem 0}
.registre td{padding:.62rem .8rem .62rem 0;border-bottom:1px solid var(--os-tres-faible);vertical-align:top}
@media (max-width:640px){
  
  p,.chapo{hyphens:manual;-webkit-hyphens:manual}
  
  .registre thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .registre,.registre tbody,.registre tr,.registre td{display:block;width:100%}
  
  .registre caption{display:block;width:100%}
  .registre tr{border:1px solid var(--os-faible);padding:.7rem .9rem;margin-bottom:.9rem}
  .registre td{border:0;padding:.2rem 0;display:flex;gap:.8rem}
  .registre td::before{content:attr(data-libelle);flex:0 0 8.5rem;color:var(--os-eteint);
    font-family:'Pathway Gothic One',Impact,sans-serif;text-transform:uppercase;letter-spacing:.08em}
}


.cartouche{border:2px solid var(--os);padding:.5rem .75rem;display:inline-block;
  font-family:'Pathway Gothic One',Impact,sans-serif;text-transform:uppercase;transform:rotate(-1.6deg)}


.surimpression{display:grid;gap:0;margin-block:1.5rem}
.surimpression li{list-style:none;position:relative;padding:.15em 0}
.surimpression .nom{font-family:'Pathway Gothic One',Impact,sans-serif;text-transform:uppercase;
  font-size:clamp(1.6rem,5vw,3.1rem);line-height:1;display:block;position:relative}
.surimpression .annees{font-size:.72rem;letter-spacing:.2em;color:var(--os-eteint);display:block;
  margin-bottom:.2rem}
.surimpression li[aria-current="true"] .nom{color:var(--os)}
.surimpression li:not([aria-current="true"]) .nom{color:transparent;
  -webkit-text-stroke:1px var(--os-faible)}

.surimpression li:not([aria-current="true"]) .nom::after{content:attr(data-nom);position:absolute;
  left:2px;top:1px;color:var(--os-tres-faible);-webkit-text-stroke:0}


.echelle{display:grid;grid-auto-flow:column;gap:2px;overflow-x:auto;padding-bottom:.4rem}

.echelle > li{list-style:none;display:grid;grid-template-rows:180px auto auto;gap:.35rem;
  min-width:5.2rem;text-align:center}
.echelle .barre{align-self:end;background:var(--os-faible);border-top:2px solid var(--os);
  height:var(--h,20%)}
.echelle .an{font-family:'Pathway Gothic One',Impact,sans-serif;font-size:.9rem;letter-spacing:.05em}
.echelle .div{font-size:.66rem;letter-spacing:.1em;color:var(--os-eteint)}
.echelle li[data-fin] .barre{background:repeating-linear-gradient(45deg,var(--os-tres-faible) 0 4px,transparent 4px 8px)}


.qr{border-top:1px solid var(--os-faible)}
.qr details{border-bottom:1px solid var(--os-tres-faible)}
.qr summary{cursor:pointer;padding:.95rem 0;display:flex;gap:.9rem;align-items:baseline;
  list-style:none}
.qr summary::-webkit-details-marker{display:none}
.qr summary::after{content:"+";margin-left:auto;font-family:'Pathway Gothic One',Impact,sans-serif;
  font-size:1.4rem;line-height:1;transition:transform var(--t1) var(--pose)}
.qr details[open] summary::after{transform:rotate(45deg)}
.qr summary h3{font-size:1.02rem;letter-spacing:.02em;margin:0;text-transform:none;
  font-family:'Sarabun',sans-serif;font-weight:600;line-height:1.4}
.qr .reponse{padding-bottom:1rem}


.pied{border-top:1px solid var(--os-faible);padding-block:2.2rem;color:var(--os-eteint);font-size:.9rem}
.pied a{color:var(--os-eteint)}


img{max-width:100%;height:auto;display:block}


figure{margin:0 0 1.4rem;width:fit-content;max-width:100%}
figure img{width:auto}


figure.planche{width:min(100%,46rem)}
figure.planche img{width:100%}


figure.vignette{float:right;clear:right;max-width:min(20rem,42%);
  margin:.3rem 0 1.2rem clamp(1.5rem,3vw,3rem)}
@media (max-width:820px){
  figure.vignette{float:none;max-width:100%;margin-inline:0}
}


.releve{display:grid;grid-template-columns:minmax(0,1fr) 20rem;gap:0 clamp(1.5rem,3vw,3rem);
  align-items:start}
.releve>div{grid-area:1/1;min-width:0}

.releve>figure.vignette{grid-area:1/2;float:none;clear:none;max-width:100%;margin:.3rem 0 1.2rem}

@media (max-width:999px){
  .releve{display:block}
  .releve>figure.vignette{float:none;max-width:min(20rem,100%);margin-inline:0}
}
figcaption{font-size:.8rem;color:var(--os-eteint);padding-top:.45rem;border-top:1px solid var(--os-tres-faible);margin-top:.5rem}



.essuie .bandeau{background:none;color:var(--os)}
.essuie .bandeau::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--os);
  transform-origin:left center;transform:scaleX(0)}
.essuie .bandeau.vu{color:var(--encre)}
.essuie .bandeau.vu::before{transform:scaleX(1);transition:transform var(--t3) var(--pose)}
.essuie .bandeau.vu{transition:color var(--t2) var(--pose) var(--t1)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:1ms!important;animation-duration:1ms!important}
  .essuie .bandeau{background:var(--os);color:var(--encre)}
  .essuie .bandeau::before{display:none}
}


.registre tr.ligne-club td{border-bottom-color:var(--os);font-weight:600}
.registre tr.ligne-club td:first-child{box-shadow:inset 2px 0 0 var(--os)}

.date-publication{font-family:'Pathway Gothic One',Impact,sans-serif;text-transform:uppercase;
  letter-spacing:.06em;font-size:.82rem;color:var(--os-eteint);margin:.2rem 0 1.4rem}

.liens-pied ul{list-style:none;display:flex;flex-wrap:wrap;gap:.3rem 1.4rem;padding:0;margin:.9rem 0 0}
.liens-pied a{color:var(--os-eteint);font-size:.9rem}