/* apps/dividendes/static/dividendes.css
   ---------------------------------------
   Habillage du site des dividendes, charte A Free Lunch.

   La palette (--corail, --corail-dark, --rose, --rose-deep, --noir, --gris,
   --gris-bord) et les polices viennent de `afl/base.html` ; carte, tuile de
   chiffre, pastille et tableau viennent du jeu commun (`composants.css`).
   Cette feuille ne pose que ce qui est propre à l'outil, sous le préfixe
   `dv-`, et ne redéfinit aucune valeur de marque au `:root`
   (`test_composants_communs.py`). Même construction que `dirigeants.css`. */

/* ── Cartouche de titre : le bandeau rose sous l'en-tête, comme les autres outils. ── */
.dv-cartouche { background: var(--rose); padding: 30px 0 34px; margin-bottom: 32px; }
.dv-h1 { font-family: var(--font-heading); font-size: 2rem; font-weight: 800; color: var(--noir);
         line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 6px; }
.dv-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; }
.dv-lede { font-size: 1.05rem; color: #444; margin: 0; max-width: 60rem; }
.dv-maj { font-size: 0.78rem; color: var(--gris); margin: 0.6rem 0 0;
          text-transform: uppercase; letter-spacing: 0.06em; }
.dv-sous-titre { font-size: 0.9rem; color: var(--gris); margin: 0.4rem 0 0.9rem; max-width: 52rem; }

/* ── Sections et note de lecture ── */
.dv-section { margin-top: 2.25rem; }
.dv-section--premiere { margin-top: 0; }
.dv-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
            margin-top: 0; margin-bottom: 1.25rem; --m-stat-largeur-min: 0; }
.dv-stat-date { font-size: 1.35rem; }
.dv-note { background: var(--rose); border-left: 3px solid var(--corail);
           border-radius: 0 8px 8px 0; padding: 0.75rem 1rem; margin: 1.5rem 0 1.75rem;
           font-size: 0.9rem; line-height: 1.6; color: #444; max-width: 60rem; }
.dv-note strong { color: var(--noir); }
.dv-texte { max-width: 52rem; }
.dv-texte .dv-h2 { margin-top: 1.75rem; }
.dv-texte li { margin-bottom: 0.4rem; }
.dv-source { font-size: 0.85rem; color: var(--gris); margin-top: 2.5rem; padding-top: 1rem;
             border-top: 1px solid var(--gris-bord); max-width: 60rem; }
.dv-maillage { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2rem; }
.dv-lettres { margin-bottom: 0.5rem; }
.dv-documents li { margin-bottom: 0.4rem; }
.dv-h3 { font-family: var(--font-heading); font-size: 1.02rem; font-weight: 700; color: var(--noir);
         margin: 1.1rem 0 0.3rem; }
.dv-faq { max-width: 52rem; }
.dv-faq p { margin: 0; color: #444; }

/* ── Dans les tableaux ── */
.dv-tableau th[scope="row"] { font-weight: 600; text-align: left; }
/* Le calendrier ne s'étire pas sur toute la largeur : à 1 440 px, le montant
   (la réponse) finissait à un mètre du nom de la société. */
.dv-tableau--cartes { max-width: 60rem; }
.dv-legende { caption-side: top; text-align: left; font-size: 0.85rem; color: var(--gris);
              padding: 0 0 0.4rem; }
.dv-somme { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.dv-creuse { color: var(--gris); font-style: italic; }
.dv-sous-ligne { display: block; font-size: 0.78rem; font-weight: 400; color: var(--gris);
                 line-height: 1.35; }
.dv-citation td { font-size: 0.82rem; color: #555; border-top: 0; padding-top: 0; }
.dv-citation q { font-style: italic; }

/* ── La preuve d'un dividende : le mot dit le sens, la teinte le souligne. ── */
.dv-preuve { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 0.78rem;
             font-weight: 600; white-space: nowrap; }
.dv-preuve--deux_sources { background: #e7f6ec; color: #085229; }
.dv-preuve--une_source { background: #f1f1f1; color: #444; }
.dv-preuve--litige { background: var(--rose-deep); color: var(--corail-dark); }
.dv-note .dv-preuve { margin-right: 0.4rem; }

/* ── Le calculateur ── */
.dv-calcul__champs { display: grid; gap: 0.9rem 1.25rem; max-width: 52rem;
                     grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
/* Deux champs par ligne au plus (critique UX du 10/11/2026) : à quatre de
   front, les choix étaient tronqués (« SODEXO, 1,74 € par action, exe… »). */
.dv-calcul__champs .m-label { display: flex; flex-direction: column; gap: 4px; }
/* L'attribut `hidden` (montant libre, tranche) l'emporte sur le `flex` ci-dessus. */
.dv-calcul__champs .m-label[hidden] { display: none; }
.dv-calcul__resultat { font-size: 1.4rem; font-weight: 700; margin: 1.1rem 0 0.4rem;
                       font-variant-numeric: tabular-nums; color: var(--noir); }
.dv-calcul__detail { margin: 0; padding-left: 1.1rem; font-size: 0.92rem; color: #444; }

/* ── Sur téléphone, le calendrier passe en cartes : une carte par dividende,
   la société en tête, chaque valeur précédée de son libellé (`data-libelle`).
   Quatre colonnes ne tiennent pas en 390 px sans casser les noms. ── */
@media (max-width: 600px) {
  .m-tableau.dv-tableau--cartes thead { display: none; }
  .m-tableau.dv-tableau--cartes, .m-tableau.dv-tableau--cartes tbody { display: block; width: 100%; }
  .m-tableau.dv-tableau--cartes caption { display: block; width: 100%; }
  .m-tableau.dv-tableau--cartes tr { display: grid; grid-template-columns: 1fr 1fr auto;
                                     gap: 0.2rem 0.9rem; padding: 0.8rem 0;
                                     border-bottom: 1px solid var(--gris-bord); }
  /* Placement explicite : la société en tête, puis détachement, paiement et
     montant sur une ligne (dans le code, la société vient en troisième). */
  .m-tableau.dv-tableau--cartes th[scope="row"] { grid-column: 1 / -1; grid-row: 1;
                                                  padding: 0; border: 0; }
  /* Le nom est le lien de la carte : une zone tactile d'au moins 32 px. */
  .m-tableau.dv-tableau--cartes th[scope="row"] a { display: inline-block; padding: 0.35rem 0;
                                                    min-height: 2rem; }
  .m-tableau.dv-tableau--cartes td { grid-row: 2; padding: 0; border: 0; text-align: left;
                                     background: none; }
  .m-tableau.dv-tableau--cartes td:nth-of-type(1) { grid-column: 1; }
  .m-tableau.dv-tableau--cartes td:nth-of-type(2) { grid-column: 2; }
  .m-tableau.dv-tableau--cartes td.num { grid-column: 3; text-align: right; }
  .m-tableau.dv-tableau--cartes td::before { content: attr(data-libelle); display: block;
                                             font-size: 0.7rem; text-transform: uppercase;
                                             letter-spacing: 0.05em; color: var(--gris);
                                             font-style: normal; font-weight: 400; }
}

@media (max-width: 800px) {
  .dv-stats { grid-template-columns: 1fr; --m-stat-taille: 1.5rem; --m-stat-marge: 0.85rem 1rem; }
  .dv-h1 { font-size: 1.6rem; }
}