/* ========================================================= Sommaire Archéo – CSS final et allégé Largeur max 1400 px ========================================================= */
#archeo-sum {
    --max: 1400px;
    /* largeur de contenu */
    --gap: 16px;
    /* espace entre cartes */
    --r: 12px;
    /* arrondi cartes */
    --shadow: 0 6px 18px rgba(0, 0, 0, .08);
    --dim: rgba(0, 0, 0, .72);
    --hero-h: 260px;
    /* hauteur des 2 cartes de la 1re ligne */
    --list-h: 203px;
    /* hauteur cartes lignes 2–4 (800×480) */
    --cap-h: 32px;
    /* hauteur des légendes */
}

/* ======================== Entête / conteneurs ======================== */
.archeo-sommaire .archeo-head,
.archeo-sommaire .archeo-grid {
    max-width: var(--max);
    margin: 0 auto 32px;
    padding: 0 12px;
}

/* ======================== Ligne 1 : HÉRO (3 + 1 colonnes) ======================== */
.archeo-sommaire .cards-hero {
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    margin-bottom: var(--gap);
}

.archeo-sommaire .cards-hero > .card:first-child {
    grid-column: 1 / span 3;
}

.archeo-sommaire .cards-hero > .card:nth-child(2) {
    grid-column: 4 / span 1;
}

/* ======================== Lignes suivantes (4 colonnes) ======================== */
.archeo-sommaire .cards-list {
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    margin-top: var(--gap);
}

/* Carte commune */
.archeo-sommaire .card {
    display: block;
    text-decoration: none;
    color: inherit;
}

.archeo-sommaire .card-figure {
    margin: 0;
    background: #fff;
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform .18s ease, box-shadow .18s ease;
}

.archeo-sommaire .card:hover .card-figure {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .12);
}

/* Images */
.archeo-sommaire .cards-hero .card-figure > img,
.archeo-sommaire .cards-list .card-figure > img {
    display: block;
    width: 100%;
    height: 100% !important;
    object-fit: contain;
    /* montre l'image entière */
    background: #fff;
    aspect-ratio: auto !important;
}

/* Légendes sous les images */
.archeo-sommaire .card-caption {
    position: static;
    background: none;
    backdrop-filter: none;
    height: var(--cap-h);
    padding: 6px 10px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.archeo-sommaire .card-title {
    font-size: 1rem;
    font-weight: 600;
    color: #222;
}

/* ======================== Bloc texte (HÉRO gauche) ======================== */
.card-figure--text {
    height: var(--hero-h);
    background: #ead6ad;
    /* sépia doux */
    border: 1px solid #c7a66a;
    border-radius: var(--r);
    box-shadow: var(--shadow);
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 12px 16px;
    box-sizing: border-box;
}

.card-text {
    max-width: 100%;
    width: 100%;
    text-align: left;
}

.card-text-title {
    margin: 0 0 .45em;
    font-family: "EB Garamond", serif;
    font-size: clamp(1.4rem, 1.2vw + 1.2rem, 2rem);
    line-height: 1.25;
    color: #1e1e1e;
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-text-title::before {
    content: "🏺";
    font-size: 1.35em;
    line-height: 1;
}

.card-text-lead {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.5;
    color: var(--dim);
}

/* ======================== Bandeau titre ======================== */
.g1418-header {
    max-width: calc(var(--max) - 24px);
    width: 100%;
    margin: 8px auto 12px;
    padding: 12px;
    box-sizing: border-box;
    background: #d2b37a;
    border: 1px solid #b2894f;
    border-radius: var(--r);
    color: #111;
    box-shadow: none;
    display: block;
}

.g1418-header .page-title {
    margin: 0;
    font-family: "EB Garamond", serif;
    font-size: clamp(1.6rem, 1.2vw + 1.2rem, 2.2rem);
    line-height: 1.15;
    color: currentColor;
}

/* Ajustement responsive */
@media (max-width: 1100px) {
    .archeo-sommaire .cards-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .archeo-sommaire .cards-hero {
        grid-template-columns: 1fr 1fr;
    }

    .archeo-sommaire .cards-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 540px) {

    .archeo-sommaire .cards-hero,
    .archeo-sommaire .cards-list {
        grid-template-columns: 1fr;
    }
}

/* Bandeau titre : garde les marges quand la fenêtre est réduite */
@media (max-width: 1424px) {
    .g1418-header {
        max-width: none;
        width: auto;
        margin: 8px 12px 12px;
    }
}

/* == Anti-rectangle bleu dans le bandeau titre == */
.g1418-header .page-title,
.g1418-header .page-title * {
    background: transparent !important;
    /* enlève tout fond résiduel */
    box-shadow: none !important;
    border: 0 !important;
}

/* Si le titre contient un lien, neutralise le surlignage bleu/focus */
.g1418-header .page-title a {
    background: transparent !important;
    text-decoration: none;
}

.g1418-header .page-title a:focus,
.g1418-header .page-title a:focus-visible {
    outline: 2px solid currentColor;
    /* anneau propre, pas de rectangle bleu */
    outline-offset: 2px;
    background: transparent !important;
}

/* ===== Ligne 1 hero (3/1) : mêmes hauteurs gauche/droite ===== */
.cards-hero {
    --hero-h: 280px;
    /* ajuste ici la hauteur souhaitée (260–320) */
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: var(--grid-gap, 12px);
    align-items: stretch;
}

/* Cadres forcés à la même hauteur */
.cards-hero .card-figure {
    height: var(--hero-h);
    display: flex;
    flex-direction: column;
    border-radius: var(--r, 12px);
    overflow: hidden;
}

/* Bloc texte gauche : rembourrage sobre, contenu centré verticalement si tu veux */
.cards-hero .card-figure--text {
    padding: 14px 16px;
    background: #ead6ad;
    /* ta teinte sépia si c’est ton style */
    border: 1px solid #c7a66a;
    box-shadow: var(--shadow, 0 6px 18px rgba(0, 0, 0, .08));
    justify-content: center;
    /* centre verticalement le texte */
}

/* Image droite : remplissage propre, même hauteur, sans distorsion */
.cards-hero .card-figure--image {
    border: 1px solid #e6e6e6;
    background: #f7f7f7;
}

.cards-hero .card-figure--image > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* remplit et recadre si nécessaire */
    display: block;
}

/* Légende image : si besoin d’un bandeau discret en bas (facultatif) */
.cards-hero .card-caption {
    margin-top: auto;
    padding: 8px 10px;
    font-size: .95rem;
    background: rgba(255, 255, 255, .92);
    border-top: 1px solid #eaeaea;
}

/* Empilement sur mobile */
@media (max-width: 820px) {
    .cards-hero {
        grid-template-columns: 1fr;
        --hero-h: 240px;
        /* un poil moins haut sur mobile */
    }
}

/* 1) Téléchargement plus fluide des vignettes */
.cards-hero .card-figure--image > img {
    loading: lazy;
}

/* 2) Alignement visuel un peu plus haut (utile si le sujet est en haut) */
.cards-hero .card-figure--image > img {
    object-position: center top;
}

/* 3) Micro-effet au survol + accessibilité clavier */
.cards-hero a.card {
    display: block;
    border-radius: var(--r, 12px);
    outline: none;
    transition: transform .12s ease, box-shadow .12s ease;
}

.cards-hero a.card:focus-visible,
.cards-hero a.card:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
}

