/* =========================================================================
   COMPOSANTS PARTAGÉS GABARITS ↔ BLOCS (23/09/2026)
   -------------------------------------------------------------------------
   CSS des éléments des gabarits « Atelier » et « Consultation spécialisée »
   devenus des blocs réutilisables (demande de Marie KUSY du 23/09) :
     1. carte à sur-titre + titre + 2 colonnes (.mat-atl-obj__card, .mat-cs-cadre__card)
     2. encart pratique / rendez-vous          (.mat-atl-infos, .mat-cs-rdv)
     3. bandeau d'information                   (.mat-cs-niveau__card)
     4. galerie en diaporama                    (.mat-atl-gal__*)
     5. tuiles de renvoi                        (.mat-related)
     6. titre centré + texte                    (.mat-cs-pill, .mat-cs-h2, .mat-cs-principes__desc)
   Markup : inc/composants-pages.php (une fonction par élément, appelée par
   les gabarits ET par les blocs). Blocs : inc/block-reutilisables.php.

   🔑 Ces règles vivaient dans `maternite.css` (atelier, tuiles) et dans le
   <style> en ligne du gabarit consultation. Elles sont ici, telles quelles,
   pour deux raisons : un bloc posé sur une page standard n'avait pas le CSS
   du gabarit consultation, et l'éditeur de blocs ne charge pas
   `maternite.css`. Ce fichier est servi sur tout le site (juste après
   `maternite.css`, donc même cascade qu'avant) ET dans l'éditeur
   (`add_editor_style`, préfixé `.editor-styles-wrapper` par WordPress).
   Les variables portent une valeur de repli : l'éditeur ne définit pas
   `--mat-bleu-fonce`. Mêmes valeurs que la palette de `maternite.css`.
   ========================================================================= */

