/* Infos pratiques. Téléphone d'abord : titre, sommaire en puces, puis les blocs les uns sous les autres.
   Dès 1 024 px : sommaire collant à gauche (3 colonnes), contenu à droite (9 colonnes). Valeurs : tokens.css. */

/* Page courante dans la navigation (règle commune absente de styles.css : à y remonter) */

/* Ossature */
.infos { display: grid; padding-block: var(--s7) var(--section); }
.infos__tete { display: grid; gap: var(--s4); padding-bottom: var(--s6); }
.infos__corps { min-width: 0; }

/* Sommaire */
.sommaire { margin-bottom: var(--s2); }
.sommaire__titre { font: 500 var(--t-petit)/1.45 var(--sans); color: var(--ardoise); margin-bottom: var(--s3); }
.sommaire ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.sommaire a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 14px;
  border: 1px solid var(--filet); border-radius: var(--r-bouton);
  font: 500 var(--t-ui)/1.3 var(--sans); color: var(--chenal); text-decoration: none;
  transition: border-color .16s var(--courbe), background-color .16s var(--courbe);
}
.sommaire a:hover { border-color: var(--chenal); }

@media (min-width: 1024px) {
  .infos { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: var(--s7); padding-top: var(--s8); }
  .infos__tete { grid-column: 1 / -1; padding-bottom: var(--s7); }
  .sommaire { grid-column: 1; align-self: start; position: sticky; top: calc(var(--entete) + var(--s6)); margin: 0; padding-top: var(--s2); }
  .infos__corps { grid-column: 2; }
  /* Sur bureau, le sommaire devient une route verticale : un filet, et le tronçon courant en magenta */
  .sommaire ul { display: grid; gap: 0; border-left: 2px solid var(--filet); }
  .sommaire a {
    min-height: 44px; padding: 10px 0 10px var(--s4); margin-left: -2px; border: 0; border-left: 2px solid transparent; border-radius: 0;
    font-weight: 400; color: var(--ardoise);
  }
  .sommaire a:hover { color: var(--chenal); border-left-color: var(--chenal); }
  .sommaire a[aria-current="true"] { color: var(--chenal); font-weight: 500; border-left-color: var(--magenta); }
}

/* Blocs de contenu : le même espacement de section entre chaque (les filets des questions font la séparation) */
.bloc-infos { padding-top: var(--s8); }
.bloc-infos + .bloc-infos { padding-top: var(--section); }
.bloc-infos > h2 { margin-bottom: var(--s6); }
@media (min-width: 1024px) { .bloc-infos:first-child { padding-top: 0; } }

/* La barre fixe du bas (téléphone) ne doit pas cacher l'élément qui a le focus (règle commune : à remonter dans styles.css) */

/* Rendez-vous */
.rdv__grille { display: grid; gap: var(--s6); }
.rdv__heures { margin: 0; display: grid; gap: 0; }
/* Les deux heures reliées comme deux arrêts sur la route */
.rdv__heures div { position: relative; padding: 0 0 var(--s5) 28px; }
.rdv__heures div:last-child { padding-bottom: 0; }
.rdv__heures div::before {
  content: ""; position: absolute; left: 0; top: calc(var(--t-h2) * 0.5 - 6px); width: 12px; height: 12px; border-radius: var(--r-rond);
  background: var(--blanc); box-shadow: 0 0 0 2px var(--magenta);
}
.rdv__heures div:first-child::after { content: ""; position: absolute; left: 5px; top: calc(var(--t-h2) * 0.5 + 10px); bottom: calc(10px - var(--t-h2) * 0.5); width: 2px; background: var(--magenta); }
.rdv__heures dt { font: 400 var(--t-h2)/1 var(--serif); font-variation-settings: "opsz" 60; letter-spacing: -0.01em; }
.rdv__heures dd { margin: var(--s2) 0 0; color: var(--ardoise); max-width: 22em; }

