/*
Theme Name:   Hello Elementor Child – Nova Diagnostic
Theme URI:    https://novadiagnostic.local
Description:  Thème enfant de Hello Elementor pour NOVA DIAGNOSTIC. Toutes les personnalisations vivent ici pour survivre aux mises à jour du thème parent.
Author:       Nova Diagnostic
Template:     hello-elementor
Version:      1.4.0
Text Domain:  hello-elementor-child
*/

/* =========================================================================
   Unités

   Toutes les dimensions sont en rem, base 1rem = 16px. Une taille en rem
   suit le réglage de police du navigateur : un visiteur qui agrandit le
   texte voit aussi grandir les espacements, et la mise en page reste
   cohérente au lieu de se tasser.

   Seule exception : les points de rupture des media queries restent en px,
   pour rester alignés sur ceux d'Elementor (768px) — un breakpoint en rem
   se décalerait dès que la police racine change, et les deux systèmes ne
   basculeraient plus au même moment.
   ====================================================================== */

/* =========================================================================
   Charte graphique — valeurs issues de la configuration Tailwind des
   maquettes fournies par le client, et non d'un relevé à l'œil sur le logo.
   ====================================================================== */

:root {
	/* Bleu marine — titres, aplats, pied de page */
	--nova-navy:        #1b365d;
	--nova-navy-dark:   #12253f;

	/* Vert — boutons d'action, validations, pictogrammes */
	--nova-green:       #8cc63f;
	--nova-green-dark:  #6fa32c;

	/* Fond clair de la maquette */
	--nova-light:       #f8fafc;

	/* Bleu vif — liens sur fond clair.
	   Absent de la maquette : le bleu marine y sert aussi de couleur de lien.
	   On garde une valeur distincte pour les liens en corps de texte, où le
	   marine sur blanc manque de signal. */
	--nova-blue:        #1b75bc;

	/* Neutres — alignés sur la palette Tailwind utilisée dans les maquettes */
	--nova-ink:         #1f2937;   /* gray-800 */
	--nova-grey:        #4b5563;   /* gray-600 */
	--nova-grey-light:  #6b7280;   /* gray-500 */
	--nova-line:        #e5e7eb;   /* gray-200 */
	--nova-paper:       #f9fafb;   /* gray-50  */
	--nova-white:       #ffffff;

	/* Échelle DPE — valeurs réglementaires reprises des maquettes */
	--dpe-a: #00974e;
	--dpe-b: #52b153;
	--dpe-c: #a0c863;
	--dpe-d: #f3d446;
	--dpe-e: #f0b039;
	--dpe-f: #e9742b;
	--dpe-g: #d42d26;

	/* Rayon « pilule » : valeur volontairement très grande, le navigateur
	   la ramène à la moitié de la hauteur de l'élément. */
	--nova-radius-pilule: 62.5rem;
}

/* =========================================================================
   Débordement horizontal

   Aucune page n'a besoin de défiler latéralement : les rares éléments plus
   larges que l'écran (le tableau des tarifs) gèrent leur propre défilement
   dans leur conteneur. On supprime donc la barre du document.

   ATTENTION : masquer le débordement sur html ou body crée un contexte de
   défilement qui neutralise « position: sticky » sur les descendants.
   Aucun élément collant n'est utilisé aujourd'hui — vérifié. Si un jour on
   ajoute une colonne latérale collante, il faudra retirer cette règle et
   traiter la cause réelle du débordement.
   ====================================================================== */

html,
body {
	overflow-x: hidden;
}

/* =========================================================================
   Accessibilité — le client affiche un engagement d'inclusion dans ses
   documents internes ; le site doit être cohérent avec ça.
   ====================================================================== */

/* Le focus clavier doit rester visible : Hello Elementor ne le garantit pas
   sur tous les éléments. Sans ça, la navigation au clavier est impraticable. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 0.1875rem solid var(--nova-blue);
	outline-offset: 0.125rem;
}

/* Lien d'évitement : assuré par Header Footer Elementor (.hfe-skip-link).
   Ces règles restent au cas où l'en-tête HFE serait remplacé. */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 0.75rem 1.25rem;
	background: var(--nova-navy);
	color: var(--nova-white);
	text-decoration: none;
}

