/* =====================================================================
   JOSPIA 2026 - Feuille de style principale
   Identité : VERT & BLANC (conforme au cahier des charges et à la maquette)
   ===================================================================== */

:root {
    --vert: #1E7A3D;
    --vert-fonce: #0F4D26;
    --vert-vif: #2FA05A;
    --or: #2FA05A;        /* alias conservé pour compat. : plus de doré, second accent = vert vif */
    --or-clair: #3DB56A;
    --brun: #0F4D26;      /* alias conservé pour compat. */
    --creme: #FFFFFF;
    --creme-carte: #FFFFFF;
    --texte: #16201A;
    --texte-doux: #5B6B61;
    --bordure: #DCEAE1;
    --danger: #B3261E;
    --vert-teinte: #EAF5EE;
    --radius: 14px;
    --ombre: 0 8px 24px rgba(15, 77, 38, 0.08);
    --ombre-hover: 0 16px 40px rgba(15, 77, 38, 0.14);

    --police-titre: 'Cairo', sans-serif;
    --police-texte: 'Inter', sans-serif;
    --police-mono: 'IBM Plex Mono', monospace;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--creme);
    color: var(--texte);
    font-family: var(--police-texte);
    line-height: 1.55;
}

h1, h2, h3, h4, .display {
    font-family: var(--police-titre);
    font-weight: 800;
    color: var(--vert-fonce);
    margin: 0 0 .4em;
    letter-spacing: -.01em;
}

a { color: var(--vert); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }
.mono { font-family: var(--police-mono); letter-spacing: .02em; }

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------- Motif de rayons (signature visuelle du logo) ---------- */
.rayons-bg {
    position: relative;
    overflow: hidden;
}
.rayons-bg::before {
    content: "";
    position: absolute;
    top: -60%;
    left: 50%;
    width: 900px;
    height: 900px;
    transform: translateX(-50%);
    background: repeating-conic-gradient(
        from 0deg,
        rgba(30, 122, 61, 0.07) 0deg 3.4deg,
        transparent 3.4deg 17deg
    );
    border-radius: 50%;
    pointer-events: none;
}

