/*
Theme Name: Riva 3D
Theme URI: https://riva3d.be
Author: Sophie Dehareng
Description: Thème enfant de Twenty Twenty-Five pour Riva 3D (modélisation et impression 3D), variante corail de la famille Riva (thème Rivaqua). Polices Nunito et Inter hébergées localement, cube mascotte, formulaire de devis avec envoi de fichiers 3D et installation des pages en un clic.
Template: twentytwentyfive
Version: 0.2.0
Requires at least: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: riva3d
*/

/* ==========================================================================
   SOMMAIRE
   1. Réglages de base (accessibilité, focus)
   2. En-tête collant et logo
   3. Effets de survol : boutons, liens surlignés, cartes qui se soulèvent
   4. Styles de blocs Riva 3D (carte, En bref, étapes, bandeau, surtitre, photo à venir)
   5. Le cube mascotte (3 humeurs) et sa bulle
   6. Apparition douce au défilement
   7. Formulaires (questionnaire et contact)
   8. Mobile
   9. Réduire les animations (réglage du visiteur)
   ========================================================================== */

/* 1. Réglages de base --------------------------------------------------- */
:root {
	--rq-ombre: 0 14px 30px -12px rgba(120, 45, 25, 0.22);
	--rq-ombre-legere: 0 6px 16px -10px rgba(120, 45, 25, 0.3);
	--rq-rayon: 18px;
	--rq-transition: 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);
}

html { scroll-behavior: smooth; }

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent-3);
	outline-offset: 3px;
	border-radius: 6px;
}

/* Les boutons font au moins 44 px de haut (accessibilité tactile). */
.wp-block-button__link,
.rq-form button {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.screen-reader-text:not(:focus) {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	overflow: hidden;
	position: absolute !important;
	word-wrap: normal !important;
}

/* 2. En-tête collant et logo ------------------------------------------- */
header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
}

.rq-entete .wp-block-site-title a {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
}

/* Petit cube devant le nom, en attendant le logo définitif. */
.rq-entete .wp-block-site-title a::before {
	content: "";
	width: 0.95em;
	height: 1em;
	background: var(--wp--preset--color--accent-1);
	-webkit-mask: url("assets/images/logo-cube.svg") no-repeat center / contain;
	mask: url("assets/images/logo-cube.svg") no-repeat center / contain;
	transition: transform var(--rq-transition);
}

.rq-entete .wp-block-site-title a:hover::before {
	transform: translateY(-2px) rotate(-8deg);
}

/* Soulignement qui glisse sous les liens du menu. */
.rq-entete .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.6rem;
}

.rq-entete .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.3rem;
	height: 3px;
	border-radius: 3px;
	background: var(--wp--preset--color--corail);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--rq-transition);
}

.rq-entete .wp-block-navigation-item__content:hover::after,
.rq-entete .wp-block-navigation-item__content:focus-visible::after,
.rq-entete .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* Le bouton du questionnaire ne passe jamais à la ligne. */
.rq-entete .rq-bouton-entete .wp-block-button__link {
	white-space: nowrap;
}

/* 3. Effets de survol -------------------------------------------------- */

/* Boutons : léger soulèvement et ombre. */
.wp-block-button__link {
	transition: transform var(--rq-transition), box-shadow var(--rq-transition), background-color var(--rq-transition), color var(--rq-transition);
}

.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--rq-ombre-legere);
}

/* Bouton « contour » (style du bloc Bouton → Contour). */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--accent-3);
	border: 2px solid currentColor;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--accent-3);
}

/* Liens dans le texte : effet « surligneur » bleu clair au survol. */
:where(.entry-content, .wp-block-post-content) :where(p, li, td, figcaption, .wp-block-details) a:not(.wp-block-button__link) {
	color: var(--wp--preset--color--accent-1);
	font-weight: 600;
	text-decoration: none;
	background-image: linear-gradient(var(--wp--preset--color--accent-2), var(--wp--preset--color--accent-2));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% 0.32em;
	border-radius: 3px;
	padding-inline: 0.08em;
	transition: background-size var(--rq-transition), color var(--rq-transition);
}

