/*
Theme Name: MyDigitalize
Theme URI: https://ydigitalize.com
Author: MyDigitalize
Author URI: https://ydigitalize.com
Description: Thème WordPress sur-mesure, Tailwind, Elementor-ready, SEO friendly.
Version: 1.0.0
Requires at least: 6.3
Tested up to: 6.5
Requires PHP: 8.0
Text Domain: mydigitalize
*/

a:where(:not(.wp-element-button)) {
    text-decoration: none!important; 
}


/* ======================================================
   VARIABLES GLOBALES (alimentées par le Customizer)
   ⚠️ Ces variables sont injectées dynamiquement en PHP
====================================================== */

:root {
	/* Dégradé principal (boutons premium, icônes, titres) */
	--myd-accent-gradient: linear-gradient(to right, #2563eb, #7c3aed, #db2777);

	/* Couleur principale (fallback / couleur unie) */
	--myd-accent-color: #2563eb;

	/* 🔁 ALIAS DE COMPATIBILITÉ (ne pas supprimer) */
	--myd-gradient: var(--myd-accent-gradient);
	--myd-bg-gradient: var(--myd-accent-gradient);
	--myd-bg-color: var(--myd-accent-color);
}

/* RESET WPForms (obligatoire) */
.wpforms-container.myd-form input,
.wpforms-container.myd-form textarea {
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	background: transparent !important;
}

/* ======================================================
   WPFORMS – PRESET MYDIGITALIZE
====================================================== */

/* CONTENEUR */
.wpforms-container.myd-form {
	background: #fff;
	border-radius: 16px;
	padding: 2.5rem;
	box-shadow: 0 20px 40px rgba(0,0,0,.06);
}

/* Suppression labels visibles */
.wpforms-container.myd-form .wpforms-field-label {
	display: none;
}

.wpforms-container.myd-form:hover {
	box-shadow: 0 20px 40px rgba(0,0,0,0.08);
	transform: translateY(-4px);
}

/* MASQUER LABELS VISUELS */
.wpforms-container.myd-form .wpforms-field-label {
	display: none;
}

/* CHAMPS */
.wpforms-container.myd-form input[type=text],
.wpforms-container.myd-form input[type=email],
.wpforms-container.myd-form textarea {
	width: 100%;
	padding: 14px 0 10px;
	border-bottom: 1px solid #d1d5db !important;
	font-size: 16px;
	color: #111;
	transition: all .3s ease;
}


/* Placeholder */
.wpforms-container.myd-form input::placeholder,
.wpforms-container.myd-form textarea::placeholder {
	color: #c4c4c4;
	font-weight: 400;
}

.wpforms-container.myd-form .wpforms-field-description {
	font-size: 13px;
	color: #6b7280;
	margin-top: 6px;
}



/* FOCUS */
.wpforms-container.myd-form input:focus,
.wpforms-container.myd-form textarea:focus {
	outline: none !important;
	border-bottom: 2px solid transparent !important;

	background-image: linear-gradient(
		to right,
		#2563eb,
		#7c3aed,
		#db2777
	);
	background-size: 100% 2px;
	background-position: bottom;
	background-repeat: no-repeat;
}


/* HELPER TEXT */
.wpforms-container.myd-form .wpforms-field-description {
	margin-top: 6px;
	font-size: 13px;
	color: #6b7280;
}


/* ERREUR */
.wpforms-container.myd-form input.wpforms-error,
.wpforms-container.myd-form textarea.wpforms-error {
	border-bottom-color: #ef4444;
}

.wpforms-container.myd-form .wpforms-error {
	font-size: 13px;
	color: #ef4444;
	margin-top: 6px;
}


/* CHAMP EN ERREUR */
.wpforms-container.myd-form input.wpforms-error,
.wpforms-container.myd-form textarea.wpforms-error {
	border-bottom-color: #dc2626;
}


/* ======================================================
   BOUTON SUBMIT – DEGRADE THEME
====================================================== */

.wpforms-container.myd-form button.wpforms-submit {
	width: 100%;
	margin-top: 1.5rem;

	background-image: linear-gradient(
		to right,
		#2563eb,
		#7c3aed,
		#db2777
	) !important;

	color: #ffffff !important;
	font-weight: 600;
	font-size: 16px;

	border: none !important;
	border-radius: 12px;
	padding: 16px;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	transition: transform .25s ease, box-shadow .25s ease;
}

.wpforms-container.myd-form button.wpforms-submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 35px rgba(124,58,237,.4);
}


