/*
 * CHARTE GRAPHIQUE DU SITE
 *
 * Commune à toutes les pages (chargée par layout.html.twig après les feuilles propres aux pages,
 * avant responsive.css). Pages pleine largeur, épurées : en-tête sombre sur photo de saison,
 * titres fins en capitales (Red Hat Display) ou en serif (Cormorant Garamond), une touche dorée.
 * L'accueil y ajoute sa grande photo d'en-tête (accueil_style.css).
 *
 * Les anciennes feuilles (general_style.css...) restent chargées avant : les sélecteurs
 * ci-dessous ont au moins leur spécificité pour l'emporter.
 */

:root
{
    --encre: #15181c;
    --texte: #2c3035;
    --gris: #70757b;
    --gris-clair: #d8d3ca;
    --filet: #e6e1d8;
    --sable: #f5f2ec;
    --or: #b08d57;
    --or-clair: #d6b98a;
    --marge: clamp(16px, 5vw, 72px);
    --largeur: 1240px;
    --serif: "Cormorant Garamond", Georgia, serif;
    --sans: "Red Hat Display", "Open Sans", sans-serif;
}

/* ===================== FOND ET BLOC DE PAGE ===================== */

body
{
    background: #fff;
    color: var(--texte);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.6;
}

.main-background
{
    display: none;
}

#bloc_page
{
    width: auto;
    margin: 0;
    padding: 0;
    background: #fff;
    box-shadow: none;
}

a
{
    color: var(--encre);
}

a:hover
{
    color: var(--or);
}

/* Fioritures de l'ancienne présentation */
img[src*="fioriture"]
{
    display: none;
}

/* ===================== EN-TÊTE ===================== */

header
{
    position: relative;
    z-index: 20;
    box-sizing: border-box;
    padding: 26px var(--marge) 34px;
    background: linear-gradient(rgba(12, 15, 19, 0.74), rgba(12, 15, 19, 0.62)), var(--fond-entete, none) center 58% / cover var(--encre);
    text-align: center;
    color: #fff;
}

#logo_uiagm
{
    position: absolute;
    top: 22px;
    left: var(--marge);
    margin: 0;
}

#logo
{
    width: 74px;
    height: auto;
    /* logo noir -> blanc sur la photo */
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

#titre_principal
{
    display: block;
}

/* Le titre (nom et métier) est un lien vers l'accueil */
a.titre-accueil
{
    display: inline-block;
    text-decoration: none;
    color: #fff;
    transition: opacity 0.3s;
}

a.titre-accueil:hover
{
    color: #fff;
    opacity: 0.85;
}

#titre_principal h1
{
    display: block;
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(1.7em, 3.2vw, 2.5em);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 18px rgba(0, 0, 0, 0.25);
}

#titre_principal h2
{
    margin: 10px 0 0;
    font-family: var(--sans);
    font-size: 0.78em;
    font-weight: 400;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: #fff;
}

#titre_tel
{
    position: absolute;
    top: 46px;
    right: var(--marge);
    margin: 0;
}

#titre_tel img
{
    display: block;
    margin-left: auto;
}

/* Téléphone (lien tel:) et e-mail cliquable dessous */
#titre_tel a
{
    display: block;
    transition: opacity 0.3s;
}

#titre_tel a.entete-email
{
    margin-top: 6px;
}

#titre_tel a:hover
{
    opacity: 0.7;
}

#titre_tel img, header #fr, header #en
{
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

/* Menu : liens fins en capitales, blancs */
nav
{
    margin-top: 26px;
}

nav ul
{
    margin: 0;
}

nav a
{
    font-family: var(--sans);
    font-size: 0.8em;
    font-weight: 400;
    letter-spacing: 0.22em;
    color: #fff;
    border-bottom: 1px solid transparent;
    padding-bottom: 4px;
    transition: border-color 0.3s, color 0.3s;
}

nav a:hover
{
    color: #fff;
    border-bottom: 1px solid var(--or-clair);
}

nav a img
{
    filter: brightness(0) invert(1);
    height: 15px;
    width: auto;
}

/* Menu collé en haut au défilement : bandeau sombre translucide */
nav.floatable
{
    left: 0;
    right: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 14px var(--marge);
    background: rgba(21, 24, 28, 0.92);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: none;
}

@media (min-width: 681px)
{
    nav li
    {
        display: inline-block;
        margin: 0 14px;
    }
}

/* ===================== ÉLÉMENTS COMMUNS ===================== */

.surtitre
{
    font-family: var(--sans);
    font-size: 0.72em;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--or);
}

/* Titre de rubrique : grandes capitales fines */
.titre-decale, section h2.titre-decale
{
    margin: 0;
    font-family: var(--sans);
    font-size: clamp(2em, 4.2vw, 3.4em);
    font-weight: 300;
    font-style: normal;
    line-height: 1.05;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-align: left;
    color: var(--encre);
}

.chapeau, section p.chapeau
{
    margin: 14px 0 0;
    padding-left: clamp(0px, 8vw, 120px);
    font-family: var(--serif);
    font-size: 1.35em;
    font-style: italic;
    font-weight: 300;
    line-height: 1.45;
    text-align: left;
    color: var(--gris);
}

.bloc-entete
{
    margin-bottom: clamp(32px, 4vw, 56px);
    text-align: left;
}

.lien-fleche, .carte-suite
{
    font-size: 0.74em;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--encre);
    text-decoration: none;
}