:where(.entry-content, .wp-block-post-content) :where(p, li, td, figcaption, .wp-block-details) a:not(.wp-block-button__link):hover,
:where(.entry-content, .wp-block-post-content) :where(p, li, td, figcaption, .wp-block-details) a:not(.wp-block-button__link):focus-visible {
	color: var(--wp--preset--color--accent-3);
	background-size: 100% 100%;
}

/* Sur fond bleu clair, le surlignage passe en blanc pour rester visible. */
.has-accent-2-background-color :where(p, li) a:not(.wp-block-button__link) {
	background-image: linear-gradient(var(--wp--preset--color--base), var(--wp--preset--color--base));
}

/* Sur fond bleu profond, les liens restent blancs. */
.has-accent-3-background-color :where(p, li) a:not(.wp-block-button__link) {
	color: var(--wp--preset--color--base);
	background-image: linear-gradient(rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.22));
}

/* 4. Styles de blocs Riva 3D ------------------------------------------- */

/* Carte (Groupe → Styles → Carte Riva 3D) : se soulève et se colore au survol.
   Si le titre de la carte contient un lien, toute la carte devient cliquable. */
.is-style-rq-carte {
	position: relative;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: var(--rq-rayon);
	padding: clamp(1.25rem, 3vw, 1.75rem);
	transition: transform var(--rq-transition), box-shadow var(--rq-transition), border-color var(--rq-transition), background-color var(--rq-transition);
}

.is-style-rq-carte:hover,
.is-style-rq-carte:focus-within {
	transform: translateY(-5px);
	box-shadow: var(--rq-ombre);
	border-color: var(--wp--preset--color--accent-1);
}

.is-style-rq-carte.has-background:hover {
	border-color: var(--wp--preset--color--accent-1);
}

.is-style-rq-carte > :first-child { margin-top: 0; }
.is-style-rq-carte > :last-child { margin-bottom: 0; }

.is-style-rq-carte :where(h2, h3, h4) a {
	color: inherit;
	text-decoration: none;
	background: none !important;
	padding: 0;
}

.is-style-rq-carte :where(h2, h3, h4) a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--rq-rayon);
}

.is-style-rq-carte :where(h2, h3, h4) a:focus-visible {
	outline: none;
}

.is-style-rq-carte :where(h2, h3, h4) a:focus-visible::after {
	outline: 3px solid var(--wp--preset--color--accent-3);
	outline-offset: 3px;
}

/* Petite flèche qui avance au survol. */
.rq-fleche::after {
	content: "→";
	margin-left: 0.4em;
	display: inline-block;
	transition: transform var(--rq-transition);
}

.is-style-rq-carte:hover .rq-fleche::after {
	transform: translateX(5px);
}

/* Encadré « En bref » (Groupe → Styles → En bref). */
.is-style-rq-en-bref {
	position: relative;
	background: var(--wp--preset--color--accent-2);
	border-radius: var(--rq-rayon);
	padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 2rem);
	padding-top: 2.4rem;
}

.is-style-rq-en-bref::before {
	content: "En bref";
	position: absolute;
	top: -0.85rem;
	left: 1.25rem;
	padding: 0.2rem 0.9rem;
	border-radius: 999px;
	background: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--nunito);
	font-weight: 800;
	font-size: 0.95rem;
}

.is-style-rq-en-bref > :first-child { margin-top: 0; }
.is-style-rq-en-bref > :last-child { margin-bottom: 0; }

/* Étapes numérotées (Liste numérotée → Styles → Étapes). */
ol.is-style-rq-etapes {
	list-style: none;
	counter-reset: rq-etape;
	padding-left: 0;
	display: grid;
	gap: 0.35rem;
}

ol.is-style-rq-etapes > li {
	counter-increment: rq-etape;
	position: relative;
	padding: 0.9rem 1rem 0.9rem 4.1rem;
	min-height: 3rem;
	border-radius: 14px;
	transition: background-color var(--rq-transition), transform var(--rq-transition);
}

ol.is-style-rq-etapes > li::before {
	content: counter(rq-etape);
	position: absolute;
	left: 0.6rem;
	top: 0.65rem;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--nunito);
	font-weight: 800;
	font-size: 1.15rem;
	transition: transform var(--rq-transition), background-color var(--rq-transition);
}

ol.is-style-rq-etapes > li:hover {
	background: var(--wp--preset--color--accent-5);
	transform: translateX(4px);
}

