/* ==========================================================================
   Liste des Projets — même identité visuelle que les Événements
   (tris_events.scss), mais en grille de 3 cards par rangée.

   Fichier CSS autonome (pas passé par le pipeline SCSS/Vite du thème),
   enqueue directement, voir inc/custom_enqueue.php.
   ========================================================================== */

/* Wrapper ------------------------------------------------------------- */
.prj-wrapper {
    max-width: 1310px;
    margin: 40px auto;
    padding: 0 20px;
}

.prj-wrapper .prj-subtitle-page {
    font-size: clamp(24px, 4vw, 33px);
    color: #c66456;
    font-family: 'Allura', 'Arial', sans-serif;
    text-align: center;
}

.prj-wrapper h1 {
    text-align: center;
    color: var(--enfold-main-color-color) !important;
}

.prj-title-page {
    font-size: 2rem;
    color: #12294a;
    margin-bottom: 30px;
    font-weight: 700;
}

/* Grille ---------------------------------------------------------------- */
.prj-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

@media (max-width: 992px) {
    .prj-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .prj-grid {
        grid-template-columns: 1fr;
    }
}

/* Card ------------------------------------------------------------------ */
.prj-card {
    position: relative; /* nécessaire pour l'overlay cliquable */
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    height: 100%;
}

/* Lien overlay : rend toute la card cliquable vers le CPT */
.prj-card-overlay-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.prj-card-overlay-link:focus-visible {
    outline: 3px solid #12294a;
    outline-offset: -3px;
}

.prj-card-image {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
}

.prj-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.prj-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: #12294a;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    z-index: 2;
}

.prj-card-content {
    flex: 1;
    padding: 24px 26px;
    display: flex;
    flex-direction: column;
}

.prj-card-content h2 {
    color: #12294a;
    font-size: 1.25rem;
    margin: 0 0 10px;
    font-weight: 700;
}

.prj-card-content p.prj-desc {
    color: #4a5568;
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0 0 16px;
}

/* Infos / pills ----------------------------------------------------------- */
.prj-infos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.prj-pill {
    background: #eef2fa;
    color: #12294a;
    font-size: 0.82rem;
    padding: 6px 14px;
    border-radius: 20px;
    white-space: nowrap;
}

/* Tags ---------------------------------------------------------------- */
.prj-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.prj-tag {
    background: #f4f6f9;
    color: #37476b;
    font-size: 0.78rem;
    padding: 5px 12px;
    border-radius: 6px;
}

/* Actions / boutons ---------------------------------------------------- */
.prj-actions {
    position: relative; /* au-dessus de l'overlay pour rester cliquable */
    z-index: 2;
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.prj-btn-primary {
    border: 3px solid var(--enfold-main-color-color);
    color: var(--enfold-main-color-color);
    padding: 7px 22px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.4s ease-in-out, background 0.4s ease-in-out;
}

.prj-btn-primary:hover {
    background: #203564;
    color: #fff;
    border: 3px solid #fff;
}

.prj-btn-primary:hover svg {
    fill: #fff;
}

.prj-btn-primary svg {
    fill: var(--enfold-main-color-color);
    width: 8px;
}

/* Etat vide -------------------------------------------------------------- */
.prj-empty {
    text-align: center;
    color: #6b7280;
    padding: 60px 0;
    font-size: 1.05rem;
}

/* Pagination -------------------------------------------------------------- */
.prj-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.prj-pagination a,
.prj-pagination span {
    padding: 8px 14px;
    border-radius: 8px;
    background: #eef2fa;
    color: #12294a;
    text-decoration: none;
    font-size: 0.9rem;
}

.prj-pagination .current {
    background: #12294a;
    color: #fff;
}

/* ==========================================================================
   Page single "Projet" (single-projet.php)
   Hero en 2 colonnes (texte / image), même esprit que le single Événement.
   ========================================================================== */

#tris-projet h1,
#tris-projet h2,
#tris-projet h3,
#tris-projet h4 {
    color: var(--enfold-main-color-color) !important;
}

#tris-projet ul {
    list-style-type: initial;
    padding-left: 10px;
}

