/* ════════════════════════════════════════════════════════════
   InfoTri — styles au-delà des utilitaires Tailwind
   ════════════════════════════════════════════════════════════ */

/* ── En-tête ────────────────────────────────────────────────
   Aplat de la couleur principale de la commune — la même que la barre
   supérieure de l'application. Tout ce qui s'y pose prend `--commune-sur`,
   le jeton de texte calculé pour cet aplat : une commune à couleur claire
   obtient du texte sombre, une commune à couleur soutenue du texte clair.
   Le liseré du bas garde l'en-tête visible quand l'aplat est presque blanc. */
.py-5{
padding-top: 1.25rem;	
padding-bottom: 1.25rem;
padding-left: 1.25rem;	
padding-right: 1.25rem;	
	
}
#entete {
  background: var(--commune);
  color: var(--commune-sur);
  box-shadow: inset 0 -1px 0 var(--sur-commune-trait);
}
#entete.est-colle { box-shadow: inset 0 -1px 0 var(--sur-commune-trait),
                                0 6px 24px rgba(11, 18, 32, .10); }
/* Limité à `> div`, la barre supérieure : le menu mobile est un panneau
   blanc opaque, ses liens hériteraient sinon d'un texte clair sur fond clair. */
#entete > div a, #entete > div button { color: inherit; }
/* Le panneau du menu mobile est blanc : il reprend l'encre du site, pas la
   couleur de texte calculée pour l'aplat communal. */
#menu-mobile { color: #0B1220; }

/* Liens de navigation : l'inactif s'estompe, l'actif reprend l'opacité
   pleine. Jouer sur l'opacité plutôt que sur une seconde couleur évite
   d'avoir à calculer un « gris » lisible sur chaque teinte communale. */
#entete > div .nav-lien          { opacity: .72; }
#entete > div .nav-lien:hover,
#entete > div .nav-lien.est-actif { opacity: 1; }
#entete > div .nav-lien::after   { background: currentColor; }

.btn-entete:hover                  { background: var(--sur-commune-voile); }
#entete .pastille-langue            { opacity: .72; }
#entete .pastille-langue:hover      { opacity: 1; background: var(--sur-commune-voile); }
#entete .pastille-langue.est-active { opacity: 1; background: var(--commune-sur);
                                      color: var(--commune); }

/* Soulignement animé des liens de navigation : le trait naît du
   centre, ce qui se lit comme un accent et non comme une bordure. */
.nav-lien::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; border-radius: 2px;
  background: var(--commune-texte);
  transform-origin: center;
  transition: transform .25s cubic-bezier(.22,1,.36,1);
}

/* ── Apparition au défilement ───────────────────────────────
   Une seule propriété animée (transform + opacity) : le compositeur
   s'en charge, sans recalcul de mise en page. */
.reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity .55s cubic-bezier(.22,1,.36,1),
              transform .55s cubic-bezier(.22,1,.36,1);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.reveal.vu { opacity: 1; transform: none; }

/* ── Cartes ─────────────────────────────────────────────────
   L'élévation change, jamais la taille : une carte qui grandit au
   survol décale ses voisines et fait sautiller la grille. */
.carte {
  transition: border-color .2s ease, box-shadow .25s ease, background-color .2s ease;
}
.carte:hover {
  border-color: var(--commune-texte);
  box-shadow: 0 12px 30px -18px rgba(11,18,32,.35);
}

/* Filet coloré qui se déploie sur le bord gauche au survol. */
.carte-accent { position: relative; overflow: hidden; }
.carte-accent::before {
  content: '';
  position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--commune-texte);
  transform: scaleY(0); transform-origin: top;
  transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.carte-accent:hover::before { transform: scaleY(1); }

/* ── Titres de section ──────────────────────────────────────
   Le trait précède le titre et se lit comme une marque de chapitre. */
.titre-section { display: flex; align-items: center; gap: .75rem; }
.titre-section::before {
  content: ''; width: 28px; height: 3px; border-radius: 2px;
  background: var(--commune-texte); flex: none;
}

/* ── Calendrier ─────────────────────────────────────────────*/
.jour-collecte { position: relative; }
.jour-collecte .pastilles {
  position: absolute; left: 50%; bottom: 6px;
  transform: translateX(-50%);
  display: flex; gap: 3px;
}
.jour-collecte .pastille { width: 5px; height: 5px; border-radius: 50%; }

