/**
 * Styles de la page Association V2.
 *
 * EXTRAITS de « refonte_v2/20 - Maquette/Association_Membre.html ».
 *
 * Les sélecteurs du chrome sont écartés par comparaison EXACTE avec ce que
 * déclare chrome.css — et non plus par préfixe. Le filtre par préfixe employé
 * pour la page d'accueil avait emporté `.social-block-card`, propre à la page,
 * en voulant protéger `.social-links` du pied de page.
 */

img {
    display: block;
    max-width: 100%;
}

.logo-wrap-img {
    display: flex;
    align-items: center;
    padding: 5px 0;
    transition: transform 0.2s ease-in-out;
}

.logo-wrap-img:hover {
    transform: scale(1.02);
}

.logo-g {
    font-size: 26px;
    font-weight: 900;
    color: var(--gl-purple-600);
    line-height: 1;
}

.logo-arrow {
    font-size: 14px;
    color: white;
    line-height: 1;
}

.logo-text {
    color: white;
    line-height: 1.2;
}

.logo-text strong {
    font-size: 16px;
    display: block;
    letter-spacing: 1px;
}

.logo-text span {
    font-size: 13px;
    opacity: 0.9;
}

.badge-membre {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.2);
    border: 2px solid var(--gl-gold-500);
    color: white;
    padding: 14px 32px;
    border-radius: 50px;
    font-size: 17px;
    font-weight: 700;
}

.badge-membre-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.15);
    border: 2px solid var(--gl-green-600);
    color: white;
    padding: 18px 40px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 700;
}




/* LA MISE EN PAGE DU BANDEAU, ELLE, RESTE ICI.

   Le centrage et le chapeau bridé à 640px ne sont pas de la structure
   partagée : les huit autres bandeaux du site alignent leur texte à gauche
   sur toute la largeur. C'est la composition propre à une page d'accueil
   d'association — un titre, une phrase, un bouton, sur un axe.

   Elles avaient été emportées par erreur lors de la mise en commun des
   bandeaux : le titre s'était retrouvé à gauche et le chapeau collé au
   bouton. Les mesures ne portaient que sur les tailles, et ne l'ont pas vu.
   Les deux maquettes — membre et non-membre — sont d'accord là-dessus. */
.hero-asso {
    text-align: center;
}

.hero-asso p {
    max-width: 640px;
    margin: 0 auto 32px;
}

.btn-rejoindre-hero {
    display: inline-block;
    background: white;
    color: var(--gl-purple-600);
    padding: 16px 40px;
    border-radius: 50px;
    font-weight: 800;
    font-size: 18px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-rejoindre-hero:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.25);
}

.section-chiffres {
    background: var(--gl-teal-600);
    padding: 36px 0;
}

.chiffres-grid {
    display: flex;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
}

.chiffre-item {
    text-align: center;
    padding: 16px 48px;
    border-right: 1px solid rgba(255,255,255,0.25);
    color: white;
}

.chiffre-item:last-child {
    border-right: none;
}

.chiffre-num {
    font-size: 52px;
    font-weight: 900;
    line-height: 1;
    display: block;
    margin-bottom: 6px;
}

.chiffre-label {
    font-size: 15px;
    opacity: 0.85;
    font-weight: 500;
}

.section-video {
    padding: 64px 0;
    background: white;
}

.video-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

.video-text h2 {
    font-size: 30px;
    font-weight: 900;
    color: var(--gl-grey-800);
    margin-bottom: 16px;
    line-height: 1.3;
}

/* Le texte de présentation vient d'un éditeur visuel : ses paragraphes sont
   ceux que le bureau a saisis, et non un `<p>` posé par la vue. La règle vise
   donc aussi bien le bloc que ce qu'il contient — un contenu écrit d'un seul
   tenant, sans paragraphe, doit s'habiller comme les autres. */
.video-text p,
.video-text .video-prose {
    font-size: 16px;
    color: var(--gl-grey-600);
    line-height: 1.8;
    margin-bottom: 16px;
}

/* Le dernier paragraphe ne pousse pas la signature : c'est l'écart du bloc qui
   les sépare. */
.video-text .video-prose > p:last-child {
    margin-bottom: 0;
}

.video-text .signature {
    font-size: 14px;
    color: var(--gl-purple-600);
    font-weight: 600;
    font-style: italic;
}

.video-embed {
    position: relative;
    padding-bottom: 56.25%;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}

.video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.section-raisons {
    background: white;
    padding: 56px 0;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
}

.section-raisons .section-head {
    text-align: center;
    margin-bottom: 40px;
}

