/* =====================================================================
   PAGE FAQ  (/faq/)
   Page blanche, comme /offre/ et /realisations/. Ne contient que ce qui
   est propre à cette page : le hero éditorial et l'accordéon. Tout le
   reste vient de styles.css — .sec--light, .eyebrow, .reveal, .t-cta /
   .tt-cta pour la clôture, .ofoot pour le pied de page. La
   carte « poser une question ».
   Chargée uniquement par /faq/index.html, comme offre.css pour /offre/.
   ===================================================================== */
.page-faq { background: #fff; }

/* ---------------- axe de la page ----------------
   Le hero et la liste partagent une colonne de 880 px CENTRÉE. Avant, leur
   conteneur faisait 1180 px (le rail général) et le contenu de 880 px restait
   collé à gauche : 152 px de marge à gauche contre 408 px à droite, alors que
   le CTA final et le pied de page, eux, sont centrés. C'est ce déséquilibre
   qui donnait l'impression d'une page décalée.
   On plafonne donc le conteneur de ces deux sections (880 px de contenu + les
   22 px de marge latérale du site), sans toucher aux largeurs internes.
   Sous 924 px la règle ne s'applique plus : tablette et mobile inchangés. */
.fq-hero .container,
.fq-list .container { max-width: calc(880px + 44px); }

/* ---------------- hero ---------------- */
.fq-hero { padding: 168px 0 0; }
.fq-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 20px;
}
.fq-hero__eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .5; }
/* Titre volontairement plus mesuré que celui de l'accueil : la FAQ est une
   page de lecture, un H1 de 54 px écrasait la liste de questions juste en
   dessous. Le palier haut descend à 44 px et la borne basse à 30 px ; la
   graisse, l'interlettrage et la famille restent ceux du reste du site, donc
   la hiérarchie premium est conservée.
   `text-wrap: balance` égalise les deux lignes — « Vos questions sur » /
   « l'IA, nos réponses » — au lieu de la coupure naturelle qui laissait
   « réponses » seul sur la seconde ligne. Les navigateurs qui ne connaissent
   pas la propriété l'ignorent : le titre reste sur deux lignes grâce au
   max-width, simplement moins équilibrées. */
.fq-hero h1 {
  font-family: "Sora", "Inter", sans-serif; font-weight: 800;
  font-size: clamp(30px, 3.8vw, 44px); line-height: 1.1; letter-spacing: -.03em;
  color: var(--l-txt); margin: 0 0 20px; max-width: 18ch;
  text-wrap: balance;
}
.fq-hero__lead { max-width: 62ch; margin: 0; font-size: 17px; line-height: 1.65; color: var(--l-soft); }

/* Le .tt-cta est repris tel quel depuis styles.css (fond, ombres, hover) ;
   ce conteneur ne fait que le poser sous le paragraphe et l'aligner à gauche,
   la .tt-cta-wrap de l'accueil étant centrée. */
.fq-hero__cta { display: flex; margin: 30px 0 0; }

/* ---------------- accordéon ---------------- */
/* <details>/<summary> : la réponse est dans le HTML, donc lisible par les
   moteurs et par un visiteur sans JavaScript. Aucun script n'est ajouté. */
.fq-list { padding: 72px 0 0; }
.fq-list__in { max-width: 880px; }
.qa {
  border-top: 1px solid var(--l-brd);
  background: #fff;
}
.qa:last-of-type { border-bottom: 1px solid var(--l-brd); }
.qa > summary {
  display: flex; align-items: flex-start; gap: 20px; justify-content: space-between;
  padding: 26px 4px; cursor: pointer; list-style: none;
  transition: color .2s var(--ease);
}
.qa > summary::-webkit-details-marker { display: none; }
.qa__q {
  font-family: "Sora", "Inter", sans-serif; font-size: clamp(17px, 1.6vw, 19.5px);
  font-weight: 600; line-height: 1.35; letter-spacing: -.015em; color: var(--l-txt); margin: 0;
}
.qa > summary:hover .qa__q { color: var(--blue); }
/* signe + qui bascule en − à l'ouverture, sans image ni script */
.qa__sign {
  position: relative; flex: none; width: 30px; height: 30px; margin-top: 1px;
  border-radius: 50%; background: rgba(63, 95, 230, .08);
  transition: background .22s var(--ease), transform .22s var(--ease);
}
.qa__sign::before, .qa__sign::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.6px;
  background: var(--blue); border-radius: 2px; transform: translate(-50%, -50%);
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.qa__sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.qa[open] .qa__sign { background: rgba(63, 95, 230, .14); }
.qa[open] .qa__sign::after { opacity: 0; transform: translate(-50%, -50%) rotate(0deg); }
.qa > summary:hover .qa__sign { background: rgba(63, 95, 230, .16); }

.qa__a { padding: 0 62px 28px 4px; max-width: 74ch; }
.qa__a p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.68; color: var(--l-soft); }
.qa__a p:last-child { margin-bottom: 0; }
.qa__a ul { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 8px; }
.qa__a li { position: relative; padding-left: 20px; font-size: 15.5px; line-height: 1.6; color: var(--l-soft); }
.qa__a li::before {
  content: ""; position: absolute; left: 3px; top: 11px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--blue-2);
}
.qa__a a { color: var(--blue); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.qa__a a:hover { color: var(--blue-2); }
/* ouverture douce, et rien du tout si le visiteur a réduit les animations */
.qa[open] .qa__a { animation: qaIn .34s var(--ease) both; }
@keyframes qaIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }


/* ---------------- clôture ---------------- */
.fq-cta { padding: 96px 0 0; }

/* ---------------- responsive ---------------- */
@media (max-width: 900px) {
}
@media (max-width: 700px) {
  .fq-hero { padding-top: 128px; }
  .fq-hero h1 { max-width: none; }
  /* Sur mobile le bouton s'étire sur la colonne — cible tactile pleine
     largeur : le libellé se cale à gauche et le chevron à droite. */
  .fq-hero__cta { margin-top: 26px; }
  .fq-hero__cta .tt-cta { width: 100%; justify-content: space-between; }
  .fq-list { padding-top: 52px; }
  .qa > summary { gap: 14px; padding: 22px 2px; }
  .qa__a { padding: 0 0 24px 2px; }
  .fq-cta { padding-top: 66px; }
  .ofoot { margin-top: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .qa[open] .qa__a { animation: none; }
}