/* Roga by Gazte Co. — conversational front end. */

.roga-root {
	--roga-bg: #ffffff;
	--roga-text: #1d1d1f;
	--roga-accent: #0d493b;
	--roga-onaccent: #ffffff;
	--roga-muted: #6b7280;
	--roga-radius: 10px;

	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 40px 20px 64px;
	background: var(--roga-bg);
	color: var(--roga-text);
	font-size: 17px;
	line-height: 1.5;
	border-radius: var(--roga-radius);
	overflow: hidden;
}

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

.roga-stage {
	width: 100%;
	max-width: 640px;
}

/* Sur l'écran de synthèse, le tableau récapitulatif a besoin de toute la
   largeur disponible du container. On lève la contrainte des 640 px qui
   sert à garder les questions lisibles. */
.roga-stage:has(.roga-review) {
	max-width: none;
}

.roga-card {
	animation: roga-in 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes roga-in {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.roga-card { animation: none; }
}

/* Question head */

.roga-q {
	display: flex;
	gap: 10px;
	align-items: baseline;
}

.roga-q-num {
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 600;
	color: var(--roga-accent);
	opacity: 0.8;
}

.roga-q-label,
.roga-title {
	margin: 0;
	font-size: 26px;
	line-height: 1.25;
	font-weight: 600;
	color: var(--roga-text);
}

.roga-title { font-size: 30px; }

.roga-req { color: #c0392b; }

.roga-desc {
	margin: 10px 0 0;
	color: var(--roga-muted);
	font-size: 15px;
	white-space: pre-line;
}

.roga-hint {
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--roga-muted);
}

.roga-control { margin-top: 22px; }

/* Choices */

.roga-opt {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
	margin: 0 0 10px;
	padding: 13px 16px;
	font: inherit;
	font-size: 16px;
	line-height: 1.4;
	text-align: left;
	color: var(--roga-text);
	background: transparent;
	border: 1.5px solid color-mix(in srgb, var(--roga-accent) 35%, transparent);
	border-radius: var(--roga-radius);
	cursor: pointer;
	transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.roga-opt:hover {
	background: color-mix(in srgb, var(--roga-accent) 8%, transparent);
	border-color: var(--roga-accent);
}

.roga-opt:focus-visible {
	outline: 2px solid var(--roga-accent);
	outline-offset: 2px;
}

.roga-opt.is-selected {
	background: var(--roga-accent);
	border-color: var(--roga-accent);
	color: var(--roga-onaccent);
}

.roga-opt.is-selected .roga-opt-key {
	background: color-mix(in srgb, var(--roga-onaccent) 22%, transparent);
	border-color: transparent;
	color: var(--roga-onaccent);
}

.roga-opt-key {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	font-size: 12px;
	font-weight: 600;
	border: 1px solid color-mix(in srgb, var(--roga-accent) 35%, transparent);
	border-radius: 5px;
	color: var(--roga-accent);
}

.roga-opt-label { flex: 1 1 auto; }

.roga-other-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 16px 6px 16px;
	border: 1.5px dashed color-mix(in srgb, var(--roga-accent) 35%, transparent);
	border-radius: var(--roga-radius);
}

.roga-other { border: 0 !important; padding-left: 0 !important; }

/* Text inputs */

.roga-input {
	width: 100%;
	padding: 12px 4px;
	font: inherit;
	font-size: 20px;
	color: var(--roga-text);
	background: transparent;
	border: 0;
	border-bottom: 2px solid color-mix(in srgb, var(--roga-accent) 30%, transparent);
	border-radius: 0;
	transition: border-color 140ms ease;
}

.roga-input:focus {
	outline: none;
	border-bottom-color: var(--roga-accent);
}

.roga-input::placeholder { color: color-mix(in srgb, var(--roga-muted) 70%, transparent); }

textarea.roga-input { resize: vertical; line-height: 1.5; }

select.roga-input { padding-right: 24px; }

.roga-legal {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 15px;
	cursor: pointer;
}

.roga-legal input { margin-top: 4px; }

/* Navigation */

.roga-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 26px;
}

.roga-btn {
	display: inline-flex;
	align-items: center;
	padding: 11px 22px;
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	color: var(--roga-onaccent);
	background: var(--roga-accent);
	border: 1.5px solid var(--roga-accent);
	border-radius: var(--roga-radius);
	cursor: pointer;
	transition: filter 140ms ease, transform 140ms ease;
}

.roga-btn:hover { filter: brightness(1.12); }
.roga-btn:active { transform: translateY(1px); }

.roga-btn:focus-visible {
	outline: 2px solid var(--roga-accent);
	outline-offset: 3px;
}

.roga-btn-ghost {
	color: var(--roga-accent);
	background: transparent;
	border-color: transparent;
	font-weight: 500;
	padding-left: 8px;
	padding-right: 8px;
}

.roga-kbd-hint {
	font-size: 13px;
	color: var(--roga-muted);
}

