/* ============================================================
   « Menu du haut » commun (25/09/2026) : barre MENU + les 4 grosses tuiles,
   exactement comme sur la messagerie (règles reprises de mlive.css).
   À charger sur chaque page client refaite, après la feuille style-*.css de la page.
   Téléphone : plus de colonne de 370 px ni de cadre autour de la page, et les
   4 tuiles se partagent la largeur à parts égales.
   ============================================================ */
@media (max-width: 768px) {
	.content { width: 100%; margin: 0; }
	.content_page { width: 100%; }

	.content_page_gauche {
		width: 100%;
		margin: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		background: transparent;
	}

	.content_head {
		display: flex;
		align-items: stretch;
		gap: 10px;
		box-sizing: border-box;
		width: 100%;
		padding: 0 8px;
		margin: 0 0 20px;
		border-bottom: 0;
	}

	.content_head > a  { flex: 1 1 0; min-width: 0; }
	.content_head > br { display: none; }

	.content_head_icon_1,
	.content_head_icon_2,
	.content_head_icon_3,
	.content_head_icon_4,
	.content_head_icon_5 {
		box-sizing: border-box;
		width: 100%;
		margin: 0;
		float: none;
	}

	.content_case {
		box-sizing: border-box;
		width: 100%;
		padding: 0 14px 10px;
		margin: 0;
	}
}

/* Ordinateur (règle d'Alex, 25/09/2026) : plus de double cadre autour du contenu, plus de
   trait sous les tuiles, et les tuiles alignées en haut sur la case de gauche (profil). */
.content_page_gauche { border: 0; background: transparent; box-shadow: none; }
.content_head { border-bottom: 0; background: transparent; }
/* Le corps de la page prend la couleur du fond du site (#fbf8fb) au lieu d'un bloc plus clair (#fdfcfe). */
.content_case { background: transparent; }
@media (min-width: 1024px) {
	.content_page_gauche { padding-top: 0; }
	.content_head { padding-top: 0; padding-bottom: 22px; }
	.content_case { padding-top: 6px; }
}

