/* ==========================================================================
   DGB — animations et éléments d'interface du site public
   Charte : primaire #005296, secondaire #24AA6D, tertiaire #B0C7C4, brun #B56916
   ========================================================================== */

/* Les translations initiales des animations ne doivent jamais créer de
   défilement horizontal (clip ne crée pas de conteneur de scroll : la
   navigation sticky reste fonctionnelle) */
html, body { overflow-x: hidden; }
@supports (overflow-x: clip) {
    html, body { overflow-x: clip; }
}

/* --------------------------------------------------------------------------
   1. Animations d'apparition au défilement (pilotées par dgb-front.js)
   -------------------------------------------------------------------------- */
[data-animate] {
    opacity: 0;
    transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
                transform .7s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}
[data-animate="fade-up"]    { transform: translateY(28px); }
[data-animate="fade-down"]  { transform: translateY(-28px); }
[data-animate="fade-left"]  { transform: translateX(36px); }
[data-animate="fade-right"] { transform: translateX(-36px); }
[data-animate="zoom-in"]    { transform: scale(.94); }

[data-animate].dgb-visible {
    opacity: 1;
    transform: none;
}

/* décalages en cascade pour les grilles de cartes */
[data-animate-delay="1"] { transition-delay: .1s; }
[data-animate-delay="2"] { transition-delay: .2s; }
[data-animate-delay="3"] { transition-delay: .3s; }
[data-animate-delay="4"] { transition-delay: .4s; }

/* --------------------------------------------------------------------------
   2. Marquee « Dernières actualités »
   -------------------------------------------------------------------------- */
.dgb-marquee {
    display: flex;
    align-items: stretch;
    background: #005296;
    color: #fff;
    overflow: hidden;
    border-bottom: 3px solid #24AA6D;
}
.dgb-marquee__label {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .5rem;
    background: #24AA6D;
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .08em;
    padding: .55rem 1rem;
    white-space: nowrap;
    z-index: 2;
}
.dgb-marquee__label .dgb-pulse {
    width: .55rem;
    height: .55rem;
    border-radius: 9999px;
    background: #fff;
    animation: dgb-pulse 1.6s ease-in-out infinite;
}
.dgb-marquee__viewport {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}
.dgb-marquee__track {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    animation: dgb-marquee 38s linear infinite;
    padding-left: 1rem;
}
.dgb-marquee:hover .dgb-marquee__track,
.dgb-marquee:focus-within .dgb-marquee__track {
    animation-play-state: paused;
}
.dgb-marquee__item {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: #fff;
    font-size: .85rem;
    padding: .55rem 1.4rem;
    text-decoration: none;
    transition: color .2s;
}
.dgb-marquee__item:hover { color: #B0C7C4; text-decoration: underline; }
.dgb-marquee__item .dgb-dot {
    width: .4rem;
    height: .4rem;
    border-radius: 9999px;
    background: #B56916;
    flex: 0 0 auto;
}
@keyframes dgb-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes dgb-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .35; transform: scale(.7); }
}

/* --------------------------------------------------------------------------
   3. En-tête de page institutionnel (bandeau titre + fil d'Ariane)
   -------------------------------------------------------------------------- */
.dgb-page-header {
    background: linear-gradient(135deg, #f7faf9 0%, #eef4f3 100%);
    border-bottom: 1px solid #dbe7e4;
    position: relative;
    overflow: hidden;
}
.dgb-page-header::after {
    content: '';
    position: absolute;
    right: -60px;
    top: -60px;
    width: 220px;
    height: 220px;
    border-radius: 9999px;
    background: radial-gradient(circle, rgba(36, 170, 109, .12), transparent 70%);
}
.dgb-title-accent {
    position: relative;
    padding-bottom: .6rem;
}
.dgb-title-accent::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 64px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, #005296 0 55%, #24AA6D 55% 100%);
}

/* --------------------------------------------------------------------------
   4. Cartes : élévation au survol + zoom image
   -------------------------------------------------------------------------- */
.dgb-card {
    transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s;
}
.dgb-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 34px -14px rgba(0, 82, 150, .28);
}
.dgb-card .dgb-card-img {
    overflow: hidden;
}
.dgb-card .dgb-card-img img {
    transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.dgb-card:hover .dgb-card-img img {
    transform: scale(1.06);
}

/* fond de remplacement pendant le chargement des images */
.dgb-img-loading {
    background: linear-gradient(100deg, #eef2f1 40%, #f8faf9 50%, #eef2f1 60%);
    background-size: 200% 100%;
    animation: dgb-shimmer 1.4s linear infinite;
}
@keyframes dgb-shimmer {
    to { background-position: -200% 0; }
}

/* --------------------------------------------------------------------------
   5. Navigation : soulignement animé + ombre du header collant
   -------------------------------------------------------------------------- */
.dgb-nav-link {
    position: relative;
}
.dgb-nav-link::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: 0;
    height: 2px;
    background: #24AA6D;
    transition: width .25s ease, left .25s ease;
}
.dgb-nav-link:hover::after {
    width: 100%;
    left: 0;
}
.dgb-sticky-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    transition: box-shadow .3s;
}
.dgb-sticky-nav.dgb-scrolled {
    box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .25);
}

/* --------------------------------------------------------------------------
   6. Boutons et filtres
   -------------------------------------------------------------------------- */
.dgb-btn {
    transition: transform .2s, box-shadow .2s, background-color .2s, color .2s;
}
.dgb-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -8px rgba(36, 170, 109, .55);
}
.dgb-filter-chip {
    transition: background-color .2s, color .2s, transform .2s;
}
.dgb-filter-chip:hover { transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   7. Carte (page contact)
   -------------------------------------------------------------------------- */
.dgb-map-frame {
    border: 0;
    width: 100%;
    height: 380px;
    border-radius: .75rem;
    box-shadow: 0 12px 30px -12px rgba(0, 82, 150, .35);
}

/* --------------------------------------------------------------------------
   8. Accessibilité : réduire les animations si demandé par le système
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    [data-animate] { opacity: 1 !important; transform: none !important; transition: none !important; }
    .dgb-marquee__track { animation: none; }
    .dgb-card, .dgb-btn, .dgb-card .dgb-card-img img { transition: none; }
}