.roga-error {
	margin: 12px 0 0;
	min-height: 1em;
	font-size: 14px;
	color: #c0392b;
}

.roga-rgpd {
	margin-top: 18px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--roga-muted);
}

/* Progress */

.roga-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	background: color-mix(in srgb, var(--roga-accent) 14%, transparent);
}

.roga-progress-fill {
	height: 100%;
	width: 0;
	background: var(--roga-accent);
	transition: width 260ms ease;
}

/* Thank you */

.roga-thankyou { text-align: center; }

.roga-check-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 18px;
	font-size: 28px;
	color: var(--roga-onaccent);
	background: var(--roga-accent);
	border-radius: 50%;
}

.roga-welcome .roga-btn { margin-top: 24px; }

/* Small screens */

@media (max-width: 600px) {
	.roga-root { padding: 28px 16px 56px; font-size: 16px; }
	.roga-q-label { font-size: 20px; }
	.roga-title { font-size: 22px; }
	.roga-input { font-size: 17px; }
	.roga-opt-key { display: none; }
	/* Sur mobile, les modalites (options a choix) sont rendues plus discretes
	   pour ne pas ecraser visuellement l'intitule de la question et sa
	   description. Meme taille de police que la description. */
	.roga-opt {
		font-size: 15px;
		padding: 10px 14px;
	}
}

/* No-JavaScript fallback */

.roga-fallback { max-width: 640px; text-align: left; }
.roga-fallback label { font-weight: 500; }
.roga-fallback input[type="text"],
.roga-fallback input[type="email"],
.roga-fallback input[type="tel"],
.roga-fallback input[type="date"],
.roga-fallback input[type="number"],
.roga-fallback textarea,
.roga-fallback select {
	width: 100%;
	padding: 8px;
	margin-top: 4px;
}

.roga-welcome .roga-logo {
	display: block;
	max-width: 100%;
	margin: 0 0 20px;
	height: auto;
}


/* Review screen */

.roga-review {
	/* On accepte que la card d\u00e9borde du padding vertical par defaut. */
	padding-bottom: 0;
	/* La synth\u00e8se contient un tableau : elle a besoin de toute la largeur
	   disponible dans son container (contrairement aux questions simples
	   limit\u00e9es \u00e0 640px pour la lisibilit\u00e9). */
	max-width: none;
	width: 100%;
}

.roga-review-header {
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 2px solid var(--roga-accent);
}

.roga-review .roga-title { margin: 0 0 6px; }
.roga-review .roga-desc  { margin: 0 0 12px; color: var(--roga-muted); }

.roga-review-top-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.roga-review-list {
	margin: 0 0 24px;
	padding: 0;
	display: block;
	width: 100%;
}

.roga-review-row {
	display: grid;
	/* 3 colonnes : label 45%, valeur remplit le reste, bouton Modifier au bout. */
	grid-template-columns: 45% 1fr auto;
	gap: 12px;
	padding: 8px 4px;
	border: 0;
	border-bottom: 1px solid color-mix(in srgb, var(--roga-muted) 25%, transparent);
	background: transparent;
	border-radius: 0;
	align-items: baseline;
}

.roga-review-row:last-child { border-bottom: 0; }

.roga-review-label {
	margin: 0;
	font-weight: 600;
	color: var(--roga-text);
	line-height: 1.35;
	font-size: 0.9em;
	min-width: 0;
}

/* .roga-review-value est un <dd> requis par la semantique dl. On le neutralise
   visuellement via display: contents pour que ses enfants (answer + edit)
   participent directement au grid parent en tant que colonnes 2 et 3. */
.roga-review-value {
	display: contents;
}

.roga-review-answer {
	color: var(--roga-text);
	white-space: pre-wrap;
	word-break: break-word;
	overflow-wrap: anywhere;
	line-height: 1.45;
	min-width: 0;
}

.roga-review-answer.is-empty {
	color: var(--roga-muted);
	font-style: italic;
}

