/* VÉRIFIER UNE OFFRE D'OMRA. Encres propres, le reste vient de ../commun/socle.css.
   Signature : une colonne de visas, un sceau posé par clause relue. */
:root{
  --fond:#EBF1EC;--encre:#14162B;--accent:#1F5A45;--accent2:#FFB224;--alerte:#A2402B;--sur-accent:#fff;
  --ocre:#8A6116;--feuille:#FFFFFF;--marge:#D5E3D9;
  --doux:#4A5150;--filet:#C9D6CD;--teinte:#DCE9E0;
}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.marque img{width:30px;height:30px;flex:none}

/* Plan général : la feuille, et la colonne de suivi à droite */
.plan{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start;
  max-width:1120px;margin:0 auto;padding:28px var(--gouttiere) 0}
.feuille{background:var(--feuille);border:1px solid var(--filet);border-radius:var(--rayon);
  padding:clamp(20px,3.4vw,44px);min-width:0;outline:none}
.feuille h1{margin:6px 0 14px}
.etiq{color:var(--accent)}

/* Colonne de suivi */
.suivi{position:sticky;top:16px;background:var(--feuille);border:1px solid var(--filet);border-radius:var(--rayon);padding:18px 16px}
.suivi-tete{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:10px}
.suivi-tete .etiq{font-size:.7rem;margin:0}
.suivi-compte{font-family:var(--mono);font-size:.78rem;color:var(--doux)}
.visas{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.visas-groupe{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--doux);
  padding:10px 0 4px;border-top:1px solid var(--filet);margin-top:6px}
.visas-groupe:first-child{border-top:0;margin-top:0;padding-top:0}
.visa{display:grid;grid-template-columns:30px 22px minmax(0,1fr) auto;align-items:center;gap:8px;width:100%;
  background:none;border:0;border-radius:8px;padding:5px 6px;font:inherit;font-size:.9rem;color:inherit;text-align:left;cursor:pointer}
