/* ═══════════════════════════════════════════════════════════════════════
   CIRCULE — feuille unique, aucune dépendance, aucun build.

   Parti pris : le blanc porte la page, la menthe de la charte sert d'accent
   (bandes, champs, survols), la couleur est réservée aux quatre flux.
   Des filets d'un pixel plutôt que des ombres : l'ombre n'apparaît qu'au
   survol, quand quelque chose se soulève vraiment.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Les quatre flux, échantillonnés sur le logo officiel */
  --gris:   #7B7774;
  --vert:   #616C3C;
  --jaune:  #DCA447;
  --rouge:  #B14E38;

  /* Menthe de la charte, déclinée en accents */
  /* Le vert des données : le vert de charte re-échelonné pour tenir le contraste
     et ne pas lire gris une fois réduit à un trait de deux pixels. */
  --data-vert: #5A7228;

  --menthe:       #CEF4DE;
  --menthe-voile: #F2FBF6;
  --menthe-trait: #D8EBE0;

  --papier: #FFFFFF;
  --carte:  #FFFFFF;
  --trait:  #E8EDEA;
  --encre:  #131C17;
  --estompe:#6A7C72;

  --ombre: 0 8px 26px -18px rgba(19, 28, 23, .5);
  --ombre-levee: 0 18px 40px -22px rgba(19, 28, 23, .55);

  --r: 12px;
  --r-petit: 8px;
  --gouttiere: 20px;

  --display: 'Poppins', 'Futura', 'Century Gothic', -apple-system, BlinkMacSystemFont, sans-serif;
  --texte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Circule est une marque claire : le fond blanc est le défaut, y compris quand le
   système est en mode sombre. La variante sombre reste disponible, mais sur
   choix explicite (bouton du pied de page). */
:root[data-theme="dark"] {
  --data-vert: #7E9A45;
  --menthe:       #172C1F;
  --menthe-voile: #101913;
  --menthe-trait: #23372B;
  --papier: #0B100D;
  --carte:  #121A15;
  --trait:  #202C25;
  --encre:  #EAF2ED;
  --estompe:#8FA398;
  --vert:   #93AB5C;
  --jaune:  #E8BB63;
  --rouge:  #D06C54;
  --gris:   #A7A099;
  --ombre: 0 8px 26px -18px rgba(0, 0, 0, .9);
  --ombre-levee: 0 18px 40px -22px rgba(0, 0, 0, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  /* La roue du héros déborde volontairement : on la rogne sans créer de
     conteneur de défilement, sinon l'entête collante cesse de coller. */
  overflow-x: clip;
}
body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font: 400 16px/1.65 var(--texte);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; }

@keyframes tourne { to { transform: rotate(360deg); } }
@keyframes monte { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes bat { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

/* ─────────────────────────────────────────────────── Entête ─────────── */

.entete {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--papier) 86%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--trait);
}
.entete-corps {
  max-width: 1120px; margin: 0 auto;
  padding: 13px var(--gouttiere);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.marque { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.marque-roue { animation: tourne 46s linear infinite; flex: 0 0 auto; }
.marque:hover .marque-roue { animation-duration: 6s; }
.marque-texte b {
  display: block;
  font: 800 26px/1 var(--display);
  letter-spacing: .135em; margin-right: -.135em;
}
.marque-texte small {
  display: block; margin-top: 4px;
  font: 400 9.5px/1 var(--display);
  letter-spacing: .13em; text-transform: uppercase; color: var(--rouge);
}
@media (max-width: 640px) { .marque-texte small { display: none; } }

.lien-compte {
  background: var(--papier); border: 1px solid var(--trait);
  border-radius: 999px; padding: 9px 18px;
  font: 500 13.5px/1 var(--texte); text-decoration: none; white-space: nowrap;
  transition: border-color .16s, color .16s;
}
.lien-compte:hover { border-color: var(--encre); }

/* ────────────────────────────────────── Onglets de flux ─────────────── */

.flux-barre {
  max-width: 1120px; margin: 0 auto;
  padding: 0 var(--gouttiere) 12px;
  display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none;
}
.flux-barre::-webkit-scrollbar { display: none; }
.flux-onglet {
  flex: 0 0 auto; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--papier); color: var(--estompe);
  border: 1px solid var(--trait); border-radius: 999px;
  padding: 7px 15px 7px 11px;
  font: 500 13.5px/1 var(--texte);
  transition: background .18s, color .18s, border-color .18s;
}
.flux-onglet:hover { color: var(--encre); border-color: var(--ton, var(--encre)); }
.flux-onglet .picto { width: 17px; height: 17px; color: var(--ton, var(--encre)); flex: 0 0 auto; }
.flux-onglet .compte {
  font-variant-numeric: tabular-nums;
  background: var(--menthe-voile); border-radius: 999px; padding: 1px 7px; font-size: 11.5px;
}
.flux-onglet[aria-selected="true"] {
  background: var(--ton, var(--encre)); border-color: var(--ton, var(--encre));
  color: #fff; font-weight: 600;
}
.flux-onglet[aria-selected="true"] .picto { color: #fff; }
.flux-onglet[aria-selected="true"] .compte { background: rgba(255,255,255,.2); color: #fff; }

/* ──────────────────────────────────────────── Mise en page ──────────── */

main { max-width: 1120px; margin: 0 auto; padding: 0 var(--gouttiere) 130px; }
.vue { animation: monte .3s ease-out both; }

h2 {
  font: 600 11.5px/1 var(--display);
  text-transform: uppercase; letter-spacing: .16em; color: var(--estompe);
  margin: 38px 0 18px; display: flex; align-items: center; gap: 14px;
}
h2::after { content: ''; flex: 1; height: 1px; background: var(--trait); }

/* ──────────────────────────────────────────────────── Héro ──────────── */

/* Le visuel est sorti du flux : en grille il se faisait écraser à zéro par
   le débord négatif. En absolu il peut mordre le bord sans rien contraindre. */
.hero { position: relative; padding: 28px 0 18px; }
/* La largeur se pose sur le texte, pas sur le bloc : sinon la rangée de
   boutons héritait d'une mesure de lecture et passait à la ligne. */
.hero-texte { position: relative; z-index: 1; }
.hero h1 {
  margin: 0;
  font: 800 clamp(36px, 6.6vw, 60px)/.96 var(--display);
  letter-spacing: -.035em;
}
.hero h1 .d { color: var(--rouge); }
.hero h1 .r { color: var(--vert); }
.hero h1 .c { color: var(--jaune); }
.hero-accroche {
  margin: 18px 0 0;
  font: 600 clamp(19px, 2.2vw, 23px)/1.28 var(--display);
  letter-spacing: -.022em; color: var(--encre);
}
.hero-chapeau {
  margin: 10px 0 0; max-width: 36ch;
  font-size: 16px; line-height: 1.55; color: var(--estompe);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; }
.hero-actions .bouton { text-decoration: none; }

/* Le visuel de la charte : la pousse révélée par les pétales. Il déborde à
   droite comme sur la couverture, et il ne tourne pas. */
.hero-visuel {
  position: absolute; z-index: 0;
  right: calc(50% - 50vw); top: 50%; transform: translateY(-50%);
  height: clamp(250px, 34vw, 420px); width: auto;
  user-select: none; pointer-events: none;
}

/* Le symbole ne sert plus que de filigrane secondaire (pied, états vides). */
:root[data-theme="dark"] .pied-roue,
:root[data-theme="dark"] .vide img {
  filter: brightness(0) invert(1); opacity: .07;
}

@media (max-width: 880px) { .hero-chapeau, .hero-accroche { max-width: 27ch; } }
/* Sur téléphone, la priorité va aux annonces : le visuel s'efface pour que la
   grille reste visible en bas du premier écran. */
@media (max-width: 660px) {
  .hero { padding: 26px 0 18px; }
  .hero-texte { max-width: none; }
  .hero-visuel { display: none; }
}
.titre-page {
  margin: 44px 0 10px;
  font: 800 clamp(32px, 5.6vw, 48px)/1 var(--display); letter-spacing: -.032em;
}
.chapeau { margin: 0 0 30px; max-width: 54ch; color: var(--estompe); font-size: 16.5px; }

/* ───────────────────────────────────────────────── Parcours ─────────── */

.parcours {
  display: grid; gap: 20px; margin: 4px 0 8px;
  grid-template-columns: repeat(3, 1fr);
  background: var(--menthe-voile); border: 1px solid var(--trait);
  border-radius: var(--r); padding: 22px 24px;
}
.pas { position: relative; padding-right: 16px; }
/* La flèche entre deux temps. */
.pas:not(:last-child)::before {
  content: ''; position: absolute; top: 20px; right: 2px;
  width: 14px; height: 1.5px; background: var(--trait);
}
.pas:not(:last-child)::after {
  content: ''; position: absolute; top: 16px; right: -2px;
  border: 5px solid transparent; border-left-color: var(--trait);
}
.pas-rond {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 50%; background: var(--carte);
  border: 1px solid color-mix(in srgb, var(--ton) 35%, var(--trait));
  color: var(--ton); margin-bottom: 12px;
}
.pas-rond .picto { width: 22px; height: 22px; }
.pas b { display: block; font: 700 15.5px/1.3 var(--display); letter-spacing: -.02em; }
.pas-detail { display: block; margin-top: 5px; font-size: 13.5px; line-height: 1.5; color: var(--estompe); }

@media (max-width: 720px) {
  .parcours { grid-template-columns: 1fr; gap: 15px; padding: 20px; }
  .pas { padding-right: 0; display: grid; grid-template-columns: 42px 1fr; column-gap: 14px; align-items: center; }
  .pas-rond { margin-bottom: 0; grid-row: span 2; }
  .pas-detail { grid-column: 2; margin-top: 2px; }
  .pas:not(:last-child)::before, .pas:not(:last-child)::after { display: none; }
}

/* Les six flux, en couleur. La charte tient dans ces six teintes et elles ne
   vivaient que dans une barre d'onglets de douze pixels : ici elles portent la
   page, avec le pictogramme de chaque famille. */
.grille-flux {
  display: grid; gap: 12px; margin-top: 46px;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}
.tuile {
  display: block; text-decoration: none; color: inherit; padding: 20px 18px 18px;
  border-radius: var(--r); border: 1px solid var(--trait);
  background: color-mix(in srgb, var(--ton) 8%, var(--carte));
  transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s, background .2s;
}
.tuile:hover {
  transform: translateY(-3px); box-shadow: var(--ombre-levee);
  background: color-mix(in srgb, var(--ton) 15%, var(--carte));
}
.tuile-picto {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px;
  background: color-mix(in srgb, var(--ton) 20%, transparent); color: var(--ton);
  margin-bottom: 14px;
}
.tuile-picto .picto { width: 26px; height: 26px; }
.tuile b { display: block; font: 800 18px/1.2 var(--display); letter-spacing: -.026em; color: var(--ton); }
.tuile-sous { display: block; margin-top: 4px; font-size: 13.5px; color: var(--estompe); }

/* Trois chiffres, les seuls que le produit revendique. */
.vitrine {
  display: grid; gap: 10px; margin-top: 14px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border-top: 1px solid var(--trait); padding-top: 22px;
}
.vitrine p { margin: 0; }
.vitrine b {
  display: block; font: 800 clamp(30px, 4vw, 44px)/1 var(--display);
  letter-spacing: -.04em; font-variant-numeric: tabular-nums;
}
.vitrine span { display: block; margin-top: 5px; font-size: 13.5px; color: var(--estompe); }

/* Titre d'une section de la page d'accueil. Le `h2` global est une étiquette
   majuscule ; ici il s'agit de jalons que le lecteur suit en descendant. */
.titre-section {
  display: block; text-transform: none; letter-spacing: -.028em; color: var(--encre);
  font: 800 clamp(21px, 2.6vw, 27px)/1.2 var(--display);
  margin: 56px 0 18px; scroll-margin-top: 136px;
}
.titre-section::after { content: none; }

/* ──────────────────────────────────────────── Cartes de lot ─────────── */

/* Grille dense : la carte au repos ne porte que de quoi trancher, donc elle
   peut être petite, donc on en voit cinq d'un coup au lieu de trois. */
.lots { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); }

.lot {
  position: relative; display: block; overflow: hidden;
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--r);
  padding: 15px 15px 14px; text-decoration: none; color: inherit;
  transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s, border-color .2s;
  animation: monte .36s ease-out both;
}
.lot::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--ton); z-index: 1;
}
.lot:hover, .lot:focus-visible {
  box-shadow: var(--ombre-levee);
  border-color: color-mix(in srgb, var(--ton) 45%, var(--trait));
}

