/* ============================================================
   PTF 2027 — v0.7
   ------------------------------------------------------------
   Surcouche d'interface uniquement (ne modifie ni pc.js, ni
   pc.css, ni style.css). Fonctionne avec ptf-2027.js (v0.7).
   ============================================================ */

:root{
  --ptf-ink:#2d241c;
  --ptf-brown:#5b3a24;
  --ptf-gold:#b88635;
  --ptf-paper:rgba(255,250,237,.96);
  --ptf-paper-soft:rgba(255,249,231,.62);
  --ptf-line:rgba(91,58,36,.18);
  --ptf-shadow:0 3px 12px rgba(45,30,18,.10);
  --ptf-strong:0 5px 18px rgba(45,30,18,.15);
}

body.pc{
  color:var(--ptf-ink);
  font-family:"Segoe UI","Helvetica Neue",Arial,sans-serif;
  font-size:15px;
}

/* ---------- Deux colonnes : Fiche (.right) à gauche, Combat (.left) à droite ---------- */
body.pc main{
  box-sizing:border-box;
  display:flex;
  gap:14px;
  padding:12px 14px 18px;
  height:calc(100vh - 58px);
  margin-top:58px;
  overflow:hidden;
}
body.pc main>.right{ order:1; }
body.pc main>.left{ order:2; }
body.pc main>.left,body.pc main>.right{
  box-sizing:border-box;
  width:50%;
  float:none;
  height:100%;
  padding:0 5px 35px;
  overflow-x:hidden;
  overflow-y:auto;
}

/* ---------- Cartes ---------- */
body.pc .card{
  box-sizing:border-box;
  margin:0 0 11px;
  padding:0;
  background:var(--ptf-paper);
  border:1px solid var(--ptf-line);
  border-radius:9px;
  box-shadow:var(--ptf-shadow);
  overflow:hidden;
}
body.pc .card>h2,body.pc .card>h3{
  box-sizing:border-box;
  margin:0;
  padding:8px 13px;
  border-bottom:1px solid rgba(91,58,36,.12);
  background:rgba(120,82,42,.045);
  text-align:left;
  font-size:17px;
  line-height:1.25;
}
body.pc .card>.in{ box-sizing:border-box; padding:13px 15px; }
body.pc hr{ display:none!important; }

/* ---------- En-tête : titre sur 2 lignes + résumé du personnage ---------- */
body.pc>header{
  height:58px;
  min-height:58px;
  box-sizing:border-box;
  z-index:10000;
  display:flex;
  align-items:center;
  gap:16px;
  padding:0 18px;
  background:linear-gradient(180deg,#2b1f16,#1e1813);
  border-bottom:2px solid #a87932;
  box-shadow:0 2px 10px rgba(0,0,0,.22);
}
body.pc>header h1{
  flex:0 0 auto;
  margin:0;
  padding:0;
  float:none;
  font-size:12.5px;
  line-height:1.35;
  color:#e7c778;
  text-shadow:0 1px 1px #000;
  white-space:nowrap;
}
body.pc>header h1 .ptf-h1-sub{
  display:block;
  font-size:10.5px;
  font-weight:400;
  opacity:.75;
}
#ptf-header-identity{
  order:2;
  flex:0 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:1px;
  overflow:hidden;
  padding-left:14px;
  border-left:1px solid rgba(255,255,255,.14);
}
#ptf-header-identity .ptf-hi-name{
  font-family:"PT Serif",Georgia,serif;
  font-size:17px;
  font-weight:700;
  line-height:1.15;
  color:#f3e2b8;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#ptf-header-identity .ptf-hi-meta{
  font-size:11px;
  line-height:1.2;
  color:#c9ad7a;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
body.pc header .character-controls{
  position:static;
  top:auto; left:auto;
  order:3;
  margin-left:auto;
  display:flex;
  gap:8px;
  flex:0 0 auto;
}
body.pc header .character-controls button{
  min-height:34px;
  padding:6px 11px;
  border:1px solid #b88a3d;
  border-radius:6px;
  background:rgba(255,250,235,.08);
  color:#f7e4b1;
  font-size:12px;
  cursor:pointer;
  white-space:nowrap;
}
body.pc header .character-controls button:hover{ background:rgba(255,250,235,.16); }

