/* ═══════════════════════════════════════════════════════════════════════════
   PERSONNALISATION ET ADAPTATION AUX ÉCRANS
   Chargée en dernier : elle applique les choix du menu « Apparence » et
   s'assure que rien ne dépasse, du petit téléphone au grand écran.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── taille des titres ───────────────────────────────────────────────────── */
h1{font-size:calc(2.05rem * var(--ech-titre))}
h2{font-size:calc(1.5rem * var(--ech-titre))}
h3{font-size:calc(1.2rem * var(--ech-titre))}
.entete-section h1{font-size:calc(2.4rem * var(--ech-titre))}
.pl-titre h1{font-size:calc(2.3rem * var(--ech-titre))}
.carte-evt .ce-corps b,.carte-cp>b,.pf-corps b,.carte-reglage b{font-size:calc(1.3rem * var(--ech-titre))}
.rp-tete h2{font-size:calc(1.7rem * var(--ech-titre))}
.stat b{font-size:calc(2rem * var(--ech-titre))}
.doc-total{font-size:calc(2rem * var(--ech-titre))}

/* ── densité : l'air autour des contenus ─────────────────────────────────── */
.card{padding:calc(22px * var(--dens))}
.card+.card{margin-top:calc(16px * var(--dens))}
.ligne{padding:calc(13px * var(--dens)) calc(16px * var(--dens))}
.btn{padding:calc(10px * var(--dens)) calc(20px * var(--dens))}
.btn.sm{padding:calc(6px * var(--dens)) calc(12px * var(--dens))}
.btn.gros{padding:calc(13px * var(--dens)) calc(24px * var(--dens))}
input,select,textarea{padding:calc(11px * var(--dens)) 14px}
.field{margin-bottom:calc(14px * var(--dens))}
.stat{padding:calc(16px * var(--dens)) calc(18px * var(--dens))}
.stats{gap:calc(12px * var(--dens));margin-bottom:calc(16px * var(--dens))}
.pl-tuile{padding:calc(12px * var(--dens)) calc(14px * var(--dens))}
.tache-carte{padding:calc(10px * var(--dens)) calc(12px * var(--dens))}
.feuille-boite{padding:calc(18px * var(--dens)) calc(20px * var(--dens)) calc(20px * var(--dens))}
.modal-box{padding:calc(24px * var(--dens))}
.side-nav a{padding:calc(10px * var(--dens)) 12px}
.pe-media-grille,.grid{gap:calc(10px * var(--dens))}

/* ── taille des icônes ───────────────────────────────────────────────────── */
svg.ic{width:calc(1.15em * var(--ic));height:calc(1.15em * var(--ic))}
svg.ic.gros{width:calc(1.6em * var(--ic));height:calc(1.6em * var(--ic))}

/* ── style des boutons ───────────────────────────────────────────────────── */
.btn,.chip,.segments,.segments button,.puces-choix button,.tache-etat,.pl-bande button,
.recherche-champ input,.tag{border-radius:var(--rayon-btn)}
[data-boutons="doux"]{--rayon-btn:12px}
[data-boutons="carres"]{--rayon-btn:6px}
[data-boutons="carres"] .avatar,[data-boutons="carres"] .mini-avatar{border-radius:8px}

/* ── style des cartes ────────────────────────────────────────────────────── */
.card,.carte-evt,.carte-cp,.pf-carte,.carte-reglage,.liste-lignes,.pl-tuile,.tache-carte{
  border-radius:var(--rayon)}
.card{background:var(--carte-fond);box-shadow:var(--ombre-carte)}
[data-cartes="plates"]{--ombre-carte:none;--carte-fond:var(--surface)}
[data-cartes="contour"]{--ombre-carte:none;--carte-fond:transparent}
[data-cartes="contour"] .card{border-color:var(--line-or)}
[data-cartes="plates"] .carte-evt,[data-cartes="plates"] .carte-cp,[data-cartes="plates"] .pf-carte,
[data-cartes="contour"] .carte-evt,[data-cartes="contour"] .carte-cp,[data-cartes="contour"] .pf-carte{
  background:var(--carte-fond);box-shadow:none}
[data-coins="droits"]{--rayon:8px;--rayon-sm:6px}
[data-coins="ronds"]{--rayon:22px;--rayon-sm:14px}

/* ── animations ──────────────────────────────────────────────────────────── */
[data-anim="reduites"] *,[data-anim="reduites"] *::before,[data-anim="reduites"] *::after{
  transition-duration:.1s!important;animation-duration:.25s!important}