.skip-link:focus {
	left: 0;
}

/* Cible de clic d'au moins 2.75rem (44px) : recommandation WCAG 2.5.8, et
   surtout confort réel sur mobile, d'où viendra l'essentiel du trafic. */
.nova-cta,
.wp-block-button__link {
	display: inline-block;
	min-height: 2.75rem;
	padding: 0.75rem 1.75rem;
	line-height: 1.25;
}

/* Respect de la préférence système « animations réduites ». */
@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;
	}
}

/* =========================================================================
   Bases typographiques
   ====================================================================== */

body {
	color: var(--nova-ink);
}

h1, h2, h3, h4, h5, h6 {
	color: var(--nova-navy);
}

a {
	color: var(--nova-blue);
}

a:hover {
	color: var(--nova-navy);
}

/* =========================================================================
   Page Tarifs & Démarche

   Composants trop structurés pour être assemblés widget par widget dans
   Elementor : ils vivent en HTML dans un widget « Éditeur de texte » et
   sont mis en forme ici.
   ====================================================================== */

/* --- Badge « Secteur d'intervention » ---------------------------------- */

.nova-badge {
	display: inline-block;
	padding: 0.5rem 1rem;
	border-radius: var(--nova-radius-pilule);
	background: #eff6ff;
	border: 0.0625rem solid #dbeafe;
	color: var(--nova-navy);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.3;
}

/* --- Tableau des tarifs ------------------------------------------------- */

/* Le tableau défile horizontalement sur mobile plutôt que de déborder
   ou de comprimer les colonnes à l'illisible. */
.nova-tarifs-wrap {
	overflow-x: auto;
	border: 0.0625rem solid var(--nova-line);
	border-radius: 0.75rem;
	box-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.04);
	-webkit-overflow-scrolling: touch;
}

.nova-tarifs {
	width: 100%;
	min-width: 32.5rem;
	border-collapse: collapse;
	background: var(--nova-white);
	margin: 0;
}

.nova-tarifs thead th {
	background: var(--nova-paper);
	border-bottom: 0.0625rem solid var(--nova-line);
	color: var(--nova-grey);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 1rem;
	text-align: center;
}

.nova-tarifs thead th:first-child {
	text-align: left;
	width: 50%;
}

/* L'arrondi porte sur le conteneur, mais les cellules d'angle gardent leurs
   angles droits et débordent visuellement. On ne peut pas masquer le
   dépassement du conteneur : il doit rester en overflow-x pour le défilement
   mobile. On arrondit donc les quatre cellules d'angle, très légèrement en
   retrait pour se loger à l'intérieur du trait de bordure. */
.nova-tarifs thead tr:first-child th:first-child {
	border-top-left-radius: 0.6875rem;
}

.nova-tarifs thead tr:first-child th:last-child {
	border-top-right-radius: 0.6875rem;
}

.nova-tarifs tbody tr:last-child td:first-child {
	border-bottom-left-radius: 0.6875rem;
}

.nova-tarifs tbody tr:last-child td:last-child {
	border-bottom-right-radius: 0.6875rem;
}

.nova-tarifs tbody tr:last-child td {
	border-bottom: 0;
}

.nova-tarifs thead th .nova-th-note {
	display: block;
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--nova-grey-light);
}

.nova-tarifs th.nova-col-ttc,
.nova-tarifs td.nova-col-ttc {
	background: rgba(140, 198, 63, 0.07);
}

.nova-tarifs th.nova-col-ht,
.nova-tarifs td.nova-col-ht {
	border-left: 0.0625rem solid var(--nova-line);
}

.nova-tarifs tbody tr {
	border-top: 0.0625rem solid #f3f4f6;
}