ol.is-style-rq-etapes > li:hover::before {
	transform: scale(1.08);
	background: var(--wp--preset--color--accent-3);
}

ol.is-style-rq-etapes > li strong {
	display: block;
	font-family: var(--wp--preset--font-family--nunito);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--accent-3);
	line-height: 1.3;
	margin-bottom: 0.15rem;
}

/* Liste à coches (Liste → Styles → Coches). */
ul.is-style-rq-coches {
	list-style: none;
	padding-left: 0;
}

ul.is-style-rq-coches > li {
	position: relative;
	padding-left: 2rem;
	margin-bottom: 0.5rem;
}

ul.is-style-rq-coches > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 80%;
}

/* Surtitre (Paragraphe → Styles → Surtitre) : petite étiquette au-dessus d'un titre. */
p.is-style-rq-surtitre {
	display: block;
	width: fit-content;
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
	margin-right: auto !important;
	margin-bottom: 0;
	padding: 0.2rem 0.85rem;
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--accent-6);
	color: var(--wp--preset--color--accent-1);
	font-family: var(--wp--preset--font-family--nunito);
	font-weight: 800;
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Emplacement de photo à venir (Groupe → Styles → Photo à venir). */
.is-style-rq-photo {
	display: grid;
	place-items: center;
	min-height: 220px;
	padding: 1.5rem;
	border: 2px dashed var(--wp--preset--color--accent-6);
	border-radius: var(--rq-rayon);
	background: var(--wp--preset--color--accent-5);
	color: var(--wp--preset--color--accent-4);
	text-align: center;
	font-size: var(--wp--preset--font-size--small);
}

/* Images : coins arrondis et léger zoom au survol. */
.wp-block-image.is-style-rq-arrondi img,
.is-style-rq-carte .wp-block-image img {
	border-radius: var(--rq-rayon);
	transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.wp-block-image.is-style-rq-arrondi {
	overflow: hidden;
	border-radius: var(--rq-rayon);
}

.wp-block-image.is-style-rq-arrondi:hover img {
	transform: scale(1.03);
}

/* Questions de la FAQ (bloc Détails). */
.wp-block-details {
	transition: border-color var(--rq-transition), box-shadow var(--rq-transition), background-color var(--rq-transition);
}

.wp-block-details:hover {
	border-color: var(--wp--preset--color--accent-1);
	box-shadow: var(--rq-ombre-legere);
}

.wp-block-details[open] {
	background: var(--wp--preset--color--accent-5);
}

.wp-block-details summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--nunito);
	font-weight: 800;
	color: var(--wp--preset--color--accent-3);
	font-size: var(--wp--preset--font-size--large);
}


/* Sections de page : bandes pleine largeur collées les unes aux autres. */
.wp-block-post-content > .alignfull { margin-block-start: 0; }
main > .wp-block-post-content { margin-block-start: 0; }

.rq-centre { text-align: center; }
.rq-centre .wp-block-buttons { justify-content: center; }
.rq-centre p.is-style-rq-surtitre, .is-style-rq-carte p.is-style-rq-surtitre { margin-left: auto !important; margin-right: auto !important; }
.is-style-rq-carte:not(.rq-ecran-partage *) p.is-style-rq-surtitre { margin-left: 0 !important; }

/* Bandeau titre de page (fond bleu clair). */
.rq-entete-page h1 { margin-top: 0.6rem; }
.rq-entete-page .has-large-font-size { color: var(--wp--preset--color--contrast); }
.rq-entete-page .is-style-rq-goutte-explique,
.rq-entete-page .is-style-rq-goutte-rassure,
.rq-entete-page .is-style-rq-goutte-question { margin-top: 2rem; }

/* Bande foncée (appel au questionnaire) : titres et textes en blanc. */
.has-accent-3-background-color :where(h1, h2, h3, h4) { color: var(--wp--preset--color--base); }
.rq-appel p { max-width: 36em; margin-inline: auto; }

