/* ╔══════════════════════════════════════════════════════╗
   ║     WEBTROC — css/style.css                          ║
   ╚══════════════════════════════════════════════════════╝ */

:root {
  --bleu:        #2861A8;   /* le bleu historique de WebTroc */
  --bleu-clair:  #3d7fd4;
  --bleu-sombre: #1c4478;
  --fond:        #0f1420;
  --fond-2:      #172032;
  --carte:       #1e2a40;
  --bord:        #2b3a56;
  --texte:       #e8edf6;
  --texte-doux:  #9fb0c9;
  --vert:        #2eb872;
  --orange:      #e8973a;
  --rouge:       #e05263;
  --violet:      #9b6dd6;
  --rayon:       14px;
  --ombre:       0 6px 24px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  /* Encoches des téléphones récents : sans cela, l'entête passe sous la
     barre d'état sur iPhone. */
  padding-bottom: env(safe-area-inset-bottom);
}

a { color: var(--bleu-clair); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

/* ── Entête ────────────────────────────────────────────── */
.entete {
  position: sticky; top: 0; z-index: 900;
  display: flex; align-items: center; gap: 16px;
  padding: 10px 16px;
  background: linear-gradient(180deg, #16233a, #131c2e);
  border-bottom: 1px solid var(--bord);
  flex-wrap: wrap;
}
.logo {
  display: flex; align-items: center; gap: 9px;
  font-size: 22px; font-weight: 800; color: var(--texte);
  text-decoration: none; white-space: nowrap;
  letter-spacing: -.4px;
}
.logo:hover { text-decoration: none; }
.logo-marque {
  width: 34px; height: 34px; flex: 0 0 34px;
  /* Une ombre portée légère décolle l'épingle du bandeau, qui est presque
     de la même famille de bleus — sans elle, le logo s'y fond. */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35));
}
/* « Troc » ressort en vert : c'est le mot qui porte le sens du site, et le
   vert est déjà la couleur des prix et des validations — la marque et
   l'interface parlent ainsi la même langue. */
.logo-nom b { color: var(--vert); font-weight: 800; }

@media (max-width: 720px) {
  /* Sur petit écran le nom disparaît, l'épingle suffit à identifier le
     site — et la barre de recherche récupère la place. */
  .logo-nom { display: none; }
  .logo-marque { width: 30px; height: 30px; flex-basis: 30px; }
}

.recherche { display: flex; flex: 1 1 260px; min-width: 180px; }
.recherche input {
  flex: 1; min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--bord); border-right: 0;
  border-radius: 999px 0 0 999px;
  background: var(--fond-2); color: var(--texte); font-size: 15px;
}
.recherche button {
  padding: 10px 16px; border: 1px solid var(--bleu); border-left: 0;
  border-radius: 0 999px 999px 0;
  background: var(--bleu); color: #fff; cursor: pointer; font-size: 15px;
}
.recherche input:focus, .recherche button:focus-visible { outline: 2px solid var(--bleu-clair); }

