/* MG Studio MSS — pied de page [mss_footer]
   Style « blanc » comme le reste du site : fond blanc, texte gris, filet dégradé bleu → orange en haut.
   Petits traits sous les titres : vert / orange / bleu clair. Responsive : 4 → 2 → 1 colonnes. */

.mssf {
	--mssf-ink: var(--gcid-primary-color, #707070);   /* gris du site */
	--mssf-ink-soft: #8a8f96;
	--mssf-blue: #465f9d;
	--mssf-orange: #e4794a;
	--mssf-green: #99c00f;
	--mssf-sky: #21a9e2;
	--mssf-line: #e9ebee;
	position: relative; width: 100%; margin: 0; box-sizing: border-box;
	background: #fff; color: var(--mssf-ink);
	font-family: 'Raleway', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 15px; line-height: 1.6;
}
/* filet de marque en haut */
.mssf::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--mssf-blue), var(--mssf-orange)); }

.mssf a { color: inherit; text-decoration: none; transition: color .2s ease, opacity .2s ease; }
.mssf a:hover, .mssf a:focus-visible { color: var(--mssf-blue); }
.mssf a:focus-visible { outline: 2px solid var(--mssf-orange); outline-offset: 3px; border-radius: 4px; }
.mssf ul { list-style: none; margin: 0; padding: 0; }
.mssf p { margin: 0; }

.mssf__inner {
	display: grid; grid-template-columns: 1.25fr 1fr 1.2fr 1.3fr; gap: 44px;
	max-width: 1280px; margin: 0 auto; padding: 72px 32px 52px; box-sizing: border-box;
}

/* ---------- Marque ---------- */
.mssf__logo { display: inline-block; line-height: 0; }
.mssf__logo img { width: 190px; max-width: 100%; height: auto; display: block; }
.mssf .mssf__rf { display: block; width: 190px; max-width: 100%; height: auto; margin: 2px 0 0 -4px; }   /* cartouche « République française » sous le logo */
.mssf__tagline { margin-top: 20px; max-width: 300px; color: var(--mssf-ink); }
.mssf__social { display: flex; gap: 10px; margin-top: 22px; }
.mssf__social a {
	display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px;
	background: #f3f4f6; color: var(--mssf-ink); transition: background .2s ease, color .2s ease, transform .2s ease;
}
.mssf__social a:hover { background: var(--mssf-blue); color: #fff; transform: translateY(-2px); }
.mssf__social svg { width: 19px; height: 19px; fill: currentColor; }

/* ---------- Titres (gris, discrets) et listes ---------- */
.mssf .mssf__title {
	position: relative; margin: 0 0 20px !important; padding: 0 0 11px !important; color: var(--mssf-ink) !important;
	font-family: inherit !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1.3 !important; letter-spacing: .15em !important; text-transform: uppercase !important;
}
.mssf__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px; border-radius: 2px; background: var(--mssf-orange); }
.mssf__title--green::after  { background: var(--mssf-green); }
.mssf__title--orange::after { background: var(--mssf-orange); }
.mssf__title--blue::after   { background: var(--mssf-sky); }

.mssf-list li { margin: 0 0 10px; }
.mssf-list a { display: inline-block; transition: transform .2s ease, color .2s ease; }
.mssf-list a:hover { transform: translateX(4px); }
.mssf-more { margin-top: 16px !important; }
.mssf-more a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--mssf-blue); }
.mssf-more svg { width: 16px; height: 16px; fill: currentColor; transition: transform .2s ease; }
.mssf-more a:hover svg { transform: translateX(4px); }

/* ---------- Contact ---------- */
.mssf-contact li { display: flex; align-items: flex-start; gap: 14px; margin: 0 0 16px; }
.mssf-contact svg { flex: none; width: 20px; height: 20px; margin-top: 3px; fill: var(--mssf-orange); }
.mssf-contact a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* même bouton dégradé que « Voir tous nos ateliers » */
.mssf__btn {
	display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; padding: 12px 26px; border-radius: 999px;
	background: linear-gradient(90deg, var(--mssf-blue), var(--mssf-orange)); color: #fff !important; font-weight: 700; letter-spacing: .03em;
	box-shadow: 0 8px 20px rgba(70, 95, 157, .25); transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.mssf__btn:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 12px 26px rgba(70, 95, 157, .32); }
.mssf__btn svg { width: 17px; height: 17px; fill: currentColor; }

/* ---------- Barre légale ---------- */
.mssf__bar { border-top: 1px solid var(--mssf-line); background: #f7f8f9; }
.mssf__bar-inner {
	display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 28px;
	max-width: 1280px; margin: 0 auto; padding: 18px 32px; box-sizing: border-box; font-size: 13.5px; color: var(--mssf-ink-soft);
}
.mssf__legal { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.mssf__legal a, .mssf__credit a { color: var(--mssf-ink-soft); }
.mssf__legal a:hover, .mssf__credit a:hover { color: var(--mssf-blue); }
.mssf__credit a { font-weight: 700; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.mssf__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 36px; padding: 60px 28px 44px; }
}
@media (max-width: 640px) {
	.mssf__inner { grid-template-columns: 1fr; gap: 36px; padding: 52px 22px 36px; }
	.mssf__bar-inner { flex-direction: column; align-items: flex-start; padding: 18px 22px 22px; }
}

@media (prefers-reduced-motion: reduce) {
	.mssf a, .mssf__btn, .mssf-list a, .mssf__social a { transition: none; }
}

/* ---------- Garde-fous contre les styles globaux de Divi ----------
   Divi applique sa propre typographie (taille, interlignes, marge basse) et ses puces aux p / ul / li / h2 du contenu :
   sans ces règles, les listes ont des puces, les textes sont trop grands et les colonnes se désalignent. */
.mssf, .mssf * { box-sizing: border-box; }
.mssf ul, .mssf ol { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.mssf li { list-style: none !important; padding: 0 !important; background: none !important; }
.mssf li::marker { content: none; }
.mssf li::before { content: none !important; }
.mssf p { margin: 0 !important; padding: 0 !important; }
.mssf a { text-decoration: none; }

.mssf .mssf__tagline,
.mssf .mssf-list li, .mssf .mssf-list a,
.mssf .mssf-contact li, .mssf .mssf-contact a {
	font-size: 15px !important; line-height: 1.6 !important; font-weight: 400 !important; letter-spacing: 0 !important;
}
.mssf .mssf__tagline { margin-top: 20px !important; color: var(--mssf-ink) !important; }
.mssf .mssf-list li { margin: 0 0 10px !important; }
.mssf .mssf-more { margin-top: 16px !important; }
.mssf .mssf-more a { font-weight: 700 !important; color: var(--mssf-blue) !important; }
.mssf .mssf-contact li { margin: 0 0 16px !important; }

.mssf .mssf__bar-inner, .mssf .mssf__bar-inner p, .mssf .mssf__bar-inner li, .mssf .mssf__bar-inner a {
	font-size: 13.5px !important; line-height: 1.5 !important; letter-spacing: 0 !important;
}
.mssf .mssf__credit a { font-weight: 700 !important; }
.mssf .mssf__btn { font-size: 14px !important; line-height: 1.2 !important; color: #fff !important; padding: 12px 26px !important; }