/* ==========================================================================
   NovaPeren — feuille de style principale
   Chargée après Divi. Ne jamais modifier le thème parent.

   Direction : luxe épuré. Le lin porte toute la surface, l'or dessine les
   traits, le bleu n'apparaît que sur les points d'action. Si l'or occupe
   plus de 5 % de l'écran, c'est qu'il y en a trop.
   ========================================================================== */

:root {
	/* --- Lin : base, 90 % de la surface --- */
	--np-lin:        #e9e0ce;
	--np-lin-clair:  #f6f1e7;
	--np-lin-fonce:  #d8cbb2;

	/* --- Or : traits, cadres, accents. Jamais en aplat plein écran --- */
	--np-or:         #b8962e;
	--np-or-clair:   #e3ce8e;
	/* Variante foncée obligatoire pour le texte : #b8962e sur lin ne donne
	   qu'un rapport de 2,4:1, insuffisant en petit corps (AA = 4,5:1).
	   #7d6115 sur lin atteint 5,1:1. */
	--np-or-texte:   #7d6115;

	/* --- Bleu : la touche. Liens, boutons, focus. Rien d'autre --- */
	--np-bleu:       #13334e;
	--np-bleu-fonce: #0d2436;

	/* --- Textes --- */
	--np-encre:      #2a2520;
	--np-sable:      #7a7060;

	/* Échelle typographique — quarte réduite, cadencée en clamp() */
	--np-t1: clamp(2.5rem, 6.5vw, 4.8rem);
	--np-t2: clamp(1.85rem, 4vw, 2.9rem);
	--np-t3: clamp(1.3rem, 2.3vw, 1.7rem);
	--np-t4: 1.0625rem;
	--np-t5: 0.8125rem;

	--np-trace: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------------------
   1. Bases — surcharges Divi
   -------------------------------------------------------------------------- */

body,
body.et-db #et-boc .et-l {
	background-color: var(--np-lin);
	color: var(--np-encre);
}

body {
	font-family: "Jost", Arial, Helvetica, sans-serif;
	font-size: var(--np-t4);
	line-height: 1.65;
	font-weight: 300;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: "Bodoni Moda", Georgia, "Times New Roman", serif;
	color: var(--np-bleu);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.015em;
}

h1 { font-size: var(--np-t1); }
h2 { font-size: var(--np-t2); }
h3 { font-size: var(--np-t3); }

p { max-width: 68ch; }

a { color: var(--np-bleu); text-decoration: none; }

/* Neutralise la couleur « lien visité » par défaut du navigateur (souvent
   bleu ou violet) : sans cette règle, un lien d'ancre déjà cliqué — comme
   « Zone d'intervention » dans le menu, qui pointe vers #zones sur la même
   page — change de couleur tout seul et détonne au milieu des autres liens
   de la charte. */
a:visited { color: inherit; }

/* Focus visible impératif : le curseur personnalisé ne remplace jamais
   la navigation au clavier. */
:focus-visible {
	outline: 2px solid var(--np-bleu);
	outline-offset: 3px;
}

/* Exception : le script du funnel déplace le focus sur le titre de chaque
   étape par accessibilité (annonce du changement pour les lecteurs
   d'écran), pas pour la navigation clavier — ce titre n'est jamais atteint
   par la touche Tab. Sans cette exception, le focus programmatique dessine
   un cadre bleu autour du titre à chaque étape, qui ressemble à un champ de
   saisie mal fermé. Les vrais contrôles interactifs (boutons, liens, champs)
   gardent leur contour de focus normal. */
.np-etape h2:focus, .np-etape h3:focus { outline: none; }

/* --------------------------------------------------------------------------
   2. Curseur « viseur d'architecte »
   Trois éléments : un point de visée, un réticule à quatre amorces,
   et un cadre qui vient encadrer l'élément survolé — le geste de quelqu'un
   qui relève une cote sur un plan.
   -------------------------------------------------------------------------- */

.np-viseur,
.np-viseur-point,
.np-viseur-cadre {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99999;
	pointer-events: none;
	will-change: transform;
}

