/* =========================================================================
   QSN 2026 — Page « Qui sommes-nous » Batiproconnect
   Exécution des 10 propositions de l'audit graphique du 2026-09-01
   + passe photo-first du 2026-09-01, rotation après verdict du tri :
   hero = la scène générée VALIDÉE (site d'artisan sur smartphone,
   établi) servie ≤ 1600 px sans lightbox ; la pierre naturelle descend
   en bandeau du récit sombre ; « Notre règle » revient au texte en
   carte-règle sur aplat (photo rejetée au tri, faïence écartée).
   Asset destiné au plugin batipro-templates (chargé APRÈS page-editorial.css).
   Tokens : ceux de design-system.css (palette D — #1f3d80 / #e87830).
   Filets : 2 styles seulement — 1px var(--c-line) (listes/cartes)
            et 3px var(--c-ocre) (accents : têtes désaxées, interdits,
            pull-quote, fil du process). Aucun autre.
   Photos : jamais de trait EN TRAVERS d'une photo — seulement un
            outline 1px translucide au bord (liseré de profondeur MIFB)
            + ombre en couches. Jamais de pseudo-élément sur une <img>.
   ========================================================================= */

.batipro-page {
	--qsn-tint: #e6ecf6;      /* bande claire franche (proposition 5) */
	--qsn-tint-2: #dbe4f2;    /* bande claire plus soutenue (montée d'intensité) */
	--qsn-ease: cubic-bezier(.23, 1, .32, 1);
}

/* Le customizer prod impose `body.batipro-page .eyebrow { color: var(--c-ocre) !important }`
   → 2,5:1 sur fonds clairs. Un !important existant est une information : on ne le retire pas,
   on le bat à la spécificité. Sur les fonds de cette page, l'eyebrow repasse en variante
   texte (≥ 4,5:1) — et en variante soft sur les surfaces bleu nuit. */