/* ── Pastille active (index alphabétique, filtres) ──────────
   Un aplat prend la couleur d'identité de la commune, jamais sa variante
   assombrie : celle-ci est calculée pour porter du TEXTE sur fond clair, et
   l'employer comme fond donnait un pavé noir chez les communes à couleur
   claire — l'une des nôtres est blanche, sa variante lisible est l'encre.
   Le texte posé dessus prend le jeton prévu pour ça, et un liseré garde la
   pastille visible quand l'aplat est presque blanc. */
/* `!important` assumé : la pastille porte `bg-white` en utilitaire, de même
   spécificité que cette classe, et la feuille de Tailwind est injectée après
   la nôtre — elle gagnait donc sur le fond mais pas sur la couleur du texte,
   ce qui donnait du blanc sur blanc. Un état doit primer sur un utilitaire. */
.lettre-active { background: var(--commune) !important;
                 color: var(--commune-sur) !important;
                 border-color: var(--commune-texte) !important;
                 box-shadow: inset 0 0 0 1px var(--commune-texte); }

/* ── Focus visible ──────────────────────────────────────────
   Anneau épais et contrasté : c'est le seul repère d'un utilisateur
   au clavier. Posé sur :focus-visible pour ne pas gêner la souris. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--commune-texte);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── Respect des préférences de mouvement ───────────────────
   Le contenu reste intégralement accessible : seules les
   transitions disparaissent, aucun élément ne reste masqué. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ── Impression ─────────────────────────────────────────────
   Un calendrier de collecte finit souvent sur un frigo. */
