/**
 * Kadro Pergola Configurator — styles publics.
 *
 * Ce fichier est servi tel quel au navigateur : il ne contient aucune valeur
 * commerciale.
 *
 * PORTÉE STRICTE — chaque règle est portée par .kadro-pergola-configurator.
 * Aucun sélecteur global, aucune fuite vers le thème ni vers Elementor, et
 * réciproquement. Un test automatisé vérifie cette règle sélecteur par
 * sélecteur (tests/test-frontend.php).
 *
 * TYPOGRAPHIE — le configurateur HÉRITE de la police du site. Aucun fichier
 * de police n'est embarqué, aucun appel externe n'est fait : le thème et
 * Elementor chargent déjà Montserrat, la charger une seconde fois serait un
 * doublon coûteux. Ce fichier ne fixe que les tailles, les graisses et les
 * espacements.
 *
 * Charte Kadro Bois : vert nuit #054923 · vert vif #0F7F35 · orange #CE470A
 *                     or #E2B530 · texte #333333 · gris clair #FAFAFA
 *                     olive #4F6826 · sauge #77A375 · or foncé #AF9919
 *                     bronze #B2840F · grenat #99281C
 */

/* ══ Conteneur et variables ═══════════════════════════════════════════════ */

/*
 * 🔴 « hidden » DOIT L'EMPORTER. RÈGLE GÉNÉRALE, ET NON PLUS AU CAS PAR CAS.
 *
 * Le navigateur masque un élément porteur de l'attribut « hidden » par une
 * règle de sa propre feuille : « [hidden] { display: none } ». Or TOUTE règle
 * d'auteur portant « display » l'emporte sur une règle du navigateur, quelle
 * que soit sa spécificité. Un élément déclaré « display: grid » ici reste donc
 * affiché même quand le script le marque masqué — sans erreur, sans trace.
 *
 * Ce piège a été rencontré TROIS FOIS dans ce projet :
 *
 *   · 1.3.1 — la vue agrandie restait dans la mise en page ;
 *   · 1.4.3 — le bouton d'accès à la 3D restait visible entre 900 et 1199 px ;
 *   · 1.6.2 — les onglets mobiles ne commutaient plus rien, la colonne 3D
 *     restant affichée quel que soit l'onglet actif.
 *
 * Les deux premières fois, la correction a été LOCALE : une règle pour
 * l'élément fautif. C'était traiter le symptôme. Le troisième cas est arrivé
 * sur des éléments créés après coup, qui ne pouvaient pas hériter d'un
 * correctif écrit pour d'autres.
 *
 * Cette règle-ci vaut pour tout le configurateur, y compris pour ce qui n'y
 * est pas encore. « !important » n'est pas un aveu de faiblesse : c'est le
 * seul moyen de reprendre la main sur une quinzaine de « display » d'auteur,
 * et la portée reste strictement limitée au conteneur du plugin.
 */
.kadro-pergola-configurator [hidden] {
	display: none !important;
}

.kadro-pergola-configurator {
	--kpc-vert-nuit: #054923;
	--kpc-vert-vif: #0F7F35;
	--kpc-orange: #CE470A;
	--kpc-or: #E2B530;
	--kpc-texte: #333333;
	--kpc-gris: #FAFAFA;
	--kpc-olive: #4F6826;
	--kpc-sauge: #77A375;
	--kpc-or-fonce: #AF9919;
	--kpc-bronze: #B2840F;
	--kpc-grenat: #99281C;

	/*
	 * Bruns « bois ». Ils ne figurent pas dans la charte système : ce sont les
	 * teintes réelles du douglas et de l'autoclave, reprises de la vue 3D pour
	 * que l'interface et la pergola parlent la même langue.
	 */
	--kpc-bois: #8A5A2B;
	--kpc-bois-clair: #C08A50;
	--kpc-bois-fonce: #5A3A1C;
	--kpc-creme: #FBF8F2;

	--kpc-texte-doux: #5C5C5C;
	--kpc-bordure: #E0E0E0;
	--kpc-bordure-forte: #C9C9C9;

	--kpc-rayon: 10px;
	--kpc-rayon-petit: 6px;
	--kpc-gap: 20px;

	/* Échelle typographique — la famille, elle, vient du thème. */
	--kpc-t-xs: 0.78em;
	--kpc-t-sm: 0.88em;
	--kpc-t-md: 1em;
	--kpc-t-lg: 1.16em;
	--kpc-t-xl: 1.5em;

	--kpc-ombre: 0 1px 2px rgba(5, 73, 35, 0.05), 0 4px 14px rgba(5, 73, 35, 0.06);
	--kpc-ombre-forte: 0 2px 6px rgba(5, 73, 35, 0.10), 0 12px 30px rgba(5, 73, 35, 0.10);

	/* Cible tactile minimale recommandée. */
	--kpc-touch: 44px;

	--kpc-transition: 160ms ease;

	/*
	 * 🔴 HAUTEUR DE LA BARRE BASSE — valeur de REPLI.
	 *
	 * La barre est en position fixe : rien ne pousse le contenu au-dessus
	 * d'elle, et sans réserve elle recouvrirait les dernières options et le
	 * formulaire de devis.
	 *
	 * Le script MESURE la barre et réécrit cette variable : sa hauteur réelle
	 * dépend du repli du libellé du bouton et de la longueur de la mention
	 * légale, qui varie avec la langue. La valeur ci-dessous n'est qu'un point
	 * de départ — et le filet si le script ne tourne pas.
	 */
	--kpc-bottombar-h: 112px;

	/*
	 * Hauteur de la barre d'onglets, mesurée elle aussi. Nulle en version
	 * large, où les onglets n'existent pas — un élément masqué mesure 0, et
	 * c'est la bonne valeur, pas une mesure ratée.
	 */
	--kpc-switch-h: 0px;

	/*
	 * 🔴 CHROME AU-DESSUS DU CONFIGURATEUR, mesuré par le script.
	 *
	 * La barre d'administration de WordPress est en position fixe et occupe
	 * le haut de la fenêtre (32 px, 46 px sur téléphone). Elle ne fait pas
	 * partie de « 100dvh » du point de vue du calcul : sans la retrancher, la
	 * zone 3D est trop haute d'autant et repasse sous la barre basse.
	 *
	 * Zéro pour un visiteur non connecté, ce qui est le cas courant.
	 */
	--kpc-chrome-top: 0px;

	/*
	 * 🔴 ESPACE AU-DESSUS DU CONFIGURATEUR, mesuré par le script.
	 *
	 * En-tête du site, fil d'Ariane, titre de page, marges de section : tout
	 * ce qui occupe le haut du document avant nous. C'est cette valeur, et
	 * non « --kpc-chrome-top », qui répond à « toute la hauteur sous
	 * l'en-tête ».
	 *
	 * ⚠ LES DEUX NE S'ADDITIONNENT JAMAIS. Quand la barre d'administration
	 * est fixe, WordPress décale tout le document de 32 px : ces 32 px sont
	 * déjà compris ici. Les compter une seconde fois retrancherait deux fois
	 * la même hauteur.
	 *
	 * Elles ne servent pas non plus à la même chose :
	 *   · « above »  → la HAUTEUR disponible, mesurée en haut de page ;
	 *   · « chrome » → le point de COLLAGE de la vue 3D, qui ne dépend que de
	 *     ce qui occulte l'écran en permanence. Coller la 3D à hauteur de
	 *     l'en-tête la laisserait pincée là même après qu'il a défilé hors de
	 *     vue, avec une bande vide au-dessus.
	 */
	--kpc-above-h: 0px;

	/*
	 * Largeur de la barre de défilement, mesurée. « 100vw » la comprend :
	 * sans la déduire, une mise en page bord à bord déborde et la page gagne
	 * un défilement horizontal.
	 */
	--kpc-scrollbar-w: 0px;

	/* Marge respirée entre le haut de la zone utile et la zone 3D collée. */
	--kpc-stage-gap: 16px;
	--kpc-stage-top: calc(var(--kpc-chrome-top) + var(--kpc-stage-gap));

	/*
	 * 🔴 PLANCHER DE SÉCURITÉ — LA 3D NE PEUT JAMAIS S'EFFONDRER.
	 *
	 * Sur une fenêtre pathologiquement courte, ou sous un empilement de
	 * bandeaux qu'on ne sait pas mesurer, la hauteur disponible calculée peut
	 * devenir dérisoire, nulle, voire négative. « max() » garantit qu'il
	 * restera toujours cette hauteur-là.
	 *
	 * ⚠ Oui, c'est un plancher, et la 1.5.0 en avait un qui battait la
	 * contrainte qu'il devait respecter. La différence est son NIVEAU : celui
	 * de la 1.5.0 valait 480 px et se déclenchait sur un portable ordinaire.
	 * Celui-ci ne mord qu'en dessous de 400 px de hauteur utile — et à ce
	 * moment-là, l'alternative n'est pas « une 3D bien cadrée », c'est « pas
	 * de 3D du tout ». Une vue un peu trop haute se fait défiler ; une vue
	 * effondrée ne se récupère pas.
	 */
	--kpc-stage-min: 260px;

	color: var(--kpc-texte);
	font-family: inherit;
	line-height: 1.55;
	max-width: 100%;

	/* La réserve, justement. Elle vaut pour TOUT le configurateur, formulaire compris. */
	padding-bottom: calc(var(--kpc-bottombar-h) + 16px);
}

/*
 * Mouvement réduit : le système d'exploitation le demande, on obéit. Les
 * transitions et animations sont neutralisées, jamais les changements d'état.
 */
@media (prefers-reduced-motion: reduce) {
	.kadro-pergola-configurator {
		--kpc-transition: 1ms linear;
	}

	.kadro-pergola-configurator *,
	.kadro-pergola-configurator *::before,
	.kadro-pergola-configurator *::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 1ms !important;
	}
}

/*
 * Accessibilité — un anneau de focus VISIBLE et homogène sur tout ce qui se
 * pilote au clavier. Le thème ne peut pas le savoir : chaque élément
 * interactif du configurateur le porte ici.
 */
.kadro-pergola-configurator a:focus-visible,
.kadro-pergola-configurator button:focus-visible,
.kadro-pergola-configurator input:focus-visible,
.kadro-pergola-configurator select:focus-visible,
.kadro-pergola-configurator textarea:focus-visible,
.kadro-pergola-configurator canvas:focus-visible,
.kadro-pergola-configurator [tabindex]:focus-visible {
	outline: 3px solid var(--kpc-vert-vif);
	outline-offset: 2px;
	border-radius: var(--kpc-rayon-petit);
}

/* Réservé aux lecteurs d'écran. */
.kadro-pergola-configurator .kpc-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.kadro-pergola-configurator *,
.kadro-pergola-configurator *::before,
.kadro-pergola-configurator *::after {
	box-sizing: border-box;
}

.kadro-pergola-configurator p {
	margin: 0 0 0.6em;
}

.kadro-pergola-configurator p:last-child {
	margin-bottom: 0;
}

/* ══ Bandeau du configurateur ═════════════════════════════════════════════ */

/*
 * Le bandeau reste DANS LE FLUX, il n'est pas collant.
 *
 * ⚠ Le collage de la vue 3D se règle sur « --kpc-chrome-top », qui mesure ce
 * qui occulte l'écran EN PERMANENCE. Un bandeau collant devrait entrer dans
 * cette mesure, faute de quoi la 3D se collerait sous lui et s'en trouverait
 * pincée. Le laisser défiler ne coûte rien et ne touche pas à ce calcul.
 */
.kadro-pergola-configurator .kpc-topbar {
	align-items: center;
	background: var(--kpc-creme);
	border-bottom: 1px solid rgba(5, 73, 35, 0.14);
	display: flex;
	gap: 12px;
	justify-content: space-between;
	margin-bottom: 18px;
	padding: 10px 2px;
}

/*
 * C'est la MARQUE qui cède quand la place manque, jamais le bouton : « min-width:
 * 0 » lui rend le droit de rétrécir, que « flex » retire par défaut. Sur un
 * écran étroit, un logo un peu plus petit reste un logo ; un libellé de sortie
 * tronqué devient une énigme.
 */
.kadro-pergola-configurator .kpc-topbar__brand {
	align-items: center;
	display: flex;
	min-width: 0;
}

/*
 * La hauteur est plafonnée ICI, pas dans le fichier : le média déposé fait
 * plusieurs centaines de pixels de large, et WordPress en sert déjà une taille
 * intermédiaire avec son « srcset ». Aucune image n'a été fabriquée pour ce
 * bandeau. « width: auto » avec « height: auto » laisse le rapport intact
 * malgré les attributs de dimension posés par WordPress.
 */
.kadro-pergola-configurator .kpc-topbar__logo {
	display: block;
	height: auto;
	max-height: 40px;
	max-width: 100%;
	width: auto;
}

.kadro-pergola-configurator .kpc-topbar__wordmark {
	color: var(--kpc-vert-nuit);
	font-size: var(--kpc-t-lg);
	font-weight: 700;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

/*
 * Lien de navigation, pas bouton d'action : voir la note du gabarit. Il garde
 * néanmoins la cible tactile de tous les éléments cliquables du configurateur.
 */
.kadro-pergola-configurator .kpc-topbar__exit {
	align-items: center;
	border-radius: var(--kpc-rayon-petit);
	color: var(--kpc-vert-nuit);
	display: inline-flex;
	flex: 0 0 auto;
	font-size: var(--kpc-t-sm);
	font-weight: 600;
	gap: 8px;
	min-height: var(--kpc-touch);
	padding: 6px 10px;
	text-decoration: none;
	white-space: nowrap;
}

.kadro-pergola-configurator .kpc-topbar__exit:hover {
	background: rgba(15, 127, 53, 0.08);
	color: var(--kpc-vert-vif);
}

.kadro-pergola-configurator .kpc-topbar__exit:focus-visible {
	outline: 2px solid var(--kpc-vert-vif);
	outline-offset: 2px;
}

.kadro-pergola-configurator .kpc-topbar__arrow {
	font-size: 1.15em;
	line-height: 1;
}

/* ══ Confirmation de sortie ═══════════════════════════════════════════════ */

/*
 * 🔴 REPLI OBLIGATOIRE POUR LES NAVIGATEURS SANS « dialog ».
 *
 * Là où l'élément n'est pas reconnu, il est rendu comme un bloc ordinaire :
 * la question s'afficherait donc en permanence, en haut de la page, sans
 * qu'aucun clic ne l'ait demandée. L'attribut « open » n'étant posé que par
 * showModal(), cette règle la garde masquée partout où le script ne peut pas
 * l'ouvrir — et le lien de sortie, lui, continue de fonctionner seul.
 */
.kadro-pergola-configurator .kpc-leave:not([open]) {
	display: none;
}

/*
 * Le panneau reprend le vert nuit de la barre basse : c'est la surface sombre
 * sur laquelle les deux variantes de bouton existantes sont déjà éprouvées.
 */
.kadro-pergola-configurator .kpc-leave {
	background: var(--kpc-vert-nuit);
	border: 0;
	border-radius: var(--kpc-rayon);
	box-shadow: 0 18px 48px rgba(5, 73, 35, 0.34);
	color: #FFFFFF;
	max-width: min(30rem, calc(100vw - 32px));
	padding: 24px;
}

.kadro-pergola-configurator .kpc-leave::backdrop {
	background: rgba(5, 73, 35, 0.58);
}

.kadro-pergola-configurator .kpc-leave__question {
	font-size: var(--kpc-t-lg);
	font-weight: 600;
	line-height: 1.35;
	margin: 0 0 8px;
}

/*
 * La mise en garde est une note, pas une alarme : elle passe sous la question,
 * en plus petit et en retrait de ton.
 *
 * ⚠ Teinte PLEINE et non blanc transparent. Une opacité ferait dépendre le
 * contraste du fond qui se trouve derrière, alors qu'ici il doit être une
 * certitude : ce vert très clair tient au-delà de 10:1 sur le vert nuit du
 * panneau.
 */
.kadro-pergola-configurator .kpc-leave__note {
	color: #CFE3D6;
	font-size: var(--kpc-t-sm);
	line-height: 1.45;
	margin: 0 0 20px;
}

/*
 * Les actions passent en colonne quand la place manque : deux boutons serrés
 * côte à côte sur un écran étroit, c'est un clic pris pour l'autre.
 */
.kadro-pergola-configurator .kpc-leave__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: flex-end;
}

