/*
 * Ronde design de Pierre Messier (Marker MA-27 à MA-44, 02/10), faite le 2026-10-05.
 * Chargé après style.css, responsive.css et retouches-2026-09.css (inc/assets.php).
 * Le JS qui va avec : inc/retouches-2026-10.js.
 */
:root {
    --morency-marin: #162e5a;               /* bleu marin de la maquette (couleur.jpg, MA-31) */
    --morency-ease: cubic-bezier(.65, 0, .35, 1);  /* ease in + out, demandé partout */
}

/* MA-39 : filtres des publications, survol bleu marin et libellé blanc */
.filter-btn {
    transition: background-color .3s var(--morency-ease), color .3s var(--morency-ease), border-color .3s var(--morency-ease);
}
.filter-btn:hover {
    background: var(--morency-marin);
    border-color: var(--morency-marin);
    color: #fff;
}

/* MA-43 : « Charger plus » (et le bouton équipe de MA-45), survol bleu marin */
.js-load-more,
.btnEquipe {
    transition: background-color .35s var(--morency-ease), color .35s var(--morency-ease), border-color .35s var(--morency-ease);
}
.js-load-more:hover,
.js-load-more:focus-visible,
.btnEquipe:hover,
.btnEquipe:focus-visible {
    background: var(--morency-marin);
    border-color: var(--morency-marin);
    color: #fff;
}

/* MA-40 : halo gris très pâle qui suit la souris derrière la carte (--mx/--my posés en JS) */
.articleCard {
    position: relative;
    isolation: isolate;
}
.articleCard::before {
    content: "";
    position: absolute;
    inset: -14px;
    border-radius: 12px;
    background: radial-gradient(circle 240px at var(--mx, 50%) var(--my, 50%), rgba(11, 5, 6, .05), transparent 70%);
    opacity: 0;
    transition: opacity .35s var(--morency-ease);
    pointer-events: none;
    z-index: -1;
}
.articleCard:hover::before {
    opacity: 1;
}

/* MA-41 : cadrer plus haut pour garder les visages ; MA-42 : léger zoom au survol */
.articleCard .landscapeImg img {
    object-position: center 25%;
    transition: transform .6s var(--morency-ease);
}
.articleCard:hover .landscapeImg img {
    transform: scale(1.04);
}

/* MA-38 : pastille plus foncée qui suit la souris dans le menu et allume le mot */
@media (min-width: 1025px) {
    .mainNav {
        position: relative;
        z-index: 0;
    }
    .mainNav .navPill {
        position: absolute;
        top: 50%;
        left: 0;
        width: 0;
        height: 44px;
        transform: translateY(-50%);
        border-radius: 10px;
        background: rgba(11, 5, 6, .18);
        opacity: 0;
        pointer-events: none;
        z-index: -1;
        transition: left .35s var(--morency-ease), width .35s var(--morency-ease), opacity .25s var(--morency-ease);
    }
    .mainNav > li > a {
        transition: color .25s var(--morency-ease);
    }
    .mainNav > li:hover > a {
        color: #fff;
    }
}

/* MA-30 : le menu arrive plus vite (le slide est réglé dans js/main.js) */
.siteHeader {
    transition: transform .3s var(--morency-ease);
}

/* MA-32 : en-tête collant. Le bouton Menu ne se cache plus au défilement, un peu
   transparent ; le logo passe en blanc sur fond sombre (classe posée en JS). */
header.siteHeader.headerUp.headerDown {
    transform: none;
}
.customToggle {
    background: rgb(108 108 108 / 70%);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.siteHeader .headerLogo img {
    filter: brightness(0);
    transition: filter .3s var(--morency-ease), opacity .3s ease;
}
.siteHeader.headerSurSombre .headerLogo img {
    filter: brightness(0) invert(1);
}

/* MA-36 : sous-expertises alignées sur la ligne du titre, le blanc reste en bas
   (grille suisse). --que-h = hauteur de la ligne de titre, posée en JS. */
@media (min-width: 992px) {
    .expertiseArea .accoList > li .answer {
        margin-top: calc(-1 * var(--que-h, 58px));
        pointer-events: none;
    }
    .expertiseArea .accoList > li .answer a {
        pointer-events: auto;
    }
    .expertiseArea .accoList > li .answer .row > div {
        padding-top: 14px;
        padding-right: 64px;
    }
}

/* MA-35 : « M'abonner » devient un vrai bouton foncé du design system */
.footerForm .gform_wrapper form .gform_footer input[type='submit'] {
    background: #0B0506;
    color: #fff;
    border-radius: 12px;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    transition: background-color .35s var(--morency-ease);
}
.footerForm .gform_wrapper form .gform_footer input[type='submit']:hover,
.footerForm .gform_wrapper form .gform_footer input[type='submit']:focus-visible {
    background: var(--morency-marin);
}

/* MA-44 : un peu plus d'air entre la ligne sous « Nous joindre » et Prénom */
.contactForm .gform_wrapper {
    margin-top: 24px;
}

/* MA-27 : « Crédits » cliquable */
.creditsToggle {
    cursor: pointer;
}
.creditsToggle a {
    color: inherit;
    text-decoration: underline;
}

/* Page Équipe filtrée (retour d'Eric, 05/10) : la liste déroulante active passe en gris. */
.selectDrop.isActive {
    border-color: #6C6C6C !important;   /* gris du bouton Menu (Eric, 05/10 : le marin reste aux survols) */
    background-color: #6C6C6C;
    color: #fff !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.selectDrop.isActive option {
    color: #0B0506;
    background: #fff;
}

/* Listes de filtre de la page Équipe : de l'air entre le texte et le chevron (Eric, 05/10). */
.selectDrop {
    padding-right: 40px;
    background-position: right 14px center;
    text-overflow: ellipsis;
}