/*LOADER*/
.wpforms-container.myd-form button.wpforms-submit:after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		120deg,
		transparent,
		rgba(255,255,255,.35),
		transparent
	);
	transform: translateX(-100%);
}

.wpforms-container.myd-form button.wpforms-submit:hover:after {
	transform: translateX(100%);
	transition: transform .8s ease;
}



/* ======================================================
   MYDIGITALIZE – WPFORMS PREMIUM FORM
   Activation via classe : myd-form
====================================================== */


/*form contact projet */
.wpforms-form input[type=text], .wpforms-form input[type=email], .wpforms-form select, .wpforms-form input, .wpforms-form textarea {
	border-radius: 8px !important;
    background-color: #f0f0f0 !important;
	 font-weight: 300;
    font-size: 1rem;
    color: #777;
}

div.wpforms-container-full .wpforms-form .wpforms-field-label {
    font-weight: 300;
    font-size: 1rem;
    color: #777;
}


.wpforms-container.myd-form textarea{
	border-radius: 8px !important;
	background-color: #f0f0f0 !important;
}

div.wpforms-container-full, div.wpforms-container-full .wpforms-form *, div.wpforms-container-full .wpforms-form select{
    color: #999;
    font-size: 0.8rem;
	border: none;
}
div.wpforms-container-full .wpforms-form .wpforms-field-label-inline {

    font-size: 0.8rem;
    font-weight: 400;

}


.myd-form {
	background: #fff;
	border-radius: 16px;
	padding: 2.5rem;
	box-shadow: 0 20px 50px rgba(0,0,0,.06);
	transition: transform .4s ease, box-shadow .4s ease;
}

.myd-form:hover {
	transform: translateY(-4px);
	box-shadow: 0 30px 70px rgba(0,0,0,.08);
}

/* =========================
   GROUPES DE CHAMPS
========================= */
.myd-form .wpforms-field {
	position: relative;
	margin-bottom: 2.2rem;
}

/* =========================
   INPUTS / TEXTAREA
========================= */
.myd-form input,
.myd-form textarea {
	width: 100%;
	border: none;
	border-bottom: 2px solid #e5e7eb;
	background: transparent;
	padding: 12px 4px;
	font-size: 15px;
	color: #111;
	transition: border-color .3s ease;
}

.myd-form input:focus,
.myd-form textarea:focus {
	outline: none;
	border-bottom-color: var(--myd-accent-color, #7c3aed);
}

/* =========================
   PLACEHOLDER = LABEL
========================= */
.myd-form input::placeholder,
.myd-form textarea::placeholder {
	color: #9ca3af;
	font-weight: 400;
	transition: opacity .3s ease;
}

.myd-form input:focus::placeholder,
.myd-form textarea:focus::placeholder {
	opacity: .4;
}

/* =========================
   TEXTE AIDE
========================= */
.myd-form .wpforms-field-description {
	font-size: 13px;
	color: #6b7280;
	margin-top: 6px;
	transition: color .3s ease;
}

.myd-form input:focus + .wpforms-field-description,
.myd-form textarea:focus + .wpforms-field-description {
	color: var(--myd-accent-color, #7c3aed);
}

/* =========================
   ERREURS
========================= */
.myd-form .wpforms-error {
	color: #dc2626;
	font-size: 13px;
	margin-top: 6px;
}

.myd-form input.wpforms-error,
.myd-form textarea.wpforms-error {
	border-bottom-color: #dc2626;
}

/* =========================
   BOUTON SUBMIT
========================= */
.myd-form .wpforms-submit {
	width: 100%;
	margin-top: 1.5rem;
	padding: 14px;
	border-radius: 12px;
	border: none;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	cursor: pointer;
	background-image: var(--myd-accent-gradient);
	transition: all .35s ease;
}

.myd-form .wpforms-submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(124,58,237,.35);
}

/* =========================
   LOADER SUBMIT
========================= */
.myd-form.loading .wpforms-submit {
	pointer-events: none;
	opacity: .8;
}

.myd-form.loading .wpforms-submit::after {
	content: "";
	width: 20px;
	height: 20px;
	border: 3px solid rgba(255,255,255,.4);
	border-top-color: #fff;
	border-radius: 50%;
	display: inline-block;
	margin-left: 12px;
	animation: myd-spin 1s linear infinite;
}

@keyframes myd-spin {
	to { transform: rotate(360deg); }
}








/* ===========================
   CONTACT FORM 7 – DESIGN
=========================== */

.wpcf7 form {
  background: #fff;
  border-radius: 12px;
  padding: 2rem;
  transition: all 0.4s ease;
}

.wpcf7 form:hover {
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
  transform: translateY(-4px);
}

/* Champs */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea,
.wpcf7 select {
  width: 100%;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  font-size: 15px;
  transition: all 0.3s ease;
}

.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
  outline: none;
  border-color: #7c3aed;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.15);
}