.nova-tarifs tbody tr:hover {
	background: var(--nova-light);
}

.nova-tarifs td {
	padding: 1rem;
	color: var(--nova-grey);
	vertical-align: middle;
}

.nova-tarifs td:first-child {
	font-weight: 500;
	color: var(--nova-ink);
}

.nova-tarifs td i {
	width: 1.5rem;
	margin-right: 0.5rem;
	text-align: center;
}

.nova-tarifs .nova-diag-note {
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--nova-grey-light);
	margin-left: 0.25rem;
}

.nova-tarifs td.nova-col-ttc {
	text-align: center;
	font-weight: 700;
	font-size: 1.125rem;
	color: var(--nova-navy);
}

.nova-tarifs td.nova-col-ht {
	text-align: center;
	color: var(--nova-grey-light);
}

/* Sur petit écran, la mention entre tirets alourdit inutilement la ligne. */
@media (max-width: 767px) {
	.nova-tarifs .nova-diag-note {
		display: none;
	}
}

.nova-tarifs-note {
	font-size: 0.875rem;
	color: var(--nova-grey-light);
	margin-top: 1rem;
}

.nova-tarifs-note i {
	color: var(--nova-navy);
	margin-right: 0.25rem;
}

/* --- Cartes « Compris / Facturé en supplément » ------------------------- */

.nova-card {
	background: var(--nova-white);
	border-radius: 0.75rem;
	padding: 2rem;
	box-shadow: 0 0.25rem 0.375rem -0.0625rem rgba(0, 0, 0, 0.07),
	            0 0.125rem 0.25rem -0.125rem rgba(0, 0, 0, 0.05);
	border-top: 0.25rem solid var(--nova-green);
	height: 100%;
}

.nova-card--alerte {
	border-top-color: #fb923c;
}

.nova-card h3 {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 1.25rem;
	font-weight: 700;
	color: #111827;
	margin: 0 0 1.5rem;
}

/* Pastille ronde du titre.
   Elle est stylée SUR DEUX SÉLECTEURS à dessein : l'éditeur de texte
   d'Elementor supprime parfois les <span> qu'il juge superflus, ce qui
   faisait disparaître la pastille. La règle s'applique donc aussi bien au
   <span class="nova-pastille"> qu'à une icône posée directement dans le
   titre — le rendu reste identique quelle que soit la structure survivante. */
.nova-card h3 .nova-pastille,
.nova-card h3 > i:first-child {
	flex: 0 0 2.5rem;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: #dcfce7;
	color: var(--nova-green-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.125rem;
}

.nova-card--alerte h3 .nova-pastille,
.nova-card--alerte h3 > i:first-child {
	background: #ffedd5;
	color: #ea580c;
}

/* L'icône contenue dans la pastille hérite de sa couleur : on l'explicite
   pour qu'aucune règle de titre du thème ne vienne la réécrire. */
.nova-card h3 .nova-pastille i {
	color: inherit;
	font-size: inherit;
}

.nova-card ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nova-card li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin-bottom: 1rem;
	color: var(--nova-grey);
	line-height: 1.6;
}

.nova-card li:last-child {
	margin-bottom: 0;
}

.nova-card li i {
	flex: 0 0 1rem;
	margin-top: 0.3125rem;
	color: var(--nova-green-dark);
}

.nova-card--alerte li i {
	color: #ea580c;
}

/* --- Frise « La démarche, étape par étape » ----------------------------- */

.nova-frise {
	position: relative;
	margin: 0 auto;
	max-width: 56rem;
	padding-left: 1rem;
}

.nova-etape {
	position: relative;
	display: flex;
	align-items: flex-start;
	margin-bottom: 3rem;
}

.nova-etape:last-child {
	margin-bottom: 0;
}

/* Trait de liaison entre les pastilles. Il s'arrête à la dernière étape. */
.nova-etape::before {
	content: '';
	position: absolute;
	top: 3rem;
	left: 1.5rem;
	bottom: -3rem;
	width: 0.125rem;
	background: var(--nova-line);
	z-index: 0;
}

