/* ============================================================
   Feuille de style — Prêches MP3
   Sobre, lisible, pensée pour les petits écrans et les connexions lentes
   ============================================================ */

:root {
    --vert:        #0f6b4f;
    --vert-clair:  #e6f3ee;
    --or:          #c8922a;
    --texte:       #1d2321;
    --gris:        #6b7470;
    --gris-clair:  #f4f6f5;
    --bordure:     #dfe4e2;
    --rouge:       #b23b2e;
    --rouge-clair: #fbeceb;
    --orange:      #9a6a12;
    --orange-clair:#fdf4e2;
    --rayon:       10px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    color: var(--texte);
    background: #fbfcfc;
}

.conteneur {
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ---------- En-tête ---------- */
.entete {
    background: var(--vert);
    color: #fff;
    padding: 12px 0;
}
.entete-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}
.logo {
    color: #fff;
    font-weight: 700;
    font-size: 1.15rem;
    text-decoration: none;
}
.nav {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}
.nav a { color: #fff; text-decoration: none; font-size: .95rem; }
.nav a:hover { text-decoration: underline; }
.nav .bouton { text-decoration: none; }

body.admin .entete { background: #253331; }

/* ---------- Textes ---------- */
h1 { font-size: 1.5rem; margin: 24px 0 8px; }
h2 { font-size: 1.15rem; margin: 0 0 10px; }
.intro { color: var(--gris); margin-top: 0; }
.petit { font-size: .87rem; color: var(--gris); }
.fil {
    margin: 18px 0 0;
    font-size: .9rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.fil a { color: var(--vert); text-decoration: none; }
.fil a:hover { text-decoration: underline; }
.fil-sep { color: var(--gris); }
.fil-actuel { color: var(--gris); font-weight: 600; }
.titre-section {
    font-size: 1rem;
    margin: 26px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--bordure);
    color: var(--gris);
    text-transform: uppercase;
    letter-spacing: .04em;
}
a { color: var(--vert); }

/* ---------- Cartes ---------- */
.carte {
    background: #fff;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 18px;
    margin: 16px 0;
}
.carte-etroite { max-width: 460px; margin: 28px auto; }
.carte-ok      { border-color: #bcdccc; background: #f3faf6; }
.carte-attente { border-color: #e9d5a6; background: var(--orange-clair); }
.carte-promo   { border-color: #d9c38a; background: #fffdf6; }

/* ---------- Alertes ---------- */
.alerte {
    border-radius: 8px;
    padding: 11px 14px;
    margin: 14px 0;
    font-size: .95rem;
}
.alerte-erreur { background: var(--rouge-clair); color: var(--rouge); }
.alerte-succes { background: #e8f5ee; color: #15664a; }
.alerte-info   { background: var(--orange-clair); color: var(--orange); }

/* ---------- Formulaires ---------- */
.formulaire { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.formulaire label { display: block; font-weight: 600; font-size: .93rem; }
.formulaire small { display: block; font-weight: 400; color: var(--gris); margin-top: 3px; }
input[type=text], input[type=tel], input[type=password], input[type=search], input[type=file], select {
    width: 100%;
    margin-top: 5px;
    padding: 11px 12px;
    font-size: 1rem;
    font-family: inherit;
    border: 1px solid var(--bordure);
    border-radius: 8px;
    background: #fff;
}
input:focus, select:focus { outline: 2px solid var(--vert); border-color: var(--vert); }

.bouton {
    display: inline-block;
    padding: 11px 18px;
    font-size: 1rem;
    font-family: inherit;
    font-weight: 600;
    color: #fff;
    background: var(--vert);
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}
.bouton:hover { background: #0c5740; }
.bouton:disabled { opacity: .45; cursor: not-allowed; }
.bouton-petit { padding: 7px 13px; font-size: .9rem; }
.bouton-clair { background: #fff; color: var(--vert); border: 1px solid var(--vert); }
.bouton-clair:hover { background: var(--vert-clair); }
.bouton-rouge { background: var(--rouge); }
.bouton-rouge:hover { background: #8f2e23; }

/* ---------- Formules d'abonnement ---------- */
.formules { border: 0; padding: 0; margin: 0; }
.formules legend { font-weight: 600; font-size: .93rem; padding: 0; margin-bottom: 8px; }
.formule {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--bordure);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 8px;
    cursor: pointer;
    font-weight: 400;
}
.formule:has(input:checked) { border-color: var(--vert); background: var(--vert-clair); }
.formule input { width: auto; margin: 0; }
.formule-corps { display: flex; justify-content: space-between; width: 100%; gap: 10px; }
.prix { color: var(--vert); font-weight: 700; }

/* ---------- Bloc paiement ---------- */
.paiement { margin-bottom: 14px; }
.numero {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--orange);
    margin: 4px 0;
}
.reference {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    background: #fff;
    border: 1px dashed var(--orange);
    padding: 2px 8px;
    border-radius: 6px;
}

/* ---------- Grille des dossiers ---------- */
.grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin: 18px 0 30px;
}
.tuile {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    overflow: hidden;
    text-decoration: none;
    color: var(--texte);
    transition: border-color .15s, transform .15s;
}
.tuile:hover { border-color: var(--vert); transform: translateY(-2px); }

/* Zone image de la tuile.
   La photo est affichée EN ENTIER (object-fit: contain) : un portrait n'est
   jamais coupé au niveau du visage. Une copie floutée et agrandie remplit
   l'arrière-plan pour éviter les bandes vides sur les côtés. */
.tuile-image {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--gris-clair);
    overflow: hidden;
}
.tuile-fond {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(16px) brightness(1.04);
    transform: scale(1.25);   /* évite les bords translucides dus au flou */
    display: block;
}
.tuile-photo {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;      /* toute la photo reste visible */
    display: block;
}
.tuile-image-vide {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--vert-clair);
}

.tuile-corps {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px;
}
.tuile:hover .tuile-corps { background: var(--vert-clair); }
.tuile-retour .tuile-image-vide { background: var(--gris-clair); }
.tuile-retour .tuile-titre { color: var(--gris); font-weight: 500; }
.tuile-icone { font-size: 1.7rem; opacity: .75; }
.tuile-titre { font-weight: 600; word-break: break-word; line-height: 1.3; }
.tuile-info { font-size: .83rem; color: var(--gris); }

/* en-tête de la page d'un dossier */
.dossier-entete.avec-photo {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    margin-top: 10px;
}
.dossier-photo {
    width: 128px;
    height: 128px;
    object-fit: cover;
    object-position: center 25%;   /* garde le visage quand la photo est recadrée */
    border-radius: var(--rayon);
    border: 1px solid var(--bordure);
    flex-shrink: 0;
}
.dossier-texte { min-width: 0; }
.dossier-entete.avec-photo h1 { margin-top: 4px; }

/* ---------- Liste des audios ---------- */
.liste-audio { list-style: none; padding: 0; margin: 18px 0 30px; }
.piste {
    background: #fff;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 14px;
    margin-bottom: 10px;
}
.piste-entete {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.piste-titre { font-weight: 600; word-break: break-word; }
.piste-taille { color: var(--gris); font-size: .83rem; white-space: nowrap; }
.piste audio { width: 100%; }
.lien-dl { display: inline-block; margin-top: 6px; font-size: .88rem; text-decoration: none; }
.piste-verrou { color: var(--gris); font-size: .93rem; }

.tarifs { margin: 8px 0; padding-left: 20px; }

/* ---------- Badges ---------- */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
}
.badge-ok  { background: #d9f0e3; color: #15664a; }
.badge-off { background: #f0e4c6; color: var(--orange); }
.badge-non { background: #f6d9d5; color: var(--rouge); }
.badge-collab { background: #e3e8f7; color: #30459b; }
.badge-admin  { background: #f3e4d6; color: #8a4b17; }

/* ---------- Dépôt de fichiers ---------- */
.barre-collab { margin: 16px 0; }

.apercu-fichier {
    padding: 10px 12px;
    background: var(--gris-clair);
    border-radius: 8px;
    font-size: .9rem;
    word-break: break-word;
}
.apercu-trop-gros { background: var(--rouge-clair); color: var(--rouge); font-weight: 600; }

.barre {
    height: 16px;
    background: var(--bordure);
    border-radius: 999px;
    overflow: hidden;
    margin: 10px 0;
}
.barre-remplie {
    height: 100%;
    width: 0;
    background: var(--vert);
    border-radius: 999px;
    transition: width .2s linear;
}
.barre-fin {
    background: repeating-linear-gradient(45deg,
        var(--vert), var(--vert) 10px, #148a66 10px, #148a66 20px);
}

/* ---------- Statistiques ---------- */
.chiffres {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin: 16px 0;
}
.chiffre {
    background: #fff;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 16px;
}
.chiffre-valeur {
    display: block;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--texte);
}
.chiffre-libelle { display: block; font-size: .85rem; color: var(--gris); margin-top: 2px; line-height: 1.35; }
.chiffre-argent { border-color: #bcdccc; background: #f5fbf8; }
.chiffre-argent .chiffre-valeur { color: #0c5740; }
.chiffre-attente { border-color: #e9d5a6; background: var(--orange-clair); }
.chiffre-attente .chiffre-valeur { color: var(--orange); }

.note-argent {
    background: var(--gris-clair);
    border-radius: 8px;
    padding: 10px 12px;
    margin: -4px 0 18px;
    line-height: 1.5;
}

/* mini-barres dans le tableau des recettes mensuelles */
.tableau-mois .col-barre { width: 34%; }
.barre-mois {
    display: block;
    height: 10px;
    min-width: 2px;
    background: #077a53;
    border-radius: 3px;
}
.tableau tfoot td { border-top: 2px solid var(--bordure); border-bottom: 0; }

.legende { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 10px; font-size: .88rem; color: var(--gris); }
.legende-item { display: inline-flex; align-items: center; gap: 6px; }
.pastille { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

.graphe-cadre { position: relative; }
.graphe { width: 100%; height: auto; display: block; overflow: visible; }
.barre-jour .zone-survol { cursor: default; }
.barre-jour:hover rect:not(.zone-survol) { opacity: .78; }

.infobulle {
    position: absolute;
    top: -6px;
    transform: translateX(-50%);
    background: var(--texte);
    color: #fff;
    font-size: .8rem;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 5;
}

.details-chiffres { margin-top: 14px; }
.details-chiffres summary {
    cursor: pointer;
    font-size: .88rem;
    color: var(--vert);
    padding: 6px 0;
}
.details-chiffres .tableau { margin-top: 8px; }

.piste-stats { font-size: .8rem; color: var(--gris); margin-bottom: 6px; }
.liste-simple { font-size: .9rem; }
.liste-simple li { margin-bottom: 3px; word-break: break-word; }

.code {
    background: var(--gris-clair);
    border: 1px solid var(--bordure);
    border-radius: 8px;
    padding: 12px;
    overflow-x: auto;
    font-size: .85rem;
    white-space: pre;
}
.formulaire-compact { margin-bottom: 10px; }
.formulaire-compact label { display: block; font-weight: 600; }
textarea {
    width: 100%;
    margin-top: 5px;
    padding: 10px 12px;
    font-size: .95rem;
    font-family: inherit;
    border: 1px solid var(--bordure);
    border-radius: 8px;
    resize: vertical;
}
textarea:focus { outline: 2px solid var(--vert); border-color: var(--vert); }
.entete .badge { background: rgba(255,255,255,.18); color: #fff; }

/* ---------- Tableaux ---------- */
.tableau { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tableau th, .tableau td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--bordure); }
.tableau th { color: var(--gris); font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; }

/* ---------- Administration ---------- */
.onglets { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.onglet {
    padding: 7px 13px;
    border: 1px solid var(--bordure);
    border-radius: 999px;
    background: #fff;
    text-decoration: none;
    font-size: .9rem;
    color: var(--texte);
}
.onglet.actif { background: var(--vert); color: #fff; border-color: var(--vert); }

.demande-entete { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.numero-petit { font-size: 1.05rem; }
.demande-corps { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.preuve img {
    max-width: 240px;
    max-height: 300px;
    border: 1px solid var(--bordure);
    border-radius: 8px;
}
.preuve-vide {
    width: 240px; height: 120px;
    display: flex; align-items: center; justify-content: center;
    border: 1px dashed var(--bordure); border-radius: 8px;
    color: var(--gris); font-size: .88rem; text-align: center;
}
.actions { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 240px; }
.actions-ligne { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
.ligne-action { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ligne-action input[type=text] { width: auto; flex: 1; min-width: 160px; margin: 0; }
.ligne-action select { width: auto; margin: 0; }
.recherche { display: flex; gap: 8px; margin: 14px 0; }
.recherche input { margin: 0; }

/* ---------- Pied de page ---------- */
.pied {
    margin-top: 40px;
    padding: 22px 0;
    border-top: 1px solid var(--bordure);
    background: var(--gris-clair);
    font-size: .9rem;
    color: var(--gris);
}
.pied p { margin: 3px 0; }
.pied-alerte {
    display: inline-block;
    margin-top: 8px !important;
    padding: 8px 12px;
    background: var(--orange-clair);
    border-radius: 8px;
    color: var(--orange);
    font-size: .88rem;
}
.pied-alerte a { color: var(--orange); font-weight: 600; }

/* ---------- Téléphones ---------- */
@media (max-width: 560px) {
    h1 { font-size: 1.3rem; }
    .tableau thead { display: none; }
    .tableau, .tableau tbody, .tableau tr, .tableau td { display: block; width: 100%; }
    .tableau tr { border: 1px solid var(--bordure); border-radius: 8px; margin-bottom: 10px; padding: 6px; }
    .tableau td { border: 0; padding: 5px 6px; }
    .tableau td::before {
        content: attr(data-libelle) " : ";
        font-weight: 600;
        color: var(--gris);
    }
    .preuve img, .preuve-vide { max-width: 100%; width: 100%; }
    .tableau-mois .col-barre { display: none; }
    .grille { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
    .dossier-photo { width: 92px; height: 92px; }
}