/* Règles propres à la page « tele-expertise » — engendré depuis maquette/corps/tele-expertise.css */
/* =====================================================================================
   TÉLÉ-EXPERTISE ET TÉLÉCONSULTATION
   Trois bandes propres à la page : l’introduction illustrée (+ flèche de descente), le
   « Suivi personnalisé » avec ses deux blocs d’appel à l’action, et la foire aux questions.
   Toutes les valeurs sont relevées sur l’original (reference/outline/tele-expertise.json)
   et sur le CSS servi par WordPress : gouttière Divi, coins arrondis à 55px sur la photo,
   pastilles d’accordéon arrondies à 50px.
   ===================================================================================== */

/* L’air laissé sous chaque module Divi vaut 29,6875px — et non 30 : valeur mesurée sur le
   site d’origine. La fraction de pixel se cumule cinq fois dans la hauteur de la page ;
   arrondie à 30px, la bande « Suivi personnalisé » gagne un pixel de trop. */
body[data-page="tele-expertise"] { --air-module: 29.6875px; }

/* --- Bande d’introduction ------------------------------------------------------------- */

/* L’original ne laisse qu’un seul pixel sous la rangée de la flèche (padding-bottom:1px
   sur la section) : c’est ce qui colle la bande suivante à la flèche. */
body[data-page="tele-expertise"] .sec--intro { padding: 54px 0 1px; }

/* Colonnes à la grille Divi : 47,25 % de colonne et 5,5 % de gouttière, soit 510,3px et
   59,4px sur une rangée de 1080. C’est cette largeur qui fixe la taille de la photo, donc
   la hauteur de la bande et le centrage vertical du texte placé en regard. */
@media (min-width: 1101px) {
  body[data-page="tele-expertise"] .rangee-intro .cols--2,
  body[data-page="tele-expertise"] .rangee-cartes .cols--2 {
    grid-template-columns: 47.25% 47.25%;
    gap: 5.5%;
  }
}

/* Pictogramme de rubrique, calé à gauche au-dessus du sur-titre. */
body[data-page="tele-expertise"] .tele-picto {
  display: block; width: 51px; height: auto; margin: 0 0 9px;
}

/* Sur-titre : le libellé de la rubrique en petit, au-dessus du grand titre. */
body[data-page="tele-expertise"] .sur-titre-page {
  font-size: 14px; line-height: 23.8px; color: var(--nuit);
  margin: 0 0 19px;
}

/* Titre de page : 53px/40px comme les autres titres de section, mais sans le talon de
   10px du socle — l’original enchaîne directement sur le texte, 17px plus bas. */
body[data-page="tele-expertise"] .titre-tele {
  padding-bottom: 0; margin-bottom: 17px; color: var(--rose);
}

/* La photo de la bande est arrondie à 55px, et non aux 40px du reste du site. */
body[data-page="tele-expertise"] .photo-tele { border-radius: 55px; }

/* Flèche de descente, centrée sur sa propre rangée, à sa taille naturelle (62,5px). */
body[data-page="tele-expertise"] .fleche-tele {
  display: block; margin: 0 auto; width: auto;
}

/* --- Bande « Suivi personnalisé et espace patient » ------------------------------------ */

body[data-page="tele-expertise"] .sec--suivi { padding: 0 0 54px; }

/* Intertitre mauve de la bande : 36px, avec le talon de 10px des titres Divi. */
body[data-page="tele-expertise"] .titre-suivi {
  font-size: 36px; line-height: 36px; color: var(--mauve);
  margin: 0; padding-bottom: 10px;
}

/* Dans cette rangée, l’air sous chaque bloc de texte est de 16px (1em), pas de 18px. */
body[data-page="tele-expertise"] .rangee-suivi > p,
body[data-page="tele-expertise"] .rangee-suivi > ul { margin: 0 0 16px; }
body[data-page="tele-expertise"] .rangee-suivi > :last-child { margin-bottom: 0; }

/* Énumération sans puce : le chevron « > » du site tient lieu de marqueur, il fait partie
   du texte en gras comme sur l’original. Une ligne par entrée, sans air entre elles. */
body[data-page="tele-expertise"] .liste-fleche {
  list-style: none; padding: 0;
}
body[data-page="tele-expertise"] .liste-fleche li { margin: 0; }