/* Accueil : deux grandes portes d'entrée Particuliers / Professionnels. */
.rq-ecran-partage .wp-block-columns { gap: clamp(1rem, 3vw, 2rem); }
.rq-ecran-partage .wp-block-column { display: flex; }
.rq-ecran-partage .is-style-rq-carte {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	padding: clamp(1.5rem, 4vw, 2.5rem);
}
.rq-ecran-partage .is-style-rq-carte > * { margin: 0; }
.rq-ecran-partage .is-style-rq-photo { width: 100%; min-height: 150px; }
.rq-ecran-partage .is-style-rq-carte .has-small-font-size {
	margin-top: auto;
	padding-top: 0.5rem;
}
.rq-ecran-partage .rq-fleche {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 1.5rem;
	border-radius: 999px;
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--nunito);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--medium);
	transition: background-color var(--rq-transition);
}
.rq-ecran-partage .wp-block-column:last-child .rq-fleche {
	background: transparent;
	color: var(--wp--preset--color--accent-3);
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--accent-3);
}
.rq-ecran-partage .is-style-rq-carte:hover .rq-fleche { background: var(--wp--preset--color--accent-3); color: var(--wp--preset--color--base); }

/* Bandeau de confiance. */
.rq-confiance .rq-chiffre {
	margin-bottom: 0.2rem;
	font-family: var(--wp--preset--font-family--nunito);
	font-weight: 800;
	color: var(--wp--preset--color--accent-1);
	line-height: 1.15;
}
.rq-confiance p:last-child { margin-top: 0; color: var(--wp--preset--color--accent-4); }

/* Tableaux. */
.wp-block-table table { border-collapse: separate; border-spacing: 0; border: 1px solid var(--wp--preset--color--accent-6); border-radius: 14px; overflow: hidden; }
.wp-block-table th { background: var(--wp--preset--color--accent-2); color: var(--wp--preset--color--accent-3); font-family: var(--wp--preset--font-family--nunito); text-align: left; }
.wp-block-table th, .wp-block-table td { border: 0; border-bottom: 1px solid var(--wp--preset--color--accent-6); padding: 0.7rem 1rem; }
.wp-block-table tbody tr:last-child td { border-bottom: 0; }
.wp-block-table tbody tr { transition: background-color var(--rq-transition); }
.wp-block-table tbody tr:hover { background: var(--wp--preset--color--accent-5); }

/* Cartes dans une grille : même hauteur. */
.wp-block-group.is-layout-grid > .is-style-rq-carte { height: 100%; box-sizing: border-box; }

/* 5. Le cube mascotte ------------------------------------------------- */
/* Groupe → Styles → « Goutte qui explique », « Goutte qui rassure » ou
   « Goutte qui pose une question ». Le texte du groupe devient sa bulle,
   la goutte se place à sa gauche, dans la colonne de texte. */
.is-style-rq-goutte-explique,
.is-style-rq-goutte-rassure,
.is-style-rq-goutte-question {
	--rq-goutte: url("assets/images/cube-explique.svg");
	--rq-goutte-taille: clamp(78px, 14vw, 116px);
	--rq-bulle: var(--wp--preset--color--accent-2);
	position: relative;
	display: grid;
	grid-template-columns: var(--rq-goutte-taille) minmax(0, 1fr);
	column-gap: 1.25rem;
	align-items: end;
}

.is-style-rq-goutte-rassure { --rq-goutte: url("assets/images/cube-rassure.svg"); }
.is-style-rq-goutte-question { --rq-goutte: url("assets/images/cube-question.svg"); }

/* Sur un fond bleu clair, la bulle devient blanche. */
.has-accent-2-background-color :is(.is-style-rq-goutte-explique, .is-style-rq-goutte-rassure, .is-style-rq-goutte-question) {
	--rq-bulle: var(--wp--preset--color--base);
}

/* La goutte elle-même. */
.is-style-rq-goutte-explique::before,
.is-style-rq-goutte-rassure::before,
.is-style-rq-goutte-question::before {
	content: "";
	grid-column: 1;
	grid-row: 1 / span 20;
	align-self: end;
	width: var(--rq-goutte-taille);
	aspect-ratio: 130 / 140;
	background: var(--rq-goutte) no-repeat center bottom / contain;
	animation: rq-flotte 4s ease-in-out infinite;
}

/* Le texte = la bulle. */
:is(.is-style-rq-goutte-explique, .is-style-rq-goutte-rassure, .is-style-rq-goutte-question) > * {
	grid-column: 2;
	margin: 0 !important;
	background: var(--rq-bulle);
	padding: 0.5rem 1.4rem;
}

