/* ══════════════════════════════════════════════════════════════════════
   Site de support Taiji — feuille de style unique

   La charte est celle du brand book (« Taiji brand book setup »), appliquée
   telle quelle. Les trois règles qui expliquent la plupart des valeurs
   ci-dessous, et qu'il ne faut pas « corriger » :

   1. CORPS DE TEXTE À 18 px (§8.1). Le site est lu sur un écran tenu à 60 cm
      par une audience de 55 à 75 ans, où la presbytie est quasi universelle.
      16 px, la valeur d'usage sur le web, y est trop petit. Rien ne descend
      sous 14 px, jamais sous 12.

   2. CIBLES TACTILES À 56 px, 12 px entre deux (§8.3). 44 px est le plancher
      de la plateforme ; 56 px est le minimum Taiji sur un parcours
      principal. Deux boutons collés font une seule erreur de 112 px.

   3. TERRACOTTA EN FOND, JAMAIS EN TEXTE (§3.1). #E2724A sur blanc donne
      3,12:1 et échoue AA. Le libellé d'un bouton terracotta est #1E1E1E
      (5,35:1), pas blanc — c'est le défaut A1 relevé sur l'app.

   Les onze valeurs de la palette sont verrouillées : aucune teinte, aucune
   variante d'opacité en dehors de ce qui est déclaré ici.
   ══════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Clash Display';
  src: url('/assets/fonts/ClashDisplay-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans Local';
  src: url('/assets/fonts/DMSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans Local';
  src: url('/assets/fonts/DMSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Les onze valeurs, avec leur rôle. Le rôle compte plus que l'hexa. */
  --primary: #6A3CBC;        /* violet de marque — titres, éléments actifs */
  --secondary: #5B7FBF;      /* bleu — fin de dégradé, jamais du texte */
  --accent: #E2724A;         /* terracotta — fond de CTA, jamais du texte */
  --surface: #F5F3F8;        /* lavande — cartes, fonds secondaires */
  --bg: #FFFFFF;
  --border: #F5F5F5;
  --strong: #1E1E1E;         /* titres et corps de texte */
  --text: #6B6B6B;           /* le gris le plus clair permis sur du texte */
  --text-dense: #616161;
  --error: #D93025;
  --success: #1A7F37;

  --head: 'Clash Display', 'DM Sans Local', system-ui, sans-serif;
  --body: 'DM Sans Local', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap: 880px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  /* §8.4 : honorer Reduce Motion. Rien ne se déplace. */
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--strong);
  font-family: var(--body);
  font-size: 18px;      /* §8.1 — le plancher du corps de texte sur le web */
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

/* §8.4 : anneau de focus visible, 3:1 contre les deux fonds. Il n'est jamais
   retiré — c'est le seul repère d'une personne qui navigue au clavier. */
:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--bg);
  color: var(--primary);
  padding: 14px 20px;
  font-weight: 700;
  border-radius: 8px;
}
.skip:focus { left: 24px; z-index: 20; }

/* ─── En-tête ───────────────────────────────────────────────────────── */

.head {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.head-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 76px;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--strong);
  text-decoration: none;
  /* §2.3 : rien n'entre dans la zone d'exclusion du symbole, 24 px au
     minimum sur écran. C'est ce que réserve ce padding avec le `gap`. */
  padding: 8px 12px 8px 0;
}

/* §2.4 : plancher du symbole à 32 px de haut. En dessous, le dégradé cesse
   de se lire comme deux couleurs et l'identité disparaît. */
.brand-mark { width: 44px; height: 44px; display: block; }

.brand-text { display: flex; align-items: baseline; gap: 8px; }
.brand-name { font-family: var(--head); font-weight: 700; font-size: 24px; letter-spacing: -0.01em; }
.brand-role { font-size: 16px; color: var(--text); }

