/* ==========================================================================
   Catalogue des services : une question, puis une liste par famille
   ==========================================================================
   Maquette validée par Jean le 06/10/2026. Feuille à part, comme
   thu-envois.css : elle se charge sans passer par la compilation. Les
   couleurs viennent des jetons de la cocarde (--ct-*) ; --ct-service est la
   teinte de la famille, posée par sa classe de signature (ct-s-thu, …).
   ========================================================================== */

.ct-catalogue [hidden] { display: none !important; }

.ct-catalogue .ct-visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- le guichet : la question et le champ ---------- */
.ct-catalogue .ct-guichet { display: flex; flex-direction: column; gap: 14px; padding: 8px 0 22px; }

.ct-catalogue .ct-guichet__titre { margin: 0; font-family: var(--ct-serif, "Spectral", Georgia, serif); font-weight: 500; font-size: 2.6rem; line-height: 1.1; letter-spacing: -.005em; color: var(--ct-ink, #16213e); }

.ct-catalogue .ct-guichet__mention { margin: 0; font-size: .94rem; line-height: 1.5; color: var(--ct-ink-3, #6b7891); }

.ct-catalogue .ct-guichet__form { position: relative; display: flex; margin-top: 6px; }
.ct-catalogue .ct-guichet__loupe { position: absolute; left: 18px; top: 17px; color: var(--ct-ink-3, #6b7891); pointer-events: none; }
.ct-catalogue .ct-guichet__champ { box-sizing: border-box; flex: 1; min-width: 0; height: 56px; padding: 0 18px 0 52px; font-family: var(--ct-sans, "Public Sans", sans-serif); font-size: 1rem; color: var(--ct-ink, #16213e); background: #fff; border: 1px solid var(--ct-line-strong, rgba(32, 51, 88, .26)); border-radius: 12px; }
.ct-catalogue .ct-guichet__champ::placeholder { color: var(--ct-ink-3, #6b7891); }
.ct-catalogue .ct-guichet__champ:focus { outline: none; border-color: var(--ct-accent, #178a5e); box-shadow: 0 0 0 3px var(--ct-accent-soft, #e6f4ee); }

/* ---------- une famille : son nom à gauche, ses démarches à droite ---------- */
.ct-catalogue .ct-familles { display: flex; flex-direction: column; gap: 20px; }

.ct-catalogue .ct-fam { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px; padding: 28px 32px; background: #fff; border: 1px solid var(--ct-line, rgba(32, 51, 88, .13)); border-radius: 14px; }

.ct-catalogue .ct-fam__tete { display: flex; flex-direction: column; gap: 10px; }
.ct-catalogue .ct-fam .ct-fam__cocarde { width: 36px; height: 36px; }
.ct-catalogue .ct-fam__titre { margin: 0; font-family: var(--ct-serif, "Spectral", Georgia, serif); font-weight: 500; font-size: 1.65rem; line-height: 1.15; color: var(--ct-ink, #16213e); }
.ct-catalogue .ct-fam__intro { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--ct-ink-3, #6b7891); }

/* ---------- une démarche, une ligne ---------- */
.ct-catalogue .ct-lignes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; align-content: start; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--ct-line, rgba(32, 51, 88, .13)); }
.ct-catalogue .ct-lignes__item { border-top: 1px solid var(--ct-line, rgba(32, 51, 88, .13)); }

.ct-catalogue .ct-ligne { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 13px 6px; color: var(--ct-ink, #16213e); border-radius: 8px; text-decoration: none; transition: background-color .15s; }
.ct-catalogue .ct-ligne:hover, .ct-catalogue .ct-ligne:focus-visible { background: #f6f7fa; color: var(--ct-ink, #16213e); text-decoration: none; }
.ct-catalogue .ct-ligne__texte { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ct-catalogue .ct-ligne__nom { font-size: .95rem; font-weight: 600; line-height: 1.3; }
.ct-catalogue .ct-ligne__detail { font-size: .82rem; line-height: 1.35; color: var(--ct-ink-3, #6b7891); }
.ct-catalogue .ct-ligne__fleche { flex: 0 0 auto; color: var(--ct-service, #00539b); }

.ct-catalogue .ct-vide { margin: 0; padding: 18px 20px; color: var(--ct-ink-2, #3b4a68); background: #fff; border: 1px dashed var(--ct-line-strong, rgba(32, 51, 88, .26)); border-radius: 12px; }
.ct-catalogue__mention { margin: 16px 0 0; font-size: .82rem; line-height: 1.5; text-align: center; color: var(--ct-ink-3, #6b7891); }

@media (max-width: 900px) {
    .ct-catalogue .ct-guichet__titre { font-size: 2rem; }
    .ct-catalogue .ct-guichet__champ { height: 54px; padding-left: 46px; }
    .ct-catalogue .ct-guichet__loupe { left: 16px; top: 17px; }
    .ct-catalogue .ct-fam { grid-template-columns: 1fr; gap: 12px; padding: 20px 18px; }
    .ct-catalogue .ct-fam__tete { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 8px; align-items: center; }
    .ct-catalogue .ct-fam .ct-fam__cocarde { width: 32px; height: 32px; }
    .ct-catalogue .ct-fam__titre { font-size: 1.5rem; }
    .ct-catalogue .ct-fam__intro { grid-column: 1 / -1; }
    .ct-catalogue .ct-lignes { grid-template-columns: 1fr; column-gap: 0; }
    .ct-catalogue .ct-ligne { padding: 12px 4px; gap: 10px; }
}