/* Darysmart — compléments légers à theme.json. Mobile-first. */

:root {
	--ds-radius-card: var(--wp--custom--radius--card, 16px);
	--ds-radius-media: var(--wp--custom--radius--media, 20px);
	--ds-shadow-card: var(--wp--custom--shadow--card);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--cyan-dark); /* 5,5:1 sur blanc */
	outline-offset: 3px;
	border-radius: 4px;
}

/* Lien d'évitement */
/* Sur fonds sombres : focus cyan clair (≥ 9:1) */
:where(.ds-hero, .ds-footer, .wp-block-cover, .has-navy-background-color, .has-navy-deep-background-color) :where(a, button, input, select, textarea, summary):focus-visible {
	outline-color: #63DEEF;
}
.ds-form-wrap :where(a, button, input, select, textarea):focus-visible { outline-color: var(--wp--preset--color--cyan-dark); }

.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
}

/* ---------- Header ---------- */
.ds-sticky-header {
	position: sticky;
	top: 0;
	z-index: 50;
}
.ds-header { box-shadow: 0 1px 12px rgba(11, 32, 53, 0.06); }
.admin-bar .ds-sticky-header { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar .ds-sticky-header { top: 0; } }

.ds-logo img { width: clamp(170px, 40vw, 230px); height: auto; }
.ds-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.5rem;
}
.ds-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	font-size: 1.25rem;
}

/* ---------- Eyebrow ---------- */
.is-style-eyebrow,
.ds-eyebrow {
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 800;
}

/* ---------- Hero : image <picture> plein cadre + voile pour la lisibilité ---------- */
.ds-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: clamp(480px, 72vh, 680px);
}
.ds-hero__picture,
.ds-hero__picture img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -2;
}
.ds-hero > .ds-hero__picture { max-width: none !important; margin: 0 !important; }
.ds-hero__picture img { object-fit: cover; object-position: 65% 50%; }
.ds-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(11, 27, 46, 0.92) 0%, rgba(11, 27, 46, 0.78) 40%, rgba(11, 27, 46, 0.2) 70%, rgba(11, 27, 46, 0) 100%);
}
.ds-hero h1 em { font-style: normal; color: #63DEEF; }
.ds-hero__content { text-shadow: 0 1px 12px rgba(5, 15, 28, 0.35); }
/* Texte calé à gauche de la zone large (zone de mur libre de la photo) */
.ds-hero > .ds-hero__content { width: 100%; max-width: var(--wp--style--global--wide-size, 1200px) !important; margin-left: auto !important; margin-right: auto !important; }
.ds-hero__content > * { max-width: 600px !important; margin-left: 0 !important; margin-right: auto !important; }
@media (max-width: 781px) {
	.ds-hero { min-height: 0; justify-content: flex-start; }
	.ds-hero__picture img { object-position: 50% 100%; }
	.ds-hero::before {
		background: linear-gradient(180deg, rgba(11, 27, 46, 0.92) 0%, rgba(11, 27, 46, 0.82) 55%, rgba(11, 27, 46, 0.45) 100%);
	}
}

/* ---------- Cartes ---------- */
.is-style-card,
.wp-block-group.is-style-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--ds-radius-card);
	box-shadow: var(--ds-shadow-card);
	overflow: hidden;
	height: 100%;
}
.ds-card-media img {
	width: 100%;
	aspect-ratio: 16 / 11;
	object-fit: cover;
	display: block;
}
.ds-card-body { padding: 1.25rem 1.25rem 1.5rem; }
.ds-card-body p { color: var(--wp--preset--color--muted); }

/* Grilles fluides : 1 → 2 → 4 colonnes sans media query dans le markup */
.ds-grid {
	display: grid !important;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.ds-grid > * { margin: 0 !important; }

/* ---------- Méthode ---------- */
.ds-step-number {
	display: inline-grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: #D9F5FA;
	color: var(--wp--preset--color--cyan-dark);
	font-weight: 800;
	margin: 0;
}

/* ---------- Bénéfices ---------- */
.ds-check-icon {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: #D9F5FA;
	color: var(--wp--preset--color--cyan-dark);
	font-weight: 900;
	margin: 0 !important;
}
.ds-media-rounded img { border-radius: var(--ds-radius-media); width: 100%; object-fit: cover; }

/* ---------- FAQ ---------- */
.ds-faq .wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 1.1rem 0;
}
.ds-faq .wp-block-details summary {
	cursor: pointer;
	font-weight: 700;
	color: var(--wp--preset--color--navy);
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}
.ds-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.ds-faq .wp-block-details summary::after {
	content: "+";
	font-size: 1.4rem;
	line-height: 1;
	color: var(--wp--preset--color--cyan-dark);
}
.ds-faq .wp-block-details[open] summary::after { content: "−"; }
.ds-faq .wp-block-details > :not(summary) { margin-top: 0.75rem; color: var(--wp--preset--color--muted); }