:is(.is-style-rq-goutte-explique, .is-style-rq-goutte-rassure, .is-style-rq-goutte-question) > :first-child {
	padding-top: 1.1rem;
	border-top-left-radius: 22px;
	border-top-right-radius: 22px;
}

:is(.is-style-rq-goutte-explique, .is-style-rq-goutte-rassure, .is-style-rq-goutte-question) > :last-child {
	padding-bottom: 1.1rem;
	border-bottom-left-radius: 22px;
	border-bottom-right-radius: 22px;
}

/* La pointe de la bulle, tournée vers la goutte. */
.is-style-rq-goutte-explique::after,
.is-style-rq-goutte-rassure::after,
.is-style-rq-goutte-question::after {
	content: "";
	position: absolute;
	left: calc(var(--rq-goutte-taille) + 1.25rem - 13px);
	bottom: 1.6rem;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-right: 14px solid var(--rq-bulle);
}

/* Au survol de la bulle, la goutte fait un petit saut. */
.is-style-rq-goutte-explique:hover::before,
.is-style-rq-goutte-rassure:hover::before,
.is-style-rq-goutte-question:hover::before {
	animation: rq-saut 0.6s ease-out;
}

@keyframes rq-flotte {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}

@keyframes rq-saut {
	0% { transform: translateY(0) scale(1, 1); }
	30% { transform: translateY(2px) scale(1.06, 0.94); }
	60% { transform: translateY(-14px) scale(0.96, 1.04); }
	100% { transform: translateY(0) scale(1, 1); }
}

/* Goutte en image (bloc Image avec la classe rq-goutte-image). */
.wp-block-image.rq-goutte-image img {
	width: clamp(100px, 18vw, 150px);
	height: auto;
	animation: rq-flotte 4s ease-in-out infinite;
}

.is-style-rq-carte:hover .wp-block-image.rq-goutte-image img {
	animation: rq-saut 0.6s ease-out;
}

/* Grande goutte d'accueil (Groupe → Styles → Goutte seule, grande). */
.is-style-rq-goutte-seule {
	width: clamp(110px, 22vw, 170px);
	aspect-ratio: 130 / 140;
	margin-inline: auto;
	background: url("assets/images/cube-explique.svg") no-repeat center / contain;
	animation: rq-flotte 4s ease-in-out infinite;
}

/* 6. Apparition douce au défilement ------------------------------------ */
/* Activé seulement quand le script est chargé (classe rq-js sur <html>),
   pour que le contenu reste toujours visible sans JavaScript. */
.rq-js .wp-block-post-content > .wp-block-group,
.rq-js .wp-block-post-content > .wp-block-columns,
.rq-js .rq-apparait {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.rq-js .wp-block-post-content > .wp-block-group.rq-visible,
.rq-js .wp-block-post-content > .wp-block-columns.rq-visible,
.rq-js .rq-apparait.rq-visible {
	opacity: 1;
	transform: none;
}

/* La bulle de la goutte « s'ouvre » quand elle arrive à l'écran. */
.rq-js :is(.is-style-rq-goutte-explique, .is-style-rq-goutte-rassure, .is-style-rq-goutte-question) > * {
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.45s ease 0.25s, transform 0.45s ease 0.25s;
}

.rq-js :is(.is-style-rq-goutte-explique, .is-style-rq-goutte-rassure, .is-style-rq-goutte-question).rq-visible > * {
	opacity: 1;
	transform: none;
}

/* 7. Formulaires -------------------------------------------------------- */
.rq-form {
	--rq-champ-bord: #D9A898;
	scroll-margin-top: 110px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 22px;
	padding: clamp(1.25rem, 4vw, 2.25rem);
	box-shadow: var(--rq-ombre-legere);
}

.rq-form fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.rq-form legend {
	font-family: var(--wp--preset--font-family--nunito);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--x-large);
	color: var(--wp--preset--color--accent-3);
	margin-bottom: 0.4rem;
	padding: 0;
}

.rq-form .rq-aide {
	color: var(--wp--preset--color--accent-4);
	font-size: var(--wp--preset--font-size--small);
	margin: 0.25rem 0 1rem;
}

