/*
 * ============================================================
 *  PERSONNALISATION DU SITE alienne-site
 * ============================================================
 */

/* Palette : sections alternent blanc/crème (défaut) ↔ vert (couleur des
   boutons du hero, c.-à-d. le `--highlight` du thème). Remplace le rouge
   `#b80135` qui était le défaut du thème pour la section "dark". */
:root {
    --section-dark-bg-color: #86c440;  /* vert — était #b80135 (rouge) */
    /* Texte des sections "dark" : on force le vert foncé pour bonne lisibilité sur le vert clair,
       à la place du cream qui n'a pas assez de contraste. */
    --section-dark-text-color: #37501a;
    /* Couleur des boutons et liens accentués — même vert foncé pour cohérence */
    --highlight-contrast: #37501a;
}

/* Logo d'en-tête plus grand que le défaut du thème (100px / 80px mobile).
   L'image source est 1920×1080 → largement assez pour monter plus haut sans flou. */
#blog-logo {
    max-height: 320px;
}
@media (max-width: 768px) {
    #blog-logo {
        max-height: 200px;
    }
}


/*
 * ============================================================
 *  Shortcode "groupe" — blocs photo + texte alternés
 *  (mêmes règles que pissieu-site, utilisé ici pour les membres
 *   de la team dans `content/homepage/team.md`).
 * ============================================================
 */

.groupe-block {
    margin: 4rem 0;
}
.groupe-block + .groupe-block {
    margin-top: 5rem;
}

.groupe-titre {
    margin: 0 0 1.5rem;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.2;
}

.groupe-genre {
    font-style: italic;
    font-weight: 400;
    opacity: 0.75;
}

.groupe-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: center;
}

.groupe-photo img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
}

.groupe-texte > :first-child { margin-top: 0; }
.groupe-texte > :last-child  { margin-bottom: 0; }

/* Alternance : un bloc sur deux a la photo à droite */
.groupe-block:nth-of-type(even) .groupe-row {
    direction: rtl;
}
.groupe-block:nth-of-type(even) .groupe-row > * {
    direction: ltr;
}

/* Sur mobile : empilement vertical, toujours photo puis texte */
@media (max-width: 768px) {
    .groupe-row,
    .groupe-block:nth-of-type(even) .groupe-row {
        grid-template-columns: 1fr;
        direction: ltr;
    }
}


/*
 * ============================================================
 *  Image du QR Twint et photo des bénévoles — centrées, taille contenue
 * ============================================================
 */
/* Photo de groupe des bénévoles : plein cadre, hauteur plafonnée */
[id="les-bénévoles"] .post-content img {
    display: block;
    max-width: 100%;
    max-height: 60vh;
    width: auto;
    height: auto;
    margin: 1.5rem auto;
    border-radius: 4px;
}

/* Bannière Twint : 2.2:1 landscape, ratio cropé. Syntaxe explicite width+max-width
   (iOS Safari bizarre avec max-width: min()). aspect-ratio forcé pour robustesse. */
[id="nous-rejoindre"] .post-content img {
    display: block;
    width: 100%;
    max-width: 550px;
    height: auto;
    aspect-ratio: 1128 / 512;
    object-fit: contain;
    margin: 1.5rem auto;
    border-radius: 4px;
}