/* Pages intérieures : socle commun aux deux univers. */
@import url("/assets/css/tokens.css");

.univers{background:var(--c-papier);color:var(--c-ancre)}
.univers--enbro{--u-fond:var(--c-enbro);--u-vif:var(--c-enbro-vif)}
.univers--earth{--u-fond:var(--c-earth);--u-vif:var(--c-earth-vif)}

.ouverture{padding:var(--e-9) var(--e-7) var(--e-8);
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:var(--e-7);align-items:end}
.ouverture__titre{font-family:var(--f-display);font-weight:var(--g-500);
  font-size:var(--t-h1);line-height:var(--i-serre);letter-spacing:var(--l-serre);
  margin:0 0 var(--e-5);max-width:16ch}
.ouverture__texte{font-size:var(--t-h3);line-height:var(--i-titre);max-width:44ch;
  color:color-mix(in srgb,var(--c-ancre) 80%,transparent)}
.ouverture__actions{display:flex;flex-wrap:wrap;gap:var(--e-4);margin-block-start:var(--e-6)}

.bouton{display:inline-flex;align-items:center;padding:var(--e-3) var(--e-5);
  border-radius:var(--r-action);text-decoration:none;font-weight:var(--g-600);
  background:var(--u-fond);color:var(--c-blanc)}
.bouton:hover{background:var(--c-ancre)}
.bouton--nu{background:none;color:var(--c-ancre);
  border-bottom:var(--b-epais) solid var(--u-vif);border-radius:var(--r-nul);
  padding-inline:var(--e-1)}
.bouton--nu:hover{background:none;border-bottom-color:var(--c-ancre)}
.bouton:focus-visible{outline:var(--b-epais) solid var(--c-ancre);outline-offset:var(--e-2)}

.etapes{list-style:none;margin:0;padding:0;counter-reset:etape}
.etapes li{counter-increment:etape;padding-block:var(--e-4);
  border-block-start:var(--b-fin) solid var(--c-trait);
  display:grid;grid-template-columns:3rem minmax(0,1fr);gap:var(--e-4)}
.etapes li::before{content:counter(etape,decimal-leading-zero);
  font-family:var(--f-display);color:var(--u-fond);font-size:var(--t-h3)}
.etapes h2{font-size:var(--t-h3);margin:0 0 var(--e-1)}
.etapes p{margin:0;color:color-mix(in srgb,var(--c-ancre) 74%,transparent);max-width:52ch}

.pied-page{background:var(--c-ancre);color:var(--c-papier);
  padding:var(--e-7) var(--e-7) var(--e-6);display:grid;gap:var(--e-4)}
.pied-page a{color:inherit;text-decoration:none;
  border-bottom:var(--b-fin) solid color-mix(in srgb,var(--c-papier) 34%,transparent)}
.pied-page a:hover{border-bottom-color:var(--c-papier)}
.pied-page a:focus-visible{outline:var(--b-epais) solid var(--c-papier);outline-offset:var(--e-1)}
.pied-page__marques{margin:0;font-family:var(--f-display);font-size:var(--t-h3)}
.pied-page__mentions{margin:0;display:flex;flex-wrap:wrap;gap:var(--e-3) var(--e-5);
  font-size:var(--t-annexe)}
.pied-page__fontes{margin:0;font-size:var(--t-annexe);
  color:color-mix(in srgb,var(--c-papier) 66%,transparent);max-width:60ch}

@media (max-width:64rem){
  .ouverture{grid-template-columns:1fr;padding:var(--e-7) var(--e-5) var(--e-7);
    gap:var(--e-6)}
  .pied-page{padding:var(--e-6) var(--e-5)}
}

.demarche{padding:var(--e-6) var(--e-7) var(--e-8);max-width:64rem}
@media (max-width:64rem){.demarche{padding:var(--e-5) var(--e-5) var(--e-7)}}