/*
Theme Name: BTK Avocats
Description: Thème sur mesure pour BTK Avocats, construit avec ACF PRO (Flexible Content) et Polylang.
Author: Domenic
Version: 1.0.0
Text Domain: btk-avocats
*/

/* ==========================================================================
   BTK Avocats — Variables & Reset
   Palette extraite de la maquette (Desktop.png) :
   - Fond sombre  #1c1c1c
   - Blanc        #ffffff / #fdfdfd
   - Gris clair   #f0f0f0
   - Or clair     #c2b088
   - Or foncé     #8e7d55
   ========================================================================== */
@font-face{
	font-family: 'BTK PT Serif';
	src: url('assets/font/PT_Serif-Web-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face{
	font-family: 'BTK PT Serif';
	src: url('assets/font/PT_Serif-Web-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face{
	font-family: 'BTK PT Serif';
	src: url('assets/font/PT_Serif-Web-Italic.ttf') format('truetype');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face{
	font-family: 'BTK PT Serif';
	src: url('assets/font/PT_Serif-Web-BoldItalic.ttf') format('truetype');
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

/* PT Sans — la maquette compose TOUS les paragraphes en sans-serif (les titres et
   les boutons restent en PT Serif). Le dossier de polices du client ne livrait que
   PT Serif ; PT Sans est la compagne officielle de PT Serif (meme fonderie), donc
   c'est le sans le plus proche de la maquette. Auto-heberge : aucun appel Google. */
@font-face{
	font-family: 'BTK PT Sans';
	src: url('assets/font/PT_Sans-Web-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face{
	font-family: 'BTK PT Sans';
	src: url('assets/font/PT_Sans-Web-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face{
	font-family: 'BTK PT Sans';
	src: url('assets/font/PT_Sans-Web-Italic.ttf') format('truetype');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face{
	font-family: 'BTK PT Sans';
	src: url('assets/font/PT_Sans-Web-BoldItalic.ttf') format('truetype');
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

:root{
	--color-dark: #1c1c1c;
	--color-dark-2: #262624;
	--color-white: #ffffff;
	--color-off-white: #fdfdfd;
	--color-gray-light: #f0f0f0;
	--color-gold-light: #c2b088;
	--color-gold: #8e7d55;
	--color-gold-dark: #7e6c48;
	--color-text: #2a2a2a;
	--color-text-invert: #f5f5f3;
	--font-heading: 'BTK PT Serif', 'PT Serif', Georgia, 'Times New Roman', serif;
	--font-body: 'BTK PT Sans', 'PT Sans', 'Segoe UI', Arial, sans-serif;
	--font-body-serif: 'BTK PT Serif', 'PT Serif', Georgia, 'Times New Roman', serif;
	--container-max: 1454px;
	/* Dimensions partagées par le rail, le contenu, la topbar et le footer. */
	--rail-width: 88px;
	--page-gutter: 24px;
	--gutter: 24px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
	margin: 0;
	font-family: var(--font-body);
	color: var(--color-text);
	background: var(--color-white);
	line-height: 1.6;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4{ font-family: var(--font-heading); font-weight: 700; line-height: 1.25; margin: 0 0 .5em; text-transform: uppercase; }
p{ margin: 0 0 1em; }
button{ font-family: inherit; cursor: pointer; }
.site-nav-overlay a,
.nav-btn,
.force-title,
.footer-social-label,
.share-label,
.blog-card .read-more,
.article-share .share-label,
.construction-button{
	font-family: var(--font-heading);
	font-weight: 700;
}

.container{
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--gutter);
}
.screen-reader-text{
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px,1px,1px,1px); white-space: nowrap;
}

/* Boutons */
.btn{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 28px;
	border: 1px solid currentColor;
	font-family: var(--font-heading);
	font-size: 20px;
	letter-spacing: 0;
	text-transform: uppercase;
	font-weight: 700;
	transition: background .25s ease, color .25s ease;
}
.btn-light{ color: var(--color-white); border-color: var(--color-white); }
.btn-light:hover{ background: var(--color-white); color: var(--color-dark); }
.btn-dark{ color: var(--color-dark); border-color: var(--color-dark); }
.btn-dark:hover{ background: var(--color-dark); color: var(--color-white); }
.btn-gold{ background: var(--color-gold); color: var(--color-white); border-color: var(--color-gold); }
.btn-gold:hover{ background: var(--color-gold-dark); border-color: var(--color-gold-dark); }

/* Adaptation mobile des boutons. Les libellés longs (« Prendre rendez-vous avec
   Me Kouidri ») s'étalaient sur trois lignes avec la flèche détachée du texte.
   La sélecteur .hero + .section-dark .btn est repris pour passer devant la règle
   desktop de même nom. Le desktop n'est pas touché. */
@media (max-width:767px){
	.btn,
	.hero + .section-dark .btn{
		font-size: 15px;
		line-height: 1.25;
		padding: 13px 18px;
		gap: 14px;
		max-width: 100%;
	}
	.btn > span[aria-hidden="true"]{ flex: 0 0 auto; }
}
@media (max-width:420px){
	.btn,
	.hero + .section-dark .btn{
		font-size: 13.5px;
		padding: 12px 14px;
		gap: 10px;
	}
}

/* ==========================================================================
   Layout global : sidebar sombre fixe + contenu
   ========================================================================== */
.site-topbar{
	background: var(--color-white);
	border-bottom: 1px solid #eee;
	padding: 6px 0;
	font-size: 15px;
	line-height: 1.2;
}
/* flex-wrap sur les deux rangees : si la ligne ne tient pas (metriques de police
   differentes, fallback pendant le chargement, zoom d'affichage), le courriel
   passe a la ligne au lieu de pousser « EN » hors de l'ecran. */
/* max-width comme le reste du site (etait « none ») : sur un ecran large ou un
   navigateur dezoome, la barre s'etirait sur toute la largeur et le telephone,
   le courriel et FR/EN partaient se coller a l'extreme droite, tres loin de la
   colonne de contenu centree — la barre paraissait vide. */
.site-topbar .container{ max-width: calc(var(--container-max) + var(--rail-width) + 22px); margin-inline: auto; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap: 32px; row-gap: 6px; padding-left: calc(var(--rail-width) + var(--page-gutter) + 22px); }
.site-topbar a{ display:inline-flex; align-items:center; gap:8px; }
/* Les icones sont des fichiers SVG charges en <img> : on ne peut pas leur
   donner une couleur en CSS. brightness(0) ecrase toutes les teintes vers le
   noir en gardant la transparence — elles ressortent nettement sur le blanc
   de la barre (elles etaient en gris pale, peu lisibles). */
.site-topbar .icon-badge{ filter: brightness(0); }
.site-topbar .icon-svg{ width:24px; height:24px; }
.topbar-logo{ flex:0 0 auto; }
/* Le logo est un fichier PORTRAIT (600x800) : c'est lui, et pas le texte, qui
   imposait la hauteur de la barre (70px de large = 93px de haut, pour une ligne
   de contact de 20px). On le contraint donc par la HAUTEUR — width:auto garde le
   ratio. Toutes les declinaisons plus bas doivent rester en height, sinon
   fixer les deux dimensions deforme l'image. */
.topbar-logo img{ height:48px; width:auto; object-fit:contain; }
.topbar-contact{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:32px; row-gap:6px; min-width:0; }

/* jamais compresse ni tronque : le selecteur de langue garde sa largeur */
.lang-switcher{ display:flex; flex:0 0 auto; gap:10px; font-weight:600; letter-spacing:.04em; }
.lang-switcher a{ opacity:.5; }
.lang-switcher li.is-current a{ opacity:1; text-decoration:underline; text-underline-offset:3px; }

.site-shell{ min-height: 100vh; }

.site-rail{
	width: var(--rail-width);
	background: var(--color-dark);
	color: var(--color-text-invert);
	display:flex;
	flex-direction: column;
	align-items:center;
	justify-content:center;
	padding: 24px 0;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 150;
}
.site-rail .menu-toggle{
	position: absolute;
	top: 24px;
	left: 0;
	right: 0;
	margin-inline: auto;
	background:none; border:none; color:#fff; width:32px;
	padding:0; /* sinon le padding UA du <button> (1px 6px) reduit les barres a 20px */
}
/* Deux barres seulement : on exclut .screen-reader-text, sinon le span « Menu »
   herite de height:2px + background:#fff et dessine une 3e marque blanche. */
.site-rail .menu-toggle span:not(.screen-reader-text){ display:block; height:2px; background:#fff; margin:6px 0; }
.site-rail .menu-toggle:focus-visible,
.rail-socials a:focus-visible{
	outline:2px solid var(--color-gold-light);
	outline-offset:3px;
}
.rail-socials{ display:flex; flex-direction:column; gap:16px; }
.rail-socials a, .icon-circle{
	width:34px; height:34px; border:1px solid rgba(255,255,255,.4); border-radius:50%;
	display:flex; align-items:center; justify-content:center; font-size:14px; flex:0 0 34px;
}
/* 36px et non 46 : les pastilles du rail noir etaient trop grosses. */
.rail-socials a{ width:36px; height:36px; flex-basis:36px; }
.rail-socials a .icon-svg{ width:18px; height:18px; }
.icon-svg{ width:16px; height:16px; }
/* Icônes officielles (badges cerclés) : elles contiennent déjà leur cercle,
   on retire donc le cercle maison des conteneurs et on laisse le badge remplir. */
.icon-badge{ display:inline-block; width:20px; height:20px; vertical-align:middle; }
.icon-circle{ border:none; background:none; }
.icon-circle .icon-badge,
.rail-socials a .icon-badge{ width:100%; height:100%; }
.rail-socials a:has(.icon-badge){ border:none; background:none; }

.site-main{ min-width:0; margin-left: var(--rail-width); }

/* Menu plein écran */
.site-nav-overlay{
	position: fixed; inset:0; background: rgba(20,20,20,.98); color:#fff;
	display:flex; align-items:center; justify-content:center;
	overflow:auto;
	opacity:0;
	pointer-events:none;
	transform: translateY(-110%);
	transition: transform .4s ease, opacity .25s ease, visibility .4s ease;
	visibility:hidden;
	z-index: 200;
}
.site-nav-overlay.is-open{ opacity:1; pointer-events:auto; transform: translateY(0); visibility:visible; }
.site-nav-overlay ul{ text-align:center; }
.site-nav-overlay li{ margin: 18px 0; }
.site-nav-overlay a{ font-family: var(--font-heading); font-size: 32px; }
.site-nav-overlay .nav-close{ position:absolute; top:24px; right:32px; background:none; border:none; color:#fff; font-size:28px; }
.site-nav-overlay a:focus-visible,
.site-nav-overlay .nav-close:focus-visible{
	outline:2px solid var(--color-gold-light);
	outline-offset:4px;
}

/* ==========================================================================
   Hero / Bannière
   ========================================================================== */
.hero{
	position: relative;
	/* Hauteur : celle de la maquette (998px sur acceuil.png, soit 62.4vw), MAIS
	   jamais plus haute que l'ecran visible moins la barre du haut — sinon le
	   bouton passe sous la ligne de flottaison et il faut scroller pour le voir.
	   Le logo, le titre, le texte et le bouton doivent tenir dans un ecran.
	   La ligne en vh sert de repli aux navigateurs sans svh. */
	min-height: min(clamp(460px, 62.4vw, 998px), calc(100vh - 62px));
	min-height: min(clamp(460px, 62.4vw, 998px), calc(100svh - 62px));
	display:flex;
	align-items:center;
	color: #fff;
	background-color: var(--color-dark);
	background-size: cover;
	background-position: center;
	border-left: 1px solid rgba(255,255,255,.55);
	border-bottom: 1px solid rgba(255,255,255,.55);
}
.home .hero{ background-repeat:no-repeat; }
.hero::before{
	content:''; position:absolute; inset:0;
	background: linear-gradient(90deg, rgba(20,20,20,.88) 0%, rgba(20,20,20,.55) 60%, rgba(20,20,20,.35) 100%);
}
/* Meme grille et meme retrait que les bannieres des pages interieures : le
   bloc partait a 49px du rail contre 171px ailleurs. */
.hero .container{ position:relative; z-index:1; width:100%; max-width: var(--container-max); margin-inline: auto; padding-left: calc(var(--page-gutter) + 110px); }
.hero .container > *{ max-width: 760px; }
.hero .hero-logo{ max-width: 140px; margin-bottom: 24px; }
/* Meme echelle que .page-banner h1 (56px + leger interlettrage). */
.hero h1{ font-size: clamp(26px, 3vw, 48px); line-height: 1.06; letter-spacing: .02em; color:#fff; }
.hero p{ font-size: 16px; opacity:.9; }

.page-banner{
	position:relative;
	/* Hauteur relevee sur les maquettes (1600px de large) : la banniere fait
	   633px sur droit construction et droit des affaires, 639 sur droit
	   immeuble, 625 sur a propos, 621 sur nouvelles. Le theme etait a 320px,
	   soit moitie moins — seule la page droit des affaires avait ete reglee a
	   la main. 39.5vw suit la maquette proportionnellement (632px a 1600). */
	/* Meme logique que le heros de l'accueil : la hauteur de la maquette, mais
	   jamais plus que l'ecran visible, pour que le titre, le texte et le bouton
	   tiennent toujours sans scroller. */
	min-height: min(clamp(320px, 39.5vw, 632px), calc(100vh - 62px));
	min-height: min(clamp(320px, 39.5vw, 632px), calc(100svh - 62px));
	display:flex; align-items:center; color:#fff;
	background-color: var(--color-dark);
	background-size: cover; background-position:center;
}
.page-banner::before{ content:''; position:absolute; inset:0; background: rgba(20,20,20,.6); }
/* Le conteneur suit la meme grille que les sections en dessous : il etait a
   640px cale sur le rail (texte a x113 a 1920px) alors que les sections
   commencent a x270 — un decalage de 157px, tres visible depuis que la
   banniere a sa vraie hauteur. Les maquettes alignent les deux. La mesure de
   lecture est reportee sur le titre et le paragraphe. */
/* width:100% est indispensable : .page-banner est un conteneur flex, donc sans
   largeur explicite le .container se dimensionne sur son contenu et les marges
   auto le CENTRENT au lieu de l'aligner. Avec width:100% + max-width, il se
   comporte comme les .container des sections en dessous et le texte tombe sur
   la meme verticale qu'elles. */
/* padding-left augmente de 60px : le bloc de la banniere est decale vers la
   droite a la demande du client (il partait a 111px du rail, comme la
   maquette ; il part maintenant a 171px). */
.page-banner .container{ position:relative; z-index:1; width: 100%; max-width: var(--container-max); margin-left: auto; margin-right: auto; padding-left: calc(var(--page-gutter) + 110px); text-align:left; }
.page-banner h1{ max-width: 900px; }
.page-banner p{ max-width: 760px; }

/* ==========================================================================
   A PROPOS (page 6) — section « Une avocate proche du terrain », photo a gauche.
   Le texte tenait dans 662px commencant a x926 et finissant a 41px du bord du
   conteneur : comprime, colle a droite, penible a lire. On decale la colonne
   vers la gauche (photo un peu plus etroite, gouttiere plus large) et on lui
   donne de l'air a droite.
   ========================================================================== */
@media (min-width: 992px){
	/* Le bloc ne porte PAS la classe .reverse (la photo passe a gauche par une
	   autre regle) : on cible donc la section claire de cette page. */
	:is(.page-id-6, .page-id-103) .section:not(.section-dark).split-section .split-block{
		grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
		column-gap: 72px;
	}
	:is(.page-id-6, .page-id-103) .section:not(.section-dark).split-section .split-text{
		padding-right: 64px;
		/* meme traitement que le bloc de texte du haut de la page, que le client
		   a valide : texte centre, titre detache du paragraphe */
		text-align: center;
	}
	:is(.page-id-6, .page-id-103) .section:not(.section-dark).split-section .split-text h2{
		text-align: center;
		margin-bottom: 28px;
	}
	:is(.page-id-6, .page-id-103) .section:not(.section-dark).split-section .split-text p{ text-align: center; }
}

/* ==========================================================================
   POLITIQUE DE CONFIDENTIALITE (page 101) — tout centre.
   Le bloc de texte etait deja centre dans sa colonne, mais le titre de la
   banniere restait colle a gauche. Les paragraphes gardent le fer a gauche :
   centrer chaque ligne d'un texte juridique long le rend penible a lire. Les
   titres, eux, sont centres.
   ========================================================================== */
.page-id-101 .page-banner .container,
.page-id-101 .page-banner h1{ text-align: center; }
.page-id-101 .page-banner h1{ margin-left: auto; margin-right: auto; }
.page-id-101 .privacy-policy .container{ text-align: center; }
.page-id-101 .privacy-policy .rich-text{ margin-left: auto; margin-right: auto; text-align: left; }
.page-id-101 .privacy-policy .rich-text h2,
.page-id-101 .privacy-policy .rich-text h3{ text-align: center; }

/* ==========================================================================
   DROIT DE LA CONSTRUCTION — hauteurs relevees sur « droit construction.png »
   (maquette de 1600px de large, mesuree sur une colonne sans texte) :
   banniere 632 · section de texte 515 · bande doree 522 · section photo 608 ·
   bloc contact 633 · pied 303.
   Tout est attache au numero de la page : aucune autre page ne peut bouger.
   ========================================================================== */
@media (min-width: 768px){
	/* 72px et non 194 : la maquette donne 522px de haut, mais elle a un titre de
	   51px sur deux lignes. Avec le titre a 32px choisi par le client, le texte
	   ne fait plus que 80px : a 194px de marge la bande etait vide a 84%. */
	:is(.page-id-96, .page-id-48) .cta-banner{ padding: 72px 0; }
	/* la section photo faisait 541px pour 608 */
	:is(.page-id-96, .page-id-48) .split-section{ padding: 34px 0; }
	/* le bloc contact faisait 597px pour 633 */
	:is(.page-id-96, .page-id-48) .contact-block{ padding: 176px 0; }
	/* pas de taille de titre specifique ici : la banniere suit l'echelle du site
	   (36/45, reference page Nouvelles), comme toutes les autres pages */
	/* Colonnes souples au lieu de 679px figes : les deux colonnes fixes
	   laissaient 17px inutilises, et comme la section est inversee (photo a
	   droite) ce reste se plaçait a GAUCHE et decalait tout le texte de 17px
	   par rapport aux autres sections. */
	:is(.page-id-96, .page-id-48) .split-section .split-block{
		/* 32% et non la moitie : sur la maquette le cadre de la photo fait 508px
		   de large pour 605 de haut (presque carre). A la moitie de la largeur il
		   faisait 892x605, un cadre paysage — or la photo source est en portrait
		   (506x811), donc le navigateur en coupait le haut et le bas. */
		grid-template-columns: minmax(0,1fr) 32%;
		/* On abandonne l'astuce « direction: rtl » (utilisee pour envoyer la photo
		   a droite) : c'est elle qui decalait la colonne de texte de 17px. On
		   place les deux colonnes explicitement, en sens de lecture normal. */
		direction: ltr;
	}
	.page-id-96 .split-section .split-block.reverse > *{ direction: ltr; }
	:is(.page-id-96, .page-id-48) .split-section .split-media{ grid-column: 2; grid-row: 1; }
	:is(.page-id-96, .page-id-48) .split-section .split-text{ grid-column: 1; grid-row: 1; }
	/* La photo fait 605px de haut sur la maquette (de y1750 a y2355) contre 540
	   ici : elle occupe donc toute la hauteur de sa section. object-fit: cover
	   recadre sans deformer. */
	/* La photo touche le bord droit de la fenetre sur la maquette (elle est
	   presente jusqu'a x1570 sur une image de 1600). On la fait deborder de la
	   marge du conteneur : l'ecart entre le bord droit du contenu et celui de la
	   fenetre vaut 50vw - 747px. min(0px, ...) evite qu'elle rentre vers
	   l'interieur sur les ecrans etroits. */
	:is(.page-id-96, .page-id-48) .split-section .split-media{
		align-self: stretch;
		height: 100%;
		margin-right: min(0px, calc(747px - 50vw));
	}
	:is(.page-id-96, .page-id-48) .split-section .split-media img{
		width: 100%;
		height: 100%;
		min-height: 605px;
		object-fit: cover;
		object-position: center;
		max-height: none;
		aspect-ratio: auto;
	}
}
/* Telephone : memes proportions, ramenees a l'echelle de l'ecran (~40%). */
@media (max-width: 767px){
	:is(.page-id-96, .page-id-48) .cta-banner{ padding: 78px 0; }
	:is(.page-id-96, .page-id-48) .split-section{ padding: 18px 0; }
	:is(.page-id-96, .page-id-48) .contact-block{ padding: 70px 0; }
}

/* La justification est juste sur les longues lignes du bureau, mais sur une
   colonne de telephone elle creuse de gros blancs entre les mots. On revient
   au fer a gauche sous 768px. */
@media (max-width: 767px){
	.split-section .split-text p,
	.section-intro-text .split-text p,
	.split-block.no-media .split-text p{ text-align: left; }
}
/* ==========================================================================
   BANNIERES : echelle du Figma, choisie par le client.
   Relevee sur « a propos.png » (1600px de large) : titre en capitales de 41px
   de hauteur de capitale, soit ~58px de corps, sur 541px de large ; bouton de
   76px de haut avec un texte de 28px. Le reste du site garde l'echelle sobre
   de la page Nouvelles (titres 24, textes 16).
   ========================================================================== */
/* 48px : le Figma donne 58, le client a demande deux reductions successives
   (64 -> 56 -> 48). Le bouton et le paragraphe suivent la meme proportion que
   dans la maquette (titre / bouton ~ 2). */
.page-banner h1{ color:#fff; text-transform:uppercase; font-size: clamp(26px, 3vw, 48px); line-height: 1.08; letter-spacing: .02em; white-space: normal; text-wrap: balance; }
.page-banner p{ font-size: clamp(16px, 1.38vw, 22px); line-height: 1.4; }
.page-banner .btn,
.hero .btn{
	padding: 18px 24px;
	font-size: clamp(17px, 1.5vw, 24px);
	line-height: 1.15;
	gap: 40px;
}
/* La page Contact n'a pas de banniere : son titre vit dans une section sombre et
   sortait a 32px. Meme taille que les titres de banniere des autres pages. */
#main-content > .section-dark h1{ font-size: clamp(22px, 3.1vw, 36px); line-height: 1.25; }

/* Page Droit des affaires : bannière (section 1) calquée sur la maquette
   scripts/ralph/maquettes/droit-des-affaires.png §1 — texte aligné à gauche,
   voile plus dense (~.74) et hauteur égale à la photo (627px de haut). */
/* Page Droit des affaires : seuls la photo et la densite du voile restent
   propres a cette page. Tout le reste du heros (largeur du conteneur, marges,
   taille du bouton) suivait des reglages sur mesure de la nuit derniere :
   bouton de 28px dans une boite de 722x76 contre 20px et 514x62 ailleurs,
   texte cale sur le rail a x113 au lieu de x199 comme les autres pages. Le
   client a juge le resultat trop gros et mal centre. Ces surcharges sont
   retirees : le heros d'affaires est desormais identique aux autres. */
/* Bannière affaires : la photo vient du champ ACF (Rectangle1.png) ; voile sombre bleuté comme la reference du client. */
.page-id-44 .page-banner::before{ background: rgba(14,16,24,.72); }

.page-banner + .privacy-policy{
	padding-top: 86px;
}

.privacy-policy{
	background: var(--color-dark);
	color: var(--color-text-invert);
	padding: 72px 0 86px;
}

.privacy-frame{
	max-width: 1020px;
	margin: 0 auto;
	padding: 44px 48px;
	border: 1px solid var(--color-gold-light);
	background: rgba(38, 38, 36, .92);
}

.privacy-section{
	padding: 30px 0;
	border-top: 1px solid rgba(194, 176, 136, .34);
}

.privacy-section:first-child{
	padding-top: 0;
	border-top: 0;
}

.privacy-section:last-child{
	padding-bottom: 0;
}

.privacy-section--featured{
	padding-top: 0;
}

.privacy-section h2{
	color: var(--color-white);
	/* echelle du site : 24/30 (etait 34) */
	font-size: 24px;
	line-height: 1.25;
	margin-bottom: 18px;
}

.privacy-section .rich-text{
	color: var(--color-text-invert);
}

.privacy-section .rich-text p,
.privacy-section .rich-text li{
	/* echelle du site : 16/26 (etait 17) */
	font-size: 16px;
	line-height: 1.6;
}

.privacy-section .rich-text ul{
	margin: 12px 0 18px;
	padding-left: 22px;
	list-style: disc;
}

.privacy-section .rich-text li::marker{
	color: var(--color-gold-light);
}

.privacy-section .rich-text strong{
	color: var(--color-gold-light);
}

.privacy-section .rich-text a{
	color: var(--color-gold-light);
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
}

.privacy-section .rich-text a:hover,
.privacy-section .rich-text a:focus-visible{
	color: var(--color-white);
}

@media (max-width:767px){
	.page-banner + .privacy-policy{ padding-top: 48px; }
	.privacy-policy{ padding: 48px 0 58px; }
	.privacy-frame{ padding: 30px 22px; }
	.privacy-section{ padding: 22px 0; }
	.privacy-section--featured{ padding-top: 0; }
	.privacy-section .rich-text p,
	.privacy-section .rich-text li{ font-size: 16px; }
}

/* ==========================================================================
   Sections génériques (blocs Flexible Content)
   ========================================================================== */
.section{ padding: 72px 0; }
.section-dark{ background: var(--color-dark); color: var(--color-text-invert); }
.hero + .section-dark{ padding-top: 44px; padding-bottom: 44px; border-left: 1px solid rgba(255,255,255,.55); }
.hero + .section-dark .container{ max-width: 1320px; }
.hero + .section-dark .split-block{ grid-template-columns: minmax(360px, 440px) minmax(460px, 1fr); gap: 78px; align-items:center; }
.hero + .section-dark .split-media{ width:100%; margin-left: 0; }
.hero + .section-dark .split-text{ width:auto; min-height:0; }
/* Echelle du site : titre 24/30, paragraphe 16/26 (etaient a 36 et 24). */
.hero + .section-dark .split-text h2{ font-size: 24px; line-height:1.25; }
.hero + .section-dark .split-text p{ font-size: 16px; line-height:1.6; }
.hero + .section-dark .btn{ width: fit-content; max-width: 100%; padding: 14px 22px; gap: 28px; font-size: 20px; font-weight: 700; letter-spacing: 0; }
.section-dark + .section-dark{ padding-top: 0; }
.section-dark h2, .section-dark h3{ color:#fff; }
.section-gray{ background: var(--color-gray-light); }

#main-content > .hero,
#main-content > .page-banner,
#main-content > .section,
#main-content > .logo-marquee,
#main-content > .force-block,
#main-content > .contact-block,
#main-content > .map-embed,
#main-content > .construction-hero,
#main-content > .construction-intro,
#main-content > .construction-quote,
#main-content > .construction-split,
#main-content > .construction-contact{
	border-left: 1px solid rgba(28,28,28,.22);
}

#main-content > * + *{
	border-top: 1px solid rgba(28,28,28,.22);
}

#main-content > .hero,
#main-content > .page-banner,
#main-content > .section-dark,
#main-content > .section-gold,
#main-content > .logo-marquee,
#main-content > .force-block,
#main-content > .contact-block,
#main-content > .construction-hero,
#main-content > .construction-quote,
#main-content > .construction-contact{
	border-left-color: rgba(255,255,255,.34);
}

#main-content > .hero + *,
#main-content > .page-banner + *,
#main-content > .section-dark + *,
#main-content > .section-gold + *,
#main-content > .logo-marquee + *,
#main-content > .force-block + *,
#main-content > .contact-block + *,
#main-content > .construction-hero + *,
#main-content > .construction-quote + *,
#main-content > .construction-contact + *{
	border-top-color: rgba(255,255,255,.34);
}
/*.section-gold{ background: var(--color-gold) url('assets/img/Vector.png') no-repeat center / cover; color:#fff; text-align:center; text-transform:uppercase; }*/
.section-gold{
	position: relative;
	overflow: hidden;
	background: var(--color-gold) url('assets/img/BTK-Avocats-banniere3.jpg') center / cover no-repeat;
	color: var(--color-white);
	text-align: left;
	text-transform: none;
}

.section-gold h2{
	color: var(--color-white);
}
.section-gold h2{ color:#fff; }

.eyebrow{ letter-spacing:.12em; text-transform:uppercase; font-size:13px; color: var(--color-gold); font-weight:600; }

/* Bloc: intro avocate (image + texte) */
.split-block{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 48px; align-items:stretch; }
.split-block.reverse{ direction: rtl; }
.split-block.reverse > *{ direction: ltr; }
/* 1270px et non 760 : sur les maquettes, les sections sans photo occupent toute
   la largeur du contenu (paragraphe de « droit construction » mesure de x271 a
   x1538 sur 1600). A 760px le titre tombait sur 3 lignes au lieu de 2. */
.split-block.no-media{ display:block; max-width:1270px; }

.split-media img:only-child{ width:100%; height:100%; object-fit:cover; }

/* Section avec image (ex. page Droit des affaires) : la zone blanche épouse
   la hauteur de l'image, et le bloc de texte a une dimension fixe. */
.split-section{ padding-top:0; padding-bottom:0; }
.split-section .split-text{ width:662px; min-height:545px; align-self:center; display:flex; flex-direction:column; justify-content:center; }
/* ==========================================================================
   ECHELLE TYPOGRAPHIQUE DU SITE — reference : la page Nouvelles.
   Relevee sur http://localhost/btk/nouvelles/, validee par le client comme
   l'echelle a appliquer partout :
     titre de banniere 36 / 45  ·  titre de section 24 / 30 (1.25)
     paragraphe 16 / 26 (1.60)  ·  texte d'article 18 / 26  ·  bouton 20 / 32
   Note : les maquettes Figma donnent 40 et 26 (mesure a la loupe des hauteurs
   de capitale). Le client a vu les deux rendus et prefere cette echelle-ci,
   plus sobre. Sa decision prime sur la mesure.
   ========================================================================== */
.split-section .split-text h2{ font-size: 24px; line-height:1.25; }
.split-section .split-text p{ font-size: 16px; line-height:1.6; }
/* Memes valeurs pour les sections SANS photo (autre gabarit : .no-media),
   sinon une page a du petit texte en haut et du gros en bas. */
.section-intro-text .split-text h2,
.split-block.no-media .split-text h2{ font-size: 24px; line-height:1.25; }
.section-intro-text .split-text p,
.split-block.no-media .split-text p{ font-size: 16px; line-height:1.6; }
/* Mesure de lecture de ces sections, relevee sur « a propos.png » : le
   paragraphe court sur ~1170px et le titre sur ~1020px, ce qui le fait tomber
   sur deux lignes. Sans ces limites la colonne prenait toute la largeur (1650px
   sur un grand ecran) : le titre s'etalait sur une seule ligne et ne se
   detachait plus du paragraphe. */
/* Une seule colonne de 900px pour le titre ET le texte : le titre tombe sur
   deux lignes, le paragraphe suit la meme mesure, et l'ensemble se lit comme
   un bloc centre. Avant : colonne de 1170 pour le texte et 900 pour le titre,
   donc deux largeurs differentes dans le meme bloc. */
.section-intro-text .split-text,
.split-block.no-media .split-text{ max-width: 900px; }
.section-intro-text .split-text h2,
.split-block.no-media .split-text h2{ max-width: 900px; margin-bottom: 28px; }
/* ==========================================================================
   TRAITEMENT DU TEXTE, PARTOUT SUR LE SITE — demande du client.
   Le bloc de texte du haut de « a propos » a servi de reference validee :
   texte centre, titre detache du paragraphe, de l'air autour de la colonne.
   On applique le meme traitement a toutes les sections de contenu, y compris
   celles qui ont une photo a cote (le texte y etait au fer a gauche et colle
   contre la photo et le bord).
   Note : les maquettes mettent ces textes au fer a gauche ; le client prefere
   le centrage, sa decision prime.
   ========================================================================== */
.split-section .split-text{ text-align: center; }
.split-section .split-text h2{ text-align: center; margin-bottom: 28px; }
.split-section .split-text p{ text-align: center; }
@media (min-width: 992px){
	/* de l'air : gouttiere plus large entre photo et texte, et une marge
	   interieure de chaque cote pour que le texte ne touche jamais un bord */
	.split-section .split-block{ column-gap: 72px; }
	.split-section .split-text{ padding-inline: 40px; }
}
/* La section « expertises » de l'accueil a ses propres regles et restait au fer
   a gauche : meme traitement centre que le reste. */
.services-section .split-text,
.services-section .services-title,
.services-section .services-intro,
.services-section .services-footer-text{ text-align: center; }
.services-section .services-title,
.services-section .services-intro,
.services-section .services-footer-text{ margin-left: auto; margin-right: auto; }

/* Variante "bleed" : image collée au bord de la fenêtre sur la page À propos
   (Me Zineb Kouidri) ; la hauteur reste égale à celle de la section (pas de
   débordement vertical) pour que le placeholder de la statue épouse la
   section blanche qui le contient. */
@media (min-width: 992px){
	:is(.page-id-6, .page-id-103, .page-id-44, .page-id-104) .section:not(.section-dark) .split-block:not(.reverse) .split-media{
		margin-left: min(-42px, calc(626px - 50vw));
	}
	:is(.page-id-6, .page-id-103, .page-id-44, .page-id-104) #main-content > .section-dark.split-section{
		overflow: visible;
		padding-top: 96px;
		padding-bottom: 96px;
	}
	:is(.page-id-6, .page-id-103, .page-id-44, .page-id-104) #main-content > .section-dark.split-section .split-block{
		align-items: center;
	}
	:is(.page-id-6, .page-id-103, .page-id-44, .page-id-104) #main-content > .section-dark.split-section .split-media{
		width: 82%;
		margin-top: -126px;
		margin-bottom: 28px;
		overflow: visible;
	}
	:is(.page-id-6, .page-id-103, .page-id-44, .page-id-104) #main-content > .section-dark.split-section .split-media::before{
		top: -18px;
		right: -22px;
		width: 100%;
		height: calc(100% - 4px);
		background: linear-gradient(90deg, #7f6b3f 0%, #c8b887 36%, #7f6b3f 68%, #7f6b3f 100%);
	}
	/* Page Droit immobilier : photo (tour) collée au bord droit, pleine hauteur de section */
	.page-id-9 .section:not(.section-dark) .split-block.reverse .split-media{
		margin-top: -72px;
		margin-right: min(-42px, calc(626px - 50vw));
		height: calc(100% + 144px);
	}
}

.section-dark .split-media{ position:relative; align-self:start; margin-top:auto; width:75%; margin-left:auto; }
.section-dark .split-media::before{
	content:''; position:absolute; top:0; right:0; width:100%; height:100%; z-index:0;
	background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold-dark));
}
.section-dark .split-media img{ position:relative; z-index:1; height:auto; object-fit:initial; }

/*
/* Bloc: grille de services (accueil) */
/*
.services-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 20px 40px; margin: 32px 0; }
.service-item{ display:flex; align-items:center; gap:14px; padding-bottom:14px; border-bottom:1px solid #ddd; }
.service-item .icon{ width:40px; height:40px; flex:0 0 40px; }*/




/* ==========================================================================
   Section expertises — accueil
   ========================================================================== */

.services-section{
	padding: 72px 0 68px;
	background: var(--color-white);
}

.services-section .container{
	max-width: 1380px;
}

/* Structure générale */
.services-section .split-block{
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 78px;
	align-items: start;
}

/* Colonne texte */
.services-section .split-text{
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 732px;
}

/* Titre */
.services-section .services-title{
	max-width: 900px;
	margin: 0 0 20px;

	font-family: var(--font-heading);
	/* Echelle du site (reference : page Nouvelles) — etait a 52px. */
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.02em;

	text-transform: uppercase;
	color: var(--color-dark);

	word-break: normal;
	overflow-wrap: normal;
}

/* Texte d’introduction */
.services-section .services-intro{
	max-width: 900px;
	margin: 0 0 30px;

	font-family: var(--font-body);
	/* echelle du site (reference page Nouvelles) — etait a 26px */
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;

	color: #484848;
}

/* Grille des expertises */
.services-section .services-grid{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 44px;
	row-gap: 0;

	max-width: 900px;
	margin: 0 0 32px;
}

/* Expertise */
.services-section .service-item{
	display: flex;
	align-items: center;
	gap: 16px;

	min-height: 74px;
	padding: 12px 0 18px;

	border-bottom: 2px solid var(--color-gold-dark);

	font-family: var(--font-body);
	font-size: 21px;
	font-weight: 400;
	line-height: 1.25;

	color: #3e3e3e;
	text-decoration: none;

	transition:
		color .2s ease,
		padding-left .2s ease;
}

.services-section a.service-item{
	cursor: pointer;
}

.services-section a.service-item:hover,
.services-section a.service-item:focus-visible{
	padding-left: 5px;
	color: var(--color-gold-dark);
}

.services-section a.service-item:focus-visible{
	outline: 2px solid var(--color-gold);
	outline-offset: 4px;
}

.services-section .service-item span{
	font-family: var(--font-body);
	font-size: 21px;
	font-weight: 400;
	line-height: 1.25;
	text-transform: none;
}

/* Icônes */
.services-section .service-item .icon{
	width: 52px;
	height: 52px;
	flex: 0 0 52px;

	object-fit: contain;
	filter: grayscale(100%);
}

/* Texte avant le CTA */
.services-section .services-footer-text{
	max-width: 900px;
	margin: 30px 0 24px;

	font-family: var(--font-body);
	/* meme corps que le texte d'intro juste au-dessus */
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;

	color: #454545;
}

/* CTA */
.services-section .services-cta{
	margin-top: auto;
}

.services-section .services-cta .btn{
	display: inline-flex;
	align-items: center;
	justify-content: space-between;

	width: 100%;
	max-width: 620px;
	min-width: 0;
	min-height: 54px;

	padding: 12px 22px;

	border: 1px solid #bcbcbc;
	background: transparent;
	color: var(--color-dark);

	font-family: var(--font-heading);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;

	text-transform: uppercase;

	transition:
		background .2s ease,
		color .2s ease,
		border-color .2s ease;
}

.services-section .services-cta .btn:hover,
.services-section .services-cta .btn:focus-visible{
	background: var(--color-dark);
	border-color: var(--color-dark);
	color: var(--color-white);
}

/* Colonne images */
.services-section .services-media{
	display: flex;
	flex-direction: column;
	align-items: flex-start;

	width: 360px;
	gap: 72px;
	padding-top: 2px;
	transform: translateX(-18px);
}

/* Images alignées et de grande taille */
.services-section .services-image{
	position: relative;

	width: 330px;
	height: 330px;
	margin: 0;

	z-index: 1;
}

.services-section .services-cta .btn span{
	font-size: 28px;
	line-height: 1;
}

.services-section .services-image--top,
.services-section .services-image--bottom{
	margin: 0;
}

.services-section .services-image--top{
	order: 2;
}

.services-section .services-image--bottom{
	order: 1;
}

.services-section .services-image img{
	display: block;

	width: 330px;
	height: 330px;
	margin: 0;

	object-fit: cover;
	object-position: center;

	filter: grayscale(100%);
}

/* Coins noirs */
.services-section .services-image::before{
	content: "";
	position: absolute;

	width: 112px;
	height: 14px;

	background: var(--color-dark);
	z-index: -1;
}

.services-section .services-image::after{
	content: "";
	position: absolute;

	width: 14px;
	height: 124px;

	background: var(--color-dark);
	z-index: -1;
}

.services-section .services-image--top::before{
	top: -12px;
	right: -12px;
	left: auto;
}

.services-section .services-image--top::after{
	top: -12px;
	right: -12px;
	left: auto;
}

.services-section .services-image--bottom::before{
	top: -12px;
	left: -14px;
	right: auto;
}

.services-section .services-image--bottom::after{
	top: -12px;
	left: -14px;
	right: auto;
}

/* Neutralise toute marge générique */
.services-section .split-media img + img{
	margin-top: 0;
}




/* Bandeau logo répété */
.logo-marquee{ background: linear-gradient(90deg, var(--color-gold-dark) 0%, var(--color-gold-light) 38%, var(--color-gold-dark) 100%); padding: 0; overflow:hidden; display:flex; flex-direction:column; gap:0; }
.logo-marquee .row{ display:flex; gap:40px; white-space:nowrap; min-width:max-content; }
.logo-marquee .row:nth-child(even){ transform: translateX(54px); }
.logo-marquee .mark{ flex: 0 0 auto; width:48px; height:41px; background-color: rgba(28,22,12,.86); -webkit-mask: url('assets/img/logo-mark.png') no-repeat center / contain; mask: url('assets/img/logo-mark.png') no-repeat center / contain; filter: drop-shadow(1px 0 0 rgba(28,22,12,.42)) drop-shadow(-1px 0 0 rgba(28,22,12,.42)); }

/* Bloc "Notre force" (stats/points forts) */
.force-block{ display:grid; grid-template-columns: minmax(380px, 470px) 1.4fr; margin-bottom:12px; }
.force-block .force-media{ position:relative; grid-column:1; grid-row:1; background-color: var(--color-gray-light); background-size:cover; background-repeat:no-repeat; background-position:left top; min-height:600px; }
.force-block .force-media::after,
.force-title::after{
	content:'';
	position:absolute;
	top:0;
	right:42px;
	bottom:0;
	width:2px;
	background:#b8b8b2;
}
.force-block .force-media.dark-cols{ background:var(--color-dark); }
.force-content{ grid-column:2; grid-row:1; background: var(--color-gray-light); }
.force-content .section{ padding: 40px 0; }
/* echelle du site : 24/30 (etait 28) */
.force-content h2{ font-size: 24px; line-height:1.25; }
.force-content .rich-text,
.force-content .section .container > div{
	max-width: 760px;
}
.force-content .rich-text p,
.force-content .section .container > div p{
	/* echelle du site : 16/26 (etait 20) */
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-text);
}
.force-title{
	position:relative;
	grid-column:1; grid-row:2;
	padding: 24px var(--gutter);
	font-family: var(--font-heading); font-size:28px; font-weight:700;
	text-transform:uppercase; letter-spacing:.04em; color: var(--color-dark);
}
.force-list{ grid-column:2; grid-row:2; padding: 24px var(--gutter) 34px 0; display:flex; flex-direction:column; }
.force-item{ display:flex; align-items:stretch; gap:0; margin-left:-42px; border-bottom:2px solid #b8b8b2; padding: 16px 0 16px 42px; }
.force-item:first-child{ border-top:0; }
.force-item:last-child{ border-bottom:0; }
.force-item-bar{
	position: relative;
	flex: 0 0 5px;
	overflow: hidden;
	border-radius: 3px;
	background:
		linear-gradient(180deg, var(--color-gold-dark) 0%, var(--color-gold-light) 46%, #f1dfaf 52%, var(--color-gold) 100%);
	box-shadow: 0 0 12px rgba(194, 176, 136, .34);
}
.force-item-bar::after{
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,.72) 48%, transparent 72%);
	opacity: .58;
}
.force-item-card{ flex:1 1 auto; background:var(--color-gray-light); border-radius:0 6px 6px 0; padding:20px 26px; }
/* Pas de capitales : la maquette ecrit « Experience dans le domaine » en casse
   normale (seule l'initiale), contrairement aux autres titres du site. */
.force-item-card h3{ margin:0 0 8px; font-size:20px; line-height:1.2; text-transform:none; letter-spacing:.02em; }
.force-item-card p{ margin:0; font-size:16px; line-height:1.6; color:#333; }

/* Carrousel de cartes (sous-services) : bandeau sombre qui débute à
   mi-hauteur des cartes, celles-ci "chevauchant" la ligne blanc/noir. */
   
.carousel-section{ padding-bottom:0; }
/* Page Droit immobilier : resserre l'espace entre le paragraphe d'intro
   et la ligne "BTK Avocats couvre aussi..." (~1/3 de l'espacement standard). */
.page-id-9 .section-intro-text{ padding-bottom:24px; }
.page-id-9 .carousel-section{ padding-top:24px; }
.carousel-shelf{ position:relative; margin-top:24px; }
.carousel-shelf::before{
	content:''; position:absolute; top:85px; bottom:0; left:0; right:0;
	background: var(--color-dark); z-index:0;
}
.carousel-shelf .container{ position:relative; z-index:1; padding-top:32px; padding-bottom:56px; }
/* Section carrousel : chevauche la section suivante (barre or) de moitié */
.section-carousel{ position:relative; z-index:2; padding-bottom:56px; }
/* Titre + intro alignes A GAUCHE, au fer avec les cartes en dessous.
   (Corrige un centrage introduit par erreur : les trois maquettes — accueil,
   droit des affaires, droit immobilier — mettent ces blocs au fer a gauche.
   Seuls le bandeau or des pages interieures et le bloc CONTACT sont centres.) */
.section-carousel > .container > h2,
.section-carousel > .container > .rich-text,
.section-carousel > .container > p{
	max-width: 960px;
	margin-left: 0;
	margin-right: auto;
	text-align: left;
}
/* Meme echelle que le reste du site (reference : page Nouvelles). */
.section-carousel > .container > h2{
	font-size: 24px;
	line-height: 1.25;
}
.section-carousel > .container > .rich-text p,
.section-carousel > .container > p{
	font-size: 16px;
	line-height: 1.6;
}
/* Sections d'intro sans image : bloc CENTRE, texte centre.
   J'avais mis ces blocs au fer a gauche en me fiant aux maquettes ; le client
   les veut centres — c'etait d'ailleurs leur etat avant. Le bloc est centre
   dans la colonne (donc autant de blanc a gauche qu'a droite) et le texte est
   centre a l'interieur. */
.section-intro-text .split-text,
.split-block.no-media{
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.section-intro-text .split-text > *,
.split-block.no-media .split-text > *{
	margin-left: auto;
	margin-right: auto;
}
.card-carousel{ position:relative; margin:24px 0 0; overflow:hidden; }
.card-carousel .track{ display:flex; gap:20px; transition: transform .4s ease; }
.card-carousel .card{
	flex:0 0 calc((100% - 40px) / 3); height:120px; background: var(--color-dark); color:#fff;
	border:1px solid #55524a;
	padding:0 20px;
	display:flex; align-items:center; justify-content:center; text-align:center;
	font-family: var(--font-heading); font-weight:700; font-size:15px; text-transform:uppercase; letter-spacing:.02em;
}
/* Rangée statique : les boîtes se partagent la largeur (3 par ligne, comme la maquette). */
.card-carousel--static{ overflow:visible; transform:none; }
.card-carousel--static .track{ transform:none !important; transition:none; }
.card-carousel--static .card{ flex:1 1 0; min-width:0; }
/* La rangée statique n'a pas à chevaucher la section suivante : espace normal. */
.section-carousel:has(.card-carousel--static){ padding-bottom:72px; }
@media (max-width:767px){
	.card-carousel--static .track{ flex-direction:column; }
	.card-carousel--static .card{ flex:1 1 auto; width:100%; }
}
.carousel-footer-text{ color:#fff; margin:24px 0 0; }
.nav-btn{
	width:36px; height:36px; border-radius:50%; border:1px solid currentColor;
	background:none; color:inherit; font-size:11px; line-height:1;
	display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
	transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.nav-btn .icon-svg{ width:16px; height:16px; }
.nav-btn:hover{ background: var(--color-gold); border-color: var(--color-gold); color:#fff; }
.nav-controls{ display:flex; align-items:center; gap:10px; justify-content:flex-end; margin-bottom:4px; }
.nav-controls-text p{ margin:0; }
.nav-controls-text h2{ margin:0 0 4px; }
.nav-controls-arrows{ display:flex; gap:10px; flex:0 0 auto; }

/* ==========================================================================
   Droit des affaires (page-id-44) — section 3 : boîtes « litiges commerciaux »
   Valeurs mesurées au pixel sur scripts/ralph/maquettes/droit-des-affaires.png
   (1:1 avec le px CSS dans la colonne de contenu) :
   - boîte 408x204, gouttière 13px, bordure 2px rgba(255,255,255,.5)
     (la maquette lit 141,141,141 sur fond #1c1c1c = 50 % de blanc) ;
   - libellé PT Serif 700, 27px/34px, centré (largeur mesurée 304px pour
     « LE BAIL COMMERCIAL ») ;
   - rangée à 84px sous le bloc texte et CENTRÉE sur la frontière
     section sombre / bandeau or : elle déborde de 102px (204/2) sur l'or.
   Desktop uniquement : sous 992px les media queries existantes gardent
   le comportement actuel (2 cartes puis 1).
   ========================================================================== */
@media (min-width: 992px){
	:is(.page-id-44, .page-id-104) .section-carousel{ padding-bottom: 0; }

	/* flow-root : sans BFC la marge négative ci-dessous « traverserait » le
	   conteneur et tirerait le bandeau or vers le haut au lieu de raccourcir
	   la section sombre — les boîtes ne déborderaient alors sur rien. */
	:is(.page-id-44, .page-id-104) .section-carousel > .container{ display: flow-root; }

	/* 34px et non 84px : la rangee de fleches occupe 36px entre le texte et les
	   tuiles, et le texte est passe de 16px a 26px. Mesure sur la maquette :
	   96px entre le bas du dernier paragraphe et le haut des tuiles. Le -102px
	   du bas (le debord de moitie sur le bandeau or) reste inchange. */
	:is(.page-id-44, .page-id-104) .section-carousel .card-carousel{ margin: 34px 0 -102px; }

	:is(.page-id-44, .page-id-104) .card-carousel .track{ gap: 13px; }

	:is(.page-id-44, .page-id-104) .card-carousel .card{
		flex: 0 0 408px;
		height: 204px;
		border: 2px solid rgba(255,255,255,.5);
		font-size: 27px;
		line-height: 34px;
		letter-spacing: .02em;
	}

	/* Le bandeau or passe SOUS la rangée : on dégage le débord (102px) plus
	   les 138px de la maquette entre le bas des boîtes et le texte or. */
	/* 162px et non 240 : les tuiles debordent de 102px dans la bande, il faut donc
	   au moins 102px de marge, plus un ecart sous les tuiles. A 240 (valeur calee
	   sur la maquette, qui a un titre de 51px) la bande etait vide a 80% avec le
	   titre a 32px. 162 = 102 de debord + 60 d'ecart. */
	:is(.page-id-44, .page-id-104) .cta-banner{ padding-top: 162px; }
}

/* Bloc CTA plein */
/* ==========================================================================
   CTA — Contactez-nous pour en savoir plus
   ========================================================================== */

.cta-banner{
	position: relative;
	padding: 54px 0 52px;
	text-align: center;
}

.cta-banner .container{
	position: relative;
	z-index: 1;
	/* 1340px et non 960 : a 51px, la 1re ligne du titre des pages interieures
	   s'etend jusqu'a x1290 sur la maquette (sur 1600). A 960 elle cassait en
	   4 lignes au lieu de 2. */
	max-width: 1340px;
	margin: 0 auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
	text-align: center;
}

/* Contenu centré comme dans la maquette. 1290px et non 720 : c'est ce bloc qui
   limitait le titre et le cassait en 4 lignes. Le paragraphe garde sa propre
   largeur de lecture (max-width plus bas). */
.cta-banner .cta-content{
	max-width: 1290px;
	margin: 0 auto;
}

/* Accueil uniquement : le bandeau or est au FER A GAUCHE dans la maquette
   (titre, paragraphe et bouton alignes sur le bord gauche du contenu). Les
   pages interieures — droit des affaires, droit immobilier — le gardent
   centre, conformement a leurs propres maquettes. */
.home .cta-banner,
.home .cta-banner .container,
.home .cta-banner h2,
.home .cta-banner p{
	text-align: left;
}
.home .cta-banner .container{
	max-width: var(--container-max);
	margin-left: 0;
	padding-left: calc(var(--rail-width) + var(--page-gutter) + 22px);
}
.home .cta-banner .cta-content,
.home .cta-banner h2,
.home .cta-banner p{
	margin-left: 0;
	margin-right: 0;
}
/* Meme corps que les autres bandeaux or (echelle du site). */
.home .cta-banner h2{
	max-width: 820px;
}
@media (max-width: 767px){
	/* le rail devient une barre du haut : plus de reserve a gauche */
	.home .cta-banner .container{ padding-left: var(--gutter); }
}

/* Titre — releve sur les maquettes (toutes en 1600px de large) : capitale 35px
   et pas de ligne 58px sur droit immeuble, 37px/58px sur droit affaires, soit
   ~50-53px de corps. Le site etait a 32px, et la boite de 640px cassait le
   titre en 3 lignes au lieu de 2. L'accueil, lui, est plus petit (40/48) :
   voir la regle .page-id-92 plus haut. */
.cta-banner h2{
	/* 860px : a 32px de corps, cette mesure donne DEUX lignes sur les quatre
	   bandeaux du site, comme les maquettes. A 1290px ils tenaient sur une seule
	   ligne, a 700px les deux textes les plus longs (droit des affaires et droit
	   de la construction) tombaient sur trois. */
	max-width: 860px;
	margin: 0 auto 18px;
	font-family: var(--font-heading);
	/* 32px : echelle du site (reference page Nouvelles). Les maquettes donnent
	   ~51px, mais le client prefere l'echelle sobre — sa decision prime. */
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.015em;
	text-align: center;
	text-transform: uppercase;
	color: var(--color-white);
}

/* Paragraphe */
.cta-banner p{
	max-width: 560px;
	margin: 0 auto 22px;
	font-family: var(--font-body);
	/* echelle du site : 16/26 (etait 20) */
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	text-align: center;
	text-transform: none;
	color: var(--color-white);
}

/* Bouton */
.cta-banner .btn{
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-width: 310px;
	min-height: 46px;
	padding: 11px 16px;
	border: 1px solid rgba(255, 255, 255, .9);
	background: transparent;
	color: var(--color-white);
	font-family: var(--font-heading);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	text-align: left;
	text-transform: uppercase;
	transition:
		background .2s ease,
		color .2s ease,
		border-color .2s ease;
}

.cta-banner .btn:hover,
.cta-banner .btn:focus-visible{
	background: var(--color-white);
	border-color: var(--color-white);
	color: var(--color-dark);
}

.cta-banner .btn:focus-visible{
	outline: 2px solid var(--color-white);
	outline-offset: 4px;
}
/* Bloc contact (coordonnées) */
/* padding 158px et non 72 : le bloc mesurait 425px de haut pour 591px sur la
   maquette de droit immeuble et 633px sur celles de droit affaires et droit
   construction. Meme ecart sur les 4 pages qui portent ce bloc. */
.contact-block{ position:relative; background-color: var(--color-dark); background-size:cover; background-position:center; color:#fff; padding: 158px 0; }
.contact-block::before{ content:''; position:absolute; inset:0; background: rgba(20,20,20,.45); }
.contact-block .container{ position:relative; z-index:1; text-align:center; }
/* 24px : echelle du site (reference page Nouvelles). */
.contact-block h2{ font-size: 24px; line-height: 1.25; }
.contact-cards{ display:grid; grid-template-columns: repeat(2,1fr); gap:16px; max-width:760px; margin:32px auto 0; }
.contact-cards,
.contact-cards .card{ min-width:0; }
.contact-cards .card{ background: rgba(20,20,20,.85); border:1px solid rgba(255,255,255,.4); padding:18px 20px; display:flex; align-items:center; gap:12px; }
.contact-cards .card a{ min-width:0; overflow-wrap:anywhere; }

/* Équipe */
.team-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 32px; }
.team-card{ text-align:center; }
.team-card img{ aspect-ratio: 3/4; object-fit:cover; }
.team-card h2,
.team-card h3{ font-size:18px; margin: 16px 0 4px; }
.team-card .role{ color: var(--color-gold); font-size:13px; text-transform:uppercase; letter-spacing:.06em; }

/* Blog */
.blog-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 32px 40px; }
.blog-card .cat{ display:inline-block; background: var(--color-dark); color:#fff; font-size:11px; padding:6px 14px; border-radius:20px; margin-bottom:12px; text-transform:uppercase; letter-spacing:.05em; }
.blog-card h3{ font-size:18px; }
.blog-card .excerpt{ color:#555; font-size:14px; }
.blog-card .read-more{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:13px; text-transform:uppercase; }

/* Formulaire de contact */
.contact-form .field{ margin-bottom:20px; }
.contact-form label{ display:block; text-transform:uppercase; font-size:13px; letter-spacing:.06em; margin-bottom:8px; color:#fff; }
.contact-form input, .contact-form select, .contact-form textarea{
	width:100%; background:transparent; border:1px solid rgba(255,255,255,.5); color:#fff; padding:14px 16px; font-size:15px;
}
.contact-form select{ background: var(--color-dark); }
.contact-form select option{ background: var(--color-dark); color:#fff; }
.contact-form textarea{ min-height:120px; }
.contact-form ::placeholder{ color: rgba(255,255,255,.5); }
.contact-form :is(input, select, textarea):focus-visible{
	border-color:var(--color-gold-light);
	outline:2px solid var(--color-gold-light);
	outline-offset:2px;
}
.contact-form .btn{ min-height:44px; }

/* Footer */
.site-footer{ position:relative; overflow:hidden; background: var(--color-dark); color: var(--color-text-invert); padding-top: 48px; }
.site-footer::before{ content:''; position:absolute; top:0; bottom:0; left:var(--rail-width); width:1px; background:rgba(255,255,255,.34); }
.site-footer::after{ content:''; position:absolute; top:0; left:var(--rail-width); right:0; height:1px; background:rgba(255,255,255,.34); }
.site-footer .container{ position:relative; padding-left: calc(var(--rail-width) + var(--page-gutter) + 22px); }
.footer-grid{ position:relative; display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap:32px; padding-bottom:32px; }
.footer-grid::after{ content:''; position:absolute; left:calc(var(--rail-width) - ((100vw - var(--container-max)) / 2)); right:0; bottom:0; height:1px; background:rgba(255,255,255,.12); }
.footer-brand{ display:flex; align-items:flex-start; gap:20px; min-width:0; }
.footer-logo{ width:90px; max-width:100%; flex:0 0 auto; }
.footer-logo.custom-logo-link{ display:inline-flex; align-items:flex-start; }
.footer-logo img{ display:block; width:100%; max-width:100%; height:auto; object-fit:contain; }
.footer-brand p{ min-width:0; }
.footer-contact{ display:flex; flex-direction:column; gap:16px; }
.footer-contact .item{ display:flex; align-items:center; gap:12px; margin:0; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:24px; padding:14px 0; font-size:18px; color:rgba(255,255,255,.82); }
.site-footer .footer-bottom > a,
.site-footer .footer-powered{
	color: rgba(255,255,255,.82) !important;
	font-family: var(--font-body) !important;
	font-size: 18px !important;
	font-weight: 400 !important;
	line-height: 1.25 !important;
}
.footer-credits{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; text-align:right; }
.site-footer .footer-visual-credit{
	color: rgba(255,255,255,.82) !important;
	font-family: var(--font-body) !important;
	font-size: 18px !important;
	font-weight: 400 !important;
	line-height: 1.25 !important;
}

@media (max-width:1454px){
	.footer-grid::after{ left:var(--rail-width); }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 991px){
	:root{ --rail-width: 70px; }
	/* Le point focal de l'accueil suit la statue lorsque le cadrage se resserre. */
	.home .hero{ background-position:62% center; }
	.split-block, .footer-grid, .contact-cards{ grid-template-columns: 1fr; }
	.hero + .section-dark .split-block{ grid-template-columns: 1fr; gap: 36px; }
	.hero + .section-dark .split-media{ margin-left: 0; }
	.services-grid, .team-grid, .blog-grid{ grid-template-columns: 1fr 1fr; }
	.section-dark .split-media{ margin-top:0; width:100%; margin-left:0; }
	:is(.page-id-6, .page-id-103, .page-id-44, .page-id-104) #main-content > .section-dark.split-section{
		padding-top: 54px;
		padding-bottom: 54px;
	}
	:is(.page-id-6, .page-id-103, .page-id-44, .page-id-104) #main-content > .section-dark.split-section .split-media{
		margin-top: 0;
		margin-bottom: 0;
	}
	:is(.page-id-6, .page-id-103, .page-id-44, .page-id-104) #main-content > .section-dark.split-section .split-media::before{
		top: -12px;
		right: -12px;
		height: calc(100% + 12px);
	}
	.split-section .split-text{ width:100%; min-height:0; }
	/* L'accueil gardait ici sa grille desktop 1fr / 360px avec un écart de
	   78px : à 768px la colonne de texte ne faisait plus que 196px. On empile
	   le contenu, puis on garde les deux visuels dans une grille équilibrée. */
	.services-section .split-block{ grid-template-columns:minmax(0,1fr); gap:48px; }
	.services-section .split-text{ min-height:0; }
	.services-section .services-media{
		display:grid;
		grid-template-columns:repeat(2,minmax(0,1fr));
		gap:24px;
		width:100%;
		transform:none;
		align-items:start;
	}
	.services-section .services-image{
		width:min(100%,330px);
		height:auto;
		aspect-ratio:1;
		justify-self:center;
	}
	.services-section .services-image img{ width:100%; height:100%; }
	/* La composition asymétrique de Construction est conçue pour le desktop.
	   À 768px, sa colonne image de 32% tombait à 203px tout en gardant une
	   hauteur minimale de 605px. On remet la lecture texte puis image en flux. */
	:is(.page-id-96, .page-id-48) .split-section .split-block{
		grid-template-columns:minmax(0,1fr);
		gap:36px;
	}
	:is(.page-id-96, .page-id-48) .split-section .split-text{
		grid-column:1;
		grid-row:1;
	}
	:is(.page-id-96, .page-id-48) .split-section .split-media{
		grid-column:1;
		grid-row:2;
		height:auto;
		margin-right:0;
	}
	:is(.page-id-96, .page-id-48) .split-section .split-media img{
		width:100%;
		height:auto;
		min-height:0;
		aspect-ratio:16 / 9;
		object-fit:cover;
	}
	.site-topbar .container{ padding-left: calc(var(--rail-width) + var(--page-gutter) + 22px); padding-right: var(--page-gutter); }
	.site-footer .container{ padding-left: calc(var(--rail-width) + var(--page-gutter) + 22px); padding-right: var(--page-gutter); }
	.footer-grid::after{ left:var(--rail-width); }
	.footer-grid{ grid-template-columns: 1.1fr .9fr; gap: 24px 36px; align-items: start; }
	.footer-brand{
		display: grid;
		grid-column: 1 / -1;
		grid-template-columns: 90px minmax(0, 1fr);
		align-items: center;
		gap: 16px;
	}
	.footer-contact{ gap: 14px; }
	.footer-social-label{ margin-bottom: 16px; }
	.site-footer .rail-socials--row a{ width:44px; height:44px; flex-basis:44px; }
	.site-footer .rail-socials--row .icon-badge{ width:36px; height:36px; }
	.page-banner h1{ white-space: normal; font-size: clamp(22px,4vw,32px); }
	.card-carousel .card{ flex-basis: calc((100% - 16px) / 2); }
}

@media (max-width:1200px){
	/* Deux colonnes ne peuvent pas conserver une largeur fixe de 662px dans
	   l'espace restant après le rail. La colonne de texte se réduit avec sa
	   grille, sans modifier la composition desktop large. */
	.split-section .split-text{ width:100%; max-width:662px; }
}

@media (min-width:992px) and (max-width:1200px){
	/* Entre les paliers tablette et desktop, les deux minima du bloc d'accueil
	   dépassaient l'espace disponible après le rail. Deux colonnes souples
	   gardent la lecture côte à côte sans élargir la page. */
	.hero + .section-dark .split-block{
		grid-template-columns:repeat(2, minmax(0, 1fr));
		gap:36px;
	}
}

@media (max-width: 767px){
	:root{ --rail-width: 56px; --page-gutter: 24px; }

	/* Les règles du rail mobile sont regroupées à la fin de la feuille. */
	/* Grilles générales */
	.services-grid,
	.team-grid,
	.blog-grid,
	.contact-cards{
		grid-template-columns: 1fr;
	}

	.section{
		padding: 48px 0;
	}

	/* Hero */
	.hero{
		min-height: 460px;
	}
	.home .hero{ background-position:70% center; }

	.hero .container{
		margin-left: 0;
		max-width: 100%;
		padding-left: var(--page-gutter);
		padding-right: var(--page-gutter);
	}

	.home .hero .container{
		padding-top: clamp(24px, 6vw, 32px);
		padding-bottom: clamp(24px, 6vw, 32px);
	}

	/* Bannière de page */
	.site-rail + .site-nav-overlay + .site-main .page-banner{
		min-height: 220px;
	}

	.page-banner .container{
		margin-left: 0;
		max-width: 100%;
		padding-left: var(--page-gutter);
		padding-right: var(--page-gutter);
		padding-top: 18px;
		padding-bottom: 18px;
	}

	.page-banner h1{
		position: relative;
		z-index: 1;
	}

	.page-banner h1{
		white-space: normal;
		font-size: clamp(22px, 6vw, 30px);
	}

	/* Barre supérieure */
	.site-topbar .container{
		flex-wrap: nowrap;
		justify-content: space-between;
		padding-left: var(--gutter);
		padding-right: var(--gutter);
		gap: 12px;
	}

	.topbar-logo img{
		height: 40px;
		width: auto;
	}

	.topbar-contact{
		flex: 1 1 auto;
		flex-wrap: nowrap;
		gap: 10px;
		min-width: 0;
		overflow: hidden;
	}

	.topbar-contact a{
		flex: 0 1 auto;
		min-width: 0;
		font-size: 14px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.topbar-contact a[href^="tel:"]{
		flex: 0 0 auto;
		max-width: none;
	}

	.topbar-contact a[href^="mailto:"]{
		flex: 1 1 auto;
		max-width: none;
	}

	.site-topbar .icon-svg{
		width: 20px;
		height: 20px;
		flex: 0 0 20px;
	}

	.lang-switcher{
		flex: 0 0 auto;
		gap: 8px;
	}

	/* Footer mobile */
	.site-footer{
		padding-top: 34px;
	}

	.site-footer::before{
		left: var(--gutter);
	}

	.site-footer::after{
		left: var(--gutter);
	}

	.site-footer .container{
		padding-left: calc(var(--rail-width) + var(--page-gutter) + 18px);
		padding-right: var(--page-gutter);
	}

	.footer-grid{
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
		align-items: start;
	}

	.footer-grid::after{
		left: calc((var(--gutter) + 48px) * -1);
	}

	.footer-brand{
		display: grid;
		grid-template-columns: 90px minmax(0, 1fr);
		align-items: center;
		gap: 16px;
		grid-column: 1 / -1;
	}

	.footer-logo{
		width: 90px;
		max-width: 100%;
	}

	.footer-brand p,
	.footer-contact .item{
		font-size: 16px;
		line-height: 1.35;
	}

	.footer-contact{
		gap: 14px;
	}

	.footer-contact .item,
	.footer-contact .item a{
		min-width: 0;
		overflow-wrap: anywhere;
	}

	.footer-social-label{
		margin-bottom: 16px;
	}

	.footer-bottom{
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		font-size: 16px;
	}

	.site-footer .footer-bottom > a,
	.site-footer .footer-powered,
	.site-footer .footer-visual-credit{
		font-size: 16px !important;
	}

	.footer-credits{
		align-items: flex-start;
		text-align: left;
	}

	/* Bloc Notre force */
	.force-block{
		grid-template-columns: 1fr;
	}

	/* Les enfants portent des placements explicites (grid-column:2 pour
	   .force-content et .force-list) qui recréaient une deuxième colonne
	   implicite malgré le template à une seule colonne : « NOTRE FORCE » se
	   retrouvait écrasé à côté de la liste. On les remet en flux naturel,
	   dans l'ordre du DOM : image, texte, étiquette, liste. */
	.force-block .force-media,
	.force-block .force-content,
	.force-block .force-title,
	.force-block .force-list{
		grid-column: 1;
		grid-row: auto;
	}

	.force-block .force-media{
		min-height: 320px;
		background-size: cover;
		background-position: center;
	}

	.force-content h2{
		font-size: 24px;
		line-height: 1.35;
	}

	.force-content p{
		font-size: 18px;
		line-height: 1.42;
	}

	.force-title{
		padding: 24px 8px;
		font-size: 17px;
	}

	.force-list{
		padding: 24px 0 24px 16px;
		gap: 14px;
	}

	.force-item{
		margin-left: 0;
		padding: 14px 0;
	}

	/* Carrousel */
	.card-carousel .card{
		flex-basis: 82%;
	}

	/* =====================================================
	   Section expertises — version mobile
	   ===================================================== */

	.services-section{
		padding: 42px 0;
	}

	.services-section .split-block{
		display: grid;
		grid-template-columns: 1fr;
		gap: 34px;
	}

	.services-section .split-text{
		min-height: 0;
	}

	.services-section .services-title{
		max-width: 100%;
		font-size: 25px;
		line-height: 1.08;
	}

	.services-section .services-intro{
		max-width: 100%;
		font-size: 14px;
		line-height: 1.45;
	}

	.services-section .services-grid{
		grid-template-columns: 1fr;
		max-width: 100%;
		margin-bottom: 24px;
	}

	.services-section .service-item{
		min-height: 58px;
	}

	.services-section .service-item .icon{
		width: 38px;
		height: 38px;
		flex: 0 0 38px;
	}

	.services-section .services-footer-text{
		max-width: 100%;
		font-size: 14px;
	}

	.services-section .services-cta .btn{
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	.services-section .services-cta{
		margin-top: 0;
	}

	/* Conteneur des images */
	.services-section .services-media{
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 36px;
		width: 100%;
		padding-top: 10px;
		transform: none;
	}

	/* Les deux blocs ont exactement la même taille */
	.services-section .services-image{
		position: relative;
		width: min(100%, 340px);
		max-width: 340px;
		aspect-ratio: 1 / 1;
		margin: 0;
		z-index: 1;
	}

	.services-section .services-image--top,
	.services-section .services-image--bottom{
		margin: 0;
	}

	/* Images plus grandes et alignées */
	.services-section .services-image img{
		display: block;
		width: 100%;
		height: 100%;
		margin: 0;
		object-fit: cover;
		object-position: center;
		filter: grayscale(100%);
	}

	/* CTA contact — mobile */
	.cta-banner{
		padding: 28px 0 30px;
		background-position: center;
	}

	.cta-banner .container{
		margin-left: auto;
		padding-left: var(--gutter);
	}

	.cta-banner .cta-content{
		max-width: 520px;
	}

	.cta-banner h2{
		max-width: 100%;
		margin-bottom: 10px;
		font-size: 22px;
		line-height: 1.08;
	}

	.cta-banner p{
		max-width: 100%;
		margin-bottom: 14px;
		font-size: 16px;
		line-height: 1.32;
	}

	.cta-banner .btn{
		width: auto;
		min-width: 0;
		min-height: 40px;
		padding: 9px 14px;
		font-size: 17px;
	}
}


/* ==========================================================================
   Utilitaires
   ========================================================================== */
.text-center{ text-align:center; }

/* Listes à puce stylées (distinctions, points forts) */
.styled-list{ display:flex; flex-direction:column; gap:14px; list-style:none; margin:0; padding:0; }
.styled-list li{ position:relative; padding-left:24px; }
.styled-list li::before{ content:"\25B6"; position:absolute; left:0; top:calc(.2em + 3px); color:var(--color-gold); font-size:11px; line-height:1; }

/* Icônes sociales alignées en ligne (footer, bloc partage) */
.rail-socials--row{ flex-direction:row; }

/* Bloc "Partager" (article de blogue) */
.article-content{ max-width:820px; }
.share-section{ padding-top:0; }
.share-bar{ border-top:1px solid #eee; padding-top:24px; display:flex; justify-content:space-between; align-items:center; }
.share-label{ text-transform:uppercase; letter-spacing:.06em; font-size:13px; }

/* Logo texte du footer (repli si aucun logo personnalisé) */
.footer-logo-text{ font-family:var(--font-heading); font-size:26px; letter-spacing:.08em; color:var(--color-gold-light); }
.footer-social-label{ text-transform:uppercase; letter-spacing:.08em; font-size:13px; }

/* Formulaire de contact : message d'erreur + piège à robots */
.form-error{ color:#e8b4b4; }
.form-honeypot{ position:absolute; left:-9999px; }

/* Carrousel de cartes */
.card-carousel .card a{ color:inherit; }

/* Images secondaires empilées (bloc split) */
.split-media img + img{ margin-top:16px; }

/* Page formulaire de contact */
.contact-form-wrap{ max-width:760px; }

/* Bloc message plein écran */
.message-block{ min-height:40vh; display:flex; align-items:center; }

/* Grille équipe : texte d'intro */
.team-intro{ max-width:640px; margin:0 auto 40px; }

/* Carte Google Maps */
.map-embed{ line-height:0; }
.map-embed iframe{ border:0; }

/* Article de blogue — maquette Desktop 8 */
.single-article .article-hero{ min-height:750px; display:flex; align-items:center; padding:80px 0; }
.single-article .article-hero::before{ display:none; }
.single-article .article-hero .container{ width:100%; text-align:left; }
.single-article .article-hero h1{ color:#fff; text-transform:uppercase; font-size:48px; margin:0 0 52px; }
.article-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 48px; margin:0; color:#fff; }
.article-meta .meta-item{ display:inline-flex; align-items:center; gap:18px; min-width:0; font-size:23px; overflow-wrap:anywhere; }
.article-meta .icon-svg{ width:34px; height:34px; }
.single-article .article-body{ padding:72px 0 38px; }
.single-article .article-body .rich-text{ max-width:900px; margin-inline:auto; }
.single-article .article-body h2{ text-transform:uppercase; font-size:36px; margin:1.35em 0 .55em; }
.single-article .article-body h2:first-child{ margin-top:0; }
.single-article .article-body h3{ font-size:28px; margin:1.25em 0 .5em; }
.single-article .article-body h4{ font-size:23px; margin:1.2em 0 .45em; }
.single-article .article-body p{ font-size:23px; line-height:1.42; color:#333; }
.single-article .article-body .rich-text :where(a, p, li, blockquote, figcaption){ overflow-wrap:anywhere; }
.single-article .article-body .rich-text :where(ul, ol){ margin:0 0 1em; padding-left:1.35em; }
.single-article .article-body .rich-text ul{ list-style:disc; }
.single-article .article-body .rich-text ol{ list-style:decimal; }
.single-article .article-body .rich-text li + li{ margin-top:.35em; }
.single-article .article-body .rich-text blockquote{ margin:1.5em 0; padding-left:1.2em; border-left:3px solid var(--color-gold); color:#555; }
.single-article .article-body .rich-text :where(img, figure, .wp-caption){ max-width:100%; }
.single-article .article-body .rich-text img{ height:auto; }
.single-article .article-body .rich-text figcaption{ margin-top:.5em; color:#666; font-size:16px; line-height:1.4; }
.single-article .article-body .rich-text table{ display:block; max-width:100%; overflow-x:auto; border-collapse:collapse; }
.article-images{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:68px; margin:64px 0; }
.article-images figure{ min-width:0; margin:0; }
.article-images img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.article-share{ position:relative; margin:8px 0; }
.article-share::before{ content:''; position:absolute; top:50%; left:0; right:0; height:1px; background:var(--color-dark); }
.article-share .container{ position:relative; }
.article-share .share-bar{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:24px; min-width:0; background:var(--color-dark); color:#fff; padding:20px 36px; border:0; }
.article-share .share-label{ font-family:var(--font-heading); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:24px; color:#fff; }
.article-share .share-socials{ display:flex; flex-wrap:wrap; gap:14px; min-width:0; }
.article-share .share-socials a{ width:36px; height:36px; border:1px solid rgba(255,255,255,.55); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; }
.article-share .share-socials .icon-svg{ width:16px; height:16px; }
.article-related{ background:#fff; padding-top:64px; padding-bottom:166px; }
.article-related .related-title{ text-align:center; text-transform:uppercase; font-size:42px; margin-bottom:44px; }
.blog-card-media{ display:block; position:relative; overflow:hidden; }
.blog-card-media img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.blog-card .cat{ position:absolute; top:16px; left:16px; margin:0; display:inline-block; background:var(--color-dark-2); border:1px solid var(--color-gold-light); color:#fff; font-size:11px; padding:7px 16px; border-radius:22px; text-transform:uppercase; letter-spacing:.08em; }
.blog-card h3{ font-size:22px; text-transform:uppercase; line-height:1.25; margin:24px 0 18px; }
.blog-card .excerpt{ color:#555; font-size:18px; line-height:1.45; }
.blog-card .read-more{ display:inline-flex; align-items:center; gap:14px; font-weight:500; font-size:18px; text-transform:none; letter-spacing:.01em; color:var(--color-text); }
.blog-card .read-more .rm-arrow{ width:34px; height:34px; flex:0 0 34px; border:1px solid var(--color-gold); border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:var(--color-gold); font-size:11px; }

@media (max-width:991px){
	.single-article .article-hero{ min-height:420px; padding:64px 0; }
	.single-article .article-hero h1{ font-size:clamp(24px, 4.5vw, 36px); margin-bottom:32px; }
	.article-meta{ gap:12px 28px; }
	.article-meta .meta-item{ gap:12px; font-size:20px; }
	.article-meta .icon-svg{ width:28px; height:28px; }
	.single-article .article-body p{ font-size:20px; line-height:1.5; }
	.single-article .article-body h2{ font-size:30px; line-height:1.18; }
	.single-article .article-body h3{ font-size:25px; }
	.single-article .article-body h4{ font-size:21px; }
	.article-images{ gap:32px; }
	.article-share .share-socials a{ width:44px; height:44px; }
}

@media (max-width:767px){
	.single-article .article-hero{ min-height:280px; padding:48px 0; }
	.single-article .article-body{ padding:48px 0 30px; }
	.single-article .article-body p{ font-size:clamp(16px, 4.4vw, 18px); line-height:1.55; }
	.single-article .article-body h2{ font-size:clamp(24px, 7vw, 30px); }
	.single-article .article-body h3{ font-size:clamp(21px, 6vw, 25px); }
	.single-article .article-body h4{ font-size:20px; }
	.article-meta .meta-item{ font-size:16px; }
	.article-meta .icon-svg{ width:22px; height:22px; }
	.article-images{ grid-template-columns:1fr; margin:40px 0; }
	.article-share .share-bar{ flex-wrap:wrap; gap:16px; padding:16px 20px; }
	.article-share .share-label{ font-size:20px; }
	.article-share .share-socials{ justify-content:flex-end; }
	.single-article .article-body .rich-text .alignleft,
	.single-article .article-body .rich-text .alignright{
		float:none;
		display:block;
		margin-inline:auto;
	}
}

/* ==========================================================================
   Droit de la construction — maquette Desktop 6
   ========================================================================== */
.construction-page h1,.construction-page h2{ text-transform:uppercase; }
.page-template-page-construction .site-shell{ min-height:0; }
.construction-hero{ position:relative; min-height:630px; display:flex; align-items:center; color:#fff; background:#222 center/cover no-repeat; }
.construction-hero::before{ content:''; position:absolute; inset:0; background:rgba(12,16,18,.68); }
.construction-hero .container{ position:relative; z-index:1; width:100%; }
.construction-hero h1{ max-width:780px; margin:0 0 24px; color:#fff; font-size:56px; line-height:1.08; }
.construction-hero p{ max-width:900px; margin:0 0 42px; font-size:25px; line-height:1.35; }
.construction-button{ min-width:710px; max-width:100%; padding:20px 28px; border:2px solid rgba(255,255,255,.85); display:inline-flex; align-items:center; justify-content:space-between; color:#fff; font:700 26px/1.2 var(--font-heading); text-transform:uppercase; }
.construction-button span{ font:400 40px/1 var(--font-body); }
.construction-intro{ padding:76px 0 68px; background:#fff; }
.construction-intro h2,.construction-split h2{ max-width:980px; margin:0 0 38px; font-size:42px; line-height:1.16; }
.construction-copy{ font-size:25px; line-height:1.42; }
.construction-copy p{ margin-bottom:34px; }
.construction-quote{ min-height:375px; display:flex; align-items:center; text-align:center; color:#fff; background:var(--color-gold) url('assets/img/BTK-Avocats-banniere3.jpg') center / cover no-repeat; }
.construction-quote p{ max-width:1080px; margin:0 auto; font:700 48px/1.15 var(--font-heading); text-transform:uppercase; }
.construction-split{ display:grid; grid-template-columns:1.65fr 1fr; min-height:960px; background:#fff; }
.construction-split-copy{ align-self:center; padding:90px max(70px,calc((100vw - 1420px)/2)) 90px max(70px,calc((100vw - 1420px)/2)); }
.construction-split-image{ min-height:960px; }
.construction-split-image img{ width:100%; height:100%; object-fit:cover; }
.construction-contact{ position:relative; min-height:755px; padding:88px 0 110px; display:flex; align-items:center; color:#fff; text-align:center; background:#181818 center/cover no-repeat; }
.construction-contact::before{ content:''; position:absolute; inset:0; background:rgba(12,12,12,.78); }
.construction-contact .container{ position:relative; z-index:1; }
.construction-contact h2{ color:#fff; margin-bottom:12px; font-size:40px; }
.construction-contact-lead{ margin-bottom:50px; font-size:24px; }
.construction-contact-grid{ max-width:830px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.construction-contact-grid>a,.construction-contact-grid>div{ min-height:112px; padding:20px 34px; border:1px solid rgba(255,255,255,.75); display:flex; align-items:center; gap:20px; text-align:left; font-size:19px; }
.construction-contact-grid .icon-circle{ width:46px; height:46px; flex-basis:46px; }

@media (max-width:991px){
	.construction-hero h1{ font-size:42px; }
	.construction-button{ min-width:0; width:100%; font-size:20px; }
	.construction-intro h2,.construction-split h2{ font-size:34px; }
	.construction-copy{ font-size:20px; }
	.construction-quote p{ font-size:36px; }
	.construction-split{ grid-template-columns:1fr; }
	.construction-split-copy{ padding:70px 40px; }
	.construction-split-image{ min-height:520px; }
}
@media (max-width:767px){
	.construction-hero{ min-height:560px; }
	.construction-hero h1{ font-size:34px; }
	.construction-hero p{ font-size:18px; }
	.construction-quote{ min-height:180px; padding:28px 0; background-position:center; }
	.construction-quote p{ font-size:24px; line-height:1.12; }
	.construction-contact-grid{ grid-template-columns:1fr; }
}

@media (max-width:420px){
	.site-rail + .site-nav-overlay + .site-main .page-banner{
		min-height: 180px;
	}

	.page-banner .container{
		padding-top: 24px;
		padding-bottom: 24px;
	}

	.page-banner h1{
		font-size: 25px;
		line-height: 1.05;
	}

	.site-topbar .container{
		padding-left: 12px;
		padding-right: 12px;
		gap: 8px;
	}

	.topbar-logo img{
		height: 34px;
		width: auto;
	}

	.topbar-contact{
		gap: 7px;
	}

	.topbar-contact a{
		font-size: 12px;
	}

	.topbar-contact a[href^="mailto:"]{
		min-width: 0;
	}

	.site-topbar .icon-svg{
		width: 17px;
		height: 17px;
		flex-basis: 17px;
	}

	.site-footer::before,
	.site-footer::after{
		left: var(--gutter);
	}

	.site-footer .container{
		padding-left: calc(var(--rail-width) + var(--page-gutter) + 12px);
	}

	.footer-grid::after{
		left: calc((var(--gutter) + 36px) * -1);
	}

	.footer-brand{
		grid-column: auto;
		grid-template-columns: 1fr;
		justify-items: start;
	}

	.footer-grid{
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.footer-logo{
		width: 90px;
	}
}



/* MODIFICATION

/* ==========================================================================
   CARROUSEL DROIT IMMOBILIER — DESIGN FINAL
   ========================================================================== */

.btk-card-carousel-section{
	position: relative;
	padding: 0;
	overflow: hidden;
	background: #fff;
}

.btk-card-carousel-inner{
	position: relative;
	padding: 44px 0 86px;
	background:
		linear-gradient(
			to bottom,
			#ffffff 0,
			#ffffff 238px,
			var(--color-dark) 238px,
			var(--color-dark) 100%
		);
}

.btk-card-carousel-section .container{
	position: relative;
	z-index: 1;
	max-width: 1454px;
}

/* =====================================================
   Ligne du texte et des boutons
   ===================================================== */

.btk-carousel-header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	margin: 0 0 64px;
}

.btk-carousel-heading{
	flex: 1 1 auto;
	min-width: 0;
}

.btk-carousel-heading h2{
	margin: 0 0 10px;
	color: var(--color-dark);
	font-family: var(--font-heading);
	/* echelle du site : 24/30 (etait 28) */
	font-size: 24px;
	line-height: 1.25;
}

.btk-carousel-intro{
	color: var(--color-dark);
	font-family: var(--font-body);
	/* echelle du site : 16/26 (etait 20) */
	font-size: 16px;
	line-height: 1.6;
}

.btk-carousel-intro p{
	margin: 0;
}

.btk-carousel-controls{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	flex: 0 0 auto;
}

.btk-card-carousel-section .nav-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 42px;
	height: 42px;
	flex: 0 0 42px;

	margin: 0;
	padding: 0;

	border: 1px solid #555;
	border-radius: 50%;

	background: #fff;
	color: var(--color-dark);

	font-family: Arial, sans-serif;
	font-size: 15px;
	line-height: 1;
}

.btk-card-carousel-section .nav-btn:hover,
.btk-card-carousel-section .nav-btn:focus-visible{
	background: var(--color-dark);
	border-color: var(--color-dark);
	color: #fff;
}

.btk-card-carousel-section .nav-btn:focus-visible{
	outline: 2px solid var(--color-gold);
	outline-offset: 3px;
}

/* =====================================================
   Cartes
   ===================================================== */

.btk-card-carousel-section .card-carousel{
	position: relative;
	width: 100%;
	margin: 0;
	overflow: hidden;
	transform: none;
}

.btk-card-carousel-section .card-carousel .track{
	display: flex;
	align-items: stretch;
	gap: 12px;
	transition: transform .4s ease;
	will-change: transform;
}

.btk-card-carousel-section .card-carousel .card{
	display: flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 calc((100% - 24px) / 3);
	min-width: 0;
	height: 164px;

	margin: 0;
	padding: 24px 28px;

	border: 1px solid #88847c;
	background: var(--color-dark);
	color: #fff;

	font-family: var(--font-heading);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;

	text-align: center;
	text-transform: uppercase;
}

.btk-card-carousel-section .card-carousel .card a,
.btk-card-carousel-section .card-carousel .card span{
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;

	color: inherit;
	text-decoration: none;
}

/* =====================================================
   Texte situé dans la partie noire
   ===================================================== */

.btk-carousel-footer{
	position: relative;
	margin: 38px 0 0;
	padding: 0;

	color: #fff;
	font-family: var(--font-body);
	/* echelle du site : 16/26 (etait 20) */
	font-size: 16px;
	line-height: 1.6;
}

/* =====================================================
   Page immobilier : largeur et espacement du bloc précédent
   ===================================================== */

.page-id-9 .section-intro-text{
	padding-top: 58px;
	padding-bottom: 34px;
}

.page-id-9 .section-intro-text .container{
	max-width: 1454px;
}

.page-id-9 .section-intro-text .split-block.no-media{
	max-width: 1080px;
}

.page-id-9 .section-intro-text .split-text h2{
	max-width: 760px;
	margin-bottom: 22px;
	font-size: 30px;
	line-height: 1.08;
}

.page-id-9 .section-intro-text .rich-text p{
	margin: 0;
	font-size: 18px;
	line-height: 1.55;
}

/* Évite une ligne de séparation entre l’introduction et le carrousel */
.page-id-9 .section-intro-text + .btk-card-carousel-section{
	border-top: 0;
}

/* ==========================================================================
   TABLETTE
   ========================================================================== */

@media (max-width: 991px){

	.btk-card-carousel-inner{
		background:
			linear-gradient(
				to bottom,
				#ffffff 0,
				#ffffff 230px,
				var(--color-dark) 230px,
				var(--color-dark) 100%
			);
	}

	.btk-carousel-header{
		margin-bottom: 54px;
	}

	.btk-card-carousel-section .card-carousel .card{
		flex-basis: calc((100% - 12px) / 2);
		height: 154px;
		font-size: 18px;
	}
}

/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 767px){

	.page-id-9 .section-intro-text{
		padding-top: 40px;
		padding-bottom: 28px;
	}

	.page-id-9 .section-intro-text .split-text h2{
		font-size: 24px;
	}

	.page-id-9 .section-intro-text .rich-text p{
		font-size: 16px;
		line-height: 1.5;
	}

	.btk-card-carousel-inner{
		padding-top: 30px;
		padding-bottom: 54px;

		background:
			linear-gradient(
				to bottom,
				#ffffff 0,
				#ffffff 202px,
				var(--color-dark) 202px,
				var(--color-dark) 100%
			);
	}

	.btk-carousel-header{
		align-items: flex-end;
		gap: 16px;
		margin-bottom: 40px;
	}

	.btk-carousel-intro{
		font-size: 16px;
		line-height: 1.4;
	}

	.btk-carousel-controls{
		gap: 7px;
	}

	.btk-card-carousel-section .nav-btn{
		width: 38px;
		height: 38px;
		flex-basis: 38px;
	}

	.btk-card-carousel-section .card-carousel .track{
		gap: 12px;
	}

	.btk-card-carousel-section .card-carousel .card{
		flex: 0 0 82%;
		height: 142px;
		padding: 20px;
		font-size: 17px;
	}

	.btk-carousel-footer{
		margin-top: 30px;
		font-size: 16px;
	}
}



/* ===== Hauteur des images de split (conformité Figma) =====
   On retire le plancher de 545px : l'image épouse la hauteur réelle du texte
   (compacte si texte court, grande si texte long), comme le Figma. Global. */
.split-section .split-text{ min-height: 0; }

/* Filet gris au-dessus du carrousel blanc/noir : neutralisé.
   Doit inclure #main-content pour battre la règle globale `#main-content > * + *`. */
#main-content > .btk-card-carousel-section{ border-top: 0; }

/* Mobile : les images de split (empilées sous le texte) ne doivent pas être
   trop hautes — on impose un ratio paysage au lieu de la hauteur naturelle. */
@media (max-width: 767px){
	.split-section .split-media img{
		height: auto;
		aspect-ratio: 16 / 9;
		object-fit: cover;
		object-position: center top;
	}
}

/* Construction (desktop) : le texte du split est court, l'image des poutres
   ne doit pas dépasser en hauteur au-dessus du texte. On la centre et limite. */
@media (min-width: 992px){
	:is(.page-id-96, .page-id-48) .split-section .split-media{ align-self: center; }
	:is(.page-id-96, .page-id-48) .split-section .split-media img{
		height: auto;
		max-height: 540px;
		aspect-ratio: 5 / 4;
		object-fit: cover;
	}
}

/* Notre force : empiler dès qu'on quitte le desktop large (≤991px), pas seulement
   sur mobile ≤767px. Entre 768 et 991px la grille desktop (colonne mini 380px)
   écrasait « NOTRE FORCE » à côté des cartes. On force une colonne + on remet les
   enfants (placements grid-column:2 explicites) en flux naturel. Desktop ≥992px
   inchangé. */
@media (max-width: 991px){
  .force-block{ grid-template-columns: 1fr !important; }
  .force-block .force-media,
  .force-block .force-content,
  .force-block .force-title,
  .force-block .force-list{ grid-column: 1 !important; grid-row: auto !important; }

	/* Les cibles tactiles restent utilisables sur tablette et téléphone sans
	   agrandir les pictogrammes eux-mêmes. */
	.site-rail .menu-toggle{
		width:44px;
		height:44px;
		display:flex;
		flex-direction:column;
		align-items:center;
		justify-content:center;
	}
	.site-rail .menu-toggle span:not(.screen-reader-text){ width:32px; margin:3px 0; }
	.site-nav-overlay .nav-close{
		width:44px;
		height:44px;
		padding:0;
		display:grid;
		place-items:center;
	}
	.nav-btn,
	.btk-card-carousel-section .nav-btn{ width:44px; height:44px; flex-basis:44px; }
}

/* ==========================================================================
   Barre du haut : LOGO a gauche — COORDONNEES au centre — FR/EN a droite,
   sur UNE SEULE ligne, a toutes les largeurs.
   Le selecteur de langue est sorti du flux (position absolue a droite) pour que
   telephone + courriel se centrent vraiment dans la barre et non dans l'espace
   restant a gauche de FR/EN.
   ========================================================================== */
/* Logo a gauche, coordonnees a DROITE, FR/EN au bout — comme la reference
   fournie par le client. Une seule rangee, jamais de retour a la ligne. */
.site-topbar .container{ flex-wrap: nowrap; }
.topbar-contact{
	flex: 0 1 auto;
	flex-wrap: nowrap;
	justify-content: flex-end;
	margin-left: auto;
}

/* TELEPHONE UNIQUEMENT : on ne garde que les icones (appeler / ecrire) au lieu
   du numero et de l'adresse en entier. Ecrits, ils demandent 275px de texte
   pour 336px disponibles a 375px : ca passait sous FR/EN. En icones, la rangee
   reste large de ~110px, donc logo a gauche / icones au centre / FR-EN a droite
   tiennent sur une seule ligne sans se chevaucher. Sur bureau, le texte reste. */
@media (max-width: 767px){
	.site-topbar{ padding: 5px 0; }
	.site-topbar .container{ gap: 8px; padding-left: var(--gutter); padding-right: var(--gutter); }
	.topbar-logo img{ height: 30px; width: auto; }

	.topbar-contact{ gap: 14px; justify-content: flex-end; }
	/* font-size:0 masque le noeud de texte du lien, l'image garde sa taille */
	.topbar-contact a[href^="tel:"],
	.topbar-contact a[href^="mailto:"]{
		font-size: 0;
		gap: 0;
		padding: 6px;          /* zone tactile confortable */
		/* 0 0 auto : une regle mobile plus haut met le courriel en flex:1 1 auto,
		   sa boite s'etirait alors a 191px pour une icone de 26px et passait
		   sous FR/EN. */
		flex: 0 0 auto;
		max-width: none;
	}
	.topbar-contact .icon-badge{ width: 26px; height: 26px; flex: 0 0 26px; }

	.lang-switcher{ gap: 6px; font-size: 12px; }

	/* ------------------------------------------------------------------
	   RAIL : identique au bureau, vertical a gauche, avec le menu 2 lignes.
	   Les regles mobiles plus haut le couchaient en barre horizontale sous
	   la barre du haut ; on revient au rail fixe, juste plus etroit (56px
	   au lieu de 88) pour laisser la place au contenu sur un telephone.
	   ------------------------------------------------------------------ */
	.site-rail{
		width: var(--rail-width);
		height: auto;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		gap: 18px;
		padding: 16px 0;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	/* le bouton reprend sa place en haut du rail (2 barres, inchangees) */
	.site-rail .menu-toggle{
		position: static;
		width: 44px;
		height: 44px;
		margin: 0 auto 8px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.site-rail .menu-toggle span:not(.screen-reader-text){ width:32px; margin:3px 0; }
	.site-rail .rail-socials{
		flex-direction: column;
		margin-top: 0;
		gap: 8px;
	}
	/* Zones tactiles de 44px, en gardant les pastilles visuelles à 36px. */
	.site-rail .rail-socials a{ width:44px; height:44px; flex-basis:44px; }
	.site-rail .rail-socials a .icon-badge{ width:36px; height:36px; }

	/* le contenu et la barre du haut degagent le rail */
	.site-main{ margin-left: var(--rail-width); }
	.site-topbar .container{ padding-left: calc(var(--rail-width) + 10px); }

	/* Aucun bloc ne peut depasser la largeur de l'ecran : les images du collage
	   de la section « expertises » gardaient leur largeur intrinseque (330px),
	   ce qui empechait la colonne de se reduire et faisait defiler la page
	   lateralement (48px de debord a 375px). */
	.services-section .split-block > *,
	.services-section .services-media,
	.services-section .services-image{ min-width: 0; max-width: 100%; }
	.services-section .services-media img,
	.services-section .services-image img{ width: 100%; max-width: 100%; height: auto; }
	.services-section .service-item{ font-size: 17px; }
}


/* ==========================================================================
   REVISION CLIENT — ecarts avec la maquette (PDF « Difference maquette »)
   Ce bloc vient en dernier et prime sur les reglages precedents : le client
   demande maintenant de suivre la maquette (textes au fer a gauche, fonds or
   par image, photos sans cadre dore).
   ========================================================================== */

@media (min-width: 992px){

	/* ----- Accueil : banniere, texte du paragraphe sur 2 lignes ----- */
	.hero .container > p{
		max-width: 600px;
		font-size: 19px;
		line-height: 1.45;
		opacity: 1;
	}

	/* ----- Accueil : intro avocate (photo reduite, sans cadre dore) ----- */
	.hero + .section-dark .split-media::before{ display: none; }
	.hero + .section-dark .split-media{ width: 82%; }
	.hero + .section-dark .split-text{ text-align: left; padding-inline: 0; align-items: flex-start; }
	.hero + .section-dark .split-text h2,
	.hero + .section-dark .split-text p{ text-align: left; }
	.hero + .section-dark .split-text h2{ margin-bottom: 16px; }
	.hero + .section-dark .split-text p{ max-width: 540px; }

	/* ----- Accueil : expertises, texte au fer a gauche comme la maquette ----- */
	.services-section .split-text,
	.services-section .services-title,
	.services-section .services-intro,
	.services-section .services-footer-text{ text-align: left; }
	.services-section .services-title,
	.services-section .services-intro,
	.services-section .services-footer-text{ margin-left: 0; margin-right: 0; }
	/* Echelle de la maquette, fluide selon la largeur d'ecran */
	.services-section .services-title{ font-size: clamp(24px, 2.2vw, 33px); line-height: 1.2; letter-spacing: 0; margin-bottom: 24px; }
	.services-section .services-intro{ max-width: 680px; font-size: clamp(16px, 1.4vw, 21px); line-height: 1.5; margin-bottom: 36px; }
	.services-section .services-footer-text{ max-width: 660px; font-size: clamp(16px, 1.4vw, 21px); line-height: 1.5; margin: 36px 0 32px; }
	.services-section .services-grid{ column-gap: 56px; }
	.services-section .service-item{
		min-height: 96px; padding: 14px 0 20px; gap: 20px; font-size: clamp(17px, 1.4vw, 21px);
		border-bottom: 2px solid; border-image: linear-gradient(90deg, var(--color-gold-dark), var(--color-gold-light) 50%, var(--color-gold-dark)) 1;
	}
	.services-section .service-item span{ font-size: clamp(17px, 1.4vw, 21px); }
	.services-section .service-item .icon{ width: clamp(46px, 3.8vw, 56px); height: clamp(46px, 3.8vw, 56px); flex-basis: clamp(46px, 3.8vw, 56px); }
	.services-section .services-cta .btn{ min-height: 66px; padding: 14px 28px; font-size: clamp(18px, 1.5vw, 22px); max-width: 640px; }

	/* ----- Accueil : bandeau or « Contactez-nous » : titre sur 2 lignes ----- */
	.home .cta-banner h2{ max-width: 640px; font-size: 34px; line-height: 1.2; }
	.home .cta-banner p{ max-width: 480px; font-size: 18px; }

	/* ----- A propos (Me Zineb Kouidri) ----- */
	/* Barre doree en haut de la section blanche d'intro */
	:is(.page-id-6, .page-id-103) .page-banner + .section-intro-text{ position: relative; padding-top: 86px; }
	:is(.page-id-6, .page-id-103) .page-banner + .section-intro-text::before{
		content: ''; position: absolute; top: 0; left: 0; right: 0; height: 14px;
		background: url('assets/img/BTK-Avocats-banniere3.jpg') center / cover no-repeat;
	}
	/* Texte, titre et bouton au fer a gauche, comme la maquette */
	:is(.page-id-6, .page-id-103) .section-intro-text .split-block.no-media{ max-width: none; margin: 0; padding-left: 108px; }
	:is(.page-id-6, .page-id-103) .section-intro-text .split-text{ max-width: 1000px; margin: 0; text-align: left; }
	:is(.page-id-6, .page-id-103) .section-intro-text .split-text > *{ margin-left: 0; margin-right: 0; text-align: left; }
	:is(.page-id-6, .page-id-103) .section-intro-text .split-text h2{ max-width: 760px; }

	/* Section sombre « A coeur les interets... » : texte au fer a gauche */
	:is(.page-id-6, .page-id-103) #main-content > .section-dark.split-section .split-text{ text-align: left; padding-left: 154px; padding-right: 0; align-items: flex-start; }
	:is(.page-id-6, .page-id-103) #main-content > .section-dark.split-section .split-text h2,
	:is(.page-id-6, .page-id-103) #main-content > .section-dark.split-section .split-text p{ text-align: left; }
	:is(.page-id-6, .page-id-103) #main-content > .section-dark.split-section .split-text h2{ max-width: 440px; }

	/* « Une avocate proche du terrain » : pas de filet blanc au-dessus de la photo, texte a gauche */
	:is(.page-id-6, .page-id-103) #main-content > .section-dark + .split-section{ border-top: 0; }
	:is(.page-id-6, .page-id-103) .section:not(.section-dark).split-section .split-text{ text-align: left; padding-left: 72px; align-items: flex-start; }
	:is(.page-id-6, .page-id-103) .section:not(.section-dark).split-section .split-text h2,
	:is(.page-id-6, .page-id-103) .section:not(.section-dark).split-section .split-text p{ text-align: left; }
	:is(.page-id-6, .page-id-103) .section:not(.section-dark).split-section .split-text h2{ max-width: 420px; }

	/* « Un leadership salue... » : titre sur 2 lignes, puces blanches */
	:is(.page-id-6, .page-id-103) .section-dark > .container > h2{ max-width: 780px; text-wrap: balance; }
}
.section-dark .styled-list li::before{ color: #fff; }

/* Bloc CONTACT (toutes les pages) : photo plus claire en opacite sur fond sombre,
   comme la maquette (le voile etait trop leger, la photo ressortait trop). */
.contact-block::before{ background: rgba(24,24,24,.78); }

/* ----- Pages interieures (affaires, immobilier, construction) : sections texte + photo ----- */
@media (min-width: 992px){
	/* Pas de filet blanc entre la banniere et la section photo */
	:is(.page-id-44, .page-id-104, .page-id-95, .page-id-105, .page-id-96, .page-id-48) #main-content > .page-banner + .split-section{ border-top: 0; }
	/* Photo a droite : collee au bord de la fenetre, sans bande blanche */
	:is(.page-id-44, .page-id-104, .page-id-95, .page-id-105, .page-id-96, .page-id-48) .split-section:not(.section-dark) .split-block.reverse .split-media{
		margin-right: calc(-1 * max(24px, (100vw - 88px - 1454px) / 2 + 24px));
	}
	/* Texte au fer a gauche (paragraphes justifies comme la maquette) */
	:is(.page-id-44, .page-id-104, .page-id-95, .page-id-105, .page-id-96, .page-id-48) .split-section:not(.section-dark) .split-text{
		text-align: left; align-items: flex-start; padding-left: 100px; padding-right: 48px;
	}
	:is(.page-id-44, .page-id-104, .page-id-95, .page-id-105, .page-id-96, .page-id-48) .split-section:not(.section-dark) .split-text h2{
		text-align: left; max-width: 560px; text-wrap: balance;
	}
	:is(.page-id-44, .page-id-104, .page-id-95, .page-id-105, .page-id-96, .page-id-48) .split-section:not(.section-dark) .split-text p{
		text-align: justify;
	}
}

/* ----- Pages interieures : sections d'intro (sans photo) au fer a gauche, echelle de la maquette ----- */
@media (min-width: 992px){
	/* Texte aligne sur le bord gauche des cartes (immobilier) / sur le texte de la banniere (construction) */
	:is(.page-id-95, .page-id-105, .page-id-96, .page-id-48) .section-intro-text .split-block.no-media{ max-width: none; margin: 0; padding-left: 0; }
	:is(.page-id-96, .page-id-48) .section-intro-text .split-block.no-media{ padding-left: 110px; }
	:is(.page-id-95, .page-id-105, .page-id-96, .page-id-48) .section-intro-text .split-text{ max-width: 1120px; margin: 0; text-align: left; }
	:is(.page-id-95, .page-id-105, .page-id-96, .page-id-48) .section-intro-text .split-text > *{ margin-left: 0; margin-right: 0; text-align: left; }
	:is(.page-id-95, .page-id-105, .page-id-96, .page-id-48) .section-intro-text .split-text h2{
		max-width: 720px; font-size: 30px; line-height: 1.2; text-wrap: balance;
	}
	:is(.page-id-95, .page-id-105, .page-id-96, .page-id-48) .section-intro-text .split-text p{ max-width: 1120px; font-size: 19px; line-height: 1.55; }

	/* Banniere construction : titre sur deux lignes, paragraphe plus etroit */
	:is(.page-id-96, .page-id-48) .page-banner h1{ max-width: 640px; }
	:is(.page-id-96, .page-id-48) .page-banner p{ max-width: 640px; }
}

/* Construction : la photo (charpente) remplit toute la hauteur de la section,
   sans bande blanche autour. */
@media (min-width: 992px){
	:is(.page-id-96, .page-id-48) .split-section:not(.section-dark){ padding-block: 0; }
	:is(.page-id-96, .page-id-48) .split-section .split-media{ align-self: stretch; }
	:is(.page-id-96, .page-id-48) .split-section .split-media img{ height: 100%; max-height: none; aspect-ratio: auto; }
	:is(.page-id-96, .page-id-48) .split-section:not(.section-dark) .split-text{ padding-block: 96px; }
}

/* Les blocs sans photo n'ont rien a inverser : « reverse » (direction rtl) les collait a droite. */
.split-block.no-media{ direction: ltr; }

@media (min-width: 1280px){
	.services-section .service-item span{ white-space: nowrap; }
}

body:not(.home) .cta-banner h2{ text-wrap: balance; }

/* Liste « Un leadership salue... » : echelle de la maquette, fluide (tous ecrans) */
.bullet-list-section > .container > h2{ font-size: clamp(22px, 2.3vw, 34px); line-height: 1.2; margin-bottom: clamp(24px, 2.6vw, 40px); }
.bullet-list-section .styled-list{ gap: clamp(16px, 2vw, 30px); }
.bullet-list-section .styled-list li{ padding-left: clamp(26px, 2.8vw, 40px); }
.bullet-list-section .styled-list li p{ font-size: clamp(16px, 1.4vw, 20px); line-height: 1.4; }
.bullet-list-section .styled-list li strong{ font-weight: 700; }
.bullet-list-section .styled-list li::before{ color: #fff; font-size: clamp(12px, 1.1vw, 16px); top: .4em; }

/* Droit des affaires, section « litiges commerciaux » : textes a l'echelle de la maquette (bureau) */
@media (min-width: 992px){
	:is(.page-id-44, .page-id-104) .section-carousel > .container > h2{ font-size: clamp(26px, 2.4vw, 36px); line-height: 1.2; max-width: 900px; margin-bottom: clamp(24px, 2.6vw, 40px); text-wrap: balance; }
	:is(.page-id-44, .page-id-104) .section-carousel > .container > .rich-text,
	:is(.page-id-44, .page-id-104) .section-carousel > .container > p{ max-width: 1300px; }
	:is(.page-id-44, .page-id-104) .section-carousel > .container > .rich-text p,
	:is(.page-id-44, .page-id-104) .section-carousel > .container > p,
	:is(.page-id-44, .page-id-104) .section-carousel .carousel-footer-text{ font-size: clamp(17px, 1.55vw, 23px); line-height: 1.4; }
}

/* Bandeaux or des pages interieures (immobilier, affaires, construction...) : image banniere4 */
body:not(.home) .section-gold,
body:not(.home) .cta-banner{
	background: url('assets/img/BTK-Avocats-banniere4.jpg') center / cover no-repeat;
}

/* ==========================================================================
   Formulaire de contact — design de la maquette : le libelle se lit DANS le
   champ (PT Serif gras, majuscules) et disparait a la saisie ; liste deroulante
   avec chevron dore a 20px du bord droit ; bouton « Envoyer » or, centre.
   ========================================================================== */
.contact-form .field{ position: relative; margin-bottom: clamp(16px, 1.8vw, 26px); }
.contact-form label:not(.form-honeypot label){
	position: absolute; left: 0; right: 0; top: 0; margin: 0;
	height: clamp(54px, 5vw, 64px); display: flex; align-items: center;
	padding: 0 clamp(16px, 1.8vw, 20px); pointer-events: none;
	font-family: var(--font-heading); font-weight: 700; letter-spacing: 0;
	font-size: clamp(16px, 1.45vw, 20px); text-transform: uppercase; color: #fff;
	transition: opacity .15s ease;
}
.contact-form .field:has(textarea) label{ align-items: flex-start; padding-top: clamp(14px, 1.4vw, 18px); height: auto; }
.contact-form .field:focus-within label,
.contact-form .field:has(:is(input, textarea):not(:placeholder-shown)) label,
.contact-form .field:has(select) label{ opacity: 0; }
.contact-form input, .contact-form select, .contact-form textarea{
	height: clamp(54px, 5vw, 64px); padding: 0 clamp(16px, 1.8vw, 20px);
	border: 2px solid rgba(255,255,255,.92); border-radius: 0; background: transparent;
	font-size: clamp(16px, 1.3vw, 18px); color: #fff;
}
.contact-form textarea{ height: auto; min-height: clamp(110px, 10vw, 128px); padding-top: clamp(14px, 1.4vw, 18px); padding-bottom: 14px; resize: vertical; }
.contact-form select{
	-webkit-appearance: none; appearance: none; cursor: pointer;
	padding-right: 64px; background-color: var(--color-dark);
	font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; font-size: clamp(16px, 1.45vw, 20px);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='15' viewBox='0 0 26 15'%3E%3Cpath d='M1.5 1.5l11.5 11.5L24.500 1.500' fill='none' stroke='%23a89868' stroke-width='2.500'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 20px center; background-size: 26px 15px;
}
.contact-form .btn.btn-gold{
	display: block; width: min(100%, 300px); height: clamp(56px, 5vw, 66px); min-height: 0; margin: clamp(24px, 3vw, 36px) auto 0; padding: 0;
	background: #85764f; border-color: #85764f; color: #fff; text-align: center;
	font-family: var(--font-heading); font-weight: 700; font-size: clamp(20px, 2vw, 30px); text-transform: uppercase; letter-spacing: 0;
}
.contact-form .btn.btn-gold span{ display: none; }
.contact-form .btn.btn-gold:hover{ background: var(--color-gold-dark); border-color: var(--color-gold-dark); }

/* ==========================================================================
   Footer (bureau) — repartition de la maquette : marque (logo + texte) a
   gauche, coordonnees au centre-droit, « Suivez-nous » a l'extremite droite,
   tous alignes sur le haut ; credits sur une seule ligne.
   ========================================================================== */
@media (min-width: 1100px){
	.footer-grid{
		grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) auto;
		column-gap: clamp(40px, 6vw, 110px);
		align-items: start;
	}
	.footer-brand{ gap: clamp(24px, 5.5vw, 85px); }
	.footer-logo{ width: clamp(96px, 9vw, 140px); }
	.footer-brand p{ font-size: clamp(16px, 1.35vw, 20px); line-height: 1.5; max-width: 420px; }
	.footer-contact{ gap: 20px; }
	.footer-contact .item{ gap: 19px; font-size: clamp(16px, 1.35vw, 20px); line-height: 1.4; }
	.footer-contact .icon-circle{ width: clamp(46px, 3.7vw, 54px); height: clamp(46px, 3.7vw, 54px); flex: 0 0 clamp(46px, 3.7vw, 54px); }
	.footer-social-label{ font-family: var(--font-heading); font-weight: 700; font-size: clamp(16px, 1.35vw, 20px); letter-spacing: 0; margin: 0 0 22px; }
	.site-footer .rail-socials--row{ gap: 12px; }
	.site-footer .rail-socials--row a{ width: clamp(46px, 3.7vw, 54px); height: clamp(46px, 3.7vw, 54px); flex-basis: clamp(46px, 3.7vw, 54px); }
	.site-footer .rail-socials--row a .icon-badge{ width: 100%; height: 100%; }
	.footer-credits{ flex-direction: row; align-items: center; gap: 12px 32px; flex-wrap: wrap; justify-content: flex-end; }
	.site-footer .footer-bottom > a,
	.site-footer .footer-powered,
	.site-footer .footer-visual-credit{ font-size: clamp(16px, 1.3vw, 19px) !important; }
}
.footer-contact .item-text{ display: block; text-align: left; }

/* Apparitions douces au defilement (voir assets/js/main.js). `translate` et non
   `transform` : ne contrarie aucune mise en page qui utilise deja transform. */
.has-reveal .reveal{
	opacity: 0;
	translate: 0 22px;
	transition: opacity .9s ease, translate .9s cubic-bezier(.22, .61, .36, 1);
	transition-delay: var(--reveal-delay, 0s);
}
.has-reveal .reveal.is-visible{ opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce){
	.has-reveal .reveal{ opacity: 1; translate: none; transition: none; }
}

/* Banniere droit de la construction : effet « fume » renforce (plus dense cote texte)
   pour la lisibilite du titre et du paragraphe. */
:is(.page-id-96, .page-id-48) .page-banner::before{
	background: linear-gradient(90deg, rgba(10,10,10,.9) 0%, rgba(10,10,10,.8) 45%, rgba(10,10,10,.6) 100%);
}