/* Bouton */
.wpcf7 input[type="submit"] {
  width: 100%;
  padding: 14px;
  border-radius: 8px;
  border: none;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(to right, #2563eb, #7c3aed, #db2777);
  transition: all 0.3s ease;
}

.wpcf7 input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(124,58,237,0.4);
}


/* =====================================================
   GRADIENTE GLOBAL – ELEMENTS PREMIUM
===================================================== */

.myd-gradient-bg {
	background-image: var(--myd-gradient);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	color: #fff;
}

/* Icônes / coches circulaires */
.myd-gradient-icon {
	background-image: var(--myd-gradient);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	color: #fff;
	border-radius: 9999px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Boutons dégradés */
.myd-btn-gradient {
	background-image: var(--myd-gradient);
	color: #fff;
	border-radius: 8px;
	padding: 0.75rem 2rem;
	font-weight: 500;
	transition: all .3s ease;
}

.myd-btn-gradient:hover {
	opacity: .9;
}

/* Boutons neutres (gris / blanc léger) */
.myd-btn-neutral {
	background-color: #f5f6f8;
	color: #111;
	border-radius: 8px;
	padding: 0.75rem 2rem;
	font-weight: 500;
	transition: background-color .3s ease;
}

.myd-btn-neutral:hover {
	background-color: #eceef1;
}


/* =====================================================
   SYSTEME DE FOND GLOBAL (GRADIENT / COULEUR)
===================================================== */

.myd-bg {
	background-repeat: no-repeat;
	background-size: cover;
}

.myd-bg[data-bg="solid"] {
	background-color: var(--myd-bg-color);
}

.myd-bg[data-bg="linear"],
.myd-bg[data-bg="radial"] {
	background-image: var(--myd-bg-gradient);
}

/* Boutons dégradés uniquement */
.myd-btn-gradient {
	background-image: var(--myd-bg-gradient);
	color: #fff;
	border-radius: 8px;
	padding: 0.75rem 2rem;
	font-weight: 500;
	transition: opacity .3s ease;
}

.myd-btn-gradient:hover {
	opacity: .9;
}

/* Boutons neutres */
.myd-btn-neutral {
	background-color: #f5f6f8;
	color: #111;
	border-radius: 8px;
	padding: 0.75rem 2rem;
	font-weight: 500;
	transition: background-color .3s ease;
	border:1px sold #555!important;
}

.myd-btn-neutral:hover {
	background-color: #eceef1;
}

/* Icônes circulaires */
.myd-gradient-icon {
	background-image: var(--myd-bg-gradient);
	color: #fff;
	border-radius: 9999px;
	display: flex;
	align-items: center;
	justify-content: center;
}



/* ======================================================
   MYDIGITALIZE – BACKGROUNDS GRADIENT (ELEMENTOR)
====================================================== */

/* Fond dégradé standard (section / colonne / widget) */
.myd-bg-gradient {
	background-image: var(--myd-accent-gradient);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

/* Fond dégradé doux (effet premium, non agressif) */
.myd-bg-gradient-soft {
	background-image: var(--myd-accent-gradient);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	opacity: 0.95;
}

/* Carte / encart avec dégradé */
.myd-card-gradient {
	background-image: var(--myd-accent-gradient);
	border-radius: 16px;
	color: #fff;
}

/* Halo léger (effet design moderne) */
.myd-bg-glow {
	position: relative;
}

.myd-bg-glow::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--myd-accent-gradient);
	filter: blur(40px);
	opacity: 0.25;
	z-index: -1;
}

.myd-bg-overlay {
	position: relative;
}

.myd-bg-overlay::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--myd-accent-gradient);
	opacity: 0.85;
	pointer-events: none;
}



