/* Mise en page propre au site. Les couleurs, polices et composants viennent de la charte
   (charte-tokens.css, charte-composants.css), reprises telles quelles : ne pas les modifier ici. */

:root { color-scheme: light; }

/* Le thème sombre de la charte suit le réglage du visiteur. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --nuit: #2c1c5c;
    --bord-nuit: #4a3a80;
    --papier: #120a26;
    --fiche: #1d1340;
    --encre: #f3f0fa;
    --encre-douce: #b9b0d3;
    --filet: #3a2e60;
    --bordure: #7d72a0;
    --solde-plus: #7fe6d8;
    --solde-moins: #ff9a6b;
    --tendanciel: #a59cc2;
    --cible: #e9c85a;
    --focus: #7fe6d8;
  }
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }

.cadre { width: 100%; max-width: var(--largeur-page); margin-inline: auto; padding-inline: var(--espace-4); }
.section { padding-block: var(--espace-16) 0; }
.section:last-child { padding-bottom: var(--espace-16); }
main > .section { padding-bottom: var(--espace-16); }

.evitement { position: absolute; left: -999px; z-index: 2; }
.evitement:focus { left: var(--espace-2); top: var(--espace-2); background: var(--fiche); padding: var(--espace-2) var(--espace-4); }

.titre-page { font-size: 72px; margin-bottom: var(--espace-8); }
.titre-section {
  font-family: var(--font-affiche); font-weight: 800; font-size: 44px; line-height: .95; letter-spacing: .01em;
  text-transform: uppercase; text-wrap: balance; margin: 0 0 var(--espace-6);
}
.texte { max-width: var(--largeur-texte); overflow-wrap: anywhere; }
.texte p { margin: 0 0 var(--espace-4); }
.aplat-action { margin-top: var(--espace-4); }
.pied-marque { display: grid; gap: var(--espace-3); justify-items: start; }
.lbc-pied ul { align-content: start; }

/* Filtres */
.filtres { display: flex; flex-wrap: wrap; gap: var(--espace-4); align-items: flex-end; margin-bottom: var(--espace-6); }
.champ { display: flex; flex-direction: column; flex: 1 1 160px; gap: var(--espace-2); min-width: 0; }
.champ-large { flex: 2 1 260px; }
.champ input, .champ select {
  font: inherit; color: var(--encre); background: var(--fiche); border: 2px solid var(--encre); border-radius: var(--rayon-0);
  padding: 0 var(--espace-3); width: 100%; height: 48px;
}
.champ input::placeholder { color: var(--encre-douce); opacity: 1; }
.js .bouton-filtrer { display: none; }
.compte { color: var(--encre-douce); margin: 0 0 var(--espace-3); }
.vide { background: var(--fiche); border: 2px solid var(--encre); padding: var(--espace-8); margin: 0; }

/* Tableau des mesures : composant TableauComptable, chaque ligne est un lien. */
.tableau-mesures { background: var(--fiche); border: 2px solid var(--encre); }
.tableau-mesures tbody tr { position: relative; }
.tableau-mesures tbody tr:last-child td { border-bottom: 0; }
.tableau-mesures tbody tr:hover { background: var(--turquoise); color: var(--sur-turquoise); }
.tableau-mesures .date { white-space: nowrap; color: var(--encre-douce); font-variant-numeric: tabular-nums lining-nums; }
.tableau-mesures tr:hover .date { color: inherit; }
.tableau-mesures .titre { min-width: 220px; }
.tableau-mesures .titre a {
  font-family: var(--font-affiche); font-weight: 800; font-size: 22px; line-height: 1.05; letter-spacing: .01em;
  text-transform: uppercase; text-decoration: none; color: inherit;
}
.tableau-mesures .titre a::after { content: ""; position: absolute; inset: 0; }
.tableau-mesures .titre a:focus-visible { outline: 0; }
.tableau-mesures tbody tr:has(a:focus-visible) { outline: 3px solid var(--focus); outline-offset: -3px; }

.pagination { display: flex; flex-wrap: wrap; gap: var(--espace-4); justify-content: center; align-items: center; margin-top: var(--espace-6); color: var(--encre-douce); }

/* Page d'une mesure */
.aplat-mesure .lbc-aplat__titre { max-width: 22ch; }
.aplat-mesure .lbc-aplat__chapo { max-width: 60ch; }
.fiche-corps { overflow-wrap: anywhere; }
.lbc-detail__rubrique p + p { margin-top: var(--espace-3); }
.retour { margin-top: var(--espace-8); }
.apercu { margin: 0 0 var(--espace-6); }

.page-erreur { display: grid; gap: var(--espace-6); justify-items: start; }
.page-erreur .titre-page { margin: 0; }

@media (min-width: 641px) {
  /* Laisse la place au pavé « Notre proposition », qui déborde de 24px de chaque côté. */
  .fiche-corps { padding-inline: var(--espace-6); }
}

@media (max-width: 640px) {
  .section { padding-top: var(--espace-12); }
  .section:last-child, main > .section { padding-bottom: var(--espace-12); }
  .titre-page { font-size: 48px; }
  .titre-section { font-size: 34px; }
  .lbc-logo--grand .lbc-logo__nom { font-size: 38px; }
  .lbc-logo__nom { white-space: normal; }

  .tableau-mesures thead { position: absolute; left: -9999px; }
  .tableau-mesures table, .tableau-mesures tbody, .tableau-mesures tr, .tableau-mesures td { display: block; width: 100%; }
  .tableau-mesures tbody tr { border-bottom: 1px solid var(--filet); padding: var(--espace-3) var(--espace-4); }
  .tableau-mesures tbody tr:last-child { border-bottom: 0; }
  .tableau-mesures td { border: 0; padding: 2px 0; }
}