/* Tondraaga — v4 : couleurs exactes du logo (brun #4D3529, ocre #C87817), en-tête robuste,
   paiement Orange Money / Wave avec preuve, animations. Chargé en dernier. */

/* ---------- Couleurs du logo sur les bandeaux ---------- */
.bandeau-demo { background: var(--ocre-pale); color: var(--brun); font-weight: 500; border-bottom: 1px solid #EAD6BC; }
.annonce { background: var(--brun); color: #fff; }
.annonce-piste svg { color: var(--ocre); }
.nav-principale { background: var(--ocre); box-shadow: none; }
.nav-principale .liens-rapides a { color: var(--brun-encre); font-weight: 600; }
.nav-principale .liens-rapides a:hover { border-color: var(--brun); color: var(--brun-encre); }
.nav-principale .liens-rapides a[aria-current="page"] { background: var(--brun); color: #fff; }
.liens-rapides svg { color: var(--brun); }
.btn-categories { background: var(--brun); color: #fff; }
.btn-categories:hover, .btn-categories[aria-expanded="true"] { background: var(--brun-fonce); border-color: transparent; }
.nav-principale .nav-wa { background: var(--brun); color: #fff; }
.nav-principale .nav-wa:hover { background: var(--brun-fonce); }
.nav-principale .nav-wa svg { color: var(--ocre); }
.nav-principale .choix-pays.pays-nav { border-color: var(--brun); background: rgba(255, 255, 255, .25); }
.nav-principale .choix-pays.pays-nav select { color: var(--brun-encre); font-weight: 700; }

.retour-haut { background: var(--ocre); color: var(--brun-encre); font-weight: 700; }
.retour-haut:hover { background: #B86D12; }
.pied-principal { background: var(--brun); color: #EFE3D6; }
#pied h4 { color: #fff; }
#pied a { color: #EFE3D6; }
#pied .slogan { color: var(--ocre); }
#pied .bas { border-top-color: rgba(255, 255, 255, .18); color: #E2D3C3; }
.contact-pied svg { color: var(--ocre); }
.logo-pied { box-shadow: 0 0 0 10px #fff; }
.garanties-bande svg { background: var(--ocre-pale); color: var(--ocre-texte); }

/* ---------- En-tête : jamais de débordement ---------- */
.entete-principal .cadre { flex-wrap: nowrap; }
.livrer-a, .action-texte, .panier-action { text-decoration: none !important; white-space: nowrap; }
.livrer-a span, .action-texte { max-width: 150px; overflow: hidden; }
.livrer-a b, .livrer-a small, .action-texte b, .action-texte small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recherche { min-width: 220px; }
.recherche-cat { flex: none; }
.recherche input { min-width: 0; }
.entete-principal { transition: box-shadow .25s; }
body.defile .entete-principal { box-shadow: 0 6px 20px rgba(36, 22, 15, .10); }
@media (max-width: 1440px) { .masque-tablette { display: none; } }
@media (max-width: 1280px) { .livrer-a { display: none; } }
@media (max-width: 720px) {
  .entete-principal .cadre { flex-wrap: wrap; }
  .recherche { min-width: 0; }
}

/* ---------- Animations ---------- */
#contenu.entree { animation: entree .45s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes entree { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.js-images main img, .js-images .mega img { opacity: 0; transition: opacity .55s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.js-images main img.charge, .js-images .mega img.charge { opacity: 1; }
.carte-media, .visuel, .quad-grille a, .rond-categorie .cercle, .offre-jour .carte-media { background-color: var(--sable); background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 70%); background-size: 220% 100%; animation: miroir 1.6s linear infinite; }
@keyframes miroir { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.btn { transition: background .15s, border-color .15s, color .15s, transform .12s, box-shadow .2s; }
.btn:active { transform: scale(.97); }
.btn-ocre:hover, .btn-brun:hover { box-shadow: 0 6px 16px rgba(36, 22, 15, .16); }

/* ---------- Paiement mobile ---------- */
.montant-a-payer { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; background: var(--creme); border-radius: 12px; padding: 12px 16px; margin: 0 0 16px; }
.montant-a-payer strong { font: 800 1.6rem var(--titre); color: var(--brun); }
.choix-moyens { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.moyen-carte { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px; border: 2px solid var(--gris-200); border-radius: 14px; cursor: pointer; background: #fff; transition: border-color .2s, box-shadow .2s, transform .15s; }
.moyen-carte:hover { border-color: var(--gris-300); transform: translateY(-1px); }
.moyen-carte input { position: absolute; opacity: 0; pointer-events: none; }
.moyen-carte:has(input:checked) { border-color: var(--brun); box-shadow: 0 0 0 4px rgba(77, 53, 41, .08); }
.moyen-carte:has(input:checked)::after { content: "✓"; position: absolute; top: 8px; right: 10px; width: 20px; height: 20px; border-radius: 50%; background: var(--brun); color: #fff; font-size: .72rem; display: grid; place-items: center; animation: bump .35s; }
.moyen-carte:has(input:focus-visible) { outline: 3px solid var(--ocre); outline-offset: 2px; }
.moyen-carte strong { display: block; font-size: .95rem; color: var(--gris-900); }
.moyen-carte small { color: var(--gris-500); font-size: .76rem; }
.moyen-carte.desactive { opacity: .5; cursor: not-allowed; }
.logo-moyen { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; color: #fff; }
.logo-moyen.om { background: #FF7900; color: #fff; display: flex; flex-direction: column; justify-content: center; line-height: 1; font-family: Arial, sans-serif; }
.logo-moyen.om b { font-size: .64rem; font-weight: 700; }
.logo-moyen.om i { font-size: .6rem; font-style: normal; }
.logo-moyen.wave { background: #1DC3FF; }
.logo-moyen.guichet, .logo-moyen.carte { background: var(--sable); color: var(--brun); }
.logo-moyen svg { width: 22px; height: 22px; }
.volet-moyen { animation: apparait .3s ease-out; }
.instructions-paiement { margin-top: 14px; background: var(--creme); border: 1px solid var(--gris-200); border-radius: 14px; padding: 16px 18px; }
.instructions-paiement ol { margin: 0 0 12px; padding-left: 0; list-style: none; counter-reset: etape; display: grid; gap: 8px; }
.instructions-paiement li { counter-increment: etape; display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; }
.instructions-paiement li::before { content: counter(etape); flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--brun); color: #fff; font-size: .76rem; font-weight: 700; display: grid; place-items: center; }
.copier-ligne { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px dashed var(--gris-300); border-radius: 10px; padding: 8px 10px 8px 14px; margin-top: 8px; }
.copier-ligne span { font-size: .8rem; color: var(--gris-500); min-width: 110px; }
.copier-ligne b { flex: 1; font: 800 1.15rem var(--titre); color: var(--brun); letter-spacing: .03em; }
.btn-copier { border: 0; background: var(--ocre-pale); color: var(--ocre-texte); font-weight: 700; font-size: .8rem; padding: 6px 12px; border-radius: 8px; cursor: pointer; }
.btn-copier:hover { background: var(--ocre); color: var(--brun-encre); }
.preuve { margin-top: 18px; animation: apparait .35s ease-out; }
.preuve h3 { font-size: 1.05rem; margin-bottom: 12px; }
.depot-capture { position: relative; display: block !important; border: 2px dashed var(--gris-300); border-radius: 14px; padding: 18px; text-align: center; cursor: pointer; background: #fff; transition: border-color .2s, background .2s; }
.depot-capture:hover { border-color: var(--ocre); background: var(--creme); }
.depot-capture input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.vide-capture { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--gris-700); font-weight: 400; }
.vide-capture svg { width: 30px; height: 30px; color: var(--ocre-texte); }
.vide-capture b { color: var(--brun); }
.vide-capture small { font-size: .78rem; color: var(--gris-500); }
.depot-capture.rempli { border-style: solid; border-color: var(--succes); }
.depot-capture.rempli .vide-capture b::after { content: " · remplacer"; font-weight: 400; color: var(--gris-500); }
.apercu-capture { display: block; max-height: 220px; margin: 12px auto 0; border-radius: 10px; box-shadow: var(--ombre); animation: apparait .35s; }
.garanties-paiement { margin-top: 16px; }
.garanties-paiement a { color: var(--ocre-texte); font-weight: 600; }

/* Résumé de preuve, confirmation */
.resume-preuve { display: flex; align-items: center; gap: 12px; text-align: left; background: #fff; border: 1px solid var(--gris-200); border-radius: 14px; padding: 12px 14px; margin: 16px 0; font-size: .9rem; }
.resume-preuve small { color: var(--gris-500); }
.resume-preuve img { margin-left: auto; width: 64px; height: 64px; object-fit: cover; border-radius: 10px; cursor: zoom-in; }
.coche-animee { width: 76px; height: 76px; margin: 0 auto 16px; }
.coche-animee svg { width: 100%; height: 100%; }
.coche-animee circle { fill: var(--ocre-pale); stroke: var(--ocre); stroke-width: 2.5; stroke-dasharray: 152; stroke-dashoffset: 152; animation: trace .7s ease-out forwards; }
.coche-animee path { fill: none; stroke: var(--brun); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: trace .45s .55s ease-out forwards; }
@keyframes trace { to { stroke-dashoffset: 0; } }
.etapes-confirmation { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 18px 0 6px; font-size: .82rem; color: var(--gris-500); }
.etapes-confirmation span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--gris-200); }
.etapes-confirmation span.fait { background: var(--brun); color: #fff; border-color: var(--brun); }
.etapes-confirmation svg { width: 15px; height: 15px; }
.etapes-confirmation i { width: 24px; height: 2px; background: var(--gris-300); }
.btn-wa svg { width: 18px; height: 18px; }

/* Vérification des paiements (équipe) */
.carte-preuve { display: grid; grid-template-columns: 150px 1fr; gap: 16px; background: #fff; border: 1px solid var(--gris-200); border-left: 4px solid var(--ocre); border-radius: 14px; padding: 14px; margin-bottom: 12px; animation: apparait .35s; }
.carte-preuve.confirme { border-left-color: var(--succes); opacity: .85; }
.carte-preuve.refuse { border-left-color: var(--alerte); opacity: .85; }
.vignette { border: 0; padding: 0; background: var(--sable); border-radius: 10px; overflow: hidden; cursor: zoom-in; height: 190px; }
.vignette img { width: 100%; height: 100%; object-fit: cover; }
.corps-preuve .haut { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.corps-preuve p { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: .88rem; }
.corps-preuve .logo-moyen { width: 30px; height: 30px; border-radius: 8px; }
.corps-preuve .logo-moyen.om b { font-size: .45rem; }
.corps-preuve .logo-moyen.om i { font-size: .42rem; }
.corps-preuve code { background: var(--creme); padding: 1px 6px; border-radius: 5px; }
.visionneuse { position: fixed; inset: 0; z-index: 100; background: rgba(20, 12, 8, .86); display: grid; place-items: center; padding: 24px; animation: apparait .2s; cursor: zoom-out; }
.visionneuse img { max-width: 100%; max-height: 90vh; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.visionneuse button { position: absolute; top: 18px; right: 22px; width: 42px; height: 42px; border-radius: 50%; border: 0; background: #fff; color: var(--brun); font-size: 1.5rem; cursor: pointer; }

@media (max-width: 720px) {
  .carte-preuve { grid-template-columns: 1fr; }
  .vignette { height: 220px; }
  .copier-ligne span { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #contenu.entree, .carte-media, .visuel, .quad-grille a, .rond-categorie .cercle { animation: none !important; }
  .coche-animee circle, .coche-animee path { animation: none; stroke-dashoffset: 0; }
}
@media print { .js-images main img { opacity: 1 !important; } }