/* Couleurs inspirées du drapeau du Bénin */
:root {
    --vert: #008751;
    --vert-fonce: #006b40;
    --jaune: #FCD116;
    --rouge: #E8112D;
    --clair: #f5f7f4;
    --bs-primary: var(--vert);
    --bs-primary-rgb: 0, 135, 81;
    --bs-link-color: var(--vert);
    --bs-link-color-rgb: 0, 135, 81;
    --bs-link-hover-color: var(--vert-fonce);
    --bs-body-font-family: 'Outfit', system-ui, sans-serif;
}

body { font-family: var(--bs-body-font-family); color: #1d2a24; }
a { color: var(--vert); }

.btn-primary { --bs-btn-bg: var(--vert); --bs-btn-border-color: var(--vert); --bs-btn-hover-bg: var(--vert-fonce); --bs-btn-hover-border-color: var(--vert-fonce); --bs-btn-active-bg: var(--vert-fonce); }
.btn-outline-primary { --bs-btn-color: var(--vert); --bs-btn-border-color: var(--vert); --bs-btn-hover-bg: var(--vert); --bs-btn-hover-border-color: var(--vert); }
.btn-warning { --bs-btn-bg: var(--jaune); --bs-btn-border-color: var(--jaune); }
.pagination { --bs-pagination-active-bg: var(--vert); --bs-pagination-active-border-color: var(--vert); --bs-pagination-color: var(--vert); }
.form-control:focus { border-color: var(--vert); box-shadow: 0 0 0 .25rem rgba(0, 135, 81, .2); }

.bande-benin { display: flex; height: 5px; }
.bande-benin span { flex: 1; }
/* Toujours les vraies couleurs du drapeau, quel que soit le profil ou la couleur de l'établissement */
.bande-benin span:nth-child(1) { background: #008751 !important; }
.bande-benin span:nth-child(2) { background: #FCD116 !important; }
.bande-benin span:nth-child(3) { background: #E8112D !important; }

.navbar-brand { color: var(--vert) !important; }
.nav-link.active { color: var(--vert) !important; font-weight: 600; }

.hero {
    color: #fff;
    background:
        radial-gradient(circle at 85% 20%, rgba(252, 209, 22, .35), transparent 40%),
        radial-gradient(circle at 95% 90%, rgba(232, 17, 45, .35), transparent 35%),
        linear-gradient(135deg, var(--vert-fonce), var(--vert));
}

.entete { background: linear-gradient(135deg, var(--vert-fonce), var(--vert)); color: #fff; }
.entete .lien-retour { color: rgba(255, 255, 255, .8); text-decoration: none; }

.trait { width: 60px; height: 4px; margin-top: .75rem; border-radius: 2px; background: linear-gradient(90deg, #008751 33%, #FCD116 33% 66%, #E8112D 66%); }

.bg-clair { background: var(--clair); }

.carte { border: 0; border-radius: 1rem; overflow: hidden; box-shadow: 0 2px 12px rgba(0, 0, 0, .06); transition: transform .2s, box-shadow .2s; }
.carte:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0, 0, 0, .1); }
.carte .card-img-top { height: 200px; object-fit: cover; }
.visuel-defaut { display: flex; align-items: center; justify-content: center; font-size: 3rem; color: rgba(255, 255, 255, .8); background: linear-gradient(135deg, var(--vert), var(--vert-fonce)); }

.appel { border-radius: 1.5rem; background: var(--clair); border: 1px solid #e3e8e3; }

.contenu { font-size: 1.08rem; line-height: 1.75; }
.contenu img { max-width: 100%; height: auto; border-radius: .75rem; }

.pied { background: #10241a; color: #fff; }
.pied a { color: #fff; text-decoration: none; }
.pied a:hover { color: var(--jaune); }

/* Utilitaire absent de Bootstrap : autorise un élément flex à rétrécir (texte tronqué au lieu de déborder) */
.min-w-0 { min-width: 0 !important; }

/* Avis des élèves (site de l'établissement) : la note sur 10 en grand */
.avis-public { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; background: #fff; border: 1px solid rgba(0, 0, 0, .07); border-radius: 1.4rem; padding: 1.6rem; box-shadow: 0 10px 30px rgba(14, 59, 38, .06); }
@media (min-width: 992px) { .avis-public { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; padding: 2.2rem 2.6rem; gap: 3rem; } }
.avis-libelle { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; color: var(--vert); }
.avis-chiffre { font-size: clamp(4.2rem, 14vw, 7rem); font-weight: 800; line-height: 1; color: #0E3B26; letter-spacing: -.03em; margin: .3rem 0 .6rem; }
.avis-chiffre small { font-size: .32em; font-weight: 700; color: #6B7A72; letter-spacing: 0; margin-left: .15em; }
.avis-jauge, .avis-criteres .barre { display: block; height: 10px; border-radius: 99px; background: #EEF1EC; overflow: hidden; }
.avis-jauge span, .avis-criteres .barre span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #008751, #2BB673); }
.avis-source { font-size: .88rem; color: #6B7A72; margin-top: .7rem; }
.avis-criteres { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.avis-criteres li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nom val" "barre barre"; gap: .3rem .8rem; align-items: baseline; }
.avis-criteres .nom { grid-area: nom; font-weight: 600; }
.avis-criteres .val { grid-area: val; font-size: 1.35rem; color: #0E3B26; }
.avis-criteres .val small { font-size: .7rem; color: #6B7A72; font-weight: 600; }
.avis-criteres .barre { grid-area: barre; height: 8px; }

.carte-etab .visuel { position: relative; }
.carte-etab .note-avis { position: absolute; top: .7rem; right: .7rem; background: #fff; color: #0E3B26; font-weight: 800; font-size: 1.15rem; border-radius: 999px; padding: .2rem .7rem; box-shadow: 0 4px 14px rgba(0, 0, 0, .15); }
.carte-etab .note-avis i { color: #E0A800; font-size: .9em; } .carte-etab .note-avis small { font-size: .65em; color: #6B7A72; font-weight: 700; }