/* =========================================================
   HTAG.com — JOURNAL ET PAGE ARTICLE
   01 filtres · 02 une · 03 grille · 04 carte
   05 page article · 06 corps de texte · 07 liés · 08 mobile
   ========================================================= */

/* ---------- 01 — FILTRES DE RUBRIQUE ---------- */
.filtres{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:30px; }
.filtre{
  padding:9px 17px; border-radius:999px; font-size:14px;
  border:1px solid var(--verre-bord); background:var(--verre-fond);
  color:var(--acier); transition:color var(--vif), border-color var(--vif), background var(--vif);
}
.filtre:hover{ color:var(--brume); border-color:var(--accent); }
.filtre.est-actif{ background:var(--accent); color:var(--accent-encre); border-color:var(--accent); font-weight:600; }

/* ---------- 02 — ARTICLE À LA UNE ---------- */
.une{
  display:grid; grid-template-columns:1.02fr .98fr; gap:0;
  border-radius:var(--rayon); overflow:hidden; margin-bottom:20px;
  border:1px solid var(--verre-bord); background:var(--verre-fond);
  backdrop-filter:var(--verre-flou); -webkit-backdrop-filter:var(--verre-flou);
  transition:border-color var(--moyen), transform var(--moyen);
}
.une:hover{ border-color:var(--accent); transform:translateY(-3px); }
.une__visuel{ min-height:320px; background-position:center 25% !important; }
.une__texte{ padding:38px; display:flex; flex-direction:column; justify-content:center; gap:14px; }
.une__texte h3{ font-size:clamp(24px,2.6vw,34px); }
.une__texte p{ color:var(--acier); }

/* ---------- 03 — GRILLE DES ARTICLES ---------- */
.journal{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:18px; }
.journal__vide{
  grid-column:1/-1; padding:46px; text-align:center; color:var(--acier);
  border:1px dashed var(--verre-bord); border-radius:var(--rayon);
}

/* ---------- 04 — CARTE D'ARTICLE ---------- */
.carte{
  display:flex; flex-direction:column; overflow:hidden;
  border-radius:var(--rayon); border:1px solid var(--verre-bord);
  background:var(--verre-fond); backdrop-filter:var(--verre-flou);
  transition:transform var(--moyen), border-color var(--moyen);
}
.carte:hover{ transform:translateY(-4px); border-color:var(--accent); }
.carte__visuel{ aspect-ratio:16/10; height:auto; flex:0 0 auto; background-position:center 25% !important; }
.carte__corps{ padding:22px; display:flex; flex-direction:column; gap:11px; flex:1 1 auto; }
.carte__corps h3{ font-size:19.5px; line-height:1.22; }
.carte__corps p{ color:var(--acier); font-size:14.5px; flex:1 1 auto; }

/* visuel de remplacement quand aucune photo n'est fournie */
.visuel-auto{
  position:relative; overflow:hidden;
  background:linear-gradient(140deg,
    color-mix(in srgb, var(--rub,var(--accent)) 34%, var(--nuit-700)),
    var(--nuit-800));
  background-size:cover; background-position:center;
}
.visuel-auto::after{
  content:""; position:absolute; right:-18px; bottom:-22px; width:150px; height:150px;
  background:var(--rub,var(--accent)); opacity:.24;
  -webkit-mask:url("../assets/logos/diese.png") center/contain no-repeat;
  mask:url("../assets/logos/diese.png") center/contain no-repeat;
}
.visuel-auto[data-photo]::after{ display:none; }

.meta{ display:flex; flex-wrap:wrap; align-items:center; gap:9px; font-size:12.5px; color:var(--acier); }
.etiquette{
  padding:5px 11px; border-radius:999px; font-size:11.5px; letter-spacing:.1em;
  border:1px solid color-mix(in srgb, var(--rub,var(--accent)) 55%, transparent);
  color:var(--rub,var(--accent));
}
.meta span.point{ opacity:.45; }

