/* SERVICES 10 - ACCORDION */
.services-10 {
  color: var(--black);
  padding: 80px 5%;
  background: var(--gray-light);
  font-family: var(--font-body);
}
.services-10__inner {
  max-width: 1000px;
  margin: 0 auto;
}
.services-10__head {
  text-align: center;
  margin-bottom: 44px;
}
.services-10__title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.5vw, 2.25rem);
  font-weight: 600;
  color: var(--primary);
}
.services-10__subtitle {
  margin: 0;
  font-size: 0.95rem;
  color: var(--gray-dark);
}
.services-10__row {
  margin-bottom: 12px;
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.3s ease;
}
.services-10__row:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.services-10__bar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 26px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.services-10__bar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.services-10__tag {
  font-family: var(--font-display);
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--secondary);
}
.services-10__name {
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--primary);
}
.services-10__toggle {
  position: relative;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--secondary) 12%, transparent);
  transition: transform 0.35s ease;
}
.services-10__toggle::before,
.services-10__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--secondary);
  transform: translate(-50%, -50%);
}
.services-10__toggle::before {
  width: 10px;
  height: 2px;
}
.services-10__toggle::after {
  width: 2px;
  height: 10px;
}
.services-10__row.is-open .services-10__toggle {
  transform: rotate(135deg);
}
.services-10__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s ease;
}
.services-10__panel-inner {
  padding: 0 26px 22px;
}
.services-10__desc {
  margin: 4px 0 12px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--gray-dark);
}
.services-10__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.services-10__chip {
  padding: 5px 12px;
  border-radius: 14px;
  font-size: 0.78rem;
  background: color-mix(in srgb, var(--secondary) 8%, transparent);
  color: color-mix(in srgb, var(--secondary) 80%, var(--primary));
}


/* ── REGROUPEMENT PAR METIER ──────────────────────────────────────────
   La variante etant deja un accordeon, le metier en devient le PREMIER
   ETAGE : un dossier repliable, le premier ouvert, les suivants fermes. On
   choisit son metier avant sa prestation, au lieu de derouler treize lignes
   de deux metiers melanges.

   MONO-METIER : aucun dossier n'est emis, les lignes restent enfants directs
   de la liste et le rendu est celui d'avant.

   L'OUVERTURE se joue sur `grid-template-rows: 0fr -> 1fr`, pas sur une
   hauteur maximale mesuree : les lignes qu'il contient ouvrent elles-memes un
   panneau, donc la hauteur du dossier change apres la mesure. Le ratio de
   grille n'a rien a mesurer.

   LA COULEUR : rampe --secondary → --primary, ancree sur la couleur que la
   variante utilise deja pour ses accents. */
.services-10__dossier {
  --m-couleur: color-mix(in oklab, var(--secondary), var(--primary) var(--m-melange, 0%));
  --m-texte: color-mix(in oklab, var(--on-secondary), var(--on-primary) var(--m-melange, 0%));
  margin-bottom: 22px;
}
.services-10__dossier-bar {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 26px;
  border: 0;
  border-radius: 14px;
  background: var(--m-couleur);
  color: var(--m-texte);
  font-family: var(--font-body);
  cursor: pointer;
  text-align: left;
}
.services-10__dossier-nom {
  flex: 1;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--m-texte);
}
.services-10__dossier-toggle {
  position: relative;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  transition: transform 0.3s ease;
}
.services-10__dossier-toggle::before,
.services-10__dossier-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--m-texte);
  transform: translate(-50%, -50%);
}
.services-10__dossier-toggle::before {
  width: 12px;
  height: 2px;
}
.services-10__dossier-toggle::after {
  width: 2px;
  height: 12px;
}
.services-10__dossier.is-open .services-10__dossier-toggle {
  transform: rotate(135deg);
}
.services-10__dossier-corps {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease;
}
.services-10__dossier.is-open .services-10__dossier-corps {
  grid-template-rows: 1fr;
}
.services-10__dossier-inner {
  overflow: hidden;
  min-height: 0;
}
/* Le dossier ouvert respire avant sa premiere ligne. */
.services-10__dossier.is-open .services-10__dossier-inner {
  padding-top: 12px;
}
/* Les accents d'une ligne suivent le metier de son dossier. Meme specificite
   que les regles d'origine, placees apres : c'est l'ordre qui tranche. */
.services-10__dossier .services-10__tag {
  color: var(--m-couleur);
}

/* SURVOL ET FOCUS : la ligne se remplit de la couleur de son metier.
   `:focus-within` accompagne `:hover` — la barre est un <button>, et un
   parcours au clavier doit voir la meme chose qu'un parcours a la souris.

   Le texte passe a `--m-texte` : c'est la couleur que le theme declare pour
   ce fond-la, blanche avec la palette de reference. Chaque element est repris
   nommement, faute de quoi il garderait son gris ou son turquoise sur une
   ligne devenue pleine. */
.services-10__dossier .services-10__row:hover,
.services-10__dossier .services-10__row:focus-within {
  background: var(--m-couleur);
}
.services-10__dossier .services-10__row:hover .services-10__tag,
.services-10__dossier .services-10__row:hover .services-10__name,
.services-10__dossier .services-10__row:hover .services-10__desc,
.services-10__dossier .services-10__row:focus-within .services-10__tag,
.services-10__dossier .services-10__row:focus-within .services-10__name,
.services-10__dossier .services-10__row:focus-within .services-10__desc {
  color: var(--m-texte);
}
.services-10__dossier .services-10__row:hover .services-10__toggle::before,
.services-10__dossier .services-10__row:hover .services-10__toggle::after,
.services-10__dossier .services-10__row:focus-within .services-10__toggle::before,
.services-10__dossier .services-10__row:focus-within .services-10__toggle::after {
  background: var(--m-texte);
}
.services-10__dossier .services-10__row:hover .services-10__chip,
.services-10__dossier .services-10__row:focus-within .services-10__chip {
  background: color-mix(in srgb, var(--m-texte) 16%, transparent);
  color: var(--m-texte);
}
.services-10__dossier .services-10__toggle::before,
.services-10__dossier .services-10__toggle::after {
  background: var(--m-couleur);
}
.services-10__dossier .services-10__chip {
  background: color-mix(in srgb, var(--m-couleur) 10%, transparent);
  color: color-mix(in srgb, var(--m-couleur) 80%, var(--primary));
}

/* ── TITRES : couleur de survol explicite (CLAUDE.md §4.13) ──────────
   Le main.css des themes stylise les balises Hn, hover compris. Chaque
   titre reprend ici sa couleur de base pour neutraliser cet heritage. */
.services-10__title:hover {
  color: var(--primary);
}

/* Accent ((…)) d'une description de l'offre : gras, dans la couleur du
   texte qui le porte (la description déclare la sienne, fond réel compris). */
.services-10__desc .mcl-accent {
  color: inherit;
  font-weight: 700;
}

/* D-42 : l'accent ((…)) d'un titre de l'offre (service, sous-service,
   atout, étape) garde la couleur du texte qui le porte et passe en italique. */
.services-10__name .mcl-accent,
.services-10__chip .mcl-accent {
  color: inherit;
  font-style: italic;
}