/* Règles propres à la page « atelier-education » — engendré depuis maquette/corps/atelier-education.css */
/* =====================================================================================
   ATELIER D’ÉDUCATION THÉRAPEUTIQUE
   Une seule bande propre à la page. Toutes les valeurs sont relevées sur l’original
   (reference/outline/atelier-education.json) : 3px seulement sous la rangée du bandeau,
   colonnes à la gouttière Divi, coins arrondis à 55px sur les deux visuels.
   ===================================================================================== */

/* Rangée du bandeau : l’original ne laisse que 3px d’air sous cette rangée, contre les
   27px habituels — c’est ce qui rapproche le calendrier du bandeau. */
body[data-page="atelier-education"] .rangee-bandeau { padding: 27px 0 3px; }

/* Les deux visuels de la page sont arrondis à 55px, et non aux 40px du reste du site. */
body[data-page="atelier-education"] .bandeau-atelier,
body[data-page="atelier-education"] .calendrier-atelier { border-radius: 55px; }

/* 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. La fraction de pixel compte : c’est elle qui fixe la
   hauteur du calendrier, donc le centrage vertical du texte placé en regard. */
@media (min-width: 1101px) {
  body[data-page="atelier-education"] .rangee-intro .cols--2 {
    grid-template-columns: 47.25% 47.25%;
    gap: 5.5%;
  }
}

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

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

/* --- Adaptatif -----------------------------------------------------------------------
   Sur tablette et téléphone les colonnes s’empilent : le calendrier passe sous le texte
   et on rend au bandeau une marge basse normale.                                        */
@media (max-width: 1100px) {
  body[data-page="atelier-education"] .rangee-bandeau { padding: 27px 0 20px; }
}
@media (max-width: 767px) {
  body[data-page="atelier-education"] .bandeau-atelier,
  body[data-page="atelier-education"] .calendrier-atelier { border-radius: 28px; }
  body[data-page="atelier-education"] .sur-titre-page { padding-bottom: 0; margin-bottom: 6px; }
}