/* Règles propres à la page « excellence-diagnostique » — engendré depuis maquette/corps/excellence-diagnostique.css */
/* =====================================================================================
   PAGE « EXCELLENCE DIAGNOSTIQUE & TRAITEMENTS » — quatre bandes propres à la page :
     1. présentation (picto + titre + texte + photo) puis flèche : 795 px
     2. les trois atouts, sur fond dégradé                       : 382 px
     3. « Traitements et techniques », neuf fiches               : 1781 px
     4. « Foire aux questions – FAQ »                            :  837 px
   Toutes les valeurs verticales sont RELEVÉES sur le site d'origine à 1440 px, pas
   estimées : picto de 56 px, photo à y=198, fiches de 338 px espacées de 33 px,
   pilules de FAQ de 64 px espacées de 29,7 px.
   ===================================================================================== */

/* --- 1. Bande de présentation ------------------------------------------------------------
   Les deux colonnes font 510 px et sont séparées de 60 px (grille Divi d'une rangée de
   1080 px). Elles sont centrées l'une sur l'autre : c'est ce centrage qui place la photo
   3 px plus bas que le pictogramme, exactement comme sur le site d'origine.              */
body[data-page="excellence-diagnostique"] .sec--presentation .cols--2 { gap: 60px; }

/* Le pictogramme est servi en SVG de 156 px de large : la largeur est imposée ici,
   sinon le navigateur lui donne sa taille naturelle et tout le bloc se décale. */
body[data-page="excellence-diagnostique"] .page-picto {
  display: block;
  width: 56px; height: auto;
  margin: 0 0 11px;
}
body[data-page="excellence-diagnostique"] .sur-titre-page {
  margin: 0 0 12px;
  font-size: 16px; line-height: 18px;
  color: var(--nuit);
}
body[data-page="excellence-diagnostique"] .titre-page { margin: 0 0 13px; }

/* Les paragraphes de la colonne de gauche sont séparés de 16 px (et non des 18 px du
   socle) : c'est le « padding-bottom: 1em » du thème d'origine. */
body[data-page="excellence-diagnostique"] .texte-presentation p {
  margin: 0 0 16px;
  font-size: 16px; line-height: 18px;
  color: var(--nuit);
}
body[data-page="excellence-diagnostique"] .texte-presentation p:last-child { margin-bottom: 0; }

/* La photo de présentation est plus arrondie que les visuels courants (55 px mesurés). */
body[data-page="excellence-diagnostique"] .visuel-presentation { border-radius: 55px; }

/* La flèche de descente : image décorative d'origine, devenue un vrai lien. */
/* Le lien est un bloc centré et non une boîte en ligne : sur la ligne de texte, une boîte
   en ligne réserve 4 px sous elle pour les jambages, et la bande devenait plus haute. */
body[data-page="excellence-diagnostique"] .lien-fleche {
  display: block;
  width: 62.553px;
  margin: 0 auto;
}
body[data-page="excellence-diagnostique"] .lien-fleche img {
  display: block;
  width: 62.553px; height: auto;   /* taille naturelle du SVG, qui porte déjà sa rotation */
}
body[data-page="excellence-diagnostique"] .lien-fleche:focus-visible {
  outline: 2px solid var(--nuit);
  outline-offset: 6px;
  border-radius: 50%;
}

/* --- 2. Les trois atouts (bande en dégradé) -----------------------------------------------
   Trois colonnes de 338 px séparées par 33 px : la gouttière « resserrée » de Divi
   (1080 = 3 × 338 + 2 × 33).                                                             */
body[data-page="excellence-diagnostique"] .atouts { gap: 33px; }
body[data-page="excellence-diagnostique"] .atout { text-align: center; }
body[data-page="excellence-diagnostique"] .atout-picto {
  display: block;
  height: 86px; width: auto;
  margin: 0 auto 16px;
}
body[data-page="excellence-diagnostique"] .atout-titre {
  margin: 0 0 10px;
  padding-bottom: 10px;
  font-size: 26px; line-height: 26px;
  color: var(--nuit);
}
body[data-page="excellence-diagnostique"] .atout-texte {
  margin: 0;
  font-size: 16px; line-height: 18px;
  color: var(--nuit);
}
/* Le troisième bloc du site d'origine a 6 px d'air en plus sous son titre (réglage oublié
   dans l'éditeur) : on le conserve pour rester au pixel près sur la bande. */
body[data-page="excellence-diagnostique"] .atout:last-child .atout-titre { margin-bottom: 16px; }

/* --- 3. Traitements et techniques ----------------------------------------------------------
   Le site d'origine intercalait un paragraphe vide de 18 px entre l'accroche et les fiches :
   ici c'est une marge basse (22 px de retrait du paragraphe + 18 px = 40 px).             */
body[data-page="excellence-diagnostique"] .sec--traitements .titre-sec { margin-bottom: 29px; }
body[data-page="excellence-diagnostique"] .traitements-intro {
  margin: 0 0 40px;
  font-size: 22px; line-height: 24px;
  color: var(--nuit);
}

/* Neuf fiches en trois lignes de trois. La grille suffit à reproduire les trois rangées
   Divi : chaque ligne se cale sur sa fiche la plus haute, et les lignes sont espacées
   de 54 px (les deux fois 27 px d'air d'une rangée à l'autre). */
