/* ============================================================
   Gabarit Actualités — /actualites/ et catégories (home.php)
   Repris de maquettes/maquette-actualites-byu-france.html (parties propres à la page).
   ============================================================ */

/* Tête de page */
.tete-page{background:var(--nuit);color:var(--papier);padding:clamp(34px,5vw,58px) 0}
.fil{font-size:.85rem;color:#9FB4E8;margin-bottom:18px}
.fil a{text-decoration:none}
.fil a:hover{color:#fff}
.fil span{margin:0 8px;opacity:.5}
.tete-page h1{font-weight:900;font-stretch:118%;line-height:.98;letter-spacing:-.03em;font-size:clamp(2.2rem,5vw,3.4rem)}
.tete-page .chapeau{margin-top:14px;color:#C6CEE0;font-size:1.05rem;max-width:64ch}
.categories{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}
.categories a{font-size:.82rem;font-weight:700;text-decoration:none;padding:6px 12px;border:1px solid rgba(159,180,232,.45);border-radius:2px;color:#C6CEE0}
.categories a:hover{border-color:#fff;color:#fff}
.categories a[aria-current]{background:var(--papier);color:var(--nuit);border-color:var(--papier)}

/* Liste */
.liste{padding:clamp(40px,6vw,72px) 0}
.categorie{font-size:.7rem;font-weight:800;letter-spacing:.08em;color:var(--bleu);border:1px solid var(--bleu);padding:2px 7px;border-radius:2px;text-transform:uppercase}
.meta{display:flex;gap:10px;align-items:center;font-size:.8rem;color:var(--gris);flex-wrap:wrap}
/* Ajout thème : la maquette posait l'image en fond ; ici une vraie image, recadrée à l'affichage. */
.visuel{display:block;width:100%;height:100%;object-fit:cover;background:var(--nuit)}
/* Sans image mise en avant : fond bleu nuit et catégorie (pas d'image cassée) */
.visuel.sans{display:grid;place-items:center;color:rgba(255,255,255,.35);font-weight:900;font-style:italic;font-stretch:118%;font-size:1.4rem}

.une{display:grid;grid-template-columns:1.2fr 1fr;background:#fff;border:1px solid var(--trait);text-decoration:none;margin-bottom:28px}
/* La hauteur de l'image est bornée : une photo en portrait n'étire pas le bloc. */
.une .visuel{height:100%;min-height:320px;max-height:460px}
.une .texte{padding:clamp(22px,3vw,36px);display:flex;flex-direction:column;justify-content:center}
.une h2{margin-top:12px;font-size:clamp(1.5rem,3vw,2.2rem);font-weight:900;font-stretch:112%;line-height:1.08;letter-spacing:-.015em}
.une p{margin-top:12px;color:var(--gris)}
.lire{display:inline-block;margin-top:16px;font-weight:700;color:var(--bleu);border-bottom:2px solid var(--bleu);align-self:flex-start}
.une:hover .lire,.actu:hover .lire{color:var(--rouge);border-color:var(--rouge)}

.grille{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.actu{display:grid;grid-template-rows:auto 1fr;background:#fff;border:1px solid var(--trait);text-decoration:none;transition:border-color .15s,transform .15s}
.actu:hover{border-color:var(--bleu);transform:translateY(-2px)}
.actu .visuel{aspect-ratio:16/9;height:auto}
.actu .corps-actu{display:block;padding:18px 20px 22px}
/* Maquette : h3 dans la grille ; ici h2 (pas de saut de niveau sous le h1), même aspect. */
.actu h2,.actu h3{margin-top:10px;font-size:1.15rem;font-weight:800;font-stretch:106%;line-height:1.22}
.actu p{margin-top:8px;color:var(--gris);font-size:.93rem}

.pages{margin-top:34px;display:flex;justify-content:center;gap:28px}
.pages a{font-weight:700;color:var(--bleu)}
.vide{padding:20px;background:#fff;border:1px dashed var(--trait);color:var(--gris);max-width:none}

@media (max-width:900px){
  .une{grid-template-columns:1fr}
  .une .visuel{min-height:0;max-height:none;height:auto;aspect-ratio:16/9}
  .grille{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){ .grille{grid-template-columns:1fr} }