/* ======================================================
   SYSTEME DE COULEUR & DEGRADE GLOBAL
====================================================== */
/* TITRES */
.myd-title-gradient {
	background-image: var(--myd-accent-gradient);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

/* BOUTONS PRINCIPAUX */
.myd-btn-gradient {
	background-image: var(--myd-accent-gradient);
	color: #fff;
	border-radius: 8px;
	padding: 0.75rem 2rem;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	transition: opacity .3s ease;
}

.myd-btn-gradient:hover {
	opacity: .9;
}

/* ICONES */
.myd-gradient-icon {
	background-image: var(--myd-accent-gradient);
	color: #fff;
	border-radius: 9999px;
	display: flex;
	align-items: center;
	justify-content: center;
}




/* ======================================================
   SCROLL REVEAL – ANIMATION DOUCE & PREMIUM
====================================================== */

/* État initial */
.myd-reveal {
	opacity: 0;
	transform: translateY(24px) scale(0.98);
	filter: blur(6px);
	transition:
		opacity 0.8s cubic-bezier(.22,.61,.36,1),
		transform 0.8s cubic-bezier(.22,.61,.36,1),
		filter 0.8s cubic-bezier(.22,.61,.36,1);
	will-change: opacity, transform, filter;
}

/* État visible */
.myd-reveal.is-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
	filter: blur(0);
}

/* Variante plus lente (pour sections importantes) */
.myd-reveal-slow {
	transition-duration: 1.1s;
}

/* ======================================================
   SCROLL TO TOP – BOUTON GLOBAL
====================================================== */

.myd-scroll-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	width: 52px;
	height: 52px;

	display: flex;
	align-items: center;
	justify-content: center;

	border: none;
	cursor: pointer;

	background-image: var(--myd-accent-gradient);
	color: #fff;

	border-radius: 9999px;
	box-shadow: 0 12px 30px rgba(0,0,0,.15);

	opacity: 0;
	transform: translateY(16px) scale(.95);
	pointer-events: none;

	transition:
		opacity .4s cubic-bezier(.22,.61,.36,1),
		transform .4s cubic-bezier(.22,.61,.36,1),
		box-shadow .3s ease;
	z-index: 999;
}

/* Visible */
.myd-scroll-top.is-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

/* Hover */
.myd-scroll-top:hover {
	box-shadow: 0 18px 45px rgba(0,0,0,.25);
	transform: translateY(-2px) scale(1.03);
}

/* Mobile */
@media (max-width: 768px) {
	.myd-scroll-top {
		right: 16px;
		bottom: 16px;
		width: 46px;
		height: 46px;
	}
}










/* ======================================================
   BOUTON PREMIUM – DEGRADE FLUIDE (COMME FORMULAIRE)
====================================================== */

.myd-btn-gradient {
	position: relative;
	z-index: 1;

	/* Dégradé animé */
	background-image: var(--myd-accent-gradient);
	background-size: 200% 200%;
	background-position: left center;

	color: #fff !important;

	border-radius: 12px;
	padding: 0.9rem 2.2rem;

	font-weight: 600;
	font-size: 0.95rem;
	letter-spacing: 0.2px;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;

	transition:
		background-position 0.6s ease,
		transform 0.35s ease,
		box-shadow 0.35s ease;

	box-shadow:
		0 8px 24px rgba(124, 58, 237, 0.28);
}

/* Hover = déplacement du dégradé */
.myd-btn-gradient:hover {
	background-position: right center;
	transform: translateY(-3px);

	box-shadow:
		0 18px 42px rgba(124, 58, 237, 0.45);
}

/* Active */
.myd-btn-gradient:active {
	transform: translateY(-1px);
	box-shadow:
		0 10px 26px rgba(124, 58, 237, 0.35);
}
/* ======================================================
   EFFET LUMIÈRE PREMIUM (VOILE RAPIDE)
====================================================== */

.myd-btn-gradient {
	overflow: hidden; /* indispensable */
}

.myd-btn-gradient::after {
	content: "";
	position: absolute;
	top: -50%;
	left: -75%;
	width: 50%;
	height: 200%;

	background: linear-gradient(
		120deg,
		transparent 0%,
		rgba(255, 255, 255, 0.45) 50%,
		transparent 100%
	);

	transform: skewX(-20deg);
	opacity: 0;
	pointer-events: none;
}

/* Déclenchement au hover */
.myd-btn-gradient:hover::after {
	filter: blur(2px);
	animation: myd-sheen 0.65s ease forwards;
}

@keyframes myd-sheen {
	0% {
		left: -75%;
		opacity: 0;
	}
	20% {
		opacity: 1;
	}
	100% {
		left: 130%;
		opacity: 0;
	}
}







