/* Blocs ajoutés après la première version : agenda de l'accueil, chiffres, galerie, valeurs, partenaires, page À propos. */

/* ---------- Agenda dans l'en-tête de l'accueil ---------- */
.heros__visuel { position: relative; align-self: stretch; min-block-size: 18rem; display: flex; align-items: center; justify-content: flex-end; }
.heros__visuel .marches span { opacity: .55; }
.avenir {
    position: relative; z-index: 1; inline-size: min(100%, 24rem); margin-block: 1.6rem;
    background: rgba(8, 45, 21, .93); border: 1px solid rgba(231, 212, 154, .35); border-block-start: 4px solid var(--or);
    padding: 1.1rem 1.2rem 1rem; backdrop-filter: blur(6px); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .6);
}
.avenir h2 { color: var(--blanc); font-size: 1.15rem; margin: 0 0 .7rem; }
.avenir ul { list-style: none; margin: 0 0 .7rem; padding: 0; display: grid; gap: .1rem; }
.avenir li { display: grid; grid-template-columns: 3.2rem 1fr; gap: .8rem; align-items: center; padding-block: .55rem; border-block-end: 1px solid rgba(255, 255, 255, .12); }
.avenir li:last-child { border: 0; }
.avenir__date { display: grid; place-items: center; text-align: center; line-height: 1.05; background: var(--or); color: var(--vert); padding: .35rem 0; font-size: .75rem; font-weight: 700; text-transform: capitalize; }
.avenir__date b { display: block; font: 400 1.35rem var(--police-titre); }
.avenir__titre { color: #e8f0ea; font-size: .95rem; line-height: 1.3; }
.avenir__titre small { display: block; color: #a9c4b0; font-size: .8rem; margin-block-start: .1rem; }
.avenir > a { color: var(--or-clair); font-weight: 700; font-size: .9rem; }

/* ---------- Bande de chiffres ---------- */
.bande-chiffres { background: var(--vert-2); color: #d9e6dc; border-block-end: 4px solid var(--or); }
.chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding-block: 1.2rem; text-align: start; }
.chiffre { padding-inline: 1.2rem; border-inline-start: 1px solid rgba(255, 255, 255, .18); }
.chiffre:first-child { border: 0; padding-inline-start: 0; }
.chiffre__valeur { font-family: var(--police-titre); font-size: clamp(1.9rem, 3.4vw, 2.6rem); color: var(--or-clair); line-height: 1.05; }
.chiffre__libelle { color: #c3d5c8; font-size: .92rem; margin-block-start: .2rem; }

/* ---------- Galerie ---------- */
.galerie { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 11rem; gap: .6rem; grid-auto-flow: dense; }
.galerie__photo { position: relative; padding: 0; border: 0; cursor: zoom-in; overflow: hidden; background: var(--vert-2); }
.galerie__photo:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.galerie__photo:nth-child(4) { grid-column: span 2; }
.galerie__photo img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .5s ease; }
.galerie__photo:hover img { transform: scale(1.06); }
.galerie__legende {
    position: absolute; inset-inline: 0; inset-block-end: 0; padding: 1.6rem .8rem .6rem; text-align: start; color: #fff; font-size: .85rem; line-height: 1.3;
    background: linear-gradient(transparent, rgba(0, 0, 0, .72)); opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s;
}
.galerie__photo:hover .galerie__legende, .galerie__photo:focus-visible .galerie__legende { opacity: 1; transform: none; }
.lightbox { border: 0; padding: 0; background: transparent; max-inline-size: min(92vw, 70rem); overflow: visible; }
.lightbox::backdrop { background: rgba(4, 22, 10, .88); }
.lightbox img { max-block-size: 82vh; inline-size: auto; margin-inline: auto; border: 4px solid #fff; }
.lightbox__legende { color: #e8f0ea; text-align: center; margin: .8rem 0 0; }
.lightbox__fermer { position: absolute; inset-block-start: -2.6rem; inset-inline-end: 0; background: none; border: 0; color: #fff; font-size: 2.2rem; line-height: 1; cursor: pointer; }

/* ---------- Valeurs ---------- */
/* Mosaïque : chaque valeur est une tuile qui se retourne (survol ou clavier) et révèle le mot dans l'autre langue. */
.valeurs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: .8rem; }
.valeur { position: relative; aspect-ratio: 1 / 1; min-block-size: 8.5rem; perspective: 900px; outline-offset: 4px; cursor: default; }
.valeur__face {
    position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .5rem; text-align: center; padding: .8rem;
    backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .6s cubic-bezier(.3, .7, .2, 1);
}
.valeur__recto {
    color: #fff; background-color: var(--vert-2); border-block-end: 4px solid var(--or);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.09' stroke-width='1.2'%3E%3Crect x='20' y='20' width='32' height='32'/%3E%3Crect x='20' y='20' width='32' height='32' transform='rotate(45 36 36)'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 3.4rem; background-position: 50% 50%;
}
.valeur:nth-child(even) .valeur__recto { background-color: var(--vert); }
.valeur__recto svg { inline-size: 2.3rem; block-size: 2.3rem; color: var(--or-clair); }
.valeur__recto b { font: 400 1.25rem/1.15 var(--police-titre); }
.valeur__sous { display: none; font-style: normal; color: var(--or-clair); font-family: "Reem Kufi", "Noto Naskh Arabic", serif; font-size: 1rem; }
.valeur__verso {
    transform: rotateY(180deg); background: var(--or); color: var(--vert); border-block-end: 4px solid var(--vert);
    font: 500 2.1rem/1.2 "Reem Kufi", "Noto Naskh Arabic", serif;
}
html[lang="ar"] .valeur__verso { font: 400 1.7rem/1.2 var(--police-titre); }
.valeur:hover .valeur__recto, .valeur:focus-visible .valeur__recto { transform: rotateY(-180deg); }
.valeur:hover .valeur__verso, .valeur:focus-visible .valeur__verso { transform: rotateY(0); }
.valeur:not(:has(.valeur__verso)):hover .valeur__recto { transform: none; }
/* Sur écran tactile, pas de survol : la traduction est visible sous le mot. */
@media (hover: none) {
    .valeur__verso { display: none; }
    .valeur__sous { display: block; }
    .valeur:hover .valeur__recto, .valeur:focus-visible .valeur__recto { transform: none; }
}
/* Sur fond vert, les tuiles gardent leur contour pour rester lisibles. */
.section--verte .valeur__recto { background-color: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .22); border-block-end: 4px solid var(--or); }
.section--verte .valeur:nth-child(even) .valeur__recto { background-color: rgba(255, 255, 255, .12); }

/* ---------- Partenaires ---------- */
.partenaires { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem; align-items: stretch; }
.partenaire {
    display: grid; place-items: center; min-inline-size: 10rem; min-block-size: 4.6rem; padding: .8rem 1.4rem;
    border: 1px solid var(--trait); background: var(--blanc); color: var(--vert); text-decoration: none; font: 700 1.05rem var(--police-texte);
    transition: border-color .2s, box-shadow .2s;
}
.partenaire:hover { border-color: var(--or); box-shadow: 0 8px 18px -12px rgba(10, 61, 29, .5); }
.partenaire img { max-block-size: 2.6rem; inline-size: auto; filter: grayscale(1); opacity: .75; transition: filter .25s, opacity .25s; }
.partenaire:hover img { filter: none; opacity: 1; }

/* ---------- Page À propos ---------- */
.objectifs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.objectif { background: var(--blanc); border: 1px solid var(--trait); border-block-start: 4px solid var(--or); padding: 1.2rem 1.2rem 1.3rem; }
.objectif svg { inline-size: 1.8rem; block-size: 1.8rem; padding: .3rem; background: #e4efe6; color: var(--vert-3); margin-block-end: .6rem; }
.objectif p { margin: 0; font-weight: 600; color: var(--vert); line-height: 1.45; }
.orientations__cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; counter-reset: piliers; }
.orientation {
    position: relative; padding: 1.5rem 1.4rem 1.6rem; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .2);
    border-block-start: 4px solid var(--or); transition: background .25s, transform .25s;
}
.orientation:hover { background: rgba(255, 255, 255, .11); transform: translateY(-3px); }
.orientation__icone { display: grid; place-items: center; inline-size: 3.2rem; block-size: 3.2rem; margin-block-end: .9rem; background: var(--or); color: var(--vert); }
.orientation__icone svg { inline-size: 1.7rem; block-size: 1.7rem; }
.orientation p { margin: 0; color: #e3eee6; font-size: 1.05rem; line-height: 1.7; }
.jalons { list-style: none; margin: 0; padding: 0; max-inline-size: 46rem; }
.jalons li { display: grid; grid-template-columns: 5rem 1fr; gap: 1.2rem; padding-block: .9rem; }
.jalons li + li { border-block-start: 1px dashed var(--trait); }
.jalons__annee { font: 400 1.7rem var(--police-titre); color: var(--or); line-height: 1.1; }
.jalons p { margin: 0; }
.appel { background: var(--vert); color: #fff; border-block-start: 5px solid var(--or); padding-block: 1.6rem; }
.appel__grille { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; }
.appel h2 { color: #fff; margin: 0 0 .2rem; font-size: 1.6rem; }
.appel p { margin: 0; color: #cfe0d3; }

@media (max-width: 62rem) {
    .valeurs { grid-template-columns: repeat(3, 1fr); }
    .orientations__cartes { grid-template-columns: 1fr; }
    .heros__visuel { min-block-size: 0; justify-content: flex-start; }
    .avenir { margin-block: 0 1.6rem; }
    .chiffres { grid-template-columns: repeat(2, 1fr); row-gap: 1rem; }
    .chiffre:nth-child(odd) { border: 0; padding-inline-start: 0; }
    .galerie { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 10rem; }
    .objectifs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 38rem) {
    .valeurs { grid-template-columns: repeat(2, 1fr); }
    .galerie { grid-auto-rows: 8.5rem; }
    .objectifs { grid-template-columns: 1fr; }
    .jalons li { grid-template-columns: 4rem 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .galerie__photo img, .galerie__legende, .valeur__face, .orientation, .partenaire img { transition: none; }
}