/* Fichier généré automatiquement : modifier les sources dans assets/css. */

/* assets/css/blocks/core-blocks.css */
/* ==========================================================================
   Blocs natifs WordPress — apparence Dyvasco + styles de blocs
   Les styles « is-style-* » se choisissent dans l'éditeur (panneau Styles).
   Ils sont déclarés dans inc/blocks.php.

   1. Contexte sombre (sections bleu nuit)
   2. Bouton        : par défaut (dégradé), Contour, Lien souligné
   3. Groupe        : Carte
   4. Titre         : Titre affiche
   5. Paragraphe    : Surtitre, Chiffre clé, Numéro d'étape, Étoiles
   6. Liste         : Coches, Étiquettes
   7. Colonnes
   8. Détails       : questions / réponses (FAQ)
   9. Tableau
   10. Citation, séparateur, surlignage
   ========================================================================== */

/* ---------- 1. Contexte sombre ----------
   Tout bloc avec un fond bleu nuit passe le texte en clair. */

.has-navy-background-color,
.has-navy-soft-background-color {
	--ctx-accent: var(--c-cyan);
	--ctx-muted: var(--c-on-dark-muted);
	--ctx-line: var(--c-line-dark);
}

.has-navy-background-color:not(.has-text-color),
.has-navy-soft-background-color:not(.has-text-color) {
	color: var(--c-on-dark);
}

/* ---------- 2. Bouton ---------- */

.wp-block-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: 52px;
	padding: var(--space-3) var(--space-6);
	border: 2px solid transparent;
	border-radius: var(--radius);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	transition:
		transform var(--duration) var(--ease),
		box-shadow var(--duration) var(--ease),
		background-color var(--duration) var(--ease),
		color var(--duration) var(--ease);
}

.wp-block-button .wp-block-button__link:hover {
	transform: translateY(-2px);
}

/* Par défaut : dégradé (sauf si une couleur de fond est choisie dans l'éditeur) */
.wp-block-button:not(.is-style-outline, .is-style-link) .wp-block-button__link:not(.has-background) {
	background: var(--gradient-brand) border-box;
	color: var(--c-navy);
}

.wp-block-button:not(.is-style-outline, .is-style-link) .wp-block-button__link:hover {
	box-shadow: var(--shadow-glow);
}

/* Contour */
.wp-block-button.is-style-outline .wp-block-button__link {
	padding: var(--space-3) var(--space-6);
	border-color: currentColor;
	background: transparent;
	color: var(--c-navy);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--c-navy);
	color: var(--c-white);
}

:where(.has-navy-background-color, .has-navy-soft-background-color) .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--c-cyan);
}

:where(.has-navy-background-color, .has-navy-soft-background-color) .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--c-cyan);
	color: var(--c-navy);
}

