/* Repères des envois THU (05/10/2026) : une couleur par affranchissement, celle
   que La Poste a apprise à tout le monde. Le liseré à gauche et le timbre
   portent la couleur ; la variable --thu-envoi est posée par la vue depuis
   config/thu.php (clé `couleur`), la classe ne sert qu'au repérage. */
.thu-envoi { --thu-envoi: #1f3a8a; border-left: 5px solid var(--thu-envoi) !important; }
.thu-envoi .services_motif__option__label { display: flex; align-items: flex-start; gap: .75rem; }
.thu-envoi__timbre { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 36px; height: 36px; border-radius: 10px; background: var(--thu-envoi); color: #fff; font-size: 1.2rem;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .28); margin-top: .05rem; }
.thu-envoi__texte { flex: 1 1 auto; min-width: 0; }
/* la carte choisie garde son fond, le liseré s'épaissit un peu */
.thu-envoi:has(input:checked) { border-left-width: 7px !important; }
/* le point de rappel, aux étapes 2 et 3 : « Lettre verte · pour … » */
.thu-envoi__point { --thu-envoi: #1f3a8a; display: inline-block; width: .72rem; height: .72rem; border-radius: 50%;
    background: var(--thu-envoi); margin-right: .45rem; vertical-align: -1px; }
@media (max-width: 640px) {
    .thu-envoi__timbre { width: 30px; height: 30px; border-radius: 8px; font-size: 1.05rem; }
}

/* la remise, façon lettre-ar (05/10/2026) : étiquette noire, plein tarif barré en petit */
.thu-remise { display: inline-block; background: #111; color: #fff; font-size: .62rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; padding: .18rem .5rem; border-radius: 4px; margin-right: .45rem; vertical-align: middle; white-space: nowrap; }
.thu-remise__plein { color: #6b7280; font-weight: 400; font-size: .78em; margin-right: .35rem; }

/* la ligne « qui rédige, qui relit » sous le bouton d'une porte (05/10/2026) */
.thu-qui-redige { margin-top: .5rem; color: #16213e; }
/* sous le formulaire : l'exemple de lettre et les questions fréquentes */
.thu-porte-plus { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 2rem; margin: 2.5rem auto 0; max-width: 1180px; }
.thu-porte-plus__surtitre { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ct-accent, #00539b); margin-bottom: .5rem; }
.thu-porte-plus__titre { margin: 0 0 1rem; font-family: var(--ct-serif, Georgia, serif); font-size: 1.35rem; font-weight: 600; color: #16213e; }
.thu-porte-plus__exemple { background: #fff; border: 1px solid #e3e6ec; border-radius: 14px; padding: 1.4rem 1.6rem; }
.thu-porte-plus__page { background: #fff; border: 1px solid #e3e6ec; box-shadow: 0 10px 30px rgba(22, 33, 62, .08); padding: 1.4rem 1.6rem; font-family: Georgia, "Times New Roman", serif; font-size: .9rem; line-height: 1.55; color: #222; }
.thu-porte-plus__page p { margin: 0 0 .7rem; }
.thu-porte-plus__lien { margin-top: .9rem; border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--ct-accent, #00539b); cursor: pointer; text-decoration: underline; }
.thu-porte-plus__faq { display: flex; flex-direction: column; gap: .6rem; }
.thu-porte-plus__question { background: #fff; border: 1px solid #e3e6ec; border-radius: 10px; padding: .8rem 1rem; }
.thu-porte-plus__question summary { cursor: pointer; font-weight: 700; font-size: .95rem; color: #16213e; list-style: none; }
.thu-porte-plus__question summary::-webkit-details-marker { display: none; }
.thu-porte-plus__question summary::after { content: "+"; float: right; color: #6b7891; }
.thu-porte-plus__question[open] summary::after { content: "–"; }
.thu-porte-plus__question p { margin: .6rem 0 0; font-size: .88rem; line-height: 1.5; color: #3b4a68; }
/* ce qui se passe ensuite, dans le récapitulatif du paiement */
.thu-ensuite { margin: .8rem 0 .6rem; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .6rem; counter-reset: ensuite; }
.thu-ensuite li { position: relative; padding-left: 2.1rem; font-size: .88rem; line-height: 1.5; color: #3b4a68; }
.thu-ensuite li::before { counter-increment: ensuite; content: counter(ensuite); position: absolute; left: 0; top: .1rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--ct-accent, #00539b); color: #fff; font-size: .72rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 760px) { .thu-porte-plus { grid-template-columns: 1fr; } }

/* les boutons signature et relecture sur une ligne ; la note de la signature sous son bouton */
.thu-actions__aide { display: block; margin: .5rem 0 0; font-size: .8rem; line-height: 1.4; max-width: 30rem; }

/* ---------- cartes de choix en langage courant (porte contestation, 05/10/2026) ---------- */
.thu-choix { display: grid; grid-template-columns: 1fr; gap: .6rem; }
.thu-choix .services_motif__option__label { display: flex; flex-direction: column; gap: .2rem; font-size: 1.05rem; }
.thu-choix__detail { font-weight: 400; font-size: .85rem; line-height: 1.35; color: var(--ct-ink-3, #6b7280); }
.thu-autre { margin: 1rem 0 0; font-size: .9rem; }
.thu-autre a { color: var(--ct-ink-3, #6b7280); text-decoration: underline; }
.thu-autre a:hover { color: var(--ct-ink, #16213e); }

/* l'écran de situation : quatre questions oui / non, posées une seule fois
   (contestation d'amende, 08/10/2026) ; une ligne par question, la question à
   gauche, deux boutons à droite, empilés sur mobile */
.thu-situation { display: grid; gap: .6rem; }
.thu-situation__ligne { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; border: 1px solid #d8dde6; border-radius: 10px; background: #fff; }
.thu-situation__ligne.is-repondue { border-color: #1f3a8a; }
.thu-situation__question { display: flex; flex-direction: column; gap: .15rem; }
.thu-situation__libelle { font-weight: 600; font-size: 1rem; color: var(--ct-ink, #16213e); }
.thu-situation__aide { font-weight: 400; font-size: .82rem; line-height: 1.35; color: var(--ct-ink-3, #6b7280); }
.thu-situation__choix { display: inline-flex; gap: .4rem; flex: 0 0 auto; }
.thu-situation__bouton { min-width: 4.2rem; padding: .5rem .9rem; border: 1px solid #d8dde6; border-radius: 999px; background: #fff; color: var(--ct-ink, #16213e); font-weight: 600; cursor: pointer; }
.thu-situation__bouton:hover { border-color: #1f3a8a; }
.thu-situation__bouton.is-active { background: #1f3a8a; border-color: #1f3a8a; color: #fff; }
@media (max-width: 640px) {
    .thu-situation__ligne { flex-direction: column; align-items: stretch; }
    .thu-situation__choix { justify-content: flex-start; }
    .thu-situation__bouton { flex: 1 1 0; }
}