.lien-fleche
{
    padding-bottom: 6px;
    border-bottom: 1px solid var(--or);
}

.lien-fleche span, .carte-suite span
{
    display: inline-block;
    transition: transform 0.3s;
}

.lien-fleche:hover span, a:hover .carte-suite span, .carte-suite:hover span
{
    transform: translateX(5px);
}

/* Boutons : contour fin, capitales espacées */
.bouton-contour, .btn_inscription, .btn_complet, .btn_voir_fiche,
button, input[type="submit"], input[type="button"], .btn
{
    display: inline-block;
    padding: 14px 28px;
    border: 1px solid var(--encre);
    border-radius: 0;
    background: transparent;
    font-family: var(--sans);
    font-size: 0.74em;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--encre);
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.bouton-contour:hover, .btn_inscription:hover, .btn_voir_fiche:hover,
button:hover, input[type="submit"]:hover, input[type="button"]:hover, .btn:hover
{
    background: var(--encre);
    color: #fff;
}

.btn_complet
{
    border-color: var(--gris-clair);
    color: var(--gris);
}

/* Boutons d'administration : discrets */
.bouton_rouge_ajouter
{
    display: inline-block;
    margin: 4px 6px 4px 0;
    padding: 6px 12px;
    border: 1px solid #b54a3a;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    font-family: var(--sans);
    font-size: 0.68em;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    color: #b54a3a;
}

.bouton_rouge_ajouter:hover
{
    background: #b54a3a;
    color: #fff;
}

.bouton_rouge_ajouter img
{
    display: none;
}

/* Étiquettes (l'ancienne feuille les positionnait en absolu, avec un effet au survol) */
.tags, .tags:hover
{
    position: static;
    margin: 12px 0;
    padding: 0;
    font-size: 1em;
    line-height: 1.4;
    text-align: left;
    transform: none;
}

.categories, a.categories
{
    display: inline-block;
    margin: 0 6px 6px 0;
    padding: 4px 10px;
    border: 1px solid var(--gris-clair);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-family: var(--sans);
    font-size: 0.66em;
    font-weight: 500;
    letter-spacing: 0.16em;
    line-height: 1.4;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--gris);
}

a.categories:hover
{
    border-color: var(--or);
    color: var(--encre);
}

.categories i
{
    display: none;
}

/* Lien RSS discret à côté d'un titre */
a.rss img
{
    width: 14px;
    height: 14px;
    vertical-align: middle;
    opacity: 0.75;
}

a.rss
{
    position: static;
    display: inline;
}

/* Pagination */
.pages, .pagination
{
    clear: both;
    margin: 44px 0 0;
    text-align: center;
}

.pagination ul
{
    margin: 0;
    padding: 0;
}

.pagination li
{
    display: inline;
    list-style: none;
}

