/* ============================================================
   theme.css — la BASE COMMUNE de présentation de Kivucascade
   Chargé par toutes les pages, APRÈS leur propre style.

   Principe : ce fichier règle le RENDU (polices, interligne, chiffres,
   couleurs, petits effets), sans toucher à la DISPOSITION des pages.
   Les règles écrites avec « :where(...) » ont une priorité nulle :
   elles ne s'appliquent que là où la page n'a rien décidé elle-même.
   ============================================================ */

/* ---------- 1. Les couleurs et réglages, définis UNE SEULE fois ---------- */
:root {
  /* Couleurs de la marque (les mêmes valeurs que dans chaque page) */
  --lac: #0E4D64;          /* bleu lac : en-têtes, liens, prix */
  --lac-clair: #1B7A8C;
  --mais: #E8A33D;         /* maïs : boutons d'action */
  --brume: #EEF3F1;        /* fond des pages */
  --basalte: #22262A;      /* texte principal */
  --blanc: #FFFFFF;
  --gris: #4a5358;         /* texte secondaire */
  --erreur: #B3261E;
  --whatsapp: #1DA851;
  --bordure: #d6e0dd;

  /* Polices */
  --police-texte: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --police-titre: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;

  /* Arrondis et ombres (pour les finitions de l'étape 2) */
  --rayon: 12px;
  --rayon-petit: 8px;
  --ombre: 0 1px 2px rgba(34, 38, 42, .06), 0 2px 8px rgba(34, 38, 42, .06);
  --ombre-forte: 0 4px 14px rgba(34, 38, 42, .12);
}

/* ---------- 2. Le texte : lisible et confortable ---------- */
html {
  -webkit-text-size-adjust: 100%;      /* le téléphone ne grossit pas le texte tout seul */
}
body {
  line-height: 1.55;                   /* 📏 interligne du texte courant (avant : ~1,2, trop serré) */
  -webkit-font-smoothing: antialiased; /* lettres plus fines et nettes (Mac, iPhone) */
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;  /* meilleur espacement entre certaines lettres */
}

/* Titres : police de titre, interligne serré, lignes équilibrées */
:where(h1, h2, h3) {
  font-family: var(--police-titre);
  line-height: 1.18;
  letter-spacing: -0.01em;             /* les grandes lettres paraissent mieux un peu resserrées */
}
:where(h1, h2, h3) { text-wrap: balance; }   /* évite un mot tout seul sur la dernière ligne */
:where(p, li, dd) { text-wrap: pretty; }

/* Les éléments de formulaire et les boutons gardent un interligne plus serré
   (sinon ils deviendraient plus hauts avec l'interligne du texte) */
button, input, select, textarea {
  line-height: 1.25;
}

/* ---------- 3. Les chiffres alignés (prix, compteurs) ---------- */
/* Tous les chiffres ont la même largeur : les montants s'alignent d'une carte à l'autre */
[class*="prix"], [class*="montant"], .compteur, .nb, .nb-msg, time {
  font-variant-numeric: tabular-nums;
}

/* ---------- 4. Petits détails de finition ---------- */
/* Un léger effet quand on appuie sur un bouton */
button {
  transition: background-color .15s ease, box-shadow .15s ease, opacity .15s ease, transform .08s ease;
}
/* (priorité nulle : les boutons déjà déplacés par la page, comme les flèches
   de la galerie, gardent leur position) */
:where(button:not(:disabled):active) {
  transform: translateY(1px);
}

/* Liens : soulignement fin et un peu décalé (plus élégant) */
a {
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

/* Texte sélectionné aux couleurs du site */
::selection {
  background: rgba(232, 163, 61, .35);
  color: inherit;
}

/* Focus clavier visible partout (accessibilité) — les pages peuvent préciser le leur */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--mais);
  outline-offset: 2px;
}

/* Les images ne débordent jamais de leur cadre */
:where(img) {
  max-width: 100%;
}

/* ---------- 5. Les LISTES LONGUES qui défilent dans leur propre cadre ---------- */
/* Ajouter la classe « defilante » à une liste : elle garde une hauteur raisonnable et défile
   à l'intérieur, au lieu d'allonger toute la page. Une petite ombre en haut ou en bas
   apparaît quand il reste des éléments cachés (astuce « background-attachment: local »). */
.defilante {
  --fond-liste: var(--brume);
  max-height: min(68vh, 760px);
  overflow-y: auto;
  overscroll-behavior: contain;          /* arrivé au bout, la page ne se met pas à défiler toute seule */
  padding: 4px 6px 4px 2px;
  scrollbar-width: thin;
  scrollbar-color: #b9c6c2 transparent;
}
/* L'ombre « il reste du contenu » : SEULEMENT quand la liste déborde vraiment (classe « deborde », posée par pwa.js).
   Sinon, une petite bande de couleur restait visible sous une liste courte (« barre blanche vide »). */
