/*
 * apps/gestion_locative/static/gestion-locative.css
 * -------------------------------------------------
 * La feuille des PAGES PUBLIQUES de l'outil de gestion locative : la
 * présentation, les six guides, les engagements, la page des données.
 *
 * CE QU'ELLE NE REFAIT PAS : bouton, carte, tableau, alerte, aide viennent du
 * jeu commun (`apps/_shared/static/css/composants.css`, classes `m-*`). Ici,
 * seulement ce qui est propre à ces pages, en classes `gl-*`.
 *
 * COULEURS : uniquement les valeurs de la marque (`lbp/base.html`), avec leur
 * repli. Les trois pastilles de l'exemple « À faire » lisent les jetons
 * d'état du cadre (`--etat-*`), qui disent un état et pas une marque.
 * ⚠️ `--marque-gris` ne se pose QUE sur fond blanc : sur `--color-primary-light`
 * il tombe à 4,45:1, sous le seuil de 4,5. Sur un fond doux, le texte
 * secondaire prend l'encre ou la couleur principale.
 *
 * MESURE DE LECTURE : `--gl-mesure` (58 chiffres de large, soit 70 à 78 caractères de texte en Arial) borne toute colonne de
 * texte, pour qu'aucune ligne ne dépasse 80 caractères sur grand écran.
 *
 * MOBILE D'ABORD : les règles de base valent pour 390 px, les grilles
 * s'ouvrent dans les `@media (min-width)` en bas de chaque section.
 */