.rdv__adresse { display: grid; gap: var(--s3); align-content: start; }
.rdv__adresse h3 { margin-bottom: var(--s1); }
.rdv__boutons { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s3); }

.rdv__notes { margin: var(--s7) 0 0; display: grid; gap: var(--s5); }
.rdv__notes div { border-top: 1px solid var(--filet); padding-top: var(--s4); }
.rdv__notes dt { font: 500 20px/1.25 var(--serif); }
.rdv__notes dd { margin: var(--s2) 0 0; color: var(--ardoise); }
.rdv .faq { margin-top: var(--s7); }

@media (min-width: 768px) {
  .rdv__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s7); }
  .rdv__notes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); }
}

/* Questions fréquentes : <details> natifs, ouverts et fermés sans script */
.faq__groupe { scroll-margin-top: calc(var(--entete) + 16px); }
.faq__groupe + .faq__groupe { margin-top: var(--s7); }
.faq__groupe > h3 { margin-bottom: var(--s4); }
.faq { max-width: 46rem; border-bottom: 1px solid var(--filet); }
.faq details { border-top: 1px solid var(--filet); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  min-height: 60px; padding: 14px 0; cursor: pointer; list-style: none;
  font: 500 var(--t-texte)/1.35 var(--sans); color: var(--chenal);
}
.faq summary::-webkit-details-marker { display: none; }
/* Plus qui devient moins */
.faq summary::after {
  content: ""; flex: none; width: 16px; height: 16px; margin-right: 2px;
  background:
    linear-gradient(var(--magenta-fonce), var(--magenta-fonce)) center / 16px 2px no-repeat,
    linear-gradient(var(--magenta-fonce), var(--magenta-fonce)) center / 2px 16px no-repeat;
  transition: transform .24s var(--courbe), background-size .24s var(--courbe);
}
.faq details[open] > summary::after { transform: rotate(180deg); background-size: 16px 2px, 2px 0; }
.faq summary:hover span { text-decoration: underline; text-decoration-color: var(--magenta); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.faq summary:focus-visible { outline-offset: 2px; }
/* Un badge ne part jamais seul en début de ligne, ni sa ponctuation */
.ensemble { white-space: nowrap; }
.reponse { display: grid; gap: var(--s3); padding: 0 var(--s7) var(--s5) 0; }
.faq details[open] .reponse { animation: deplie .24s var(--courbe); }
@keyframes deplie { from { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 767px) { .reponse { padding-right: 0; } }

/* Conditions de vente et mentions légales */
.legal__article { max-width: 46rem; display: grid; gap: var(--s3); padding-block: var(--s5); border-top: 1px solid var(--filet); }
.legal__article:last-child { padding-bottom: 0; }
.legal__article h3 { font-size: 20px; line-height: 1.25; }
.legal > p { margin-bottom: var(--s5); }
.mentions { margin: 0; max-width: 46rem; border-bottom: 1px solid var(--filet); }
.mentions div { display: grid; gap: var(--s1); padding-block: var(--s3); border-top: 1px solid var(--filet); }
.mentions dt { font: 500 var(--t-petit)/1.45 var(--sans); color: var(--ardoise); }
.mentions dd { margin: 0; overflow-wrap: anywhere; }
@media (min-width: 768px) {
  .mentions div { grid-template-columns: 14rem minmax(0, 1fr); gap: var(--s5); align-items: baseline; }
}

/* Une autre question ? */
.autre { background: var(--chenal); color: var(--blanc); padding-block: var(--section); border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.autre__in { display: grid; gap: var(--s4); justify-items: start; }
.autre .chapeau { color: rgba(255, 255, 255, 0.85); }
.autre__boutons { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s3); }
.autre .bouton--plein:hover { background: var(--blanc); color: var(--chenal); }
.autre :focus-visible { outline-color: var(--blanc); }
@media (max-width: 479px) { .autre__boutons, .autre__boutons .bouton { width: 100%; } }