:root{
  --noir:#040707;
  --panneau:#0a1214;
  --ligne:#214854;
  --ligne-vive:#257998;
  --sang:#1882ab;
  --braise:#80caf7;
  --ivoire:#ffffff;
  --cendre:#dbe3e5;
  --sourdine:#afbec2;
  --papier:#050a0a;
  --encre:#ffffff;
}

body.clair,
.theme-clair{
  --panneau:#f7fafb;
  --ligne:#c7d3d7;
  --ligne-vive:#147398;
  --braise:#116482;
  --ivoire:#121a1b;
  --cendre:#334143;
  --sourdine:#68777a;
  --papier:#ffffff;
  --encre:#121a1b;
}

*{box-sizing:border-box}

html,body{min-height:100%}

body{
  margin:0;
  padding:0 0 60px;
  background:
    radial-gradient(80vmax 50vmax at 50% -10%, rgba(15,97,129,.14), transparent 62%),
    linear-gradient(180deg, #050307 0%, #070407 45%, #040206 100%);
  background-attachment:fixed;
  color:var(--ivoire);
  font-family:'Inter','Segoe UI',system-ui,Arial,sans-serif;
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

body.clair{
  background:#22292a;
}

.barre{
  /* Deux boutons de 38 px et l'espace entre eux. La cale de gauche reprend
     la même largeur : les actions restent optiquement centrées dans la
     barre, sans que rien ne soit sorti du flux. Hors flux, les réglages
     finissaient sous le dernier bouton quand la fenêtre rétrécissait. */
  --l-reglages:84px;

  position:sticky;
  /* sous le bandeau de navigation, pas par-dessus */
  top:var(--h-entete, 0px);
  z-index:10;
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 20px;
  background:rgba(4,7,7,.86);
  border-bottom:1px solid var(--ligne);
  backdrop-filter:blur(6px);
}

.barre::before{
  content:"";
  flex:0 0 var(--l-reglages);
}

/* Les téléchargements au centre, les préférences au bord : deux familles
   d'actions qui n'ont pas à se disputer la même rangée. */
.actions{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}

.reglages{
  flex:0 0 var(--l-reglages);
  display:flex;
  justify-content:flex-end;
  gap:8px;
}

.btn-icone{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  flex:none;
  padding:0;
  font-family:'Cinzel',Georgia,serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:.1em;
  color:var(--cendre);
  background:linear-gradient(180deg,#0e181b,#0a1214);
  border:1px solid #1c404a;
  border-radius:3px;
  cursor:pointer;
  transition:.2s;
}
.btn-icone:hover{color:#fff;border-color:#216780;box-shadow:0 0 18px rgba(15,97,129,.35)}
.btn-icone:focus-visible{outline:2px solid var(--braise);outline-offset:2px}
.btn-icone svg{width:17px;height:17px;display:block}

.btn{
  font-family:'Cinzel',Georgia,serif;
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#eef3f6;
  background:linear-gradient(180deg,#0e181b,#0a1214);
  border:1px solid #1c404a;
  border-radius:3px;
  padding:10px 16px;
  cursor:pointer;
  text-decoration:none;
  display:inline-block;
  transition:.2s;
}
.btn:hover{border-color:#216780;box-shadow:0 0 18px rgba(15,97,129,.35)}
.btn.primaire{background:linear-gradient(180deg,#10475d,#09232c);border-color:#216780}
.btn:disabled{opacity:.5;cursor:default}

.feuille{
  width:min(100%, 900px);
  margin:28px auto 0;
  padding:clamp(22px,4vw,44px);
  background:var(--papier);
  color:var(--encre);
  border:1px solid var(--ligne);
  border-radius:5px;
  box-shadow:0 26px 70px rgba(0,0,0,.6);
}

.entete{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:24px;
  align-items:center;
  padding-bottom:22px;
  border-bottom:1px solid var(--ligne);
}

.portrait{
  width:132px;
  height:132px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--ligne-vive);
  background:rgba(15,97,129,.12);
  box-shadow:0 0 26px rgba(15,97,129,.28);
}

.portrait.absent{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-family:'Cinzel',Georgia,serif;
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--sourdine);
  padding:10px;
}

h1{
  font-family:'Cinzel',Georgia,serif;
  font-weight:600;
  font-size:clamp(28px,4.4vw,40px);
  letter-spacing:.06em;
  margin:0;
  color:var(--encre);
}

h1 .alias{
  display:inline-block;
  margin-left:12px;
  font-family:'Inter',sans-serif;
  font-weight:500;
  font-size:.44em;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--braise);
  vertical-align:middle;
}
h1 .alias::before{content:"« "}
h1 .alias::after{content:" »"}

.pronoms{
  font-size:14px;
  font-weight:500;
  letter-spacing:.1em;
  color:var(--braise);
  margin:8px 0 0;
}

.metier{
  font-size:19px;
  font-weight:500;
  color:var(--cendre);
  margin:10px 0 0;
}

.accroche{
  color:var(--sourdine);
  margin:8px 0 0;
  max-width:52ch;
}

.contact{
  display:flex;
  flex-wrap:wrap;
  gap:8px 26px;
  margin:20px 0 0;
  padding:0;
  list-style:none;
  font-size:16px;
}

.contact .cle{
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--sourdine);
  margin-right:8px;
}

.contact a{color:var(--braise);text-decoration:none}
.contact a:hover{text-decoration:underline}

.colonnes{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:34px;
  margin-top:28px;
}

section{margin-bottom:26px}

h2{
  font-family:'Cinzel',Georgia,serif;
  font-weight:600;
  font-size:15px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--braise);
  margin:0 0 14px;
  padding-bottom:8px;
  border-bottom:1px solid var(--ligne);
}

.entree{margin-bottom:16px}

.entree .periode{
  font-size:13px;
  font-weight:500;
  letter-spacing:.08em;
  color:var(--braise);
}

.entree .duree{color:var(--sourdine);font-weight:400;letter-spacing:.04em}

.entree .intitule{
  font-size:17px;
  font-weight:600;
  color:var(--encre);
  margin:3px 0 0;
}

.entree .lieu{color:var(--cendre)}
.entree .detail{color:var(--sourdine);font-size:14px}
.entree ul.liste{margin-top:7px}
.entree ul.liste li{font-size:14.5px;line-height:1.5;margin-bottom:4px}

.titre-jeu{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid var(--ligne-vive);
}
.titre-jeu:hover{color:var(--braise)}

.pied-feuille{display:none}

.groupe{margin-bottom:14px}

.groupe h3{
  font-weight:600;
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--cendre);
  margin:0 0 6px;
}

ul.liste{
  margin:0;
  padding:0;
  list-style:none;
}

ul.liste li{
  position:relative;
  padding-left:16px;
  margin-bottom:5px;
  color:var(--encre);
}

ul.liste li::before{
  content:"◆";
  position:absolute;
  left:0;
  top:3px;
  font-size:8px;
  color:var(--braise);
}

.langues{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  padding:0;
  margin:0;
  list-style:none;
}

.langues li{color:var(--encre)}
.langues .niveau{color:var(--sourdine);font-size:15px}

.maj{
  margin:26px 0 0;
  padding-top:14px;
  border-top:1px solid var(--ligne);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--sourdine);
}

.etat{
  text-align:center;
  min-height:20px;
  margin:18px auto 0;
  font-size:14px;
  letter-spacing:.1em;
  color:var(--sourdine);
}

@media screen and (max-width:760px){
  .barre{flex-wrap:wrap;gap:10px;padding:14px 16px}
  .barre::before{display:none}
  .actions{flex:1 1 100%}
  .reglages{flex:1 1 100%;justify-content:center}
  .colonnes{grid-template-columns:1fr;gap:8px}
  .entete{grid-template-columns:1fr;justify-items:center;text-align:center}
  .contact{justify-content:center}
  .accroche{margin-left:auto;margin-right:auto}
}

@media print{
  @page{size:A4;margin:0}

  html,
  body,
  body.clair{
    --panneau:#ffffff;
    --ligne:#c8c8c8;
    --ligne-vive:#9a9a9a;
    --sang:#000000;
    --braise:#000000;
    --ivoire:#000000;
    --cendre:#000000;
    --sourdine:#000000;
    --papier:#ffffff;
    --encre:#000000;
    background:#ffffff !important;
    color:#000000 !important;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
    color-adjust:exact;
  }

  body{
    margin:0;
    padding:0;
    font-size:13.8px;
    line-height:1.62;
  }

  .barre,
  .etat{display:none !important}

  .feuille{
    width:100%;
    max-width:none;
    margin:0;
    padding:30px 31px 34px;
    border:none;
    border-radius:0;
    box-shadow:none;
    background:#ffffff !important;
  }

  .feuille *{
    color:#000000 !important;
    background:transparent !important;
    box-shadow:none !important;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }

  .entete{
    grid-template-columns:auto 1fr !important;
    justify-items:start !important;
    text-align:left !important;
    gap:20px;
    padding-bottom:19px;
  }

  .colonnes{
    display:table !important;
    table-layout:fixed;
    width:100%;
    margin-top:24px;
  }

  .colonnes > div{
    display:table-cell !important;
    vertical-align:top;
  }

  .colonnes > div:first-child{width:57%;padding-right:15px}
  .colonnes > div:last-child{width:43%;padding-left:15px}

  /* Bloc de fin de feuille. Un pied de tableau se répéterait sur chaque page,
     mais il détruit la mise en page des deux colonnes : il reste ici en fin
     de document, sur la dernière page. */
  .pied-feuille{
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-top:18px;
    padding-top:11px;
    border-top:1px solid var(--ligne);
    font-size:9.5px;
    line-height:1.5;
    letter-spacing:.04em;
    break-inside:avoid;
  }

  .pied-gauche{display:flex;align-items:center;gap:9px}

  .pied-feuille .qr{
    width:40px;
    height:40px;
    flex:none;
    filter:none !important;
  }

  .pied-qui > *{display:block}
  .pied-qui strong{font-weight:600;font-size:10.5px}

  .pied-droite{text-align:right}
  .pied-url{display:block;font-weight:600;font-size:11px}
  /* la légende appartient au code, elle reste collée à lui */
  .pied-note{display:block;font-size:8.5px;margin-top:1px}

  body.ats .colonnes{display:block !important;margin-top:20px}
  body.ats .colonnes > div{display:block !important;width:auto !important;padding:0 !important}
  body.ats .entete{grid-template-columns:1fr !important}
  body.ats .portrait{display:none !important}
  body.ats .langues{display:block}
  body.ats .langues li{margin-bottom:3px}

  /* le trait du pied suffit juste dessous, deux règles collées font lourd */
  .maj{font-size:10px;margin-top:20px;padding-top:0;border-top:none}

  .contact{justify-content:flex-start !important;gap:7px 22px;margin-top:17px;font-size:13.8px}
  .accroche{margin-left:0 !important;margin-right:0 !important}

  h1{font-size:34px}
  h1 .alias{margin-left:10px}
  .pronoms{font-size:12px;margin-top:7px}
  .metier{font-size:16px;margin-top:9px}
  .accroche{font-size:13.8px}
  .contact .cle{font-size:9.5px;margin-right:7px}

  /* les imprimantes noir et blanc rendent mal une photo sombre en couleur */
  .portrait{
    width:113px;
    height:113px;
    border-color:var(--ligne-vive);
    filter:grayscale(1) contrast(1.15) brightness(1.1);
  }

  h2{font-size:13px;margin-bottom:12px;padding-bottom:7px}
  section{margin-bottom:22px}
  .entree{margin-bottom:14px}
  .entree .periode{font-size:11px}
  .entree .intitule{font-size:15px}
  .entree .detail{font-size:12px}
  .groupe{margin-bottom:12px}
  .groupe h3{font-size:11px}
  ul.liste li{padding-left:14px;margin-bottom:4px}
  .entree ul.liste{margin-top:6px}
  .entree ul.liste li{font-size:12.5px;margin-bottom:3px}
  .langues .niveau{font-size:13px}

  section{break-inside:auto;page-break-inside:auto}
  .entree,
  .groupe{break-inside:avoid;page-break-inside:avoid}
  h2{break-after:avoid;page-break-after:avoid}
  ul.liste li{break-inside:avoid}

  a{color:#000000 !important;text-decoration:none}
}

.portrait[role="button"]{cursor:zoom-in;transition:border-color .2s,box-shadow .2s}
.portrait[role="button"]:hover{border-color:var(--braise);box-shadow:0 0 34px rgba(15,97,129,.45)}
.portrait[role="button"]:focus-visible{outline:2px solid var(--braise);outline-offset:4px}

.zoom{
  width:min(96vw,1000px);
  max-width:none;
  max-height:94vh;
  padding:0;
  border:1px solid var(--ligne);
  border-radius:6px;
  background:var(--noir);
  color:var(--ivoire);
  overflow:hidden;
}
.zoom::backdrop{background:rgba(2,5,7,.9)}

.zoom img{
  display:block;
  width:100%;
  max-height:88vh;
  object-fit:contain;
  touch-action:none;
  user-select:none;
  transform-origin:center center;
  transition:transform .08s linear;
}

.zoom-fermer{
  position:absolute;
  top:10px;right:10px;
  z-index:2;
  background:rgba(4,7,7,.8);
  color:var(--ivoire);
  border:1px solid var(--ligne);
  border-radius:3px;
  padding:6px 11px;
  font-size:15px;
  line-height:1;
  cursor:pointer;
}
.zoom-fermer:hover{border-color:var(--braise)}

.zoom-aide{
  margin:0;
  padding:9px 14px;
  font-size:12px;
  letter-spacing:.06em;
  color:var(--sourdine);
  border-top:1px solid var(--ligne);
  text-align:center;
}

@media print{
  .zoom{display:none !important}
}