.kadro-pergola-configurator .kpc-leave__actions .kpc-btn {
	flex: 1 1 auto;
}

/* ══ Repli sans JavaScript ════════════════════════════════════════════════ */

.kadro-pergola-configurator .kpc-nojs {
	background: var(--kpc-gris);
	border-left: 4px solid var(--kpc-or);
	padding: 16px 20px;
	border-radius: var(--kpc-rayon);
}

.kadro-pergola-configurator .kpc-nojs__link {
	color: var(--kpc-vert-vif);
	font-weight: 600;
	text-decoration: underline;
}

/* ══ Introduction ═════════════════════════════════════════════════════════ */

/*
 * 🔴 INTRODUCTION 1.3.6.
 *
 * Le bloc suivait la largeur de la colonne de contenu du thème, alors que le
 * configurateur, lui, s'étale sur presque tout l'écran : le titre paraissait
 * tassé au-dessus d'une interface trois fois plus large. Il s'aligne désormais
 * sur elle (voir la règle de version bureau), et gagne de l'air.
 *
 * Le titre est fluide plutôt que fixe : « clamp » lui évite d'être écrasé sur
 * un téléphone comme d'être ridicule sur un écran large, sans qu'aucune
 * requête de média n'ait à s'en mêler.
 */

/* Filet doré : le repère de la charte, déjà porté par le bloc prix. */




/*
 * La réserve d'usage passe en retrait : elle doit rester lisible — c'est une
 * mention, pas une note de bas de page — sans concurrencer la promesse.
 */

/* ══ Barre sous le plan · réinitialisation et aide au geste ═══════════════ */

.kadro-pergola-configurator .kpc-planbar {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: space-between;
	margin-top: 8px;
}

.kadro-pergola-configurator .kpc-planbar__reset {
	flex: 0 0 auto;
}

.kadro-pergola-configurator .kpc-planbar__hint {
	flex: 1 1 220px;
	margin: 0;
	min-width: 0;
}

/* ══ Disposition générale ═════════════════════════════════════════════════ */

.kadro-pergola-configurator .kpc-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--kpc-gap);
	align-items: start;

	/*
	 * 🔴 GARDE-FOU CONTRE LE DÉBORDEMENT HORIZONTAL.
	 *
	 * « clip » et non « hidden » : les deux rognent, mais « hidden » crée un
	 * conteneur de défilement, ce qui casserait le bloc d'estimation collant —
	 * il se collerait au bas de CE bloc au lieu du bas de l'écran. « clip » ne
	 * crée rien du tout. Sur un navigateur qui l'ignore, on retombe simplement
	 * sur le comportement d'avant : rien n'est cassé.
	 *
	 * La règle est posée ICI et non sur la racine : la vue agrandie, elle, est
	 * en position fixe HORS de cette grille, et doit pouvoir couvrir l'écran.
	 */
	overflow-x: clip;
}

.kadro-pergola-configurator .kpc-steps {
	display: grid;
	gap: 12px;
	min-width: 0;
}

/*
 * Colonnes du configurateur.
 *
 * 🔴 STRUCTURE 1.3.5 — trois colonnes, à l'image du configurateur de
 * référence : le tracé à gauche, la 3D au centre, les finitions et le montant
 * à droite.
 *
 * Elles existent à TOUTES les largeurs, y compris sur téléphone où elles
 * s'empilent simplement dans l'ordre du document — tracé, 3D, finitions. Cet
 * ordre est celui du parcours : on dessine, on regarde, on choisit. Aucune
 * réorganisation n'est donc nécessaire sur petit écran, et il n'y a plus de
 * colonne fantôme en « display: contents » à faire apparaître et disparaître
 * selon la largeur.
 */
.kadro-pergola-configurator .kpc-col {
	align-content: start;
	display: grid;
	gap: 12px;
	min-width: 0;
}

/* ══ Onglets de format étroit ═════════════════════════════════════════════ */

/*
 * 🔴 CE N'EST PAS LA BARRE SUPPRIMÉE EN 1.4.3.
 *
 * Celle-là commutait trois vues d'un même contenu, dont deux faisaient
 * doublon, à toutes les largeurs. Celle-ci n'existe que sous 900 px — où
 * l'écran ne peut pas montrer les deux zones à la fois — et commute deux
 * contenus DISTINCTS : ce qu'on regarde, ce qu'on règle.
 *
 * Écrite en mobile d'abord : visible par défaut, retirée par la version
 * large. Dans l'autre sens, elle apparaîtrait une fraction de seconde sur les
 * grands écrans lents.
 *
 * ⚠ Ne pas confondre avec « .kpc-tabs », qui est le sélecteur
 * « Rectangle / Forme libre » du tracé et n'a rien à voir.
 */
.kadro-pergola-configurator .kpc-switch {
	background: var(--kpc-gris);
	border: 1px solid var(--kpc-bordure);
	border-radius: 999px;
	display: grid;
	gap: 2px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	padding: 4px;
}

.kadro-pergola-configurator .kpc-switch__tab {
	background: transparent;
	border: none;
	border-radius: 999px;
	color: var(--kpc-texte-doux);
	cursor: pointer;
	font: inherit;
	font-size: var(--kpc-t-sm);
	font-weight: 600;
	min-height: var(--kpc-touch);
	padding: 8px 12px;
	transition:
		background-color var(--kpc-transition),
		color var(--kpc-transition);
}

/*
 * 🔴 LE SURVOL N'ATTEINT JAMAIS L'ONGLET ACTIF.
 *
 * La leçon de la 1.2.1, qu'il serait absurde de réapprendre : une règle de
 * survol plus spécifique que celle de l'onglet actif repeignait le libellé en
 * vert nuit sur un fond vert nuit. Sur écran tactile, le survol reste collé
 * après la frappe — l'onglet qu'on venait de choisir devenait illisible et le
 * restait. D'où l'exclusion explicite de « .is-active ».
 */
.kadro-pergola-configurator .kpc-switch__tab:not(.is-active):hover {
	background: rgba(15, 127, 53, 0.08);
	color: var(--kpc-vert-nuit);
}

.kadro-pergola-configurator .kpc-switch__tab.is-active {
	background: var(--kpc-vert-nuit);
	box-shadow: 0 2px 8px rgba(5, 73, 35, 0.22);
	color: #FFFFFF;
}

.kadro-pergola-configurator .kpc-switch__tab.is-active:hover,
.kadro-pergola-configurator .kpc-switch__tab.is-active:focus,
.kadro-pergola-configurator .kpc-switch__tab.is-active:focus-visible,
.kadro-pergola-configurator .kpc-switch__tab.is-active:active {
	background: var(--kpc-vert-nuit);
	color: #FFFFFF;
}

.kadro-pergola-configurator .kpc-switch__tab:focus-visible {
	outline: 2px solid var(--kpc-vert-vif);
	outline-offset: 2px;
}

.kadro-pergola-configurator .kpc-switch__tab.is-active:focus-visible {
	outline-color: var(--kpc-or);
}


/* ══ Barre basse · montant et appel à l'action ════════════════════════════ */

/*
 * 🔴 FIXE, ET NON COLLANTE.
 *
 * Le bloc d'estimation était « sticky » depuis la 1.3.4 : il restait à
 * l'écran, mais seulement tant que sa colonne existait. Sur téléphone, où
 * tout s'empile, il repassait sous le pli — c'est-à-dire exactement là où il
 * ne devait jamais être.
 *
 * En position fixe, il ne dépend plus d'aucune colonne : le montant, la
 * mention légale et le bouton sont visibles sur les deux formats, en
 * permanence. Le prix de cette garantie est la réserve de place sous le
 * contenu (voir « --kpc-bottombar-h » sur la racine) : elle n'est pas
 * facultative.
 */
.kadro-pergola-configurator .kpc-bottombar {
	/*
	 * 🔴 1.5.1 — VERT PIN DE LA CHARTE, ET TOUT LE TEXTE AVEC.
	 *
	 * Le fond passe de blanc à #054923. Les couleurs de texte du bloc prix
	 * n'y survivent pas : #333333 tombe à 1,19:1 et #5C5C5C à 1,58:1 — soit
	 * un texte gris foncé sur un vert foncé, illisible. Elles sont donc
	 * reprises une à une ci-dessous, avec leurs rapports mesurés.
	 */
	background: var(--kpc-vert-nuit);
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	bottom: 0;
	box-shadow: 0 -6px 22px rgba(5, 73, 35, 0.28);
	left: 0;
	padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
	position: fixed;
	right: 0;
	z-index: 20;
}

/*
 * Le contenu de la barre s'aligne sur celui du configurateur : sans cette
 * borne, sur un écran très large, le montant se retrouverait à un bout et le
 * bouton à l'autre.
 */
.kadro-pergola-configurator .kpc-bottombar .kpc-panel {
	margin-inline: auto;
	max-width: 1720px;
}


/*
 * Version étroite : le montant sur une ligne, le bouton dessous. Le
 * récapitulatif dépliable est retiré de la barre — il reste accessible, mais
 * il n'a rien à faire dans un bandeau permanent sur un écran de téléphone.
 */
/*
 * 🔴 UNE SEULE LIGNE — le montant à gauche, le bouton à droite.
 *
 * La barre montait à ~154 px pour trois informations : un libellé, un
 * montant sur deux chiffres, une mention légale et un bouton pleine largeur.
 * Elle empilait ce qui pouvait tenir côte à côte.
 *
 * « auto » sur la seconde colonne est le cœur du resserrement : le bouton
 * prend la largeur de son libellé, plus rien. Il occupait 43 % de la barre.
 */
/*
 * 🔴 MOBILE · DEUX NIVEAUX EMPILÉS — correctif 1.6.1.
 *
 * Tout aligner sur une ligne surchargeait la barre : le prix, la surface et
 * un bouton de trente et un caractères se disputaient 288 px sur un écran de
 * 320. Le prix et sa mention légale occupent le premier niveau, le bouton
 * prend le second sur toute la largeur.
 *
 * La mention légale reste au niveau 1, sous le montant : c'est le montant
 * qu'elle qualifie. Et le bouton reste le dernier élément, donc le plus
 * accessible au pouce.
 *
 * ⚠ La barre desktop, elle, reste sur UNE ligne — voir le palier « ≥ 900 px ».
 */
.kadro-pergola-configurator .kpc-bottombar .kpc-panel {
	display: grid;
	gap: 8px;
	grid-template-areas:
		"price"
		"action";
	grid-template-columns: minmax(0, 1fr);
}

/*
 * Le libellé « Estimation indicative » sort de l'AFFICHAGE, pas du document.
 *
 * Il faisait doublon avec la mention légale juste en dessous, qui dit la même
 * chose en plus précis. Mais il reste la seule étiquette du montant pour un
 * lecteur d'écran : le retirer du balisage laisserait un nombre sans nom.
 */
