/* ==========================================================================
   Oh My Disco - CSS Custom
   Theme FSE sur-mesure
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base & Reset
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img {
	max-width: 100%;
	height: auto;
}

/* --------------------------------------------------------------------------
   2. Boutons — Style disco pill
   -------------------------------------------------------------------------- */

.wp-element-button,
.wp-block-button__link,
.wc-block-components-button {
	border-radius: 50px !important;
	padding: 0.75rem 2rem;
	font-family: var(--wp--preset--font-family--rubik);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	transition: all 0.3s ease;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
}

.wp-element-button:hover,
.wp-block-button__link:hover,
.wc-block-components-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(253, 200, 91, 0.35);
}

/* Bouton primary (jaune) */
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--light);
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background-color: #e8b644;
}

/* Bouton outline (violet) */
.wp-block-button.is-style-outline .wp-block-button__link {
	border: 2px solid var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--secondary);
	background: transparent;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--light);
}

/* --------------------------------------------------------------------------
   3. Header & Navigation
   -------------------------------------------------------------------------- */

.wp-block-navigation a {
	text-decoration: none;
	position: relative;
}

.wp-block-navigation a::after {
	content: "";
	position: absolute;
	bottom: -4px;
	left: 50%;
	width: 0;
	height: 2px;
	background-color: var(--wp--preset--color--primary);
	transition: width 0.3s ease, left 0.3s ease;
}

.wp-block-navigation a:hover::after {
	width: 100%;
	left: 0;
}

/* Separateurs nav "|" */
.wp-block-navigation .wp-block-navigation-item:not(:last-child)::after {
	content: "|";
	margin-left: 1rem;
	color: var(--wp--preset--color--secondary);
	font-weight: 300;
}

/* --------------------------------------------------------------------------
   4. Cards (articles, produits)
   -------------------------------------------------------------------------- */

.has-light-bg-background-color {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.has-light-bg-background-color:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(194, 175, 214, 0.2);
}

/* --------------------------------------------------------------------------
   5. Sections colorees (fond violet lavande)
   -------------------------------------------------------------------------- */

.has-secondary-background-color {
	color: var(--wp--preset--color--light);
}

.has-secondary-background-color h2,
.has-secondary-background-color h3 {
	color: var(--wp--preset--color--light);
}

/* --------------------------------------------------------------------------
   6. WooCommerce
   -------------------------------------------------------------------------- */

/* Prix */
.wc-block-components-product-price,
.woocommerce .price {
	font-family: var(--wp--preset--font-family--rubik);
	font-weight: 700;
	color: var(--wp--preset--color--dark);
}

/* Bouton ajout panier */
.wc-block-components-product-button .wp-element-button,
.woocommerce .button.add_to_cart_button,
.woocommerce .single_add_to_cart_button {
	background-color: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--light) !important;
	border-radius: 50px !important;
}

.wc-block-components-product-button .wp-element-button:hover,
.woocommerce .button.add_to_cart_button:hover,
.woocommerce .single_add_to_cart_button:hover {
	background-color: #e8b644 !important;
}

/* Badge promo */
.woocommerce .onsale,
.wc-block-components-sale-badge {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--light);
	border-radius: 50px;
	font-family: var(--wp--preset--font-family--rubik);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.75rem;
}

/* Quantity input */
.woocommerce .quantity .qty {
	border: 2px solid var(--wp--preset--color--violet-light);
	border-radius: 8px;
	padding: 0.5rem;
	font-family: var(--wp--preset--font-family--rubik);
}

/* Tabs produit */
.woocommerce-tabs .wc-tab {
	font-family: var(--wp--preset--font-family--roboto);
}

.woocommerce-tabs ul.tabs li.active a {
	color: var(--wp--preset--color--primary);
	border-bottom-color: var(--wp--preset--color--primary);
}

/* Mini cart */
.wc-block-mini-cart__button {
	color: var(--wp--preset--color--dark);
}

/* --------------------------------------------------------------------------
   7. Blog — Contenu articles
   -------------------------------------------------------------------------- */

.entry-content h2,
.wp-block-post-content h2 {
	margin-top: 2.5rem;
	margin-bottom: 1rem;
}

.entry-content h3,
.wp-block-post-content h3 {
	margin-top: 2rem;
	margin-bottom: 0.75rem;
}