/* Lien souligné (« Voir notre méthode ») */
.wp-block-button.is-style-link .wp-block-button__link {
	min-height: 0;
	padding: var(--space-1) 0;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: var(--fs-sm);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: underline;
	text-decoration-color: var(--ctx-accent, var(--c-pink));
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

.wp-block-button.is-style-link .wp-block-button__link:hover {
	transform: none;
	color: var(--ctx-accent, var(--c-pink));
}

/* ---------- 3. Groupe : Carte ---------- */

.wp-block-group.is-style-card {
	padding: var(--space-6);
	border: 1px solid var(--ctx-line, var(--c-border));
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.wp-block-group.is-style-card:not(.has-background) {
	background: var(--c-white);
}

:where(.has-navy-background-color, .has-navy-soft-background-color) .wp-block-group.is-style-card:not(.has-background) {
	background: var(--c-navy-soft);
	box-shadow: none;
}

.wp-block-group.is-style-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
}

/* ---------- 4. Titre affiche ---------- */

.wp-block-heading.is-style-display {
	font-size: var(--fs-2xl);
	text-transform: uppercase;
}

/* ---------- 5. Paragraphe ---------- */

/* Surtitre */
.is-style-eyebrow {
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.is-style-eyebrow:not(.has-text-color) {
	color: var(--ctx-accent, var(--c-pink));
}

/* Chiffre clé */
.is-style-stat {
	font-family: var(--font-heading);
	font-size: clamp(3rem, 2rem + 3vw, 4.5rem);
	line-height: 1;
	letter-spacing: 0.01em;
}

/* Numéro d'étape : rond, couleur = couleur du texte choisie */
.is-style-step-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border: 2px solid currentColor;
	border-radius: 50%;
	font-size: var(--fs-sm);
	font-weight: 700;
	line-height: 1;
}

/* Étoiles d'avis */
.is-style-stars {
	font-size: var(--fs-sm);
	letter-spacing: 0.2em;
}

.is-style-stars:not(.has-text-color) {
	color: var(--c-yellow);
}

/* ---------- 6. Liste ---------- */

/* Coches */
.wp-block-list.is-style-checks {
	display: grid;
	gap: var(--space-4);
	padding: 0;
	list-style: none;
}

.wp-block-list.is-style-checks li {
	position: relative;
	padding-left: 2.25rem;
}

.wp-block-list.is-style-checks li::before {
	content: "";
	position: absolute;
	top: 0.15em;
	left: 0;
	width: 1.4rem;
	height: 1.4rem;
	border-radius: 50%;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2319103f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 62% no-repeat,
		var(--gradient-brand);
}

/* Étiquettes */
.wp-block-list.is-style-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	padding: 0;
	list-style: none;
}

.wp-block-list.is-style-chips li {
	padding: var(--space-1) var(--space-3);
	border: 1px solid var(--ctx-line, var(--c-border));
	border-radius: 999px;
	font-size: var(--fs-sm);
}

/* ---------- 7. Colonnes ---------- */

@media (max-width: 781px) {
	.wp-block-columns {
		row-gap: var(--space-7);
	}
}

/* ---------- 8. Détails (FAQ) ---------- */

.wp-block-details {
	align-self: stretch; /* pleine largeur, même dans un groupe « Pile » */
	overflow: hidden;
	border: 1px solid var(--ctx-line, var(--c-border));
	border-radius: var(--radius);
	background: var(--c-white);
	transition: box-shadow var(--duration) var(--ease);
}

:where(.has-navy-background-color, .has-navy-soft-background-color) .wp-block-details {
	background: var(--c-navy-soft);
}

.wp-block-details[open] {
	box-shadow: var(--shadow-sm);
}

.wp-block-details summary {
	position: relative;
	padding: var(--space-4) 4rem var(--space-4) var(--space-5);
	font-weight: 600;
	line-height: 1.4;
	list-style: none;
	cursor: pointer;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

/* Pastille « + » qui pivote en « × » à l'ouverture */
.wp-block-details summary::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: var(--space-5);
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--gradient-brand);
	color: var(--c-navy);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1;
	transform: translateY(-50%);
	transition: transform var(--duration) var(--ease);
}

.wp-block-details[open] summary::after {
	transform: translateY(-50%) rotate(45deg);
}

.wp-block-details > :not(summary) {
	margin: 0;
	padding: 0 var(--space-5) var(--space-5);
	color: var(--ctx-muted, var(--c-text-muted));
}

/* ---------- 9. Tableau ---------- */

.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-sm);
}

.wp-block-table th,
.wp-block-table td {
	padding: var(--space-3) var(--space-4);
	border: 0;
	border-bottom: 1px solid var(--ctx-line, var(--c-border));
	text-align: left;
	vertical-align: top;
}