.rq-form .rq-rassure {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	background: var(--wp--preset--color--accent-2);
	border-radius: 14px;
	padding: 0.75rem 1rem;
	margin: 0 0 1.25rem;
}

.rq-form .rq-rassure::before {
	content: "";
	flex: none;
	width: 44px;
	height: 48px;
	background: url("assets/images/cube-rassure.svg") no-repeat center / contain;
}

.rq-champ { margin-bottom: 1.1rem; }

.rq-champ > label,
.rq-champ > .rq-etiquette {
	display: block;
	font-weight: 600;
	margin-bottom: 0.35rem;
}

.rq-obligatoire { color: #A3321F; }

.rq-form input[type="text"],
.rq-form input[type="email"],
.rq-form input[type="tel"],
.rq-form input[type="number"],
.rq-form select,
.rq-form textarea {
	width: 100%;
	box-sizing: border-box;
	min-height: 48px;
	padding: 0.7rem 0.9rem;
	border: 1.5px solid var(--rq-champ-bord);
	border-radius: 12px;
	background: var(--wp--preset--color--base);
	font: inherit;
	color: inherit;
	transition: border-color var(--rq-transition), box-shadow var(--rq-transition);
}

.rq-form textarea { min-height: 120px; }

.rq-form input:hover,
.rq-form select:hover,
.rq-form textarea:hover {
	border-color: var(--wp--preset--color--accent-1);
}

.rq-form input:focus,
.rq-form select:focus,
.rq-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent-1);
	box-shadow: 0 0 0 4px var(--wp--preset--color--accent-2);
}

.rq-deux-colonnes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: 0 1rem;
}

/* Choix (cases et boutons radio) présentés comme des tuiles cliquables. */
.rq-choix {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: 0.6rem;
}

.rq-choix--court {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
}

.rq-choix label {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.7rem;
	min-height: 52px;
	padding: 0.65rem 0.9rem;
	border: 1.5px solid var(--wp--preset--color--accent-6);
	border-radius: 14px;
	cursor: pointer;
	font-weight: 500;
	transition: transform var(--rq-transition), border-color var(--rq-transition), background-color var(--rq-transition), box-shadow var(--rq-transition);
}

.rq-choix label:hover {
	transform: translateY(-2px);
	border-color: var(--wp--preset--color--accent-1);
	box-shadow: var(--rq-ombre-legere);
}

.rq-choix input {
	width: 1.25rem;
	height: 1.25rem;
	flex: none;
	accent-color: var(--wp--preset--color--accent-1);
}

.rq-choix label:has(input:checked) {
	border-color: var(--wp--preset--color--accent-1);
	background: var(--wp--preset--color--accent-2);
}

.rq-choix label:has(input:focus-visible) {
	outline: 3px solid var(--wp--preset--color--accent-3);
	outline-offset: 2px;
}

.rq-sous-question {
	margin: 0.75rem 0 0.5rem;
	padding: 0.9rem 1rem;
	border-left: 4px solid var(--wp--preset--color--corail);
	background: var(--wp--preset--color--accent-5);
	border-radius: 0 12px 12px 0;
}

.rq-consentement label {
	display: flex;
	gap: 0.7rem;
	align-items: flex-start;
	font-size: var(--wp--preset--font-size--small);
	cursor: pointer;
}

.rq-consentement input {
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.15rem;
	flex: none;
	accent-color: var(--wp--preset--color--accent-1);
}

/* Barre de progression du questionnaire. */
.rq-progression { margin-bottom: 1.5rem; }

.rq-progression-texte {
	display: flex;
	justify-content: space-between;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--accent-4);
	margin-bottom: 0.4rem;
	font-weight: 600;
}

.rq-progression-barre {
	height: 10px;
	border-radius: 999px;
	background: var(--wp--preset--color--accent-2);
	overflow: hidden;
}

.rq-progression-barre span {
	display: block;
	height: 100%;
	width: 25%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--wp--preset--color--corail), var(--wp--preset--color--accent-1));
	transition: width 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Sans JavaScript, toutes les étapes s'affichent les unes sous les autres. */
.rq-form .rq-etape + .rq-etape {
	margin-top: 2rem;
	padding-top: 2rem;
	border-top: 1px solid var(--wp--preset--color--accent-6);
}