/* ---- 2a. Encart pratique, variante atelier (ex-maternite.css) ---------- */
/* --- Carte infos (hero) --------------------------------------------------- */
.mat-atl-infos {
	background: var(--mat-rose-clair, #FFF5F3);
	border-radius: 30px;
	padding: 28px 36px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	position: relative;
}
.mat-atl-infos::before {
	content: "";
	position: absolute;
	left: 36px;
	top: 22px;
	bottom: calc(50% + 8px);
	width: 1px;
	background: var(--mat-bleu-fonce, #14446B);
	opacity: 0.7;
}
.mat-atl-infos__list {
	list-style: none;
	padding: 0 0 0 20px;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.mat-atl-infos__item {
	color: var(--mat-bleu-fonce, #14446B);
	font-family: 'Open Sans', sans-serif;
	font-size: 18px;
	line-height: 1.55;
}
.mat-atl-infos__label { font-weight: 600; }
.mat-atl-infos__value { font-weight: 700; }

/* Pictos dans l'encart rose (retours client 15/06) */
.mat-atl-infos__item--ico {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-left: -20px; /* compense le padding-left de la liste pour aligner le picto */
}
.mat-atl-infos__ico {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	margin-top: 1px;
}
.mat-atl-infos__ico svg { display: block; }
.mat-atl-infos__item--ico .mat-atl-infos__text { flex: 1; min-width: 0; }

.mat-atl-infos__tel {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-left: 20px;
	position: relative;
}
.mat-atl-infos__tel::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 12px;
	height: 1px;
	background: var(--mat-bleu-fonce, #14446B);
	opacity: 0.7;
}
.mat-atl-infos__tel-icon { display: inline-flex; }
.mat-atl-infos__tel-link {
	color: var(--mat-bleu-fonce, #14446B);
	font-family: 'Open Sans', sans-serif;
	font-size: 20px;
	font-weight: 700;
	text-decoration: none;
}
.mat-atl-infos__tel-link:hover { text-decoration: underline; }

.mat-atl-obj__card {
	background: #fff;
	border: 1px solid #FFD6CF;
	border-radius: 30px;
	box-shadow: 0 2px 86px rgba(232,232,232,0.28);
	padding: 36px;
}
.mat-atl-obj__pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #fff;
	border: 1px solid var(--mat-rose-blush, #9E5B5C);
	border-radius: 20px;
	padding: 4px 12px;
	color: var(--mat-rose-blush, #9E5B5C);
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	font-weight: 600;
	margin: 0 0 24px;
}
.mat-atl-obj__pill-dot {
	width: 8px;
	height: 8px;
	background: var(--mat-rose-blush, #9E5B5C);
	border-radius: 999px;
}
.mat-atl-obj__title {
	color: var(--mat-rose-blush, #9E5B5C);
	font-family: 'Open Sans', sans-serif;
	font-size: 24px;
	font-weight: 700;
	margin: 0 0 24px;
	line-height: 1.25;
}
.mat-atl-obj__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
}
.mat-atl-obj__col {
	color: var(--mat-bleu-fonce, #14446B);
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.46;
}
.mat-atl-obj__col--bold { font-weight: 700; }
.mat-atl-obj__col p { margin: 0 0 12px; }
.mat-atl-obj__col p:last-child { margin-bottom: 0; }
.mat-atl-obj__col ul { padding-left: 18px; margin: 0; }

.mat-atl-gal__title {
	color: var(--mat-bleu-fonce, #14446B);
	font-family: 'Open Sans', sans-serif;
	font-size: 28px;
	font-weight: 600;
	text-align: center;
	margin: 0 0 32px;
}
.mat-atl-gal__title strong { font-weight: 700; }
.mat-atl-gal__slider { position: relative; }
.mat-atl-gal__viewport {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.mat-atl-gal__viewport::-webkit-scrollbar { display: none; }
.mat-atl-gal__track {
	list-style: none;
	display: flex;
	gap: 20px;
	padding: 0 0 4px;
	margin: 0;
}
.mat-atl-gal__item {
	flex: 0 0 calc((100% - 40px) / 3);
	scroll-snap-align: start;
}
.mat-atl-gal__item img {
	width: 100%;
	height: 300px;
	object-fit: cover;
	border-radius: 14px;
	display: block;
}
.mat-atl-gal__nav {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 24px;
}
.mat-atl-gal__btn {
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	line-height: 0;
}
.mat-atl-gal__btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ---- 2b / 1b / 3 / 6. Éléments de la consultation (ex-<style> du gabarit) */
/* Carte RDV */
.mat-cs-rdv { background:var(--mat-rose-clair, #FFF5F3); border-radius:30px; padding:36px 40px; display:flex; flex-direction:column; gap:18px; }
.mat-cs-rdv__row { display:flex; align-items:center; gap:16px; }
.mat-cs-rdv__icon { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; }
.mat-cs-rdv__icon--calendar svg { color:var(--mat-bleu-fonce, #14446B); }
.mat-cs-rdv__sep { width:1px; height:48px; background:var(--mat-bleu-fonce, #14446B); opacity:.5; }
.mat-cs-rdv__block { display:flex; flex-direction:column; gap:2px; }
.mat-cs-rdv__label { color:var(--mat-bleu-fonce, #14446B); font-weight:700; font-size:18px; }
.mat-cs-rdv__tel { color:var(--mat-bleu-fonce, #14446B); font-weight:700; font-size:20px; text-decoration:none; }
.mat-cs-rdv__tel:hover { text-decoration:underline; }
.mat-cs-rdv__horaires { display:flex; flex-direction:column; gap:2px; margin-left:42px; }
.mat-cs-rdv__horaires-head { display:inline-flex; align-items:center; gap:8px; }
.mat-cs-rdv__horaires-dot { width:12px; height:12px; border-radius:50%; background:#00C431; }
.mat-cs-rdv__horaires-title { color:var(--mat-bleu-fonce, #14446B); font-weight:600; font-size:18.5px; }
.mat-cs-rdv__horaires-body { color:var(--mat-bleu-fonce, #14446B); font-weight:600; font-size:16px; line-height:1.4; }
.mat-cs-rdv__doctolib { display:inline-flex; align-items:center; gap:6px; color:var(--mat-bleu-fonce, #14446B); font-weight:700; font-size:16px; text-decoration:underline; }
.mat-cs-rdv__note { color:var(--mat-bleu-fonce, #14446B); font-style:italic; font-weight:600; font-size:15px; line-height:1.4; margin:6px 0 0; }

/* Bandeau niveau */
.mat-cs-niveau { padding:32px 0 0; }
.mat-cs-niveau__card { background:#EFF6F7; border-radius:30px; padding:32px 48px; text-align:center; color:var(--mat-bleu-fonce, #14446B); font-size:16px; line-height:1.45; }
.mat-cs-niveau__card a { color:var(--mat-rose-blush, #9E5B5C); font-weight:700; text-decoration:underline; }
.mat-cs-niveau__card strong { font-weight:700; }
.mat-cs-niveau__card em { font-style:italic; font-weight:600; }

/* Pill + H2 commun */
.mat-cs-pill { display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid var(--mat-rose-blush, #9E5B5C); border-radius:20px; padding:4px 12px; color:var(--mat-rose-blush, #9E5B5C); font-size:15px; font-weight:600; }
.mat-cs-pill__dot { width:8px; height:8px; border-radius:50%; background:var(--mat-rose-blush, #9E5B5C); }
.mat-cs-h2 { color:var(--mat-rose-blush, #9E5B5C); font-size:24px; font-weight:700; text-align:center; margin:18px 0 14px; }
.mat-cs-principes__desc { color:var(--mat-bleu-fonce, #14446B); font-size:16px; font-weight:400; line-height:1.6; max-width:884px; margin:0 auto; text-align:left; }
.mat-cs-principes__desc p { margin:0 0 14px; }
.mat-cs-principes__desc img { max-width:100%; height:auto; border-radius:18px; margin:8px 0; }
.mat-cs-cadre__card { background:#fff; border:1px solid #FFD6CF; border-radius:30px; padding:36px; box-shadow:0 2px 86px rgba(232,232,232,.28); }
.mat-cs-cadre__title { color:var(--mat-rose-blush, #9E5B5C); font-size:24px; font-weight:700; margin:0 0 24px; }
.mat-cs-cadre__cols { display:grid; grid-template-columns:1fr 1fr; gap:48px; }
/* Graisse maîtrisée par l'éditeur (<strong>) — plus de poids forcé sur les colonnes (retour client) */
.mat-cs-cadre__col { color:var(--mat-bleu-fonce, #14446B); font-size:16px; line-height:1.55; font-weight:400; }
.mat-cs-cadre__col--bold { font-weight:400; }
.mat-cs-cadre__col strong { font-weight:700; }
.mat-cs-cadre__col p { margin:0 0 14px; }
.mat-cs-cadre__col img { max-width:100%; height:auto; border-radius:18px; margin:8px 0; }
.mat-cs-cadre__col a { color:var(--mat-bleu-fonce, #14446B); text-decoration:underline; }

/* ---- 5. Tuiles de renvoi (ex-maternite.css) --------------------------- */
/* --- Ponts entre pages : « Ces pages pourraient vous interesser » ---------
   Rendu en bas des gabarits « Page standard » quand la metabox est remplie.
   Rien n'est affiche tant qu'aucune page n'est choisie : les pages existantes
   sont donc strictement inchangees. */
/* --- « Ces pages pourraient vous intéresser » -----------------------------
   Refonte du 14/08/2026 (retour Marie KUSY + capture) : tuiles PLEINES
   rose-blush, picto-fleur du menu, motif végétal à droite de la section.
   Le markup vit dans `inc/metaboxes-pages.php`
   (`maternite_render_related_pages`), qui détaille les 7 points demandés. */
.mat-related {
	position: relative;
	margin: 0 0 80px;
}
/* Motif végétal à droite, hors du flux : il déborde volontairement sous la
   rangée de tuiles et ne doit jamais pousser le contenu ni creer de scroll
   horizontal — d'où `overflow` géré par un conteneur clippé. */
.mat-related__decor {
	position: absolute;
	right: -18px;
	top: -34px;
	width: 132px;
	pointer-events: none;
	z-index: 0;
}
.mat-related__decor img {
	display: block;
	width: 100%;
	height: auto;
	transform: scaleX(-1);
}
.mat-related__title {
	position: relative;
	z-index: 1;
	margin: 0 0 28px;
	padding-right: 150px; /* laisse la place au motif */
	font-family: var(--mat-font-sans, "Open Sans", system-ui, sans-serif);
	font-size: 24px;
	font-weight: 700;
	/* Bicolore : le rose vient du shortcode `[rose]…[/rose]` saisi dans le
	   champ, le reste est bleu foncé (14/08/2026). */
	color: var(--mat-bleu-fonce, #14446B);
}
/* Retro-compat : le modele « Consultation specialisee » stocke son titre en
   HTML (<strong> = rose), anterieur au shortcode [rose]. Les deux syntaxes
   donnent donc le meme rendu. */
.mat-related__title strong,
.mat-related__title em {
	color: var(--mat-rose-blush, #9E5B5C);
	font-style: normal;
	font-weight: 700;
}
.mat-related__grid {
	position: relative;
	z-index: 1;
	list-style: none;
	margin: 0;
	padding: 0;
	/* 3 colonnes FIXES, et pas `auto-fit` : avec une ou deux tuiles, `auto-fit`
	   les étirait sur toute la largeur. « Si on ne met qu'une ou deux pages,
	   les tuiles ne prennent pas toute la largeur mais restent bien sur une ou
	   deux colonnes » (14/08/2026). */
	grid-template-columns: repeat(3, 1fr);
	/* Deux rangées partagées : le bandeau rose de toutes les tuiles se cale sur
	   la même hauteur, quel que soit le nombre de lignes du titre (« uniformise
	   les hauteurs de titres », 22/09/2026). `subgrid` fait descendre cette
	   grille jusqu'au `<a>`, à travers le `<li>`. */
	grid-template-rows: auto 1fr;
	display: grid;
	gap: 18px;
	/* Gouttiere reservee au motif vegetal : sans elle, la 3e tuile passe sous
	   la branche (mesure du 21/09, page « Cytomegalovirus »). */
	padding-right: 150px;
}
.mat-related__grid > li {
	display: grid;
	grid-row: span 2;
	grid-template-rows: subgrid;
}
.mat-related__pill {
	/* Carte à DEUX ÉTAGES : bandeau rose-blush (picto, libellé, flèche) puis
	   corps blanc pour l'extrait (« il faut un fond blanc pour les extraits »,
	   Thomas, 22/09/2026). La tuile pleine du 14/08 tenait tant qu'il n'y avait
	   que le libellé ; avec un texte, elle demandait trois lignes de blanc sur
	   du rose, et c'est le contraste qui s'y perdait. */
	display: grid;
	grid-row: span 2;
	grid-template-rows: subgrid;
	height: 100%;
	box-sizing: border-box;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--mat-rose-outline, #FFD6CF);
	border-radius: var(--mat-card-radius, 20px);
	color: var(--mat-bleu-fonce, #14446B);
	text-decoration: none;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.mat-related__head {
	display: flex;
	align-items: center; /* libellé sur 2 lignes : centré sur la hauteur */
	gap: 10px;
	min-height: 56px;
	padding: 12px 20px;
	background: var(--mat-rose-blush, #9E5B5C);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
}
.mat-related__pill:hover,
.mat-related__pill:focus-visible {
	text-decoration: none;
	box-shadow: 0 8px 22px rgba(158, 91, 92, 0.22);
	transform: translateY(-2px);
}
.mat-related__pill:hover .mat-related__head,
.mat-related__pill:focus-visible .mat-related__head {
	background: #8A4B4C; /* rose blush assombri : 6,6:1 sous le libellé blanc */
}
.mat-related__icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	object-fit: contain;
}
/* Repli pour un moteur sans `subgrid` : le bandeau réserve deux lignes, donc
   les tuiles restent alignées tant qu'aucun titre n'en demande trois. */
.mat-related__label { flex: 1; min-height: 2.6em; display: flex; align-items: center; }
.mat-related__arrow {
	flex-shrink: 0;
	/* 22x18 au lieu de 18x14 : « grossir un peu la flèche à droite ». */
	width: 22px;
	height: 18px;
}
.mat-related__excerpt {
	display: block;
	padding: 14px 20px 16px;
	color: var(--mat-bleu-fonce, #14446B);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
}

@media (max-width: 900px) {
	.mat-related__grid { grid-template-columns: repeat(2, 1fr); padding-right: 110px; }
	.mat-related__title { padding-right: 110px; }
	.mat-related__decor { width: 96px; top: -24px; }
}
@media (max-width: 600px) {
	.mat-related__grid { grid-template-columns: 1fr; padding-right: 0; }
	.mat-related__title { padding-right: 0; }
	.mat-related__decor { display: none; }
}

/* ---- Responsive des éléments ci-dessus (mêmes seuils qu'avant) -------- */
@media (max-width: 1024px) {
	.mat-atl-obj__cols { grid-template-columns: 1fr; gap: 24px; }
	.mat-atl-gal__item { flex-basis: calc((100% - 20px) / 2); }
	.mat-atl-gal__item img { height: 240px; }
}
@media (max-width: 720px) {
	.mat-atl-infos { padding: 22px 24px; }
	.mat-atl-infos::before { display: none; }
	.mat-atl-infos__list { padding-left: 0; }
	.mat-atl-infos__tel { padding-left: 0; }
	.mat-atl-infos__tel::before { display: none; }
	.mat-atl-infos__item { font-size: 16px; }
	.mat-atl-obj__card { padding: 24px; }
	.mat-atl-obj__title { font-size: 20px; }
	.mat-atl-gal__item { flex-basis: 100%; }
	.mat-atl-gal__item img { height: 220px; }
	.mat-atl-gal__title { font-size: 22px; }
}
@media (max-width: 720px) {
		.mat-cs-cadre__cols { grid-template-columns:1fr; gap:24px; }
		.mat-cs-rdv { padding:24px 20px; }
		.mat-cs-rdv__horaires { margin-left:0; }
		.mat-cs-niveau__card { padding:24px; }
}

/* =========================================================================
   ENVELOPPES DES BLOCS (inc/block-reutilisables.php)
   -------------------------------------------------------------------------
   Le gabarit pose ses éléments dans des sections à padding fixe ; le bloc,
   lui, vit dans le fil du contenu : il ne reçoit qu'une marge verticale.
   ========================================================================= */
/* `line-height: 1.5` : celui du corps de page, dont héritent ces éléments dans
   les gabarits. La colonne éditoriale impose 1.65, qui gonflait les titres
   (36 → 39,6px) et les pastilles sans valeur propre (mesuré le 23/09). */
.mat-blk { margin: 32px 0; line-height: 1.5; }
.mat-blk > :first-child { margin-top: 0; }
.mat-blk > :last-child { margin-bottom: 0; }

/* 6. Titre centré + texte : le centrage était porté par `.mat-cs-principes`. */
.mat-blk--principes { text-align: center; }

/* 5. Tuiles : la marge basse de `.mat-related` (80px) est celle d'une fin de
   page ; dans le fil du contenu, la marge du bloc suffit. */
.mat-blk--renvois .mat-related { margin-bottom: 0; }

/* 4. Galerie : les boutons sont des <button>, que l'éditeur habille. */
.editor-styles-wrapper .mat-blk--galerie .mat-atl-gal__btn { background: transparent; }

/* 2. Encart, variante bouton : le lien de prise de RDV en pastille vert-bleu
   (même composant que « Prendre contact » du gabarit Atelier). */
.mat-cs-rdv__row--btn { padding-left: 0; }
.mat-cs-rdv__btn { text-decoration: none; }

/*
 * PLEINE LARGEUR. Les règles d'alignement de `maternite.css` étirent le bloc
 * d'un bord à l'autre de la fenêtre. Sur une page À SOMMAIRE, un contenu
 * étalé passerait sur la colonne du sommaire `sticky` (défaut constaté le
 * 21/09 sur le déroulé) : le contenu de ces blocs revient donc TOUJOURS dans
 * la colonne de lecture, en reprenant les distances aux bords mesurées par
 * `maternite.js` (`--mat-cl` / `--mat-cr`). Sans JS, les deux valent 0 et
 * le bloc reste simplement dans sa colonne.
 */
.mat-blk.alignfull {
	box-sizing: border-box;
	padding-left: var(--mat-cl, 0px);
	padding-right: var(--mat-cr, 0px);
}