/* ==========================================================================
   Page « Nos engagements » : cartes ODD dépliables (bloc Détails, style
   « Carte d'engagement ») dans une grille « tl-engagements ».
   Couleurs officielles des Objectifs de développement durable de l'ONU.
   ========================================================================== */

.tl-odd-3  { --tl-odd: #4c9f38; }
.tl-odd-4  { --tl-odd: #c5192d; }
.tl-odd-5  { --tl-odd: #ff3a21; }
.tl-odd-6  { --tl-odd: #26bde2; }
.tl-odd-7  { --tl-odd: #fcc30b; }
.tl-odd-11 { --tl-odd: #fd9d24; }
.tl-odd-12 { --tl-odd: #bf8b2e; }
.tl-odd-13 { --tl-odd: #3f7e44; }
.tl-odd-15 { --tl-odd: #56c02b; }

/* La grille : les cartes gardent leur hauteur propre ; une colonne sur téléphone. */
.tl-engagements.is-layout-grid {
align-items: start;
}

@media (max-width: 781px) {
.tl-engagements.is-layout-grid {
grid-template-columns: minmax(0, 1fr) !important;
}
}

/* La carte. */
.wp-block-details.is-style-engagement {
margin: 0;
padding: 0;
background: #fbf8f3;
border: 1px solid rgba(201, 162, 78, 0.45);
border-top: 4px solid var(--tl-odd, var(--wp--preset--color--or));
box-shadow: 0 10px 26px rgba(26, 20, 17, 0.07);
transition: box-shadow 0.3s ease;
}

.wp-block-details.is-style-engagement:hover {
box-shadow: 0 16px 34px rgba(26, 20, 17, 0.13);
}

/* Le résumé : numéro, intitulé, chevron. */
.wp-block-details.is-style-engagement > summary {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 1.1rem;
align-items: center;
padding: 1.4rem 1.5rem;
list-style: none;
cursor: pointer;
font-family: var(--wp--preset--font-family--dm-serif-display);
font-size: 1.25rem;
line-height: 1.25;
color: var(--wp--preset--color--noir-chaud);
}

.wp-block-details.is-style-engagement > summary::-webkit-details-marker {
display: none;
}

.wp-block-details.is-style-engagement > summary strong {
min-width: 3.9rem;
font-size: 3.75rem;
font-weight: 400;
line-height: 0.9;
color: var(--tl-odd, var(--wp--preset--color--or));
}

.wp-block-details.is-style-engagement > summary::after {
content: "";
width: 2.1rem;
height: 2.1rem;
border: 1px solid #c9a24e;
background: no-repeat center / 0.8rem
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238a6420' stroke-width='1.5'/%3E%3C/svg%3E");
transition: transform 0.3s ease;
}

.wp-block-details.is-style-engagement[open] > summary::after {
transform: rotate(180deg);
}

.wp-block-details.is-style-engagement > summary:focus-visible {
outline: 2px solid var(--tl-odd, #8a6420);
outline-offset: -2px;
}

/* Le contenu déplié. */
.wp-block-details.is-style-engagement > :not(summary) {
margin-inline: 1.5rem;
}

.wp-block-details.is-style-engagement > summary + * {
padding-top: 1.1rem;
border-top: 1px solid rgba(201, 162, 78, 0.35);
}

.wp-block-details.is-style-engagement > :last-child {
margin-bottom: 1.4rem;
}

.wp-block-details.is-style-engagement p {
margin-block: 0 0.9rem;
font-size: 0.95rem;
font-weight: 300;
line-height: 1.7;
color: var(--wp--preset--color--encre);
}

.wp-block-details.is-style-engagement p.tl-cible {
margin-block: 0.4rem 0.2rem;
font-family: 'Bodoni Moda', serif;
font-size: 0.85rem;
font-style: italic;
font-weight: 400;
color: #5e4210;
}

@media (prefers-reduced-motion: reduce) {
.wp-block-details.is-style-engagement,
.wp-block-details.is-style-engagement > summary::after {
transition: none;
}
}