/* ==========================================================
   Composants additionnels pour le site "Another Time — Mémoire 1944-45"
   Ce fichier complète base.css sans le modifier.
   ========================================================== */

/* Sélecteur de langue dans l'en-tête */
.desktop-menu li.lang-item{
display:flex;
align-items:center;
}
.lang-switch{
display:inline-flex;
flex-direction:row;
flex-wrap:nowrap;
align-items:center;
gap:.4rem;
font-size:.85rem;
letter-spacing:.05em;
border:1px solid var(--border);
padding:.3rem .7rem;
white-space:nowrap;
line-height:1;
}
.lang-switch a{
display:inline!important;
padding:0!important;
color:var(--muted);
}
.lang-switch a:hover{color:#111;}
.lang-switch a.lang-current{
color:#111;
font-weight:700;
pointer-events:none;
}
.lang-switch .lang-sep{color:var(--border);}

/* Grille de photos mises en avant */
.featured-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:1.5rem;
margin:2.5rem 0;
}

.featured-grid figure{
margin:0;
background:#000;
}

.featured-grid img{
display:block;
width:100%;
height:340px;
object-fit:contain;
background:#000;
}

.featured-grid figcaption{
padding:.6rem .2rem 0;
font-size:.95rem;
color:var(--muted);
text-align:left;
}

.featured-grid figcaption .photo-desc{
display:block;
color:var(--text);
margin-bottom:.2rem;
}

.featured-grid figcaption .photo-meta{
display:block;
font-size:.8rem;
letter-spacing:.03em;
color:var(--muted);
font-style:italic;
}

/* Grille des quatre publics visés */
.audience-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:1.5rem;
margin:3rem 0;
}

.audience-grid .audience{
border:1px solid var(--border);
padding:1.75rem 1.5rem;
text-align:left;
}

.audience-grid .audience h3{
font-size:1.15rem;
font-weight:600;
margin-bottom:.6rem;
}

.audience-grid .audience p{
color:var(--muted);
font-size:.95rem;
margin-bottom:.9rem;
}

@media(max-width:900px){
.audience-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:600px){
.audience-grid{grid-template-columns:1fr;}
}

/* Navigation galerie à deux onglets (page Galerie) */
.gallery-nav.two-tabs{
display:flex!important;
justify-content:center;
align-items:center;
gap:2.5rem;
grid-template-columns:none;
}
.gallery-nav.two-tabs a,
.gallery-nav.two-tabs .tab-disabled{
font-size:var(--fs-gallery);
font-weight:600;
padding-bottom:.4rem;
}
.gallery-nav.two-tabs a.active-tab{
color:var(--text);
border-bottom:2px solid var(--text);
}
.gallery-nav.two-tabs .tab-disabled{
color:#bbb;
cursor:not-allowed;
user-select:none;
border-bottom:2px dashed #ddd;
}

.gallery-nav.two-tabs a::after,
.gallery-nav.two-tabs .tab-disabled::after{
display:none;
}

/* Bloc "deux volets" (Galerie / Histoire) */
.two-ways{
display:grid;
grid-template-columns:1fr 1fr;
gap:2rem;
margin:3rem 0;
}

.two-ways .way{
border:1px solid var(--border);
padding:2rem;
text-align:center;
}

.two-ways .way h3{
font-size:1.4rem;
font-weight:600;
margin-bottom:.75rem;
}

.two-ways .way p{
color:var(--muted);
margin-bottom:1rem;
}

/* Bandeau contexte historique (extrait sur l'accueil) */
.history-teaser{
background:var(--surface);
border:1px solid var(--border);
padding:2.5rem;
margin:3rem 0;
}

.history-teaser h2{
font-size:1.8rem;
margin-bottom:1rem;
}

/* Responsive */
@media(max-width:900px){
.featured-grid{grid-template-columns:1fr 1fr;}
.two-ways{grid-template-columns:1fr;}
}

@media(max-width:600px){
.featured-grid{grid-template-columns:1fr;}
.featured-grid img{height:280px;}
main.hero figure[style*="float:right"]{
float:none!important;
margin:0 auto 1.5rem!important;
max-width:280px!important;
}
}