.lot-tete { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.lot-flux {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ton); font: 700 10px/1 var(--display);
  letter-spacing: .11em; text-transform: uppercase;
}
.lot-flux .picto { width: 15px; height: 15px; color: var(--ton); flex: 0 0 auto; }
/* La récurrence est un marqueur, pas une phrase : le mot est dans le titre. */
.lot-revient {
  margin-left: auto; width: 20px; height: 20px; border-radius: 50%;
  background: var(--menthe-voile); color: var(--estompe);
  display: grid; place-items: center; font-size: 12px; line-height: 1;
}
.lot-cherche {
  margin-left: auto;
  background: color-mix(in srgb, var(--ton) 14%, transparent); color: var(--ton);
  border-radius: 999px; padding: 4px 9px;
  font: 700 9.5px/1 var(--display); letter-spacing: .09em; text-transform: uppercase;
}

.lot h3 {
  margin: 0; font: 700 15.5px/1.3 var(--display); letter-spacing: -.02em; color: var(--encre);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Les deux seuls chiffres qui décident : combien, et à quelle distance. */
.lot-cle {
  display: flex; align-items: baseline; gap: 9px; margin: 0;
  font: 600 14px/1.2 var(--display); letter-spacing: -.012em;
  font-variant-numeric: tabular-nums;
}
.lot-cle b { font-weight: 600; }
.lot-cle .loin { margin-left: auto; color: var(--estompe); white-space: nowrap; }

.lot-zone { margin-top: 11px; }
.lot-plus { margin-top: 9px; }
.lot-plus p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--estompe); }
.lot-plus > p:first-child {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lot-fin {
  display: flex; align-items: center; gap: 10px;
  margin-top: 8px !important; font-size: 12.5px;
}
.lot-fin .gabarit { font-size: 12.5px; }
.lot-reste {
  margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.lot.presse .lot-reste { color: var(--rouge); font-weight: 600; }

/* Filtre de matière actif : dit ce qu'on regarde, et comment en sortir. */
.filtre-matiere {
  display: inline-flex; align-items: baseline; gap: 10px; margin-bottom: 14px;
  background: var(--menthe-voile); border: 1px solid var(--trait); border-radius: 999px;
  padding: 8px 16px; font-size: 13.5px;
}
.filtre-matiere b { font: 600 13.5px/1 var(--display); color: var(--encre); }
.filtre-matiere a { color: var(--vert); }

/* Ce que le donneur a déclaré. Un fait, pas une promesse commerciale : le
   ton reste sobre, la couleur reste au flux. */
.declare {
  display: inline-block; margin: 0 5px 6px 0; padding: 3px 9px;
  border: 1px solid var(--trait); border-radius: 999px;
  font: 500 11.5px/1.35 var(--texte); color: var(--estompe);
  background: var(--menthe-voile);
}
.declare.exige { border-style: dashed; }
.declarations { margin: 12px 0 0; }

/* Vignette. Elle occupe le coin qu'on a libéré en retirant le décompte, que
   la jauge du bas dit déjà. Une carte sans photo garde simplement le coin
   vide : la grille ne bouge pas selon qui a photographié son armoire. */
.lot-photo {
  position: absolute; top: 3px; right: 0; z-index: 1;
  width: 78px; height: 78px; object-fit: cover;
  border-bottom-left-radius: 12px; border-top-right-radius: calc(var(--r) - 1px);
  background: var(--menthe-voile);
}
.lot.avec-photo .lot-tete, .lot.avec-photo h3 { padding-right: 84px; }

/* Le filet de vie remplace le décompte : « 90 j » et « 14 h » ne se comparent
   pas, deux filets si. Il se vide à mesure que la matière approche de sa fin. */
.jauge {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--trait);
}
.jauge::after {
  content: ''; position: absolute; inset: 0 var(--part) 0 0;
  background: color-mix(in srgb, var(--ton) 70%, transparent);
}
.lot.presse .jauge::after { background: var(--rouge); }

@media (hover: hover) and (pointer: fine) {
  /* Deux temps dans la même boîte. Le bas de la carte est une zone de hauteur
     fixe : au repos elle porte les chiffres, au survol le détail prend leur
     place. Rien ne recouvre le titre, rien ne pousse les cartes voisines. */
  .lot { height: 178px; }
  .lot:hover, .lot:focus-visible { transform: translateY(-3px); }

  /* Les deux états partent de la même ligne de base, en bas de la carte : le
     détail pousse vers le haut à la place des chiffres, sans toucher au titre. */
  .lot-zone {
    position: absolute; left: 15px; right: 15px; bottom: 14px; height: 70px; margin: 0;
  }
  .lot-cle, .lot-plus {
    position: absolute; left: 0; right: 0; bottom: 0;
    transition: opacity .18s ease, transform .22s cubic-bezier(.2,.8,.3,1);
  }
  .lot-plus { margin: 0; opacity: 0; transform: translateY(7px); pointer-events: none; }
  .lot:hover .lot-cle, .lot:focus-visible .lot-cle { opacity: 0; transform: translateY(-7px); }
  .lot:hover .lot-plus, .lot:focus-visible .lot-plus { opacity: 1; transform: none; }
}

/* Vue détaillée et tableaux : le gabarit garde sa forme d'origine. */
.gabarit {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 500; white-space: nowrap;
}
.gabarit .picto { width: 17px; height: 17px; flex: 0 0 auto; opacity: .85; }
.tableau .gabarit { justify-content: flex-end; }
.gabarit-aide { display: block; margin-top: 3px; font-size: 13px; color: var(--estompe); font-weight: 400; }

.distance { font-variant-numeric: tabular-nums; white-space: nowrap; }

.minuteur {
  display: inline-flex; align-items: center; gap: 5px;
  font-variant-numeric: tabular-nums; font-weight: 500;
  background: var(--menthe-voile); border-radius: 999px; padding: 3px 10px;
}
.minuteur.urgent {
  background: color-mix(in srgb, var(--rouge) 11%, transparent);
  color: var(--rouge); font-weight: 600;
}
.minuteur.urgent .sablier { animation: bat 1.6s ease-in-out infinite; }

/* ───────────────────────────────── Direction et récurrence ─────────── */

/* Bascule offre / besoin : deux états mutuellement exclusifs, pas deux boutons. */
.bascule-direction {
  display: inline-flex; background: var(--menthe-voile);
  border: 1px solid var(--trait); border-radius: 999px; padding: 3px;
}
.bascule-direction button {
  border: 0; background: none; cursor: pointer; border-radius: 999px;
  padding: 8px 18px; font: 500 14px/1 var(--texte); color: var(--estompe);
  transition: background .18s, color .18s;
}
.bascule-direction button[aria-selected="true"] {
  background: var(--carte); color: var(--encre); font-weight: 600;
  box-shadow: 0 1px 2px rgba(19,28,23,.08);
}
.bascule-direction.large { display: flex; width: 100%; }
.bascule-direction.large button { flex: 1; padding: 12px; font-size: 15px; }

.etiquette-besoin {
  background: color-mix(in srgb, var(--ton, var(--vert)) 13%, transparent);
  color: var(--ton, var(--vert)); border-radius: 999px; padding: 3px 10px;
  font: 600 11px/1.4 var(--display); letter-spacing: .07em; text-transform: uppercase;
}
.etiquette-recurrent {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--menthe-voile); border-radius: 999px; padding: 3px 9px; font-weight: 500;
}
/* Une carte de besoin se distingue d'une disponibilité : rien à venir chercher. */
.lot.besoin { border-style: dashed; }
.lot.besoin::before { opacity: .45; }

