/* KommIA : page Assistance, chargée après site.css. Haut de page centré, puis deux sections sur la même grille :
   « Comment nous joindre » (titre et note de disponibilité à gauche, canaux en lignes cliquables à droite) et les questions
   (composant commun), puis l'appel final commun. Aucun encadré. */
section[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }
.kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 14.5px; font-weight: 600; letter-spacing: -0.005em; color: var(--violet-ink); }
.kicker::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, #876AFF, #168EFF); box-shadow: 0 0 0 4px rgba(135, 106, 255, 0.14); }

/* ────── Haut de page : la question, puis la promesse en dégradé, centrées ────── */
.shero { max-width: 1320px; margin: 0 auto; padding: clamp(48px, 7vw, 112px) var(--gutter) clamp(24px, 3vw, 40px); text-align: center; }
.shero .kicker { animation: as-up 800ms var(--ease-out) both 40ms; }
.shero__title {
  margin: 0 auto; font-size: clamp(2.6rem, 1.3rem + 4.6vw, 5.2rem); font-weight: 620; letter-spacing: -0.05em; line-height: 1; text-wrap: balance;
  animation: as-up 900ms var(--ease-out) both 120ms;
}
.shero__title .grad { display: block; width: fit-content; margin: 0.04em auto -0.14em; padding-right: 0.04em; }
.shero__lead { margin: 26px auto 0; max-width: 42rem; font-size: 1.12rem; line-height: 1.65; color: var(--ink-70); text-wrap: pretty; animation: as-up 900ms var(--ease-out) both 240ms; }
@keyframes as-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ────── Comment nous joindre : la même grille que les questions. À gauche le titre, puis la note de disponibilité signée ;
   à droite les deux canaux en lignes entières cliquables, entre des filets, avec la flèche à droite comme le « + » des questions ────── */