.pages a, .pagination a
{
    display: inline-block;
    min-width: 38px;
    margin: 0 3px;
    padding: 8px 0;
    border: 1px solid transparent;
    font-size: 0.9em;
    text-decoration: none;
    color: var(--gris);
}

.pages a:hover, .pagination a:hover
{
    color: var(--encre);
}

.pages a.active, .pagination a.active
{
    border-color: var(--or);
    color: var(--encre);
}

/* Filtres (activités) */
.filtres
{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 clamp(28px, 4vw, 48px);
}

.filtre
{
    padding: 9px 18px;
    border: 1px solid var(--gris-clair);
    font-size: 0.72em;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--texte);
    transition: border-color 0.3s, background-color 0.3s, color 0.3s;
}

.filtre:hover
{
    border-color: var(--encre);
    color: var(--encre);
}

.filtre.actif
{
    border-color: var(--encre);
    background: var(--encre);
    color: #fff;
}

.filtre-actif
{
    font-size: 0.85em;
    color: var(--gris);
}

.filtre-actif .categories
{
    margin: 0 4px;
}

a.filtre-retirer
{
    font-size: 1.3em;
    text-decoration: none;
    color: var(--gris);
}

.admin-actions
{
    margin: 0 0 24px;
}

/* ===================== PAGES : STRUCTURE ET TYPOGRAPHIE ===================== */

/* Toute page (hors accueil) : une colonne centrée */
#bloc_page > section
{
    box-sizing: border-box;
    max-width: calc(var(--largeur) + 2 * var(--marge));
    margin: 0 auto;
    padding: clamp(48px, 6vw, 88px) var(--marge) clamp(64px, 8vw, 110px);
    font-size: 1rem;
}

#bloc_page article
{
    display: block;
    width: auto;
    margin-right: 0;
    text-align: left;
}

#bloc_page p
{
    padding-left: 0;
    text-align: left;
    line-height: 1.75;
}

#bloc_page .Centrer, #bloc_page p.Centrer
{
    text-align: center;
}

/* Titre de page */
section h1, article.billet h1
{
    margin: 0 0 0.5em;
    font-family: var(--sans);
    font-size: clamp(2em, 4.2vw, 3.2em);
    font-weight: 300;
    font-style: normal;
    line-height: 1.08;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-align: left;
    color: var(--encre);
}

/* En-tête de page : surtitre doré, titre, chapeau */
.page-entete
{
    margin-bottom: clamp(32px, 4vw, 52px);
}

.page-entete .surtitre
{
    margin: 0 0 12px;
}

.page-entete h1
{
    margin-bottom: 0;
}

section h2
{
    margin: 1.8em 0 0.5em;
    font-family: var(--serif);
    font-size: 1.75em;
    font-weight: 500;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    text-align: left;
    color: var(--encre);
}

section h3
{
    margin: 1.6em 0 0.5em;
    font-family: var(--sans);
    font-size: 0.76em;
    font-weight: 500;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gris);
}

section h2 img, section h3 img
{
    height: 26px;
    width: auto;
    margin-right: 10px;
    vertical-align: -5px;
}

.bleu, b.bleu, em.bleu
{
    color: inherit;
}

section ul, section ol
{
    line-height: 1.75;
}

section ul.Liste
{
    padding-left: 22px;
}

section table
{
    border-collapse: collapse;
}

section td
{
    padding: 10px 14px 10px 0;
    vertical-align: top;
    border-bottom: 1px solid var(--filet);
}

/* Liens dans le texte : soulignés d'un filet doré */
section p a:not([class]), section li a:not([class]), section td a:not([class])
{
    text-decoration: none;
    border-bottom: 1px solid var(--or-clair);
}

/* ===================== RÉCITS (sorties, à propos...) ===================== */

article.billet
{
    max-width: 780px;
    margin: 0 auto;
    padding: 0;
}

article.billet h1
{
    margin-bottom: 0.3em;
    font-family: var(--serif);
    font-size: clamp(2.3em, 5vw, 3.8em);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: 0;
    text-transform: none;
    text-align: center;
}

/* Date avec flèches vers les récits précédent / suivant */
.article_ss_titre, p.article_ss_titre, .photos_ss_titre, p.photos_ss_titre
{
    margin: 0 0 18px;
    font-size: 0.72em;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.28em;
    text-align: center;
    color: var(--or);
}