/* Mes annonces, dans le compte. */
.annonce {
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--r);
  border-left: 3px solid var(--ton); padding: 16px 18px; margin-bottom: 10px;
}
.annonce-haut { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.annonce-haut b { font: 700 15.5px/1.35 var(--display); letter-spacing: -.018em; }
.annonce-etat { font-size: 12.5px; color: var(--estompe); }
.annonce-meta {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin-top: 8px; font-size: 12.5px; color: var(--estompe);
}

/* ────────────────────────────────────────────── États vides ─────────── */

.vide {
  grid-column: 1 / -1; text-align: center;
  background: var(--menthe-voile); border-radius: var(--r);
  padding: 64px 26px;
}
.vide img { width: 68px; opacity: .45; animation: tourne 30s linear infinite; }
.vide b { display: block; margin: 18px 0 6px; font: 700 20px/1.25 var(--display); letter-spacing: -.02em; }
.vide span { color: var(--estompe); }

/* ───────────────────────────────────────────── Introduction ─────────── */

/* Bande pleine largeur depuis l'intérieur du conteneur centré.
   `calc(50vw - 50%)` vaut exactement la gouttière de `main` : le texte
   s'aligne pile sur le reste de la page. */
.bande {
  margin-inline: calc(50% - 50vw);
  padding: 54px calc(50vw - 50%);
  background: var(--menthe-voile);
  border-block: 1px solid var(--trait);
}
.bande { margin-top: 64px; }
.bande h2 { margin-top: 44px; }
.bande h2:first-child { margin-top: 0; }

.texte { max-width: 62ch; margin: 0 0 16px; color: var(--estompe); }
/* La photo sur la page d'un lot : c'est elle qui décide si on se déplace. */
.photo-lot {
  display: block; width: 100%; max-height: 460px; object-fit: cover;
  border: 1px solid var(--trait); border-radius: var(--r);
  margin: 18px 0 4px; background: var(--menthe-voile);
}

/* Champ photo. Zone cliquable large : sur téléphone, on vise avec le pouce. */
.photo-champ {
  position: relative; display: block; cursor: pointer;
  border: 1px dashed var(--trait); border-radius: var(--r);
  background: var(--menthe-voile); overflow: hidden; min-height: 132px;
  transition: border-color .18s, background .18s;
}
.photo-champ:hover { border-color: var(--vert); }
.photo-vide {
  display: grid; place-items: center; gap: 4px; padding: 26px 20px; text-align: center;
}
.photo-vide b { font: 600 15px/1.3 var(--display); color: var(--encre); }
.photo-vide small { font-size: 13px; line-height: 1.5; color: var(--estompe); max-width: 42ch; }
.photo-champ img { display: block; width: 100%; max-height: 320px; object-fit: cover; }
.photo-retirer {
  position: absolute; top: 10px; right: 10px;
  border: 0; border-radius: 999px; padding: 7px 14px; cursor: pointer;
  background: rgba(19, 28, 23, .72); color: #fff;
  font: 600 12.5px/1 var(--texte);
}

/* Hors périmètre : le refus porte un formulaire, pas un cul-de-sac. */
.message.attente { display: block; }
.attente-form { margin-top: 14px; display: grid; gap: 12px; }
.attente-form label { display: block; font: 600 13.5px/1.4 var(--display); }
.attente-form input[type="text"], .attente-form input[type="email"], .attente-form input:not([type]) {
  width: 100%; margin-top: 6px;
}
.attente-form .case {
  display: flex; align-items: flex-start; gap: 10px;
  font: 400 13px/1.5 var(--texte); color: var(--estompe);
}
.attente-form .case input { margin-top: 2px; flex: 0 0 auto; }
.attente-form .bouton { justify-self: start; }

/* Sélecteur de langue. Casteau jouxte le SHAPE : une part des habitants lit
   l'anglais avant le français, et doit le voir sans chercher. */
.langues { display: inline-flex; gap: 2px; }
.langues a {
  padding: 6px 9px; border-radius: 7px; text-decoration: none;
  font: 700 11.5px/1 var(--display); letter-spacing: .06em; color: var(--estompe);
  transition: background .16s, color .16s;
}
.langues a:hover { background: var(--menthe-voile); color: var(--encre); }
.langues a[aria-current="true"] { background: var(--menthe-voile); color: var(--encre); }

/* Ce que les gens cherchent : six liens internes, six ancres qui disent ce
   qu'il y a derrière. Discret, mais c'est la seule navigation par le langage
   ordinaire de la page. */
.mots { margin-top: 58px; }
.mots h2 {
  display: block; text-transform: none; letter-spacing: -.024em; color: var(--encre);
  font: 700 17px/1.3 var(--display); margin: 0 0 14px;
}
.mots h2::after { content: none; }
.mots p { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.mots a {
  display: inline-flex; align-items: center;
  border: 1px solid var(--trait); border-radius: 999px; padding: 8px 16px;
  font: 500 13.5px/1 var(--texte); color: var(--estompe); text-decoration: none;
  transition: color .16s, border-color .16s, background .16s;
}
.mots a:hover {
  color: var(--ton); border-color: color-mix(in srgb, var(--ton) 45%, var(--trait));
  background: color-mix(in srgb, var(--ton) 7%, transparent);
}

/* Le pourquoi, en bas de page et en voix basse. Il n'a pas de bande de fond :
   trois bandes d'affilée en pied de page feraient un mille-feuille. Un filet et
   une colonne étroite suffisent à le détacher. */
.pourquoi {
  max-width: 60ch; margin: 62px 0 0; padding-top: 28px;
  border-top: 1px solid var(--trait);
}
/* Sur sa propre page, le texte n'a plus à se faire discret sous un filet. */
.pourquoi.ouvert { margin-top: 10px; padding-top: 0; border-top: 0; max-width: 64ch; }
.pourquoi.ouvert p { font-size: 16px; }
.pourquoi.ouvert .pivot { font-size: 20px; }
.pourquoi h2 {
  display: block; text-transform: none; letter-spacing: -.024em; color: var(--encre);
  font: 700 19px/1.3 var(--display); margin: 0 0 14px;
}
.pourquoi h2::after { content: none; }
.pourquoi p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.62; color: var(--estompe); }
.pourquoi .pivot {
  font: 600 16.5px/1.45 var(--display); letter-spacing: -.016em; color: var(--encre);
  margin: 16px 0 14px;
}
.pourquoi .signe {
  margin-top: 18px; font: 700 15px/1.5 var(--display); letter-spacing: -.02em;
}
.pourquoi .signe span { margin-right: .32em; }
.pourquoi .signe em {
  display: block; margin-top: 4px;
  font: 400 13.5px/1.5 var(--texte); font-style: normal; color: var(--estompe);
}

/* L'ouverture de l'introduction est une question posée au lecteur, pas une
   étiquette de section : elle sort du gabarit majuscule des autres `h2`. */
.intro-titre {
  display: block; text-transform: none; letter-spacing: -.032em; color: var(--encre);
  font: 800 clamp(25px, 3.4vw, 36px)/1.12 var(--display);
  margin: 0 0 24px; max-width: 19ch;
}
.intro-titre::after { content: none; }
.texte.court { font-size: 14.5px; }
.sous-titre {
  margin: 42px 0 14px;
  font: 700 17px/1.3 var(--display); letter-spacing: -.022em;
}


.horloges {
  display: grid; gap: 10px; margin: 16px 0 0;
  grid-template-columns: repeat(auto-fit, minmax(192px, 1fr));
}
.horloge-flux {
  display: flex; align-items: center; gap: 11px;
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--r-petit);
  border-left: 3px solid var(--ton); padding: 13px 15px;
}
.horloge-flux .picto { width: 22px; height: 22px; color: var(--ton); flex: 0 0 auto; }
.horloge-flux b { font: 600 14px/1.25 var(--display); letter-spacing: -.012em; flex: 1; }
.horloge-flux span {
  font: 500 11.5px/1 var(--texte); color: var(--ton); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.limites { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 18px; }
.limites span {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--carte); border: 1px solid var(--trait); border-radius: 999px;
  padding: 7px 16px 7px 7px; font: 500 13.5px/1 var(--texte);
}
.limites i {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ton); color: #fff;
  display: grid; place-items: center;
  font: 700 12px/1 var(--display); font-style: normal;
}

