/* Perpens — livrables.css : page Livrables et Check-up de vos marchés
   (décision du 2026-10-13, EXPERIENCE.md § 11). Se charge après clair.css et
   n'utilise que ses jetons. Contrastes calculés à côté des couleurs de texte. */

.etiquette.buy { color: var(--prune); }            /* 5,6:1 sur ivoire */

/* Parcours acheteur : appels en prune, comme acheteurs-publics.html (vert =
   entreprise, prune = acheteur ; choix du porteur, 2026-10-13). Cette feuille
   n'est chargée que par les pages du parcours acheteur. */
.btn-plein { background: var(--deg-buy); box-shadow: 0 10px 24px -12px rgba(95, 61, 116, .7); }   /* blanc dessus ≥ 5,2:1 */
.btn-plein:hover { background: var(--prune-fonce); box-shadow: 0 12px 26px -10px rgba(95, 61, 116, .75); }
/* Liens et focus du parcours en prune (audit Impeccable, 2026-10-13). Prune sur ivoire 5,6:1. */
a { color: var(--prune); }
a:hover { color: var(--prune-fonce); }
:focus-visible { outline-color: var(--prune); }
.c-final :focus-visible { outline-color: var(--prune); }   /* clair.css y met le vert clair, prévu pour les fonds sombres */
.c-nav a.c-nav-cta { border-color: var(--prune); color: var(--prune); }
@media (min-width: 1024px) { .c-nav a.c-nav-cta:hover { background: var(--prune); color: var(--blanc); } }

/* ---- Haut de page ------------------------------------------------------ */
.lv-hero { padding: var(--s4) 0 var(--s5); }
.lv-hero h1 {
  font-size: clamp(1.875rem, 1.2rem + 3.4vw, 3.5rem); font-weight: 700; line-height: 1.06;
  letter-spacing: -.03em; margin-top: var(--s2); max-width: 20ch; text-wrap: balance;
}
.lv-lede { margin: var(--s3) 0 0; max-width: 54ch; font-size: 1.125rem; line-height: 1.5; color: var(--encre); }
.lv-act { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1); margin-top: var(--s4); }
.lv-note { margin: 0; padding-left: 4px; font-size: .9375rem; color: var(--encre-2); }
.lv-lien { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-underline-offset: 4px; }
@media (min-width: 768px) { .lv-hero { padding: var(--s6) 0 var(--s5); } }

/* ---- Accès direct aux quatre situations -------------------------------- */
.lv-situations { margin-top: var(--s5); }
.lv-situations p { margin: 0 0 var(--s1); font-size: .9375rem; font-weight: 600; color: var(--encre-2); }
.lv-situations ul { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--vert-profond); }
.lv-situations a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  min-height: 56px; padding: var(--s1) 0; border-bottom: 1px solid var(--vert-profond);
  font-family: var(--police-titre); font-weight: 600; font-size: 1.0625rem; line-height: 1.25;
  color: var(--vert-profond); text-decoration: none;
}
.lv-situations a:hover span { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.lv-situations svg { width: 20px; height: 20px; flex-shrink: 0; }
@media (min-width: 768px) {
  .lv-situations ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s4); }
}

/* ---- Groupes par problème ---------------------------------------------- */
.lv-groupe { padding: var(--s5) 0; scroll-margin-top: var(--s2); }
.lv-groupe + .lv-groupe { border-top: 1px solid var(--filet); }
.lv-groupe h2 { font-size: var(--t-h2); line-height: 1.1; letter-spacing: -.025em; max-width: 24ch; text-wrap: balance; }
.lv-groupe .lv-intro { margin: var(--s2) 0 var(--s4); max-width: 60ch; font-size: 1.0625rem; color: var(--encre); }
.lv-cartes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
@media (min-width: 700px) {
  .lv-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lv-cartes > li:only-child { grid-column: 1 / -1; max-width: 560px; }   /* section à une carte : pas de trou */
}
@media (min-width: 768px) { .lv-groupe { padding: var(--s6) 0; } }

/* ---- Carte d'un livrable ----------------------------------------------- */
.lv-carte {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--r-carte);
  box-shadow: 0 14px 30px -24px rgba(4, 55, 42, .45);
}
.lv-apercu { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--menthe-pale); border-bottom: 1px solid var(--filet); }
.lv-apercu img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.lv-corps { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: var(--s3); }
.lv-fictif {
  align-self: flex-start; margin: 0; padding: 4px 10px; border-radius: var(--r-photo);
  background: var(--menthe-pale); color: var(--vert-accent);          /* 7,6:1 */
  font-size: .8125rem; font-weight: 600; line-height: 1.3;
}
.lv-carte h3 { font-size: 1.25rem; line-height: 1.2; letter-spacing: -.01em; }
.lv-probleme { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--encre); }
.lv-contenu { margin: 0; padding-left: 1.15em; font-size: .9375rem; line-height: 1.5; color: var(--encre-2); }
.lv-contenu li + li { margin-top: 4px; }
.lv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); margin-top: auto; padding-top: var(--s1); }
.lv-actions .pdf, .lv-actions .parler { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: .9375rem; text-underline-offset: 4px; }

