/* Pages publiques : accueil (compléments), contact, pages légales, documentation de l'API, 404.
   Le gros de l'accueil (héros, ticket, téléphones, offres, FAQ) est dans qlynk.css.
   Ici : seulement ce qui est propre à ces pages. Aucune couleur en dur, aucun dégradé. */

/* ---------- Sans JavaScript : les animations montrent leur état final ---------- */
html:not(.js) .journey .j-short { opacity: 1; transform: none; clip-path: none; }
html:not(.js) .journey .j-target { opacity: 1; transform: none; }
html:not(.js) .journey .j-target .j-line { transform: none; }
html:not(.js) .journey .j-track { opacity: 1; transform: none; }
html:not(.js) .journey .j-bars span { transform: none; }
html:not(.js) .journey .j-field { opacity: 0.6; }
html:not(.js) .journey .j-caret, html:not(.js) .journey .j-steps { display: none; }
html:not(.js) .dl-demo .web, html:not(.js) .dl-demo .app { transform: none; opacity: 1; }

/* Accueil */
.hero .members a { color: var(--accent-text); font-weight: 600; }
.hero .members .ic { color: var(--ink-3); }
.hero .soon { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 18px; color: var(--ink-2); }
.hero .soon b { color: var(--ink); }
.hero .soon a { color: var(--accent-text); font-weight: 600; }
.plan .soon-note { font-size: 0.9rem; color: var(--ink-2); }
.plan .soon-note a { color: var(--accent-text); font-weight: 600; }
.band .soon-band { font-weight: 700; font-size: 1.05rem; }
.band .soon-band a { color: var(--accent-ink); text-underline-offset: 3px; }
.faq details p a { color: var(--accent-text); font-weight: 600; }
.faq details[open] p { animation: faqIn 260ms var(--ease-out); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.j-short strong { overflow-wrap: anywhere; }

/* ---------- Pages à texte : en-tête commun ---------- */
.page-head-public { display: grid; gap: 10px; max-width: 72ch; margin-bottom: clamp(20px, 3vw, 32px); }
.page-head-public h1 { font: 800 clamp(2rem, 4.4vw, 3rem)/1.05 var(--font-display); letter-spacing: -0.03em; text-wrap: balance; }
.page-head-public .intro { color: var(--ink-2); font-size: 1.1rem; }
.legal-meta { font-size: 0.875rem; color: var(--ink-3); }
.prose section { display: grid; gap: 12px; }
.prose h2 { scroll-margin-top: 96px; }
.prose strong { color: var(--ink); }
.prose ol { padding-left: 22px; display: grid; gap: 6px; list-style: decimal; }
.prose dl { display: grid; gap: 10px; }
.prose dt { font-weight: 700; color: var(--ink); }
.prose dd { margin: 0; color: var(--ink-2); }
.prose .s-table-wrap { border: 1px solid var(--line); border-radius: var(--radius-sm); }
.prose .s-table td, .prose .s-table th { white-space: normal; vertical-align: top; }
.prose .s-table td { color: var(--ink-2); }
.prose .s-table td:first-child { color: var(--ink); font-weight: 600; }
.prose .note { padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-2); }

