/* MesAides — site web public : identite volontairement distincte de l'app
   mobile (aurora indigo/cyan sur fond sombre) ET de tous les autres sites
   de la famille dlastes (vert sapin/terre cuite PrixDuMetre, marine/or
   ValeurEcole, asphalte/orange PleinMalin, ardoise/ocre RisqueCommune,
   grenat/ardoise ConvCollectives, console securite sombre ComparatifVPN) —
   meme raisonnement anti-"template duplique" que documente dans le
   CLAUDE.md de PrixDuMetre. Palette sauge + corail sur fond papier chaud :
   evoque l'entraide/la croissance (vert) et la chaleur humaine (corail),
   coherent avec le sujet (aides sociales), theme clair comme la plupart
   des sites de contenu de la famille (seul ComparatifVPN est sombre).
   Police systeme uniquement, aucun CDN externe — meme principe que le
   reste de la famille. */

:root {
  color-scheme: light;
  --fond: #faf6ee;
  --fond-carte: #ffffff;
  --fond-carte-alt: #f3ece0;
  --bordure: #e6dcc8;
  --bordure-forte: #d8c9ab;
  --texte: #2b2418;
  --texte-attenue: #6b6152;
  --texte-tres-attenue: #948a78;
  --sauge: #4a7c59;
  --sauge-fonce: #386347;
  --sauge-clair: rgba(74, 124, 89, 0.1);
  --corail: #d9704a;
  --corail-fonce: #b8562f;
  --corail-clair: rgba(217, 112, 74, 0.12);
  --rayon: 10px;
  --rayon-lg: 18px;
  --font-texte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--font-texte);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--sauge-fonce); text-decoration: none; }
a:hover { text-decoration: underline; }