[data-anim="aucune"] *,[data-anim="aucune"] *::before,[data-anim="aucune"] *::after{
  transition:none!important;animation:none!important}
[data-anim="aucune"] html,[data-anim="aucune"] body{scroll-behavior:auto}
/* les indicateurs d'attente continuent de tourner : sinon on ne voit plus rien travailler */
[data-anim] .btn.en-cours::after,[data-anim] .spinner,[data-anim] .loader i,
[data-anim] .feuille-liste button.en-cours::after,[data-anim] .pp-bouton.en-cours::after{
  animation:tg-tourne .8s linear infinite!important}

/* ── contraste renforcé ──────────────────────────────────────────────────── */
[data-contraste="fort"]{--texte-doux:var(--texte);--texte-faible:var(--texte-doux);
  --line:var(--line-or-fort);--line-or:var(--line-or-fort);--trait:var(--trait-fort)}
[data-contraste="fort"] .small,[data-contraste="fort"] .faint{color:var(--texte-doux)}
[data-contraste="fort"] .btn{border-width:2px}
[data-contraste="fort"] a:focus-visible,[data-contraste="fort"] button:focus-visible,
[data-contraste="fort"] input:focus,[data-contraste="fort"] select:focus,[data-contraste="fort"] textarea:focus{
  outline:3px solid var(--gold);outline-offset:2px}
[data-contraste="fort"] .tag{border-width:1.5px}

/* ── éléments secondaires (explications, aides) ──────────────────────────── */
[data-secondaire="0"] .aide,
[data-secondaire="0"] .pf-aide,
[data-secondaire="0"] .cp-mode,
[data-secondaire="0"] .carte-activite,
[data-secondaire="0"] p.small.faint,
[data-secondaire="0"] .small.faint:not(.ligne-corps .small):not(.stat small){display:none}

/* ── listes : plus ou moins d'informations ───────────────────────────────── */
[data-listes="compact"] .ligne{padding:calc(8px * var(--dens)) calc(12px * var(--dens))}
[data-listes="compact"] .ligne .pastille-icone{width:30px;height:30px;border-radius:9px}
[data-listes="compact"] .ligne-corps .small{font-size:.74rem}
[data-listes="compact"] .avatar.petit{width:30px;height:30px}
[data-listes="compact"] .tache-carte{gap:4px}
[data-listes="detaille"] .ligne{padding:calc(16px * var(--dens)) calc(18px * var(--dens))}
[data-listes="detaille"] .ligne-corps .small{white-space:normal}
[data-listes="detaille"] .ligne-chiffres{gap:4px}

/* ═══════════════════════════════════════════════════════════════════════════
   ADAPTATION AUX ÉCRANS — règles communes à toutes les pages
   ═══════════════════════════════════════════════════════════════════════════ */
/* rien ne dépasse : les grilles et les flex ne poussent plus la page */
.row,.stats,.grid,.liste-lignes,.card,.section,.main{max-width:100%}
.row>*{min-width:0}
.linkrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.linkrow input{flex:1 1 220px;min-width:0}
.linkrow .btn{flex:0 0 auto}
input,select,textarea{max-width:100%}
select{text-overflow:ellipsis}

/* boutons : le texte reste dedans, et la zone reste assez grande au doigt */
.btn{white-space:normal;text-align:center;line-height:1.25;min-height:calc(40px * var(--dens))}
.btn.icone{min-width:calc(40px * var(--dens));padding:0 !important}
.btn.sm{min-height:calc(32px * var(--dens))}
.btn.block{width:100%}
@media (pointer:coarse){
  .btn,.chip,.puces-choix button,.segments button,.tache-etat,.feuille-liste button{min-height:44px}
  .btn.sm,.chip{min-height:38px}
  .ligne{min-height:52px}
}

/* tableaux : ils défilent au lieu de casser la page */
.tableau{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse}
@media (max-width:700px){
  .tableau table{min-width:520px}
}

/* fenêtres et feuilles : jamais plus hautes ni plus larges que l'écran */
.modal{padding:14px;overscroll-behavior:contain}
.modal-box{max-width:min(560px,100%);max-height:calc(100dvh - 28px);overflow:auto}
.modal.plein .modal-box,.modal .choisir{max-width:100%}
.feuille-boite{max-height:92dvh;overflow:auto;
  padding-bottom:calc(20px * var(--dens) + env(safe-area-inset-bottom))}
