/* apps/patrimoine/static/patrimoine.css
   --------------------------------------
   Habillage des PAGES PUBLIQUES de Patrimoine et budget (présentation, trois
   explications, confidentialité), charte A Free Lunch.

   La palette (--corail, --corail-dark, --rose, --rose-deep, --noir, --gris,
   --gris-bord) et les polices viennent de `afl/base.html` ; cette feuille ne
   pose que ce qui est propre à ces pages, sous le préfixe `pp-`, et ne
   redéfinit aucune valeur de marque au `:root` (`test_composants_communs.py`).

   ELLE NE STYLE PAS L'APPLICATION : la page `/outil/` charge `outil.css`
   (préfixe `pt-`) et pas celle-ci. Deux préfixes, pour qu'aucune règle d'un
   côté ne touche l'autre. */

/* Cartouche de titre : le bandeau rose sous l'en-tête, comme les autres outils AFL. */
.pp-cartouche { background: var(--rose); padding: 30px 0 34px; margin-bottom: 28px; }
.pp-h1 { font-family: var(--font-heading); font-size: 2rem; font-weight: 800; color: var(--noir);
         line-height: 1.15; letter-spacing: -0.025em; margin: 0 0 8px; }
.pp-h2 { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 700; color: var(--noir);
         letter-spacing: -0.01em; margin: 0 0 0.75rem; }
.pp-h3 { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; margin: 0 0 0.5rem; }
.pp-h3 a { color: var(--noir); }
.pp-accroche { font-size: 0.9rem; font-weight: 600; color: #444; margin: 0 0 0.5rem; }
.pp-lede { font-size: 1.05rem; color: #444; margin: 0; max-width: 60rem; }

.pp-section { margin-top: 2.25rem; }
.pp-texte { max-width: 52rem; }
.pp-texte .pp-h2 { margin-top: 1.9rem; }
.pp-texte li, .pp-liste li { margin-bottom: 0.45rem; line-height: 1.55; }
.pp-texte p { line-height: 1.6; }

/* Le fil d'Ariane du cartouche (composant commun `.m-fil`) : lisible sur le rose. */
.pp-cartouche .m-fil { --m-fil-marge: 0.75rem; --m-fil-taille: 0.85rem; --m-fil-couleur: #444;
                       --m-fil-casse: none; --m-fil-espacement: normal; }
.pp-cartouche .m-fil a { text-decoration: underline; }

/* La signature de fin de page. */
.pp-signature { margin-top: 1.5rem; font-size: 0.85rem; color: #444; }

/* Les deux entrées dans l'outil. */
.pp-boutons { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0; }
/* CONTRASTE (10/11/2026) : le corail de la marque ne donne pas 4,5:1 sous du texte
   blanc ni sur du blanc. Ces boutons portent donc une valeur propre : #be363b
   (5,56:1 avec le blanc), #92292d au survol (plus foncé, jamais plus clair).
   C'est un réglage local de ces pages, la valeur de marque n'est pas touchée. */
.pp-bouton { display: inline-block; padding: 0.7rem 1.4rem; border-radius: 8px; font-weight: 700;
             border: 2px solid #be363b; color: #be363b; background: #fff;
             text-decoration: none; }
.pp-bouton:hover { text-decoration: none; background: var(--rose); color: #92292d; border-color: #92292d; }
.pp-bouton--plein { background: #be363b; color: #fff; }
.pp-bouton--plein:hover { background: #92292d; color: #fff; border-color: #92292d; }

/* Trois cartes d'usage de la page d'accueil. */
.pp-cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.pp-carte { border: 1px solid var(--gris-bord); border-radius: 10px; padding: 1.1rem 1.25rem; background: #fff; }
.pp-carte p { margin: 0; color: #444; line-height: 1.55; }

/* Note de lecture (projection, périmètre). */
.pp-note { background: var(--rose); border-left: 3px solid var(--corail);
           border-radius: 0 8px 8px 0; padding: 0.75rem 1rem; margin: 1.25rem 0;
           font-size: 0.9rem; line-height: 1.55; color: #444; }
.pp-note strong { color: var(--noir); }

/* FAQ : questions dépliables, réponses visibles au clic ET dans le balisage. */
.pp-faq__item { border-bottom: 1px solid var(--gris-bord); padding: 0.7rem 0; }
.pp-faq__item summary { cursor: pointer; font-weight: 600; color: var(--noir); }
.pp-faq__item p { margin: 0.6rem 0 0; color: #444; line-height: 1.6; }

/* Renvois de fin de page. */
.pp-suite { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 2.5rem; padding-top: 1rem;
            border-top: 1px solid var(--gris-bord); font-size: 0.92rem; }

@media (max-width: 760px) {
    .pp-cartes { grid-template-columns: 1fr; }
    .pp-h1 { font-size: 1.6rem; }
}