.roga-review-edit {
	appearance: none;
	background: transparent;
	border: 0;
	padding: 2px 4px;
	margin: 0;
	font: inherit;
	font-size: 0.88em;
	color: var(--roga-accent);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
	justify-self: end;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* En desktop, on affiche le mot "Modifier" (label texte). L'icône SVG est
   masquée. Sur mobile (media query plus bas), on inverse : icône visible,
   texte masqué, et le bouton devient un cercle discret. */
.roga-review-edit-icon { display: none; }
.roga-review-edit-icon svg { display: block; }

.roga-review-edit:hover,
.roga-review-edit:focus-visible {
	color: color-mix(in srgb, var(--roga-accent) 75%, black);
	outline: none;
}

/* Sticky footer : le bouton d'envoi reste toujours visible pendant le scroll. */
.roga-review-footer {
	position: sticky;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 24px -32px 0;
	padding: 14px 32px;
	background: var(--roga-bg);
	border-top: 1px solid color-mix(in srgb, var(--roga-muted) 30%, transparent);
	box-shadow: 0 -6px 12px -6px rgba(0,0,0,.08);
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: center;
	z-index: 5;
}

@media (max-width: 600px) {
	.roga-review-row {
		/* Layout ultra-compact : label et valeur colles, crayon en absolute. */
		display: block;
		gap: 0;
		padding: 6px 40px 6px 2px;
		position: relative;
	}
	.roga-review-label {
		display: block;
		font-size: 0.75em;
		color: var(--roga-muted);
		font-weight: 600;
		margin: 0;
		line-height: 1.2;
	}
	.roga-review-value {
		display: block;
	}
	.roga-review-answer {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 1.3;
		min-width: 0;
	}
	.roga-review-edit {
		position: absolute;
		right: 2px;
		top: 50%;
		transform: translateY(-50%);
		width: 28px;
		height: 28px;
		border-radius: 50%;
		padding: 0;
		border: 1px solid color-mix(in srgb, var(--roga-accent) 30%, transparent) !important;
		background: transparent;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		text-decoration: none !important;
		flex: none;
	}
	.roga-review-edit-label { display: none; }
	.roga-review-edit-icon { display: inline-flex; }
	.roga-review-footer { margin: 20px -16px 0; padding: 12px 16px; }
}


/* ==========================================================================
   Theme hardening (1.3.2)
   ==========================================================================
   Certains themes (Workalley notamment) appliquent des regles globales sur
   tous les <button> qui recolorent leur fond et leur texte au :hover, :focus
   ou :active. Ces regles peuvent rendre le texte de nos boutons invisible
   (blanc sur blanc, ou fond blanc masquant le contenu). On force ici les
   couleurs Roga sur tous les etats, avec !important, pour etre imperturbable
   quel que soit le theme actif.
*/

.roga-root button.roga-btn,
.roga-root button.roga-btn:hover,
.roga-root button.roga-btn:focus,
.roga-root button.roga-btn:active,
.roga-root button.roga-btn:focus-visible {
	background: var(--roga-accent) !important;
	background-color: var(--roga-accent) !important;
	color: var(--roga-onaccent) !important;
	border-color: var(--roga-accent) !important;
	box-shadow: none !important;
}

.roga-root button.roga-btn-ghost,
.roga-root button.roga-btn-ghost:hover,
.roga-root button.roga-btn-ghost:focus,
.roga-root button.roga-btn-ghost:active {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--roga-accent) !important;
	border: 0 !important;
	box-shadow: none !important;
}

.roga-root button.roga-opt {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--roga-text) !important;
	border: 1.5px solid color-mix(in srgb, var(--roga-accent) 35%, transparent) !important;
	box-shadow: none !important;
	/* Spacing entre les options : certains thèmes forcent margin: 0 sur les
	   <button> (notamment via .elementor-widget button ou une regle mobile),
	   ce qui fait se chevaucher les options. On rétablit le spacing en dur. */
	margin: 0 0 14px !important;
	/* Certains themes appliquent aussi height: fixe, min-height, ou
	   align-items: center sur les <button>, ce qui coupe le contenu
	   multi-lignes. On impose ici les valeurs qui garantissent que le cadre
	   s'adapte a son contenu et qu'aucun texte ne deborde ni ne se fait
	   couper. */
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	line-height: 1.4 !important;
	align-items: flex-start !important;
	overflow: visible !important;
}

.roga-root button.roga-opt:hover,
.roga-root button.roga-opt:focus,
.roga-root button.roga-opt:focus-visible,
.roga-root button.roga-opt:active {
	background: color-mix(in srgb, var(--roga-accent) 8%, transparent) !important;
	background-color: color-mix(in srgb, var(--roga-accent) 8%, transparent) !important;
	color: var(--roga-text) !important;
	border-color: var(--roga-accent) !important;
	box-shadow: none !important;
}

.roga-root button.roga-opt.is-selected,
.roga-root button.roga-opt.is-selected:hover,
.roga-root button.roga-opt.is-selected:focus,
.roga-root button.roga-opt.is-selected:active {
	background: var(--roga-accent) !important;
	background-color: var(--roga-accent) !important;
	color: var(--roga-onaccent) !important;
	border-color: var(--roga-accent) !important;
	box-shadow: none !important;
}

/* Les enfants du bouton option doivent aussi rester visibles quoi qu'il arrive. */
.roga-root .roga-opt-label,
.roga-root .roga-opt-key {
	opacity: 1 !important;
	visibility: visible !important;
	color: inherit !important;
}

.roga-root button.roga-opt.is-selected .roga-opt-label,
.roga-root button.roga-opt.is-selected .roga-opt-key {
	color: var(--roga-onaccent) !important;
}

.roga-root button.roga-review-edit,
.roga-root button.roga-review-edit:hover,
.roga-root button.roga-review-edit:focus,
.roga-root button.roga-review-edit:active {
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--roga-accent) !important;
	text-decoration: underline !important;
}