/* ====================================================================
   pro.css — couche « pro » commune à toutes les pages.
   Chargée après commun.css : police Signika, tailles plus sobres,
   colonne centrée de 72 rem, blocs en panneaux, espacements serrés.
   Les pages Foundry VTT prennent en plus les couleurs de Foundry.
   ==================================================================== */

@font-face { font-family: "Signika"; src: url("polices/signika.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Signika"; src: url("polices/signika-gras.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --sans: "Signika", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --colonne: 75rem;                       /* 72 rem de contenu + les marges */
  --marge: clamp(1rem, 3vw, 1.5rem);
  --panneau: rgba(255, 255, 255, .035);
  --panneau-bord: rgba(255, 255, 255, .1);
}

html { font-size: 100%; }
body {
  font-family: var(--sans);
  font-size: .9375rem;
  line-height: 1.55;
}
b, strong { font-weight: 600; }

/* ---------------------------------------------------------- barre de navigation */
.barre { font-family: var(--sans); font-size: .9375rem; }
.barre-marque { font-size: 1.15em; font-weight: 600; }
.barre-embleme { width: 1.9em; height: 1.9em; }
:root { --barre-h: 3.25rem; }

/* ---------------------------------------------------------- titres */
h2 {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 .75rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--or-clair);
}
h2::after {
  content: "";
  flex: 1;
  min-width: 2rem;
  height: 1px;
  background: linear-gradient(to right, rgba(var(--teinte), .6), transparent);
}
h3 { font-family: var(--sans); }

section { padding-block: 2.5rem 0; }
.chapeau { max-width: 52em; margin: 0 0 1.25rem; font-size: 1rem; }
.texte { max-width: 52em; }
.texte p { margin: 0 0 .7em; }

/* ---------------------------------------------------------- bandeau des pages intérieures */
.bandeau-contenu { padding: 2.25rem var(--marge) 2rem; }
.bandeau .jeu { margin: 0 0 .25rem; font-size: .875rem; font-weight: 600; letter-spacing: .02em; }
.bandeau h1 {
  margin: 0 0 .4rem;
  max-width: none;
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: 0;
}
.bandeau .chapeau { max-width: 46em; margin: 0; font-size: 1rem; }
.rive { height: 1.75rem; }
.rive + main > section:first-child { padding-top: 1.75rem; }
.fil { margin: 0 0 .75rem; font-size: .8125rem; }

.acces--cote { max-width: 46rem; margin-top: 1.25rem; gap: 0 1.5rem; }
.acces li { padding-block: .7rem; }
.acces .role { font-size: .8125rem; }
.adresse { font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem); }
.acces .bouton { margin-top: .35rem; }

/* ---------------------------------------------------------- accueil : l'horizon, plus ramassé */
.horizon {
  --taille: min(20vw, 30vh, 15rem);
  min-height: min(78vh, max(28rem, 110vw));
  min-height: min(78svh, max(28rem, 110vw));
}
.accroche { bottom: clamp(1rem, 4vh, 2.25rem); font-size: clamp(.95rem, .9rem + .35vw, 1.15rem); }
.accroche .liens { margin-top: .8em; }

/* ---------------------------------------------------------- boutons */
.bouton {
  font-family: var(--sans);
  font-size: .875rem;
  font-weight: 600;
  padding: .5em 1.05em;
  border-radius: 4px;
}
.bouton:hover { transform: translateY(-1px); }

/* ---------------------------------------------------------- cartes en panneaux */
.serveurs { gap: 1rem; }
.serveur, .porte {
  padding: 1rem 1.15rem .4rem;
  border: 1px solid rgba(var(--teinte), .28);
  border-top: 3px solid var(--accent);
  border-radius: 6px;
  background: linear-gradient(to bottom, rgba(var(--teinte), .1), var(--panneau) 60%);
  box-shadow: 0 .35rem 1.2rem rgba(0, 0, 0, .3);
}
.porte { padding-bottom: 1rem; }
.serveur .jeu, .porte .jeu { font-size: .8125rem; font-weight: 600; }
.serveur h3, .porte h3 {
  margin: .1em 0 .4em;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: 0;
}
.serveur p, .porte > p { margin: 0 0 .7em; }
.serveur .note { font-size: .875rem; }
.serveur .acces { margin-top: .8rem; }
.porte-liste { margin-bottom: 1rem; font-size: .875rem; }
.porte-liste li { padding-block: .15rem; }
.porte-liste b { font-weight: 600; }
.portes { gap: 1rem; }
.porte:hover { transform: translateY(-2px); }
.a-venir { padding: .8rem 1rem; font-size: .875rem; }
.a-venir b { font-weight: 600; }
.suite { font-size: .875rem; }