/* ---------- Barre de navigation ---------- */
.navbar {
    background: var(--creme-carte);
    border-bottom: 1px solid var(--bordure);
    position: sticky;
    top: 0;
    z-index: 50;
}
.navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    padding-bottom: 12px;
    flex-wrap: wrap;
    gap: 10px;
}
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}
.brand img { height: 48px; width: auto; }
.brand-text .titre {
    font-family: var(--police-titre);
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--vert-fonce);
    line-height: 1;
}
.brand-text .sous-titre {
    font-size: .7rem;
    color: var(--texte-doux);
    letter-spacing: .03em;
}
.nav-links {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    align-items: center;
}
.nav-links a {
    color: var(--texte);
    font-weight: 600;
    font-size: .88rem;
    padding: 9px 13px;
    border-radius: 9px;
}
.nav-links a:hover { background: var(--vert-teinte); text-decoration: none; }
.nav-links a.actif { background: var(--vert); color: #fff; }
.nav-links .btn-nav {
    background: var(--vert-fonce);
    color: #fff !important;
}
.nav-links .btn-nav:hover { background: var(--vert); }

/* ---------- Hero ---------- */
.hero {
    padding: 66px 0 56px;
    text-align: center;
}
.hero .badge-annee {
    display: inline-block;
    background: var(--vert-teinte);
    color: var(--vert-fonce);
    border: 1px solid var(--bordure);
    font-family: var(--police-mono);
    font-weight: 700;
    font-size: .74rem;
    letter-spacing: .08em;
    padding: 7px 16px;
    border-radius: 999px;
    margin-bottom: 20px;
    text-transform: uppercase;
}
.hero h1 {
    font-size: clamp(1.8rem, 4vw, 2.9rem);
    max-width: 780px;
    margin: 0 auto .5em;
}
.hero p.lead {
    max-width: 620px;
    margin: 0 auto 28px;
    color: var(--texte-doux);
    font-size: 1.05rem;
}
.hero-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* ---------- Boutons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    border-radius: 10px;
    font-weight: 700;
    font-size: .95rem;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primaire { background: var(--vert); color: #fff; box-shadow: var(--ombre); }
.btn-primaire:hover { background: var(--vert-fonce); box-shadow: var(--ombre-hover); }
.btn-or { background: var(--vert-fonce); color: #fff; box-shadow: var(--ombre); }
.btn-or:hover { background: #0A3A1C; box-shadow: var(--ombre-hover); }
.btn-outline { background: transparent; color: var(--vert-fonce); border-color: var(--vert); }
.btn-outline:hover { background: var(--vert-teinte); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-sm { padding: 8px 16px; font-size: .82rem; border-radius: 8px; }
.btn-block { width: 100%; justify-content: center; }
.btn[disabled], .btn.disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* ---------- Cartes / sections ---------- */
.section { padding: 46px 0; }
.section-titre { text-align: center; margin-bottom: 34px; }
.section-titre .eyebrow {
    font-family: var(--police-mono);
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--vert);
    font-weight: 700;
    display: block;
    margin-bottom: 6px;
}
.grid { display: grid; gap: 20px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.carte {
    background: var(--creme-carte);
    border: 1px solid var(--bordure);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--ombre);
}
.carte-choix {
    text-align: center;
    padding: 32px 24px;
    transition: transform .2s ease, box-shadow .2s ease;
}
.carte-choix:hover { transform: translateY(-4px); box-shadow: var(--ombre-hover); }
.carte-choix .icone {
    width: 60px; height: 60px;
    margin: 0 auto 16px;
    border-radius: 16px;
    background: linear-gradient(150deg, var(--vert), var(--vert-fonce));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.5rem;
}
.carte-choix.or .icone { background: linear-gradient(150deg, var(--vert-vif), var(--vert-fonce)); }
.carte-choix h3 { margin-bottom: 8px; }
.carte-choix p { color: var(--texte-doux); font-size: .92rem; margin-bottom: 18px; }

/* ---------- Formulaires ---------- */
.form-wrap {
    max-width: 760px;
    margin: 0 auto;
}
fieldset {
    border: 1px solid var(--bordure);
    border-radius: var(--radius);
    padding: 20px 22px 8px;
    margin-bottom: 22px;
    background: var(--creme-carte);
}
legend {
    font-family: var(--police-titre);
    font-weight: 700;
    color: var(--vert-fonce);
    padding: 0 10px;
    font-size: 1.02rem;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { margin-bottom: 16px; }
label {
    display: block;
    font-weight: 600;
    font-size: .88rem;
    margin-bottom: 6px;
    color: var(--texte);
}
label .req { color: var(--danger); }
input[type=text], input[type=tel], input[type=number], input[type=email],
input[type=password], input[type=file], select, textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1.5px solid var(--bordure);
    border-radius: 9px;
    font-size: .95rem;
    font-family: var(--police-texte);
    background: #fff;
    color: var(--texte);
    transition: border-color .15s ease;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--vert);
    box-shadow: 0 0 0 3px rgba(30,122,61,.13);
}
.radio-group, .checkbox-group {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    padding: 6px 0;
}
.radio-group label, .checkbox-group label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 500;
    margin: 0;
}
.help-text { font-size: .78rem; color: var(--texte-doux); margin-top: 4px; }
.alert {
    padding: 14px 18px;
    border-radius: 10px;
    margin-bottom: 18px;
    font-size: .92rem;
    font-weight: 500;
}
.alert-succes { background: #E9F6EC; color: var(--vert-fonce); border: 1px solid #BCE3C6; }
.alert-erreur { background: #FBEAE8; color: var(--danger); border: 1px solid #F0C3BB; }
.alert-info { background: var(--vert-teinte); color: var(--vert-fonce); border: 1px solid var(--bordure); }

/* ---------- Tableaux (admin) ---------- */
.table-wrap { overflow-x: auto; background: #fff; border-radius: var(--radius); box-shadow: var(--ombre); border: 1px solid var(--bordure); }
table { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 720px; }
th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--bordure); }
th { background: var(--vert-teinte); color: var(--vert-fonce); font-family: var(--police-titre); font-weight: 700; font-size: .76rem; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
tr:hover td { background: #FAFDFB; }
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; font-family: var(--police-mono); }
.pill-vert { background: var(--vert-teinte); color: var(--vert-fonce); }
.pill-or { background: #E3F3E8; color: var(--vert-fonce); }
.pill-gris { background: #EEF0ED; color: #666; }
.pill-rouge { background: #FBEAE8; color: var(--danger); }

/* ---------- Stat cards (dashboard) ---------- */
.stat-card { text-align: center; }
.stat-card .chiffre {
    font-family: var(--police-titre);
    font-weight: 900;
    font-size: 2.1rem;
    color: var(--vert);
}
.stat-card .label { color: var(--texte-doux); font-size: .86rem; font-weight: 600; }

/* ---------- Page espace utilisateur (fiche / badge) ---------- */
.fiche {
    background: #fff;
    border: 1px solid var(--bordure);
    border-radius: var(--radius);
    padding: 30px;
    max-width: 720px;
    margin: 0 auto;
    box-shadow: var(--ombre);
}
.fiche-header {
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: 2px solid var(--vert-teinte);
    padding-bottom: 16px;
    margin-bottom: 16px;
}
.fiche-header img.logo-fiche { height: 56px; }
.fiche-photo {
    width: 110px; height: 130px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid var(--vert);
    float: right;
    margin-left: 16px;
}
.fiche dl { display: grid; grid-template-columns: 200px 1fr; gap: 8px 12px; margin: 0; }
.fiche dt { font-weight: 700; color: var(--texte-doux); font-size: .84rem; }
.fiche dd { margin: 0; font-weight: 600; }
.fiche .dortoir-box {
    margin-top: 18px;
    background: linear-gradient(120deg, var(--vert), var(--vert-fonce));
    color: #fff;
    padding: 16px;
    border-radius: 10px;
    text-align: center;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; color-adjust: exact;
}
.fiche .dortoir-box .label { font-size: .78rem; opacity: .85; text-transform: uppercase; letter-spacing: .06em; }
.fiche .dortoir-box .valeur { font-family: var(--police-titre); font-size: 1.4rem; font-weight: 800; }

/* ---------- Badge & Diplôme (signature : arc en ogive) ---------- */
.badge-card {
    width: 340px;
    background: #fff;
    border: 1px solid var(--bordure);
    border-radius: 16px;
    overflow: hidden;
    margin: 0 auto;
    text-align: center;
    box-shadow: var(--ombre-hover);
}
.badge-card .ruban {
    background: linear-gradient(150deg, var(--vert), var(--vert-fonce));
    color: #fff;
    font-family: var(--police-mono);
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .08em;
    padding: 22px 10px 34px;
    text-transform: uppercase;
    border-radius: 0 0 50% 50% / 0 0 22px 22px;
}
.badge-card .corps-badge { padding: 0 20px 22px; margin-top: -16px; }
.badge-card img.badge-photo {
    width: 96px; height: 96px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: var(--ombre);
    margin: 0 auto 10px;
    background: var(--vert-teinte);
}
.badge-card .nom { font-family: var(--police-titre); font-weight: 800; font-size: 1.15rem; color: var(--vert-fonce); }
.badge-card .role { color: var(--texte-doux); font-weight: 700; font-size: .88rem; margin-top: 2px; }
.badge-card .matricule { margin-top: 12px; font-family: var(--police-mono); font-size: .72rem; color: var(--texte-doux); background: var(--vert-teinte); display: inline-block; padding: 5px 14px; border-radius: 999px; }
.badge-card .footer-badge { margin-top: 14px; font-size: .7rem; color: var(--texte-doux); border-top: 1px dashed var(--bordure); padding-top: 8px; }

.diplome-card {
    max-width: 780px;
    margin: 0 auto;
    background: #fff;
    border: 2px solid var(--vert);
    position: relative;
    padding: 50px 40px;
    text-align: center;
}
.diplome-card::before {
    content: "";
    position: absolute; inset: 10px;
    border: 1px solid var(--bordure);
    pointer-events: none;
}
.diplome-card .mention { font-family: var(--police-mono); font-size: .82rem; letter-spacing: .18em; text-transform: uppercase; color: var(--vert); font-weight: 700; }
.diplome-card h1 { font-size: 2rem; margin: 12px 0 20px; }
.diplome-card .nom-diplome { font-family: var(--police-titre); font-size: 1.8rem; color: var(--vert-fonce); margin: 14px 0; border-bottom: 2px solid var(--vert); display: inline-block; padding-bottom: 6px; }
.diplome-card .texte { max-width: 560px; margin: 0 auto 24px; color: var(--texte-doux); }
.diplome-card .signatures { display: flex; justify-content: space-between; margin-top: 40px; font-size: .82rem; color: var(--texte-doux); }

.acces-restreint {
    background: #F5F6F4;
    border: 1px dashed #C7CCC4;
    color: var(--texte-doux);
    padding: 14px;
    border-radius: 10px;
    text-align: center;
    font-size: .86rem;
    margin-top: 14px;
}

/* ---------- Quiz ---------- */
.quiz-progress { height: 8px; background: var(--vert-teinte); border-radius: 999px; overflow: hidden; margin-bottom: 24px; }
.quiz-progress > div { height: 100%; background: var(--vert); }
.question-card { margin-bottom: 18px; }
.question-card .categorie { font-family: var(--police-mono); color: var(--vert); font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.question-card h3 { margin: 6px 0 14px; font-size: 1.05rem; }
.option-item {
    display: block;
    border: 1.5px solid var(--bordure);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
    cursor: pointer;
    font-weight: 500;
    transition: border-color .15s, background .15s;
}
.option-item:hover { border-color: var(--vert); background: var(--vert-teinte); }
.option-item input { margin-right: 10px; }
.timer-box {
    position: sticky;
    top: 76px;
    text-align: center;
    background: var(--vert-fonce);
    color: #fff;
    padding: 10px;
    border-radius: 10px;
    font-family: var(--police-mono);
    font-weight: 700;
    margin-bottom: 20px;
}

/* ---------- Footer ---------- */
footer {
    background: var(--vert-fonce);
    color: #D9EEE0;
    padding: 30px 0;
    margin-top: 50px;
    text-align: center;
    font-size: .86rem;
}
footer a { color: #fff; font-weight: 600; }

/* ---------- Login ---------- */
.login-box {
    max-width: 400px;
    margin: 60px auto;
    background: #fff;
    padding: 34px;
    border-radius: var(--radius);
    box-shadow: var(--ombre-hover);
    border-top: 4px solid var(--vert);
}
.login-box h2 { text-align: center; }
.login-box .logo-login { height: 70px; margin: 0 auto 16px; }

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
    .grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .form-row { grid-template-columns: 1fr; }
    .grid-3, .grid-2 { grid-template-columns: 1fr; }
    .nav-links { width: 100%; justify-content: center; }
    .fiche dl { grid-template-columns: 140px 1fr; }
    .fiche-photo { float: none; margin: 0 auto 14px; }
    .diplome-card { padding: 30px 18px; }
}

/* ---------- Correction du test (justification de la note) ---------- */
.recap-note {
    display: flex; align-items: center; justify-content: center; gap: 26px;
    background: var(--vert-teinte); border: 1px solid var(--bordure); border-radius: var(--radius);
    padding: 22px; margin-bottom: 28px; flex-wrap: wrap; text-align: center;
}
.recap-note .bloc .chiffre { font-family: var(--police-titre); font-weight: 900; font-size: 2rem; color: var(--vert-fonce); }
.recap-note .bloc .label { font-size: .8rem; color: var(--texte-doux); font-weight: 600; }
.question-correction { margin-bottom: 16px; border-left: 4px solid var(--bordure); }
.question-correction.bonne { border-left-color: var(--vert); }
.question-correction.mauvaise { border-left-color: var(--danger); }
.question-correction .statut {
    display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .78rem;
    padding: 4px 12px; border-radius: 999px; margin-bottom: 10px;
}
.question-correction.bonne .statut { background: var(--vert-teinte); color: var(--vert-fonce); }
.question-correction.mauvaise .statut { background: #FBEAE8; color: var(--danger); }
.option-item.rep-correcte { border-color: var(--vert); background: var(--vert-teinte); font-weight: 700; }
.option-item.rep-choisie-fausse { border-color: var(--danger); background: #FBEAE8; }
.option-item .etiquette-option { font-size: .72rem; font-family: var(--police-mono); font-weight: 700; margin-left: 8px; }

/* ---------- Impression de badges en lot (4 par page) ---------- */
.page-badges {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    justify-items: center;
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px dashed var(--bordure);
}
.page-badges .badge-card, .page-badges .badge-jos, .page-badges .badge-jos-com { width: 100%; max-width: 300px; }

/* ---------- Impression de bulletins en lot (2 par page) ---------- */
.page-bulletins {
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px dashed var(--bordure);
}
.page-bulletins .fiche-doc.bulletin-doc { margin-bottom: 26px; }
.page-bulletins .fiche-doc.bulletin-doc:last-child { margin-bottom: 0; }
@media print {
    .page-bulletins { border-bottom: none; page-break-after: always; margin-bottom: 0; }
    .page-bulletins:last-of-type { page-break-after: auto; }
}
@media print {
    .page-badges { border-bottom: none; page-break-after: always; margin-bottom: 0; }
    .page-badges:last-of-type { page-break-after: auto; }
}

/* ---------- Badge séminariste - maquette officielle JOSPIA (AEEMCI) ---------- */
.badge-jos {
    width: 320px;
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    margin: 0 auto;
    box-shadow: var(--ombre-hover);
    border: 1px solid var(--bordure);
}
.badge-jos__entete { width: 100%; display: block; }
.badge-jos__corps {
    -webkit-print-color-adjust: exact; print-color-adjust: exact; color-adjust: exact;
    position: relative;
    background:
        linear-gradient(175deg, #F2901F 0%, #DE6A11 50%, #B94A0C 100%);
    padding: 92px 20px 22px;
    text-align: center;
}
.badge-jos__corps::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0; height: 58px;
    background-image: url('../img/silhouette_mosquee.svg');
    background-repeat: repeat-x;
    background-position: bottom;
    background-size: 220px 58px;
    opacity: .55;
    pointer-events: none;
}
.badge-jos__photo-wrap {
    position: absolute; top: -62px; left: 50%; transform: translateX(-50%);
    width: 158px; height: 158px;
    background: #fff;
    border-radius: 50%;
    padding: 5px;
    box-shadow: 0 6px 16px rgba(0,0,0,.2);
    z-index: 2;
}
.badge-jos__photo-wrap img {
    width: 100%; height: 100%; object-fit: cover; object-position: center 15%; border-radius: 50%;
    border: 3px solid #EE8B22; display: block; background: #f2f2f2;
}
.badge-jos__nom {
    position: relative; z-index: 1;
    color: #fff; font-family: var(--police-titre); font-weight: 900;
    font-size: 1.28rem; letter-spacing: .01em; text-transform: uppercase;
    text-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.badge-jos__divider {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin: 10px 0 16px;
}
.badge-jos__divider .ligne { height: 1px; width: 54px; background: rgba(255,255,255,.75); }
.badge-jos__divider .losange { width: 7px; height: 7px; background: #fff; transform: rotate(45deg); flex-shrink: 0; }
.badge-jos__infos {
    position: relative; z-index: 1;
    text-align: left; max-width: 250px; margin: 0 auto 18px;
}
.badge-jos__infos .ligne-info { display: flex; gap: 6px; font-size: .84rem; margin-bottom: 5px; color: #fff; }
.badge-jos__infos .label-info { font-weight: 800; text-transform: uppercase; width: 112px; flex-shrink: 0; letter-spacing: .02em; }
.badge-jos__infos .valeur-info { font-weight: 700; }
.badge-jos__dates {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: center; gap: 10px;
}
.badge-jos__date-box { background: #fff; border-radius: 10px; padding: 7px 14px; text-align: center; min-width: 76px; }
.badge-jos__date-box .jour { font-family: var(--police-titre); font-weight: 900; font-size: 1.35rem; color: #DE6A11; line-height: 1; }
.badge-jos__date-box .mois { font-size: .56rem; font-weight: 700; color: #4a4a4a; letter-spacing: .02em; margin-top: 2px; }
.badge-jos__fleche { color: #fff; font-size: 1.1rem; }

/* ---------- Badge membre de commission - maquette officielle JOSPIA (vert & or) ---------- */
.badge-jos-com {
    width: 320px;
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    margin: 0 auto;
    box-shadow: var(--ombre-hover);
    border: 1px solid var(--bordure);
}
.badge-jos-com__entete { width: 100%; display: block; }
.badge-jos-com__corps {
    -webkit-print-color-adjust: exact; print-color-adjust: exact; color-adjust: exact;
    position: relative;
    background: linear-gradient(175deg, #1E6B3D 0%, #12492A 55%, #0B3520 100%);
    padding: 92px 20px 22px;
    text-align: center;
}
.badge-jos-com__corps::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 6px;
    background: linear-gradient(90deg, #C89A3E, #F0D488, #C89A3E);
}
.badge-jos-com__corps::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0; height: 58px;
    background-image: url('../img/silhouette_mosquee_or.svg');
    background-repeat: repeat-x;
    background-position: bottom;
    background-size: 220px 58px;
    opacity: .85;
    pointer-events: none;
}
.badge-jos-com__photo-wrap {
    position: absolute; top: -62px; left: 50%; transform: translateX(-50%);
    width: 158px; height: 158px;
    background: #fff;
    border-radius: 50%;
    padding: 5px;
    box-shadow: 0 6px 16px rgba(0,0,0,.25);
    z-index: 2;
}
.badge-jos-com__photo-wrap img {
    width: 100%; height: 100%; object-fit: cover; object-position: center 15%; border-radius: 50%;
    border: 3px solid #C89A3E; display: block; background: #f2f2f2;
}
.badge-jos-com__nom {
    position: relative; z-index: 1;
    color: #fff; font-family: var(--police-titre); font-weight: 900;
    font-size: 1.28rem; letter-spacing: .01em; text-transform: uppercase;
    text-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.badge-jos-com__divider {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin: 10px 0 14px;
}
.badge-jos-com__divider .ligne { height: 1px; width: 54px; background: rgba(200,154,62,.8); }
.badge-jos-com__divider .losange { width: 7px; height: 7px; background: #C89A3E; transform: rotate(45deg); flex-shrink: 0; }
.badge-jos-com__commission {
    position: relative; z-index: 1;
    color: #E8C468;
    font-family: var(--police-titre); font-weight: 900; text-transform: uppercase;
    font-size: 1.15rem; line-height: 1.25; letter-spacing: .01em;
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
    margin-bottom: 16px;
}
.badge-jos-com__dates {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: center; gap: 10px;
}
.badge-jos-com__date-box { background: #fff; border-radius: 10px; padding: 7px 14px; text-align: center; min-width: 76px; }
.badge-jos-com__date-box .jour { font-family: var(--police-titre); font-weight: 900; font-size: 1.35rem; color: #12492A; line-height: 1; }
.badge-jos-com__date-box .mois { font-size: .56rem; font-weight: 700; color: #4a4a4a; letter-spacing: .02em; margin-top: 2px; }
.badge-jos-com__fleche {
    width: 26px; height: 26px; border-radius: 50%; border: 2px solid #C89A3E;
    display: flex; align-items: center; justify-content: center; color: #C89A3E; font-size: .85rem; flex-shrink: 0;
}

/* ---------- Impression ---------- */
@media print {
    .navbar, footer, .no-print { display: none !important; }
    body { background: #fff; }
    .fiche, .badge-card, .badge-jos, .badge-jos-com, .diplome-card { box-shadow: none; }

    /* Force l'impression des couleurs/dégradés de fond (badges, diplômes, bulletins).
       Sans ceci, les navigateurs impriment souvent en blanc par défaut, ce qui rend
       le texte blanc invisible sur fond « disparu ». */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }
}

/* =====================================================================
   BADGE SEMINARISTE (HTML/CSS)
   ===================================================================== */
/* --- LE CONTENEUR PRINCIPAL --- */
.badge-carte-seminariste {
    position: relative;
    width: 400px; /* Largeur ajustée */
    height: 600px; /* Hauteur ajustée */
    background-color: #ffffff;
    border-radius: 15px;
    overflow: hidden; /* Coupe tout ce qui dépasse, essentiel pour la courbe */
    font-family: 'Cairo', sans-serif;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    margin: 20px auto;
}

/* --- LA COURBE ORANGE --- */
.badge-courbe-orange {
    position: absolute;
    top: 40%; /* Positionnement de la courbe */
    left: -50%;
    width: 200%;
    height: 100%;
    background-color: #d96c14; /* Couleur orange */
    border-radius: 50% 50% 0 0; /* Arc parfait */
    border-top: 5px solid #ffffff; /* Liseré blanc */
    z-index: 1;
}

/* Motif en fond (optionnel si vous avez une image de motif transparente) */
.badge-courbe-orange::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* opacity: 0.1; */
    /* background-image: url('../img/pattern_islamic.png'); */
    /* background-size: cover; */
}

/* --- LE CONTENU (par-dessus l'orange) --- */
.badge-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding-top: 15px;
}

/* Logos & Jospia */
.badge-header-logos {
    width: 90%;
    text-align: center;
}
.badge-header-logos img {
    max-width: 100%;
    max-height: 150px;
    object-fit: contain;
}

/* Photo */
.badge-photo-container {
    margin-top: 25px; /* Pour descendre la photo sur la ligne */
    z-index: 3;
}
.badge-photo {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: 5px solid #ffffff;
    overflow: hidden;
    background-color: #eee;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15); 
}
.badge-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Textes et détails */
.badge-nom {
    color: #ffffff;
    font-weight: 800;
    font-size: 1.5rem;
    text-transform: uppercase;
    margin-top: 10px;
    text-align: center;
    width: 90%;
}

.badge-divider {
    width: 70%;
    height: 2px;
    background-color: #ffffff;
    margin: 8px 0 20px 0;
    position: relative;
}
.badge-divider::after {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background-color: #ffffff;
}

.badge-details {
    width: 80%;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 25px;
}

.badge-details-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.badge-details-label {
    text-align: left;
    width: 45%;
}
.badge-details-value {
    text-align: right;
    width: 55%;
}

/* Dates */
.badge-dates {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: auto;
    margin-bottom: 20px;
}
.badge-date-box {
    background-color: #ffffff;
    color: #d96c14;
    border-radius: 12px;
    padding: 8px 25px;
    text-align: center;
    font-weight: 900;
    font-size: 1.5rem;
    line-height: 1;
}
.badge-date-box span {
    display: block;
    font-size: 0.65rem;
    color: #555;
    margin-top: 5px;
}
.badge-date-arrow {
    color: #ffffff;
    font-weight: 900;
    font-size: 1.8rem;
}

/* Photo : choix fichier ou caméra */
.photo-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.photo-ou { color: var(--texte-doux, #666); font-size: .85rem; }
.cam-fond { position: fixed; inset: 0; background: rgba(0,0,0,.75); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; }
.cam-boite { background: #fff; border-radius: 12px; padding: 14px; width: 100%; max-width: 480px; text-align: center; }
.cam-boite video { width: 100%; max-height: 60vh; border-radius: 8px; background: #000; transform: scaleX(-1); }
.cam-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.cam-msg { margin: 8px 0 0; color: #8a1f1f; font-size: .85rem; }

/* ---------- Paiement Wave ---------- */
.pay-bloc { background: #fff; border: 2px solid #1cc6f4; border-radius: 14px; padding: 20px; margin-bottom: 24px; }
.pay-bloc h3 { margin-top: 0; color: var(--primaire, #1b7a3d); }
.pay-montant { font-size: 2rem; font-weight: 800; color: #0a8f3c; margin-bottom: 8px; }
.pay-etapes { padding-left: 20px; line-height: 1.6; }
.pay-etapes li { margin-bottom: 10px; }
.pay-numero { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 1.4rem; font-weight: 800; letter-spacing: .5px; margin: 6px 0; }
.btn-wave { background: #1cc6f4; color: #fff; font-weight: 700; border-radius: 50px; padding: 10px 22px; display: inline-block; margin-top: 6px; }

/* ---------- Reçu de paiement ---------- */
.recu { border: 2px solid var(--primaire, #1b7a3d); border-radius: 12px; overflow: hidden; background: #fff; }
.recu-entete { display: flex; align-items: center; gap: 14px; background: var(--primaire, #1b7a3d); color: #fff; padding: 14px 18px; }
.recu-bandeau { background: #fff; padding: 10px 14px 0; text-align: center; }
.recu-bandeau img { max-width: 100%; height: auto; max-height: 90px; }
.recu-texte { text-align: justify; text-justify: inter-word; hyphens: auto; line-height: 1.6; margin: 0; padding: 14px 18px 0; }
.recu-infos { text-align: justify; }
.recu-logo { width: 54px; height: 54px; border-radius: 50%; background: #fff; object-fit: cover; }
.recu-titre { font-size: 1.3rem; font-weight: 800; }
.recu-sous { font-size: .8rem; opacity: .9; }
.recu-statut { margin-left: auto; background: #fff; color: #0a8f3c; font-weight: 800; padding: 6px 14px; border-radius: 20px; }
.recu-corps { display: flex; flex-wrap: wrap; gap: 20px; padding: 18px; align-items: flex-start; }
.recu-infos { flex: 1 1 280px; margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; }
.recu-infos dt { color: var(--texte-doux, #666); font-size: .85rem; }
.recu-infos dd { margin: 0; }
.recu-qr { text-align: center; flex: 0 0 auto; max-width: 220px; margin: 0 auto; }
.recu-qr svg { width: 190px; height: 190px; }
.recu-qr small { display: block; color: var(--texte-doux, #666); font-size: .75rem; }
@media print {
    body.imprimer-recu * { visibility: hidden; }
    body.imprimer-recu .recu-zone, body.imprimer-recu .recu-zone * { visibility: visible; }
    body.imprimer-recu .recu-zone { position: absolute; left: 0; top: 0; width: 100%; margin: 0 !important; box-shadow: none; }
    .no-print { display: none !important; }
}

/* ---------- Finance : scanner ---------- */
.scan-zone { max-width: 520px; margin: 0 auto; text-align: center; }
.scan-video-wrap { position: relative; background: #000; border-radius: 12px; overflow: hidden; }
.scan-video-wrap video { width: 100%; display: block; }
.scan-cadre { position: absolute; inset: 15%; border: 3px solid rgba(255,255,255,.85); border-radius: 12px; pointer-events: none; }
.scan-resultat { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 20px; }
.scan-resultat.ok { background: rgba(10, 143, 60, .96); }
.scan-resultat.ko { background: rgba(200, 30, 30, .96); }
.scan-carte { background: #fff; border-radius: 16px; padding: 28px 22px; max-width: 420px; width: 100%; text-align: center; }
.scan-icone { font-size: 6rem; line-height: 1; font-weight: 900; }
.ok .scan-icone { color: #0a8f3c; }
.ko .scan-icone { color: #c81e1e; }
.scan-verdict { font-size: 1.8rem; font-weight: 900; margin: 6px 0 12px; }
.ok .scan-verdict { color: #0a8f3c; }
.ko .scan-verdict { color: #c81e1e; }
.scan-photo { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; margin: 6px auto; display: block; border: 3px solid #0a8f3c; }

/* =====================================================================
   Modèles officiels JOSPIA : certificat de participation + badge commission
   Les visuels (assets/img/modeles) sont les maquettes fournies, sans aucune
   modification ; seules les données dynamiques sont insérées par-dessus,
   aux emplacements exacts de la maquette (unité --u = 1 px de la maquette).
   ===================================================================== */
@font-face { font-family: 'JosBarlow'; font-weight: 700; font-style: normal; font-display: block;
    src: url('../fonts/barlow-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'JosBarlow'; font-weight: 800; font-style: normal; font-display: block;
    src: url('../fonts/barlow-latin-800-normal.woff2') format('woff2'); }

.jos-doc { container-type: inline-size; width: 100%; margin: 0 auto; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.jos-doc__stage { position: relative; overflow: hidden; line-height: 1; font-family: 'JosBarlow', 'Barlow', Arial, sans-serif; }
.jos-doc__modele { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }

/* ---------- Certificat 1280 x 904 ---------- */
.jos-cert { max-width: 980px; box-shadow: 0 6px 24px rgba(0,0,0,.16); }
.jos-cert .jos-doc__stage { --u: calc(100cqw / 1280); aspect-ratio: 1280 / 904; }
.jos-cert__nom span { white-space: nowrap; }
.jos-cert__nom {
    position: absolute; left: calc(var(--u) * 214); width: calc(var(--u) * 910);
    top: calc(var(--u) * 378); height: calc(var(--u) * 54);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; color: #111; text-transform: uppercase; letter-spacing: .03em;
    font-size: calc(var(--u) * 56 * var(--fit, 1));
}

/* ---------- Badge commission (modèle orange) 638 x 1016 ---------- */
.jos-badge { max-width: 380px; }
.page-badges .jos-badge { max-width: 300px; }
.jos-badge .jos-doc__stage { --u: calc(100cqw / 638); aspect-ratio: 638 / 1016; background: #fff; }
.jos-badge__photo {
    position: absolute; left: calc(var(--u) * 28); top: calc(var(--u) * 359);
    width: calc(var(--u) * 192); height: calc(var(--u) * 446);
    object-fit: cover; object-position: 50% 18%; display: block; background: #fff;
}
.jos-badge__n1, .jos-badge__n2 {
    position: absolute; left: calc(var(--u) * 255); width: calc(var(--u) * 365);
    color: #fff; font-weight: 800; display: flex; flex-direction: column; justify-content: flex-start;
}
.jos-badge__n1 {
    top: calc(var(--u) * (450.5 + var(--dy, 0))); height: calc(var(--u) * 73);
    text-transform: uppercase; letter-spacing: .01em;
    font-size: calc(var(--u) * 73 * var(--fit, 1)); line-height: calc(var(--u) * 73);
}
.jos-badge__n2 {
    top: calc(var(--u) * (519.7 + var(--dy, 0)));
    font-size: calc(var(--u) * var(--prs, 44) * var(--fit, 1)); line-height: calc(var(--u) * var(--prp, 44));
}
.jos-badge__n1 span, .jos-badge__n2 span { display: block; white-space: nowrap; }
.jos-badge__band {
    position: absolute; left: calc(var(--u) * 14); width: calc(var(--u) * 610);
    top: calc(var(--u) * 848); height: calc(var(--u) * 140);
    display: flex; align-items: center; justify-content: center;
}
.jos-badge__band .valeur {
    flex: none; text-align: center; font-weight: 800; text-transform: uppercase; letter-spacing: .01em;
    font-size: calc(var(--u) * var(--cos, 80) * var(--fit, 1)); line-height: 1.02;
    background: linear-gradient(180deg, #F28B1E 0%, #EF6C12 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.jos-badge__band .valeur span { display: block; white-space: nowrap; }

@font-face { font-family: 'JosTinos'; font-weight: 400; font-display: block; src: url('../fonts/tinos-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'JosTinos'; font-weight: 700; font-display: block; src: url('../fonts/tinos-latin-700-normal.woff2') format('woff2'); }
.jos-cert__qualite {
    position: absolute; left: calc(var(--u) * 140); width: calc(var(--u) * 1000);
    top: calc(var(--u) * 493); height: calc(var(--u) * 34);
    display: flex; align-items: center; justify-content: center;
    font-family: 'JosTinos', 'Times New Roman', Times, serif; color: #111;
    font-size: calc(var(--u) * 29.2 * var(--fit, 1));
}
.jos-cert__qualite span { white-space: nowrap; }
@page jos-cert { size: A4 landscape; margin: 0; }
@media print {
    .jos-cert-print { page: jos-cert; }
    .jos-cert-print .container { max-width: none; padding: 0; }
    .jos-cert-print .section { padding: 0; }
    .jos-cert { max-width: none; width: 297mm; box-shadow: none; }
    .jos-badge { max-width: 100mm; box-shadow: none; }
    .page-badges .jos-badge { max-width: 88mm; }
}

/* ---------- Séminaristes : badge orange + certificat doré (maquettes officielles) ---------- */
@font-face { font-family: 'JosAnton'; font-weight: 400; font-display: block; src: url('../fonts/anton-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'JosSemi'; font-weight: 700; font-display: block; src: url('../fonts/barlow-semi-condensed-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'JosSemi'; font-weight: 600; font-display: block; src: url('../fonts/barlow-semi-condensed-latin-600-normal.woff2') format('woff2'); }

.jos-badge-sem .jos-doc__stage { --u: calc(100cqw / 638); aspect-ratio: 638 / 1016; background: #fff; }
.jos-badge-sem__photo {
    position: absolute; left: calc(var(--u) * 69); top: calc(var(--u) * 376);
    width: calc(var(--u) * 192); height: calc(var(--u) * 265);
    object-fit: cover; object-position: 50% 20%; display: block; background: #fff;
}
/* zones de texte : --cy = centre vertical, --sz = corps (repère 638 x 1016) */
.jos-badge-sem__t {
    position: absolute; left: calc(var(--u) * var(--x, 276)); width: calc(var(--u) * var(--w, 310));
    top: calc(var(--u) * (var(--cy) - 30)); height: calc(var(--u) * 60);
    display: flex; align-items: center; justify-content: flex-start; color: #fff; font-weight: 800;
    font-size: calc(var(--u) * var(--sz) * var(--fit, 1)); line-height: 1;
}
.jos-badge-sem__t span { white-space: nowrap; }
.jos-badge-sem__t.t-nom { --cy: 418.7; --sz: 46; text-transform: uppercase; letter-spacing: .01em; }
.jos-badge-sem__t.t-pre { --cy: 461.9; --sz: 30; font-weight: 700; }
.jos-badge-sem__t.t-mat { --cy: 517.3; --sz: 42; letter-spacing: .04em; }
.jos-badge-sem__t.t-dor { --cy: 575; --sz: 29; font-family: 'JosSemi', 'Barlow', Arial, sans-serif; font-weight: 600; }
.jos-badge-sem__t.t-niv { --x: 66; --w: 198; --cy: 713.5; --sz: 41; justify-content: center; text-transform: uppercase; }

.jos-cert-sem .jos-doc__stage { --u: calc(100cqw / 1123); aspect-ratio: 1123 / 793; }
.jos-cert-sem__nom {
    position: absolute; left: calc(var(--u) * 190); width: calc(var(--u) * 750);
    top: calc(var(--u) * 343); height: calc(var(--u) * 62);
    display: flex; align-items: center; justify-content: center; color: #000;
    font-family: 'JosAnton', Impact, 'Arial Narrow', sans-serif; font-weight: 400; text-transform: uppercase;
    font-size: calc(var(--u) * 52 * var(--fit, 1)); letter-spacing: .01em;
}
.jos-cert-sem__nom span { white-space: nowrap; }

/* Œil du mot de passe */
.mdp-wrap { position: relative; display: block; width: 100%; }
.mdp-wrap input { width: 100%; padding-right: 48px; }
.mdp-oeil {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: none; border: 0; padding: 8px; cursor: pointer; color: #5b6b62; line-height: 0; border-radius: 8px;
}
.mdp-oeil:hover { color: var(--vert, #0C5B3A); }
.mdp-oeil.actif { color: var(--vert, #0C5B3A); }
.mdp-oeil.actif::after { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; background: currentColor; transform: rotate(-40deg); }

/* En-tête du bulletin = en-tête du badge (logos AEEMCI + JOSPIA) */
.bulletin-entete { text-align: center; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 3px solid transparent; border-image: var(--tricolore, linear-gradient(90deg,#F77F00,#0B8A4E)) 1; }
.bulletin-entete img { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto 10px; }
.bulletin-entete h3 { margin: 0; font-size: 1.35rem; text-transform: uppercase; letter-spacing: .04em; }
.bulletin-entete .sous { color: var(--texte-doux); font-size: .85rem; }