/* Réticule */
.np-viseur {
	width: 38px;
	height: 38px;
	margin: -19px 0 0 -19px;
	transition: width 0.35s var(--np-trace), height 0.35s var(--np-trace),
		margin 0.35s var(--np-trace), opacity 0.25s linear;
}
.np-viseur::before,
.np-viseur::after {
	content: "";
	position: absolute;
	background: var(--np-or);
}
/* Amorces horizontales */
.np-viseur::before {
	top: 50%;
	left: 0;
	width: 100%;
	height: 1px;
	transform: translateY(-50%);
	-webkit-mask-image: linear-gradient(90deg, #000 0 26%, transparent 26% 74%, #000 74% 100%);
	mask-image: linear-gradient(90deg, #000 0 26%, transparent 26% 74%, #000 74% 100%);
}
/* Amorces verticales */
.np-viseur::after {
	left: 50%;
	top: 0;
	height: 100%;
	width: 1px;
	transform: translateX(-50%);
	-webkit-mask-image: linear-gradient(180deg, #000 0 26%, transparent 26% 74%, #000 74% 100%);
	mask-image: linear-gradient(180deg, #000 0 26%, transparent 26% 74%, #000 74% 100%);
}

/* Point de visée — c'est lui qui suit le doigt au pixel près */
.np-viseur-point {
	width: 5px;
	height: 5px;
	margin: -2.5px 0 0 -2.5px;
	border-radius: 50%;
	background: var(--np-bleu);
	transition: opacity 0.2s linear, transform 0.2s var(--np-trace);
}

/* Cadre de visée : apparaît autour d'un élément interactif */
.np-viseur-cadre {
	border: 1px solid var(--np-or);
	opacity: 0;
	transition: opacity 0.28s linear, transform 0.4s var(--np-trace),
		width 0.4s var(--np-trace), height 0.4s var(--np-trace);
}
.np-viseur-cadre span {
	position: absolute;
	right: -1px;
	bottom: -1.65rem;
	font-size: 0.66rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--np-or-texte);
	white-space: nowrap;
}
/* Équerres aux angles du cadre : le trait s'arrête, il n'entoure jamais
   complètement l'élément — c'est ce qui le distingue d'un simple survol. */
.np-viseur-cadre::before,
.np-viseur-cadre::after {
	content: "";
	position: absolute;
	width: 9px;
	height: 9px;
	border: 1px solid var(--np-or);
	background: var(--np-lin);
}
.np-viseur-cadre::before { top: -5px; left: -5px; }
.np-viseur-cadre::after  { bottom: -5px; right: -5px; }

/* États pilotés par le JS */
.np-viseur.est-cible { opacity: 0; }
.np-viseur.est-presse { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
.np-viseur-point.est-presse { transform: scale(2.2); }
.np-viseur-cadre.est-visible { opacity: 1; }

/* Le curseur natif disparaît uniquement sur pointeur fin.
   Tablette, mobile, stylet : rien ne change. */
@media (hover: hover) and (pointer: fine) {
	body.np-curseur-actif,
	body.np-curseur-actif a,
	body.np-curseur-actif button,
	body.np-curseur-actif [role="button"] {
		cursor: none;
	}
	/* Exception : les champs de saisie gardent leur curseur texte,
	   sans quoi on ne sait plus où on écrit. */
	body.np-curseur-actif input,
	body.np-curseur-actif textarea,
	body.np-curseur-actif select {
		cursor: auto;
	}
}
@media (hover: none), (pointer: coarse) {
	.np-viseur, .np-viseur-point, .np-viseur-cadre { display: none !important; }
}

/* --------------------------------------------------------------------------
   3. Composants signature
   -------------------------------------------------------------------------- */

/* Ligne de cote : annotation de plan. Remplace les « eyebrows » en capitales
   que l'on voit partout. Le trait porte l'information, pas la majuscule. */
.np-cote {
	display: inline-block;
	position: relative;
	padding-left: 3.25rem;
	font-size: var(--np-t5);
	letter-spacing: 0.18em;
	color: var(--np-or-texte);
}
.np-cote::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 2.5rem;
	height: 1px;
	background: var(--np-or);
}
.np-cote::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 1px;
	height: 0.7em;
	background: var(--np-or);
}

/* Numéro de pièce — la numérotation porte une information réelle :
   l'ordre de la visite. */
.np-numero {
	font-family: "Bodoni Moda", Georgia, serif;
	font-size: clamp(3.2rem, 11vw, 6.5rem);
	line-height: 0.8;
	color: transparent;
	-webkit-text-stroke: 1px var(--np-or);
	opacity: 0.6;
}

/* Lien souligné progressif */
.np-lien {
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0 1px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size 0.4s var(--np-trace);
}
.np-lien:hover,
.np-lien:focus-visible { background-size: 100% 1px; }

/* --- Parcours pièce par pièce --- */
.np-parcours { position: relative; }

.np-legende {
	position: sticky;
	top: 120px;
	float: left;
	width: 11rem;
	margin-left: -13rem;
	list-style: none;
	padding: 0;
}
.np-legende li { margin-bottom: 0.6rem; list-style: none; }
.np-legende a {
	display: flex;
	gap: 0.85rem;
	font-size: 0.78rem;
	letter-spacing: 0.18em;
	color: rgba(122, 112, 96, 0.55);
	transition: color 0.5s var(--np-trace);
}
.np-legende a.est-active { color: var(--np-or-texte); }
@media (max-width: 1280px) { .np-legende { display: none; } }

.np-piece {
	display: grid;
	gap: 2.5rem;
	align-items: center;
	padding: 4rem 0;
	border-top: 1px solid var(--np-lin-fonce);
	scroll-margin-top: 100px;
}
@media (min-width: 981px) {
	.np-piece { grid-template-columns: 1fr 1.05fr; gap: 3.5rem; }
	/* L'alternance gauche/droite est décidée dans l'ordre d'écriture du
	   HTML (voir np_parcours dans shortcodes.php), pas ici via `order` :
	   plus aucun décompte de position dont la parité puisse être faussée
	   par un élément voisin. */
}
/* En dessous de 981 px, la grille repasse à une seule colonne : l'alternance
   n'a alors plus de sens visuel, et l'ordre d'écriture du HTML (qui alterne
   texte/visuel selon la pièce) ferait apparaître l'image AVANT le texte une
   pièce sur deux une fois empilée. On force donc un ordre de lecture
   toujours identique : texte, puis visuel. */
@media (max-width: 980px) {
	.np-piece-texte { order: 1; }
	.np-piece-visuel { order: 2; }
}

/* Defensive : Divi ajoute parfois overflow:hidden ou une transformation sur
   ses conteneurs de section/ligne/colonne (effets de survol, parallaxe,
   arrondis…). Ces deux propriétés, sur n'importe quel ancêtre, neutralisent
   silencieusement le `position: sticky` de la légende du parcours — c'est
   un piège CSS connu, pas une faute de notre feuille de style. On force
   donc ces trois conteneurs précis (et uniquement eux, pas leurs enfants :
   les transformations décoratives internes, comme le losange du
   comparateur, restent intactes) à laisser le sticky fonctionner. */
.np-section-parcours,
.np-ligne-parcours,
.np-colonne-parcours {
	overflow: visible !important;
	transform: none !important;
}
.np-piece-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 2.5rem;
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--np-lin-fonce);
}
.np-piece-meta dt {
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	color: var(--np-or-texte);
}
.np-piece-meta dd { margin: 0.25rem 0 0; color: var(--np-bleu); }