.article_ss_titre a, .photos_ss_titre a
{
    padding: 0 10px;
    text-decoration: none;
    color: var(--gris);
}

/* Description du récit sous le titre */
article.billet h2.Centrer, section > h2.Centrer, .index_photos > h2.Centrer
{
    margin: 0 auto 1.6em;
    max-width: 680px;
    font-family: var(--serif);
    font-size: 1.5em;
    font-weight: 300;
    font-style: italic;
    text-align: center;
    color: var(--gris);
}

article.billet h2
{
    font-size: 1.75em;
    font-style: normal;
}

article.billet h3
{
    line-height: 1.5;
    font-size: 0.76em;
}

article.billet p, article.billet li
{
    font-size: 1.05em;
    line-height: 1.85;
}

/* Portrait cerné d'un filet doré à égale distance (page « À propos ») */
article.billet figure.portrait
{
    position: relative;
    width: 100px;
    margin: 8px auto 34px;
}

figure.portrait::before
{
    content: "";
    position: absolute;
    inset: -8px;
    border: 1px solid var(--or);
}

article.billet figure.portrait img
{
    position: relative;
    display: block;
    width: 100px;
    height: 135px;
    max-height: none;
    object-fit: cover;
}

/* Photos des récits : pleine largeur de la colonne, sans cadre */
a.img_billet
{
    display: block;
    margin: 28px 0;
    text-align: center;
}

article.billet img, a.img_billet img
{
    max-width: 100%;
    height: auto;
    max-height: 82vh;
    width: auto;
    border: 0;
    box-shadow: none;
}

a.img_billet img[align="left"]
{
    max-width: 30%;
    margin: 6px 22px 10px 0;
}

article.billet figure
{
    margin: 28px 0;
}

/* Image d'un récit sans texte (« article à venir ») et des fiches programme */
.banniere_image_details
{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 8 / 3;
    margin: 0 0 28px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background-size: cover !important;
    background-position: center !important;
}

/* Liens précédent / suivant en bas des récits et des albums */
.prev, .next
{
    position: static;
    display: inline-block;
    width: auto;
    height: auto;
    margin: 36px 0 0;
}

.next
{
    float: right;
}

.prev a, .next a
{
    font-size: 0.72em;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--encre);
}

.navigation_album
{
    position: static;
    height: auto;
    overflow: hidden;
    margin-bottom: 20px;
}

/* Lien RSS isolé au-dessus des récits : déjà présent dans les listes */
.article_date
{
    display: none;
}

/* Lien vers l'album photo d'un récit */
section > p.Centrer > a img[src*="Photo_icon"]
{
    display: none;
}

section iframe
{
    max-width: 100%;
}

/* ===================== CARTES (programmes, sorties) ===================== */

.grille-cartes
{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 30px 26px;
}

.carte, #bloc_page article.carte
{
    display: flex;
    flex-direction: column;
    margin: 0;
    width: auto;
    text-align: left;
    background: #fff;
    border: 1px solid var(--filet);
    transition: box-shadow 0.4s, transform 0.4s;
}

/* Sur fond sable (accueil), la carte se détache sans bordure */
.bloc-idees .carte
{
    border-color: transparent;
}

.carte:hover
{
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -22px rgba(21, 24, 28, 0.45);
}

.carte-lien
{
    display: flex;
    flex-direction: column;
    flex: 1;
    text-decoration: none;
    color: var(--texte);
}

.carte-lien:hover
{
    color: var(--texte);
}

.carte-image
{
    display: block;
    aspect-ratio: 3 / 2;
    background-size: cover;
    background-position: center;
}

/* Photos des sorties : format bandeau d'origine (8:3) */
.carte-sortie .carte-image
{
    aspect-ratio: 8 / 3;
}

.carte-corps
{
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 24px 26px 26px;
}

.carte-lieu, #bloc_page p.carte-lieu
{
    margin: 0;
    font-size: 0.7em;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gris);
}