#tris-projet .prj-single-eyebrow {
    font-size: clamp(24px, 4vw, 33px);
    color: #c66456;
    font-family: 'Allura', 'Arial', sans-serif;
}

/* Wrapper de contenu standard, centré, largeur limitée (hors hero) */
#tris-projet .prj-single-wrapper {
    max-width: 1310px;
    margin: 0 auto;
    padding: 0 50px;
    box-sizing: border-box;
    padding-top: 40px;
    padding-bottom: 40px;
}

@media (max-width: 992px) {
    #tris-projet .prj-single-wrapper {
        padding-left: 30px;
        padding-right: 30px;
    }
}

@media (max-width: 782px) {
    #tris-projet .prj-single-wrapper {
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 28px;
        padding-bottom: 28px;
    }
}

/* Fond du hero : prend toute la largeur de l'écran. Le hero doit rester un
   wrapper séparé (.hero-wrapper) du wrapper de contenu centré ci-dessus,
   sinon le max-width de 1310px annule l'effet plein écran. */
#tris-projet .hero-wrapper {
    background-color: #FEF7EF;
    width: 100%;
}

#tris-projet .prj-single-hero {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    width: 100%;
    box-sizing: border-box;
    padding-top: 25px;
    padding-bottom: 25px;
}

/* Texte à gauche */
#tris-projet .prj-single-hero-text {
    flex: 1 1 50%;
    min-width: 0;
}

/* Image à droite */
#tris-projet .prj-single-hero-image {
    flex: 1 1 40%;
    min-width: 0;
    max-width: 40%;
    align-self: stretch;
}

#tris-projet .prj-single-hero-image img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 25px;
    object-fit: cover;
}

@media (max-width: 992px) {
    #tris-projet .prj-single-hero {
        gap: 24px;
        padding-left: 30px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    #tris-projet .prj-single-hero-image {
        flex: 1 1 42%;
        max-width: 42%;
    }
}

/* Empile en colonne sur mobile (texte au-dessus de l'image) */
@media (max-width: 782px) {
    #tris-projet .prj-single-hero {
        flex-direction: column;
        gap: 20px;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 20px;
        padding-bottom: 0;
    }

    #tris-projet .prj-single-hero-text,
    #tris-projet .prj-single-hero-image {
        max-width: 100%;
        flex: 1 1 auto;
    }

    #tris-projet .prj-single-hero-image {
        align-self: auto;
    }

    #tris-projet .prj-single-hero-image img {
        height: auto;
        border-radius: 16px;
    }
}

@media (max-width: 480px) {
    #tris-projet .prj-single-hero {
        padding-left: 16px;
        padding-right: 16px;
        gap: 16px;
    }
}

/* Corps de page en 2 colonnes : texte (WYSIWYG) à gauche, formulaire à
   droite. S'il n'y a pas de formulaire, le texte occupe naturellement
   toute la largeur (un seul enfant flex). */
#tris-projet .prj-single-body {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

#tris-projet .prj-single-content {
    flex: 1 1 0;
    min-width: 0;
    color: var(--enfold-main-color-color);
}

#tris-projet .prj-single-content h2 {
    color: var(--enfold-main-color-color);
}

/* Formulaire Ninja Forms (via champ ACF "projet_formulaire_id") */
#tris-projet .prj-single-form {
    flex: 1 1 0;
    min-width: 0;
}

@media (max-width: 782px) {
    #tris-projet .prj-single-body {
        flex-direction: column;
        gap: 24px;
    }
}

/* ==========================================================================
   Habillage "carte" du formulaire Ninja Forms affiché dans .prj-single-form.
   Reproduit le design fourni : carte crème arrondie, champs clairs sans
   bordure visible, titre centré (eyebrow script + gros titre navy).

   Le TEXTE ("Promesse de don" / "Formulaire de donation" / paragraphe
   explicatif) n'est PAS généré par le thème : il doit être ajouté dans
   l'admin Ninja Forms lui-même, via un champ "HTML" / "Contenu riche" en
   tout début de formulaire. Pour qu'il hérite automatiquement du bon
   style, donne-lui simplement les classes ci-dessous dans le champ HTML :
     <div class="prj-form-eyebrow">Promesse de don</div>
     <h2 class="prj-form-title">Formulaire de donation</h2>
     <div class="prj-form-intro">Texte d'introduction...</div>
   ========================================================================== */

