/* =========================================================
   Radio Djawoampo — base.css
   Variables, remise à zéro, typographie, boutons, formulaires,
   utilitaires, modale, toast.
   ========================================================= */
:root{
  --vert:#2FA84F;
  --vert-fonce:#147A3D;
  --vert-burkina:#009E49;
  --vert-nuit:#082B17;
  --vert-pale:#EAF6EE;
  --orange:#F0821E;
  --orange-fonce:#C96A0E;
  --orange-pale:#FFF3E6;
  --noir:#141414;
  --sable:#FFF9F0;
  --sable-fonce:#F3EAD8;
  --texte:#20241F;
  --texte-doux:#5c625d;
  --blanc:#fff;
  --gris-clair:#F3EFE7;
  --bord:#ECE5D8;

  --ombre:0 1px 3px rgba(0,0,0,.05),0 4px 14px rgba(0,0,0,.05);
  --ombre-forte:0 12px 32px rgba(0,0,0,.14);
  --radius:14px;
  --radius-sm:10px;

  --header-h:68px;
  --player-h:88px;           /* hauteur du lecteur global (desktop) */
  --safe-b:env(safe-area-inset-bottom,0px);

  --admin-bg:#1f2937;--admin-panel:#111827;--admin-accent:#3b82f6;
  --admin-success:#10b981;--admin-warn:#f59e0b;--admin-danger:#ef4444;
}
@media (max-width:699px){ :root{ --player-h:68px; --header-h:60px; } }

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{max-width:100%;overflow-x:hidden}
body{
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  background:var(--sable);color:var(--texte);line-height:1.55;
  overflow-wrap:break-word;
  /* réserve la place du lecteur fixe en bas */
  padding-bottom:calc(var(--player-h) + var(--safe-b));
}
body.admin-mode{padding-bottom:0}
body.no-scroll{overflow:hidden}
img{max-width:100%;display:block}
a{color:var(--vert-fonce);text-decoration:none}
button{cursor:pointer;font-family:inherit;font-size:inherit;color:inherit}
input,select,textarea{font-family:inherit;font-size:16px} /* 16px = pas de zoom auto sur iPhone */
h1,h2,h3,h4,h5{line-height:1.25}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

.ico{width:1.25em;height:1.25em;fill:currentColor;flex-shrink:0;display:inline-block;vertical-align:middle}