/* Deux blocs illustrés : chaque module est suivi de l’air de module Divi. */
body[data-page="tele-expertise"] .illu-carte {
  display: block; margin: 0 auto var(--air-module); width: auto;
}
body[data-page="tele-expertise"] .titre-carte {
  font-size: 20px; line-height: 20px; color: var(--nuit);
  margin: 0 0 var(--air-module); padding-bottom: 10px;
}
/* La colonne des patientes n’a pas de sous-titre : l’original compense par 74px d’air
   sous son titre, ce qui aligne les deux boutons à quelques pixels près. */
body[data-page="tele-expertise"] .titre-carte--patientes { margin-bottom: 74px; }
body[data-page="tele-expertise"] .sous-titre-carte { margin: 0 0 var(--air-module); }
body[data-page="tele-expertise"] .action-carte { margin: 0; }

/* Les deux pilules de cette page ont 20px de retrait sur les quatre côtés (et non les
   32px horizontaux du socle) : elles sont donc plus étroites que les boutons du héros.
   Celle en dégradé n’a pas de filet, elle est donc 2px moins haute que celle à contour. */
body[data-page="tele-expertise"] .btn--tele { padding: 20px; }
body[data-page="tele-expertise"] .btn--tele.btn--degrade { border: 0; }

/* --- Foire aux questions ---------------------------------------------------------------
   Accordéon natif : <details> replié = pastille grise très arrondie avec un « + » à
   droite ; <details open> = fond transparent, question en mauve, réponse dépliée.        */

body[data-page="tele-expertise"] .sec--faq { padding: 0; }
body[data-page="tele-expertise"] .titre-faq { margin-bottom: var(--air-module); }

body[data-page="tele-expertise"] .faq-item {
  background: rgba(0, 0, 0, .02);
  border-radius: 50px;
  overflow: hidden;
  padding: 20px;
  margin-bottom: var(--air-module);
}
body[data-page="tele-expertise"] .faq-item:last-child { margin-bottom: 0; }
/* Une fois dépliée, la question perd son fond : seule la réponse reste visible. */
body[data-page="tele-expertise"] .faq-item[open] { background: transparent; }

body[data-page="tele-expertise"] .faq-item > summary {
  position: relative; cursor: pointer; list-style: none;
}
body[data-page="tele-expertise"] .faq-item > summary::-webkit-details-marker { display: none; }
body[data-page="tele-expertise"] .faq-item > summary:focus-visible {
  outline: 2px solid var(--mauve); outline-offset: 4px;
}

body[data-page="tele-expertise"] .faq-question {
  font-size: 16px; line-height: 24px; font-weight: 400;
  color: var(--gris-texte); margin: 0;
}
body[data-page="tele-expertise"] .faq-item[open] .faq-question { color: var(--mauve); }

/* Pastille « + » à droite de la question repliée, découpée dans un disque mauve. */
body[data-page="tele-expertise"] .faq-item:not([open]) > summary::after {
  content: "";
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23b9a3ce' fill-rule='evenodd' d='M8 0a8 8 0 100 16A8 8 0 008 0zM7.2 3.4h1.6v3.8h3.8v1.6H8.8v3.8H7.2V8.8H3.4V7.2h3.8z'/%3E%3C/svg%3E") no-repeat center / contain;
}

body[data-page="tele-expertise"] .faq-reponse { padding-top: 20px; }
body[data-page="tele-expertise"] .faq-reponse p {
  font-size: 16px; line-height: 28.8px; color: var(--gris-texte); margin: 0;
}

/* --- Adaptatif -------------------------------------------------------------------------
   Sur tablette et téléphone les colonnes s’empilent : on rend au titre des patientes une
   marge normale, on réduit les arrondis et on desserre les bandes.                       */
@media (max-width: 1100px) {
  body[data-page="tele-expertise"] .titre-carte--patientes { margin-bottom: 30px; }
}
@media (max-width: 767px) {
  body[data-page="tele-expertise"] .photo-tele { border-radius: 28px; }
  body[data-page="tele-expertise"] .titre-tele { font-size: 32px; line-height: 32px; }
  body[data-page="tele-expertise"] .titre-suivi { font-size: 28px; line-height: 30px; }
  body[data-page="tele-expertise"] .faq-item { border-radius: 28px; padding: 18px 22px; margin-bottom: 14px; }
  body[data-page="tele-expertise"] .faq-item > summary { padding-right: 26px; }
}