.reach {
  max-width: 1320px; margin: 0 auto; padding: clamp(40px, 5vw, 72px) var(--gutter) var(--section-y);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "head list" "avail list"; grid-template-rows: auto 1fr;
  gap: 0 clamp(40px, 6vw, 96px); align-items: start;
}
.reach__head { grid-area: head; }
.reach__avail { grid-area: avail; margin-top: 22px; max-width: 30rem; font-size: 15.5px; line-height: 1.7; color: var(--ink-60); text-wrap: pretty; }
.reach__avail strong { font-weight: 600; color: var(--ink); }
.channels { grid-area: list; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.channels li { border-bottom: 1px solid var(--line); }
.channel {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; column-gap: clamp(18px, 2.2vw, 28px);
  padding: 28px 0; color: var(--ink); text-decoration: none;
}
.channel__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(135, 106, 255, 0.12); color: var(--violet-ink); }
.channel--wa .channel__icon { background: rgba(34, 197, 94, 0.12); color: #15803D; }
.channel__icon svg { width: 22px; height: 22px; }
.channel__body { display: flex; flex-direction: column; min-width: 0; }
.channel__top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.channel__title { font-size: clamp(1.45rem, 1.1rem + 0.8vw, 1.8rem); font-weight: 620; letter-spacing: -0.035em; line-height: 1.15; transition: color 200ms var(--ease-out); }
.channel__label { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--ink-60); }
.channel--wa .channel__label { color: #15803D; }
/* Le point vert qui pulse : WhatsApp répond en ce moment même */
.channel__live { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #22C55E; }
.channel__live::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #22C55E; animation: as-live 2s var(--ease-out) infinite; }
@keyframes as-live { from { transform: scale(1); opacity: 0.6; } to { transform: scale(3); opacity: 0; } }
.channel__clock { display: grid; color: var(--violet); }
.channel__value { margin-top: 6px; font-size: 1.12rem; font-weight: 600; letter-spacing: -0.01em; color: var(--violet-ink); }
.channel__note { margin-top: 10px; max-width: 34rem; font-size: 15px; line-height: 1.65; color: var(--ink-60); text-wrap: pretty; }
.channel__note strong { font-weight: 600; color: var(--ink); }
.channel__go {
  display: grid; place-items: center; align-self: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); color: var(--ink-60);
  transition: transform 400ms var(--ease-spring), background-color 300ms var(--ease-out), border-color 300ms var(--ease-out), color 300ms var(--ease-out);
}
.channel:hover .channel__title { color: var(--violet-ink); }
.channel:hover .channel__go { transform: translateX(4px); border-color: transparent; background: linear-gradient(135deg, #168EFF, #876AFF); color: #fff; }
.channel:focus-visible { outline: 2px solid var(--violet); outline-offset: 4px; border-radius: 12px; }

/* ────── Questions : plusieurs paragraphes par réponse, la liste des protections en coches ────── */
.faq__head .lead a { color: var(--violet-ink); text-underline-offset: 4px; }
.qa__a p:not(:last-child) { padding-bottom: 12px; }
/* Deux publics, deux parties dans la même liste : un intertitre franc (icône en dégradé, nom, nombre de questions) */
.faq__group { display: flex; align-items: center; gap: 14px; padding: 0 0 18px; scroll-margin-top: calc(var(--nav-h) + 24px); }
.qa + .faq__group { padding-top: 64px; }
.faq__group + .qa { border-top: 1px solid var(--line); }
.faq__group-icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #168EFF, #876AFF); color: #fff; box-shadow: 0 8px 18px -10px rgba(91, 63, 224, 0.8); }
.faq__group-title { font-size: clamp(1.3rem, 1rem + 0.8vw, 1.65rem); font-weight: 620; letter-spacing: -0.035em; line-height: 1.15; color: var(--ink); }
.faq__group-count { margin-left: auto; font-size: 13.5px; font-weight: 500; color: var(--ink-60); white-space: nowrap; }
/* Sous le titre collant, les deux parties en liens : celle qu'on lit est mise en avant (fond doux arrondi, icône en dégradé) */
.faq__parts { margin-top: 30px; display: grid; gap: 6px; max-width: 24rem; }
.faq__parts a { display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; border-radius: 16px; color: var(--ink-70); text-decoration: none; transition: background-color 300ms var(--ease-out), color 300ms var(--ease-out); }
.faq__parts-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: rgba(135, 106, 255, 0.12); color: var(--violet-ink); transition: background 300ms var(--ease-out), color 300ms var(--ease-out); }
.faq__parts-text { display: flex; flex-direction: column; gap: 1px; }
.faq__parts-name { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
.faq__parts-count { font-size: 13px; color: var(--ink-60); }
.faq__parts a:hover { color: var(--ink); background: rgba(135, 106, 255, 0.05); }
.faq__parts a[aria-current] { color: var(--ink); background: rgba(135, 106, 255, 0.1); }
.faq__parts a[aria-current] .faq__parts-icon { background: linear-gradient(135deg, #168EFF, #876AFF); color: #fff; }
.qa__list { list-style: none; margin: 0; padding: 0 0 14px; display: grid; gap: 10px; max-width: 42em; }
.qa__list li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.55; color: var(--ink-70); }
.qa__list .st { flex: none; margin-top: 1px; }
.qa__list strong { font-weight: 600; color: var(--ink); }

/* ────── Tablette et téléphone ────── */
@media (max-width: 899px) {
  .shero { padding-top: 32px; }
  .reach { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "list" "avail"; grid-template-rows: auto; }
  .channels { margin-top: 28px; }
  .reach__avail { margin-top: 24px; max-width: none; }
  /* Sur téléphone, la note passe en pleine largeur sous l'icône, le titre et l'adresse */
  .channel { padding: 24px 0; column-gap: 14px; grid-template-areas: "icon top go" "icon value go" "note note note"; }
  .channel__body { display: contents; }
  .channel__icon { grid-area: icon; }
  .channel__top { grid-area: top; }
  .channel__value { grid-area: value; margin-top: 4px; }
  .channel__note { grid-area: note; margin-top: 14px; max-width: none; }
  .channel__go { grid-area: go; }
  .channel__icon { width: 40px; height: 40px; }
  .channel__icon svg { width: 19px; height: 19px; }
  .channel__go { width: 34px; height: 34px; }
}

/* Sous la dernière question, la porte de sortie pour qui n'a pas trouvé : WhatsApp */
.faq__more { margin-top: 28px; font-size: 16px; font-weight: 500; color: var(--ink-70); }
.faq__more a { color: var(--violet-ink); font-weight: 600; text-underline-offset: 4px; }
/* Appel final : « Tout est clair ? » puis « Lance ton essai. » en dégradé, à la ligne */
.final__title .grad { display: block; width: fit-content; padding-right: 0.04em; }
.final__lead { text-wrap: balance; }
.final__lead a { color: var(--violet-ink); font-weight: 600; text-underline-offset: 3px; }

/* Très petits écrans : le nombre de questions, déjà donné par les liens du haut, laisse l'intertitre sur une ligne */
@media (max-width: 420px) {
  .faq__group-count { display: none; }
}

/* ────── Mouvement réduit ────── */
@media (prefers-reduced-motion: reduce) {
  .shero .kicker, .shero__title, .shero__lead { animation: none; }
  .channel__live::after { animation: none; opacity: 0; }
  .channel__title, .channel__go { transition: none; }
}