/* Droits Divins UI Kit · écrans plein cadre (accueil, landing, écrans d'entrée)

   Une seule grille, pour que rien ne soit placé à l'œil :

     ┌ marge ─────────────────────────────────────────────── marge ┐
     │ en-tête : logo (hauteur --dd-logo-entete)    boutons du coin │
     │                                                              │
     │ colonne de lecture        décor visible        panneau      │
     │ (--dd-colonne)                                 (--dd-panneau)│
     │ haut commun ─────────────────────────────────── haut commun │
     │ ...                                                          │
     │ bas commun ──────────────────────────────────── bas commun  │
     └──────────────────────────────────────────────────────────────┘

   - Les deux colonnes commencent et finissent sur les mêmes lignes.
   - Dans la colonne de lecture, titre, texte et boîtes ont le même bord gauche
     et la même largeur ; la dernière boîte est calée en bas.
   - Le panneau s'étire sur toute la hauteur ; son pied est calé en bas.
   - Les boutons du coin vivent dans l'en-tête : ils ne recouvrent jamais une boîte.
   - Le bloc de contenu prend la hauteur de la plus haute colonne, pas celle de
     la fenêtre ; si la fenêtre est trop basse, la page défile
     (jamais de contenu coupé). À 680 px de haut et plus, rien ne défile. */

@import url("tokens.css");
@import url("tournois.css");
@import url("credit.css");
@import url("repli.css");

.dd-ecran {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, var(--dd-colonne)) minmax(var(--dd-gouttiere), 1fr) minmax(320px, var(--dd-panneau));
  /* Rangée de contenu à la hauteur de la plus haute des deux colonnes : pas de vide dans les boîtes,
     le décor reste visible dessous sur les grands écrans */
  grid-template-rows: var(--dd-entete) auto;
  align-content: start;
  row-gap: var(--dd-gouttiere);
  padding: var(--dd-marge);
  font-family: var(--dd-font-ui);
  font-size: var(--dd-t-corps);
  line-height: var(--dd-interligne);
}

.dd-ecran *,
.dd-ecran *::before,
.dd-ecran *::after { box-sizing: border-box; }
/* Un champ ne force jamais la largeur de son conteneur (grilles : toujours minmax(0, …)) */
.dd-ecran input, .dd-ecran select, .dd-ecran textarea { min-width: 0; max-width: 100%; }

.dd-ecran__entete {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dd-s4);
  min-height: 0;
}

.dd-ecran__marque {
  display: block;
  height: var(--dd-logo-entete);
  width: auto;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.55));
}

.dd-ecran__coin { display: flex; gap: var(--dd-s2); }

/* Mention « jeu conçu par Rodium » (credit.css) : dans la marge du bas, calée sur le bord droit du
   panneau. La marge reste sous le contenu quand la page défile : elle ne recouvre jamais une boîte. */
.dd-ecran > .dd-credit { position: absolute; right: var(--dd-marge); bottom: max(var(--dd-s1), calc((var(--dd-marge) - 16px) / 2)); }

.dd-ecran__gauche {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: var(--dd-gouttiere);
  min-height: 0;
}

.dd-ecran__gauche > * { width: 100%; margin-left: 0; margin-right: 0; }
.dd-ecran__gauche > :last-child { margin-top: auto; }

