/*
  Sections communes à toutes les pages : rythme vertical, fonds (neutre, teinté, sombre), boutons en ligne,
  listes, preuve avec téléphone, tableau de mesures. Les blocs propres à l'accueil sont dans home.css.
  Aucune couleur en dur : tout passe par tokens.css. Aucune ombre (direction artistique §6).
*/

.section {
  padding-block: var(--space-7);
}

@media (min-width: 48em) {
  .section {
    padding-block: var(--space-8);
  }
}

/* Section qui suit directement une section de même fond : pas de double marge */
.section--flush-top {
  padding-top: 0;
}

.section--tint {
  background: var(--surface);
}

.section--dark {
  background: var(--bg);
  color: var(--text);
}

.section > .container > :last-child {
  margin-bottom: 0;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* Listes numérotées : le gras ouvre chaque élément, un espace les sépare */
.list-spaced {
  padding-left: 1.5rem;
}

.list-spaced li + li {
  margin-top: var(--space-3);
}

/*
  Étapes : une liste ordonnée dont chaque numéro est dans une pastille (cercle de 2 px), reliée à la suivante par un trait.
  C'est toujours un <ol> : le numéro est un compteur CSS, caché aux lecteurs d'écran qui lisent déjà « 1 sur 5 ».
  role="list" dans le HTML : sans lui, Safari retire la sémantique de liste quand list-style vaut none.
  Pastille et trait prennent la couleur du texte (aucune couleur en dur) ; le trait est décoratif.
*/
.steps {
  --badge: 2.25rem;
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps > li {
  position: relative;
  max-width: none;
  margin: 0;
  /* le haut du texte descend de la moitié de l'écart pour que la première ligne soit centrée sur la pastille */
  padding: calc((var(--badge) - 1.5em) / 2) 0 var(--space-5) calc(var(--badge) + var(--space-4));
  counter-increment: step;
}

.steps > li:last-child {
  padding-bottom: 0;
}

.steps > li > :last-child {
  margin-bottom: 0;
}

.steps > li::before {
  content: counter(step);
  content: counter(step) / "";   /* texte de remplacement vide : le numéro n'est pas lu deux fois */
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: var(--badge);
  height: var(--badge);
  border: 2px solid currentColor;
  border-radius: 50%;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--step-body);
  line-height: 1;
}

/* Le trait relie le bas d'une pastille au haut de la suivante */
.steps > li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--badge) + var(--space-1));
  bottom: var(--space-1);
  left: calc(var(--badge) / 2 - 1px);
  width: 2px;
  background: var(--border-control);
}

/* Lignes à cocher : « Dans tous les forfaits ». La coche aide à balayer l'œil ; le mot « Inclus » reste dans le HTML (masqué à l'écran). */
.checklist {
  display: grid;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  max-width: none;
  margin: 0;
}

.checklist .icon {
  color: var(--link);   /* bleu sur fond clair, vert sur fond sombre : jamais du vert sur clair */
  margin-top: 0.125rem;
}

/* Une coche seule dans la cellule d'un tableau : le mot « Inclus » est masqué à l'écran */
.measures td .icon {
  display: inline-block;
  vertical-align: -0.3em;
  color: var(--link);
}

/* Engagements : trois petits blocs, une icône et une phrase chacun */
.pledges {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-4) 0;
  padding: 0;
  list-style: none;
}

.pledges li {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  max-width: none;
  margin: 0;
}

.pledges .icon {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--link);
}

.pledges p {
  margin: 0;
  font-weight: var(--weight-strong);
}

@media (min-width: 48em) {
  .pledges {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
  }

  .pledges li {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
}

/* Citation d'une personne (retour de Clara) : texte exact entre « », filet à gauche, puis qui parle et quand.
   Guillemets français : l'ouvrant ouvre chaque paragraphe, le fermant n'est qu'à la fin. Aucune étoile, aucune note. */
.quote {
  margin: var(--space-5) 0;
}

.quote blockquote {
  margin: 0;
  padding-left: var(--space-4);
  border-left: 4px solid var(--link);   /* bleu sur fond clair, vert sur fond sombre */
}

.quote blockquote p:last-child {
  margin-bottom: 0;
}

.quote figcaption {
  margin-top: var(--space-3);
  padding-left: calc(var(--space-4) + 4px);
  font-weight: var(--weight-strong);
}

.link-list {
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.link-list li {
  margin: 0;
}

.link-list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
}

/* Bloc 3 : la preuve responsive */
.proof {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
}

.phones--proof {
  gap: var(--space-4);
}

.phones--proof figure {
  min-width: 0;
  max-width: calc(50% - var(--space-2));
  margin: 0;
}

.phones--proof img {
  width: clamp(8rem, 42vw, 17.5rem);
  max-width: 100%;
}

.phones--proof figcaption {
  max-width: 17.5rem;
  margin-top: var(--space-3);
  color: var(--text-muted);
  font-size: var(--step-small);
  line-height: var(--leading-small);
}

@media (min-width: 48em) {
  .proof {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7);
  }
}