.nav { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.nav a {
  /* §8.3 : 44 px de haut au minimum, 12 px entre deux cibles. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  color: var(--strong);
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
  border-radius: 8px;
}
.nav a:hover { background: var(--surface); color: var(--primary); }

/* Sur un téléphone, l'en-tête passe sur deux lignes et occuperait 130 px —
   un sixième de l'écran, en permanence, sur une page qui est faite pour être
   lue. Il redevient donc statique en dessous de 700 px : on le retrouve en
   remontant, ce qui est le geste naturel sur un texte suivi. */
@media (max-width: 699px) {
  .head { position: static; }
  .sec, #main { scroll-margin-top: 16px; }
}

/* ─── Hero ──────────────────────────────────────────────────────────── */

.hero { padding: 56px 0 48px; }

/* PAS de `max-width` ici : `.hero-in` porte aussi la classe `.wrap`, dont
   les marges automatiques CENTRERAIENT le bloc réduit. Le hero se
   retrouverait décalé vers la droite, seul de toute la page à ne pas
   commencer sur la même verticale que les questions. La largeur de lecture
   est bornée sur les paragraphes eux-mêmes, ci-dessous. */

/* Le motif des trois barres du langage graphique : trois traits dégressifs,
   la seule décoration de la page. */
.rule { display: flex; flex-direction: column; gap: 5px; width: 58px; margin-bottom: 24px; }
.rule i { display: block; height: 4px; background: var(--primary); }
.rule i:nth-child(2) { width: 62%; opacity: 0.55; }
.rule i:nth-child(3) { width: 32%; opacity: 0.28; }

h1 {
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(38px, 7vw, 56px);
  line-height: 1.09;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  max-width: 16ch;
  /* §8.4 : aligné à gauche, toujours. Un paragraphe centré déplace le
     retour de ligne, et c'est là que la lecture décroche en premier. */
  text-align: left;
  /* Clash Display porte une espace mot étroite. Combinée au crénage négatif
     que demande la charte, elle soude les mots à ces corps-là : « How can we
     help » se lit « Howcanwehelp ». L'espace est donc rouverte ici, sur les
     seuls titres en Clash Display. */
  word-spacing: 0.12em;
}

.lead { font-size: 21px; line-height: 1.55; color: var(--text-dense); margin: 0 0 20px; max-width: 58ch; text-wrap: pretty; }
.meta { font-size: 17px; color: var(--text); margin: 0 0 28px; max-width: 62ch; }

/* ─── Boutons ───────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* §8.3 : 56 px, le minimum Taiji sur un parcours principal. */
  min-height: 56px;
  padding: 0 28px;
  border: 0;
  border-radius: 12px;
  font-family: var(--body);
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

/* §3.1 : le terracotta est un FOND. Le libellé est #1E1E1E — 5,35:1 —
   et surtout pas blanc, qui plafonne à 3,12:1. */
.btn-cta { background: var(--accent); color: var(--strong); }
.btn-cta:hover { filter: brightness(0.95); }
.btn-cta[disabled] { opacity: 0.6; cursor: default; }
.btn-full { width: 100%; }

/* ─── Sections ──────────────────────────────────────────────────────── */

.sec { padding: 48px 0; border-top: 1px solid var(--border); }

/* L'en-tête est collant sur 76 px : sans cette marge, un saut d'ancre
   déposerait le titre de la section DERRIÈRE lui, et la personne arriverait
   sur une page qui semble avoir commencé sans elle. */
.sec, #main { scroll-margin-top: 92px; }

.sec-title {
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(28px, 4.5vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  word-spacing: 0.12em;   /* même raison qu'en h1 */
  margin: 0 0 28px;
}

.grp {
  font-family: var(--body);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 36px 0 12px;
}
.grp:first-of-type { margin-top: 0; }

/* ─── Questions ─────────────────────────────────────────────────────── */

/* `<details>` natif : ouvrable au clavier, lisible sans JavaScript, et
   annoncé correctement par VoiceOver sans un seul attribut ARIA. */
.qa { border-bottom: 1px solid var(--border); }

.qa > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* La question EST la cible tactile : 56 px de haut au minimum. */
  min-height: 56px;
  padding: 14px 4px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--strong);
  cursor: pointer;
  list-style: none;
}
.qa > summary::-webkit-details-marker { display: none; }

/* L'état ouvert/fermé ne tient PAS à une couleur (§8.4) : le chevron
   tourne, et sa position dit l'état à lui seul. */
.qa > summary::after {
  content: '';
  flex: none;
  width: 12px;
  height: 12px;
  margin-right: 6px;
  border-right: 3px solid var(--primary);
  border-bottom: 3px solid var(--primary);
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform 0.15s ease;
}
.qa[open] > summary::after { transform: rotate(-135deg); }
.qa > summary:hover { color: var(--primary); }

.ans { padding: 0 4px 20px; max-width: 68ch; }
.ans p { margin: 0 0 14px; color: var(--text-dense); text-wrap: pretty; }
.ans p:last-child { margin-bottom: 0; }
.ans ol { margin: 0 0 14px; padding-left: 24px; color: var(--text-dense); }
.ans li { margin-bottom: 8px; }
.ans strong { color: var(--strong); }

/* ─── Contact ───────────────────────────────────────────────────────── */

.sec-contact { background: var(--surface); border-top: 1px solid var(--border); }

.contact-in { display: grid; gap: 32px; }
.contact-side p { color: var(--text-dense); margin: 0 0 12px; max-width: 52ch; }

@media (min-width: 860px) {
  .contact-in { grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
}

.form {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
}

/* §8.3 : 12 px minimum entre deux cibles adjacentes. 20 px ici. */
.field { margin-bottom: 20px; }

.field label {
  display: block;
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
}

.opt { font-weight: 400; color: var(--text); }

.field input,
.field textarea {
  width: 100%;
  min-height: 56px;
  padding: 14px 16px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--strong);
  font-family: var(--body);
  /* Jamais moins de 16 px sur un champ : en dessous, iOS zoome à la mise au
     point et la page part de travers. */
  font-size: 18px;
  line-height: 1.5;
}
.field textarea { resize: vertical; line-height: 1.6; }
.field input:focus, .field textarea:focus { border-color: var(--primary); }

.field input[aria-invalid='true'],
.field textarea[aria-invalid='true'] { border-color: var(--error); }

.hint { margin: 8px 0 0; font-size: 15px; color: var(--text); }

/* L'erreur porte un mot ET une couleur (§8.4) : elle se lit sans la teinte. */
.field-error { margin: 8px 0 0; font-size: 16px; font-weight: 700; color: var(--error); }

.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.consent { font-size: 15px; color: var(--text); margin: 0 0 20px; }

.form-status { margin: 16px 0 0; font-size: 17px; font-weight: 700; color: var(--text-dense); min-height: 1.6em; }
.form-status[data-tone='error'] { color: var(--error); }
.form-status[data-tone='ok'] { color: var(--success); }

/* ─── Pied de page ──────────────────────────────────────────────────── */

.foot { border-top: 1px solid var(--border); padding: 36px 0 48px; }
.foot-brand { margin: 0 0 12px; font-size: 17px; color: var(--text-dense); }

.foot-links { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 16px; }
.foot-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px 0 0;
  font-size: 17px;
  font-weight: 700;
}

/* §8.1 : 14 px est le plancher des mentions et métadonnées. */
.foot-legal { margin: 0; font-size: 14px; color: var(--text); }