body.batipro-page .section .section-head .eyebrow { color: var(--c-ocre-txt, #b1500f) !important; }
body.batipro-page .qsn-steps .qsn-step .eyebrow { color: var(--c-ocre-txt, #b1500f) !important; }
body.batipro-page .qsn-band--deep .section-head .eyebrow,
body.batipro-page .qsn-steps .qsn-step--final .eyebrow { color: var(--c-ocre-soft, #f2a577) !important; }
/* Sur les bandes teintées, la variante texte elle-même manque le seuil : cran plus foncé */
body.batipro-page .qsn-band--tint .section-head .eyebrow,
body.batipro-page .qsn-band--tint2 .section-head .eyebrow { color: #a04a10 !important; }

/* =====================================================================
   5 — CHAPITRES À FONDS PROGRESSIFS
   Le rythme des fonds devient perceptible : blanc ↔ bleu pâle franc,
   et UNE section d'impact bleu nuit (le récit). Le changement de fond
   marque seul la frontière : aucun filet de section.
   ===================================================================== */
.batipro-page .qsn-band--blanc { background: #fff; }
.batipro-page .qsn-band--tint { background: var(--qsn-tint); }
.batipro-page .qsn-band--tint2 { background: var(--qsn-tint-2); }
.batipro-page .qsn-band--deep { background: var(--c-blue-deep); }

/* Section d'impact sombre : tout le texte passe en clair */
.batipro-page .qsn-band--deep .eyebrow { color: var(--c-ocre-soft); }
.batipro-page .qsn-band--deep h2 { color: #fff; }
.batipro-page .qsn-band--deep h2 em { color: var(--c-ocre-soft); }
.batipro-page .qsn-band--deep .bp-prose { color: rgba(255, 255, 255, .88); }
.batipro-page .qsn-band--deep .bp-prose strong { color: #fff; }

/* =====================================================================
   6 — HERO PHOTO-FIRST
   Le récit d'abord (eyebrow, H1, lead, CTA — le fold à 390 est à eux),
   puis la scène validée au tri : le site d'artisan sur smartphone,
   posé sur l'établi. Paysage 16:10 servi ENTIER (aucun recadrage : la
   scène téléphone + planches reste complète), en objet LARGE ancré à
   droite — débord bas sur la section suivante + léger débord droit,
   coin bas-gauche au grand rayon (l'arrondi maison du carré du logo),
   ombre douce en couches. Image générée : servie à 1600 px max
   (plafond tri : 1920, jamais le natif), aucune lightbox ni clic-zoom.
   Partis pris de structure : 21st #19077 / #19075 (hero éditorial,
   image paysage large sous le titre) — structure seule, jamais le
   style. Le wash, c'est le ::before existant de bp-page-hero.
   ===================================================================== */
.batipro-page .bp-page-hero.qsn-hero { overflow: visible; padding-bottom: clamp(40px, 5vw, 64px); }
.batipro-page .qsn-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
}
.batipro-page .qsn-hero-copy { max-width: 620px; }
.batipro-page .qsn-hero-visual {
	margin: 0 calc(-1 * clamp(0px, 2vw, 40px)) 0 0;
	width: auto;
	position: relative;
	z-index: 2;
}
.batipro-page .qsn-hero-visual img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 72px;
	outline: 1px solid rgba(18, 35, 74, .12);
	box-shadow: 0 32px 72px rgba(18, 35, 74, .18), 0 8px 20px rgba(18, 35, 74, .08);
}
.batipro-page .qsn-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 28px;
}

/* Les deux boutons tombaient sous la ligne de flottaison desktop (bas a 943 px
   pour une fenetre de 900, donc hors ecran dans un vrai navigateur). On resserre
   la hauteur du hero au-dela de 960 px : le mobile, deja conforme, n'y touche pas. */
@media (min-width: 961px) {
	.batipro-page .bp-page-hero.qsn-hero { padding-top: clamp(20px, 2.2vw, 32px); padding-bottom: clamp(32px, 3.6vw, 48px); }
	.batipro-page .qsn-hero-copy h1 { font-size: clamp(34px, 3.4vw, 46px); margin-bottom: 16px; }
	.batipro-page .qsn-hero-copy .bp-page-hero-lead { font-size: 16.6px; line-height: 1.58; }
	.batipro-page .qsn-hero-actions { margin-top: 20px; }
}
.batipro-page .qsn-hero-actions .btn { transition-property: transform, box-shadow, background, color, border-color; }
.batipro-page .qsn-hero-actions .btn:active { transform: scale(.97); }

/* Bouton WhatsApp au vert de marque — réglage validé sur la home, repris
   tel quel pour les DEUX occurrences (hero + CTA final, ex-style inline).
   #06341b sur #25d366 = 6,97:1 (mesuré) ; hover #1fc65c = même micro-
   élévation que btn-ghost, dans la transition 220 ms du .btn. */
.batipro-page .btn-wa {
	background: #25d366;
	color: #06341b;
	border-color: transparent;
	box-shadow: 0 1px 2px rgba(18, 35, 74, .06);
}
.batipro-page .btn-wa:hover {
	background: #1fc65c;
	color: #06341b;
	border-color: transparent;
	transform: translateY(-1px);
}
.batipro-page .btn-wa:active { transform: scale(.97); }

@media (max-width: 960px) {
	.batipro-page .qsn-hero-grid { display: block; }
	.batipro-page .qsn-hero-copy { max-width: 720px; }
	.batipro-page .qsn-hero-visual { margin: 28px 0 calc(-1 * clamp(48px, 9vw, 76px)); width: 100%; }
	.batipro-page .qsn-hero-visual img { border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 48px; }
}

/* =====================================================================
   10 — TÊTES DE SECTION DÉSAXÉES (règle + récit)
   Le bloc titre passe à gauche sur grille ~5/7, l'eyebrow perd son
   tiret : c'est le filet latéral orange qui porte l'accent.
   ===================================================================== */
.batipro-page .qsn-head-left {
	text-align: left;
	margin: 0 0 clamp(36px, 5vw, 56px);
	max-width: 640px;
	border-left: 3px solid var(--c-ocre);
	padding-left: clamp(20px, 2.6vw, 32px);
}
.batipro-page .qsn-head-left .eyebrow::before { display: none; }
.batipro-page .qsn-head-left h2 { text-wrap: balance; }

/* =====================================================================
   1 — NOTRE RÈGLE : LA CARTE-RÈGLE ET SA JUSTIFICATION
   La photo prévue a été rejetée au tri (personnages générés, charabia)
   et la faïence écartée (hors-sujet, décision client) : la section
   revient au texte SANS redevenir un bloc nu (l'interdit s'applique
   par substitution) — le lead devient une CARTE-RÈGLE sur aplat bleu
   pâle, sticky comme l'était la photo, jalons surlignés à l'intérieur ;
   la justification défile à droite. Signaux posés : aplat + corps
   (18-20 px) + asymétrie (~48/52) + filet ocre sur l'argument clé.
   Structure : 21st #8462 (mots-clés portés dans la prose).
   ===================================================================== */
.batipro-page .qsn-regle-grid {
	display: grid;
	grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
	grid-template-areas:
		"visuel lead"
		"visuel rest";
	grid-template-rows: auto auto;
	gap: clamp(24px, 3.2vw, 48px) clamp(32px, 5vw, 64px);
	align-items: start;
}

/* La photo de la regle (image generee, validee au tri du 01/09).
   Contraintes du tri, imperatives : servie en 1240x1550 (jamais le natif),
   largeur d'affichage plafonnee a 620 px, ratio 4:5 conserve (aucun cover),
   AUCUNE lightbox, aucun lien, aucun zoom au survol. */
.batipro-page .qsn-regle-visual {
	grid-area: visuel;
	margin: 0;
	max-width: 620px;
	align-self: start;
	position: sticky;
	top: clamp(84px, 12vh, 120px);
}
.batipro-page .qsn-regle-visual img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
	box-shadow: 0 1px 2px rgba(18, 35, 74, .06), 0 18px 40px -22px rgba(18, 35, 74, .38);
}
/* La carte-règle : LA règle sur aplat, un cran au-dessus du corps courant */
.batipro-page .qsn-regle-lead {
	grid-area: lead;
	margin: 0;
	background: var(--qsn-tint);
	border-radius: var(--radius-lg);
	padding: clamp(24px, 3vw, 40px);
	margin-bottom: clamp(24px, 3vw, 36px);
}
.batipro-page .qsn-regle-lead p {
	font-size: clamp(18px, 1.6vw, 20px);
	line-height: 1.7;
	max-width: none;
	margin: 0;
}
.batipro-page .qsn-regle-rest { grid-area: rest; margin: 0; }
.batipro-page .qsn-regle-rest p { max-width: 62ch; }
/* Les jalons : surligneur ocre bas + graisse, texte strictement inchangé */
.batipro-page .qsn-jalon {
	font-weight: 700;
	color: var(--c-ink);
	background: linear-gradient(180deg, transparent 64%, rgba(200, 122, 44, .3) 64%);
	border-radius: 3px;
	padding: 0 2px;
	margin: 0 -2px;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}
/* L'argument clé (propriété du site et du domaine) porté au filet orange —
   même style d'accent que les têtes désaxées, aucun style de trait nouveau */
.batipro-page .qsn-regle-rest .qsn-regle-cle {
	border-left: 3px solid var(--c-ocre);
	padding-left: 20px;
	margin-top: 28px;
}

@media (max-width: 900px) {
	.batipro-page .qsn-regle-grid {
		grid-template-columns: 1fr;
		grid-template-areas:
			"lead"
			"visuel"
			"rest";
	}
	.batipro-page .qsn-regle-visual { position: static; }
	}

/* =====================================================================
   3 — ÉTAPES RELIÉES (Comment ça se passe)
   Une ligne orange continue relie les 4 cartes par leurs pastilles ;
   la 4e carte « Votre décision » passe en aplat bleu nuit.
   Verticale sur écrans étroits. Zéro numérotation.
   ===================================================================== */
.batipro-page .bp-pillars.qsn-steps {
	position: relative;
	padding-top: 34px;
	grid-template-columns: repeat(4, 1fr);
}
/* Le fil : 3px orange, d'un centre de pastille à l'autre */
.batipro-page .qsn-steps::before {
	content: "";
	position: absolute;
	top: 10px;
	left: 12.5%;
	right: 12.5%;
	height: 3px;
	border-radius: 2px;
	background: var(--c-ocre);
}
/* La pastille de chaque étape, posée sur le fil */
.batipro-page .qsn-step { position: relative; }
.batipro-page .qsn-step::before {
	content: "";
	position: absolute;
	top: -31px;
	left: 50%;
	transform: translateX(-50%);
	width: 15px; height: 15px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--c-ocre);
	box-shadow: 0 0 0 4px var(--qsn-band-bg, #fff);
	transition: background 200ms var(--qsn-ease);
}
.batipro-page .qsn-step:hover::before { background: var(--c-ocre); }
/* La 4e : la décision, en aplat bleu nuit */
.batipro-page .qsn-step--final { background: var(--c-blue-deep); border-color: var(--c-blue-deep); }
.batipro-page .qsn-step--final::before { background: var(--c-ocre); }
.batipro-page .qsn-step--final .eyebrow { color: var(--c-ocre-soft); }
.batipro-page .qsn-step--final h3 { color: #fff; }
.batipro-page .qsn-step--final p { color: rgba(255, 255, 255, .85); }
.batipro-page .qsn-step--final:hover { border-color: var(--c-blue-deep); }

@media (max-width: 1000px) {
	.batipro-page .bp-pillars.qsn-steps {
		grid-template-columns: 1fr;
		max-width: 560px;
		margin: 0 auto;
		padding-top: 0;
		padding-left: 30px;
	}
	.batipro-page .qsn-steps::before {
		top: 26px;
		bottom: 26px;
		left: 6px;
		right: auto;
		width: 3px;
		height: auto;
	}
	.batipro-page .qsn-step::before {
		top: 24px;
		left: -30.5px;
		transform: none;
	}
}

/* =====================================================================
   7 — MÉTIERS EN JETONS (Un seul secteur)
   Les six métiers sortent du paragraphe en rangée de jetons texte à
   bordure bleue. Largeurs inégales = asymétrie naturelle. La
   ponctuation d'origine reste, en interstice discret.
   ===================================================================== */
.batipro-page .qsn-trades {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 6px;
	margin: 26px 0 !important;
	max-width: none !important;
}
.batipro-page .qsn-trade {
	display: inline-block;
	padding: 10px 20px;
	border: 1.5px solid rgba(31, 61, 128, .38);
	border-radius: 999px;
	background: #fff;
	color: var(--c-blue);
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	text-transform: capitalize;
	letter-spacing: .01em;
	transition: transform 200ms var(--qsn-ease), border-color 200ms ease, box-shadow 200ms var(--qsn-ease);
}
@media (hover: hover) and (pointer: fine) {
	.batipro-page .qsn-trade:hover {
		transform: translateY(-3px);
		border-color: var(--c-ocre);
		box-shadow: 0 8px 18px rgba(18, 35, 74, .10);
	}
}
.batipro-page .qsn-tsep {
	color: var(--c-text-soft);
	opacity: .45;
	font-size: 15px;
	align-self: flex-end;
	padding-bottom: 4px;
}
/* Entrée en cascade quand la section se révèle */
.batipro-page .qsn-secteur .qsn-trade {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 300ms var(--qsn-ease), transform 300ms var(--qsn-ease), border-color 200ms ease, box-shadow 200ms var(--qsn-ease);
}
.batipro-page .qsn-secteur.in .qsn-trade { opacity: 1; transform: none; }
/* Jetons aux positions 1,3,5,7,9,11 (les séparateurs occupent les positions paires) */
.batipro-page .qsn-secteur.in .qsn-trade:nth-child(3) { transition-delay: 45ms; }
.batipro-page .qsn-secteur.in .qsn-trade:nth-child(5) { transition-delay: 90ms; }
.batipro-page .qsn-secteur.in .qsn-trade:nth-child(7) { transition-delay: 135ms; }
.batipro-page .qsn-secteur.in .qsn-trade:nth-child(9) { transition-delay: 180ms; }
.batipro-page .qsn-secteur.in .qsn-trade:nth-child(11) { transition-delay: 225ms; }
@media (hover: hover) and (pointer: fine) {
	.batipro-page .qsn-secteur.in .qsn-trade:hover { transition-delay: 0ms; }
}

/* =====================================================================
   8 — INTERDITS À FILET ORANGE (Ce qu'on ne fait pas)
   Les coches (contresens sur une négation) deviennent des items à
   filet orange 3px, mot-clé en corps fort, deux colonnes.
   ===================================================================== */
.batipro-page .bp-prose ul.qsn-nots {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 26px 34px;
}
.batipro-page .bp-prose .qsn-nots li {
	position: relative;
	margin: 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--c-ocre);
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--c-text-soft);
}
.batipro-page .bp-prose .qsn-nots li::before { content: none; }
.batipro-page .bp-prose .qsn-nots li strong {
	display: block;
	font-size: 19px;
	line-height: 1.3;
	color: var(--c-ink);
	margin-bottom: 6px;
}
@media (max-width: 700px) {
	.batipro-page .bp-prose ul.qsn-nots { grid-template-columns: 1fr; gap: 20px; }
}

/* =====================================================================
   4 — PULL-QUOTE COMPTOIR (dans le récit sombre)
   « je n'ai pas le temps de m'occuper de ça » sort du paragraphe en
   citation XXL, filet orange 3px, décalée hors de la colonne.
   ===================================================================== */
.batipro-page .qsn-pullquote {
	font-family: var(--ff-display);
	font-weight: 800;
	font-size: clamp(26px, 3.2vw, 40px);
	line-height: 1.25;
	letter-spacing: -.02em;
	color: #fff;
	border-left: 3px solid var(--c-ocre);
	padding: 8px 0 8px clamp(18px, 2.6vw, 30px);
	margin: clamp(30px, 4vw, 44px) 0;
	margin-left: calc(-1 * clamp(0px, 5vw, 78px));
	max-width: none !important;
	text-wrap: balance;
}

/* =====================================================================
   4 bis — LA PIERRE NATURELLE EN APPUI DU RÉCIT
   Sous le récit sombre : la vraie salle de bain livrée (mur de pierre,
   douche vitrée, baignoire), en bandeau LARGE (container 1200) qui
   déborde de la colonne narrow des deux côtés — la respiration photo
   qui clôt le chapitre : « des sites qui montrent le travail tel qu'il
   est », et la photo montre le travail. Aucun texte posé sur la photo :
   aucun voile nécessaire.
   ===================================================================== */
.batipro-page .qsn-recit-figure-wrap { margin-top: clamp(40px, 5.5vw, 64px); }
.batipro-page .qsn-recit-visual { margin: 0; }
.batipro-page .qsn-recit-visual img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
	outline: 1px solid rgba(255, 255, 255, .16);
	box-shadow: 0 28px 64px rgba(0, 0, 0, .45), 0 8px 20px rgba(0, 0, 0, .3);
}

/* =====================================================================
   9 — LA PREUVE DANS LE CTA
   Sous « Regardez ce qu'on fait » : la maquette de la home (cantevert)
   en duo laptop + mobile, en débord de la carte navy. Mention honnête
   « Maquette » — jamais « réalisation ».
   ===================================================================== */
.batipro-page .bp-page-cta.qsn-cta {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
	text-align: left;
	overflow: visible;
}
.batipro-page .qsn-cta::before { border-radius: inherit; }
.batipro-page .qsn-cta .bp-page-cta-actions { justify-content: flex-start; }
.batipro-page .qsn-cta > .qsn-cta-copy p { margin-left: 0; }
.batipro-page .qsn-cta-copy > p:last-child { margin-bottom: 0; font-size: 15px; }

.batipro-page .qsn-cta-proof {
	position: relative;
	margin: 0 calc(-1 * clamp(18px, 4vw, 96px)) calc(-1 * clamp(48px, 6vw, 88px)) 0;
	z-index: 1;
}
.batipro-page .qsn-proof-laptop img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, .16);
	outline: 1px solid rgba(18, 35, 74, .25);
	box-shadow: 0 30px 70px rgba(4, 10, 30, .55), 0 8px 22px rgba(4, 10, 30, .35);
}
.batipro-page .qsn-proof-mobile {
	position: absolute;
	right: -4%;
	bottom: -12%;
	width: 24%;
}
.batipro-page .qsn-proof-mobile img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, .22);
	outline: 1px solid rgba(18, 35, 74, .3);
	box-shadow: 0 22px 48px rgba(4, 10, 30, .6);
}
/* La mention honnête, discrète mais lisible */
.batipro-page .qsn-proof-cap {
	position: absolute;
	top: -12px;
	right: 18px;
	padding: 5px 13px;
	border-radius: 999px;
	background: var(--c-ink);
	border: 1px solid rgba(255, 255, 255, .25);
	color: rgba(255, 255, 255, .92);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}

@media (max-width: 900px) {
	.batipro-page .bp-page-cta.qsn-cta {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.batipro-page .qsn-cta .bp-page-cta-actions { justify-content: center; }
	.batipro-page .qsn-cta-proof {
		margin: 10px 0 calc(-1 * clamp(40px, 9vw, 72px));
		max-width: 520px;
		justify-self: center;
		width: 100%;
	}
	.batipro-page .qsn-proof-mobile { right: -2%; }
}

/* =====================================================================
   Accessibilité — tout est coupé sous prefers-reduced-motion
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
	.batipro-page .qsn-trade,
	.batipro-page .qsn-secteur .qsn-trade,
	.batipro-page .qsn-secteur.in .qsn-trade,
	.batipro-page .qsn-step::before,
	.batipro-page .qsn-hero-actions .btn {
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	.batipro-page .qsn-trade:hover { transform: none !important; }
}