.wp-block-table thead th {
	border-bottom: 2px solid currentColor;
	font-size: var(--fs-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.wp-block-table tbody tr:last-child td {
	border-bottom: 0;
}

/* ---------- 10. Citation, séparateur, surlignage ---------- */

.wp-block-quote {
	margin: 0;
	padding: var(--space-2) 0 var(--space-2) var(--space-5);
	border-left: 4px solid transparent;
	border-image: linear-gradient(180deg, var(--c-yellow), var(--c-pink)) 1;
	font-size: var(--fs-md);
	font-style: normal;
}

.wp-block-quote cite {
	display: block;
	margin-top: var(--space-3);
	color: var(--ctx-muted, var(--c-text-muted));
	font-size: var(--fs-sm);
	font-style: normal;
}

.wp-block-separator {
	height: 1px;
	margin-block: var(--space-6);
	border: 0;
	background: var(--ctx-line, var(--c-border));
	opacity: 1;
}

/* Texte à compléter (pages légales) */
mark {
	padding: 0 0.2em;
	border-radius: 3px;
	background: rgba(255, 207, 63, 0.4);
	color: inherit;
}


/* assets/css/utilities/utilities.css */
/* ==========================================================================
   Classes utilitaires
   À ajouter dans l'éditeur : bloc > Avancé > « Classe(s) CSS additionnelle(s) ».
   Préfixe dy- pour les distinguer des classes WordPress.

   .dy-section           Section : marges haut/bas + marges latérales
   .dy-section--tight    Section : marges haut/bas réduites
   .dy-section--intro    Intro courte avant un outil (page Devis) : titre plus petit, outil visible tout de suite
   .dy-lead              Paragraphe d'introduction (plus grand)
   .dy-measure           Largeur de lecture confortable (≈ 60 caractères)
   .dy-muted             Texte secondaire (gris ou blanc atténué)
   .dy-stat              Bloc de chiffre clé avec filet dégradé à gauche
   .dy-center            Centre le texte et les blocs d'une section
   .dy-hide-mobile       Masqué sous 782px
   .dy-hide-desktop      Masqué au-dessus de 782px
   ========================================================================== */

.dy-section {
	padding-block: var(--wp--preset--spacing--80, 6rem);
	padding-inline: var(--container-gutter);
}

.dy-section--tight {
	padding-block: var(--wp--preset--spacing--70, 4rem);
}

.dy-section--intro {
	padding-block: var(--wp--preset--spacing--60, 3rem) var(--wp--preset--spacing--50, 2rem);
}

.dy-section--intro h1 {
	font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
}

.dy-section--intro + .dy-section {
	padding-top: var(--wp--preset--spacing--50, 2rem);
}

.dy-lead {
	font-size: var(--fs-md);
	line-height: 1.7;
}

.dy-measure {
	max-width: 36rem;
}

.dy-muted {
	color: var(--ctx-muted, var(--c-text-muted));
}

.dy-stat {
	padding-left: var(--space-5);
	border-left: 2px solid transparent;
	border-image: linear-gradient(180deg, var(--c-yellow), var(--c-pink)) 1;
}

.dy-center {
	text-align: center;
}

.dy-center .is-layout-flex {
	align-items: center;
	justify-content: center;
}

@media (max-width: 781px) {
	.dy-hide-mobile {
		display: none !important;
	}
}

@media (min-width: 782px) {
	.dy-hide-desktop {
		display: none !important;
	}
}


/* assets/css/components/marquee.css */
/* ==========================================================================
   Bandeau défilant (.dy-marquee)
   Structure dans l'éditeur (compo « Dyvasco — Bandeau défilant ») :
     Groupe .dy-marquee
       └ Groupe .dy-marquee__track
           ├ Paragraphe (texte)
           └ Paragraphe (le même texte, pour une boucle sans saut)
   ========================================================================== */

.dy-marquee {
	overflow: hidden;
	padding-block: var(--space-3);
	user-select: none;
}

.dy-marquee .dy-marquee__track {
	display: flex;
	width: max-content;
	animation: dy-marquee 40s linear infinite;
}

.dy-marquee:hover .dy-marquee__track {
	animation-play-state: paused;
}

.dy-marquee .dy-marquee__track > * {
	flex-shrink: 0;
	margin: 0 !important; /* neutralise l'espacement automatique des blocs */
	padding-right: var(--space-5);
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

@keyframes dy-marquee {
	to {
		transform: translateX(-50%);
	}
}


/* assets/css/components/decor.css */
/* ==========================================================================
   Décors (purement visuels, sans image)
   .dy-hero    Section d'en-tête de page : halo coloré + vitre stylisée à droite
   .dy-orbit   Cercles concentriques animés (zones d'intervention)
   ========================================================================== */

/* ---------- Héro ---------- */

.dy-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

/* Halo dégradé */
.dy-hero::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -20%;
	right: -10%;
	width: min(60vw, 760px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 207, 63, 0.35) 0%, rgba(255, 63, 125, 0.18) 45%, transparent 70%);
	filter: blur(20px);
	pointer-events: none;
}

/* Vitre : cadre + reflets en diagonale */
.dy-hero::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 50%;
	right: max(var(--container-gutter), calc((100% - var(--container)) / 2));
	width: min(26vw, 340px);
	aspect-ratio: 4 / 5;
	border: 8px solid var(--c-navy);
	border-radius: var(--radius-lg);
	background:
		linear-gradient(var(--c-navy), var(--c-navy)) center / 6px 100% no-repeat,
		linear-gradient(var(--c-navy), var(--c-navy)) center / 100% 6px no-repeat,
		linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.9) 38%, transparent 46%, transparent 54%, rgba(255, 255, 255, 0.6) 58%, transparent 63%),
		linear-gradient(160deg, #dff9fc 0%, #b8f2f8 55%, #ffe9b3 100%);
	box-shadow: var(--shadow-md);
	transform: translateY(-50%) rotate(3deg);
	pointer-events: none;
}

