/**
 * layout_as_projets — page « Projets » (3 familles : en cours / à venir / terminés)
 *
 * Palette en variables :root pour rester portable sur les autres sites du parc
 * (mêmes conventions que layout_as_faq / layout_as_simple_agenda) : valeurs
 * par défaut = charte chapelle, un autre skin n'a qu'à redéfinir les --lpr-*.
 *
 * ⚠ Spécificité : .chapelle-content h2 vaut 0-1-1 et écraserait un simple
 * .lpr-groupe-titre — toutes les règles de titre sont donc à 0-2-0
 * (.lpr-wrapper .lpr-groupe-titre), gotcha documenté dans CLAUDE.md.
 */

:root {
    --lpr-back:       #FFFFFF;
    --lpr-back-alt:   #F2EFE8;   /* calcaire */
    --lpr-text:       #1F1D17;
    --lpr-text-muted: #5C5749;
    --lpr-focus:      #4A87B8;   /* ciel Vercors */

    --lpr-en-cours-color:  #123008;
    --lpr-en-cours-border: #7AB03A;
    --lpr-en-cours-bg:     #EEF5E8;

    --lpr-a-venir-color:  #1E3A8A;
    --lpr-a-venir-border: #93C5FD;
    --lpr-a-venir-bg:     #EFF6FF;

    --lpr-termine-color:  #5C5749;
    --lpr-termine-border: #D8D4CC;
    --lpr-termine-bg:     #F2EFE8;
}

.lpr-wrapper {
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
    margin: 1rem 0;
}

.lpr-wrapper a,
.lpr-wrapper a:visited,
.lpr-wrapper a:hover,
.lpr-wrapper a:active {
    color: inherit;
    text-decoration: none;
}


/* ══ En-tête de famille ═══════════════════════════════════════════════════ */

.lpr-wrapper .lpr-groupe-titre {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.9rem;
    font-weight: 700;
    color: #FFF;
    padding: .7rem 1.6rem;
    margin: 0 0 1.4rem;
    border-radius: 3px;
}

.lpr-groupe--en_cours > .lpr-groupe-titre { background: var(--lpr-en-cours-color); }
.lpr-groupe--a_venir  > .lpr-groupe-titre { background: var(--lpr-a-venir-color); }

/* ── Groupe « Terminés » — <details> natif, replié par défaut ─────────────
   Zéro JS : ouverture, focus clavier et état annoncé viennent du navigateur —
   même parti pris que layout_as_faq. */

.lpr-groupe--termine {
    border: 1px solid var(--lpr-termine-border);
    border-radius: 4px;
    background: var(--lpr-back);
}

.lpr-wrapper .lpr-groupe-titre--details {
    display: flex;
    width: 100%;
    background: var(--lpr-termine-bg);
    color: var(--lpr-termine-color);
    cursor: pointer;
    padding: 1.2rem 4rem 1.2rem 1.6rem;
    margin: 0;
    border-radius: 4px;
    position: relative;
    list-style: none;
}
.lpr-groupe-titre--details::-webkit-details-marker { display: none; }

.lpr-groupe-titre--details:hover { background: #E9E4D8; }

.lpr-groupe-titre--details:focus-visible {
    outline: 3px solid var(--lpr-focus);
    outline-offset: -3px;
}

.lpr-groupe-titre--details::after {
    content: "";
    position: absolute;
    right: 1.6rem;
    top: 50%;
    width: .9rem;
    height: .9rem;
    margin-top: -.55rem;
    border-right: 2px solid var(--lpr-termine-color);
    border-bottom: 2px solid var(--lpr-termine-color);
    transform: rotate(45deg);
    transition: transform .2s ease;
}
.lpr-groupe--termine[open] > .lpr-groupe-titre--details::after {
    transform: rotate(-135deg);
    margin-top: -.3rem;
}
@media (prefers-reduced-motion: reduce) {
    .lpr-groupe-titre--details::after { transition: none; }
}

.lpr-groupe--termine .lpr-cards { padding: 1.6rem; }


/* ══ Grille de cartes ═══════════════════════════════════════════════════════ */

.lpr-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
@media (max-width: 900px) {
    .lpr-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .lpr-cards { grid-template-columns: 1fr; }
}


/* ══ Carte projet ═════════════════════════════════════════════════════════ */

.lpr-wrapper .lpr-card {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1.2rem 1.4rem;
    background: var(--lpr-back);
    border-left: 4px solid var(--lpr-border, #1E4D0F);
    border-radius: 0 4px 4px 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
    transition: box-shadow .15s, transform .1s;
    color: var(--lpr-text);
}
.lpr-wrapper .lpr-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    transform: translateY(-2px);
}

.lpr-card--en_cours { --lpr-border: var(--lpr-en-cours-border); }
.lpr-card--a_venir  { --lpr-border: var(--lpr-a-venir-border); }
.lpr-card--termine  { --lpr-border: var(--lpr-termine-border); }

.lpr-card-img {
    display: block;
    width: calc(100% + 2.8rem);
    height: 15rem;
    object-fit: cover;
    object-position: top;
    margin: -1.2rem -1.4rem .5rem;
    border-radius: 0 4px 0 0;
    flex-shrink: 0;
}

.lpr-card-title {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--lpr-text);
}

.lpr-card-dates,
.lpr-card-budget {
    font-size: 1.3rem;
    color: var(--lpr-text-muted);
    display: flex;
    align-items: center;
    gap: .5rem;
}
.lpr-card--en_cours .lpr-card-dates i { color: var(--lpr-en-cours-color); }
.lpr-card--a_venir  .lpr-card-dates i { color: var(--lpr-a-venir-color); }
.lpr-card--termine  .lpr-card-dates i { color: var(--lpr-termine-color); }

.lpr-card-intro {
    font-size: 1.3rem;
    color: var(--lpr-text-muted);
    line-height: 1.45;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ══ Visibilité — page non publiée ═══════════════════════════════════════════
   Carte d'un projet privé/réservé : seuls associés, éditeurs assignés et
   propriétaires arrivent jusqu'ici. Pastille .chapelle-flag stylée dans
   chapelle.scss (Skin::visibility_flag). Même hachurage que layout_as_evenements. */

.lpr-card-flag {
    display: flex;
    margin-bottom: .2rem;
}

.lpr-wrapper .lpr-card-unpublished {
    background: repeating-linear-gradient(
        135deg,
        #FFFFFF, #FFFFFF 8px,
        #FAF7F2 8px, #FAF7F2 16px
    );
    border-top: 1px dashed rgba(139, 58, 16, .35);
    border-right: 1px dashed rgba(139, 58, 16, .35);
    border-bottom: 1px dashed rgba(139, 58, 16, .35);
}