.section-raisons h2 {
    font-size: 32px;
    font-weight: 900;
    color: var(--gl-grey-800);
    margin-bottom: 10px;
}

.section-raisons .subtitle {
    font-size: 17px;
    color: var(--gl-grey-500);
}

.raisons-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    background: white;
}

.raison-card {
    background: white;
    padding: 24px 16px;
}

.raison-titre {
    font-size: 16px;
    font-weight: 900;
    color: var(--gl-grey-900);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.raison-num {
    font-size: 72px;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 12px;
    opacity: 1;
    display: block;
}

.raison-card:nth-child(1) .raison-num {
    color: #E8A0C8;
}

.raison-card:nth-child(2) .raison-num {
    color: #A8D8D4;
}

.raison-card:nth-child(3) .raison-num {
    color: #B8A8D8;
}

.raison-card:nth-child(4) .raison-num {
    color: #A8D4B8;
}

.raison-texte {
    font-size: 15px;
    color: var(--gl-grey-700);
    line-height: 1.75;
    font-weight: 400;
}

.section-cta {
    background: linear-gradient(135deg, var(--gl-pink-500) 0%, var(--gl-purple-600) 100%);
    padding: 64px 0;
    text-align: center;
}

.section-cta h2 {
    font-size: 32px;
    font-weight: 900;
    color: white;
    margin-bottom: 12px;
}

.section-cta p {
    font-size: 18px;
    color: rgba(255,255,255,0.88);
    margin-bottom: 32px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.btn-rejoindre-big {
    display: inline-block;
    background: white;
    color: var(--gl-purple-600);
    padding: 18px 48px;
    border-radius: 50px;
    font-weight: 900;
    font-size: 20px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.2);
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-rejoindre-big:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(0,0,0,0.3);
}

.btn-docs {
    display: inline-block;
    border: 2px solid white;
    color: white;
    padding: 18px 36px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 17px;
    transition: all 0.2s;
}

.btn-docs:hover {
    background: white;
    color: var(--gl-purple-600);
}

/* ── Les documents juridiques ───────────────────────────────────────────── */

.docs-association {
    /* Le dépliant s'ouvre SOUS le bouton sans pousser les autres : la rangée
       d'appels à l'action garderait sinon des hauteurs différentes selon qu'on
       a ouvert ou non. */
    position: relative;
    display: inline-block;
    text-align: left;
}

/* Le sommaire EST le bouton. Chrome retire le triangle natif dès qu'on change
   son `display` ; on ne le remplace pas ici, le libellé porte déjà son
   pictogramme et le panneau s'ouvre juste dessous. */
.docs-association > summary {
    cursor: pointer;
    list-style: none;
}

.docs-association > summary::-webkit-details-marker {
    display: none;
}

.docs-association > summary:focus-visible {
    outline: 3px solid white;
    outline-offset: 3px;
}

.docs-panneau {
    margin-top: 14px;
    padding: 20px 22px;
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    /* Assez large pour trois intitulés, jamais plus large que l'écran. */
    width: min(420px, calc(100vw - 48px));
}

.docs-titre {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 800;
    color: var(--gl-grey-800);
}

.docs-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.docs-liste a {
    display: flex;
    align-items: center;
    gap: 12px;
    /* 44px de cible tactile, Chapitre 6. */
    min-height: 44px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    color: var(--gl-grey-800);
    text-decoration: none;
    font-size: 15px;
}

.docs-liste a:hover,
.docs-liste a:focus-visible {
    background: var(--gl-teal-025);
    color: var(--gl-teal-700);
}

.docs-icone {
    flex: 0 0 auto;
    font-size: 18px;
}

.docs-nom {
    flex: 1 1 auto;
    font-weight: 700;
}

/* Le format et le poids sont GRIS et petits : ils informent sans concurrencer
   l'intitulé, qui reste ce qu'on cherche du regard. */
.docs-meta {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--gl-grey-450);
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .docs-association {
        display: block;
    }

    .docs-panneau {
        width: 100%;
    }
}

.section-bureau {
    background: var(--gl-teal-400);
    padding: 64px 0;
}

.section-bureau h2 {
    font-size: 30px;
    font-weight: 900;
    color: white;
    text-align: center;
    margin-bottom: 36px;
}

.bureau-carousel-wrap {
    position: relative;
    overflow: hidden;
}

.bureau-carousel {
    display: flex;
    gap: 20px;
    transition: transform 0.4s ease;
}

.bureau-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    width: calc(25% - 15px);
    text-align: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.bureau-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center top;
}