/* TLDR / Encart resume */
.wp-block-post-content .tldr-box,
.wp-block-group.is-style-tldr {
	background: var(--wp--preset--color--violet-light);
	border-left: 4px solid var(--wp--preset--color--secondary);
	border-radius: 5px;
	padding: 1.5rem 1.75rem;
	margin: 1.5rem 0;
}

/* Blockquote */
.wp-block-quote {
	border-left: 4px solid var(--wp--preset--color--secondary);
	padding-left: 1.5rem;
	font-style: italic;
	color: var(--wp--preset--color--violet-dark);
}

/* Tables */
.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table th {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--light);
	font-family: var(--wp--preset--font-family--rubik);
	font-weight: 600;
	padding: 0.75rem 1rem;
}

.wp-block-table td {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--wp--preset--color--violet-light);
}

.wp-block-table tr:hover td {
	background-color: var(--wp--preset--color--light-bg);
}

/* --------------------------------------------------------------------------
   8. FAQ / Accordeon
   -------------------------------------------------------------------------- */

details {
	border-bottom: 1px solid var(--wp--preset--color--violet-light);
	padding: 1rem 0;
}

details summary {
	font-family: var(--wp--preset--font-family--rubik);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

details summary::before {
	content: "+";
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--wp--preset--color--secondary);
	min-width: 1.5rem;
	text-align: center;
	transition: transform 0.3s ease;
}

details[open] summary::before {
	content: "−";
	color: var(--wp--preset--color--primary);
}

details summary::-webkit-details-marker {
	display: none;
}

/* --------------------------------------------------------------------------
   9. Forms (contact, recherche)
   -------------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
textarea,
select {
	border: 2px solid var(--wp--preset--color--violet-light);
	border-radius: 8px;
	padding: 0.75rem 1rem;
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 1rem;
	transition: border-color 0.3s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
	border-color: var(--wp--preset--color--secondary);
	outline: none;
	box-shadow: 0 0 0 3px rgba(194, 175, 214, 0.25);
}

/* --------------------------------------------------------------------------
   10. Footer
   -------------------------------------------------------------------------- */

footer .wp-block-social-links a {
	transition: transform 0.3s ease;
}

footer .wp-block-social-links a:hover {
	transform: scale(1.15);
}

/* --------------------------------------------------------------------------
   11. Scroll animations (subtle)
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.wp-block-post-template > li,
	.wc-block-grid__product {
		animation: fadeInUp 0.4s ease both;
	}

	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(16px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
}

/* --------------------------------------------------------------------------
   12. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
	.wp-block-columns {
		flex-direction: column !important;
	}

	.wp-block-navigation .wp-block-navigation-item:not(:last-child)::after {
		display: none;
	}

	.wp-element-button,
	.wp-block-button__link {
		padding: 0.65rem 1.5rem;
		font-size: 0.8rem;
	}

	.wp-block-table {
		overflow-x: auto;
		display: block;
	}
}

/* --------------------------------------------------------------------------
   13. Print
   -------------------------------------------------------------------------- */

@media print {
	header,
	footer,
	.wp-block-navigation,
	.wc-block-mini-cart {
		display: none !important;
	}

	body {
		font-size: 12pt;
		color: #000;
	}
}

/* --------------------------------------------------------------------------
   14. Marquee "Shine bright"
   -------------------------------------------------------------------------- */

@keyframes slide {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

.omd-marquee-track {
	display: flex;
	width: max-content;
	animation: 30s slide infinite linear;
}

.omd-marquee-item {
	font-family: var(--wp--preset--font-family--rubik);
	font-size: clamp(0.85rem, 1.8vw, 1rem);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #fff;
	white-space: nowrap;
	padding: 0 0.6rem;
}

.omd-marquee-sep {
	color: rgba(255,255,255,0.6);
	padding: 0 0.6rem;
	font-size: clamp(0.75rem, 1.5vw, 0.9rem);
}

/* --------------------------------------------------------------------------
   15. Selecteur de taille boules a facettes
   -------------------------------------------------------------------------- */

.omd-size-selector {
	--accent: #C2AFD6;
	--cta: #FDC85B;
	--border: #eee;
	--text: #111;
	--muted: #666;
	--gap: clamp(.75rem, 1.2vw, 1rem);
	--radius: 14px;
	--shadow: 0 10px 30px rgba(0, 0, 0, .07);
	color: var(--text);
	font: normal 16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
	max-width: min(760px, 100%);
	margin: 0 auto;
	padding: 0;
}

.omd-size-selector * {
	box-sizing: border-box;
}

/* Slider */
.omd-slider-wrap {
	margin: 0 0 .75rem;
}

#omdRange {
	width: 100%;
	appearance: none;
	background: transparent;
	height: 2rem;
	--track-bg: #e9e9e9;
	--progress: 50%;
	background: linear-gradient(var(--accent), var(--accent)) 0/var(--progress) 6px no-repeat, var(--track-bg);
	border-radius: 999px;
}

