/* Trombinoscope « Vos parents élus » — d'après le design Claude « Trombinoscope APE » (page du site). Gabarits : php/team.php (aperçu) et contenu éditable d'une page Bludit (bloc .ape-team). */
.ape-team-body { display: flex; flex-direction: column; gap: var(--ape-space-12); }
.ape-team :is(h1, h2, h3, p) { margin: 0; }

/* Tons par école : fond du galet, repère et trait sous le galet. */
.ape-team-tone-peach { --ape-team-soft: var(--ape-peach-soft); --ape-team-mark: var(--ape-peach); --ape-team-line: var(--ape-peach); }
.ape-team-tone-sky { --ape-team-soft: var(--ape-sky); --ape-team-mark: var(--ape-teal); --ape-team-line: color-mix(in srgb, var(--ape-teal) 50%, var(--ape-surface)); }

/* En-tête : reprend .ape-page-header (carte blanche et formes décoratives). */
.ape-team-hero { display: flex; flex-direction: column; gap: var(--ape-space-4); padding: var(--ape-space-12) 40px; }
.ape-team-hero > * { max-width: 640px; }
.ape-team-hero .ape-eyebrow { margin: 0; }
.ape-team-hero h1 span { color: var(--ape-teal); }
.ape-team-lead { font-size: 1.1875rem; font-weight: 550; line-height: 1.7; }
.ape-team-jump { display: flex; flex-wrap: wrap; gap: var(--ape-space-2); }
.ape-team-jump a { display: inline-flex; align-items: center; min-height: var(--ape-action-min-size); padding: 0 var(--ape-space-4); border: 1px solid var(--ape-line-strong); border-radius: var(--ape-radius-pill); background: var(--ape-team-soft, var(--ape-surface)); color: var(--ape-ink); font-size: var(--ape-type-sm); font-weight: 700; text-decoration: none; }
.ape-team-jump a[class] { border-color: transparent; }
.ape-team-jump a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Titre d'école : repère incliné, H2, décompte. */
.ape-team-group { display: flex; flex-direction: column; gap: var(--ape-space-5); scroll-margin-top: var(--ape-space-6); }
.ape-team-heading { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ape-space-3); }
.ape-team-mark { display: block; flex: 0 0 auto; width: 32px; height: 13px; border-radius: var(--ape-radius-pill); background: var(--ape-team-mark); transform: rotate(-14deg); }
.ape-team-heading h2 { font-size: clamp(1.75rem, 4vw, 2.4rem); line-height: 1.15; letter-spacing: -.04em; }
.ape-team-count { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--ape-space-3); border-radius: var(--ape-radius-pill); background: var(--ape-team-soft); font-size: var(--ape-type-sm); font-weight: 700; }

/* Grille de personnes. --ape-team-frame fixe la taille du galet ; toutes les mesures en découlent. */
.ape-team-grid { --ape-team-frame: 172px; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--ape-team-frame), 1fr)); gap: var(--ape-space-6) var(--ape-space-4); margin: 0; padding: 0; list-style: none; }
.ape-team-grid--compact { --ape-team-frame: 132px; justify-content: center; gap: var(--ape-space-5) var(--ape-space-3); }
.ape-team-person { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; text-align: center; }
.ape-team-grid--compact .ape-team-person { gap: var(--ape-space-2); }

.ape-team-portrait { position: relative; display: block; width: var(--ape-team-frame); height: calc(var(--ape-team-frame) * 1.012); }
.ape-team-blob, .ape-team-stroke { position: absolute; left: 50%; top: calc(var(--ape-team-frame) * .267); width: calc(var(--ape-team-frame) * .884); height: calc(var(--ape-team-frame) * .721); transform: translateX(-50%); border-radius: 50% 50% 47% 53% / 55% 52% 48% 45%; }
.ape-team-person:nth-child(3n + 2) :is(.ape-team-blob, .ape-team-stroke) { border-radius: 53% 47% 50% 50% / 50% 55% 45% 50%; }
.ape-team-person:nth-child(3n) :is(.ape-team-blob, .ape-team-stroke) { border-radius: 47% 53% 53% 47% / 53% 50% 50% 47%; }
.ape-team-blob { display: grid; place-items: center; background: var(--ape-team-soft); color: var(--ape-text-accent); font-size: calc(var(--ape-team-frame) * .22); font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.ape-team-stroke { border-bottom: 2.5px solid var(--ape-team-line); pointer-events: none; }
.ape-team-grid--compact .ape-team-stroke { border-bottom-width: 2px; }

/* Portrait détouré (fond transparent) : la tête dépasse du galet, le buste est coupé à sa base. */
.ape-team-photo { position: absolute; left: 50%; top: 0; width: calc(var(--ape-team-frame) * .884); height: calc(var(--ape-team-frame) * .988); transform: translateX(-50%); overflow: hidden; border-radius: 50% 50% 50% 50% / 45% 45% 33% 36%; }
.ape-team-photo img { position: absolute; inset: auto 0 0; display: block; width: 100%; height: 96%; max-width: none; object-fit: cover; object-position: center top; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); }

