/* ===================================================================
 *  CDH83 — structures.css
 *  Page « Nos structures » (liste de logos) + page détail d'une structure.
 *  S'appuie sur actualites.css (hero, breadcrumb, footer, CTA) et reprend
 *  le survol des partenaires (opacity .55).
 *
 *  Charte CDH83 : #1a3a6b (bleu marine) · #dd1a02 (rouge accent)
 * =================================================================== */

.s-structures-liste,
.s-structure-detail {
    --acc:        #dd1a02;
    --acc-hover:  #cf1d61;
    --navy:       #1a3a6b;
}

/* ────────────────────────────────────────────────────────────────────
 *  1. GRILLE DE LOGOS (page liste)
 * ──────────────────────────────────────────────────────────────────── */
.s-structures-liste {
    background: #ffffff;
    padding: 6rem 0 7rem;
}

/* Même largeur centrée que le fil d'Ariane et le filtre (comme les actualités) */
.s-structures-liste .wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 4rem;
}
@media (max-width: 1024px) { .s-structures-liste .wrap { padding: 0 3rem; } }
@media (max-width: 600px)  { .s-structures-liste .wrap { padding: 0 2rem; } }

.structures-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2rem;
}
@media screen and (max-width: 1280px) { .structures-grid { grid-template-columns: repeat(4, 1fr); } }
@media screen and (max-width: 1024px) { .structures-grid { grid-template-columns: repeat(3, 1fr); } }
@media screen and (max-width: 700px)  { .structures-grid { grid-template-columns: repeat(2, 1fr); gap: 1.6rem; } }
@media screen and (max-width: 460px)  { .structures-grid { grid-template-columns: 1fr; } }

/* Carte = vignette logo cliquable */
/* Carte = vignette logo cliquable (sans cadre ni fond : logos posés sur le blanc) */
.structure-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 0;
    background: transparent;
    border: none;
    border-radius: 0;
    text-decoration: none;
    box-shadow: none;
    transition: transform .35s ease;
}
.structure-card:hover,
.structure-card:focus {
    transform: translateY(-6px);
}

/* Logo : même survol que les partenaires (opacity .55) */
.structure-card__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 110px;
    margin-bottom: 1.4rem;
}
.structure-card__logo img {
    max-width: 110px;
    max-height: 110px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: opacity .5s ease-in-out;
}
.structure-card:hover .structure-card__logo img,
.structure-card:focus .structure-card__logo img {
    opacity: .55;
}

.structure-card__name {
    font-family: "montserrat-semibold", "Montserrat", sans-serif;
    font-size: 1.4rem;
    line-height: 1.3;
    color: #111111;
    margin-bottom: .5rem;
}
.structure-card__city {
    font-family: "lora-regular", serif;
    font-size: 1.25rem;
    color: #8a8a8a;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.structure-card__city i { color: var(--acc); font-size: 1.2rem; }

/* Animation staggered (révélation au scroll) */
.structures-grid .structure-card {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .6s ease, transform .6s ease, box-shadow .35s ease, border-color .35s ease;
}
.structures-grid.is-revealed .structure-card { opacity: 1; transform: translateY(0); }
.structures-grid.is-revealed .structure-card:nth-child(1)  { transition-delay: .00s; }
.structures-grid.is-revealed .structure-card:nth-child(2)  { transition-delay: .08s; }
.structures-grid.is-revealed .structure-card:nth-child(3)  { transition-delay: .16s; }
.structures-grid.is-revealed .structure-card:nth-child(4)  { transition-delay: .24s; }
.structures-grid.is-revealed .structure-card:nth-child(5)  { transition-delay: .32s; }
.structures-grid.is-revealed .structure-card:nth-child(6)  { transition-delay: .40s; }
.structures-grid.is-revealed .structure-card:nth-child(7)  { transition-delay: .48s; }
.structures-grid.is-revealed .structure-card:nth-child(8)  { transition-delay: .56s; }
.structures-grid.is-revealed .structure-card:nth-child(n+9) { transition-delay: .62s; }

@media (prefers-reduced-motion: reduce) {
    .structures-grid .structure-card { opacity: 1; transform: none; transition: none; }
}

/* ────────────────────────────────────────────────────────────────────
 *  2. PAGE DÉTAIL
 * ──────────────────────────────────────────────────────────────────── */
.s-structure-detail { background: #ffffff; padding: 5rem 0 6rem; }

/* Le contenu de la fiche s'aligne sur le fil d'Ariane « Accueil » (même
   conteneur large que la liste), au lieu du gabarit étroit des articles. */
.page-structure-detail .wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 4rem;
}
@media (max-width: 1024px) { .page-structure-detail .wrap { padding: 0 3rem; } }
@media (max-width: 600px)  { .page-structure-detail .wrap { padding: 0 2rem; } }

/* Hero : avec une photo → comportement identique à l'article (image + overlay).
   Sans photo → dégradé bleu marine en repli. */
.structure-detail-hero:not(.has-photo) {
    background: linear-gradient(135deg, #1a3a6b 0%, #122a4f 100%);
}
.structure-detail-hero:not(.has-photo) .actualites-hero__overlay { background: transparent; }

.structure-detail__head {
    display: flex;
    align-items: center;
    gap: 2.6rem;
    padding-bottom: 2.6rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #eceff3;
}
@media screen and (max-width: 600px) {
    .structure-detail__head { flex-direction: column; text-align: center; gap: 1.6rem; }
}
.structure-detail__logo {
    flex: 0 0 auto;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}
.structure-detail__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

.structure-detail__intro p {
    font-size: 1.6rem;
    color: #555;
    margin: 0 0 .6rem;
    display: flex;
    align-items: center;
    gap: .7rem;
}
@media screen and (max-width: 600px) {
    .structure-detail__intro p { justify-content: center; }
}
.structure-detail__intro i { color: var(--acc); }
.structure-detail__president strong { color: #111; }

.structure-block { margin-top: 3.2rem; }

/* Fin trait de séparation entre chaque bloc (Disciplines / Présentation / Contact),
   identique au trait sous l'en-tête de la fiche. */
.structure-block + .structure-block {
    border-top: 1px solid #eceff3;
    padding-top: 1.6rem;
}

/* Trait sous le dernier bloc (Contact) pour marquer l'espace avant les boutons */
.page-structure-detail .article-footer-cta {
    border-top: 1px solid #eceff3;
    padding-top: 5.6rem;
    margin-top: 3.2rem;
}
.structure-block__title {
    font-family: "montserrat-semibold", "Montserrat", sans-serif;
    font-size: 1.9rem;
    color: #111111;
    margin-bottom: 1.4rem;
	margin-top: 3.4rem;
    display: flex;
    align-items: center;
    gap: .8rem;
}
.structure-block__title i { color: var(--acc); font-size: 1.7rem; }

/* Tags disciplines */
.structure-disciplines {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.structure-discipline-tag {
    display: inline-block;
    padding: .7rem 1.4rem;
    background: #f0f3f8;
    border: 1px solid #e2e8f1;
    border-radius: 999px;
    font-size: 1.35rem;
    color: #111111;
    text-decoration: none;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.structure-discipline-tag:hover,
.structure-discipline-tag:focus {
    background: var(--navy);
    border-color: var(--navy);
    color: #ffffff;
}

/* Liste contact */
.structure-contact {
    list-style: none;
    margin: 0;
    padding: 0;
}
.structure-contact li {
    font-size: 1.55rem;
    color: #333;
    padding: .55rem 0;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.structure-contact li i { color: var(--acc); width: 22px; text-align: center; }
.structure-contact a { color: #111111; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.structure-contact a:hover { border-color: #111111; }