.carte-titre, section h2.carte-titre
{
    display: block;
    margin: 12px 0 10px;
    font-family: var(--serif);
    font-size: 1.65em;
    font-weight: 500;
    line-height: 1.12;
    color: var(--encre);
}

.carte-titre a
{
    text-decoration: none;
    color: inherit;
}

.carte-description, #bloc_page p.carte-description
{
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    font-size: 0.9em;
    line-height: 1.6;
    color: var(--gris);
}

.carte-infos
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0 18px;
    padding-top: 16px;
    border-top: 1px solid var(--filet);
    font-size: 0.82em;
}

.difficulte i
{
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 4px;
    border: 1px solid var(--or);
    border-radius: 50%;
}

.difficulte i.plein
{
    background: var(--or);
}

.carte-suite
{
    margin-top: auto;
}

.carte-sortie .tags
{
    margin: 16px 0 18px;
}

.carte-admin, #bloc_page p.carte-admin
{
    margin: 0;
    padding: 0 26px 18px;
}

/* ===================== FICHE PROGRAMME ===================== */

#bloc_page article.prog_generic
{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    column-gap: clamp(32px, 5vw, 72px);
    align-items: start;
}

article.prog_generic > *
{
    grid-column: 1 / -1;
}

article.prog_generic > .rss
{
    display: none;
}

article.prog_generic > h1
{
    margin-bottom: 0.25em;
}

#bloc_page article.prog_generic > p.Centrer
{
    margin: 0 0 30px;
    font-family: var(--serif);
    font-size: 1.45em;
    font-style: italic;
    font-weight: 300;
    line-height: 1.45;
    text-align: left;
    color: var(--gris);
}

#location, h3#location
{
    margin: 0 0 8px;
    color: var(--or);
}

#location i
{
    margin-right: 6px;
}

article.prog_generic > .description_programme,
article.prog_generic > .points_forts
{
    grid-column: 1;
    position: static;
    width: auto;
    margin: 0;
    float: none;
}

article.prog_generic > aside.info_programme
{
    grid-column: 2;
    grid-row: 5 / span 3;
    position: sticky;
    top: 90px;
    width: auto;
    margin: 24px 0 0;
    padding: 30px 30px 26px;
    float: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--sable);
}

.description_programme h2, .points_forts h2
{
    margin-top: 1.4em;
}

.description_programme h2 i, .points_forts p i
{
    margin-right: 8px;
    color: var(--or);
}

.points_forts p
{
    margin: 6px 0;
}

ul.plus_info
{
    padding-left: 20px;
}

#prog_table
{
    width: 100%;
    margin-bottom: 24px;
    font-size: 0.9em;
}

#prog_table td
{
    padding: 11px 8px 11px 0;
}

#prog_table td i
{
    color: var(--or);
}

#prog_table td img
{
    width: 9px;
}

aside.info_programme .btn_inscription, aside.info_programme .btn_complet
{
    display: block;
    margin: 0;
    padding: 16px 8px;
    font-size: 0.7em;
    letter-spacing: 0.14em;
    white-space: nowrap;
    text-align: center;
}

aside.info_programme .btn_inscription
{
    background: var(--encre);
    color: #fff;
}

aside.info_programme .btn_inscription:hover
{
    background: var(--or);
    border-color: var(--or);
}

aside.info_programme .social
{
    margin-top: 14px;
    text-align: right;
}

.prog_tags
{
    position: static;
    float: none;
    margin-top: 40px;
}

#bloc_page p.disclamer, p.disclamer
{
    max-width: 780px;
    font-size: 0.78em;
    font-style: italic;
    line-height: 1.6;
    color: var(--gris);
}

/* ===================== ACTIVITÉS ===================== */

.activite-presentation
{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: clamp(32px, 6vw, 90px);
    align-items: start;
    margin-bottom: clamp(56px, 8vw, 100px);
}

#bloc_page article.activite-texte p
{
    margin-top: 0;
    font-size: 1.12em;
    line-height: 1.85;
}

#bloc_page article.activite-texte p:first-child
{
    font-family: var(--serif);
    font-size: 1.6em;
    font-weight: 400;
    line-height: 1.4;
    color: var(--encre);
}

.activite-image
{
    margin: 0;
}

