/* Site 4 (ex style_4.css) — charger commun.css AVANT ce fichier.
   C'est le site qui diverge le plus de la base commune : à réviser en priorité. */
:root {
  --accent: rgba(68,71,136,0.8);
  --bg: rgba(146,204,229,1);
  --menu-w: 216px;
  --submenu-w: 216px;
}

@font-face { font-family: 'digimon'; src: url('DigimonBasic.ttf'); }
@font-face { font-family: 'digicode'; src: url('digicode.ttf'); }
@font-face {
    font-family: 'DejaVuSans';
    src: url('DejaVuSans.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'AA';
    src: url('Ace_Attorney.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'AA_eu';
    src: url('ace_attorney_eu.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PW';
    src: url('Phoenix_Wright.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'times';
    src: url('times.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'eurostile';
    src: url('eurostile.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'im';
    src: url('im.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'josefin';
    src: url('josefin.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* --- Surcharges des règles communes qui se comportent différemment ici --- */
.sousmenu, .sousmenu li { border-top: 1px black solid; }
body {
  background-image: url("wall.png");
  background-repeat: repeat;
  background-attachment: fixed;
  margin: 0 auto;
}
a { background: none; } /* le fond est explicitement désactivé sur ce site */
#menu a { background: none; }
#retour a { color: rgb(68,71,136); }
#bonus a { font-weight: bold; color: rgba(146,204,229,1); }
#bonus { background: rgba(255,255,255,0.8); }
#flex2 { display:flex; justify-content: space-around; }
#linear { background-image: linear-gradient(rgba(68,71,136,0.8), rgba(255,255,255,0.8)); }
#linear_bas { background-image: linear-gradient(rgba(255,255,255,0.8), rgba(68,71,136,0.8)); }
#contenu1 {
  text-align: justify; border-left: 1px rgb(0,70,0) solid; border-right: 1px rgb(100,77,142) solid;
  background: rgba(255,255,255,0.7); border-radius: 120px; width: 615px;
}
h2 {
  display: inline-block; margin: 0 auto; margin-top: 8px; text-align:center;
  color: #ffe667; font-family: digimon, im, eurostile; font-size: 1.3em; padding: 2px;
  border-radius: 275px; margin-bottom: 8px;
  background: -webkit-gradient(linear, left top, left bottom, from(#ffe667), to(#f1a358));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
h3 { font-size: 1.1em; }
h3, h4 { text-align: center; padding: 2px; }
strong, #titres, .titres { color: rgb(56,45,95); }
#titres, .titres { font-weight: bold; text-align: center; padding: 2px; }
p, .spoiler { padding: 25px; background: rgba(255,255,255,0.6); border-radius: 30px; }
p { width: 60%; font-size: 1em; }
.spoiler { width: 80%; font-size: 16px; }
em { font-size: 20px; } /* hérite du reste de la règle em de commun.css */

.title { background: rgb(18,52,84); display: inline-block; padding-right: 8px; padding-left: 8px; border-radius: 30px; }
.p1, .p2, .p3, .p4, .p5, .p6, .p7, .p8, .p9 { width: 90%; margin: 0 auto; }
.titre {
  font-family: digimon; font-style: normal; font-weight: bold; font-size: 22px; color: rgb(56,45,95);
  display: block; text-align: center; margin-top: 10px; margin-bottom: 8px;
}
#code { font-family: digicode; padding: 8px; }
.liste { display: inline-block; column-count: 5; background: rgba(255,255,255,0.7); width: 95%; text-align: left; font-size: 15px; padding: 6px; border-radius: 30px; }
#legende { display: block; background: rgba(255,255,255,0.7); width: 95%; text-align: center; font-size: 16px; padding: 6px; border-radius: 30px; }
table { font-size: 17px; padding: 1.5px; }

/* --- summary personnalisé (plus grand, cliquable, positionné) --- */
summary:focus, audio:focus { outline: none; }
summary, summary:focus { cursor: pointer; }
summary:hover { background-color: rgba(0,100,180,1); }
summary {
  background-color:rgba(0,100,180,0.5); padding: 4px; display: block; width: 750px;
  text-align:center; color: white; margin : 5px; border-radius: 20%;
  border: rgb(41,54,88) 0px inset; font-size: 17.2px;
}
.de_titre { background-color: rgba(68,71,136,0.5); }
.de_titre:hover { background-color:rgba(68,71,136,1); }

/* --- Module fiches / raretés / barres de progression (propre à ce site) --- */
acronym { text-decoration: none; cursor: help; border-bottom: 1px dashed white; padding-bottom: 1px; }
.nbr { text-align: center; font-size: 84%; }
.tableau { width: 80%; background:rgba(255,255,255,0.5); border-radius: 30px; padding: 15px; text-align: justify; }
#listes { margin: 0 auto; width: 70%; }
.rare, .rarete { text-align:center; }
.rare { padding: 1.5px; border-radius: 100%; }
.pr   { background: rgba(0,200,180,0.6); }
.co   { background: rgba(225,225,225,0.7); }
.uc   { background: rgba(200,200,180,0.9); }
.ra   { background: rgba(250,220,20,1); }
.sr   { background: rgba(240,180,10,0.5); }
.sec  { background: rgba(230,100,0,0.6); }
.annee { background: white; color: black; font-size: 90%; padding: 2.2px; border-radius: 50%; }
.flag2 { font-size: 80%; }

.hyperbas progress::-webkit-progress-value { background-color:rgb(48,48,48); }
.tresbas  progress::-webkit-progress-value { background-color:rgb(144,24,0); }
.bas      progress::-webkit-progress-value { background-color:rgb(232,128,40); }
.milieu   progress::-webkit-progress-value { background-color:rgb(224,192,40); }
.haut     progress::-webkit-progress-value { background-color:rgb(64,208,0); }
.treshaut progress::-webkit-progress-value { background-color:rgb(8,120,0); }
.grandmax progress::-webkit-progress-value { background-color:rgb(120,160,248); }
.hyperbas progress::-moz-progress-bar { background-color:rgb(48,48,48); }
.tresbas  progress::-moz-progress-bar { background-color:rgb(144,24,0); }
.bas      progress::-moz-progress-bar { background-color:rgb(232,128,40); }
.milieu   progress::-moz-progress-bar { background-color:rgb(224,192,40); }
.haut     progress::-moz-progress-bar { background-color:rgb(64,208,0); }
.treshaut progress::-moz-progress-bar { background-color:rgb(8,120,0); }
.grandmax progress::-moz-progress-bar { background-color:rgb(120,160,248); }

.total { display: flex; justify-content: space-between; }
.total, .total2 { width: 760px; font-weight: bold; font-size: 18px; margin-top: 6px; margin-bottom: 6px; }
.note { font-size: 80%; }
.flag img, .flag2 img, .digi img { border: 1px black solid; width: 25px; margin: 2.8px; }
.flag, .digi { margin: 2px; }
.numero { text-align: center; width: 90px; }
.numero2 { width: 10px; }
.cartes { max-width: 400px; }
#cartes img { padding: 4px; }
.got_it { color: rgb(77,199,35); font-weight: bold; text-shadow: 1px 1px 1px rgb(20,100,0); }

.anim, .termi, .dcg { background-color:rgba(8,8,8,0.1); text-align: center; border: 1px solid rgba(8,8,8,0.1); }
.hc, .bs { background-color:rgba(8,8,8,0.2); text-align: center; border: 1px solid rgba(8,8,8,0.2); }
.so { margin: 2.2px; padding: 2.2px; }
.lvl { font-weight: bold; }
.txt { font-weight: bold; font-size: 85%; }

.multi, .red, .blue, .yellow, .green, .black, .purple, .white { width: 80px; font-size: 90%; min-width: 80px; }
.m-red, .m-blue, .m-yellow, .m-green, .m-black, .m-purple, .m-white, .left, .right { width: 40px; min-width: 40px; }
.multi, .red, .blue, .yellow, .green, .black, .purple, .white, .tamer, .d { text-align: center; }
.m-red, .red     { background-color:rgb(230,0,45); }
.m-blue, .blue   { background-color:rgb(0,151,224); }
.m-yellow, .yellow { background-color:rgb(225,225,0); }
.m-green, .green { background-color:rgb(0,155,107); }
.m-black, .black { background-color:rgb(34,23,20); }
.m-purple, .purple { background-color:rgb(100,86,163); }
.m-white, .white { background-color:white; }
.tamer { background-color:rgb(107,160,90); }
.d { background-color:rgb(107,60,90); }
.m-red, .m-blue, .m-yellow, .m-green, .m-black, .m-purple, .m-white { padding: 4px; }
.gold { color:rgb(238,232,170); }
.left { border-top-left-radius: 10px; border-left: 1px black inset; border-bottom-left-radius: 10px; }
.right { border-top-right-radius: 10px; border-right: 1px black inset; border-bottom-right-radius: 10px; }
.left, .right { border-top: 1px black inset; border-bottom: 1px black inset; padding: 4px; }
.red, .blue, .yellow, .green, .black, .purple, .tamer, .white, .i, .ii, .iii, .iv, .v, .vi, .vii, .arm, .hy, .f, .d, .pb, .ffx, .checklist, .oth { border-radius: 10px; padding: 4px; border: 1px black inset; }
.i, .ii, .iii, .iv, .v, .vi, .vii, .arm, .hy, .f, .d, .pb, .ffx, .checklist, .tamer, .oth { display: inline-block; }
.m-red, .m-blue, .m-green, .m-black, .m-purple, .red, .blue, .green, .black, .purple, .tamer, .iii, .iv, .v, .vi, .vii, .hy, .ffx, .f, .d, .pb { color: white; }
.i { background: rgba(230,230,230,1); color: black; }
.ii { background: rgba(180,180,180,1); }
.iii { background-color: rgb(138,139,133); }
.iv { background-color: rgb(243,91,88); }
.v { background-color: rgb(98,129,193); }
.vi { background-color: rgb(74,71,124); }
.vii { background: rgba(10,0,60,1); }
.hy { background: rgb(65,176,121); }
.arm { background: rgb(244,215,6); }
.oth { background: rgb(220,220,255); }
.ffx { background-color: rgb(70,105,60); }
.f, .pb { background-color: rgb(0,0,0); }
.checklist { background-color: rgb(255,255,255); }

.white acronym, .anim acronym, .alpha acronym, .dcg acronym, .hc acronym, .termi acronym, .other acronym,
.arm acronym, .yellow acronym, .m-yellow acronym, .m-white acronym, .jd acronym, .st acronym, .mp acronym, .bo acronym, .fx acronym, .mo acronym,
.tb acronym, .dw acronym, .dm acronym, .dp acronym, .un acronym, .cp acronym, .ii acronym, .error { border-bottom: 1px dashed black; }
.jd, .st, .mp, .bo, .fx, .mo, .tb, .dw, .dm, .dp, .un, .cp { background: rgba(0,0,0,0); }
.restrictions { background: red; color: white; font-weight: bold; padding: 2px; border-radius: 100%; border: 1px black solid; }
.rest { color: red; }
.other { text-align: center; }

meter, progress {
  width: 300px; height: 15px; -webkit-appearance: none; -moz-appearance: none; appearance: none;
  border: none; background: #EEE; border-radius: 3px; box-shadow: 0 2px 3px rgba(0,0,0,0.2) inset;
}
progress[value] { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; }
progress[value]::-webkit-progress-bar { background-color: #eee; border-radius: 2px; box-shadow: 0 2px 5px rgba(0,0,0,0.25) inset; }