/*
 * Association Team Cards — Feuille de styles
 * Plugin  : association-team-cards
 * Auteur  : Web-Micro — https://www.web-micro.fr
 * Version : 1.0.0
 *
 * Toutes les classes du plugin restent préfixées (atc-) sauf les
 * nouvelles classes de cartes demandées (box-equipe-scco / box-sous-equipe-scco).
 *
 * Table des matières :
 *  1. Variables CSS (design tokens)
 *  2. Grille des cartes         (.box-equipe-scco)
 *  3. Carte — lien cliquable    (.box-sous-equipe-scco)
 *  4. Conteneur interne         (.box-sous-equipe-scco__container)
 *  5. Photo                     (.box-sous-equipe-scco__img)
 *  6. Contenu texte             (.box-sous-equipe-scco__content)
 *  7. Placeholder image         (.atc-card-placeholder)
 *  8. Message aucun membre      (.atc-no-members)
 *  9. Page individuelle         (.atc-member-single / .atc-single-main)
 * 10. Bouton Retour             (.atc-back-button)
 * 11. Responsive
 */

/* ============================================================
   1. Variables CSS
   ============================================================ */
:root {
    --atc-card-bg          : #ffffff;
    --atc-card-radius      : 25px;
    --atc-card-shadow      : 0px 14px 80px rgba(34, 35, 58, 0.20);
    --atc-card-shadow-hover: 0px 20px 90px rgba(34, 35, 58, 0.28);
    --atc-photo-size       : 150px;
    --atc-photo-radius     : 25px;
    --atc-photo-shadow     : 4px 13px 30px 1px rgba(252, 56, 56, 0.20);
    --atc-name-color       : #000000;
    --atc-name-size        : 19px;
    --atc-fonction-color   : #000000;
    --atc-fonction-size    : 17px;
    --atc-accent           : #7c3aed;
    --atc-accent-light     : #ede9fe;
    --atc-btn-radius       : 50px;
    --atc-transition       : 0.3s ease;
    --atc-font             : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ============================================================
   2. Grille des cartes
   ============================================================ */
.box-equipe-scco {
    display         : flex;
    flex-wrap       : wrap;
    justify-content : center;
    gap             : 20px;
    box-sizing      : border-box;
}

/* ============================================================
   3. Carte — lien cliquable
   ============================================================ */
.box-sous-equipe-scco {
    width          : calc((100% / var(--atc-colonnes, 6)) - 20px);
    min-width      : 220px;
    display        : flex;
    flex-direction : column;
    background     : var(--atc-card-bg);
    box-shadow     : var(--atc-card-shadow);
    border-radius  : var(--atc-card-radius);
    transition     : transform var(--atc-transition),
                     box-shadow var(--atc-transition);
    margin         : 75px 10px 30px; /* espace en haut pour la photo qui déborde */
    box-sizing     : border-box;
    /* Annuler les styles de lien hérités du thème */
    text-decoration : none;
    color           : inherit;
    cursor          : pointer;
}

.box-sous-equipe-scco:hover,
.box-sous-equipe-scco:focus,
.box-sous-equipe-scco:focus-visible {
    transform       : translateY(-6px);
    box-shadow      : var(--atc-card-shadow-hover);
    text-decoration : none;
    color           : inherit;
    outline         : none;
}

.box-sous-equipe-scco:focus-visible {
    outline        : 3px solid var(--atc-accent);
    outline-offset : 4px;
}

/* ============================================================
   4. Conteneur interne
   ============================================================ */
.box-sous-equipe-scco__container {
    display         : flex;
    flex-direction  : column;
    min-height      : 270px;
    overflow        : visible;
    justify-content : flex-start;
    align-items     : center;
}

/* ============================================================
   5. Photo
   ============================================================ */
.box-sous-equipe-scco__img {
    border-radius : var(--atc-photo-radius);
    overflow      : hidden;
    width         : var(--atc-photo-size);
    height        : var(--atc-photo-size);
    box-shadow    : var(--atc-photo-shadow);
    transform     : translateY(-50px);  /* photo qui dépasse au-dessus de la carte */
    margin        : 0 auto -30px;       /* compense le translateY pour le flux */
    background    : var(--atc-card-bg);
    flex-shrink   : 0;
}

.box-sous-equipe-scco__img img {
    width         : 100%;
    height        : 100%;
    object-fit    : cover;
    display       : block;
    border-radius : 20px;
    transition    : transform var(--atc-transition);
}

.box-sous-equipe-scco:hover .box-sous-equipe-scco__img img {
    transform: scale(1.04);
}

/* ============================================================
   6. Contenu texte
   ============================================================ */
.box-sous-equipe-scco__content {
    text-align  : center;
    padding     : 20px 20px 30px;
    box-sizing  : border-box;
    flex-grow   : 1;
}

.box-sous-equipe-scco__title {
    margin      : 0 0 12px;
    font-family : var(--atc-font);
    font-size   : var(--atc-name-size);
    font-weight : 800;
    line-height : 1.2;
    color       : var(--atc-name-color);
}

.box-sous-equipe-scco__text {
    margin       : 0;
    font-family  : var(--atc-font);
    font-size    : var(--atc-fonction-size);
    font-weight  : 400;
    line-height  : 1.35;
    color        : var(--atc-fonction-color);
    white-space  : pre-line;
}

/* ============================================================
   7. Placeholder image (si aucune photo n'est définie)
   ============================================================ */
.atc-card-placeholder {
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
    width           : 100%;
    height          : 100%;
    background      : linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    gap             : 6px;
}

.atc-card-placeholder svg {
    width  : 90px;
    height : 90px;
}

.atc-card-placeholder span {
    font-family : var(--atc-font);
    font-size   : 0.65rem;
    font-weight : 600;
    color       : var(--atc-accent);
    text-align  : center;
    line-height : 1.2;
    padding     : 0 6px;
}

/* ============================================================
   8. Message « aucun membre publié »
   ============================================================ */
.atc-no-members {
    text-align  : center;
    padding     : 40px 20px;
    color       : #6b6b8a;
    font-family : var(--atc-font);
    font-size   : 1rem;
}

/* ============================================================
   9. Page individuelle du membre
   ============================================================ */
.atc-single-main {
    max-width  : 900px;
    margin     : 0 auto;
    padding    : 40px 20px 60px;
    box-sizing : border-box;
}

.atc-member-single {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    gap            : 32px;
    font-family    : var(--atc-font);
}

/* Photo individuelle */
.atc-member-photo-wrap {
    width         : clamp(160px, 30vw, 260px);
    height        : clamp(160px, 30vw, 260px);
    border-radius : 24px;
    overflow      : hidden;
    box-shadow    : 0 10px 40px rgba(0, 0, 0, 0.14);
    flex-shrink   : 0;
}

.atc-member-photo {
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    display    : block;
}

/* Placeholder page individuelle */
.atc-member-photo-placeholder-wrap {
    background      : linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    display         : flex;
    align-items     : center;
    justify-content : center;
}

.atc-member-photo-placeholder-single {
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
    gap             : 8px;
}

.atc-member-photo-placeholder-single svg {
    width  : 100px;
    height : 100px;
}

.atc-member-photo-placeholder-single span {
    font-size   : 0.8rem;
    color       : var(--atc-accent);
    font-weight : 600;
}

/* Informations du membre */
.atc-member-info {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    text-align     : center;
    gap            : 12px;
    max-width      : 620px;
    width          : 100%;
}

.atc-member-name {
    font-size   : clamp(1.5rem, 4vw, 2.2rem);
    font-weight : 800;
    color       : #1a1a2e;
    margin      : 0;
    line-height : 1.2;
}

.atc-member-fonction {
    font-size     : 1.05rem;
    font-weight   : 500;
    color         : var(--atc-accent);
    margin        : 0;
    background    : var(--atc-accent-light);
    padding       : 5px 18px;
    border-radius : 50px;
    display       : inline-block;
}

.atc-member-description {
    font-size   : 1rem;
    color       : #444;
    line-height : 1.75;
    margin-top  : 8px;
    text-align  : left;
    width       : 100%;
}

.atc-member-description p:first-child { margin-top: 0; }
.atc-member-description p:last-child  { margin-bottom: 0; }

/* ============================================================
   10. Bouton Retour
   ============================================================ */
.atc-back-button {
    display         : inline-flex;
    align-items     : center;
    gap             : 8px;
    margin-top      : 16px;
    padding         : 12px 28px;
    background      : var(--atc-accent);
    color           : #ffffff !important;
    border-radius   : var(--atc-btn-radius);
    font-size       : 0.9rem;
    font-weight     : 600;
    font-family     : var(--atc-font);
    text-decoration : none;
    box-shadow      : 0 4px 16px rgba(124, 58, 237, 0.32);
    transition      : background var(--atc-transition),
                      transform var(--atc-transition),
                      box-shadow var(--atc-transition);
    cursor          : pointer;
}

.atc-back-button:hover,
.atc-back-button:focus-visible {
    background : #6d28d9;
    transform  : translateY(-2px);
    box-shadow : 0 8px 24px rgba(124, 58, 237, 0.42);
    outline    : none;
    color      : #ffffff !important;
}

.atc-back-button:focus-visible {
    outline        : 3px solid var(--atc-accent);
    outline-offset : 4px;
}

.atc-back-button svg { flex-shrink: 0; }

/* ============================================================
   11. Responsive
   ============================================================ */

/* ── Tablette : 2 colonnes (≤ 1000 px) ── */
@media screen and (max-width: 1000px) {
    .box-sous-equipe-scco {
        width: calc(50% - 20px);
    }
}

/* ── Mobile : 1 colonne centrée (≤ 740 px) ── */
@media screen and (max-width: 740px) {
    .box-sous-equipe-scco {
        width    : calc(100% - 20px);
        max-width: 320px;
    }
}

/* ── Page individuelle en mode large ── */
@media (min-width: 640px) {
    .atc-member-single {
        flex-direction : row;
        align-items    : flex-start;
    }

    .atc-member-info {
        align-items : flex-start;
        text-align  : left;
    }
}

/* Impression */
@media print {
    .box-sous-equipe-scco {
        box-shadow   : none;
        break-inside : avoid;
    }

    .atc-back-button { display: none; }
}