/* --- Comparateur avant / après --- */
.np-comparateur {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--np-bleu);
	user-select: none;
	touch-action: pan-y;
}
@media (min-width: 768px) { .np-comparateur { aspect-ratio: 16 / 10; } }
.np-comparateur-face {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
}
.np-comparateur-apres { background: var(--np-lin-clair); color: var(--np-bleu); }
.np-comparateur-avant { background: var(--np-bleu); color: var(--np-lin); }
.np-comparateur-face svg { width: 80%; height: 78%; }
/* Vraie photo : remplit tout le cadre, recadrée proprement (aucune marge
   blanche, contrairement au dessin au trait qui reste centré et réduit). */
.np-comparateur-face img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.np-comparateur-legende {
	position: absolute;
	bottom: 0.75rem;
	font-size: 0.7rem;
	letter-spacing: 0.18em;
}
.np-comparateur-avant .np-comparateur-legende { left: 1rem; color: rgba(233, 224, 206, 0.6); }
.np-comparateur-apres .np-comparateur-legende { right: 1rem; color: var(--np-or-texte); }
.np-poignee {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--np-or);
	box-shadow: 0 0 0 1px rgba(19, 51, 78, 0.2);
}
.np-poignee::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 34px;
	height: 34px;
	margin: -17px 0 0 -17px;
	border: 1px solid var(--np-or);
	background: var(--np-lin);
	transform: rotate(45deg);
}
.np-comparateur input[type="range"] {
	position: absolute;
	inset: auto 0 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: ew-resize;
	margin: 0;
}