.gl-pub {
  --gl-mesure: 58ch;
  --gl-vert: var(--color-primary, #2D3B2D);
  --gl-doux: var(--color-primary-light, #F5F7F2);
  --gl-filet: var(--marque-filet, #D9DFD1);
  --gl-encre: var(--marque-encre, #1a1a1a);
  --gl-gris: var(--marque-gris, #6B7568);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--gl-encre);
  overflow-wrap: break-word;
}

/* Les liens de texte : jamais le bleu du navigateur. Un bouton garde les
   couleurs du jeu commun. */
.gl-pub a:not(.m-bouton) {
  color: var(--gl-vert);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.gl-pub a:not(.m-bouton):hover { text-decoration-thickness: 2px; }
.gl-pub a:focus-visible,
.gl-pub summary:focus-visible { outline: 2px solid var(--gl-vert); outline-offset: 3px; border-radius: 3px; }

/* ── Titres ── `gl-h1` sert aussi à la page de l'application. */
.gl-h1 {
  font-family: var(--font-heading, Georgia, serif);
  font-size: 1.6rem; font-weight: 700; line-height: 1.2;
  color: var(--color-primary, #2D3B2D);
  margin: 0 0 1rem; text-wrap: balance;
}
.gl-h2 {
  font-family: var(--font-heading, Georgia, serif);
  font-size: 1.45rem; font-weight: 700; line-height: 1.25;
  color: var(--gl-vert); margin: 0 0 0.75rem; text-wrap: balance;
}
.gl-chapo { font-size: 1.125rem; max-width: var(--gl-mesure); margin: 0 0 1.5rem; }
.gl-intro { max-width: var(--gl-mesure); margin: 0 0 1.5rem; }

/* ── Fil d'Ariane ── */
.gl-fil { font-size: 0.85rem; color: var(--gl-gris); margin: 0 0 1rem; }
.gl-fil__sep { margin: 0 0.4rem; }

/* ── Les deux boutons, et la ligne « gratuit, sans compte » ── */
.gl-actions { display: flex; flex-direction: column; gap: 0.75rem; margin: 0 0 0.9rem; }
.gl-actions .m-bouton { width: 100%; }
.gl-gratuit { font-size: 0.92rem; color: var(--gl-gris); margin: 0; max-width: var(--gl-mesure); }
@media (min-width: 560px) {
  .gl-h1 { font-size: 1.9rem; }
  .gl-actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .gl-actions .m-bouton { width: auto; }
}

/* ── Accueil : l'ouverture, texte puis exemple d'écran ── */
.gl-hero { display: grid; gap: 2rem; align-items: center; margin: 0 0 3.5rem; }
@media (min-width: 992px) {
  .gl-hero { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 3.5rem; margin-bottom: 4.5rem; }
  .gl-hero .gl-h1 { font-size: 2.6rem; line-height: 1.15; }
  .gl-hero .gl-chapo { font-size: 1.2rem; }
}

/* L'exemple d'écran « À faire » : une image de l'outil, en HTML statique.
   Classes `gl-ex-*` pour ne jamais croiser celles du vrai écran. */
.gl-ex { padding: 0; overflow: hidden; }
.gl-ex__tete {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem;
  padding: 0.9rem 1.15rem; background: var(--gl-doux); border-bottom: 1px solid var(--gl-filet);
}
.gl-ex__titre { font-family: var(--font-heading, Georgia, serif); font-size: 1.15rem; font-weight: 700; color: var(--gl-vert); margin: 0; }
.gl-ex__etiquette {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gl-vert); margin: 0;
}
.gl-ex__liste { list-style: none; margin: 0; padding: 0; }
.gl-ex__ligne { padding: 1rem 1.15rem; border-bottom: 1px solid var(--gl-filet); }
.gl-ex__ligne:last-child { border-bottom: none; }
.gl-ex__haut { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.75rem; margin: 0 0 0.3rem; }
.gl-ex__quoi { font-weight: 700; font-size: 1rem; margin: 0; }
.gl-ex__etat {
  font-size: 0.75rem; font-weight: 700; white-space: nowrap;
  padding: 0.12rem 0.6rem; border-radius: 999px; border: 1px solid transparent;
}
.gl-ex__etat--retard {
  background: var(--etat-erreur-fond, #fef2f2); border-color: var(--etat-erreur-trait, #fca5a5);
  color: var(--etat-erreur-texte, #991b1b);
}
.gl-ex__etat--bientot {
  background: var(--etat-alerte-fond, #fffbeb); border-color: var(--etat-alerte-trait, #fcd34d);
  color: var(--etat-alerte-texte, #92400e);
}
.gl-ex__etat--prevu { background: var(--gl-doux); border-color: var(--gl-filet); color: var(--gl-vert); }
/* Bornés comme le reste : dans la carte large, une ligne passait 80 caractères. */
.gl-ex__ou { font-size: 0.9rem; color: var(--gl-gris); margin: 0 0 0.3rem; max-width: 58ch; }
.gl-ex__cout { font-size: 0.9rem; line-height: 1.5; margin: 0; max-width: 58ch; }
.gl-ex__cout strong { color: var(--gl-vert); }

/* ── Sections de l'accueil ── */
.gl-section { margin: 0 0 3.5rem; }
@media (min-width: 992px) { .gl-section { margin-bottom: 4.5rem; } }

/* Une carte par fonction. Le titre de carte est celui du jeu commun. */
.gl-cartes { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.gl-cartes > li { display: flex; flex-direction: column; }
.gl-cartes .m-carte__titre { margin-bottom: 0.5rem; }
.gl-cartes p { font-size: 0.97rem; line-height: 1.55; margin: 0 0 0.9rem; }
.gl-cartes__lien { margin-top: auto; font-size: 0.92rem; font-weight: 600; }
.gl-suite { max-width: var(--gl-mesure); margin: 1.25rem 0 0; font-size: 0.97rem; }
@media (min-width: 640px) { .gl-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } }
@media (min-width: 992px) { .gl-cartes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Deux blocs côte à côte : où sont les données, ce que l'outil ne fait pas. */
.gl-duo { display: grid; gap: 1.25rem; }
.gl-duo > * { min-width: 0; }
@media (min-width: 880px) { .gl-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } }

/* ── Listes ── Un filet d'accent à gauche plutôt qu'une puce. */
.gl-liste { list-style: none; margin: 0 0 1.25rem; padding: 0; max-width: var(--gl-mesure); }
.gl-liste > li { position: relative; padding-left: 1.15rem; margin-bottom: 0.55rem; }
.gl-liste > li::before {
  content: ""; position: absolute; left: 0; top: 0.72em;
  width: 0.5rem; height: 2px; background: var(--gl-vert);
}
.gl-liste > li:last-child { margin-bottom: 0; }
.m-carte .gl-liste:last-child, .m-carte > p:last-child { margin-bottom: 0; }

/* ── Questions fréquentes ── */
.gl-faq { max-width: 46rem; border-top: 1px solid var(--gl-filet); }
.gl-faq details { border-bottom: 1px solid var(--gl-filet); }
.gl-faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1rem 0; cursor: pointer; list-style: none;
  font-weight: 700; color: var(--gl-vert); line-height: 1.4;
}
.gl-faq summary::-webkit-details-marker { display: none; }
.gl-faq summary::after {
  content: "+"; flex: none; font-size: 1.35rem; line-height: 1; font-weight: 400; color: var(--gl-vert);
}
.gl-faq details[open] summary::after { content: "\2212"; }
.gl-faq details > p { margin: 0 0 1.1rem; max-width: var(--gl-mesure); }

/* ── Le rappel des boutons, en bas d'une page ── */
.gl-rappel {
  background: var(--gl-doux); border: 1px solid var(--gl-filet); border-radius: 10px;
  padding: 1.5rem 1.25rem; margin: 0 0 1rem;
}
.gl-rappel .gl-h2 { margin-bottom: 0.5rem; }
.gl-rappel p { max-width: var(--gl-mesure); margin: 0 0 1.1rem; }
/* Sur le fond doux, l'encre : le gris de la marque n'y tient pas le contraste. */
.gl-rappel .gl-gratuit { color: var(--gl-encre); margin: 0; }
@media (min-width: 760px) { .gl-rappel { padding: 2.25rem 2.5rem; } }

/* ── Guides, engagements, données : une colonne de lecture, et l'encadré de
   l'outil. Sur grand écran l'encadré se range à droite et suit la lecture. ── */
.gl-guide__grille { display: grid; gap: 2rem; align-items: start; margin: 0 0 2.5rem; }
.gl-prose { max-width: var(--gl-mesure); min-width: 0; }
.gl-prose > p { margin: 0 0 1.1rem; }
.gl-prose > h2 {
  font-family: var(--font-heading, Georgia, serif);
  font-size: 1.4rem; font-weight: 700; line-height: 1.25;
  color: var(--gl-vert); margin: 2.25rem 0 0.7rem; text-wrap: balance;
}
.gl-prose > .gl-liste { margin-bottom: 1.1rem; }
.gl-prose > :last-child { margin-bottom: 0; }

/* LA RÉPONSE, en tête : ce que le lecteur est venu chercher. */
.gl-reponse {
  font-size: 1.14rem; line-height: 1.6;
  border-left: 3px solid var(--gl-vert);
  padding: 0.15rem 0 0.15rem 1.1rem; margin: 0 0 1.75rem;
}
.gl-prose > p.gl-reponse { margin-bottom: 1.75rem; }

/* Une formule ou un calcul posé, sur fond doux. */
.gl-formule {
  background: var(--gl-doux); border: 1px solid var(--gl-filet); border-radius: 8px;
  padding: 0.9rem 1.1rem; margin: 0 0 1.1rem; font-weight: 600; color: var(--gl-vert); line-height: 1.55;
}
.gl-prose > p.gl-formule { margin-bottom: 1.1rem; }

.gl-outil .m-carte__titre { margin-bottom: 0.6rem; }
.gl-outil p { font-size: 0.97rem; line-height: 1.55; margin: 0 0 0.9rem; }
.gl-outil .m-bouton { margin-top: 0.35rem; }
.gl-outil__demo { margin: 0.9rem 0 0; font-size: 0.92rem; }
.gl-outil p.gl-outil__demo { margin: 0.9rem 0 0; }
@media (min-width: 992px) {
  .gl-guide__grille { grid-template-columns: minmax(0, var(--gl-mesure)) minmax(0, 21rem); gap: 3.5rem; justify-content: space-between; }
  .gl-outil { position: sticky; top: 1.5rem; }
  .gl-guide .gl-h1 { font-size: 2.3rem; margin-bottom: 1.5rem; }
}

/* Le tableau « ce qui est où » de la page des données : sur téléphone, la
   première colonne ne s'écrase pas. */
.gl-prose > .m-defile { margin: 0 0 1.25rem; }
.gl-ou th[scope="row"] { font-weight: 600; min-width: 9.5rem; }
.gl-ou td, .gl-ou th { vertical-align: top; line-height: 1.5; }

/* ── Bas de guide : les autres guides, la mention ── */
.gl-voir { border-top: 1px solid var(--gl-filet); padding-top: 1.75rem; margin: 0 0 1.75rem; }
.gl-voir__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* La pastille du jeu commun, en lien : son texte reste à l'encre. */
.gl-pub .gl-voir__liste a.m-pastille { color: var(--gl-encre); text-decoration: none; display: inline-block; }
.gl-pub .gl-voir__liste a.m-pastille:hover { color: var(--gl-vert); border-color: var(--gl-vert); }
.gl-mention { font-size: 0.88rem; line-height: 1.55; color: var(--gl-gris); max-width: var(--gl-mesure); margin: 0; }