/* Questions fréquentes. `<details>` natif : aucun script, ouverture au clavier,
   et le contenu reste lisible par les moteurs même replié. */
.faq { display: grid; gap: 8px; margin-top: 16px; max-width: 72ch; }
.faq details {
  background: var(--carte); border: 1px solid var(--trait);
  border-radius: var(--r-petit); overflow: hidden;
}
.faq summary {
  cursor: pointer; list-style: none; padding: 14px 44px 14px 16px; position: relative;
  font: 600 15px/1.35 var(--display); letter-spacing: -.014em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: 15px; top: 50%; translate: 0 -50%;
  font: 400 20px/1 var(--display); color: var(--estompe);
  transition: rotate .18s ease;
}
.faq details[open] summary::after { content: '+'; rotate: 45deg; }
.faq summary:hover { background: var(--menthe-voile); }
.faq summary:focus-visible { outline: 2px solid var(--vert); outline-offset: -2px; }
/* Pages légales : une colonne de lecture, rien d'autre. */
.legal { max-width: 68ch; }
.legal section { margin-bottom: 26px; }
.legal p { margin: 0 0 12px; font-size: 15px; line-height: 1.65; color: var(--estompe); }

/* Qui porte le projet. Deux cartes cliquables qui sortent du site : ce sont de
   vrais liens, pas des logos décoratifs. */
.acteurs {
  display: grid; gap: 12px; margin: 26px 0 24px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.acteur {
  display: block; text-decoration: none; color: inherit;
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--r);
  padding: 18px 20px 16px;
  transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s, border-color .2s;
}
.acteur:hover { transform: translateY(-2px); box-shadow: var(--ombre-levee); border-color: var(--vert); }
.acteur-role {
  display: block; font: 700 10.5px/1 var(--display); letter-spacing: .1em;
  text-transform: uppercase; color: var(--estompe); margin-bottom: 8px;
}
.acteur b { display: block; font: 800 19px/1.2 var(--display); letter-spacing: -.026em; }
.acteur p { margin: 7px 0 0; font-size: 14px; line-height: 1.55; color: var(--estompe); }
.acteur-lien {
  display: inline-block; margin-top: 11px; font: 500 13px/1 var(--texte); color: var(--vert);
}
.acteur:hover .acteur-lien { text-decoration: underline; }
.apropos a { color: var(--vert); }