.dd-ecran__droite {
  grid-column: 3;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.dd-ecran__droite > .dd-boite { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.dd-boite__pied { margin-top: auto; }
/* Un bloc ne rétrécit jamais pour faire de la place : un bouton écrasé est pire qu'un débordement signalé */
.dd-boite > *, .dd-boite [data-panneau] > * { flex-shrink: 0; }
/* Onglets et libellés de bouton tiennent sur une ligne */
.dd-onglets { display: flex; }
.dd-onglets > * { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Boîte : une seule marge intérieure, un seul rayon, un seul filet */
.dd-boite {
  padding: var(--dd-boite-pad);
  border-radius: var(--dd-r-m);
  border: 1px solid rgba(196, 163, 90, 0.5);
}

.dd-boite--sombre {
  background: rgba(12, 10, 8, 0.6);
  color: var(--dd-creme);
  backdrop-filter: blur(2px);
}

.dd-boite--papier {
  background: linear-gradient(180deg, #f2e6c6 0%, #ebddb7 100%);
  color: var(--dd-encre-douce);
  border-color: rgba(160, 120, 40, 0.55);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.5);
}

/* Cadre d'une boîte papier réutilisable : grain, un clou en haut, sceau en option (.dd-sceau).
   Si la boîte commence par des onglets, ils deviennent des têtes de dossier, séparées du corps. */
.dd-boite--papier.dd-boite--cadre {
  position: relative;
  background-image:
    repeating-linear-gradient(0deg, rgba(120, 90, 30, .05) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #f2e6c6 0%, #ebddb7 100%);
}
.dd-boite--cadre::before {
  content: "";
  position: absolute;
  z-index: 4;
  top: -8px;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 32% 30%, #f0e2c4 0 2px, #c4ae82 3px, #6b5132 8px, #2e2114 16px);
  box-shadow: 0 2px 2px rgba(0, 0, 0, .45), inset 0 -2px 2px rgba(0, 0, 0, .35);
}
.dd-sceau {
  position: absolute;
  z-index: 4;
  right: -22px;
  top: 42px;
  width: 44px;
  height: auto;
  transform: rotate(9deg);
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35));
  pointer-events: none;
}
.dd-boite--cadre:has(> .dd-onglets) { padding-top: 0; }
.dd-boite--cadre > .dd-onglets {
  gap: var(--dd-s2);
  align-items: stretch;
  margin: 0 calc(var(--dd-boite-pad) * -1) var(--dd-s4);
  padding: var(--dd-s3) var(--dd-boite-pad) 0;
  border-bottom: 1px solid rgba(122, 91, 22, .35);
  background: rgba(90, 64, 24, .06);
}
.dd-boite--cadre > .dd-onglets > * {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border: 1px solid rgba(122, 91, 22, .32);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: #e3d3ae;
  color: #7a6a4a;
  padding: var(--dd-s2) var(--dd-s2) var(--dd-s3);
  margin-bottom: -1px;
  text-decoration: none;
  text-align: center;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  line-height: 1.15;
}
.dd-boite--cadre > .dd-onglets > *.on {
  background: #f2e6c6;
  color: #1d1810;
  border-color: rgba(122, 91, 22, .5);
  box-shadow: inset 0 -3px 0 var(--dd-or);
  z-index: 1;
}

/* Textes : uniquement les pas de l'échelle */
.dd-t-surtitre {
  font: 700 var(--dd-t-note) / 1.3 var(--dd-font-ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dd-or-clair);
  margin: 0;
}

.dd-t-titre {
  font: 400 var(--dd-t-titre) / var(--dd-interligne-titre) var(--dd-font-affiche);
  margin: 0;
  text-wrap: balance;
}

.dd-t-titre-boite {
  font: 600 var(--dd-t-titre-boite) / 1.2 var(--dd-font-titre);
  margin: 0;
}

.dd-t-accroche {
  font: 400 var(--dd-t-fort) / var(--dd-interligne) var(--dd-font-titre);
  margin: 0;
}

/* Pastille (étapes, rendez-vous, compteurs) sur fond d'image.
   Centrage optique : la hauteur est fixe et le texte rogné à la hauteur des capitales
   (text-box), sinon les majuscules flottent au-dessus du centre ; l'interlettrage
   laisse un vide après la dernière lettre, compensé à gauche. */
.dd-pastille {
  display: inline-flex; align-items: center; justify-content: center;
  height: 28px; padding: 0 var(--dd-s3) 0 calc(var(--dd-s3) + var(--dd-pastille-ls, 0.12em));
  border-radius: var(--dd-pill); border: 1px solid rgba(244, 232, 200, 0.3);
  background: rgba(0, 0, 0, 0.3); color: rgba(244, 232, 200, 0.7);
  font: 700 var(--dd-t-note) / 1 var(--dd-font-ui);
  letter-spacing: var(--dd-pastille-ls, 0.12em); text-transform: uppercase; white-space: nowrap;
  text-box: trim-both cap alphabetic;
}
.dd-pastille--on { background: var(--dd-or-clair); border-color: var(--dd-or-clair); color: var(--dd-encre); }
.dd-pastille--or { background: transparent; border-color: rgba(212, 160, 23, 0.7); color: var(--dd-or-clair);
  text-transform: none; --dd-pastille-ls: 0em; }

.dd-t-corps { font-size: var(--dd-t-corps); margin: 0; }
.dd-t-petit { font-size: var(--dd-t-petit); margin: 0; }
.dd-t-note { font-size: var(--dd-t-note); margin: 0; }

/* Petite hauteur de fenêtre : on resserre l'air, jamais les tailles de texte */
@media (max-height: 820px) {
  .dd-ecran { --dd-gouttiere: var(--dd-s4); --dd-boite-pad: var(--dd-s4); --dd-entete: 48px; --dd-air: var(--dd-s2); }
}

/* Étroit : une seule colonne qui défile, panneau sous le texte */
@media (max-width: 900px) {
  .dd-ecran {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
  }
  .dd-ecran__gauche, .dd-ecran__droite { grid-column: 1; grid-row: auto; }
  .dd-ecran__gauche > :last-child { margin-top: 0; }
  /* Le sceau reste dans la marge de la fenêtre : il ne fait jamais défiler la page en largeur */
  .dd-sceau { right: calc(var(--dd-marge) * -.5); }
}

/* Téléphone : des onglets trop nombreux défilent de côté, chacun garde son libellé entier sur une ligne */
@media (max-width: 480px) {
  .dd-ecran .dd-onglets { overflow-x: auto; scrollbar-width: none; }
  .dd-ecran .dd-onglets > *, .dd-ecran .dd-boite--cadre > .dd-onglets > * { flex: none; white-space: nowrap; overflow: visible; }
}

/* Téléphone et tablette : le décor en bandeau en tête de page, les parchemins dessous (test des joueurs exigeants du
   3 novembre 2026 : au téléphone, le décor passait derrière des parchemins empilés). Le décor, sa boucle, le voile du ciel
   et le voile de lecture tiennent dans le bandeau ; la page défile dessous, sur fond sombre. La frise ne recouvre jamais le
   texte : le bas de la page lui garde sa hauteur, toits et étiquettes compris. */
:root { --dd-bandeau: clamp(150px, 28vh, 300px); }
@media (max-width: 900px) {
  body > .fond, body > .fond-essai { position: absolute; top: 0; left: 0; right: 0; bottom: auto; height: calc(var(--dd-barre-haute) + var(--dd-bandeau)); }
  body > .voile, body > .dd-ciel-voile { position: absolute; top: 0; left: 0; right: 0; bottom: auto; height: calc(var(--dd-barre-haute) + var(--dd-bandeau)); }
  body > .voile { background: linear-gradient(to bottom, rgba(10, 7, 4, .15) 0%, rgba(10, 7, 4, 0) 40%, rgba(10, 7, 4, .55) 85%, #0d0a07 100%); }
  body > main.dd-ecran, body > .dd-ecran { padding-top: calc(var(--dd-barre-haute) + var(--dd-bandeau) - var(--dd-s4));
    padding-bottom: calc(var(--dd-frise) + var(--dd-frise-sol) + var(--dd-s4)); }
}