#omdRange:focus {
	outline: none;
}

#omdRange::-webkit-slider-runnable-track {
	height: 6px;
	background: transparent;
	border-radius: 999px;
}

#omdRange::-webkit-slider-thumb {
	appearance: none;
	width: 18px;
	height: 18px;
	margin-top: -6px;
	border-radius: 50%;
	background: var(--accent);
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
	cursor: pointer;
}

#omdRange::-moz-range-track {
	height: 6px;
	background: var(--track-bg);
	border-radius: 999px;
}

#omdRange::-moz-range-progress {
	height: 6px;
	background: var(--accent);
	border-radius: 999px;
}

#omdRange::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--accent);
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
	cursor: pointer;
}

.omd-ticks {
	display: flex;
	justify-content: space-between;
	font-size: .9rem;
	color: #C2AFD6;
	margin-top: .35rem;
}

.omd-ticks span {
	cursor: pointer;
	user-select: none;
	padding: .1rem .25rem;
	border-radius: 6px;
}

.omd-ticks span:hover {
	background: rgba(194, 175, 214, .15);
}

/* Carte produit selecteur */
.omd-size-selector .omd-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: var(--gap);
	align-items: stretch;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: var(--gap);
}

.omd-size-selector .omd-media {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	background: #f8f8f8;
}

.omd-size-selector .omd-media img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 1/1 !important;
	object-fit: cover;
}

.omd-size-selector .omd-badge {
	position: absolute;
	left: .75rem;
	top: .75rem;
	background: #fff;
	border: 1px solid var(--border);
	padding: .35rem .6rem;
	border-radius: 999px;
	font-size: .8rem;
}

.omd-size-selector .omd-info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
}

.omd-size-selector .omd-info h3 {
	margin: 0 0 .4rem;
	font-family: 'Rubik', sans-serif;
	font-size: 17px;
	font-weight: 700;
	text-transform: uppercase;
}

.omd-meta {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: .25rem 0 .5rem;
}

.omd-chip {
	background: #f1f1f1;
	border-radius: 999px;
	padding: .25rem .6rem;
	font-size: .92rem;
	white-space: nowrap;
}

.omd-price {
	display: block;
	font-weight: 700;
	font-size: 1.1rem;
	margin: 0 0 .8rem;
}

.omd-size-selector .omd-cta {
	display: flex;
	gap: .75rem;
	flex-wrap: wrap;
	align-items: center;
}

.omd-size-selector .omd-btn {
	appearance: none;
	border: none;
	background: var(--cta);
	color: #fff !important;
	font-weight: 600;
	padding: .6rem 1rem;
	border-radius: 12px;
	text-decoration: none;
	display: inline-block;
	transition: .2s ease;
}

.omd-size-selector .omd-btn:hover {
	opacity: .9;
	color: #fff !important;
}

.omd-size-selector .omd-btn.disabled {
	background: #ccc !important;
	color: #fff !important;
	pointer-events: none;
	opacity: .7;
}

.omd-note {
	color: var(--muted);
	font-size: .92rem;
	margin: .6rem 0 0;
}