/* Le fond de plan est un canevas gris clair. En thème sombre on l'inverse
   plutôt que de changer de fournisseur : les pastilles de flux, elles, gardent
   leurs couleurs puisqu'elles sont dessinées par Leaflet, pas par la tuile. */
:root[data-theme="dark"] .leaflet-tile {
  filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.9);
}

/* Panne de fond de plan : un mot posé sous la carte, pas un damier muet. */
.avis-carte {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 500;
  margin: 0; padding: 9px 13px; border-radius: var(--r-petit);
  background: var(--carte); border: 1px solid var(--trait);
  font: 500 13px/1.45 var(--texte); color: var(--estompe);
}

.faq details p {
  margin: 0; padding: 0 16px 15px; color: var(--estompe);
  font-size: 14.5px; line-height: 1.65; max-width: 62ch;
}


/* ───────────────────────────────────────────── Formulaires ──────────── */

.panneau {
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--r);
  padding: 26px; margin-bottom: 16px;
}
.champ { margin-bottom: 20px; }
.champ:last-child { margin-bottom: 0; }
.champ label {
  display: block; margin-bottom: 8px;
  font: 600 11px/1 var(--display); letter-spacing: .13em;
  text-transform: uppercase; color: var(--estompe);
}
.champ input, .champ select, .champ textarea {
  width: 100%; padding: 13px 14px;
  background: var(--menthe-voile);
  border: 1px solid var(--trait); border-radius: var(--r-petit);
  transition: border-color .15s, background .15s;
}
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none; border-color: var(--ton, var(--vert)); background: var(--carte);
}
.champ textarea { min-height: 96px; resize: vertical; }
.champ .aide { margin: 8px 0 0; font-size: 13px; color: var(--estompe); line-height: 1.5; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Questions d'admission : elles n'apparaissent que pour les sous-catégories
   conditionnelles, et doivent se répondre sans quitter le formulaire des yeux. */
.questions { background: var(--menthe-voile); border: 1px solid var(--trait);
             border-radius: var(--r-petit); padding: 16px; }
.question { display: flex; gap: 14px; align-items: baseline; justify-content: space-between;
            flex-wrap: wrap; font-size: 14.5px; line-height: 1.45; }
.question + .question { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--trait); }
.oui-non { display: flex; gap: 14px; flex: 0 0 auto; }
.oui-non label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.oui-non input { width: auto; accent-color: var(--ton, var(--vert)); }

/* Six flux : trois par ligne se lisent mieux qu'un remplissage automatique,
   qui laissait le dernier seul sur sa rangée. */
.choix-flux {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin-bottom: 24px;
}
@media (max-width: 720px) { .choix-flux { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) { .choix-flux { grid-template-columns: 1fr; } }
.choix-flux button {
  cursor: pointer; text-align: left;
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--r);
  padding: 17px;
  transition: border-color .18s, background .18s, transform .18s;
}
.choix-flux button:hover { transform: translateY(-2px); border-color: var(--ton); }
.choix-flux button[aria-pressed="true"] {
  border-color: var(--ton); box-shadow: inset 0 0 0 1px var(--ton);
  background: color-mix(in srgb, var(--ton) 6%, var(--carte));
}
.choix-flux .picto { width: 27px; height: 27px; color: var(--ton); display: block; margin-bottom: 11px; }
.choix-flux b { display: block; font: 700 15px/1.25 var(--display); letter-spacing: -.016em; }
.choix-flux small { color: var(--estompe); font-size: 12.5px; }

/* ───────────────────────────────────────────────── Boutons ──────────── */

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--encre); color: var(--papier);
  border: 1px solid var(--encre); border-radius: 999px;
  padding: 13px 26px; font: 500 15px/1 var(--texte);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform .16s, box-shadow .16s, opacity .16s;
}
.bouton:hover { transform: translateY(-2px); box-shadow: var(--ombre-levee); }
.bouton:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }
.bouton.principal {
  background: var(--ton, var(--vert)); border-color: var(--ton, var(--vert)); color: #fff;
}
.bouton.fantome {
  background: var(--carte); color: var(--encre); border-color: var(--trait);
}
.bouton.fantome:hover { border-color: var(--encre); box-shadow: none; }

/* Hiérarchie, valable partout :
   `principal` valide le bloc, `fantome` est secondaire, `danger` détruit ou refuse.
   Le rouge reste en contour : une action destructrice ne doit pas attirer l'œil
   plus que l'action normale, seulement se distinguer d'elle. */
.bouton.danger {
  background: var(--carte); color: var(--rouge);
  border-color: color-mix(in srgb, var(--rouge) 45%, var(--trait));
}
.bouton.danger:hover { border-color: var(--rouge); box-shadow: none; }

.bouton.large { width: 100%; padding: 17px; font-size: 16.5px; font-weight: 600; }
.bouton.petit { padding: 8px 15px; font-size: 13.5px; }

.fab {
  position: fixed; right: var(--gouttiere); z-index: 50;
  bottom: calc(24px + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--vert); color: #fff; border-radius: 999px;
  padding: 15px 26px 15px 21px;
  font: 600 16px/1 var(--display); letter-spacing: -.01em; text-decoration: none;
  box-shadow: 0 12px 32px -12px color-mix(in srgb, var(--vert) 85%, transparent);
  transition: transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s;
}
.fab:hover { transform: translateY(-3px); }
.fab .fab-plus { font-size: 22px; font-weight: 300; line-height: .8; transition: transform .3s; }
.fab:hover .fab-plus { transform: rotate(90deg); }
.fab[hidden] { display: none; }
[hidden] { display: none !important; }

/* ──────────────────────────────────────────────── Messages ──────────── */

.message {
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--r);
  border-left: 3px solid var(--ton, var(--vert));
  padding: 16px 19px; margin-bottom: 22px; font-size: 14.5px; line-height: 1.6;
  color: var(--estompe);
  animation: monte .3s ease-out both;
}
.message b {
  display: block; margin-bottom: 4px; color: var(--encre);
  font: 700 15.5px/1.35 var(--display); letter-spacing: -.018em;
}
.message.erreur { --ton: var(--rouge); }
.message.succes { --ton: var(--vert); }

/* ─────────────────────────────────────────────── Tableaux ───────────── */

.tableau {
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--r);
  overflow: hidden;
}
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
th, td { padding: 14px 20px; border-bottom: 1px solid var(--trait); text-align: left; }
tr:last-child th, tr:last-child td { border-bottom: none; }
thead th {
  font: 600 10.5px/1 var(--display); letter-spacing: .14em;
  text-transform: uppercase; color: var(--estompe);
  background: var(--menthe-voile);
}
tbody th { font-weight: 400; color: var(--estompe); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tfoot th, tfoot td { font-weight: 600; border-top: 1px solid var(--encre); border-bottom: none; }
/* Les sous-titres servent aussi de séparateurs dans le tableau de bord. */
.sous-titre { margin: 34px 0 12px; }
.barre-val { height: 6px; border-radius: 999px; display: block; min-width: 3px; }

/* ──────────────────────────────────────── Cartes chiffrées ──────────── */

.chiffres {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
  gap: 12px; margin-bottom: 8px;
}
.chiffre {
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--r);
  padding: 22px; position: relative; overflow: hidden;
  animation: monte .4s ease-out both;
}
.chiffre::after {
  content: ''; position: absolute; right: -20px; bottom: -20px;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--ton, var(--vert)); opacity: .07;
}
.chiffre b {
  display: block; font: 800 32px/1 var(--display);
  letter-spacing: -.04em; font-variant-numeric: tabular-nums;
}
/* L'indicateur central du pilote : il doit sauter aux yeux avant les autres. */
.chiffre.majeur { grid-column: 1 / -1; padding: 26px; }
.chiffre.majeur b { font-size: clamp(38px, 6vw, 52px); }
.chiffre.majeur span { max-width: none; font-size: 11.5px; }
.chiffre.majeur::after { width: 84px; height: 84px; right: -26px; bottom: -26px; }
.chiffre span {
  display: block; margin-top: 8px; max-width: 14ch;
  font: 500 10.5px/1.4 var(--display); letter-spacing: .1em;
  text-transform: uppercase; color: var(--estompe);
}