.kadro-pergola-configurator .kpc-bottombar .kpc-estimate__label {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.kadro-pergola-configurator .kpc-bottombar .kpc-estimate {
	grid-area: price;
}

/* Le montant et la surface sur une même ligne, séparés par un point médian. */
.kadro-pergola-configurator .kpc-bottombar [data-kpc-amount-block] {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
}

.kadro-pergola-configurator .kpc-bottombar .kpc-estimate__amount {
	font-size: 1.5em;
	margin-bottom: 0;
}

.kadro-pergola-configurator .kpc-bottombar .kpc-estimate__surface::before {
	content: "· ";
}

/*
 * 🔴 LE SÉPARATEUR AU-DESSUS DE LA MENTION LÉGALE EST SUPPRIMÉ.
 *
 * Un filet semi-transparent, plus 14 px de marge et 12 px de retrait : 27 px
 * de hauteur pour souligner une frontière que personne ne cherchait.
 *
 * ⚠ L'OPACITÉ AUSSI, et ce n'est pas cosmétique. La mention déclarait
 * #D3E2D7 — 7,88:1 sur le fond vert, niveau AAA — mais portait « opacity:
 * 0.8 » : sa couleur RÉELLE était #AAC3B3, soit 5,63:1. Elle n'a jamais tenu
 * le AAA annoncé en 1.5.1. L'opacité retirée, elle le tient vraiment.
 *
 * Le TEXTE de la mention n'est pas touché, et sa présence reste permanente.
 */
.kadro-pergola-configurator .kpc-bottombar .kpc-estimate__note {
	border-top: none;
	font-size: var(--kpc-t-xs);
	margin-top: 2px;
	opacity: 1;
	padding-top: 0;
}

.kadro-pergola-configurator .kpc-bottombar .kpc-cta {
	grid-area: action;
}

/*
 * 🔴 LE BOUTON PREND LA LARGEUR DE SON LIBELLÉ.
 *
 * « width: 100 % » dans une colonne en fraction lui donnait 43 % de la barre
 * pour quatre mots. « auto » le ramène à sa taille utile ; le plafond évite
 * qu'une traduction plus longue ne le fasse repartir de l'autre côté.
 *
 * La hauteur descend de 56 à 44 px — la cible tactile recommandée, pas moins.
 */
/*
 * 🔴 UNE SEULE LIGNE, JAMAIS DEUX — et sans jamais raccourcir le libellé.
 *
 * « Recevoir mon devis personnalisé » fait 31 caractères. Mesuré sur l'avance
 * moyenne de Montserrat, il demande environ 266 px à 13 px de police avec
 * 16 px de remplissage — soit 22 px de marge sur les 288 px utiles d'un écran
 * de 320. Cette marge n'est pas du luxe : l'estimation repose sur une avance
 * moyenne, qui dérive de quelques pour cent selon le rendu réel.
 *
 * ⚠ « nowrap » SANS cette réduction de taille produirait un débordement au
 * lieu d'un repli : le texte sortirait du bouton. Les deux vont ensemble.
 *
 * Sur mobile le bouton occupe tout le second niveau : sa largeur n'est plus
 * un enjeu, seule sa taille de police l'est.
 */
.kadro-pergola-configurator .kpc-bottombar .kpc-cta__button {
	font-size: 13px;
	max-width: 100%;
	min-height: var(--kpc-touch);
	padding: 10px 16px;
	white-space: nowrap;
	width: 100%;
}

.kadro-pergola-configurator .kpc-bottombar .kpc-cta__note {
	font-size: var(--kpc-t-xs);
	margin-top: 4px;
	text-align: center;
}

.kadro-pergola-configurator .kpc-bottombar .kpc-recap {
	display: none;
}

/*
 * 🔴 Le bloc du montant perd son décor DANS la barre.
 *
 * Ailleurs, il porte un dégradé vert et une ombre portée : c'était une carte
 * posée dans une colonne. Dans un bandeau fixe déjà bordé et ombré, ce décor
 * ferait une carte dans une carte, et volerait la hauteur dont la mention
 * légale a besoin.
 */
.kadro-pergola-configurator .kpc-bottombar .kpc-estimate {
	background: none;
	box-shadow: none;

	/*
	 * 🔴 COULEUR PAR DÉFAUT DU BLOC, ET ELLE COMPTE.
	 *
	 * Elle valait « var(--kpc-texte) », soit #333333 : 1,19:1 sur le vert.
	 * Tout enfant sans surcharge explicite en héritait — un texte gris foncé
	 * sur un vert foncé. Le blanc est ici le repli sûr : si un élément est
	 * ajouté demain sans qu'on pense à sa couleur, il sera lisible.
	 */
	color: #FFFFFF;
	padding: 0;
}

/*
 * Rapports mesurés sur le fond #054923 :
 *   · #FFFFFF → 10,59:1 (AAA)
 *   · #D3E2D7 →  7,88:1 (AAA)
 *
 * Le montant prend le blanc pur : c'est l'information principale. Les libellés
 * de service et la mention légale prennent le vert très clair — en retrait,
 * jamais en difficulté. Aucune valeur ne descend sous AAA : une mention
 * obligatoire ne se lit pas « si on force un peu ».
 */
.kadro-pergola-configurator .kpc-bottombar .kpc-estimate__amount {
	color: #FFFFFF;
}

.kadro-pergola-configurator .kpc-bottombar .kpc-estimate__label,
.kadro-pergola-configurator .kpc-bottombar .kpc-estimate__surface,
.kadro-pergola-configurator .kpc-bottombar .kpc-estimate__note,
.kadro-pergola-configurator .kpc-bottombar .kpc-estimate__empty,
.kadro-pergola-configurator .kpc-bottombar .kpc-estimate__dash,
.kadro-pergola-configurator .kpc-bottombar .kpc-cta__note,
.kadro-pergola-configurator .kpc-bottombar .kpc-recap,
.kadro-pergola-configurator .kpc-bottombar .kpc-recap__text {
	color: #D3E2D7;
}

/*
 * La mention légale garde en plus son filet de séparation, qui devient clair
 * pour rester visible sur le fond sombre.
 */
.kadro-pergola-configurator .kpc-bottombar .kpc-estimate__note {
	border-top-color: rgba(255, 255, 255, 0.22);
}

/*
 * ⚠ LA COULEUR DU BOUTON N'EST PAS TOUCHÉE — mais sa LISIBILITÉ, si.
 *
 * L'orange #CE470A sur le vert #054923 donne 2,28:1. Son libellé blanc reste
 * parfaitement lisible (4,64:1 sur l'orange), mais le bouton lui-même, en tant
 * que composant d'interface, doit se détacher de son fond à 3:1 au moins
 * (WCAG 1.4.11). Il ne s'en détache pas.
 *
 * Un liseré clair règle la question sans changer d'un ton la couleur du
 * bouton : c'est sa FRONTIÈRE qui devient perceptible, pas sa teinte.
 */
.kadro-pergola-configurator .kpc-bottombar .kpc-cta__button {
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55), 0 3px 12px rgba(0, 0, 0, 0.28);
}

.kadro-pergola-configurator .kpc-bottombar .kpc-cta__button:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 3px;
}


/* ══ Cotations sur la vue 3D ══════════════════════════════════════════════ */

/*
 * 🔴 UN CALQUE QUI NE PREND PAS LE GESTE.
 *
 * Il recouvre toute la scène : sans « pointer-events: none », il intercepterait
 * chaque rotation et chaque pincement, et la caméra deviendrait immobile. Les
 * étiquettes informent, elles ne se manipulent pas.
 */
.kadro-pergola-configurator .kpc-cotes {
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 2;
}

/*
 * 🔴 TRAIT DE COTE · UNE COULEUR NE SUFFIT PAS, ET C'EST MESURÉ.
 *
 * Contrairement à l'étiquette, un trait fin n'a pas de fond propre : son
 * contraste dépend entièrement de ce qu'il traverse. Or la scène change de
 * teinte selon l'angle et le zoom — ciel pâle, herbe, bois clair, bois sombre.
 *
 * Aucune couleur unique ne tient les 3:1 exigés d'un élément graphique porteur
 * d'information :
 *
 *   · blanc      → 1,18:1 sur le ciel bas ;
 *   · vert nuit  → 1,23:1 sur le bois marron sombre ;
 *   · or         → 1,05:1 sur le ciel haut ;
 *   · gris foncé → 1,03:1 sur le bois marron sombre.
 *
 * Le trait est donc DOUBLÉ : vert nuit sur un halo blanc. Là où l'un s'efface,
 * l'autre prend le relais. Pire cas de la paire, mesuré sur les neuf teintes
 * de la scène : 3,52:1, sur le douglas. Elle tient partout.
 *
 * Le halo est un « box-shadow » plein, pas une ombre floue : 1 px de chaque
 * côté d'un trait de 1,5 px, soit les 3,5 px annoncés. Un flou donnerait un
 * dégradé dont le contraste ne se calcule plus.
 */
.kadro-pergola-configurator .kpc-cotebar {
	background: var(--kpc-vert-nuit);
	border-radius: 1px;
	box-shadow: 0 0 0 1px #FFFFFF;
	height: 1.5px;
	left: 0;
	position: absolute;
	top: 0;

	/*
	 * ⚠ La barre pivote autour de son extrémité GAUCHE. Le script pose son
	 * point de départ et son angle : une origine au centre ferait tourner
	 * chaque chevron autour de son milieu, et les pointes se décrocheraient
	 * du bout de la ligne.
	 */
	transform-origin: 0 50%;
	width: 0;

	/*
	 * 🔴 LE TRAIT PASSE DERRIÈRE SON ÉTIQUETTE — correctif 1.7.3.
	 *
	 * Les deux familles étaient « position: absolute » sans « z-index » : elles
	 * s'empilaient donc dans l'ordre du DOM, et les barres, ajoutées après les
	 * étiquettes, passaient devant. Le trait barrait les chiffres qu'il était
	 * censé accompagner.
	 *
	 * ⚠ CORRIGÉ PAR UN « z-index » EXPLICITE, PAS EN RÉORDONNANT LE DOM.
	 *
	 * Les nœuds sont ajoutés au fil des besoins — une forme qui gagne un côté
	 * ajoute une étiquette et cinq barres à la suite. L'ordre d'insertion
	 * s'entremêle donc avec le temps, et s'y fier ferait dépendre la
	 * lisibilité de l'historique des formes tracées.
	 */
	z-index: 1;
}


/*
 * Chaque cote est posée par son CENTRE : le script écrit un coin, la
 * translation ramène l'étiquette sur le milieu du côté. Sans elle, une cote
 * longue déborderait vers la droite et ne désignerait plus rien.
 *
 * ⚠ Voile à 86 % : mesuré sur la zone la plus claire du ciel, le blanc y donne
 * 7,45:1 — AAA. À 78 % il tombe à 6,00:1, AA seulement.
 */
.kadro-pergola-configurator .kpc-cote {
	background: rgba(5, 73, 35, 0.86);
	border-radius: 999px;
	color: #FFFFFF;
	font-size: var(--kpc-t-xs);
	font-weight: 600;
	left: 0;
	line-height: 1.3;
	padding: 3px 9px;
	position: absolute;
	top: 0;
	transform: translate(-50%, -50%);
	white-space: nowrap;

	/*
	 * ⚠ STRICTEMENT AU-DESSUS DE « .kpc-cotebar ». Ce n'est pas la valeur qui
	 * compte, c'est l'écart : la cote doit rester lisible quoi qu'il arrive au
	 * trait qui la porte. Le banc vérifie la RELATION entre les deux, pas les
	 * nombres — les renuméroter reste permis, les inverser non.
	 */
	z-index: 2;
}


/* ══ Encadré de synthèse sur la vue 3D ════════════════════════════════════ */

/*
 * En haut à gauche, superposé. L'aide au geste occupe le bas au centre : les
 * deux ne se rencontrent jamais, quelle que soit la hauteur de la scène.
 *
 * L'habillage reprend celui de la barre de cotes du tracé 2D — même
 * disposition « étiquette / valeur », même arrondi — plutôt que d'inventer un
 * troisième style pour la même information.
 */
.kadro-pergola-configurator .kpc-summary {
	display: flex;
	flex-direction: column;
	gap: 4px;
	left: 12px;
	pointer-events: none;
	position: absolute;
	top: 12px;
	z-index: 2;
}

.kadro-pergola-configurator .kpc-summary__item {
	align-items: baseline;
	background: rgba(5, 73, 35, 0.86);
	border-radius: 6px;
	color: #FFFFFF;
	display: inline-flex;
	font-size: var(--kpc-t-xs);
	gap: 6px;
	padding: 4px 9px;
}

.kadro-pergola-configurator .kpc-summary__item em {
	font-style: normal;
	opacity: 1;
	text-transform: uppercase;
}

.kadro-pergola-configurator .kpc-summary__item b {
	font-weight: 700;
}


/* ══ Repli de la vue 3D ═══════════════════════════════════════════════════ */

/*
 * 🔴 CE MESSAGE NE DÉPEND PAS DE CE DONT IL ANNONCE LA PANNE.
 *
 * Il était à l'intérieur du panneau 3D : quand le moteur échouait, le script
 * refermait le panneau et emportait l'explication. Sur téléphone, l'onglet
 * « Visualisation 3D » devenait un écran vide.
 *
 * Il est désormais frère du panneau, et reste lisible quoi qu'il arrive à
 * celui-ci.
 */
.kadro-pergola-configurator .kpc-scene__fallback {
	background: rgba(226, 181, 48, 0.12);
	margin-top: 12px;
	border-left: 3px solid var(--kpc-or);
	border-radius: 4px;
	font-size: 0.9em;
	padding: 12px 14px;
}


/*
 * 🔴 UNE HAUTEUR DÉFINIE, PAS UN SIMPLE MAXIMUM — correctif 1.5.2.
 *
 * La 1.5.1 ne posait qu'un « max-height ». C'est un plafond, pas une hauteur :
 * la colonne se dimensionnait donc sur son contenu. Or son contenu ne mesure
 * RIEN — le canvas 3D est en « position: absolute », il ne pousse pas son
 * parent. La rangée « 1fr » n'avait aucun espace libre à distribuer, tout
 * s'effondrait à zéro, et la zone 3D disparaissait entièrement, message de
 * repli compris.
 *
 * « 1fr » ne distribue que l'espace LIBRE d'un conteneur de taille définie.
 * Sans hauteur définie quelque part dans la chaîne, un enfant hors flux ne
 * peut pas se dimensionner : c'est la règle, et elle ne se contourne pas.
 *
 * Les hauteurs retranchées sont MESURÉES par le script — barre basse, barre
 * d'onglets, chrome haut. « max() » interdit l'effondrement quoi qu'il arrive.
 */
/*
 * ⚠ « gap: 0 » ICI AUSSI. La colonne déclare deux rangées — la scène et le
 * message de repli — et l'écart entre rangées s'applique même quand la
 * seconde est vide. C'était 12 px de blanc réservé en permanence pour un
 * message qui ne s'affiche qu'en cas de panne du moteur 3D.
 */
.kadro-pergola-configurator .kpc-col--stage {
	align-content: stretch;
	box-sizing: border-box;
	gap: 0;
	grid-template-rows: minmax(0, 1fr) auto;
	height: max(
		var(--kpc-stage-min),
		calc(100vh - var(--kpc-above-h) - var(--kpc-bottombar-h) - var(--kpc-switch-h) - 24px)
	);
}

@supports (height: 100dvh) {

	.kadro-pergola-configurator .kpc-col--stage {
		height: max(
			var(--kpc-stage-min),
			calc(100dvh - var(--kpc-above-h) - var(--kpc-bottombar-h) - var(--kpc-switch-h) - 24px)
		);
	}
}

/*
 * 🔴 UNE SEULE RANGÉE, ET AUCUN INTERSTICE — correctif 1.6.1.
 *
 * Le panneau portait deux rangées et 8 px d'écart : la seconde accueillait
 * l'aide au geste, désormais superposée à la scène. Laisser la rangée et
 * l'écart en place réserverait un blanc pour un contenu qui n'y est plus.
 */
.kadro-pergola-configurator [data-kpc-scene-panel] {
	display: grid;
	gap: 0;
	grid-template-rows: minmax(0, 1fr);
	min-height: 0;
}


/* ══ Zone de réglages ═════════════════════════════════════════════════════ */

/*
 * La colonne de droite en version large, le panneau « Mes options » en
 * version étroite. Le tracé d'abord, les options ensuite : l'ordre du geste.
 */
.kadro-pergola-configurator .kpc-side {
	display: grid;
	gap: var(--kpc-gap);
	min-width: 0;
}


/* ══ Étapes ═══════════════════════════════════════════════════════════════ */

.kadro-pergola-configurator .kpc-step {
	background: #FFFFFF;
	border: 1px solid var(--kpc-bordure);
	border-radius: var(--kpc-rayon);
	box-shadow: var(--kpc-ombre);
	padding: 20px 22px;
	transition: border-color var(--kpc-transition), box-shadow var(--kpc-transition);
}

/*
 * L'étape en cours de saisie se détache : une aide discrète pour savoir où
 * l'on en est dans un parcours à quatre temps.
 */
.kadro-pergola-configurator .kpc-step:focus-within {
	border-color: var(--kpc-sauge);
	box-shadow: var(--kpc-ombre-forte);
}

