/*
 * Template enfant "PJ64" — hérite de corvus_flavus (@import).
 * Palette et typographies extraites de la maquette "Annuaire" validée
 * en interne par l'équipe (langage visuel du balisage de randonnée :
 * poteau indicateur, liseré coloré, étiquettes façon marquage GR).
 * Cette première ébauche ne couvre que les fondations (couleurs,
 * polices, cartes, boutons, navigation) — la grille filtrable de
 * l'Annuaire lui-même sera un chantier à part, une fois le contenu
 * Joomla qui l'alimentera défini.
 */
@import url("../../corvus_flavus/css/template.css");

@font-face {
    font-family: 'Big Shoulders Display';
    src: url('../fonts/big-shoulders-v4-latin-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Archivo';
    src: url('../fonts/archivo-v25-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Archivo';
    src: url('../fonts/archivo-v25-latin-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Mono';
    src: url('../fonts/ibm-plex-mono-v20-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --couleur-fond: #EDEAE0;
    --couleur-fond-alt: #E2DECF;
    --couleur-fond-accent: #D9A441;
    --couleur-texte: #1B2B22;
    --couleur-lien: #B5402C;
    --couleur-lien-survol-fond: #B5402C; /* fixe, indépendant du thème — même principe que le parent */
    --couleur-focus-outline: #1B2B22;
    --couleur-fond-extreme: white;

    /* Ombres de carte : plus discrètes en clair, plus marquées en sombre (voir plus bas) */
    --ombre-carte: 0 1px 3px rgba(0, 0, 0, 0.08);
    --ombre-carte-survol: 0 10px 24px rgba(0, 0, 0, 0.34);

    --couleur-fond-entete: #1B2B22;
    --couleur-texte-entete: #ffffff;
    --couleur-lien-entete: var(--couleur-fond-accent);

    --police-texte: 'Archivo', sans-serif;
    --police-titres: 'Big Shoulders Display', sans-serif;
    --police-code: 'IBM Plex Mono', monospace; /* aussi utilisée pour nav/boutons, voir plus bas */
}

@media (prefers-color-scheme: dark) {
    :root {
        --couleur-fond: #223529;
        --couleur-fond-alt: #1B2B22;
        --couleur-fond-accent: #b98935;
        --couleur-texte: #EDEAE0;
        --couleur-fond-extreme: #212121;

        /* Ombres de carte : plus discrètes en clair, plus marquées en sombre (voir plus bas) */
        --ombre-carte: 0 1px 3px rgba(0, 0, 0, 0.08);
        --ombre-carte-survol: 0 10px 24px rgba(0, 0, 0, 0.8);
        /*
         * Le rouge de marque (#B5402C) tombe à 2,32:1 sur ce fond sombre
         * — bien sous le seuil AA. Variante éclaircie spécifique au
         * mode sombre, revérifiée : 4,77:1.
         */
        --couleur-lien: #F17A5E;
        --couleur-focus-outline: #EDEAE0;
    }
}

/*
 * Titres en Big Shoulders Display : condensée, majuscules, très
 * "signalétique" — cohérent avec l'esprit poteau indicateur de la
 * maquette. Remplace le comportement hérité (même police que le texte
 * courant) uniquement pour les niveaux de titre.
 */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--police-titres);
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 0.95;
}

.liste-articles__grille.liste-articles__grille--deux .article-apercu .item-image img {
    aspect-ratio: 4/3;
    object-fit: cover;
}

.liste-articles__grille.liste-articles__grille--trois-plus .article-apercu .item-image img {
    aspect-ratio: 1/1;
    object-fit: cover;
}

/*
 * Navigation et boutons en IBM Plex Mono majuscule espacée — l'esprit
 * "étiquette de balisage" de la maquette d'origine.
 */
.mod-menu a,
.bouton-lire-plus {
    font-family: var(--police-code);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.8rem;
}

.bouton-lire-plus {
    background-color: var(--couleur-lien-survol-fond);
    color: #ffffff;
    border-radius: 2px;
    padding: var(--espace-2) var(--espace-3);
    text-decoration: none !important;
}

.bouton-lire-plus:hover,
.bouton-lire-plus:focus-visible {
    background-color: var(--couleur-texte);
    color: #ffffff;
    text-decoration: none !important;
}

/*
 * Cartes : liseré coloré en haut (comme la maquette Annuaire — ici en
 * jaune par défaut, les couleurs par typologie de mouvement viendront
 * avec la vraie grille filtrable plus tard) et léger soulèvement au
 * survol, plus sobre que le rebond de JMJ.
 */
.article-apercu {
    border-radius: 4px;
    border-top: 4px solid var(--couleur-fond-accent);
}

.article-apercu:hover,
.article-apercu:focus-within {
    transform: translateY(-4px);
}

.liste-articles__titre,
.liste-articles__entete h1 {
    font-size: clamp(3rem, 2.1429rem + 3.8095vw, 5rem);
    margin: 0 0 0.5em 0;
    text-align: center;
}

@media (min-width: 768px) {
    .liste-articles__titre {
        margin: 0.5em 0 1em 0;
    }
}

.article-apercu.annuaire-carte,
.agenda-liste-blog .article-apercu {
    background-color: var(--couleur-fond-extreme);
}

/*
 * MODULES
 */
.main-top-pleine-largeur .moduletable,
.complementaire .moduletable {
    padding: 3rem 1rem;
}

.main-top-pleine-largeur .moduletable h2,
.complementaire .moduletable h2 {
    text-align: center;
    font-size: clamp(3rem, 2.1429rem + 3.8095vw, 5rem);
    margin: 0 0 0.5em 0;
}

@media (min-width: 768px) {
    .main-top-pleine-largeur .moduletable h2,
    .complementaire .moduletable h2 {
        margin: 0.5em 0 1em 0;
    }
}

.moduletable.fond-sombre {
    background-color: #121C16;
    color: #ffffff; /* sans ça, le texte sombre habituel devient quasi illisible (1.18:1) */
}

.moduletable.fond-alt .agenda-carte {
    background-color: var(--couleur-fond-extreme);
}