/* ==========================================================================
   PTC — Encarts
   Reprend le motif des espaces de l'application (/app/) pour l'appliquer aux
   pages du site : un encart = un bandeau coloré + un corps de lignes ouvrables.
   Objectif : mêmes repères visuels dans l'app et sur le site.
   Créé le 04/08/2026.
   ========================================================================== */

.enc{background:#fff;border:1px solid var(--line,#dfe5ec);border-radius:16px;overflow:hidden;margin:0 0 16px;box-shadow:0 8px 26px rgba(26,45,74,.05)}

/* --- bandeau --- */
.enc-head{padding:14px 17px;color:#fff}
/* color:#fff explicite : la règle h1,h2,h3 des pages du site l'emporterait sinon
   sur la couleur héritée du bandeau, et le titre serait navy sur navy. */
.enc-head .enc-t,.enc-t{display:flex;align-items:center;gap:10px;font-family:"Poppins",sans-serif;font-weight:700;font-size:1.12rem;margin:0;color:#fff}
.enc-t svg{flex:0 0 auto}
.enc-sub{display:block;font-size:.78rem;opacity:.93;margin-top:4px;line-height:1.45}
.enc-avant{background:var(--navy,#1a2d4a)}
.enc-pendant{background:var(--coral,#e8541a)}
.enc-apres{background:#2f7a5e}
.enc-doc{background:#2D5986}

/* --- corps --- */
.enc-body{padding:4px 17px 10px}

/* --- une ligne ouvrable --- */
.enc-step{border-bottom:1px dashed #eef0f2}
.enc-step:last-child{border-bottom:0}
.enc-step>summary{display:flex;align-items:flex-start;gap:11px;padding:13px 0;cursor:pointer;list-style:none}
.enc-step>summary::-webkit-details-marker{display:none}
.enc-step>summary:hover .enc-l{color:var(--coral-dark,#c4400f)}
.enc-num{flex:0 0 26px;height:26px;margin-top:1px;border-radius:9px;background:#eef2f7;color:var(--navy,#1a2d4a);display:grid;place-items:center;font-family:"Poppins",sans-serif;font-weight:800;font-size:.8rem}
.enc-step[open] .enc-num{background:var(--coral,#e8541a);color:#fff}
.enc-txt{flex:1 1 auto;min-width:0}
.enc-l{display:block;font-family:"Poppins",sans-serif;font-weight:700;font-size:.98rem;color:var(--navy,#1a2d4a);line-height:1.3}
.enc-h{display:block;font-size:.83rem;color:var(--muted,#647080);margin-top:2px;line-height:1.45}
.enc-chev{flex:0 0 auto;margin-top:4px;color:var(--muted,#647080);transition:transform .18s}
.enc-step[open] .enc-chev{transform:rotate(90deg);color:var(--coral,#e8541a)}
.enc-c{padding:2px 0 18px 37px}

/* --- pied --- */
.enc-foot{padding:11px 17px 14px;border-top:1px solid var(--line,#dfe5ec);background:var(--cream,#f7f4ef);font-size:.85rem;color:var(--muted,#647080)}
.enc-foot a{color:var(--coral-dark,#c4400f);font-weight:700}

@media(max-width:640px){
  .enc-c{padding-left:0}
  .enc-body{padding:4px 14px 10px}
  .enc-head{padding:13px 14px}
}

/* --- Encart enroulable : le bandeau replie ou déplie tout l'encart --- */
details.enc>summary{cursor:pointer;list-style:none;display:block;position:relative}
details.enc>summary::-webkit-details-marker{display:none}
details.enc>summary .enc-chevron{position:absolute;right:16px;bottom:13px;transition:transform .2s;opacity:.9}
details.enc:not([open])>summary .enc-chevron{transform:rotate(-90deg)}
/* --- L'ÉTAT DU DOCUMENT DU MOMENT, dans le bandeau (23/08/2026) -----------
   Le bandeau porte désormais, à droite du titre, l'état du document de ce
   moment : rangé, pas encore, ou sans objet. Il ne porte PAS un quatrième
   accès aux pièces — la page en a déjà trois — mais un état que rien
   n'affichait. Voir `ptc-piece-du-moment.js` pour le raisonnement.
   Le compteur de suivi, jusqu'ici positionné seul en absolu, rejoint la
   pastille dans un rail commun : deux éléments absolus au même coin finissent
   toujours par se recouvrir. Sur les pages où le module ne tourne pas, aucun
   rail n'est créé et le compteur garde son positionnement d'origine. */
.enc-rail{position:absolute;top:11px;right:44px;display:flex;align-items:center;gap:8px}
.enc-rail .enc-suivi{position:static;top:auto;right:auto}
.piece-moment{display:inline-flex;align-items:center;gap:5px;font-family:"Poppins",sans-serif;font-weight:700;font-size:.72rem;line-height:1;color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34);border-radius:999px;padding:5px 10px;cursor:pointer;transition:.15s}
.piece-moment:hover:not(:disabled){background:rgba(255,255,255,.3)}
.piece-moment:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* Un état qui n'ouvre rien reste lisible mais ne se donne pas l'air cliquable :
   le trait passe en pointillé, le fond disparaît. */
.piece-moment:disabled{cursor:default;opacity:.7;background:none;border-style:dashed}
.piece-moment--sans{border-style:solid;background:rgba(255,255,255,.1)}
.piece-moment svg{flex:0 0 auto;opacity:.85}

@media(max-width:640px){
  /* Le chevron occupe le coin bas-droit : le rail descend sous le sous-titre
     plutôt que de lui disputer la place. */
  .enc-rail{position:static;margin-top:10px;flex-wrap:wrap;max-width:calc(100% - 34px)}
}