.container{width:min(1200px,100% - 32px);margin-inline:auto}
section{padding:2.4rem 0}
.sec-tight{padding:1.8rem 0}
.bg-white{background:#fff}
.center{text-align:center}
.muted{color:var(--texte-doux)}
.mt-sm{margin-top:.6rem}.mt-md{margin-top:1rem}.mt-lg{margin-top:2.4rem}
.mb-sm{margin-bottom:.6rem}.mb-md{margin-bottom:1.2rem}
.note-center{margin-top:1rem;color:var(--texte-doux);font-size:.85rem;text-align:center}
.note-box{margin-top:.8rem;font-size:.86rem;color:var(--texte-doux);background:#FFF8EE;border-left:4px solid var(--orange);border-radius:8px;padding:.8rem 1rem}
.link-strong{font-weight:700}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

.skip-link{position:absolute;left:-999px;top:0;background:var(--vert-fonce);color:#fff;padding:.6rem 1rem;z-index:2000;border-radius:0 0 8px 0}
.skip-link:focus{left:0}

/* Vues (SPA) */
.view{display:none}
.view.active{display:block;animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Titres de section */
.sec-title{display:flex;align-items:center;gap:.7rem;margin-bottom:1.2rem;flex-wrap:wrap}
.sec-title h3{font-size:1.35rem;color:var(--vert-fonce);border-left:6px solid var(--orange);padding-left:.65rem;line-height:1.2}
.sec-title small{color:var(--orange-fonce);font-weight:700;font-size:.8rem}
.sec-more{margin-left:auto;font-weight:700;font-size:.88rem;white-space:nowrap}
.sec-banner-img{width:100%;max-height:220px;object-fit:cover;border-radius:12px;margin-bottom:1.2rem}
@media (max-width:699px){.sec-title h3{font-size:1.15rem}}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;background:var(--orange);color:#fff;font-weight:800;
  padding:.72rem 1.4rem;border-radius:50px;border:none;font-size:.95rem;line-height:1.2;transition:background .2s,transform .15s;text-align:center}
.btn:hover{background:var(--orange-fonce)}
.btn:active{transform:scale(.97)}
.btn-vert{background:var(--vert)}.btn-vert:hover{background:var(--vert-fonce)}
.btn-sm{padding:.45rem .9rem;font-size:.82rem}
.btn-lg{padding:.9rem 1.6rem;font-size:1rem}
.btn-ghost{background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.55);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.25)}
.btn-wa-soft{background:#25D366}.btn-wa-soft:hover{background:#1da851}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;border:none;background:var(--gris-clair);color:var(--texte);flex-shrink:0}
.icon-btn .ico{width:22px;height:22px}
.icon-btn:hover{background:#e7e0d2}

/* Bouton « Écouter » des cartes (envoie vers le lecteur global) */
.btn-listen{display:inline-flex;align-items:center;gap:.4rem;background:var(--vert-fonce);color:#fff;border:none;padding:.5rem 1rem;border-radius:50px;font-weight:700;font-size:.85rem;transition:background .2s}
.btn-listen .ico{width:18px;height:18px}
.btn-listen:hover{background:var(--vert)}
.btn-listen.is-playing{background:var(--orange)}
.btn-listen.is-playing .eq-mini{display:inline-flex}
.btn-tts{display:inline-flex;align-items:center;gap:.4rem;background:transparent;color:var(--vert-fonce);border:1.5px solid var(--vert-fonce);padding:.42rem .9rem;border-radius:50px;font-weight:700;font-size:.82rem}
.btn-tts.playing{background:#dc2626;border-color:#dc2626;color:#fff}
.eq-mini{display:none;gap:2px;align-items:flex-end;height:12px}
.eq-mini i{width:3px;background:#fff;border-radius:2px;animation:eq 1s ease-in-out infinite}
.eq-mini i:nth-child(2){animation-delay:.2s}.eq-mini i:nth-child(3){animation-delay:.4s}
@keyframes eq{0%,100%{height:25%}50%{height:100%}}
.card-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.7rem;align-items:center}

/* Formulaires publics */
.form-box{background:#fff;border-radius:var(--radius);box-shadow:var(--ombre);padding:1.6rem;max-width:720px;margin:0 auto}
.form-box h4{color:var(--vert-fonce);margin-bottom:.4rem}
.form-box label{display:block;font-weight:600;margin:.7rem 0 .3rem;color:var(--vert-fonce);font-size:.88rem}
.form-box input,.form-box textarea,.form-box select{width:100%;padding:.72rem .8rem;border:1px solid #ddd;border-radius:8px;background:#fff}
.form-box textarea{min-height:110px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
@media (max-width:599px){.form-row{grid-template-columns:1fr;gap:0}.form-box{padding:1.2rem}}
.success-box{background:#D1FAE5;border:1px solid var(--admin-success);padding:1.4rem;border-radius:8px;color:#065F46;text-align:center}

/* Tableaux */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius)}
.data-table{width:100%;border-collapse:collapse;background:#fff;box-shadow:var(--ombre)}
.data-table th{background:var(--vert-fonce);color:#fff;padding:.7rem;text-align:left;font-size:.84rem}
.data-table td{padding:.7rem;border-bottom:1px solid #eee;font-size:.9rem}

/* Modale (publique = claire, admin = sombre) */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:flex-start;justify-content:center;z-index:1500;padding:1.5rem 1rem;overflow-y:auto}
.modal-overlay.active{display:flex}
.modal{background:var(--admin-panel);color:#e5e7eb;border-radius:14px;max-width:880px;width:100%;padding:1.6rem;margin:auto;box-shadow:var(--ombre-forte)}
.modal h3{color:#fff;margin-bottom:1.1rem;display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.modal .modal-x{background:rgba(255,255,255,.1);border:none;color:inherit;width:34px;height:34px;border-radius:50%;font-size:1.3rem;line-height:1;flex-shrink:0}
.modal-footer{display:flex;justify-content:flex-end;gap:.6rem;margin-top:1.3rem;flex-wrap:wrap}
.modal.light{background:#fff;color:var(--texte);max-width:620px}
.modal.light h3{color:var(--vert-fonce)}
.modal.light .modal-x{background:var(--gris-clair)}
.modal.light .modal-list{padding-left:1.2rem;line-height:1.75}
.modal.light .modal-list li{margin-bottom:.35rem}
@media (max-width:599px){.modal-overlay{padding:0;align-items:flex-end}.modal{border-radius:18px 18px 0 0;margin:0;max-height:92vh;overflow-y:auto;padding:1.3rem}}

/* Toast (au-dessus du lecteur) */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--player-h) + var(--safe-b) + 14px);background:var(--vert-fonce);color:#fff;
  padding:.8rem 1.2rem;border-radius:10px;z-index:2000;display:none;max-width:min(92vw,480px);box-shadow:var(--ombre-forte);font-size:.9rem;text-align:center}
.toast.error{background:#b91c1c}.toast.show{display:block;animation:fadeIn .2s}
body.admin-mode .toast{bottom:1.5rem}