/* ---------------------------------------------------------- étapes numérotées, en pastilles */
.etapes { gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.etapes li {
  position: relative;
  padding: .85rem 1rem .9rem 3.4rem;
  border: 1px solid var(--panneau-bord);
  border-radius: 6px;
  background: var(--panneau);
}
.etapes li::before {
  position: absolute;
  left: 1rem; top: .85rem;
  width: 1.7rem; height: 1.7rem;
  margin: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.6rem;
  text-align: center;
}
.etapes strong { font-weight: 600; font-size: 1rem; margin-bottom: .15em; }
.etapes span { font-size: .875rem; }

/* ---------------------------------------------------------- fiches, tableaux, staff */
.fiche { grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr); font-size: .9rem; }
.fiche dt, .fiche dd { padding-block: .55rem; }
.fiche dt { font-weight: 600; padding-right: 1.25rem; }
.fiche dd b { font-weight: 600; }

.regles { font-size: .9rem; }
.regles th, .regles td { padding-block: .6rem; }
.regles td b { font-weight: 600; }

.staff li { padding-block: .6rem; }
.staff .pseudo { font-size: 1rem; }
.staff .role { font-size: .875rem; }

.vide { padding: .8rem 1rem; font-size: .875rem; }
.compte { margin: -.4em 0 1em; font-size: .875rem; }

.joueurs { gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.joueurs li { padding: .5rem .7rem; gap: .7rem; }
.tete { width: 2.4rem; height: 2.4rem; }
.galerie { gap: .6rem; }
@media (min-width: 46rem) { .galerie { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); } }

.fvtt-bref { gap: 1.25rem; margin-bottom: 1rem; }
.fvtt-d20 { width: 4rem; }
.note-marque { margin-top: .8rem; font-size: .8125rem; }
.logo-fvtt { max-width: 22rem; }

/* Sur les très grands écrans, on garde une seule colonne de texte lisible */
@media (min-width: 90rem) {
  .texte { columns: 2; column-gap: 3rem; max-width: none; }
  .chapeau { max-width: 52em; }
}

/* ---------------------------------------------------------- pied de page */
footer { margin-top: 3rem; padding: 2rem var(--marge) 2.25rem; font-size: .875rem; }
.pied { padding-top: 1.5rem; gap: 1rem 2rem; }
.pied p { font-size: .875rem; }
.pied--don { margin-top: 1.25rem; padding-top: 1.25rem; }
.pied--don p b { font-weight: 600; }
.mentions { margin-top: 1.25rem; font-size: .75rem; }

/* ---------------------------------------------------------- mentions légales */
.legal section { max-width: 52em; padding-top: 1.75rem; }

/* ====================================================================
   Minecraft : on garde l'univers du jeu, en plus compact
   ==================================================================== */