/* Bloc 6 : les mesures (un vrai tableau, avec ses en-têtes) */
.measures {
  width: 100%;
  margin: 0 0 var(--space-4);
  border-collapse: collapse;
}

.measures th,
.measures td {
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
  vertical-align: top;
}

.measures thead th {
  border-bottom-width: 2px;
  font-weight: var(--weight-strong);
}

.measures tbody th {
  font-weight: var(--weight-body);
}

.measures td:last-child {
  font-weight: var(--weight-strong);
}

/* Un tableau trop large pour l'écran (zoom, texte agrandi) défile dans sa propre zone, pas dans la page.
   La zone est atteignable au clavier (tabindex) et annoncée comme une région nommée. */
.table-scroll {
  max-width: 100%;
  overflow-x: auto;
}

.table-scroll > .measures {
  margin-bottom: 0;
}

.table-scroll + * {
  margin-top: var(--space-4);
}

/* Petit écran : texte de 14 px et marges réduites pour que le tableau tienne sans défiler */
@media (max-width: 30em) {
  .measures {
    font-size: var(--step-small);
    line-height: var(--leading-small);
  }

  .measures th,
  .measures td {
    padding-right: var(--space-2);
  }
}

@media (min-width: 48em) {
  .measures {
    max-width: 48rem;
  }
}

/* En-tête de page (cas Clara, pages forfait) */
.page-head {
  padding-bottom: var(--space-6);
}

.page-head__lead {
  font-size: var(--step-lead);
  max-width: 44rem;
}

/* Ancre atteinte par un lien : le titre ne se colle pas au bord du navigateur */
[id] {
  scroll-margin-top: var(--space-5);
}

/* Les deux tableaux de mesures se suivent : un espace entre eux, et une colonne de plus à l'aise */
.measures--wide {
  margin-top: var(--space-4);
  table-layout: fixed;   /* mêmes colonnes dans les deux tableaux, pour les comparer d'un coup d'œil */
}

.measures--wide th:first-child {
  width: 50%;
}

/*
  Questions fréquentes (accueil, tarifs) : une ligne par question, la réponse se déroule dessous.
  <details> natif : fonctionne sans JavaScript, au clavier (Entrée, Espace) et avec un lecteur d'écran.
  La question reste un titre h3 (dans le <summary>). Pas de couleur en dur, pas d'ombre.
  Le déroulé animé (::details-content) est un plus : sans lui (ou avec « réduire les animations »), la réponse apparaît d'un coup.
*/
.faq details {
  max-width: 48rem;
  border-bottom: 1px solid var(--border-subtle);
}

.faq details:first-of-type {
  border-top: 1px solid var(--border-subtle);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--target);
  margin-inline: calc(-1 * var(--space-3));   /* le texte reste aligné sur le titre, seul le fond de survol déborde */
  padding: var(--space-4) var(--space-3);
  cursor: pointer;
  list-style: none;   /* le triangle du navigateur est remplacé par le chevron */
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary h3 {
  margin: 0;
  font-size: var(--step-lead);
  line-height: var(--leading-h3);
}

/* Chevron dessiné en CSS (les images en data: sont bloquées par la politique de sécurité du site) */
.faq summary::after {
  content: "";
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  margin-right: var(--space-1);
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.15rem) rotate(45deg);
}

.faq details[open] > summary::after {
  transform: translateY(0.15rem) rotate(-135deg);
}

/* Survol (souris) et appui (toucher) : le fond change, jamais le texte seul */
@media (hover: hover) and (pointer: fine) {
  .faq summary:hover {
    background: var(--surface);
  }

  .section--tint .faq summary:hover {
    background: var(--bg);
  }
}

.faq summary:active {
  background: var(--surface);
}

.section--tint .faq summary:active {
  background: var(--bg);
}

.faq details > p {
  margin: 0;
  padding: 0 0 var(--space-4);
}

@media (prefers-reduced-motion: no-preference) {
  .faq summary::after {
    transition: transform 0.2s ease;
  }

  @supports (interpolate-size: allow-keywords) and selector(::details-content) {
    .faq details {
      interpolate-size: allow-keywords;
    }

    .faq details::details-content {
      block-size: 0;
      overflow: clip;
      transition: block-size 0.25s ease, content-visibility 0.25s allow-discrete;
    }

    .faq details[open]::details-content {
      block-size: auto;
    }
  }
}

/* Un titre qui reçoit le focus par script (page de confirmation) n'est pas un élément interactif : pas de cadre autour.
   Le résumé d'erreurs, lui, garde son contour (notice.css). */
h1[tabindex="-1"]:focus {
  outline: none;
}