@media (max-width: 1024px) {
	.dy-hero::after {
		display: none;
	}
}

/* Le texte du héro s’arrête avant la vitre, pour ne jamais passer dessus. */
@media (min-width: 1025px) {
	.dy-hero > * {
		padding-right: calc(min(26vw, 340px) + 3rem);
	}
}

/* ---------- Orbite ---------- */

.dy-orbit {
	position: relative;
	display: grid;
	place-items: center;
	width: min(100%, 420px);
	aspect-ratio: 1;
	margin-inline: auto;
	border: 1px solid rgba(46, 230, 245, 0.18);
	border-radius: 50%;
}

/* Anneau moyen + points qui tournent */
.dy-orbit::before {
	content: "";
	position: absolute;
	inset: 15%;
	border: 1px solid rgba(46, 230, 245, 0.3);
	border-radius: 50%;
	background:
		radial-gradient(circle at 15% 22%, var(--c-cyan) 0 5px, transparent 6px),
		radial-gradient(circle at 92% 62%, var(--c-cyan) 0 5px, transparent 6px),
		radial-gradient(circle at 30% 92%, var(--c-yellow) 0 5px, transparent 6px);
	animation: dy-orbit 30s linear infinite;
}

/* Anneau intérieur */
.dy-orbit::after {
	content: "";
	position: absolute;
	inset: 32%;
	border: 1px solid rgba(46, 230, 245, 0.45);
	border-radius: 50%;
}

/* Étiquette centrale (paragraphe dans le groupe) */
.dy-orbit > * {
	position: relative;
	z-index: 1;
	margin: 0 !important;
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.dy-orbit > *::before {
	content: "";
	display: block;
	width: 14px;
	height: 14px;
	margin: 0 auto var(--space-2);
	border-radius: 50%;
	background: var(--c-pink);
	box-shadow: 0 0 0 8px rgba(255, 63, 125, 0.18), 0 0 30px var(--c-pink);
}

@keyframes dy-orbit {
	to {
		transform: rotate(360deg);
	}
}