@media (max-width: 860px) {
	.omd-size-selector .omd-card {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 420px) {
	.omd-size-selector .omd-cta {
		flex-direction: column;
		align-items: stretch;
	}

	.omd-size-selector .omd-btn {
		width: 100%;
		text-align: center;
	}
}

/* --------------------------------------------------------------------------
   16. Timeline sur-mesure
   -------------------------------------------------------------------------- */

.omd-custom {
	--accent: #C2AFD6;
	--cta: #FDC85B;
	--text: #111;
	--muted: #666;
	--border: #eee;
	padding: 2rem 1.5rem;
	background: #f7f3fb;
	border-radius: 20px;
	margin: 2rem auto;
	max-width: 900px;
	font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
}

.omd-custom-head {
	text-align: center;
	margin-bottom: 2rem;
}

.omd-custom-head h2 {
	margin: 0 0 .5rem;
	font-size: 1.8rem;
	font-weight: 800;
}

.omd-custom-head p {
	margin: 0;
	color: var(--muted);
}

.omd-steps-vertical {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

.omd-steps-vertical::before {
	content: "";
	position: absolute;
	left: 18px;
	top: 0;
	bottom: 0;
	width: 4px;
	background: linear-gradient(var(--accent), #e3d8f2);
	border-radius: 2px;
}

.omd-step {
	position: relative;
	display: flex;
	gap: 1rem;
	margin-bottom: 2rem;
}

.omd-step:last-child {
	margin-bottom: 0;
}

.omd-step-badge {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	background: var(--accent);
	color: #fff;
	font-weight: 700;
	border-radius: 50%;
	position: relative;
	z-index: 1;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
}

.omd-step-card {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 1rem;
	flex: 1;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
}

.omd-step-card h3 {
	margin: .2rem 0 .5rem;
	font-size: 1.1rem;
	font-weight: 700;
}

.omd-step-card p {
	margin: 0;
	color: var(--text);
}

.omd-custom-cta {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	justify-content: center;
	margin-top: 2rem;
}

.omd-custom .omd-btn {
	background: var(--cta);
	color: #fff !important;
	font-weight: 700;
	padding: .8rem 1.2rem;
	border-radius: 12px;
	text-decoration: none;
	transition: .2s;
}

.omd-custom .omd-btn:hover {
	opacity: .9;
}

/* --------------------------------------------------------------------------
   17. Encart produit DIY (sticker block)
   -------------------------------------------------------------------------- */

.omd-sticker-block {
	font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
	max-width: 860px;
	margin: 2rem auto;
	padding: 0 1rem;
}

.omd-sticker-block .omd-card {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
	overflow: hidden;
	gap: 1.5rem;
	padding: 1.5rem;
	align-items: center;
}

.omd-sticker-block .omd-media {
	position: relative;
	background: #f9f9f9;
	border-radius: 10px;
	overflow: hidden;
}

.omd-sticker-block .omd-media img {
	width: 100%;
	display: block;
	object-fit: cover;
	border-radius: 10px;
}

.omd-sticker-block .omd-badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	background: #fff;
	color: #111;
	font-weight: 600;
	font-size: 0.8rem;
	padding: 0.35rem 0.7rem;
	border-radius: 999px;
	border: 1px solid #eee;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.omd-sticker-block .omd-info {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.omd-sticker-block .omd-title {
	font-size: 1.2rem;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 0.6rem;
}

.omd-sticker-block .omd-desc {
	font-size: 1rem;
	margin-bottom: 1rem;
	line-height: 1.6;
	color: #111;
}

.omd-sticker-block .omd-cta {
	margin-top: auto;
}

.omd-sticker-block .omd-btn {
	display: inline-block;
	background-color: #FDC85B;
	color: #ffffff !important;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.95rem;
	padding: 0.55rem 1.4rem;
	border: none;
	border-radius: 999px;
	text-decoration: none;
	transition: 0.2s ease;
	line-height: 1.2;
}

.omd-sticker-block .omd-btn:hover {
	opacity: 0.9;
}

@media (max-width: 768px) {
	.omd-sticker-block .omd-card {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.omd-sticker-block .omd-btn {
		width: 100%;
	}
}
/* ==========================================================================
   OH MY DISCO — CSS extracted from Elementor pages
   Organized by page and section
   ========================================================================== */


/* ==========================================================================
   PAGE: À PROPOS
   ========================================================================== */

/* --- Section: Hero (omd-ap-hero) --- */

.omd-ap-hero{--accent:#C2AFD6;--border:#eee;--shadow:0 12px 36px rgba(0,0,0,.08);background:#fff}
.omd-ap-hero-inner{display:grid;gap:1.2rem;grid-template-columns:1fr 1.3fr;align-items:center;max-width:1000px;margin:0 auto;padding:1.5rem 1rem;font:16px/1.55 system-ui,Roboto,Inter,sans-serif;color:#111}
@media(max-width:860px){.omd-ap-hero-inner{grid-template-columns:1fr}}
.omd-ap-hero-photo{margin:0;border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);background:#fafafa}
.omd-ap-hero-photo img{width:100%;display:block;aspect-ratio:4/5;object-fit:cover}
.omd-ap-hero-text .kicker{display:inline-block;background:rgba(194,175,214,.18);color:#5a4c6e;font-weight:700;border-radius:999px;padding:.35rem .7rem;margin-bottom:.5rem}
.omd-ap-hero-text h2{margin:.1rem 0 .6rem;font:800 1.5rem/1.25 'Rubik',sans-serif}


/* --- Section: Timeline (omd-ap-timeline) --- */

.omd-ap-timeline, .omd-ap-timeline * { box-sizing:border-box }
.omd-ap-timeline{
  --accent:#C2AFD6; --border:#eee; --text:#111;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --date-col:120px;
  background:#fff; color:var(--text);
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  max-width:900px; margin:0 auto; padding:1rem 1rem 2rem;
}
.omd-ap-timeline h2{
  margin:0 0 1.4rem; text-align:center;
  font:800 1.4rem/1.25 'Rubik',sans-serif;
}

.omd-rows{ list-style:none; margin:0; padding:0; display:grid; gap:1.2rem }
.omd-row{
  display:grid;
  grid-template-columns: var(--date-col) 1fr;
  gap:1rem; align-items:center; position:relative;
}

.omd-date{
  display:flex; align-items:center; justify-content:center;
  min-height:84px; padding:.4rem .5rem; text-align:center;
  background:rgba(194,175,214,.18); color:#4f4560; font-weight:800;
  border-radius:16px; border:1px solid #e9e2f3;
  box-shadow:0 6px 22px rgba(0,0,0,.05) inset;
  position:relative; z-index:1;
}
.omd-date span{ line-height:1.1 }

.omd-date::after{
  content:""; position:absolute; top:50%; left:100%;
  width:16px; height:4px; margin-left:.5rem;
  transform:translateY(-50%);
  background:linear-gradient(90deg, var(--accent), #e3d8f2);
  border-radius:2px;
}

.omd-card{
  background:#fff; border:1px solid var(--border); border-radius:14px;
  padding:1rem; box-shadow:var(--shadow);
}
.omd-card h3{ margin:.1rem 0 .45rem; font:800 1.12rem/1.25 'Rubik',sans-serif }
.omd-card p{ margin:0; color:#222 }

@media (max-width:560px){
  .omd-row{ grid-template-columns:1fr; gap:.6rem; align-items:start }
  .omd-date{ min-height:auto; width:max-content; padding:.35rem .6rem }
  .omd-date::after{ display:none }
}


/* --- Section: Atelier Gallery (omd-atelier-v2) --- */

.omd-atelier-v2{
  --accent:#C2AFD6; --cta:#FDC85B; --text:#111; --muted:#666; --border:#eee;
  --radius:18px; --shadow:0 12px 36px rgba(0,0,0,.08);
  background:#fff; color:var(--text);
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  max-width:1100px; margin:0 auto; padding:clamp(1.2rem,2.2vw,1.8rem) 1rem;
}

.omd-at2-inner{
  display:grid; gap:clamp(1rem,2.2vw,1.5rem);
  grid-template-columns:1.05fr 1.35fr; align-items:start;
}
@media (max-width: 920px){ .omd-at2-inner{ grid-template-columns:1fr } }

.omd-at2-text{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:clamp(1rem,2vw,1.25rem); position:relative;
}
.omd-at2-text .kicker{
  display:inline-block; background:rgba(194,175,214,.18); color:#5a4c6e;
  font-weight:700; border-radius:999px; padding:.35rem .7rem; margin-bottom:.55rem;
}
.omd-at2-text h2{
  margin:.1rem 0 .6rem; font:800 clamp(1.1rem,1.1vw + .9rem,1.5rem)/1.25 'Rubik',sans-serif;
}
.omd-at2-text .lead{ margin:0 0 .85rem; color:#333 }
.omd-at2-text .bullets{ margin:.2rem 0 0; padding:0 0 0 1.1rem }
.omd-at2-text .bullets li{ margin:.25rem 0 }

.omd-at2-gallery{
  display:grid; gap:clamp(.7rem,1.2vw,1rem);
  grid-template-columns:repeat(2, minmax(0,1fr));
}
.omd-at2-gallery .ph{
  margin:0; border:1px solid var(--border); border-radius:16px; overflow:hidden;
  background:#fafafa; box-shadow:var(--shadow);
}
.omd-at2-gallery .ph img{
  width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:4/5;
}
.omd-at2-gallery .ph.tall img{ aspect-ratio:3/4 }
.omd-at2-gallery .ph.wide img{ aspect-ratio:16/9 }

@media (max-width: 560px){
  .omd-at2-gallery{ grid-template-columns:1fr }
}


/* --- Section: Values (omd-ap-values) --- */

.omd-ap-values{--border:#eee;--shadow:0 10px 30px rgba(0,0,0,.06);max-width:1000px;margin:0 auto;padding:1rem;font:16px/1.55 system-ui,Roboto,Inter;color:#111;background:#fff}
.omd-ap-values h2{font:700 1.35rem 'Rubik',sans-serif;margin:0 0 .8rem}
.omd-ap-values .cards{display:grid;gap:1rem;grid-template-columns:repeat(4,minmax(0,1fr))}
.omd-ap-values .card{background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:1rem}
.omd-ap-values h3{margin:.1rem 0 .4rem;font:700 1.05rem 'Rubik',sans-serif;text-transform:uppercase}
@media(max-width:980px){.omd-ap-values .cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.omd-ap-values .cards{grid-template-columns:1fr}}


/* ==========================================================================
   PAGE: CONTACT
   ========================================================================== */

/* --- Section: Contact Simple (omd-contact-simple) --- */

.omd-contact-simple{
  --accent:#C2AFD6; --cta:#FDC85B; --text:#111; --muted:#666; --border:#eee;
  --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.08);
  font:normal 16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif; color:var(--text);
  max-width:800px; margin:0 auto; padding:clamp(1.5rem,2.5vw,2rem) 1rem;
}

.omd-contact-head{text-align:center; margin-bottom:2rem}
.omd-contact-head h1{
  margin:0 0 .6rem;
  font-weight:800; font-size:clamp(1.6rem,1.3vw + 1rem,2.2rem);
  font-family:'Rubik',sans-serif;
}
.omd-contact-head p{margin:0; color:var(--muted)}

.omd-contact-cards{
  display:grid; gap:1.2rem;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}

.omd-contact-simple .omd-card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:1.2rem; text-align:center;
}
.omd-contact-simple .omd-card h2{
  margin:0 0 .5rem; font:700 18px/1.2 'Rubik',sans-serif; color:var(--text);
  font-size:18px;
}
.omd-contact-simple .omd-card p{margin:0; font-size:1rem}
.omd-contact-simple .omd-card a{
  color:var(--accent); font-weight:600; text-decoration:none;
}
.omd-contact-simple .omd-card a:hover{color:var(--cta)}

.omd-contact-about{
  margin-top:2rem; text-align:center; font-size:1rem; color:var(--muted);
}
.omd-contact-about a.omd-btn-link{
  display:inline-block; margin-top:.4rem;
  color:#fff; background:var(--cta); font-weight:700;
  padding:.55rem 1rem; border-radius:12px; text-decoration:none; transition:.2s;
}
.omd-contact-about a.omd-btn-link:hover{opacity:.9}


/* ==========================================================================
   PAGE: CREATIONS A FACETTES
   ========================================================================== */

/* --- Section: Timeline Horizontal (omd-custom-h) --- */

.omd-custom-h{
  --accent:#C2AFD6; --text:#111; --muted:#666; --border:#eee;
  --gap:clamp(.8rem,1.4vw,1.2rem);
  padding:2rem 1.5rem; margin:2rem auto; max-width:1100px;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif; color:var(--text);
}
.omd-custom-head{max-width:900px; margin:0 auto 1.5rem; text-align:center}
.omd-custom-head h2{margin:0 0 .5rem; font-weight:800; font-size:clamp(1.4rem,1.2vw + 1rem,2rem)}
.omd-custom-head p{margin:0; color:var(--muted)}

.omd-steps-h{
  list-style:none; margin:0; padding:0; position:relative;
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(4, minmax(0, 1fr));
}

.omd-connector{
  position:absolute; top:22px; height:4px; border-radius:999px;
  background:linear-gradient(90deg, var(--accent), #e3d8f2);
  pointer-events:none; z-index:0;
}

.omd-step{position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:.6rem; z-index:1}
.omd-step-badge{
  width:44px; height:44px; display:grid; place-items:center;
  background:var(--accent); color:#fff; font-weight:700; border:2px solid #fff;
  border-radius:50%; box-shadow:0 6px 20px rgba(0,0,0,.08);
}
.omd-step-card{
  background:#fff; border:1px solid var(--border); border-radius:16px;
  padding:1rem; box-shadow:0 10px 30px rgba(0,0,0,.06);
}
.omd-step-card h3{margin:.1rem 0 .45rem; font-size:1.05rem; font-weight:700}
.omd-step-card p{margin:0; color:var(--text); font-size:.98rem}

@media (max-width: 980px){
  .omd-steps-h{grid-template-columns:repeat(2, minmax(0,1fr))}
  .omd-connector{display:none}
}
@media (max-width: 560px){
  .omd-steps-h{grid-template-columns:1fr}
}


/* --- Section: Contact Creation Box (replacement for Elementor form) --- */

.omd-contact-creation-box{
  max-width:700px; margin:2rem auto;
  padding:2rem; text-align:center;
  background:rgba(194,175,214,.12);
  border:1px solid #e9e2f3;
  border-radius:18px;
}


/* --- Section: About Vertical (omd-about-vertical) --- */

.omd-about-vertical{
  --accent:#C2AFD6; --cta:#FDC85B; --text:#111; --muted:#666; --border:#eee;
  --radius:18px; --shadow:0 12px 36px rgba(0,0,0,.08);
  background:#fff; color:var(--text);
  font:normal 16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  max-width:960px; margin:0 auto; padding:clamp(1.5rem,2.8vw,2.5rem) 1rem;
}

.omd-av-head{text-align:center; max-width:780px; margin:0 auto 1.8rem}
.omd-kicker{display:inline-block; font-weight:700; background:rgba(194,175,214,.18); color:#5a4c6e; border-radius:999px; padding:.35rem .7rem; margin-bottom:.6rem}
.omd-av-head h2{margin:.1rem 0 .6rem; font-weight:800; font-size:clamp(1.35rem,1.1vw + 1rem,1.9rem)}
.omd-lead{margin:0; color:#333}

.omd-av-hero{display:grid; gap:1.2rem; grid-template-columns:1fr; margin:1.6rem 0 2.2rem}
.omd-hero-photo{
  margin:0; border:1px solid var(--border); border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow); background:#fafafa;
  max-width:380px;
}
.omd-hero-photo img{width:100%; height:auto; display:block; object-fit:cover}
.omd-hero-photo figcaption{font-size:.9rem; color:var(--muted); padding:.5rem .75rem}
.omd-hero-text h3{margin:.2rem 0 .5rem; font-weight:800; font-size:1.15rem}
.omd-hero-text p{margin:0 0 .8rem}
.omd-tags{display:flex; gap:.45rem; flex-wrap:wrap; padding:0; margin:0; list-style:none}
.omd-tags li{background:#f6f6f6; border:1px solid var(--border); border-radius:999px; padding:.28rem .6rem; font-size:.92rem; white-space:nowrap}

.omd-av-gallery{
  display:grid; gap:1rem; margin:1.4rem 0 2rem;
  grid-template-columns:repeat(3, minmax(0,1fr));
}
.omd-g-item{margin:0; border:1px solid var(--border); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); background:#fafafa}
.omd-g-item img{width:100%; height:100%; display:block; object-fit:cover; aspect-ratio:4/5}
.omd-g-item.tall img{aspect-ratio:3/4}
.omd-g-item.wide img{aspect-ratio:16/9}
.omd-g-item figcaption{font-size:.9rem; color:var(--muted); padding:.5rem .6rem}

@media (min-width: 860px){
  .omd-av-hero{grid-template-columns:.9fr 1.1fr; align-items:center}
}
@media (max-width: 820px){
  .omd-av-gallery{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width: 520px){
  .omd-av-gallery{grid-template-columns:1fr}
}

.omd-about-vertical h2, .omd-about-vertical h3{font-family:'Rubik', sans-serif}

/* --------------------------------------------------------------------------
   18. Hero Homepage — Disco Shine
   -------------------------------------------------------------------------- */

.omd-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #C2AFD6 0%, #EDE8F3 35%, #FDC85B 100%);
  text-align: center;
  padding: 4rem 1.5rem 3rem;
}

/* Animated sparkles background */
.omd-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 15% 20%, rgba(255,255,255,0.9) 50%, transparent 100%),
    radial-gradient(2px 2px at 75% 15%, rgba(255,255,255,0.8) 50%, transparent 100%),
    radial-gradient(3px 3px at 40% 70%, rgba(255,255,255,0.7) 50%, transparent 100%),
    radial-gradient(2px 2px at 85% 60%, rgba(255,255,255,0.9) 50%, transparent 100%),
    radial-gradient(2px 2px at 25% 85%, rgba(255,255,255,0.6) 50%, transparent 100%),
    radial-gradient(3px 3px at 60% 40%, rgba(255,255,255,0.8) 50%, transparent 100%),
    radial-gradient(2px 2px at 90% 80%, rgba(255,255,255,0.7) 50%, transparent 100%),
    radial-gradient(2px 2px at 50% 10%, rgba(255,255,255,0.9) 50%, transparent 100%);
  animation: omd-sparkle 4s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

@keyframes omd-sparkle {
  0%   { opacity: 0.4; transform: scale(1); }
  50%  { opacity: 1;   transform: scale(1.05); }
  100% { opacity: 0.5; transform: scale(0.98); }
}

.omd-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 750px;
  margin: 0 auto;
}

.omd-hero-disco-icon {
  font-size: clamp(3rem, 8vw, 5rem);
  display: block;
  margin-bottom: 0.5rem;
  animation: omd-bounce 2.5s ease-in-out infinite;
  filter: drop-shadow(0 4px 12px rgba(253, 200, 91, 0.4));
}

@keyframes omd-bounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-8px) rotate(-3deg); }
  75%      { transform: translateY(-4px) rotate(3deg); }
}

.omd-hero h1 {
  font-family: var(--wp--preset--font-family--spicy-rice);
  font-size: clamp(2.2rem, 6vw, 3.8rem);
  color: #333;
  line-height: 1.15;
  margin: 0 0 1rem;
  text-shadow: 2px 2px 0 rgba(255,255,255,0.6);
}

.omd-hero h1 .omd-hero-amp {
  display: block;
  font-family: var(--wp--preset--font-family--rubik);
  font-size: 0.45em;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--wp--preset--color--violet-dark);
  margin: 0.2em 0;
}

.omd-hero-subtitle {
  font-family: var(--wp--preset--font-family--rubik);
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  color: #333;
  max-width: 520px;
  margin: 0 auto 0.3rem;
  line-height: 1.6;
}

.omd-hero-subtitle strong {
  color: var(--wp--preset--color--violet-dark);
}

.omd-hero-tagline {
  font-family: var(--wp--preset--font-family--rubik);
  font-size: clamp(1.05rem, 2.5vw, 1.25rem);
  font-weight: 700;
  color: #333;
  margin: 0 auto 2rem;
}

.omd-hero-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.omd-hero-buttons .omd-btn-primary,
.omd-hero-buttons .omd-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.85rem 2rem;
  border-radius: 50px;
  font-family: var(--wp--preset--font-family--rubik);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.omd-hero-buttons .omd-btn-primary {
  background: var(--wp--preset--color--primary);
  color: #333;
}

.omd-hero-buttons .omd-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(253, 200, 91, 0.45);
}

.omd-hero-buttons .omd-btn-secondary {
  background: rgba(255,255,255,0.85);
  color: var(--wp--preset--color--violet-dark);
  border: 2px solid var(--wp--preset--color--secondary);
  backdrop-filter: blur(4px);
}

.omd-hero-buttons .omd-btn-secondary:hover {
  background: var(--wp--preset--color--secondary);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(194, 175, 214, 0.45);
}

@media (max-width: 600px) {
  .omd-hero { padding: 3rem 1rem 2.5rem; }
  .omd-hero-buttons { flex-direction: column; align-items: center; }
  .omd-hero-buttons a { width: 100%; max-width: 300px; justify-content: center; }
}

/* --------------------------------------------------------------------------
   19. Article single — Tag catégorie + Bio CTA
   -------------------------------------------------------------------------- */

.omd-tag-cat a {
  background: var(--wp--preset--color--secondary);
  color: #fff;
  padding: 0.25rem 0.85rem;
  border-radius: 50px;
  text-decoration: none;
  display: inline-block;
}

.omd-featured-img img {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
}

.omd-biocta {
  background: var(--wp--preset--color--violet-light);
  border-radius: 16px;
  margin-top: 2.5rem;
  display: flex;
  overflow: hidden;
}

.omd-biocta img {
  width: 140px;
  object-fit: cover;
  object-position: 50% 20%;
  flex-shrink: 0;
  display: block;
  align-self: stretch;
}

.omd-biocta-text {
  padding: 1.5rem;
  flex: 1;
}

.omd-biocta-text p {
  margin: 0 0 0.5rem;
  font-family: var(--wp--preset--font-family--rubik);
  font-size: 0.95rem;
  color: var(--wp--preset--color--dark);
}

.omd-biocta-text .omd-btn {
  margin-top: 0.75rem;
  display: inline-block;
  font-size: 0.85rem;
}

@media (max-width: 640px) {
  .omd-biocta { flex-direction: column; }
  .omd-biocta img { width: 100%; height: 200px; object-position: 50% 15%; }
}