.activite-image img
{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 5;
    object-fit: cover;
}

/* ===================== PHOTOS ===================== */

/* Albums : tuiles carrées (couvertures « minithumb » de 150 px), titre incrusté */
.grille-albums
{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
    gap: 30px 18px;
}

.grille-albums .modifier
{
    position: relative;
    display: block;
    width: auto;
    height: auto;
    margin: 0;
    float: none;
}

a.galerie_image
{
    position: relative;
    display: block;
    width: auto;
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background-size: cover !important;
    background-position: center !important;
    transition: opacity 0.4s;
}

/* (l'ancienne feuille dessinait des ombres penchées avec ::before / ::after) */
a.galerie_image::before, a.photo_miniature::before, a.photo_miniature::after
{
    content: none;
}

a.galerie_image::after
{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    width: auto;
    height: auto;
    transform: none;
    box-shadow: none;
    background: linear-gradient(to top, rgba(12, 15, 19, 0.7) 0%, rgba(12, 15, 19, 0) 55%);
}

a.galerie_image:hover
{
    opacity: 0.88;
}

.galerie_description
{
    opacity: 1;
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 14px;
    top: auto;
    z-index: 1;
    width: auto;
    height: auto;
    padding: 0;
    background: none;
}

#bloc_page .galerie_description p
{
    margin: 0;
    font-family: var(--serif);
    font-size: 1.2em;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: 0;
    text-align: left;
    color: #fff;
}

.album_ss_titre
{
    display: flex;
    gap: 12px;
    width: auto;
    margin-top: 10px;
}

#bloc_page .album_ss_titre p
{
    margin: 0;
    font-size: 0.7em;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gris);
}

#bloc_page .album_ss_titre p + p::before
{
    content: "· ";
}

/* Défilement continu de la galerie : état du chargement et bouton « Plus d'albums » */
.galerie-suite
{
    margin-top: 40px;
    text-align: center;
}

.galerie-suite[hidden]
{
    display: none;
}

#bloc_page p.galerie-etat
{
    margin: 0;
    font-size: 0.72em;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    text-align: center;
    color: var(--gris);
}

.galerie-plus[hidden]
{
    display: none;
}

/* Planche contact : mosaïque en colonnes, photos à leur format */
.planche
{
    column-width: 240px;
    column-gap: 14px;
    margin: 30px 0;
}

.planche .modifier
{
    display: block;
    width: auto;
    height: auto;
    margin: 0 0 14px;
    float: none;
    break-inside: avoid;
}

a.photo_miniature
{
    position: relative;
    display: block;
    width: auto;
    height: auto;
    margin: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
}

a.photo_miniature img
{
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    max-height: none;
    margin: 0;
    border: 0;
    box-shadow: none;
    transition: transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
}

a.photo_miniature:hover img
{
    transform: scale(1.04);
}

/* Légende au survol */
.photo_description, a.photo_miniature .photo_description
{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    margin: 0;
    padding: 24px 14px 10px;
    background: linear-gradient(to top, rgba(12, 15, 19, 0.7), rgba(12, 15, 19, 0));
    font-size: 0.8em;
    text-align: left;
    color: #fff;
    opacity: 0;
    transition: opacity 0.3s;
}

a.photo_miniature:hover .photo_description
{
    opacity: 1;
}

.photo_suppr
{
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
}

/* ===================== PAGES D'INFORMATION ===================== */

/* Préparer sa sortie : rubriques de liens en cartes */
section.prepa_sortie
{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 26px;
    align-content: start;
}

section.prepa_sortie > *
{
    grid-column: 1 / -1;
}

section.prepa_sortie > .rubrique
{
    grid-column: auto;
    width: auto;
    margin: 0 0 26px;
    padding: 26px 28px;
    float: none;
    border: 1px solid var(--filet);
    border-radius: 0;
    box-shadow: none;
}

.rubrique h2
{
    margin: 0 0 14px;
    font-size: 1.5em;
}

.rubrique h2 img
{
    height: 24px !important;
}

.ss_rubrique
{
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: none;
}

section.prepa_sortie > .ss_rubrique
{
    margin-bottom: 30px;
}

ul.link
{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
    text-align: left;
}