/* ──────────────────────────────────────────── Exploitation ──────────── */

.job {
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--r);
  border-left: 3px solid var(--vert); padding: 18px 20px; margin-bottom: 10px;
}
.job.ko { border-left-color: var(--rouge); }
.job.pause { border-left-color: var(--jaune); }
.job-haut { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.job b { font: 700 15px/1.35 var(--display); letter-spacing: -.018em; }
.job code {
  font: 400 11.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--menthe-voile); border-radius: 5px; padding: 5px 8px; color: var(--estompe);
}
.job .detail { margin-top: 8px; font-size: 13.5px; color: var(--estompe); line-height: 1.55; }

.pastille { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 10px; vertical-align: 2px; }
.pastille.ok { background: var(--vert); }
.pastille.degrade { background: var(--jaune); }
.pastille.ko { background: var(--rouge); animation: bat 1.6s ease-in-out infinite; }

.journal { font-size: 13px; }
.journal td { padding: 10px 20px; }
.journal td:first-child { color: var(--estompe); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ─────────────────────────────────────────────────── Pied ───────────── */

.pied {
  border-top: 1px solid var(--trait);
  margin-top: 80px; padding: 48px var(--gouttiere) 130px;
  text-align: center; font-size: 13px; line-height: 1.8; color: var(--estompe);
}
.pied-roue { opacity: .3; animation: tourne 60s linear infinite; }
.pied-slogan {
  margin: 18px 0 22px;
  font: 700 clamp(21px, 4.4vw, 28px)/1.2 var(--display); letter-spacing: -.028em;
}
.pied p { margin: 0 0 16px; }
.pied-credit {
  margin: 4px 0 0; font-size: 12.5px; color: var(--estompe);
}
.pied-credit a { color: var(--estompe); text-decoration: underline; }
.pied-credit a:hover { color: var(--encre); }

.pied-liens { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; }
.pied-liens a { font-weight: 500; }
.alerte-titre { color: var(--rouge); }

/* ══════════════════════════════════ file des signalements (operateur)
   En tableau, les deux colonnes se serraient jusqu'a un mot par ligne sur un
   telephone. Une fiche empilee plutot qu'un tableau : il n'y a de toute facon
   pas deux colonnes de donnees a comparer, juste un cas et deux decisions. */

.signalements { display: grid; gap: 12px; }
.signalement-fiche {
  padding: 16px 16px 12px;
  background: var(--carte);
  border: 1px solid var(--trait); border-radius: var(--r);
}
.signalement-fiche > p { margin: 0 0 8px; }
.signalement-tete a { font: 600 15px/1.35 var(--display); letter-spacing: -.015em; }
.signalement-tete .discret { margin-left: 8px; font-size: 12.5px; white-space: nowrap; }
.signalement-motif {
  font: 600 13px/1.3 var(--display); color: var(--rouge);
  text-transform: uppercase; letter-spacing: .04em;
}
.signalement-fiche blockquote {
  margin: 0 0 10px; padding: 9px 13px;
  background: var(--menthe-voile); border-left: 3px solid var(--menthe-trait);
  border-radius: 0 var(--r-petit) var(--r-petit) 0;
  font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
}
.signalement-fiche .rang { margin-top: 12px; }

.choix-habitant { margin-bottom: 14px; }
.choix-habitant > summary {
  cursor: pointer; list-style: none; display: inline-block;
  padding: 8px 15px; border: 1px solid var(--trait); border-radius: 999px;
  font: 500 13.5px/1.2 var(--texte); color: var(--estompe);
}
.choix-habitant > summary::-webkit-details-marker { display: none; }
.choix-habitant > summary:hover { border-color: var(--encre); color: var(--encre); }
.choix-liste {
  display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px;
  max-height: 34vh; overflow-y: auto;
}

.fil-ouvert {
  margin-bottom: 16px; padding: 16px;
  background: var(--menthe-voile);
  border: 1px solid var(--menthe-trait); border-radius: var(--r);
}
.fil-ouvert-tete {
  display: flex; align-items: center; gap: 12px; margin: 0 0 12px;
  font: 600 15px/1.3 var(--display);
}
.fil-ouvert-tete button { margin-left: auto; }
.fil-ouvert .fil-liste { max-height: 40vh; margin-bottom: 14px; }
.fil-ouvert textarea {
  width: 100%; padding: 11px 13px; resize: vertical; min-height: 78px;
  background: var(--papier); color: var(--encre);
  border: 1px solid var(--trait); border-radius: var(--r-petit);
  font: 400 15px/1.5 var(--texte);
}

.support .fil-liste, .support-fil .fil-liste { max-height: 40vh; margin-bottom: 14px; }
.support-fil { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--trait); }
.support .fil-envoi textarea, .support-fil .fil-envoi textarea {
  width: 100%; padding: 11px 13px; resize: vertical; min-height: 78px;
  background: var(--papier); color: var(--encre);
  border: 1px solid var(--trait); border-radius: var(--r-petit);
  font: 400 15px/1.5 var(--texte);
}

.pas-recupere { margin-top: 20px; }
.pas-recupere > summary {
  cursor: pointer; list-style: none; display: inline-block;
  padding: 9px 15px; border: 1px solid var(--trait); border-radius: 999px;
  font: 500 13.5px/1.2 var(--texte); color: var(--estompe);
}
.pas-recupere > summary::-webkit-details-marker { display: none; }
.pas-recupere > summary:hover { border-color: var(--rouge); color: var(--rouge); }
.pas-recupere-corps { margin-top: 14px; max-width: 52ch; display: grid; gap: 12px; }
.pas-recupere-corps textarea {
  width: 100%; padding: 10px 12px; resize: vertical;
  background: var(--papier); color: var(--encre);
  border: 1px solid var(--trait); border-radius: var(--r-petit);
  font: 400 15px/1.5 var(--texte);
}
.pas-recupere-corps button { justify-self: start; }

/* ═══════════════════════════════════════════════════ poids reel
   Demande une fois, juste apres l'enlevement. Le ton est celui d'une faveur
   qu'on explique, pas d'un champ obligatoire. */

.poids-reel {
  margin-top: 18px; padding: 18px 18px 14px;
  background: var(--menthe-voile);
  border: 1px solid var(--menthe-trait); border-radius: var(--r);
}
.poids-reel h3 {
  margin: 0 0 6px; font: 700 16px/1.3 var(--display); letter-spacing: -.02em;
}
.poids-reel p { max-width: 58ch; margin: 0 0 12px; font-size: 14px; }
.poids-reel input[type="number"] {
  width: 110px; padding: 10px 12px;
  background: var(--papier); color: var(--encre);
  border: 1px solid var(--trait); border-radius: var(--r-petit);
  font: 600 16px/1 var(--texte);
}
.poids-reel .rang { align-items: center; }

/* ═══════════════════════════════════════════════════ signalement
   Discret par construction : c'est un recours, pas une action du parcours.
   Il ne doit ni se cacher ni concurrencer « Je reserve ». */