.kadro-pergola-configurator .kpc-step__title {
	align-items: center;
	color: var(--kpc-vert-nuit);
	display: flex;
	font-size: var(--kpc-t-sm);
	font-weight: 700;
	gap: 10px;
	letter-spacing: 0.08em;
	margin: 0 0 16px;
	text-transform: uppercase;
}

.kadro-pergola-configurator .kpc-step__num {
	align-items: center;
	background: linear-gradient(140deg, var(--kpc-vert-vif), var(--kpc-vert-nuit));
	border-radius: 50%;
	color: #FFFFFF;
	display: inline-flex;
	flex: 0 0 auto;
	font-size: 0.85em;
	font-weight: 700;
	height: 28px;
	justify-content: center;
	width: 28px;
}

/* ══ Champs ═══════════════════════════════════════════════════════════════ */

.kadro-pergola-configurator .kpc-field {
	margin-bottom: 16px;
}

.kadro-pergola-configurator .kpc-field:last-child {
	margin-bottom: 0;
}

.kadro-pergola-configurator .kpc-label {
	display: block;
	font-size: var(--kpc-t-sm);
	font-weight: 600;
	margin-bottom: 8px;
}

.kadro-pergola-configurator .kpc-hint {
	color: var(--kpc-texte-doux);
	font-size: var(--kpc-t-sm);
	margin-top: 8px;
}

.kadro-pergola-configurator .kpc-hint--small {
	font-size: 0.8em;
	margin-top: 6px;
}

.kadro-pergola-configurator .kpc-error {
	color: var(--kpc-grenat);
	font-size: var(--kpc-t-sm);
	font-weight: 600;
	margin-top: 6px;
}

/* ══ Onglets de forme ═════════════════════════════════════════════════════ */

.kadro-pergola-configurator .kpc-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.kadro-pergola-configurator .kpc-tab {
	cursor: pointer;
	flex: 1 1 160px;
}

.kadro-pergola-configurator .kpc-tab input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.kadro-pergola-configurator .kpc-tab span {
	align-items: center;
	background: #FFFFFF;
	border: 2px solid var(--kpc-bordure);
	border-radius: var(--kpc-rayon);
	display: flex;
	gap: 8px;
	justify-content: center;
	min-height: 46px;
	padding: 8px 14px;
	text-align: center;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.kadro-pergola-configurator .kpc-tab input:checked + span {
	background: rgba(15, 127, 53, 0.08);
	border-color: var(--kpc-vert-vif);
	font-weight: 600;
}

.kadro-pergola-configurator .kpc-tab input:focus-visible + span {
	outline: 2px solid var(--kpc-vert-vif);
	outline-offset: 2px;
}

.kadro-pergola-configurator .kpc-tab--disabled {
	cursor: not-allowed;
}

.kadro-pergola-configurator .kpc-tab--disabled span {
	background: var(--kpc-gris);
	color: #9A9A9A;
}

.kadro-pergola-configurator .kpc-badge {
	background: var(--kpc-or);
	border-radius: 10px;
	color: #3A2E00;
	font-size: 0.7em;
	font-style: normal;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 2px 8px;
	text-transform: uppercase;
}

/* ══ Dimensions ═══════════════════════════════════════════════════════════ */

.kadro-pergola-configurator .kpc-dims {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.kadro-pergola-configurator .kpc-inputwrap {
	align-items: center;
	display: flex;
	gap: 8px;
}

/*
 * 🔴 1.5.1 — CES CHAMPS N'ÉTAIENT PAS EN MONTSERRAT.
 *
 * Ils déclaraient une TAILLE de police sans jamais déclarer de FAMILLE. Or un
 * champ de saisie n'hérite pas de la police de son parent : le navigateur lui
 * impose la sienne. Les deux cotes s'affichaient donc dans la police système,
 * au milieu d'une interface en Montserrat — visible, mais jamais signalé.
 *
 * ⚠ L'ORDRE DES DEUX LIGNES COMPTE. « font: inherit » est un raccourci : il
 * réécrit AUSSI la taille. Inverser les deux lignes annulerait le « 1.05em ».
 */
.kadro-pergola-configurator .kpc-inputwrap input {
	background: #FFFFFF;
	border: 2px solid var(--kpc-bordure);
	border-radius: var(--kpc-rayon);
	color: var(--kpc-texte);
	font: inherit;
	font-size: 1.05em;
	min-height: 46px;
	padding: 8px 12px;
	width: 100%;
}

.kadro-pergola-configurator .kpc-inputwrap input:focus {
	border-color: var(--kpc-vert-vif);
	outline: none;
}

.kadro-pergola-configurator .kpc-unit {
	color: #6B6B6B;
	flex: 0 0 auto;
	font-size: 0.9em;
}

/* ══ Côtés adossés ════════════════════════════════════════════════════════ */

.kadro-pergola-configurator .kpc-walls {
	display: grid;
	gap: 6px;
	grid-template-areas:
		". back ."
		"left center right"
		". front .";
	grid-template-columns: minmax(70px, 1fr) minmax(90px, 1.4fr) minmax(70px, 1fr);
	max-width: 380px;
}

.kadro-pergola-configurator .kpc-wall {
	cursor: pointer;
	display: block;
}

.kadro-pergola-configurator .kpc-wall--back {
	grid-area: back;
}

.kadro-pergola-configurator .kpc-wall--left {
	grid-area: left;
}

.kadro-pergola-configurator .kpc-wall--right {
	grid-area: right;
}

.kadro-pergola-configurator .kpc-wall--front {
	grid-area: front;
}

.kadro-pergola-configurator .kpc-wall input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.kadro-pergola-configurator .kpc-wall__label,
.kadro-pergola-configurator .kpc-wall__size {
	display: block;
	text-align: center;
}

.kadro-pergola-configurator .kpc-wall__label {
	background: #FFFFFF;
	border: 2px dashed var(--kpc-bordure-forte);
	border-radius: 6px;
	font-size: 0.85em;
	min-height: 44px;
	padding: 11px 6px;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.kadro-pergola-configurator .kpc-wall input:checked + .kpc-wall__label {
	background: var(--kpc-vert-nuit);
	border-color: var(--kpc-vert-nuit);
	border-style: solid;
	color: #FFFFFF;
	font-weight: 600;
}

.kadro-pergola-configurator .kpc-wall input:focus-visible + .kpc-wall__label {
	outline: 2px solid var(--kpc-vert-vif);
	outline-offset: 2px;
}

.kadro-pergola-configurator .kpc-wall__size {
	color: #6B6B6B;
	font-size: 0.75em;
	margin-top: 3px;
	min-height: 1.2em;
}

.kadro-pergola-configurator .kpc-walls__center {
	align-items: center;
	background: var(--kpc-gris);
	border: 1px solid var(--kpc-bordure);
	border-radius: 6px;
	color: #9A9A9A;
	display: flex;
	font-size: 0.8em;
	grid-area: center;
	justify-content: center;
	letter-spacing: 0.05em;
	min-height: 56px;
	text-transform: uppercase;
}

/* ══ Boutons ══════════════════════════════════════════════════════════════ */

/*
 * Trois niveaux, jamais plus : principal (l'action que l'on veut voir cliquée),
 * fantôme (une alternative sans poids), doré (l'issue proposée quand la
 * configuration sort des standards de fabrication).
 */
.kadro-pergola-configurator .kpc-btn {
	align-items: center;
	border: 2px solid transparent;
	border-radius: var(--kpc-rayon);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-weight: 600;
	gap: 8px;
	justify-content: center;
	line-height: 1.25;
	min-height: 46px;
	padding: 12px 20px;
	text-align: center;
	text-decoration: none;
	transition:
		background-color var(--kpc-transition),
		border-color var(--kpc-transition),
		box-shadow var(--kpc-transition),
		color var(--kpc-transition),
		transform var(--kpc-transition);
}

.kadro-pergola-configurator .kpc-btn--primary {
	background: var(--kpc-orange);
	box-shadow: 0 3px 12px rgba(206, 71, 10, 0.28);
	color: #FFFFFF;
}

.kadro-pergola-configurator .kpc-btn--primary:not([disabled]):hover {
	background: #B03C08;
	box-shadow: 0 6px 20px rgba(206, 71, 10, 0.38);
	transform: translateY(-1px);
}

.kadro-pergola-configurator .kpc-btn--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.45);
	color: #FFFFFF;
}

.kadro-pergola-configurator .kpc-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.10);
	border-color: #FFFFFF;
}

.kadro-pergola-configurator .kpc-btn--gold {
	background: var(--kpc-or);
	color: #3A2B05;
}

.kadro-pergola-configurator .kpc-btn--gold:hover {
	background: var(--kpc-or-fonce);
	color: #FFFFFF;
}

.kadro-pergola-configurator .kpc-btn[disabled],
.kadro-pergola-configurator .kpc-btn[aria-disabled="true"] {
	box-shadow: none;
	cursor: not-allowed;
	transform: none;
}

.kadro-pergola-configurator .kpc-btn:not([disabled]):active {
	transform: translateY(0);
}

/* ══ Finitions communes aux éléments interactifs ══════════════════════════ */

.kadro-pergola-configurator .kpc-tab,
.kadro-pergola-configurator .kpc-card,
.kadro-pergola-configurator .kpc-segb,
.kadro-pergola-configurator .kpc-drawbtn,
.kadro-pergola-configurator .kpc-zoombtn,
.kadro-pergola-configurator .kpc-swatch__color {
	transition:
		background-color var(--kpc-transition),
		border-color var(--kpc-transition),
		box-shadow var(--kpc-transition),
		color var(--kpc-transition),
		transform var(--kpc-transition);
}

.kadro-pergola-configurator .kpc-card:not(.is-active):hover,
.kadro-pergola-configurator .kpc-segb:not(.is-active):hover,
.kadro-pergola-configurator .kpc-tab:not(.is-active):hover {
	border-color: var(--kpc-sauge);
}

.kadro-pergola-configurator .kpc-drawbtn:not([disabled]):hover,
.kadro-pergola-configurator .kpc-zoombtn:not([disabled]):hover {
	border-color: var(--kpc-vert-vif);
	color: var(--kpc-vert-nuit);
}

/* ══ Vignettes ════════════════════════════════════════════════════════════ */

/*
 * 🔴 CORRECTIF 1.2.1 — centrage des libellés de finition.
 *
 * Le libellé et la texture avaient des largeurs différentes : le texte,
 * centré dans SA propre boîte, paraissait décalé sous l'image. Chaque option
 * est désormais une colonne dont TOUS les enfants partagent la même largeur,
 * ce qui rend le centrage exact quel que soit le nombre de lignes.
 */
.kadro-pergola-configurator .kpc-swatches {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
}

.kadro-pergola-configurator .kpc-swatch {
	align-items: center;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 7px;
	min-width: 0;
	text-align: center;
}

.kadro-pergola-configurator .kpc-swatch input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

/*
 * La bordure de sélection est réservée dès le départ, en transparent : passer
 * d'une option à l'autre ne déplace donc jamais le libellé d'un pixel.
 */
.kadro-pergola-configurator .kpc-swatch__color {
	background-position: center;
	background-size: cover;
	border: 3px solid transparent;
	border-radius: var(--kpc-rayon-petit);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16), 0 1px 3px rgba(0, 0, 0, 0.10);
	display: block;
	height: 54px;
	max-width: 100%;
	width: 100%;
}

.kadro-pergola-configurator .kpc-swatch:hover .kpc-swatch__color {
	transform: translateY(-1px);
}

.kadro-pergola-configurator .kpc-swatch input:checked + .kpc-swatch__color {
	border-color: var(--kpc-vert-vif);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16), 0 3px 10px rgba(15, 127, 53, 0.28);
}

.kadro-pergola-configurator .kpc-swatch input:focus-visible + .kpc-swatch__color {
	outline: 2px solid var(--kpc-vert-vif);
	outline-offset: 2px;
}

/*
 * Le libellé occupe TOUTE la largeur de la colonne : son centre coïncide donc
 * avec celui de la texture, y compris sur « Autoclave pré-grisé » qui passe
 * sur deux lignes.
 */
.kadro-pergola-configurator .kpc-swatch__label {
	display: block;
	font-size: var(--kpc-t-xs);
	hyphens: auto;
	line-height: 1.35;
	margin: 0;
	overflow-wrap: anywhere;
	text-align: center;
	width: 100%;
}

.kadro-pergola-configurator .kpc-swatch input:checked ~ .kpc-swatch__label {
	font-weight: 600;
}

/* ══ Cartes de couverture ═════════════════════════════════════════════════ */