ul.link li
{
    display: block;
    margin: 0;
}

a.btn_exterieur
{
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border: 1px solid var(--gris-clair);
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    font-family: var(--sans);
    font-size: 0.8em;
    font-weight: 400;
    text-decoration: none;
    color: var(--texte);
    transition: border-color 0.3s;
}

a.btn_exterieur:hover
{
    border-color: var(--encre);
    color: var(--encre);
}

a.btn_exterieur img
{
    width: 16px;
    height: 16px;
}

/* ===================== FORMULAIRES ===================== */

input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="date"], input[type="url"], input[type="search"], select, textarea
{
    box-sizing: border-box;
    max-width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--gris-clair);
    border-radius: 0;
    background: #fff;
    font-family: var(--sans);
    font-size: 0.95rem;
    color: var(--texte);
}

input:focus, select:focus, textarea:focus
{
    outline: none;
    border-color: var(--or);
}

label
{
    font-size: 0.85em;
    color: var(--texte);
}

fieldset
{
    margin: 0;
    padding: 0;
    border: 0;
}

legend
{
    margin-bottom: 18px;
    font-family: var(--serif);
    font-size: 1.9em;
    font-weight: 400;
    color: var(--encre);
}

/* Connexion */
.well
{
    max-width: 420px;
    margin: 0 auto;
    padding: 40px;
    border: 1px solid var(--filet);
}

.well .form-group
{
    margin-bottom: 18px;
}

.well label
{
    display: block;
    margin-bottom: 6px;
}

.well input[type="text"], .well input[type="password"]
{
    width: 100%;
}

.well button
{
    width: 100%;
    margin-top: 8px;
    background: var(--encre);
    color: #fff;
}

.well button:hover
{
    background: var(--or);
    border-color: var(--or);
}

.alert-danger
{
    max-width: 420px;
    margin: 0 auto 20px;
    padding: 12px 16px;
    border-left: 3px solid #b54a3a;
    background: #faf1ef;
    font-size: 0.9em;
}

/* ===================== PIED DE PAGE ===================== */

/* Bande sombre pleine largeur : présentation, navigation, informations, contact */
footer
{
    box-sizing: border-box;
    max-width: none;
    margin: 0;
    padding: clamp(56px, 7vw, 96px) var(--marge) 0;
    border-top: 1px solid rgba(214, 185, 138, 0.25);
    background: #101317;
    font-family: var(--sans);
    color: #b9b4ac;
}

footer > *
{
    max-width: var(--largeur);
    margin-left: auto;
    margin-right: auto;
}

.pied-colonnes
{
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    gap: 40px clamp(28px, 4vw, 64px);
}

footer h1
{
    margin: 0 0 20px;
    font-family: var(--sans);
    font-size: 0.7em;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--or-clair);
}

footer p, footer ul
{
    margin: 0;
    padding: 0;
    font-size: 0.88em;
    line-height: 1.7;
    text-align: left;
}

footer ul
{
    list-style: none;
}

footer li
{
    margin-bottom: 9px;
}

footer a
{
    text-decoration: none;
    color: #e9e6e0;
    transition: color 0.3s;
}

footer a:hover
{
    color: var(--or-clair);
}

/* Présentation */
.pied-nom
{
    font-family: var(--serif);
    font-size: 2em;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
}

footer p.pied-titre
{
    margin: 10px 0 22px;
    font-size: 0.68em;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: #e9e6e0;
}

footer p.pied-devise
{
    max-width: 330px;
    font-family: var(--serif);
    font-size: 1.15em;
    font-style: italic;
    font-weight: 300;
    line-height: 1.5;
}

.pied-logo-photos
{
    display: flex;
    align-items: flex-start;
    gap: 22px;
    margin-top: 26px;
}

.pied-logo
{
    flex: 0 0 auto;
    width: 58px;
    height: auto;
    filter: brightness(0) invert(1);
    opacity: 0.6;
}

/* Contact */
.pied-email
{
    border-bottom: 1px solid rgba(214, 185, 138, 0.5);
}

.pied-contact p
{
    margin-bottom: 10px;
}

.pied-contact img
{
    display: block;
    opacity: 0.85;
}