.signalement { margin-top: 30px; border-top: 1px solid var(--trait); padding-top: 14px; }
.signalement > summary {
  cursor: pointer; list-style: none;
  font: 500 13.5px/1.4 var(--texte); color: var(--estompe);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.signalement > summary::-webkit-details-marker { display: none; }
.signalement > summary:hover { color: var(--encre); }
.signalement-corps { margin-top: 14px; max-width: 46ch; display: grid; gap: 12px; }
.signalement-corps .champ { margin: 0; }
.signalement-corps textarea {
  width: 100%; padding: 10px 12px; resize: vertical;
  background: var(--papier); color: var(--encre);
  border: 1px solid var(--trait); border-radius: var(--r-petit);
  font: 400 15px/1.5 var(--texte);
}
.signalement-corps button { justify-self: start; }

/* ══════════════════════════════════════════════════ intentions
   Posee une fois, a l'arrivee, et jamais bloquante. */

.intentions {
  margin: 0 0 24px; padding: 22px 22px 18px;
  background: var(--menthe-voile);
  border: 1px solid var(--menthe-trait); border-radius: var(--r);
}
.intentions h2 { margin: 0 0 6px; font-size: clamp(19px, 2.4vw, 23px); }
.intentions h2::after { display: none; }
.intentions > .discret { max-width: 62ch; margin-bottom: 18px; }
.intentions-duo {
  display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.intentions-colonne h3 {
  margin: 0 0 9px; font: 700 12.5px/1.3 var(--display);
  letter-spacing: .07em; text-transform: uppercase; color: var(--estompe);
}
.intentions-choix { display: flex; flex-wrap: wrap; gap: 7px; }
.intention {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 8px 13px; background: var(--papier); color: var(--estompe);
  border: 1px solid var(--trait); border-radius: 999px;
  font: 500 13.5px/1.2 var(--texte);
  transition: border-color .15s, color .15s, background .15s;
}
.intention .picto { width: 16px; height: 16px; color: var(--ton); flex: 0 0 auto; }
.intention:hover { border-color: var(--ton); color: var(--encre); }
.intention[aria-pressed="true"] {
  background: var(--ton); border-color: var(--ton); color: #fff; font-weight: 600;
}
.intention[aria-pressed="true"] .picto { color: #fff; }
.intentions .rang { margin-top: 20px; }
.intention-compte {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ton) 40%, var(--trait));
  background: color-mix(in srgb, var(--ton) 8%, var(--papier));
  font: 500 13.5px/1.2 var(--texte);
}
.intention-compte b { font: 700 14px/1 var(--display); color: var(--ton); }

/* Le bandeau de l'accueil : la reponse en trois secondes a « est-ce que ca
   marche chez moi », sans pousser les annonces sous la ligne de flottaison. */
/* La FAQ par themes : neuf questions a plat forment un mur qu'on ne lit pas. */
.faq-groupe + .faq-groupe { margin-top: 26px; }
.faq-theme {
  margin: 0 0 10px; font: 700 13px/1.3 var(--display);
  letter-spacing: .08em; text-transform: uppercase; color: var(--estompe);
}

.lien-aide {
  font: 600 14px/1 var(--display); color: var(--estompe); text-decoration: none;
  padding: 9px 4px;
}
.lien-aide:hover { color: var(--encre); }

.aide-contact { margin: 26px 0 8px; }
.aide-contact h2 { margin-top: 0; }
.aide-liens {
  display: flex; flex-wrap: wrap; gap: 18px; margin-top: 34px;
  padding-top: 18px; border-top: 1px solid var(--trait); font-size: 14px;
}

/* ═══════════════════════════════════════════ la matiere du mois
   Un encart, une matiere, un bouton. Il doit se distinguer du mur d'annonces
   sans le concurrencer : teinte de la couleur du flux, jamais pleine, et
   l'illustration dans un disque pour qu'elle se lise comme un objet et non
   comme une icone d'interface.

   `--fond` est redonne au dessin : les cernes d'une buche et les lattes d'une
   cagette sont des traits de la couleur du fond, pas du blanc. Sans ca, ils
   restaient blancs sur le theme sombre et le dessin se cassait. */

.moment {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 28px);
  margin: 0 0 26px; padding: clamp(18px, 2.4vw, 24px);
  background: color-mix(in srgb, var(--ton) 7%, var(--carte));
  border: 1px solid color-mix(in srgb, var(--ton) 32%, var(--trait));
  border-radius: var(--r);
}
.moment-illu {
  --fond: color-mix(in srgb, var(--ton) 13%, var(--carte));
  flex: 0 0 auto; display: grid; place-items: center;
  width: clamp(78px, 12vw, 108px); aspect-ratio: 1;
  background: var(--fond); border-radius: 50%; color: var(--ton);
}
.moment-illu .illu { width: 68%; height: 68%; }
/* Le repli sur le pictogramme du flux : plus petit, il est dessine pour 24. */
.moment-illu .picto { width: 52%; height: 52%; }
.moment-dit { min-width: 0; }
.moment-sur {
  margin: 0 0 5px; font: 700 11px/1 var(--display);
  letter-spacing: .09em; text-transform: uppercase; color: var(--ton);
}
/* Le `h2` global est une etiquette de section : petite, capitales, lettrage
   large. Ici c'est un titre, et le nom d'une matiere en capitales espacees se
   lit deux fois moins vite. On le remet en bas de casse. */
.moment h2 {
  margin: 0 0 7px; display: block;
  font: 800 clamp(21px, 2.8vw, 27px)/1.15 var(--display);
  text-transform: none; letter-spacing: -.022em; color: var(--encre);
}
.moment h2::after { display: none; }
.moment-raison {
  margin: 0; max-width: 54ch; color: var(--estompe);
  font-size: 14.5px; line-height: 1.55;
}
.moment-actions { display: flex; flex-wrap: wrap; gap: 9px; margin: 16px 0 0; }
.moment-actions .bouton { text-decoration: none; }
.moment-aussi {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 6px 10px; margin: 13px 0 0; font-size: 13.5px;
}
.moment-aussi span { color: var(--estompe); }
.moment-aussi a { font-weight: 600; }
@media (max-width: 560px) {
  .moment { flex-direction: column; align-items: flex-start; }
}

.bandeau-couverture {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  margin: 34px 0 10px; padding: 13px 16px;
  background: var(--menthe-voile);
  border: 1px solid var(--menthe-trait); border-radius: var(--r);
  font-size: 14px; line-height: 1.5;
}
.bandeau-couverture b { font: 600 14.5px/1.4 var(--display); letter-spacing: -.01em; }
.bandeau-couverture span { color: var(--estompe); }
.bandeau-couverture a { margin-left: auto; font-weight: 600; white-space: nowrap; }
@media (max-width: 620px) { .bandeau-couverture a { margin-left: 0; } }

/* ═══════════════════════════════════════════ couverture du service
   Les noms des localites comptent autant que le dessin : un habitant d'Obourg
   ne se reconnait pas dans un cercle. */

.couverture { margin-top: 40px; }
.couverture .carte { height: clamp(320px, 50vh, 480px); }
.etiquette-lieu {
  background: none; border: 0; box-shadow: none; padding: 0;
  font: 600 12px/1 var(--display); color: var(--encre);
  text-shadow: 0 0 3px var(--papier), 0 0 3px var(--papier), 0 0 3px var(--papier);
}
.etiquette-lieu::before { display: none; }

/* ═══════════════════════════════════════════ fil de discussion
   Deux voix, pas une messagerie. Les bulles se distinguent par leur cote et
   leur fond, jamais par une couleur de flux : ici la couleur ne veut rien
   dire de la matiere. */

.fil { margin-top: 24px; }
.fil > summary::-webkit-details-marker { display: none; }
.fil > summary::marker { content: ''; }

/* Le bouton qui ouvre la conversation. Pleine largeur des deux cotes : c'est
   l'action qui fait aboutir l'echange, elle ne se cherche pas. */