/* Respecter “réduire les animations” */
@media (prefers-reduced-motion: reduce) {
    .cards-hero a.card {
        transition: none;
    }
}

/* ========================================================= NOTES DE MAINTENANCE — Sommaire Archéo - Largeur contenu : --max (1400px) - Espacement colonnes : --gap (16px). Si tu passes à 14px, tout se recalcule seul. - Hauteurs fixes : --hero-h : hauteur du grand/petit de la 1re ligne (ex. 260px) --list-h : hauteur des images des lignes 2–4 --cap-h : hauteur de la légende (1 ligne) - Images recommandées : Lignes 2–4 : 800×480 (ratio 5:3). Avec largeur carte ≈338px, mettre --list-h: 203px (ça évite les bandes haut/bas en mode object-fit: contain). Petit héros : 800×480 OK (bandes légères), sinon object-fit: cover pour remplir. Grand héros : texte conseillé (ratio très panoramique). - Mode d’affichage des images : On utilise object-fit: contain (montre l’image entière). Si tu veux remplir SANS bandes, remplace ponctuellement par object-fit: cover (l’image sera légèrement recadrée). - Légendes : Une seule ligne (ellipsis). Ajuste la hauteur via --cap-h (par défaut 32px). Si tu veux 2 lignes : mets --cap-h: 44px et remplace white-space par un clamp 2 lignes. - Bandeau titre (g1418-header) : Largeur alignée au contenu. Le media query <1424px garde 12px de marge latérale. Le correctif “anti-rectangle bleu” ci-dessus neutralise tout fond/focus intrusif. - Astuces cache : Quand tu modifies la CSS, ajoute ?v=2 (puis 3, 4, …) à l’URL pour forcer l’actualisation. ========================================================= */
/* — Overrides bloc texte HÉRO (plus grand + plus foncé) — */
.card-text-title {
    font-size: clamp(1.6rem, 1.4vw + 1.2rem, 2.2rem);
    /* ↑ titre plus grand */
    color: #0f0f0f;
    /* ↑ plus foncé */
    font-weight: 600;
    /* si la graisse existe, sinon 500 */
}

.card-text-lead {
    font-size: 1.2rem;
    /* ↑ texte un peu plus grand (ex: 1.15 → 1.2) */
    line-height: 1.55;
    /* un soupçon plus d’air */
    color: #1a1a1a;
    /* ↑ plus foncé que var(--dim) */
}

/* Texte du grand cadre sépia (bloc .card-text) */
.card-figure--text .card-text p {
    font-size: 1.2rem;
    /* taille du texte */
    line-height: 1.55;
    /* espacement entre lignes */
    color: #0f0f0f;
    /* texte plus foncé */
}