/* ============================================================
   Documents officiels (espace membres)
   Le bandeau vient de bandeau-membre.css : ici, ce qui lui est
   propre - tuiles de classement, barre de tri, fiches de document
   en liste ou en grille, et pagination.
   ============================================================ */

/* ===== Tuiles de classement ===== */
.dc-tuiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:14px; margin:20px 0 26px;}
.dc-tuile{
  display:flex; align-items:center; gap:14px; padding:16px 18px; cursor:pointer; text-align:left;
  border:1px solid var(--line); border-radius:16px; background:var(--surface); font-family:var(--body);
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
.dc-tuile:hover{border-color:var(--gold); transform:translateY(-2px); box-shadow:0 10px 24px rgba(var(--green-deep-rgb, 6,68,28),0.08);}
.dc-tuile-ic{
  width:46px; height:46px; flex:none; border-radius:14px; display:grid; place-items:center;
  background:rgba(var(--green-rgb, 23,118,59),0.12); color:var(--green); font-size:22px;
}
:root[data-theme="dark"] .dc-tuile-ic{color:var(--green-soft, #7FD9A0);}
.dc-tuile-nom{font-family:var(--display); font-weight:700; font-size:0.95rem; color:var(--text-heading); line-height:1.2;}
.dc-tuile-nom, .dc-tuile-nb{display:block;}
.dc-tuile-nb{font-size:0.8rem; color:var(--text-muted); margin-top:2px;}
.dc-tuile-fleche{margin-left:auto; color:var(--text-muted); font-size:18px; flex:none;}
.dc-tuile.actif{background:var(--green-deep); border-color:var(--green-deep);}
.dc-tuile.actif .dc-tuile-nom{color:#FFFFFF;}
.dc-tuile.actif .dc-tuile-nb, .dc-tuile.actif .dc-tuile-fleche{color:#CFE6D6;}
.dc-tuile.actif .dc-tuile-ic{background:rgba(255,255,255,0.14); color:var(--gold);}
:root[data-theme="dark"] .dc-tuile.actif{background:#1F3A28; border-color:#2E5639;}
:root[data-theme="dark"] .dc-tuile.actif .dc-tuile-nom{color:#EAF5EE;}

/* ===== Barre : titre, tri, affichage ===== */
.dc-barre{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px;}
.dc-barre-titre{
  display:flex; align-items:center; gap:10px;
  font-family:var(--display); font-weight:700; font-size:1.15rem; color:var(--text-heading);
}
.dc-barre-titre::before{content:""; width:22px; height:3px; border-radius:3px; background:var(--gold);}
/* Titre a gauche, recherche au milieu, tri et affichage a droite. Quand la
   barre du haut reprend la recherche, le champ disparait et les outils
   restent a droite grace a leur propre marge automatique. */
.dc-chercher{
  flex:1 1 220px; max-width:340px; display:flex; align-items:center; gap:9px; padding:0 14px;
  border:1.5px solid var(--line); border-radius:999px; background:var(--surface);
}
.dc-chercher:focus-within{border-color:var(--green);}
.dc-chercher .ti{color:var(--text-muted); font-size:17px; flex:none;}
.dc-chercher input{
  flex:1; min-width:0; border:0; outline:none; background:none; padding:10px 0;
  font-family:var(--body); font-size:0.88rem; color:var(--text-heading);
}
.dc-outils{margin-left:auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.dc-tri{
  display:flex; align-items:center; gap:8px; padding:0 12px; flex:none;
  border:1.5px solid var(--line); border-radius:999px; background:var(--surface);
}
.dc-tri:hover{border-color:var(--gold);}
.dc-tri:focus-within{border-color:var(--green); box-shadow:0 0 0 3px rgba(var(--green-rgb, 23,118,59),0.12);}
.dc-tri > .ti{color:var(--text-muted); font-size:16px;}
.dc-tri label{font-size:0.82rem; color:var(--text-muted); white-space:nowrap;}
.dc-tri select{
  -webkit-appearance:none; appearance:none; border:0; outline:none; cursor:pointer;
  padding:9px 26px 9px 2px; font-family:var(--body); font-size:0.85rem; font-weight:600; color:var(--text-heading);
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317763B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 6px center / 16px 16px;
}
:root[data-theme="dark"] .dc-tri select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237FD9A0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");}
:root[data-theme="dark"] .dc-tri select option{background:#182019; color:#E8F1EC;}
.dc-vues{display:flex; gap:4px; padding:4px; border:1.5px solid var(--line); border-radius:12px; background:var(--surface);}
.dc-vue{
  width:34px; height:32px; display:grid; place-items:center; border:0; border-radius:9px; cursor:pointer;
  background:transparent; color:var(--text-muted); font-size:17px;
}
.dc-vue.actif{background:var(--green-deep); color:#FFFFFF;}
:root[data-theme="dark"] .dc-vue.actif{background:var(--green-soft, #7FD9A0); color:var(--green-deep, #06441C);}

/* ===== Liste des documents ===== */
/* Les fiches d'une meme rangee ont la meme hauteur, avec ou sans resume :
   « start » laissait des rangees en escalier. */
.dc-liste{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;}
@media(max-width:1000px){ .dc-liste{grid-template-columns:minmax(0,1fr);} }
.dc-liste.grille{grid-template-columns:repeat(auto-fill,minmax(270px,1fr));}
.dc-fiche{
  display:flex; gap:16px; padding:18px 20px; min-width:0;
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  transition:border-color .18s, box-shadow .18s;
}
.dc-fiche:hover{border-color:var(--gold); box-shadow:0 10px 24px rgba(var(--green-deep-rgb, 6,68,28),0.08);}
.dc-liste.grille .dc-fiche{flex-direction:column; gap:12px;}
.dc-vignette{
  width:62px; height:72px; flex:none; border-radius:12px; display:grid; place-items:center;
  font-size:26px; position:relative;
}
.dc-liste.grille .dc-vignette{width:56px; height:64px;}
.dc-vignette-ext{
  position:absolute; bottom:6px; left:50%; transform:translateX(-50%);
  font-family:var(--mono); font-size:0.52rem; font-weight:700; letter-spacing:0.06em;
  background:rgba(255,255,255,0.85); border-radius:4px; padding:1px 5px; color:#3B3B3B;
}
.dc-corps{flex:1; min-width:0; display:flex; flex-direction:column; gap:7px;}
.dc-etiq{
  align-self:flex-start; display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px;
  font-family:var(--mono); font-size:0.62rem; text-transform:uppercase; letter-spacing:0.06em; font-weight:600;
}
.dc-titre{
  font-family:var(--display); font-weight:700; font-size:1.02rem; color:var(--text-heading); line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.dc-resume{
  font-size:0.87rem; color:var(--text-muted); line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.dc-meta{display:flex; gap:16px; flex-wrap:wrap; font-size:0.76rem; color:var(--text-muted); margin-top:auto;}
.dc-meta span{display:inline-flex; align-items:center; gap:5px;}
.dc-meta .ti{font-size:14px;}
.dc-actions{display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex:none;}
.dc-liste.grille .dc-actions{flex-direction:row; align-items:center; justify-content:space-between; width:100%;}
.dc-consulter{
  display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:10px; border:0; cursor:pointer;
  background:var(--green-deep); color:#FFFFFF; font-family:var(--body); font-size:0.84rem; font-weight:600;
  white-space:nowrap;
}
.dc-consulter:hover{background:var(--green);}
.dc-consulter:disabled{opacity:0.6; cursor:wait;}
:root[data-theme="dark"] .dc-consulter{background:var(--green-soft, #7FD9A0); color:var(--green-deep, #06441C);}
.dc-telecharger{
  width:36px; height:36px; display:grid; place-items:center; border-radius:10px; cursor:pointer;
  border:1.5px solid var(--line); background:var(--surface); color:var(--text-muted); font-size:17px;
}
.dc-telecharger:hover{border-color:var(--green); color:var(--green);}
.dc-type{
  font-family:var(--mono); font-size:0.66rem; font-weight:700; letter-spacing:0.06em;
  padding:3px 10px; border-radius:999px; background:var(--paper-alt); color:var(--text-muted);
}
.dc-vide{grid-column:1 / -1; padding:40px 0; text-align:center; color:var(--text-muted); font-family:var(--mono); font-size:0.85rem;}

/* ===== Pagination ===== */
.dc-bas{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:22px 0 40px;}
.dc-compte{font-size:0.82rem; color:var(--text-muted);}
.dc-pages{margin-left:auto; display:flex; gap:7px; flex-wrap:wrap;}
.dc-page{
  min-width:36px; height:36px; padding:0 10px; border-radius:10px; cursor:pointer;
  border:1.5px solid var(--line); background:var(--surface); color:var(--text-heading);
  font-family:var(--body); font-size:0.85rem; font-weight:600;
}
.dc-page:hover:not(:disabled):not(.actif){border-color:var(--green); color:var(--green);}
.dc-page.actif{background:var(--green-deep); border-color:var(--green-deep); color:#FFFFFF;}
:root[data-theme="dark"] .dc-page.actif{background:var(--green-soft, #7FD9A0); border-color:var(--green-soft, #7FD9A0); color:var(--green-deep, #06441C);}
.dc-page:disabled{opacity:0.45; cursor:default;}

/* ===== Téléphone =====
   Vignette, texte et bouton côte à côte ne laissaient au texte qu'une
   colonne étroite : les fiches montaient à 360 px. Le bouton passe sous
   le texte, sur toute la largeur. */
@media(max-width:620px){
  .dc-fiche{flex-wrap:wrap; padding:16px;}
  .dc-vignette{width:50px; height:58px; font-size:22px;}
  .dc-actions{flex-direction:row; align-items:center; width:100%;}
  .dc-consulter{flex:1; justify-content:center;}
  .dc-tuiles{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;}
  .dc-tuile{padding:12px; gap:10px;}
  .dc-tuile-ic{width:38px; height:38px; font-size:19px;}
  .dc-tuile-nom{font-size:0.84rem;}
  .dc-tuile-fleche{display:none;}
  .dc-outils{margin-left:0;}
  .dc-pages{margin-left:0;}
}