.fil-bouton {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 13px 16px;
  background: var(--menthe-voile); color: var(--encre);
  border: 1px solid var(--menthe-trait); border-radius: var(--r);
  font: 600 15px/1.2 var(--display); letter-spacing: -.01em;
  transition: border-color .15s, background .15s;
}
.fil-bouton:hover { border-color: var(--encre); }
.fil[open] > .fil-bouton { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.fil-picto { display: inline-flex; color: var(--vert); }
.fil-compte { margin-left: auto; font: 400 13.5px/1 var(--texte); color: var(--estompe); }
.fil-pastille {
  margin-left: auto; min-width: 22px; padding: 3px 7px; text-align: center;
  background: var(--rouge); color: #fff; border-radius: 999px;
  font: 700 12.5px/1.3 var(--texte);
}
.fil-corps {
  padding: 18px 16px 16px;
  border: 1px solid var(--menthe-trait); border-top: 0;
  border-radius: 0 0 var(--r) var(--r);
}
.fil-liste {
  list-style: none; margin: 0 0 18px; padding: 0;
  max-height: 46vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
}
.bulle {
  max-width: min(78%, 52ch); padding: 10px 14px;
  border: 1px solid var(--trait); border-radius: var(--r);
}
.bulle p {
  margin: 0; /* Les retours a la ligne ecrits par la personne sont sa mise en forme. */
  white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.5;
}
.bulle time { display: block; margin-top: 5px; font-size: 12px; color: var(--estompe); }
.bulle.lui { align-self: flex-start; background: var(--papier); border-top-left-radius: 3px; }
.bulle.moi {
  align-self: flex-end; background: var(--menthe); border-color: var(--menthe-trait);
  border-top-right-radius: 3px;
}
.bulle.moi time { text-align: right; }
.fil-vide { color: var(--estompe); font-size: 14px; }

.fil-envoi textarea {
  width: 100%; padding: 11px 13px; resize: vertical; min-height: 84px;
  background: var(--papier); color: var(--encre);
  border: 1px solid var(--trait); border-radius: var(--r-petit);
  font: 400 15px/1.5 var(--texte);
}
.fil-envoi textarea:focus-visible { outline: 2px solid var(--encre); outline-offset: 1px; }
.fil-envoi .rang { margin-top: 10px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Partage. Des pastilles sobres : le pied de page n'est pas une barre d'outils
   de réseaux sociaux, c'est une invitation à faire tourner. */
.pied-partage {
  display: flex; gap: 8px; justify-content: center; align-items: center;
  flex-wrap: wrap; margin: 18px 0 4px;
}
.pied-partage span { margin-right: 4px; font-weight: 600; color: var(--encre); }
.pied-partage button {
  padding: 6px 13px; cursor: pointer;
  background: var(--papier); color: inherit;
  border: 1px solid var(--trait); border-radius: 999px;
  font: 500 13px/1.3 var(--texte);
  transition: border-color .15s, color .15s;
}
.pied-partage button:hover { border-color: var(--encre); color: var(--encre); }
.pied-partage button[data-partage="natif"] {
  background: var(--menthe); border-color: var(--menthe-trait);
}

.bascule-theme {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: 500 13px/1.8 var(--texte); color: inherit; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.bascule-theme:hover { color: var(--encre); }

/* Contenu rendu côté serveur : visible tant que l'application n'a pas démarré,
   et seul contenu pour un robot ou un navigateur sans JavaScript. */
/* Cache des que JavaScript repond : le detail et le pourquoi sont dans le
   script en tete d'index.html. Sans classe `js`, le repli reste visible, ce
   qui est exactement ce qu'il faut sans JavaScript. */
.js .repli { display: none; }
.repli { padding: 40px 0 0; max-width: 62ch; }
.repli h1 { font: 800 clamp(30px, 5.6vw, 46px)/1 var(--display); letter-spacing: -.032em; margin: 0 0 18px; }
.repli h2 { margin-top: 32px; }
.repli p, .repli li { color: var(--estompe); }
.repli ul, .repli ol { padding-left: 1.2em; }
.repli li { margin-bottom: 6px; }

/* ─────────────────────────────────────────────────── Cartes ─────────── */

.carte {
  position: relative;
  height: clamp(320px, 52vh, 520px);
  border: 1px solid var(--trait); border-radius: var(--r);
  overflow: hidden; background: var(--menthe-voile);
  display: grid; place-items: center;
}
.carte .discret { padding: 24px; text-align: center; max-width: 34ch; }
.carte .leaflet-container { height: 100%; width: 100%; font: inherit; }
.legende {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
  margin-top: 12px; font-size: 13px; color: var(--estompe);
}
.legende span { display: inline-flex; align-items: center; gap: 7px; }

/* ─────────────────────────────────────────────────── Divers ─────────── */

.rang { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.discret { color: var(--estompe); font-size: 14px; }
.retour {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 32px 0 4px; font-size: 14px;
  color: var(--estompe); text-decoration: none;
}
.retour:hover { color: var(--encre); }
.etiquette-flux {
  display: inline-flex; align-items: center; gap: 8px;
  background: color-mix(in srgb, var(--ton) 11%, transparent); color: var(--ton);
  border-radius: 999px; padding: 7px 16px 7px 11px;
  font: 600 11.5px/1 var(--display); letter-spacing: .1em; text-transform: uppercase;
}
.etiquette-flux .picto { width: 16px; height: 16px; color: var(--ton); }

@media (max-width: 560px) {
  .duo { grid-template-columns: 1fr; }
  .hero { padding: 44px 0 32px; }
  .bande { padding: 38px calc(50vw - 50%); }
  .panneau { padding: 20px; }
  th, td { padding: 12px 15px; }
  h2 { margin: 42px 0 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ═══════════════════════════════════════════════ courbe d'adoption
   Une seule série, donc pas de légende : le titre dit ce qui est tracé.
   Le texte porte l'encre, jamais la couleur de la donnée. */

/* Cadre à soi, et surtout pas `.carte`, qui dans ce projet désigne un fond de
   plan et impose une hauteur fixe. Aucune marge latérale : la largeur mesurée
   est exactement celle du dessin. */
.graphe {
  position: relative;
  padding: 14px 0 6px;
  border: 1px solid var(--trait); border-radius: var(--r);
  background: var(--menthe-voile);
  overflow: hidden;
}
.graphe-svg { display: block; touch-action: pan-y; }

.graphe-grille { stroke: var(--trait); stroke-width: 1; }
.graphe-axe    { fill: var(--estompe); font: 400 11px/1 var(--texte); }
.graphe-aire   { fill: var(--data-vert); opacity: .1; }
.graphe-ligne  {
  fill: none; stroke: var(--data-vert);
  stroke-width: 2; stroke-linejoin: round; stroke-linecap: round;
}
/* L'anneau de surface tient le point lisible partout où il croise la ligne. */
.graphe-point, .graphe-survol {
  fill: var(--data-vert); stroke: var(--carte); stroke-width: 2;
}
.graphe-valeur { fill: var(--encre); font: 600 12.5px/1 var(--display); }
.graphe-viseur { stroke: var(--estompe); stroke-width: 1; opacity: .45; }

.graphe-bulle {
  position: absolute; z-index: 2; pointer-events: none;
  padding: 7px 10px; max-width: 200px;
  background: var(--papier); border: 1px solid var(--trait); border-radius: var(--r-petit);
  box-shadow: var(--ombre);
  font: 400 12.5px/1.4 var(--texte); color: var(--estompe);
}
.graphe-bulle b { display: block; color: var(--encre); font: 600 12.5px/1.4 var(--display); }

.tableau-replie > summary {
  cursor: pointer; margin: 14px 0 8px;
  font: 600 13.5px/1 var(--display); color: var(--estompe);
}
.tableau-replie > summary:hover { color: var(--encre); }