.conteneur { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.conteneur-etroit { max-width: 720px; margin: 0 auto; padding: 0 20px; }

.entete {
  border-bottom: 1px solid var(--bordure);
  background: rgba(250, 246, 238, 0.92);
  backdrop-filter: blur(6px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.entete-barre { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; }
.logo { display: flex; align-items: baseline; gap: 2px; font-family: var(--font-serif); font-size: 1.3rem; font-weight: 700; color: var(--texte); }
.logo .point { color: var(--corail); }
.nav-principale { display: flex; align-items: center; gap: 24px; font-size: 0.92rem; }
.nav-principale a { color: var(--texte-attenue); }
.nav-principale a:hover, .nav-principale a.actif { color: var(--texte); text-decoration: none; }
.nav-cta {
  background: var(--sauge); color: #fff; padding: 9px 18px; border-radius: 20px;
  font-weight: 600; font-size: 0.88rem;
}
.nav-cta:hover { background: var(--sauge-fonce); text-decoration: none; }

.pied {
  border-top: 1px solid var(--bordure);
  margin-top: 64px;
  padding: 32px 0 48px;
  color: var(--texte-tres-attenue);
  font-size: 0.85rem;
}
.pied a { color: var(--texte-attenue); }
.pied-liens { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; }

/* Hero */
.hero { padding: 52px 0 36px; text-align: center; }
.hero-etiquette {
  display: inline-block; font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.02em; color: var(--sauge-fonce);
  background: var(--sauge-clair); border: 1px solid rgba(74, 124, 89, 0.3);
  border-radius: 20px; padding: 5px 14px; margin-bottom: 18px;
}
.hero h1 { font-family: var(--font-serif); font-size: 2.6rem; line-height: 1.2; margin: 0 auto 16px; max-width: 720px; }
.hero p.lead { font-size: 1.1rem; color: var(--texte-attenue); max-width: 620px; margin: 0 auto 28px; }
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.bouton {
  display: inline-block; font-family: var(--font-texte); font-weight: 700; font-size: 1rem;
  padding: 14px 28px; border-radius: 30px; cursor: pointer; border: 2px solid transparent;
}
.bouton-primaire { background: var(--sauge); color: #fff; }
.bouton-primaire:hover { background: var(--sauge-fonce); text-decoration: none; }
.bouton-secondaire { background: transparent; color: var(--texte); border-color: var(--bordure-forte); }
.bouton-secondaire:hover { border-color: var(--sauge); color: var(--sauge-fonce); text-decoration: none; }

/* Chiffre-cle (non-recours) */
.chiffre-cle {
  background: var(--corail-clair); border: 1px solid rgba(217, 112, 74, 0.3);
  border-radius: var(--rayon-lg); padding: 28px; margin: 40px auto; max-width: 780px;
  text-align: center;
}
.chiffre-cle .nombre { font-family: var(--font-serif); font-size: 2.6rem; color: var(--corail-fonce); font-weight: 700; line-height: 1; }
.chiffre-cle p { color: var(--texte); margin: 8px 0 0; }

section { margin: 56px 0; }
h2 { font-family: var(--font-serif); font-size: 1.7rem; margin: 0 0 10px; }
h2 .accent-point { color: var(--corail); }
.section-sous-titre { color: var(--texte-attenue); max-width: 680px; margin: 0 0 24px; }

/* Grille de cartes */
.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.carte {
  background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--rayon-lg);
  padding: 22px; transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.carte:hover { border-color: var(--bordure-forte); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(43, 36, 24, 0.06); }
.carte h3 { margin: 0 0 8px; font-size: 1.05rem; }
.carte p { color: var(--texte-attenue); font-size: 0.92rem; margin: 0 0 12px; }
.carte .montant { font-weight: 700; color: var(--sauge-fonce); }

/* Grille d'aides (accueil) */
.grille-aides { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.carte-aide-mini { display: flex; align-items: flex-start; gap: 12px; }
.carte-aide-mini .icone { font-size: 1.6rem; line-height: 1; flex-shrink: 0; }
.carte-aide-mini h3 { margin: 0 0 4px; font-size: 0.98rem; }
.carte-aide-mini p { margin: 0; font-size: 0.85rem; }

.badge-categorie {
  display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 3px 10px;
  border-radius: 20px; margin-bottom: 10px;
}
.badge-particuliers { background: var(--sauge-clair); color: var(--sauge-fonce); }
.badge-pro { background: var(--corail-clair); color: var(--corail-fonce); }

/* Fiche guide individuelle */
.fiche-entete { text-align: center; padding: 20px 0 8px; }
.fiche-entete .icone { font-size: 2.6rem; }
.fiche-entete h1 { font-family: var(--font-serif); margin: 8px 0 6px; }
.fiche-resume { color: var(--texte-attenue); max-width: 560px; margin: 0 auto; }

.fiche-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 32px 0; }
.fiche-stat { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 16px; }
.fiche-stat .libelle { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texte-tres-attenue); margin-bottom: 6px; }
.fiche-stat .valeur { font-size: 1.1rem; font-weight: 700; color: var(--sauge-fonce); }

.encart {
  background: var(--fond-carte-alt); border-left: 4px solid var(--sauge); border-radius: var(--rayon);
  padding: 18px 22px; margin: 22px 0; font-size: 0.94rem; color: var(--texte);
}
.encart.avertissement { border-left-color: var(--corail); background: var(--corail-clair); }

.liste-motifs { padding-left: 20px; color: var(--texte-attenue); }
.liste-motifs li { margin-bottom: 8px; }

.liste-sources { list-style: none; padding: 0; margin: 12px 0 0; font-size: 0.85rem; }
.liste-sources li { padding: 5px 0; border-bottom: 1px solid var(--bordure); }
.liste-sources li:last-child { border-bottom: none; }

/* Table recap toutes les aides */
.tableau-scroll { overflow-x: auto; border: 1px solid var(--bordure); border-radius: var(--rayon-lg); background: var(--fond-carte); }
table.recap { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 640px; }
table.recap thead th { background: var(--fond-carte-alt); text-align: left; padding: 12px 14px; font-weight: 700; border-bottom: 1px solid var(--bordure); white-space: nowrap; }
table.recap tbody td { padding: 12px 14px; border-bottom: 1px solid var(--bordure); vertical-align: top; }
table.recap tbody tr:hover { background: var(--fond-carte-alt); }
table.recap tbody tr:last-child td { border-bottom: none; }
table.recap .nom-aide { font-weight: 600; }
table.recap .statut-estimation { color: var(--corail-fonce); font-size: 0.8rem; }

/* FAQ */
.faq-item { border-bottom: 1px solid var(--bordure); padding: 18px 0; }
.faq-item:last-child { border-bottom: none; }
.faq-item h3 { margin: 0 0 8px; font-size: 1.02rem; }
.faq-item p { margin: 0; color: var(--texte-attenue); }

.fil-ariane { font-size: 0.82rem; color: var(--texte-tres-attenue); margin-bottom: 18px; }
.fil-ariane a { color: var(--texte-attenue); }

.guide-corps h2 { font-size: 1.3rem; margin-top: 36px; }
.guide-corps p, .guide-corps ul, .guide-corps ol { color: var(--texte); }

@media (max-width: 640px) {
  .hero h1 { font-size: 1.9rem; }
  .nav-principale a:not(.nav-cta) { display: none; }
}