/* SEMpublique.css — feuille unique pour les pages PUBLIQUES du site (visiteur non connecté)  */

/* ===================== 1. Socle repris de SEM3.css (usage réel sur ces pages uniquement) ===================== */

@font-face { font-family: Inter; src: url(font/Inter-Regular.ttf); font-weight: normal; }
@font-face { font-family: Inter; src: url(font/Inter-Bold.ttf); font-weight: bold; }
@font-face { font-family: Inter; src: url(font/Inter-ExtraBold.ttf); font-weight: 800; }

html, body { height: auto; margin: 0; padding: 0; }
body { font-family: Inter, Helvetica, Arial, sans-serif; } /* base : évite le serif par défaut sur les éléments sans classe (ex. .summary/.total/.users des avis) */
form { margin: 0; }

.aligncenter { text-align: center; }
.floatleft { float: left; }
.ClearBoth { clear: both; }
.DisplayNone { display: none; }
.Bold { font-weight: bold; }
.FondBlanc { background-color: #ffffff; }
.color_FFFFFF { color: #ffffff; }
.color_red { color: red; }
.BackColorPP { background-color: #f2d6d6; }

.center800px { margin-left: auto; margin-right: auto; max-width: 800px; }
.center1300px { margin-left: auto; margin-right: auto; max-width: 1300px; }
.width20pc { width: 20%; }
.height20px { height: 20px; }

.pad10px { padding: 10px; }
.pad30px { padding: 30px; }
.padtop10 { padding-top: 10px; }
.padtop20 { padding-top: 20px; }
.padbottom20 { padding-bottom: 20px; }
.padbottom50 { padding-bottom: 50px; }
.padleft5 { padding-left: 5px; }
.padright10 { padding-right: 10px; }

.ptl { font-size: 11px; font-family: Inter, Verdana, Arial; }
.normal, h3 { font-size: 14px; font-family: Inter, Verdana, Arial; }
.normal2 { font-size: 15px; font-family: Inter, Verdana, Arial; }
.normal25 { font-size: 25px; font-family: Inter, Verdana, Arial; }

/* bandeau presse + badge "depuis 21 ans" : couleurs neutralisées en mode sombre plus bas (section 2) */
.handsIndex { width: 100%; background-color: #EFEBE7; background-image: url('images/hands.jpg'); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; }
.DivParleIndex { text-align: center; float: left; padding-left: 40px; height: 60px; }
.ImgCouronneIndex { width: 100px; height: 102px; padding-left: 30px; padding-right: 30px; float: left; transition: width 3s, height 3s; }

/* avis clients (Notation) */
.flex { display: flex; }
.flex.row { flex-direction: row; }
.contents-vertically-centered { display: flex; flex-direction: column; justify-content: center; }
.NoteStar { flex-wrap: nowrap; overflow: scroll; z-index: 10; margin-top: 0; padding-bottom: 64px; padding-left: max(20px, 10%); }
.NoteStar .DivAvis h3 { font-size: 20px; margin-bottom: 12px; flex: 0; line-height: normal; }
.NoteStar .summary { flex: 0 0 200px; }
.NoteStar .summary .total { font-weight: 700; }
.NoteStar .summary .total span { font-size: 48px; }
.NoteStar .DivAvis { display: flex; flex-direction: column; flex: 0 0 460px; width: 460px; max-width: 80%; box-shadow: 0 10px 30px rgba(163,166,177,.25); border-radius: 12px; margin-left: 30px; padding: 32px; background-color: #fff; }

/* ===================== 2. Couche moderne  : variables, mode sombre, classes MH- et features- ===================== */

:root {
	--mh-ink: #232833;
	--mh-ink-soft: #5b6270;
	--mh-muted: #8891a0;
	--mh-line: #dcdfe3;
	--mh-line-strong: #c5cad1;
	--mh-bg-soft: #f5f6f7;
	--mh-page-bg: #fafbfc;
	--mh-card-bg: #ffffff;
	--mh-primary: #2454c9;
	--mh-primary-dark: #1c3f9c;
	--mh-primary-tint: #eaf0fd;
	--mh-cta: #c8622a;
	--mh-cta-dark: #a84e1f;
	--mh-dark: #1f2530;
	--mh-dark-text: #ffffff;
	--mh-dark-text-soft: #c9ccd2;
}

@media (prefers-color-scheme: dark) {
	:root {
		--mh-ink: #eceef1;
		--mh-ink-soft: #b7bcc4;
		--mh-muted: #7b828f;
		--mh-line: #384150;
		--mh-line-strong: #4c5567;
		--mh-bg-soft: #181c24;
		--mh-page-bg: #12151b;
		--mh-card-bg: #1b202b;
		--mh-primary: #7fa0f2;
		--mh-primary-dark: #a9c0f7;
		--mh-primary-tint: #1b2338;
		--mh-cta: #e08a52;
		--mh-cta-dark: #f0a878;
		--mh-dark: #0c0e13;
		--mh-dark-text: #ffffff;
		--mh-dark-text-soft: #b6bac1;
	}
	body { background-color: #12151b; }
	.FondBlanc { background-color: var(--mh-card-bg) !important; }
}

body { background-color: var(--mh-page-bg); }
a { color: var(--mh-primary); text-decoration: none; }
a:hover { color: var(--mh-primary-dark); }

.MH-hero-row {
	max-width: 1300px;
	margin: 0 auto;
	padding: 64px 24px 40px;
	display: flex;
	flex-wrap: wrap;
	gap: 56px;
	align-items: flex-start;
	box-sizing: border-box;
}
.MH-hero-left { flex: 1 1 440px; min-width: 300px; display: flex; flex-direction: column; gap: 22px; }
.MH-hero-title {
	font-family: Inter, Helvetica, Arial, sans-serif;
	color: var(--mh-ink);
	font-size: 38px;
	font-weight: 800;
	line-height: 1.15;
	margin: 0;
	letter-spacing: -0.01em;
}
.MH-hero-sub {
	font-family: Inter, Helvetica, Arial, sans-serif;
	color: var(--mh-ink-soft);
	font-size: 17px;
	line-height: 1.5;
	max-width: 700px;
	margin: 0;
}
.MH-hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--mh-primary);
	font-family: Inter, Helvetica, Arial, sans-serif;
	font-size: 14px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 0;
	background: none;
	border-radius: 0;
	width: fit-content;
	margin: 0;
}
.MH-hero-badge::before {
	content: "";
	display: inline-block;
	width: 24px;
	height: 3px;
	border-radius: 2px;
	background-color: var(--mh-cta);
}
.MH-hero-badge-index {
	align-self: flex-start;
	background-color: var(--mh-primary-tint);
	color: var(--mh-primary);
	font-size: 13px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: normal;
	padding: 6px 12px;
	border-radius: 100px;
}
.MH-hero-badge-index::before { display: none; }
.MH-hero-cta-row { margin-top: 6px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.MH-hero-cta-note { font-family: Inter, Helvetica, Arial, sans-serif; font-size: 14px; color: var(--mh-muted); }

.MH-btn-primary {
	display: inline-block;
	background-color: var(--mh-cta);
	border: none !important;
	color: #ffffff !important;
	border-radius: 10px;
	box-shadow: none;
	font-family: Inter, Helvetica, Arial, sans-serif;
	font-weight: 700;
	font-size: 15.5px;
	letter-spacing: normal;
	box-sizing: border-box;
	text-align: center;
	text-decoration: none;
	padding: 10px 22px;
	cursor: pointer;
}
.MH-btn-primary:hover { background-color: var(--mh-cta-dark); }
.MH-btn-blue { background-color: var(--mh-card-bg) !important; color: var(--mh-primary) !important; border: 1px solid var(--mh-primary) !important; }
.MH-btn-blue:hover { background-color: var(--mh-primary-tint) !important; }
.MH-btn-lg { padding: 14px 28px; font-size: 16px; }
.MH-btn-block { display: block; width: 100%; padding: 10px 20px; }

.MH-login-col { flex: 0 0 340px; max-width: 100%; }
@media all and (max-width: 900px) { .MH-login-col { margin: 0 auto; } }
.MH-login-card {
	background-color: var(--mh-bg-soft);
	border: 1px solid var(--mh-line-strong);
	border-radius: 14px;
	box-shadow: 0 8px 30px rgba(0,0,0,0.06);
	padding: 22px;
}
.MH-login-title {
	font-family: Inter, Helvetica, Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: var(--mh-ink-soft);
	margin-bottom: 14px;
}
#formAcess { display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 150px; }
.MH-field-group { display: flex; flex-direction: column; }
.MH-field-label {
	display: block;
	font-family: Inter, Helvetica, Arial, sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: var(--mh-ink-soft);
	margin: 0 0 6px;
}
.MH-field-input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 9px 11px;
	border: 1px solid var(--mh-line);
	border-radius: 7px;
	font-family: Inter, Helvetica, Arial, sans-serif;
	font-size: 14px;
	color: var(--mh-ink);
	background-color: var(--mh-card-bg);
}
.MH-field-pass { position: relative; }
.MH-field-pass .MH-field-input { padding-right: 40px; }
.MH-field-pass #inputPass {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 9px 40px 9px 11px;
	border: 1px solid var(--mh-line);
	border-radius: 7px;
	font-family: Inter, Helvetica, Arial, sans-serif;
	font-size: 14px;
	color: var(--mh-ink);
	background-color: var(--mh-card-bg);
	outline: none;
}
.MH-field-eye {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	cursor: pointer;
}
.MH-checkbox-row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: Inter, Helvetica, Arial, sans-serif;
	font-size: 13.5px;
	color: var(--mh-ink-soft);
	margin: 0;
	cursor: pointer;
}
.MH-login-forgot {
	text-align: center;
	margin-top: 16px;
	font-family: Inter, Helvetica, Arial, sans-serif;
	font-size: 13px;
	color: var(--mh-muted);
}
.MH-login-forgot a { color: var(--mh-primary); }
.MH-login-waiting {
	text-align: center;
	font-family: Inter, Helvetica, Arial, sans-serif;
	font-weight: 700;
	color: var(--mh-ink);
	padding: 40px 0;
}

.MH-trust-strip {
	background-color: var(--mh-bg-soft);
	border-top: 1px solid var(--mh-line);
	border-bottom: 1px solid var(--mh-line);
	display: flex;
	flex-wrap: wrap;
	gap: 20px 40px;
	justify-content: center;
	padding: 128px 24px 28px;
	margin: 0;
}
@media all and (max-width: 700px) {
	.MH-trust-strip { padding-top: 64px; }
}
.MH-trust-item {
	font-family: Inter, Helvetica, Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: var(--mh-ink);
	text-align: center;
}

.MH-press {
	background-color: var(--mh-bg-soft) !important;
	background-image: none !important;
	border-top: 1px solid var(--mh-line);
	border-bottom: 1px solid var(--mh-line);
}
.MH-press .DivParleIndex img { filter: gray; -webkit-filter: grayscale(1); opacity: 0.7; }
.MH-press .normal25.Bold { color: var(--mh-ink); }

.MH-history {
	background-color: var(--mh-dark);
	color: var(--mh-dark-text) !important;
}
.MH-history-inner {
	max-width: 1000px;
	margin: 0 auto;
	padding: 88px 32px;
	text-align: center;
}
.MH-history-inner .ImgCouronneIndex {
	float: none;
	display: block;
	margin: 0 auto 20px;
	padding: 0;
}
.MH-history-title {
	font-family: Inter, Helvetica, Arial, sans-serif;
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 800;
	margin: 0 0 20px;
	color: var(--mh-dark-text);
}
.MH-history-text {
	font-family: Inter, Helvetica, Arial, sans-serif;
	font-size: 16.5px;
	color: var(--mh-dark-text-soft);
	max-width: 620px;
	margin: 0 auto 32px;
}
.MH-history-cta { display: inline-block; }

.MH-hero-visual {
	max-width: 1100px;
	margin: -8px auto -100px;
	padding: 0 24px;
	box-sizing: border-box;
	position: relative;
	z-index: 5;
	text-align: center;
}
.MH-hero-visual-img {
	display: block;
	width: 100%;
	max-width: 100%;
	border-radius: 14px;
	border: 1px solid var(--mh-line);
	box-shadow: 0 40px 80px -24px rgba(0,0,0,0.35), 0 12px 30px rgba(0,0,0,0.12);
}
@media all and (max-width: 700px) {
	.MH-hero-visual { margin-bottom: -44px; }
}

.MH-reviews-title {
	font-family: Inter, Helvetica, Arial, sans-serif;
	font-size: 28px;
	font-weight: 800;
	color: var(--mh-ink);
	margin: 64px 0 8px;
	padding-left: max(20px, 10%);
}
.avis-clients.NoteStar { padding-top: 8px; }
.avis-clients .summary p, .avis-clients .summary .total, .avis-clients .summary .users { color: var(--mh-ink); }

.MH-footer { background-color: var(--mh-dark) !important; }
.MH-footer-inner {
	text-align: left;
	padding-top: 24px;
	padding-bottom: 24px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.MH-footer-inner > div { float: none; width: auto; margin-right: 0; }
.MH-footer-inner a, .MH-footer .color_FFFFFF { color: var(--mh-dark-text-soft) !important; }

.features-section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 88px 32px;
}

.features-header {
  max-width: 760px;
  margin-bottom: 48px;
}

.features-badge {
  font-family: Inter, Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--mh-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

.features-title {
  font-family: Inter, Helvetica, Arial, sans-serif;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--mh-ink);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
  max-width: 960px;
  margin: 0 auto;
}

.feature-card {
  border: 1px solid var(--mh-line);
  border-radius: 14px;
  padding: 26px;
  background-color: var(--mh-card-bg);
}

.feature-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background-color: var(--mh-primary-tint);
  color: var(--mh-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.feature-card-title {
  font-family: Inter, Helvetica, Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--mh-ink);
}

.feature-card-text {
  font-family: Inter, Helvetica, Arial, sans-serif;
  font-size: 14.5px;
  color: var(--mh-ink-soft);
}

/* ===================== 3. Nécessaire pour la page "fonctionnement" ===================== */

.div1 { width: 90%; padding-top: 10px; margin-left: auto; margin-right: auto; max-width: 1300px; }
#entete .div1 { width: 100%; max-width: none; padding-top: 0; } /* le nouvel en-tête gère lui-même sa largeur/centrage (.MH-header-bar) */
@media all and (max-width: 1000px) { .div1 { padding-top: 0; } }
@media all and (max-width: 690px) { .div1 { width: 100%; border-width: 0; } }

.divFonctinnementIndex { width: 100%; margin-bottom: 10px; border-top: 1px solid #C0C0C0; border-bottom: 1px solid #C0C0C0; background-color: #E7E1DB; background-image: linear-gradient(to right, #E7E1DB, white); }
.titre4 { font-size: 20px; font-family: Inter, Helvetica, Verdana; color: #688228; font-weight: bold; text-decoration: none; }
.DivPiedPage { width: 100%; height: 100px; background-color: #303438; }
.Div2PiedPage { color: #ffffff; padding-top: 30px; padding-bottom: 20px; text-align: center; }

.margtop10 { margin-top: 10px; }
.margtop50 { margin-top: 50px; }
.margbottom30 { margin-bottom: 30px; }
.color_515151 { color: #515151; }
.color_000000 { color: #000000; }
.padbottom10 { padding-bottom: 10px; }
.padbottom15 { padding-bottom: 15px; }
.padleft10 { padding-left: 10px; }
.padright5 { padding-right: 5px; }
.padtop5 { padding-top: 5px; }
.padbottom5 { padding-bottom: 5px; }
.inlineblock { display: inline-block; }
.floatright { float: right; }
.width100pc { width: 100%; }
.BackColor_EFEBE7 { background-color: #EFEBE7; }
.Verdana17 { font-size: 17px; font-family: Inter, Verdana, Arial; }
.ExempleAuthentification { width: 96%; max-width: 604px; }
.ExempleCaptcha { width: 300px; height: 300px; }
.IllustInterface { width: 100%; max-width: 946px; }

.ButtonModern {
  box-sizing: content-box;
  cursor: pointer;
  margin: 0 auto;
  text-decoration: none;
  border: 2px solid rgb(0,0,0);
  border-radius: 20px;
  font: normal 20px Helvetica, Verdana, sans-serif;
  color: rgb(0, 0, 0);
  text-align: center;
  letter-spacing: 1px;
  background: rgba(255,255,255,1);
  box-shadow: 5px 5px 5px 0px rgba(170, 170, 170, 0.5);
  transition: background-color 0.3s, color 0.3s, width 0.3s, border-width 0.3s, border-color 0.3s;
}
.ButtonModern:hover { position: relative; top: 2px; }
.ButtonModern:active { border: 2px solid #e0e0e0; background: #e0e0e0; transition: none; }

/* ===================== 5. Sections "sous-page" centrées (Fonctionnement, Prix)  ===================== */

.MH-subhero { max-width: 760px; margin: 0 auto; padding: 64px 32px 16px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.MH-center-text { text-align: center; }
.MH-subhero .MH-hero-sub { max-width: 620px; }

.features-header-c { max-width: 700px; margin: 0 auto 40px; text-align: center; }
.features-section-tight { padding-top: 0; }
.features-grid-c { max-width: 1100px; margin: 0 auto; }

.MH-examples-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 28px; max-width: 1100px; margin: 0 auto; }
.MH-example-card { text-align: center; }
.MH-example-card-title { margin-bottom: 16px; }
.MH-example-img { max-width: 100%; border-radius: 10px; }
.MH-section-note { max-width: 760px; margin: 32px auto 0; text-align: center; font-size: 15.5px; }
.MH-visual-tight { margin-bottom: 24px; }
.MH-cta-note-text { font-family: Inter, Helvetica, Arial, sans-serif; font-size: 15.5px; color: var(--mh-ink-soft); margin: 14px 0 0; }

.MH-price-card-wrap { max-width: 480px; margin: 32px auto 0; }
.MH-price-card { background: var(--mh-card-bg); border: 1px solid var(--mh-line); border-radius: 16px; padding: 36px 32px; box-shadow: 0 20px 50px -20px rgba(0,0,0,0.18); text-align: center; }
.MH-price-eyebrow { font-size: 14px; font-weight: 700; color: var(--mh-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.MH-price-amount-row { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 12px 0 4px; }
.MH-price-amount { font-size: 48px; font-weight: 800; color: var(--mh-ink); letter-spacing: -0.02em; }
.MH-price-unit { font-size: 15px; color: var(--mh-ink-soft); white-space: nowrap; }
.MH-price-sub { font-size: 13.5px; color: var(--mh-muted); margin-bottom: 28px; }
.MH-price-bullets { display: flex; flex-direction: column; gap: 12px; text-align: left; margin-bottom: 28px; }
.MH-price-bullet { display: flex; gap: 10px; align-items: flex-start; }
.MH-price-check { color: var(--mh-primary); font-weight: 700; }
.MH-price-bullet-text { font-size: 14.5px; color: var(--mh-ink-soft); }

.MH-cards-wrap { max-width: 1100px; margin: 88px auto 0; }
.MH-two-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.MH-info-card { border: 1px solid var(--mh-line); border-radius: 14px; padding: 28px; background: var(--mh-card-bg); }
.MH-info-card-text { font-size: 14.5px; color: var(--mh-ink-soft); margin: 0 0 14px; }
.MH-info-example { font-size: 13.5px; color: var(--mh-ink-soft); background: var(--mh-bg-soft); border-radius: 8px; padding: 12px 14px; }
.MH-info-list { font-size: 13.5px; color: var(--mh-ink-soft); margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }

.MH-tarif-wrap { max-width: 900px; margin: 56px auto 0; }
.MH-tarif-intro { font-size: 14.5px; color: var(--mh-ink-soft); text-align: center; margin: 0 0 24px; }
.MH-tarif-table { border: 1px solid var(--mh-line); border-radius: 14px; overflow: hidden; }
.MH-tarif-row-head { display: grid; grid-template-columns: 1fr 1fr; background: var(--mh-bg-soft); font-size: 13px; font-weight: 700; color: var(--mh-ink-soft); text-transform: uppercase; letter-spacing: 0.04em; }
.MH-tarif-row { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--mh-line); }
.MH-tarif-cell { padding: 16px 20px; font-size: 14.5px; color: var(--mh-ink); }
.MH-tarif-cell-right { padding: 16px 20px; text-align: right; font-size: 14.5px; color: var(--mh-ink); font-weight: 700; }
.MH-tarif-head-cell { padding: 14px 20px; }
.MH-tarif-head-cell-right { padding: 14px 20px; text-align: right; }
.MH-tarif-discount { color: var(--mh-cta); }
.MH-tarif-note { font-size: 13.5px; color: var(--mh-muted); text-align: center; margin: 16px 0 0; }

.features-header-mb32 { margin-bottom: 32px; }
.features-title-sm { font-size: clamp(22px, 2.6vw, 28px); }

.MH-cta-note-wrap { max-width: 700px; margin: 72px auto 0; text-align: center; }
.MH-ink-strong { color: var(--mh-ink); }
.MH-primary-strong { color: var(--mh-primary); }
.MH-features-title-price { font-size: clamp(24px, 3vw, 30px); font-weight: 800; margin: 0; letter-spacing: -0.01em; color: var(--mh-ink); }
.MH-desinscr-img { width: 100%; max-width: 700px; }

/* ===================== 7. Nécessaire pour inscription ===================== */

.width25pc { width: 25%; }

.MH-signup-wrap { max-width: 1300px; margin: 0 auto; padding: 10px 24px 88px; box-sizing: border-box; }
.MH-signup-solo { max-width: 560px; margin: 0 auto; }
.MH-signup-card {
	background-color: var(--mh-card-bg);
	color: var(--mh-ink);
	border: 1px solid var(--mh-line);
	border-radius: 16px;
	padding: 40px 36px;
	box-shadow: 0 20px 50px -20px rgba(0,0,0,0.18);
	box-sizing: border-box;
}
.MH-signup-title { font-family: Inter, Helvetica, Arial, sans-serif; font-size: clamp(24px, 3vw, 28px); font-weight: 800; color: var(--mh-ink); margin: 0 0 28px; letter-spacing: -0.01em; text-align: center; }
.MH-form { display: flex; flex-direction: column; gap: 20px; }
.MH-form-static { font-family: Inter, Helvetica, Arial, sans-serif; font-size: 15px; color: var(--mh-ink); }
.MH-radio-group { display: flex; gap: 24px; flex-wrap: wrap; }
.MH-radio-option { display: flex; align-items: center; gap: 8px; font-family: Inter, Helvetica, Arial, sans-serif; font-size: 14.5px; color: var(--mh-ink); cursor: pointer; }
.MH-radio-option input[type="radio"] { width: 18px; height: 18px; accent-color: var(--mh-primary); cursor: pointer; }
.BigCheckbox { width: 20px; height: 20px; accent-color: var(--mh-primary); cursor: pointer; vertical-align: middle; }
.MH-checkbox-row-signup { display: flex; align-items: flex-start; gap: 10px; font-family: Inter, Helvetica, Arial, sans-serif; font-size: 13.5px; color: var(--mh-ink-soft); }
.MH-checkbox-row-signup label { cursor: pointer; }
.MH-form-hint { font-family: Inter, Helvetica, Arial, sans-serif; font-size: 13.5px; color: var(--mh-ink-soft); background-color: var(--mh-bg-soft); border-radius: 8px; padding: 10px 14px; }
.MH-legal-note { max-width: 780px; margin: 40px auto 0; text-align: center; font-family: Inter, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 1.6; color: var(--mh-muted); }
.MH-legal-note a { color: var(--mh-muted); text-decoration: underline; }
select.MH-field-input { appearance: auto; cursor: pointer; }

/* ===================== 6. Nécessaire pour contact (FAQ publique) ===================== */

.normalptl { font-size: 13px; font-family: Inter, Verdana, Arial; }
.titre { font-size: 14px; font-family: Inter, Verdana, Arial; color: #A84B00; }
.AUnderlineIfMouse { text-decoration: none; font-size: 16px; font-family: Inter, Verdana, Arial; }
.AUnderlineIfMouse:hover { text-decoration: underline; color: #000000; }
.alignleft { text-align: left; }
.width100px { width: 100px; }
.width210px { width: 210px; }
.height100pc { height: 100%; }
.height105px { height: 105px; }
.bgcolor_303438 { background-color: #303438; }
.MinHeiht_650px { min-height: 650px; }
.padleft20 { padding-left: 20px; }
.padleft100 { padding-left: 100px; }
.padtop30 { padding-top: 30px; }
.padtop40 { padding-top: 40px; }
.padtop50 { padding-top: 50px; }
.padbottom30 { padding-bottom: 30px; }
.padbottom40 { padding-bottom: 40px; }
.ZoneCentreContact { margin-left: auto; margin-right: auto; width: 70%; }
@media all and (max-width: 1000px) { .ZoneCentreContact { width: 100%; } }
.Divcontactpublic {margin-left:auto;margin-right:auto;width:100%;max-width:650px;text-align:center;padding-bottom:30px}

.DialBox {
	margin-top: 20px; margin-bottom: 30px;
	padding: 5px;
	max-width: 700px; width: 90%; margin-left: auto; margin-right: auto;
	border: none;
	border-radius: 16px;
	text-align: center;
	box-shadow: 0 8px 30px rgba(0,0,0,0.08);
	font-family: Inter, Arial, Helvetica, sans-serif;
	color: var(--mh-ink);
	font-size: 14.5px;
	line-height: 1.5;
}
@media all and (max-width: 690px) {
	.DialBox { margin-top: 15px; margin-bottom: 20px; width: 95%; margin-left: auto; margin-right: auto; border: none; text-align: center; box-shadow: none; }
}


/* ===================== 4. Nécessaire pour Prix  ===================== */

.MargLeft180px { margin-left: 180px; }
.padbottom40 { padding-bottom: 40px; }
.padtop70 { padding-top: 70px; }
.padright20 { padding-right: 20px; }
.padright30 { padding-right: 30px; }
.pad5px { padding: 5px; }
.normalV { font-size: 12px; font-family: Inter, Verdana, Arial; }
.ptl2 { font-size: 10px; font-family: Inter, Verdana, Arial; }
.Verdana18 { font-size: 18px; font-family: Inter, Verdana, Arial; }
.Verdana20 { font-size: 20px; font-family: Inter, Verdana, Arial; }
.Helvetica18 { font-size: 18px; font-family: Inter, Helvetica, Verdana; }
.Helvetica19 { font-size: 19px; font-family: Inter, Helvetica, Verdana; }
.color_7CB901 { color: #7CB901; }
.color_688228 { color: #688228; }

.table { display: table; }
.tablerow { display: table-row; }
.tablecell { display: table-cell; }

.BorderSolid { border-style: solid; }
.BorderTopWidth0px { border-top-width: 0; }
.BorderTopWidth1px { border-top-width: 1px; }
.BorderTopWidth2px { border-top-width: 2px; }
.BorderRightWidth0px { border-right-width: 0; }
.BorderRightWidth1px { border-right-width: 1px; }
.BorderRightWidth2px { border-right-width: 2px; }
.BorderBottomWidth0px { border-bottom-width: 0; }
.BorderBottomWidth1px { border-bottom-width: 1px; }
.BorderBottomWidth2px { border-bottom-width: 2px; }
.BorderLeftWidth0px { border-left-width: 0; }
.BorderLeftWidth1px { border-left-width: 1px; }
.BorderLeftWidth2px { border-left-width: 2px; }
.borderColor_688228 { border-color: #688228; }


/* Header (Entete PublicNew) : flex/gap, sticky + une seule bordure sous tout le bandeau,
   popover langue en :hover, menu mobile en checkbox-hack (aucun JS requis).
   Important : le sticky est posé sur #entete (enfant direct de body, donc contraint par toute
   la hauteur de la page) et non sur .MH-header — sinon son parent direct (#div1/#entete, qui
   ne fait que la hauteur du bandeau) ne laisse aucune marge pour "coller". */
#entete {
	position: sticky;
	top: 0;
	z-index: 20;
}
.MH-header {
	background-color: var(--mh-card-bg);
	border-bottom: 1px solid var(--mh-line);
	box-shadow: 0 1px 12px rgba(0,0,0,0.05);
}
.MH-header-bar {
	max-width: 1300px;
	margin: 0 auto;
	padding: 14px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.MH-header-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.MH-header-brand:hover { text-decoration: none; }
.MH-logo-icon { width: 34px; height: 34px; }
.MH-logo-text {
	font-family: Inter, Helvetica, Arial, sans-serif;
	font-size: 22px;
	font-weight: 400;
	letter-spacing: -0.01em;
	color: var(--mh-ink);
}
.MH-logo-accent { color: var(--mh-cta); }

.MH-nav-desktop { display: flex; align-items: center; gap: 24px; flex-wrap: nowrap; }
.MH-nav-link {
	font-family: Inter, Helvetica, Arial, sans-serif;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--mh-ink);
	text-decoration: none;
	white-space: nowrap;
}
.MH-nav-link.MH-active { color: var(--mh-primary); font-weight: 700; }
.MH-nav-cta {
	background-color: var(--mh-cta);
	color: #ffffff;
	font-family: Inter, Helvetica, Arial, sans-serif;
	font-size: 14.5px;
	font-weight: 700;
	padding: 10px 20px;
	border-radius: 8px;
	text-decoration: none;
	white-space: nowrap;
}

.MH-lang { position: relative; }
.MH-lang-btn {
	display: inline-block;
	font-family: Inter, Helvetica, Arial, sans-serif;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--mh-ink);
	border: 1px solid var(--mh-line);
	border-radius: 8px;
	padding: 8px 12px;
	cursor: pointer;
	white-space: nowrap;
}
.MH-lang-popover {
	display: none;
	position: absolute;
	top: 42px;
	right: 0;
	background-color: var(--mh-card-bg);
	border: 1px solid var(--mh-line);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.12);
	padding: 6px;
	min-width: 150px;
	z-index: 30;
}
.MH-lang:hover .MH-lang-popover { display: block; }
.MH-lang-option {
	display: block;
	padding: 8px 10px;
	font-family: Inter, Helvetica, Arial, sans-serif;
	font-size: 13.5px;
	color: var(--mh-ink);
	text-decoration: none;
	white-space: nowrap;
	border-radius: 6px;
}
.MH-lang-option:hover { background-color: var(--mh-bg-soft); }

.MH-menu-checkbox { display: none; }
.MH-hamburger {
	display: none;
	background: none;
	border: 1px solid var(--mh-line);
	border-radius: 8px;
	width: 40px;
	height: 40px;
	font-size: 18px;
	line-height: 38px;
	text-align: center;
	cursor: pointer;
	color: var(--mh-ink);
}
.MH-nav-mobile {
	display: none;
	border-top: 1px solid var(--mh-line);
	padding: 16px 24px 20px;
	flex-direction: column;
	gap: 16px;
}
.MH-lang-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.MH-lang-chip {
	border: 1px solid var(--mh-line);
	border-radius: 6px;
	padding: 6px 10px;
	font-family: Inter, Helvetica, Arial, sans-serif;
	font-size: 13px;
	color: var(--mh-ink);
	text-decoration: none;
	cursor: pointer;
}
.MH-nav-cta-mobile { text-align: center; }

@media all and (max-width: 760px) {
	.MH-nav-desktop { display: none; }
	.MH-hamburger { display: block; }
	.MH-menu-checkbox:checked ~ .MH-nav-mobile { display: flex; }
}

/* ===================== 8. Nécessaire pour inscr_etape2 ===================== */


.titre2 {
	font-size:16px;
	font-family:Inter,Verdana,Arial;
	font-weight:bold;
	color:#A84B00;
}


.titre3 {
	font-size:18px;
	font-family:Inter,Verdana,Arial;
	font-weight:bold;
	color:#853d03;
}


.tptl {
	font-size:9px;
	font-family:Inter,Verdana,Arial;
}


.InputPass { 
	font-size:13px;
	font-family:Inter,Verdana,Arial;
	line-height:21px;
	border:none;
}


.ImgPass {
	width:24px;
	height:10px;
	vertical-align: middle;
	line-height:21px
}


.ImgPass:hover {
   cursor: pointer;
}


.white { color: #FFFFFF}

.width73pc {width: 73%}

.width20px {width: 20px}

.width60px {width: 60px}

.width136px {width: 136px}

.width310px {width: 310px}

.height35px {height:35px}

.height60px {height:60px}


.LineHeight35px {line-height:35px}


.fontVerdanaArial {font-family:Inter,Verdana,Arial;}


.Loupe2 {width:130px;height:104px;}

.color_888888 {color:#888888}

.color_d94a08 {color:#d94a08}

.color_188fff {color:#188fff}


.cursorPointer { cursor: pointer}

.bgcolor_d4e5a9 {background-color:#d4e5a9}

.bgcolor_ffd5de {background-color:#ffd5de}

.CadreInputNoir { display:inline-block;border:1px solid black;padding:4px;background-color:#FFFFFF}

.FooterInscription { background: url('images2/hhm.gif') repeat;height:17px;margin-left:20px;margin-right:20px}

.CnxCompte_inscr2 {max-width:479px}

.GmailActiverValidation2Etapes-1 { width:100%;max-width:420px }

.Gmail_MdpAppli2 { width:100%;max-width:502px }

.MdpAppliYahooPng { width:100%;max-width:829px }

.AppleActiverIdent2FactPng { width:100%;max-width:702px}

.CnxApplePng {width:100%;max-width:447px}

.ParamsApple2Png {width:100%;max-width:635px}

.SignInWithMicrosoftSvg {width:300px }

.GenererMdpAppliOffice365Png { width:100%;max-width:1089px }

.FicVideoInscr_2 {width:100%;max-width:750px}

.GenererMdpAppliOutlookPng {width:100%;max-width:567px}

.PopUp {display:none;z-index: 99;position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 500ms;opacity: 1; }

.ActiverPopImapGmxPng {width:100%;max-width:803px}


.invisible { display:none}

.padright15 {padding-right:15px}

.padright100 {padding-right:100px}

.padtop150 {padding-top:150px}

.padbottom100 {padding-bottom:100px}

.padbottom150 {padding-bottom:150px}


.MargLeftAuto {margin-left: auto}

.MargRightAuto {margin-right: auto}

.pad20px {padding:20px}


.valigntop { vertical-align:top}

.valignbottom {vertical-align:bottom }

.valignmiddle { vertical-align: middle}


.Zone5
	{
	border: 1px solid #C0C0C0;
	background-color:#EFEBE7;
	
	
	-moz-border-radius: 20px 20px 20px 20px;
        -webkit-border-radius: 20px 20px 20px 20px;
        border-radius: 20px 20px 20px 20px;
        
	}

.AlignInscrEtap2 { text-align:right}

.Font35SaufPetit { font-size:35px}


.ZoneCentreInscEtap2 { margin-left: auto;  margin-right: auto;  ;width:80%;}

.SEMtxt { padding-left:10px;padding-top:8px}

.MaxWidth80pc { max-width:80%; }




.register {font-size:25px;color:#000000}

.hautfooter { height:20px; }

.popup {
  margin: 70px auto;
  padding: 20px;
  background: var(--mh-page-bg);
  border: 1px solid var(--mh-line);
  border-radius: 15px;
  width: 30%;
  position: relative;
  transition: all 3s ease-in-out;
}

.popup .close {
  position: absolute;
  top: 5px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}