/* medicys-consommation.fr — composants propres au site, chargés après site.css (que medicys partage
   avec Resilibre sans le modifier). Mêmes jetons --rl-* : la teinte vient de tokens-medicys.css,
   le thème sombre suit. Mobile d'abord : une colonne, puis grilles à partir de 720 px. */

/* Accueil : les situations en cartes cliquables */
.situations { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rl-espace-4); list-style: none; padding: 0; margin: 0; }
.situation-carte { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--rl-espace-2) var(--rl-espace-4); align-items: center; height: 100%; box-sizing: border-box; padding: var(--rl-espace-4); background: var(--rl-feuille); border: 1px solid var(--rl-filet); border-radius: 14px; color: var(--rl-encre); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.situation-carte:hover, .situation-carte:focus-visible { border-color: var(--rl-sapin); box-shadow: var(--rl-ombre-lettre); }
.situation-carte .illu { grid-row: span 2; width: 88px; height: auto; }
.situation-carte strong { font-family: var(--rl-police-titre); font-size: 19px; line-height: 1.25; }
.situation-carte span { font-size: var(--rl-taille-petit); color: var(--rl-encre-2); }
@media (min-width: 720px) {
  .situations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .situations { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .situation-carte { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .situation-carte .illu { grid-row: auto; width: 120px; }
}

/* Diagnostic guidé : une question, de grandes réponses */
.diagnostic { background: var(--rl-feuille); border: 1px solid var(--rl-filet); border-radius: 16px; box-shadow: var(--rl-ombre-lettre); padding: var(--rl-espace-5) var(--rl-espace-4); margin: 0 0 var(--rl-espace-7); }
.diagnostic h2 { margin: 0 0 var(--rl-espace-4); }
.diagnostic__choix { display: grid; gap: var(--rl-espace-3); list-style: none; padding: 0; margin: 0; }
.choix-carte { display: flex; justify-content: space-between; align-items: center; gap: var(--rl-espace-3); min-height: var(--rl-hauteur-cible); padding: var(--rl-espace-3) var(--rl-espace-4); background: var(--rl-papier); border: 1px solid var(--rl-bord-champ); border-radius: var(--rl-rayon-carte); color: var(--rl-encre); font-weight: 600; text-decoration: none; cursor: pointer; list-style: none; }
.choix-carte::after { content: "→"; color: var(--rl-sapin); font-weight: 700; }
.choix-carte:hover, .choix-carte:focus-visible { border-color: var(--rl-sapin); background: var(--rl-sapin-clair); }
.diagnostic details { margin: 0; }
.diagnostic details > summary::-webkit-details-marker { display: none; }
.diagnostic details[open] > summary { border-color: var(--rl-sapin); background: var(--rl-sapin-clair); }
.diagnostic details[open] > summary::after { content: "↓"; }
.diagnostic__sous { margin: var(--rl-espace-3) 0 0 var(--rl-espace-4); padding-left: var(--rl-espace-4); border-left: 3px solid var(--rl-sapin); }
.diagnostic__sous p { margin: 0 0 var(--rl-espace-3); font-weight: 700; }
@media (min-width: 720px) { .diagnostic { padding: var(--rl-espace-6) var(--rl-espace-7); } }

/* Étapes d'un litige (accueil, une ligne) et démarche d'une situation (frise numérotée) */
.etapes-litige { list-style: none; padding: 0; margin: 0 0 var(--rl-espace-6); counter-reset: etape; }
.etapes-litige > li { position: relative; padding: 0 0 var(--rl-espace-5) 56px; counter-increment: etape; }
.etapes-litige > li::before { content: counter(etape); position: absolute; left: 0; top: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--rl-sapin); color: var(--rl-sur-action); font-weight: 800; display: grid; place-items: center; }
.etapes-litige > li::after { content: ""; position: absolute; left: 18px; top: 42px; bottom: 6px; width: 2px; background: var(--rl-filet); }
.etapes-litige > li:last-child::after { display: none; }
.etapes-litige h3 { margin: 6px 0 var(--rl-espace-2); font-size: var(--rl-taille-h3); }
.etapes-litige p { margin: 0 0 var(--rl-espace-2); }
.etapes-litige--court { display: grid; gap: var(--rl-espace-4); }
.etapes-litige--court > li { padding-bottom: 0; }
.etapes-litige--court > li::after { display: none; }
.etapes-litige--court strong { display: block; margin-top: 6px; }
.etapes-litige--court span { color: var(--rl-encre-2); font-size: var(--rl-taille-petit); }
@media (min-width: 900px) { .etapes-litige--court { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Sources repliées sous une étape ou un délai */
.sources-repli { margin: var(--rl-espace-2) 0 0; font-size: var(--rl-taille-petit); }
.sources-repli + * { margin-top: var(--rl-espace-3); }
.sources-repli > summary { cursor: pointer; color: var(--rl-encre-2); font-weight: 600; }
.sources-repli[open] > summary { margin-bottom: var(--rl-espace-2); }
.sources-repli .sources { margin: 0; }

/* Droits et recours en cartes */
.cartes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rl-espace-4); list-style: none; padding: 0; margin: 0 0 var(--rl-espace-6); }
.carte { background: var(--rl-feuille); border: 1px solid var(--rl-filet); border-radius: 14px; padding: var(--rl-espace-4) var(--rl-espace-5); }
.carte h3 { margin: 0 0 var(--rl-espace-2); font-size: 19px; }
.carte p { margin: 0 0 var(--rl-espace-2); font-size: var(--rl-taille-petit); }
.carte .limite { color: var(--rl-encre-2); }
.pastille { display: inline-block; padding: 2px 10px; border-radius: var(--rl-rayon-pastille); background: var(--rl-sapin-clair); color: var(--rl-sapin-fonce); font-weight: 700; font-size: var(--rl-taille-label); }
@media (min-width: 720px) { .cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Encart vers un outil */
.encart-outil { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--rl-espace-3); background: var(--rl-sapin-clair); border-radius: 14px; padding: var(--rl-espace-4) var(--rl-espace-5); margin: 0 0 var(--rl-espace-6); }
.encart-outil p { margin: 0; font-weight: 600; }

/* Résultat du calculateur : les dates du plus urgent au plus lointain */
.delais-frise { list-style: none; padding: 0; margin: 0 0 var(--rl-espace-6); display: grid; gap: var(--rl-espace-3); }
.delai { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rl-espace-2); background: var(--rl-feuille); border: 1px solid var(--rl-filet); border-left: 5px solid var(--rl-sapin); border-radius: 12px; padding: var(--rl-espace-4); }
.delai--urgent { border-left-color: var(--rl-brique); }
.delai--expire { border-left-color: var(--rl-bord-champ); opacity: .8; }
.delai--indetermine { border-left-color: var(--rl-filet); }
.delai__date { font-family: var(--rl-police-titre); font-size: 22px; font-weight: 700; }
.delai__titre { font-weight: 700; margin: 0; }
.delai p { margin: 0; font-size: var(--rl-taille-petit); }
@media (min-width: 720px) {
  .delai { grid-template-columns: 220px minmax(0, 1fr); column-gap: var(--rl-espace-5); }
  .delai__date { grid-row: span 6; }
}

/* En-tête : la teinte de medicys sur le menu actif */
.entete__menu a[aria-current="page"] { color: var(--rl-sapin); }