/* Bandeau « Nouveau message du support » (25/09/2026), au-dessus du menu du haut, sur les pages refaites. */
.ml-alerte-support { display: flex; align-items: center; gap: 12px; box-sizing: border-box; margin: 0 0 14px; padding: 10px 12px; border-radius: 16px;
	background: linear-gradient(135deg, #fff1f6, #fde4ee); border: 1px solid #f7cfdf; color: #5d445d; text-decoration: none; box-shadow: 0 4px 14px rgba(208, 25, 81, 0.12);
	animation: ml-alerte-arrive .5s ease-out both; }
.ml-alerte-support-icone { flex: 0 0 auto; position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #ffffff; font-size: 20px; }
.ml-alerte-support-icone:after { content: ""; position: absolute; top: 1px; right: 1px; width: 10px; height: 10px; border: 2px solid #ffffff; border-radius: 50%; background: #e70e47; animation: ml-alerte-point 1.6s ease-in-out infinite; }
.ml-alerte-support-texte { flex: 1; min-width: 0; }
.ml-alerte-support-texte b { display: block; color: #d01951; font-size: 14.5px; }
.ml-alerte-support-texte small { display: block; color: #7e5f7e; font-size: 12.5px; }
.ml-alerte-support-bt { flex: 0 0 auto; padding: 7px 16px; border-radius: 999px; background: #d01951; color: #ffffff; font-size: 13px; font-weight: bold; }
@keyframes ml-alerte-arrive { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes ml-alerte-point { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } }
@media (max-width: 768px) { .ml-alerte-support { margin: 0 8px 14px; } }

/* Téléphone / tablette (26/09/2026, demande d'Alex) : le bouton MENU passe DANS le bandeau du haut, à gauche,
   en blanc ; le logo se décale un peu à droite ; la barre MENU sous le bandeau disparaît (place gagnée). */
@media (max-width: 1023px) {
	#header { height: 56px; }
	.header_logo { height: 56px; padding-top: 0; background-position: calc(50% + 22px) center; }
	.content_menu_tel { position: absolute; top: 0; left: 0; z-index: 3; width: auto; height: 56px; padding: 0; margin: 0; }
	.content_menu_tel > a { display: flex; align-items: center; gap: 8px; height: 100%; padding: 0 14px; text-decoration: none; -webkit-tap-highlight-color: transparent; }
	.content_menu_tel > br { display: none; }
	.content_menu_tel_1, .content_menu_tel_2 { width: auto; float: none; padding: 0; }
	.content_menu_tel_1 { display: flex; }
	.content_menu_tel_2 { color: #ffffff; font-size: 12.5px; font-weight: bold; letter-spacing: 1.5px; transform: none; text-shadow: 0 1px 3px rgba(40, 15, 40, 0.45); }
	.burger-icon span { width: 22px; height: 2.5px; margin: 4.5px 0; border-radius: 2px; background-color: #ffffff; box-shadow: 0 1px 2px rgba(40, 15, 40, 0.35); }
	.sidenav { top: 56px; }
	.content_page { padding-top: 12px; }
}

/* ============================================================
   Menu latéral (include-menu-lateral.php, 26/09/2026, retours d'Alex).
   Même dessin sur téléphone et sur PC ; seul le fonctionnement change :
   téléphone = tiroir qui s'ouvre avec MENU ; PC = colonne toujours visible à gauche.
   ============================================================ */
.ml-pc-seul { display: none !important; }            /* ancienne colonne PC, plus affichée */
.ml-t-voile[hidden] { display: none !important; }

/* ---------- dessin commun */
.ml-t-tete { display: flex; align-items: center; gap: 12px; margin: 0 0 4px; padding: 8px; border-radius: 18px; background: linear-gradient(135deg, #fff1f6, #fde4ee); border: 1px solid #f7cfdf; }
.ml-t-tete img { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2.5px solid #ffffff; box-shadow: 0 2px 8px rgba(208, 25, 81, 0.2); }
.ml-t-tete > div { flex: 1 1 auto; min-width: 0; }
.ml-t-tete b { display: block; color: #d01951; font-size: 16px; }
.ml-t-tete b i { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 2px; border-radius: 50%; background: #d01951; color: #ffffff; font-size: 10px; font-style: normal; vertical-align: 1px; }
.ml-t-tete small { display: block; color: #7e5f7e; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-t-fermer { display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; color: #7e597e; cursor: pointer; }

.ml-t-titre { margin: 12px 10px 4px; color: #b39ab3; font-size: 11px; font-weight: bold; letter-spacing: 1.2px; text-transform: uppercase; }
.ml-t-lien { display: flex; align-items: center; gap: 12px; margin: 1px 0; padding: 5px 8px; border-radius: 14px; color: #5d445d !important; font-size: 15px; text-decoration: none !important;
	-webkit-tap-highlight-color: transparent; transition: background .15s ease; }
.ml-t-lien:active, .ml-t-lien:hover { background: #fbf8fb; }
.ml-t-ico { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; background: #f6eef5; font-size: 16px; }
.ml-t-txt { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-t-ici { background: #fdf2f7; color: #d01951 !important; font-weight: bold; }
.ml-t-ici .ml-t-ico { background: #ffffff; box-shadow: 0 2px 6px rgba(208, 25, 81, 0.15); }
.ml-t-pastille { flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; background: #f3e9f3; color: #7e597e; font-size: 12px; font-weight: bold; }
.ml-t-point { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: #d01951; box-shadow: 0 0 0 3px #fde4ee; }

/* « Ajouter des crédits » mis en avant : ligne verte comme les boutons de paiement */
.ml-t-credits { margin: 4px 0; background: linear-gradient(135deg, #eafaf1, #d9f5e5); border: 1px solid #b9e8cc; color: #1f7a45 !important; font-weight: bold; }
.ml-t-credits .ml-t-ico { background: #ffffff; box-shadow: 0 2px 6px rgba(31, 157, 87, 0.18); }
.ml-t-plus { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%;
	background: linear-gradient(135deg, #2fbf71, #1f9d57); color: #ffffff; font-size: 18px; font-weight: bold; line-height: 1; box-shadow: 0 3px 8px rgba(31, 157, 87, 0.35); }
.ml-t-credits:active, .ml-t-credits:hover { background: linear-gradient(135deg, #dff7ea, #cdf0dc); }

.ml-t-bouton { display: block; margin: 18px 4px 0; padding: 13px; border-radius: 999px; background: linear-gradient(135deg, #2fbf71, #1f9d57); box-shadow: 0 6px 16px rgba(31, 157, 87, 0.3);
	color: #ffffff !important; font-size: 15px; font-weight: bold; text-align: center; text-decoration: none !important; }
.ml-t-connexion { display: block; margin-top: 12px; color: #9c7f9c !important; font-size: 13.5px; text-align: center; text-decoration: none !important; }
.ml-t-connexion b { color: #d01951; }

/* ---------- téléphone / tablette : tiroir */
@media (max-width: 1023px) {
	.sidenav > .close { display: none !important; }
	/* hauteur = celle du menu (30/09/2026, Alex : pas de blanc inutile sous « Le support », on voit la page derrière) ;
	   s'il est plus grand que l'écran (petit téléphone, paysage), il s'arrête en bas et défile */
	.sidenav.ml-tiroir { position: fixed; top: 0 !important; left: 0 !important; bottom: auto; z-index: 10001; box-sizing: border-box; width: min(300px, 84vw); height: auto; max-height: 100vh; max-height: 100dvh;
		margin: 0; padding: 12px 12px 18px; overflow-y: auto; -webkit-overflow-scrolling: touch; border: 0; border-radius: 0 24px 24px 0; background: #ffffff;
		box-shadow: 8px 0 34px rgba(40, 15, 40, 0.22); transform: translateX(-110%); transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
	.sidenav.ml-tiroir.active { transform: translateX(0); }
	.ml-t-voile { position: fixed; inset: 0; z-index: 10000; background: rgba(40, 15, 40, 0.45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: ml-t-fondu .25s ease; }
	@keyframes ml-t-fondu { from { opacity: 0; } to { opacity: 1; } }
	html.ml-t-ouvert, html.ml-t-ouvert body { overflow: hidden; }
	.ml-t-tete { margin-right: 46px; }                /* la croix est à côté du cadre rose, pas dedans */
	.ml-t-fermer { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; background: #f6eef5; }
}

/* ---------- PC : même dessin, en colonne toujours visible (pas de croix, pas de fond assombri) */
@media (min-width: 1024px) {
	.ml-t-voile, .ml-t-fermer, .sidenav > .close { display: none !important; }
	.content_page { width: 758px; }                   /* 1020 = 244 (menu) + 18 + 758 ; la colonne de contenu fait 750 */
	.sidenav.ml-tiroir { box-sizing: border-box; width: 244px; padding: 10px 8px 12px; border-radius: 20px; background: #ffffff; border: 1px solid #f3e9f3; box-shadow: 0 3px 12px rgba(126, 89, 126, 0.06); }
	.ml-t-tete { gap: 10px; }
	.ml-t-lien { gap: 10px; font-size: 14px; }
	.ml-t-titre { margin: 12px 8px 4px; }
	.ml-t-bouton { margin: 14px 2px 0; padding: 11px; font-size: 14px; }
	.ml-t-pastille, .ml-t-plus { display: none; }        /* PC : ni nombre de crédits ni « + » (Alex : le texte ne rentrait pas) */
}

/* Phrase du menu (mlive/salut.php, 01/10/2026) : un lien garde la même coupure « … » que le texte, jamais de débordement */
.ml-t-tete small a { color: #d01951 !important; font-weight: normal; text-decoration: none !important; }   /* rien en gras (Alex) */
.ml-t-tete small { max-width: 100%; }