/* Le portrait manquant : plaque et silhouette viennent de
   `composants/portrait-vide.css`, partagé avec le cercle du président de
   l'accueil. Ne reste ici que la GÉOMÉTRIE, qui diffère d'un écran à l'autre —
   ce bloc occupe la place exacte de l'image, mêmes dimensions, pour que la mise
   en page ne bouge pas le jour où une vraie photo est déposée. */
.bureau-photo-vide {
    width: 100%;
    height: 200px;
}




.bureau-card-body {
    padding: 20px 16px;
}

.bureau-role {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--gl-purple-600);
    font-weight: 700;
    margin-bottom: 6px;
}

.bureau-nom {
    font-size: 16px;
    font-weight: 800;
    color: var(--gl-grey-800);
    margin-bottom: 14px;
    line-height: 1.3;
}

.btn-profil {
    display: block;
    background: var(--gl-teal-400);
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: 700;
    font-size: 14px;
    transition: background 0.2s;
}

.btn-profil:hover {
    background: var(--gl-teal-500);
}

.carousel-controls {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 28px;
}

.carousel-btn {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: white;
    border: none;
    cursor: pointer;
    font-size: 24px;
    color: var(--gl-teal-400);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 12px rgba(0,0,0,0.15);
    transition: all 0.2s;
}

.carousel-btn:hover {
    background: var(--gl-purple-600);
    color: white;
    transform: scale(1.1);
}

.footer-useful {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.footer-useful span {
    color: rgba(255,255,255,0.55);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-useful a {
    color: rgba(255,255,255,0.85);
    font-size: 13px;
}

.footer-useful a:hover {
    color: white;
    text-decoration: underline;
}

@media (max-width: 900px) {
  .raisons-grid {
      grid-template-columns: 1fr 1fr;
      gap: 24px;
  }
}

@media (max-width: 500px) {
  .raisons-grid {
      grid-template-columns: 1fr;
  }
}

@media (max-width: 1000px) {
  .bureau-card {
      width: calc(50% - 10px);
  }
}

@media (max-width: 768px) {
  .video-inner {
      grid-template-columns: 1fr;
  }

  .chiffre-item {
      padding: 16px 24px;
  }

}

@media (max-width: 600px) {
  .bureau-card {
      width: 100%;
  }

  .cta-buttons {
      flex-direction: column;
      align-items: center;
  }
}

/* ==========================================================================
   REJOIGNEZ-NOUS SUR NOS RÉSEAUX
   Extrait de « Association_Membre.html ». La maquette écrit cette section en
   classes utilitaires Tailwind avec des couleurs entre crochets ; les règles
   sont ici, avec les jetons, comme le reste de la page.
   Les BOUTONS eux-mêmes vivent dans `composants/reseaux.css` : l'accueil rend
   le même fragment, et les couleurs de marque n'ont pas à exister deux fois.
   ========================================================================== */

.section-reseaux {
    padding: 56px 0;
    background: var(--gl-grey-050, #fafafa);
    border-top: 1px solid var(--gl-grey-125);
    border-bottom: 1px solid var(--gl-grey-125);
}

.section-reseaux .section-head {
    text-align: center;
    margin-bottom: 28px;
}

.section-reseaux h2 {
    font-size: 28px;
    font-weight: 800;
    color: var(--gl-grey-800);
    margin-bottom: 8px;
}

.section-reseaux .section-head p {
    font-size: 15px;
    color: var(--gl-grey-600);
    max-width: 620px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Côte à côte sur ordinateur, l'un sous l'autre sur petit écran — c'est ce que
   fait la maquette avec `flex-col sm:flex-row`. Les boutons prennent leur
   largeur de leur contenu plutôt que de s'étirer : deux barres pleine largeur
   ressembleraient à des bandeaux, pas à des liens. */
.reseaux-boutons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

.reseaux-boutons .btn-social-action {
    padding: 15px 30px;
    font-size: 15px;
    /* La maquette arrondit complètement ces deux boutons-là, contrairement à
       ceux de l'accueil. */
    border-radius: 999px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

@media (max-width: 600px) {
    .reseaux-boutons {
        flex-direction: column;
    }

    .section-reseaux h2 {
        font-size: 22px;
    }
}

/* ==========================================================================
   CHEVRONS DU CARROUSEL — état désactivé
   Les règles de forme existent plus haut ; il leur manquait de dire ce qui se
   passe aux extrémités. Désactivés plutôt que masqués : un bouton qui
   disparaît déplace celui d'à côté sous le doigt qui visait le premier.
   ========================================================================== */

.carousel-btn[disabled] {
    opacity: 0.4;
    cursor: default;
    transform: none;
}

.carousel-btn[disabled]:hover {
    background: white;
    color: var(--gl-teal-400);
    transform: none;
}