.lv-avert-sec { padding: 0 0 var(--s5); }
.lv-avertissement { margin: 0; max-width: 70ch; font-size: .875rem; line-height: 1.5; color: var(--encre-2); }

/* ---- Comment ça marche -------------------------------------------------- */
.lv-etapes-sec { padding: var(--s6) 0; background: var(--blanc); border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
.lv-etapes-sec h2 { font-size: var(--t-h2); line-height: 1.1; letter-spacing: -.025em; }
.lv-etapes { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s4); counter-reset: etape; }
.lv-etapes li { counter-increment: etape; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px var(--s2); }
.lv-etapes li::before {
  content: counter(etape); grid-row: 1 / span 2; display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%; background: var(--prune-fonce); color: var(--blanc);   /* 8,6:1 */
  font-family: var(--police-titre); font-weight: 700; font-size: 1.25rem;
}
.lv-etapes h3 { font-size: 1.1875rem; line-height: 1.25; align-self: end; }
.lv-etapes p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--encre-2); }
.lv-tarif { margin: var(--s4) 0 0; max-width: 64ch; font-size: 1.0625rem; line-height: 1.5; color: var(--encre); }
.lv-regle { margin: var(--s2) 0 0; max-width: 64ch; font-size: .9375rem; line-height: 1.5; color: var(--encre-2); }
@media (min-width: 768px) {
  .lv-etapes-sec { padding: var(--s7) 0; }
  .lv-etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
}

/* ---- Check-up de vos marchés ------------------------------------------- */
.ck { padding: 0 0 var(--s6); }
.ck-form { max-width: 760px; }
.ck-q {
  margin: 0 0 var(--s2); padding: var(--s3); border: 1px solid var(--filet); border-radius: var(--r-carte);
  background: var(--blanc);
}
.ck-q legend { float: left; width: 100%; padding: 0; margin-bottom: var(--s2); font-weight: 600; font-size: 1.0625rem; line-height: 1.4; color: var(--encre); }
.ck-q legend .n { font-family: var(--police-mono); font-weight: 500; color: var(--prune); margin-right: 6px; }
.ck-choix { clear: both; display: flex; flex-wrap: wrap; gap: var(--s1); }
.ck-choix label { position: relative; }
.ck-choix input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ck-choix span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 88px; min-height: 44px; padding: 0 var(--s3);
  border: 1.5px solid var(--prune); border-radius: var(--r-btn); color: var(--prune); font-weight: 600; cursor: pointer;   /* 5,6:1 */
  transition: background-color .2s, color .2s;
}
.ck-choix input:checked + span { background: var(--prune); color: var(--blanc); }   /* 6,0:1 */
.ck-choix input:focus-visible + span { outline: 3px solid var(--prune); outline-offset: 3px; }
.ck-choix label:hover span { background: var(--lilas); }
.ck-choix input:checked + span:hover, .ck-choix label:hover input:checked + span { background: var(--prune-fonce); color: var(--blanc); }
/* Question sans réponse à l'envoi : filet et note dans la question même. */
.ck-q.manque { border-color: var(--prune-fonce); border-width: 2px; }
.ck-q-manque { margin: var(--s1) 0 0; font-size: .9375rem; font-weight: 600; color: var(--prune-fonce); }
.ck-manque { margin: var(--s2) 0 0; font-weight: 600; color: var(--prune-fonce); }  /* 8,1:1 sur ivoire */
.ck-envoi { margin-top: var(--s3); cursor: pointer; }
/* Après le résultat, le bouton d'envoi passe au second plan (un seul bouton principal). */
.ck-envoi.secondaire, .ck-envoi.secondaire:hover { background: transparent; color: var(--prune); border-color: var(--prune); box-shadow: none; }
.lv-lede + .lv-note { margin-top: var(--s1); }
/* Sans JavaScript, envoyer le formulaire mettrait les réponses dans l'adresse :
   le bouton disparaît (la page promet que rien n'est envoyé). */
html:not(.js) .ck-envoi { display: none; }
.ck-res { max-width: 760px; margin-top: var(--s4); padding: var(--s4) var(--s3); border-radius: var(--r-carte); background: var(--blanc); border: 1px solid var(--filet); }
.ck-res h2 { font-size: 1.5rem; line-height: 1.2; }
.ck-res h2:focus { outline: none; }
.ck-res h2:focus-visible { outline: 3px solid var(--prune); outline-offset: 3px; }
.ck-compte { margin: var(--s1) 0 var(--s3); color: var(--encre-2); }
.ck-points { margin: 0; padding-left: 1.2em; }
.ck-points li { margin-bottom: var(--s2); line-height: 1.5; }
.ck-points a { font-weight: 600; text-underline-offset: 3px; }
.ck-res .lv-act { margin-top: var(--s4); }
@media (min-width: 768px) { .ck-q { padding: var(--s3) var(--s4); } .ck-res { padding: var(--s4); } }