/* ---------- Carte d'identité ---------- */
body.pc main>.right>.card:first-child{ min-height:250px; box-shadow:var(--ptf-strong); }
body.pc main>.right>.card:first-child>h2{ padding-left:235px; }
body.pc main>.right>.card:first-child>.in{ padding:15px 17px 10px 235px; }
body.pc main>.right>.card:first-child>.table{ box-sizing:border-box; padding:0 17px 12px; }
body.pc main>.right>.card:first-child>.table:nth-of-type(4),
body.pc main>.right>.card:first-child>.table:nth-of-type(5){ padding-left:235px; }
body.pc main>.right>.card:first-child .td:has(#level){ width:90px; }
body.pc #name{ width:min(100%,440px); box-sizing:border-box; padding:8px 11px; font-size:20px; font-weight:600; }
body.pc #level{ width:100%!important; text-align:center; }
body.pc #gender{ width:100%; }
body.pc #kind{ width:100%; }
body.pc #type{ width:100%; }
body.pc #age{ width:100%; }
body.pc #height,body.pc #weight{ width:100%; }
body.pc #description{ width:100%; }

body.pc .character-img{
  position:absolute!important;
  top:15px; left:15px;
  width:205px!important; height:205px!important;
  margin:0!important; padding:0!important;
}
body.pc .character-img img,body.pc #character-avatar{
  width:205px!important; height:205px!important;
  object-fit:cover;
  border:2px solid rgba(91,58,36,.55);
  border-radius:8px;
  box-shadow:0 3px 10px rgba(45,30,18,.16);
}

body.pc input:not([type=checkbox]):not([type=radio]),body.pc select,body.pc textarea{
  box-sizing:border-box;
  border:1px solid rgba(91,58,36,.22);
  border-radius:6px;
  background:rgba(255,252,242,.82);
  color:var(--ptf-ink);
}

/* ---------- Attributs ---------- */
body.pc .ptf-attributes-card{ box-shadow:var(--ptf-strong)!important; }
body.pc .ptf-attributes-card>h3{ font-size:19px; padding:9px 14px; }
body.pc .td:has(#attack-total)>h4::before{ content:"⚔️ "; font-size:1.3em; }
body.pc .td:has(#protection-total)>h4::before{ content:"🛡️ "; font-size:1.3em; }
body.pc #attack-total,body.pc #protection-total{
  font-size:18px;
  font-weight:700;
  text-align:center;
  border-radius:8px;
  padding:6px 4px !important;
}
body.pc #protection-total{ color:#2d5a3d; border:2px solid #2d5a3d; background:rgba(45,90,61,.10); }
body.pc #attack-total{ color:#7a2020; border:2px solid #7a2020; background:rgba(122,32,32,.10); }

/* Bonus de combat / Bonus spécial / Protection totale / Attaque
   totale : passage en flex pour un alignement fiable sur une seule
   ligne, quelle que soit la largeur du contenu de chaque colonne
   (le display:table natif dépendait de la structure HTML corrigée
   ci-dessus, mais reste fragile en cas de contenu inégal). */
body.pc .table.col3:has(#cor){ display:flex; }
body.pc .table.col3:has(#cor) > .tr{
  display:flex;
  flex-wrap:wrap;
  width:100%;
  gap:10px;
}
body.pc .table.col3:has(#cor) > .tr > .td{
  display:block;
  flex:1 1 140px;
  padding:0 0 6px !important;
  text-align:center;
}
body.pc .table.col3:has(#cor) input{ width:100%; }

/* Pièces (PO/PA/PC) : les champs grandissaient via flex:1 pour
   remplir tout le tiers de colonne (bien plus large que
   nécessaire), et la 3e colonne (PC) n'avait aucune marge droite
   propre, contrairement aux rangées voisines de la fiche. */
body.pc .table.col3:has(#money-g) .money-input-wrapper input[type=number]{
  flex:0 1 auto;
  width:90px;
  max-width:90px;
}
body.pc .table.col3:has(#money-g) .td:last-child{
  padding-right:17px !important;
}

/* ---------- Paire de cartes : Armes + Protections ---------- */
.ptf-pair-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:11px;
  margin:0 0 11px;
}
.ptf-pair-grid>.card{ margin-bottom:0; min-width:0; }

body.pc .ptf-important-card>h3{ font-size:15px; padding:8px 11px; }
body.pc .ptf-important-card>.in{ padding:9px 11px; }

/* Armes et protections : n'afficher que ce qui est équipé (le reste
   reste accessible via le bouton "MODIFIER" de chaque carte) */
#weapon-list li:not(:has(.equipped-marker:not(:empty))),
#equipment-list li:not(:has(.equipped-marker:not(:empty))){
  display:none;
}
body.pc .equipped-marker{ display:none; }

/* ---------- Rubriques secondaires repliables + badge de comptage ----------
   L'ouverture/fermeture réelle est pilotée par ptf-2027.js (style.display) ;
   ces règles ne s'occupent que de l'apparence. */
body.pc .ptf-secondary-card{ background:var(--ptf-paper-soft); box-shadow:none; }
body.pc .ptf-secondary-card>h3,
body.pc .ptf-secondary-card>h2{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  user-select:none;
}
body.pc .ptf-secondary-card>h3>.fr,
body.pc .ptf-secondary-card>h2>.fr{ flex:1 1 auto; }
.ptf-collapse-arrow{
  flex:0 0 auto;
  font-size:11px;
  font-weight:400;
  opacity:.65;
  white-space:nowrap;
}
.ptf-count-badge{
  flex:0 0 auto;
  font-size:11px;
  font-weight:400;
  color:var(--ptf-brown);
  background:rgba(91,58,36,.08);
  padding:2px 7px;
  border-radius:10px;
  white-space:nowrap;
}

body.pc .garou-panel{ box-shadow:none; background:rgba(255,249,231,.70); }

/* ---------- Listes : talents, sorts, objets ---------- */
#spell-list li,#talent-list li,#item-list li{
  font-weight:400;
  line-height:1.6;
  padding:10px 4px 12px;
  border-bottom:1px solid rgba(91,58,36,.18);
}
#spell-list li:last-child,#talent-list li:last-child,#item-list li:last-child{ border-bottom:0; }
#spell-list li strong,#talent-list li strong{
  font-weight:700;
  display:block;
  margin-bottom:3px;
}

