/* ============================================================
   planche.css - le plateau au format papier, rendu A L'ECRAN
   dans l'apercu avant impression. Memes styles que print.css,
   sans les !important qui n'ont de sens qu'a l'impression.
   ============================================================ */

/* ---------- la planche ---------- */
#plateau-impression{
  display:flex;flex-direction:column;flex:1;
  font-family:'Nunito',sans-serif;color:#16233F;
}
#plateau-impression .tete{
  display:flex;align-items:baseline;justify-content:space-between;gap:10mm;
  border-bottom:2.5px solid #16233F;padding-bottom:2.5mm;margin-bottom:4mm;
}
#plateau-impression .tete h2{font-family:'Fredoka';font-size:21pt}
#plateau-impression .tete p{font-size:9.5pt;color:#6C7689;text-align:right;max-width:135mm}

#plateau-impression .rangs{display:flex;flex-direction:column;gap:2.5mm}
#plateau-impression .rang{display:flex;gap:2.5mm}
#plateau-impression .rang.inverse{flex-direction:row-reverse}

#plateau-impression .kase{
  flex:1;border:2px solid #C9D1DE;border-radius:5px;padding:2mm;min-height:30mm;
  display:flex;flex-direction:column;
}
#plateau-impression .kase .n{font-family:'Fredoka';font-size:12pt;font-weight:700;line-height:1}
#plateau-impression .kase .t{font-family:'Fredoka';font-size:8.5pt;line-height:1.15;margin-top:1mm;flex:1}
#plateau-impression .kase .d{font-size:6.8pt;color:#6C7689}
#plateau-impression .kase .box{
  width:5mm;height:5mm;border:1.5px solid #C9D1DE;border-radius:2px;
  align-self:flex-end;margin-top:1mm;
  display:flex;align-items:center;justify-content:center;font-size:6pt;
}
#plateau-impression .s1{border-color:#E0561F} #plateau-impression .s1 .n{color:#E0561F}
#plateau-impression .s2{border-color:#1F76A0} #plateau-impression .s2 .n{color:#1F76A0}
#plateau-impression .s3{border-color:#3F8F4F} #plateau-impression .s3 .n{color:#3F8F4F}
#plateau-impression .s4{border-color:#D99512} #plateau-impression .s4 .n{color:#D99512}
#plateau-impression .kase.speciale{border-width:2.5px;border-style:dashed}
#plateau-impression .kase.grande{background:#7A3B96;border-color:#7A3B96;color:#fff}
#plateau-impression .kase.grande .n,#plateau-impression .kase.grande .d{color:#fff}
#plateau-impression .kase.grande .box{border-color:#fff}

#plateau-impression .legende{
  display:flex;gap:6mm;font-size:9pt;margin-top:4mm;align-items:center;flex-wrap:wrap;
}
#plateau-impression .legende i{
  display:inline-block;width:5mm;height:5mm;border-radius:2px;
  margin-right:1.5mm;vertical-align:-1mm;
}
#plateau-impression .pied{
  margin-top:auto;padding-top:4mm;font-size:8pt;color:#6C7689;
  display:flex;justify-content:space-between;
}

/* ============================================================
   Le diplôme de fin d'année, A4 portrait
   ============================================================ */
#diplome{flex:1;display:flex;font-family:'Nunito',sans-serif;color:#16233F}
#diplome .d-cadre{
  flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;
  border:3px solid #7A3B96;border-radius:6mm;padding:9mm 10mm 7mm;
  background:
    radial-gradient(circle at 8% 6%, rgba(224,86,31,.08) 0 18%, transparent 18.5%),
    radial-gradient(circle at 92% 8%, rgba(31,118,160,.08) 0 15%, transparent 15.5%),
    radial-gradient(circle at 6% 94%, rgba(63,143,79,.08) 0 16%, transparent 16.5%),
    radial-gradient(circle at 94% 93%, rgba(217,149,18,.10) 0 18%, transparent 18.5%);
}
#diplome .d-sur{
  font-size:9pt;letter-spacing:.18em;text-transform:uppercase;color:#6C7689;font-weight:700;
}
#diplome h1{
  font-family:'Fredoka';font-size:30pt;font-weight:700;color:#7A3B96;
  margin:3mm 0 4mm;letter-spacing:-.01em;
}
#diplome .d-mention{font-size:10.5pt;color:#6C7689}
#diplome .d-nom{
  font-family:'Fredoka';font-size:26pt;font-weight:600;margin:1mm 0 3mm;
}
#diplome .d-figurine{margin:1mm 0}
#diplome .d-compagnon{font-size:10pt;color:#6C7689;margin-bottom:4mm}
#diplome .d-phrase{
  font-size:11pt;line-height:1.55;max-width:135mm;color:#31405F;margin-bottom:6mm;
}
#diplome .d-plateau{
  display:grid;grid-template-columns:repeat(9,1fr);gap:1.6mm;
  width:120mm;margin-bottom:6mm;
}
#diplome .d-case{
  aspect-ratio:1;border-radius:1.6mm;border:1.2px solid #C9D1DE;
  display:flex;align-items:center;justify-content:center;
  font-family:'Fredoka';font-size:7pt;font-style:normal;color:#9AA5B5;
}
#diplome .d-case.s1{border-color:#E0561F} #diplome .d-case.s2{border-color:#1F76A0}
#diplome .d-case.s3{border-color:#3F8F4F} #diplome .d-case.s4{border-color:#D99512}
#diplome .d-case.faite{color:#fff}
#diplome .d-case.s1.faite{background:#E0561F} #diplome .d-case.s2.faite{background:#1F76A0}
#diplome .d-case.s3.faite{background:#3F8F4F} #diplome .d-case.s4.faite{background:#D99512}
#diplome .d-case.grande{border-width:2px;border-color:#7A3B96}
#diplome .d-case.grande.faite{background:#7A3B96}

#diplome .d-chiffres{display:flex;gap:14mm;margin-bottom:5mm}
#diplome .d-chiffres b{
  display:block;font-family:'Fredoka';font-size:22pt;color:#7A3B96;line-height:1;
}
#diplome .d-chiffres span{font-size:8.5pt;color:#6C7689;font-weight:700}
#diplome .d-tresor{
  font-size:11pt;font-family:'Fredoka';color:#7A3B96;
  background:#F3EBF7;border-radius:3mm;padding:4mm 7mm;margin-bottom:6mm;max-width:150mm;
}
#diplome .d-tresor span{
  display:block;font-family:'Nunito';font-size:8pt;font-weight:800;color:#6C7689;
  text-transform:uppercase;letter-spacing:.1em;margin-bottom:1.5mm;
}
#diplome .d-signatures{
  display:flex;gap:12mm;width:100%;margin-top:auto;padding-top:10mm;
}
#diplome .d-signatures div{
  flex:1;border-top:1.5px solid #16233F;padding-top:1.5mm;font-size:8.5pt;color:#6C7689;
}
#diplome .d-date{font-size:8.5pt;color:#6C7689;margin-top:4mm}