/* Règles propres à la page « recherche-formation » — engendré depuis maquette/corps/recherche-formation.css */
/* =====================================================================================
   RECHERCHE & FORMATION
   Trois bandes propres à la page : l’introduction illustrée (+ flèche de descente), les
   trois engagements sur fond dégradé, et la foire aux questions.
   Toutes les valeurs sont relevées sur l’original (reference/outline/recherche-formation.json
   et captures à l’échelle 1) : gouttières Divi, photo arrondie à 55px, pastilles
   d’accordéon arrondies.
   ===================================================================================== */

/* L’air laissé sous chaque module Divi vaut 29,6875px — et non 30 : valeur mesurée sur le
   site d’origine, identique à celle de la page « Télé-expertise ». */
body[data-page="recherche-formation"] { --air-module: 29.6875px; }

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

/* Colonnes à la grille Divi (gouttière 3) : 47,25 % de colonne et 5,5 % d’écart, 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 la césure des paragraphes en regard. */
@media (min-width: 1101px) {
  body[data-page="recherche-formation"] .rangee-intro .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="recherche-formation"] .picto-page {
  display: block; width: 51px; height: auto; margin: 0 0 10px;
}

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

/* Titre de page : 53px/40px comme les autres titres de section, mais sans le talon de
   10px du socle — l’original enchaîne sur le chapeau 26px plus bas. */
body[data-page="recherche-formation"] .titre-page {
  padding-bottom: 0; margin-bottom: 21px;
}

/* Chapeau : 14px sur 23,8 d’interligne — mesuré sur l’original (deux lignes en gras,
   à 413,9 et 437,7px), et non 16px comme le reste du corps de texte. */
body[data-page="recherche-formation"] .chapeau {
  font-size: 14px; line-height: 23.8px; color: var(--nuit);
  margin: 0 0 20px;
}

/* Mesure refaite sur l’original : les paragraphes de cette colonne s’enchaînent SANS air
   (474 -> 580 -> 650, soit exactement leur hauteur), et l’air se trouve au-dessus, sous le
   chapeau. C’est ce qui replace la flèche de descente à 759px comme sur le site. */
body[data-page="recherche-formation"] .rangee-intro p.texte--grand { margin: 0; }
body[data-page="recherche-formation"] .rangee-intro p.texte--grand:last-child { margin-bottom: 0; }

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

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

/* --- Les trois engagements (bande en dégradé) ------------------------------------------
   Le filigrane de chevrons déborde de la bande : on le recadre.                          */
body[data-page="recherche-formation"] .sec--atouts { overflow: hidden; }

/* Colonnes à la grille Divi « gouttière 2 » : 31,2666 % de colonne et 3,1 % d’écart,
   soit 337,7px et 33,5px sur une rangée de 1080. */
@media (min-width: 1101px) {
  body[data-page="recherche-formation"] .rangee-atouts .cols--3 {
    grid-template-columns: repeat(3, 31.2666%);
    gap: 3.1%;
  }
}

body[data-page="recherche-formation"] .picto-atout {
  display: block; margin: 0 auto 16px; width: auto; max-height: none;
}

/* Intertitre de colonne : 24px, avec le talon de 10px des titres Divi. */
body[data-page="recherche-formation"] .titre-atout {
  font-size: 24px; line-height: 24px; color: var(--nuit);
  text-align: center;
  margin: 0 0 10px; padding-bottom: 10px;
}
/* Troisième colonne : 6px d’air en plus sous le titre sur l’original. C’est cette colonne
   qui est la plus haute, donc c’est elle qui donne ses 350px à la bande. */
body[data-page="recherche-formation"] .titre-atout--veille { margin-bottom: 16px; }

/* --- 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="recherche-formation"] .sec--faq { padding: 0; }
body[data-page="recherche-formation"] .titre-faq { margin-bottom: var(--air-module); }

body[data-page="recherche-formation"] .faq-item {
  background: rgba(0, 0, 0, .02);
  border-radius: 50px;
  overflow: hidden;
  padding: 20px;
  margin-bottom: var(--air-module);
}
body[data-page="recherche-formation"] .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="recherche-formation"] .faq-item[open] { background: transparent; }

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

body[data-page="recherche-formation"] .faq-question {
  font-size: 16px; line-height: 24px; font-weight: 400;
  color: var(--gris-texte); margin: 0;
}
body[data-page="recherche-formation"] .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="recherche-formation"] .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="recherche-formation"] .faq-reponse { padding-top: 20px; }
body[data-page="recherche-formation"] .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 et aux pictogrammes
   des marges normales, on réduit les arrondis.                                           */
@media (max-width: 1100px) {
  body[data-page="recherche-formation"] .rangee-atouts .cols--3 { gap: 40px; }
}
@media (max-width: 767px) {
  body[data-page="recherche-formation"] .photo-intro { border-radius: 28px; }
  body[data-page="recherche-formation"] .titre-page { font-size: 32px; line-height: 32px; }
  body[data-page="recherche-formation"] .titre-atout,
  body[data-page="recherche-formation"] .titre-atout--veille { margin-bottom: 10px; }
  body[data-page="recherche-formation"] .faq-item { border-radius: 28px; padding: 18px 22px; margin-bottom: 14px; }
  body[data-page="recherche-formation"] .faq-item > summary { padding-right: 26px; }
}