.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav-lien {
  position: relative;
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 999px;
  color: var(--texte-doux); text-decoration: none; font-size: 14px; font-weight: 600;
  white-space: nowrap;
}
.nav-lien:hover { background: var(--fond-2); color: var(--texte); text-decoration: none; }
.nav-lien.actif { background: var(--bleu); color: #fff; }
.nav-publier { background: var(--vert); color: #fff; }
.nav-publier:hover { background: #26a463; color: #fff; }
.pastille {
  position: absolute; top: 2px; right: 2px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--rouge); color: #fff;
  font-size: 11px; line-height: 18px; text-align: center; font-weight: 700;
}

/* Sur téléphone, la navigation descend en bas de l'écran.
   Le haut d'un grand téléphone tenu à une main est hors d'atteinte du
   pouce ; les applications l'ont compris depuis longtemps. L'entête ne
   garde donc que le logo et la recherche, et les MÊMES liens deviennent
   une barre fixe en bas — sans duplication de balisage, donc sans risque
   que les deux versions divergent (pastilles de messages comprises).

   position: fixed fonctionne bien qu'il soit imbriqué dans une entête
   sticky : sticky ne crée pas de bloc conteneur pour les éléments fixés.
   L'entête porte z-index: 900, ce qui place la barre sous les fenêtres
   modales (1100) et les messages (1200) — c'est l'ordre voulu. */
@media (max-width: 720px) {
  .entete { padding: 8px 10px; gap: 8px; }
  .logo span { display: none; }

  .nav {
    position: fixed; left: 0; right: 0; bottom: 0;
    justify-content: space-around; flex-wrap: nowrap; gap: 0;
    background: linear-gradient(180deg, #16233a, #101828);
    border-top: 1px solid var(--bord);
    /* env(safe-area-inset-bottom) : sur iPhone, la barre de geste mange le
       bas de l'écran. Sans cette marge, « Compte » se retrouve dessous. */
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .nav-lien {
    flex-direction: column; gap: 2px;
    flex: 1 1 0; min-width: 0;
    padding: 6px 2px; border-radius: 12px;
    font-size: 20px; line-height: 1.1;
  }
  /* Les libellés restent : trois émojis ronds de suite (🗺️ 💬 🤝) ne se
     distinguent pas d'un coup d'œil, surtout à cette taille. */
  .nav-lien span {
    display: block; font-size: 10px; font-weight: 600;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .nav-lien.actif { background: var(--bleu); }
  .nav-publier { background: var(--vert); }
  .pastille { top: 0; right: 50%; margin-right: -22px; }

}

/* ── Bandeau « installer sur l'écran d'accueil » ────────── */
.bandeau-installer {
  position: fixed; left: 12px; right: 12px;
  bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  z-index: 1000;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--carte); border: 1px solid var(--bleu);
  border-radius: var(--rayon);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
.bandeau-installer img { border-radius: 9px; flex: 0 0 40px; }
.bandeau-texte { flex: 1; min-width: 0; font-size: 14px; line-height: 1.35; }
/* Au-dessus de 720px il n'y a pas de barre en bas : le bandeau se recale
   dans le coin de la fenêtre. */
@media (min-width: 721px) {
  .bandeau-installer { left: auto; right: 20px; bottom: 20px; max-width: 420px; }
}

/* ── Structure ─────────────────────────────────────────── */
.vue { max-width: 1180px; margin: 0 auto; padding: 20px 16px 60px; min-height: 60vh; }
.chargement { text-align: center; color: var(--texte-doux); padding: 60px 0; }
h1 { font-size: 26px; margin: 0 0 4px; }
h2 { font-size: 20px; margin: 28px 0 12px; }
.sous-titre { color: var(--texte-doux); margin: 0 0 20px; }

.pied {
  border-top: 1px solid var(--bord); padding: 20px 16px 40px;
  color: var(--texte-doux); font-size: 14px; text-align: center;
}
/* Dégagement sous la barre de navigation fixe du téléphone. Cette règle
   doit venir APRÈS le raccourci « padding » ci-dessus : à spécificité
   égale, c'est la dernière écrite qui l'emporte, une requête média n'y
   change rien. Placée plus haut, elle était silencieusement annulée. */
@media (max-width: 720px) {
  .pied { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
}

/* ── Blocs ─────────────────────────────────────────────── */
.bloc {
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: 18px; margin-bottom: 16px;
}
.grille { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.deux-colonnes { display: grid; gap: 20px; grid-template-columns: 1.4fr 1fr; align-items: start; }
@media (max-width: 860px) { .deux-colonnes { grid-template-columns: 1fr; } }

/* ── Bande de tuiles sur une seule ligne ───────────────── */
/* Composant partagé : les catégories de l'accueil ET les raccourcis de
   « Mon compte ». Une seule définition, deux usages — un changement de
   style s'applique aux deux d'un coup.

   flex: 1 0 120px — chaque tuile grandit pour occuper la largeur
   disponible, mais ne descend jamais sous 120 px. Sur un écran large les
   tuiles se partagent la ligne ; sur mobile leur somme dépasse l'écran et
   la bande défile latéralement.

   Le débordement est confiné à la bande (overflow-x sur elle, pas sur la
   page) : le corps du document ne défile jamais horizontalement, ce qui
   est la première cause de mise en page cassée sur téléphone. */
.bande {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px 10px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--bord) transparent;
}
.bande::-webkit-scrollbar { height: 6px; }
.bande::-webkit-scrollbar-thumb { background: var(--bord); border-radius: 999px; }
.bande::-webkit-scrollbar-track { background: transparent; }

.tuile {
  flex: 1 0 120px;
  scroll-snap-align: start;
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 14px 10px;
  text-align: center;
  color: inherit;
  text-decoration: none;
  transition: transform .12s ease, border-color .12s ease;
}
.tuile:hover {
  transform: translateY(-2px);
  border-color: var(--bleu-clair);
  text-decoration: none;
}
.tuile-icone { font-size: 32px; line-height: 1.2; }
.tuile-nom {
  font-weight: 700; margin-top: 6px; font-size: 15px;
  /* Sur une seule ligne : un libellé long est coupé plutôt que d'agrandir
     la tuile et de désaligner toute la bande. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tuile .aide { font-size: 12px; }

@media (max-width: 720px) {
  .tuile { flex: 0 0 104px; padding: 12px 8px; }
  .tuile-icone { font-size: 28px; }
  .tuile-nom { font-size: 14px; }
}

/* ── Carte d'annonce ───────────────────────────────────── */
.annonce {
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .12s ease, border-color .12s ease;
}
.annonce:hover { transform: translateY(-2px); border-color: var(--bleu-clair); }
.annonce-photo {
  aspect-ratio: 4 / 3; background: var(--fond-2) center/cover no-repeat;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; color: var(--texte-doux); position: relative;
}
.annonce-corps { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.annonce-titre { font-weight: 700; font-size: 15px; line-height: 1.3; }
.annonce-prix { font-size: 18px; font-weight: 800; color: var(--vert); }
.annonce-meta { font-size: 13px; color: var(--texte-doux); margin-top: auto; }

.etiquette {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
}
.et-vente     { background: rgba(46,184,114,.18);  color: #6ee7a8; }
.et-troc      { background: rgba(155,109,214,.18); color: #c4a3f0; }
.et-don       { background: rgba(232,151,58,.18);  color: #f5bf7d; }
.et-recherche { background: rgba(61,127,212,.18);  color: #9ac4f5; }
.et-avant     { background: var(--orange); color: #221200; }
.badge-avant {
  position: absolute; top: 8px; left: 8px;
  background: var(--orange); color: #221200;
  font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px;
}

/* ── Sections repliables (formulaire de dépôt) ─────────── */
/* <details>/<summary> natifs plutôt qu'un accordéon en JavaScript :
   ils fonctionnent sans script, le navigateur gère l'ouverture au clavier,
   et la recherche du navigateur (Ctrl+F) ouvre automatiquement la section
   qui contient le texte cherché — ce qu'aucun accordéon maison ne fait. */
.section {
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  background: var(--carte);
  margin-bottom: 12px;
  overflow: hidden;
}
.section > summary {
  padding: 14px 16px;
  cursor: pointer;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  user-select: none;
}
/* Le triangle par défaut diffère selon les navigateurs : on met le nôtre. */
.section > summary::-webkit-details-marker { display: none; }
.section > summary::before {
  content: '▸';
  color: var(--texte-doux);
  transition: transform .15s ease;
  display: inline-block;
}
.section[open] > summary::before { transform: rotate(90deg); }
.section > summary:hover { background: var(--fond-2); }
.section-resume {
  margin-left: auto;
  font-weight: 400;
  font-size: 13px;
  color: var(--texte-doux);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 55%;
}
.section-corps { padding: 0 16px 16px; }
.section-incomplete > summary { border-left: 3px solid var(--orange); }

@media (max-width: 560px) {
  /* Le résumé passerait sur deux lignes et écraserait le titre. */
  .section-resume { display: none; }
}

/* ── Barre d'avancement (envoi de photo) ───────────────── */
.barre {
  height: 10px;
  background: var(--fond-2);
  border: 1px solid var(--bord);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 10px;
}
.barre-jauge {
  height: 100%;
  width: 0;
  background: var(--vert);
  border-radius: 999px;
  transition: width .15s linear;
}
/* Pendant la compression, la durée est inconnue : une jauge figée à 0 %
   laisserait croire à un blocage. On anime donc une bande qui va et vient,
   sans prétendre mesurer quoi que ce soit. */
.barre-jauge.indeterminee {
  width: 35%;
  background: linear-gradient(90deg, transparent, var(--bleu-clair), transparent);
  animation: va-et-vient 1.1s ease-in-out infinite;
}
@keyframes va-et-vient {
  from { transform: translateX(-100%); }
  to   { transform: translateX(300%); }
}
.barre-etat {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: var(--texte-doux);
  margin-top: 6px;
}

/* ── Boutons et formulaires ────────────────────────────── */
.bouton, button.bouton, a.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border: 0; border-radius: 999px;
  background: var(--bleu); color: #fff;
  font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: none;
}
.bouton:hover { background: var(--bleu-clair); text-decoration: none; }
.bouton:disabled { opacity: .5; cursor: not-allowed; }
.bouton-vert   { background: var(--vert); }
.bouton-vert:hover { background: #26a463; }
.bouton-rouge  { background: var(--rouge); }
.bouton-fantome {
  background: transparent; border: 1px solid var(--bord); color: var(--texte);
}
.bouton-fantome:hover { background: var(--fond-2); }
.bouton-petit { padding: 7px 14px; font-size: 13px; }

label { display: block; font-size: 14px; font-weight: 600; margin: 14px 0 6px; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], input[type=tel], input[type=date], select, textarea {
  width: 100%; padding: 11px 14px;
  border: 1px solid var(--bord); border-radius: 10px;
  background: var(--fond-2); color: var(--texte); font-size: 15px;
  font-family: inherit;
}
textarea { min-height: 130px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--bleu-clair); border-color: var(--bleu-clair); }
.aide { font-size: 13px; color: var(--texte-doux); margin-top: 5px; }
.ligne-cases { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0; }
.ligne-cases input { width: auto; margin-top: 4px; }
.ligne-cases label { margin: 0; font-weight: 400; }
.champs-2 { display: grid; gap: 0 14px; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .champs-2 { grid-template-columns: 1fr; } }

.erreur   { background: rgba(224,82,99,.14);  border: 1px solid var(--rouge);  color: #ffc3cb; padding: 12px 14px; border-radius: 10px; margin: 14px 0; }
.succes   { background: rgba(46,184,114,.14); border: 1px solid var(--vert);   color: #a8f0cb; padding: 12px 14px; border-radius: 10px; margin: 14px 0; }
.avert    { background: rgba(232,151,58,.14); border: 1px solid var(--orange); color: #f8d6a8; padding: 12px 14px; border-radius: 10px; margin: 14px 0; }
.vide     { text-align: center; color: var(--texte-doux); padding: 50px 20px; }
.vide-emoji { font-size: 52px; margin-bottom: 10px; }

/* ── Carte Leaflet ─────────────────────────────────────── */
#leaflet { height: 68vh; min-height: 380px; border-radius: var(--rayon); border: 1px solid var(--bord); }
.leaflet-popup-content-wrapper { background: var(--carte); color: var(--texte); border-radius: 12px; }
.leaflet-popup-tip { background: var(--carte); }
.popup-annonce { min-width: 190px; }
.popup-annonce img { border-radius: 8px; margin-bottom: 8px; }
.marqueur-prix {
  background: var(--bleu); color: #fff; border: 2px solid #fff;
  border-radius: 999px; padding: 3px 9px;
  font-size: 12px; font-weight: 800; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
  display: inline-flex; align-items: center; gap: 4px;
}
/* Un peu plus gros que le prix : c'est le pictogramme qu'on repère en
   balayant la carte, le montant ne se lit qu'ensuite. */
.marqueur-emoji { font-size: 15px; line-height: 1; }
.marqueur-troc { background: var(--violet); }
.marqueur-don  { background: var(--orange); color: #221200; }
.filtres-carte {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px;
}
.filtres-carte select, .filtres-carte input { width: auto; min-width: 130px; }

/* ── Fiche annonce ─────────────────────────────────────── */
/* Vignettes de largeur FIXE, et non « 1fr » : avec 1fr, trois photos se
   partagent toute la largeur et deviennent presque aussi grandes que la
   photo principale — la fiche paraît alors saturée d'images. */
.galerie { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, 88px); }
.galerie img {
  width: 88px; height: 88px;
  border-radius: 10px; aspect-ratio: 1; object-fit: cover; cursor: pointer;
  opacity: .78;
  transition: opacity .12s ease, transform .12s ease;
}
/* La vignette survolée s'éclaircit : on comprend qu'elle est cliquable
   sans avoir à l'écrire. */
.galerie img:hover { opacity: 1; transform: translateY(-2px); }

/* Gestionnaire de photos du formulaire de dépôt.

   Colonnes de largeur FIXE, et non « auto-fit, minmax(…, 1fr) » comme la
   galerie de la fiche : avec 1fr, trois photos se partagent toute la
   largeur et deviennent énormes sur un écran large. Ici on veut des
   vignettes qui restent des vignettes, quel que soit leur nombre. */
#galerie-photos { grid-template-columns: repeat(auto-fill, 108px); }
#galerie-photos img { width: 108px; height: 108px; }
@media (max-width: 480px) {
  #galerie-photos { grid-template-columns: repeat(auto-fill, 88px); }
  #galerie-photos img { width: 88px; height: 88px; }
}
/* max-height : sans lui, la photo occupe 4/3 de la largeur de sa colonne,
   soit près de 500 px de haut sur un écran large. L'objet écrase alors tout
   le reste de la fiche, et il faut faire défiler pour voir le prix. */
.photo-principale {
  width: 100%;
  max-height: 400px;
  border-radius: var(--rayon);
  aspect-ratio: 4/3;
  object-fit: cover;
  background: var(--fond-2);
}
@media (max-width: 860px) { .photo-principale { max-height: 300px; } }
.details dt { color: var(--texte-doux); font-size: 13px; }
.details dd { margin: 0 0 10px; font-weight: 600; }
.prix-fiche { font-size: 32px; font-weight: 800; color: var(--vert); }

/* ── Messagerie ────────────────────────────────────────── */
.fil { display: flex; flex-direction: column; gap: 8px; max-height: 55vh; overflow-y: auto; padding: 4px; }
.bulle { max-width: 78%; padding: 9px 13px; border-radius: 16px; background: var(--fond-2); }
.bulle.de-moi { align-self: flex-end; background: var(--bleu); color: #fff; }
.bulle-heure { font-size: 11px; opacity: .65; margin-top: 3px; }
.conversation {
  display: flex; gap: 12px; align-items: center; padding: 12px;
  border-bottom: 1px solid var(--bord); cursor: pointer;
}
.conversation:hover { background: var(--fond-2); }
.conversation img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.avatar-lettre {
  width: 46px; height: 46px; border-radius: 50%; flex: 0 0 46px;
  background: var(--bleu); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800;
}

/* ── Tableaux (administration) ─────────────────────────── */
.tableau-defilant { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--bord); white-space: nowrap; }
th { color: var(--texte-doux); font-weight: 600; font-size: 13px; }
.stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.stat { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 14px; }
.stat b { display: block; font-size: 24px; }
.stat span { color: var(--texte-doux); font-size: 13px; }

/* ── WebCoins ──────────────────────────────────────────── */
.solde-coins {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, #3a2d10, #4a3a12);
  border: 1px solid var(--orange); border-radius: var(--rayon);
  padding: 16px 18px; margin-bottom: 16px;
}
.solde-coins .montant { font-size: 30px; font-weight: 800; color: #ffd489; }
.solde-coins.negatif { background: linear-gradient(135deg, #3d1620, #4d1c28); border-color: var(--rouge); }
.solde-coins.negatif .montant { color: #ffb3bd; }
.pack {
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: 18px; text-align: center;
}
.pack .coins { font-size: 30px; font-weight: 800; color: #ffd489; }
.pack .prix { font-size: 20px; font-weight: 700; margin: 6px 0; }
.pack .unitaire { font-size: 13px; color: var(--texte-doux); }

/* ── Toasts et modale ──────────────────────────────────── */
.toasts { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 1200;
          display: flex; flex-direction: column; gap: 8px; width: min(420px, calc(100vw - 32px)); }
.toast {
  background: var(--carte); border: 1px solid var(--bord); border-left: 4px solid var(--bleu);
  border-radius: 10px; padding: 12px 16px; box-shadow: var(--ombre);
  animation: entree .2s ease;
}
.toast.err { border-left-color: var(--rouge); }
.toast.ok  { border-left-color: var(--vert); }
/* Sur téléphone, les messages se posaient exactement sur la barre de
   navigation du bas : on les remonte au-dessus. */
@media (max-width: 720px) {
  .toasts { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
@keyframes entree { from { opacity: 0; transform: translateY(12px); } }

.modale {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.modale[hidden] { display: none; }
.modale-boite {
  background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: 22px; width: min(560px, 100%); max-height: 88vh; overflow-y: auto;
  box-shadow: var(--ombre);
}

/* Réduction d'animation : réglage système respecté. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}