/* ============================================================
   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;
  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; }

/* 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;
  }
}