/* Graphiques du site de Plasis (31 octobre 2026) : des chiffres de la page en barres, chacun avec sa phrase. Chaque
   carte est une figure ; ses barres sont un tableau (libellé, valeur), lisible sans elles : les barres sont décoratives
   (aria-hidden). La première barre, celle du groupe dont parle la phrase, est verte ; les autres sont grises. Un
   intervalle (« 2 à 17 % ») est une bande entre ses deux bornes. Les barres poussent au défilement, une fois, et
   restent pleines pour qui demande moins de mouvement. */
.bloc-graphique{margin:0 0 1.5rem}
.graphique-intro :where(p,h2,h3,ul,ol){max-width:46rem}
.graphique-intro{margin-bottom:1.25rem}
.graphique-intro>:last-child,.graphique-outro>:last-child{margin-bottom:0}
.graphique-cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:1rem;margin:0 0 1.25rem}
.graphique-carte{margin:0;display:flex;flex-direction:column;gap:1rem;padding:1.375rem;background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon);box-shadow:var(--ombre)}
.graphique-carte figcaption>:last-child{margin-bottom:0}
.graphique-carte figcaption p{max-width:none}
.graphique-carte figcaption>p:first-child>strong:first-child{display:block;font:700 2.25rem/1.05 var(--titres);letter-spacing:-.03em;color:var(--vert);margin-bottom:.5rem}
.graphique-outro{margin-bottom:1rem}
.barres{width:100%;margin-top:auto;border-collapse:collapse}
.barres th,.barres td{padding:.375rem 0;vertical-align:bottom}
.barres th{width:100%;padding-right:.875rem;text-align:left;font:600 .875rem/1.35 var(--titres);color:var(--gris)}
.barres td{text-align:right;white-space:nowrap;font:700 1rem/1.2 var(--titres);color:var(--encre);font-variant-numeric:tabular-nums}
.barres .piste{position:relative;display:block;height:.75rem;margin-top:.375rem;border-radius:999px;background:var(--piste-barre);overflow:hidden}
.barres .barre{position:absolute;top:0;bottom:0;left:calc(var(--debut) * 100%);width:calc((var(--fin) - var(--debut)) * 100%);min-width:3px;border-radius:999px;background:var(--neutre-barre);transform-origin:left}
.barres tr:first-child .barre{background:linear-gradient(90deg,var(--vert),var(--vert-vif))}
/* Grille de prix : pas de groupe mis en avant, toutes les barres en vert */
[data-bloc="graphique-prix"] .barres .barre{background:linear-gradient(90deg,var(--vert),var(--vert-vif))}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .graphique-intro,.graphique-outro,.graphique-carte{animation:graphique-monte linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
    .barres .barre{animation:pousse linear both;animation-timeline:view();animation-range:cover 5% cover 35%}
    .barres td{animation:graphique-apparait linear both;animation-timeline:view();animation-range:cover 15% cover 35%}
    @keyframes graphique-monte{from{opacity:0;transform:translateY(14px)}}
    @keyframes pousse{from{transform:scaleX(0)}}
    @keyframes graphique-apparait{from{opacity:0}}
  }
}

/* Courbe (type=courbe) : une carte large, la phrase à gauche et la courbe à droite ; le trait se dessine au défilement.
   Les valeurs sont dans un tableau lu par les lecteurs d'écran, sous la figure. */
.graphique-courbe{grid-column:1/-1}
.courbe{display:block;width:100%;height:auto;overflow:visible}
.courbe .grille{stroke:var(--trait);stroke-width:1}
.courbe .graduation,.courbe .abscisse{font:500 11px var(--mono);fill:var(--gris)}
.courbe .etiquette{font:600 14px var(--titres);fill:var(--encre)}
.courbe .aire{fill:var(--vert-vif);opacity:.1}
.courbe .trait{fill:none;stroke:var(--vert);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.courbe .point{fill:var(--carte);stroke:var(--vert);stroke-width:2}
.courbe .point.fort{fill:var(--vert)}
.courbe .bande{fill:var(--vert-doux)}
.graphique-courbe figcaption p+p{font-size:.9375rem;color:var(--gris)}
@media (min-width:56rem){
  .graphique-courbe{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.5fr);gap:2.5rem;align-items:center;padding:1.75rem 2rem}
}

/* Aperçu du tableau de bord (accueil) : une fenêtre de l'espace client posée sur une scène verte. Même dessin que la
   page Suivi de l'espace (plasis/espace/statique/espace.css). */