@media print {
  #entete, footer, .sans-impression { display: none !important; }
  main { padding-top: 0 !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ── Icônes de catégorie ────────────────────────────────────
   Même police et mêmes codes que le back-office et l'application
   (`cms_tri/admin.css`, `infotri_icons.dart`) : une catégorie doit porter
   le même pictogramme partout. Toute icône ajoutée là-bas doit l'être ici. */
@font-face {
  font-family: 'Infotri';
  src: url('fonts/Infotri.ttf') format('truetype');
  font-weight: normal; font-style: normal; font-display: swap;
}
.infotri-icon { font-family: 'Infotri'; font-style: normal; font-weight: normal;
                line-height: 1; speak: none; }
.infotri-icon[data-slug="sac"]::before { content: "\e800"; }
.infotri-icon[data-slug="papier"]::before { content: "\e801"; }
.infotri-icon[data-slug="vegetable"]::before { content: "\e802"; }
.infotri-icon[data-slug="gazon"]::before { content: "\e803"; }
.infotri-icon[data-slug="dechets_verts"]::before { content: "\e803"; }
.infotri-icon[data-slug="verres"]::before { content: "\e804"; }
.infotri-icon[data-slug="alu"]::before { content: "\e805"; }
.infotri-icon[data-slug="reste_repas"]::before { content: "\e806"; }
.infotri-icon[data-slug="encombrant"]::before { content: "\e807"; }
.infotri-icon[data-slug="bois"]::before { content: "\e808"; }
.infotri-icon[data-slug="ferraille"]::before { content: "\e809"; }
.infotri-icon[data-slug="pet"]::before { content: "\e80a"; }
.infotri-icon[data-slug="inertes"]::before { content: "\e80b"; }
.infotri-icon[data-slug="textile"]::before { content: "\e80c"; }
.infotri-icon[data-slug="vaisselle"]::before { content: "\e80d"; }
.infotri-icon[data-slug="flacons"]::before { content: "\e80e"; }
.infotri-icon[data-slug="berlingots"]::before { content: "\e80f"; }
.infotri-icon[data-slug="capssules"]::before { content: "\e810"; }
.infotri-icon[data-slug="electriques"]::before { content: "\e811"; }
.infotri-icon[data-slug="cd"]::before { content: "\e812"; }
.infotri-icon[data-slug="pilles"]::before { content: "\e813"; }
.infotri-icon[data-slug="cartouches"]::before { content: "\e814"; }
.infotri-icon[data-slug="huiles_vegetales"]::before { content: "\e815"; }
.infotri-icon[data-slug="dechets_speciaux"]::before { content: "\e816"; }
.infotri-icon[data-slug="aerosol"]::before { content: "\e817"; }
.infotri-icon[data-slug="medicaments"]::before { content: "\e818"; }
.infotri-icon[data-slug="peintures_eau"]::before { content: "\e819"; }
.infotri-icon[data-slug="peintures"]::before { content: "\e81a"; }
.infotri-icon[data-slug="huiles_minerals"]::before { content: "\e81b"; }
.infotri-icon[data-slug="pneus"]::before { content: "\e81c"; }
.infotri-icon[data-slug="batteries"]::before { content: "\e828"; }
.infotri-icon[data-slug="composte"]::before { content: "\e81e"; }
.infotri-icon[data-slug="sagexes"]::before { content: "\e81f"; }
.infotri-icon[data-slug="animals"]::before { content: "\e820"; }
.infotri-icon[data-slug="conserves"]::before { content: "\e821"; }
.infotri-icon[data-slug="alu_conserves"]::before { content: "\e822"; }
.infotri-icon[data-slug="huiles_minerals_vegetals"]::before { content: "\e823"; }
.infotri-icon[data-slug="neons"]::before { content: "\e824"; }
.infotri-icon[data-slug="dechetrie_mobile"]::before { content: "\e829"; }
.infotri-icon[data-slug="ecopoint"]::before { content: "\e826"; }
.infotri-icon[data-slug="dechetrie_fix"]::before { content: "\e827"; }

/* ── L'attribut `hidden` doit gagner ────────────────────────
   Une classe utilitaire de display (`inline-flex`, `grid`, `block`…) a plus
   de poids que la règle `[hidden]` du navigateur : sans ceci, tout élément
   masqué par le script mais porteur d'une telle classe reste affiché. */
[hidden] { display: none !important; }

/* ── Calendrier : jour sélectionné ──────────────────────────
   Anneau plein plutôt qu'un simple changement de bordure : à 45 px de côté,
   une bordure de 1 px ne se distingue pas assez de l'état « a des collectes ». */
.jour-actif { border-color: var(--commune-texte) !important;
              box-shadow: inset 0 0 0 1.5px var(--commune-texte); }

/* Le <dialog> natif garde ses marges auto : on le recentre sans écraser
   `display`, sinon la fermeture ne le masquerait plus. */
#detail-collecte { margin: auto; }
#detail-collecte::backdrop { background: rgba(11, 18, 32, .45); }

/* ── Abécédaire : titres de lettre collants ─────────────────
   Le décalage est mesuré par le script, pas figé : la barre de recherche
   change de hauteur selon que l'index alphabétique tient sur une ligne ou
   sur trois. Une valeur en dur y cachait les titres derrière la barre sur
   téléphone, et les laissait flotter à vide quand l'index était absent. */
.abc-titre { top: var(--abc-decalage, 13rem); }
/* Deux colonnes : le panneau de recherche passe à gauche, il n'est donc plus
   au-dessus de la liste. Les titres de lettre se collent alors sous l'en-tête
   du site, et non sous un bandeau qui n'existe plus à cet endroit. */
@media (min-width: 1024px) {
  .abc-titre { top: 6rem; }
}

/* ── Contenu riche du back-office ───────────────────────────
   Les champs de l'abécédaire sortent d'un éditeur TinyMCE. Tailwind remet
   les marges des balises à zéro : sans ces règles, listes et paragraphes
   arrivent collés et le texte de la commune paraît mal saisi. */
.prose-abc > * + *       { margin-top: 0.75em; }
.prose-abc p             { margin: 0; }
.prose-abc strong, .prose-abc b { font-weight: 600; }
.prose-abc em, .prose-abc i     { font-style: italic; }
.prose-abc u             { text-decoration: underline; text-underline-offset: 2px; }
.prose-abc ul            { list-style: disc;    padding-left: 1.25em; }
.prose-abc ol            { list-style: decimal; padding-left: 1.35em; }
.prose-abc li + li       { margin-top: 0.3em; }
.prose-abc h2, .prose-abc h3, .prose-abc h4 {
  font-weight: 600; font-size: 1em; margin-top: 1em;
}
.prose-abc blockquote    { border-left: 2px solid #E2E8F0; padding-left: 1em; color: #475569; }
.prose-abc a             { color: var(--commune-texte); text-decoration: underline;
                           text-underline-offset: 2px; }

/* ── Points de collecte ─────────────────────────────────────
   La carte occupe tout l'écran ; les panneaux flottent dessus. Leaflet pose
   ses propres couches en z-index 400-700, d'où les valeurs élevées côté
   panneaux — sans quoi la carte passerait devant la recherche. */
.leaflet-container            { font-family: inherit; background: #F1F5F9; }
/* Désaturation réservée au fond OpenStreetMap, le seul assez coloré pour
   concurrencer les pastilles de collecte. Positron et DataViz sont déjà des
   palettes sourdes : mesuré côte à côte, le filtre n'y change rien de visible,
   et il imposerait une couche de composition à chaque déplacement de la carte.
   Le filtre ne porte que sur les tuiles : marqueurs et infobulles vivent dans
   d'autres couches et gardent leurs couleurs exactes. */
.fond-osm .leaflet-tile-pane { filter: saturate(.85); }
/* Leaflet pose ses contrôles en z-index 1000 : sans cela, le zoom et la
   mention de source passaient devant les panneaux — et sur téléphone, en
   plein milieu de la fiche de détail. */
.panneau-recherche, .panneau-detail { z-index: 1100; }
@media (max-width: 1023px) {
  .panneau-detail                   { z-index: 1200; }
}
/* Panneau de détail ouvert : le zoom se décale pour rester atteignable au
   lieu de disparaître dessous. */
@media (min-width: 1024px) {
  .detail-ouvert .leaflet-bottom.leaflet-right { right: 440px; transition: right .22s ease; }
}
.leaflet-control-attribution  { font-size: 10px; }
.leaflet-tooltip              { border: none; border-radius: 8px; font-weight: 600;
                                font-size: 12px; box-shadow: 0 4px 16px rgba(11,18,32,.16); }

/* Barre de défilement horizontale des puces : présente mais discrète. */
.defile-discret                        { scrollbar-width: thin; }
.defile-discret::-webkit-scrollbar     { height: 4px; }
.defile-discret::-webkit-scrollbar-thumb { background: #E2E8F0; border-radius: 4px; }

/* Puce de filtre — même objet que l'index alphabétique, d'où `.lettre-active`
   comme état commun. Le `select` est stylé pareil pour que la rangée se lise
   comme une seule famille de contrôles. */
.puce {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid #E2E8F0; border-radius: 9999px;
  background: #fff; padding: 7px 14px;
  font-size: 13px; font-weight: 500; color: #0B1220;
  white-space: nowrap; cursor: pointer;
  transition: border-color .2s, background-color .2s, color .2s;
}
.puce:hover   { border-color: #0B1220; }
select.puce   { padding-right: 30px; appearance: none;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
                background-repeat: no-repeat; background-position: right 10px center;
                background-size: 14px; }

/* Fiche de résultat dans le panneau de gauche. */
.fiche-point {
  display: flex; align-items: flex-start; gap: 12px; width: 100%;
  border: 1px solid transparent; border-radius: 16px;
  padding: 12px; text-align: left; cursor: pointer;
  transition: background-color .18s, border-color .18s;
}
.fiche-point:hover        { background: #F8FAFC; border-color: #E2E8F0; }
.point-vise .fiche-point  { background: var(--commune-voile); border-color: var(--commune-texte); }

/* État d'ouverture : la couleur seule ne suffit pas — le libellé la double,
   pour qui ne distingue pas le rouge du vert. */
.etat               { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.etat::before       { content: ''; width: 8px; height: 8px; border-radius: 50%;
                      background: currentColor; flex: none; }
.etat-ouvert        { color: #15803D; }
.etat-ferme         { color: #B91C1C; }
.etat-inconnu       { color: #475569; }

/* Apparition du panneau de détail : glissé sur grand écran, fondu sur
   téléphone où il occupe tout l'écran et n'a nulle part d'où glisser. */
.panneau-detail          { opacity: 0; transform: translateX(16px);
                           transition: opacity .22s ease, transform .22s ease; }
.panneau-detail.est-ouvert { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .panneau-detail        { transition: none; transform: none; }
}
@media (max-width: 1023px) {
  .panneau-detail        { transform: none; }
}

/* ── Points de collecte : carte et infobulles ───────────────
   Leaflet impose son propre style d'infobulle ; on l'aligne sur le reste du
   site plutôt que de laisser deux typographies cohabiter sur la même page. */
.leaflet-popup-content-wrapper { border-radius: 14px; box-shadow: 0 8px 32px rgba(11,18,32,.16); }
.leaflet-popup-content         { margin: 14px 16px; font-family: inherit; }
.popup-point                   { display: grid; gap: 2px; font-size: 14px; color: #0B1220; }
.popup-point strong            { font-size: 15px; font-weight: 700; }
.popup-type                    { font-size: 11px; font-weight: 600; text-transform: uppercase;
                                 letter-spacing: .08em; }
.popup-adr                     { color: #475569; }
.popup-titre                   { margin-top: 10px; font-size: 11px; font-weight: 600;
                                 text-transform: uppercase; letter-spacing: .08em; color: #475569; }
.popup-hor                     { margin: 4px 0 0; display: grid; gap: 2px; }
.popup-hor div                 { display: flex; justify-content: space-between; gap: 14px; }
.popup-hor dt                  { color: #475569; }
.popup-hor dd                  { margin: 0; font-variant-numeric: tabular-nums; }
.popup-lien                    { margin-top: 12px; font-weight: 600; color: var(--commune-texte); }

/* Fiche désignée depuis la carte : liseré à la couleur communale, le temps
   de retrouver de quel point il s'agit dans une longue liste. */
.point-vise > article          { border-color: var(--commune-texte);
                                 box-shadow: 0 0 0 1px var(--commune-texte); }
/* Le titre d'une fiche sert de raccourci vers la carte : il doit s'annoncer
   comme cliquable, sans devenir un faux lien. */
.titre-situable                { cursor: pointer; }
.titre-situable:hover          { color: var(--commune-texte); }

/* ── Informations : liste à gauche ──────────────────────────*/
.fiche-info {
  display: flex; align-items: flex-start; gap: 12px;
  border: 1px solid transparent; border-radius: 16px;
  padding: 12px; cursor: pointer;
  transition: background-color .18s, border-color .18s;
}
.fiche-info:hover     { background: #F8FAFC; border-color: #E2E8F0; }
.fiche-info.est-active { background: var(--commune-voile); border-color: var(--commune-texte); }

/* Contenu rédigé dans le back-office : la typographie vient du greffon
   `typography` de Tailwind, déjà chargé par le gabarit et déjà employé par la
   page Actualités. On ne reprend ici que ce qu'il ne couvre pas — un tableau
   large doit défiler dans son coin plutôt que d'élargir toute la page. */
.prose table          { display: block; overflow-x: auto; max-width: 100%; }

/* ── Bannière pleine largeur ────────────────────────────────
   `main` réserve 6rem sous l'en-tête, hauteur confortable pour un titre de
   section. Une bannière photo, elle, doit toucher l'en-tête : on lui rend la
   différence entre cette réserve et la hauteur réellement mesurée. Le repli à
   6rem annule la remontée si le script ne tourne pas — mieux vaut une bande
   vide qu'une image passant sous une barre opaque. */
.banniere-pleine { margin-top: calc(var(--entete-h, 6rem) - 6rem); }

/* Pages pleine hauteur — la carte des points de collecte.
   La barre supérieure est `fixed` : le contenu doit s'en écarter de sa
   hauteur exacte, et une page qui occupe l'écran doit retrancher la même
   valeur. `--entete-h` est posée par le gabarit puis remesurée par le script ;
   le repli de 68px ne sert que si le script n'a pas tourné. */
.sous-entete    { padding-top: var(--entete-h, 68px); }
.pleine-hauteur { height: calc(100vh - var(--entete-h, 68px)); }

/* ── Enseigne de l'en-tête ──────────────────────────────────
   Le logo du menu latéral tient lieu de nom dans la barre. Sa hauteur est
   réglée par commune (`--logo-h`) : un mot-symbole large doit monter plus
   haut qu'un écusson carré, et une valeur unique ne conviendrait à personne.

   La largeur suit le rapport naturel plutôt qu'une borne serrée : avec
   `object-fit: contain`, une largeur trop contrainte rétrécit l'image EN
   HAUTEUR au lieu de la rogner, et la hauteur demandée n'est jamais atteinte.
   La borne ne sert donc qu'aux cas extrêmes. */
.logo-entete {
  height: var(--logo-h, 56px);
  width: auto;
  max-width: 340px;
  object-fit: contain;
}
/* Téléphone : l'écran commande. On plafonne sans jamais dépasser le réglage
   de la commune — un logo voulu petit ne doit pas grandir ici. */
@media (max-width: 639px) {
  .logo-entete { height: min(var(--logo-h, 56px), 44px); max-width: 220px; }
}