#tris-projet .prj-single-form .nf-form-cont {
    background: #FEF7EF;
    border-radius: 24px;
    padding: 40px 36px;
    box-shadow: 0 10px 30px rgba(28, 43, 58, 0.08);
}

@media (max-width: 480px) {
    #tris-projet .prj-single-form .nf-form-cont {
        padding: 28px 20px;
        border-radius: 18px;
    }
}

/* Titre optionnel, si ajouté dans le formulaire via un champ HTML (voir plus haut) */
#tris-projet .prj-form-eyebrow {
    text-align: center;
    font-family: 'Allura', 'Arial', sans-serif;
    font-style: italic;
    font-size: clamp(20px, 3vw, 26px);
    color: #c66456;
    margin-bottom: 4px;
}

#tris-projet .prj-form-title {
    text-align: center;
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    color: #12294a;
    margin: 0 0 20px;
}

#tris-projet .prj-form-intro {
    text-align: center;
    color: #12294a;
    line-height: 1.6;
    margin-bottom: 28px;
}

/* Champs : fond clair, sans bordure visible, coins arrondis */
#tris-projet .prj-single-form .nf-field-element input[type="text"],
#tris-projet .prj-single-form .nf-field-element input[type="email"],
#tris-projet .prj-single-form .nf-field-element input[type="tel"],
#tris-projet .prj-single-form .nf-field-element input[type="number"],
#tris-projet .prj-single-form .nf-field-element select,
#tris-projet .prj-single-form .nf-field-element textarea {
    background-color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 14px 18px;
    font-size: 0.95rem;
    color: #12294a;
    box-shadow: none;
}

#tris-projet .prj-single-form .nf-field-element textarea {
    min-height: 120px;
}

#tris-projet .prj-single-form ::placeholder {
    color: #8a94a6;
    opacity: 1;
}

#tris-projet .prj-single-form .nf-field-element input:focus,
#tris-projet .prj-single-form .nf-field-element select:focus,
#tris-projet .prj-single-form .nf-field-element textarea:focus {
    outline: 2px solid var(--enfold-main-color-color);
    outline-offset: 1px;
}

/* Bouton d'envoi, cohérent avec les autres CTA du site */
#tris-projet .prj-single-form .nf-form-cont input[type="submit"],
#tris-projet .prj-single-form .nf-form-cont button[type="submit"] {
    background: var(--enfold-main-color-color);
    color: #fff;
    border: none;
    border-radius: 30px;
    padding: 12px 32px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
}

#tris-projet .prj-single-form .nf-form-cont input[type="submit"]:hover,
#tris-projet .prj-single-form .nf-form-cont button[type="submit"]:hover {
    background: #203564;
}

#tris-projet .prj-single-back {
    margin-top: 3em;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

@media (max-width: 782px) {
    #tris-projet .prj-single-back {
        margin-top: 2em;
    }
}

#tris-projet .prj-back-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    text-decoration: none;
    color: #1C2B3A;
    padding: 4px 2px;
}

#tris-projet .prj-back-link-arrow {
    display: inline-block;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#tris-projet .prj-back-link-text {
    position: relative;
}

#tris-projet .prj-back-link-text::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background-color: #D97A5F;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}

#tris-projet .prj-back-link:hover,
#tris-projet .prj-back-link:focus-visible {
    color: #D97A5F;
}

#tris-projet .prj-back-link:hover .prj-back-link-arrow,
#tris-projet .prj-back-link:focus-visible .prj-back-link-arrow {
    transform: translateX(-6px);
}

#tris-projet .prj-back-link:hover .prj-back-link-text::after,
#tris-projet .prj-back-link:focus-visible .prj-back-link-text::after {
    transform: scaleX(1);
}

#tris-projet .prj-back-link:focus-visible {
    outline: 2px solid #D97A5F;
    outline-offset: 4px;
    border-radius: 2px;
}

@media (max-width: 782px) {
    #tris-projet .prj-back-link {
        padding: 6px 2px;
    }
}