.kadro-pergola-configurator .kpc-cards {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.kadro-pergola-configurator .kpc-card {
	cursor: pointer;
}

.kadro-pergola-configurator .kpc-card input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.kadro-pergola-configurator .kpc-card__label,
.kadro-pergola-configurator .kpc-card__hint {
	display: block;
}

.kadro-pergola-configurator .kpc-card__label {
	background: #FFFFFF;
	border: 2px solid var(--kpc-bordure);
	border-bottom: none;
	border-radius: var(--kpc-rayon) var(--kpc-rayon) 0 0;
	font-weight: 600;
	padding: 12px 14px 4px;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.kadro-pergola-configurator .kpc-card__hint {
	background: #FFFFFF;
	border: 2px solid var(--kpc-bordure);
	border-radius: 0 0 var(--kpc-rayon) var(--kpc-rayon);
	border-top: none;
	color: #6B6B6B;
	font-size: 0.8em;
	padding: 0 14px 12px;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.kadro-pergola-configurator .kpc-card input:checked ~ .kpc-card__label,
.kadro-pergola-configurator .kpc-card input:checked ~ .kpc-card__hint {
	background: rgba(15, 127, 53, 0.08);
	border-color: var(--kpc-vert-vif);
}

.kadro-pergola-configurator .kpc-card input:focus-visible ~ .kpc-card__label {
	outline: 2px solid var(--kpc-vert-vif);
	outline-offset: 2px;
}

/* ══ Boutons segmentés ════════════════════════════════════════════════════ */

.kadro-pergola-configurator .kpc-segments {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.kadro-pergola-configurator .kpc-segment {
	cursor: pointer;
	flex: 1 1 110px;
}

.kadro-pergola-configurator .kpc-segments--wide .kpc-segment {
	flex: 1 1 170px;
}

.kadro-pergola-configurator .kpc-segment input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.kadro-pergola-configurator .kpc-segment span {
	align-items: center;
	background: #FFFFFF;
	border: 2px solid var(--kpc-bordure);
	border-radius: var(--kpc-rayon);
	display: flex;
	justify-content: center;
	min-height: 46px;
	padding: 8px 12px;
	text-align: center;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.kadro-pergola-configurator .kpc-segment input:checked + span {
	background: rgba(15, 127, 53, 0.08);
	border-color: var(--kpc-vert-vif);
	font-weight: 600;
}

.kadro-pergola-configurator .kpc-segment input:focus-visible + span {
	outline: 2px solid var(--kpc-vert-vif);
	outline-offset: 2px;
}

/* ══ Panneau d'estimation ═════════════════════════════════════════════════ */

.kadro-pergola-configurator .kpc-panel {
	display: grid;
	gap: 12px;
	min-width: 0;
}

.kadro-pergola-configurator .kpc-estimate {
	background: linear-gradient(155deg, #0A5C2C 0%, var(--kpc-vert-nuit) 55%, #033A1B 100%);
	border-radius: var(--kpc-rayon);
	box-shadow: var(--kpc-ombre-forte);
	color: #FFFFFF;
	padding: 22px 24px;
	position: relative;
	transition: opacity var(--kpc-transition);
}

/*
 * 🔴 1.5.1 — LE FILET EN DÉGRADÉ AMBRE EST SUPPRIMÉ.
 *
 * Il courait en tête du bloc prix, sur trois pixels. Il avait un sens quand ce
 * bloc était une carte posée dans une colonne ; dans un bandeau vert plein
 * largeur, il n'ajoute rien et souligne une frontière qui n'existe plus.
 *
 * Le balisage n'avait rien à retirer : c'était un pseudo-élément.
 */

/*
 * Le rognage n'a lieu QUE pendant le calcul, le temps que la bande lumineuse
 * traverse le bloc. La hauteur reste automatique : aucun contenu n'est perdu.
 */
.kadro-pergola-configurator .kpc-estimate[data-kpc-busy="1"] {
	opacity: 0.7;
	overflow: hidden;
}

/*
 * Pendant le calcul, une bande lumineuse traverse le bloc : le visiteur voit
 * qu'il se passe quelque chose sans que le montant disparaisse.
 */
.kadro-pergola-configurator .kpc-estimate[data-kpc-busy="1"]::after {
	animation: kpc-sweep 1.1s ease-in-out infinite;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.10), transparent);
	bottom: 0;
	content: "";
	left: 0;
	position: absolute;
	top: 0;
	width: 45%;
}

@keyframes kpc-sweep {
	0% { transform: translateX(-120%); }
	100% { transform: translateX(320%); }
}

.kadro-pergola-configurator .kpc-estimate__label {
	color: var(--kpc-or);
	font-size: var(--kpc-t-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.kadro-pergola-configurator .kpc-estimate__amount {
	font-size: 2.4em;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin-bottom: 2px;
}

/* Le montant vient de changer : une pulsation brève, jamais un clignotement. */
.kadro-pergola-configurator .kpc-estimate__amount.is-updated {
	animation: kpc-pulse 420ms ease-out;
}

@keyframes kpc-pulse {
	0% { transform: scale(1); }
	35% { transform: scale(1.045); }
	100% { transform: scale(1); }
}

.kadro-pergola-configurator .kpc-estimate__surface {
	font-size: var(--kpc-t-sm);
	opacity: 0.85;
}

.kadro-pergola-configurator .kpc-estimate__note {
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	font-size: 0.75em;
	margin-top: 14px;
	opacity: 0.8;
	padding-top: 12px;
}

.kadro-pergola-configurator .kpc-status {
	font-size: 0.85em;
	opacity: 0.85;
}

.kadro-pergola-configurator .kpc-status[data-kpc-tone="error"] {
	color: var(--kpc-or);
	font-weight: 600;
	opacity: 1;
}

.kadro-pergola-configurator .kpc-status[data-kpc-tone="ok"] {
	color: var(--kpc-sauge);
	opacity: 1;
}

/*
 * Hors normes — ce n'est PAS une erreur : c'est une pergola qui mérite une
 * étude. Le bloc est donc doré et invitant, jamais rouge ni alarmant.
 */
.kadro-pergola-configurator .kpc-outofrange {
	background: rgba(226, 181, 48, 0.16);
	border: 1px solid rgba(226, 181, 48, 0.45);
	border-radius: var(--kpc-rayon-petit);
	font-size: var(--kpc-t-sm);
	padding: 16px;
}

.kadro-pergola-configurator .kpc-outofrange__link {
	margin-top: 12px;
	text-decoration: none;
	width: 100%;
}

.kadro-pergola-configurator .kpc-retry__button {
	background: transparent;
	border: 2px solid rgba(255, 255, 255, 0.5);
	border-radius: 6px;
	color: #FFFFFF;
	cursor: pointer;
	font: inherit;
	font-size: 0.85em;
	min-height: 40px;
	padding: 8px 16px;
}

.kadro-pergola-configurator .kpc-retry__button:hover {
	border-color: #FFFFFF;
}

/*
 * État vide — tant qu'aucun montant n'a été calculé, le bloc doit rester
 * habité. Un cadre vide donnerait l'impression d'un outil en panne.
 */
.kadro-pergola-configurator .kpc-estimate__empty {
	color: rgba(255, 255, 255, 0.78);
	font-size: var(--kpc-t-sm);
	padding: 4px 0 2px;
}

.kadro-pergola-configurator .kpc-estimate__dash {
	color: rgba(255, 255, 255, 0.35);
	display: block;
	font-size: 2.4em;
	font-weight: 700;
	line-height: 1.1;
}

/* ══ Récapitulatif ════════════════════════════════════════════════════════ */

.kadro-pergola-configurator .kpc-recap {
	background: var(--kpc-creme);
	border: 1px solid var(--kpc-bordure);
	border-left: 3px solid var(--kpc-bois-clair);
	border-radius: var(--kpc-rayon);
	padding: 14px 18px;
}

.kadro-pergola-configurator .kpc-recap summary {
	color: var(--kpc-vert-nuit);
	cursor: pointer;
	font-size: var(--kpc-t-sm);
	font-weight: 600;
	list-style: none;
}

.kadro-pergola-configurator .kpc-recap summary::-webkit-details-marker {
	display: none;
}

.kadro-pergola-configurator .kpc-recap summary::before {
	content: "▸ ";
	color: var(--kpc-bois);
}

.kadro-pergola-configurator .kpc-recap[open] summary::before {
	content: "▾ ";
}

.kadro-pergola-configurator .kpc-recap__text {
	font-family: inherit;
	font-size: 0.82em;
	line-height: 1.7;
	margin: 10px 0 0;
	overflow-x: auto;
	white-space: pre-wrap;
	word-break: break-word;
}

/* ══ Appel à l'action ═════════════════════════════════════════════════════ */

.kadro-pergola-configurator .kpc-cta__button {
	background: var(--kpc-orange);
	border: none;
	border-radius: var(--kpc-rayon);
	box-shadow: 0 3px 12px rgba(206, 71, 10, 0.28);
	color: #FFFFFF;
	cursor: pointer;
	font: inherit;
	font-size: var(--kpc-t-lg);
	font-weight: 700;
	min-height: 56px;
	padding: 15px 20px;
	transition: background var(--kpc-transition), box-shadow var(--kpc-transition), transform var(--kpc-transition);
	width: 100%;

	/*
	 * 🔴 LE BOUTON NE DÉPASSE JAMAIS, quelle que soit la largeur.
	 *
	 * « width: 100 % » ne suffisait pas : la largeur MINIMALE d'un bouton est
	 * celle de son mot le plus long, et « Recevoir mon devis personnalisé »
	 * en contient de longs. Sur une colonne étroite, le bouton poussait donc
	 * son conteneur et sortait de l'écran.
	 */
	box-sizing: border-box;
	max-width: 100%;
	min-width: 0;
	overflow-wrap: break-word;
	white-space: normal;
}

.kadro-pergola-configurator .kpc-cta__button:not([disabled]):hover {
	background: #B03C08;
	box-shadow: 0 6px 20px rgba(206, 71, 10, 0.38);
	transform: translateY(-1px);
}

.kadro-pergola-configurator .kpc-cta__button:not([disabled]):active {
	transform: translateY(0);
}

.kadro-pergola-configurator .kpc-cta__button[disabled] {
	background: var(--kpc-bordure-forte);
	box-shadow: none;
	cursor: not-allowed;
}

.kadro-pergola-configurator .kpc-cta__note {
	color: var(--kpc-texte-doux);
	font-size: var(--kpc-t-xs);
	margin-top: 10px;
	text-align: center;
}


/* ══ Zone visuelle · canvas de tracé (Lot F2a) ════════════════════════════ */

.kadro-pergola-configurator .kpc-visual {
	display: grid;
	gap: 10px;
	min-width: 0;
	min-width: 0;
}

.kadro-pergola-configurator .kpc-canvaswrap {
	background: #FFFFFF;
	border: 1px solid var(--kpc-bordure);
	border-radius: var(--kpc-rayon);
	overflow: hidden;
	position: relative;
}

.kadro-pergola-configurator .kpc-canvas {
	display: block;
	height: 340px;
	width: 100%;

	/* Indispensable au tracé au doigt : sans cela, dessiner ferait défiler la page. */
	touch-action: none;
}

.kadro-pergola-configurator .kpc-drawbar {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.kadro-pergola-configurator .kpc-drawbtn {
	background: #FFFFFF;
	border: 2px solid var(--kpc-bordure);
	border-radius: var(--kpc-rayon);
	color: var(--kpc-texte);
	cursor: pointer;
	flex: 1 1 auto;
	font: inherit;
	font-size: 0.82em;
	min-height: 44px;
	padding: 8px 12px;
}

.kadro-pergola-configurator .kpc-drawbtn:hover,
.kadro-pergola-configurator .kpc-drawbtn:focus-visible {
	border-color: var(--kpc-vert-vif);
}

.kadro-pergola-configurator .kpc-drawbtn--primary {
	background: var(--kpc-vert-nuit);
	border-color: var(--kpc-vert-nuit);
	color: #FFFFFF;
	font-weight: 600;
}

.kadro-pergola-configurator .kpc-drawbtn--primary:hover,
.kadro-pergola-configurator .kpc-drawbtn--primary:focus-visible {
	background: var(--kpc-vert-vif);
	border-color: var(--kpc-vert-vif);
}

.kadro-pergola-configurator .kpc-drawhint {
	background: var(--kpc-gris);
	border-left: 3px solid var(--kpc-vert-vif);
	border-radius: 4px;
	color: #555555;
	font-size: 0.83em;
	min-height: 2.6em;
	padding: 9px 12px;
}

.kadro-pergola-configurator .kpc-drawhint[data-kpc-tone="error"] {
	border-left-color: var(--kpc-orange);
	color: var(--kpc-orange);
	font-weight: 600;
}


/* ══ Zoom et cadrage ══════════════════════════════════════════════════════ */

.kadro-pergola-configurator .kpc-zoom {
	display: flex;
	flex-direction: column;
	gap: 4px;
	position: absolute;
	right: 8px;
	top: 8px;
}

.kadro-pergola-configurator .kpc-zoombtn {
	align-items: center;
	background: rgba(255, 255, 255, 0.94);
	border: 1px solid var(--kpc-bordure-forte);
	border-radius: 6px;
	color: var(--kpc-vert-nuit);
	cursor: pointer;
	display: flex;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	height: 34px;
	justify-content: center;
	line-height: 1;
	padding: 0;
	width: 34px;
}

.kadro-pergola-configurator .kpc-zoombtn:hover,
.kadro-pergola-configurator .kpc-zoombtn:focus-visible {
	background: #FFFFFF;
	border-color: var(--kpc-vert-vif);
}

/* ══ Dimensions en temps réel ═════════════════════════════════════════════ */

.kadro-pergola-configurator .kpc-dimsbar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	min-height: 34px;
}

.kadro-pergola-configurator .kpc-dim {
	align-items: baseline;
	background: var(--kpc-gris);
	border: 1px solid var(--kpc-bordure);
	border-radius: 6px;
	display: inline-flex;
	gap: 6px;
	padding: 6px 10px;
}

.kadro-pergola-configurator .kpc-dim em {
	color: #7A7A7A;
	font-size: 0.72em;
	font-style: normal;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.kadro-pergola-configurator .kpc-dim b {
	color: var(--kpc-vert-nuit);
	font-size: 0.92em;
	font-weight: 700;
}

/* ══ Cotes des segments · lecture seule ═══════════════════════════════════ */

.kadro-pergola-configurator .kpc-seglist {
	background: #FFFFFF;
	border: 1px solid var(--kpc-bordure);
	border-radius: var(--kpc-rayon);
	padding: 12px 14px;
}

.kadro-pergola-configurator .kpc-seglist__title {
	font-size: 0.82em;
	font-weight: 600;
	margin-bottom: 8px;
}

.kadro-pergola-configurator .kpc-seglist__body {
	display: grid;
	gap: 5px;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.kadro-pergola-configurator .kpc-seg {
	align-items: center;
	background: var(--kpc-gris);
	border: 1px solid transparent;
	border-radius: 5px;
	display: flex;
	gap: 6px;
	padding: 5px 8px;
}

.kadro-pergola-configurator .kpc-seg:hover {
	border-color: var(--kpc-vert-vif);
}

.kadro-pergola-configurator .kpc-seg__name {
	color: #7A7A7A;
	flex: 0 0 auto;
	font-size: 0.75em;
	font-weight: 700;
	min-width: 22px;
}

.kadro-pergola-configurator .kpc-seg__input {
	background: #FFFFFF;
	border: 1px solid var(--kpc-bordure-forte);
	border-radius: 4px;
	color: var(--kpc-texte);
	flex: 1 1 60px;
	font: inherit;
	font-size: 0.85em;
	min-height: 34px;
	min-width: 0;
	padding: 4px 6px;
	text-align: right;
}

.kadro-pergola-configurator .kpc-seg__input:focus {
	border-color: var(--kpc-vert-vif);
	outline: none;
}

.kadro-pergola-configurator .kpc-seg__unit {
	color: #7A7A7A;
	flex: 0 0 auto;
	font-size: 0.75em;
}

.kadro-pergola-configurator .kpc-seg__wall {
	align-items: center;
	cursor: pointer;
	display: flex;
	flex: 0 0 auto;
	gap: 4px;
}

.kadro-pergola-configurator .kpc-seg__wall span {
	color: #7A7A7A;
	font-size: 0.72em;
}

.kadro-pergola-configurator .kpc-seg__wall input {
	accent-color: var(--kpc-vert-nuit);
	height: 17px;
	margin: 0;
	width: 17px;
}

.kadro-pergola-configurator .kpc-seg__wall input:checked ~ span {
	color: var(--kpc-vert-nuit);
	font-weight: 600;
}


/* ══ Bouton d'accès à la 3D · version étroite ═════════════════════════════ */

/*
 * 🔴 1.4.3 — CE QUI RESTE DE LA BARRE D'ONGLETS.
 *
 * Les règles des onglets de vue et celles du plan encarté ont disparu avec
 * les éléments qu'elles habillaient. Le banc vérifie qu'il n'en reste AUCUNE
 * trace dans ce fichier — une règle orpheline finit toujours par ressusciter
 * le composant qu'elle décrit.
 *
 * ⚠ À ne pas confondre avec « .kpc-planbar », la barre du bouton de
 * réinitialisation sous le tracé, qui reste en service.
 *
 * Ce bouton n'existe QUE sous 900 px, et le sens de la règle n'est pas
 * indifférent : la feuille est écrite en mobile d'abord, donc il est visible
 * par défaut et c'est la version LARGE qui le retire. L'écrire dans l'autre
 * sens le ferait apparaître une fraction de seconde sur les écrans étroits
 * lents, avant que la requête de média ne prenne effet.
 *
 * Le script pose en plus l'attribut « hidden » en version large : la feuille
 * de style le fait sortir de l'affichage, l'attribut le fait sortir du
 * parcours clavier. Il faut les deux.
 */



/*
 * Sans scène reçue, le bouton n'a rien à ouvrir. Il doit se lire comme
 * momentanément indisponible, pas comme un défaut d'affichage.
 */

/*
 * Note sous la vue 3D. Elle portait « kpc-plan__note », la classe du plan
 * encarté — et se retrouvait donc sans habillage le jour où ce plan a
 * disparu. Elle a désormais la sienne.
 */
/*
 * 🔴 AIDE AU GESTE · ÉTIQUETTE SUPERPOSÉE À LA SCÈNE.
 *
 * « absolute » dans « .kpc-scene », qui est en « position: relative » —
 * jamais « fixed » : une étiquette fixe se détacherait de la scène au premier
 * défilement et suivrait la fenêtre.
 *
 * ⚠ LE VOILE EST À 72 %, ET CE N'EST PAS UN CHOIX D'HUMEUR.
 *
 * Le fond de l'étiquette est semi-transparent : sa couleur réelle dépend donc
 * de ce qu'il y a dessous, et le ciel de la scène va du bleu soutenu au vert
 * très pâle. Mesuré sur la zone la PLUS CLAIRE, le blanc donne 5,60:1 à 62 %
 * d'opacité — AA seulement — et 7,81:1 à 72 %. C'est cette valeur qui tient
 * le AAA partout, y compris au pire endroit de la vue.
 *
 * « pointer-events: none » : elle informe, elle n'intercepte pas le geste
 * qu'elle décrit.
 */
.kadro-pergola-configurator .kpc-scene__note {
	background: rgba(17, 24, 20, 0.72);
	border-radius: 999px;
	bottom: 12px;
	color: #FFFFFF;
	font-size: var(--kpc-t-xs);
	left: 50%;
	line-height: 1.4;
	margin: 0;
	max-width: calc(100% - 24px);
	padding: 6px 14px;
	pointer-events: none;
	position: absolute;
	text-align: center;
	transform: translateX(-50%);
	z-index: 2;
}

/*
 * Deux formulations : la courte par défaut — la feuille est écrite en mobile
 * d'abord —, la complète à partir de 900 px. Le texte intégral fait 127
 * caractères : en pastille sur un téléphone, il couvrirait trois à quatre
 * lignes du bas de la scène.
 */
.kadro-pergola-configurator .kpc-scene__note-full {
	display: none;
}

/* ══ Vue 3D ═══════════════════════════════════════════════════════════════ */

/*
 * 🔴 CORRECTIF 1.3.2 — CAUSE DU GROSSISSEMENT INFINI.
 *
 * Ce conteneur n'avait pas de hauteur : il épousait celle du canvas, plus ses
 * deux bordures d'un pixel. Le script mesurait le conteneur puis écrivait cette
 * mesure dans la taille CSS du canvas : le canvas grandissait de deux pixels,
 * le conteneur aussi, et ainsi de suite — 120 pixels par seconde, sans fin.
 *
 * La boucle est brisée par la STRUCTURE, pas par un correctif de calcul : le
 * conteneur porte désormais sa propre hauteur, et le canvas est sorti du flux.
 * Un élément absolu ne peut, par construction, plus influencer son parent.
 */
.kadro-pergola-configurator .kpc-scene {
	background: linear-gradient(180deg, #8FBBE0 0%, #C9DCED 55%, #E7EFDD 100%);

	/*
	 * 🔴 LISERÉ BLANC — il détache la vue, il n'en fait pas un cadre.
	 *
	 * La bordure grise (#E0E0E0) se confondait avec le fond clair de
	 * l'interface d'un côté et avec le ciel de la scène de l'autre : elle ne
	 * séparait rien. Le blanc pur, lui, tranche sur le dégradé de ciel
	 * (#8FBBE0 en haut) tout en restant sobre.
	 *
	 * Deux pixels, pas un : à un pixel le trait disparaît là où le ciel est
	 * déjà très clair, en haut de la vue.
	 */
	border: 2px solid #FFFFFF;
	border-radius: var(--kpc-rayon);
	/*
	 * 🔴 1.5.1 — LA HAUTEUR N'EST PLUS DICTÉE ICI.
	 *
	 * La 1.5.0 posait un « clamp » sur le canvas, avec un plancher de 320 px
	 * et un décompte en dur de 132 px pour les onglets. Deux erreurs : le
	 * plancher pouvait battre la contrainte sur un écran court, et le nombre
	 * en dur devenait faux dès que le libellé d'un onglet passait à la ligne.
	 *
	 * La borne est désormais posée sur la COLONNE (voir « .kpc-col--stage »),
	 * à partir de hauteurs MESURÉES. Le canvas se contente de remplir ce
	 * qu'on lui laisse.
	 */
	height: auto;
	min-height: 0;
	overflow: hidden;
	position: relative;
}

/*
 * Le canvas remplit son conteneur, hors du flux : sa taille est imposée par le
 * conteneur et ne peut jamais rétroagir sur lui.
 */
.kadro-pergola-configurator .kpc-scene__canvas {
	cursor: grab;
	display: block;
	height: 100%;
	inset: 0;
	position: absolute;
	touch-action: none;
	width: 100%;
}

.kadro-pergola-configurator .kpc-scene__canvas:active {
	cursor: grabbing;
}

.kadro-pergola-configurator .kpc-scene__tools {
	display: flex;
	gap: 4px;
	position: absolute;
	right: 10px;
	top: 10px;
}

@media (max-width: 782px) {
	/*
	 * 🔴 MOBILE — la 3D occupe toute la largeur et une hauteur généreuse.
	 * Un canvas minuscule sur téléphone ne vend rien. La hauteur est portée par
	 * le conteneur : le canvas, hors du flux, ne fait que la remplir.
	 */
	/*
	 * 🔴 1.3.4 — plus de marges négatives.
	 *
	 * Le débord pleine largeur était flatteur, mais il sortait du conteneur :
	 * sur un thème qui ne rogne pas, la page gagnait une barre de défilement
	 * horizontale. La vue reste dans sa colonne, où elle occupe déjà toute la
	 * largeur disponible.
	 */
	/*
	 * 🔴 1.10.2 — LA SCÈNE NE S'IMPOSE PLUS UNE HAUTEUR, ELLE PREND CE QUI RESTE.
	 *
	 * Elle valait « clamp(360px, 56vh, 580px) ». Ce plancher de 360 px était
	 * la cause EXACTE du défaut signalé par le client : sur un écran de
	 * 640 px de haut, il ne reste que 287 px entre les onglets et la barre
	 * basse. La scène en réclamait 360, les 73 px de trop passaient sous la
	 * barre — et le bouton « Voir en grand », posé en bas de la scène,
	 * disparaissait entièrement derrière elle.
	 *
	 * La feuille calculait pourtant déjà la place disponible pour la colonne
	 * 3D. Ce calcul ne servait à rien tant qu'un « clamp » venait l'écraser
	 * juste après. La scène retranche donc, à son tour :
	 *
	 *   · « above »     ce qui précède le configurateur dans le document ;
	 *   · « stage-top » ce qui le précède DANS le configurateur — barre de
	 *                   marque et onglets, que « above » ne peut pas voir ;
	 *   · « bottombar » la barre du montant, mesurée à l'exécution.
	 *
	 * Les 56 vh restent le confort visé, le plancher de sécurité reste le
	 * dernier mot : sur une fenêtre pathologiquement courte, une vue un peu
	 * trop haute se fait défiler, une vue effondrée ne se récupère pas.
	 */
	/*
	 * 🔴 1.3.4 — plus de marges négatives.
	 *
	 * Le débord pleine largeur était flatteur, mais il sortait du conteneur :
	 * sur un thème qui ne rogne pas, la page gagnait une barre de défilement
	 * horizontale. La vue reste dans sa colonne, où elle occupe déjà toute la
	 * largeur disponible.
	 */
	/*
	 * ⚠ LE PLANCHER N'EST PAS CELUI DE LA COLONNE DE BUREAU.
	 *
	 * « --kpc-stage-min » vaut 260 px. Sur un écran de 320 × 568, il ne reste
	 * que 221 px sous les onglets : un plancher à 260 recréerait exactement le
	 * défaut qu'on corrige — 39 px de scène passant sous la barre, et le
	 * bouton avec. 200 px reste une vue exploitable, et c'est le dernier
	 * rempart contre l'effondrement, pas une hauteur visée.
	 */
	.kadro-pergola-configurator .kpc-scene {
		height: max(
			200px,
			min(
				clamp(300px, 56vh, 580px),
				calc(100vh - var(--kpc-above-h) - var(--kpc-stage-top-h) - var(--kpc-bottombar-h) - 12px)
			)
		);
		margin: 0;
		max-width: 100%;
	}

	@supports (height: 100dvh) {

		/*
		 * Sur téléphone, « 100vh » compte la barre d'adresse du navigateur
		 * comme si elle n'existait pas : la scène serait trop haute de sa
		 * hauteur tant qu'elle est déployée. « 100dvh » suit la fenêtre
		 * réellement visible.
		 */
		.kadro-pergola-configurator .kpc-scene {
			height: max(
				200px,
				min(
					clamp(300px, 56dvh, 580px),
					calc(100dvh - var(--kpc-above-h) - var(--kpc-stage-top-h) - var(--kpc-bottombar-h) - 12px)
				)
			);
		}
	}

	.kadro-pergola-configurator .kpc-expand {
		bottom: 10px;
		left: 10px;
		justify-content: center;
		right: 10px;
	}

	/*
	 * 🔴 1.10.3 — L'AIDE AU GESTE PASSE AU-DESSUS DU BOUTON.
	 *
	 * Les deux étiquettes vivaient au même endroit : « bottom: 12px » pour la
	 * note, « bottom: 10px » pour le bouton. Sur écran large elles cohabitent
	 * — le bouton se range à droite, la note reste centrée. Sur téléphone le
	 * bouton prend TOUTE la largeur : la note lui passait dessus, et « Voir en
	 * grand » se lisait à travers deux lignes de texte.
	 *
	 * Elle se cale donc au-dessus de lui, sur la hauteur de la cible tactile
	 * plutôt que sur un nombre écrit à la main : si le libellé se replie un
	 * jour sur deux lignes, l'écart suit sans qu'on y revienne.
	 */
	/*
	 * ⚠ ET ELLE CESSE D'ÊTRE TROIS FOIS TROP HAUTE.
	 *
	 * Elle était calée par « left: 50% » sans « right » : pour un élément hors
	 * du flux, la largeur disponible se compte alors du point d'ancrage au
	 * bord droit — la moitié de la scène, 180 px sur un écran de 360. Le
	 * « max-width » ne pouvait pas la rattraper, et une phrase de 46 caractères
	 * se repliait sur TROIS lignes là où une seule suffit. La pastille
	 * recouvrait ainsi trois fois la surface nécessaire.
	 *
	 * Ancrée aux deux bords, elle occupe une seule ligne et se centre comme
	 * avant — « text-align: center » ne dépend pas de la translation.
	 */
	.kadro-pergola-configurator .kpc-scene {
		/*
		 * Bandeau bas réservé de la scène : le bouton « Voir en grand », son
		 * écart, l'aide au geste sur une ligne, et l'écart au-dessus d'elle.
		 * La colonne de commandes s'arrête à sa limite.
		 */
		--kpc-scene-foot: calc(var(--kpc-touch) + 62px);
	}

	.kadro-pergola-configurator .kpc-scene__note {
		bottom: calc(10px + var(--kpc-touch) + 8px);
		left: 12px;
		right: 12px;
		transform: none;
	}

	/*
	 * 🔴 1.10.2 — LES COMMANDES PASSENT EN COLONNE, LE LONG DU BORD DROIT.
	 *
	 * En rangée, elles mesuraient 236 px : cinq cibles tactiles de 44 px et
	 * leurs écarts. Les pastilles « Emprise » et « Surface », posées en haut à
	 * gauche, en mesurent 165. Sur un écran de 360 px, les deux calques se
	 * recouvraient de 67 px — le défaut relevé sur la capture du client.
	 *
	 * En colonne, elles n'occupent plus que 44 px de large : la bande haute
	 * revient entièrement aux pastilles, à toutes les largeurs. Et c'est la
	 * disposition que le plan 2D emploie déjà pour son propre zoom — on ne
	 * réinvente rien, on aligne.
	 */
	/*
	 * ⚠ ET ELLE NE PEUT PAS DESCENDRE SUR LE BOUTON « VOIR EN GRAND ».
	 *
	 * Le bas de la scène est occupé sur TOUTE sa largeur par deux calques : le
	 * bouton « Voir en grand » et, depuis la 1.10.3, l'aide au geste juste
	 * au-dessus. Une colonne de commandes assez haute finirait sur l'un ou sur
	 * l'autre. Elle est donc bornée à la place qui reste au-dessus d'eux, et
	 * déborde EN COLONNES SUCCESSIVES vers la gauche plutôt que de poursuivre
	 * vers le bas. Rien ne peut plus se recouvrir, quelle que soit la hauteur
	 * de la scène et quel que soit le nombre de commandes.
	 *
	 * ⚠ La réserve est une VARIABLE, partagée avec l'aide au geste. Les deux
	 * règles décrivent le même bandeau bas : les laisser porter chacune ses
	 * propres nombres, c'est se garantir qu'elles divergeront au premier
	 * ajustement.
	 */
	.kadro-pergola-configurator .kpc-scene__tools {
		align-content: flex-start;
		flex-direction: column;
		flex-wrap: wrap-reverse;
		max-height: calc(100% - 10px - var(--kpc-scene-foot));
		right: 10px;
		top: 10px;
	}

	.kadro-pergola-configurator .kpc-stagepanel__bar {
		padding: 10px 12px calc(10px + env(safe-area-inset-top, 0px));
	}

	.kadro-pergola-configurator .kpc-stagepanel__title {
		font-size: var(--kpc-t-sm);
	}

	.kadro-pergola-configurator .kpc-stagepanel__body {
		padding: 0;
	}

	/*
	 * 🔴 LA BARRE BASSE SE RESSERRE — elle mangeait 204 px sur 640.
	 *
	 * Rien n'en sort : le montant, la surface, la mention légale et le bouton
	 * restent tous les quatre. Ce sont les respirations qui se réduisent —
	 * elles étaient réglées pour une colonne de bureau, pas pour un bandeau
	 * permanent au-dessus d'un écran de téléphone.
	 *
	 * ⚠ LA MENTION LÉGALE NE BOUGE PAS. Elle est obligatoire, elle qualifie
	 * le montant, et elle doit rester lisible sur les deux formats.
	 */
	.kadro-pergola-configurator .kpc-bottombar {
		padding: 6px 14px calc(6px + env(safe-area-inset-bottom, 0px));
	}

	.kadro-pergola-configurator .kpc-bottombar .kpc-panel {
		gap: 6px;
	}

	.kadro-pergola-configurator .kpc-bottombar .kpc-estimate__note {
		margin-top: 6px;
		padding-top: 6px;
	}

	/*
	 * 🔴 LA NOTE SOUS LE BOUTON NE S'AFFICHE QUE QUAND ELLE APPREND QUELQUE CHOSE.
	 *
	 * Elle porte deux messages, et un seul est une information :
	 *
	 *   · « Terminez votre configuration… » répète mot pour mot ce que le
	 *     bloc vide dit déjà, deux centimètres plus haut dans la MÊME barre,
	 *     et ce que l'état désactivé du bouton dit une troisième fois ;
	 *   · « Le formulaire n'est pas encore disponible… » ne se lit nulle part
	 *     ailleurs. Celle-là reste, sur tous les formats.
	 *
	 * Le script distingue les deux cas (voir refreshCta). Sur le bureau, où la
	 * place ne manque pas, les deux restent affichées.
	 */
	.kadro-pergola-configurator .kpc-bottombar[data-kpc-cta-hint="redondante"] .kpc-cta__note {
		display: none;
	}
}

/*
 * 🔴 AU DOIGT, LES DEUX FLÈCHES DE ROTATION SORTENT DE LA COLONNE.
 *
 * Elles font tourner la vue — ce que le glissement du doigt fait déjà, et ce
 * que l'aide au geste annonce en toutes lettres juste en dessous. Trois
 * commandes suffisent donc : zoomer, dézoomer, recadrer. La colonne tombe de
 * 236 à 140 px, et ne peut plus rencontrer le bouton « Voir en grand » même
 * sur une scène réduite à son plancher.
 *
 * ⚠ « pointer: coarse » ET PAS SEULEMENT LA LARGEUR. Sur une fenêtre de
 * bureau rétrécie, il n'y a ni doigt ni geste de glissement au clavier : ces
 * deux boutons y sont le SEUL moyen de pivoter sans souris. Les retirer sur un
 * simple critère de largeur les retirerait aussi là, et la vue deviendrait
 * impossible à orienter au clavier.
 */
@media (max-width: 782px) and (pointer: coarse) {

	.kadro-pergola-configurator .kpc-scene__tools [data-kpc-scene-action="left"],
	.kadro-pergola-configurator .kpc-scene__tools [data-kpc-scene-action="right"] {
		display: none;
	}
}

/*
 * 🔴 1.3.4 — le mini-plan superposé à la 3D est SUPPRIMÉ.
 *
 * Il rognait un coin de la vue, dévorait l'écran d'un téléphone et cassait
 * l'immersion, pour un dessin que l'onglet « Plan » montre en grand. Ses
 * règles sont retirées plutôt que neutralisées : une feuille de style ne doit
 * pas garder l'habillage d'un élément qui n'existe plus.
 */

/* ══ Bouton d'agrandissement ══════════════════════════════════════════════ */

.kadro-pergola-configurator .kpc-expand {
	align-items: center;
	background: rgba(5, 73, 35, 0.90);
	border: none;
	border-radius: 999px;
	bottom: 12px;
	color: #FFFFFF;
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: var(--kpc-t-sm);
	font-weight: 600;
	gap: 8px;
	min-height: var(--kpc-touch);
	padding: 10px 18px;
	position: absolute;
	right: 12px;
	transition: background-color var(--kpc-transition), transform var(--kpc-transition);
	z-index: 3;
}

.kadro-pergola-configurator .kpc-expand:hover {
	background: var(--kpc-vert-nuit);
	transform: translateY(-1px);
}

/* ══ Vue agrandie ═════════════════════════════════════════════════════════ */

/*
 * Panneau plein écran DANS la page : le bloc 3D existant y est déplacé, ce qui
 * conserve le contexte de rendu et la configuration en cours.
 */
/*
 * ⚠ Le correctif local de la 1.3.1 vivait ici : « .kpc-stagepanel[hidden] ».
 * Il est retiré parce que la règle générale posée en tête de feuille le couvre
 * — et le couvre pour tous les autres éléments, présents et à venir. En garder
 * une copie laisserait croire que le sujet se traite au cas par cas.
 */

.kadro-pergola-configurator .kpc-stagepanel {
	background: #101B14;
	bottom: 0;
	display: flex;
	flex-direction: column;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;

	/*
	 * Hauteur EXPLICITE. « inset: 0 » suffirait si le panneau était toujours
	 * positionné par rapport à la fenêtre — mais une transformation CSS sur
	 * n'importe quel ancêtre (Elementor en pose volontiers) change le bloc
	 * conteneur d'un élément fixe. Une hauteur explicite met le panneau à
	 * l'abri de ce piège.
	 */
	height: 100vh;
	height: 100dvh;

	z-index: 99990;
}

.kadro-pergola-configurator .kpc-stagepanel__bar {
	align-items: center;
	background: var(--kpc-vert-nuit);
	color: #FFFFFF;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
	padding: 12px 18px calc(12px + env(safe-area-inset-top, 0px));
}

.kadro-pergola-configurator .kpc-stagepanel__title {
	font-size: var(--kpc-t-lg);
	font-weight: 700;
	margin: 0;
}

.kadro-pergola-configurator .kpc-stagepanel__price {
	color: var(--kpc-or);
	font-size: var(--kpc-t-lg);
	font-weight: 700;
	margin: 0;
}

.kadro-pergola-configurator .kpc-stagepanel__close {
	min-height: var(--kpc-touch);
}

/*
 * 🔴 CORRECTIF 1.3.1 — CAUSE DE L'ÉCRAN VIDE.
 *
 * Ce bloc portait « min-height: 0 », et le bloc 3D à l'intérieur une hauteur
 * de 100 %. Or un pourcentage ne se résout que contre un parent de hauteur
 * DÉFINIE : ici la hauteur venait de la répartition flex, donc « auto ». La
 * chaîne se résolvait à zéro, « min-height: 0 » autorisait l'effondrement
 * complet, et le canvas se retrouvait haut de zéro pixel — le rendu avait bien
 * lieu, mais dans une boîte invisible. D'où la barre de titre seule sur fond
 * sombre.
 *
 * Le bloc a désormais une hauteur plancher, et le canvas est dimensionné en
 * pixels par le script, à partir de la taille RÉELLE de son conteneur.
 */
.kadro-pergola-configurator .kpc-stagepanel__body {
	display: flex;
	flex: 1 1 auto;
	min-height: 320px;
	padding: 12px;
}

.kadro-pergola-configurator .kpc-stagepanel__body .kpc-scene {
	flex: 1 1 auto;
	height: auto;
	min-height: 320px;
	width: 100%;
}

/* ══ Barre d'estimation en pied de configurateur ══════════════════════════ */

@media screen and (min-width: 900px) {

	/*
	 * ┌────────────────────────────────────┬─────────────────┐
	 * │                                    │  TRACÉ 2D       │
	 * │            VUE 3D                  │  cotes, côtés,  │
	 * │            (collée)                │  forme, zoom    │
	 * │             ~70 %                  ├─────────────────┤
	 * │                                    │  OPTIONS        │
	 * │                                    │  bois, toiture… │
	 * └────────────────────────────────────┴─────────────────┘
	 * ╔══════════════════════════════════════════════════════╗
	 * ║  ESTIMATION · mention légale · APPEL À L'ACTION       ║  ← fixe
	 * ╚══════════════════════════════════════════════════════╝
	 *
	 * 🔴 30 % AVEC UN PLANCHER, PAS 30 % SEC.
	 *
	 * « minmax(340px, 30fr) » : la proportion est tenue tant qu'elle laisse
	 * la place de travailler, et c'est la 3D qui cède en dessous. À 900 px de
	 * fenêtre, 30 % secs donneraient 270 px — le tracé 2D et ses boutons de
	 * zoom y deviennent difficiles à manipuler, et c'est l'outil de travail.
	 */
	.kadro-pergola-configurator .kpc-layout {
		align-items: start;

		/*
		 * 🔴 LA COLONNE DE RÉGLAGES EST PLAFONNÉE, LA 3D PREND LE RESTE.
		 *
		 * 30 % secs sur un écran de 1920 px donneraient 570 px : des champs de
		 * cotes et des vignettes de finition démesurément larges pour ce
		 * qu'ils contiennent. Le plancher de 340 px reste indispensable dans
		 * l'autre sens — en dessous, le tracé 2D et ses boutons de zoom
		 * deviennent difficiles à manipuler.
		 */
		grid-template-columns: minmax(0, 1fr) clamp(340px, 30%, 460px);

		/*
		 * 🔴 BORD À BORD, SANS DÉBORDEMENT.
		 *
		 * Plus de gouttière ni de largeur maximale : le configurateur occupe
		 * strictement la fenêtre. La barre de défilement est MESURÉE et
		 * déduite — « 100vw » la comprend, et une mise en page large de 100vw
		 * ferait gagner à la page un défilement horizontal sur un site où
		 * rien d'autre ne déborde.
		 */
		margin-inline: calc(50% - 50vw + var(--kpc-scrollbar-w) / 2);
		width: calc(100vw - var(--kpc-scrollbar-w));
	}

	/*
	 * 🔴 LES ONGLETS N'EXISTENT PAS ICI, ET LA RÈGLE EST DANS CE BLOC.
	 *
	 * En 1.4.3, la règle équivalente s'était retrouvée dans le bloc « ≥ 1200
	 * px » : entre 900 et 1199 px, le bouton restait donc affiché alors qu'il
	 * n'avait plus rien à ouvrir. L'attribut « hidden » posé par le script ne
	 * rattrapait pas — une règle d'auteur « display » l'emporte sur la règle
	 * « [hidden] » du navigateur.
	 *
	 * Le banc vérifie désormais que cette règle est bien DANS ce bloc-ci, et
	 * pas seulement quelque part dans le fichier.
	 */
	.kadro-pergola-configurator .kpc-switch {
		display: none;
	}

	/*
	 * 🔴 DESKTOP · LA BARRE REVIENT SUR UNE SEULE LIGNE.
	 *
	 * Prix et mention légale à gauche, bouton à droite ajusté à son libellé.
	 * Les deux niveaux empilés sont une réponse à l'étroitesse d'un téléphone ;
	 * ici la place ne manque pas, et empiler ferait monter la barre pour rien.
	 */
	.kadro-pergola-configurator .kpc-bottombar .kpc-panel {
		align-items: center;
		gap: 6px 16px;
		grid-template-areas: "price action";
		grid-template-columns: minmax(0, 1fr) auto;
	}

	/*
	 * 🔴 LE PLAFOND DE 260 PX EST RELEVÉ À 320 PX.
	 *
	 * Il avait été posé en 1.6.0 quand le libellé pouvait se replier sur deux
	 * lignes. Avec « nowrap », 260 px ne suffisent plus : à 15 px de police,
	 * les 31 caractères demandent environ 302 px. Un plafond trop bas ne
	 * raccourcirait pas le texte — il le ferait déborder du bouton.
	 *
	 * 15 px et non 13 : sur un écran large, rien n'oblige à réduire un appel à
	 * l'action au corps d'une note de bas de page.
	 */
	.kadro-pergola-configurator .kpc-bottombar .kpc-cta__button {
		font-size: 15px;
		max-width: 320px;
		padding: 10px 20px;
		width: auto;
	}

	/* Le texte intégral de l'aide au geste, qui a la place de tenir ici. */
	.kadro-pergola-configurator .kpc-scene__note-short {
		display: none;
	}

	.kadro-pergola-configurator .kpc-scene__note-full {
		display: inline;
	}

	/*
	 * 🔴 LA 3D RESTE À L'ÉCRAN PENDANT QUE LES RÉGLAGES DÉFILENT.
	 *
	 * C'est le cœur de la refonte : on règle ses finitions en regardant leur
	 * effet, sans remonter. « align-items: start » sur la grille est ce qui
	 * rend le collage possible — une case étirée sur toute la hauteur n'a
	 * aucune course pour coller.
	 */
	.kadro-pergola-configurator .kpc-col--stage {
		position: sticky;
		top: var(--kpc-stage-top);

		/*
		 * 🔴 C'EST LA COLONNE QU'ON BORNE, PAS LE CANVAS.
		 *
		 * La 1.5.0 dimensionnait « .kpc-scene » — le canvas seul — en oubliant
		 * que la colonne collée porte AUSSI la note d'aide au geste et, le cas
		 * échéant, le message de repli. La colonne dépassait donc le canvas
		 * d'une quarantaine de pixels, et c'est par là qu'elle passait sous la
		 * barre basse.
		 *
		 * Borner le conteneur ferme la question quel que soit ce qu'on lui
		 * ajoutera demain : c'est le contenu qui s'adapte, jamais la borne.
		 */
		box-sizing: border-box;

		/*
		 * 🔴 DEUX GRANDEURS, DEUX RÔLES — et surtout pas la même.
		 *
		 *   · la HAUTEUR se calcule sur « --kpc-above-h », l'espace réellement
		 *     occupé au-dessus du configurateur. C'est ce qui répond à « toute
		 *     la hauteur de fenêtre moins l'en-tête » ;
		 *   · le COLLAGE (« top », plus bas) se règle sur « --kpc-chrome-top »,
		 *     qui ne compte que ce qui occulte l'écran en PERMANENCE. Coller la
		 *     3D à hauteur de l'en-tête la laisserait pincée là même après
		 *     qu'il a défilé hors de vue, avec une bande vide au-dessus.
		 *
		 * La hauteur retient donc la plus grande des deux contraintes : la vue
		 * peut sous-remplir de quelques pixels une fois collée, elle ne
		 * chevauche jamais rien.
		 */
		height: max(
			var(--kpc-stage-min),
			calc(100vh - var(--kpc-above-h) - var(--kpc-bottombar-h) - var(--kpc-stage-gap) - 16px)
		);

		/* La 3D prend ce qui reste, la note garde sa taille naturelle. */
		align-content: stretch;
		grid-template-rows: minmax(0, 1fr) auto;
	}

	/*
	 * 🔴 « dvh » quand le navigateur sait : sur mobile comme sur certains
	 * navigateurs de bureau, « vh » ignore les barres d'interface qui
	 * apparaissent et disparaissent. La règle « vh » ci-dessus reste le repli
	 * pour les navigateurs qui ne connaissent pas l'unité.
	 */
	@supports (height: 100dvh) {

		.kadro-pergola-configurator .kpc-col--stage {
			height: max(
				var(--kpc-stage-min),
				calc(100dvh - var(--kpc-above-h) - var(--kpc-bottombar-h) - var(--kpc-stage-gap) - 16px)
			);
		}
	}

	/*
	 * 🔴 LA 3D NE DÉPASSE JAMAIS L'ÉCRAN.
	 *
	 * Une vue plus haute que la fenêtre annulerait le collage : le navigateur
	 * doit d'abord la faire défiler entièrement avant de pouvoir la fixer, et
	 * le haut de la pergola disparaîtrait. La hauteur est donc bornée par la
	 * fenêtre, barre basse déduite, avec un plancher pour que la vue reste
	 * lisible sur un portable peu haut.
	 */
	/*
	 * 🔴 PLUS DE « clamp » ICI, ET C'EST LE CŒUR DU CORRECTIF.
	 *
	 * Le plancher de 480 px l'emportait sur la contrainte qu'il était censé
	 * respecter : sur une fenêtre courte — un portable avec sa barre
	 * d'onglets et sa barre de favoris —, « 100vh − barre − 48 » tombait sous
	 * 480, le plancher reprenait la main, et la 3D dépassait. Un plancher qui
	 * bat la contrainte n'est pas un plancher, c'est un bug.
	 *
	 * Le canvas suit désormais la hauteur que sa colonne lui laisse. La borne
	 * est posée une seule fois, sur le conteneur.
	 */
	.kadro-pergola-configurator .kpc-scene {
		height: auto;
		min-height: 0;
	}

	/*
	 * ⚠ CETTE RÈGLE DOUBLE CELLE DU CORPS GÉNÉRAL, et c'est par elle que le
	 * blanc revenait sur grand écran : la version de base avait été mise à une
	 * seule rangée sans écart, celle-ci gardait deux rangées et 8 px. Une règle
	 * corrigée à un seul endroit sur deux ne corrige rien là où l'autre gagne.
	 */
	.kadro-pergola-configurator [data-kpc-scene-panel] {
		gap: 0;
		grid-template-rows: minmax(0, 1fr);
	}

	/*
	 * Le montant et l'appel à l'action côte à côte dans la barre, le
	 * récapitulatif dessous.
	 */
	.kadro-pergola-configurator .kpc-panel {
		align-items: center;
		display: grid;
		gap: 12px;
		grid-template-areas:
			"price action"
			"recap recap";
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	}

	.kadro-pergola-configurator .kpc-estimate {
		display: flex;
		flex-direction: column;
		grid-area: price;
		justify-content: center;
		padding: 12px 18px;
	}

	.kadro-pergola-configurator .kpc-cta {
		align-self: center;
		grid-area: action;
	}

	/*
	 * 🔴 LE BOUTON NE DÉBORDE PLUS.
	 *
	 * Il portait un libellé long dans une case dimensionnée en fraction : le
	 * mot le plus large imposait sa largeur minimale, et la case débordait de
	 * la colonne. « min-width: 0 » autorise la case à se réduire, le libellé
	 * passe alors à la ligne au lieu de pousser la mise en page.
	 */
	.kadro-pergola-configurator .kpc-cta,
	.kadro-pergola-configurator .kpc-cta__button {
		max-width: 100%;
		min-width: 0;
	}

	.kadro-pergola-configurator .kpc-cta__button {
		white-space: normal;
	}

	.kadro-pergola-configurator .kpc-recap {
		grid-area: recap;
	}

	/*
	 * La mention indicative reste lisible : elle n'est ni tronquée, ni réduite
	 * au point de disparaître. C'est une obligation, pas un ornement.
	 */
	.kadro-pergola-configurator .kpc-estimate__note {
		display: block;
		font-size: 0.76em;
		line-height: 1.45;
		overflow: visible;
	}

}

/* ══ Demande de devis ═════════════════════════════════════════════════════ */

.kadro-pergola-configurator .kpc-form {
	background: #FFFFFF;
	border: 1px solid var(--kpc-bordure);
	border-radius: var(--kpc-rayon);
	border-top: 4px solid var(--kpc-vert-vif);
	box-shadow: var(--kpc-ombre-forte);
	margin-top: var(--kpc-gap);
	padding: 28px;
	scroll-margin-top: 24px;
}

.kadro-pergola-configurator .kpc-form__title {
	color: var(--kpc-vert-nuit);
	font-size: var(--kpc-t-xl);
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 14px;
}

/*
 * Trois promesses courtes avant le premier champ. Un formulaire qui demande
 * un téléphone doit dire pourquoi, sans quoi il est abandonné.
 */
.kadro-pergola-configurator .kpc-form__trust {
	display: grid;
	gap: 8px;
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
}

.kadro-pergola-configurator .kpc-form__trust li {
	color: var(--kpc-texte);
	font-size: var(--kpc-t-sm);
	padding-left: 26px;
	position: relative;
}

.kadro-pergola-configurator .kpc-form__trust li::before {
	color: var(--kpc-vert-vif);
	content: "✓";
	font-weight: 700;
	left: 4px;
	position: absolute;
}

.kadro-pergola-configurator .kpc-form__intro {
	background: var(--kpc-creme);
	border-radius: var(--kpc-rayon-petit);
	color: var(--kpc-texte-doux);
	font-size: var(--kpc-t-sm);
	margin-bottom: 20px;
	padding: 12px 14px;
}

/*
 * Champs de Formidable. Le plugin garde ses propres styles ; on n'intervient
 * que sur le confort de saisie, et TOUJOURS dans notre portée.
 */
.kadro-pergola-configurator .kpc-form input[type="text"],
.kadro-pergola-configurator .kpc-form input[type="email"],
.kadro-pergola-configurator .kpc-form input[type="tel"],
.kadro-pergola-configurator .kpc-form select,
.kadro-pergola-configurator .kpc-form textarea {
	border: 1px solid var(--kpc-bordure-forte);
	border-radius: var(--kpc-rayon-petit);
	font: inherit;
	min-height: var(--kpc-touch);
	padding: 10px 12px;
	transition: border-color var(--kpc-transition), box-shadow var(--kpc-transition);
	width: 100%;
}

.kadro-pergola-configurator .kpc-form input:focus,
.kadro-pergola-configurator .kpc-form select:focus,
.kadro-pergola-configurator .kpc-form textarea:focus {
	border-color: var(--kpc-vert-vif);
	box-shadow: 0 0 0 3px rgba(15, 127, 53, 0.14);
	outline: none;
}

.kadro-pergola-configurator .kpc-form textarea {
	min-height: 110px;
}

.kadro-pergola-configurator .kpc-form .frm_submit button,
.kadro-pergola-configurator .kpc-form input[type="submit"] {
	background: var(--kpc-orange);
	border: none;
	border-radius: var(--kpc-rayon);
	box-shadow: 0 3px 12px rgba(206, 71, 10, 0.28);
	color: #FFFFFF;
	cursor: pointer;
	font: inherit;
	font-size: var(--kpc-t-lg);
	font-weight: 700;
	min-height: 54px;
	padding: 14px 28px;
	transition: background var(--kpc-transition), box-shadow var(--kpc-transition);
}

.kadro-pergola-configurator .kpc-form .frm_submit button:hover,
.kadro-pergola-configurator .kpc-form input[type="submit"]:hover {
	background: #B03C08;
	box-shadow: 0 6px 20px rgba(206, 71, 10, 0.38);
}

.kadro-pergola-configurator .kpc-form__missing {
	background: rgba(226, 181, 48, 0.12);
	border-left: 3px solid var(--kpc-or);
	border-radius: 4px;
	font-size: 0.9em;
	padding: 12px 14px;
}

.kadro-pergola-configurator .kpc-cta__button:not([disabled]):hover {
	background: #B03C08;
}

/* ══ Bureau ═══════════════════════════════════════════════════════════════ */

/*
 * 🔴 1.5.0 — DEUX PALIERS AU LIEU DE QUATRE.
 *
 * Cette section contenait « ≥ 1200 px » et « 900–1199 px », qui décrivaient
 * deux arrangements différents des TROIS anciennes colonnes : trois de front
 * au-delà de 1200 px, puis « plan + 3D » sur une rangée et les finitions sur
 * une seconde en dessous.
 *
 * Il n'y a plus que deux zones, et leur proportion se défend seule grâce au
 * plancher de 340 px sur la zone de droite : le même arrangement tient de
 * 900 px à 1720 px. Les deux paliers ont donc disparu, et avec eux le risque
 * qu'une règle atterrisse dans le mauvais — ce qui est précisément arrivé en
 * 1.4.3.
 *
 * Le seul seuil de bascule du projet reste 900 px, celui que le script lit
 * aussi (« isWideLayout »). Deux valeurs qui divergeraient feraient masquer
 * par l'un ce que l'autre attend.
 */

@media screen and (min-width: 700px) and (max-width: 899px) {

	/*
	 * ⚠ CE PALIER NE DÉCIDE DE RIEN.
	 *
	 * Il ne choisit ni les zones affichées, ni le régime d'affichage : à cette
	 * largeur on est en version étroite, avec ses deux onglets, comme partout
	 * sous 900 px. Le seuil de bascule reste unique.
	 *
	 * Il n'ajuste qu'une chose, à l'intérieur du panneau « Mes options » : sur
	 * une tablette en portrait, les options tiennent confortablement sur deux
	 * sous-colonnes au lieu d'une seule très étirée.
	 */
	.kadro-pergola-configurator .kpc-col--finish {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

/* ══ Mobile ═══════════════════════════════════════════════════════════════ */

@media screen and (max-width: 699px) {

	/*
	 * Bandeau : le logo perd huit pixels de haut, le bouton garde sa cible
	 * tactile. Le libellé de sortie reste ENTIER — le tronquer économiserait
	 * quelques pixels et coûterait sa lisibilité, et c'est le seul moyen de
	 * quitter la page une fois l'en-tête du site masqué.
	 */
	.kadro-pergola-configurator .kpc-topbar {
		gap: 8px;
		margin-bottom: 14px;
		padding: 8px 0;
	}

	.kadro-pergola-configurator .kpc-topbar__logo {
		max-height: 32px;
	}

	.kadro-pergola-configurator .kpc-topbar__wordmark {
		font-size: var(--kpc-t-md);
	}

	.kadro-pergola-configurator .kpc-topbar__exit {
		font-size: var(--kpc-t-xs);
		padding: 6px 8px;
	}

	.kadro-pergola-configurator .kpc-leave {
		padding: 20px 18px;
	}

	/* Le bloc d'action reste compact et entièrement lisible. */
	.kadro-pergola-configurator .kpc-cta__button {
		font-size: var(--kpc-t-md);
	}

	.kadro-pergola-configurator .kpc-step {
		padding: 16px;
	}

	/*
	 * 🔴 LA MENTION LÉGALE N'EST JAMAIS SACRIFIÉE À LA HAUTEUR.
	 *
	 * Une version ancienne la masquait sur téléphone pour tenir dans la place
	 * disponible. C'était une erreur : elle est obligatoire, elle ne peut pas
	 * céder à une commodité d'affichage. La barre basse s'adapte donc à son
	 * contenu — jamais l'inverse —, et le montant est légèrement réduit pour
	 * lui laisser la place.
	 */
	.kadro-pergola-configurator .kpc-estimate {
		height: auto;
		max-height: none;
		overflow: visible;
		padding: 0;
	}

	.kadro-pergola-configurator .kpc-estimate__amount {
		font-size: 1.85em;
	}

	.kadro-pergola-configurator .kpc-estimate__note {
		display: block;
		font-size: 0.74em;
		line-height: 1.5;
		margin-top: 12px;
		padding-top: 10px;
	}

	.kadro-pergola-configurator .kpc-walls {
		max-width: 100%;
	}

	/*
	 * Cibles tactiles : jamais sous le seuil confortable. La largeur reste
	 * celle de la colonne, sans quoi le libellé se décentrerait à nouveau.
	 */
	.kadro-pergola-configurator .kpc-swatch__color {
		height: var(--kpc-touch);
	}

	.kadro-pergola-configurator .kpc-swatches {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.kadro-pergola-configurator .kpc-tab,
	.kadro-pergola-configurator .kpc-switch,
	.kadro-pergola-configurator .kpc-drawbtn,
	.kadro-pergola-configurator .kpc-zoombtn,
	.kadro-pergola-configurator .kpc-segb {
		min-height: var(--kpc-touch);
		min-width: var(--kpc-touch);
	}

	.kadro-pergola-configurator .kpc-canvas {
		height: 300px;
	}

	/*
	 * 🔴 1.10.2 — LE BLOC 3D EN DOUBLE EST SUPPRIMÉ.
	 *
	 * Six règles — hauteur de la scène, bouton d'agrandissement, commandes,
	 * panneau plein écran — étaient recopiées ici À L'IDENTIQUE du palier
	 * « ≤ 782 px », qui couvre déjà ce palier-ci. Elles n'ajoutaient rien, et
	 * elles ajoutaient un risque : corriger la hauteur de la scène à un seul
	 * des deux endroits, et voir la correction annulée par la copie.
	 *
	 * Tout ce qui concerne la vue 3D sur écran étroit vit désormais au palier
	 * « ≤ 782 px », et à un seul endroit.
	 */

}

/* ══ Impression ═══════════════════════════════════════════════════════════ */

@media print {

	/* À l'impression, seuls le visuel et le montant ont du sens. */
	.kadro-pergola-configurator .kpc-steps,
	.kadro-pergola-configurator .kpc-cta,
	.kadro-pergola-configurator .kpc-form,
	.kadro-pergola-configurator .kpc-switch,
	.kadro-pergola-configurator .kpc-zoom,
	.kadro-pergola-configurator .kpc-drawbar,
	.kadro-pergola-configurator .kpc-scene__tools,
	.kadro-pergola-configurator .kpc-expand,
	.kadro-pergola-configurator .kpc-stagepanel,
	.kadro-pergola-configurator .kpc-topbar,
	.kadro-pergola-configurator .kpc-leave {
		display: none !important;
	}

	.kadro-pergola-configurator .kpc-estimate {
		background: none;
		box-shadow: none;
		color: #000000;
	}

	/*
	 * Sur papier, rien n'est fixe : la barre reprend sa place dans le flux, et
	 * la réserve de hauteur qu'elle exigeait à l'écran n'a plus lieu d'être —
	 * elle laisserait une bande blanche en bas de chaque page.
	 */
	.kadro-pergola-configurator {
		padding-bottom: 0;
	}

	.kadro-pergola-configurator .kpc-bottombar {
		border-top: 1px solid #000000;
		bottom: auto;
		box-shadow: none;
		position: static;
	}

	/* Une vue 3D collée se répéterait sur chaque page. */
	.kadro-pergola-configurator .kpc-col--stage {
		position: static;
	}
}