/* ===========================
   BADGE MYDIGITALIZE SHORTCODE
=========================== */

.myd-badge {
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-radius: 9999px;
	white-space: nowrap;
}

.myd-badge-icon {
	font-size: 1rem;
	line-height: 1;
}

.myd-badge-text {
	line-height: 1;
}

#cmplz-document, .editor-styles-wrapper .cmplz-unlinked-mode {
    margin: auto;
}

/* ===========================
   MYDIGITALIZE – Mentions légales
=========================== */


.myd-legal * {
  box-sizing: border-box;
}

.myd-legal {
  font-family: Inter, system-ui, sans-serif;
  background: #F8FAFC;
}

/* Cartes */
.myd-legal section {
  background: #ffffff !important;
  border-radius: 1.25rem !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 10px 30px rgba(15,23,42,0.06) !important;
  overflow: hidden;
}

/* Headers de section */
.myd-legal section > div:first-child {
  background: linear-gradient(to right, #fff, #f8fafc) !important;
}

/* Icônes rondes */
.myd-legal .icon-wrap {
  background: rgba(225,29,72,.1) !important;
  color: #E11D48 !important;
}

/* Titres */
.myd-legal h1,
.myd-legal h2 {
  color: #0F172A !important;
}

/* Paragraphes */
.myd-legal p {
  color: #475569 !important;
  line-height: 1.7;
}

/* Badges / encadrés */
.myd-legal .info-box {
  background: #F8FAFC !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 0.75rem;
}

/* Mobile */
@media (max-width: 768px) {
  .myd-legal section {
    border-radius: 1rem !important;
  }
}




















/* ======================================================
   TEMPLATE ELEMENTOR – MYDIGITALIZE
====================================================== */

.myd-page {
	position: relative;
	width: 100%;
	overflow-x: hidden;
}

/* Neutralise les marges WP */
.myd-page > .elementor {
	margin: 0;
	padding: 0;
}

/* Sections Elementor respirantes */
.elementor-section {
	position: relative;
}

/* Cohérence typographique */
.elementor-widget-heading h1,
.elementor-widget-heading h2,
.elementor-widget-heading h3 {
	line-height: 1.2;
}












/* ======================================================
   GRID DEV. ELEMENTOR
====================================================== */


.myd-realisations-grid {
	display: grid;
	gap: 2rem;
}








/* ======================================================
   FIX COMPLIANZ – VISIBILITÉ BANNIÈRE
====================================================== */


.cmplz-cookiebanner,
.cmplz-manage-consent {
	position: fixed !important;
	z-index: 99999 !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
}

body.cmplz-hide-banner .cmplz-cookiebanner {
	display: block !important;
}






/* ==================================================
   ARTICLE LAYOUT
================================================== */

.myd-article {
	background: #fff;
}

.myd-article-body {
	padding: 5rem 0;
}

.article-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 4rem;
	align-items: start;
}

/* Responsive */
@media (max-width: 1024px) {
	.article-layout {
		grid-template-columns: 1fr;
	}
}

/* ==================================================
   HERO
================================================== */