.visa:hover{background:var(--teinte)}
.visa[aria-current="step"]{background:var(--teinte);box-shadow:inset 3px 0 0 var(--accent)}
.visa-num{font-family:var(--mono);font-size:.72rem;color:var(--doux)}
.visa-theme{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.visa-etat{font-family:var(--mono);font-size:.68rem;color:var(--doux);white-space:nowrap}
.legende{list-style:none;margin:14px 0 0;padding:12px 0 0;border-top:1px solid var(--filet);display:flex;flex-wrap:wrap;gap:6px 14px;
  font-family:var(--mono);font-size:.7rem;color:var(--doux)}
.legende li{display:inline-flex;align-items:center;gap:6px}
.legende .sceau{width:20px}

/* Le sceau : double cercle, légèrement incliné, couleur selon l'état */
.sceau{--c:var(--filet);display:grid;place-items:center;width:28px;aspect-ratio:1;border-radius:50%;flex:none;
  color:var(--c);border:1.6px dashed var(--c);transform:rotate(var(--angle,0deg))}
.sceau svg{width:62%;height:62%;display:block}
.sceau[data-etat="verifie"]{--c:var(--accent);border-style:solid;background:var(--teinte);
  box-shadow:inset 0 0 0 2px var(--feuille),inset 0 0 0 3.2px var(--c)}
.sceau[data-etat="a-obtenir"]{--c:var(--alerte);border-style:solid;background:#F7E7E2;
  box-shadow:inset 0 0 0 2px var(--feuille),inset 0 0 0 3.2px var(--c)}
.sceau[data-etat="non-verifie"]{--c:var(--ocre);background:#F6EEDC}
.sceau.frappe{animation:frappe .38s cubic-bezier(.2,.9,.3,1.2)}
@keyframes frappe{from{transform:rotate(calc(var(--angle,0deg) - 14deg)) scale(1.7);opacity:0}to{transform:rotate(var(--angle,0deg)) scale(1);opacity:1}}

/* Accueil */
.chapo{font-size:1.1rem;max-width:60ch}
.avertissement{margin:18px 0;padding:12px 14px;border-left:3px solid var(--accent);background:var(--teinte);
  border-radius:0 8px 8px 0;font-size:.93rem;max-width:68ch}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:20px 0}
.savoir{margin-top:30px;padding-top:22px;border-top:1px solid var(--filet);display:grid;gap:10px;max-width:68ch}
.savoir h2{font-size:1.15rem;margin-bottom:4px}
.sources{font-size:.84rem;color:var(--doux)}
.sources a{color:var(--accent)}

/* Une clause */
.clause{display:grid;grid-template-columns:64px minmax(0,1fr);gap:0 20px}
.clause-num{font-family:var(--titre);font-weight:400;font-size:2.6rem;line-height:1;color:var(--accent);
  border-right:1px solid var(--marge);padding-top:4px;font-variant-numeric:tabular-nums}
.clause-tete{margin-bottom:8px}
.intitule{font-size:clamp(1.3rem,1.1rem + 1vw,1.75rem);outline:none;max-width:34ch}
.choix{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:24px 0}
.rep{min-height:56px;border-radius:12px;border:1.5px solid var(--filet);background:var(--fond);color:var(--encre);
  font:600 1rem var(--texte);cursor:pointer;padding:8px 10px}
.rep:hover{border-color:var(--accent)}
.rep[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.pourquoi{background:var(--fond);border-radius:10px;padding:16px 18px}
.pourquoi h3{font-family:var(--texte);font-size:.82rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.refs{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:4px;font-family:var(--mono);font-size:.78rem}
.refs a{color:var(--accent);text-underline-offset:3px;overflow-wrap:anywhere}
.pas{display:flex;justify-content:space-between;gap:12px;margin-top:24px}

/* Relevé */
.releve h1{font-size:clamp(1.6rem,1.2rem + 2vw,2.4rem)}
.releve-compte{font-family:var(--mono);font-size:.85rem;color:var(--doux)}
.colonnes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:22px 0}
.colonne{border:1px solid var(--filet);border-radius:10px;padding:16px;min-width:0}
.colonne h2{font-size:1.15rem;margin-bottom:10px}
.points{list-style:none;margin:0;padding:0;display:grid}
.point{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;padding:12px 0;border-top:1px solid var(--filet)}
.point:first-child{border-top:0;padding-top:4px}
.point h3{font-family:var(--texte);font-size:1rem;font-weight:700;letter-spacing:0}
.point-reponse{font-family:var(--mono);font-size:.72rem;color:var(--doux);margin:2px 0 6px}
.point-pourquoi{font-size:.9rem}
.point-vide{color:var(--doux);font-size:.92rem}
.message{border-top:1px solid var(--filet);padding-top:22px;display:grid;gap:14px}
.message textarea{font:400 .92rem/1.5 var(--texte);min-height:300px}
.message .actions{margin:0}
.statut{font-size:.9rem;color:var(--accent);font-weight:600}
.lien-fort{display:inline-block;margin-top:22px;font-weight:700;color:var(--accent);text-underline-offset:4px}
.vide-message{margin:12px 0}

/* Bureau étroit et mobile : la colonne de visas devient une bande de sceaux au-dessus de la feuille */
@media (max-width:860px){
  .plan{grid-template-columns:minmax(0,1fr);gap:14px;padding-top:14px}
  .suivi{order:-1;position:static;padding:12px 12px 10px}
  .suivi-tete{margin-bottom:8px}
  .visas{grid-template-columns:repeat(16,minmax(0,1fr));gap:3px}
  .visas li:not(.visas-groupe){display:flex;justify-content:center}
  .visas-groupe,.legende,.visa-num,.visa-theme,.visa-etat{display:none}
  .visa{display:flex;justify-content:center;padding:2px 0;width:auto}
  .visa .sceau{width:100%;max-width:26px;min-width:0}
  .visa[aria-current="step"]{box-shadow:inset 0 -3px 0 var(--accent);border-radius:4px}
  body:not([data-vue="question"]) .suivi{display:none}
  .colonnes{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .feuille{padding:20px 16px}
  .clause{grid-template-columns:minmax(0,1fr)}
  .clause-num{display:none}
  .choix{grid-template-columns:minmax(0,1fr);gap:8px;margin:18px 0}
  .rep{min-height:52px}
  .pas .bouton{flex:1}
  .pied{margin-top:32px}
}

/* Fiche « Que faire si l'agence ne part pas » */
.plan-seul{grid-template-columns:minmax(0,820px);justify-content:center}
.etapes{list-style:none;counter-reset:etape;margin:26px 0 0;padding:0;display:grid;gap:0}
.etapes>li{counter-increment:etape;display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 16px;padding:18px 0;border-top:1px solid var(--filet)}
.etapes>li::before{content:counter(etape,decimal-leading-zero);grid-row:span 3;font-family:var(--mono);font-size:.85rem;color:var(--accent);padding-top:5px}
.etapes h2{font-size:1.2rem;margin-bottom:6px}
.etapes p{max-width:66ch}
.tete a.etiq{text-decoration:none}

/* Corrections après captures */
[hidden]{display:none!important}
@media (min-width:861px){
  .plan{grid-template-columns:minmax(0,1fr) 320px}
  .visa{grid-template-columns:28px 20px minmax(0,1fr) auto;padding:4px 6px}
  .visa .sceau{width:26px}
  .visa-theme{white-space:normal;overflow:visible;line-height:1.25}
  body[data-vue="releve"] .plan{grid-template-columns:minmax(0,1040px);justify-content:center}
}
.suivi-tete .etiq{white-space:nowrap}
.suivi-compte{white-space:nowrap}
body[data-vue="releve"] .suivi{display:none}
.refs .article{white-space:nowrap}
.refs a{overflow-wrap:normal}
@media (max-width:560px){
  .pas{display:grid;grid-template-columns:auto minmax(0,1fr)}
  .pas .bouton{padding:0 16px;white-space:nowrap}
}