body[data-page="minecraft"] h2 { font-size: 1.35rem; }
body[data-page="minecraft"] h2::after { background: linear-gradient(to right, rgba(126, 217, 87, .55), transparent); height: 2px; }
body[data-page="minecraft"] .bandeau h1 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); }
body[data-page="minecraft"] .bandeau-contenu { padding-block: 3rem 2.5rem; }
body[data-page="minecraft"] .entete-mc .rive { height: 3rem; }
body[data-page="minecraft"] .bouton { font-size: .8125rem; font-weight: 400; border-radius: 0; }
body[data-page="minecraft"] .fiche dt { font-size: .9rem; font-weight: 400; }
body[data-page="minecraft"] .etapes li { border: 2px solid #000; border-radius: 0; background: rgba(0, 0, 0, .45); }
body[data-page="minecraft"] footer { padding-top: calc(2rem + 3rem); }

/* ====================================================================
   Pages Foundry VTT : le thème Foundry (sombre, orange)
   ==================================================================== */
body[data-page="foundry"],
body[data-page="foundry-table"],
body[data-page="foundry-modules"] {
  --nuit: #0b0a13;
  --or: #ee9b3a;
  --or-clair: #f6dcb6;
  --rose: #ff8a3d;
  --violet: #ee9b3a;
  --brume: #efe6d8;
  --gris: #b3a99a;
  --filet: rgba(238, 155, 58, .18);
  --accent: #ee9b3a;
  --teinte: 238, 155, 58;
  --panneau: #17141f;
  --panneau-bord: #352d3d;
  background:
    radial-gradient(ellipse 70% 40% at 50% -5%, rgba(255, 100, 0, .12), transparent 70%),
    #0b0a13;
}
body[data-page="foundry"] .barre,
body[data-page="foundry-table"] .barre,
body[data-page="foundry-modules"] .barre { background: rgba(11, 10, 19, .88); border-bottom-color: rgba(255, 100, 0, .35); }
body[data-page="foundry"] .barre a[data-page="foundry"],
body[data-page="foundry-table"] .barre a[data-page="foundry"],
body[data-page="foundry-modules"] .barre a[data-page="foundry"] { border-bottom-color: #ff6400; }
body[data-page="foundry-table"] .barre a[data-page="foundry-table"],
body[data-page="foundry-modules"] .barre a[data-page="foundry-modules"] { background: rgba(255, 100, 0, .12); }

/* Bandeau : nuit Foundry, lueur orange à l'horizon */
body[data-page="foundry-table"] .bandeau {
  background:
    radial-gradient(ellipse 55% 60% at 50% 100%, rgba(255, 110, 30, .28), rgba(255, 110, 30, 0) 72%),
    linear-gradient(to bottom, #0e0c17 0%, #17121f 60%, #2a1615 100%);
  border-bottom: 1px solid rgba(255, 100, 0, .55);
}
body[data-page="foundry-table"] .rive {
  background: linear-gradient(to bottom, rgba(255, 100, 0, .1), #0b0a13);
}
body[data-page="foundry"] .bandeau--forge { border-bottom-color: rgba(255, 100, 0, .7); }
body[data-page="foundry"] .rive--forge { background: linear-gradient(to bottom, #3a1a14, #0b0a13); }
body[data-page="foundry"] .bandeau h1,
body[data-page="foundry-table"] .bandeau h1 {
  background: linear-gradient(to bottom, #fff0da 10%, #f6c27f 55%, #e0843a 95%);
  -webkit-background-clip: text;
          background-clip: text;
}
body[data-page="foundry"] .acces .adresse,
body[data-page="foundry-table"] .acces .adresse { color: #ffb36b; }

/* Panneaux façon fenêtres Foundry */
body[data-page="foundry"] .porte,
body[data-page="foundry-table"] .vide,
body[data-page="foundry-table"] .etapes li {
  border-color: #352d3d;
  background: #17141f;
}
body[data-page="foundry"] .porte { border-top: 3px solid var(--accent); }
body[data-page="foundry"] .porte--table { --accent: #ff8a3d; --teinte: 255, 138, 61; }
body[data-page="foundry"] .porte--modules { --accent: #ee9b3a; --teinte: 238, 155, 58; }

/* Boutons façon Foundry */
body[data-page="foundry"] .bouton,
body[data-page="foundry-table"] .bouton {
  border-color: #ee9b3a;
  background: rgba(255, 100, 0, .12);
  color: #efe6d8;
}
body[data-page="foundry"] .bouton::before,
body[data-page="foundry-table"] .bouton::before,
body[data-page="foundry-modules"] .bouton::before { background: #ee9b3a; }
body[data-page="foundry"] .bouton:hover,
body[data-page="foundry-table"] .bouton:hover { color: #0b0a13; box-shadow: 0 0 .8rem rgba(255, 100, 0, .45); }

/* Pied de page sombre et chaud */
body[data-page="foundry"] footer,
body[data-page="foundry-table"] footer,
body[data-page="foundry-modules"] footer {
  background: linear-gradient(to bottom, #0b0a13, #1a1018 60%, #2b1410);
}
body[data-page="foundry"] .pied,
body[data-page="foundry-table"] .pied,
body[data-page="foundry-modules"] .pied { border-top-color: rgba(255, 100, 0, .4); }
body[data-page="foundry"] .pied--don,
body[data-page="foundry-table"] .pied--don,
body[data-page="foundry-modules"] .pied--don { border-top-color: rgba(255, 100, 0, .25); }

/* ---------------------------------------------------------- petits écrans */
@media (max-width: 40rem) {
  section { padding-top: 2rem; }
  .bandeau-contenu { padding-block: 1.75rem 1.5rem; }
  .fiche dt { padding-top: .6rem; }
  .fiche dd { padding-bottom: .6rem; }
}

/* ---------------------------------------------------------- ajustements par page */
body[data-page="discord"] .acces .adresse { font-size: clamp(.95rem, .85rem + .6vw, 1.3rem); }
body[data-page="minecraft"] .bandeau h1 { margin-bottom: .6rem; }
.horizon {
  min-height: min(66vh, max(26rem, 100vw));
  min-height: min(66svh, max(26rem, 100vw));
}

/* ---------------------------------------------------------- sélecteur de langue (barre) */
.barre-liens > li.barre-langue > a {
  padding: .2em .55em;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 4px;
  font-size: .78em;
  font-weight: 600;
  letter-spacing: .06em;
}
.barre-liens > li.barre-langue > a:hover { border-color: var(--or-clair); }
@media (max-width: 46rem) {
  .barre-liens > li.barre-langue > a { display: inline-block; margin-top: .4rem; padding: .3em .7em; border-bottom: 1px solid rgba(255, 255, 255, .28); }
}

/* ====================================================================
   Page Discord : le thème Discord (gris anthracite, « blurple »)
   Couleurs reprises de l'application ; aucune police ni image externe.
   ==================================================================== */
body[data-page="discord"] {
  --nuit: #1e1f22;
  --or: #5865f2;
  --or-clair: #f2f3f5;
  --brume: #dbdee1;
  --gris: #949ba4;
  --rose: #eb459e;
  --vert: #23a55a;
  --violet: #f0b232;
  --reflet: #23a55a;
  --filet: rgba(255, 255, 255, .07);
  --accent: #5865f2;
  --teinte: 88, 101, 242;
  --panneau: #2b2d31;
  --panneau-bord: #3f4147;
  --lien: #00a8fc;
  background: #313338;
}
body[data-page="discord"] a { color: var(--lien); }
body[data-page="discord"] .barre { background: rgba(30, 31, 34, .94); border-bottom-color: #111214; }
body[data-page="discord"] .barre a { color: #dbdee1; }
body[data-page="discord"] .barre a[data-page="discord"] { border-bottom-color: #5865f2; }

/* Bandeau : aplat blurple, comme l'écran d'invitation */
body[data-page="discord"] .bandeau {
  background:
    radial-gradient(ellipse 60% 70% at 85% 0%, rgba(235, 69, 158, .22), transparent 70%),
    linear-gradient(135deg, #404eed 0%, #5865f2 55%, #7983f5 100%);
  border-bottom: 0;
}
body[data-page="discord"] .bandeau .calque { opacity: .45; }
body[data-page="discord"] .bandeau .jeu { color: #fff; opacity: .85; text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; }
body[data-page="discord"] .bandeau h1 { background: none; color: #fff; -webkit-text-fill-color: #fff; }
body[data-page="discord"] .bandeau .chapeau { color: #fff; opacity: .92; }
body[data-page="discord"] .acces--cote li { border-top-color: rgba(255, 255, 255, .35); }
body[data-page="discord"] .acces .role { color: rgba(255, 255, 255, .8); }
body[data-page="discord"] .acces .adresse { color: #fff; text-decoration-color: rgba(255, 255, 255, .5); }
body[data-page="discord"] .rive { height: 1.25rem; background: linear-gradient(to bottom, #4752c4, #313338); }
body[data-page="discord"] .rive .calque { display: none; }

/* Titres façon salons : « # nom-du-salon » */
body[data-page="discord"] h2 { color: #f2f3f5; }
body[data-page="discord"] h2::before { content: "#"; color: #80848e; font-weight: 400; margin-right: -.4rem; }
body[data-page="discord"] h2::after { background: #3f4147; }
body[data-page="discord"] .chapeau { color: #b5bac1; }

/* Cartes façon « embeds » : fond gris, liseré de couleur à gauche */
body[data-page="discord"] .serveur {
  border: 0;
  border-left: 4px solid var(--accent);
  border-radius: 4px;
  background: #2b2d31;
  box-shadow: none;
}
body[data-page="discord"] .serveur--minecraft { --accent: #23a55a; --teinte: 35, 165, 90; }
body[data-page="discord"] .serveur--table     { --accent: #eb459e; --teinte: 235, 69, 158; }
body[data-page="discord"] .serveur--annonces  { --accent: #f0b232; --teinte: 240, 178, 50; }
body[data-page="discord"] .serveur .jeu { color: var(--accent); text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; }
body[data-page="discord"] .serveur h3 { color: #f2f3f5; font-size: 1.1rem; }
body[data-page="discord"] .serveur p { color: #dbdee1; }

/* Étapes : pastilles pleines blurple */
body[data-page="discord"] .etapes li { border: 0; border-radius: 8px; background: #2b2d31; }
body[data-page="discord"] .etapes li::before { color: #fff; border: 0; background: #5865f2; line-height: 1.7rem; }
body[data-page="discord"] .etapes strong { color: #f2f3f5; }
body[data-page="discord"] .etapes span { color: #b5bac1; }
body[data-page="discord"] .etapes span a { color: var(--lien); }

/* Staff façon liste des membres */
body[data-page="discord"] .staff { display: grid; gap: 2px; border-radius: 8px; overflow: hidden; }
body[data-page="discord"] .staff li { padding: .6rem 1rem; border: 0; background: #2b2d31; }
body[data-page="discord"] .staff li:hover { background: #35373c; }
body[data-page="discord"] .staff .pseudo { color: #f2f3f5; font-weight: 600; }
body[data-page="discord"] .staff .pseudo::before {
  content: "";
  display: inline-block;
  width: .55rem; height: .55rem;
  margin-right: .55rem;
  border-radius: 50%;
  background: #23a55a;
  vertical-align: .1em;
}
body[data-page="discord"] .staff .role { color: #949ba4; }
body[data-page="discord"] .vide { border-color: #3f4147; background: #2b2d31; color: #b5bac1; }

/* Boutons Discord : blurple plein, secondaire gris */
body[data-page="discord"] .bouton {
  border: 0;
  border-radius: 3px;
  background: #4e5058;
  color: #fff;
}
body[data-page="discord"] .bouton::before { background: #6d6f78; }
body[data-page="discord"] .bouton:hover { color: #fff; box-shadow: none; }
body[data-page="discord"] .bouton--discord { background: #5865f2; color: #fff; }
body[data-page="discord"] .bouton--discord::before { background: #4752c4; }
body[data-page="discord"] .bouton--discord:hover { box-shadow: 0 .4rem 1.2rem rgba(88, 101, 242, .35); }
body[data-page="discord"] .bandeau .bouton--discord { background: #fff; color: #23272a; }
body[data-page="discord"] .bandeau .bouton--discord::before { background: #e3e5e8; }
body[data-page="discord"] .bandeau .bouton--discord:hover { color: #5865f2; }
body[data-page="discord"] .bouton[data-etat="fait"] { background: #23a55a; color: #fff; }

/* Pied de page */
body[data-page="discord"] footer { background: #1e1f22; }
body[data-page="discord"] footer .calque { display: none; }
body[data-page="discord"] .pied { border-top-color: #3f4147; }
body[data-page="discord"] .pied p, body[data-page="discord"] .mentions { color: #b5bac1; }