/* page-atelier.css : retours Marie du 31/08 (05/10/2026). */

/* =========================================================================
   Gabarit « Atelier (préparation à la naissance) » : HÉROS
   Retour de Marie (doc du 31/08) : « dans le héro, souci d'affichage sur
   l'image et au niveau des pictos » (exemple : Séances de yoga).

   ⚠️ Cette feuille est servie AVANT blocs-reutilisables.css (ordre mesuré
   dans le HTML le 05/10) : les règles de l'encart sont donc préfixées
   `body` pour l'emporter à sélecteur égal, sans `!important`.
   Les règles d'origine restent dans maternite.css (.mat-atl-hero*) et dans
   blocs-reutilisables.css (.mat-atl-infos*) : on surcharge ici, on ne les
   modifie pas.
   ========================================================================= */

/* --- Fil d'Ariane aligné à gauche, sur le bord de la photo ---------------- */
body .mat-atl-breadcrumb .mat-breadcrumb,
body .mat-atl-breadcrumb .mat-breadcrumb__list,
body .mat-atl-breadcrumb ol,
body .mat-atl-breadcrumb ul { justify-content: flex-start; text-align: left; }

/* --- Photo ---------------------------------------------------------------- */
/* Le cadre était à hauteur FIXE (420 / 320 / 240px) en object-fit: cover :
   une photo 3:2 (format de toutes les photos d'atelier) perdait le haut et
   le bas, et à 240px de haut en mobile le sujet était coupé. Le cadre suit
   désormais le ratio 3:2 : la photo s'affiche entière, et une photo d'un
   autre format est recadrée au centre sans être déformée. */
body .mat-atl-hero__inner { align-items: start; }
body .mat-atl-hero__media img:not(.mat-atl-hero__deco),
body .mat-atl-hero__media-placeholder {
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: center;
}
/* Haut de la photo aligné sur le haut du titre. */
body .mat-atl-hero__content { padding-top: 0; }
body .mat-atl-hero__title { margin-top: 0; }

/* Décors : la fleur partait à 28px hors du cadre, donc à -4px de l'écran à
   1440 (rognée par le `overflow-x: clip` du héros), et la tige à -24px. Ils
   restent à cheval sur l'angle de la photo, mais dans la gouttière. */
body .mat-atl-hero__deco--tl { top: -22px; left: -14px; width: 64px; }
body .mat-atl-hero__deco--br { bottom: 24px; right: -12px; width: 56px; }

/* --- Encart pratique : pictos homogènes ----------------------------------- */
/* Avant : un filet vertical traversait la colonne des pictos, un tiret
   précédait le téléphone, les pictos (20px dans une boîte de 26) n'étaient
   pas alignés avec celui du téléphone (24px, autre colonne), et une ligne
   sans picto se décalait de 20px. Désormais : une seule colonne de pastilles
   blanches de 32px, même taille de picto partout, téléphone compris. */
body .mat-atl-infos::before,
body .mat-atl-infos__tel::before { display: none; }

body .mat-atl-infos { gap: 16px; }
body .mat-atl-infos__list { padding-left: 0; gap: 10px; }

body .mat-atl-infos__item,
body .mat-atl-infos__item--ico {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-left: 0;
}
body .mat-atl-infos__ico,
body .mat-atl-infos__tel-icon {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	margin-top: -2px; /* centre la pastille sur la 1re ligne (18px x 1.55 = 28px) */
	border-radius: 50%;
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
body .mat-atl-infos__ico svg,
body .mat-atl-infos__tel-icon svg {
	display: block;
	width: 18px;
	height: 18px;
}
body .mat-atl-infos__text { flex: 1; min-width: 0; }

/* Ligne sans picto choisi : une puce dans la même colonne, pour que le
   texte reste aligné sur celui des lignes à picto. */
body .mat-atl-infos__item:not(.mat-atl-infos__item--ico)::before {
	content: "";
	flex: 0 0 32px;
	height: 28px;
	background: radial-gradient(circle, var(--mat-rose-blush, #9E5B5C) 0 4px, transparent 4.5px);
}

body .mat-atl-infos__tel {
	padding-left: 0;
	gap: 12px;
	align-items: center;
}
body .mat-atl-infos__tel-icon { margin-top: 0; }

/* Encart sans aucune information saisie : il ne s'affichait que comme un
   bandeau rose vide (pages Allaitement, Autohypnose, Bonapace, Portage…).
   Champ vide = élément absent. */
body .mat-atl-infos:not(:has(li)):not(:has(.mat-atl-infos__tel)) { display: none; }

@media (max-width: 1024px) {
	body .mat-atl-hero__media img:not(.mat-atl-hero__deco),
	body .mat-atl-hero__media-placeholder { height: auto; }
}
@media (max-width: 720px) {
	body .mat-atl-hero__media img:not(.mat-atl-hero__deco),
	body .mat-atl-hero__media-placeholder { height: auto; }
	body .mat-atl-infos { padding: 22px 20px; }
	body .mat-atl-infos__ico,
	body .mat-atl-infos__tel-icon { margin-top: -4px; } /* 16px x 1.55 = 25px */
	body .mat-atl-infos__item:not(.mat-atl-infos__item--ico)::before { height: 25px; }
	body .mat-atl-hero__deco--tl { left: -10px; width: 54px; }
	body .mat-atl-hero__deco--br { right: -8px; width: 46px; }
}