/**
 * Evieong — custom.css
 * Styles complémentaires (ne pas modifier style-DpMd-CB7.css)
 */

/* ══════════════════════════════════════════════════════════════
   Section Activités
   ══════════════════════════════════════════════════════════════ */

/* Sélecteur d'années */
@keyframes actFadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.act-year-panel { display:none; animation:actFadeIn .3s ease; }
.act-year-panel.active { display:block; }

/* Carte horizontale */
.act-hcards-grid { display:grid; grid-template-columns:1fr 1fr; gap:2px; background:#e9ecef; }
.act-hcard { display:grid; grid-template-columns:172px 1fr; overflow:hidden; background:white; cursor:pointer; transition:box-shadow .25s; }
.act-hcard:hover { box-shadow:0 4px 22px rgba(0,0,0,.10); z-index:1; }
.act-hcard-img { transition:transform .55s ease; }
.act-hcard:hover .act-hcard-img { transform:scale(1.06); }

/* Drawer */
.act-overlay { opacity:0; pointer-events:none; transition:opacity .35s ease; backdrop-filter:blur(2px); }
.act-overlay.open { opacity:1; pointer-events:all; }
.act-drawer { transform:translateX(100%); transition:transform .42s cubic-bezier(.77,0,.18,1); }
.act-drawer.open { transform:translateX(0); }
.act-gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.act-gallery-grid img { width:100%; aspect-ratio:1; object-fit:cover; display:block; cursor:pointer; transition:opacity .2s; }
.act-gallery-grid img:hover { opacity:.82; }

@media(max-width:768px){ .act-hcards-grid { grid-template-columns:1fr; } }
@media(max-width:480px){ .act-hcard { grid-template-columns:1fr; grid-template-rows:160px auto; } }

/* ══════════════════════════════════════════════════════════════
   Breadcrumbs — pages internes (single, archive, contact, etc.)
   ══════════════════════════════════════════════════════════════ */

.breadcrumb-bar {
    background: #fff;
    border-bottom: 1px solid #e8f0e2;
}

.breadcrumb-inner {
    max-width: 1360px;
    margin: 0 auto;
    padding: .55rem 1.5rem;
    display: flex;
    align-items: center;
    gap: .25rem;
    flex-wrap: wrap;
    font-size: .7rem;
    letter-spacing: .02em;
}

/* Lien Accueil avec icône maison */
.breadcrumb-home {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--color-gris, #6b7280);
    text-decoration: none;
    font-weight: 500;
    padding: .22rem .55rem;
    border-radius: 3px;
    transition: color .2s, background .2s;
}
.breadcrumb-home:hover {
    color: var(--color-vert, #69a641);
    background: var(--color-vert-pale, #f0f7eb);
}
.breadcrumb-home i { font-size: .65rem; }

/* Séparateur > */
.breadcrumb-sep {
    color: #c8d8c0;
    font-size: .5rem;
    padding: 0 .15rem;
    user-select: none;
}

/* Lien catégorie */
.breadcrumb-cat {
    color: var(--color-gris, #6b7280);
    text-decoration: none;
    font-weight: 500;
    padding: .22rem .55rem;
    border-radius: 3px;
    transition: color .2s, background .2s;
}
.breadcrumb-cat:hover {
    color: var(--color-vert, #69a641);
    background: var(--color-vert-pale, #f0f7eb);
}

/* Titre de l'article (élément actif) */
.breadcrumb-current {
    color: var(--color-encre, #1a2e1a);
    font-weight: 600;
    padding: .22rem .55rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 42ch;
}

/* ══════════════════════════════════════════════════════════════
   prose-evieong — styles du corps d'article WordPress
   (the_content() génère du HTML brut sans classes Tailwind)
   ══════════════════════════════════════════════════════════════ */

.prose-evieong { color: #2d3748; font-size: .9rem; line-height: 1.85; }

/* Paragraphes */
.prose-evieong p { margin-bottom: 1.4rem; }
.prose-evieong p:last-child { margin-bottom: 0; }

/* Titres */
.prose-evieong h1,
.prose-evieong h2,
.prose-evieong h3,
.prose-evieong h4,
.prose-evieong h5,
.prose-evieong h6 {
    font-family: 'DM Serif Display', serif;
    color: #1a2e1a;
    line-height: 1.25;
}
.prose-evieong h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 2.4rem 0 1rem; }
.prose-evieong h2 { font-size: 1.5rem;  margin: 2.2rem 0 1rem; }
.prose-evieong h3 { font-size: 1.15rem; margin: 1.8rem 0 .8rem; }
.prose-evieong h4 { font-size: 1rem;    margin: 1.4rem 0 .6rem; }

/* Liens */
.prose-evieong a {
    color: #69a641;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .2s;
}
.prose-evieong a:hover { color: #4d7a2f; }

/* Listes */
.prose-evieong ul,
.prose-evieong ol { padding-left: 1.4rem; margin-bottom: 1.4rem; }
.prose-evieong ul { list-style-type: disc; }
.prose-evieong ol { list-style-type: decimal; }
.prose-evieong li { margin-bottom: .45rem; }
.prose-evieong ul li::marker,
.prose-evieong ol li::marker { color: #69a641; }

/* Blockquote */
.prose-evieong blockquote {
    border-left: 3px solid #69a641;
    padding: .8rem 1.2rem;
    margin: 1.8rem 0;
    background: #f0f7eb;
    font-style: italic;
}
.prose-evieong blockquote p { margin-bottom: .4rem; color: #1a2e1a; }
.prose-evieong blockquote cite {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #3d6b24;
    font-style: normal;
}

/* Images */
.prose-evieong img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.8rem 0;
}
.prose-evieong figure { margin: 1.8rem 0; }
.prose-evieong figcaption {
    font-size: .7rem;
    color: #6b7280;
    margin-top: .5rem;
    font-style: italic;
    padding-left: .6rem;
    border-left: 2px solid #e2e8e0;
}

/* Texte mis en forme */
.prose-evieong strong { font-weight: 700; color: #1a2e1a; }
.prose-evieong em     { font-style: italic; }

/* Code */
.prose-evieong code {
    font-family: monospace;
    font-size: .82em;
    background: #f0f4ee;
    padding: .15em .4em;
    border-radius: 3px;
    color: #3d6b24;
}
.prose-evieong pre {
    background: #1a2e1a;
    color: #d4edbc;
    padding: 1.2rem 1.4rem;
    overflow-x: auto;
    font-size: .8rem;
    line-height: 1.65;
    margin: 1.8rem 0;
}
.prose-evieong pre code { background: none; padding: 0; color: inherit; }

/* Séparateur */
.prose-evieong hr {
    border: none;
    border-top: 1px solid #e8f0e2;
    margin: 2rem 0;
}

/* Tableaux */
.prose-evieong table { width: 100%; border-collapse: collapse; margin: 1.8rem 0; font-size: .82rem; }
.prose-evieong th { background: #f0f7eb; color: #1a2e1a; font-weight: 700; text-align: left; padding: .6rem .9rem; border: 1px solid #e8f0e2; }
.prose-evieong td { padding: .55rem .9rem; border: 1px solid #e8f0e2; }
.prose-evieong tr:nth-child(even) td { background: #fafcf8; }

/* ══════════════════════════════════════════════════════════════
   Pages internes — décalage sous navbar fixe
   ══════════════════════════════════════════════════════════════ */

/* Pousse tout le contenu sous la navbar fixe sur les pages internes */
body.inner-page {
    padding-top: 4rem;
}
/* WordPress ajoute html { margin-top: 32px/46px } pour l'admin bar,
   ce qui décale déjà tout le document — pas besoin d'ajouter 32px ici. */
body.admin-bar.inner-page {
    padding-top: 4rem;
}

/* ══════════════════════════════════════════════════════════════
   Pages internes — navbar fixée (scrolled) par défaut
   ══════════════════════════════════════════════════════════════ */

body.inner-page .navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}
body.inner-page .navbar .nav-bar {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    box-shadow: 0 2px 24px rgba(0,0,0,.09);
}

/* Décale la navbar sous l'admin bar sur les pages internes */
body.admin-bar.inner-page .navbar {
    top: 32px;
}
@media screen and (max-width: 782px) {
    body.admin-bar.inner-page .navbar {
        top: 46px;
    }
}

/* ══════════════════════════════════════════════════════════════
   Section Témoignages — responsivité carousel
   ══════════════════════════════════════════════════════════════ */

/* Desktop : 3 cartes visibles (gap total = 2×20px = 40px) */
.tcard {
    width: calc((100% - 40px) / 3);
    flex-shrink: 0;
}

/* Tablette ≤1024px : 2 cartes visibles (gap = 1×20px = 20px) */
@media (max-width: 1024px) {
    .tcard {
        width: calc((100% - 20px) / 2);
    }
}

/* Mobile ≤640px : 1 carte pleine largeur */
@media (max-width: 640px) {
    .tcard {
        width: 100%;
    }

    /* En-tête de section : empiler titre et boutons nav */
    #temoignages .flex.items-end.justify-between {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    /* Boutons prev/next plus grands pour le tactile */
    #temoPrev,
    #temoNext {
        width: 2.75rem;
        height: 2.75rem;
    }

    /* Image de carte moins haute sur mobile */
    .tcard .tc-img {
        height: 280px;
    }
}