/* ---------- Pied de fiche : Poids porté / Richesses ---------- */
.ptf-footer-bar{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px 20px;
  margin:4px 4px 20px;
  padding:10px 14px;
  font-size:13px;
  color:var(--ptf-brown);
  background:rgba(120,82,42,.05);
  border:1px solid rgba(91,58,36,.14);
  border-radius:8px;
}
.ptf-footer-item strong{ font-weight:700; }

/* ---------- Combat, mis en avant ---------- */
body.pc #combat{ border:2px solid rgba(91,58,36,.28); box-shadow:var(--ptf-strong); }
body.pc #combat>.in{ padding:14px 16px; }
body.pc #combat>.combat-mode-select{ padding:0 16px; box-sizing:border-box; }
body.pc #combat .in>a.roll{ width:190px; height:70px; margin:12px auto 8px; }
body.pc #comres{ margin-top:0; border-top:1px solid rgba(91,58,36,.10); background:rgba(255,251,239,.94); }


/* Harmonise les titres de cartes non couverts par .tc2/.tc3 (pc.css) :
   sans ces règles, ils n'ont ni gras ni couleur ni taille cohérente. */
body.pc h2.tc4,body.pc h2.tc5{
  color:var(--ptf-brown);
  font-size:1.15em;
  font-weight:700;
  text-align:center;
}

#mr-lists ul{
  background:rgba(255,255,255,.55);
  border:1px solid rgba(91,58,36,.16);
  border-radius:8px;
  padding:8px 10px;
  margin-bottom:8px;
}
#mr-lists ul.mr-dead{ opacity:.55; }


/* Boutons "Avec CM / Sans CM" : ce bloc n'a pas de ligne de
   libellé au-dessus contrairement à ses voisins (Nom, CM initial,
   CM actuel...), donc align-items:center (règle .flex de
   style.css) le centrait sur une hauteur totale plus faible que
   celle des voisins à deux lignes — d'où le décalage vers le haut.
   On l'aligne ici sur le bas de la rangée, comme le sont les
   champs de saisie voisins par rapport à leur libellé. */
#mr-lists .foe-type-toggle{ align-self:flex-end; }

body.pc #sr{ border:1px solid rgba(91,58,36,.20); box-shadow:var(--ptf-shadow); }
body.pc #sr>h2{ font-size:18px; color:#496047; }

/* ---------- Outils de dés : compacts, toujours visibles ----------
   L'ouverture/fermeture réelle est pilotée par ptf-2027.js. */
