/* Graphen Studio — pages de texte : Informations, Mentions légales,
   Politique de confidentialité.
   Même grille que les autres pages intérieures (pages.css) : le titre reste
   collé au milieu de la colonne de gauche, le texte défile à droite, sur les
   trois dernières colonnes. */

.page--doc .page__title { grid-column: 1 / 3; grid-row: 1; }

/* FAQ en bas de la page Informations : son titre est un h2, dessiné comme le h1
   des autres pages (pages.css) ; 140 px de marge sous l'écran d'informations */
.infos-faq { padding-top: 140px; }
.infos-faq .page__title h2 {
  font-family: "Outfit", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(20px, 1.8vw, 28px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.025em;
}

.doc {
  grid-column: 4 / 7;
  grid-row: 1;
  max-width: 620px;
  padding: 22vh 0 140px;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

/* Une section : un libellé gris, puis le texte */
.doc__part { display: flex; flex-direction: column; gap: 12px; }
.doc__label { color: #9c9c9c; }
.doc__meta { color: #9c9c9c; }

.doc__lead {
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: 0;
}

.doc p:not(.doc__label):not(.doc__lead):not(.doc__meta),
.doc li,
.faq__answer p {
  font-family: "Archivo", "Archivo Placeholder", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: .03em;
}
.doc ul { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 6px; }
.doc a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (hover: hover) {
  .doc a:hover { color: var(--grey); transition: color .3s var(--ease); }
}

/* Villes de rendez-vous */
.doc__cities { display: flex; flex-wrap: wrap; gap: 4px 20px; }

/* ---------- Questions fréquentes ---------- */
/* Chaque réponse est repliée sous sa question ; le texte reste dans la page,
   lisible par les moteurs de recherche et les IA. */

.faq { border-bottom: 1px solid var(--line); }
.faq__item { border-top: 1px solid var(--line); }
.faq__item summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 16px;
  align-items: baseline;
  gap: 8px;
  padding: 16px 0;
  font-size: 18px;
  line-height: 1.2;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__num { color: #9c9c9c; font-size: 14px; }
.faq__sign { position: relative; width: 11px; height: 11px; align-self: center; }
.faq__sign::before, .faq__sign::after {
  content: "";
  position: absolute;
  left: 0; top: 5px;
  width: 11px; height: 1px;
  background: currentColor;
  transition: transform .4s var(--ease-out);
}
.faq__sign::after { transform: rotate(90deg); }
.faq__item[open] .faq__sign::after { transform: rotate(0deg); }
@media (hover: hover) {
  .faq__item summary:hover { color: var(--grey); transition: color .3s var(--ease); }
}
.faq__item summary:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.faq__answer { padding: 0 24px 22px 36px; display: flex; flex-direction: column; gap: 10px; }

/* ================= Tablette et mobile ================= */

@media (max-width: 1199px) {
  .page--doc .page__title, .doc { grid-column: 1; grid-row: auto; }
  .infos-faq { padding-top: 80px; }
  .infos-faq .page__title h2 { font-size: 18px; }
  .doc { padding: 0 0 40px; gap: 48px; max-width: none; }
  .faq__item summary { font-size: 17px; grid-template-columns: 26px minmax(0, 1fr) 14px; }
  .faq__answer { padding: 0 0 20px 34px; }
}