/* Page Contact et support. */

.ct { padding-block: var(--s-8) var(--s-9); }
.ct-eyebrow { font-family: var(--font-mono); font-size: 0.875rem; color: var(--accent); }
.ct-hero h1 { margin-top: var(--s-3); font-size: clamp(2.25rem, 5vw, 3.75rem); letter-spacing: -0.025em; }
.ct-lead { margin-top: var(--s-4); max-width: 58ch; font-size: 1.0625rem; line-height: 1.7; }
.ct-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

.ct-section { margin-top: var(--s-9); }
.ct-section h2 { font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.02em; }
.ct-sub { margin-top: var(--s-2); }

/* Cartes d'action : un tableau 3×2 séparé par des filets. */
.ct-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--s-6); border: 1px solid var(--border); background: var(--border); gap: 1px; }
.ct-card { display: flex; flex-direction: column; padding: var(--s-6); background: var(--surface); transition: background-color 0.15s; }
.ct-card:hover { background: var(--surface-2); }
.ct-tag { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-hover); }
.ct-card h3 { margin-top: var(--s-3); font-size: 1.125rem; }
.ct-card p:not(.ct-tag) { margin-top: var(--s-2); font-size: 0.9375rem; line-height: 1.65; }
.ct-card p a, .ct-faq a, .ct-delay a { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }
.ct-card > a { margin-top: auto; padding-top: var(--s-5); font-size: 0.9375rem; font-weight: 600; color: var(--text); }
.ct-card > a::after { content: " →"; color: var(--accent-hover); }
.ct-card > a:hover { color: var(--accent-hover); }
.ct-card strong, .ct-faq strong { color: var(--text); font-weight: 600; }
@media (max-width: 960px) { .ct-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ct-grid { grid-template-columns: minmax(0, 1fr); } }

/* Questions rapides */
.ct-faq { margin-top: var(--s-5); border: 1px solid var(--border); }
.ct-faq details + details { border-top: 1px solid var(--border); }
.ct-faq summary { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) var(--s-5); cursor: pointer; list-style: none; color: var(--text); font-weight: 500; }
.ct-faq summary::-webkit-details-marker { display: none; }
.ct-faq summary::after { content: "+"; flex: none; font-family: var(--font-mono); color: var(--accent-hover); }
.ct-faq details[open] summary::after { content: "−"; }
.ct-faq summary:hover { background: var(--surface); }
.ct-faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ct-faq details p { padding: 0 var(--s-5) var(--s-5); max-width: 78ch; line-height: 1.75; }
.ct-faq code { padding: 1px 6px; background: var(--surface-2); border: 1px solid var(--border); font-size: 0.85em; }

/* Ce qu'il faut nous donner */
.ct-info { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--s-7); align-items: start; padding: var(--s-7); border: 1px solid var(--border); border-left: 3px solid var(--accent); background: var(--surface); }
.ct-list { list-style: none; margin: 0; padding: 0; counter-reset: info; }
.ct-list li { counter-increment: info; position: relative; padding: var(--s-3) 0 var(--s-3) var(--s-7); }
.ct-list li + li { border-top: 1px solid var(--border); }
.ct-list li::before { content: "0" counter(info); position: absolute; left: 0; top: var(--s-3); font-family: var(--font-mono); font-size: 0.8125rem; color: var(--accent-hover); }
.ct-list b { display: block; color: var(--text); }
.ct-list span { display: block; margin-top: 2px; font-size: 0.9375rem; color: var(--text-2); line-height: 1.6; }
.ct-list code { padding: 1px 6px; background: var(--surface-2); border: 1px solid var(--border); font-size: 0.85em; color: var(--text); }
@media (max-width: 860px) { .ct-info { grid-template-columns: minmax(0, 1fr); padding: var(--s-5); gap: var(--s-5); } }

.ct-delay { margin-top: var(--s-6); font-size: 0.875rem; color: var(--text-2); }

.ct-flash { margin-top: var(--s-5); padding: var(--s-3) var(--s-4); max-width: 60ch; font-size: 0.9375rem; color: var(--text); background: var(--surface); border: 1px solid var(--warn); border-left-width: 3px; }
.ct-flash[hidden], .ct-who[hidden] { display: none; }
.ct-who { margin-top: var(--s-4); font-size: 0.875rem; color: var(--text-2); }
.ct-who b { color: var(--text); font-weight: 600; }

/* Choix du canal de contact */
.ct-first { margin-top: var(--s-7); scroll-margin-top: calc(var(--header-h) + var(--s-4)); }
.ct-channels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-5); }
.ct-ch { position: relative; display: flex; flex-direction: column; padding: var(--s-6); border: 1px solid var(--border); background: var(--surface); transition: border-color 0.2s, background-color 0.2s; }
.ct-ch:hover { border-color: var(--border-strong); background: var(--surface-2); }
.ct-ch.rec { border-color: var(--accent); border-top-width: 3px; }
.ct-badge { align-self: flex-start; padding: 2px 10px; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: var(--accent); }
.ct-badge.off { color: var(--text-2); background: transparent; border: 1px solid var(--border-strong); }
.ct-ch h3 { margin-top: var(--s-3); font-size: 1.5rem; letter-spacing: -0.02em; }
.ct-ch-lead { margin-top: var(--s-2); font-size: 1.0625rem; line-height: 1.6; color: var(--text); }
.ct-ch ul { list-style: none; margin: var(--s-5) 0; padding: 0; display: grid; gap: var(--s-3); }
.ct-ch li { position: relative; padding-left: var(--s-6); font-size: 0.9375rem; line-height: 1.55; color: var(--text-2); }
.ct-ch li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--accent-hover); }
.ct-ch:not(.rec) li::before { color: var(--text-2); }
.ct-ch .btn { margin-top: auto; align-self: flex-start; padding-inline: var(--s-6); height: 44px; }
.ct-ch .ct-who { margin-top: var(--s-3); }

/* Deux canaux par sujet */
.ct-card-actions { display: flex; gap: var(--s-2); margin-top: auto; padding-top: var(--s-5); }
.ct-card-actions a { padding: 7px 14px; font-size: 0.875rem; font-weight: 600; color: var(--text); border: 1px solid var(--border-strong); transition: color 0.15s, border-color 0.15s, background-color 0.15s; }
.ct-card-actions a:first-child { color: #fff; background: var(--accent); border-color: var(--accent); }
.ct-card-actions a:first-child:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.ct-card-actions a.dc:hover { border-color: var(--text-2); background: var(--surface-2); }
.ct-card-actions a:only-child { color: var(--text); background: transparent; border-color: var(--border-strong); }
.ct-card-actions a:only-child:hover { color: var(--text); border-color: var(--accent); background: var(--surface-2); }
.ct-card > .ct-card-actions { padding-top: var(--s-5); }
@media (max-width: 760px) { .ct-channels { grid-template-columns: minmax(0, 1fr); } .ct-ch { padding: var(--s-5); } }

/* Tactile (13/10/2026) : pastilles lisibles (12 px au lieu de 11). */
@media (pointer: coarse) {
  .ct-badge, .ct-tag { font-size: 0.75rem; }
}