body[data-page="excellence-diagnostique"] .fiches {
  gap: 54px 33px;
  align-items: stretch;
}
body[data-page="excellence-diagnostique"] .fiche {
  background: var(--blanc);
  border-radius: 40px;
  overflow: hidden;
  padding: 15px;
  text-align: center;
  box-shadow: 0 2px 18px -12px rgba(0, 0, 0, .3);
}
body[data-page="excellence-diagnostique"] .fiche img {
  display: block;
  width: 100%; height: auto;
  margin: 0 0 15px;
}
body[data-page="excellence-diagnostique"] .fiche h3 {
  margin: 0;
  padding-bottom: 10px;
  font-size: 16px; line-height: 16px; font-weight: 800;
  color: var(--nuit);
}
/* Les 10 px sous la description reprennent le retrait du titre de niveau 6 d'origine :
   ils font partie de la hauteur mesurée des fiches. */
body[data-page="excellence-diagnostique"] .fiche p {
  margin: 0 0 10px;
  font-size: 15px; line-height: 15px;
  color: var(--nuit);
}
body[data-page="excellence-diagnostique"] .traitements-note {
  margin: 0;
  font-size: 16px; line-height: 18px;
  color: var(--nuit);
}

/* --- 4. Foire aux questions ------------------------------------------------------------------
   La bande n'a pas de marge propre : ce sont les 27 px de la rangée qui l'ouvrent et la
   ferment. Question fermée = pilule grise de 64 px ; question ouverte = fond transparent.  */
body[data-page="excellence-diagnostique"] .sec--faq { padding: 0; }
body[data-page="excellence-diagnostique"] .sec--faq .titre-sec { margin-bottom: 29.7px; }

body[data-page="excellence-diagnostique"] .faq-item {
  background: rgba(0, 0, 0, .02);
  border-radius: 50px;
  padding: 20px;
  margin-bottom: 29.6875px;
}
body[data-page="excellence-diagnostique"] .faq-item:last-child { margin-bottom: 0; }
body[data-page="excellence-diagnostique"] .faq-item[open] { background: transparent; }

body[data-page="excellence-diagnostique"] .faq-question {
  position: relative;
  display: block;               /* supprime la puce native de <summary> */
  list-style: none;
  cursor: pointer;
}
body[data-page="excellence-diagnostique"] .faq-question::-webkit-details-marker { display: none; }
/* Le retrait qui réserve la place du « + » est porté par le titre, pas par le <summary> :
   la question garde ainsi la largeur de rangée relevée sur le site d'origine (1040 px). */
body[data-page="excellence-diagnostique"] .faq-question h3 {
  margin: 0;
  padding-right: 50px;
  font-size: 16px; line-height: 24px; font-weight: 400;
  color: var(--gris-texte);
}
body[data-page="excellence-diagnostique"] .faq-item[open] .faq-question h3 { color: var(--mauve); }

/* Le « + » mauve : pastille dessinée en SVG embarqué, donc aucun fichier à charger. */
body[data-page="excellence-diagnostique"] .faq-question::after {
  content: "";
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='9' fill='%23b9a3ce'/%3E%3Cpath d='M9 4.6v8.8M4.6 9h8.8' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}
body[data-page="excellence-diagnostique"] .faq-item[open] .faq-question::after { display: none; }
body[data-page="excellence-diagnostique"] .faq-question:focus-visible {
  outline: 2px solid var(--mauve);
  outline-offset: 4px;
  border-radius: 8px;
}

/* Les navigateurs récents gardent le contenu d'un <details> fermé dans la page (masqué
   par « content-visibility »). On le retire vraiment du rendu, comme sur le site
   d'origine : sinon les réponses fermées sont lues par les outils de mesure et d'analyse. */
body[data-page="excellence-diagnostique"] .faq-item:not([open]) .faq-reponse { display: none; }
body[data-page="excellence-diagnostique"] .faq-reponse { padding-top: 20px; }
body[data-page="excellence-diagnostique"] .faq-reponse p {
  margin: 0;
  font-size: 16px; line-height: 28.8px;
  color: var(--gris-texte);
}

/* --- Adaptatif ------------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  body[data-page="excellence-diagnostique"] .sec--presentation .cols--2 { gap: 40px; }
  body[data-page="excellence-diagnostique"] .atouts { gap: 28px; }
  body[data-page="excellence-diagnostique"] .fiches { gap: 40px 28px; }
  body[data-page="excellence-diagnostique"] .atout-titre { font-size: 22px; line-height: 24px; }
  body[data-page="excellence-diagnostique"] .traitements-intro { font-size: 19px; line-height: 22px; }
  body[data-page="excellence-diagnostique"] .visuel-presentation { border-radius: 40px; }
}

@media (max-width: 767px) {
  /* Trois fiches par ligne deviennent illisibles sur téléphone : on empile. */
  body[data-page="excellence-diagnostique"] .atouts,
  body[data-page="excellence-diagnostique"] .fiches { grid-template-columns: 1fr; gap: 28px; }
  body[data-page="excellence-diagnostique"] .fiche p { line-height: 20px; }
  body[data-page="excellence-diagnostique"] .traitements-intro { font-size: 18px; line-height: 22px; }
  /* Une question tient rarement sur une ligne : la pilule redevient un bloc arrondi. */
  body[data-page="excellence-diagnostique"] .faq-item { border-radius: 28px; margin-bottom: 16px; }
  body[data-page="excellence-diagnostique"] .faq-question h3 { padding-right: 34px; }
}

/* Recalage après correction des métriques de fonte du socle (les surcharges
   ascent/descent ne s'appliquent plus qu'à degulardisplay-regular, comme dans le
   thème d'origine). Écarts mesurés bande par bande avec diff-sections.js. */
body[data-page="excellence-diagnostique"] .sec--traitements { padding-bottom: 51px; }