footer h1.pied-suivre
{
    margin-top: 30px;
}

.pied-reseaux i
{
    margin-right: 4px;
    font-size: 0.85em;
    color: var(--or);
}

/* Photographies (Flickr) : à côté du logo, légende dessous */
.pied-photos
{
    display: block;
}

.pied-photos-images
{
    display: flex;
    gap: 5px;
}

.pied-photos img
{
    width: 46px;
    height: 46px;
    margin: 0;
    border: 0;
    object-fit: cover;
    opacity: 0.75;
    filter: grayscale(0.3);
    transition: opacity 0.3s, filter 0.3s;
}

.pied-photos:hover img
{
    opacity: 1;
    filter: none;
}

.pied-photos-legende
{
    display: block;
    margin-top: 9px;
    font-size: 0.64em;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--or-clair);
}

/* Copyright, version, cookies, administration */
.pied-bas
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 24px;
    margin-top: clamp(40px, 5vw, 64px);
    padding: 22px 0 26px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

footer .pied-bas p
{
    font-size: 0.74em;
    color: #8d8880;
}

footer .pied-bas a
{
    color: #b9b4ac;
}

.pied-haut
{
    font-size: 0.68em;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

/* ===================== TABLETTE ET MOBILE ===================== */

@media (max-width: 960px)
{
    .pied-colonnes
    {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .pied-marque
    {
        grid-column: 1 / -1;
    }
}

@media (max-width: 860px)
{
    #bloc_page article.prog_generic
    {
        grid-template-columns: minmax(0, 1fr);
    }
    article.prog_generic > aside.info_programme
    {
        grid-column: 1;
        grid-row: auto;
        position: static;
        margin-top: 30px;
    }
    .activite-presentation
    {
        grid-template-columns: minmax(0, 1fr) 160px;
    }
}

/* En deçà, le menu est replié derrière le bouton « Menu » (responsive.css) */
@media (max-width: 680px)
{
    header
    {
        padding-top: 18px;
        padding-bottom: 22px;
    }
    /* Logo réduit en haut à gauche, à côté du titre centré */
    #logo_uiagm
    {
        top: 14px;
        left: 12px;
    }
    #logo_uiagm #logo
    {
        width: 38px;
    }
    /* Téléphone et e-mail : centrés sous le titre, côte à côte (l'un sous l'autre si trop étroit) */
    #titre_tel
    {
        position: static;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 8px 18px;
        margin: 14px 0 0;
    }
    #titre_tel img
    {
        height: 15px;
        width: auto;
        margin: 0;
    }
    #titre_tel a.entete-email
    {
        margin-top: 0;
    }
    #titre_principal h2
    {
        font-size: 0.66em;
        letter-spacing: 0.3em;
    }
    nav
    {
        margin-top: 16px;
    }
    .menu-toggle
    {
        margin: 0 auto;
        padding: 8px 18px;
        border: 0;
        background: transparent;
        font-family: var(--sans);
        font-size: 0.78em;
        letter-spacing: 0.24em;
        color: #fff;
    }
    .menu-toggle:hover
    {
        background: transparent;
        color: #fff;
    }
    nav.menu-ouvert ul
    {
        margin-top: 10px;
        padding: 10px 0;
        background: rgba(21, 24, 28, 0.92);
    }
    nav.floatable
    {
        padding: 8px var(--marge);
    }

    section.prepa_sortie
    {
        grid-template-columns: minmax(0, 1fr);
    }
    .pied-colonnes
    {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .pied-marque
    {
        grid-column: 1 / -1;
    }
    .activite-presentation
    {
        grid-template-columns: minmax(0, 1fr);
    }
    .activite-image
    {
        display: none;
    }
    .chapeau, section p.chapeau
    {
        padding-left: 0;
    }
    a.img_billet img[align="left"]
    {
        max-width: 40%;
    }
    .planche
    {
        column-width: auto;
        column-count: 2;
        column-gap: 8px;
    }
    .planche .modifier
    {
        margin-bottom: 8px;
    }
    .grille-albums
    {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px 10px;
    }
    #bloc_page .galerie_description p
    {
        font-size: 1.05em;
    }
}