/**
 * Button Deco layout – cartes en grille (titre, rôle, photo)
 * Structure HTML générée :
 *   <ul class="button_deco grid-4-small-2">
 *     <li class="button [center buttonN]">
 *       <a class="card-link"><span class="button-title">Nom</span></a>
 *       <p class="button-role">Rôle</p>
 *       <figure class="elu-photo"><img>…</figure>
 *     </li>
 *   </ul>
 */

/* Grille responsive */
ul.button_deco.grid-4-small-2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin: 0 0 15px;
    padding: 0;
    list-style: none;
}

/* La carte = le <li> */
ul.button_deco.grid-4-small-2 > li {
    position: relative;            /* ancrage du lien étiré */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    min-height: 120px;
    padding: 15px 10px;
    background-color: #e9f7f7;
    border: 1px solid #01b3a7;
    border-radius: 8px;
    text-align: center;
    transition: background 0.2s;
}
ul.button_deco.grid-4-small-2 > li:hover {
    background-color: #d0ecec;
}

/* Neutralisation des styles globaux de .button (skin / KNACSS) :
   sans ça, un white-space:nowrap hérité fait déborder les titres longs
   hors de leur colonne et provoque des chevauchements. */
ul.button_deco.grid-4-small-2 > li,
ul.button_deco.grid-4-small-2 .card-link,
ul.button_deco.grid-4-small-2 .button-title {
    white-space: normal;
    overflow-wrap: break-word;
    text-transform: none;
    background-image: none;
    box-shadow: none;
    font-family: inherit;
}

/* Lien étiré : toute la carte cliquable, sans imbriquer d'autres liens */
ul.button_deco.grid-4-small-2 .card-link {
    text-decoration: none;
    color: #01b3a7;
}
ul.button_deco.grid-4-small-2 .card-link::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* Titre */
ul.button_deco.grid-4-small-2 .button-title {
    display: block;
    font-size: 1.3em;
    font-weight: bold;
    line-height: 1.3;
}

/* Rôle (introduction) */
ul.button_deco.grid-4-small-2 .button-role {
    margin: 6px 0 0;
    font-size: 0.85em;
    line-height: 1.4;
    color: #555;
}

/* Photo (figure issue du code [image=N], renommée .elu-photo en PHP) */
ul.button_deco.grid-4-small-2 .elu-photo {
    display: block;
    margin: 8px auto 0;
    padding: 0;
    text-align: center;
    border: 0;
    box-shadow: none;
}
/* vignette ronde recadrée ; !important pour battre d'éventuelles règles yacss */
ul.button_deco.grid-4-small-2 .elu-photo img {
    display: block !important;
    width: 130px !important;
    height: 130px !important;
    max-width: 130px !important;
    margin: 0 auto !important;
    object-fit: cover;
    border-radius: 50% !important;
}

/* Mode éditeur : icône « Modifier cette image » au-dessus du lien étiré, taille normale */
ul.button_deco.grid-4-small-2 .elu-photo .y-image-edit {
    position: relative;
    z-index: 2;
}
ul.button_deco.grid-4-small-2 .elu-photo .y-image-edit img {
    width: 16px !important;
    height: 16px !important;
    max-width: 16px !important;
    margin: 0;
    border-radius: 0 !important;
    object-fit: fill;
}

/* Cartes mises en avant (show_max_N) */
ul.button_deco.grid-4-small-2 .button1 { background-color: #bbeedb; }
ul.button_deco.grid-4-small-2 .button2 { background-color: #bee4e7; }
ul.button_deco.grid-4-small-2 .button3 { background-color: #b5d9f3; }
ul.button_deco.grid-4-small-2 .button4 { background-color: #6dabd2; }
ul.button_deco.grid-4-small-2 .button4 .button-title,
ul.button_deco.grid-4-small-2 .button4 .card-link { color: #ffffff; }

/* Responsive : tablette -> 2 colonnes, mobile -> 1 colonne */
@media (max-width: 768px) {
    ul.button_deco.grid-4-small-2 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    ul.button_deco.grid-4-small-2 { grid-template-columns: 1fr; }
}