.bloc-apercu{margin:2.5rem 0 0}
.fenetre-app{position:relative;margin:0;padding:clamp(.75rem,2.5vw,2.25rem);border-radius:1.5rem;
background:radial-gradient(circle,rgba(255,255,255,.16) 1px,transparent 1.6px) 0 0/20px 20px,
radial-gradient(60rem 30rem at 15% 0,#5f8f6c 0,transparent 60%),linear-gradient(160deg,#2d5b3d,#1d3a28)}
.fenetre-barre,.fenetre-corps{background:var(--carte)}
.fenetre-barre{display:flex;align-items:center;gap:1rem;height:2.5rem;padding:0 1rem;border-radius:.875rem .875rem 0 0;border-bottom:1px solid var(--trait);background:#faf9f6}
.fenetre-points{width:2.5rem;height:.625rem;background:radial-gradient(circle at 5px 50%,#d9d5ca 4.5px,transparent 5px),radial-gradient(circle at 20px 50%,#d9d5ca 4.5px,transparent 5px),radial-gradient(circle at 35px 50%,#d9d5ca 4.5px,transparent 5px)}
.fenetre-adresse{margin:0 auto;padding:.25rem 1rem;border-radius:999px;background:var(--creme);font:500 .75rem/1.4 var(--mono);color:var(--gris)}
.fenetre-corps{padding:1.25rem;border-radius:0 0 .875rem .875rem;box-shadow:0 30px 60px -24px rgba(0,0,0,.45)}
.bloc-apercu>figcaption{margin-top:1rem;font-size:.9375rem;color:var(--gris)}
.bloc-apercu>figcaption p{margin:0}
.tdb-entete{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem;margin:0 0 1rem}
.tdb-titre{margin:0;font:600 1.25rem/1.2 var(--titres);letter-spacing:-.03em;color:var(--encre)}
.tdb-periode{margin:0;padding:.25rem .75rem;border:1px solid var(--trait);border-radius:999px;font:500 .75rem/1.4 var(--mono);color:var(--gris)}
.tdb-cartes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.tdb-carte{display:flex;flex-direction:column;padding:.875rem .875rem .625rem;border:1px solid var(--trait);border-radius:.875rem;background:var(--carte)}
.tdb-libelle{margin:0 0 .375rem;font:500 .6875rem/1.3 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--gris)}
.tdb-valeur{display:flex;align-items:center;gap:.5rem;margin:0 0 .5rem;font:600 1.75rem/1 var(--titres);letter-spacing:-.04em;color:var(--encre);font-variant-numeric:tabular-nums}
.tdb-ecart{display:inline-flex;font:500 .75rem/1 var(--mono);letter-spacing:0;padding:.3rem .45rem;border-radius:999px;background:var(--creme);color:var(--gris)}
.tdb-ecart.hausse{background:var(--vert-doux);color:var(--vert)}
.tdb-ecart.baisse{background:#f6efe0;color:#6f5520}
.etincelle{display:block;width:100%;height:2.75rem;margin-top:auto;overflow:visible}
.etincelle .aire{fill:var(--vert-vif);opacity:.1}
.etincelle .trait{fill:none;stroke:var(--vert);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.etincelle .point{fill:var(--carte);stroke:var(--vert);stroke-width:2;vector-effect:non-scaling-stroke}
.etincelle.vide line{stroke:#c9cfca;stroke-width:2;stroke-dasharray:4 5;vector-effect:non-scaling-stroke}
.tdb-graphique{margin-top:.75rem;padding:.875rem 1rem .5rem;border:1px solid var(--trait);border-radius:.875rem}
.tdb-graphique .tdb-libelle{margin-bottom:.25rem}
@media (min-width:48rem){.tdb-cartes{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (prefers-reduced-motion:no-preference){
  .bloc-apercu .fenetre-corps{animation:apercu-monte .8s .15s cubic-bezier(.2,.7,.2,1) both}
  .bloc-apercu .etincelle .trait,.bloc-apercu .courbe .trait{stroke-dasharray:1;animation:dessine 1.6s .6s ease-out both}
  .bloc-apercu .etincelle .trait{stroke-dasharray:none}
  @keyframes apercu-monte{from{transform:translateY(24px) scale(.985)}}   /* sans fondu : texte lisible à tout instant */
  @keyframes dessine{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
  @supports (animation-timeline:view()){
    .graphique-courbe .courbe .trait{stroke-dasharray:1;animation:dessine linear both;animation-timeline:view();animation-range:cover 10% cover 45%}
    .graphique-courbe .courbe .point,.graphique-courbe .courbe .etiquette{animation:graphique-apparait linear both;animation-timeline:view();animation-range:cover 25% cover 45%}
  }
}