.myd-article-hero {
	padding: 5rem 0 3rem;
	background: linear-gradient(180deg,#f8fafc,#ffffff);
}

.container.narrow {
	max-width: 820px;
	margin: auto;
}

.back-link {
	display: inline-block;
	margin-bottom: 1.5rem;
	font-size: .85rem;
	color: #64748b;
}

.article-category {
	display: inline-block;
	background: #eef2ff;
	color: #4338ca;
	padding: .3rem .75rem;
	border-radius: 999px;
	font-size: .75rem;
	margin-bottom: 1rem;
}

.myd-article-hero h1 {
	font-size: clamp(2.2rem, 5vw, 3rem);
	margin-bottom: 1rem;
}

.article-meta {
	display: flex;
	gap: 1.5rem;
	font-size: .85rem;
	color: #64748b;
	margin-bottom: 2rem;
}

.article-hero-image img {
	width: 100%;
	border-radius: 18px;
	margin-bottom: 2rem;
}

.article-intro {
	font-size: 1.1rem;
	line-height: 1.7;
	color: #475569;
}

/* ==================================================
   CONTENT
================================================== */

.article-content {
	max-width: 820px;
}

/* Typo */
.article-content h2 {
	font-size: 1.6rem;
	margin: 3rem 0 1rem;
}

.article-content h3 {
	font-size: 1.3rem;
	margin: 2.5rem 0 1rem;
}

.article-content p {
	line-height: 1.75;
	color: #334155;
	margin-bottom: 1.25rem;
}

/* ==================================================
   SIDEBAR
================================================== */

.article-sidebar {
	position: sticky;
	top: 120px;
}

.article-sidebar h3 {
	font-size: 1rem;
	margin-bottom: 1rem;
}

.article-related {
	list-style: none;
	padding: 0;
}

.article-related li {
	margin-bottom: .75rem;
}

.article-related a {
	color: #2563eb;
	font-size: .9rem;
	text-decoration: none;
}

/* ==================================================
   BLOCKS (LIBRAIRIE)
================================================== */

/* Insight */
.article-insight {
	display: flex;
	gap: 1rem;
	padding: 1.5rem;
	border-radius: 16px;
	margin: 2.5rem 0;
}

.article-insight.is-blue { background: #eff6ff; }
.article-insight.is-purple { background: #f5f3ff; }
.article-insight.is-pink { background: #fdf2f8; }

.article-insight .icon {
	font-size: 1.5rem;
}

/* Cards */
.article-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
	gap: 1.5rem;
	margin: 2.5rem 0;
}

.article-cards .card {
	padding: 1.5rem;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

/* Actions */
.article-actions {
	background: #f8fafc;
	padding: 2rem;
	border-radius: 20px;
	margin: 3rem 0;
}

/* Conclusion */
.article-conclusion {
	margin: 4rem 0;
	padding: 2.5rem;
	border-radius: 20px;
	background: linear-gradient(135deg,#2563eb,#7c3aed);
	color: #fff;
}


/* OBJET */

.myd-block {
	border-radius: 20px;
	padding: 2rem;
	margin: 3rem 0;
	position: relative;
}

.myd-info {
	background: linear-gradient(135deg,#eff6ff,#eef2ff);
	border-left: 5px solid #6366f1;
}

.myd-info h4 {
	margin-bottom: .75rem;
	color: #1e1b4b;
}


.myd-warning {
	background: linear-gradient(135deg,#fff7ed,#ffedd5);
	border-left: 5px solid #f97316;
}

.myd-warning h4 {
	color: #9a3412;
}


.myd-quote {
	font-size: 1.3rem;
	line-height: 1.6;
	margin: 4rem 0;
	padding-left: 2rem;
	border-left: 4px solid #6366f1;
	color: #0f172a;
}

.myd-quote span {
	display: block;
	margin-top: 1rem;
	font-size: .9rem;
	color: #64748b;
}


.myd-takeaway {
	background: linear-gradient(135deg,#f0fdf4,#dcfce7);
	border-left: 5px solid #22c55e;
}

.myd-takeaway ul {
	margin: 0;
	padding-left: 1.2rem;
}

.myd-cta {
	background: linear-gradient(135deg,#2563eb,#7c3aed);
	color: #fff;
	text-align: center;
}

.myd-cta .myd-btn-outline {
	border-color: #fff;
	color: #fff;
}



/* =========================================
   FIX GRID FOOTER (override thème global)
========================================= */

footer .grid {
	display: grid !important;
}
footer > div.grid {
	display: grid !important;
	grid-auto-flow: row;
}
/* =========================================
   RESET LAYOUT POUR LE FOOTER (NUCLÉAIRE)
========================================= */

footer,
footer * {
	box-sizing: border-box;
}

footer {
	display: block !important;
	width: 100%;
}

footer > div {
	display: grid !important;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 3rem;
}

/* Tablette */
@media (min-width: 768px) {
	footer > div {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Desktop */
@media (min-width: 1024px) {
	footer > div {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* =========================================
   FIX ICÔNES SOCIALES FOOTER
========================================= */

footer svg {
	display: block !important;
	width: 20px;
	height: 20px;
	color: currentColor;
}

footer a > svg {
	pointer-events: none;
}
footer .myd-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 9999px;
	background: rgb(31 41 55); /* gray-800 */
	transition: background 0.3s ease, transform 0.2s ease;
}

footer .myd-social a:hover {
	transform: translateY(-2px);
}
.footer-brand {
	background: linear-gradient(
		to right,
		#60a5fa,
		#c084fc,
		#f472b6
	);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
}



/* =========================================
   ZOOM 
========================================= */
.zoom7{
zoom: 0.7;
}