body.pc #ptf-dice-tools{
  margin:11px 0 20px;
  padding:0;
  border:1px solid rgba(91,58,36,.17);
  border-radius:8px;
  background:rgba(255,249,231,.66);
  box-shadow:none;
  overflow:hidden;
}
body.pc #ptf-dice-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  min-height:38px;
  box-sizing:border-box;
  padding:8px 13px;
  margin:0;
  border:0;
  background:transparent;
  cursor:pointer;
  user-select:none;
  font:inherit;
  font-weight:700;
  font-size:14px;
  color:var(--ptf-brown);
  text-align:left;
}
#ptf-dice-arrow{ font-size:11px; font-weight:400; opacity:.65; }
body.pc #ptf-dice-body{ padding:0 9px 9px; }
body.pc #ptf-dice-body[style*="grid"]{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
}
body.pc #ptf-dice-body>.card{
  min-width:0; margin:0;
  border:1px solid rgba(91,58,36,.13);
  border-radius:7px;
  box-shadow:none;
}
body.pc #ptf-dice-body>.card>h2{ padding:6px 8px; font-size:13px; text-align:center; }
body.pc #ptf-dice-body>.card>.in{ padding:7px 8px; text-align:center; }

/* ============================================================
   RESPONSIVE — tablettes et petits écrans (plusieurs paliers)
   ============================================================ */

/* ---------- Tablettes en paysage / petits écrans d'ordinateur (901–1200px) ----------
   Garde la mise en page à deux colonnes, mais réduit le portrait
   pour que le texte à côté de lui ne soit plus écrasé sur une
   largeur de colonne réduite. */
@media screen and (min-width:901px) and (max-width:1200px){
  body.pc main{ gap:10px; padding:10px 10px 14px; }
  body.pc .character-img,
  body.pc .character-img img,
  body.pc #character-avatar{ width:150px!important; height:150px!important; }
  body.pc main>.right>.card:first-child{ min-height:190px; }
  body.pc main>.right>.card:first-child>h2{ padding-left:175px; }
  body.pc main>.right>.card:first-child>.in{ padding-left:175px; }
  body.pc main>.right>.card:first-child>.table:nth-of-type(4),
  body.pc main>.right>.card:first-child>.table:nth-of-type(5){ padding-left:175px; }
  .ptf-pair-grid{ gap:8px; }
}

/* ---------- Tablettes en portrait et mobiles (≤900px) ----------
   Empile les deux colonnes l'une sous l'autre. */
@media screen and (max-width:900px){
  body.pc main{ display:block; height:auto; min-height:calc(100vh - 58px); overflow:visible; }
  body.pc main>.left,body.pc main>.right{ width:100%; height:auto; overflow:visible; }
  body.pc main>.right>.card:first-child>h2{ padding-left:17px; }
  body.pc main>.right>.card:first-child>.in{ padding:15px 17px; }
  body.pc main>.right>.card:first-child>.table{ padding-left:17px; }
  /* Corrige la fuite de spécificité : sans ce doublon exact du
     sélecteur (avec :nth-of-type), la règle desktop plus spécifique
     continuait à réserver 235px pour les lignes Langues et Pièces,
     même une fois l'avatar repassé en position normale. */
  body.pc main>.right>.card:first-child>.table:nth-of-type(4),
  body.pc main>.right>.card:first-child>.table:nth-of-type(5){ padding-left:17px; }
  body.pc .character-img{ position:relative!important; top:auto; left:auto; margin:10px auto!important; }
  #ptf-header-identity{ display:none; }
  body.pc>header h1{ max-width:none; opacity:1; font-size:14px; }
  /* Armes + Protections : sur une colonne unique déjà étroite, les
     deux cartes côte à côte devenaient trop resserrées. */
  .ptf-pair-grid{ grid-template-columns:1fr; }
}

/* ---------- Petits téléphones (≤600px) ----------
   Resserre encore l'espacement et simplifie certains blocs. */
@media screen and (max-width:600px){
  body.pc main{ padding:8px 8px 14px; }
  body.pc .character-img,
  body.pc .character-img img,
  body.pc #character-avatar{ width:130px!important; height:130px!important; }
  /* Les 5 outils de dés redeviennent lisibles en une seule colonne. */
  body.pc #ptf-dice-tools.ptf-dice-open #ptf-dice-body{
    grid-template-columns:1fr;
  }
  /* Le pied de fiche s'empile proprement au lieu de se répartir
     sur une ligne trop étroite. */
  .ptf-footer-bar{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }
  body.pc #combat .in>a.roll{ width:160px; height:60px; }
}