/* ==========================================================================
   holaQoQa — gabarit de fiche A4 (210 × 297 mm)
   Ce fichier ne contient QUE la fiche : il est partagé par l'éditeur et
   par l'export PDF. Tout est exprimé en mm / em pour rester fidèle à
   l'impression, quel que soit le zoom d'écran.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Police du texte courant — Inter (hébergée avec le site, licence SIL OFL).
   Aucun appel à Google Fonts : la fiche s'affiche à l'identique même hors
   ligne ou derrière une protection par mot de passe.
   -------------------------------------------------------------------------- */
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }

/* --------------------------------------------------------------------------
   Police des titres — Ottertype
   Déposez le fichier dans assets/fonts/ (voir assets/fonts/LISEZ-MOI.txt).
   La règle @font-face correspondante est générée par PHP uniquement si le
   fichier est présent (voir ottertype_face() dans lib/sheet.php) : tant qu'il
   manque, les titres retombent proprement sur Inter en gras.
   -------------------------------------------------------------------------- */

:root {
  /* --- Palette de marque -------------------------------------------- */
  --hq-magenta:      #c42a76;   /* magenta exact du logo             */
  --hq-magenta-soft: #f6bcd7;   /* contour des cercles inactifs      */
  --hq-pink-light:   #fbdcea;   /* fond des grandes cartes roses     */
  --hq-pink-mid:     #f5b9d5;   /* fond du bloc « Rôles »            */
  --hq-pink-pale:    #fce3ef;   /* fond intérieur des cercles        */
  --hq-grey-light:   #e2e2e2;   /* Redevabilités, Principaux, Invent.*/
  --hq-grey-mid:     #bcbcbc;   /* Domaines, Missions, Additionnels  */
  --hq-grey-line:    #bdbdbd;   /* contour des cercles de rôles      */
  --hq-label:        #6d6d6d;   /* couleur des intitulés gris        */
  --hq-text:         #4a4a4a;   /* texte courant                     */

  /* --- Typographie --------------------------------------------------- */
  --hq-font-display: 'Ottertype', 'Inter', system-ui, sans-serif;
  --hq-font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* --- Géométrie ------------------------------------------------------ */
  --hq-radius-card:  4mm;
  --hq-radius-box:   3mm;

  /* Respiration intérieure des blocs de texte */
  --hq-pad-y: 3.4mm;
  --hq-pad-x: 4mm;
}

/* ==========================================================================
   Page
   ========================================================================== */

.hq-sheet {
  position: relative;
  box-sizing: border-box;
  width: 210mm;
  height: 297mm;
  background: #fff;
  color: var(--hq-text);
  font-family: var(--hq-font-body);
  font-size: 3.7mm;            /* base : toutes les tailles en em */
  line-height: 1.35;
  overflow: hidden;
}

.hq-sheet *,
.hq-sheet *::before,
.hq-sheet *::after { box-sizing: border-box; }