.defilante.deborde {
  background:
    linear-gradient(var(--fond-liste) 30%, transparent) center top / 100% 28px no-repeat local,
    linear-gradient(transparent, var(--fond-liste) 70%) center bottom / 100% 28px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(34, 38, 42, .16), transparent) center top / 100% 12px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(34, 38, 42, .16), transparent) center bottom / 100% 12px no-repeat scroll;
}
.defilante.sur-blanc { --fond-liste: #fff; max-height: min(45vh, 420px); }   /* dans un cadre blanc, plus court */
.defilante.courte { max-height: min(50vh, 520px); }                            /* quand d'autres choses suivent (ex. avis) */
.defilante::-webkit-scrollbar { width: 8px; }
.defilante::-webkit-scrollbar-thumb { background: #b9c6c2; border-radius: 4px; }
.defilante::-webkit-scrollbar-track { background: transparent; }

/* 🙈 Un élément marqué « hidden » est TOUJOURS caché, même si un style lui donne « display: flex »
   (sans cette règle, la case des conditions restait visible chez les vendeurs existants) */
[hidden] { display: none !important; }

/* ---------- 6. CHARGEMENT : trois points qui sautillent ---------- */
/* <span class="points-chargement" role="status" aria-label="Chargement"><span></span><span></span><span></span></span> */
.points-chargement { display: inline-flex; gap: 6px; align-items: center; justify-content: center; padding: 10px 0; }
.points-chargement span { width: 10px; height: 10px; border-radius: 50%; background: var(--lac); opacity: .35;
  animation: kc-points 1.1s ease-in-out infinite; }
.points-chargement span:nth-child(2) { animation-delay: .15s; background: var(--lac-clair); }
.points-chargement span:nth-child(3) { animation-delay: .3s; background: var(--mais); }
@keyframes kc-points { 0%, 80%, 100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-8px); opacity: 1; } }
.chargement-centre { display: flex; justify-content: center; padding: 30px 0; }

/* ---------- 7. SQUELETTE : des formes grises qui « brillent » à la place du contenu qui arrive ---------- */
.squelette-anim { background: linear-gradient(90deg, #e3eae7 25%, #f2f6f4 37%, #e3eae7 63%); background-size: 400% 100%;
  animation: kc-brille 1.4s ease infinite; border-radius: 8px; }
@keyframes kc-brille { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---------- 8. BOUTON RETOUR ‹ : son style est dans pwa.js (toujours à jour, jamais gardé en mémoire par le navigateur) ---------- */

/* ---------- 9. LE LOGO dans l'en-tête : le « K en cascade » devant le nom ----------
   Le dessin est dans icones/logo-glyphe.svg (version pour fond bleu ou foncé).
   L'icône complète (carré bleu) est icones/logo.svg. */
header .logo { display: inline-flex; align-items: center; gap: .35em; }
header .logo::before { content: ""; flex: none; width: 1.2em; height: 1.2em;
  background: url("icones/logo-glyphe.svg") no-repeat center / contain; }

/* Les personnes qui ont demandé « moins d'animations » sur leur téléphone n'en ont pas */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* =====================================================================
   💬 DISCUSSION ADMIN ↔ AGENT (admin.html : panneau ; parrainage.html : section)
   ===================================================================== */
.chat-ag { width: min(560px, calc(100vw - 24px)); max-height: min(720px, calc(100dvh - 24px)); padding: 0; border: none;
  border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,.25); flex-direction: column; overflow: hidden; color: var(--basalte); }
.chat-ag[open] { display: flex; }
.chat-ag::backdrop { background: rgba(20, 30, 35, .45); }
.chat-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 16px;
  border-bottom: 1px solid var(--bordure); background: var(--blanc); }
.chat-tete strong { display: block; font-size: 1.05rem; }
.chat-tete small { display: block; color: var(--gris); font-size: .82rem; margin-top: 2px; }
.chat-fermer { flex: none; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--bordure); background: var(--blanc);
  font-size: 1rem; cursor: pointer; color: var(--gris); }
.chat-fil { flex: 1; min-height: 220px; overflow-y: auto; overscroll-behavior: contain; padding: 14px; background: var(--brume); display: flex; flex-direction: column; gap: 8px; }
.chat-fil .bulle { max-width: 82%; align-self: flex-start; background: var(--blanc); border: 1px solid var(--bordure);
  border-radius: 14px 14px 14px 4px; padding: 8px 12px; }
.chat-fil .bulle.moi { align-self: flex-end; background: #DCEFF3; border-color: #c3e0e7; border-radius: 14px 14px 4px 14px; }
.chat-fil .bulle p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.4; }
.chat-fil .bulle small { display: block; margin-top: 3px; color: var(--gris); font-size: .74rem; }
.chat-vide { text-align: center; margin: auto 0; }
.chat-rapides { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px 0; background: var(--blanc); scrollbar-width: none; }
.chat-rapides button { flex: none; font: inherit; font-size: .82rem; padding: 6px 10px; border-radius: 999px;
  border: 1px solid var(--bordure); background: var(--blanc); color: var(--lac); cursor: pointer; }
.chat-rapides button:hover { border-color: var(--lac); }
.chat-saisie { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px 12px; background: var(--blanc); margin: 0; }
.chat-saisie textarea { flex: 1; min-width: 0; font: inherit; resize: none; padding: 10px 12px; border: 1px solid #b9c6c2; border-radius: 12px; max-height: 140px; }
.chat-saisie button { flex: none; }
/* Sur la page de l'agent : la discussion est une carte de la page */
.chat-carte { display: flex; flex-direction: column; border: 1px solid var(--bordure); border-radius: 14px; overflow: hidden; background: var(--blanc); }
.chat-carte .chat-fil { height: min(55vh, 440px); max-height: none; }
/* Discussion ouverte (admin) : la page derrière ne bouge plus */
html:has(dialog.chat-ag[open]) { overflow: hidden; }
@media (max-width: 600px) {
  .chat-ag { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; margin: 0; }
}