/* teintes de rubrique */
[data-rubrique="actualites"]{ --rub:#39dd0b; }
[data-rubrique="musique"]{ --rub:#7cff4a; }
[data-rubrique="mode"]{ --rub:#ff8fc4; }
[data-rubrique="cinema"]{ --rub:#8fd8ff; }
[data-rubrique="arts"]{ --rub:#ffc75a; }
[data-rubrique="portraits"]{ --rub:#b48bff; }
[data-rubrique="sport"]{ --rub:#ff9f1c; }
[data-rubrique="chroniques"]{ --rub:#93aab5; }
[data-rubrique="evenements"]{ --rub:#2ec4e8; }

/* ---------- 05 — PAGE ARTICLE ---------- */
.article{ padding-top:calc(var(--entete) + 60px); }
.article__tete{ width:min(100% - 40px, 780px); margin-inline:auto; }
.article__tete h1{ font-size:clamp(30px,4.6vw,54px); margin:18px 0 20px; }
.article__chapo{ font-size:18.5px; color:var(--acier); }
.article__signature{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  margin-top:26px; padding-top:20px; border-top:1px solid var(--verre-bord);
  font-size:14px; color:var(--acier);
}
/* bannière : la photo entière, jamais coupée (fond flou derrière) */
.article__banniere{
  width:min(100% - 40px, 1040px); margin:38px auto 0;
  aspect-ratio:16/9; height:auto; border-radius:var(--rayon);
  background-size:contain !important; background-repeat:no-repeat;
  background-position:center !important; background-color:var(--nuit-800);
}

/* ---------- 06 — CORPS DE TEXTE ---------- */
.corps{ width:min(100% - 40px, 720px); margin:46px auto 0; }
.corps p{ font-size:17.5px; line-height:1.78; margin-bottom:22px; max-width:none; }
.corps h2{ font-size:clamp(22px,2.6vw,30px); margin:42px 0 18px; }
.corps figure{ margin:34px 0; }
.corps figure img{ border-radius:var(--rayon-s); width:100%; }
.corps figcaption{ margin-top:10px; font-size:13.5px; color:var(--acier); }
.corps blockquote{
  margin:34px 0; padding:26px 30px;
  border-left:3px solid var(--accent); border-radius:0 var(--rayon-s) var(--rayon-s) 0;
  background:var(--verre-fond);
}
.corps blockquote p{
  font-family:"Poppins",sans-serif; font-weight:600; font-size:19px;
  line-height:1.45; margin-bottom:10px;
}
.corps blockquote cite{ font-style:normal; font-size:13.5px; color:var(--acier); }

.partage{
  width:min(100% - 40px, 720px); margin:46px auto 0;
  display:flex; flex-wrap:wrap; gap:11px; align-items:center;
  padding-top:26px; border-top:1px solid var(--verre-bord);
}
.partage span{ font-size:14px; color:var(--acier); margin-right:6px; }

/* ---------- 07 — ARTICLES LIÉS ---------- */
.lies{ width:min(100% - 40px, var(--large)); margin:88px auto 0; }
.lies h2{ font-size:26px; margin-bottom:24px; }

/* message d'article introuvable */
.introuvable{
  width:min(100% - 40px, 640px); margin:0 auto; padding:52px;
  text-align:center; display:flex; flex-direction:column; align-items:center; gap:18px;
}

/* ---------- 08 — MOBILE ---------- */
@media (max-width:900px){
  .une{ grid-template-columns:1fr; }
  .une__visuel{ min-height:200px; }
  .une__texte{ padding:26px; }
  .article__banniere{ aspect-ratio:4/3; }
  .corps p{ font-size:16.5px; }
}

/* =========================================================
   09 — RÉALISATIONS ET ACCOMPAGNEMENTS
   ========================================================= */
.projets{ display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:18px; }

.projet{
  position:relative; overflow:hidden; text-align:left;
  border-radius:var(--rayon); border:1px solid var(--verre-bord);
  background:var(--verre-fond); backdrop-filter:var(--verre-flou);
  display:flex; flex-direction:column;
  transition:transform var(--moyen), border-color var(--moyen);
}
.projet:hover{ transform:translateY(-4px); border-color:var(--accent); }

.projet__visuel{
  aspect-ratio:4/3; height:auto; background-size:cover; background-position:center 30%;
  position:relative; flex:0 0 auto;
}
.projet__visuel::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(4,18,28,.05), rgba(4,18,28,.72));
}
.projet__compte{
  position:absolute; right:12px; bottom:12px; z-index:1;
  padding:6px 12px; border-radius:999px; font-size:12px;
  background:rgba(4,18,28,.68); border:1px solid var(--verre-bord);
  backdrop-filter:blur(8px);
}
.projet__corps{ padding:24px; display:flex; flex-direction:column; gap:10px; flex:1 1 auto; }
.projet__corps h3{ font-size:19px; line-height:1.24; }
.projet__date{ font-size:12.5px; letter-spacing:.1em; color:var(--accent); }
.projet__corps p{ color:var(--acier); font-size:14.5px; flex:1 1 auto; }
.projet__role{
  font-size:13px; padding-top:12px; margin-top:2px;
  border-top:1px solid rgba(255,255,255,.08); color:var(--brume);
}

/* =========================================================
   10 — VISIONNEUSE D'IMAGES
   ========================================================= */
.visionneuse{
  position:fixed; inset:0; z-index:220; display:none;
  background:rgba(2,9,14,.93); backdrop-filter:blur(14px);
  align-items:center; justify-content:center;
}
.visionneuse.est-ouverte{ display:flex; }
.visionneuse img{
  max-width:min(94vw,1280px); max-height:82vh;
  border-radius:var(--rayon-s); box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.visionneuse__barre{
  position:absolute; left:0; right:0; bottom:22px;
  display:flex; justify-content:center; align-items:center; gap:16px;
  font-size:14px; color:var(--acier);
}
.visionneuse button{
  width:46px; height:46px; border-radius:50%;
  border:1px solid var(--verre-bord); background:rgba(255,255,255,.07);
  color:var(--brume); font-size:19px; display:grid; place-items:center;
  transition:background var(--vif), border-color var(--vif);
}
.visionneuse button:hover{ background:rgba(255,255,255,.14); border-color:var(--accent); }
.visionneuse__fermer{ position:absolute; top:22px; right:22px; }

@media (max-width:900px){

  .visionneuse img{ max-height:70vh; }
}

/* carte d'appel à contribution, quand le journal a peu d'articles */
.carte--appel{
  border:1px dashed color-mix(in srgb, var(--accent) 55%, transparent);
  background:color-mix(in srgb, var(--accent) 6%, transparent);
  display:flex;
}
.carte--appel .carte__corps{ display:flex; flex-direction:column; justify-content:center; gap:10px; min-height:240px; }
.carte--appel .etiquette{ align-self:flex-start; }
.carte-appel__lien{ color:var(--accent); font-weight:600; font-size:14px; margin-top:6px; }