.feuille.large .feuille-boite{max-width:min(760px,100%)}

/* en-têtes de page : les actions passent à la ligne proprement */
.entete-section{flex-wrap:wrap}
.es-actions{flex-wrap:wrap}
.cardhead{flex-wrap:wrap}

/* ── tablette (et petit ordinateur portable) ─────────────────────────────── */
@media (min-width:901px) and (max-width:1200px){
  .side{width:212px;padding:16px 12px}
  .side-nav a{font-size:.86rem;gap:9px}
  .main{padding:18px 18px 50px}
  .entete-section h1{font-size:calc(2rem * var(--ech-titre))}
  .stats{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .doc-grille{grid-template-columns:1fr}
  .doc-apercu{max-width:560px}
  .cp-editeur{grid-template-columns:1fr}
  .cp-droite{position:static}
  .pe-grille{grid-template-columns:1fr}
  .pe-infos{position:static}
  .ed-bas{grid-template-columns:1fr}
}
/* tablette en portrait : on garde la barre du bas, plus confortable au doigt */
@media (min-width:601px) and (max-width:900px){
  .main{padding:18px 20px 80px}
  .stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .pl-grille{display:block}
  .pf-grille,.liste-cartes-cp,.cartes-evts{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
  .nav-bas a span,.nav-bas button span{font-size:.72rem}
}

/* ── téléphone ───────────────────────────────────────────────────────────── */
@media (max-width:600px){
  .es-actions{width:100%}
  .es-actions>.btn,.es-actions>a.btn{flex:1 1 auto}
  .row{flex-direction:row;flex-wrap:wrap}
  .row>*{flex:1 1 100%}
  .row.deux>*{flex:1 1 calc(50% - 6px)}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats.kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .liste-lignes{border-radius:var(--rayon)}
  .ligne{gap:10px}
  .ligne-chiffres{align-items:flex-end}
  .ligne-corps b{font-size:.92rem}
  .barre-enregistrer{position:sticky;bottom:calc(74px + env(safe-area-inset-bottom));z-index:30}
  .barre-enregistrer .btn{flex:1}
  .feuille-boite{border-radius:22px 22px 0 0}
  .modal{padding:10px}
  .modal-box{border-radius:20px;max-height:calc(100dvh - 20px)}
  .puces-choix{gap:6px}
  .segments{overflow:auto;scrollbar-width:none}
  .segments::-webkit-scrollbar{display:none}
  .segments button{white-space:nowrap}
}
@media (max-width:380px){
  .stats,.stats.kpi{grid-template-columns:1fr}
  .btn{font-size:.84rem}
  .entete-section h1{font-size:calc(1.55rem * var(--ech-titre))}
}

/* l'adaptation automatique à la taille de l'écran est faite par theme.js
   (densité et taille des textes), ici seulement la largeur maximale */
@media (min-width:1600px){
  [data-auto="1"] .main{max-width:1500px}
}

/* les petites étiquettes ne se coupent jamais au milieu d'un mot */
.tag,.chip,.pl-bloc-bas em,.pl-carte-bas em,.mini-avatar,.tf-badge,.pastille-nb{overflow-wrap:normal;word-break:keep-all}
.tag,.chip,.tf-badge,.pastille-nb{flex:0 0 auto;max-width:100%}
.ligne-corps b{flex-wrap:wrap}

/* rangées de puces (filtres, tris) : elles défilent au lieu de se chevaucher */
.filtres-puces,.pt-filtres,.rp-statuts,.pl-onglets-mobile{flex-wrap:wrap}
.filtres-puces .chip,.pt-filtres .chip,.rp-statuts .chip{flex:0 0 auto}
@media (max-width:600px){
  /* le défilement bord à bord des puces est désormais réglé une seule fois,
     dans responsive.css, avec la même marge que la page. */
}

/* une ligne de liste ne doit jamais être écrasée par le montant à droite */
.ligne-corps{flex:1 1 45%}
.ligne .montant{flex:0 1 auto;min-width:0}
.ap-apercu .ligne{flex-wrap:wrap}
.ap-apercu .ligne .montant{margin-left:auto}

/* très petits écrans : les montants passent sous le nom plutôt que de l'écraser */
@media (max-width:480px){
  .ligne{flex-wrap:wrap}
  .ligne-corps{flex:1 1 60%}
  .ligne-chiffres{margin-left:auto;text-align:right}
}