.ape-team-name { display: grid; gap: 1px; max-width: 100%; overflow-wrap: anywhere; }
.ape-team-name strong { font-size: var(--ape-type-lg); font-weight: 700; line-height: 1.25; }
.ape-team-grid--compact .ape-team-name strong { font-size: var(--ape-type-body); }
.ape-team-lastname { color: var(--ape-muted); font-size: var(--ape-type-xs); font-weight: 800; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; }

/* Suppléants : bandeau menthe, une carte blanche par école. */
.ape-team-substitutes { display: flex; flex-direction: column; gap: var(--ape-space-5); padding: var(--ape-space-8); border-radius: var(--ape-radius-card); background: var(--ape-sky); scroll-margin-top: var(--ape-space-6); }
.ape-team-substitutes-intro { display: grid; gap: 6px; }
.ape-team-substitutes-intro h2 { font-size: clamp(1.5rem, 3vw, 1.875rem); line-height: 1.25; letter-spacing: -.03em; }
.ape-team-substitutes-intro p { color: var(--ape-muted); }
.ape-team-substitutes-groups { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--ape-space-6); }
.ape-team-substitutes-group { display: flex; flex: 1 1 300px; flex-direction: column; gap: var(--ape-space-4); min-width: 0; padding: var(--ape-space-6); border-radius: var(--ape-radius-medium); background: var(--ape-surface); }
.ape-team-substitutes-group h3 { display: flex; align-items: center; gap: 10px; font-size: var(--ape-type-2xl); line-height: 1.25; }
.ape-team-substitutes-group .ape-team-mark { width: 26px; height: 12px; transform: none; }

/* Contact : .ape-help-panel du thème, avec un surtitre. */
.ape-team .ape-team-contact { margin-top: 0; }
.ape-team-contact .ape-eyebrow { margin-bottom: var(--ape-space-2); }

/* Bandeau des aperçus uniquement (trombi-lab.php, aperçu statique). */
.ape-team-draft { margin: var(--ape-space-4) auto 0; width: min(var(--ape-content-width), calc(100% - var(--ape-shell-gutter))); padding: var(--ape-space-3) var(--ape-space-4); border: 1px dashed var(--ape-line-strong); border-radius: var(--ape-radius-small); background: var(--ape-surface); color: var(--ape-ink); font-size: var(--ape-type-sm); font-weight: 600; }


/* Version éditable dans Bludit : <div class="ape-team"> dans le contenu d'une page (php/page.php).
   L'éditeur peut supprimer les balises vides : galet, trait et repères sont ici dessinés en CSS.
   Les sélecteurs commencent par .ape-article .ape-page-content .ape-team pour primer sur les règles d'article de style.css. */