/* ---------- Boutons ---------- */
.wp-block-button.is-style-outline-light .wp-block-button__link {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.55);
	color: var(--wp--preset--color--white);
}
.wp-block-button.is-style-outline-light .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: var(--wp--preset--color--white);
}
.wp-block-button.is-style-outline-dark .wp-block-button__link {
	background: transparent;
	border-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--navy);
}
.wp-block-button.is-style-outline-dark .wp-block-button__link:hover {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}
.wp-block-button__link { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; }

/* ---------- Footer ---------- */
.ds-footer a { color: inherit; text-decoration: none; }
.ds-footer a:hover { color: #63DEEF; text-decoration: underline; }
.ds-footer .ds-footer-logo img { background: var(--wp--preset--color--white); border-radius: 12px; padding: 10px 14px; width: 220px; height: auto; }
.ds-footer .wp-block-navigation { --navigation-layout-direction: column; }

/* Pas de débordement horizontal */
.wp-site-blocks { overflow-x: clip; }


/* Sections pleine largeur collées : pas d’espace entre en-tête, contenu et pied de page */
.wp-site-blocks > * { margin-block-start: 0; }

/* Bouton WhatsApp flottant : uniquement sur grand écran, dans la marge libre à droite du contenu
   (1200 px). En dessous, WhatsApp est dans le menu, la section contact et le pied de page. */
.ds-whatsapp { display: none; }
@media (min-width: 1360px) {
	.ds-whatsapp {
		position: fixed;
		right: 16px;
		bottom: 16px;
		z-index: 60;
		display: inline-grid;
		place-items: center;
		width: 56px;
		height: 56px;
		border-radius: 50%;
		background: #128C4A;
		color: #fff !important;
		box-shadow: 0 8px 24px rgba(5, 20, 35, 0.25);
	}
	.ds-whatsapp:hover { background: #0e7a40; }
	.ds-whatsapp svg { width: 26px; height: 26px; }
	.ds-whatsapp__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}


/* ---------- Images du pack : ratios fixes (pas de décalage de mise en page) ---------- */
.ds-media-rounded img { border-radius: var(--ds-radius-media); }
.ds-ratio-4-3 img { aspect-ratio: 4 / 3; width: 100%; height: auto; object-fit: cover; }
.ds-ratio-wide img { aspect-ratio: 21 / 9; width: 100%; height: auto; object-fit: cover; object-position: 50% 60%; }
.ds-ratio-16-9 img { aspect-ratio: 16 / 9; width: 100%; height: auto; object-fit: cover; }
.ds-ratio-4-5 img { aspect-ratio: 4 / 5; width: 100%; height: auto; object-fit: cover; }
.ds-ratio-square img { aspect-ratio: 1; width: 100%; height: auto; object-fit: cover; }
@media (max-width: 781px) { .ds-ratio-wide img { aspect-ratio: 16 / 10; } }
.ds-card-media img { aspect-ratio: 4 / 3; }
.ds-card-link { margin-top: 0.5rem; font-weight: 700; }
.wp-block-image .wp-element-caption { color: var(--wp--preset--color--muted); font-size: 0.8125rem; text-align: left; margin-top: 0.5rem; }
.ds-grid--inspirations { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.ds-grid--inspirations .wp-block-image { margin: 0; }
.ds-illustration-note { border-left: 3px solid var(--wp--preset--color--cyan); padding-left: 0.75rem; color: var(--wp--preset--color--ink); font-size: 0.9375rem; }
.ds-media-small { max-width: 420px; }

/* Bandeau « Demander un diagnostic » : voile plus marqué à gauche, formulaire lisible */
.ds-cta-cover .wp-block-cover__background { background: linear-gradient(90deg, rgba(11, 27, 46, 0.94) 0%, rgba(11, 27, 46, 0.86) 55%, rgba(11, 27, 46, 0.7) 100%) !important; opacity: 1 !important; }
.ds-cta-cover .wp-block-cover__inner-container { width: 100%; }

/* Page contact : visuel à côté du formulaire, sous le formulaire en mobile */
.ds-contact-visual img { border-radius: var(--ds-radius-media); aspect-ratio: 4 / 5; width: 100%; height: auto; object-fit: cover; }
@media (min-width: 782px) { .ds-contact-visual { position: sticky; top: 110px; } }
@media (max-width: 781px) { .ds-contact-visual img { aspect-ratio: 16 / 10; object-position: 50% 60%; } }

/* ---------- DS-02 : menu compact jusqu'à 1023 px (le menu horizontal ne tient pas sur une ligne) ---------- */
@media (min-width: 600px) and (max-width: 1023px) {
	.ds-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.ds-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
	.ds-header .wp-block-navigation__responsive-container-close { display: flex; }
}
/* Liens réservés au menu ouvert (devis, appel, WhatsApp) */
.ds-header .wp-block-navigation__responsive-container:not(.is-menu-open) .ds-nav-compact-only { display: none; }
.ds-header .is-menu-open .ds-nav-cta a { font-weight: 800; color: var(--wp--preset--color--cyan-dark); }
/* Page active */
.ds-header .current-menu-item > a { text-decoration: underline; text-decoration-color: var(--wp--preset--color--cyan); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.ds-header .wp-block-navigation-item__content { padding-block: 0.4rem; }

/* Ancres : jamais sous l'en-tête collant */
html { scroll-padding-top: 104px; }
html:has(body.admin-bar) { scroll-padding-top: 136px; }

/* ---------- DS-03 : hero plus compact ---------- */
.ds-hero h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem); }
.ds-hero__lead { max-width: 34em; }
.ds-hero .is-style-outline-light .wp-block-button__link { border-color: rgba(255, 255, 255, 0.4); font-weight: 700; }

/* ---------- DS-06 : cartes, états survol / focus ---------- */
.is-style-card { transition: box-shadow 0.2s ease, transform 0.2s ease; }
.is-style-card:hover { box-shadow: 0 16px 32px rgba(16, 47, 75, 0.12); }
.is-style-card:focus-within { outline: 3px solid var(--wp--preset--color--cyan-dark); outline-offset: 2px; }
.ds-card-title { font-size: var(--wp--preset--font-size--x-large) !important; }

/* ---------- DS-07 : fil d'Ariane des fiches ---------- */
.ds-breadcrumb { font-size: 0.875rem; color: var(--wp--preset--color--muted); margin-bottom: 0.5rem; }
.ds-breadcrumb a { color: var(--wp--preset--color--cyan-dark); }

/* ---------- Brief CRO : bénéfices ---------- */
.ds-benefits { border-bottom: 1px solid var(--wp--preset--color--line); }
.ds-benefits__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 1.5rem 2rem; }
.ds-benefit { display: grid; gap: 0.5rem; align-content: start; }
.ds-benefit__icon {
	display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px;
	background: #E3F6FB; color: var(--wp--preset--color--cyan-dark);
}
.ds-benefit__title { font-size: 1.0625rem !important; margin: 0.25rem 0 0 !important; }
.ds-benefit p { margin: 0; }

/* Bouton devis de l'en-tête : libellé court sur petit écran, toujours visible */
.ds-cta-short { display: none; }
@media (max-width: 599px) {
	.ds-header .wp-block-buttons.ds-header-cta { display: flex; }
	.ds-header .ds-header-cta .wp-block-button__link { padding: 0.6rem 0.9rem !important; min-height: 44px; display: inline-flex; align-items: center; }
	.ds-cta-long { display: none; }
	.ds-cta-short { display: inline; }
	/* Le logo rétrécit, le bouton Devis et le menu gardent leur taille */
	.ds-header .wp-block-group.alignwide { gap: 0.75rem; }
	.ds-logo { flex: 1 1 auto; min-width: 0; margin: 0; }
	.ds-logo img { width: 100% !important; max-width: 200px; height: auto; }
	.ds-header-cta, .ds-header .wp-block-navigation { flex: 0 0 auto; }
	.ds-header .ds-header-cta .wp-block-button__link { white-space: nowrap; }
}

/* Cartes de l'accueil : 5 solutions sur une ligne en grand écran */
.ds-grid--services { grid-template-columns: repeat(auto-fit, minmax(min(100%, 205px), 1fr)); }
/* Étapes numérotées des fiches (monitoring PV) */
.ds-steps { padding-left: 1.4rem; }
.ds-steps li { margin-bottom: 0.6rem; }