/* Sommaire des pages légales */
.toc { display: grid; gap: 4px; max-width: 72ch; margin-bottom: 28px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.toc b { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); }
.toc ol { display: grid; gap: 2px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; padding: 0; }
.toc a { display: inline-block; padding: 5px 0; color: var(--ink-2); text-decoration: none; font-weight: 500; }
.toc a:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) { .toc ol { grid-template-columns: 1fr; } }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card { padding: clamp(20px, 3.4vw, 32px); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); }
.contact-card .field-label .req { color: var(--danger); }
.contact-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 560px) { .contact-two { grid-template-columns: 1fr; } }
.contact-card select.input { cursor: pointer; }
.select-wrap { position: relative; }
.select-wrap .ic { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--ink-3); }
.contact-card .alert { margin-bottom: 16px; }
.req-note { font-size: 0.85rem; color: var(--ink-3); }
.req-note .req { color: var(--danger); }
.sent h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 800; }
.contact-rgpd { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--ink-3); }
.contact-rgpd a { color: var(--accent-text); font-weight: 600; }
.contact-aside { display: grid; gap: 18px; }
.contact-aside .tile { display: flex; gap: 14px; align-items: flex-start; }
.contact-aside .tile .ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); }
.contact-aside .tile h2 { font: 700 1.05rem/1.2 var(--font-display); }
.contact-aside .tile p { margin-top: 4px; color: var(--ink-2); font-size: 0.95rem; }
.contact-aside .tile a { color: var(--accent-text); font-weight: 600; }
/* Champ piège : hors de l'écran, invisible, ignoré des lecteurs d'écran et du clavier */
.hp { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Confirmation d'envoi */
.sent { display: grid; justify-items: start; gap: 14px; max-width: 40rem; padding: clamp(24px, 4vw, 40px); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); }
.sent .sent-ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--accent-soft); color: var(--ok); }
.sent .sent-ico .ic { width: 28px; height: 28px; stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw 600ms var(--ease-out) 150ms forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.sent h1, .sent h2 { font: 800 clamp(1.5rem, 3vw, 2rem)/1.1 var(--font-display); letter-spacing: -0.02em; }
.sent p { color: var(--ink-2); }

/* ---------- Documentation de l'API ---------- */
.doc-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: start; }
.doc-nav { position: sticky; top: 92px; display: grid; gap: 2px; padding: 0; }
.doc-nav b { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); margin-bottom: 6px; }
.doc-nav a { padding: 6px 0 6px 12px; border-left: 2px solid var(--line); color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: 0.95rem; }
.doc-nav a:hover { color: var(--accent-text); border-left-color: var(--accent); }
@media (max-width: 920px) {
  .doc-layout { grid-template-columns: minmax(0, 1fr); }
  .doc-nav { position: static; grid-auto-flow: column; overflow-x: auto; gap: 14px; padding-bottom: 6px; }
  .doc-nav b { display: none; }
  .doc-nav a { white-space: nowrap; padding: 8px 0; border-left: 0; border-bottom: 2px solid var(--line); }
}
.doc { max-width: 78ch; min-width: 0; }
.doc pre { max-width: 100%; }
.doc pre code { padding: 0; background: none; }
.doc .endpoint { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); }
.doc .endpoint code { background: none; padding: 0; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.verb { display: inline-grid; place-items: center; min-width: 64px; padding: 3px 8px; border-radius: 6px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.04em; border: 1px solid currentColor; }
.verb-get { color: var(--ok); }
.verb-post { color: var(--accent-text); }
.verb-put { color: var(--ink-2); }
.verb-delete { color: var(--danger); }
.doc .s-table-wrap { border: 1px solid var(--line); border-radius: var(--radius-sm); }
.doc .s-table td { color: var(--ink-2); }
.doc .s-table td:first-child { color: var(--ink); font-weight: 600; }
.doc .s-table td.wrap-cell, .doc .s-table th.wrap-cell { white-space: normal; }
.doc h3 { margin-top: 12px; }
.doc .endpoint + p { margin-top: 2px; }

/* ---------- 404 ---------- */
.notfound .lead { max-width: 34rem; color: var(--ink-2); font-size: 1.1rem; }
.notfound .row { margin-top: 6px; }
@media (prefers-reduced-motion: no-preference) {
  .notfound .code { animation: nfIn 700ms var(--ease-expo) both; }
  @keyframes nfIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

/* Mot-clé principal au-dessus du titre de l'accueil (référencement) */
.h1-kicker { display: block; margin-bottom: 14px; font: 700 1rem/1.3 var(--font-ui); letter-spacing: 0; color: var(--accent-text); }

/* Accueil anglais : lien vers la FAQ complète sous le titre des questions */
.faq .faq-all { margin-top: 12px; }
.faq .faq-all a { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-text); font-weight: 600; text-decoration: none; }
.faq .faq-all a:hover { text-decoration: underline; }
.faq .faq-all .ic { width: 16px; height: 16px; }