.nova-etape:last-child::before {
	display: none;
}

.nova-etape-num {
	position: absolute;
	left: 0;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--nova-navy);
	border: 0.25rem solid var(--nova-white);
	box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.15);
	color: var(--nova-white);
	font-weight: 700;
	z-index: 1;
}

.nova-etape:nth-child(even) .nova-etape-num {
	background: var(--nova-green-dark);
}

.nova-etape-texte {
	margin-left: 4rem;
	padding-top: 0.5rem;
}

.nova-etape-texte h4 {
	font-size: 1.25rem;
	font-weight: 700;
	color: #111827;
	margin: 0 0 0.5rem;
}

.nova-etape-texte p {
	color: var(--nova-grey);
	margin: 0;
	line-height: 1.7;
}

/* Alternance gauche/droite à partir du bureau. */
@media (min-width: 768px) {
	.nova-frise {
		padding-left: 0;
	}

	.nova-etape::before {
		left: 50%;
		transform: translateX(-50%);
	}

	.nova-etape-num {
		left: 50%;
	}

	.nova-etape-texte {
		width: 50%;
		margin-left: 0;
		padding-right: 4rem;
		text-align: right;
	}

	.nova-etape:nth-child(even) {
		flex-direction: row-reverse;
	}

	.nova-etape:nth-child(even) .nova-etape-texte {
		padding-right: 0;
		padding-left: 4rem;
		text-align: left;
	}
}

/* --- Encart de recommandation ------------------------------------------ */

.nova-reco-badge {
	display: inline-block;
	padding: 0.375rem 1rem;
	border-radius: var(--nova-radius-pilule);
	background: rgba(255, 255, 255, 0.2);
	color: var(--nova-white);
	font-size: 0.875rem;
	font-weight: 600;
}

/* =========================================================================
   Grille tarifaire par tranche de surface — septembre 2026

   La première version du tableau comparait deux colonnes de prix, TTC et
   HT. La grille transmise par le client fonctionne autrement : un prix par
   tranche de surface, plus des packs. Cinq colonnes au lieu de trois.
   ====================================================================== */

/* La colonne du libellé ne prend plus la moitié du tableau : avec quatre
   colonnes de prix, elle doit juste rester lisible. */
.nova-tarifs--surface thead th:first-child,
.nova-packs thead th:first-child {
	width: auto;
	min-width: 11rem;
}

.nova-tarifs--surface thead th:not(:first-child),
.nova-packs thead th:not(:first-child) {
	text-align: center;
	white-space: nowrap;
}

.nova-tarifs--surface td:not(:first-child),
.nova-packs td:not(:first-child) {
	text-align: center;
	font-weight: 700;
	font-size: 1.0625rem;
	color: var(--nova-navy);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* « Sur devis » n'est pas un prix : il ne doit pas avoir le poids
   typographique d'un montant, sinon l'œil le lit comme tel. */
.nova-tarifs--surface td.nova-devis,
.nova-packs td.nova-devis {
	font-weight: 400;
	font-size: 0.9375rem;
	font-style: italic;
	color: var(--nova-grey-light);
}

/* Composition de chaque pack, sous son nom. */
.nova-pack-detail {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.8125rem;
	font-weight: 400;
	line-height: 1.45;
	color: var(--nova-grey-light);
}

.nova-packs td:first-child {
	font-weight: 600;
	color: var(--nova-ink);
}

/* Titre intermédiaire entre les deux tableaux. */
.nova-tarifs-soustitre {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--nova-navy);
	margin: 2.5rem 0 0.5rem;
}

.nova-tarifs-chapeau {
	color: var(--nova-grey);
	margin: 0 0 1rem;
	font-size: 0.9375rem;
}

/* Sur mobile, le tableau défile : on force une largeur minimale qui
   laisse les cinq colonnes lisibles plutôt que de les écraser. */
.nova-tarifs--surface,
.nova-packs {
	min-width: 38rem;
}