.hq-sheet__inner {
  height: 100%;
  padding: 6mm 13mm 9.5mm;     /* marge du haut réduite */
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
   En-tête : logo + image du personnage
   ========================================================================== */

.hq-head {
  position: relative;
  flex: 0 0 32mm;
  height: 32mm;
}

.hq-head__logo {
  position: absolute;
  left: 43.9mm;
  top: 1mm;
  height: 30mm;
  width: auto;
  object-fit: contain;
}

.hq-head__avatar {
  position: absolute;
  left: 109.1mm;
  top: 0;
  width: 32mm;
  height: 32mm;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  z-index: 5;
}

.hq-head__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hq-head__avatar-hint { display: none; }

/* ==========================================================================
   Blocs génériques
   ========================================================================== */

.hq-box {
  position: relative;
  border-radius: var(--hq-radius-box);
  padding: var(--hq-pad-y) var(--hq-pad-x);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.hq-box--pink-light { background: var(--hq-pink-light); }
.hq-box--pink       { background: var(--hq-pink-mid); }
.hq-box--grey-light { background: var(--hq-grey-light); }
.hq-box--grey-mid   { background: var(--hq-grey-mid); }

.hq-label {
  font-family: var(--hq-font-display);
  font-weight: 700;
  font-size: 1.2em;
  line-height: 1.1;
  letter-spacing: .01em;
  margin-bottom: 2.2mm;
  flex: 0 0 auto;
}

.hq-label--grey { color: var(--hq-label); }
.hq-label--pink { color: var(--hq-magenta); }
.hq-label--sm   { font-size: 1.04em; }

/* Listes à puces (contenu éditable) ---------------------------------- */

.hq-list {
  flex: 1 1 auto;
  min-height: 0;
  font-size: .95em;
  overflow: hidden;
  outline: none;
}

.hq-list ul {
  margin: 0;
  padding: 0 1mm 0 4.8mm;
  list-style: disc;
}

.hq-list li {
  margin: 0 0 1.7mm;
  padding: 0;
  overflow-wrap: break-word;
}

.hq-list li::marker { font-size: .85em; }

/* ==========================================================================
   Carte principale
   ========================================================================== */

.hq-main {
  flex: 0 0 118mm;
  height: 118mm;
  background: var(--hq-pink-light);
  border-radius: var(--hq-radius-card);
  padding: 3mm;
  display: flex;
  gap: 3mm;
}

.hq-main__left,
.hq-main__right {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.hq-main__left > .hq-label { margin: .8mm 0 2mm 1.8mm; }

/* --- Cercles --------------------------------------------------------- */

.hq-cercles {
  flex: 0 0 auto;
  display: flex;
  gap: 2.1mm;
  margin-bottom: 4mm;
}

.hq-circle {
  position: relative;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Les bulles sont des aplats blancs sans contour : posées sur un fond
   coloré, elles se détachent nettement mieux qu'avec un filet clair, et le
   texte gagne en lisibilité. */
.hq-circle--cercle {
  flex: 1 1 0;
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 0;
}

/* Seule exception : le cercle mis en évidence. C'est désormais le seul
   contour de la page, donc il se repère immédiatement.
   (Un `border` plutôt qu'un `box-shadow` : certains navigateurs suppriment
   les ombres à l'impression, jamais les bordures. `box-sizing: border-box`
   garantit que la bulle garde exactement la même taille.) */
.hq-circle--cercle.is-active {
  border: .7mm solid var(--hq-magenta);
}

.hq-circle__text {
  width: 82%;
  max-height: 80%;
  overflow: hidden;
  font-size: .85em;
  font-weight: 700;            /* texte des cercles en gras */
  line-height: 1.2;
  color: var(--hq-text);
  outline: none;
  /* Les mots ne sont jamais coupés : c'est la taille de police qui
     s'adapte (voir assets/js/fit.js). */
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

.hq-circle__toggle { display: none; }

.hq-main__redev { flex: 1 1 auto; }

/* --- Rôles ----------------------------------------------------------- */

.hq-roles {
  flex: 0 0 68mm;
  height: 68mm;
}

/* La grappe de bulles couvre toute la surface du bloc : les pourcentages
   ci-dessous se lisent alors directement sur le bloc. Le label passe
   au-dessus. */
.hq-roles__grid {
  position: absolute;
  inset: 0;
}

.hq-roles > .hq-label {
  position: relative;
  z-index: 2;
}

.hq-roles .hq-circle--role {
  position: absolute;
  width: 22mm;
  height: 22mm;
  transform: translate(-50%, -50%);
  background: #fff;
  border: 0;
}

/* Six bulles réparties sur toute la zone (centre en % du bloc).
   La rangée du bas est légèrement décalée pour garder l'aspect organique
   du gabarit d'origine. */
.hq-circle--role[data-role-index="0"] { left: 24%; top: 39%; }
.hq-circle--role[data-role-index="1"] { left: 51%; top: 39%; }
.hq-circle--role[data-role-index="2"] { left: 78%; top: 39%; }
.hq-circle--role[data-role-index="3"] { left: 21%; top: 77%; }
.hq-circle--role[data-role-index="4"] { left: 48%; top: 77%; }
.hq-circle--role[data-role-index="5"] { left: 75%; top: 77%; }

.hq-circle--role .hq-circle__text { font-size: .8em; width: 84%; }

/* --- Domaines -------------------------------------------------------- */

.hq-domaines {
  flex: 1 1 auto;
  margin-top: 3.7mm;
}

/* ==========================================================================
   Bas de page : Pouvoirs · Missions · Inventaire
   ========================================================================== */

.hq-bottom {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 4.5mm;
  display: flex;
  gap: 3.6mm;
}

.hq-bottom > .hq-box { flex: 1 1 0; min-width: 0; }

.hq-pouvoirs { padding: 3.4mm 3.2mm; }

.hq-pouvoirs__main {
  flex: 0 0 46mm;
  height: 46mm;
  margin-bottom: 3mm;
  padding: 3mm 3.4mm;
}

.hq-pouvoirs__extra {
  flex: 1 1 auto;
  padding: 3mm 3.4mm;
}

.hq-pouvoirs__main .hq-list,
.hq-pouvoirs__extra .hq-list { font-size: .9em; }

/* ==========================================================================
   Impression : A4 exact, couleurs conservées, une fiche par page
   ========================================================================== */

@page {
  size: A4 portrait;
  margin: 0;
}

@media print {
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  .hq-sheet {
    width: 210mm !important;
    height: 297mm !important;
    margin: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    page-break-after: always;
    break-after: page;
  }

  .hq-sheet:last-of-type {
    page-break-after: auto;
    break-after: auto;
  }

  /* Indispensable pour conserver les aplats roses / gris */
  .hq-sheet,
  .hq-sheet * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .hq-noprint { display: none !important; }
}