.rq-form.rq-pas-a-pas .rq-etape + .rq-etape {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.rq-form.rq-pas-a-pas .rq-etape[hidden],
.rq-form [hidden] { display: none !important; }

.rq-form.rq-pas-a-pas .rq-etape:not([hidden]) {
	animation: rq-etape-entre 0.4s ease;
}

@keyframes rq-etape-entre {
	from { opacity: 0; transform: translateX(14px); }
	to { opacity: 1; transform: none; }
}

.rq-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.rq-form button {
	cursor: pointer;
	border-radius: 999px;
	padding: 0.75rem 1.6rem;
	font-family: var(--wp--preset--font-family--nunito);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--medium);
	border: 2px solid var(--wp--preset--color--accent-1);
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
	transition: transform var(--rq-transition), box-shadow var(--rq-transition), background-color var(--rq-transition);
}

.rq-form button:hover {
	transform: translateY(-2px);
	box-shadow: var(--rq-ombre-legere);
	background: var(--wp--preset--color--accent-3);
	border-color: var(--wp--preset--color--accent-3);
}

.rq-form button.rq-precedent {
	background: transparent;
	color: var(--wp--preset--color--accent-3);
	border-color: var(--wp--preset--color--accent-6);
}

.rq-form button.rq-precedent:hover {
	background: var(--wp--preset--color--accent-5);
	color: var(--wp--preset--color--accent-3);
	border-color: var(--wp--preset--color--accent-1);
}

.rq-form button[disabled] {
	opacity: 0.6;
	cursor: wait;
	transform: none;
}

.rq-erreur-champ {
	color: #A3321F;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	margin-top: 0.35rem;
}

.rq-form [aria-invalid="true"] {
	border-color: #A3321F !important;
}

.rq-message {
	border-radius: 14px;
	padding: 0.9rem 1.1rem;
	margin-bottom: 1.25rem;
	font-weight: 600;
}

.rq-message--erreur {
	background: #FBEAE6;
	color: #7A2414;
	border: 1px solid #E8B4A8;
}

.rq-message--ok {
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--accent-3);
}

/* Piège à robots : invisible pour les humains. */
.rq-pot-de-miel {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* 8. Mobile ------------------------------------------------------------- */
@media (max-width: 600px) {
	.rq-entete .wp-block-site-title { font-size: 1.45rem !important; }

	.rq-entete .rq-bouton-entete .wp-block-button__link {
		font-size: 0.875rem;
		padding: 0.55rem 0.95rem;
	}

	.is-style-rq-goutte-explique,
	.is-style-rq-goutte-rassure,
	.is-style-rq-goutte-question {
		--rq-goutte-taille: 64px;
		column-gap: 1rem;
	}

	.rq-actions { flex-direction: column-reverse; }
	.rq-actions button { width: 100%; }
}

/* Petits téléphones : le bouton affiche « Devis » (le lecteur
   d'écran continue de lire le texte complet). */
@media (max-width: 460px) {
	.rq-entete .wp-block-group.alignwide { column-gap: 0.75rem; }
	.rq-entete .wp-block-group.alignwide > .wp-block-group { column-gap: 0.6rem; }
	.rq-entete .rq-bouton-entete .wp-block-button__link { font-size: 0; padding: 0.55rem 0.9rem; }
	.rq-entete .rq-bouton-entete .wp-block-button__link::after { content: "Devis"; font-size: 0.875rem; }
}

@media (max-width: 340px) {
	.rq-entete .wp-block-site-title a::before { display: none; }
}

/* 9. Réduire les animations ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.rq-js .wp-block-post-content > .wp-block-group,
	.rq-js .wp-block-post-content > .wp-block-columns,
	.rq-js .rq-apparait,
	.rq-js :is(.is-style-rq-goutte-explique, .is-style-rq-goutte-rassure, .is-style-rq-goutte-question) > * {
		opacity: 1;
		transform: none;
	}

	.is-style-rq-carte:hover,
	.wp-block-button__link:hover,
	.rq-choix label:hover,
	.rq-form button:hover,
	ol.is-style-rq-etapes > li:hover {
		transform: none;
	}
}

/* Riva 3D : photos au même format (4:3) pour que les cartes s'alignent. */
.wp-block-image.is-style-rq-arrondi img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	height: auto;
}