.ape-article .ape-page-content .ape-team { display: flex; flex-direction: column; gap: var(--ape-space-12); max-width: none; line-height: 1.5; }
.ape-article .ape-page-content .ape-team :is(h2, h3, p) { margin: 0; }
.ape-article .ape-page-content .ape-team h2 { font-size: clamp(1.75rem, 4vw, 2.4rem); line-height: 1.15; letter-spacing: -.04em; }
.ape-article .ape-page-content .ape-team .ape-team-substitutes-intro h2 { font-size: clamp(1.5rem, 3vw, 1.875rem); line-height: 1.25; letter-spacing: -.03em; }
.ape-article .ape-page-content .ape-team h3 { font-size: var(--ape-type-2xl); line-height: 1.25; }
.ape-article .ape-page-content .ape-team .ape-team-heading::before { content: ''; display: block; flex: 0 0 auto; width: 32px; height: 13px; border-radius: var(--ape-radius-pill); background: var(--ape-team-mark); transform: rotate(-14deg); }
.ape-article .ape-page-content .ape-team .ape-team-substitutes-group h3::before { content: ''; display: block; flex: 0 0 auto; width: 26px; height: 12px; border-radius: var(--ape-radius-pill); background: var(--ape-team-mark); }
.ape-article .ape-page-content .ape-team ul.ape-team-grid { max-width: none; margin: 0; padding: 0; list-style: none; }
.ape-article .ape-page-content .ape-team li.ape-team-person { margin: 0; }
.ape-article .ape-page-content .ape-team .ape-team-portrait::before,
.ape-article .ape-page-content .ape-team .ape-team-portrait::after { content: ''; position: absolute; left: 50%; top: calc(var(--ape-team-frame) * .267); width: calc(var(--ape-team-frame) * .884); height: calc(var(--ape-team-frame) * .721); transform: translateX(-50%); border-radius: 50% 50% 47% 53% / 55% 52% 48% 45%; }
.ape-article .ape-page-content .ape-team .ape-team-person:nth-child(3n + 2) .ape-team-portrait::before,
.ape-article .ape-page-content .ape-team .ape-team-person:nth-child(3n + 2) .ape-team-portrait::after { border-radius: 53% 47% 50% 50% / 50% 55% 45% 50%; }
.ape-article .ape-page-content .ape-team .ape-team-person:nth-child(3n) .ape-team-portrait::before,
.ape-article .ape-page-content .ape-team .ape-team-person:nth-child(3n) .ape-team-portrait::after { border-radius: 47% 53% 53% 47% / 53% 50% 50% 47%; }
.ape-article .ape-page-content .ape-team .ape-team-portrait::before { background: var(--ape-team-soft); }
.ape-article .ape-page-content .ape-team .ape-team-portrait::after { z-index: 2; border-bottom: 2.5px solid var(--ape-team-line); pointer-events: none; }
.ape-article .ape-page-content .ape-team .ape-team-grid--compact .ape-team-portrait::after { border-bottom-width: 2px; }
.ape-article .ape-page-content .ape-team .ape-team-blob { z-index: 1; background: none; }
.ape-article .ape-page-content .ape-team .ape-team-portrait > img { position: absolute; z-index: 1; left: 50%; bottom: calc(var(--ape-team-frame) * .024); display: block; width: calc(var(--ape-team-frame) * .884); max-width: none; height: calc(var(--ape-team-frame) * .948) !important; margin: 0; transform: translateX(-50%); object-fit: cover; object-position: center top; border-radius: 50% 50% 50% 50% / 45% 45% 33% 36%; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); }
/* Animations du bloc éditable : entrée en cascade au chargement, galet vivant au survol. Désactivées si l'utilisateur réduit les animations. */
@media (prefers-reduced-motion: no-preference) {
    .ape-article .ape-page-content .ape-team .ape-team-person { animation: ape-team-rise 620ms cubic-bezier(.2,.8,.2,1) backwards; animation-delay: calc(var(--ape-team-i, 0) * 70ms + 80ms); }
    .ape-article .ape-page-content .ape-team .ape-team-portrait::before { animation: ape-team-pop 700ms cubic-bezier(.34,1.56,.64,1) backwards; animation-delay: calc(var(--ape-team-i, 0) * 70ms + 140ms); }
    .ape-article .ape-page-content .ape-team .ape-team-person:nth-child(2) { --ape-team-i: 1; }
    .ape-article .ape-page-content .ape-team .ape-team-person:nth-child(3) { --ape-team-i: 2; }
    .ape-article .ape-page-content .ape-team .ape-team-person:nth-child(4) { --ape-team-i: 3; }
    .ape-article .ape-page-content .ape-team .ape-team-person:nth-child(5) { --ape-team-i: 4; }
    .ape-article .ape-page-content .ape-team .ape-team-person:nth-child(n + 6) { --ape-team-i: 5; }
    .ape-article .ape-page-content .ape-team .ape-team-heading::before { animation: ape-team-mark 680ms cubic-bezier(.34,1.56,.64,1) backwards 60ms; }
    .ape-article .ape-page-content .ape-team .ape-team-portrait > :is(img, .ape-team-blob),
    .ape-article .ape-page-content .ape-team .ape-team-portrait::before,
    .ape-article .ape-page-content .ape-team .ape-team-portrait::after { transition: transform 360ms cubic-bezier(.34,1.56,.64,1), border-radius 520ms ease, border-color 200ms ease; }
    .ape-article .ape-page-content .ape-team .ape-team-name strong { transition: color 200ms ease; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
    .ape-article .ape-page-content .ape-team .ape-team-person:hover .ape-team-portrait > :is(img, .ape-team-blob) { transform: translateX(-50%) translateY(-6px) scale(1.03); }
    .ape-article .ape-page-content .ape-team .ape-team-person:hover .ape-team-portrait::before { transform: translateX(-50%) rotate(-4deg) scale(1.05); border-radius: 46% 54% 42% 58% / 58% 46% 54% 42%; }
    .ape-article .ape-page-content .ape-team .ape-team-person:hover .ape-team-portrait::after { transform: translateX(-50%) rotate(-4deg) scale(1.05); border-radius: 46% 54% 42% 58% / 58% 46% 54% 42%; border-bottom-color: var(--ape-team-mark); }
    .ape-article .ape-page-content .ape-team .ape-team-person:hover .ape-team-name strong { color: var(--ape-teal-dark); }
}
@keyframes ape-team-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes ape-team-pop { from { opacity: 0; transform: translateX(-50%) scale(.6) rotate(-10deg); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes ape-team-mark { from { opacity: 0; transform: rotate(-14deg) scaleX(0); } to { opacity: 1; transform: rotate(-14deg); } }

@media (max-width: 720px) {
    .ape-article .ape-page-content .ape-team { gap: var(--ape-space-8); }
}

@media (max-width: 720px) {
    .ape-team-body { gap: var(--ape-space-8); }
    .ape-team-hero { padding: var(--ape-space-6); }
    .ape-team-lead { font-size: var(--ape-type-xl); }
    .ape-team-substitutes { padding: var(--ape-space-5); }
    .ape-team-substitutes-group { flex-basis: 100%; padding: var(--ape-space-5) var(--ape-space-4); }
}
@media (max-width: 480px) {
    .ape-team-grid { --ape-team-frame: 128px; gap: var(--ape-space-5) var(--ape-space-3); }
    .ape-team-grid--compact { --ape-team-frame: 104px; }
    .ape-team-substitutes { padding: var(--ape-space-5) var(--ape-space-3); }
    .ape-team-substitutes-intro { padding-inline: var(--ape-space-2); }
    .ape-team-substitutes-group { padding: var(--ape-space-4) var(--ape-space-3); }
}

/* Page « L'équipe » (php/page.php ajoute .ape-article-team) : texte d'intro à largeur de lecture, accès rapides et rappel des élections. */
.ape-article.ape-article-team .ape-page-description { max-width: 62ch; }
.ape-article .ape-page-content .ape-team .ape-team-jump { display: flex; flex-wrap: wrap; gap: var(--ape-space-2); margin: 0; padding: 0; }
.ape-article .ape-page-content .ape-team .ape-team-jump a { text-decoration: none; }
.ape-article .ape-page-content .ape-team .ape-team-jump a:hover { text-decoration: underline; }
.ape-article .ape-page-content .ape-team .ape-team-note { color: var(--ape-muted); font-size: var(--ape-type-sm); }
.ape-article .ape-page-content .ape-team .ape-team-intro { display: flex; flex-direction: column; gap: var(--ape-space-3); }

/* Rappel des élections en tête de page : pastille avec icône, texte et lien « Voir les résultats ». */
.ape-article .ape-page-content .ape-team .ape-team-note { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; width: fit-content; max-width: 100%; padding: 6px 6px 6px 14px; border: 1px solid var(--ape-line); border-radius: var(--ape-radius-pill); background: var(--ape-surface); color: var(--ape-ink); font-size: var(--ape-type-sm); font-weight: 650; line-height: 1.3; }
.ape-team-note-icon { display: grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; color: var(--ape-teal-dark); }
.ape-team-note-icon svg { width: 22px; height: 22px; }
.ape-article .ape-page-content .ape-team .ape-team-note-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--ape-radius-pill); background: var(--ape-sky); color: var(--ape-teal-dark); font-weight: 800; text-decoration: none; transition: background-color .2s ease; }
.ape-article .ape-page-content .ape-team .ape-team-note-link:hover, .ape-article .ape-page-content .ape-team .ape-team-note-link:focus-visible { background: var(--ape-teal); color: var(--ape-on-dark); }
.ape-team-note-link svg { width: 16px; height: 16px; flex: 0 0 16px; transition: transform .2s ease; }
.ape-team-note-link:hover svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .ape-article .ape-page-content .ape-team .ape-team-note-link, .ape-team-note-link svg { transition: none; } .ape-team-note-link:hover svg { transform: none; } }