/* =====================================================================
   SITE PUBLIC AFM-UKV — reproduction fidèle de la maquette
   Les mesures correspondent à la maquette affichée sur un écran de 1312 px.
   Couleurs et polices : voir les variables en haut de style.css.
   ===================================================================== */

.site { background: #fff; color: var(--texte); }
.site main { flex: 1; }
.site .bouton { background: var(--vert); }
.site .bouton:hover { background: var(--vert-fonce); }
.site .bouton.secondaire { background: #fff; color: var(--bleu-texte); }
.site .bouton.secondaire:hover { background: var(--panneau); }
.site .bouton.discret { background: none; }

/* ---------- Barre du haut ---------- */
.barre-haut { background: var(--bleu-barre); color: #fff; font-size: 12px; }
.barre-haut-int { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 38px; }
.coordonnees { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0 0 0 40px; min-width: 0; }
.coordonnees li { display: flex; align-items: center; gap: 8px; white-space: nowrap; min-width: 0; }
.coordonnees a { display: inline-flex; align-items: center; gap: 8px; color: #fff; }
.coordonnees a:hover { text-decoration: underline; }
.coordonnees .ic { font-size: 13px; }
.coordonnees-adresse span { overflow: hidden; text-overflow: ellipsis; }
.barre-haut-droite { display: flex; align-items: center; gap: 13px; flex-shrink: 0; padding-right: 28px; }
.reseaux { display: flex; align-items: center; gap: 10px; list-style: none; margin: 0 17px 0 0; padding: 0; }
.reseau {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #fff;
    font-size: 11px;
    transition: transform .15s;
}
.reseau:hover { transform: scale(1.1); }
.reseau-inactif:hover { transform: none; }
.reseau-facebook { background: #1877f2; }
.reseau-linkedin { background: #0a66c2; }
.reseau-youtube { background: #e62117; }
.reseau-whatsapp { background: #25d366; font-size: 13px; }
.recherche-haut { position: relative; display: flex; }
.recherche-haut input {
    width: 151px;
    height: 26px;
    padding: 2px 28px 2px 10px;
    border: 0;
    border-radius: 3px;
    font-size: 12px;
    color: var(--bleu-texte);
}
.recherche-haut input:focus { box-shadow: 0 0 0 2px var(--vert-vif); }
.recherche-haut button {
    position: absolute;
    right: 2px;
    top: 0;
    width: 26px;
    height: 26px;
    border: 0;
    background: none;
    color: var(--bleu-texte);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}
.lien-compte {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.lien-compte:hover { color: #fff; text-decoration: underline; }
.lien-compte .ic { font-size: 12px; opacity: .85; }
.bouton-membre {
    display: inline-flex;
    align-items: center;
    height: 27px;
    padding: 0 20px;
    border-radius: 3px;
    background: var(--vert);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
}
.bouton-membre:hover { background: var(--vert-fonce); color: #fff; text-decoration: none; }

/* ---------- En-tête : logo et menu ---------- */
.entete { position: relative; z-index: 40; background: #fff; }
.entete-int { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 93px; }
.marque { display: flex; align-items: center; gap: 12px; min-width: 0; padding-left: 30px; color: var(--bleu-titre); }
.marque:hover { text-decoration: none; }
.marque-logo { width: 82px; height: 82px; flex-shrink: 0; border-radius: 50%; object-fit: contain; }
.marque-texte {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    min-height: 66px;
    padding-left: 13px;
    border-left: 1px solid #dde4ec;
}
.marque-texte strong { font-family: var(--police-titre); font-size: 30px; font-weight: 700; line-height: 1.02; color: #002862; letter-spacing: -.01em; }
.marque-texte span { max-width: 300px; margin-top: 4px; font-size: 12.5px; line-height: 15px; color: #173d78; }
.menu { display: flex; align-items: center; flex-shrink: 0; margin-right: 28px; }
.menu-liste { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.menu-liste > li { position: relative; display: flex; align-items: center; }
.menu-liste > li > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 10px 11px;
    color: #10284f;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}
.menu-liste > li.a-sous-menu > a { padding-right: 2px; }
.menu-liste > li > a:hover { color: var(--vert); text-decoration: none; }
.menu-liste > li > a .chevron { font-size: 7px; opacity: .85; }
.menu-liste > li.actif > a { color: #1b9b3e; }
.menu-liste > li.actif > a::after {
    content: "";
    position: absolute;
    left: 11px;
    right: 11px;
    bottom: -1px;
    height: 2.5px;
    border-radius: 2px;
    background: #1b9b3e;
}
.menu-liste > li.a-sous-menu.actif > a::after { right: 14px; }
.sous-menu-bouton { display: none; }
.sous-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 230px;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--bordure);
    border-top: 3px solid var(--vert);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 16px 32px rgba(0, 36, 74, .14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .15s, transform .15s, visibility .15s;
}
.sous-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.a-sous-menu:hover > .sous-menu, .a-sous-menu:focus-within > .sous-menu { opacity: 1; visibility: visible; transform: none; }
.sous-menu a { display: block; padding: 8px 18px; color: var(--bleu-texte); font-size: 14px; font-weight: 600; }
.sous-menu a:hover { background: var(--panneau); color: var(--vert); text-decoration: none; }
.menu-bouton { display: none; }
.menu-mobile-extra { display: none; }

/* ---------- Bandeau d'accueil ---------- */
.hero {
    position: relative;
    overflow: hidden;
    min-height: 417px;
    color: #fff;
    background: linear-gradient(120deg, #002f5e 0%, #003c78 55%, #0b5296 100%);
}
.hero-sans-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 78% 30%, rgba(108, 228, 102, .16) 0, rgba(108, 228, 102, 0) 32%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 18px);
    pointer-events: none;
}
.hero-diapos, .hero-diapo { position: absolute; inset: 0; }
.hero-diapo {
    background-image: var(--image);
    background-size: cover;
    background-position: center right;
    opacity: 0;
    transition: opacity 1.2s ease;
}
/* Voile bleu sur les photos envoyées, pour que le texte reste lisible */
.hero-diapo.avec-voile {
    background-image:
        linear-gradient(90deg, rgba(0, 44, 92, .93) 0%, rgba(0, 44, 92, .86) 30%, rgba(0, 44, 92, .5) 48%, rgba(0, 44, 92, .08) 64%, rgba(0, 44, 92, 0) 72%),
        var(--image);
}
.hero-diapo.visible { opacity: 1; }
.hero-int { position: relative; z-index: 1; min-height: 417px; }
.hero-texte { position: relative; z-index: 2; max-width: 640px; padding: 34px 0 86px 68px; }
.hero-surtitre { margin: 0 0 13px; font-size: 12.5px; font-weight: 600; letter-spacing: .025em; text-transform: uppercase; }
.hero h1 {
    margin: 0 0 15px;
    font-family: var(--police-titre);
    font-size: 42px;
    font-weight: 600;
    line-height: 44px;
    letter-spacing: -.02em;
    color: #fff;
}
.hero-accent { color: var(--vert-vif); }
.hero-intro { max-width: 415px; margin: 0 0 24px; font-size: 14.5px; line-height: 20px; }
.hero-boutons { display: flex; flex-wrap: wrap; gap: 19px; }
.bouton-vif, .bouton-contour {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 42px;
    padding: 0 19px;
    border-radius: 4px;
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color .15s, color .15s, border-color .15s;
}
.bouton-vif { background: var(--vert-vif); color: #0b1d10; }
.bouton-vif:hover { background: var(--vert-vif-fonce); color: #0b1d10; text-decoration: none; }
.bouton-vif .ic { font-size: 12px; }
.bouton-contour { border: 1.5px solid rgba(255, 255, 255, .9); color: #fff; }
.bouton-contour:hover { background: rgba(255, 255, 255, .12); color: #fff; text-decoration: none; }
.bouton-contour .ic { font-size: 16px; }
.hero-citation {
    position: absolute;
    right: 9px;
    bottom: 74px;
    z-index: 2;
    width: 250px;
    margin: 0;
    padding: 11px 16px 12px;
    transform: rotate(-5.5deg);
    background: linear-gradient(180deg, #fdfdfd 0%, #eeeeee 100%);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .28);
    color: #12305a;
    font-family: "Patrick Hand", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
    font-size: 19.5px;
    line-height: 1.2;
    text-align: center;
}
.hero-points { position: absolute; left: 50%; bottom: 74px; z-index: 3; display: flex; gap: 10px; transform: translateX(-50%); }
.hero-points button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    cursor: pointer;
}
.hero-points button.actif { background: var(--vert-vif); }

/* ---------- Raccourcis sous le bandeau ---------- */
.raccourcis { position: relative; z-index: 5; margin-top: -53px; }
.raccourcis ul {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    margin: 0;
    padding: 8px;
    list-style: none;
    background: #f0f6fd;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0, 36, 74, .12), 0 1px 2px rgba(0, 36, 74, .06);
}
.raccourcis li { position: relative; display: flex; }
.raccourcis li + li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 1px;
    background: #dbe5f0;
}
.raccourcis a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 9px 6px 10px;
    border-radius: 9px;
    text-align: center;
    color: #6b6d72;
    transition: background-color .15s;
}
.raccourcis a:hover { background: #e3eefa; text-decoration: none; }
.raccourcis a .ic { width: auto; max-width: 36px; height: 30px; margin-bottom: 12px; color: #033771; }
.raccourcis strong { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 700; line-height: 15px; color: #0d2f69; }
.raccourcis span { font-size: 11px; line-height: 13px; }
.raccourcis .raccourci-membre::before { display: none; }
.raccourcis .raccourci-membre a { margin-left: 6px; background: var(--vert-pale); color: #4c5a4d; }
.raccourcis .raccourci-membre a:hover { background: #8fdc87; }
.raccourcis .raccourci-membre strong { color: #0d2f69; }
.raccourcis .raccourci-membre .ic { color: #0b3d6e; }

/* ---------- Actualités, événement, mot du président ---------- */
.trio { display: grid; grid-template-columns: 420fr 402fr 419fr; gap: 10px; margin-top: 15px; }
.bloc {
    position: relative;
    min-width: 0;
    padding: 14px 18px 17px;
    background: #fff;
    border: 1px solid #e6edf5;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 36, 74, .05);
}
.bloc-entete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 9px; border-bottom: 1px solid #e3eaf2; }
.bloc-entete h2 { margin: 0; font-size: 19.5px; font-weight: 700; color: #093672; letter-spacing: -.005em; }
.bloc-entete a { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--lien); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.bloc-entete a .ic { font-size: 9px; }
.bloc-vide { margin: 20px 0 0; color: var(--texte-doux); }
.liste-actus { list-style: none; margin: 0; padding: 0; }
.liste-actus li + li { border-top: 1px solid #e3eaf2; }
.liste-actus a { display: flex; align-items: center; gap: 17px; padding: 9px 0 9px; color: inherit; }
.liste-actus li:first-child a { padding-top: 9px; }
.liste-actus li:last-child a { padding-bottom: 0; }
.liste-actus a:hover { text-decoration: none; }
.liste-actus a:hover strong { color: var(--vert); }
.liste-actus img, .vignette-vide { width: 91px; height: 63px; flex-shrink: 0; border-radius: 3px; object-fit: cover; }
.vignette-vide { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #e5eef9, #d6e4f4); color: #7d9cc2; font-size: 24px; }
.actu-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.actu-texte time { font-size: 11.5px; color: #7d7f83; }
.actu-texte strong { font-size: 13.5px; font-weight: 700; line-height: 18px; color: #112748; transition: color .15s; }

.bloc-evenement {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 26px 26px 21px;
    overflow: hidden;
    border: 0;
    color: #fff;
    background: linear-gradient(160deg, #00315f 0%, #00244a 100%);
}
.bloc-evenement::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 85% 20%, rgba(108, 228, 102, .18) 0, rgba(108, 228, 102, 0) 40%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 16px);
}
.bloc-evenement.avec-photo::before {
    background:
        linear-gradient(90deg, rgba(0, 36, 74, .62) 0%, rgba(0, 36, 74, .38) 55%, rgba(0, 36, 74, .12) 100%),
        var(--fond) center / cover no-repeat;
}
.bloc-evenement > * { position: relative; }
.badge-vert {
    display: inline-block;
    padding: 4px 9px;
    border-radius: 3px;
    background: #0b8a2c;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.bloc-evenement h2 { margin: 15px 0 17px; font-size: 25px; font-weight: 700; line-height: 28px; color: #fff; }
.evenement-infos { list-style: none; margin: 0 0 7px; padding: 0; font-size: 13.5px; }
.evenement-infos li { display: flex; align-items: center; gap: 11px; margin-bottom: 7px; }
.evenement-infos .ic { width: 14px; font-size: 13px; }
.evenement-theme { margin: 0 0 21px; font-size: 13.5px; line-height: 19px; }
.bloc-evenement .bouton-vif { min-height: 36px; margin-top: auto; padding: 0 17px; font-size: 13px; }

.president-corps {
    display: grid;
    grid-template-columns: 159px minmax(0, 1fr);
    column-gap: 17px;
    padding-top: 6px;
}
.president-photo { grid-row: 1; width: 159px; height: 169px; margin-top: 18px; border-radius: 4px; object-fit: cover; object-position: top; background: #dfe7f1; }
.president-photo-vide { display: flex; align-items: center; justify-content: center; color: #9db4d1; font-size: 60px; }
.president-message { grid-row: 1; margin: 0; }
.president-message .guillemets { display: block; width: auto; height: 23px; margin: 0 0 7px; font-size: 26px; color: #dce7f4; }
.president-message p { margin: 0; font-size: 13.5px; line-height: 17.5px; color: #4b4b4e; }
.president-signature { grid-column: 1 / -1; margin: 3px 0 0; line-height: 1.32; }
.president-signature strong { display: block; font-size: 12.5px; color: #103471; }
.president-signature span { font-size: 11.5px; color: #7c7c7f; }

/* ---------- Chiffres clés ---------- */
.chiffres { margin-top: 14px; }
.chiffres ul {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    background: #f2f7fa;
    border-radius: 10px;
}
.chiffres li { position: relative; display: flex; align-items: center; gap: 18px; min-height: 78px; padding: 8px 12px 8px 41px; }
.chiffres li + li::before { content: ""; position: absolute; left: 0; top: 20px; bottom: 20px; width: 1px; background: #d9e3ec; }
.chiffres .ic { width: auto; max-width: 36px; height: 30px; color: #04376f; }
.chiffres span { display: flex; flex-direction: column; font-size: 11.5px; line-height: 1.25; color: #6e7074; }
.chiffres strong { font-size: 19.5px; font-weight: 700; line-height: 1.15; color: #043372; }

/* ---------- Grandes cartes photo ---------- */
.cartes-accueil { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 16px; margin-bottom: 40px; padding-left: 8px; padding-right: 8px; }
.carte-photo {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    min-height: 136px;
    padding: 0 16px 15px 17px;
    overflow: hidden;
    border-radius: 6px;
    color: #fff;
    background: linear-gradient(135deg, #0d4a8a, #00244a);
    isolation: isolate;
}
.carte-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: var(--fond, none) center / cover no-repeat;
    transition: transform .4s ease;
}
.carte-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(0deg, rgba(0, 30, 66, .82) 0%, rgba(0, 30, 66, .45) 38%, rgba(0, 30, 66, 0) 70%);
}
.carte-photo-vide::after {
    background:
        radial-gradient(circle at 85% 15%, rgba(108, 228, 102, .22) 0, rgba(108, 228, 102, 0) 45%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .04) 0 2px, transparent 2px 16px);
}
.carte-photo:hover { color: #fff; text-decoration: none; }
.carte-photo:hover::before { transform: scale(1.05); }
.carte-photo > span:first-child { font-size: 15.5px; font-weight: 700; line-height: 20px; text-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.carte-fleche {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    margin-bottom: 1px;
    border: 2px solid #fff;
    border-radius: 50%;
    font-size: 12px;
    transition: background-color .15s, color .15s;
}
.carte-photo:hover .carte-fleche { background: #fff; color: var(--bleu); }

/* ---------- Notifications (messages après une action) ---------- */
.notifications { position: fixed; top: 18px; right: 18px; z-index: 200; display: flex; flex-direction: column; gap: 10px; max-width: min(420px, calc(100vw - 36px)); }
.notifications .alerte { margin: 0; box-shadow: 0 12px 30px rgba(0, 36, 74, .2); cursor: pointer; animation: arrivee .3s ease; }
@keyframes arrivee { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- Pied de page ---------- */
.pied { margin-top: auto; background: var(--bleu-fonce); color: rgba(255, 255, 255, .82); font-size: 15.5px; }
.pied-grille { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.25fr; gap: 40px; padding-top: 48px; padding-bottom: 40px; }
.pied h2 { margin: 6px 0 16px; font-size: 17px; color: #fff; }
.pied a { color: rgba(255, 255, 255, .86); }
.pied a:hover { color: #fff; }
.marque-claire { padding-left: 0; gap: 12px; }
.marque-claire .marque-logo { width: 64px; height: 64px; background: #fff; }
.marque-claire .marque-texte { border-left-color: rgba(255, 255, 255, .25); min-height: 48px; }
.marque-claire .marque-texte strong { color: #fff; font-size: 26px; }
.pied-marque p { margin: 16px 0 18px; max-width: 360px; line-height: 1.45; }
.pied .reseaux { margin: 0; }
.pied .reseau { width: 32px; height: 32px; font-size: 15px; }
.pied-liens, .pied-contact { list-style: none; margin: 0; padding: 0; }
.pied-liens li { margin-bottom: 9px; }
.pied-contact li { display: flex; gap: 10px; margin-bottom: 12px; }
.pied-contact .ic { margin-top: 4px; color: var(--vert-vif); }
.bouton-contour-clair {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 9px 18px;
    border: 1.5px solid rgba(255, 255, 255, .6);
    border-radius: 5px;
    color: #fff;
    font-weight: 700;
}
.bouton-contour-clair:hover { background: rgba(255, 255, 255, .1); text-decoration: none; }
.pied-bas { border-top: 1px solid rgba(255, 255, 255, .12); font-size: 14px; }
.pied-bas-int { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 16px; padding-bottom: 16px; }
.pied-bas .credit { font-weight: 700; color: #fff; white-space: nowrap; }
.pied-bas .credit:hover { color: var(--vert-vif); }

/* =====================================================================
   Pages intérieures
   ===================================================================== */
.banniere {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(120deg, #002f5e 0%, #003c78 60%, #0b5296 100%);
}
.banniere::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 85% 20%, rgba(108, 228, 102, .16) 0, rgba(108, 228, 102, 0) 35%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 18px);
}
.banniere-photo::before {
    background:
        linear-gradient(90deg, rgba(0, 46, 92, .96) 0%, rgba(0, 46, 92, .88) 45%, rgba(0, 46, 92, .55) 100%),
        var(--fond) center / cover no-repeat;
}
.banniere-int { position: relative; padding-top: 42px; padding-bottom: 46px; }
.banniere h1 { max-width: 900px; margin: 10px 0 0; font-family: var(--police-titre); font-size: 38px; line-height: 1.12; color: #fff; }
.banniere p { max-width: 720px; margin: 12px 0 0; font-size: 17.5px; opacity: .92; }
.fil-ariane { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14.5px; color: rgba(255, 255, 255, .78); }
.fil-ariane a { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .9); }
.fil-ariane a:hover { color: #fff; }
.fil-ariane .ic { font-size: 13px; }
.fil-sep { opacity: .6; }

.page-contenu { padding-top: 44px; padding-bottom: 64px; }
.page-grille { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; align-items: start; }
.page-principale { min-width: 0; }
.encadre {
    background: #fff;
    border: 1px solid #e6edf5;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 36, 74, .05);
    padding: 30px 34px;
}
.encadre + .encadre { margin-top: 22px; }
.image-une { display: block; width: 100%; max-height: 460px; object-fit: cover; border-radius: 10px; margin-bottom: 26px; }
.chapeau { font-size: 1.2rem; color: var(--bleu-texte); font-weight: 600; line-height: 1.45; }
.meta-article { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 22px; color: var(--texte-doux); font-size: 15px; }
.meta-article span { display: inline-flex; align-items: center; gap: 7px; }
.meta-article .ic { color: var(--bleu); }
.retour { margin-top: 30px; }
.retour a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }

/* Colonne latérale */
.cote { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 20px; }
.cote-bloc { background: #fff; border: 1px solid #e6edf5; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 10px rgba(0, 36, 74, .05); }
.cote-bloc h2 { margin: 0; padding: 14px 20px; background: var(--bleu); color: #fff; font-size: 17px; }
.cote-liens { list-style: none; margin: 0; padding: 8px 0; }
.cote-liens a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 20px; color: var(--bleu-texte); font-weight: 600; border-left: 3px solid transparent; }
.cote-liens a:hover { background: var(--panneau); text-decoration: none; color: var(--vert); }
.cote-liens a.actif { border-left-color: var(--vert); background: var(--panneau); color: var(--vert); }
.cote-liens .ic { font-size: 11px; opacity: .6; }
.cote-membre { padding: 22px; background: linear-gradient(160deg, #00315f, #00244a); color: #fff; border: 0; }
.cote-membre h2 { padding: 0; background: none; margin-bottom: 8px; }
.cote-membre p { opacity: .88; font-size: 15px; }

/* Verrou des contenus réservés */
.verrou {
    margin-top: 10px;
    padding: 40px 24px;
    text-align: center;
    background: linear-gradient(180deg, #f6f9fd, var(--bleu-clair));
    border: 1px dashed #b9cbe6;
    border-radius: 12px;
}
.verrou-icone { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; margin-bottom: 10px; border-radius: 50%; background: var(--bleu); color: #fff; font-size: 24px; }
.verrou .actions-form { justify-content: center; }

/* Cartes d'articles et de pages */
.grille-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.carte-article {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e6edf5;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 36, 74, .05);
    color: var(--texte);
    transition: transform .15s, box-shadow .15s;
}
.carte-article:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0, 36, 74, .12); text-decoration: none; }
.carte-article .vignette { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--panneau); }
.carte-article .sans-image { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #e5eef9, #d4e2f3); color: #8aa6c8; font-size: 42px; }
.carte-article .corps { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 18px 22px 22px; }
.carte-article h3 { margin: 0; font-size: 19px; line-height: 1.25; color: #112748; }
.carte-article:hover h3 { color: var(--vert); }
.carte-article p { margin: 0; color: var(--texte-doux); font-size: 15.5px; }
.carte-article .meta { font-size: 14px; }
.carte-article .lire { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; padding-top: 6px; color: var(--lien); font-weight: 700; font-size: 15px; }

.intro-rubrique { max-width: 820px; margin: 0 0 28px; font-size: 18px; color: var(--bleu-texte); }

/* Événements */
.liste-evenements { display: flex; flex-direction: column; gap: 18px; }
.carte-evenement {
    display: grid;
    grid-template-columns: 96px 260px minmax(0, 1fr);
    gap: 24px;
    align-items: center;
    padding: 18px;
    background: #fff;
    border: 1px solid #e6edf5;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 36, 74, .05);
    color: var(--texte);
}
.carte-evenement:hover { border-color: #c8d8ec; box-shadow: 0 12px 28px rgba(0, 36, 74, .1); text-decoration: none; }
.carte-evenement.sans-image { grid-template-columns: 96px minmax(0, 1fr); }
.date-bloc { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 96px; border-radius: 10px; background: var(--bleu); color: #fff; line-height: 1; }
.date-bloc strong { font-family: var(--police-titre); font-size: 34px; }
.date-bloc span { margin-top: 6px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.date-bloc small { margin-top: 4px; font-size: 13px; opacity: .8; }
.carte-evenement img { width: 100%; height: 150px; object-fit: cover; border-radius: 8px; }
.carte-evenement h3 { margin: 6px 0 8px; font-size: 21px; color: #112748; }
.carte-evenement:hover h3 { color: var(--vert); }
.carte-evenement .evenement-infos { color: var(--texte-doux); font-size: 15.5px; margin-bottom: 6px; }
.carte-evenement .evenement-infos .ic { color: var(--bleu); }
.carte-evenement p { margin: 0; color: var(--texte); }
.evenement-passe .date-bloc { background: #8a96a8; }
.infos-evenement { list-style: none; margin: 0; padding: 16px 20px; }
.infos-evenement li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--bordure); font-size: 15.5px; }
.infos-evenement li:last-child { border-bottom: 0; }
.infos-evenement .ic { margin-top: 4px; color: var(--vert); }
.infos-evenement strong { display: block; color: var(--bleu-texte); }
.cote-bloc .bouton { margin: 0 20px 20px; }

/* Publications */
.liste-documents { display: flex; flex-direction: column; gap: 14px; }
.document {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
    padding: 18px 22px;
    background: #fff;
    border: 1px solid #e6edf5;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 36, 74, .05);
}
.document-icone { display: flex; align-items: center; justify-content: center; width: 56px; height: 64px; border-radius: 8px; background: var(--panneau); color: var(--bleu); font-size: 28px; }
.document-icone.pdf { color: #c62828; background: #fdeeee; }
.document-icone.word { color: #1d5bbf; background: #eaf1fd; }
.document-icone.excel { color: #1d7a3e; background: #e9f6ee; }
.document-icone.powerpoint { color: #c4501c; background: #fdf0e9; }
.document h3 { margin: 0 0 4px; font-size: 18.5px; color: #112748; }
.document p { margin: 4px 0 0; color: var(--texte); font-size: 15.5px; }
.document .meta { font-size: 14px; }
.document-image { display: none; }

/* Partenaires */
.groupe-partenaires + .groupe-partenaires { margin-top: 40px; }
.groupe-partenaires > h2 { font-size: 24px; margin-bottom: 18px; }
.grille-partenaires { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.partenaire {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 22px 18px;
    text-align: center;
    background: #fff;
    border: 1px solid #e6edf5;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 36, 74, .05);
    color: var(--texte);
}
a.partenaire:hover { border-color: #c8d8ec; box-shadow: 0 12px 28px rgba(0, 36, 74, .1); text-decoration: none; }
.partenaire-logo { display: flex; align-items: center; justify-content: center; width: 100%; height: 110px; }
.partenaire-logo img { max-width: 100%; max-height: 110px; object-fit: contain; }
.partenaire-logo .ic { font-size: 44px; color: #b3c5dc; }
.partenaire strong { color: #112748; font-size: 17px; }
.partenaire p { margin: 0; color: var(--texte-doux); font-size: 14.5px; }

/* Galerie */
.grille-galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.media {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #0d4a8a, #00244a);
    cursor: pointer;
    font: inherit;
    text-align: left;
}
.media img { width: 100%; height: 100%; object-fit: cover; color: transparent; transition: transform .35s ease; }
.media:hover img { transform: scale(1.05); }
.media-legende {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 30px 14px 12px;
    background: linear-gradient(0deg, rgba(0, 30, 66, .88), rgba(0, 30, 66, 0));
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.3;
}
.media-lecture {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin: -29px 0 0 -29px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--bleu);
    font-size: 20px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .3);
    padding-left: 4px;
}
.visionneuse {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 70px;
    background: rgba(0, 16, 36, .92);
}
.visionneuse[hidden] { display: none; }
.visionneuse figure { margin: 0; max-width: 1100px; width: 100%; text-align: center; color: #fff; }
.visionneuse img { max-height: 80vh; margin: 0 auto; border-radius: 6px; }
.visionneuse .video { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.visionneuse iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 6px; }
.visionneuse figcaption { margin-top: 14px; font-size: 16px; }
.visionneuse button {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
}
.visionneuse button:hover { background: rgba(255, 255, 255, .26); }
.visionneuse-fermer { top: 16px; right: 16px; }
.visionneuse-precedent { left: 14px; top: 50%; margin-top: -23px; }
.visionneuse-suivant { right: 14px; top: 50%; margin-top: -23px; }

/* Contact */
.grille-contact { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 28px; align-items: start; }
.coordonnees-carte { padding: 30px; border-radius: 12px; background: linear-gradient(160deg, #00315f, #00244a); color: #fff; }
.coordonnees-carte h2 { color: #fff; font-size: 22px; }
.coordonnees-carte ul { list-style: none; margin: 18px 0 24px; padding: 0; }
.coordonnees-carte li { display: flex; gap: 14px; margin-bottom: 18px; }
.coordonnees-carte li .ic { margin-top: 3px; font-size: 18px; color: var(--vert-vif); }
.coordonnees-carte li strong { display: block; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; opacity: .7; }
.coordonnees-carte a { color: #fff; }
.coordonnees-carte .reseau { width: 34px; height: 34px; font-size: 15px; }

/* Recherche */
.resultats-groupe + .resultats-groupe { margin-top: 32px; }
.resultats-groupe h2 { font-size: 22px; }
.resultat { padding: 16px 0; border-bottom: 1px solid var(--bordure); }
.resultat a { font-size: 18px; font-weight: 700; color: #112748; }
.resultat a:hover { color: var(--vert); }
.resultat p { margin: 4px 0 0; color: var(--texte-doux); }
.formulaire-recherche { display: flex; gap: 10px; max-width: 640px; margin-bottom: 30px; }
.formulaire-recherche input { flex: 1; }

/* Onglets du site public */
.site .onglets { margin-bottom: 26px; }
.site .onglets a { padding: 8px 18px; font-size: 15.5px; }
.site .onglets a.actif { background: var(--bleu); border-color: var(--bleu); }

/* Connexion, inscription et espace membre */
.page-formulaire { padding-top: 44px; padding-bottom: 64px; }
.page-formulaire .carte { border-color: #e6edf5; }
.site .tuile { border-color: #e6edf5; }

/* Compléments des pages intérieures */
.image-une.image-petite { float: right; width: auto; max-width: 45%; max-height: none; margin: 4px 0 18px 26px; }
.contenu-riche::after { content: ""; display: table; clear: both; }
.cote-liens a span { display: flex; flex-direction: column; min-width: 0; }
.cote-liens a small { margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--texte-doux); }
.cote-bloc .bloc-bouton { display: flex; margin: 0 20px 20px; }
.cote-membre .bouton-vif { margin-top: 4px; }
.meta-article .badge { display: inline-flex; align-items: center; gap: 6px; }
.meta-article .badge .ic { color: inherit; font-size: 11px; }
.section-evenements + .section-evenements { margin-top: 44px; }
.section-evenements > h2 { margin-bottom: 18px; font-size: 24px; }
.carte-evenement > div { min-width: 0; }
.carte-evenement .badge { margin-top: 8px; }
.voir-plus { margin: 22px 0 0; text-align: center; }
.document .bouton { white-space: nowrap; }
.document .meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 2px; }
.partenaire-lien { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--lien); }
.partenaire-lien .ic { font-size: 11px; }
.resultat .meta { display: block; margin-top: 2px; }
.salut { margin: 0 0 4px; font-size: 1.6rem; }
.page-formulaire .carte h2:first-child { font-size: 1.45rem; }
.page-formulaire .liens-bas { text-align: center; }
.visionneuse.un-seul .visionneuse-precedent, .visionneuse.un-seul .visionneuse-suivant { display: none; }
.visionneuse-ouverte { overflow: hidden; }
.coordonnees-carte .reseaux { margin: 0; }
.coordonnees-carte span { display: flex; flex-direction: column; }

/* =====================================================================
   Adaptation aux écrans plus petits
   ===================================================================== */
@media (max-width: 1300px) {
    .menu { margin-right: 0; }
    .marque { padding-left: 6px; }
    .coordonnees { padding-left: 6px; gap: 24px; }
    .barre-haut-droite { padding-right: 0; }
    .menu-liste > li > a { padding: 10px 8px; }
    .menu-liste > li.a-sous-menu > a { padding-right: 1px; }
    .menu-liste > li.actif > a::after { left: 8px; right: 8px; }
    .menu-liste > li.a-sous-menu.actif > a::after { right: 13px; }
    .marque-logo { width: 74px; height: 74px; }
    .marque-texte strong { font-size: 27px; }
    .marque-texte span { max-width: 255px; font-size: 12px; line-height: 14px; }
    .hero-texte { padding-left: 46px; }
}
@media (max-width: 1240px) {
    .coordonnees-adresse { display: none !important; }
    .marque-texte span { display: none; }
}
@media (max-width: 1180px) {
    /* Menu pour tablette et téléphone */
    .menu { margin-right: 0; }
    .marque-texte span { display: block; max-width: 300px; }
    .entete-int { min-height: 88px; }
    .menu-bouton {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 44px;
        padding: 0 16px;
        border: 1px solid var(--bordure-champ);
        border-radius: 8px;
        background: #fff;
        color: var(--bleu-texte);
        font: inherit;
        font-weight: 700;
        cursor: pointer;
    }
    .menu-bouton .ic { font-size: 18px; }
    .menu-bouton .ic-fermer, .menu-ouvert .menu-bouton .ic-ouvrir { display: none; }
    .menu-ouvert .menu-bouton .ic-fermer { display: inline-block; }
    .menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        max-height: calc(100vh - 90px);
        overflow-y: auto;
        padding: 6px 22px 22px;
        background: #fff;
        border-top: 1px solid var(--bordure);
        box-shadow: 0 18px 30px rgba(0, 36, 74, .15);
    }
    .menu-ouvert .menu { display: flex; }
    .menu-liste { flex-direction: column; align-items: stretch; }
    .menu-liste > li { flex-wrap: wrap; border-bottom: 1px solid var(--bordure); }
    .menu-liste > li > a { flex: 1; padding: 14px 4px; font-size: 17px; }
    .menu-liste > li > a .chevron { display: none; }
    .menu-liste > li.actif > a::after { display: none; }
    .sous-menu-bouton {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: 8px;
        background: var(--panneau);
        color: var(--bleu-texte);
        cursor: pointer;
        transition: transform .2s;
    }
    .ouvert > .sous-menu-bouton { transform: rotate(180deg); }
    .sous-menu {
        position: static;
        display: none;
        width: 100%;
        min-width: 0;
        margin: 0 0 10px;
        padding: 4px 0;
        border: 0;
        border-left: 3px solid var(--vert);
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }
    .a-sous-menu:hover > .sous-menu, .a-sous-menu:focus-within > .sous-menu { display: none; }
    .a-sous-menu.ouvert > .sous-menu { display: block; }
    .sous-menu a { padding: 9px 16px; font-size: 16px; }
    .menu-mobile-extra { display: block; margin-top: 16px; }
    .recherche-mobile { display: flex; gap: 8px; }
    .recherche-mobile button { width: 46px; border: 0; border-radius: 8px; background: var(--bleu); color: #fff; cursor: pointer; }

    .hero-texte { padding-left: 24px; }
    .raccourcis ul { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 8px; }
    .raccourcis li:nth-child(6)::before { display: none; }
    .trio { grid-template-columns: 1fr 1fr; }
    .bloc-president { grid-column: 1 / -1; }
    .chiffres li { padding-left: 22px; }
    .page-grille { grid-template-columns: 1fr; }
    .cote { position: static; }
    .pied-grille { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
    .coordonnees { gap: 18px; }
    .coordonnees li span { display: none; }
    .coordonnees .ic { font-size: 16px; }
    .recherche-haut { display: none; }
    .hero, .hero-int { min-height: 0; }
    .hero-texte { padding: 46px 0 96px 4px; }
    .hero h1 { font-size: 38px; }
    .hero-voile { background: linear-gradient(90deg, rgba(0, 46, 92, .95) 0%, rgba(0, 46, 92, .82) 60%, rgba(0, 46, 92, .55) 100%); }
    .hero-citation { display: none; }
    .raccourcis ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .raccourcis li:nth-child(6)::before { display: block; }
    .raccourcis li:nth-child(3n+1)::before { display: none; }
    .raccourcis .raccourci-membre a { margin-left: 0; }
    .chiffres ul { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 4px; padding: 6px 0; }
    .chiffres li:nth-child(4)::before { display: none; }
    .cartes-accueil { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .carte-evenement, .carte-evenement.sans-image { grid-template-columns: 84px minmax(0, 1fr); }
    .carte-evenement img { display: none; }
    .date-bloc { height: 84px; }
    .grille-contact { grid-template-columns: 1fr; }
    .banniere h1 { font-size: 32px; }
}
@media (max-width: 640px) {
    .conteneur { padding-left: 16px; padding-right: 16px; }
    .page-contenu, .page-formulaire { padding-top: 28px; padding-bottom: 44px; }
    .barre-haut-int { min-height: 44px; }
    .reseaux { display: none; }
    .lien-compte { font-size: 0; gap: 0; }
    .lien-compte .ic { font-size: 16px; opacity: 1; }
    .bouton-membre { padding: 0 12px; font-size: 14px; }
    .entete-int { min-height: 76px; gap: 12px; }
    .marque { padding-left: 0; gap: 10px; }
    .marque-logo { width: 56px; height: 56px; }
    .marque-texte { padding-left: 10px; min-height: 48px; }
    .marque-texte strong { font-size: 22px; }
    .marque-texte span { display: none; }
    .menu-bouton span { display: none; }
    .menu-bouton { padding: 0 12px; }
    .hero h1 { font-size: 31px; }
    .hero-surtitre { font-size: 12.5px; }
    .hero-intro { font-size: 16px; }
    .hero-boutons { flex-direction: column; align-items: stretch; gap: 12px; }
    .hero-points { bottom: 70px; }
    .raccourcis { margin-top: -50px; }
    .raccourcis ul { padding: 8px 6px; }
    .raccourcis a { padding: 8px 4px; }
    .raccourcis a .ic { font-size: 28px; }
    .raccourcis strong { font-size: 14px; margin-bottom: 0; }
    .raccourcis span { display: none; }
    .trio { grid-template-columns: 1fr; }
    .bloc-entete { flex-direction: column; gap: 4px; }
    .president-corps { grid-template-columns: 110px minmax(0, 1fr); }
    .president-photo { width: 110px; height: 124px; }
    .chiffres ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .chiffres li { padding-left: 16px; gap: 12px; }
    .chiffres li::before { display: none !important; }
    .cartes-accueil { grid-template-columns: 1fr; }
    .encadre { padding: 22px 18px; }
    .document { grid-template-columns: 46px minmax(0, 1fr); }
    .document .bouton { grid-column: 1 / -1; }
    .document-icone { width: 46px; height: 54px; font-size: 22px; }
    .pied-grille { grid-template-columns: 1fr; gap: 26px; padding-top: 36px; padding-bottom: 30px; }
    .banniere-int { padding-top: 30px; padding-bottom: 34px; }
    .banniere h1 { font-size: 27px; }
    .visionneuse { padding: 60px 10px; }
    .visionneuse-precedent, .visionneuse-suivant { top: auto; bottom: 14px; margin: 0; }
}