/* --- Funnel de devis --- */
.np-funnel { max-width: 44rem; }
.np-progression {
	display: flex;
	align-items: center;
	gap: 1rem;
}
.np-progression-piste {
	flex: 1;
	height: 1px;
	/* var(--np-lin-fonce) sur fond lin ne fait quasiment aucun contraste :
	   seule la portion parcourue (dorée) restait visible, donnant
	   l'impression d'une barre coupée en plein milieu. */
	background: rgba(122, 112, 96, 0.35);
}
.np-progression-barre {
	height: 1px;
	background: var(--np-or);
	transition: width 0.5s var(--np-trace);
}
.np-etape { display: none; }
.np-etape.est-active { display: block; animation: np-entree 0.3s var(--np-trace); }
@keyframes np-entree {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}
.np-choix {
	display: grid;
	gap: 0.75rem;
	margin-top: 1.75rem;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.np-choix button {
	padding: 1rem 1.25rem;
	text-align: left;
	background: var(--np-lin-clair);
	border: 1px solid var(--np-lin-fonce);
	color: var(--np-encre);
	font-size: 1rem;
	font-family: inherit;
	transition: border-color 0.3s var(--np-trace), background 0.3s var(--np-trace);
}
.np-choix button:hover,
.np-choix button:focus-visible {
	border-color: var(--np-or);
	background: #fff;
}
.np-choix button small {
	display: block;
	margin-top: 0.2rem;
	color: var(--np-sable);
	font-size: 0.88rem;
}

/* --- Variante illustrée : projet et pièce concernée ---
   Icône au trait au-dessus du libellé, dans le même vocabulaire graphique
   que la coupe du logement et les comparateurs — pas un nouveau style
   d'icône, la même main. Hauteur uniforme quelle que soit la longueur du
   libellé, pour que les boutons restent alignés entre eux. */
.np-choix--icones button {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	text-align: center;
	padding: 1.35rem 1rem 1.15rem;
}
.np-choix-icone {
	display: block;
	width: 3.4rem;
	height: 2.2rem;
	color: var(--np-or);
}
.np-choix-icone svg { width: 100%; height: 100%; }
.np-choix-libelle { font-size: 0.96rem; line-height: 1.3; }
.np-choix--icones button:hover .np-choix-icone,
.np-choix--icones button:focus-visible .np-choix-icone { color: var(--np-bleu); }

.np-champs { display: grid; gap: 1rem; margin-top: 1.75rem; }
@media (min-width: 640px) { .np-champs-duo { grid-template-columns: 1fr 1fr; } }
.np-champ span {
	display: block;
	font-size: 0.78rem;
	letter-spacing: 0.18em;
	color: var(--np-or-texte);
}
.np-champ input,
.np-champ textarea {
	width: 100%;
	margin-top: 0.5rem;
	padding: 0.8rem 1rem;
	background: #fff;
	border: 1px solid var(--np-lin-fonce);
	font-family: inherit;
	font-size: 1rem;
	color: var(--np-encre);
}
.np-champ input:focus,
.np-champ textarea:focus { border-color: var(--np-or); outline: none; }
.np-piege { position: absolute; left: -9999px; }
.np-erreur { color: #8c2b20; font-size: 0.92rem; }

/* --- Boutons --- */
.np-bouton,
body #page-container .et_pb_button.np-bouton {
	display: inline-block;
	padding: 0.95rem 1.85rem;
	background: var(--np-bleu);
	color: var(--np-lin-clair);
	border: 1px solid var(--np-bleu);
	border-radius: 0;
	font-size: 1rem;
	font-family: inherit;
	letter-spacing: 0.01em;
	transition: background 0.3s var(--np-trace), color 0.3s var(--np-trace);
}
.np-bouton:hover { background: var(--np-bleu-fonce); color: #fff; }
/* Utilisé exclusivement sur fond bleu nuit (hero, CTA final, bandeau ville) :
   texte clair au repos, bascule sur or plein avec texte nuit au survol. */
.np-bouton-or {
	background: transparent;
	border-color: var(--np-or);
	color: var(--np-lin-clair);
}
.np-bouton-or:hover { background: var(--np-or); color: var(--np-bleu-fonce); }

/* Divi ajoute une flèche « → » après chaque bouton : on la retire,
   elle casse la sobriété recherchée. */
body #page-container .et_pb_button.np-bouton::after { display: none; }

/* --- Bloc FAQ --- */
.np-faq { border-top: 1px solid var(--np-lin-fonce); }
.np-faq details {
	border-bottom: 1px solid var(--np-lin-fonce);
	padding: 1.25rem 0;
}
.np-faq summary {
	list-style: none;
	font-size: 1.06rem;
	color: var(--np-bleu);
}
.np-faq summary::-webkit-details-marker { display: none; }
.np-faq p { margin-top: 0.75rem; color: rgba(42, 37, 32, 0.88); }

/* --- Maillage villes --- */
.np-villes {
	display: grid;
	gap: 0.6rem 2rem;
	list-style: none;
	padding: 0;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.np-villes li {
	border-bottom: 1px solid var(--np-lin-fonce);
	padding-bottom: 0.5rem;
	list-style: none;
}
.np-villes a { display: flex; justify-content: space-between; gap: 1rem; }
.np-villes small { color: var(--np-sable); letter-spacing: 0.18em; font-size: 0.72rem; }

/* --- Chiffres de réassurance --- */
.np-chiffres {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	margin: 0;
}
.np-chiffres dt {
	font-family: "Bodoni Moda", Georgia, serif;
	font-size: 2.4rem;
	line-height: 1;
	color: var(--np-bleu);
}
.np-chiffres dd { margin: 0.5rem 0 0; color: var(--np-sable); font-size: 0.92rem; }

/* Slogan en pied de section CTA finale, repris de la charte imprimée. */
.np-slogan {
	margin-top: 1.6rem;
	font-family: "Bodoni Moda", Georgia, serif;
	font-style: italic;
	color: var(--np-or-clair);
	font-size: 1.05rem;
}

/* --- Coupe du logement (hero) ---
   Posée sur le fond bleu nuit du hero : texte et filets clairs, jamais de
   couleurs pensées pour un fond lin (l'erreur d'origine de ce bloc, masquée
   jusqu'ici par le fond crème peint à tort sur chaque module — voir la
   règle corrigée en section 1). */
.np-coupe { border-left: 1px solid rgba(184, 150, 46, 0.45); padding-left: 1.5rem; }
.np-coupe a {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding: 0.7rem 0;
	border-bottom: 1px solid rgba(246, 241, 231, 0.14);
	color: var(--np-lin-clair);
}
.np-coupe a:last-child { border-bottom: 0; }
.np-coupe svg { width: 4rem; height: 2.5rem; flex: 0 0 auto; color: rgba(184, 150, 46, 0.8); }
.np-coupe span:last-child {
	margin-left: auto;
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	color: rgba(246, 241, 231, 0.4);
}

/* --------------------------------------------------------------------------
   4. Accessibilité et préférences système
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
	/* Le viseur suit alors le pointeur sans inertie ni morphing. */
	.np-viseur-cadre { display: none !important; }
}

.np-lecteur-ecran {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Impression : ni viseur, ni fond lin. */
@media print {
	.np-viseur, .np-viseur-point, .np-viseur-cadre { display: none; }
	body { background: #fff; }
}

/* --------------------------------------------------------------------------
   5. Mobile et tablette
   Divi gère déjà le responsive de ses propres modules (menu, colonnes qui
   s'empilent, tailles de police par rupture dans le Visual Builder). Cette
   section couvre ce que Divi ne sait pas faire : les composants du thème
   enfant (parcours, comparateur, funnel) et le confort tactile en général.
   -------------------------------------------------------------------------- */

/* Aucun défilement horizontal parasite (le viseur ou une grille mal
   contrainte peuvent en provoquer un sur petit écran). */
html, body { overflow-x: hidden; }

/* Suppression du flash gris au tap sur iOS/Android, remplacé par les états
   :active définis plus bas — plus cohérent avec la charte que le gris système. */
a, button, .np-choix button, .np-comparateur, summary {
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

/* Cible tactile confortable (recommandation WCAG 2.5.5 / Apple HIG : 44 px
   minimum). Les boutons texte du site sont déjà au-dessus ; on le rend
   explicite pour ne pas régresser au prochain réglage de padding. */
.np-bouton,
.np-choix button,
.np-legende a,
.np-comparateur input[type="range"] {
	min-height: 44px;
}

/* --- Tablette (portrait et paysage), 641 px à 1024 px --- */
@media (min-width: 641px) and (max-width: 1024px) {
	/* La légende de plan collante n'a pas la place de respirer en dessous de
	   1300 px (cf. règle plus haut) : sur tablette on bascule donc sur une
	   mise en page pleine largeur, sans colonne fixe. */
	.np-piece { padding: 3rem 0; }

	/* Deux colonnes plutôt qu'une seule liste étroite pour les FAQ et les
	   villes : la largeur d'une tablette le permet et évite un défilement
	   inutilement long. */
	.np-villes { grid-template-columns: repeat(2, 1fr); }

	/* Les boutons du funnel passent en 2 colonnes plutôt qu'en pleine
	   largeur : plus rapide à parcourir du pouce en mode paysage. */
	.np-choix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Mobile, jusqu'à 640 px --- */
@media (max-width: 640px) {
	/* Un seul choix par ligne : plus sûr au pouce qu'une grille resserrée,
	   et cohérent avec la logique « une question, une réponse » du funnel. */
	.np-choix { grid-template-columns: 1fr; }
	.np-choix button { padding: 1.1rem 1.25rem; }

	/* L'ordre de lecture (texte avant visuel) est déjà fixé pour tout
	   l'intervalle sous 981 px par la règle définie plus haut, avec
	   .np-piece. */
	.np-piece { padding: 2.75rem 0; gap: 2rem; }

	/* Les métadonnées (durée / budget) sur deux colonnes plutôt que côte à
	   côte à l'infini : évite le texte tassé sur un écran de 360 px. */
	.np-piece-meta { grid-template-columns: repeat(2, 1fr); display: grid; gap: 1rem 1.5rem; }

	/* Le comparateur garde un ratio plus vertical : au format 16/10 sur un
	   écran étroit, les dessins deviennent minuscules. */
	.np-comparateur { aspect-ratio: 4 / 3; }

	/* La coupe du logement (hero) : icônes réduites, texte resserré, pour
	   que les huit lignes tiennent sans dominer l'écran d'ouverture. */
	.np-coupe svg { width: 3rem; height: 2rem; }
	.np-coupe a { padding: 0.55rem 0; gap: 0.9rem; }

	/* Les chiffres de réassurance passent de 4 à 2 colonnes : au-delà,
	   les nombres à trois caractères ("72 h") se retrouvent isolés. */
	.np-chiffres { grid-template-columns: repeat(2, 1fr); }

	/* Boutons pleine largeur : plus faciles à toucher, et cohérents avec le
	   choix de tout empiler verticalement sur mobile. */
	.np-bouton { display: block; width: 100%; text-align: center; }
	.np-piece-texte .np-bouton,
	.np-piece-texte a.np-lien { width: auto; display: inline-block; }
}

/* --- Petits téléphones, 380 px et moins --- */
@media (max-width: 380px) {
	.np-numero { font-size: 2.6rem; }
	.np-piece-meta { grid-template-columns: 1fr; }
	.np-chiffres { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
}

/* --- Confort au doigt sur le comparateur avant/après ---
   Sur pointeur fin la poignée fait 1 px de large (trait de plan) ; sur
   tactile, la zone de préhension réelle doit être bien plus large que le
   trait visible. Le curseur du <input type="range"> assure déjà la prise en
   charge tactile ; on agrandit ici la zone visuelle de la poignée pour que
   le losange reste lisible sans grossir le trait lui-même. */
@media (pointer: coarse) {
	.np-poignee::after { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
}

/* --- Zones sûres (encoche, barre de gestes iOS) ---
   Le bandeau collant et le pied de page ne doivent pas passer sous les
   zones système sur iPhone en mode paysage. */
@supports (padding: max(0px)) {
	.et_header_style_left .et_pb_row, header.et-l--header .et_pb_row {
		padding-left: max(1.5rem, env(safe-area-inset-left));
		padding-right: max(1.5rem, env(safe-area-inset-right));
	}
}